/* Techpunto app styles - Phase 4.7 (sidebar frame and design).
   Change colours in the :root block below. */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700.woff2') format('woff2');}

:root{
  --tp-ink:#17233A;
  --tp-text:#243248;
  --tp-label:#46556C;
  --tp-muted:#5A6880;
  --tp-bg:#F3F5F9;
  --tp-line:#DDE3EC;
  --tp-line-soft:#E7EBF2;
  --tp-field:#8896AB;
  --tp-primary:#1D4ED8;
  --tp-primary-hover:#1E40AF;
  --tp-primary-active:#1E3A8A;
  --tp-primary-rgb:29,78,216;
  --tp-brand:#F0A500;
  --tp-side:#0F1B2D;
  --tp-side-text:#B6C2D4;
  --tp-side-muted:#8E9BB1;
  --tp-ok-bg:#E3F4E8;
  --tp-ok-text:#14532D;
  --tp-bad-bg:#FDECEC;
  --tp-bad-text:#7F1D1D;

  --bs-font-sans-serif:'Inter','Noto Sans','Noto Sans Arabic',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --bs-body-font-family:var(--bs-font-sans-serif);
  --bs-body-font-size:.875rem;
  --bs-body-line-height:1.45;
  --bs-body-color:#243248;
  --bs-body-color-rgb:36,50,72;
  --bs-body-bg:#F3F5F9;
  --bs-body-bg-rgb:243,245,249;
  --bs-border-color:#DDE3EC;
  --bs-primary:#1D4ED8;
  --bs-primary-rgb:29,78,216;
  --bs-link-color:#1D4ED8;
  --bs-link-color-rgb:29,78,216;
  --bs-link-hover-color:#1E40AF;
  --bs-link-hover-color-rgb:30,64,175;
}

body{background:var(--tp-bg);color:var(--tp-text);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,h5,h6{color:var(--tp-ink);font-weight:700;letter-spacing:-.01em;}
h2{font-size:1.5rem;line-height:2rem;margin-bottom:.25rem;}
h4{font-size:1.125rem;}
h5{font-size:1rem;}
.text-muted{color:var(--tp-muted) !important;}

/* ---------- Page frame: sidebar + content ---------- */
.app-shell{display:flex;min-height:100vh;}
.app-sidebar{flex:0 0 15.5rem;width:15.5rem;background:var(--tp-side);color:var(--tp-side-text);display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;box-sizing:border-box;}
.sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px 8px;text-decoration:none;}
.sidebar-brand .name{display:block;color:#fff;font-size:16px;line-height:20px;font-weight:700;letter-spacing:-.01em;}
.sidebar-brand .sub{display:block;color:var(--tp-side-muted);font-size:11px;line-height:14px;}
.sidebar-toggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:8px;background:transparent;color:#fff;cursor:pointer;}
.sidebar-nav{display:flex;flex-direction:column;gap:2px;}
.nav-top,.nav-group-btn{display:flex;align-items:center;gap:12px;height:40px;width:100%;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--tp-side-text);font-size:14px;font-weight:500;text-align:left;text-decoration:none;cursor:pointer;}
.nav-top:hover,.nav-group-btn:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-top.active{background:rgba(255,255,255,.10);color:#fff;font-weight:600;}
.nav-group.has-active > .nav-group-btn,.nav-group.is-open > .nav-group-btn{color:#fff;font-weight:600;}
.nav-group-btn .label{flex:1;}
.nav-group-btn .chev{transition:transform .15s;}
.nav-group:not(.is-open) .chev{transform:rotate(-90deg);}
.nav-children{display:none;flex-direction:column;gap:2px;margin:2px 0 6px 0;}
.nav-group.is-open .nav-children{display:flex;}
.nav-child{display:flex;align-items:center;gap:18px;height:36px;padding:0 10px 0 16px;border-radius:8px;color:var(--tp-side-text);text-decoration:none;font-size:14px;font-weight:500;}
.nav-child .dot{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.25);}
.nav-child:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-child.active{background:rgba(255,255,255,.10);color:#fff;font-weight:600;}
.nav-child.active .dot{background:var(--tp-brand);}
.nav-top:focus-visible,.nav-group-btn:focus-visible,.nav-child:focus-visible,.sidebar-brand:focus-visible,.sidebar-user .logout:focus-visible{outline:2px solid #fff;outline-offset:-2px;}
.sidebar-user{margin-top:auto;border-top:1px solid rgba(255,255,255,.10);padding:14px 8px 4px 8px;display:flex;align-items:center;gap:10px;}
.sidebar-user .avatar{width:34px;height:34px;border-radius:17px;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;}
.sidebar-user .who{flex:1;min-width:0;}
.sidebar-user .uname{color:#fff;font-weight:600;font-size:13px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sidebar-user .urole{color:var(--tp-side-muted);font-size:12px;line-height:16px;}
.sidebar-user .logout{display:flex;padding:7px;border-radius:8px;color:var(--tp-side-text);}
.sidebar-user .logout:hover{background:rgba(255,255,255,.08);color:#fff;}

.app-main{flex:1 1 0;min-width:0;display:flex;flex-direction:column;min-height:100vh;}
.app-content{flex:1 1 auto;padding:20px 28px 24px 28px;}
.app-content-inner{max-width:1400px;}
.app-actionbar{position:sticky;bottom:0;z-index:20;background:#fff;border-top:1px solid var(--tp-line);padding:12px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}

@media (max-width:991.98px){
  .app-shell{flex-direction:column;}
  .app-sidebar{position:static;width:100%;flex:none;height:auto;overflow:visible;padding:10px 12px;}
  .sidebar-brand{padding-bottom:4px;}
  .sidebar-toggle{display:inline-flex;}
  .sidebar-nav,.sidebar-user{display:none;}
  .app-sidebar.open .sidebar-nav{display:flex;margin-top:8px;}
  .app-sidebar.open .sidebar-user{display:flex;margin-top:12px;}
  .app-content{padding:16px 14px 20px 14px;}
  .app-actionbar{padding:12px 14px;}
}

/* ---------- Page header pieces (used by new pages) ---------- */
.page-head{margin-bottom:14px;}
.crumbs{font-size:.75rem;line-height:1rem;color:var(--tp-muted);}
.crumbs a{color:var(--tp-muted);text-decoration:none;}
.crumbs a:hover{color:var(--tp-ink);}
.crumbs .here{color:var(--tp-ink);font-weight:500;}
.page-head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:4px;}
.page-title{margin:0;font-size:1.5rem;line-height:2rem;font-weight:700;color:var(--tp-ink);letter-spacing:-.01em;}
.tp-card{background:#fff;border:1px solid var(--tp-line);border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.05);}
.tp-card-pad{padding:16px 20px;}

/* ---------- Login page ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;}
.login-card{width:100%;max-width:400px;background:#fff;border:1px solid var(--tp-line);border-radius:14px;box-shadow:0 8px 30px rgba(16,24,40,.08);padding:28px;}
.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.login-brand .name{display:block;font-size:18px;line-height:22px;font-weight:700;color:var(--tp-ink);letter-spacing:-.01em;}
.login-brand .sub{display:block;font-size:12px;line-height:16px;color:var(--tp-muted);}
.login-title{font-size:1.25rem;line-height:1.75rem;margin:0 0 4px 0;}
.login-sub{color:var(--tp-muted);margin:0 0 18px 0;}

/* ---------- Dashboard ---------- */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:16px;}
.dash-card{display:block;padding:16px 18px;text-decoration:none;color:inherit;}
.dash-card:hover{border-color:var(--tp-field);}
.dash-card .dash-title{font-weight:700;color:var(--tp-ink);font-size:15px;}
.dash-card .dash-text{color:var(--tp-muted);font-size:13px;margin-top:2px;}

/* ---------- Bootstrap pieces restyled to the Techpunto look ---------- */
.btn{--bs-btn-border-radius:8px;--bs-btn-font-size:.875rem;--bs-btn-font-weight:600;--bs-btn-padding-y:.45rem;--bs-btn-padding-x:1rem;line-height:1.25rem;}
.btn-sm{--bs-btn-padding-y:.3rem;--bs-btn-padding-x:.75rem;--bs-btn-font-size:.8125rem;--bs-btn-border-radius:8px;}
.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#1D4ED8;--bs-btn-border-color:#1D4ED8;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#1E40AF;--bs-btn-hover-border-color:#1E40AF;--bs-btn-active-color:#fff;--bs-btn-active-bg:#1E3A8A;--bs-btn-active-border-color:#1E3A8A;--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#1D4ED8;--bs-btn-disabled-border-color:#1D4ED8;--bs-btn-focus-shadow-rgb:29,78,216;}
.btn-secondary,.btn-outline-secondary,.btn-outline-primary,.btn-outline-info{--bs-btn-color:#243248;--bs-btn-bg:#fff;--bs-btn-border-color:#8896AB;--bs-btn-hover-color:#17233A;--bs-btn-hover-bg:#F1F4F9;--bs-btn-hover-border-color:#6F7E95;--bs-btn-active-color:#17233A;--bs-btn-active-bg:#E7EBF2;--bs-btn-active-border-color:#6F7E95;--bs-btn-disabled-color:#8896AB;--bs-btn-disabled-bg:#fff;--bs-btn-disabled-border-color:#C5CEDB;--bs-btn-focus-shadow-rgb:29,78,216;}
.btn-danger{--bs-btn-color:#fff;--bs-btn-bg:#B42318;--bs-btn-border-color:#B42318;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#912018;--bs-btn-hover-border-color:#912018;--bs-btn-active-color:#fff;--bs-btn-active-bg:#7A1B13;--bs-btn-active-border-color:#7A1B13;--bs-btn-focus-shadow-rgb:180,35,24;}
.btn-outline-danger{--bs-btn-color:#B42318;--bs-btn-bg:#fff;--bs-btn-border-color:#E4A9A5;--bs-btn-hover-color:#7F1D1D;--bs-btn-hover-bg:#FDECEC;--bs-btn-hover-border-color:#D1635B;--bs-btn-active-color:#7F1D1D;--bs-btn-active-bg:#FADBD8;--bs-btn-active-border-color:#D1635B;--bs-btn-focus-shadow-rgb:180,35,24;}
.btn-outline-warning{--bs-btn-color:#92400E;--bs-btn-bg:#fff;--bs-btn-border-color:#E0B572;--bs-btn-hover-color:#7A3410;--bs-btn-hover-bg:#FEF3E2;--bs-btn-hover-border-color:#C99A4D;--bs-btn-active-color:#7A3410;--bs-btn-active-bg:#FCE7C5;--bs-btn-active-border-color:#C99A4D;--bs-btn-focus-shadow-rgb:146,64,14;}
.btn-outline-success{--bs-btn-color:#14532D;--bs-btn-bg:#fff;--bs-btn-border-color:#86C99B;--bs-btn-hover-color:#14532D;--bs-btn-hover-bg:#E3F4E8;--bs-btn-hover-border-color:#5DB27A;--bs-btn-active-color:#14532D;--bs-btn-active-bg:#CFEBD8;--bs-btn-active-border-color:#5DB27A;--bs-btn-focus-shadow-rgb:20,83,45;}
.btn-link{--bs-btn-color:#1D4ED8;--bs-btn-hover-color:#1E40AF;}

.form-label{font-size:.75rem;line-height:1rem;font-weight:600;color:var(--tp-label);margin-bottom:.375rem;}
.form-control,.form-select{min-height:38px;padding-top:.4rem;padding-bottom:.4rem;font-size:.875rem;color:var(--tp-ink);border:1px solid var(--tp-field);border-radius:8px;}
.form-control:focus,.form-select:focus{border-color:var(--tp-primary);box-shadow:0 0 0 3px rgba(var(--tp-primary-rgb),.18);}
.form-control::placeholder{color:#6B7A90;}
.form-check-input{border-color:var(--tp-field);}
.form-check-input:checked{background-color:var(--tp-primary);border-color:var(--tp-primary);}
.form-check-input:focus{border-color:var(--tp-primary);box-shadow:0 0 0 3px rgba(var(--tp-primary-rgb),.18);}
.form-control-plaintext{color:var(--tp-ink);}

.table{--bs-table-bg:transparent;--bs-table-hover-bg:#F7F9FC;--bs-table-border-color:var(--tp-line-soft);margin-bottom:0;font-size:.875rem;color:var(--tp-text);}
.table > thead > tr > th{background:#F1F4F9;color:var(--tp-label);font-size:.75rem;line-height:1rem;font-weight:600;white-space:nowrap;}
.table > :not(caption) > * > *{padding:.7rem .75rem;border-bottom-width:1px;}
.table > tbody > tr > td{vertical-align:middle;}
.table-sm > :not(caption) > * > *{padding:.45rem .6rem;}
.table-responsive{background:#fff;border:1px solid var(--tp-line);border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.05);}
.modal-body .table-responsive{border:0;box-shadow:none;border-radius:0;}

.card{border:1px solid var(--tp-line);border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.05);}
.card-header{background:#F7F9FC;border-bottom:1px solid var(--tp-line-soft);font-weight:600;color:var(--tp-ink);}

.modal-content{border:1px solid var(--tp-line);border-radius:12px;box-shadow:0 12px 40px rgba(16,24,40,.18);}
.modal-header{border-bottom:1px solid var(--tp-line-soft);padding:1rem 1.25rem;}
.modal-title{font-size:1rem;font-weight:700;color:var(--tp-ink);}
.modal-body{padding:1.25rem;}
.modal-footer{border-top:1px solid var(--tp-line-soft);padding:.75rem 1.25rem;}

.alert{border-radius:10px;font-size:.875rem;padding:.7rem 1rem;}
.alert-info{--bs-alert-color:#1E3A8A;--bs-alert-bg:#EEF3FF;--bs-alert-border-color:#C7D6F7;}
.alert-danger{--bs-alert-color:#7F1D1D;--bs-alert-bg:#FDECEC;--bs-alert-border-color:#F3C2C2;}

.badge{border-radius:999px;font-weight:600;font-size:.75rem;padding:.3em .7em;}
.badge.bg-success{background-color:var(--tp-ok-bg) !important;color:var(--tp-ok-text) !important;}
.badge.bg-danger{background-color:var(--tp-bad-bg) !important;color:var(--tp-bad-text) !important;}
.badge.bg-secondary{background-color:#EEF1F6 !important;color:var(--tp-label) !important;}

.pagination{--bs-pagination-color:#243248;--bs-pagination-bg:#fff;--bs-pagination-border-color:#8896AB;--bs-pagination-border-radius:8px;--bs-pagination-hover-bg:#F1F4F9;--bs-pagination-hover-color:#17233A;--bs-pagination-hover-border-color:#8896AB;--bs-pagination-focus-color:#17233A;--bs-pagination-focus-bg:#F1F4F9;--bs-pagination-active-bg:#1D4ED8;--bs-pagination-active-border-color:#1D4ED8;--bs-pagination-active-color:#fff;--bs-pagination-disabled-color:#8896AB;--bs-pagination-disabled-bg:#fff;--bs-pagination-disabled-border-color:#C5CEDB;--bs-pagination-padding-x:.75rem;--bs-pagination-padding-y:.3rem;--bs-pagination-font-size:.8125rem;gap:6px;margin-bottom:0;}
.page-item:not(:first-child) .page-link{margin-left:0;}

.dropdown-menu{border:1px solid var(--tp-line);border-radius:10px;box-shadow:0 8px 24px rgba(16,24,40,.12);font-size:.875rem;padding:.35rem;}
.dropdown-item{border-radius:6px;padding:.4rem .7rem;}
.dropdown-item.text-danger:hover{background:var(--tp-bad-bg);}

/* ---------- Search-and-pick and typeahead lists ---------- */
.search-pick-wrapper{position:relative;}
.search-pick-results{position:absolute;top:100%;left:0;right:0;z-index:1050;max-height:260px;overflow-y:auto;background:#fff;border:1px solid var(--tp-field);border-top:none;border-radius:0 0 8px 8px;box-shadow:0 6px 16px rgba(16,24,40,.12);display:none;}
.search-pick-results.show{display:block;}
.search-pick-item{padding:.5rem .75rem;cursor:pointer;}
.search-pick-item:hover,.search-pick-item.active{background-color:#EEF3FF;}
.search-pick-item small{display:block;color:var(--tp-muted);}

/* ---------- Sortable table headers ---------- */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap;}
th.sortable .sort-icon{opacity:.4;font-size:.75em;margin-left:4px;}
th.sortable.sort-active .sort-icon{opacity:1;}

/* ---------- Balance badges on list pages and forms ---------- */
.balance-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;line-height:18px;font-weight:600;margin-right:4px;}
.balance-badge.positive{background-color:var(--tp-ok-bg);color:var(--tp-ok-text);}
.balance-badge.negative{background-color:var(--tp-bad-bg);color:var(--tp-bad-text);}

/* Hides VAT fields and rows when "No VAT" is checked. Needs important because
   Bootstrap's d-flex utility also sets display with important. */
.field-hidden{display:none !important;}

/* ---------- Invoice form: compact layout that fits one screen ---------- */
.inv-head{margin-bottom:10px;}
.inv-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;align-items:start;}
.inv-c1{grid-column:span 1;}
.inv-c2{grid-column:span 2;}
.inv-c3{grid-column:span 3;}
.inv-c4{grid-column:span 4;}
.inv-c5{grid-column:span 5;}
.inv-c7{grid-column:span 7;}
.inv-stack{display:flex;flex-direction:column;gap:10px;}
.inv-label-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;min-height:20px;margin-bottom:4px;}
.inv-label-row .form-label{margin:0;white-space:nowrap;}
.inv-balances{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;}
.inv-balances .balance-badge{margin-right:0;font-size:11px;line-height:16px;padding:1px 8px;}
.form-control.tp-md,.form-select.tp-md{min-height:36px;height:36px;padding-top:0;padding-bottom:0;}
.form-control.tp-sm,.form-select.tp-sm{min-height:32px;height:32px;padding-top:0;padding-bottom:0;font-size:.8125rem;}
select.form-select.tp-narrow{padding-left:.5rem;padding-right:1.5rem;background-position:right .4rem center;background-size:12px 10px;}
.tp-readonly{display:flex;align-items:center;height:36px;padding:0 12px;border:1px solid var(--tp-line);border-radius:8px;background:#F7F9FC;font-weight:700;color:var(--tp-ink);white-space:nowrap;overflow:hidden;}
.inv-vat-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:10px;padding:8px 12px;background:#F7F9FC;border:1px solid #E2E7EF;border-radius:10px;}
.inv-inline{display:flex;align-items:center;gap:8px;}
.inv-inline label{margin:0;font-size:.75rem;font-weight:600;color:var(--tp-label);white-space:nowrap;}
.inv-check{display:flex;align-items:center;gap:8px;}
.inv-check label{margin:0;font-weight:600;color:var(--tp-text);}
.inv-items{overflow:visible;}
.inv-table{table-layout:fixed;width:100%;margin:0;}
.inv-table thead th:first-child{border-top-left-radius:11px;}
.inv-table thead th:last-child{border-top-right-radius:11px;}
.inv-table th{padding:7px 6px;}
.inv-table td{padding:4px 6px;vertical-align:middle;}
.inv-table .form-control{min-height:32px;height:32px;padding:0 8px;font-size:.8125rem;}
.inv-table textarea.form-control{padding:5px 8px;line-height:20px;resize:vertical;}
.inv-table input[type=number]{-moz-appearance:textfield;appearance:textfield;text-align:right;}
.inv-table input[type=number]::-webkit-outer-spin-button,.inv-table input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.inv-table td.item-line-total{text-align:right;font-weight:600;color:var(--tp-ink);white-space:nowrap;padding-right:10px;}
.remove-item-row{width:28px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--tp-muted);font-size:20px;line-height:1;cursor:pointer;}
.remove-item-row:hover{background:var(--tp-bad-bg);color:var(--tp-bad-text);}
.inv-items-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-top:1px solid var(--tp-line-soft);}
.inv-discount{display:flex;align-items:center;gap:8px;}
.inv-discount label{margin:0;font-size:.75rem;font-weight:600;color:var(--tp-label);white-space:nowrap;}
.inv-discount input[type=number]{-moz-appearance:textfield;appearance:textfield;text-align:right;}
.inv-discount input[type=number]::-webkit-outer-spin-button,.inv-discount input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.inv-notes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;}
.inv-notes-title{font-size:.75rem;font-weight:600;color:var(--tp-label);}
.inv-chip{display:inline-flex;align-items:center;gap:6px;height:30px;margin:0;padding:0 10px;border:1px solid var(--tp-field);border-radius:8px;background:#fff;font-weight:600;font-size:.8125rem;color:var(--tp-text);cursor:pointer;}
.inv-chip:has(input:checked){background:#EEF3FF;}
.inv-note-texts{margin-left:auto;font-size:.75rem;color:var(--tp-muted);}
.inv-note-texts summary{cursor:pointer;}
.inv-note-texts div{margin-top:6px;max-width:420px;white-space:pre-line;}
.inv-tot-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:3px 0;color:var(--tp-muted);}
.inv-tot-row strong{font-weight:600;color:var(--tp-ink);white-space:nowrap;}
.inv-tot-grand{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;padding:8px 12px;background:#F1F4F9;border-radius:10px;font-weight:600;color:var(--tp-ink);}
.inv-tot-grand strong{font-size:1.25rem;line-height:1.5rem;font-weight:700;white-space:nowrap;}
@media (max-width:991.98px){.inv-grid > *{grid-column:span 12;}}

/* ---------- List pages: toolbar, table card, chips, row actions (first used on Invoices) ---------- */
.list-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;}
.search-field{position:relative;flex:1 1 320px;max-width:480px;}
.search-field svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--tp-muted);pointer-events:none;}
.search-field .form-control{padding-left:36px;}
.list-filter{width:auto;min-width:170px;}
.tp-table-card{overflow:visible;}
.tp-table-card > .table thead th:first-child{border-top-left-radius:11px;}
.tp-table-card > .table thead th:last-child{border-top-right-radius:11px;}
.tp-card-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:12px 16px;border-top:1px solid var(--tp-line-soft);}
.chip-neutral{display:inline-block;background:#EEF1F6;color:var(--tp-label);border-radius:6px;padding:2px 8px;font-size:12px;line-height:16px;font-weight:600;}
.status-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:12px;line-height:18px;font-weight:600;}
.status-chip .dot{width:6px;height:6px;border-radius:3px;}
.status-chip.ok{background:var(--tp-ok-bg);color:var(--tp-ok-text);}
.status-chip.ok .dot{background:#15803D;}
.status-chip.bad{background:var(--tp-bad-bg);color:var(--tp-bad-text);}
.status-chip.bad .dot{background:#B91C1C;}
.row-actions{display:flex;justify-content:flex-end;align-items:center;gap:6px;}
.row-actions form,.dropdown-menu form{margin:0;}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--tp-muted);cursor:pointer;}
.btn-icon:hover,.btn-icon[aria-expanded="true"]{background:#F1F4F9;color:var(--tp-ink);}
.sort-link{display:inline-flex;align-items:center;gap:4px;color:inherit;text-decoration:none;}
.sort-link:hover{color:var(--tp-ink);}
th.sortable.sort-active .sort-link{color:var(--tp-ink);}
th.sortable .sort-icon{display:inline-flex;margin-left:0;font-size:inherit;opacity:.45;}
th.sortable.sort-active .sort-icon{opacity:1;}
.status-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:12px;line-height:16px;color:var(--tp-muted);}
@media (max-width:1100px){.tp-table-card{overflow-x:auto;}}

/* ---------- Colour chips and colour pickers (company colour and currency colour) ---------- */
.chip-color{display:inline-block;border-radius:6px;padding:2px 8px;font-size:12px;line-height:16px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(16,24,40,.14);}
.color-field .form-control-color{width:56px;min-height:38px;height:38px;padding:4px;cursor:pointer;}

/* Clickable table rows (whole row opens the record) */
tr[data-row-href],tr[data-row-modal]{cursor:pointer;}
.btn-icon-spacer{visibility:hidden;pointer-events:none;}
.list-panel-title{margin:0;font-size:1rem;line-height:1.5rem;font-weight:600;color:var(--tp-ink);min-width:110px;}
.co-logo{display:block;max-height:32px;max-width:96px;}
.co-logo-lg{display:block;max-height:80px;max-width:240px;}
.tp-card-title{margin:0 0 12px;font-size:1rem;line-height:1.5rem;font-weight:600;color:var(--tp-ink);}
.pay-card{max-width:820px;}

/* Invoice form: Description and Remark side by side; Update notes chip */
.inv-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.inv-chip-update{border-style:dashed;}
@media (max-width:991.98px){.inv-two{grid-template-columns:1fr;}}

/* ---------- Reports (2026-11-02) ---------- */
.report-section{font-size:1rem;font-weight:600;color:var(--tp-label);margin:24px 0 8px;}
.dash-card-soon{opacity:.55;pointer-events:none;}
.report-total td{font-weight:600;background:#F7F9FC;}
.print-only{display:none;}
@media print{
  .app-sidebar,.app-actionbar,.no-print,.alert-dismissible{display:none !important;}
  .print-only{display:block !important;margin-bottom:8px;font-size:12px;color:#444;}
  .app-shell,.app-main,.app-content,.app-content-inner{display:block !important;margin:0 !important;padding:0 !important;width:auto !important;max-width:none !important;min-height:0 !important;}
  body{background:#fff !important;}
  .tp-card{box-shadow:none !important;border:1px solid #bbb !important;}
  a{color:inherit !important;text-decoration:none !important;}
  .table{font-size:11px;}
  thead{display:table-header-group;}
  tr{break-inside:avoid;}
}

.chip-invoice{display:inline-block;background:#E0F2FE;color:#075985;border-radius:6px;padding:2px 8px;font-size:12px;line-height:16px;font-weight:600;}

/* ===== Phase 22: dashboard, in/out tags ===== */
.chip-in,.chip-out{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:600;line-height:1.1rem;white-space:nowrap;}
.chip-in{background:var(--tp-ok-bg);color:var(--tp-ok-text);}
.chip-out{background:var(--tp-bad-bg);color:var(--tp-bad-text);}
.quick-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.dash-section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tp-label);margin:24px 0 10px;}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.kpi{display:block;border-radius:14px;padding:14px 16px;color:#fff;text-decoration:none;box-shadow:0 6px 18px rgba(16,24,40,.10);transition:transform .12s ease,box-shadow .12s ease;}
a.kpi:hover{color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,24,40,.16);}
.kpi-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.92;}
.kpi-value{font-size:18px;font-weight:700;line-height:1.4;margin-top:6px;}
.kpi-cur{font-size:12px;font-weight:600;opacity:.85;}
.kpi-sub{font-size:12px;opacity:.85;margin-top:4px;}
.kpi-blue{background:linear-gradient(135deg,#1D4ED8,#3B82F6);}
.kpi-green{background:linear-gradient(135deg,#047857,#10B981);}
.kpi-amber{background:linear-gradient(135deg,#B45309,#F59E0B);}
.kpi-violet{background:linear-gradient(135deg,#6D28D9,#8B5CF6);}
.kpi-rose{background:linear-gradient(135deg,#BE123C,#F43F5E);}
.kpi-teal{background:linear-gradient(135deg,#0F766E,#14B8A6);}
.kpi-slate{background:linear-gradient(135deg,#334155,#64748B);}
.widget-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;}
.widget{overflow:hidden;}
.widget-wide{grid-column:1 / -1;}
.widget-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--tp-line-soft);}
.widget-head h3{font-size:14px;margin:0;}
.widget-head a{font-size:12px;text-decoration:none;}
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-bottom:24px;}
.mod-group{padding:14px 16px;border-top:4px solid var(--mod-c);}
.mod-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--mod-c);margin-bottom:6px;}
.mod-dot{width:10px;height:10px;border-radius:50%;background:var(--mod-c);}
.mod-link{display:block;padding:7px 8px;margin:0 -8px;border-radius:8px;text-decoration:none;color:inherit;}
.mod-link:hover{background:var(--mod-bg);}
.mod-link-title{display:block;font-weight:600;color:var(--tp-ink);font-size:14px;}
.mod-link-text{display:block;font-size:12px;color:var(--tp-muted);}
.mod-blue{--mod-c:#1D4ED8;--mod-bg:#EFF4FF;}
.mod-amber{--mod-c:#B45309;--mod-bg:#FFF6E5;}
.mod-green{--mod-c:#047857;--mod-bg:#E9F8F1;}
.mod-violet{--mod-c:#6D28D9;--mod-bg:#F3EEFF;}
.mod-teal{--mod-c:#0F766E;--mod-bg:#E6F7F5;}
.mod-slate{--mod-c:#334155;--mod-bg:#F1F4F9;}

/* ===== Phase 23: no-permission page ===== */
.noperm-wrap{display:flex;justify-content:center;padding:56px 0;}
.noperm-card{max-width:540px;width:100%;text-align:center;padding:36px 28px;}
.noperm-icon{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--tp-bad-bg);color:var(--tp-bad-text);}

/* ===== Phase 28: invoice payment plan ===== */
.inv-plan{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:flex-start;}

/* ===== Phase 30: quotation item suggestions ===== */
.ql-suggest{position:absolute;z-index:1080;background:#fff;border:1px solid var(--tp-line);border-radius:8px;box-shadow:0 8px 24px rgba(16,24,40,.12);max-height:260px;overflow-y:auto;min-width:320px;display:none;}
.ql-suggest.show{display:block;}
.ql-suggest div{padding:7px 10px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--tp-line-soft);}
.ql-suggest div:hover,.ql-suggest div.on{background:#FFF6E5;}
.ql-suggest small{display:block;color:var(--tp-muted);}
.ql-section td{background:#FFF6E5;}

/* Phase 34: dashboard one-line rows and payroll arrows */
.dash-oneline th,.dash-oneline td{white-space:nowrap;font-size:12px;padding:6px 8px;}
.dash-oneline td.dash-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;}
.dash-oneline .chip-out,.dash-oneline .chip-neutral{font-size:11px;}
.widget-head a.dash-arrow,.dash-arrow{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;border:1px solid var(--tp-line-soft);font-size:16px;line-height:1;color:var(--tp-ink);text-decoration:none;}
.widget-head a.dash-arrow:hover{background:var(--tp-line-soft);}
.dash-arrow.disabled{opacity:.35;}
/* Phase 34: monthly widgets */
.dash-month .dash-bar-cell{width:45%;}
.dash-bar{height:8px;border-radius:4px;background:#3B82F6;min-width:2px;}
.dash-bar.neg{background:#F43F5E;}
.dash-month tfoot td{font-weight:700;border-top:1px solid var(--tp-line-soft);}
/* Phase 34: customizable dashboard (GridStack) */
#dashGrid{margin-top:12px;}
#dashSpare{display:none;}
.grid-stack-item-content > .tp-card,.grid-stack-item-content > .kpi{height:100%;margin:0;}
.grid-stack-item-content > .tp-card{overflow:auto;}
.dash-quick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;height:100%;}
.dash-quick .btn{margin:0;}
.dash-remove{display:none;position:absolute;top:2px;right:2px;z-index:20;width:24px;height:24px;border:0;border-radius:50%;background:#B91C1C;color:#fff;font-size:16px;line-height:24px;padding:0;text-align:center;}
.dash-editing .dash-remove{display:block;}
.dash-editing .grid-stack-item-content{outline:2px dashed #94a3b8;outline-offset:-2px;cursor:move;}
.dash-editing .grid-stack-item-content *{pointer-events:none;}
.dash-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;position:sticky;top:0;z-index:30;}
.dash-toolbar.d-none{display:none;}
.dash-add{width:auto;min-width:200px;}
/* Phase 34: frozen widget headers and header colours */
.grid-stack-item-content .widget-head{position:sticky;top:0;z-index:3;background:#fff;}
.grid-stack-item-content .widget thead th{position:sticky;top:var(--wh,45px);z-index:2;background:#F7F9FC;}
.grid-stack-item.has-color .widget-head{background:var(--hc);border-bottom-color:var(--hc);}
.grid-stack-item.has-color .widget-head h3,.grid-stack-item.has-color .widget-head a{color:var(--hct);}
.grid-stack-item.has-color .widget-head a.dash-arrow,.grid-stack-item.has-color .widget-head .dash-arrow{color:var(--hct);border-color:var(--hct);}
.grid-stack-item.has-color .kpi,.grid-stack-item.has-color a.kpi:hover{background:var(--hc);color:var(--hct);}
.dash-colors{display:none;position:absolute;top:2px;right:30px;z-index:20;align-items:center;gap:2px;background:#fff;border-radius:12px;padding:0 3px;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.dash-editing .dash-colors{display:inline-flex;}
.dash-color{width:24px;height:22px;padding:0;border:0;background:none;cursor:pointer;}
.dash-nocolor{width:22px;height:22px;border:0;background:none;padding:0;font-size:15px;line-height:22px;color:#475569;}
/* Phase 34: frozen table headers on all pages (page scroll; not in print; not on narrow screens where the card scrolls sideways) */
@media screen and (min-width:1101px){
  .tp-table-card > .table > thead > tr > th{position:sticky;top:0;z-index:4;background:#fff;box-shadow:inset 0 -1px 0 var(--tp-line);}
}
/* Phase 34: widget arrows and period labels */
.widget-head h3 .dash-sub{font-size:11px;font-weight:500;color:var(--tp-muted);margin-left:6px;white-space:nowrap;}
.grid-stack-item.has-color .widget-head h3 .dash-sub{color:var(--hct);opacity:.85;}
.dash-rank{width:32px;}