/* ===================================================================
   ديوان — نظام مكتب ليلي داكن لإدارة الحضور والرواتب
   =================================================================== */

:root{
  --bg:#0E1116;
  --panel:#151A21;
  --panel-2:#1A2028;
  --panel-3:#11161c;
  --line:#232A33;
  --side:#0B0E13;
  --gold:#E0B252;
  --gold-soft:rgba(224,178,82,.13);
  --green:#38B48B;
  --red:#E05B5B;
  --blue:#6B8FA8;
  --text:#E8EDF3;
  --muted:#8A94A3;
  --radius:10px;
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,p{margin:0;}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;border:0;background:none;}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
a{color:var(--gold);}
.num,.tbl,.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
::selection{background:rgba(224,178,82,.3);}

/* ============ Shell ============ */
.shell{display:flex;min-height:100vh;min-height:100dvh;}

.sidebar{
  width:250px;flex:0 0 250px;
  background:var(--side);
  border-inline-start:1px solid var(--line);
  padding:22px 14px;
  display:flex;flex-direction:column;gap:26px;
  position:sticky;top:0;height:100vh;height:100dvh;
  overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:11px;padding:0 6px;}
.brand-mark{
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;
  background:linear-gradient(160deg,#E9C777,#C9973A);
  color:#1a1305;font-weight:700;font-size:20px;
  display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(224,178,82,.18);
}
.brand-txt{display:flex;flex-direction:column;line-height:1.2;}
.brand-txt b{font-size:17px;letter-spacing:0;}
.brand-txt span{font-size:11.5px;color:var(--muted);}

.nav{display:flex;flex-direction:column;gap:3px;}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:9px;
  color:var(--muted);font-size:14px;font-weight:500;
  text-align:start;transition:background .16s ease,color .16s ease;
  white-space:nowrap;
}
.nav-item svg{width:18px;height:18px;flex:0 0 18px;opacity:.85;}
.nav-item:hover{background:#12161d;color:#c9d3de;}
.nav-item.active{background:var(--gold-soft);color:var(--gold);font-weight:600;}
.nav-item.active svg{opacity:1;}

.sidebar-foot{margin-top:auto;padding:12px;border:1px solid var(--line);border-radius:10px;background:#0e1319;}
.sf-line{font-size:11px;color:var(--muted);letter-spacing:.02em;}
.sf-period{font-size:12.5px;color:var(--gold);font-weight:600;margin-top:2px;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 26px 16px;border-bottom:1px solid var(--line);
  background:rgba(14,17,22,.72);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:20;
}
.page-title{font-size:19px;font-weight:700;letter-spacing:-.01em;}
.page-sub{font-size:12.5px;color:var(--muted);margin-top:2px;}
.topbar-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

.view{padding:22px 26px 90px;animation:fadeUp .28s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
  .view{animation:none;}
  *{transition-duration:.01ms !important;}
}

/* ============ Generic ============ */
.card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 16px;
}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.card-t{font-size:14.5px;font-weight:600;}
.card-s{font-size:12px;color:var(--muted);font-weight:400;}

.grid{display:grid;gap:14px;}
.g2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;padding:0 15px;border-radius:9px;
  font-size:13.5px;font-weight:600;
  border:1px solid var(--line);background:#1a212a;color:var(--text);
  transition:transform .12s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
  user-select:none;-webkit-user-select:none;
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;}
.btn:hover{background:#212a35;border-color:#2e3743;}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.btn-gold{background:linear-gradient(175deg,#E7C273,#D8A744);color:#20180a;border-color:#c79a3f;}
.btn-gold:hover{background:linear-gradient(175deg,#f0cd83,#e0b252);color:#20180a;}
.btn-green{background:rgba(56,180,139,.14);color:#5fd3ae;border-color:rgba(56,180,139,.32);}
.btn-green:hover{background:rgba(56,180,139,.22);}
.btn-danger{background:rgba(224,91,91,.12);color:#f09595;border-color:rgba(224,91,91,.3);}
.btn-danger:hover{background:rgba(224,91,91,.2);}
.btn-ghost{background:transparent;}
.btn-sm{min-height:32px;padding:0 10px;font-size:12.5px;border-radius:8px;}
.btn-icon{
  width:32px;height:32px;min-height:32px;padding:0;border-radius:8px;
  display:inline-grid;place-items:center;background:transparent;border:1px solid transparent;color:var(--muted);
  transition:background .15s,color .15s;
}
.btn-icon:hover{background:#222b36;color:var(--text);}
.btn-icon svg{width:16px;height:16px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* segmented */
.seg{display:inline-flex;background:#11161c;border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px;}
.seg button{
  padding:6px 13px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted);
  transition:background .16s,color .16s;
}
.seg button.active{background:#232b36;color:var(--text);}
.seg button:active{transform:scale(.98);}

/* ============ Inputs ============ */
.field{display:flex;flex-direction:column;gap:5px;min-width:0;}
.label{font-size:12px;color:var(--muted);font-weight:500;}
.input,.select,.textarea{
  width:100%;min-height:40px;
  background:var(--panel-3);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 11px;
  color:var(--text);
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
  font-size:14px;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(224,178,82,.12);
}
.input::placeholder{color:#5b6675;}
.select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%238A94A3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 11px center;
  background-size:12px;
  padding-left:30px;
  cursor:pointer;
}
input[type="date"].input,input[type="time"].input{direction:ltr;text-align:center;padding-left:8px;padding-right:8px;}
select option{background:#151A21;color:var(--text);}
.tinput{min-height:34px;padding:4px 6px;font-size:13px;}
.tinput:disabled{opacity:.35;cursor:not-allowed;}

/* ============ KPI ============ */
.kpi{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 15px;display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden;
}
.kpi::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--line);}
.kpi.k-gold::after{background:var(--gold);}
.kpi.k-green::after{background:var(--green);}
.kpi.k-red::after{background:var(--red);}
.kpi.k-blue::after{background:var(--blue);}
.kpi-label{font-size:11.5px;color:var(--muted);font-weight:500;}
.kpi-value{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25;}
.kpi-sub{font-size:11.5px;color:var(--muted);}
.tone-gold{color:var(--gold);}
.tone-green{color:var(--green);}
.tone-red{color:var(--red);}
.tone-blue{color:var(--blue);}
.tone-muted{color:var(--muted);}

/* ============ Tables ============ */
.tbl-wrap{
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:auto;background:var(--panel);max-width:100%;
  -webkit-overflow-scrolling:touch;
}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;}
.tbl thead th{
  position:sticky;top:0;z-index:3;
  background:#12171d;color:var(--muted);
  font-weight:600;font-size:11.5px;letter-spacing:.01em;
  text-align:start;padding:10px 12px;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl tbody td{
  padding:0 12px;height:44px;border-bottom:1px solid var(--line);
  white-space:nowrap;vertical-align:middle;
}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl tbody tr:nth-child(even) td{background:var(--panel-2);}
.tbl tbody tr:hover td{background:#212a34;}
.tbl td.sticky-col,.tbl th.sticky-col{
  position:sticky;inset-inline-start:0;z-index:2;
}
.tbl th.sticky-col{z-index:4;background:#12171d;}
.tbl td.sticky-col{background:var(--panel);}
.tbl tbody tr:nth-child(even) td.sticky-col{background:var(--panel-2);}
.tbl tbody tr:hover td.sticky-col{background:#212a34;}
.tbl .n{text-align:end;font-variant-numeric:tabular-nums;}
.tbl tfoot td{padding:10px 12px;font-weight:700;background:#12171d;border-top:1px solid var(--line);}
.cellname{display:flex;align-items:center;gap:9px;}
.avatar{
  width:29px;height:29px;flex:0 0 29px;border-radius:8px;
  display:grid;place-items:center;font-size:12px;font-weight:700;
  background:#232c37;color:#b9c5d2;border:1px solid #2c3743;
}
.cellname .nm{font-weight:600;font-size:13.5px;}
.cellname .jb{font-size:11px;color:var(--muted);font-weight:400;}

/* ============ Badges & chips ============ */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;
  border:1px solid transparent;white-space:nowrap;
}
.b-green{background:rgba(56,180,139,.13);color:#5fd3ae;border-color:rgba(56,180,139,.28);}
.b-red{background:rgba(224,91,91,.12);color:#f09595;border-color:rgba(224,91,91,.28);}
.b-gold{background:rgba(224,178,82,.13);color:#ecc57a;border-color:rgba(224,178,82,.3);}
.b-blue{background:rgba(107,143,168,.15);color:#9fbdd4;border-color:rgba(107,143,168,.3);}
.b-muted{background:#1c232c;color:var(--muted);border-color:#2a333e;}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;}

.status-select{
  min-height:34px;font-size:12.5px;font-weight:600;
  background:var(--panel-3);border:1px solid var(--line);border-radius:8px;
  padding:4px 8px 4px 26px;cursor:pointer;width:100%;
}
.status-select.s-present{color:#5fd3ae;border-color:rgba(56,180,139,.35);}
.status-select.s-unexcused{color:#f09595;border-color:rgba(224,91,91,.35);}
.status-select.s-excused{color:#e8b48a;border-color:rgba(224,140,82,.32);}
.status-select.s-friday_work{color:#ecc57a;border-color:rgba(224,178,82,.35);}
.status-select.s-friday_off{color:#9fbdd4;border-color:rgba(107,143,168,.3);}
.status-select.s-leave{color:#b3a7e0;border-color:rgba(150,130,220,.32);}

/* ============ Bars ============ */
.barrow{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:10px;padding:6px 0;}
.barname{font-size:12.5px;color:#c2ccd8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bartrack{height:8px;border-radius:99px;background:#1c232c;overflow:hidden;}
.bartrack i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#38B48B,#57c9a3);transition:width .5s cubic-bezier(.4,0,.2,1);}
.bartrack i.gold{background:linear-gradient(90deg,#C9973A,#E0B252);}
.barval{font-size:12px;color:var(--muted);min-width:74px;text-align:end;}

/* ============ Empty state ============ */
.empty{
  padding:38px 20px;text-align:center;color:var(--muted);font-size:13.5px;
  border:1px dashed #2a333e;border-radius:var(--radius);background:#11161c;
}
.empty b{display:block;color:var(--text);font-size:14.5px;margin-bottom:4px;}

/* ============ Toast ============ */
.toast{
  position:fixed;bottom:22px;inset-inline-start:50%;transform:translate(50%,18px);
  background:#1d2530;border:1px solid #2e3743;color:var(--text);
  padding:11px 18px;border-radius:10px;font-size:13.5px;font-weight:500;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;
  z-index:300;max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(50%,0);}
.toast.err{border-color:rgba(224,91,91,.5);color:#f5a9a9;}
.toast.ok{border-color:rgba(56,180,139,.45);color:#8fe7c9;}

/* ============ Modal ============ */
#modalRoot{position:relative;z-index:200;}
.overlay{
  position:fixed;inset:0;background:rgba(6,8,11,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:16px;z-index:200;animation:ovIn .18s ease both;
}
@keyframes ovIn{from{opacity:0;}to{opacity:1;}}
.modal{
  background:var(--panel);border:1px solid #2b343f;border-radius:14px;
  width:100%;max-width:620px;max-height:92dvh;display:flex;flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  animation:modIn .22s cubic-bezier(.2,.8,.3,1) both;
}
.modal.wide{max-width:900px;}
@keyframes modIn{from{opacity:0;transform:translateY(12px) scale(.985);}to{opacity:1;transform:none;}}
.modal-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;border-bottom:1px solid var(--line);
}
.modal-h h3{font-size:15.5px;font-weight:700;}
.modal-b{padding:18px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;}
.modal-f{
  display:flex;gap:10px;justify-content:flex-start;
  padding:14px 18px;border-top:1px solid var(--line);background:#12171d;
  border-radius:0 0 14px 14px;flex-wrap:wrap;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.form-grid .full{grid-column:1/-1;}

/* ============ Attendance mobile rows ============ */
@media (max-width:820px){
  .att-table thead{display:none;}
  .att-table tbody tr{
    display:block;border-bottom:1px solid var(--line);padding:10px 12px;
  }
  .att-table tbody tr:nth-child(even){background:var(--panel-2);}
  .att-table tbody td{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    height:auto;padding:5px 0;border:0;white-space:normal;background:transparent !important;
  }
  .att-table tbody td::before{
    content:attr(data-label);font-size:11.5px;color:var(--muted);flex:0 0 auto;
  }
  .att-table tbody td.sticky-col{position:static;}
  .att-table tbody td.cell-name-cell{justify-content:flex-start;padding-bottom:8px;}
  .att-table tbody td.cell-name-cell::before{content:"";display:none;}
  .att-table tbody td > *{min-width:0;}
  .att-table .status-wrap{width:min(58%,190px);}
}

/* ============ Sidebar mobile ============ */
@media (max-width:900px){
  .shell{display:block;}
  .sidebar{
    width:auto;flex:none;height:auto;position:sticky;top:0;z-index:40;
    flex-direction:row;align-items:center;gap:8px;
    padding:9px 10px;overflow-x:auto;overflow-y:hidden;
    border-inline-start:0;border-bottom:1px solid var(--line);
    scrollbar-width:none;
  }
  .sidebar::-webkit-scrollbar{display:none;}
  .brand{display:none;}
  .sidebar-foot{display:none;}
  .nav{flex-direction:row;gap:5px;}
  .nav-item{padding:8px 12px;font-size:13px;border:1px solid transparent;}
  .nav-item.active{border-color:rgba(224,178,82,.28);}
  .nav-item span.nav-txt{display:inline;}
  .topbar{padding:14px 15px 12px;position:static;backdrop-filter:none;background:transparent;}
  .page-title{font-size:17px;}
  .view{padding:14px 14px 80px;}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .g3{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
}
@media (max-width:430px){
  .kpi{padding:11px 12px;}
  .kpi-value{font-size:18px;}
  .g2{grid-template-columns:1fr;}
}

/* ============ Print ============ */
#printRoot{display:none;}

@media print{
  @page{size:A4;margin:11mm;}
  html,body{background:#fff !important;color:#111 !important;}
  #app,.sidebar,.topbar,.toast,.no-print{display:none !important;}
  #modalRoot{display:none !important;}
  #printRoot{display:block !important;}
  .payslip{padding:0 !important;max-width:none !important;page-break-after:always;break-after:page;}
  .payslip:last-child{page-break-after:auto;break-after:auto;}
  .ps-sign{margin-top:9mm;}
}

/* ============ Payslip paper ============ */
.paper-scroll{background:#fff;border-radius:8px;overflow:auto;max-height:70dvh;padding:0;}
.payslip{
  background:#fff;color:#111;
  font-family:'IBM Plex Sans Arabic', system-ui, sans-serif;
  font-size:11px;line-height:1.5;
  padding:16px 18px;width:100%;max-width:196mm;margin:0 auto;
  font-variant-numeric:tabular-nums;
}
.payslip *{box-sizing:border-box;}
.ps-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;border-bottom:2px solid #111;padding-bottom:8px;}
.ps-brand{display:flex;gap:9px;align-items:center;}
.ps-logo{width:36px;height:36px;border:1.5px solid #111;border-radius:7px;display:grid;place-items:center;font-weight:700;font-size:14px;}
.ps-company{font-size:13.5px;font-weight:700;}
.ps-sub{font-size:10px;color:#555;}
.ps-meta{font-size:10px;text-align:end;color:#333;line-height:1.7;}
.ps-meta b{color:#111;}
.ps-titlebar{display:flex;justify-content:space-between;align-items:center;background:#F0F0F0;border:1px solid #ccc;padding:5px 9px;margin-top:9px;border-radius:4px;}
.ps-titlebar b{font-size:12.5px;}
.ps-titlebar span{font-size:10.5px;color:#333;}
.ps-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #ccc;border-top:0;margin-top:0;border-radius:0 0 4px 4px;overflow:hidden;}
.ps-grid div{padding:5px 9px;border-inline-end:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;font-size:10.5px;}
.ps-grid div span{display:block;font-size:9px;color:#777;}
.ps-grid div b{font-weight:600;}
.ps-stats{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:8px;}
.ps-stat{border:1px solid #ddd;border-radius:4px;padding:4px 2px;text-align:center;background:#FAFAFA;}
.ps-stat span{display:block;font-size:8.5px;color:#777;line-height:1.3;}
.ps-stat b{font-size:12px;font-weight:700;}
.ps-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px;}
.ps-block{border:1px solid #bbb;border-radius:4px;overflow:hidden;}
.ps-block-t{background:#EDEDED;padding:4px 8px;font-size:10.5px;font-weight:700;border-bottom:1px solid #bbb;display:flex;justify-content:space-between;}
.ps-tbl{width:100%;border-collapse:collapse;font-size:10.5px;}
.ps-tbl td{padding:3.5px 8px;border-bottom:1px solid #eee;}
.ps-tbl td.n{text-align:end;white-space:nowrap;font-weight:600;}
.ps-tbl tr.tot td{background:#F5F5F5;font-weight:700;border-top:1px solid #bbb;border-bottom:0;font-size:11px;}
.ps-tbl tr.zero td{color:#999;}
.ps-net{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1.5px solid #111;border-radius:5px;padding:7px 11px;margin-top:9px;background:#F4F4F4;}
.ps-net .lbl{font-size:11.5px;font-weight:600;}
.ps-net .val{font-size:19px;font-weight:700;letter-spacing:-.02em;}
.ps-words{font-size:10px;color:#444;margin-top:5px;border:1px dashed #bbb;padding:4px 8px;border-radius:4px;background:#FCFCFC;}
.ps-sign{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;}
.ps-sign2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px;}
.sign-box{border:1px solid #bbb;border-radius:4px;padding:5px 8px 20px;min-height:52px;position:relative;background:#fff;}
.sign-box .role{font-size:9px;color:#777;}
.sign-box .who{font-size:10.5px;font-weight:700;margin-bottom:1px;}
.sign-box .line{position:absolute;bottom:5px;inset-inline:8px;border-bottom:1px solid #999;height:1px;}
.sign-box .dt{position:absolute;bottom:7px;inset-inline-end:8px;font-size:8px;color:#888;}
.ps-stamp{
  position:absolute;left:12px;bottom:10px;
  border:2px solid #b0242a;color:#b0242a;border-radius:6px;
  padding:3px 10px;font-size:10px;font-weight:700;letter-spacing:.14em;
  transform:rotate(-9deg);opacity:.85;
}
.ps-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:10px;padding-top:6px;border-top:1px solid #ddd;font-size:8.5px;color:#888;position:relative;}

/* ============ Misc ============ */
.rowflex{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.spacer{flex:1;}
.hr{height:1px;background:var(--line);margin:14px 0;border:0;}
.hint{font-size:11.5px;color:var(--muted);}
.scroll-hint{display:none;font-size:11px;color:var(--muted);margin-bottom:6px;}
@media (max-width:900px){.scroll-hint{display:block;}}
.slip-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);}
.slip-row:last-child{border-bottom:0;}
.subtab{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;}
.tiny{font-size:11px;color:var(--muted);}
.tealtxt{color:#5fd3ae;}
.redtxt{color:#f09595;}
.goldt{color:var(--gold);}
ul.clean{margin:0;padding-inline-start:18px;font-size:13px;line-height:1.9;color:#b7c2ce;}

/* ============ Projects ============ */
.pjrow{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:9px 0;border-bottom:1px solid var(--line);}
.pjrow:last-child{border-bottom:0;}
.pjrow .pn{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pjrow .pk{font-size:11px;color:var(--muted);}
.pjrow .pv{font-size:12.5px;text-align:end;font-variant-numeric:tabular-nums;line-height:1.45;white-space:nowrap;}
.pjrow .pv b{color:var(--gold);}
.pjbar{grid-column:1/-1;height:6px;border-radius:99px;background:#1c232c;overflow:hidden;margin-top:3px;}
.pjbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#C9973A,#E0B252);}

.wl-input{min-height:34px;padding:4px 26px 4px 8px;font-size:12.5px;}

@media (max-width:820px){
  .wl-table thead{display:none;}
  .wl-table tbody tr{display:block;border-bottom:1px solid var(--line);padding:10px 12px;}
  .wl-table tbody tr:nth-child(even){background:var(--panel-2);}
  .wl-table tbody td{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    height:auto;padding:5px 0;border:0;white-space:normal;background:transparent !important;
  }
  .wl-table tbody td::before{content:attr(data-label);font-size:11.5px;color:var(--muted);flex:0 0 auto;}
  .wl-table tbody td.sticky-col{position:static;justify-content:flex-start;}
  .wl-table tbody td.sticky-col::before{display:none;}
  .wl-table tbody td > select,.wl-table tbody td > input{max-width:60% !important;width:60%;}
}

/* ============ Attendance trend ============ */
.trend{display:flex;align-items:flex-end;gap:5px;padding-top:6px;}
.trend-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;}
.trend-stack{height:84px;width:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;}
.trend-stack i{display:block;width:100%;min-height:2px;border-radius:3px 3px 0 0;transition:height .35s ease;}
.trend-stack i.tp{background:linear-gradient(180deg,#57c9a3,#38B48B);}
.trend-stack i.ta{background:rgba(224,91,91,.7);}
.trend-lbl{font-size:9.5px;color:var(--muted);}
.lgd{display:inline-block;width:8px;height:8px;border-radius:2px;margin-inline-end:4px;vertical-align:middle;}
.lgd.g{background:#38B48B;}
.lgd.r{background:rgba(224,91,91,.7);}
.slip-row.clickable{cursor:pointer;border-radius:8px;transition:background .15s ease;}
.slip-row.clickable:hover{background:#1b222b;}
@media (max-width:430px){.trend-stack{height:64px;}.trend-lbl{font-size:9px;}}

/* ============ Payroll mobile cards ============ */
@media (max-width:820px){
  .payroll-table thead{display:none;}
  .payroll-table tbody tr{display:block;border-bottom:1px solid var(--line);padding:10px 12px;}
  .payroll-table tbody tr:nth-child(even){background:var(--panel-2);}
  .payroll-table tbody td{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    height:auto;padding:5px 0;border-bottom:0;white-space:normal;background:transparent !important;
  }
  .payroll-table tbody td::before{content:attr(data-label);font-size:11.5px;color:var(--muted);flex:0 0 auto;}
  .payroll-table tbody td.sticky-col{position:static;justify-content:flex-start;}
  .payroll-table tbody td.sticky-col::before{content:"";display:none;}
  .payroll-table tbody td:last-child{justify-content:flex-end;padding-top:8px;border-top:1px dashed var(--line);margin-top:6px;}
  .payroll-table tfoot{display:block;padding:8px 12px;background:#12171d;border-top:1px solid var(--line);}
  .payroll-table tfoot tr{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;}
  .payroll-table tfoot td{display:inline-flex;padding:2px 0;border:0;background:transparent !important;font-size:12.5px;font-weight:600;}
  .payroll-table tfoot td::before{content:attr(data-label) ": ";color:var(--muted);font-weight:500;margin-inline-end:4px;}
  .payroll-table tfoot td[colspan]{display:none;}
  .payroll-table tfoot td.sticky-col{color:var(--muted);font-weight:500;padding-inline-end:4px;}
  .payroll-table tfoot td.sticky-col::before{content:"";display:none;}
}