:root { --brand-primary: #FF3D33; --brand-primary-dark: #d93028; --brand-primary-soft: #ffe1df; --surface: #fff; --surface-muted: #f8fafc; --surface-strong: #f1f5f9; --border-soft: #e2e8f0; --text-strong: #0f172a; --text-muted: #64748b; --sidebar-border: rgba(255,255,255,.18); --shadow-soft: 0 .5rem 1.5rem rgba(15,23,42,.07); --shadow-hover: 0 .85rem 2rem rgba(15,23,42,.11); --bs-primary: #FF3D33; --bs-primary-rgb: 255,61,51; --bs-link-color: #FF3D33; --bs-link-color-rgb: 255,61,51; --bs-link-hover-color: #d93028; --bs-link-hover-color-rgb: 217,48,40; }
body { font-family: Inter, Arial, sans-serif; background: var(--surface-muted); color: #1e293b; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.app-body { background: radial-gradient(circle at top left, rgba(255,61,51,.08), transparent 28rem), linear-gradient(180deg, #fff 0, var(--surface-muted) 16rem); }
a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-dark); }
.auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-primary) 0%, #b44fdf 60%, #ff6f67 100%); }
.auth-outer { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-inner { width: 100%; max-width: 460px; }
.auth-brand-mark { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: .35rem; }
.auth-mark-img { height: 2.8rem; width: auto; }
.auth-quick-links { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin-top: 1.1rem; }
.auth-quick-link { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.85); font-size: .76rem; font-weight: 600; text-decoration: none !important; background: rgba(255,255,255,.1); transition: background .15s, color .15s, border-color .15s; }
.auth-quick-link:hover { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.45); }
.auth-mark-name { font-size: 1.05rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.auth-brand-tagline { text-align: center; color: rgba(255,255,255,.72); font-size: .82rem; margin-bottom: 1.5rem; }
.auth-form-card { border-radius: 1.25rem; border: none; box-shadow: 0 1.5rem 3rem rgba(0,0,0,.18); background: #fff; }
.auth-page-footer { text-align: center; color: rgba(255,255,255,.55); font-size: .74rem; margin-top: 1.25rem; margin-bottom: 0; }
.auth-logo { max-width: 48px; width: 100%; height: auto; display: block; margin: 0 auto 1.5rem auto; }
.auth-brand-panel { background: linear-gradient(135deg, var(--brand-primary), #ff6f67); display: flex; align-items: center; justify-content: center; }
.auth-brand-copy { max-width: 540px; text-align: center; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 250px; background: var(--brand-primary); color: #fff; display: flex; flex-direction: row; padding: 0; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1040; transition: transform .3s ease; overflow: hidden; box-shadow: .5rem 0 1.75rem rgba(0,0,0,.12); }
.sidebar-close { position: absolute; top: .65rem; right: .65rem; background: transparent; border: none; color: rgba(255,255,255,.7); font-size: 1.1rem; padding: .25rem; display: none; z-index: 2; cursor: pointer; }
.sidebar-rail { width: 52px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: .9rem 0; border-right: 1px solid rgba(255,255,255,.12); }
.sidebar-rail-top, .sidebar-rail-bottom { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.sidebar-rail-brand { display: flex; align-items: center; justify-content: center; margin-bottom: .3rem; }
.sidebar-rail-brand img { width: 26px; height: 26px; object-fit: contain; }
.sidebar-rail-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: .45rem; color: rgba(255,255,255,.6); font-size: .95rem; text-decoration: none !important; transition: background .15s, color .15s; }
.sidebar-rail-icon:hover, .sidebar-rail-icon.active { background: rgba(255,255,255,.15); color: #fff; }
.sidebar-rail-user { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; margin-top: .3rem; }
.sidebar-panel { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: .85rem .6rem; }
.sidebar-panel-header { padding-bottom: .55rem; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: .5rem; flex-shrink: 0; }
.sidebar-panel-title { display: block; font-size: .82rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-panel-tagline { display: block; font-size: .67rem; color: rgba(255,255,255,.52); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: .25rem .4rem .9rem; border-bottom: 1px solid var(--sidebar-border); margin-bottom: .65rem; flex-shrink: 0; }
.brand-logo { width: 96px; height: 96px; object-fit: contain; background: rgba(255,255,255,.98); border-radius: .75rem; padding: .35rem; box-shadow: 0 .65rem 1.5rem rgba(127,29,29,.22); }
.sidebar-brand-text h5 { margin-bottom: 0; font-size: .85rem; font-weight: 600; }
.sidebar-brand-text small { opacity: .72; font-size: .7rem; }
.sidebar-nav { display: flex; flex-direction: column; gap: .15rem; overflow-y: auto; flex: 1; scrollbar-width: none; -ms-overflow-style: none; }
.sidebar-nav::-webkit-scrollbar { display: none; }
.sidebar-link { color: rgba(255,255,255,.88) !important; text-decoration: none !important; padding: .52rem .75rem; border-radius: .6rem; font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.sidebar-link:hover,.sidebar-link:visited { background: rgba(255,255,255,.16); color: #fff !important; text-decoration: none !important; }
.sidebar-link:hover { transform: translateX(2px); }
.sidebar-link.active,.sidebar-link.active:visited { background: #fff; color: var(--brand-primary) !important; font-weight: 700; box-shadow: 0 .45rem 1rem rgba(127,29,29,.16); }
.sidebar-link i { margin-right: .45rem; font-size: .9rem; }
.sidebar-group { display: flex; flex-direction: column; margin: 0; }
.sidebar-group-toggle { color: rgba(255,255,255,.88) !important; text-decoration: none !important; padding: .52rem .75rem; border-radius: .6rem; font-size: .875rem; font-weight: 600; display: flex; align-items: center; transition: background-color .18s ease, transform .18s ease; }
.sidebar-group-toggle:hover,.sidebar-group-toggle:focus,.sidebar-group-toggle:visited { background: rgba(255,255,255,.16); color: #fff !important; text-decoration: none !important; }
.sidebar-group-toggle:hover { transform: translateX(2px); }
.sidebar-group-toggle > i:first-child { margin-right: .45rem; font-size: .9rem; flex-shrink: 0; }
.sidebar-chevron { font-size: .7rem; transition: transform .2s ease; flex-shrink: 0; margin-left: auto; }
.sidebar-group-toggle[aria-expanded="true"] .sidebar-chevron { transform: rotate(180deg); }
.sidebar-sublink { color: rgba(255,255,255,.78) !important; text-decoration: none !important; padding: .4rem .75rem .4rem 2.25rem; border-radius: .55rem; font-size: .86rem; font-weight: 500; display: block; transition: background-color .18s ease, color .18s ease; }
.sidebar-sublink:hover,.sidebar-sublink:visited { background: rgba(255,255,255,.13); color: #fff !important; text-decoration: none !important; }
.sidebar-sublink.active,.sidebar-sublink.active:visited { background: rgba(255,255,255,.18); color: #fff !important; font-weight: 600; }
.sidebar-sublink i { margin-right: .4rem; font-size: .85rem; }
.sidebar-footer { flex-shrink: 0; padding: .6rem .1rem 0; border-top: 1px solid rgba(255,255,255,.12); margin-top: auto; }
.sidebar-user { font-size: .75rem; color: rgba(255,255,255,.65); font-weight: 600; padding: 0 .25rem .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-logout { color: rgba(255,255,255,.8) !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.15) !important; font-size: .78rem; font-weight: 600; }
.btn-logout:hover { color: #fff !important; background: rgba(255,255,255,.15) !important; border-color: rgba(255,255,255,.22) !important; }
.app-main { flex: 1; display: flex; flex-direction: column; margin-left: 250px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(226,232,240,.85); box-shadow: 0 .25rem 1rem rgba(15,23,42,.035); backdrop-filter: blur(10px); position: relative; z-index: 100; }
.topbar > .d-flex:first-child { min-width: 0; }
.topbar > .d-flex:last-child { flex-shrink: 0; gap: .75rem !important; }
.topbar h4 { color: var(--text-strong); font-weight: 750; letter-spacing: 0; line-height: 1.15; }
.topbar small { display: block; line-height: 1.25; }
.app-content { flex: 1; padding: 1.75rem; }
.app-footer { display: flex; justify-content: space-between; padding: 1rem 1.5rem; background: rgba(255,255,255,.86); border-top: 1px solid var(--border-soft); color: var(--text-muted); }
.dashboard-card, .content-card { border: 1px solid rgba(226,232,240,.9); box-shadow: 0 .35rem 1.1rem rgba(15,23,42,.055); border-radius: .75rem; background: var(--surface); }
.dashboard-card { position: relative; min-height: 8.25rem; overflow: hidden; color: var(--text-strong); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.dashboard-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: .28rem; background: linear-gradient(90deg, var(--brand-primary), #ff8a83); }
.dashboard-card::after { content: ""; position: absolute; right: 1rem; bottom: 1rem; width: 3rem; height: 3rem; border-radius: .85rem; background: var(--brand-primary-soft); opacity: .75; }
.dashboard-card:hover { color: var(--text-strong); transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: rgba(255,61,51,.24); }
.dashboard-card .card-body { position: relative; z-index: 1; padding: 1.35rem; }
.dashboard-card .card-body span { color: var(--text-muted); font-size: .82rem; display: block; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-card .card-body h3 { margin-top: .55rem; margin-bottom: 0; font-weight: 800; font-size: clamp(2rem, 4vw, 2.65rem); color: var(--text-strong); letter-spacing: 0; }
.content-card, .card.border-0.shadow-sm { border: 1px solid rgba(226,232,240,.9) !important; box-shadow: 0 .35rem 1.1rem rgba(15,23,42,.055) !important; border-radius: .75rem; }
.card-body h5 { color: var(--text-strong); font-weight: 750; }
.content-card > .card-body > .d-flex.flex-column.flex-md-row,
.content-card > .card-body > .d-flex.justify-content-between,
.content-card > .card-body > .mb-4:first-child { position: relative; padding-bottom: .25rem; }
.content-card > .card-body > .d-flex.flex-column.flex-md-row h5,
.content-card > .card-body > .d-flex.justify-content-between h5,
.content-card > .card-body > .mb-4:first-child h5 { display: flex; align-items: center; gap: .55rem; font-weight: 800; }
.content-card > .card-body > .d-flex.flex-column.flex-md-row h5::before,
.content-card > .card-body > .d-flex.justify-content-between h5::before,
.content-card > .card-body > .mb-4:first-child h5::before { content: ""; width: .25rem; height: 1.05rem; border-radius: 999px; background: var(--brand-primary); box-shadow: 0 .2rem .55rem rgba(255,61,51,.24); }
.module-nav { background: linear-gradient(180deg, #fff, #fbfdff); border-radius: .7rem; }
.module-nav .btn { border-color: transparent; background: #fff; box-shadow: inset 0 0 0 1px #e2e8f0; }
.module-nav .btn:hover { color: var(--brand-primary); border-color: rgba(255,61,51,.24); background: #fff7f6; box-shadow: inset 0 0 0 1px rgba(255,61,51,.22); }
.section-nav .nav-link { border-radius: .75rem; color: #334155; }
.section-nav .nav-link.active { background: var(--brand-primary-soft); color: var(--brand-primary); }
.table-responsive { border: 1px solid #e8eef5; border-radius: .75rem; background: #fff; }
.table { --bs-table-striped-bg: #fbfdff; --bs-table-hover-bg: #fff7f6; }
.table-responsive .table { margin-bottom: 0; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-bottom-color: var(--border-soft); }
.table thead th:first-child, .table tbody td:first-child { padding-left: 1rem; }
.table thead th:last-child, .table tbody td:last-child { padding-right: 1rem; }
.table tbody td { vertical-align: middle; color: #334155; border-color: #eef2f7; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr { transition: background-color .15s ease; }
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { background: #fffafa; }
.content-card .display-6 { color: var(--text-strong); font-size: 2.15rem; line-height: 1; letter-spacing: 0; }
.content-card .display-6 + .small, .content-card .fw-semibold.fs-5 + .small { color: var(--text-muted) !important; }
.content-card.h-100 > .card-body:has(.display-6) { position: relative; overflow: hidden; }
.content-card.h-100 > .card-body:has(.display-6)::before { content: ""; position: absolute; inset: 0 0 auto 0; height: .22rem; background: linear-gradient(90deg, var(--brand-primary), #ff8a83); }
.content-card.h-100 > .card-body:has(.display-6)::after { content: ""; position: absolute; right: 1rem; bottom: 1rem; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--brand-primary-soft); opacity: .62; }
.content-card.h-100 > .card-body:has(.display-6) > * { position: relative; z-index: 1; }
.content-card .border.rounded-4,
.content-card .border.rounded-3,
.content-card .border.rounded { border-color: #e2e8f0 !important; border-radius: .75rem !important; background: linear-gradient(180deg, #fff, #fbfdff); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.content-card form.row.g-3,
.content-card form.d-flex.flex-column,
.content-card form.d-flex.gap-2 { padding: .75rem; border: 1px solid #e8eef5; border-radius: .75rem; background: #fbfdff; }
.content-card form.row.g-3 .form-control,
.content-card form.row.g-3 .form-select,
.content-card form.d-flex.flex-column .form-control,
.content-card form.d-flex.flex-column .form-select,
.content-card form.d-flex.gap-2 .form-control,
.content-card form.d-flex.gap-2 .form-select { background-color: #fff; }
.form-section-title { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 750; color: #1e293b; margin-bottom: 1.25rem; letter-spacing: 0; }
.form-section-title::before { content: ""; width: .28rem; height: 1.25rem; border-radius: 999px; background: linear-gradient(180deg, var(--brand-primary), #ff8a83); box-shadow: 0 .25rem .65rem rgba(255,61,51,.25); }
.form-section-title::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, rgba(226,232,240,.95), transparent); }
.content-card .row.g-3 { row-gap: 1.2rem !important; }
.content-card .row.g-3 > [class*="col-"] { position: relative; }
.content-card .row.g-3 > [class*="col-"]::after { content: ""; position: absolute; left: calc(var(--bs-gutter-x) * .5); right: calc(var(--bs-gutter-x) * .5); bottom: -.6rem; height: 1px; background: rgba(226,232,240,.45); }
.content-card .row.g-3 > [class*="col-"]:nth-last-child(-n+3)::after { display: none; }
.form-label.required-label { display: inline-flex; align-items: center; gap: .4rem; }
.form-label.required-label::after { content: "Required"; display: inline-flex; align-items: center; padding: .08rem .38rem; border-radius: 999px; background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; font-size: .62rem; font-weight: 800; letter-spacing: 0; line-height: 1.35; }
.metric-label { color: #64748b; font-size: .9rem; }
.profile-stat { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 6.4rem; border: 1px solid rgba(226,232,240,.9); border-radius: .75rem; padding: 1.15rem; background: #fff; box-shadow: 0 .35rem 1.1rem rgba(15,23,42,.055); overflow: hidden; }
.profile-stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: .22rem; background: linear-gradient(90deg, var(--brand-primary), #ff8a83); }
.profile-stat-icon { width: 2.55rem; height: 2.55rem; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; color: var(--brand-primary); background: var(--brand-primary-soft); flex-shrink: 0; }
.profile-stat h3 { color: var(--text-strong); font-weight: 800; letter-spacing: 0; }
.employee-profile-card { overflow: hidden; }
.employee-profile-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding: 1.5rem; background: linear-gradient(180deg, #fff7f6, #fff 78%); border-bottom: 1px solid rgba(226,232,240,.9); }
.employee-profile-identity { display: flex; align-items: center; gap: 1rem; min-width: 16rem; }
.employee-profile-avatar { width: 5.35rem; height: 5.35rem; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 .7rem 1.6rem rgba(15,23,42,.12); flex-shrink: 0; }
.employee-profile-avatar-fallback { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fff, #f1f5f9); color: #475569; font-size: 1.55rem; font-weight: 800; }
.employee-profile-name { display: flex; align-items: center; gap: .45rem; margin: 0 0 .25rem; color: var(--text-strong); font-weight: 800; letter-spacing: 0; }
.employee-profile-edit { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border-radius: .5rem; color: var(--brand-primary); background: #fff; border: 1px solid rgba(255,61,51,.24); text-decoration: none; font-size: .9rem; }
.employee-profile-edit:hover { color: var(--brand-primary-dark); background: var(--brand-primary-soft); }
.employee-profile-subtitle { color: var(--text-muted); font-weight: 650; }
.employee-profile-subtitle span { color: #cbd5e1; margin: 0 .35rem; }
.employee-profile-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .65rem; min-width: 0; }
.employee-profile-tabs, .employee-record-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.employee-profile-tabs { padding: .25rem; border: 1px solid #e2e8f0; border-radius: .8rem; background: rgba(255,255,255,.72); }
.employee-profile-tabs .btn { border-color: transparent; background: transparent; box-shadow: none; }
.employee-profile-tabs .btn:hover { background: #fff; border-color: #e2e8f0; }
.employee-profile-tabs .btn i, .employee-record-actions .btn i { margin-right: .35rem; }
.profile-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: 1.5rem; }
.profile-detail-item { min-height: 4.55rem; padding: .95rem 1rem; border: 1px solid #edf2f7; border-radius: .7rem; background: linear-gradient(180deg, #fff, #fbfdff); }
.profile-detail-item span { display: block; margin-bottom: .28rem; color: var(--text-muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.profile-detail-item strong { display: block; color: var(--text-strong); font-size: .98rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.profile-detail-item-wide { grid-column: 1 / -1; }
.employee-side-column { display: flex; flex-direction: column; }
.profile-side-card { overflow: hidden; }
.profile-side-title { display: flex; align-items: center; gap: .55rem; color: var(--text-strong); font-weight: 800; margin-bottom: 1rem; }
.profile-side-title i { color: var(--brand-primary); }
.profile-empty-state { display: flex; align-items: center; justify-content: center; gap: .55rem; background: #fbfdff; border-radius: .75rem; }
.profile-empty-state i { color: #94a3b8; font-size: 1.1rem; }
.profile-contact-card { border: 1px solid #e2e8f0; border-radius: .75rem; padding: 1rem; background: linear-gradient(180deg, #fff, #fbfdff); }
.empty-state { border: 1px dashed #cbd5e1; border-radius: .75rem; padding: 2rem; text-align: center; background: linear-gradient(180deg, #fff, #fbfdff); color: var(--text-muted); }
.badge.text-bg-light, .badge.bg-light { border: 1px solid #e2e8f0 !important; background: #f8fafc !important; color: #475569 !important; }
.badge { letter-spacing: 0; font-weight: 750; }
.btn { border-radius: .6rem; font-weight: 700; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: #e2e8f0; --bs-btn-hover-bg: #f8fafc; --bs-btn-hover-border-color: #cbd5e1; box-shadow: 0 .25rem .85rem rgba(15,23,42,.045); }
.btn-outline-secondary { --bs-btn-border-color: #cbd5e1; --bs-btn-color: #475569; --bs-btn-bg: #fff; --bs-btn-hover-bg: #f8fafc; --bs-btn-hover-border-color: #94a3b8; --bs-btn-hover-color: #0f172a; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.btn-primary { --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-bg: var(--brand-primary-dark); --bs-btn-hover-border-color: var(--brand-primary-dark); --bs-btn-active-bg: var(--brand-primary-dark); --bs-btn-active-border-color: var(--brand-primary-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 .45rem .9rem rgba(255,61,51,.2); }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 .65rem 1.1rem rgba(217,48,40,.25); }
.btn-outline-primary { --bs-btn-color: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-bg: var(--brand-primary); --bs-btn-hover-border-color: var(--brand-primary); --bs-btn-hover-color: #fff; }
.btn-link { color: var(--brand-primary); }
.btn-link:hover, .btn-link:focus { color: var(--brand-primary-dark); }
.badge.bg-light.text-primary, .text-primary { color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.text-bg-primary { background-color: var(--brand-primary) !important; color: #fff !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.link-primary { color: var(--brand-primary) !important; }
.link-primary:hover { color: var(--brand-primary-dark) !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--brand-primary) !important; color: #fff !important; }
.page-link { color: var(--brand-primary); }
.pagination { gap: .25rem; }
.page-link { border-radius: .5rem; border-color: #e2e8f0; min-width: 2rem; text-align: center; }
.page-item:first-child .page-link, .page-item:last-child .page-link { border-radius: .5rem; }
.page-item.active .page-link { background-color: var(--brand-primary); border-color: var(--brand-primary); box-shadow: 0 .35rem .75rem rgba(255,61,51,.18); }
.form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.form-control, .form-select { border-color: #dbe3ec; border-radius: .62rem; box-shadow: inset 0 1px 1px rgba(15,23,42,.025); }
input.form-control:required, select.form-select:required, textarea.form-control:required { background-color: #e9f8ee; border-color: #b7e2c3; }
input.form-control:required::placeholder, textarea.form-control:required::placeholder { color: #679b76; }
.form-control:focus, .form-select:focus { border-color: rgba(255,61,51,.45); box-shadow: 0 0 0 .25rem rgba(255,61,51,.15); }
input.form-control:required:focus, select.form-select:required:focus, textarea.form-control:required:focus { background-color: #f1fbf4; border-color: #82c998; box-shadow: 0 0 0 .25rem rgba(34,197,94,.16); }
input[type="file"].form-control { padding: .45rem; background: #fff; }
input[type="file"].form-control::file-selector-button { margin: -.45rem .75rem -.45rem -.45rem; padding: .55rem .85rem; border: 0; border-right: 1px solid #dbe3ec; background: #f8fafc; color: #334155; font-weight: 700; transition: background-color .16s ease, color .16s ease; }
input[type="file"].form-control:hover::file-selector-button { background: #eef2f7; color: #0f172a; }
input.form-control:disabled, input.form-control[readonly], textarea.form-control:disabled, textarea.form-control[readonly], select.form-select:disabled { background-color: #f1f5f9; border-color: #d8e1eb; color: #64748b; box-shadow: inset 0 1px 2px rgba(15,23,42,.04); }
input[name="employee_code"].form-control:not(:required) { background: linear-gradient(180deg, #f8fafc, #f3f6fa); border-style: dashed; color: #475569; }
.dropdown-menu { border: 1px solid var(--border-soft); border-radius: .85rem; box-shadow: var(--shadow-soft); padding: .45rem; }
.dropdown-item { border-radius: .55rem; }
.list-group-item { border-color: var(--border-soft); }
.list-group-item-action { transition: background-color .15s ease, color .15s ease; }
.list-group-item-action:hover { background: #fff7f6; color: var(--text-strong); }
.alert { border-radius: .75rem; border-color: #dbeafe; box-shadow: 0 .25rem .8rem rgba(15,23,42,.045); }
.modal-content { border: 0; border-radius: .85rem; box-shadow: 0 1.25rem 3rem rgba(15,23,42,.18); }
.modal-header { border-bottom-color: #e8eef5; }
.modal-footer { border-top-color: #e8eef5; background: #fbfdff; border-radius: 0 0 .85rem .85rem; }
.sidebar-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--brand-primary); cursor: pointer; padding: .25rem .5rem; line-height: 1; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1035; }
.sidebar-close { display: none; position: absolute; top: .5rem; right: .5rem; background: none; border: none; color: #fff; font-size: 1.25rem; cursor: pointer; z-index: 1050; line-height: 1; padding: .25rem; }
.sidebar-brand-text small::after { content: "v1.0.0"; display: inline-flex; align-items: center; margin-left: .45rem; padding: .1rem .35rem; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.86); font-size: .65rem; font-weight: 700; letter-spacing: 0; }
@media (min-width: 1200px) {
    .col-xl-4 > .content-card:last-child { position: sticky; top: 1.5rem; }
    .employee-side-column { position: sticky; top: 1.5rem; align-self: flex-start; }
}
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); width: 260px; }
    .sidebar.sidebar-open { transform: translateX(0); }
    .sidebar-overlay.active { display: block; }
    .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .sidebar-close { display: flex; align-items: center; justify-content: center; }
    .app-main { margin-left: 0; }
    .topbar, .app-footer { padding: .75rem 1rem; }
    .topbar { align-items: flex-start; gap: .75rem; }
    .app-content { padding: 1rem; }
    .content-card .row.g-3 > [class*="col-"]::after { display: none; }
    .employee-profile-header { flex-direction: column; }
    .employee-profile-actions { align-items: stretch; width: 100%; }
    .employee-profile-tabs, .employee-record-actions { justify-content: flex-start; }
    .profile-detail-grid { grid-template-columns: 1fr; padding: 1rem; }
    .auth-card-wrapper { padding: 1rem; }
}