:root {
      --red:#c0392b; --red-dark:#96281b; --red-glow:rgba(192,57,43,0.15);
      --surface:#111111; --surface2:#181818; --surface3:#202020; --surface4:#272727;
      --border:#252525; --border2:#333333;
      --text:#efefef; --muted:#666666; --muted2:#444444;
      --sidebar-w:220px;
    }
    *{box-sizing:border-box;}
    body{background:var(--surface);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;display:flex;}
    .oswald{font-family:'Oswald',sans-serif;}

    /* ══ SIDEBAR ══════════════════════════════════════════════════════════════ */
    #sidebar{width:var(--sidebar-w);min-height:100vh;background:var(--surface2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:60;transition:transform .25s ease;}
    .sb-logo{padding:20px 12px 14px;border-bottom:1px solid var(--border);}
    .sb-logo img{width:100%;height:auto;max-width:100%;object-fit:contain;display:block;}
    .sb-section{padding:18px 10px 6px;}
    .sb-section-label{font-family:'Oswald',sans-serif;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0 8px 8px;}
    .sb-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--muted);font-size:.88rem;transition:background .15s,color .15s;cursor:pointer;border:none;background:none;width:100%;text-align:left;}
    .sb-item:hover{background:var(--surface3);color:var(--text);}
    .sb-item.active{background:rgba(192,57,43,.13);color:var(--red);}
    .sb-item svg{flex-shrink:0;opacity:.7;}
    .sb-item.active svg{opacity:1;}
    .sb-sub .sb-item{font-size:.84rem;padding:7px 10px 7px 28px;position:relative;}
    .sb-sub .sb-item::before{content:'';position:absolute;left:14px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--muted2);}
    .sb-sub .sb-item.active::before{background:var(--red);}
    .sb-parent-row{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--muted);transition:color .15s;}
    .sb-parent-row:hover{color:var(--text);}
    .sb-parent-row.open{color:var(--text);}
    .sb-chevron{transition:transform .2s;}
    .sb-parent-row.open .sb-chevron{transform:rotate(180deg);}
    .sb-collapse{overflow:hidden;max-height:0;transition:max-height .25s ease;}
    .sb-collapse.open{max-height:300px;}
    .sb-footer{margin-top:auto;padding:14px 10px;border-top:1px solid var(--border);}
    #sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:55;}

    /* ══ LAYOUT ═══════════════════════════════════════════════════════════════ */
    #page-wrap{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;}
    #topbar{background:var(--surface2);border-bottom:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:40;}
    .hamburger{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:4px;}
    main{padding:24px 20px;flex:1;}

    /* ══ CARDS / FIELDS / BTNS ════════════════════════════════════════════════ */
    .card{background:var(--surface2);border:1px solid var(--border);border-radius:12px;}
    .stat-card{background:var(--surface3);border:1px solid var(--border2);border-radius:10px;padding:16px 18px;}
    .stat-card .label{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:'Oswald',sans-serif;}
    .stat-card .value{font-family:'Oswald',sans-serif;font-size:1.4rem;margin-top:5px;}
    .field{background:var(--surface4);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:.9rem;padding:9px 12px;outline:none;width:100%;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;}
    .field:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-glow);}
    .field::placeholder{color:var(--muted2);}
    select.field{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;}
    label.flabel{font-size:.7rem;color:var(--muted);font-weight:500;display:block;margin-bottom:4px;letter-spacing:.06em;text-transform:uppercase;}
    .btn-primary{background:var(--red);border:none;color:#fff;font-family:'Oswald',sans-serif;font-size:.95rem;letter-spacing:.07em;border-radius:8px;padding:10px 20px;cursor:pointer;transition:background .15s;white-space:nowrap;}
    .btn-primary:hover{background:var(--red-dark);}
    .btn-primary:disabled{background:#444;cursor:not-allowed;}
    .btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.85rem;border-radius:8px;padding:9px 16px;cursor:pointer;transition:border-color .15s,color .15s;white-space:nowrap;}
    .btn-ghost:hover{border-color:var(--red);color:var(--text);}

    /* ══ TABLE ════════════════════════════════════════════════════════════════ */
    .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    table{width:100%;border-collapse:collapse;min-width:960px;}
    thead th{font-family:'Oswald',sans-serif;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 12px;text-align:left;border-bottom:1px solid var(--border2);white-space:nowrap;background:var(--surface3);}
    tbody tr{border-bottom:1px solid var(--border);transition:background .1s;}
    tbody tr:hover{background:var(--surface3);}
    tbody td{padding:10px 12px;font-size:.875rem;vertical-align:middle;}
    tbody td.mono{font-family:'Oswald',sans-serif;}
    .badge{display:inline-block;font-family:'Oswald',sans-serif;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:20px;white-space:nowrap;}
    .badge-paid  {background:rgba(39,174,96,.14);color:#2ecc71;border:1px solid rgba(39,174,96,.3);}
    .badge-unpaid{background:rgba(231,76,60,.14);color:#e74c3c;border:1px solid rgba(231,76,60,.3);}
    .badge-cheque{background:rgba(41,128,185,.14);color:#5dade2;border:1px solid rgba(41,128,185,.3);}
    .edit-btn{background:none;border:1px solid var(--border2);color:var(--muted);font-size:.75rem;padding:4px 10px;border-radius:6px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:border-color .12s,color .12s;white-space:nowrap;}
    .edit-btn:hover{border-color:var(--red);color:var(--text);}

    /* ══ INVOICE EDIT MODAL ═══════════════════════════════════════════════════ */
    .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:32px 16px;overflow-y:auto;}
    .modal-bg.open{display:flex;}
    .modal-box{background:var(--surface2);border:1px solid var(--border2);border-radius:14px;width:100%;padding:0;}

    /* invoice edit modal */
    .modal-box.inv-edit{max-width:560px;}
    .modal-header-bar{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--border);}
    .modal-header-bar h3{font-family:'Oswald',sans-serif;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:0;}
    .modal-close{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;font-size:1.2rem;line-height:1;}
    .modal-close:hover{color:var(--text);}

    /* Header edit section */
    .hdr-edit-section{background:var(--surface3);padding:16px 20px;border-bottom:1px solid var(--border);}
    .hdr-edit-section .section-label{font-family:'Oswald',sans-serif;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:12px;}
    .hdr-edit-section .field{background:var(--surface4);border-color:var(--border2);font-size:.88rem;padding:9px 11px;}
    .hdr-edit-section .field:focus{border-color:var(--red);box-shadow:0 0 0 2px var(--red-glow);}
    .hdr-edit-section label{font-size:.68rem;color:var(--muted);font-weight:500;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em;}
    .btn-save-hdr{background:var(--red);color:#fff;border:none;border-radius:7px;font-family:'Oswald',sans-serif;font-size:.82rem;letter-spacing:.07em;padding:9px 16px;cursor:pointer;margin-top:10px;transition:background .15s;}
    .btn-save-hdr:hover{background:var(--red-dark);}
    .btn-save-hdr:disabled{background:#444;cursor:not-allowed;}
    .cheque-row{display:none;gap:8px;margin-top:0;}
    .cheque-row.show{display:grid;grid-template-columns:1fr 1fr;}

    /* Line items section */
    .items-section{padding:0 20px 20px;}
    .items-section .section-label{font-family:'Oswald',sans-serif;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:14px 0 10px;}

    .line-item{background:var(--surface3);border:1px solid var(--border2);border-radius:9px;margin-bottom:8px;overflow:hidden;}
    .view-fields{padding:12px 14px;}
    .li-name{font-weight:500;font-size:.92rem;}
    .li-meta{font-size:.76rem;color:var(--muted);margin-top:3px;}
    .li-total{font-family:'Oswald',sans-serif;font-size:.95rem;color:var(--red);margin-top:5px;}
    .li-action-row{display:flex;gap:6px;margin-top:8px;}
    .btn-li-edit{background:none;border:1px solid var(--border2);color:var(--muted);border-radius:6px;font-size:.73rem;padding:5px 12px;cursor:pointer;font-family:'Oswald',sans-serif;letter-spacing:.05em;transition:border-color .12s,color .12s;}
    .btn-li-edit:hover{border-color:var(--red);color:var(--text);}
    .btn-li-save{background:var(--red);color:#fff;border:none;border-radius:6px;font-size:.73rem;padding:5px 12px;cursor:pointer;font-family:'Oswald',sans-serif;letter-spacing:.05em;}
    .btn-li-save:hover{background:var(--red-dark);}
    .btn-li-save:disabled{background:#444;cursor:not-allowed;}
    .btn-li-cancel{background:none;border:1px solid var(--border2);color:var(--muted);border-radius:6px;font-size:.73rem;padding:5px 12px;cursor:pointer;font-family:'Oswald',sans-serif;}
    .btn-li-delete{background:none;border:1px solid rgba(231,76,60,.3);color:#e74c3c;border-radius:6px;font-size:.73rem;padding:5px 12px;cursor:pointer;font-family:'Oswald',sans-serif;}
    .btn-li-delete:hover{background:rgba(231,76,60,.1);}
    .edit-fields{display:none;padding:12px 14px;border-top:1px solid var(--border);}
    .edit-fields .field{background:var(--surface4);border-color:var(--border2);font-size:.88rem;padding:9px 11px;}
    .edit-fields .field:focus{border-color:var(--red);box-shadow:0 0 0 2px var(--red-glow);}
    .edit-fields label{font-size:.68rem;color:var(--muted);font-weight:500;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em;}
    .edit-fields .field-group{margin-bottom:9px;}
    .line-item.editing .edit-fields{display:block;}
    .line-item.editing .view-fields{display:none;}
    .line-item.editing{border-color:rgba(192,57,43,.35);}

    /* New invoice create modal */
    .modal-box.lg{max-width:680px;padding:24px;}
    .modal-title{font-family:'Oswald',sans-serif;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:0 0 4px;}
    .modal-sub{font-size:.82rem;color:var(--muted);margin-bottom:20px;}
    .modal-sep{border:none;border-top:1px solid var(--border);margin:16px 0;}
    .inv-item-row{background:var(--surface4);border:1px solid var(--border2);border-radius:8px;padding:10px 12px;margin-bottom:6px;position:relative;}
    .inv-item-row .iname{font-weight:500;font-size:.9rem;}
    .inv-item-row .imeta{font-size:.76rem;color:var(--muted);margin-top:2px;}
    .inv-item-row .itotal{font-family:'Oswald',sans-serif;font-size:.95rem;color:var(--red);margin-top:4px;}
    .inv-item-row .del-btn{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--muted);cursor:pointer;padding:2px 6px;font-size:1rem;}
    .inv-item-row .del-btn:hover{color:var(--red);}
    .cheque-fields{display:none;}
    .cheque-fields.show{display:block;}
    .btn-add-item{background:var(--surface4);border:1px solid var(--border2);color:var(--muted);font-size:.85rem;border-radius:8px;padding:9px 16px;cursor:pointer;transition:border-color .15s,color .15s;width:100%;margin-top:4px;font-family:'DM Sans',sans-serif;}
    .btn-add-item:hover{border-color:var(--red);color:var(--text);}

    /* ══ AC ═══════════════════════════════════════════════════════════════════ */
    .ac-wrap{position:relative;}
    .ac-box{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#252525;border:1.5px solid var(--red);border-radius:8px;z-index:500;max-height:200px;overflow-y:auto;box-shadow:0 8px 20px rgba(0,0,0,.5);display:none;}
    .ac-box div{padding:10px 12px;font-size:.9rem;cursor:pointer;border-bottom:1px solid var(--border);}
    .ac-box div:last-child{border-bottom:none;}
    .ac-box div:hover,.ac-box div.hi{background:var(--red);color:#fff;}

    /* ══ TABS ══════════════════════════════════════════════════════════════════ */
    .tab-bar{display:flex;align-items:center;gap:4px;padding:0 0 0 0;margin-bottom:0;}
    .tab-btn{font-family:'Oswald',sans-serif;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;padding:9px 18px;border-radius:8px;border:1px solid transparent;cursor:pointer;background:none;color:var(--muted);transition:background .15s,color .15s,border-color .15s;white-space:nowrap;}
    .tab-btn:hover{background:var(--surface3);color:var(--text);}
    .tab-btn.active{background:var(--red);color:#fff;border-color:var(--red);}

    /* ══ MISC ═════════════════════════════════════════════════════════════════ */
    .empty-state{text-align:center;padding:56px 24px;color:var(--muted);}
    .spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--border2);border-top-color:var(--red);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:8px;}
    @keyframes spin{to{transform:rotate(360deg);}}
    #toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--surface3);border:1px solid var(--border2);color:var(--text);padding:11px 20px;border-radius:24px;font-size:.875rem;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap;z-index:300;}
    #toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
    #toast.ok {border-color:#27ae60;color:#2ecc71;}
    #toast.err{border-color:var(--red);color:#e74c3c;}

    /* ══ STATEMENT PREVIEW ════════════════════════════════════════════════════ */
    #stmt-output { position:relative; z-index:10; }
    #stmt-iframe {
      width:100%; border:none; border-radius:12px;
      box-shadow:0 4px 40px rgba(0,0,0,.45);
      display:none; background:#fff;
      min-height:400px;
    }

    /* ══ PRINT — print the iframe content directly ════════════════════════════ */
    @media print {
      @page { size: A4 portrait; margin: 14mm 16mm; }
      body * { display: none !important; }
    }

    /* ══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
    @media(max-width:1024px){
      #sidebar{transform:translateX(-100%);}
      #sidebar.open{transform:translateX(0);}
      #sb-overlay.open{display:block;}
      #page-wrap{margin-left:0;}
      .hamburger{display:block;}
      /* NOTE: Data tables are now managed by the DataTables Responsive plugin,
         which renders its own expandable child rows. The old generic
         "display:block card" rules were removed here so they don't override it. */
    }

/* ── Shared additions for admin CRUD pages ─────────────────────────────── */
main{max-width:1200px;margin:0 auto;width:100%;}
a{color:var(--red);text-decoration:none;}
h1,h2,h3,h4{font-weight:600;}
.mb-1{margin-bottom:6px;} .mb-2{margin-bottom:10px;} .mb-3{margin-bottom:16px;} .mb-4{margin-bottom:24px;}
.mt-2{margin-top:10px;} .mt-3{margin-top:16px;}
.p-3{padding:16px;} .p-4{padding:20px;}
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.flex-wrap{flex-wrap:wrap;} .gap-2{gap:10px;} .gap-3{gap:16px;} .ml-auto{margin-left:auto;}
.text-right{text-align:right;} .text-center{text-align:center;}
.muted{color:var(--muted);}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
tbody tr:hover{background:var(--surface3);}
tbody td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.badge-red{background:rgba(192,57,43,.15);color:var(--red);}
.badge-green{background:rgba(46,204,113,.15);color:#2ecc71;}
.badge-grey{background:var(--surface4);color:var(--muted);}
.badge-blue{background:rgba(93,173,226,.15);color:#5dade2;}
/* Modal (custom, framework-free) */
.kx-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;}
.kx-modal.open{display:flex;}
.kx-dialog{background:var(--surface2);border:1px solid var(--border2);border-radius:14px;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;}
.kx-dialog.wide{max-width:640px;}
.kx-mhead{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.kx-mhead h3{font-family:'Oswald',sans-serif;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:0;}
.kx-mbody{padding:20px;}
.kx-mfoot{display:flex;gap:10px;justify-content:flex-end;padding:16px 20px;border-top:1px solid var(--border);}
.kx-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.4rem;line-height:1;}
.btn-danger{background:var(--red);border:none;color:#fff;font-family:'Oswald',sans-serif;letter-spacing:.06em;border-radius:8px;padding:10px 18px;cursor:pointer;}
.icon-btn{background:none;border:1px solid var(--border2);color:var(--muted);border-radius:6px;padding:5px 10px;cursor:pointer;font-size:.78rem;font-family:'DM Sans',sans-serif;transition:border-color .12s,color .12s;}
.icon-btn:hover{border-color:var(--red);color:var(--red);}
/* icon-only variant: square button with a centered SVG glyph */
.icon-btn.icon-only{display:inline-flex;align-items:center;justify-content:center;padding:5px;width:28px;height:28px;vertical-align:middle;flex:0 0 auto;}
.icon-btn.icon-only svg{display:block;}
.icon-btn.icon-only + .icon-btn.icon-only{margin-left:4px;}
/* action cell: keep Edit/Delete on one row, right-aligned, never wrapping */
td.td-actions{white-space:nowrap;}
td.td-actions .icon-btn{display:inline-flex;align-items:center;justify-content:center;}
select.field option{background:var(--surface3);color:var(--text);}

/* ══ DATATABLES — dark theme integration ═══════════════════════════════════ */
.dataTables_wrapper{color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.85rem;}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{margin-bottom:14px;}
.dataTables_wrapper .dataTables_filter{float:right;}
.dataTables_wrapper .dataTables_length{float:left;}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
  background:var(--surface4);border:1px solid var(--border2);border-radius:8px;
  color:var(--text);font-family:'DM Sans',sans-serif;font-size:.85rem;padding:7px 10px;outline:none;
}
.dataTables_wrapper .dataTables_filter input{min-width:200px;margin-left:8px;}
.dataTables_wrapper .dataTables_length select{margin:0 6px;-webkit-appearance:none;appearance:none;padding-right:22px;}
.dataTables_wrapper .dataTables_info{color:var(--muted);padding-top:14px;font-size:.8rem;}
.dataTables_wrapper .dataTables_paginate{float:right;padding-top:10px;}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  color:var(--muted)!important;border:1px solid var(--border2)!important;border-radius:7px!important;
  padding:5px 11px!important;margin-left:4px;background:transparent!important;cursor:pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  color:var(--text)!important;border-color:var(--red)!important;background:var(--surface3)!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  color:#fff!important;background:var(--red)!important;border-color:var(--red)!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{opacity:.4;cursor:default;}
.dataTables_wrapper .dataTables_paginate .ellipsis{color:var(--muted);}
table.dataTable thead th{border-bottom:1px solid var(--border2)!important;outline:none;}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after{opacity:.4;}
table.dataTable{border-collapse:collapse!important;width:100%!important;}
table.dataTable tbody tr{background:transparent;}
.dataTables_wrapper .dataTables_empty{text-align:center;padding:40px;color:var(--muted);}
/* clearfix for the floated header/footer controls */
.dataTables_wrapper:after{content:'';display:table;clear:both;}

/* ══ TABLE READABILITY — light text ═══════════════════════════════════════ */
table.dataTable,
table.dataTable tbody td,
table.dataTable tbody th{color:var(--text)!important;}
table.dataTable tbody td a{color:var(--red);}
table.dataTable tbody td.oswald{font-family:'Oswald',sans-serif;}
/* Brighten header labels and DT chrome so nothing reads as dim grey */
table.dataTable thead th{color:#b8b8b8!important;}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_filter label{color:#b8b8b8!important;}
/* Child-row (expanded detail) text: label light-grey, value near-white */
table.dt tr.child ul.dtr-details{display:block;width:100%;padding:4px 0;}

/* ══ DATATABLES RESPONSIVE — expandable child rows (mobile) ════════════════ */
/* Expand/collapse control — subtle rounded chevron (matches payroll UI) */
table.dt.dtr-inline.collapsed tbody td.dtr-control,
table.dt.dtr-inline.collapsed tbody th.dtr-control{position:relative;padding-left:44px;cursor:pointer;}
table.dt.dtr-inline.collapsed tbody td.dtr-control:before,
table.dt.dtr-inline.collapsed tbody th.dtr-control:before{
  content:'';
  position:absolute;top:50%;left:8px;transform:translateY(-50%);
  height:26px;width:26px;border-radius:8px;
  border:1px solid var(--border2);background:var(--surface4);
  box-shadow:none;
}
/* the chevron glyph, drawn as a rotated arrow via a second pseudo-layer */
table.dt.dtr-inline.collapsed tbody td.dtr-control:after,
table.dt.dtr-inline.collapsed tbody th.dtr-control:after{
  content:'';
  position:absolute;top:calc(50% - 3px);left:16px;
  width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
  transition:transform .18s ease, border-color .18s ease;
}
table.dt.dtr-inline.collapsed tbody td.dtr-control:hover:before,
table.dt.dtr-inline.collapsed tbody th.dtr-control:hover:before{border-color:var(--red);}
table.dt.dtr-inline.collapsed tbody td.dtr-control:hover:after,
table.dt.dtr-inline.collapsed tbody th.dtr-control:hover:after{border-color:var(--red);}
/* expanded row: rotate chevron to point up */
table.dt.dtr-inline.collapsed tbody tr.parent td.dtr-control:before,
table.dt.dtr-inline.collapsed tbody tr.parent th.dtr-control:before{border-color:var(--red);background:var(--surface3);}
table.dt.dtr-inline.collapsed tbody tr.parent td.dtr-control:after,
table.dt.dtr-inline.collapsed tbody tr.parent th.dtr-control:after{
  transform:rotate(-135deg);top:calc(50% - 1px);border-color:var(--red);
}

/* Force chevron control over the CDN Responsive default (load-order safety) */
table.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dtr-inline.collapsed > tbody > tr > th.dtr-control:before{
  content:'' !important;
  height:26px !important;width:26px !important;top:50% !important;left:8px !important;
  transform:translateY(-50%) !important;border-radius:8px !important;
  border:1px solid var(--border2) !important;background:var(--surface4) !important;
  box-shadow:none !important;color:transparent !important;line-height:0 !important;
}
table.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before{
  border-color:var(--red) !important;background:var(--surface3) !important;
}


/* Child row: the expanded detail list */
table.dt tbody tr.child{background:var(--surface3)!important;}
table.dt tbody tr.child:hover{background:var(--surface3)!important;}
table.dt tr.child ul.dtr-details{display:block;width:100%;padding:4px 0;}
table.dt tr.child ul.dtr-details > li{
  display:flex;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--border);padding:8px 4px;list-style:none;
}
table.dt tr.child ul.dtr-details > li:last-child{border-bottom:none;}
table.dt tr.child .dtr-title{
  font-family:'Oswald',sans-serif;font-size:.65rem;letter-spacing:.1em;
  text-transform:uppercase;color:#b8b8b8;min-width:90px;
}
table.dt tr.child .dtr-data{color:var(--text);text-align:right;flex:1;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;align-items:center;}
table.dt tr.child .dtr-data a{color:var(--red);}
table.dt tr.child .dtr-data .icon-btn{margin-left:0;}

/* ══ MOBILE: stack DataTables controls full-width ═════════════════════════ */
@media(max-width:768px){
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter{float:none;text-align:left;margin-bottom:12px;}
  .dataTables_wrapper .dataTables_filter{margin-top:4px;}
  .dataTables_wrapper .dataTables_filter input{width:100%;margin-left:0;margin-top:6px;box-sizing:border-box;}
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate{float:none;text-align:center;}
  .dataTables_wrapper .dataTables_paginate{margin-top:10px;}
}

/* Topbar: hide the long date on narrow phones to prevent crowding */
@media(max-width:560px){
  .tb-date{display:none;}
  #topbar{gap:8px;}
}

/* DataTables-managed tables must be allowed to shrink for the Responsive
   plugin (override the base min-width:960px from the inherited theme). */
table.dt,table.dataTable{min-width:0!important;width:100%!important;}

/* ══ Employee View — two tables side by side (desktop), stacked (mobile) ═══ */
.view-grid{display:grid;grid-template-columns:1fr;gap:16px;}
.view-grid > .card{min-width:0;}   /* allow columns to shrink, no overflow */
@media(min-width:1025px){
  .view-grid{grid-template-columns:2fr 1fr;align-items:start;}
}