/* =====================================================================
   ETHIWA — "Clean" design system
   Simple, flat, light: white header + white sidebar, grey canvas,
   white content cards, one indigo brand colour. Same look on the Hub,
   CRM (lms/) and Orders (manage_orders/). Loaded LAST on every page.
   ===================================================================== */

:root{
  --au-brand:   #4356C4;   /* indigo (links, icons, buttons) */
  --au-brand-dk:#3446A8;
  --au-tint:    #ECEEFA;   /* selected / hover background    */
  --au-ink:     #2B2F4A;   /* headings & menu text           */
  --au-text:    #3A3F58;
  --au-muted:   #7A8094;
  --au-line:    #E6E8EE;
  --au-bg:      #F0F1F4;   /* page canvas                    */
  --au-card:    #FFFFFF;
  --au-green:   #22B573;   --au-green-t:#E3F6EC;
  --au-amber:   #F59F00;   --au-amber-t:#FFF3D6;
  --au-red:     #E5484D;   --au-red-t:#FDE8E9;
  --au-sky:     #1C9DE8;   --au-sky-t:#DDF1FD;
  --au-shadow:  0 1px 3px rgba(20,25,50,.08);
  --au-radius:  6px;
  --au-side:    240px;
  --au-head:    64px;

  /* legacy names still referenced by page-level inline CSS */
  --au-mint:var(--au-green); --au-mint-t:var(--au-green-t); --au-coral:var(--au-red); --au-coral-t:var(--au-red-t);
  --au-brand-2:var(--au-brand); --au-ink-2:var(--au-ink); --au-shadow-h:0 4px 14px rgba(20,25,50,.12); --au-tint2:#F6F7FC;

  --bs-primary:#4356C4; --bs-primary-rgb:67,86,196;
  --bs-secondary:#7A8094; --bs-secondary-rgb:122,128,148;
  --bs-success:#22B573; --bs-success-rgb:34,181,115;
  --bs-danger:#E5484D; --bs-danger-rgb:229,72,77;
  --bs-warning:#F59F00; --bs-warning-rgb:245,159,0;
  --bs-info:#1C9DE8; --bs-info-rgb:28,157,232;
  --bs-dark:#2B2F4A; --bs-dark-rgb:43,47,74;
  --bs-body-font-family:"Roboto","Segoe UI",system-ui,sans-serif;
  --bs-body-color:#3A3F58; --bs-body-bg:#F0F1F4; --bs-body-font-size:.92rem;
  --bs-border-color:#E6E8EE; --bs-border-radius:.4rem;
  --bs-link-color:#4356C4; --bs-link-hover-color:#3446A8; --bs-link-color-rgb:67,86,196;

  --primary:#4356C4; --primary-dark:#3446A8; --bg-soft:#F0F1F4; --text-muted:#7A8094; --text-dark:#2B2F4A; --border-soft:#E6E8EE;
}

html,body{ font-family:"Roboto","Segoe UI",system-ui,sans-serif !important; }
body{ background:var(--au-bg) !important; color:var(--au-text); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family:inherit; font-weight:600; color:var(--au-ink); }
a{ color:var(--au-brand); text-decoration:none; } a:hover{ color:var(--au-brand-dk); }
.text-muted{ color:var(--au-muted) !important; }

/* ---------- Buttons: flat ---------- */
.btn{ font-weight:500; border-radius:var(--au-radius); padding:.45rem .95rem; box-shadow:none !important; transition:background .12s,border-color .12s; }
.btn-sm{ padding:.28rem .65rem; }
.btn-primary,.btn-info{ background:var(--au-brand); border-color:var(--au-brand); color:#fff; }
.btn-primary:hover,.btn-primary:focus,.btn-info:hover{ background:var(--au-brand-dk); border-color:var(--au-brand-dk); color:#fff; }
.btn-outline-primary{ color:var(--au-brand); border-color:var(--au-brand); } .btn-outline-primary:hover{ background:var(--au-brand); border-color:var(--au-brand); color:#fff; }
.btn-success{ background:var(--au-green); border-color:var(--au-green); color:#fff; } .btn-success:hover{ background:#1c9d63; border-color:#1c9d63; color:#fff; }
.btn-outline-success{ color:#19965F; border-color:var(--au-green); } .btn-outline-success:hover{ background:var(--au-green); border-color:var(--au-green); color:#fff; }
.btn-danger{ background:var(--au-red); border-color:var(--au-red); } .btn-outline-danger{ color:var(--au-red); border-color:var(--au-red); } .btn-outline-danger:hover{ background:var(--au-red); border-color:var(--au-red); }
.btn-warning{ background:var(--au-amber); border-color:var(--au-amber); color:#fff; }
.btn-outline-secondary,.btn-light{ color:var(--au-text); border-color:var(--au-line); background:#fff; } .btn-outline-secondary:hover,.btn-light:hover{ background:var(--au-tint); color:var(--au-brand); border-color:var(--au-line); }
.btn-dark{ background:var(--au-ink); border-color:var(--au-ink); }

/* ---------- Cards ---------- */
.card{ background:var(--au-card); border:0; border-radius:var(--au-radius); box-shadow:var(--au-shadow); }
.card-header{ background:#fff; border-bottom:1px solid var(--au-line); font-weight:600; color:var(--au-ink); padding:.85rem 1.25rem; border-radius:var(--au-radius) var(--au-radius) 0 0 !important; }
.card-body{ padding:1.25rem; } .card-footer{ background:#fff; border-top:1px solid var(--au-line); }

/* ---------- Forms ---------- */
.form-control,.form-select{ border:1px solid #D9DCE5; border-radius:var(--au-radius); padding:.5rem .8rem; background-color:#fff; color:var(--au-text); }
.form-control:focus,.form-select:focus{ border-color:var(--au-brand); box-shadow:0 0 0 3px rgba(67,86,196,.12); }
.form-label{ font-weight:500; font-size:.85rem; color:var(--au-ink); margin-bottom:.3rem; }
.input-group-text{ background:#F6F7FA; border:1px solid #D9DCE5; color:var(--au-muted); }
.form-check-input:checked{ background-color:var(--au-brand); border-color:var(--au-brand); }
.select2-container--default .select2-selection--single{ border:1px solid #D9DCE5 !important; border-radius:var(--au-radius) !important; height:40px !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:38px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:38px !important; }

/* ---------- Tables ---------- */
.table{ --bs-table-bg:transparent; }
.table thead th{ background:#F7F8FA !important; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--au-muted); font-weight:600; border-bottom:1px solid var(--au-line) !important; padding:.75rem 1rem; white-space:nowrap; }
.table td{ padding:.7rem 1rem; vertical-align:middle; border-color:var(--au-line); }
.table-hover>tbody>tr:hover>*{ background:#F6F7FC; }
.table-bordered>:not(caption)>*>*{ border-color:var(--au-line); }
.table-light,.table-light>td,.table-light>th{ background:#F7F8FA !important; }
.lead-table thead th{ background:#F7F8FA !important; }
.dataTables_wrapper .page-item.active .page-link{ background:var(--au-brand); border-color:var(--au-brand); }

/* ---------- Badges (distinct colours = quick scanning) ---------- */
.badge{ font-weight:500; border-radius:4px; padding:.4em .7em; }
.badge.bg-primary,.badge.text-bg-primary{ background:var(--au-tint) !important; color:var(--au-brand) !important; }
.badge.bg-info,.badge.text-bg-info{ background:var(--au-sky-t) !important; color:#0B78B8 !important; }
.badge.bg-success,.badge.text-bg-success{ background:var(--au-green-t) !important; color:#13804F !important; }
.badge.bg-warning,.badge.text-bg-warning{ background:var(--au-amber-t) !important; color:#B87400 !important; }
.badge.bg-orange{ background:#FFE8D6 !important; color:#C2410C !important; }
.badge.bg-danger,.badge.text-bg-danger{ background:var(--au-red-t) !important; color:#C2272C !important; }
.badge.bg-purple{ background:#F0E8FF !important; color:#7A3FE0 !important; }
.badge.bg-teal{ background:#D9F5F3 !important; color:#0B7F78 !important; }
.badge.bg-secondary,.badge.text-bg-secondary{ background:#ECEEF3 !important; color:#5A5F78 !important; }
.badge.bg-dark,.badge.text-bg-dark{ background:var(--au-ink) !important; color:#fff !important; }
.badge-status{ font-size:.72rem; font-weight:500; padding:.4em .7em; border-radius:4px; }
.status-waiting{ background:#F0E8FF; color:#7A3FE0; } .status-upcoming{ background:var(--au-sky-t); color:#0B78B8; }
.status-processing,.status-printing,.status-partial{ background:var(--au-amber-t); color:#B87400; }
.status-delivery-hub{ background:var(--au-tint); color:var(--au-brand); }
.status-delivered,.status-paid{ background:var(--au-green-t); color:#13804F; } .status-pending{ background:var(--au-red-t); color:#C2272C; }

.alert{ border:0; border-radius:var(--au-radius); }
.modal-content{ border:0; border-radius:8px; box-shadow:0 12px 40px rgba(20,25,50,.2); }
.modal-header{ border-bottom:1px solid var(--au-line); } .modal-footer{ border-top:1px solid var(--au-line); }
.nav-tabs .nav-link.active,.nav-pills .nav-link.active{ background:var(--au-brand); color:#fff; border-color:var(--au-brand); }
.dropdown-menu{ border:1px solid var(--au-line); border-radius:var(--au-radius); box-shadow:var(--au-shadow); }
.progress{ background:var(--au-line); } .progress-bar{ background:var(--au-brand); }

/* ---------- Shared components ---------- */
.stat-tile,.stat-card{ background:#fff; border:0 !important; border-radius:var(--au-radius); padding:1.1rem 1.25rem; height:100%; box-shadow:var(--au-shadow); }
.stat-tile .stat-label,.stat-card .stat-label{ font-size:.78rem; color:var(--au-muted); font-weight:500; margin-bottom:.25rem; text-transform:none; letter-spacing:0; }
.stat-tile .stat-value,.stat-card .stat-value{ font-size:1.6rem; font-weight:700; color:var(--au-ink); line-height:1.15; }
.stat-tile .stat-sub{ font-size:.78rem; color:var(--au-muted); }
.stat-tile.accent-red .stat-value{ color:var(--au-red); } .stat-tile.accent-green .stat-value{ color:var(--au-green); }
.stat-tile.accent-orange .stat-value{ color:var(--au-amber); } .stat-tile.accent-purple .stat-value{ color:var(--au-brand); }
a.stat-tile{ display:block; transition:box-shadow .15s; } a.stat-tile:hover{ box-shadow:var(--au-shadow-h); }
.page-head{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; margin-bottom:1rem; }
.page-head h4{ margin:0; font-weight:600; }
.section-title{ font-weight:600; color:var(--au-ink); display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem; } .section-title i{ color:var(--au-brand); }
.empty-state{ padding:2.5rem 1rem; text-align:center; color:var(--au-muted); }
.timeline li::before{ background:var(--au-brand) !important; } .timeline li{ border-left-color:var(--au-line) !important; }
.breadcrumb-bar{ font-size:.85rem; color:var(--au-muted); margin-bottom:1rem; } .breadcrumb-bar a{ color:var(--au-ink); } .breadcrumb-bar span{ margin:0 .4rem; }

/* =====================================================================
   SHELL — CRM (lms/): white sidebar + white top bar
   ===================================================================== */
.sidebar{ width:var(--au-side) !important; background:#fff !important; border-right:1px solid var(--au-line); box-shadow:none !important; }
.sidebar-brand{ height:var(--au-head); padding:0 1.25rem !important; font-size:1.35rem !important; font-weight:700; letter-spacing:-.02em; color:var(--au-brand) !important; border-bottom:1px solid var(--au-line) !important; display:flex; align-items:center; gap:.6rem; }
.sidebar-brand i{ color:var(--au-brand); font-size:1.3rem; }
.sidebar-nav{ padding:.75rem .6rem !important; }
.sidebar-nav a{ border-left:0 !important; border-radius:var(--au-radius); margin-bottom:.1rem; padding:.62rem .85rem !important; color:var(--au-ink) !important; font-weight:500; font-size:.9rem !important; }
.sidebar-nav a i{ color:var(--au-brand); font-size:1.1rem !important; }
.sidebar-nav a:hover{ background:var(--au-tint) !important; color:var(--au-brand) !important; }
.sidebar-nav a.active{ background:var(--au-tint) !important; color:var(--au-brand) !important; font-weight:600; }
.sidebar-sep{ color:var(--au-muted) !important; border-top:0 !important; margin:1rem .85rem .3rem !important; padding-top:0 !important; font-size:.7rem !important; font-weight:600; letter-spacing:.06em; }
.sidebar-sep:empty{ margin:.4rem .85rem !important; border-top:1px solid var(--au-line) !important; }
.main-content{ margin-left:var(--au-side) !important; }
.topbar{ height:var(--au-head); background:#fff !important; border-bottom:1px solid var(--au-line) !important; box-shadow:0 1px 3px rgba(20,25,50,.05); padding:0 1.5rem !important; }
.page-title{ font-weight:600 !important; font-size:1.15rem !important; color:var(--au-ink); }
.page-content{ padding:1.5rem !important; }
.topbar-search .form-control{ background:transparent !important; border:0 !important; border-bottom:1px solid var(--au-line) !important; border-radius:0 !important; }
.topbar-search .form-control:focus{ border-bottom-color:var(--au-brand) !important; box-shadow:none; }
.search-results{ border-radius:var(--au-radius) !important; border-color:var(--au-line) !important; } .search-results a:hover,.search-results a.active{ background:var(--au-tint) !important; }
.admin-name{ font-weight:500; color:var(--au-ink) !important; }
.big-tile{ border-radius:var(--au-radius) !important; box-shadow:var(--au-shadow) !important; }
.tile-red{ background:var(--au-red) !important; } .tile-orange{ background:var(--au-amber) !important; }
.tile-blue{ background:var(--au-brand) !important; } .tile-green{ background:var(--au-green) !important; } .tile-teal{ background:var(--au-sky) !important; }
.section-card{ border-left:4px solid var(--au-line) !important; }
.sec-red{ border-left-color:var(--au-red) !important; } .sec-orange{ border-left-color:var(--au-amber) !important; }
.sec-blue{ border-left-color:var(--au-brand) !important; } .sec-green{ border-left-color:var(--au-green) !important; } .sec-teal{ border-left-color:var(--au-sky) !important; }
.lead-name{ color:var(--au-ink) !important; font-weight:600; } .lead-name:hover{ color:var(--au-brand) !important; }
.lead-row.row-high>td{ background:#FFFAEB !important; } .lead-row.kind-missing>td{ background:var(--au-red-t) !important; }
.need-followup,.na-overdue{ background:var(--au-red) !important; } .na-today{ background:var(--au-amber) !important; }
.na-upcoming{ background:var(--au-green) !important; } .na-new{ background:var(--au-brand) !important; } .na-final{ background:var(--au-muted) !important; }
.tab-pills .nav-link{ border-radius:var(--au-radius) !important; border-color:var(--au-line) !important; color:var(--au-text) !important; background:#fff; }
.tab-pills .nav-link.active{ background:var(--au-brand) !important; border-color:var(--au-brand) !important; color:#fff !important; }
.btn-check:checked+.outcome-btn{ background:var(--au-brand) !important; border-color:var(--au-brand) !important; }
.bg-teal{ background-color:var(--au-sky) !important; } .bg-purple{ background-color:#7A3FE0 !important; } .bg-orange{ background-color:#F76707 !important; }
.fu-overdue{ color:var(--au-red) !important; } .fu-today{ color:#B87400 !important; } .fu-up{ color:#13804F !important; } .fu-new{ color:var(--au-brand) !important; }
@media (max-width:991.98px){ .sidebar{ left:calc(var(--au-side) * -1) !important; } .sidebar.show{ left:0 !important; box-shadow:0 0 30px rgba(0,0,0,.15) !important; } .main-content{ margin-left:0 !important; } }

/* =====================================================================
   SHELL — Orders (manage_orders/, AdminLTE)
   ===================================================================== */
.app-sidebar{ background:#fff !important; border-right:1px solid var(--au-line) !important; box-shadow:none !important; }
.app-sidebar .sidebar-brand{ height:var(--au-head); background:#fff !important; border-bottom:1px solid var(--au-line) !important; }
.app-sidebar .brand-link,.app-sidebar .brand-text{ color:var(--au-brand) !important; font-weight:700 !important; font-size:1.3rem; }
.app-sidebar .nav-link{ color:var(--au-ink) !important; border-radius:var(--au-radius) !important; margin:.08rem .5rem !important; font-weight:500; }
.app-sidebar .nav-link .nav-icon{ color:var(--au-brand); }
.app-sidebar .nav-link:hover{ background:var(--au-tint) !important; color:var(--au-brand) !important; }
.app-sidebar .nav-link.active{ background:var(--au-tint) !important; color:var(--au-brand) !important; font-weight:600; box-shadow:none !important; }
.app-sidebar .menu-open>.nav-link{ background:var(--au-tint) !important; color:var(--au-brand) !important; }
.app-sidebar .nav-header{ color:var(--au-muted) !important; font-size:.7rem !important; letter-spacing:.06em; font-weight:600; }
.app-sidebar .nav-treeview>.nav-item>.nav-link{ font-weight:400; font-size:.88rem; }
.app-sidebar .nav-arrow{ color:var(--au-muted); }
.app-header{ height:var(--au-head); background:#fff !important; border-bottom:1px solid var(--au-line) !important; box-shadow:0 1px 3px rgba(20,25,50,.05) !important; }
.app-header .nav-link{ color:var(--au-ink); }
.app-main{ background:var(--au-bg); } .app-content{ padding:.75rem .5rem; }
.app-footer{ background:transparent !important; border-top:1px solid var(--au-line) !important; color:var(--au-muted); }
.small-box,.info-box{ border-radius:var(--au-radius) !important; box-shadow:var(--au-shadow) !important; }
.user-header{ background:var(--au-brand) !important; }
.text-bg-primary{ background:var(--au-brand) !important; }
.reminder-header{ background:var(--au-brand) !important; color:#fff !important; }

/* ---------- Login screens ---------- */
.login-wrapper{ background:var(--au-bg) !important; }
.login-card,.login-box,.login-box.card{ border:0 !important; border-radius:8px !important; box-shadow:0 8px 30px rgba(20,25,50,.12) !important; }
.login-card .brand i{ color:var(--au-brand) !important; }

/* =====================================================================
   SHARED SIDEBAR MENU (includes/hub_menu.php) — same in Hub, CRM, Orders
   ===================================================================== */
.hm-brand{ height:var(--au-head); margin:0 -.6rem .5rem; padding:0 1.25rem; color:var(--au-brand); font-weight:700; font-size:1.35rem; display:flex; gap:.6rem; align-items:center; text-decoration:none; border-bottom:1px solid var(--au-line); }
.hm-brand:hover{ color:var(--au-brand); }
.hm-cap{ font-size:.7rem; font-weight:600; letter-spacing:.06em; color:var(--au-muted); padding:.5rem .85rem; }
.hm-g > .hm-top{ width:100%; background:none; border:0; text-align:left; color:var(--au-ink); padding:.62rem .85rem; border-radius:var(--au-radius); font-size:.9rem; font-weight:500; display:flex; align-items:center; gap:.75rem; text-decoration:none; cursor:pointer; margin-bottom:.1rem; }
.hm-g > .hm-top > i:first-child{ color:var(--au-brand); font-size:1.1rem; }
.hm-g > .hm-top:hover{ background:var(--au-tint); color:var(--au-brand); }
.hm-g.act > .hm-top, .hm-g.open > .hm-top{ background:var(--au-tint); color:var(--au-brand); font-weight:600; }
.hm-chev{ margin-left:auto; font-size:.6rem; color:var(--au-muted); transition:transform .15s; }
.hm-g.open .hm-chev{ transform:rotate(180deg); }
.hm-sub{ display:none; padding:.1rem 0 .4rem; }
.hm-g.open .hm-sub{ display:block; }
.hm-sub a{ display:flex; align-items:center; justify-content:space-between; color:var(--au-text); text-decoration:none; padding:.4rem .85rem .4rem 2.6rem; font-size:.86rem; border-radius:var(--au-radius); }
.hm-sub a:hover{ color:var(--au-brand); background:#F6F7FC; }
.hm-sub a.on{ color:var(--au-brand); font-weight:600; background:#F6F7FC; }
.hm-badge{ background:var(--au-red); color:#fff; font-size:.7rem; font-weight:600; border-radius:1rem; padding:.05rem .5rem; }
.hm-wrap{ padding:0 .6rem 1rem; }
/* Orders (AdminLTE) sidebar uses the same width as the others */
:root,[data-bs-theme=light]{ --lte-sidebar-width:240px; }
.app-sidebar{ overflow-y:auto; }


/* =====================================================================
   MOBILE — nothing should ever need sideways scrolling.
   Tables become cards, forms/buttons get bigger tap targets, a bottom
   tab bar replaces hunting for the menu. (labels come from ethiwa-mobile.js)
   ===================================================================== */
.bnav{ display:none; }
img,canvas,svg,video,iframe{ max-width:100%; }

@media (max-width:991.98px){
  html,body{ overflow-x:hidden; }
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  .bnav{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1030; background:#fff; border-top:1px solid var(--au-line); box-shadow:0 -2px 12px rgba(20,25,50,.08); padding-bottom:env(safe-area-inset-bottom); }
  .bnav a,.bnav button{ flex:1; background:none; border:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem; padding:.5rem 0 .4rem; color:var(--au-muted); font-size:.68rem; font-weight:500; text-decoration:none; min-height:56px; }
  .bnav i{ font-size:1.3rem; line-height:1; }
  .bnav a.on{ color:var(--au-brand); } .bnav a.on i{ color:var(--au-brand); }
}

@media (max-width:767.98px){
  html{ font-size:15px; }
  .container,.container-fluid{ padding-left:.75rem; padding-right:.75rem; }
  .page-content,.content{ padding:.9rem .75rem !important; }
  .app-content{ padding:.5rem 0; }
  .card-body{ padding:1rem; }
  .card-header{ padding:.75rem 1rem; }
  .topbar,.hub-top,.app-header{ height:auto !important; min-height:var(--au-head); }
  .page-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar-search{ display:none; }
  .page-head{ flex-direction:column; align-items:stretch !important; }
  .page-head .btn{ width:100%; }
  .hello h3{ font-size:1.15rem; }
  .stat{ padding:.9rem; gap:.7rem; } .stat .ico{ width:38px; height:38px; font-size:1rem; } .stat .v{ font-size:1.05rem; }
  .content div[style*="height:340px"]{ height:230px !important; }
  [style*="min-width"]{ min-width:0 !important; }
  .row>.col-auto{ flex:0 0 100%; max-width:100%; }

  /* tap-friendly forms & buttons (16px stops iOS zooming into fields) */
  .form-control,.form-select{ font-size:16px; min-height:44px; }
  .btn{ min-height:42px; } .btn-sm{ min-height:36px; }
  .modal-dialog{ margin:.5rem; }
  .quick-chips .btn{ flex:1 1 45%; }
  .tab-pills,.nav-pills{ flex-wrap:wrap; }

  /* DataTables controls: full width, stacked */
  .dataTables_wrapper .row>*{ width:100%; flex:0 0 100%; }
  .dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_info{ text-align:left !important; float:none; }
  .dataTables_wrapper .dataTables_filter input{ width:100% !important; margin-left:0 !important; }
  .dataTables_wrapper .dataTables_paginate{ display:flex; justify-content:center; }
  .dataTables_wrapper .pagination{ flex-wrap:wrap; justify-content:center; }
  .table-responsive{ overflow-x:visible; }

  /* ---- table -> cards ---- */
  .m-stack:not(.lead-table):not(.stack-table){ display:block; width:100% !important; }
  .m-stack:not(.lead-table):not(.stack-table) thead{ display:none; }
  .m-stack:not(.lead-table):not(.stack-table) tbody,
  .m-stack:not(.lead-table):not(.stack-table) tfoot{ display:block; width:100%; }
  .m-stack:not(.lead-table):not(.stack-table) tr{ display:block; width:100%; background:#fff; border:1px solid var(--au-line); border-radius:8px; margin-bottom:.7rem; padding:.3rem 0; box-shadow:var(--au-shadow); }
  .m-stack:not(.lead-table):not(.stack-table) td,
  .m-stack:not(.lead-table):not(.stack-table) th{ display:block; width:100% !important; text-align:left !important; padding:.4rem .9rem; border:0 !important; background:transparent !important; word-break:break-word; }
  .m-stack:not(.lead-table):not(.stack-table) td[data-label]::before{ content:attr(data-label); display:block; font-size:.68rem; font-weight:500; text-transform:uppercase; letter-spacing:.04em; color:var(--au-muted); margin-bottom:.1rem; }
  .m-stack:not(.lead-table):not(.stack-table) td[data-label=""]::before{ display:none; }
  .m-stack:not(.lead-table):not(.stack-table) td>*{ max-width:100%; }
  .m-stack:not(.lead-table):not(.stack-table) td.dtr-hidden,
  .m-stack:not(.lead-table):not(.stack-table) th.dtr-hidden{ display:block !important; }
  .m-stack:not(.lead-table):not(.stack-table) tr.child{ display:none !important; }
  table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control::before,
  table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control::before{ display:none !important; }
  .box .m-stack:not(.lead-table) tr{ border-radius:0; border-width:0 0 1px; box-shadow:none; margin:0; }

  /* CRM list tables reuse lms.css card mode; give them the same look */
  .lead-table tr{ background:#fff; }
}



/* pipeline sub-stages + grey stage counts in the sidebar */
.hm-sub a.sub{ padding-left:3.6rem; font-size:.82rem; color:var(--au-muted); }
.hm-sub a.sub.on{ color:var(--au-brand); }
.hm-count{ background:#ECEEF3; color:var(--au-muted); font-size:.7rem; font-weight:500; border-radius:1rem; padding:.05rem .5rem; }
/* CRM dashboard: pipeline strip */
.pipe{ display:flex; align-items:stretch; gap:.5rem; flex-wrap:wrap; }
.pipe-arrow{ display:flex; align-items:center; color:var(--au-muted); }
.pipe-step{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:104px; padding:.7rem .9rem; border:1px solid var(--au-line); border-radius:var(--au-radius); background:#fff; color:var(--au-ink); text-decoration:none; font-size:.82rem; font-weight:500; text-align:center; transition:box-shadow .15s; }
.pipe-step:hover{ box-shadow:var(--au-shadow-h); color:var(--au-brand); }
.pipe-step small{ font-size:.65rem; color:var(--au-muted); letter-spacing:.06em; }
.pipe-step b{ font-size:1.5rem; line-height:1.1; color:var(--au-ink); }
.pipe-step.head{ border-color:var(--au-brand); background:var(--au-tint); }
.pipe-step.won{ border-color:var(--au-green); } .pipe-step.won b{ color:var(--au-green); }
.pipe-step.lost{ border-color:#C9CCD6; } .pipe-step.lost b{ color:var(--au-muted); }
.pipe-group{ display:flex; flex-direction:column; gap:.4rem; }
.pipe-subs{ display:grid; grid-template-columns:1fr 1fr; gap:.35rem; }
.pipe-subs a{ display:flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border:1px dashed var(--au-line); border-radius:var(--au-radius); font-size:.78rem; color:var(--au-text); text-decoration:none; background:#fff; }
.pipe-subs a:hover{ border-color:var(--au-brand); color:var(--au-brand); }
.pipe-subs a b{ color:var(--au-brand); }
.pipe-end{ display:flex; flex-direction:column; gap:.4rem; }
@media (max-width:767.98px){
  .pipe{ flex-direction:column; } .pipe-arrow{ justify-content:center; transform:rotate(90deg); }
  .pipe-step{ flex-direction:row; justify-content:flex-start; gap:.75rem; } .pipe-step b{ font-size:1.2rem; }
  .pipe-end{ flex-direction:row; } .pipe-end .pipe-step{ flex:1; }
}
/* Follow-up page: pipeline steps at the top */
.steps{ display:flex; align-items:stretch; gap:.5rem; flex-wrap:wrap; background:#fff; border-radius:var(--au-radius); box-shadow:var(--au-shadow); padding:.9rem 1rem; }
.st-arrow{ align-self:center; color:var(--au-muted); }
.st{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:96px; padding:.55rem .8rem; border:1px solid var(--au-line); border-radius:var(--au-radius); background:#fff; color:var(--au-text); text-decoration:none; font-size:.8rem; font-weight:500; text-align:center; }
.st b{ font-size:1.35rem; line-height:1.1; color:var(--au-ink); }
.st:hover{ border-color:var(--au-brand); color:var(--au-brand); }
.st.on{ background:var(--au-brand); border-color:var(--au-brand); color:#fff; }
.st.on b{ color:#fff; }
.st-group{ display:flex; flex-direction:column; gap:.4rem; }
.st-subs{ display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem; }
.st-subs .st{ min-width:0; flex-direction:row; justify-content:center; gap:.4rem; padding:.35rem .5rem; border-style:dashed; font-size:.76rem; }
.st-subs .st b{ font-size:.95rem; }
.st-subs .st.on{ border-style:solid; }
.st-end{ display:flex; flex-direction:column; gap:.4rem; }
.st-won b{ color:var(--au-green); } .st-lost b{ color:var(--au-muted); }
@media (max-width:767.98px){
  .steps{ flex-direction:column; } .st-arrow{ transform:rotate(90deg); }
  .st{ flex-direction:row; justify-content:flex-start; gap:.75rem; }
  .st-subs{ grid-template-columns:1fr 1fr; } .st-end{ flex-direction:row; } .st-end .st{ flex:1; }
}
/* Lead cards */
.lead-cards{ display:flex; flex-direction:column; gap:.75rem; padding:.75rem; }
.card > .card-body.p-0 > .lead-cards{ padding:.75rem; }
.lc{ background:#fff; border:1px solid var(--au-line); border-radius:var(--au-radius); box-shadow:var(--au-shadow); overflow:hidden; }
.lc.row-high{ border-left:4px solid var(--au-amber); }
.lc.kind-missing{ border-left:4px solid var(--au-red); background:#fff; }
.lc.kind-overdue{ border-left:4px solid #F2A6A9; }
.lc-head{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.6rem 1rem; border-bottom:1px solid var(--au-line); flex-wrap:wrap; }
.lc-head-l{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; min-width:0; }
.lc-head .btn-fire{ font-size:1rem; padding:0; }
.lc-id{ font-weight:700; color:var(--au-brand); text-decoration:none; }
.lc-src{ display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:600; color:#fff; border-radius:4px; padding:.2rem .55rem; }
.src-wa{ background:#1FA855; } .src-ig{ background:#C13584; } .src-fb{ background:#1877F2; } .src-man{ background:#6C7290; }
.lc-date{ color:var(--au-muted); font-size:.85rem; }
.lc-status{ font-size:.78rem; }
.lc-body{ display:grid; grid-template-columns:1.1fr 1.4fr 1fr; gap:1.5rem; padding:.9rem 1rem; }
.lc-name{ display:block; font-size:1.05rem; font-weight:600; margin-bottom:.15rem; }
.lc-line{ font-size:.9rem; margin-bottom:.15rem; } .lc-line i{ margin-right:.25rem; color:var(--au-muted); }
.lc-line a{ color:var(--au-text); text-decoration:none; }
.lc-sub{ font-size:.82rem; color:var(--au-muted); margin-top:.1rem; }
.lc-prod{ font-weight:600; color:var(--au-ink); } .lc-qty{ color:var(--au-muted); font-weight:500; }
.lc-note{ font-size:.85rem; margin-top:.35rem; color:var(--au-text); }
.lc-tag{ display:inline-block; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; background:var(--au-ink); color:#fff; border-radius:3px; padding:.1rem .4rem; margin-right:.25rem; }
.lc-tag.wa{ background:#1FA855; }
.lc-right{ font-size:.88rem; }
.lc-kv{ display:flex; justify-content:space-between; gap:.75rem; margin-bottom:.15rem; }
.lc-kv > span{ color:var(--au-muted); } .lc-kv b, .lc-kv small{ text-align:right; font-weight:600; }
.lc-bar{ height:6px; margin-top:.55rem; }
.lc-foot{ display:flex; justify-content:flex-end; gap:.5rem; flex-wrap:wrap; padding:.6rem 1rem; border-top:1px solid var(--au-line); background:#FCFCFD; }
@media (max-width:991.98px){ .lc-body{ grid-template-columns:1fr 1fr; } .lc-right{ grid-column:1 / -1; } }
@media (max-width:575.98px){
  .lc-body{ grid-template-columns:1fr; gap:.75rem; padding:.75rem; }
  .lead-cards{ padding:.5rem; }
  .lc-foot{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); padding:.6rem; }
  .lc-foot .lf-form{ display:contents !important; }
  .lc-foot .lf-a{ grid-column:span 3; } .lc-foot.has-print .lf-a{ grid-column:span 2; }   /* Details | Note | Print label */
  .lc-foot .lf-b{ grid-column:span 3; }                                                   /* Call | WhatsApp */
  .lc-foot .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.3rem; min-width:0; height:40px; padding-top:0; padding-bottom:0; line-height:1; text-align:center; }
  .lc-foot .lf-a, .lc-foot .lf-b{ padding-left:.25rem; padding-right:.25rem; white-space:nowrap; font-size:.85rem; }
  .lc-foot .lf-form .btn{ margin:0; }
  .lc-foot .btn:not(.lf-a):not(.lf-b){ grid-column:1 / -1; }                             /* Follow-up / Contact on its own line */
  .lc-foot .btn{ width:100%; } 
}
.hm-g > a.hm-top .hm-chev-btn{ margin-left:auto; padding:.2rem .45rem; border-radius:4px; }
.hm-g > a.hm-top .hm-chev-btn:hover{ background:rgba(67,86,196,.12); }
/* group opened from its own page (e.g. CRM dashboard) is lit like an active item */
.hm-g.open > a.hm-top{ background:var(--au-tint); color:var(--au-brand); font-weight:600; }
/* follow-up popup */
.fu-staff{ background:var(--au-tint); color:var(--au-brand); border-radius:var(--au-radius); padding:.45rem .75rem; font-size:.85rem; }
.type-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:.4rem; }
.type-grid .btn{ font-size:.8rem; padding:.45rem .2rem; }
.type-grid .btn-check:checked + .btn{ background:var(--au-brand); border-color:var(--au-brand); color:#fff; }
@media (max-width:575.98px){ .type-grid{ grid-template-columns:repeat(3,1fr); } }
/* follow-up popup: keep it short */
#followupModal .modal-body{ padding:1rem 1.1rem; }
#followupModal .form-label{ margin-bottom:.15rem; }
#followupModal .quick-chips .btn{ padding:.15rem .55rem; font-size:.75rem; }
/* Follow-up history timeline (lead details page) */
.fh{ position:relative; }
.fh-item{ position:relative; display:flex; gap:.9rem; padding-bottom:1.1rem; }
.fh-item:not(:last-child)::before{ content:''; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--au-line); }
.fh-dot{ flex:0 0 32px; height:32px; border-radius:50%; background:var(--au-brand); color:#fff; font-weight:600; font-size:.8rem; display:flex; align-items:center; justify-content:center; z-index:1; }
.fh-box{ flex:1; min-width:0; background:#FAFAFC; border:1px solid var(--au-line); border-radius:var(--au-radius); padding:.75rem .9rem; }
.fh-top{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.35rem; }
.fh-staff{ margin-left:.5rem; font-size:.82rem; color:var(--au-brand); font-weight:600; }
.fh-plan{ font-size:.8rem; color:var(--au-muted); background:#fff; border:1px dashed var(--au-line); border-radius:4px; padding:.2rem .5rem; margin-bottom:.4rem; }
.fh-move{ font-size:.82rem; color:var(--au-muted); margin-bottom:.35rem; }
.fh-tags{ display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.4rem; }
.fh-said{ background:#fff; border-left:3px solid var(--au-brand); padding:.5rem .75rem; border-radius:0 var(--au-radius) var(--au-radius) 0; font-size:.95rem; color:var(--au-ink); margin-bottom:.45rem; word-break:break-word; }
.fh-next{ font-size:.82rem; color:var(--au-muted); }
.fh-staff{ display:inline-block; background:var(--au-tint); border-radius:1rem; padding:.1rem .6rem; }
/* click a date in the history -> that day's WhatsApp chat + everything else */
.fh-date{ font-weight:700; color:var(--au-ink); text-decoration:none; border-bottom:1px dashed var(--au-brand); }
.fh-date:hover{ color:var(--au-brand); }
.dy{ border-left:3px solid var(--au-line); padding:.1rem 0 .1rem .8rem; margin-bottom:1rem; }
.dy-wa{ border-left-color:#1FA855; } .dy-note{ border-left-color:var(--au-amber); } .dy-fu{ border-left-color:var(--au-brand); }
.dy-head{ display:flex; gap:.6rem; align-items:baseline; font-size:.8rem; color:var(--au-muted); }
.dy-time{ font-weight:600; } .dy-who{ font-weight:600; color:var(--au-ink); }
.dy-title{ font-weight:600; margin-top:.15rem; } .dy-extra{ font-size:.82rem; color:var(--au-muted); }
.dy-text{ margin-top:.25rem; white-space:pre-wrap; word-break:break-word; background:#F6F7FB; border-radius:var(--au-radius); padding:.45rem .65rem; }
.dy-wa .dy-text{ background:#E8F7EE; }
.dy-next{ font-size:.8rem; color:var(--au-muted); margin-top:.25rem; }
.perm-row{ display:flex; gap:.5rem; align-items:flex-start; padding:.35rem .5rem; border:1px solid var(--au-line); border-radius:var(--au-radius); cursor:pointer; font-size:.88rem; height:100%; }
.perm-row:hover{ background:var(--au-tint); }
.perm-row{ display:flex; gap:.5rem; align-items:flex-start; padding:.35rem .5rem; border:1px solid var(--au-line); border-radius:var(--au-radius); cursor:pointer; font-size:.88rem; height:100%; }
.perm-row:hover{ background:var(--au-tint); }
/* radio / checkbox circles must be clearly visible even when not selected */
.form-check-input{ width:1.25rem; height:1.25rem; border:2px solid #8D94AA; background-color:#fff; cursor:pointer; }
.form-check-input:hover{ border-color:var(--au-brand); }
.form-check-input:checked{ background-color:var(--au-brand); border-color:var(--au-brand); }
.form-check-input:focus{ box-shadow:0 0 0 3px rgba(67,86,196,.2); border-color:var(--au-brand); }
.form-switch .form-check-input{ width:2.25rem; }
.access-table td, .access-table th{ vertical-align:middle; }
.access-table tbody tr:hover td{ background:#F6F7FC; }
/* quick permission buttons: the one that matches the ticked table is shown selected */
.js-quick.active, .js-quick.active:hover{ background:#D5D8E2; border-color:#8D94AA; color:#2B2F4A; font-weight:600; }
/* Confirm Shipping Address: compact card */
.addr-card{ border-radius:6px; }
.addr-card .form-control-sm{ padding:.3rem .55rem; }
.addr-card .row{ --bs-gutter-y:.4rem; }
/* country code box next to the mobile number: short "+91 IN" */
.cc-box{ width:92px !important; min-width:92px; padding-left:.55rem; padding-right:1.6rem; font-weight:600; background-color:#F6F7FA; }
.cc-box{ text-align:center; padding-right:.55rem !important; background-image:none !important; width:78px !important; min-width:78px !important; }
/* ---- fixes found on the follow-up filter bar ---- */
/* dropdowns: keep room for the arrow (the text used to run under it) */
.form-select{ padding-right:2.4rem !important; background-position:right .8rem center; background-size:14px 10px; text-overflow:ellipsis; }
.form-select-sm{ padding-right:2.2rem !important; }
/* toggle switch: clear pill + white handle, brand colour when on */
.form-check.form-switch{ display:inline-flex; align-items:center; gap:.55rem; padding-left:0; min-height:0; }
.form-switch .form-check-input{
  width:2.6rem; height:1.4rem; margin:0; float:none; border:1px solid #B4BAC9; border-radius:2rem;
  background-color:#D3D8E4;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-position:left center; background-repeat:no-repeat; background-size:contain; transition:background-position .15s, background-color .15s;
}
.form-switch .form-check-input:checked{
  background-color:var(--au-brand); border-color:var(--au-brand); background-position:right center;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch .form-check-label{ margin:0; cursor:pointer; white-space:nowrap; }
/* filter bars: same height for every control */
form .form-control, form .form-select{ min-height:42px; }
/* phone top bar: the Ethiwa logo instead of a menu button (the bottom bar has "Menu") */
.top-logo{ display:none; align-items:center; gap:.5rem; font-weight:700; font-size:1.3rem; letter-spacing:-.02em; color:var(--au-brand); text-decoration:none; white-space:nowrap; }
.top-logo i{ font-size:1.3rem; }
.top-logo:hover{ color:var(--au-brand); }
@media (max-width:991.98px){ .top-logo{ display:inline-flex; } }
/* ===== phones: the top of the Follow-up page in about 2 inches ===== */
.filter-extra{ display:contents; }
.filter-toggle{ display:none; }
.nlb-short{ display:none; }
@media (max-width:767.98px){
  /* steps: small chips, three rows */
  .steps{ flex-direction:row; flex-wrap:wrap; gap:.3rem; padding:.5rem; margin-bottom:.5rem !important; }
  .st-arrow{ display:none; }
  .st-group, .st-subs, .st-end{ display:contents; }
  .st{ flex-direction:row !important; min-width:0; flex:0 0 auto; padding:.28rem .6rem; gap:.35rem; font-size:.76rem; justify-content:center; }
  .st b{ font-size:.85rem; }
  .st-subs .st{ font-size:.7rem; padding:.22rem .5rem; }
  .st-end .st{ flex:0 0 auto; }
  /* WhatsApp line: one thin row */
  .nlb{ margin-bottom:.5rem !important; }
  .nlb .card-body{ padding:.4rem .7rem !important; flex-wrap:nowrap !important; gap:.5rem !important; }
  .nlb .badge.fs-6{ font-size:.8rem !important; padding:.3rem !important; }
  .nlb-txt{ display:none; }
  .nlb-short{ display:block; font-size:.8rem; color:var(--au-muted); }
  .nlb .btn{ padding:.28rem .65rem; font-size:.82rem; white-space:nowrap; min-height:34px; }
  /* stage pills: small */
  .tab-pills{ margin-bottom:.4rem !important; }
  .tab-pills .nav-link{ padding:.2rem .5rem; font-size:.76rem; margin:0 .2rem .2rem 0; }
  .tab-pills .nav-link .badge{ font-size:.65rem; }
  /* search row: [ search box ][ filters ][ search ]  - the rest opens in a small panel */
  .fbar{ flex-wrap:wrap !important; gap:.35rem !important; margin-bottom:.5rem !important; }
  .fbar input[type=search]{ flex:1 1 0; min-width:0; max-width:none !important; min-height:38px; }
  .fbar .btn{ min-height:38px; padding:.3rem .7rem; }
}

/* Follow-up page steps: line 1 = 5 main steps (always one line), line 2 = the 4 follow-up options (only on the Follow-up page) */
.stp{ background:#fff; border-radius:var(--au-radius); box-shadow:var(--au-shadow); padding:.6rem .7rem; margin-bottom:.9rem; }
.stp-main, .stp-sub{ display:flex; gap:.4rem; }
.stp-i{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:.4rem .25rem; border:1px solid var(--au-line); border-radius:6px; background:#fff; color:var(--au-text); text-decoration:none; font-size:.8rem; font-weight:500; text-align:center; line-height:1.15; }
.stp-i b{ font-size:1.2rem; line-height:1.1; color:var(--au-ink); }
.stp-i:hover{ border-color:var(--au-brand); color:var(--au-brand); }
.stp-i.on{ background:var(--au-brand); border-color:var(--au-brand); color:#fff; } .stp-i.on b{ color:#fff; }
.stp-won b{ color:var(--au-green); } .stp-lost b{ color:var(--au-muted); }
.stp-sub{ margin-top:.5rem; padding-top:.5rem; border-top:1px dashed var(--au-line); }
.stp-sub .stp-i{ flex-direction:row; gap:.4rem; padding:.3rem .4rem; font-size:.76rem; border-style:dashed; }
.stp-sub .stp-i b{ font-size:.95rem; }
.stp-sub .stp-i.on{ border-style:solid; }
.lb-short{ display:none; }
@media (max-width:575.98px){
  .stp{ padding:.45rem .5rem; margin-bottom:.5rem; }
  .stp-main, .stp-sub{ gap:.3rem; }
  .stp-i{ font-size:.66rem; padding:.3rem .1rem; }
  .stp-i b{ font-size:1rem; }
  .stp-sub .stp-i{ flex-direction:column; gap:0; font-size:.64rem; padding:.25rem .1rem; }
  .lb-full{ display:none; } .lb-short{ display:inline; }
}

/* search box with the magnifier inside (no Search button: it filters by itself) */
.search-wrap{ position:relative; flex:0 1 300px; min-width:0; }
.search-wrap > i{ position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--au-muted); pointer-events:none; }
.search-wrap > .form-control{ padding-left:2.3rem; }
@media (max-width:767.98px){ .search-wrap{ flex:1 1 0; } }

/* Add / Edit lead form: compact (short boxes, small gaps) */
.lead-form .form-label{ font-size:.8rem; margin-bottom:.15rem; }
.lead-form .form-control, .lead-form .form-select{ min-height:36px !important; padding-top:.3rem; padding-bottom:.3rem; font-size:.92rem; }
.lead-form textarea.form-control{ min-height:0 !important; padding-top:.35rem; }
.lead-form .cc-box{ min-height:36px !important; }
#addLeadModal .modal-body{ padding:.75rem 1rem; }
#addLeadModal .modal-header{ padding:.6rem 1rem; }
@media (max-width:767.98px){
  .lead-form .form-control, .lead-form .form-select{ font-size:16px; }     /* 16px stops the phone zooming into the field */
  #addLeadModal .modal-dialog{ margin:.4rem; }
}

/* New Lead tools: tiny round buttons in the corner (no big box) */
.corner-tools{ position:fixed; right:18px; bottom:22px; z-index:1025; display:flex; flex-direction:column; align-items:flex-end; gap:.55rem; }
.corner-wa{ width:38px; height:38px; border-radius:50%; border:0; background:#fff; color:#1FA855; font-size:1.15rem; box-shadow:0 2px 10px rgba(20,25,50,.2); display:flex; align-items:center; justify-content:center; position:relative; }
.corner-wa::after{ content:''; position:absolute; right:3px; top:3px; width:9px; height:9px; border-radius:50%; background:#1FA855; border:2px solid #fff; }
.corner-wa.off{ color:#9AA1B5; } .corner-wa.off::after{ background:var(--au-red); }
.corner-add{ height:46px; min-width:46px; padding:0 1rem 0 .85rem; border-radius:2rem; border:0; background:var(--au-brand); color:#fff; font-weight:600; display:flex; align-items:center; gap:.4rem; box-shadow:0 4px 14px rgba(67,86,196,.45); }
.corner-add i{ font-size:1.15rem; } .corner-add:hover{ background:var(--au-brand-dk); }
@media (max-width:991.98px){ .corner-tools{ bottom:76px; right:12px; } .corner-add{ padding:0; width:48px; height:48px; justify-content:center; } .corner-add span{ display:none; } }
.lc-foot .lf-form{ display:inline-block; margin:0; }
@media (max-width:767.98px){ .lc-foot .lf-form{ display:contents !important; } }
/* phone: a lead card shows only the main details; tap it to open everything (one open at a time) */
@media (max-width:767.98px){
  .lc:not(.open) .lc-col:not(:first-child), .lc:not(.open) .lc-foot{ display:none; }
  .lc:not(.open) .lc-body{ padding-bottom:.6rem; }
  .lc-head, .lc-body > .lc-col:first-child{ cursor:pointer; }
  .lc-head::after{ content:"\F282"; font-family:"bootstrap-icons"; color:var(--au-muted); font-size:.9rem; margin-left:auto; transition:transform .15s; }
  .lc.open .lc-head::after{ transform:rotate(180deg); }
  .lc-date{ white-space:nowrap; }
  .lc.open{ box-shadow:0 0 0 1.5px var(--au-brand); }
}
/* Follow-up filters: everything on ONE line - [search] [🔥] [employee] [x] */
.fbar .hot-toggle{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; margin:0; border:1px solid var(--au-line); border-radius:var(--au-radius); background:#fff; cursor:pointer; font-size:1.1rem; line-height:1; user-select:none; }
.fbar .hot-toggle input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.fbar .hot-toggle span{ filter:grayscale(1); opacity:.55; }
.fbar .hot-toggle:has(input:checked){ background:#FFF1E6; border-color:#F97316; }
.fbar .hot-toggle:has(input:checked) span{ filter:none; opacity:1; }
.fbar .filter-clear{ display:inline-flex; align-items:center; justify-content:center; height:38px; }
@media (max-width:767.98px){
  .fbar{ flex-wrap:nowrap !important; gap:.4rem !important; }
  .fbar .search-wrap{ flex:1 1 0; min-width:0; }
  .fbar .emp-select{ width:104px !important; flex:0 0 auto; height:38px; min-height:38px !important; padding-left:.5rem; font-size:.85rem; }
  .fbar .filter-clear{ width:38px; padding:0; flex:0 0 auto; }
}

/* =====================================================================
   PHONE: compact design for ALL pages (smaller text, tighter spacing, slimmer controls)
   ===================================================================== */
@media (max-width:767.98px){
  html{ font-size:14px; }
  body{ font-size:.93rem; }
  h1,.h1{ font-size:1.3rem; } h2,.h2{ font-size:1.2rem; } h3,.h3{ font-size:1.1rem; } h4,.h4{ font-size:1.02rem; } h5,.h5{ font-size:.96rem; } h6,.h6{ font-size:.9rem; }
  .page-content,.content{ padding:.6rem .5rem !important; }
  .container,.container-fluid{ padding-left:.5rem; padding-right:.5rem; }
  .card{ margin-bottom:.6rem; }
  .card-body{ padding:.7rem; } .card-header,.card-footer{ padding:.5rem .7rem; }
  .mb-3{ margin-bottom:.6rem !important; } .mb-4{ margin-bottom:.8rem !important; }
  .row{ --bs-gutter-x:.6rem; --bs-gutter-y:.6rem; }

  /* slimmer controls */
  .form-control,.form-select{ font-size:14px; min-height:36px; padding:.3rem .6rem; }
  .form-select{ padding-right:2rem; }
  .form-label,label{ font-size:.82rem; margin-bottom:.15rem; }
  .btn{ min-height:36px; font-size:.86rem; padding:.3rem .8rem; } .btn-sm{ min-height:32px; font-size:.8rem; padding:.2rem .6rem; }
  .badge{ font-size:.7rem; }
  .modal-header{ padding:.6rem .8rem; } .modal-body{ padding:.7rem .8rem; } .modal-footer{ padding:.5rem .8rem; }
  .modal-title{ font-size:1rem; }
  .table>:not(caption)>*>*{ padding:.4rem .5rem; }

  /* stat / KPI tiles */
  .stat{ padding:.6rem .7rem; gap:.5rem; } .stat .ico{ width:32px; height:32px; font-size:.9rem; } .stat .v{ font-size:.95rem; } .stat .l{ font-size:.72rem; }
  .hello h3{ font-size:1rem; }

  /* stacked table cards */
  .m-stack:not(.lead-table):not(.stack-table) tr{ margin-bottom:.45rem; padding:.15rem 0; }
  .m-stack:not(.lead-table):not(.stack-table) td,.m-stack:not(.lead-table):not(.stack-table) th{ padding:.25rem .75rem; font-size:.88rem; }

  /* pipeline steps */
  .stp{ padding:.5rem; }
  .stp-main .stp-i{ padding:.3rem .1rem; } .stp-main .stp-i b{ font-size:1rem; }
  .stp-sub{ margin-top:.35rem; padding-top:.35rem; }
  .tab-pills .nav-link{ padding:.2rem .55rem; font-size:.78rem; }

  /* search + filters row */
  .fbar{ margin-bottom:.6rem !important; }
  .fbar .form-control,.fbar .emp-select,.fbar .hot-toggle,.fbar .filter-clear{ height:34px !important; min-height:34px !important; }
  .fbar .hot-toggle,.fbar .filter-clear{ width:34px; font-size:1rem; }
  .fbar .emp-select{ width:96px !important; font-size:.8rem; }
  .search-wrap .form-control{ padding-left:2rem; } .search-wrap > i{ left:.65rem; font-size:.85rem; }

  /* lead cards */
  .lead-cards{ gap:.5rem; }
  .lc-head{ padding:.4rem .65rem; gap:.3rem; }
  .lc-id{ font-size:.86rem; } .lc-src{ font-size:.66rem; padding:.12rem .4rem; } .lc-date{ font-size:.74rem; } .lc-status{ font-size:.68rem; }
  .lc-body{ padding:.55rem .65rem !important; gap:.5rem !important; }
  .lc-name{ font-size:.98rem; margin-bottom:.05rem; } .lc-line{ font-size:.85rem; margin-bottom:.05rem; } .lc-sub{ font-size:.76rem; }
  .lc-note{ font-size:.8rem; } .lc-right{ font-size:.8rem; } .lc-prod{ font-size:.86rem; }
  .lc-foot{ padding:.5rem .55rem !important; gap:.35rem !important; }
  .lc-foot .btn{ height:34px !important; min-height:34px !important; font-size:.78rem !important; }
  .lc-foot .lf-a,.lc-foot .lf-b{ font-size:.78rem !important; }

  /* popups and bottom bar */
  .lead-form .form-control,.lead-form .form-select{ min-height:34px; }
  .bnav a,.bottom-nav a{ font-size:.66rem; }
}

/* desktop: search, 🔥 and staff select sit side by side in one neat row */
@media (min-width:768px){
  .fbar{ flex-wrap:nowrap !important; align-items:center; gap:.5rem !important; }
  .fbar .search-wrap{ flex:0 1 320px; }
  .fbar .emp-select{ width:170px !important; flex:0 0 auto; }
  .fbar .hot-toggle,.fbar .filter-clear{ flex:0 0 auto; }
  .fbar .filter-clear{ padding:0 .8rem; }
}

/* ===== ONE SYSTEM, ONE LOOK: Hub, CRM and Orders share the same shell (sidebar, top bar, canvas, logo colour) ===== */
body, body.bg-body-tertiary{ background:var(--au-bg) !important; }
.hm-brand, .hm-brand:hover, .hm-brand:focus, .hm-brand:visited{ color:var(--au-brand) !important; font-size:1.35rem; font-weight:700; }
.hm-brand i{ color:var(--au-brand) !important; }
.top-logo, .top-logo:hover{ color:var(--au-brand) !important; }
.hm-wrap .hm-top{ line-height:1.5; min-height:46px; font-size:.9rem; }
.hm-wrap .hm-sub a{ line-height:1.5; font-size:.86rem; }
.hm-wrap .hm-sub a.sub{ font-size:.82rem; }
/* top bar: same title size and the same user chip everywhere */
.hub-top h5, .topbar .page-title, .app-header .hub-title{ font-size:1.1rem !important; font-weight:600 !important; margin:0; color:var(--au-ink); }
.who{ display:flex; align-items:center; gap:.65rem; font-size:.85rem; font-weight:500; line-height:1.1; color:var(--au-ink); }
.who .av{ width:36px; height:36px; border-radius:50%; background:var(--au-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; flex-shrink:0; }
.who small{ color:var(--au-muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; }
.app-header > .container-fluid{ padding:0 1.5rem; height:var(--au-head); align-items:center; }
.app-header .navbar-nav{ align-items:center; gap:1rem; }
/* page headings inside Orders pages match the Hub / CRM headings */
.page-head h4{ font-size:1.35rem; font-weight:600; color:var(--au-ink); }
@media (max-width:991.98px){ .app-header > .container-fluid{ padding:0 1rem; } }

.app-sidebar .sidebar-wrapper{ padding:0 !important; }
.sidebar, .hub-side, .app-sidebar, .sidebar-wrapper{ scrollbar-width:thin; scrollbar-color:#D5D8E2 transparent; }
.sidebar::-webkit-scrollbar, .hub-side::-webkit-scrollbar, .app-sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb, .hub-side::-webkit-scrollbar-thumb, .app-sidebar::-webkit-scrollbar-thumb{ background:#D5D8E2; border-radius:3px; }
.app-header.navbar{ padding-top:0 !important; padding-bottom:0 !important; }
.top-logo i{ color:inherit !important; }

/* menu count badges: small and properly round (a number or two fits inside the circle) */
.hm-badge, .hm-count{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  min-width:18px; height:18px; padding:0 4px !important; border-radius:999px; font-size:.65rem !important; font-weight:600; line-height:1; letter-spacing:0; }
.hm-gbadge{ margin-left:.15rem; }
/* ===== buttons in a row always sit on one straight line, same height (links, buttons and inline forms mixed) ===== */
.btn{ vertical-align:middle; }
.btn-sm{ display:inline-flex; align-items:center; justify-content:center; gap:.35rem; line-height:1.4; min-height:32px; }
form.d-inline, form.d-inline-block{ display:inline-flex !important; align-items:center; margin:0; vertical-align:middle; }
.card-footer{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.card-footer > form{ display:flex; align-items:center; margin:0; }
.card-footer .btn{ margin:0; }
td > .btn, td > form{ vertical-align:middle; }

/* user chip in the top bar: name + role first, round initial after it, in a soft pill */
.hub-top .who, .who{ flex-direction:row-reverse; gap:.6rem; padding:.22rem .3rem .22rem 1rem; border:1px solid var(--au-line,#E6E9EF); border-radius:999px; background:#fff; text-align:right; }
.hub-top .who > div, .who > div{ text-align:right; line-height:1.15; }
.hub-top .who .av, .who .av{ width:34px; height:34px; }
@media (max-width:575.98px){ .hub-top .who, .who{ padding:0; border:0; background:none; } }

/* user chip dropdown */
.who-wrap{ position:relative; }
.who-wrap button.who{ cursor:pointer; font:inherit; color:var(--au-ink); text-align:right; }
.who-wrap button.who:hover{ background:#F6F7FB; }
.who-card{ position:absolute; right:0; top:calc(100% + 10px); width:270px; max-width:calc(100vw - 24px); background:#fff; border-radius:14px; box-shadow:0 14px 40px rgba(20,25,35,.2); padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s, transform .16s, visibility .16s; z-index:1100; }
.who-wrap.open .who-card{ opacity:1; visibility:visible; transform:none; }
.who-head{ display:flex; align-items:center; gap:12px; padding:10px 10px 12px; border-bottom:1px solid #EEF0F3; margin-bottom:6px; }
.who-head .av.lg{ width:44px; height:44px; font-size:1.15rem; }
.who-id{ display:flex; flex-direction:column; min-width:0; text-align:left; line-height:1.3; }
.who-id b{ font-size:.95rem; } .who-id small{ color:var(--au-muted); font-size:.75rem; text-transform:capitalize; }
.who-card a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--au-ink); text-decoration:none; font-size:.88rem; text-align:left; }
.who-card a:hover{ background:#F3F5FA; } .who-card a i{ font-size:1.05rem; color:var(--au-muted); }
.who-card a.out, .who-card a.out i{ color:#D92D20; } .who-card a.out:hover{ background:#FDECEA; }
.who-sep{ height:1px; background:#EEF0F3; margin:6px 4px; }
.who-card .av{ width:36px; height:36px; border-radius:50%; background:var(--au-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; flex-shrink:0; }
.who-card .av.lg{ width:44px; height:44px; font-size:1.15rem; }

/* ---- consistency fixes (full-system check, Oct 2026) ---- */
/* action buttons (Edit / Delete …) stay side by side on one line */
@media (min-width:768px){ .table td:has(> .btn){ white-space:nowrap; } }
.btn{ text-align:center; }
@media (max-width:767.98px){
  /* DataTables: no "Show 10 entries" on phones, search box full width with its label on the same line */
  .dataTables_wrapper .dataTables_length{ display:none; }
  .dataTables_wrapper .dataTables_filter label{ display:flex; align-items:center; gap:.5rem; width:100%; margin:0 0 .5rem; }
  .dataTables_wrapper .dataTables_filter input{ flex:1 1 auto; }
  /* wide tables that must stay tables (e.g. permission grids) scroll sideways instead of being cut off */
  .table-responsive:has(> table.no-stack){ overflow-x:auto; }
  /* table -> card rows: nothing pokes past the card edge */
  .m-stack:not(.lead-table):not(.stack-table) tr{ overflow:hidden; }
  .m-stack:not(.lead-table):not(.stack-table) td:has(> .btn){ display:flex !important; flex-wrap:wrap; gap:.4rem; align-items:center; }
  .m-stack:not(.lead-table):not(.stack-table) td:has(> .btn)[data-label]::before{ flex:0 0 100%; margin:0; }
}
/* order timeline (Order View): dots on a line, no list bullets, no AdminLTE bar through the text */
ul.timeline{ list-style:none; margin:0; padding:0 0 0 .4rem; }
ul.timeline::before{ display:none; }
ul.timeline li{ position:relative; padding:0 0 1rem 1.3rem; border-left:2px solid var(--au-line); }
ul.timeline li:last-child{ border-left-color:transparent !important; padding-bottom:0; }
ul.timeline li::before{ content:''; position:absolute; left:-6px; top:3px; width:10px; height:10px; border-radius:50%; }
ul.timeline .t-date{ font-size:.75rem; color:var(--au-muted); }
ul.timeline .t-title{ font-weight:500; }
/* AdminLTE's clearfix ::after became a 3rd flex item in d-flex card headers, pushing right-side buttons to the middle */
.card-header.d-flex::before, .card-header.d-flex::after, .d-flex.justify-content-between::after{ content:none !important; display:none !important; }
/* button text always in the middle, also when a button is stretched taller or wider by its row */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.35rem; text-align:center; }
.btn.d-block, .btn.w-100{ display:flex; }
.btn.d-none{ display:none !important; }
.btn .bi, .btn i{ line-height:1; }
/* customer name -> Customer page (full history) */
a.cust-link{ color:var(--au-brand); text-decoration:none; font-weight:500; } a.cust-link:hover{ text-decoration:underline; }
@media (max-width:767.98px){ .row.align-items-end .btn:not(.btn-sm){ min-height:44px; } }
.form-check{ display:flex; align-items:center; gap:.45rem; padding-left:0; } .form-check .form-check-input{ float:none; margin:0; flex:0 0 auto; } .form-check.form-switch{ padding-left:0; }
.form-check-inline{ display:inline-flex; margin-right:1rem; }

/* Download Report button (PDF/Excel/CSV) next to report headings: small button, small text */
.dropdown-toggle.btn-sm, a.btn-sm[href*='export=']{ font-size:.8rem; }

/* Chart card + pill switchers (shared by Home dashboard and CRM Reports) */
body:has(#crmChart) .box{ background:#fff; border-radius:var(--au-radius); box-shadow:var(--au-shadow); overflow:hidden; }
body:has(#crmChart) .box-h{ padding:.9rem 1.25rem; font-weight:600; color:var(--au-ink); border-bottom:1px solid var(--au-line); display:flex; justify-content:space-between; align-items:center; }
.cd-pills{ display:inline-flex; gap:.25rem; background:#EEF0F6; border-radius:10px; padding:3px; }
.cd-btn{ border:0; background:transparent; padding:.3rem .8rem; border-radius:8px; font-size:.82rem; font-weight:600; color:#5B6572; cursor:pointer; }
.cd-btn:hover{ background:rgba(255,255,255,.6); color:#2B2F4A; }
.cd-btn:focus{ outline:0; }
.cd-btn.on, .cd-btn.on:hover{ background:#4356C4; color:#fff; box-shadow:0 1px 3px rgba(20,25,50,.2); }
/* Days filter as a dropdown: click the button, options appear */
.cd-dd{ position:relative; display:inline-block; }
.cd-dd-t{ border:1px solid var(--au-line); background:#fff; border-radius:10px; padding:.42rem .9rem; font-size:.84rem; font-weight:600; color:#2B2F4A; cursor:pointer; min-width:128px; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.cd-dd-t::after{ content:""; border:4px solid transparent; border-top-color:#5B6572; margin-top:4px; }
.cd-dd-t:hover, .cd-dd.open .cd-dd-t{ border-color:#4356C4; }
.cd-dd-m{ display:none; position:absolute; right:0; top:calc(100% + 4px); min-width:100%; background:#fff; border:1px solid var(--au-line); border-radius:10px; box-shadow:0 6px 18px rgba(20,25,50,.14); padding:4px; z-index:30; }
.cd-dd.open .cd-dd-m{ display:block; }
.cd-dd-m .cd-btn{ display:block; width:100%; text-align:left; padding:.4rem .8rem; white-space:nowrap; }
.cd-dd-m .cd-btn:hover{ background:#EEF0F6; color:#2B2F4A; }
.cd-dd-m .cd-btn.on, .cd-dd-m .cd-btn.on:hover{ background:#4356C4; color:#fff; box-shadow:none; }
/* Hot-chat lead card: gently floats up and down with a soft amber glow, so it stands out in the list */
@keyframes hotFloat{ 0%,100%{ transform:translateY(0); box-shadow:0 1px 3px rgba(20,25,50,.08), 0 0 0 0 rgba(245,158,11,.0); } 50%{ transform:translateY(-4px); box-shadow:0 8px 18px rgba(245,158,11,.28), 0 0 0 2px rgba(245,158,11,.25); } }
.lc.chat-hot-card{ animation:hotFloat 2.6s ease-in-out infinite; }
.lc.chat-hot-card:hover, .lc.chat-hot-card.open{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .lc.chat-hot-card{ animation:none; } }
/* The 🔥 button: grey until clicked; once it is ON the lead is HOT - the fire lights up and flickers, the card floats */
@keyframes fireFlick{ 0%,100%{ transform:scale(1) rotate(0); } 25%{ transform:scale(1.18) rotate(-6deg); } 60%{ transform:scale(1.08) rotate(5deg); } }
.lc-head .btn-fire.on{ filter:drop-shadow(0 0 4px rgba(245,158,11,.9)); animation:fireFlick 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .lc-head .btn-fire.on{ animation:none; } }
/* "Returning customer" line on a lead that came back after an earlier order / cancellation */
.lc-returning{ margin-top:.35rem; padding:.3rem .55rem; font-size:.78rem; line-height:1.35; color:#7A4B00; background:#FFF6E0; border:1px solid #F5D78E; border-radius:6px; }
.lc-returning i{ margin-right:.2rem; }

/* Place Order popup: a product that is folded into its one-line summary */
.ord-collapsed{ display:none !important; }

/* ================= MOBILE ONLY: compact layout (phones, up to 767px). Nothing here changes the PC view. ================= */
@media (max-width:767.98px){
  /* less air around everything */
  .content,.page-content{ padding:.6rem .6rem !important; }
  .container,.container-fluid{ padding-left:.6rem; padding-right:.6rem; }
  .card{ margin-bottom:.6rem; }
  .card-body{ padding:.7rem; }
  .card-header,.card-footer{ padding:.5rem .7rem; }
  .box-h{ padding:.6rem .8rem !important; }
  .mb-4{ margin-bottom:.9rem !important; } .mb-3{ margin-bottom:.65rem !important; }
  .mt-4{ margin-top:.9rem !important; }    .mt-3{ margin-top:.65rem !important; }
  .p-4{ padding:.9rem !important; }        .p-3{ padding:.7rem !important; }
  .py-5{ padding-top:1.5rem !important; padding-bottom:1.5rem !important; } .py-4{ padding-top:1rem !important; padding-bottom:1rem !important; }
  .row{ --bs-gutter-x:.65rem; } .row.g-3,.row.gy-3{ --bs-gutter-y:.6rem; } .row.g-3,.row.gx-3{ --bs-gutter-x:.65rem; }
  h4,.h4{ font-size:1.05rem; } h5,.h5{ font-size:.98rem; } h3,.h3{ font-size:1.12rem; }
  .breadcrumb-bar{ display:none !important; }
  .page-head{ gap:.4rem; margin-bottom:.5rem !important; }
  .content p.text-muted,.page-head .text-muted,.app-content p.text-muted{ font-size:.76rem; margin-bottom:.4rem !important; line-height:1.3; }

  /* forms: slightly shorter, still easy to tap */
  .form-control,.form-select{ min-height:40px; padding-top:.3rem; padding-bottom:.3rem; }
  .form-label{ margin-bottom:.12rem; font-size:.78rem; }
  .btn{ min-height:38px; } .btn-sm{ min-height:32px; padding-top:.2rem; padding-bottom:.2rem; }
  .modal-dialog{ margin:.4rem; }
  .modal-header,.modal-footer{ padding:.55rem .8rem; } .modal-body{ padding:.7rem .8rem; }
  .alert{ padding:.5rem .7rem; margin-bottom:.6rem; }

  /* table rows as cards: two values per line instead of one value per line (about half as tall) */
  .m-stack:not(.lead-table):not(.stack-table) tr{ display:grid !important; grid-template-columns:1fr 1fr; column-gap:.7rem; row-gap:.3rem; padding:.5rem .75rem !important; margin-bottom:.5rem; }
  .box .m-stack:not(.lead-table):not(.stack-table) tr{ margin-bottom:0; }
  .m-stack:not(.lead-table):not(.stack-table) td,
  .m-stack:not(.lead-table):not(.stack-table) th{ padding:0 !important; min-width:0; font-size:.86rem; }
  .m-stack:not(.lead-table):not(.stack-table) td[data-label]::before{ font-size:.6rem; margin-bottom:0; }
  .m-stack:not(.lead-table):not(.stack-table) td:first-child,
  .m-stack:not(.lead-table):not(.stack-table) td[colspan],
  .m-stack:not(.lead-table):not(.stack-table) td:has(> .btn),
  .m-stack:not(.lead-table):not(.stack-table) td:has(> form),
  .m-stack:not(.lead-table):not(.stack-table) td:has(> .btn-group),
  .m-stack:not(.lead-table):not(.stack-table) td:has(> .dropdown){ grid-column:1 / -1; }
  .m-stack:not(.lead-table):not(.stack-table) td:first-child{ font-weight:600; }
  .m-stack:not(.lead-table):not(.stack-table) td:empty{ display:none !important; }

  /* order cards (Pending / Confirmed / Print / Sent / Delivered): tighter body and footer buttons */
  .order-card .card-body{ padding:.55rem .7rem !important; }
  .order-card .card-footer{ gap:.3rem !important; padding:.45rem .55rem; }
  .order-card .card-footer .btn{ min-height:32px; font-size:.78rem; padding:.2rem .55rem; }
  .order-card .progress{ height:5px; }

  /* dashboard: shorter charts, smaller numbers */
  .content div[style*="height:340px"]{ height:200px !important; }
  .content div[style*="height:300px"]{ height:170px !important; }
  .box div[style*="padding:1rem 1.25rem"]{ padding:.6rem .8rem !important; }
  .stat{ padding:.65rem .75rem; gap:.5rem; }
  .stat .ico{ width:30px; height:30px; font-size:.85rem; }
  .stat .v{ font-size:1.05rem; }
  .hello{ margin-bottom:.2rem; } .hello h3{ font-size:1.05rem; margin-bottom:.1rem; }
  .box td,.box th{ padding:.5rem .8rem; }

  /* long lists: sidebar and pagination also a little tighter */
  .pagination .page-link{ padding:.25rem .55rem; }
  .dataTables_wrapper .dataTables_info{ font-size:.75rem; padding:.2rem 0; }
}
/* ---- MOBILE ONLY: CRM lists (lead-table / stack-table) - two values per line, every detail stays ---- */
@media (max-width:767.98px){
  table.stack-table:not(.recent-tbl) tr, table.lead-table tr{ display:grid !important; grid-template-columns:1fr 1fr; column-gap:.7rem; row-gap:.2rem; padding:.45rem .6rem !important; }
  table.lead-table tr{ border-bottom-width:4px !important; }
  table.stack-table:not(.recent-tbl) td, table.lead-table td{ padding:0 !important; width:auto !important; min-width:0; font-size:.86rem; word-break:break-word; }
  table.stack-table:not(.recent-tbl) td[data-label]::before,
  table.lead-table td[data-label]:not([data-label="Customer"]):not([data-label="Action"])::before{ font-size:.6rem !important; margin-bottom:0 !important; }
  table.stack-table:not(.recent-tbl) td:first-child, table.lead-table td:first-child,
  table.lead-table td[data-label="Customer"], table.lead-table td[data-label="Action"],
  table.stack-table:not(.recent-tbl) td[colspan], table.lead-table td[colspan],
  table.stack-table:not(.recent-tbl) td:has(> .btn), table.lead-table td:has(> .btn),
  table.stack-table:not(.recent-tbl) td:has(> form), table.lead-table td:has(> .action-btns){ grid-column:1 / -1; }
  table.stack-table:not(.recent-tbl) td:empty, table.lead-table td:empty{ display:none !important; }
  table.lead-table td[data-label="Action"]{ padding-top:.25rem !important; }
  .action-btns .btn{ padding:.35rem .3rem !important; font-size:.86rem !important; }
  .action-btns .js-open-followup{ padding:.45rem !important; font-size:.92rem !important; }
  .big-tile .tile-count{ font-size:1.7rem !important; }
}
/* ---- MOBILE ONLY: order cards and CRM lead cards, every detail stays but they take much less height ---- */
@media (max-width:767.98px){
  /* order card: customer and the money (total / received / balance) side by side, products underneath */
  .order-card .card-header{ padding:.4rem .65rem !important; gap:.2rem !important; }
  .order-card .card-body > .row{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:.35rem .75rem; margin:0 !important; --bs-gutter-x:0; }
  .order-card .card-body > .row > *{ width:auto !important; max-width:none !important; padding:0 !important; margin:0 !important; }
  .order-card .card-body > .row > :nth-child(1){ grid-column:1; grid-row:1; }
  .order-card .card-body > .row > :nth-child(3){ grid-column:2; grid-row:1; }
  .order-card .card-body > .row > :nth-child(2){ grid-column:1 / -1; grid-row:2; }
  .order-card .card-body > .row > :nth-child(3) .progress{ height:4px; margin-top:.2rem !important; }
  .order-card .card-body .small, .order-card .card-body .fw-semibold{ line-height:1.3; }
  .order-card .card-body > .row > :nth-child(2) > div{ margin-bottom:.2rem !important; }
  .order-card .card-body > .row > :nth-child(2) img{ height:40px !important; }

  /* CRM lead card (collapsed): name and phone on one line, smaller header */
  .lc:not(.open) .lc-col:first-child{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.05rem .7rem; }
  .lc:not(.open) .lc-col:first-child .lc-name{ margin:0; }
  .lc:not(.open) .lc-col:first-child .lc-line{ margin:0; }
  .lc:not(.open) .lc-col:first-child .lc-sub{ margin:0; }
  .lc-head{ padding:.3rem .55rem !important; row-gap:.1rem !important; }
  .lc-head-l{ gap:.35rem !important; }
  .lc-head .badge{ font-size:.62rem; padding:.2em .45em; }
  .lc-body{ padding:.4rem .6rem !important; }
  .lc{ margin-bottom:.45rem; }
  .lc-foot{ padding:.4rem .5rem !important; }

  /* the CRM pipeline strip: small chips instead of big boxes */
  .pipe-step{ padding:.35rem .6rem !important; }
  .big-tile{ padding:.6rem .8rem !important; }
}
/* ---- MOBILE ONLY: more compaction (Action Center tiles, CRM pipeline, order card lines) ---- */
@media (max-width:767.98px){
  /* Action Center: the five number tiles two to a line */
  .row > [class*="col-md-3"]:has(> .stat-tile){ flex:0 0 50%; max-width:50%; }
  .stat-tile{ padding:.6rem .75rem !important; }
  .stat-tile .stat-value{ font-size:1.15rem !important; }
  .stat-tile .stat-label{ font-size:.7rem !important; } .stat-tile .stat-sub{ font-size:.7rem !important; }

  /* CRM sales pipeline: small chips two to a line, no big arrows between them */
  .pipe{ gap:.3rem; }
  .pipe-arrow{ display:none !important; }
  .pipe-step{ flex:1 1 calc(50% - .3rem); min-width:0 !important; flex-direction:row !important; justify-content:flex-start !important; gap:.45rem; text-align:left !important; }

  /* order card: the "Add mockup" and "Plain (no printing)" lines share one line; footer buttons smaller */
  .order-card .card-body > .row > :nth-child(2) > div > div:nth-child(2),
  .order-card .card-body > .row > :nth-child(2) > div > div:nth-child(3){ display:inline-block; margin-right:.7rem; }
  .order-card .card-footer{ gap:.25rem !important; padding:.35rem .5rem !important; }
  .order-card .card-footer .btn{ min-height:30px !important; font-size:.74rem !important; padding:.15rem .45rem !important; }
  .order-card .card-footer .badge{ font-size:.68rem; }
}
/* brand: the Ethiwa icon (the logo's e with the gold star) next to the name, top left of every page */
.top-logo .brand-ico, .hm-brand .brand-ico{ width:28px; height:28px; border-radius:7px; object-fit:contain; flex:0 0 auto; vertical-align:middle; }

.brand-name{ display:inline-flex; flex-direction:column; line-height:1.05; font-size:.98rem; letter-spacing:0; }
.brand-name b{ font-weight:700; }
.brand-name span{ font-size:.66rem; font-weight:600; color:#6B7482; text-transform:uppercase; letter-spacing:.14em; }

/* brand block: icon and name on ONE centred line (icon as tall as the two text lines) */
.hm-brand{ display:flex !important; }
.hm-brand, .top-logo{ align-items:center !important; gap:.55rem !important; line-height:1 !important; }   /* (the top-bar logo stays hidden on PC as before; phones / tablets show it) */
@media (max-width:991.98px){ .top-logo{ display:inline-flex !important; } }
.hm-brand .brand-ico, .top-logo .brand-ico{ width:36px !important; height:36px !important; border-radius:0 !important; object-fit:contain; flex:0 0 auto; margin:0 !important; }
.brand-name{ display:inline-flex; flex-direction:column; justify-content:center; gap:3px; line-height:1; font-size:1.12rem; }
.brand-name b{ font-weight:700; letter-spacing:-.01em; line-height:1; }
.brand-name span{ font-size:.6rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#6B7482; line-height:1; padding-left:1px; }
/* brand: [icon]  Ethiwa  Connect - all on one line, "Connect" smaller (replaces the two-line version above) */
.hm-brand .brand-ico, .top-logo .brand-ico{ width:28px !important; height:28px !important; }
.hm-brand, .top-logo{ gap:.45rem !important; }
.brand-name{ display:inline-flex !important; flex-direction:row !important; align-items:baseline !important; gap:.32rem !important; line-height:1 !important; font-size:1.2rem !important; white-space:nowrap; }
.brand-name b{ font-weight:700; letter-spacing:-.01em; }
.brand-name span{ font-size:.72rem !important; font-weight:500 !important; letter-spacing:.02em !important; text-transform:none !important; color:#6B7482 !important; padding:0 !important; }
/* brand: the Ethiwa logo (wordmark with the gold star) and a small "Connect" beside it - no separate icon */
.brand-lock{ display:inline-flex; align-items:flex-end; gap:.4rem; line-height:1; }
.hm-brand .brand-logo, .top-logo .brand-logo{ height:21px; width:auto; display:block; flex:0 0 auto; }
.brand-connect{ font-size:.66rem; font-weight:500; letter-spacing:.02em; color:#6B7482; line-height:1; margin-bottom:1px; }
/* brand size: PC logo 21px tall, phone logo 18px tall */
@media (max-width:767.98px){ .hm-brand .brand-logo, .top-logo .brand-logo{ height:18px; } .brand-connect{ font-size:.63rem; } }

/* "Connect" sits on the same bottom line as the letters of the logo */
.brand-lock{ align-items:baseline !important; }
.brand-connect{ margin-bottom:0 !important; position:relative; top:-1px; }
.brand-lock{ gap:.12rem !important; }   /* "Connect" close to the logo */

/* "from – to" date filters: always one line (the two dates share the width, also on a phone) */
.fbar-dates{ flex-wrap:nowrap !important; gap:.4rem !important; }
.fbar-dates > i, .fbar-dates > label{ flex:0 0 auto; white-space:nowrap; }
.fbar-dates input[type=date]{ flex:1 1 0; min-width:0; width:auto !important; padding-left:.4rem; padding-right:.3rem; font-size:.85rem; }

/* Phone: table rows are cards, so no grey "hover / tapped" shading on their cells (it stays stuck after a tap) */
@media (max-width: 767.98px) {
  .table-hover > tbody > tr:hover > *,
  .table-hover > tbody > tr:active > *,
  .table > tbody > tr > *{ --bs-table-bg-state: transparent !important; --bs-table-hover-bg: transparent !important; --bs-table-accent-bg: transparent !important; box-shadow:none !important; background-color:transparent !important; }
}