@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&family=Noto+Serif+Arabic:wght@500;600;700;800&display=swap');

:root{
  --ink:#132420; --ink-teal:#0E3B39; --ink-teal-2:#155450; --ink-teal-3:#1C6A63;
  --brass:#B98B3E; --brass-light:#D6AE6B;
  --paper:#EEF1E9; --paper-2:#FFFFFF;
  --line:#D7DBCD; --line-strong:#B9C0AC; --muted:#5B6660;
  --rose:#A94A42; --rose-bg:#F5E7E4;
  --radius-s:6px; --radius-m:12px; --radius-l:22px;
  --shadow-1:0 1px 2px rgba(19,36,32,.06), 0 1px 1px rgba(19,36,32,.04);
  --shadow-2:0 8px 24px rgba(14,59,57,.12);
  --font-display:'Noto Serif Arabic', serif;
  --font-body:'Vazirmatn', Tahoma, sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-body);background:var(--paper);color:var(--ink);line-height:1.6;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:700;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}
input{font-family:inherit;}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px;}

.btn{border:none;border-radius:999px;padding:13px 26px;font-size:.95rem;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;width:100%;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--brass);color:#26190A;}
.btn-primary:hover{background:var(--brass-light);box-shadow:var(--shadow-2);}

#view-login{min-height:100vh;display:flex;align-items:stretch;}
.login-shell{display:grid;grid-template-columns:1.05fr 1fr;width:100%;min-height:100vh;}

.brand-panel{
  background:radial-gradient(1100px 500px at 15% -10%, rgba(185,139,62,.16), transparent 55%),
    linear-gradient(165deg, var(--ink-teal) 0%, #0A2C2A 78%);
  color:#EAF1EC;padding:56px 60px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
}
.brand-top{display:flex;align-items:center;gap:14px;position:relative;z-index:1;}
.brand-name{font-family:var(--font-display);font-size:1.15rem;font-weight:700;}
.brand-name small{display:block;font-family:var(--font-body);font-weight:400;font-size:.72rem;color:#B7CBC4;margin-top:2px;}
.brand-mid{margin-top:40px;position:relative;z-index:1;}
.brand-mid h1{font-size:2.5rem;line-height:1.28;color:#F5F1E6;max-width:9.5em;}
.brand-mid .lede{margin-top:18px;color:#C7D8D1;max-width:30em;font-size:1rem;}
.brand-foot{display:flex;gap:34px;color:#9FB6AE;font-size:.78rem;position:relative;z-index:1;margin-top:40px;}
.brand-foot b{display:block;color:#EAF1EC;font-size:1.2rem;font-family:var(--font-display);font-weight:700;}

.form-panel{background:var(--paper);display:flex;align-items:center;justify-content:center;padding:40px;}
.form-box{width:100%;max-width:400px;}
.form-box .hi{color:var(--muted);font-size:.9rem;margin-bottom:6px;}
.form-box h2{font-size:1.6rem;margin-bottom:28px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:7px;font-weight:600;}
.field input{width:100%;padding:13px 15px;border-radius:var(--radius-s);border:1.5px solid var(--line-strong);
  background:var(--paper-2);font-size:.95rem;color:var(--ink);transition:border-color .15s ease;}
.field input:focus{border-color:var(--ink-teal);}
.form-box .btn{margin-top:8px;}
.form-error{color:var(--rose);background:var(--rose-bg);border-radius:var(--radius-s);padding:10px 14px;font-size:.85rem;margin-bottom:18px;}
.demo-note{margin-top:20px;background:#E7EAE0;border:1px dashed var(--line-strong);border-radius:var(--radius-s);padding:12px 14px;font-size:.78rem;color:var(--muted);}
.demo-note b{color:var(--ink-teal);}

/* Dashboards (used in next phase) */
.topbar{background:var(--ink-teal);color:#EAF1EC;padding:16px 34px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;box-shadow:var(--shadow-2);}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--brass);color:#26190A;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;}
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow-1);}

@media(max-width:860px){
  .login-shell{grid-template-columns:1fr;}
  .brand-panel{padding:38px 26px;min-height:280px;}
  .brand-mid h1{font-size:1.7rem;}
  .form-panel{padding:30px 22px;}
}

/* ===== Employee Dashboard ===== */
.topbar{background:var(--ink-teal);color:#EAF1EC;padding:16px 83px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;box-shadow:var(--shadow-2);}
.topbar .tb-brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:1.05rem;}
.tb-user{display:flex;align-items:center;gap:14px;}
.tb-user .who{text-align:right;font-size:.8rem;color:#BFD3CB;}
.tb-user .who b{display:block;color:#F5F1E6;font-size:.92rem;}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--brass);color:#26190A;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0;}
.logout-btn{background:transparent;border:1.5px solid rgba(234,241,236,.3);color:#EAF1EC;border-radius:999px;padding:7px 16px;font-size:.8rem;font-weight:600;}
.logout-btn:hover{background:rgba(234,241,236,.1);}

.dash-wrap{max-width:1080px;margin:0 auto;padding:34px 30px 80px;}
.greeting{margin-bottom:26px;}
.greeting h1{font-size:1.6rem;}
.greeting p{color:var(--muted);margin-top:6px;font-size:.92rem;}

.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:30px;}
.summary-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-m);padding:22px;box-shadow:var(--shadow-1);}
.summary-card.highlight{background:linear-gradient(135deg, var(--ink-teal), var(--ink-teal-2));color:#EAF1EC;border:none;}
.summary-card .label{font-size:.8rem;color:var(--muted);font-weight:600;margin-bottom:8px;}
.summary-card.highlight .label{color:#BFD3CB;}
.summary-card .value{font-size:1.5rem;font-weight:700;font-family:var(--font-display);}

.breakdown-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px;}
.breakdown-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-m);padding:22px;box-shadow:var(--shadow-1);}
.breakdown-card h3{font-size:1rem;margin-bottom:14px;}
.comp-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem;}
.comp-row:last-child{border-bottom:none;}
.comp-row .amt{font-weight:600;}
.comp-row.add .amt{color:var(--ink-teal-3);}
.comp-row.ded .amt{color:var(--rose);}

.history-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-m);padding:22px;box-shadow:var(--shadow-1);}
.history-card h3{font-size:1rem;margin-bottom:14px;}
.history-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);}
.history-row:last-child{border-bottom:none;}
.history-row .period{font-weight:600;}
.history-row .net{color:var(--muted);font-size:.88rem;}
.history-row a{color:var(--ink-teal);font-size:.82rem;font-weight:600;text-decoration:none;}
.history-row a:hover{text-decoration:underline;}

.empty-state{text-align:center;padding:70px 20px;color:var(--muted);}

@media(max-width:760px){
  .summary-grid{grid-template-columns:1fr;}
  .breakdown-grid{grid-template-columns:1fr;}
}

/* ===== Payslip Details ===== */
.btn-print{background:var(--brass);color:#26190A;border:none;border-radius:999px;padding:8px 18px;font-size:.82rem;font-weight:700;}
.btn-print:hover{background:var(--brass-light);}

.payslip-wrap{max-width:820px;margin:0 auto;padding:34px 20px 80px;}
.payslip-sheet{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow-1);padding:36px;}
.payslip-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--brass);padding-bottom:20px;margin-bottom:24px;flex-wrap:wrap;gap:16px;}
.payslip-head h2{font-size:1.4rem;}
.payslip-head .muted{color:var(--muted);font-size:.88rem;margin-top:4px;}
.payslip-head-meta div{font-size:.85rem;margin-bottom:6px;display:flex;gap:6px;}
.payslip-head-meta span{color:var(--muted);}
.payslip-head-meta b{color:var(--ink);}

.payslip-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:22px;}
.payslip-col h4{font-size:.95rem;margin-bottom:12px;color:var(--ink-teal);}
.payslip-col .comp-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.88rem;}
.payslip-col .comp-row.total{border-top:1.5px solid var(--ink);border-bottom:none;font-weight:700;padding-top:10px;margin-top:4px;}
.payslip-col .comp-row.add .amt{color:var(--ink-teal-3);}
.payslip-col .comp-row.ded .amt{color:var(--rose);}

.payslip-net{background:var(--ink-teal);color:#EAF1EC;border-radius:var(--radius-s);padding:18px 22px;display:flex;justify-content:space-between;align-items:center;font-size:1.1rem;margin-bottom:18px;}
.payslip-net b{font-family:var(--font-display);font-size:1.3rem;color:var(--brass-light);}

.payslip-footnote{text-align:center;color:var(--muted);font-size:.78rem;}

@media print{
  .no-print{display:none !important;}
  body{background:#fff;}
  .payslip-wrap{padding:0;max-width:100%;}
  .payslip-sheet{box-shadow:none;border:none;}
}

.admin-wrap{max-width:1080px;margin:0 auto;padding:34px 30px 80px;}
.alert-success{background:#E7EFE6;color:var(--ink-teal);border:1px solid #BFDCC0;border-radius:var(--radius-s);padding:14px 18px;margin-bottom:22px;font-size:.9rem;}
.staff-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:12px;}
.staff-search{display:flex;gap:8px;}
.staff-search input{padding:9px 12px;border-radius:var(--radius-s);border:1.5px solid var(--line-strong);font-size:.85rem;}
.staff-table{width:100%;border-collapse:collapse;font-size:.88rem;}
.staff-table th{text-align:right;padding:10px 12px;color:var(--muted);border-bottom:2px solid var(--line);font-weight:600;}
.staff-table td{padding:10px 12px;border-bottom:1px solid var(--line);}
.staff-table tr.row-error{background:var(--rose-bg);}
.badge-new{background:#E7EFE6;color:var(--ink-teal-3);border-radius:999px;padding:3px 10px;font-size:.76rem;font-weight:600;}
.badge-ok{background:#EFE3C9;color:#7A5A1E;border-radius:999px;padding:3px 10px;font-size:.76rem;font-weight:600;}
.badge-error{background:var(--rose-bg);color:var(--rose);border-radius:999px;padding:3px 10px;font-size:.76rem;font-weight:600;}
.upload-wrap{max-width:600px;margin:0 auto;padding:50px 20px;}
.upload-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-m);padding:30px;box-shadow:var(--shadow-1);}
.upload-card h2{font-size:1.3rem;margin-bottom:10px;}
.upload-card .muted{color:var(--muted);font-size:.87rem;margin-bottom:22px;}

.period-list{display:flex;flex-direction:column;gap:14px;}
.period-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-m);padding:20px 24px;box-shadow:var(--shadow-1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.period-info h3{font-size:1.1rem;}
.period-info .muted{color:var(--muted);font-size:.85rem;margin-top:4px;}
.period-actions{display:flex;gap:10px;align-items:center;}
.btn-danger{background:var(--rose);color:#fff;border:none;border-radius:999px;padding:8px 18px;font-size:.82rem;font-weight:700;}
.btn-danger:hover{background:#8E3B34;}
.btn-danger-sm{background:transparent;color:var(--rose);border:1.5px solid var(--rose);border-radius:999px;padding:5px 14px;font-size:.78rem;font-weight:600;}
.btn-danger-sm:hover{background:var(--rose-bg);}

.filter-panel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-m);padding:18px 20px;margin-bottom:18px;}
.filter-actions{display:flex;gap:10px;margin-bottom:12px;}
.filter-actions button{background:var(--paper);border:1px solid var(--line-strong);border-radius:999px;padding:5px 14px;font-size:.78rem;}
.filter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;font-size:.83rem;}
.filter-grid label{display:flex;align-items:center;gap:6px;}

.table-scroll{overflow-x:auto;}
.wide-table{min-width:900px;}
.wide-table th, .wide-table td{white-space:nowrap;}

table.sortable thead th{position:relative;user-select:none;cursor:pointer;}
table.sortable thead th:not([data-nosort])::after{content:'⇅';opacity:.35;margin-right:6px;font-size:.75em;}
table.sortable thead th.sort-asc::after{content:'↑';opacity:1;color:var(--brass);}
table.sortable thead th.sort-desc::after{content:'↓';opacity:1;color:var(--brass);}
table.sortable thead th[data-nosort]{cursor:default;}

.period-select{width:100%;padding:11px 12px;border-radius:var(--radius-s);border:1.5px solid var(--line-strong);background:#fff;font-size:.88rem;color:var(--ink);}

.row-actions{display:flex;gap:8px;align-items:center;}

.period-list-card{display:flex;flex-direction:column;}
.period-mini-list{max-height:150px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;margin-top:6px;}
.period-mini-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:var(--radius-s);
  text-decoration:none;color:var(--ink);font-size:.85rem;background:var(--paper);border:1px solid var(--line);}
.period-mini-item:hover{border-color:var(--ink-teal-3);}
.period-mini-item.active{background:var(--ink-teal);color:#EAF1EC;border-color:var(--ink-teal);}
.period-mini-item .muted{font-size:.78rem;}
.period-mini-item.active .muted{color:#BFD3CB;}

/* ===== Record Modal ===== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(19,36,32,.55);z-index:100;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--paper-2);border-radius:var(--radius-m);box-shadow:var(--shadow-2);width:100%;max-width:480px;max-height:85vh;display:flex;flex-direction:column;}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line);}
.modal-head h3{font-size:1.05rem;}
.modal-close{background:transparent;border:none;font-size:1.1rem;color:var(--muted);}
.modal-close:hover{color:var(--rose);}
.modal-body{padding:18px 22px;overflow-y:auto;}
.modal-field{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.88rem;}
.modal-field span{color:var(--muted);}
.modal-field b{color:var(--ink);font-weight:600;}
.modal-field.modal-net{background:var(--ink-teal);color:#EAF1EC;border:none;border-radius:var(--radius-s);padding:12px 14px;margin-top:12px;}
.modal-field.modal-net span{color:#BFD3CB;}
.modal-field.modal-net b{color:var(--brass-light);font-size:1.05rem;}
.modal-divider{color:var(--ink-teal);font-weight:700;font-size:.85rem;margin:14px 0 6px;}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field select{width:100%;padding:12px 14px;border-radius:var(--radius-s);border:1.5px solid var(--line-strong);background:#fff;font-size:.9rem;color:var(--ink);}
.field select:focus{border-color:var(--ink-teal);outline:none;}
@media(max-width:500px){ .field-row{grid-template-columns:1fr;} }

.badge-locked{background:#EDEAE0;color:var(--muted);border-radius:999px;padding:4px 12px;font-size:.76rem;font-weight:600;}

.role-badge{
    position:fixed; top:16px; right:16px; z-index:200;
    background:var(--brass); color:#26190A;
    padding:6px 16px; border-radius:999px;
    font-size:.78rem; font-weight:700;
    box-shadow:var(--shadow-2);
}
@media(max-width:760px){
    .role-badge{top:auto; bottom:14px; right:14px; font-size:.72rem; padding:5px 12px;}
}

.role-badge{
    position:fixed; top:14px; left:50%; transform:translateX(-38%);
    z-index:200;
    background:var(--brass); color:#26190A;
    padding:6px 16px; border-radius:999px;
    font-size:.78rem; font-weight:700;
    box-shadow:var(--shadow-2);
}
.role-badge{
    position:fixed; top:14px; left:50%; transform:translateX(-38%);
    z-index:200;
    background:var(--brass); color:#26190A;
    padding:6px 16px; border-radius:999px;
    font-size:.78rem; font-weight:700;
    box-shadow:var(--shadow-2);
}
.role-badge.in-topbar{
    position:static;
    transform:none;
    box-shadow:none;
    flex-shrink:0;
    margin:0 14px;
}
@media(max-width:760px){
    .role-badge{top:auto; bottom:14px; left:50%; transform:translateX(-50%); right:auto; font-size:.72rem; padding:5px 12px;}
    .role-badge.in-topbar{margin:0 8px;}
}

.field-inline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line);}
.field-inline label{font-size:.85rem;color:var(--muted);flex:1;}
.field-inline input{width:140px;padding:7px 10px;border-radius:var(--radius-s);border:1.5px solid var(--line-strong);font-size:.85rem;text-align:left;}

.global-logout{position:fixed; top:14px; left:16px; z-index:200;}
@media(max-width:760px){ .global-logout{top:auto; bottom:14px; left:14px;} }

.announcement-text{
    margin-top:20px;
    font-family:var(--font-display);
    font-size:1.35rem;
    font-weight:600;
    line-height:1.9;
    color:#F5F1E6;
    text-align:center;
    white-space:pre-line;
}
@media(max-width:860px){
    .announcement-text{font-size:1.1rem;}
}

.brand-mid-centered{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin-top:0;
}

.cert-box{max-width:620px;}
.cert-sheet{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius-s);
    padding:34px 30px; font-family:var(--font-body);
}
.cert-letterhead{
    display:flex; justify-content:space-between; align-items:center;
    border-bottom:2px solid var(--brass); padding-bottom:14px; margin-bottom:26px;
    font-size:.88rem; font-weight:700; color:var(--ink-teal);
}
.cert-bismillah{text-align:center; font-family:var(--font-display); font-size:1.15rem; font-weight:700; margin-bottom:22px;}
.cert-title{text-align:center; font-weight:700; font-size:1.05rem; margin-bottom:18px;}
.cert-body{line-height:2.2; font-size:.98rem; text-align:justify; margin-bottom:26px;}
.cert-thanks{margin-bottom:36px; font-weight:600;}
.cert-signature{text-align:center; transform:translateX(-15%); font-weight:700;}
.cert-signature p{margin:2px 0;}

@media print{
    body *{visibility:hidden;}
    .cert-sheet, .cert-sheet *{visibility:visible;}
    .cert-sheet{position:absolute; top:0; left:0; width:100%; border:none; box-shadow:none;}
    .modal-overlay{position:static !important; background:none !important;}
    .no-print{display:none !important;}
}