:root{--brand-950:#080f09;--brand-900:#0a1a0d;--brand-700:#2d5a27;--brand-600:#3a7032;--brand-500:#789d4a;--brand-400:#a8d06a;--gold-500:#c9a97a;--gold-300:#f3d0a3;--coral-500:#ff6b6b;--coral-300:#f99;--primary:var(--brand-700);--primary-dark:var(--brand-900);--primary-light:var(--brand-600);--success:var(--brand-600);--danger:var(--coral-500);--warning:#a8823f;--bg:#f7f7f2;--card-bg:#fff;--border:#e4e3d8;--text:var(--brand-950);--text-muted:#6c7566;--shadow-sm:0 1px 2px #080f090f;--shadow-md:0 4px 16px #080f0914;--shadow-lg:0 12px 32px #080f0924;--radius:14px;--radius-sm:9px;font-family:Cairo,Tahoma,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0}a{color:var(--primary);text-decoration:none}h1,h2,h3{color:var(--brand-950);letter-spacing:-.01em}button{cursor:pointer;border-radius:var(--radius-sm);background:var(--primary);color:#fff;box-shadow:var(--shadow-sm);border:none;padding:10px 18px;font-family:inherit;font-size:14px;font-weight:600;transition:background .15s,transform .1s,box-shadow .15s}button:hover{background:var(--primary-dark);box-shadow:var(--shadow-md)}button:active{transform:translateY(1px)}button.secondary{color:var(--brand-900);box-shadow:none;background:#eef0e6}button.secondary:hover{background:#e2e5d5}button.danger{background:var(--coral-500);color:#fff}button.danger:hover{background:#e94f4f}button.link-btn{color:var(--primary);box-shadow:none;background:0 0;padding:0;font-weight:600}button.link-btn:hover{box-shadow:none;background:0 0;text-decoration:underline}button:disabled{opacity:.55;cursor:not-allowed;transform:none}input,select,textarea{border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);background:#fff;padding:9px 12px;font-family:inherit;font-size:14px;transition:border-color .15s,box-shadow .15s}input[type=checkbox]{width:auto;accent-color:var(--primary)}input:focus,select:focus,textarea:focus{border-color:var(--brand-500);outline:none;box-shadow:0 0 0 3px #789d4a2e}label{color:var(--text-muted);flex-direction:column;gap:5px;margin-bottom:14px;font-size:13px;font-weight:600;display:flex}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:16px;padding:22px}.loading-screen,.centered-screen{background:radial-gradient(circle at 30% 20%, #0f2412 0%, var(--brand-950) 70%);justify-content:center;align-items:center;min-height:100vh;display:flex}.loading-screen{color:var(--text-muted);background:var(--bg);font-weight:600}.login-card{text-align:center;width:360px;box-shadow:var(--shadow-lg);border:none;padding:36px 32px}.login-logo{width:150px;margin:0 auto 8px;display:block}.login-card h1{color:var(--brand-700);margin:4px 0 0;font-size:20px}.subtitle{color:var(--text-muted);margin:4px 0 20px;font-size:13px}.error-text{color:var(--danger);font-size:13px;font-weight:600}.status-text{color:var(--brand-600);font-size:13px;font-weight:600}.branch-select-logo{filter:brightness(0)invert();opacity:.95;width:180px;margin:0 auto 18px;display:block}.branch-select h1{text-align:center;color:#fff;margin-bottom:28px}.branch-cards{gap:20px;display:flex}.branch-card{background:var(--card-bg);color:var(--text);border-radius:var(--radius);box-shadow:var(--shadow-lg);border:none;flex-direction:column;align-items:center;gap:12px;padding:36px 56px;font-size:19px;font-weight:700;transition:transform .15s,box-shadow .15s;display:flex}.branch-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px #080f0959}.branch-card-name{color:var(--brand-700);font-weight:800}.branch-card-stats{color:var(--text-muted);gap:10px;font-size:12px;font-weight:500;display:flex}.branch-card-stats.loading{font-style:italic}.branch-select-actions{justify-content:center;gap:10px;margin-top:24px;display:flex}.branch-select-actions button{color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff1f}.branch-select-actions button:hover{background:#ffffff38}.app-shell{min-height:100vh}.topbar{background:linear-gradient(135deg, var(--brand-900), var(--brand-950));box-shadow:var(--shadow-md);z-index:20;align-items:center;gap:22px;padding:10px 26px;display:flex;position:sticky;top:0}.topbar-title{align-items:center;gap:10px;display:flex}.topbar-logo{filter:brightness(0)invert();width:auto;height:34px}.topbar-title a{color:#fff;letter-spacing:.02em;font-size:15px;font-weight:800}.topbar-branch{align-items:center;gap:8px;display:flex}.branch-badge{color:var(--brand-400);background:#a8d06a2e;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:700}.topbar-branch button{color:#fff;box-shadow:none;background:#ffffff1a;padding:6px 12px;font-size:12px}.topbar-branch button:hover{background:#fff3}.topbar-user{color:#fff9;align-items:center;gap:12px;margin-inline-start:auto;font-size:12px;display:flex}.topbar-user button{color:var(--coral-300);box-shadow:none;background:#ff6b6b26;padding:6px 14px;font-size:12px}.topbar-user button:hover{background:#ff6b6b47}.app-body{align-items:flex-start;display:flex}.sidebar{border-inline-end:1px solid var(--border);background:#fff;flex-shrink:0;align-self:flex-start;width:208px;height:calc(100vh - 58px);padding:18px 12px;position:sticky;top:58px;overflow-y:auto}.sidebar-nav{flex-direction:column;gap:2px;display:flex}.sidebar-nav a{color:var(--text-muted);border-radius:var(--radius-sm);padding:9px 14px;font-size:13.5px;font-weight:600;transition:color .15s,background .15s}.sidebar-nav a:hover{color:var(--brand-700);background:#3a703214}.sidebar-nav a.active{color:var(--brand-700);background:#3a703224;font-weight:700}.sidebar-group-label{letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);opacity:.7;margin:14px 10px 4px;font-size:11px;font-weight:700}.notification-bell{position:relative}.bell-btn{box-shadow:none;background:0 0;padding:6px 8px;font-size:18px;line-height:1;position:relative}.bell-btn:hover{background:#ffffff14}.bell-badge{top:-2px;background:var(--coral-500);color:#fff;border-radius:999px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 3px;font-size:10px;font-weight:700;display:flex;position:absolute;inset-inline-end:-2px}.bell-panel{top:calc(100% + 10px);background:var(--card-bg);width:320px;max-height:420px;color:var(--text);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md,0 8px 24px #0003);z-index:50;text-align:start;padding:14px;position:absolute;inset-inline-end:0;overflow-y:auto}.bell-panel h4{margin:0 0 10px}.bell-section{margin-bottom:12px}.bell-section-title{color:var(--text-muted);margin-bottom:6px;font-size:12px;font-weight:700}.bell-item{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;justify-content:space-between;gap:8px;margin-bottom:6px;padding:8px 10px;font-size:13px;display:flex}.bell-item:hover{border-color:var(--brand-500)}.app-content{flex:1;min-width:0;max-width:1080px;margin:0 auto;padding:26px}.candidate-list{padding:0;list-style:none}.candidate-list li{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;margin-bottom:8px;padding:12px 16px;transition:border-color .15s,background .15s}.candidate-list li:hover{border-color:var(--brand-500)}.candidate-list li.selected{border-color:var(--brand-700);background:#789d4a1a}.tag{background:var(--gold-300);color:#6b4f24;border-radius:20px;margin-inline-start:8px;padding:3px 9px;font-size:11px;font-weight:700}.confirm-box{border:1px solid var(--gold-500);border-radius:var(--radius-sm);background:#fdf6ea;margin:14px 0;padding:16px}.confirm-box.danger-box,.card.danger-box{border-color:var(--coral-500);background:#fff0f0}.button-row{gap:10px;margin-top:12px;display:flex}.employee-search input{margin-bottom:8px}.search-results{border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:0;list-style:none;overflow:hidden}.search-results li{cursor:pointer;border-bottom:1px solid var(--border);padding:11px 16px;transition:background .15s}.search-results li:last-child{border-bottom:none}.search-results li:hover{background:#f2f4ec}.selected-employee{font-size:15px}.month-select{gap:12px;display:flex}.month-select label{flex:1}.raw-fields{grid-template-columns:1fr 1fr;gap:14px;display:grid}.live-preview{gap:12px;margin:18px 0;display:flex}.live-preview>div{border-radius:var(--radius-sm);text-align:center;background:#f4f5ee;flex:1;padding:14px}.live-preview span{color:var(--text-muted);font-size:12px;font-weight:600;display:block}.live-preview b{color:var(--brand-900);font-size:21px}.live-preview .total{background:linear-gradient(135deg,#2d5a271f,#a8d06a2e)}.live-preview small{color:var(--primary);margin-top:2px;font-weight:700;display:block}.dashboard-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px;display:flex}.mode-toggle{flex-wrap:wrap;gap:8px;display:flex}.mode-toggle button:not(.active){color:var(--brand-900);box-shadow:none;background:#eef0e6}.mode-toggle select{width:auto;display:inline-block}.mode-toggle select.active{border-color:var(--primary)}.branch-tabs{gap:8px;margin-bottom:16px;display:flex}.branch-tabs button{color:var(--brand-900);box-shadow:none;background:#eef0e6}.branch-tabs button.active{background:var(--primary);color:#fff}.alerts-panel{border:1px solid var(--coral-300);border-radius:var(--radius);background:linear-gradient(135deg,#fff0f0,#ffe4e4);margin-bottom:18px;padding:16px 20px}.alerts-panel b{color:#b23a3a}.alerts-panel ul{margin:10px 0 0;padding-inline-start:18px}.alerts-panel li{cursor:pointer;color:#b23a3a;padding:3px 0;font-weight:600}.kpi-row{grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;display:grid}.kpi-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);text-align:center;box-shadow:var(--shadow-sm);padding:16px}.kpi-card span{color:var(--text-muted);margin-bottom:8px;font-size:12px;font-weight:600;display:block}.kpi-card b{color:var(--brand-700);font-size:20px}.top-three{gap:16px;margin-bottom:22px;display:flex}.top-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);text-align:center;box-shadow:var(--shadow-sm);flex:1;padding:22px}.top-card .medal{font-size:20px;display:block}.top-card b{margin-top:6px;display:block}.top-card .score{color:var(--brand-700);margin-top:6px;font-size:26px;font-weight:800;display:block}.top-card.rank-1{border-color:var(--gold-500);box-shadow:var(--shadow-md);background:linear-gradient(160deg,#fffdf7,#fff)}.top-card.rank-2{border-color:#c7cdb8}.top-card.rank-3{border-color:var(--gold-300)}.search-box{margin-bottom:16px}.chips-row{flex-wrap:wrap;gap:8px;margin:16px 0;display:flex}.chip{color:var(--brand-900);cursor:pointer;background:#eef0e6;border-radius:20px;padding:7px 16px;font-size:13px;font-weight:600;transition:background .15s,color .15s}.chip:hover{background:#e2e5d5}.chip.active{background:var(--primary);color:#fff}.employee-card-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;display:grid}.employee-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;box-shadow:var(--shadow-sm);padding:16px;transition:transform .15s,box-shadow .15s,border-color .15s}.employee-card:hover{border-color:var(--brand-500);box-shadow:var(--shadow-md);transform:translateY(-2px)}.employee-card-top{justify-content:space-between;align-items:center;gap:8px;display:flex}.note-preview{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;margin:8px 0;font-size:12px;overflow:hidden}.employee-card-score{align-items:center;gap:10px;margin:10px 0;display:flex}.employee-card-score b{color:var(--brand-900);font-size:19px}.rank-label{white-space:nowrap;background:#f3f4ec;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700}.rank-label.rank-excellent{color:var(--brand-700);background:#2d5a2724}.rank-label.rank-good{color:var(--brand-600);background:#789d4a29}.rank-label.rank-acceptable{color:#8a6a34;background:#c9a97a47}.rank-label.rank-needs-improvement{color:#c73f3f;background:#ff6b6b29}.trend{font-size:13px;font-weight:700}.trend.up{color:var(--brand-600)}.trend.down{color:var(--coral-500)}.trend.stable{color:var(--text-muted)}.trend.new{color:#8a6a34;background:var(--gold-300);border-radius:20px;padding:3px 9px;font-size:11px;font-weight:700}.warning-badge{color:#c73f3f;background:#ff6b6b29;border-radius:20px;padding:3px 9px;font-size:11px;font-weight:700}.empty-state{color:var(--text-muted);text-align:center;padding:24px}.status-pill.inactive{color:#c73f3f;vertical-align:middle;background:#ff6b6b29;border-radius:20px;margin-inline-start:10px;padding:3px 10px;font-size:12px;font-weight:700}.employee-header .live-preview{margin-top:14px}.detail-actions{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.detail-actions-right{gap:10px;display:flex}.employee-score-hero{align-items:baseline;gap:12px;margin:12px 0;display:flex}.hero-score{color:var(--brand-700);font-size:38px}.hero-month{color:var(--text-muted);font-size:13px}.cycle-progress{margin:16px 0}.cycle-dots{gap:8px;display:flex}.dot{background:#e8e9de;border-radius:50%;width:16px;height:16px}.dot.filled{background:var(--brand-600)}.dot.filled.gold{background:var(--gold-500)}.cycle-message{color:var(--text-muted);margin-top:8px;font-size:13px;font-weight:600}.cycle-dots.mini .dot{width:10px;height:10px}.compare-grid{gap:16px;display:flex}.compare-grid>div{flex:1}.hof-branch-title{text-align:center;color:var(--text-muted);margin-bottom:10px}.select-row{gap:16px;display:flex}.select-row label{flex:1}.roster-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:14px 0;display:flex}.roster-select-all{color:var(--text-muted);cursor:pointer;align-items:center;gap:8px;font-size:13px;font-weight:600;display:flex}.roster-bulk-actions{color:var(--brand-900);align-items:center;gap:10px;font-size:13px;font-weight:700;display:flex}.roster-list{padding:0;list-style:none}.roster-row{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-sm);justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;padding:12px 16px;display:flex}.roster-row.no-badge{border-color:var(--coral-300);background:#fff1f1}.roster-row-inactive{opacity:.6;background:#00000008}.roster-row.no-badge .roster-badge{color:#c73f3f;background:#ff6b6b2e;font-weight:700}.roster-info{align-items:center;gap:10px;display:flex}.roster-badge{color:var(--text-muted);background:#f3f4ec;border-radius:20px;padding:3px 10px;font-size:12px}.roster-actions{flex-shrink:0;gap:8px;display:flex}.roster-edit-form{width:100%}.roster-edit-fields{gap:10px;display:flex}.roster-edit-fields input{flex:1}.follow-up-list{padding:0;list-style:none}.follow-up-list li{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;justify-content:space-between;margin-bottom:8px;padding:12px 16px;transition:border-color .15s;display:flex}.follow-up-list li:hover{border-color:var(--brand-500)}.page-subtitle{color:var(--text-muted);margin-top:-6px;margin-bottom:14px;font-size:14px}.audit-table-wrap{border:1px solid var(--border);border-radius:var(--radius-sm);overflow-x:auto}.audit-table{border-collapse:collapse;white-space:nowrap;width:100%;font-size:13px}.audit-table th,.audit-table td{text-align:start;border-bottom:1px solid var(--border);padding:10px 12px}.audit-table th{background:var(--surface-alt,#00000008);color:var(--text-muted);font-weight:700}.audit-table td.audit-details{white-space:normal;min-width:220px;color:var(--text-muted)}.audit-action{background:#0000000f;border-radius:20px;padding:3px 9px;font-size:11px;font-weight:700}.audit-action-create{color:var(--brand-600,#3a7032);background:#3a703229}.audit-action-update,.audit-action-reactivate,.audit-action-activate{background:var(--gold-300,#f3d0a3);color:#8a6a34}.audit-action-delete,.audit-action-deactivate{color:#c73f3f;background:#ff6b6b29}.print-only{display:none}.print-table{border-collapse:collapse;width:100%}.print-table th,.print-table td{border:1px solid var(--border);text-align:center;padding:8px 10px}.print-table th:last-child,.print-table td:last-child{text-align:end}@media print{.no-print,.topbar,.mobile-bottom-nav{display:none!important}.print-only{border-collapse:collapse;width:100%;display:table}.print-table th,.print-table td{text-align:center;border:1px solid #000;padding:6px 10px}.app-content{max-width:100%;padding:0}.card{box-shadow:none;border:none;padding:0}}.mobile-bottom-nav{display:none}@media (width<=720px){.mobile-bottom-nav{bottom:0;background:var(--brand-950);z-index:30;justify-content:space-around;padding:8px 4px;display:flex;position:fixed;inset-inline:0;box-shadow:0 -4px 16px #080f0940}.mobile-bottom-nav a,.mobile-bottom-nav button{color:#ffffffb3;box-shadow:none;background:0 0;flex-direction:column;align-items:center;gap:2px;padding:4px;font-size:11px;font-weight:600;display:flex}.mobile-bottom-nav a.active{color:var(--brand-400)}.app-content{padding-bottom:74px}.sidebar{display:none}.bell-panel{width:min(320px,88vw)}.kpi-row{grid-template-columns:repeat(2,1fr)}.top-three,.compare-grid,.select-row,.raw-fields{flex-direction:column}.raw-fields{display:flex}.branch-cards{flex-direction:column}}