/* =========================================================

   RD Foods ERP — application styles

   Works on top of Bootstrap 5.3 + Bootstrap Icons.

   Sections: tokens · base · shell · components · tables ·

   forms · documents · attendance · login · utilities · print

   ========================================================= */



/* ---------- Tokens ---------- */

:root{

  --brand:#2457d6;--brand-dark:#1d46b2;--brand-soft:#eaf0ff;

  --ink:#172033;--ink-2:#334155;--muted:#718096;--line:#e5eaf2;--line-2:#edf0f5;

  --canvas:#f5f7fb;--surface:#fff;--surface-2:#f8fafd;

  --sidebar:#111d35;--sidebar-hover:#1c2c4b;--sidebar-active:#253756;--sidebar-muted:#aebbd1;

  --success:#16845b;--danger:#c83d4d;--warning:#b9770e;--teal:#138a83;

  --radius:14px;--radius-sm:9px;--sidebar-width:258px;--sidebar-mini:72px;--topbar-h:64px;

  --shadow-sm:0 1px 2px rgba(20,36,68,.04),0 4px 14px rgba(20,36,68,.04);

  --shadow-md:0 12px 32px rgba(20,36,68,.12);

  --focus:0 0 0 .22rem rgba(36,87,214,.14);

  --bs-primary:#2457d6;--bs-primary-rgb:36,87,214;--bs-link-color:#2457d6;--bs-body-font-size:.875rem;

}



/* ---------- Base ---------- */

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

html,body{min-height:100%;margin:0}

body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--canvas);

  font-size:14px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}

a{color:var(--brand);text-decoration:none}a:hover{color:var(--brand-dark)}

button,input,select,textarea{font:inherit}

h1,h2,h3,h4,h5,h6{color:var(--ink);letter-spacing:-.02em}

::selection{background:#cddcff}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.form-control:focus-visible,.form-select:focus-visible,.btn:focus-visible{outline:none}

.num{white-space:nowrap;font-variant-numeric:tabular-nums}

.nowrap{white-space:nowrap}

.fw-medium{font-weight:600!important}

.text-muted{color:var(--muted)!important}

.sm{font-size:12px}

.code,code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;background:#f1f4f9;color:#334155;padding:2px 7px;border-radius:6px}

.req{color:var(--danger)}

.ref-link{font-weight:650;color:var(--brand)}

.ref-link:hover{text-decoration:underline}

.muted{color:var(--muted)}



/* ---------- Shell: sidebar ---------- */

.sidebar{background:linear-gradient(180deg,#13213d 0%,#0e182d 100%);color:#fff;width:var(--sidebar-width);position:fixed;inset:0 auto 0 0;

  overflow-y:auto;overflow-x:hidden;z-index:1030;padding:16px 12px 12px;display:flex;flex-direction:column;

  scrollbar-width:thin;scrollbar-color:#354562 transparent;transition:width .2s ease,transform .22s ease}

.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:#2d3d5c;border-radius:6px}

.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 20px;font-weight:800;font-size:15px;min-width:0;color:#fff}

.brand-mark{width:40px;height:40px;min-width:40px;border-radius:12px;background:linear-gradient(135deg,#fff,#dfe8ff);color:var(--brand);

  display:grid;place-items:center;font-size:19px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.2)}

.brand-mark.lg{width:50px;height:50px;font-size:22px}

.brand-text{min-width:0;line-height:1.25;overflow:hidden;text-overflow:ellipsis}

.brand-text small{display:block;color:#8ea2c2;font-size:10px;font-weight:500;margin-top:3px;letter-spacing:.08em;text-transform:uppercase}

.side-nav{display:flex;flex-direction:column;gap:2px;padding-bottom:14px;flex:1}

.nav-item{display:flex;align-items:center;gap:11px;min-height:40px;padding:9px 11px;border-radius:10px;color:var(--sidebar-muted)!important;

  font-size:13px;font-weight:550;transition:background .15s,color .15s;line-height:1.35;position:relative}

.nav-item>i:first-child{width:20px;min-width:20px;text-align:center;font-size:16px}

.nav-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.nav-item:hover{background:var(--sidebar-hover);color:#fff!important}

.nav-item.active,.nav-group.open>.nav-item{background:var(--sidebar-active);color:#fff!important}

a.nav-item.active:not(.has-sub)::before,.nav-item.has-sub.active::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:#6f95ff}

.nav-item.has-sub .chev{font-size:11px;transition:transform .18s;margin-left:auto;flex:none}

.nav-group.open>.nav-item .chev{transform:rotate(-90deg)}

.sub-nav{display:none;padding:3px 0 6px 20px;margin-left:10px;border-left:1px solid #26385a}

.nav-group.open .sub-nav{display:block}

.sub-item{display:block;padding:7px 11px;border-radius:8px;font-size:12.5px;line-height:1.35;color:#9fb0cb!important;margin:1px 0;transition:background .15s}

.sub-item:hover{background:var(--sidebar-hover);color:#fff!important}

.sub-item.active{background:#1f3355;color:#fff!important;font-weight:650}

.side-foot{padding:12px 10px 4px;border-top:1px solid #243452;color:#6f84a6;font-size:11px}

.sidebar-backdrop{display:none}



/* collapsed (desktop) */

@media(min-width:901px){

  body.sidebar-collapsed .sidebar{width:var(--sidebar-mini);padding-inline:10px}

  body.sidebar-collapsed .main{margin-left:var(--sidebar-mini)}

  body.sidebar-collapsed .brand-text,body.sidebar-collapsed .nav-item span,body.sidebar-collapsed .nav-item .chev,

  body.sidebar-collapsed .sub-nav,body.sidebar-collapsed .side-foot{display:none!important}

  body.sidebar-collapsed .nav-item{justify-content:center;padding-inline:0}

  body.sidebar-collapsed .brand{justify-content:center;padding-inline:0}

  body.sidebar-collapsed .nav-item::before{display:none}

}



/* ---------- Shell: main + topbar ---------- */

.main{margin-left:var(--sidebar-width);min-height:100vh;min-width:0;display:flex;flex-direction:column;transition:margin .2s ease}

.topbar{height:var(--topbar-h);min-height:var(--topbar-h);background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(10px);

  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:1020}

.icon-btn{width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:10px;color:#52617a;display:grid;place-items:center;font-size:20px;cursor:pointer;transition:all .15s;padding:0}

.icon-btn:hover{background:var(--brand-soft);color:var(--brand);border-color:#cddcff}

.topbar-title{font-weight:700;font-size:15px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}

.topbar-right{display:flex;align-items:center;gap:12px}

.user-chip{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:5px 11px 5px 6px;

  color:var(--ink);text-align:left;font-size:12.5px;font-weight:600;line-height:1.25;cursor:pointer;transition:border-color .15s}

.user-chip:hover{border-color:#cddcff}

.user-chip::after{margin-left:4px}

.user-chip small{display:block;color:var(--muted);font-size:10.5px;font-weight:500;margin-top:1px}

.avatar{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#eaf0ff,#d6e2ff);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}

.content{padding:26px 28px 36px;width:100%;max-width:1700px;margin:0 auto;flex:1}

.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:22px;flex-wrap:wrap}

.page-head h1,.page-title{font-size:23px;font-weight:800;letter-spacing:-.035em;margin:0}

.page-head p,.page-subtitle{color:var(--muted);margin:4px 0 0;font-size:13.5px}

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

.app-footer{display:flex;justify-content:space-between;gap:12px;padding:16px 28px;color:#8a96a9;font-size:11.5px;border-top:1px solid var(--line);background:#fff;flex-wrap:wrap}

.app-footer span{color:#6e7b91}



/* ---------- Cards & panels ---------- */

.card,.card-panel,.panel,.table-wrap{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm)}

.card-panel,.table-wrap{overflow:hidden}

.card{--bs-card-border-color:var(--line);--bs-card-border-radius:var(--radius)}

.card-header{background:#fff;border-bottom:1px solid var(--line);padding:15px 20px;font-weight:750}

.card-body{padding:20px}

.card-panel.p-0{padding:0}

.panel-title{font-size:14px;font-weight:750;padding:16px 20px;border-bottom:1px solid var(--line-2);margin:0;background:#fff}

.form-panel{padding:22px}

.form-section{font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.09em;color:#6b7a92;padding-bottom:8px;border-bottom:1px solid var(--line-2);margin-top:6px}

.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line-2)}

.form-actions.sticky-actions{position:sticky;bottom:0;background:rgba(245,247,251,.92);backdrop-filter:blur(8px);margin:18px -4px 0;padding:14px 4px;border-top:1px solid var(--line);z-index:5}



/* ---------- KPI / stats ---------- */

.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}

.kpi-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}

.kpi{display:flex;align-items:flex-start;gap:13px;padding:18px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);min-width:0;transition:transform .15s,box-shadow .15s}

.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

.kpi-icon{width:44px;height:44px;min-width:44px;border-radius:12px;display:grid;place-items:center;font-size:20px}

.kpi-indigo .kpi-icon{background:#edf1ff;color:#365edc}.kpi-teal .kpi-icon{background:#e3f8f5;color:#138a83}

.kpi-amber .kpi-icon{background:#fff4df;color:#b9770e}.kpi-rose .kpi-icon{background:#ffedf0;color:#c43d59}.kpi-green .kpi-icon{background:#e6f8ee;color:#16845b}

.kpi-label{font-size:11.5px;font-weight:650;color:var(--muted);margin:1px 0 4px}

.kpi-value{font-size:21px;font-weight:800;letter-spacing:-.04em;line-height:1.25;overflow-wrap:anywhere}

.kpi-value.sm{font-size:16px;font-weight:750}

.kpi-sub{font-size:11px;color:#8490a3;margin-top:6px}

.stat-card{padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);height:100%;box-shadow:var(--shadow-sm)}

.stat-label{font-size:12px;color:var(--muted);font-weight:650}.stat-value{font-size:25px;font-weight:800;letter-spacing:-.04em;margin-top:6px}

.stat-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#edf2ff;color:var(--brand);font-size:18px}

.chart-box{height:290px;padding:16px 20px 14px;position:relative}.chart-box.sm{height:240px}

.glance{list-style:none;margin:0;padding:8px 20px 12px}

.glance li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f0f2f6;font-size:12.5px}

.glance li:last-child{border-bottom:0}.glance li i{color:#8492a7;width:18px;text-align:center}

.glance li span{color:#68758a;flex:1}.glance li strong{font-size:12.5px;font-weight:750;text-align:right}

.list-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;color:var(--ink);border-bottom:1px solid var(--line-2);transition:background .12s}

.list-row:last-child{border-bottom:0}a.list-row:hover{background:#f6f9ff;color:var(--brand)}



/* ---------- Tables ---------- */

.table{margin:0;vertical-align:middle;--bs-table-bg:transparent}

.table thead th{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#6b7a92;background:var(--surface-2);border-bottom:1px solid var(--line);padding:12px 16px;white-space:nowrap}

.table td{padding:12px 16px;border-color:var(--line-2);vertical-align:middle}

.table tbody tr{transition:background .1s}.table tbody tr:hover{background:#fafcff}

.table-responsive{border-radius:0 0 var(--radius) var(--radius);overflow-x:auto}

.data-table .w-idx,.w-idx{width:52px;color:var(--muted)}

.data-table .w-actions,.w-actions{width:1%;white-space:nowrap}

.data-table tfoot td,.tfoot-total td{background:var(--surface-2);font-weight:700;border-top:1px solid var(--line);padding:12px 16px}

.sort-link{color:inherit!important;display:inline-flex;align-items:center;gap:5px}.sort-link:hover{color:var(--brand)!important}

.sort-link i{font-size:10px;opacity:.55}



.table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}

.tt-left,.tt-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.show-entries{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin:0;white-space:nowrap}

.show-entries .form-select{width:auto;padding-right:2rem}

.filter-select{width:auto;min-width:150px;max-width:220px}

.date-filter{width:auto;min-width:140px}

.month-pick{width:auto}

.search-box{position:relative}

.search-box i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:13px;pointer-events:none}

.search-box .form-control{padding-left:32px;min-width:230px}

.table-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 18px;border-top:1px solid var(--line-2);flex-wrap:wrap;background:#fff}

.pagination{--bs-pagination-border-color:var(--line);--bs-pagination-color:var(--ink-2);--bs-pagination-active-bg:var(--brand);--bs-pagination-active-border-color:var(--brand);--bs-pagination-border-radius:8px;gap:4px}

.pagination .page-link{border-radius:8px!important;border:1px solid var(--line);font-weight:600;font-size:12.5px}

.pagination .page-link:hover{background:var(--brand-soft);color:var(--brand)}



/* Row action buttons */

.act{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:#64748b;font-size:15px;cursor:pointer;transition:all .15s;padding:0;vertical-align:middle}

.act:hover{background:#eef2f9;color:var(--brand);border-color:var(--line)}

.act-edit:hover{background:#eaf0ff;color:var(--brand)}

.act-del:hover{background:#ffeaed;color:var(--danger);border-color:#ffd3d9}



/* ---------- Forms & buttons ---------- */

.form-control,.form-select{border-color:#d9e1ed;border-radius:var(--radius-sm);padding:.55rem .75rem;min-height:40px;font-size:13.5px;color:var(--ink);background-color:#fff}

.form-control-sm,.form-select-sm{min-height:34px;padding:.3rem .6rem;font-size:13px;border-radius:8px}

.form-control:focus,.form-select:focus{border-color:#8fb0ff;box-shadow:var(--focus)}

.form-control::placeholder{color:#a3aec0}

.form-control[readonly]{background:#f6f8fb}

.form-label{font-weight:650;font-size:12.5px;color:#4a5a73;margin-bottom:5px}

.form-text{font-size:12px;color:var(--muted)}

.is-invalid{border-color:var(--danger)!important}.invalid-feedback{font-size:12px}

.input-group-text{background:#f6f8fb;border-color:#d9e1ed;color:#64748b;border-radius:var(--radius-sm)}

.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}

.form-switch .form-check-input{width:2.4em;height:1.25em;cursor:pointer}

.btn{border-radius:var(--radius-sm);font-weight:650;font-size:13.5px;padding:.5rem 1rem;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;gap:2px}

.btn-sm{font-size:12.5px;padding:.32rem .7rem;border-radius:8px}

.btn-brand,.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(36,87,214,.3)}

.btn-brand:hover,.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}

.btn-light{background:#fff;border:1px solid #d9e1ed;color:var(--ink-2)}.btn-light:hover{background:#f3f6fb;border-color:#c9d4e5;color:var(--ink)}

.btn-outline-primary{--bs-btn-color:var(--brand);--bs-btn-border-color:#bcd0ff;--bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand)}

.btn-outline-secondary{--bs-btn-border-color:#d8e0eb;--bs-btn-color:#4a5a73}

.btn:focus-visible{box-shadow:var(--focus)}

.badge{font-weight:650;padding:.45em .65em}

.badge-soft{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap}

.badge-success{background:#e3f7ed;color:#13774f}.badge-danger{background:#ffeaed;color:#b52e42}.badge-warning{background:#fff3d9;color:#95600b}

.badge-primary{background:#eaf0ff;color:#2457d6}.badge-info{background:#e5f5fb;color:#18708e}.badge-secondary{background:#eef1f5;color:#68758a}

.alert{border-radius:12px;border-width:1px;font-size:13.5px}

.alert-success{--bs-alert-bg:#eaf8f1;--bs-alert-border-color:#bfe8d4;--bs-alert-color:#0f6b47}

.alert-danger{--bs-alert-bg:#fff0f2;--bs-alert-border-color:#ffd0d7;--bs-alert-color:#a02a3b}

.alert-warning{--bs-alert-bg:#fff8e6;--bs-alert-border-color:#fbe3a8;--bs-alert-color:#7d5208}

.alert-info{--bs-alert-bg:#ecf7fc;--bs-alert-border-color:#bfe3f2;--bs-alert-color:#17607c}

.app-alert{margin-bottom:18px}

.dropdown-menu{border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--shadow-md);font-size:13px}

.dropdown-item{font-size:13px;border-radius:8px;padding:8px 11px;font-weight:550}

.dropdown-item:hover{background:#f1f5fd}.dropdown-item:active{background:var(--brand);color:#fff}

.modal-content{border:0;border-radius:18px;box-shadow:0 24px 70px rgba(20,36,68,.25)}

.confirm-icon{width:52px;height:52px;border-radius:50%;background:#ffeaed;color:var(--danger);display:grid;place-items:center;font-size:22px;margin:0 auto 14px}

.empty-state{text-align:center;padding:56px 20px;background:#fff;border:1px dashed #cfd8e6;border-radius:var(--radius);color:var(--muted)}

.empty-state i{font-size:34px;color:#a2afc3;display:block}.empty-state h4{color:var(--ink);margin:12px 0 6px;font-size:18px}.empty-state p{margin:6px 0 0}

.empty-state.sm{padding:30px 16px;border:0;background:transparent}.empty-state.sm i{font-size:28px}

.action-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.section-heading{font-size:15px;font-weight:750;margin:0}



/* TomSelect harmonised with inputs */

.ts-wrapper.form-select,.ts-wrapper.single .ts-control{min-height:34px}

.ts-control{border-color:#d9e1ed!important;border-radius:8px!important;font-size:13px}

.ts-wrapper.focus .ts-control{border-color:#8fb0ff!important;box-shadow:var(--focus)!important}

.ts-dropdown{border-radius:10px;border-color:var(--line);box-shadow:var(--shadow-md);font-size:13px;z-index:2000}



/* ---------- Documents (purchase / sales / estimate forms & views) ---------- */

.party-info{font-size:12px;color:var(--muted);margin-top:6px;min-height:18px}

.items-table thead th{background:var(--surface-2)}

.items-table td{padding:8px 10px;vertical-align:top}

.items-table .row-no{padding-top:16px}

.items-table .line-amt{padding-top:15px;white-space:nowrap;font-variant-numeric:tabular-nums}

.items-table .rm-row{margin-top:2px}

.stock-hint{font-size:11.5px;color:var(--muted);margin-top:4px}.stock-hint.short{color:var(--danger);font-weight:650}

.totals-card{padding:18px 20px}

.tot-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px}

.tot-row:last-child{border-bottom:0}

.tot-row .form-control{max-width:140px}

.tot-row\.muted{color:var(--muted);font-size:12.5px}

.tot-row\.grand{border-top:2px solid var(--ink);border-bottom:0;margin-top:6px;padding-top:14px;font-size:17px;font-weight:800;color:var(--brand)}

.doc-head{display:flex;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}

.doc-ref{font-size:22px;font-weight:800;letter-spacing:-.03em}

.party-block{padding:16px 22px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}

.doc-notes{padding:14px 22px;border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-2);background:#fffdf5}

.pay-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line-2)}

.pay-row:last-child{border-bottom:0}

.items-view td,.items-view th{padding:12px 18px}



/* ---------- Groups / permission matrix ---------- */

.perm-table{min-width:560px}

.perm-table td:first-child{font-weight:600;text-transform:capitalize}

.perm-table tbody tr:nth-child(even){background:#fbfcfe}

.perm-cb,.col-all,.row-all{cursor:pointer;width:1.1em;height:1.1em}



/* ---------- Attendance ---------- */

.legend{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);flex-wrap:wrap;margin-left:6px}

.att-cell{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;font-size:11px;font-weight:750}

.att-cell.p{background:#e3f7ed;color:#13774f}.att-cell.a{background:#ffeaed;color:#b52e42}

.att-cell.h{background:#fff3d9;color:#95600b}.att-cell.l{background:#e5f5fb;color:#18708e}.att-cell.n{background:#f3f5f9;color:#b4bfd0}

.att-sheet{font-size:12px}.att-sheet th.day{padding:8px 4px;min-width:36px;text-align:center}

.att-sheet th.day small{display:block;font-weight:500;opacity:.7;font-size:9px}

.att-sheet th.day.sun{color:var(--danger)}

.att-sheet td{padding:7px 4px}

.sticky-col{position:sticky;left:0;background:#fff;z-index:2;min-width:170px;box-shadow:1px 0 0 var(--line)}

.att-sheet thead .sticky-col{background:var(--surface-2)}

.seg{display:inline-flex;gap:0;background:#f1f4f9;border-radius:10px;padding:3px}

.seg-btn{padding:5px 13px;font-size:12px;font-weight:650;border-radius:8px;color:#64748b;cursor:pointer;margin:0;transition:all .12s;user-select:none;white-space:nowrap}

.seg-btn:hover{color:var(--ink)}

.btn-check:checked+.seg-present{background:#16845b;color:#fff}

.btn-check:checked+.seg-absent{background:#c83d4d;color:#fff}

.btn-check:checked+.seg-halfday{background:#d89114;color:#fff}

.btn-check:checked+.seg-leave{background:#1e88b0;color:#fff}

.btn-check:focus-visible+.seg-btn{outline:2px solid var(--brand)}



/* ---------- Login ---------- */

.login-body{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1000px 500px at 10% -10%,#dfe8ff 0,transparent 60%),radial-gradient(800px 500px at 100% 110%,#d8f3ee 0,transparent 55%),#eef2f8}

.login-wrap{width:min(100%,980px);min-height:580px;background:#fff;border-radius:24px;overflow:hidden;display:grid;grid-template-columns:1.05fr 1fr;box-shadow:0 30px 80px rgba(19,36,68,.16)}

.login-hero{background:linear-gradient(150deg,#0f1d3a 0%,#1b3d8f 55%,#2457d6 100%);color:#fff;padding:52px 44px;display:flex;align-items:center;position:relative;overflow:hidden}

.login-hero::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-110px;bottom:-120px;background:rgba(255,255,255,.07)}

.login-hero-inner{position:relative;z-index:1}

.login-hero .brand-mark{background:#fff}

.login-hero h1{font-size:29px;font-weight:800;letter-spacing:-.04em;margin:20px 0 10px;color:#fff}

.login-hero p{color:#d3e0ff;line-height:1.7}

.login-hero ul{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:13px;color:#e6edff}

.login-hero li i{margin-right:9px;color:#8fe3c0}

.login-panel{display:grid;place-items:center;padding:36px}

.login-card{width:100%;max-width:340px}

.login-card h2{font-size:26px;font-weight:800;letter-spacing:-.04em}

.login-foot{font-size:12px;color:var(--muted);text-align:center;margin:25px 0 0}



/* ---------- Responsive ---------- */

@media(max-width:1300px){.kpi-grid,.kpi-grid.four{grid-template-columns:repeat(3,minmax(0,1fr))}.kpi-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.content{padding:22px 20px}}

@media(max-width:900px){

  .sidebar{transform:translateX(-100%);box-shadow:12px 0 30px rgba(0,0,0,.18);width:min(86vw,300px)}

  body.sidebar-open .sidebar{transform:translateX(0)}

  body.sidebar-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(12,23,43,.5);z-index:1025;backdrop-filter:blur(2px)}

  body.sidebar-open{overflow:hidden}

  .main{margin-left:0}.topbar{padding:0 14px}.content{padding:18px 14px 28px}.app-footer{padding:14px}

  .kpi-grid,.kpi-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}

  .login-wrap{grid-template-columns:1fr;min-height:0}.login-hero{display:none}.login-panel{padding:34px 22px}

  .search-box .form-control{min-width:0;width:100%}.search-box{flex:1;min-width:160px}

  .tt-right{width:100%}.tt-left{width:100%}

}

@media(max-width:520px){

  .kpi-grid,.kpi-grid.four{grid-template-columns:1fr}

  .page-head{align-items:flex-start;flex-direction:column}.page-head h1{font-size:21px}

  .topbar{gap:9px}.user-chip{padding:4px}.user-chip::after{display:none}

  .content{padding:14px 10px 24px}.app-footer{font-size:10.5px;flex-direction:column;gap:4px}

  .form-panel{padding:16px}.table-toolbar,.table-foot{padding:12px}

  .filter-select,.date-filter{min-width:0;flex:1}

  .doc-head{padding:16px}.doc-ref{font-size:19px}

}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}



/* ---------- Print (app pages) ---------- */

@media print{

  body{background:#fff}

  .sidebar,.topbar,.app-footer,.no-print,.btn,.table-toolbar,.table-foot,.page-actions,.sidebar-backdrop,.act{display:none!important}

  .main{margin:0!important}.content{padding:0;max-width:none}

  .card,.card-panel,.table-wrap,.kpi{box-shadow:none!important;break-inside:avoid}

}


/* ---------- Readability update: larger typography ---------- */
:root {
  --bs-body-font-size: 1rem;
}

body {
  font-size: 16px;
  line-height: 1.65;
}

/* Sidebar and top navigation */
.brand {
  font-size: 18px;
}
.brand-mark {
  font-size: 22px;
}
.brand-text small {
  font-size: 12px;
}
.nav-item {
  font-size: 15px;
  min-height: 46px;
  padding-top: 11px;
  padding-bottom: 11px;
}
.nav-item > i:first-child {
  font-size: 18px;
}
.sub-item {
  font-size: 14px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.side-foot {
  font-size: 12px;
}
.topbar-title {
  font-size: 18px;
}
.user-chip {
  font-size: 14px;
}
.user-chip small {
  font-size: 12px;
}

/* Page titles and dashboard headings */
.page-head h1,
.page-title {
  font-size: 30px;
}
.page-head p,
.page-subtitle {
  font-size: 15px;
}
.card-header,
.panel-title {
  font-size: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Dashboard KPI cards */
.kpi-grid {
  gap: 18px;
  margin-bottom: 22px;
}
.kpi {
  padding: 22px 20px;
  gap: 15px;
  min-height: 112px;
}
.kpi-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  font-size: 23px;
}
.kpi-label {
  font-size: 14px;
  margin-bottom: 7px;
}
.kpi-value {
  font-size: 27px;
}
.kpi-value.sm {
  font-size: 20px;
}
.kpi-sub {
  font-size: 13px;
  margin-top: 8px;
}
.chart-box {
  height: 330px;
  padding: 22px 24px 18px;
}
.glance {
  padding: 12px 22px 16px;
}
.glance li,
.glance li strong {
  font-size: 14px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.list-row {
  font-size: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
}

/* Tables, forms, and action controls */
.table thead th {
  font-size: 12px;
  padding: 15px 18px;
}
.table td {
  font-size: 15px;
  padding: 15px 18px;
}
.table-toolbar,
.table-foot {
  font-size: 14px;
}
.show-entries,
.pagination .page-link {
  font-size: 14px;
}
.search-box .form-control {
  font-size: 15px;
}
.form-control,
.form-select {
  font-size: 15px;
  min-height: 44px;
  padding: .65rem .85rem;
}
.form-control-sm,
.form-select-sm {
  font-size: 14px;
  min-height: 38px;
}
.form-label {
  font-size: 14px;
}
.form-text,
.invalid-feedback {
  font-size: 13px;
}
.btn {
  font-size: 15px;
  padding: .6rem 1.1rem;
}
.btn-sm {
  font-size: 14px;
  padding: .42rem .8rem;
}
.dropdown-menu,
.dropdown-item {
  font-size: 14px;
}
.badge-soft {
  font-size: 12px;
}
.alert {
  font-size: 15px;
}
.empty-state p {
  font-size: 14px;
}
.doc-ref {
  font-size: 25px;
}
.party-info,
.doc-notes,
.tot-row {
  font-size: 15px;
}
.att-sheet {
  font-size: 14px;
}
.att-cell {
  width: 30px;
  height: 30px;
  font-size: 13px;
}
.app-footer {
  font-size: 13px;
}

/* Responsive adjustments */
@media (max-width: 1300px) {
  .content {
    padding: 26px 22px 34px;
  }
  .kpi-grid,
  .kpi-grid.four {
    gap: 14px;
  }
}
@media (max-width: 520px) {
  body {
    font-size: 15px;
  }
  .page-head h1,
  .page-title {
    font-size: 26px;
  }
  .kpi-value {
    font-size: 25px;
  }
  .nav-item {
    font-size: 14px;
  }
}

/* =========================================================
   Responsive layout fixes — desktop, tablet and mobile
   ========================================================= */
html, body { width: 100%; max-width: 100%; }
body { overflow-x: clip; }
.main, .content, .card, .card-body, .card-panel, .panel,
.table-wrap, .table-responsive, .row > *, [class*="col-"] { min-width: 0; }
img, canvas, video, iframe { max-width: 100%; }
.table-responsive { width: 100%; -webkit-overflow-scrolling: touch; }
.table-responsive > .table { min-width: max-content; }
.page-head > *, .table-toolbar > *, .table-foot > *, .topbar > * { min-width: 0; }
.page-actions, .action-row, .form-actions { flex-wrap: wrap; }
.form-control, .form-select, .input-group { max-width: 100%; }
.chart-box canvas { max-width: 100% !important; }

@media (max-width: 1200px) {
  .content { padding: 22px 18px 30px; }
  .topbar { padding-inline: 18px; }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-box { height: 280px; }
  .form-panel { padding: 18px; }
}

@media (max-width: 900px) {
  .sidebar { width: min(86vw, 300px); }
  .main { margin-left: 0 !important; width: 100%; }
  .topbar { height: auto; min-height: var(--topbar-h); padding: 10px 14px; gap: 10px; }
  .topbar-title { white-space: normal; font-size: 16px; }
  .topbar-right { gap: 8px; }
  .content { padding: 18px 14px 28px; }
  .app-footer { padding: 14px; }
  .kpi-grid, .kpi-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table-toolbar { align-items: stretch; }
  .tt-left, .tt-right { width: 100%; }
  .tt-right > *, .tt-left > * { max-width: 100%; }
  .search-box { flex: 1 1 220px; min-width: 0; }
  .search-box .form-control { width: 100%; min-width: 0; }
  .filter-select, .date-filter { max-width: 100%; }
  .login-wrap { width: min(100%, 620px); grid-template-columns: 1fr; min-height: 0; }
  .login-hero { display: none; }
  .login-panel { padding: 30px 22px; }
  .chart-box { height: 260px; padding: 14px; }
  .doc-head { padding: 18px; }
}

@media (max-width: 600px) {
  .topbar { gap: 8px; padding: 9px 10px; }
  .topbar-title { font-size: 14px; }
  .topbar-right { margin-left: auto; }
  .user-chip { max-width: 150px; overflow: hidden; }
  .user-chip > span, .user-chip .user-details { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .content { padding: 14px 10px 22px; }
  .page-head { align-items: stretch; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .page-head h1, .page-title { font-size: 23px; overflow-wrap: anywhere; }
  .page-head p, .page-subtitle { font-size: 13px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
  .kpi-grid, .kpi-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px 12px; gap: 10px; min-height: 0; }
  .kpi-icon { width: 38px; height: 38px; min-width: 38px; font-size: 18px; }
  .kpi-label { font-size: 11px; }
  .kpi-value { font-size: 22px; }
  .kpi-value.sm { font-size: 16px; }
  .kpi-sub { font-size: 10px; overflow-wrap: anywhere; }
  .card-header, .panel-title { padding: 13px 14px; }
  .card-body { padding: 14px; }
  .form-panel { padding: 14px; }
  .form-actions { justify-content: stretch; gap: 8px; }
  .form-actions .btn { flex: 1 1 120px; }
  .table-toolbar, .table-foot { padding: 12px; gap: 10px; }
  .tt-left, .tt-right { align-items: stretch; }
  .tt-left > *, .tt-right > * { flex: 1 1 130px; }
  .show-entries { white-space: normal; }
  .search-box { flex: 1 1 100%; }
  .filter-select, .date-filter, .month-pick { width: 100%; min-width: 0; }
  .table thead th { padding: 11px 12px; }
  .table td { padding: 11px 12px; }
  .chart-box, .chart-box.sm { height: 230px; padding: 12px; }
  .stat-card { padding: 15px; }
  .stat-value { font-size: 22px; }
  .glance { padding-inline: 14px; }
  .list-row { padding: 12px 14px; }
  .doc-head, .party-block, .doc-notes { padding: 14px; }
  .doc-ref { font-size: 19px; }
  .totals-card { padding: 14px; }
  .tot-row { gap: 8px; flex-wrap: wrap; }
  .tot-row .form-control { max-width: 45%; }
  .modal-dialog { margin: 10px; }
  .modal-content { border-radius: 14px; }
  .login-body { padding: 12px; }
  .login-panel { padding: 26px 18px; }
  .login-card h2 { font-size: 23px; }
  .att-sheet { font-size: 12px; }
  .sticky-col { min-width: 135px; }
}

@media (max-width: 380px) {
  .kpi-grid, .kpi-grid.four { grid-template-columns: 1fr; }
  .topbar-title { max-width: 110px; }
  .user-chip { max-width: 112px; }
  .icon-btn { width: 34px; height: 34px; }
  .page-head h1, .page-title { font-size: 21px; }
  .btn { max-width: 100%; white-space: normal; }
  .table-toolbar .btn, .table-foot .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}