/* OutDo Admin — AOP look (Stage 1: PRESENTATION ONLY, data untouched).
   Loaded LAST so it overrides the Bootstrap template. Captured from OutDo AOP. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#faf9f5; --sidebar:#f3f1e9; --sidebar-border:#e3e1d8; --sidebar-text:#3d4a63;
  --navy:#23375d; --navy-h:#4a6a9b; --navy-grad:linear-gradient(135deg,#23375d 0%,#4a6a9b 100%);
  --coral:#ed6e63; --coral-soft:#fdeeec; --green:#0d9488; --red:#c0392b; --border:#e3e1d8; --borderL:#ece9e0;
  --text:#1b2436; --text2:#5b6577; --text3:#9aa0ac;
}

/* ---- Base ---- */
body, .page-container, .page-content, .page-content-wrapper { background:var(--bg) !important; }
body, .page-content, input, textarea, select, button, .btn, table, td, th { font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important; }
h1,h2,h3,h4,h5,.title,.aop-title,.page-title{ font-family:'Archivo', system-ui, -apple-system, sans-serif !important; letter-spacing:-0.01em; }
body { color:var(--text); }

/* ---- Sidebar shell ---- */
.sidebar-container, .sidemenu-container, #remove-scroll { background:var(--sidebar) !important; border:none !important; }
.aop-sidebar{ background:var(--sidebar); width:196px; padding:8px 0 16px; display:flex; flex-direction:column; gap:2px;
  border-right:1px solid var(--sidebar-border); min-height:100vh; }
.aop-sidebar *{ box-sizing:border-box; }

/* ---- LAYOUT FIX — full-width sidebar, content offset (no overlap). Header is 60px fixed-top. ---- */
.page-header.navbar{ background:#fff !important; border-bottom:1px solid var(--border) !important; box-shadow:0 1px 3px rgba(0,0,0,.05) !important; z-index:1030 !important; }
.page-header .page-title, .page-header .top-menu a, .page-header .page-title *{ color:var(--navy) !important; }
.sidebar-container{ position:fixed !important; top:60px; left:0; bottom:0; width:196px !important; z-index:120 !important;
  overflow-y:auto; overflow-x:hidden; display:block !important; background:var(--sidebar) !important; margin:0 !important; float:none !important; }
.sidemenu-container, .sidemenu-container.navbar-collapse, .sidemenu-container.collapse, #remove-scroll{
  position:static !important; width:100% !important; max-width:none !important; height:auto !important; float:none !important;
  display:block !important; background:transparent !important; border:none !important; margin:0 !important; padding:0 !important; }
.page-content-wrapper{ margin-left:196px !important; float:none !important; width:auto !important; }
.page-content{ padding:24px 30px !important; background:var(--bg) !important; min-height:calc(100vh - 60px); }

/* ---- Form fields (AOP rounded) ---- */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],textarea,select,.form-control{
  border:1px solid var(--border) !important; border-radius:9px !important; padding:9px 12px !important; font-size:13px !important;
  background:#fff !important; color:var(--text) !important; box-shadow:none !important; }
input:focus,textarea:focus,select:focus,.form-control:focus{ border-color:var(--navy-h) !important; box-shadow:0 0 0 3px rgba(35,55,93,.10) !important; outline:none !important; }

/* ---- Collapsible group ---- */
.aop-group{ margin:3px 8px; border-radius:10px; background:rgba(255,255,255,0.40); border:1px solid transparent; overflow:hidden; }
.aop-group[open]{ background:rgba(255,255,255,0.72); border-color:var(--sidebar-border); }
.aop-group > summary{ list-style:none; cursor:pointer; padding:9px 12px; user-select:none;
  font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#7a8ba0;
  display:flex; align-items:center; justify-content:space-between; }
.aop-group > summary::-webkit-details-marker{ display:none; }
.aop-group > summary::after{ content:'\25B8'; font-size:11px; color:#9aa7b8; transition:transform .15s; }
.aop-group[open] > summary::after{ transform:rotate(90deg); }
.aop-group > summary:hover{ color:var(--navy); }

/* ---- Nav item ---- */
.aop-item{ display:flex !important; align-items:center; gap:9px; padding:7px 12px; margin:1px 6px;
  border-radius:7px; border-left:3px solid transparent;
  color:var(--sidebar-text) !important; font-size:12px; font-weight:600; text-decoration:none !important; transition:all .14s; }
.aop-item i{ width:16px; text-align:center; font-size:12px; opacity:.8; }
.aop-item > span{ flex:1; }
.aop-item:hover{ background:rgba(35,55,93,0.06); color:var(--navy) !important; }
.aop-item.active{ background:var(--coral-soft); border-left-color:var(--coral); color:var(--navy) !important; font-weight:700; }
.aop-item.active i{ opacity:1; }
.aop-logout{ margin-top:10px; color:var(--coral) !important; }
.aop-logout:hover{ background:var(--coral); color:#fff !important; }

/* ---- Buttons (AOP) ---- */
.btn-primary, .btn.btn-primary, button.btn-primary{ background:var(--navy-grad) !important; border:none !important;
  color:#fff !important; border-radius:9px !important; font-weight:600 !important; box-shadow:0 4px 14px rgba(35,55,93,.30) !important; }
.btn-default, .btn.btn-default{ background:#fff !important; color:var(--text2) !important; border:1px solid var(--border) !important; border-radius:9px !important; }
.btn-danger{ background:rgba(192,57,43,.08) !important; color:var(--red) !important; border:1px solid rgba(192,57,43,.25) !important; border-radius:9px !important; box-shadow:none !important; }
.btn-success{ background:rgba(0,176,155,.10) !important; color:var(--green) !important; border:1px solid rgba(0,176,155,.30) !important; border-radius:9px !important; box-shadow:none !important; }
.btn{ border-radius:9px !important; font-weight:600 !important; letter-spacing:.02em; }

/* ---- Tables (look only; content unchanged) ---- */
.table, table.table{ background:#fff !important; border-radius:12px; overflow:hidden; border:1px solid var(--border) !important; }
.table thead th, table.table thead th{ background:#f4f3ef !important; color:var(--text2) !important; font-size:11px !important;
  text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border) !important; }
.table td, table.table td{ border-top:1px solid var(--borderL) !important; color:var(--text); vertical-align:middle; }
.table tbody tr:hover{ background:#faf9f6 !important; }

/* ---- Headings / cards ---- */
.page-title, h1, h2, h3{ color:var(--navy) !important; }
.portlet, .card, .panel{ border-radius:12px !important; border:1px solid var(--border) !important; box-shadow:0 1px 3px rgba(0,0,0,.04) !important; }

/* ---- Thin scrollbars ---- */
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-thumb{ background:#c5d0dc; border-radius:6px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---- HEADER (logo centered, clean user/logout; togglers removed) ---- */
.page-logo.aop-logo{ display:flex !important; align-items:center; height:60px; padding-left:16px; background:transparent !important; float:left; }
.page-logo.aop-logo img{ margin:0 !important; display:block; height:auto; }
.page-header .top-menu{ display:flex; align-items:center; height:60px; }
.page-header .dropdown-user > .dropdown-toggle{ display:flex !important; align-items:center; gap:9px; height:60px; padding:0 18px; color:var(--navy) !important; text-decoration:none; }
.page-header .dropdown-user img.img-circle{ display:none; }                 /* hide broken placeholder dp */
.page-header .dropdown-user .username{ color:var(--navy) !important; font-weight:600; font-size:13px; }
.page-header .dropdown-user .dropdown-menu{ border:1px solid var(--border) !important; border-radius:10px !important; box-shadow:0 8px 24px rgba(0,0,0,.10) !important; padding:6px !important; right:8px; }
.page-header .dropdown-user:hover .dropdown-menu{ display:block; }           /* logout reachable even if click-JS fails */
.page-header .dropdown-menu a{ border-radius:7px !important; color:var(--text2) !important; padding:8px 14px !important; font-weight:600; }
.page-header .dropdown-menu a:hover{ background:var(--coral) !important; color:#fff !important; }

/* ---- HEADER user chip (matches OutDo AOP AppHeader) ---- */
.page-header .top-menu{ display:flex !important; align-items:center; height:60px; float:right; }
.aop-userchip{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border) !important;
  border-radius:8px; padding:4px 10px 4px 4px; cursor:pointer; text-decoration:none !important; transition:all .15s; }
.aop-userchip:hover{ border-color:var(--navy-h) !important; box-shadow:0 2px 8px rgba(35,55,93,.12); }
.aop-avatar{ width:28px; height:28px; border-radius:50%; background:var(--navy); color:#fff !important;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.aop-userinfo{ display:flex; flex-direction:column; text-align:left; line-height:1.15; }
.aop-uname{ font-size:11px; font-weight:700; color:var(--text) !important; white-space:nowrap; }
.aop-urole{ font-size:9px; color:var(--text3) !important; text-transform:capitalize; line-height:1; }
.aop-signout{ font-size:11px; color:var(--red) !important; margin-left:4px; font-weight:600; }

/* ---- HEADER "Log Out" button (Ujwal, 2026-08-21) --------------------------------------------
   Sits immediately to the RIGHT of the user chip — beside the person's own name, which is where
   people look for the way out.
   NEUTRAL AT REST, CORAL ON HOVER — §7 of DESIGN_SYSTEM ("neutral, colour on hover") and §9
   ("ghost actions"). It was coral at rest first; two things killed that. A bordered coral button
   is the loudest object in the whole chrome and it out-shouts the page's own primary action (the
   navy + New Lead). And while Viewing As, the chip itself turns coral — a coral Log Out beside it
   made the two compete, when the chip is the one that must be noticed. The label and the corner
   do the finding; the colour only has to confirm it on the way to the click.
   The icon inherits `color` (aop_icon draws with stroke="currentColor"), so one colour rule paints
   both text and glyph.
   Height 40px = 28px avatar + 5px/5px chip padding + 1px/1px border, so it lines up with the chip
   rather than sitting a pixel proud of it.
   THE SELECTOR IS DOUBLED ON PURPOSE — do not "tidy" it. Line 26 of this file says
   `.page-header .top-menu a{ color:var(--navy) !important }`, which is MORE specific than a lone
   `.aop-hlogout` and wins even against !important. Without the longer selector the button ignores
   every colour set here — including the white text on the coral hover, which is the state that
   would have looked broken. The short selector is kept for the Marketing wing, whose topbar is not
   inside `.page-header .top-menu`. ---------------------------------------------------------------- */
.aop-hlogout, .page-header .top-menu a.aop-hlogout{ display:inline-flex; align-items:center; gap:7px; box-sizing:border-box; height:40px;
  margin-left:10px; padding:0 13px; border:1px solid var(--border); border-radius:8px; background:#fff;
  color:var(--text2) !important; font-size:11.5px; font-weight:700; line-height:1; white-space:nowrap;
  text-decoration:none !important; transition:all .15s; }
.aop-hlogout:hover, .aop-hlogout:focus,
.page-header .top-menu a.aop-hlogout:hover, .page-header .top-menu a.aop-hlogout:focus{ background:var(--coral); border-color:var(--coral) !important;
  color:#fff !important; text-decoration:none !important; box-shadow:0 2px 8px rgba(237,110,99,.25); }
.aop-hlogout svg{ flex-shrink:0; }

/* PHONES — the label goes, the icon stays (2026-08-21). Measured: logo 196 + title margin 20 +
   chip 137 + gap 10 + button 94 + edge 22 = 479px of fixed content. Before this button the header
   needed 375px and just cleared a 390px phone; adding a labelled button pushed it 89px over and
   the whole header scrolled sideways. Icon-only costs 50px instead of 104.
   The logo zone is freed at the same time: its 196px exists ONLY to line the header's divider up
   with the 196px sidebar, and below 560px the sidebar is already a full-width top strip (see the
   NARROW SCREENS block), so there is nothing left to line up with — it was simply eating half a
   phone screen. Net: 76 + 137 + 50 + 22 = ~285px. */
@media (max-width:560px){
    .aop-hlogout span, .page-header .top-menu a.aop-hlogout span{ display:none; }
    .aop-hlogout, .page-header .top-menu a.aop-hlogout{ width:40px; padding:0; justify-content:center; margin-left:8px; }
    /* the desktop spacing is what tips it over the edge, so the gaps come in too: 22px of edge
       padding and a 20px margin on an EMPTY title div are 42px a phone cannot spare */
    .page-header .top-menu{ padding-right:14px !important; }
    .page-header .pull-left.ml-4{ margin-left:8px !important; }
    .page-logo.aop-logo{ width:auto !important; padding:0 12px !important; }
    .page-logo.aop-logo img{ height:26px !important; max-width:110px !important; }
}

/* ---- HEADER refined (Ujwal feedback: bigger centered logo, edge padding, tight vertical) ---- */
.page-header.navbar{ height:60px !important; padding:0 !important; }
.page-header .page-header-inner{ display:flex !important; align-items:center; height:60px; padding:0 !important; margin:0 !important; width:100%; }
.page-logo.aop-logo{ width:196px; height:60px; display:flex !important; align-items:center; justify-content:center;
  padding:0 !important; margin:0 !important; float:none !important; flex-shrink:0; border-right:1px solid var(--border); background:transparent !important; }
.page-logo.aop-logo img{ height:40px !important; width:auto !important; max-width:168px; margin:0 !important; display:block; }
.page-header .pull-left.ml-4{ float:none !important; margin:0 0 0 20px !important; }
.page-header .top-menu{ float:none !important; margin-left:auto !important; padding-right:22px !important; height:60px;
  display:flex !important; align-items:center; }
.aop-userchip{ padding:5px 12px 5px 5px; }
.aop-uname{ font-size:12px; } .aop-urole{ font-size:9.5px; }

/* ---- HEADER logo zone aligned to sidebar's right border (Ujwal) ---- */
.page-header .page-header-inner{ padding-left:0 !important; }
.page-logo.aop-logo{ width:196px !important; box-sizing:border-box !important; padding:0 !important; margin:0 !important;
  border-right:1px solid var(--sidebar-border) !important; }
.page-logo.aop-logo img{ height:32px !important; width:auto !important; max-width:150px !important; }
/* sidebar's visible right border on the fixed 196px container so it lines up with the logo zone */
.sidebar-container{ box-sizing:border-box !important; border-right:1px solid var(--sidebar-border) !important; }
.aop-sidebar{ border-right:none !important; }

/* ===== STAGE 1: Tables refined to AOP + breathing (Leads page) ===== */
.page-content{ padding:26px 38px !important; }
.table, table.table{ background:#fff !important; border:1px solid var(--border) !important; border-radius:12px;
  border-collapse:separate !important; border-spacing:0; overflow:hidden; width:100%; box-shadow:0 1px 3px rgba(0,0,0,.03); }
.table thead th, table.table thead th{ background:#f8f9fc !important; color:#6b7280 !important; font-size:11px !important;
  font-weight:700 !important; text-transform:uppercase; letter-spacing:.07em; padding:11px 14px !important;
  border-bottom:1px solid var(--border) !important; vertical-align:middle; }
.table tbody td, table.table tbody td{ padding:11px 14px !important; font-size:13px !important; color:var(--text) !important;
  border-top:1px solid var(--borderL) !important; vertical-align:middle; }
.table tbody tr:hover{ background:#faf9f6 !important; }

/* ===== Tighter, EQUAL left/right breathing — table uses max width (Ujwal) ===== */
.page-content-wrapper{ padding:0 !important; }
.page-content{ padding:20px 18px !important; }   /* equal 18px L/R */
.page-content > .row, .page-content .portlet, .page-content .card{ margin-left:0 !important; margin-right:0 !important; }

/* ===== Reclaim left/right gap: collapse card + col padding around content (Ujwal) ===== */
.page-content{ padding:14px 12px !important; }
.page-content .row{ margin-left:0 !important; margin-right:0 !important; }
.page-content [class*="col-lg-12"], .page-content [class*="col-md-12"], .page-content .stretch-card, .page-content .grid-margin{
  padding-left:0 !important; padding-right:0 !important; }
.page-content .grid-margin{ margin-left:0 !important; margin-right:0 !important; margin-bottom:12px !important; }
.page-content .card.border-0, .page-content .card{ margin-left:0 !important; margin-right:0 !important; }
.page-content .card-body{ padding:12px 12px !important; }

/* ===== Table breathing = Sign Out button breathing (22px, both sides) (Ujwal) ===== */
.page-content{ padding:16px 22px !important; }      /* 22px L/R = .top-menu padding-right (Sign Out chip) */
.page-content .card-body{ padding:12px 0 !important; }   /* table edge sits at the 22px line */

/* ===== Make table flush: only page-content 22px controls L/R gap (Ujwal: left = right) ===== */
.page-content .card{ padding:0 !important; margin:0 !important; border:none !important; background:transparent !important; box-shadow:none !important; }
.page-content .card-body{ padding:0 !important; }
.page-content .table-responsive, .page-content .table-res, .page-content .table-scrollable{ padding:0 !important; margin:0 !important; }
.page-content{ padding:16px 22px !important; }   /* the ONLY L/R inset = 22px both sides */

/* ===== Force content offset to EXACTLY sidebar width (beat template's wider margin) ===== */
html body .page-wrapper .page-container .page-content-wrapper{ margin-left:196px !important; }
html body .page-wrapper .page-content{ padding:16px 22px !important; }

/* ===== Kill the stray 45px left margin on page-content (measured) — left gap = right gap ===== */
html body .page-wrapper .page-content{ margin-left:0 !important; margin-right:0 !important; }

/* ===== Beat responsive.css's leftover ".sidemenu-closed ... .page-content{margin-left:45px!important}" ===== */
body.sidemenu-closed .page-wrapper .page-content-wrapper .page-content,
body .page-wrapper .page-content-wrapper .page-content{ margin-left:0 !important; }

/* ===== #10 Status pills — restyle existing .badge.badge-* to AOP pills (no markup change) ===== */
.badge, label.badge, span.badge{ display:inline-block; padding:3px 9px !important; border-radius:6px !important;
  font-size:10px !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.04em; line-height:1.5;
  border:1px solid transparent; white-space:nowrap; margin:1px 0; }
.badge-danger{ background:rgba(192,57,43,.10) !important; color:#c0392b !important; border-color:rgba(192,57,43,.22) !important; }
.badge-success{ background:rgba(0,176,155,.12) !important; color:#0d9488 !important; border-color:rgba(0,176,155,.28) !important; }
.badge-warning{ background:#fef6e7 !important; color:#b45309 !important; border-color:#f6e2bd !important; }
.badge-info{ background:#eef6f9 !important; color:#0e7490 !important; border-color:#cfe6ee !important; }
.badge-primary{ background:rgba(35,55,93,.10) !important; color:#23375d !important; border-color:rgba(35,55,93,.22) !important; }
.badge-secondary, .badge-light{ background:#f1f5f9 !important; color:#64748b !important; border-color:#e2e0d9 !important; }
/* #9 table polish: a touch more row separation + nowrap headers */
.table thead th{ white-space:nowrap; }

/* ===== #5 Search bar + filters (AOP look) — CSS only, logic unchanged ===== */
/* search card internal padding so search + pills don't touch the card edges */
.page-content form#frm_orders_list .card-body{ padding:16px 18px 8px !important; }
.page-content form#frm_orders_list .form-group{ margin-bottom:12px; }
/* search text input: rounded + magnifier icon inside */
#txt_search{ border:1px solid var(--border) !important; border-radius:9px !important; height:38px; font-size:13px !important;
  padding:9px 12px 9px 34px !important; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a8b4' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 11px center !important; background-size:15px !important; }
#txt_search:focus{ border-color:var(--navy-h) !important; box-shadow:0 0 0 3px rgba(35,55,93,.10) !important; }
/* select2 dropdowns -> AOP */
.select2-container--default .select2-selection--single{ height:38px !important; border:1px solid var(--border) !important; border-radius:9px !important; background:#fff !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:36px !important; color:var(--text) !important; padding-left:12px !important; font-size:13px; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:36px !important; right:6px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder{ color:var(--text3) !important; }
.select2-dropdown{ border:1px solid var(--border) !important; border-radius:10px !important; box-shadow:0 8px 24px rgba(0,0,0,.08); overflow:hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--navy) !important; }
/* date-range input rounded (full picker is #8) */
#daterange1, #txt_fdate_range{ border-radius:9px !important; }
#daterange1 .form-control{ border:1px solid var(--border) !important; height:38px; font-size:13px; }
/* search/reset buttons sized down to AOP */
.mbv-search.btn-lg{ padding:8px 18px !important; font-size:13px !important; border-radius:9px !important; }
#btn_submit_speciality_add.btn-primary{ background:#fff !important; color:var(--text2) !important; border:1px solid var(--border) !important; box-shadow:none !important; }

/* ===== #3 Counter chips (AOP look) ===== */
/* gap 9->7 and chip padding 15->12 (2026-08-08): a MODEST trim, purely to buy back the ~86px
   that let all four filter buttons share the row instead of wrapping. Nothing loses hit area. */
.aop-chips{ display:flex; gap:7px; flex-wrap:wrap; margin:0 0 14px 0; }
.aop-chip{ display:flex; align-items:baseline; gap:6px; padding:7px 12px; border-radius:9px; border:1.5px solid var(--border);
  background:#fff; text-decoration:none !important; transition:border-color .14s, box-shadow .14s; cursor:pointer; }
.aop-chip:hover{ border-color:var(--navy-h); box-shadow:0 2px 8px rgba(35,55,93,.08); }
.aop-chip .aop-chip-num{ font-size:19px; font-weight:800; color:var(--text); line-height:1; }
.aop-chip .aop-chip-label{ font-size:11px; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.aop-chip.active{ outline:2px solid rgba(35,55,93,.16); outline-offset:-2px; }
.aop-chip-total .aop-chip-num{ color:var(--navy); }        .aop-chip-total.active{ border-color:var(--navy); }
.aop-chip-hot .aop-chip-num{ color:#c0392b; }              .aop-chip-hot.active{ border-color:#c0392b; outline-color:rgba(192,57,43,.18); }
.aop-chip-warm .aop-chip-num{ color:#b45309; }             .aop-chip-warm.active{ border-color:#b45309; outline-color:rgba(180,83,9,.18); }
.aop-chip-cold .aop-chip-num{ color:#0e7490; }             .aop-chip-cold.active{ border-color:#0e7490; outline-color:rgba(14,116,144,.18); }
.aop-chip-converted .aop-chip-num{ color:#0d9488; }        .aop-chip-converted.active{ border-color:#0d9488; }
.aop-chip-nearclosing .aop-chip-num{ color:#7c3aed; }      .aop-chip-nearclosing.active{ border-color:#7c3aed; outline-color:rgba(124,58,237,.18); }
.aop-chip-bad .aop-chip-num{ color:#64748b; }              .aop-chip-bad.active{ border-color:#64748b; outline-color:rgba(100,116,139,.18); }
.aop-chip-delivered .aop-chip-num{ color:#16a34a; }        .aop-chip-delivered.active{ border-color:#16a34a; }
.aop-chip-noremark .aop-chip-num{ color:#2563eb; }         .aop-chip-noremark.active{ border-color:#2563eb; outline-color:rgba(37,99,235,.18); }
.aop-chip-poawaited .aop-chip-num{ color:#6d28d9; }        .aop-chip-poawaited.active{ border-color:#6d28d9; outline-color:rgba(109,40,217,.18); }
/* Two GAP chips (2026-08-05) — deliberately grey/amber, not a lead-quality colour: they are not a
   stage in the pipeline, they flag records that fell through (no status set, nobody allocated). */
.aop-chip-nostatus .aop-chip-num{ color:#64748b; }         .aop-chip-nostatus.active{ border-color:#64748b; outline-color:rgba(100,116,139,.18); }
.aop-chip-unassigned .aop-chip-num{ color:#b45309; }       .aop-chip-unassigned.active{ border-color:#b45309; outline-color:rgba(180,83,9,.18); }

/* ===== #8 Date-range picker (bootstrap-daterangepicker) -> AOP look (CSS only) ===== */
#txt_fdate_range{ border:1px solid var(--border) !important; border-radius:9px !important; height:38px; font-size:13px !important; width:100% !important;
  padding:9px 12px 9px 34px !important; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a8b4' stroke-width='2' stroke-linecap='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") no-repeat 11px center !important; background-size:15px !important; }
#daterange1 .fa-calendar{ display:none !important; }
#daterange1.input-group{ flex-wrap:nowrap; }
.daterangepicker{ border:1px solid var(--border) !important; border-radius:12px !important; box-shadow:0 12px 40px rgba(20,20,30,.12) !important; font-family:'Inter',system-ui,sans-serif !important; }
.daterangepicker:before, .daterangepicker:after{ display:none !important; }
.daterangepicker td.available:hover, .daterangepicker th.available:hover{ background:#f1f5f9 !important; border-radius:6px; }
.daterangepicker td.in-range{ background:#dbeafe !important; color:#1e3a8a !important; }
.daterangepicker td.active, .daterangepicker td.active:hover{ background:var(--navy) !important; color:#fff !important; border-radius:8px; }
.daterangepicker .ranges li{ border-radius:7px !important; font-size:12px; color:var(--text2); }
.daterangepicker .ranges li.active{ background:var(--navy) !important; color:#fff !important; }
.daterangepicker .ranges li:hover{ background:#f1f5f9; }
.daterangepicker .drp-buttons{ border-top:1px solid var(--border) !important; }
.daterangepicker .drp-buttons .applyBtn{ background:var(--navy) !important; border-color:var(--navy) !important; border-radius:8px !important; font-weight:700; }
.daterangepicker .drp-buttons .cancelBtn{ background:#fff !important; border:1px solid var(--border) !important; color:var(--text2) !important; border-radius:8px !important; }
.daterangepicker select.monthselect, .daterangepicker select.yearselect{ border-radius:6px; border:1px solid var(--border) !important; }

/* ===== #6 Columns show/hide button + menu (AOP ColumnSelector look) ===== */
.aop-cols-wrap{ position:relative; display:inline-block; float:right; margin:0 2px 8px 0; }
.aop-cols-btn{ display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:8px; border:1.5px solid var(--border); background:#fff; color:var(--text2); font-size:12px; font-weight:700; cursor:pointer; }
.aop-cols-btn:hover{ border-color:var(--navy-h); }
.aop-cols-ico{ font-size:13px; line-height:1; }
.aop-cols-badge{ background:var(--navy); color:#fff; font-size:10px; font-weight:800; border-radius:10px; padding:1px 6px; min-width:16px; text-align:center; }
.aop-cols-menu{ display:none; position:absolute; top:100%; right:0; margin-top:6px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:8px 0; min-width:270px; z-index:300; }
.aop-cols-menu.open{ display:block; }
/* Columns moved INTO the bottom pill row (Ujwal, 2026-08-09) and .aop-pillrow is a flexbox,
   where `float:right` does nothing at all - the rule above was written for the old row-1 slot,
   which was not flex. Left as-is it also contributed margin-bottom:8px to a flex line, sitting
   the button ~4px above the pills beside it. Scoped override, so any page still using the old
   placement keeps the float. */
.aop-pillrow .aop-cols-wrap{ float:none; margin:0; align-self:center; }
.aop-cols-head{ display:flex; justify-content:space-between; align-items:center; padding:6px 14px 8px; border-bottom:1px solid var(--border); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text); }
.aop-cols-showall{ border:none; background:none; color:var(--navy); font-size:11px; font-weight:700; cursor:pointer; text-transform:none; letter-spacing:0; }
.aop-cols-item{ display:flex; align-items:center; gap:9px; padding:8px 14px; cursor:pointer; font-size:12px; color:var(--text); }
.aop-cols-item:hover{ background:#f5f7fa; }
.aop-cols-item input{ accent-color:var(--navy); width:15px; height:15px; cursor:pointer; }
.aop-cols-item span{ flex:1; }
.aop-cols-req{ font-size:9px; color:var(--text3); font-style:italic; }

/* ===== #7 Columns drag-reorder additions ===== */
.aop-cols-item{ cursor:default; }
.aop-cols-item span{ flex:none; }
.aop-cols-lbl{ flex:1 !important; }
.aop-cols-handle{ cursor:grab; color:var(--text3); font-size:14px; line-height:1; user-select:none; }
.aop-cols-handle:active{ cursor:grabbing; }
.aop-cols-num{ font-size:9px; font-weight:700; color:var(--text3); min-width:16px; text-align:center; }
.aop-cols-item.dragging{ opacity:.5; background:#eef2ff; }
.aop-cols-item.dragover{ box-shadow:inset 0 2px 0 var(--navy); }

/* ===== Stage A: AOP filter card (search form) + full-width search bar ===== */
form#frm_orders_list .card{ background:#fff !important; border:1px solid var(--border) !important; border-radius:14px !important; box-shadow:0 1px 3px rgba(0,0,0,.04) !important; margin-bottom:4px !important; }
form#frm_orders_list .card-body{ padding:18px 18px 8px !important; }
form#frm_orders_list #txt_search{ width:100% !important; height:42px !important; font-size:14px !important; }

/* ===== Stage B: filter pills (AOP) ===== */
.aop-pillrow{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:10px; }
.aop-pill-label{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text3); margin-right:4px; min-width:78px; }
.aop-pill{ display:inline-flex; align-items:center; gap:5px; padding:5px 13px; border-radius:16px; border:1.5px solid var(--border); background:#fff; color:var(--text2); font-size:12px; font-weight:600; cursor:pointer; transition:all .12s; white-space:nowrap; line-height:1.4; }
.aop-pill:hover{ border-color:var(--navy-h); color:var(--navy); }
.aop-pill.active{ background:var(--navy) !important; border-color:var(--navy) !important; color:#fff !important; }
.aop-pickrange{ display:inline-flex !important; width:auto !important; border:1.5px solid var(--border) !important; border-radius:16px !important; overflow:hidden; padding:0 !important; background:#fff; }
.aop-pickrange #txt_fdate_range{ background:transparent !important; border:none !important; height:28px !important; min-width:150px; width:auto !important; font-size:12px !important; padding:2px 12px !important; box-shadow:none !important; }
.aop-pickrange .fa-calendar{ display:none !important; }

/* ===== Compaction pass — smaller font + tighter spacing (AOP compact look, Ujwal) ===== */
.page-content, .table, .form-control, body{ font-size:13px; }
/* table: tighter rows, smaller text */
.table thead th, table.table thead th{ padding:7px 11px !important; font-size:10px !important; letter-spacing:.06em; }
.table tbody td, table.table tbody td{ padding:7px 11px !important; font-size:12px !important; line-height:1.45; }
.table tbody td a{ font-size:12px; }
/* counter chips: smaller */
.aop-chip{ padding:6px 12px; gap:6px; }
.aop-chip .aop-chip-num{ font-size:16px; }
.aop-chip .aop-chip-label{ font-size:9.5px; }
.aop-chips{ gap:7px; margin-bottom:11px; }
/* pills: a touch smaller */
.aop-pill{ padding:4px 11px; font-size:11.5px; }
.aop-pill-label{ font-size:9.5px; min-width:72px; }
.aop-pillrow{ gap:6px; margin-bottom:8px; }
/* form controls + buttons smaller */
.form-control{ height:36px; font-size:13px; }
form#frm_orders_list #txt_search{ height:38px !important; font-size:13px !important; }
form#frm_orders_list .card-body{ padding:14px 16px 6px !important; }
.btn, .btn-lg{ font-size:12.5px !important; padding:7px 15px !important; }
.mbv-search.btn-lg{ padding:7px 16px !important; font-size:12.5px !important; }
/* status badges (in cells) a touch smaller */
.badge{ font-size:9.5px !important; padding:2px 7px !important; }
/* tighten the bulk-row / showing text */
.page-content .card-body{ font-size:12.5px; }

/* ===== native custom date range inputs (From/To) ===== */
.aop-customrange{ display:inline-flex; align-items:center; gap:5px; }
.aop-dateinput{ border:1.5px solid var(--border); border-radius:14px; padding:4px 10px; font-size:11.5px; color:var(--text2); background:#fff; height:30px; font-family:inherit; cursor:pointer; }
.aop-dateinput:focus{ outline:none; border-color:var(--navy-h); }
.aop-rangesep{ color:var(--text3); font-size:12px; }

/* ===== THE CLEAR CONTROL, AND WHAT ITS COLOUR MEANS (Ujwal, 2026-08-09) =====
   "Whenever we put any filter, anything, the Clear button colour should change to
   red, so that you know that the filter is applied" - on EVERY page.

   The button is now always drawn, because a colour that only ever appears in one
   state carries no information: if it vanished when nothing was filtered there
   would be no "normal" to contrast the red against, and the page would look the
   same whether you were seeing everything or a slice of it.

     .aop-clearall           nothing is filtered - muted, and NOT clickable-looking,
                             because clearing nothing does nothing
     .aop-clearall.is-on     at least one filter is applied - red text, red border,
                             pale red fill. Red is used nowhere else on these bars,
                             so it cannot be mistaken for an ordinary pill.

   Which state applies is decided in ONE place, classes/aop_filterstate.php, from
   the request itself - never from a hand-maintained list of filter names. */
.aop-clearall{ color:var(--text3); border-color:var(--border); background:#fff; cursor:default; opacity:.55; }
.aop-clearall.is-on{ color:#c0392b; border-color:#e6b0aa; background:#fdf2f0; cursor:pointer; opacity:1; font-weight:700; }
.aop-clearall.is-on:hover{ background:#fbe4e0; border-color:#c0392b; color:#a5281b; }

/* The five pages that spell their clear control "Reset" (Clients, Accounts,
   Components, Receivables, Fix Names) style .cl-fbtn-reset in their OWN inline
   <style>, which loads AFTER this file - so a single-class rule here could never
   win. TWO classes (0,2,0) beats one (0,1,0) regardless of order, which is why
   this is written as .cl-fbtn-reset.is-on and not as an !important. The base grey
   those pages already define IS the "nothing is filtered" state, so only the red
   half is needed here. */
.cl-fbtn-reset.is-on{ background:#fdf2f0; color:#c0392b; border:1.5px solid #e6b0aa; font-weight:700; }
.cl-fbtn-reset.is-on:hover{ background:#fbe4e0; color:#a5281b; border-color:#c0392b; }

/* ===== custom dual-calendar date-range picker (AOP style) ===== */
.aop-dr-btn{ cursor:pointer; }
.aop-dr-pop{ position:absolute; top:100%; left:0; margin-top:6px; z-index:600; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 14px 44px rgba(20,20,30,.18); min-width:560px; }
.aop-dr-body{ display:flex; }
.aop-dr-ranges{ display:flex; flex-direction:column; gap:2px; padding:12px 8px; border-right:1px solid var(--border); min-width:128px; }
.aop-dr-range{ text-align:left; border:none; background:none; padding:7px 12px; border-radius:7px; font-size:12px; color:var(--text2); cursor:pointer; font-family:inherit; }
.aop-dr-range:hover{ background:#f1f5f9; color:var(--navy); }
.aop-dr-cals{ display:flex; align-items:center; gap:6px; padding:12px 14px; }
.aop-dr-nav{ border:1px solid var(--border); background:#fafaf7; border-radius:7px; width:26px; height:26px; cursor:pointer; color:var(--text2); font-size:15px; flex-shrink:0; }
.aop-dr-cal{ width:206px; }
.aop-dr-mh{ text-align:center; font-weight:700; font-size:13px; color:var(--text); margin-bottom:8px; }
.aop-dr-dow{ display:grid; grid-template-columns:repeat(7,1fr); }
.aop-dr-dow span{ text-align:center; font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; }
.aop-dr-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-top:4px; }
.aop-dr-day{ display:flex; align-items:center; justify-content:center; height:28px; font-size:12px; color:var(--text); border-radius:6px; cursor:pointer; }
.aop-dr-day:hover{ background:#eef2f7; }
.aop-dr-day.today{ outline:1.5px solid var(--navy-h); outline-offset:-2px; }
.aop-dr-day.inrange{ background:#dbeafe; color:#1e3a8a; border-radius:0; }
.aop-dr-day.sel{ background:var(--navy); color:#fff; border-radius:8px; }
.aop-dr-foot{ display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-top:1px solid var(--border); }
.aop-dr-cur{ font-size:12px; color:var(--text2); font-weight:600; }
.aop-dr-cancel{ padding:6px 14px; border:1px solid var(--border); background:#fff; border-radius:8px; font-size:12px; color:var(--text2); cursor:pointer; }
.aop-dr-apply{ padding:6px 16px; border:none; background:var(--navy); color:#fff; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; }
.aop-dr-apply[disabled]{ background:#cbd5e1; cursor:not-allowed; }

/* ===== filter row 1: small search + right-aligned actions (Columns + New) ===== */
.aop-search-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.aop-searchbar{ width:300px !important; max-width:40%; flex:0 0 auto; }
.aop-search-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.aop-search-actions .aop-cols-wrap{ float:none !important; margin:0 !important; }
.aop-newbtn{ display:inline-flex; align-items:center; gap:6px; background:var(--navy); color:#fff !important; border:none; border-radius:9px; padding:7px 15px; font-size:12.5px; font-weight:700; text-decoration:none !important; white-space:nowrap; }
.aop-newbtn:hover{ background:var(--navy-h); color:#fff !important; }

/* search row needs the same bottom gap as the pill rows (was touching the Source row) */
.aop-search-row{ margin-bottom:8px; }

/* visual separator between Source group and the merged Date By group on the same row */
.aop-dateby-sep{ margin-left:18px; }

/* ---- Footer — AOP-style flush navy bar (mirrors OutDo AOP app, per Ujwal 2026-06-11) ---- */
.page-footer{
  position:fixed !important; left:0; right:0; bottom:0; height:30px; z-index:130;
  margin:0 !important; padding:0 16px !important;
  background:#23375d !important; border-top:1px solid rgba(255,255,255,0.08);
  display:flex !important; align-items:center; justify-content:center;
}
.page-footer .aop-footer-text, .page-footer .aop-footer-text a{
  color:rgba(255,255,255,0.55) !important;
  font-size:10px; font-weight:600; letter-spacing:0.04em; text-decoration:none !important;
}
.page-footer .aop-footer-text a:hover{ color:rgba(255,255,255,0.85) !important; }
/* leave room for the fixed footer so the sidebar and last content rows aren't hidden */
.sidebar-container{ bottom:30px !important; }
/* THIS RULE NEVER APPLIED, ON ANY PAGE, UNTIL 2026-08-17. Ujwal reported the Follow-Ups table
   "merging into the footer, no gap between the last lead and the footer" — and he was seeing a
   site-wide bug. The plain `.page-content` selector below is beaten by line ~170,
   `html body .page-wrapper .page-content{ padding:16px 22px !important }`: both carry !important,
   so SPECIFICITY decides, and four selectors beat one. Every page therefore had 16px of bottom
   padding against a 30px fixed footer — the last 14px of every page has always been underneath it.
   It showed up on Follow-Ups first because that table card is the last element on the page with no
   paginator beneath it to absorb the loss.
   Fixed by MATCHING the specificity rather than adding a fifth override, so the two rules are
   comparable at a glance and the next person can see which wins.
   DESIGN_SYSTEM: !important does not win an argument — specificity does. A rule that looks like it
   should apply is not the same as a rule that applies; check the computed value, not the source. */
/* 30px of footer + 22px of breathing. 22px is the page's own left/right padding, so the
   content has the same gap on all four sides instead of stopping dead at the navy bar.
   An earlier 42px (a 12px gap) was still read as "merging into the footer" — correct arithmetic,
   not enough air. REMEMBER TO BUMP ?v= IN views/header.php: this file is cache-busted by hand,
   so a stylesheet fix that does not change the URL never reaches anybody's browser. */
.page-content{ padding-bottom:52px !important; }
html body .page-wrapper .page-content{ padding-bottom:52px !important; }

/* ============================================================================
   AOP list-table look — sticky header, striping, padding, hover + pills/date pills
   (Phase A polish; pill/date-pill classes used by the atomic-column rebuild)
   ============================================================================ */
.page-content table.table.table-hover.table-valignTop{ border-collapse:collapse; font-size:13px; }
.page-content table.table-hover.table-valignTop thead th{
  position:sticky; top:0; z-index:3;
  background:#f8f9fc; color:#6b7280;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em;
  padding:10px 14px; border-bottom:1px solid #e7e9f0; white-space:nowrap; vertical-align:middle;
}
.page-content table.table-hover.table-valignTop tbody td{
  padding:10px 14px; vertical-align:middle; font-size:13px; color:#23375d;
  border-top:none; border-bottom:1px solid #eef0f4;
}
.page-content table.table-hover.table-valignTop tbody tr:nth-child(even){ background:#fafbfd; }
.page-content table.table-hover.table-valignTop tbody tr:hover{ background:#f1f5fb; }

/* soft-tinted lead-status pill (replaces flat bootstrap badges) */
.aop-lpill{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; line-height:1.5; white-space:nowrap; }
.aop-lpill a, .aop-lpill a:hover, .aop-lpill a:focus{ color:inherit !important; text-decoration:none !important; }
.aop-lpill.is-hot{ background:#dcfce7; color:#15803d; }
.aop-lpill.is-warm{ background:#fef3c7; color:#b45309; }
.aop-lpill.is-cold{ background:#e0f2fe; color:#0369a1; }
.aop-lpill.is-converted{ background:#d1fae5; color:#047857; }
.aop-lpill.is-delivered{ background:#ede9fe; color:#6d28d9; }
.aop-lpill.is-bad{ background:#fee2e2; color:#b91c1c; }
.aop-lpill.is-noremark{ background:#eef2ff; color:#4338ca; }
.aop-lpill.is-na{ background:#f1f5f9; color:#64748b; }

/* subtle date cell with a status dot */
.aop-dcell{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:8px; background:#f4f6fa; color:#475569; font-size:11.5px; white-space:nowrap; }
.aop-dcell .aop-dot{ width:6px; height:6px; border-radius:50%; background:#94a3b8; flex:0 0 auto; }
.aop-dcell.is-over{ background:#fee2e2; color:#b91c1c; }   .aop-dcell.is-over .aop-dot{ background:#ef4444; }
.aop-dcell.is-today{ background:#fef3c7; color:#b45309; }  .aop-dcell.is-today .aop-dot{ background:#f59e0b; }
.aop-dcell.is-future{ background:#dcfce7; color:#15803d; } .aop-dcell.is-future .aop-dot{ background:#22c55e; }
.aop-cellmuted{ color:#cbd5e1; }
.aop-cellsub{ font-size:11px; color:#94a3b8; }

/* inline lead-status (quality) editor — select styled as a pill */
.aop-lpill-sel{ border:none; border-radius:999px; padding:3px 23px 3px 11px; font-size:11px; font-weight:700; line-height:1.5; cursor:pointer; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; font-family:inherit; background-repeat:no-repeat; background-position:right 8px center; background-size:9px 6px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23778' stroke-width='1.5'/></svg>"); }
.aop-lpill-sel:hover{ filter:brightness(0.97); }
.aop-lpill-sel:disabled{ opacity:0.6; cursor:wait; }
.aop-lpill-sel.is-hot{ background-color:#dcfce7; color:#15803d; }
.aop-lpill-sel.is-warm{ background-color:#fef3c7; color:#b45309; }
.aop-lpill-sel.is-cold{ background-color:#e0f2fe; color:#0369a1; }
.aop-lpill-sel.is-noremark{ background-color:#eef2ff; color:#4338ca; }
.aop-lpill-sel.is-bad{ background-color:#fee2e2; color:#b91c1c; }
.aop-lpill-sel.is-na{ background-color:#f1f5f9; color:#64748b; }

/* merged stacked-pair cells (Sr No/Order, Created/Source, Client/Project, Mobile/Email, Lead Status/Followup) */
.aop-st{ line-height:1.4; }
.aop-st2{ margin-top:4px; font-size:11.5px; line-height:1.4; }
/* alignment: header + content both left & top-aligned so title sits in line with content */
.page-content table.table-hover.table-valignTop thead th{ text-align:left; vertical-align:top; }
.page-content table.table-hover.table-valignTop tbody td{ text-align:left; vertical-align:top; }

/* MERGED HEADERS: primary label, then a subordinate secondary label below a hairline.
   Design rationale: the two items aren't equal siblings needing bullets — one is the primary
   identifier, the other its detail. Hierarchy (weight/size/colour) + a hairline reads as
   "field + sub-field" far more elegantly than repeated dots. */
.page-content table.table-hover.table-valignTop thead th .aop-hl{ display:block; }
.page-content table.table-hover.table-valignTop thead th .aop-hl + .aop-hl{ margin-top:4px; padding-top:4px; border-top:1px solid #e9ebf0; color:#aab2bf; font-size:9.5px; font-weight:600; letter-spacing:0.05em; }

/* ============================================================================
   LEAD TABLE — modern content styling (avatars, chips, dates, contacts, actions)
   ============================================================================ */
/* 1. type rhythm */
.page-content table.table-hover.table-valignTop tbody td{ font-size:12.5px; }
.aop-cellmuted{ color:#cbd5e1; }
/* 3. Sr No — demoted metadata */
.aop-srno{ color:#a8b1c0; font-size:11px; font-variant-numeric:tabular-nums; }
/* 4. Order id — record identity */
.aop-orderid{ font-weight:600; color:#475569 !important; font-variant-numeric:tabular-nums; text-decoration:none !important; }
.aop-orderid:hover{ color:#23375d !important; }
.aop-orderid::after{ content:" \2197"; opacity:0; font-size:10px; transition:opacity .12s; }
.aop-orderid:hover::after{ opacity:.6; }
/* 5. dates — clean, no dot */
.aop-date{ color:#64748b; font-size:11.5px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.aop-conv-ok{ color:#16a34a; margin-right:4px; font-weight:700; }
/* 6. source channel chip */
.aop-chan{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:7px; font-size:11px; font-weight:600; background:#f1f5f9; color:#475569; white-space:nowrap; }
.aop-chan-website{ background:#e0f2fe; color:#0369a1; }
.aop-chan-wa{ background:#dcfce7; color:#15803d; }
.aop-chan-ref{ background:#f3e8ff; color:#7c3aed; }
.aop-chan-call{ background:#fef3c7; color:#b45309; }
.aop-chan-fb{ background:#fce7f3; color:#be185d; }
.aop-chan-repeat{ background:#e0e7ff; color:#4338ca; }
/* 7/14. avatars */
.aop-av{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; font-size:10px; font-weight:700; flex:0 0 auto; letter-spacing:.02em; }
.aop-person{ display:inline-flex; align-items:center; gap:8px; }
.aop-pname{ font-weight:600; color:#1e293b !important; text-decoration:none !important; }
.aop-pname:hover{ color:#23375d !important; text-decoration:underline !important; }
/* 8. project sub-line */
.aop-sub{ color:#94a3b8 !important; font-size:11.5px; text-decoration:none !important; }
.aop-sub:hover{ color:#64748b !important; }
.aop-trunc{ display:inline-block; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
/* 9/10. contact (mobile/email) */
.aop-contact{ display:inline-flex; align-items:center; gap:6px; color:#475569 !important; text-decoration:none !important; font-size:12px; }
/* WhatsApp "message this number" button — shared by every list page (Ujwal 2026-07-22:
   Leads, Orders, Completed Orders, Archived Leads, in addition to Clients). Moved here
   from an inline block in client_list.php so all pages render it identically. */
.aop-wabtn{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; background:#e8f6ee; color:#1d9d5a; flex:0 0 auto; text-decoration:none !important; transition:background .12s,color .12s; }
.aop-wabtn:hover{ background:#25a05a; color:#fff; }
.aop-contact:hover{ color:#23375d !important; }
.aop-contact .aop-ic{ color:#94a3b8; flex:0 0 auto; }
.aop-contact:hover .aop-ic{ color:#23375d; }
/* 10b. X / G quotation amounts (2026-08-05). X (before GST) is the figure the business plans in,
   so it reads darker and heavier; G (with GST) sits under it, lighter, as the billing figure.
   The tag is a fixed-width monospace cap so the two rupee values line up vertically. */
.aop-amt-x, .aop-amt-g{ margin-top:3px; text-align:left; white-space:nowrap; line-height:1.35; }
.aop-amt-x{ font-weight:700; color:#1e293b; }
.aop-amt-g{ font-weight:600; color:#94a3b8; font-size:11px; }
.aop-amt-tag{ display:inline-block; width:13px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
              font-size:10px; font-weight:700; color:#94a3b8; }
.aop-amt-x .aop-amt-tag{ color:#64748b; }

/* 11. lead-status SEMANTIC palette: Hot=orange(urgent), Warm=amber, Cold=blue, New=grey.
   PO Awaited (2026-08-05) = violet: deliberately OFF the hot/warm/cold temperature scale, because
   it is not a warmer version of Hot — it is a different thing (agreed, awaiting the PO). Reading
   the board, a violet pill must not be mistaken for "hotter than orange". */
.aop-lpill.is-poawaited, .aop-lpill-sel.is-poawaited{ background-color:#ede9fe; color:#6d28d9; }
.aop-lpill.is-hot, .aop-lpill-sel.is-hot{ background-color:#ffedd5; color:#c2410c; }
.aop-lpill.is-warm, .aop-lpill-sel.is-warm{ background-color:#fef3c7; color:#b45309; }
.aop-lpill.is-cold, .aop-lpill-sel.is-cold{ background-color:#e0f2fe; color:#0369a1; }
.aop-lpill.is-noremark, .aop-lpill-sel.is-noremark{ background-color:#f1f5f9; color:#64748b; }
/* 12. followup urgency */
.aop-fup{ display:inline-block; font-size:11.5px; font-weight:600; text-decoration:none !important; white-space:nowrap; }
.aop-fup.is-over{ color:#dc2626 !important; }
.aop-fup.is-today{ color:#d97706 !important; }
.aop-fup.is-future{ color:#94a3b8 !important; }
.aop-fup.aop-fup-none{ color:#c0c6d0 !important; font-style:italic; font-weight:500; }
/* F / M date lines in the Leads status cell (Ujwal, 2026-08-08).
   Each date sits on its OWN line so the eye reads "call, then meeting" vertically instead of
   parsing one run-on string. The tag is a fixed 11px box so both dates start at the same x —
   ragged left edges are what makes a two-line cell feel like clutter rather than a table. */
.aop-dline{ display:flex; align-items:center; gap:5px; line-height:1.45; }
.aop-dtag{ display:inline-block; width:11px; flex:0 0 11px; font-size:9.5px; font-weight:800;
           color:#94a3b8; text-align:center; letter-spacing:.02em; }
.aop-dline .aop-fup.is-future{ color:#64748b !important; }
/* the two date rows inside the Log slide-over (Ujwal, 2026-08-08) */
.aop-drow{ display:flex; align-items:center; gap:8px; padding:7px 9px; border:1px solid #e2e8f0;
           border-radius:8px; margin-bottom:6px; cursor:pointer; background:#fff; transition:border-color .12s,background .12s; }
.aop-drow:hover{ border-color:#cbd5e1; }
/* the SELECTED row must be unmistakable — it decides where the next click on the calendar lands,
   so a subtle highlight here turns into a date written to the wrong field. */
.aop-drow.is-on{ border-color:#23375d; background:#f6f8fc; box-shadow:inset 3px 0 0 #23375d; }
.aop-drow-lbl{ font-size:11.5px; color:#64748b; font-weight:600; }
.aop-drow-val{ margin-left:auto; font-size:12px; font-weight:700; color:#23375d; font-variant-numeric:tabular-nums; }
.aop-drow-val.is-empty{ color:#c0c6d0; font-weight:500; font-style:italic; }
.aop-drow-x{ border:0; background:none; color:#c0c6d0; font-size:12px; line-height:1; cursor:pointer; padding:2px 3px; border-radius:4px; }
.aop-drow-x:hover{ color:#dc2626; background:#fef2f2; }
/* THE DATE BLOCK IS THE BUTTON (Ujwal, 2026-08-08 — the separate "Log" button was taking
   unnecessary space in the cell). It must carry NO button chrome at rest, or we have simply
   swapped one visually-heavy control for another; the affordance appears on hover instead.
   The row is dense, so the hover state has to be unmistakable but must not shift layout —
   hence a background + inset ring rather than a border, which would move the text by 1px. */
.aop-dbtn{ display:block; width:100%; text-align:left; border:0; background:none; padding:1px 5px;
           margin:0 0 0 -5px; border-radius:6px; cursor:pointer; font:inherit; color:inherit; }
.aop-dbtn:hover{ background:#f1f5f9; box-shadow:inset 0 0 0 1px #dbe3ef; }
.aop-dbtn:focus-visible{ outline:2px solid #23375d; outline-offset:1px; }
/* "no date" is the state that MOST needs clicking, so it must not read as disabled text —
   it gets the same hover treatment and turns navy to say "this does something". */
.aop-dbtn:hover .aop-fup-none{ color:#23375d !important; font-style:normal; }
.aop-cold{ margin-left:5px; }
/* ── the call-outcome picker (Ujwal, 2026-08-08) ────────────────────────────────────────
   Replaces a native <select>, whose three faults were all OS-drawn and unreachable by CSS:
   the chosen line was clipped, the five groups ran together, and the popup moved on re-open. */
.aop-rsel{ display:flex; align-items:center; gap:8px; width:100%; text-align:left;
           /* line-height 1.35 with real vertical padding is the CLIPPING fix: the native
              control gave the text less room than one line and cut the descenders off. */
           padding:7px 10px; line-height:1.35; min-height:34px;
           border:1px solid #cdd7e8; border-radius:8px; background:#fff; cursor:pointer;
           font-size:12.5px; font-weight:600; color:#23375d; }
.aop-rsel:hover{ border-color:#23375d; }
.aop-rsel:focus-visible{ outline:2px solid #23375d; outline-offset:1px; }
.aop-rsel-txt{ flex:1 1 auto; }
.aop-rsel-txt.is-empty{ color:#94a3b8; font-weight:500; }
.aop-rsel-caret{ flex:0 0 auto; color:#94a3b8; font-size:10px; }

.aop-rpop{ position:fixed; z-index:1200; background:#fff; border:1px solid #dfe4ee; border-radius:10px;
           box-shadow:0 12px 32px rgba(15,23,42,.18); overflow-y:auto; padding:5px; }
/* GROUP SEPARATION, which the native list could not show: a heading in small caps plus a rule
   above it. The rule is skipped on the first group so the panel does not open with a stray line. */
/* SPACING IS A BUDGET, BUT IT WAS OVER-SPENT (Ujwal, 2026-08-08 — "reduced too much").
   18 items + 5 headings must fit beside the button without a scrollbar, so I cut padding until
   the panel hit 498px — and it read as cramped. The list is now HALFWAY BACK to the original
   on every value I trimmed, which is the instruction:
       item padding-y   7px -> 3px  ->  5px      item font  12.5 -> 12 -> 12.5
       heading pad-top  9px -> 4px  ->  6px      line-height 1.35 -> 1.3 -> 1.33
       heading pad-btm  4px -> 2px  ->  3px      panel pad     5 -> 4 -> 5
   That lands the panel near 610px, which still clears every ordinary window because the
   placement logic (aopReasonOpen) will float it against the viewport rather than scroll.
   Density was never the goal — NOT SCROLLING was, and 610px still achieves it. */
.aop-rpop-hd{ display:flex; align-items:center; gap:6px;
              font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
              padding:6px 9px 3px; margin-top:3px; border-top:1px solid #eef1f7; }
.aop-rpop-hd:first-child{ border-top:0; margin-top:0; padding-top:3px; }
/* the heading takes the colour of the status it sets — the SAME values the Leads table uses
   for its status pills, so the two screens speak one visual language (.aop-lpill, line ~504). */
.aop-rpop-hd.is-hot{ color:#c2410c; }
.aop-rpop-hd.is-warm{ color:#b45309; }
.aop-rpop-hd.is-cold{ color:#0369a1; }
.aop-rpop-hd.is-poawaited{ color:#6d28d9; }
.aop-rpop-hd.is-bad{ color:#b91c1c; }
.aop-rpop-hd.is-noremark{ color:#4338ca; }
/* the status itself as a small pill, in that status's own background — this is the bit that
   answers "what will choosing from this group DO to the lead?" at a glance. */
.aop-rpop-tag{ margin-left:auto; padding:1px 7px; border-radius:20px; font-size:8.5px;
               font-weight:800; letter-spacing:.04em; }
.aop-rpop-tag.is-hot{ background:#ffedd5; color:#c2410c; }
.aop-rpop-tag.is-warm{ background:#fef3c7; color:#b45309; }
.aop-rpop-tag.is-cold{ background:#e0f2fe; color:#0369a1; }
.aop-rpop-tag.is-poawaited{ background:#ede9fe; color:#6d28d9; }
.aop-rpop-tag.is-bad{ background:#fee2e2; color:#b91c1c; }
.aop-rpop-tag.is-noremark{ background:#eef2ff; color:#4338ca; }
.aop-rpop-item{ padding:5px 10px; font-size:12.5px; line-height:1.33; color:#334155;
                cursor:pointer; border-radius:6px; }
.aop-rpop-item:hover{ background:#f1f5f9; color:#23375d; font-weight:600; }

/* ── COMPACTNESS (Ujwal: the calendar was pushed below the fold and needed scrolling) ─────
   The panel is a fixed-height column, so every pixel spent above the calendar is a pixel the
   calendar loses. These trims are spacing only — no control loses a hit area. */
.aop-slideover .aop-so-body{ padding:14px 18px; }
.aop-slideover .aop-so-field{ margin-bottom:11px; }
.aop-slideover .aop-so-field > label{ margin-bottom:4px; font-size:11.5px; }
.aop-so-tight{ margin-bottom:8px !important; }
.aop-slideover .aop-sub{ font-size:10.5px; line-height:1.3; }
#aopLogComment{ min-height:52px; }
.aop-slideover .aop-pickers{ gap:5px; }
.aop-slideover .aop-pick{ padding:5px 11px; font-size:11.5px; }
.aop-slideover .aop-drow{ padding:5px 8px; margin-bottom:4px; }
.aop-slideover .aoplc-day{ height:26px; font-size:11.5px; }
.aop-slideover .aoplc-grid{ gap:1px; }

/* ── Quoted / Not quoted (Ujwal, 2026-08-08) ────────────────────────────────────────────
   margin-left:auto is the whole trick behind "do not increase the height of the bar": the
   chips row is already a flex row with slack at its right end, so this pair fills space that
   existed rather than adding a line. It only wraps to its own line when the status chips
   genuinely fill the row, which is the correct behaviour on a narrow screen.
   Drawn as a SEGMENTED PAIR, not as two more chips, because it answers a different question
   from the status strip and must not read as another status to be added into the total. */
.aop-qseg{ display:inline-flex; align-self:center; border:1.5px solid var(--border);
           border-radius:9px; overflow:hidden; background:#fff; }
.aop-qbtn{ display:flex; align-items:baseline; gap:5px; padding:6px 10px; font-size:11.5px;
           font-weight:600; color:#64748b; text-decoration:none !important; white-space:nowrap;
           border-left:1.5px solid var(--border); }
.aop-qbtn:first-child{ border-left:0; }
.aop-qbtn:hover{ background:#f5f7fc; color:#23375d; }
.aop-qbtn.active{ background:#23375d; color:#fff; }
.aop-qbtn.active .aop-qbtn-num{ color:#fff; }
.aop-qbtn-num{ font-size:13px; font-weight:800; color:#23375d; font-variant-numeric:tabular-nums; }
/* THE GAP WAS `margin-left:auto` ON .aop-qseg, AND THAT WAS THE WHOLE PROBLEM (Ujwal,
   2026-08-08 - "the gap between unassigned and quoted is long"). `auto` does not mean "a big
   gap", it means "absorb EVERY remaining pixel in the row" - so the space grew with the window,
   and once chips + gap + buttons exceeded the row the buttons had nowhere to go but the next
   line. A fixed gap cannot do either: it is the same on every screen and it can never push the
   buttons off the row on its own.
   18px = twice the chips row's own 9px gap: enough to read as a separate group (these answer a
   different question from the status chips), far less than the auto gap it replaces. */
.aop-fsegs{ display:inline-flex; gap:8px; align-items:center; margin-left:18px; }
@media (max-width:900px){ .aop-fsegs{ margin-left:0; } }
/* the SECOND segmented pair sits beside the first, not on a new line: only the first one
   claims the auto-margin, so the two travel together at the right end of the chips row. */
/* spacing between the two pairs now belongs to the wrapper's gap, not to this element */

/* ── TARGET FIRM (Ujwal, 2026-08-08) ────────────────────────────────────────────────────
   GOLD, deliberately outside the status palette. Hot/Warm/Cold own orange/amber/blue, and this
   is NOT a temperature — using any status colour would imply it belongs on that scale and can
   be compared with it. Gold reads as "distinguished" and collides with nothing. */
.aop-tgtbadge{ display:inline-flex; align-items:center; gap:3px; margin-bottom:3px;
               padding:1px 7px; border-radius:20px; background:#fef3c7; color:#92400e;
               font-size:8.5px; font-weight:800; letter-spacing:.06em; line-height:1.5;
               border:1px solid #fde68a; }
.aop-rpop-hd.is-target{ color:#92400e; }
.aop-rpop-tag.is-target{ background:#fef3c7; color:#92400e; }

/* ── the row status is now a BUTTON that opens the panel (Ujwal, 2026-08-08) ─────────────
   It keeps the exact look of the .aop-lpill it replaces - the colour coding is how the table
   is scanned - and only gains a pointer and a hover lift, so it reads as "this opens
   something" rather than "this edits in place", which is precisely the behaviour removed. */
.aop-lpill-btn{ border:0; font:inherit; cursor:pointer; }
.aop-lpill-btn:hover{ filter:brightness(0.95); box-shadow:0 1px 3px rgba(15,23,42,.16); }
.aop-lpill-btn:focus-visible{ outline:2px solid #23375d; outline-offset:1px; }

/* Converted is a doorway, not a value - it opens the order modal. Dashed, so it does not look
   like the six pills that save quietly beside it. */
.aop-pick.is-convert{ border-style:dashed; }
.aop-pick.is-convert.active{ border-style:solid; }
/* the lost-reason pills, in the Lost colour so the row reads as one red decision */
.aop-pick.is-lost{ font-size:11px; padding:4px 9px; }
.aop-pick.is-lost.active{ background:#b91c1c; border-color:#b91c1c; color:#fff; }
#aopLostWrap{ border-left:3px solid #fecaca; padding-left:9px; }

/* ── the financial-year pill (Ujwal, 2026-08-08) ────────────────────────────────────────
   A two-option segment rather than a single toggle, so BOTH states are visible at rest: the
   reader can see that "All time" exists without clicking anything. That is the whole point -
   a default that narrows the page has to advertise its own escape. */
.aop-fypill{ display:inline-flex; border:1.5px solid var(--border); border-radius:8px;
             overflow:hidden; background:#fff; vertical-align:middle; }
.aop-fyopt{ padding:5px 11px; font-size:11px; font-weight:700; color:#64748b;
            text-decoration:none !important; white-space:nowrap; border-left:1.5px solid var(--border); }
.aop-fyopt:first-child{ border-left:0; }
.aop-fyopt:hover{ background:#f5f7fc; color:#23375d; }
.aop-fyopt.on{ background:#23375d; color:#fff; }

/* the client's website on the Leads row (Ujwal, 2026-08-08). Same shape as the phone/email
   lines it sits under, but blue-on-hover so it reads as "this leaves the app" - the other two
   hand off to the phone or the mail client, this one opens a stranger's site in a new tab. */
.aop-weblink{ color:#64748b; }
.aop-weblink:hover{ color:#2563eb; text-decoration:underline !important; }

/* ── Quotation Register, 2026-08-09 audit ───────────────────────────────────────────────
   The header lost its subtitle sentence; the count moves up beside the title so the page
   still says how much it is showing without spending a second line on prose. */
.qr-count{ display:inline-block; margin-left:8px; padding:1px 9px; border-radius:20px;
           background:#eef2f8; color:#23375d; font-size:12px; font-weight:800;
           vertical-align:middle; font-variant-numeric:tabular-nums; }
/* X / G — the SAME marks the Leads page uses for before/with GST. Muted on purpose: they
   label the number, they are not the number. */
.qr-xg{ display:inline-block; min-width:11px; font-size:9px; font-weight:800; color:#94a3b8;
        vertical-align:middle; }
.qr-sub2{ font-size:10.5px; color:#94a3b8; font-weight:600; margin-top:2px; white-space:nowrap; }
.qr-kpi-rate .v{ color:#15803d; }
.qr-hint{ display:inline-block; width:12px; height:12px; line-height:12px; text-align:center;
          border-radius:50%; background:#e2e8f0; color:#64748b; font-size:9px; font-weight:800;
          cursor:help; vertical-align:middle; }
.qr-date{ font-size:11.5px; font-weight:600; color:#334155; font-variant-numeric:tabular-nums;
          white-space:nowrap; }
.qr-lbl{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
         color:#94a3b8; margin-right:2px; }
.qr-dr{ width:150px; padding:4px 9px; border:1px solid #cdd7e8; border-radius:7px;
        font-size:11.5px; font-weight:600; color:#23375d; }
/* the tools group is pushed right so the FILTERS read as one band and the table controls as
   another - they answer different questions and should not be scanned as one list. */
.qr-tools{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.qr-sel{ padding:4px 7px; border:1px solid #cdd7e8; border-radius:7px; background:#fff;
         font-size:11px; font-weight:600; color:#23375d; }
@media (max-width:900px){ .qr-tools{ margin-left:0; } }
/* 13. money */
.aop-num{ text-align:right !important; font-variant-numeric:tabular-nums; font-weight:600; color:#334155; }
/* 14. team avatar strip */
.aop-team{ display:inline-flex; align-items:center; }
.aop-tav{ margin-left:-6px; display:inline-block; transition:transform .1s; }
.aop-tav:first-child{ margin-left:0; }
.aop-tav:hover{ transform:translateY(-2px); z-index:2; }
.aop-tav .aop-av{ border:2px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.aop-tav.is-empty .aop-av{ border-style:dashed; border-color:#cbd5e1; box-shadow:none; }
/* 15. action buttons -> ghost, uniform, neutral (colour on hover only) */
td[data-label="Action"] .row{ margin:0; display:flex; flex-wrap:wrap; max-width:128px; gap:4px; }
td[data-label="Action"] .col-md-12{ padding:0; width:auto; flex:0 0 auto; display:contents; }
td[data-label="Action"] a{ color:inherit !important; }
td[data-label="Action"] .btn{ background:#fff !important; border:1px solid #e6eaf0 !important; color:#64748b !important; width:30px; height:30px; min-width:30px; padding:0 !important; margin:0 !important; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; line-height:1; box-shadow:none !important; transition:all .12s; }
td[data-label="Action"] .btn:hover{ background:#f1f5f9 !important; color:#23375d !important; border-color:#cbd5e1 !important; }
td[data-label="Action"] .btn.btn-danger{ color:#dc2626 !important; }
td[data-label="Action"] .btn.btn-danger:hover{ background:#fee2e2 !important; border-color:#fca5a5 !important; color:#b91c1c !important; }
/* 17. density (compact) */
table.aop-compact tbody td{ padding-top:6px !important; padding-bottom:6px !important; }
table.aop-compact .aop-st2{ margin-top:2px; }
.aop-density-btn{ border:1px solid #e2e0d9; background:#fff; border-radius:8px; padding:5px 10px; font-size:11.5px; font-weight:600; color:#5a6473; cursor:pointer; margin-left:8px; }
.aop-density-btn:hover{ background:#f5f4f0; }
/* 18. sticky first column */
.page-content table.table-hover.table-valignTop thead th:first-child{ position:sticky; left:0; z-index:5; background:#f8f9fc; }
.page-content table.table-hover.table-valignTop tbody td:first-child{ position:sticky; left:0; z-index:1; background:#fff; }
.page-content table.table-hover.table-valignTop tbody tr:nth-child(even) td:first-child{ background:#fafbfd; }
.page-content table.table-hover.table-valignTop tbody tr:hover td:first-child{ background:#f1f5fb; }

/* force the inline status SELECT to render as a coloured pill (overrides global form-control select styling) */
.page-content table select.aop-lpill-sel{ border-radius:999px !important; padding:3px 23px 3px 11px !important; height:auto !important; border:none !important; }
.page-content table select.aop-lpill-sel.is-hot{ background-color:#ffedd5 !important; color:#c2410c !important; }
.page-content table select.aop-lpill-sel.is-warm{ background-color:#fef3c7 !important; color:#b45309 !important; }
.page-content table select.aop-lpill-sel.is-cold{ background-color:#e0f2fe !important; color:#0369a1 !important; }
.page-content table select.aop-lpill-sel.is-noremark{ background-color:#f1f5f9 !important; color:#64748b !important; }
.page-content table select.aop-lpill-sel.is-bad{ background-color:#fee2e2 !important; color:#b91c1c !important; }
.page-content table select.aop-lpill-sel.is-na{ background-color:#f1f5f9 !important; color:#64748b !important; }


/* action grid — clean ghost icon buttons, 2 tidy rows (was 4 stacked col-md-12 rows) */
td[data-label="Action"] .aop-actions{ display:flex; flex-wrap:wrap; gap:5px; max-width:174px; align-items:center; }
td[data-label="Action"] a{ color:inherit !important; display:inline-flex; line-height:0; }
.aop-actbtn{ width:30px; height:30px; min-width:30px; padding:0 !important; margin:0 !important; border:1px solid #e6eaf0 !important; background:#fff !important; color:#5a6473 !important; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:12.5px !important; line-height:1 !important; box-shadow:none !important; cursor:pointer; transition:all .12s; }
.aop-actbtn:hover{ background:#eef2f8 !important; color:#23375d !important; border-color:#cbd5e1 !important; }
/* .has-file — an action button whose record already carries a document (2026-08-08). The Estimate/PO
   button looked identical whether a quotation was attached or not, so the only way to find out was
   to open the panel on every row. A tinted button with a corner dot answers it from the list. */
.aop-actbtn.has-file{ border-color:#cfdcc9 !important; background:#f1f7ee !important; color:#2f6a48 !important; position:relative; }
.aop-actbtn.has-file:hover{ background:#e6f0e1 !important; border-color:#2f6a48 !important; color:#2f6a48 !important; }
.aop-actbtn.has-file::after{ content:''; position:absolute; top:-2px; right:-2px; width:8px; height:8px;
    border-radius:50%; background:#2f6a48; border:1.5px solid #fff; }
.aop-actbtn.aop-danger{ color:#dc2626 !important; }
.aop-actbtn.aop-danger:hover{ background:#fee2e2 !important; border-color:#fca5a5 !important; color:#b91c1c !important; }

/* ---- THE TWO ENDINGS: complete (green) and delete (red) --------------------------------------
   Ujwal, 2026-08-17: "I wanted to give these green tick and red cross, but the colour is missing."
   The colours were there — as page-local rules `.aop-actbtn.fl-ok{ color:#166534 }`. Two classes
   beats one on specificity, so they looked like they should win. They lost, because
   `.aop-actbtn` above sets color/background/border with !important, and !IMPORTANT BEATS
   SPECIFICITY OUTRIGHT — an !important declaration wins over a non-important one no matter how
   specific the loser is. Every sibling variant in this file already knew that: .has-file and
   .aop-danger both carry !important on every line.
   (The footer bug the same day was the mirror image: two rules BOTH !important, decided on
   specificity. The pair of them is the whole rule — !important first, then specificity.)

   THEY LIVE HERE, NOT ON THE PAGE, because they are now used by My Task and by Completed, and
   DESIGN_SYSTEM is explicit: a thing on more than one page belongs in the shared file. Two copies
   would have needed !important added twice, and the second copy is the one that gets forgotten.
   Names are prefixed (aop-ok / aop-no) — a bare .ok or .success would collide with Bootstrap,
   which is how a chip once ended up pushed out of its row.

   Tinted at rest, filled on hover: solid green beside solid red on every row turns the column
   into traffic lights and the eye stops reading either. The hover fill is what makes the click
   feel deliberate on an action that ends something. */
/* TODAY IN THE LOG CALENDAR: allowed, but exceptional (2026-08-17). Not greyed like the blocked
   days behind it and not plain like a normal future day — a dashed amber ring, because clicking it
   asks a question first. The look has to say "this one is different" before the dialog explains why,
   or the dialog reads as the app second-guessing an ordinary click. */
.aoplc-day.is-asktoday{ box-shadow:inset 0 0 0 1px #fcd34d; color:#b45309; font-weight:700; }
.aoplc-day.is-asktoday:hover{ background:#fffbeb; color:#92400e; }

.aop-actbtn.aop-ok{ color:#166534 !important; border-color:#bbf7d0 !important; background:#f0fdf4 !important; }
.aop-actbtn.aop-ok:hover{ color:#fff !important; background:#166534 !important; border-color:#166534 !important; }
.aop-actbtn.aop-no{ color:#b91c1c !important; border-color:#fecaca !important; background:#fef2f2 !important; }
.aop-actbtn.aop-no:hover{ color:#fff !important; background:#b91c1c !important; border-color:#b91c1c !important; }
/* line ~1177 tints EVERY .aop-actbtn:hover inside an action cell to #faf7f2 with !important, and
   it comes later in the file — so without these two the fill would be beige on hover, not green
   or red. Same specificity, later wins; hence the repeat. */
.aop-actions .aop-actbtn.aop-ok:hover, td[data-label="Actions"] .aop-actbtn.aop-ok:hover{ background:#166534 !important; }
.aop-actions .aop-actbtn.aop-no:hover, td[data-label="Actions"] .aop-actbtn.aop-no:hover{ background:#b91c1c !important; }

/* team — first names stacked (Sales / PM / Design), small role tag + readable name */
.aop-team-list{ display:flex; flex-direction:column; gap:3px; }
.aop-tname{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:#334155 !important; text-decoration:none !important; white-space:nowrap; }
.aop-tname:hover{ color:#23375d !important; }
.aop-tname:hover .aop-tnm{ text-decoration:underline; }
.aop-tname.is-empty .aop-tnm{ color:#cbd5e1; font-style:italic; }
.aop-trole{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:5px; background:#eef2f8; color:#94a3b8; font-size:8.5px; font-weight:700; flex:0 0 auto; }

/* fix: a global rule forces these <i> buttons to display:block, killing the flex-centering
   (icon glyph ended up top-left). Force inline-flex so the FA glyph centres. */
.aop-actbtn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; text-align:center; }

/* ===== Stage A: brand the table (navy-tint header + navy text), hairline rows, action lift ===== */
.page-content table.table-hover.table-valignTop thead th{ background:#eef1f7 !important; color:#23375d !important; letter-spacing:0.045em; border-bottom:1px solid #dfe4ee !important; }
.page-content table.table-hover.table-valignTop thead th:first-child{ background:#eef1f7 !important; }
.page-content table.table-hover.table-valignTop thead th .aop-hl + .aop-hl{ color:#9aa6bb; border-top-color:#dfe4ee; }
/* drop the near-invisible striping -> clean hairline dividers + a clear hover */
.page-content table.table-hover.table-valignTop tbody tr:nth-child(even){ background:#fff !important; }
.page-content table.table-hover.table-valignTop tbody tr:nth-child(even) td:first-child{ background:#fff !important; }
.page-content table.table-hover.table-valignTop tbody td{ border-bottom:1px solid #eef0f5 !important; }
.page-content table.table-hover.table-valignTop tbody tr:hover{ background:#f5f7fc !important; }
.page-content table.table-hover.table-valignTop tbody tr:hover td:first-child{ background:#f5f7fc !important; }
/* subtle tappable lift on action buttons */
.aop-actbtn:hover{ box-shadow:0 2px 5px rgba(35,55,93,.13) !important; transform:translateY(-1px); }

/* modern line icons (Lucide) for actions + source */
.aop-svg{ display:block; flex:0 0 auto; }
.aop-chan .aop-svg{ opacity:.9; }

/* ============================================================================
   SHARED FOUNDATION for the redesign fleet — form layout, page header, modals.
   Opt-in: add class "aop-form" to a <form>, "aop-modal" to a .modal.
   ============================================================================ */
/* ---- form layout (Batch 2 form pages) ---- */
.aop-form .form-group{ margin-bottom:15px; }
.aop-form label, .aop-form .control-label{ display:block; font-size:11.5px; font-weight:600; color:#475569; margin-bottom:5px; }
.aop-form .aop-req{ color:#dc2626; margin-left:2px; }
.aop-form .form-control, .aop-form input[type=text], .aop-form input[type=email], .aop-form input[type=number], .aop-form input[type=password], .aop-form input[type=date], .aop-form input[type=tel], .aop-form select, .aop-form textarea{
  width:100%; border:1px solid #e2e0d9 !important; border-radius:9px !important; padding:9px 12px !important; font-size:13px !important; color:#1e293b !important; background:#fff !important; height:auto !important; box-shadow:none !important; transition:border-color .12s, box-shadow .12s; }
.aop-form .form-control:focus, .aop-form input:focus, .aop-form select:focus, .aop-form textarea:focus{ border-color:#23375d !important; box-shadow:0 0 0 3px rgba(35,55,93,.08) !important; outline:none; }
.aop-form .form-control::placeholder{ color:#cbd5e1; }
.aop-card{ background:#fff; border:1px solid #e6e8ee; border-radius:12px; padding:18px 20px; margin-bottom:16px; }
.aop-card-title{ font-size:11.5px; font-weight:700; color:#23375d; text-transform:uppercase; letter-spacing:.06em; margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid #eef0f5; }
/* ---- clean page header (replaces .page-bar / .breadcrumb pull-right) ---- */
.aop-page-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px; }
.aop-page-head .aop-title{ font-size:18px; font-weight:700; color:#23375d; margin:0; }
.aop-page-head .aop-sub{ font-size:12px; color:#94a3b8; }
/* ---- modal styling (add class "aop-modal" to .modal) ---- */
.aop-modal .modal-content{ border:none !important; border-radius:14px; box-shadow:0 24px 60px rgba(35,55,93,.20); overflow:hidden; }
.aop-modal .modal-header{ background:#eef1f7 !important; border-bottom:1px solid #dfe4ee !important; padding:14px 20px !important; }
/* h1 and h2 are in this list because 22 modals across 10 view files title their header
   with <h1> (measured 2026-08-08). They were never covered here, so each one rendered a
   DEFAULT h1 - big, dark, wide top margin - on the navy strip below: an unreadable title on a
   tall slab, which is what "the presentation is not the latest version" looked like. */
.aop-modal .modal-title, .aop-modal .modal-header h1, .aop-modal .modal-header h2,
.aop-modal .modal-header h3, .aop-modal .modal-header h4{ font-size:14px !important; font-weight:700 !important; color:#23375d !important; margin:0; }
.aop-modal .modal-body{ padding:18px 20px !important; }
.aop-modal .modal-footer{ border-top:1px solid #eef0f5 !important; padding:12px 20px !important; }
.aop-modal .modal-footer .btn-primary, .aop-modal .btn.fb-background{ background:#23375d !important; border:none !important; border-radius:9px !important; color:#fff !important; }
.aop-modal .modal-footer .btn-primary:hover{ background:#1b2c4d !important; }
.aop-modal .btn-default, .aop-modal .btn-contrast{ background:#fff !important; border:1px solid #e2e0d9 !important; color:#5a6473 !important; border-radius:9px !important; }

/* ghost/cancel button (requested by form agents) + cover modal .btn-secondary close buttons */
.aop-ghostbtn{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #e2e0d9; color:#5a6473; border-radius:9px; padding:7px 15px; font-size:12.5px; font-weight:600; text-decoration:none !important; cursor:pointer; }
.aop-ghostbtn:hover{ background:#f5f4f0; color:#23375d; }
.aop-modal .btn-secondary{ background:#fff !important; border:1px solid #e2e0d9 !important; color:#5a6473 !important; border-radius:9px !important; }

/* ============================================================================
   SLIDE-OVER RESKIN (Ujwal 2026-07-19) — every .aop-modal now opens as a RIGHT-SIDE
   slide-over panel (same feel as the "+ New Lead" slide-over), not a centred pop-up.
   Pure CSS: Bootstrap 4 still shows/hides via data-toggle; no markup/JS/trigger changes,
   forms post to the same endpoints, the estimate/quotation page body is untouched.
   Tiny yes/no confirms (#img_remove, #delete_product) stay centred — a full-height
   panel for a one-line "Are you sure?" would be overkill.
   ============================================================================ */
.aop-modal.modal{ padding-right:0 !important; }
.aop-modal .modal-dialog{
    position:fixed !important; top:0 !important; right:0 !important; left:auto !important; bottom:auto !important;
    margin:0 !important; height:100vh; height:100dvh; max-width:520px; width:94vw;
    transform:translateX(100%) !important; transition:transform .28s ease !important;
}
.aop-modal.show .modal-dialog{ transform:translateX(0) !important; }
.aop-modal .modal-content{ height:100vh; height:100dvh; max-height:100vh; border-radius:0 !important;
    display:flex; flex-direction:column; overflow-y:auto; box-shadow:-8px 0 30px rgba(15,23,42,.18); }
/* min-height:0 is what actually lets a flex child scroll (without it the body grows to its
   content and the buttons fall off the bottom, unreachable). overflow on modal-content is the
   fallback for modals whose content is not inside a .modal-body. */
.aop-modal .modal-body{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.aop-modal .modal-header, .aop-modal .modal-footer{ flex:0 0 auto; }
/* exceptions: keep the small confirm dialogs centred (not full-height slide-overs) */
.aop-modal#img_remove .modal-dialog, .aop-modal#delete_product .modal-dialog, .aop-modal#modal_show_menu .modal-dialog{
    position:relative !important; top:auto !important; right:auto !important; height:auto !important; width:auto !important;
    max-width:420px !important; margin:1.75rem auto !important; transform:none !important; }
.aop-modal#img_remove .modal-content, .aop-modal#delete_product .modal-content, .aop-modal#modal_show_menu .modal-content{
    height:auto !important; border-radius:14px !important; box-shadow:0 24px 60px rgba(35,55,93,.20); }

/* ============================================================================
   ORDERS-IN-EXECUTION pipeline (Converted page) — KPI strip, stage hero, value, advance
   ============================================================================ */
.aop-kpis{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 14px; }
.aop-kpi{ flex:1 1 120px; min-width:118px; background:#fff; border:1px solid #e6e8ee; border-radius:11px; padding:10px 14px; display:flex; flex-direction:column; gap:2px; }
.aop-kpi-lbl{ font-size:10px; font-weight:600; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em; }
.aop-kpi-num{ font-size:18px; font-weight:700; color:#23375d; font-variant-numeric:tabular-nums; }
.aop-kpi-num.is-good{ color:#15803d; } .aop-kpi-num.is-warn{ color:#b45309; } .aop-kpi-num.is-bad{ color:#dc2626; }
/* ── KPI NUMBERS SPEAK THE SAME COLOUR LANGUAGE AS THE STATUS CHIPS (Ujwal, 2026-08-09) ──
   "The boxes at the top carry numbers or rupees, and on Orders they carry the colour of
   their own according to their respect - do that on all the pages."
   Orders already had the meaning-based set above: green = money in hand, amber = money owed,
   red = something wrong (and only when it is non-zero - a zero Overdue must not shout).
   What was missing is the STATUS palette. The Leads strip names Hot / PO Awaited / Warm /
   Cold / New, and the chips immediately BELOW it already draw those exact five words in
   colour. Two different colours for the same word on the same screen is the thing to avoid,
   so these mirror .aop-chip-* exactly - same hex, one source of meaning. */
.aop-kpi-num.is-hot{ color:#c0392b; }
.aop-kpi-num.is-poawaited{ color:#6d28d9; }
.aop-kpi-num.is-warm{ color:#b45309; }
.aop-kpi-num.is-cold{ color:#0e7490; }
.aop-kpi-num.is-new{ color:#2563eb; }
.aop-kpi-num.is-muted{ color:#64748b; }
.aop-stagecell{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; min-width:148px; }
.aop-stage{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:11px; font-weight:700; text-decoration:none !important; white-space:nowrap; }
.aop-stage.is-pre{ background:#f1f5f9; color:#475569; } .aop-stage.is-design{ background:#e0f2fe; color:#0369a1; }
.aop-stage.is-exec{ background:#fef3c7; color:#b45309; } .aop-stage.is-close{ background:#dcfce7; color:#15803d; } .aop-stage.is-na{ background:#f1f5f9; color:#94a3b8; }
.aop-stage-meta{ font-size:10px; color:#94a3b8; font-variant-numeric:tabular-nums; }
.aop-stage-bar{ width:120px; height:4px; border-radius:3px; background:#eef0f5; overflow:hidden; }
.aop-stage-bar span{ display:block; height:100%; background:#3b6fb5; border-radius:3px; }
.aop-stage-bar span.is-good{ background:#22c55e; }
.aop-advance{ display:inline-flex; align-items:center; gap:4px; margin-top:1px; padding:3px 9px; border:1px solid #cdd7e8; background:#fff; color:#23375d; border-radius:7px; font-size:10.5px; font-weight:600; cursor:pointer; transition:all .12s; }
.aop-advance:hover{ background:#23375d; color:#fff; border-color:#23375d; }
.aop-advance:disabled{ opacity:.5; cursor:wait; }
.aop-val{ font-size:13px; font-weight:700; color:#23375d; font-variant-numeric:tabular-nums; }
.aop-valsub{ font-size:10.5px; color:#94a3b8; font-variant-numeric:tabular-nums; }

/* clickable KPI tiles (Leads sales-intelligence strip) */
a.aop-kpi{ text-decoration:none !important; transition:border-color .12s, box-shadow .12s; }
a.aop-kpi:hover{ border-color:#cdd7e8; box-shadow:0 2px 6px rgba(35,55,93,.08); }
.aop-kpi.is-sel{ border-color:#23375d !important; box-shadow:0 0 0 2px rgba(35,55,93,.12); }
.aop-kpi-clear{ background:#f5f4f0 !important; justify-content:center; }

/* inline set-followup + going-cold badge (Leads) */
.aop-fupset{ display:inline-flex; align-items:center; gap:3px; border:1px dashed #cbd5e1; background:#fff; color:#94a3b8; border-radius:6px; padding:1px 7px; font-size:10.5px; font-weight:600; cursor:pointer; margin-left:6px; vertical-align:middle; }
.aop-fupset:hover{ border-color:#23375d; color:#23375d; }
.aop-fupinput{ border:1px solid #23375d; border-radius:6px; padding:2px 6px; font-size:11px; margin-left:6px; }
.aop-cold{ display:inline-block; margin-left:6px; font-size:10px; font-weight:600; color:#b45309; background:#fef3c7; border-radius:5px; padding:1px 6px; white-space:nowrap; }

/* ===== Leads Table/Board toggle + Hot/Warm/Cold board ===== */
.aop-viewtoggle{ display:inline-flex; margin-bottom:10px; border:1px solid #e2e0d9; border-radius:9px; overflow:hidden; }
.aop-vt{ border:none; background:#fff; color:#5a6473; padding:6px 14px; font-size:12px; font-weight:600; cursor:pointer; }
.aop-vt.active{ background:#23375d; color:#fff; }
.aop-board{ display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; }
.aop-bcol{ flex:1 1 0; min-width:230px; background:#f6f7fa; border-radius:12px; padding:10px; }
.aop-bcol-head{ font-size:12px; font-weight:700; padding:6px 11px; border-radius:8px; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; }
.aop-bcol-head.is-hot{ background:#ffedd5; color:#c2410c; } .aop-bcol-head.is-warm{ background:#fef3c7; color:#b45309; } .aop-bcol-head.is-cold{ background:#e0f2fe; color:#0369a1; } .aop-bcol-head.is-noremark{ background:#f1f5f9; color:#64748b; }
.aop-bcol-n{ background:rgba(0,0,0,.08); border-radius:999px; padding:0 8px; font-size:11px; }
.aop-bcol-body{ display:flex; flex-direction:column; gap:8px; max-height:620px; overflow-y:auto; }
.aop-bcard{ display:block; background:#fff; border:1px solid #e6e8ee; border-radius:10px; padding:10px; text-decoration:none !important; transition:box-shadow .12s; }
.aop-bcard:hover{ box-shadow:0 3px 10px rgba(35,55,93,.1); }
.aop-bcard-top{ display:flex; align-items:center; gap:7px; }
.aop-bcard-name{ font-size:12.5px; font-weight:600; color:#23375d; }
.aop-bcard-proj{ font-size:11px; color:#94a3b8; margin-top:5px; }
.aop-bcard-foot{ display:flex; align-items:center; gap:8px; margin-top:7px; }
.aop-bcard-val{ font-size:11.5px; font-weight:700; color:#15803d; font-variant-numeric:tabular-nums; }
.aop-bcard-empty{ font-size:11px; color:#cbd5e1; text-align:center; padding:14px; }

/* inline team re-assign (Leads) — no popup, no comment */
.aop-treassign{ display:inline-flex; align-items:center; gap:5px; }
.aop-tsel{ border:1px solid #e2e0d9; border-radius:7px; padding:2px 6px; font-size:11px; color:#334155; background:#fff; max-width:108px; cursor:pointer; }
.aop-tsel.is-empty{ color:#94a3b8; border-style:dashed; }
.aop-tsel:hover{ border-color:#23375d; }

/* ===== History modal — clean the toggle buttons + the (AJAX-injected) timeline table ===== */
#show_history .modal-body{ padding:18px 22px; }
#show_history .modal-body > .btn{ border:1px solid #cdd7e8 !important; background:#fff !important; color:#23375d !important; border-radius:8px !important; padding:5px 14px !important; font-size:12px !important; font-weight:600 !important; margin:0 8px 6px 0; box-shadow:none !important; }
#show_history .modal-body > .btn:hover{ background:#23375d !important; color:#fff !important; }
#show_history .box, #show_history .box-content{ border:none !important; background:transparent !important; box-shadow:none !important; padding:0 !important; }
#show_history_data table{ width:100%; border-collapse:separate; border-spacing:0; margin-top:12px; font-size:12px; }
#show_history_data table th{ background:#eef1f7 !important; color:#23375d !important; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; padding:8px 10px; border:none !important; border-bottom:1px solid #dfe4ee !important; text-align:left; white-space:nowrap; }
#show_history_data table td{ padding:8px 10px; border:none !important; border-bottom:1px solid #eef0f5 !important; color:#334155; vertical-align:top; }
#show_history_data table tr:hover td{ background:#f5f7fc; }

/* ===== + New Lead slide-over + pickers (DESIGN_SYSTEM §8) ===== */
.aop-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.4); opacity:0; visibility:hidden; transition:opacity .2s; z-index:1090; }
.aop-overlay.open{ opacity:1; visibility:visible; }
.aop-slideover{ position:fixed; top:0; right:0; height:100vh; width:440px; max-width:92vw; background:#fff; box-shadow:-8px 0 30px rgba(15,23,42,.18); transform:translateX(100%); transition:transform .25s ease; z-index:1095; }
.aop-slideover.open{ transform:translateX(0); }
.aop-so-form{ display:flex; flex-direction:column; height:100%; }
.aop-so-head{ display:flex; align-items:center; justify-content:space-between; padding:17px 22px; border-bottom:1px solid #dfe4ee; background:#eef1f7; }
.aop-so-head .aop-title{ font-size:17px; font-weight:700; color:#23375d; }
.aop-so-close{ border:none; background:transparent; color:#64748b; cursor:pointer; padding:4px; }
.aop-so-body{ flex:1; overflow-y:auto; padding:20px 22px; }
.aop-so-field{ margin-bottom:18px; }
.aop-so-field > label{ display:block; font-size:12px; font-weight:600; color:#475569; margin-bottom:7px; }
.aop-so-hint{ display:inline-block; margin-top:8px; font-size:11px; color:#3b6fb5; text-decoration:none; }
.aop-so-hint:hover{ text-decoration:underline; }
.aop-pickers{ display:flex; flex-wrap:wrap; gap:7px; }
.aop-pick{ border:1px solid #e2e0d9; background:#fff; color:#475569; border-radius:999px; padding:5px 13px; font-size:12px; font-weight:600; cursor:pointer; transition:all .12s; }
.aop-pick:hover{ border-color:#23375d; color:#23375d; }
.aop-pick.active{ background:#23375d; border-color:#23375d; color:#fff; }
.aop-so-foot{ display:flex; justify-content:flex-end; gap:10px; padding:15px 22px; border-top:1px solid #eef0f5; }

/* + New Lead — client search combobox (self-contained, no select2) */
.aop-combo{ position:relative; }
.aop-combo-list{ position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #dfe4ee; border-radius:8px; box-shadow:0 8px 24px rgba(15,23,42,.14); max-height:240px; overflow-y:auto; z-index:10; margin-top:3px; }
.aop-combo-item{ padding:8px 12px; font-size:12.5px; color:#334155; cursor:pointer; border-bottom:1px solid #f3f4f7; }
.aop-combo-item:last-child{ border-bottom:none; }
.aop-combo-item:hover{ background:#f5f7fc; color:#23375d; }
.aop-combo-empty{ padding:10px 12px; font-size:12px; color:#94a3b8; }

/* salesperson chip-picker (inline row re-assign) */
.aop-spick{ display:inline-flex; align-items:center; gap:5px; border:1px solid #e2e0d9; background:#fff; color:#334155; border-radius:999px; padding:3px 11px; font-size:11.5px; font-weight:600; cursor:pointer; transition:all .12s; }
.aop-spick:hover{ border-color:#23375d; color:#23375d; }
.aop-spick.is-empty{ color:#94a3b8; border-style:dashed; }
.aop-spick-caret{ font-size:9px; opacity:.55; }
.aop-spop{ position:fixed; z-index:1100; background:#fff; border:1px solid #dfe4ee; border-radius:10px; box-shadow:0 10px 28px rgba(15,23,42,.16); width:210px; max-height:300px; overflow-y:auto; padding:5px; }
.aop-spop-hd{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; padding:6px 10px 4px; }
.aop-spop-item{ padding:7px 10px; font-size:12.5px; color:#334155; cursor:pointer; border-radius:7px; }
.aop-spop-item:hover{ background:#f5f7fc; color:#23375d; }
.aop-spop-item.is-cur{ color:#23375d; font-weight:700; }

/* wider + New-Lead slide-over with 2-per-row new-client fields (reduce scrolling) */
.aop-slideover{ width:512px; }
#so_new_fields{ grid-template-columns:1fr 1fr; gap:0 16px; }
#so_new_fields .aop-so-field{ grid-column:1 / -1; margin-bottom:16px; }
#so_new_fields .aop-so-field.half{ grid-column:auto; }

/* generic 2-per-row grid for slide-over fields (reused by + New Client) */
.aop-so-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-content:start; }
.aop-so-grid .aop-so-field{ grid-column:1 / -1; margin-bottom:16px; }
.aop-so-grid .aop-so-field.half{ grid-column:auto; }

/* on-brand calendar popover (inline set follow-up) */
.aop-cal{ position:fixed; z-index:1100; width:256px; background:#fff; border:1px solid #dfe4ee; border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,.18); padding:12px; }
.aop-cal-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.aop-cal-title{ font-size:13px; font-weight:700; color:#23375d; }
.aop-cal-nav{ border:none; background:#f1f5f9; color:#23375d; width:26px; height:26px; border-radius:7px; cursor:pointer; font-size:15px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.aop-cal-nav:hover{ background:#23375d; color:#fff; }
.aop-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.aop-cal-dow{ font-size:10px; font-weight:700; color:#94a3b8; text-align:center; padding:4px 0; }
.aop-cal-day{ border:none; background:transparent; color:#334155; height:30px; border-radius:7px; cursor:pointer; font-size:12px; font-variant-numeric:tabular-nums; }
.aop-cal-day:hover{ background:#eef1f7; color:#23375d; }
.aop-cal-day.is-today{ color:#23375d; font-weight:700; box-shadow:inset 0 0 0 1px #cdd7e8; }
.aop-cal-day.is-sel{ background:#23375d !important; color:#fff !important; font-weight:700; }
.aop-cal-day.is-past{ color:#cbd5e1; }

/* Log-follow-up button (row) */
.aop-logbtn{ display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:2px 9px; border:1px solid #cdd7e8; background:#fff; color:#23375d; border-radius:7px; font-size:10.5px; font-weight:700; cursor:pointer; vertical-align:middle; }
.aop-logbtn:hover{ background:#23375d; color:#fff; border-color:#23375d; }

/* copy-rate button (component list) */
.aop-copyrate{ display:inline-flex; align-items:center; margin-left:6px; padding:2px 5px; border:1px solid #e2e0d9; background:#fff; color:#94a3b8; border-radius:6px; cursor:pointer; vertical-align:middle; transition:all .12s; }
.aop-copyrate:hover{ border-color:#23375d; color:#23375d; }
.aop-copyrate.copied{ border-color:#15803d; color:#15803d; background:#dcfce7; }
.cl-combo{ position:relative; display:inline-block; }

/* ---- sidebar nav icons (Lucide SVG, replaces old fa-* font icons) ---- */
.aop-navicon{ display:inline-flex; align-items:center; justify-content:center; width:22px; min-width:22px; margin-right:2px; }
.aop-navicon svg{ width:18px; height:18px; stroke-width:1.9; vertical-align:middle; }

/* ---- filter dropdowns: readable, custom caret, no text clipping (used across all list pages) ---- */
.page-content select.aop-fsel, select.aop-fsel, .aop-fsel{
  height:36px !important; min-width:150px !important; max-width:260px !important; width:auto !important;
  box-sizing:border-box !important; border:1px solid #e2e0d9 !important; border-radius:8px !important;
  padding:0 32px 0 12px !important; margin:0 !important; font-size:13px !important; line-height:normal !important;
  color:#1e293b !important; background-color:#fff !important; cursor:pointer !important; vertical-align:middle !important;
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat:no-repeat !important; background-position:right 11px center !important; text-overflow:ellipsis !important; }
.aop-fsel:focus{ outline:none !important; border-color:#23375d !important; box-shadow:0 0 0 3px rgba(35,55,93,.08) !important; }
.aop-fsel option{ color:#1e293b !important; background:#fff !important; }

/* ---- CRM → Ops sync badge (Orders/Converted page) ---- */
.aop-ops{ display:flex; flex-direction:column; gap:3px; align-items:flex-start; }
.aop-opsbadge{ display:inline-block; padding:2px 9px; border-radius:12px; font-size:11px; font-weight:700; white-space:nowrap; }
.aop-opsbadge.is-synced{ background:#dcfce7; color:#15803d; }
.aop-opsbadge.is-failed{ background:#fee2e2; color:#b91c1c; }
.aop-opsbadge.is-pending{ background:#fef3c7; color:#b45309; }
.aop-opsbadge.is-none{ background:#f1f5f9; color:#64748b; font-weight:600; }
.aop-opsbtn{ display:inline-block; border:1px solid #e2e0d9; background:#fff; color:#475569; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:10px; cursor:pointer; }
.aop-opsbtn:hover{ border-color:#23375d; color:#23375d; }
.aop-opsbtn:disabled{ opacity:.5; cursor:default; }
.aop-opscode{ font-size:11px; font-weight:700; color:#23375d; white-space:nowrap; }
.aop-opsstage{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:#0e7a5f; white-space:nowrap; }
.aop-opsstage.is-done{ color:#15803d; }
.aop-opsstage.is-cancel{ color:#b91c1c; }
.aop-opsstage.is-hold{ color:#b45309; }
.aop-opsstage.is-ship{ color:#0e7a5f; }
.aop-opsstage.is-run{ color:#23375d; }
.aop-opssub{ font-size:10.5px; color:#6b7280; white-space:nowrap; }

/* ============================================================================
   OUTDO WARM BRAND LAYER (Ujwal 2026-07-19) — the colour / look-and-feel pass.
   Grounds the app in the FROZEN brand: cream paper + navy authority + coral EARNED
   (accent only, at the moments of action/location). Warms the cool-grey neutrals the
   finely-tuned pages hardcoded, WITHOUT touching any geometry (padding/sticky/widths).
   This block loads last, so it wins. Delete this whole block to fully revert the pass.
   ============================================================================ */
:root{ --warm:#f3f1e9; --warm-hover:#f6f3ec; --warm-line:#e3e1d8; --warm-row:#efece3; }

/* --- base paper: cream everywhere --- */
body, .page-container, .page-content, .page-content-wrapper{ background:var(--bg) !important; }

/* --- TABLES: warm cream header band w/ navy ink, warm hover, warm hairlines --- */
.page-content table.table-hover.table-valignTop thead th,
.page-content table.table-hover.table-valignTop thead th:first-child,
.table thead th, table.table thead th{
  background:var(--warm) !important; color:var(--navy) !important; border-bottom:1px solid var(--warm-line) !important; }
.page-content table.table-hover.table-valignTop tbody tr:hover,
.page-content table.table-hover.table-valignTop tbody tr:hover td:first-child,
.table tbody tr:hover{ background:var(--warm-hover) !important; }
.page-content table.table-hover.table-valignTop tbody td{ border-bottom-color:var(--warm-row) !important; }

/* --- PANELS / MODALS / SLIDE-OVERS: navy header strip = brand presence on every drawer --- */
.aop-modal .modal-header, .aop-so-head, #show_history_data table th{
  background:var(--navy) !important; border-bottom:1px solid var(--navy) !important; }
.aop-modal .modal-title, .aop-modal .modal-header h1, .aop-modal .modal-header h2,
.aop-modal .modal-header h3, .aop-modal .modal-header h4,
.aop-so-head .aop-title, #show_history_data table th{ color:#fff !important; }
.aop-so-close, .aop-modal .modal-header .close,
.aop-modal .modal-header button, .aop-modal .modal-header .aop-svg{ color:#dbe3f1 !important; opacity:.9; }
.aop-modal .modal-header .close{ text-shadow:none !important; }
#show_history_data table tr:hover td{ background:var(--warm-hover) !important; }

/* --- SIDEBAR: reinforce the earned-coral active bar; warm the open group --- */
.aop-item.active{ background:var(--coral-soft) !important; border-left-color:var(--coral) !important; }
.aop-group[open]{ border-color:var(--warm-line) !important; }

/* --- TYPE: brand faces (Archivo display / Inter body) on the key surfaces --- */
.aop-title, .aop-card-title, .aop-page-head .aop-title, .page-title,
.aop-so-head .aop-title, .aop-kpi-num, .aop-chip .aop-chip-num{ font-family:'Archivo', system-ui, sans-serif !important; }

/* ============================================================================
   ICON COLOUR SYSTEM (Ujwal 2026-07-19) — the disciplined "earned" palette.
   Sidebar symbols are NAVY (authority); the active page glows CORAL (you-are-here).
   Row-action symbols stay calm grey → navy on hover; CORAL appears only on the one
   money action (Push-to-Ops), and Delete stays red. Coral rare = coral means something.
   ============================================================================ */
/* --- SIDEBAR: navy symbols; the active page glows coral (earned) --- */
.aop-sidebar .aop-navicon svg{ stroke:var(--navy) !important; transition:stroke .12s; }
.aop-sidebar .aop-item.active .aop-navicon svg{ stroke:var(--coral) !important; }
.aop-sidebar .aop-logout .aop-navicon svg{ stroke:var(--coral) !important; }

/* --- ROW ACTIONS: calm grey at rest → navy on hover (inherited). Coral ONLY on the
   one money action (Push-to-Ops); Delete stays red via .aop-danger. Restraint = the
   table reads at a glance instead of shouting a dozen colours. --- */
.aop-actions .aop-ic-push, td[data-label="Action"] .aop-ic-push{ stroke:var(--coral) !important; }
.aop-actions .aop-actbtn:hover, td[data-label="Action"] .aop-actbtn:hover{ background:#faf7f2 !important; }

/* ============================================================================
   SLIDE-OVER BUTTONS — symbol removed, text only (Ujwal 2026-07-19).
   The button glyphs (aop_icon SVG / simple-line-icon <i>) are display:block, so
   inside a button they stacked ABOVE the label and doubled the button's height
   (icon on row 1, text on row 2). Ujwal: drop the glyph, keep the words. This hides
   the symbol in EVERY slide-over/modal action button — footer submit + close/cancel,
   New/Save buttons, and the +New slide-over footer — and keeps the label on one line.
   Scoped to panels only: page buttons (New/Search) and the header × close keep icons.
   ============================================================================ */
.aop-modal .modal-footer .btn svg,   .aop-modal .modal-footer .btn i,
.aop-modal .modal-footer button svg, .aop-modal .modal-footer button i,
.aop-modal button[type=submit] svg,  .aop-modal button[type=submit] i,
.aop-modal .aop-newbtn svg,          .aop-modal .aop-newbtn i,
.aop-modal .aop-ghostbtn svg,        .aop-modal .aop-ghostbtn i,
.aop-so-foot .btn svg,               .aop-so-foot .btn i,
.aop-so-foot button svg,             .aop-so-foot button i,
.aop-so-foot .aop-newbtn svg,        .aop-so-foot .aop-newbtn i{ display:none !important; }
.aop-modal .modal-footer .btn, .aop-modal .modal-footer button, .aop-modal .aop-newbtn,
.aop-so-foot .btn, .aop-so-foot button, .aop-so-foot .aop-newbtn{ white-space:nowrap !important; }

/* ============================================================================
   LEADS ACTION CELL — 9 buttons back to 5+4 (Ujwal 2026-07-19).
   The 30px buttons were content-box, so the 1px border made each 32px wide; five
   (180px) overflowed the 174px row and dropped to 4-per-row → an extra 3rd row of
   height. Make them border-box (true 30px) and widen the row to fit five again,
   using the horizontal space already available. 9 buttons now = 5 + 4 (two rows).
   ============================================================================ */
.aop-actbtn, td[data-label="Action"] .btn{ box-sizing:border-box !important; }
td[data-label="Action"] .aop-actions{ max-width:178px !important; }

/* ============================================================================
   LOG PANEL — inline follow-up calendar (Ujwal 2026-07-19). Always visible inside
   the Log slide-over so the note, status AND next-follow-up date are set in one go.
   Isolated aoplc-* classes (no tie to the popup calendar or the aop-ic-* icons).
   ============================================================================ */
.aoplc{ border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:#fff; }
.aoplc-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.aoplc-title{ font-size:13px; font-weight:700; color:var(--navy); font-family:'Archivo',system-ui,sans-serif; }
.aoplc-nav{ border:1px solid var(--border); background:#faf9f5; color:var(--navy); width:26px; height:26px; border-radius:7px; cursor:pointer; font-size:15px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.aoplc-nav:hover{ background:var(--navy); color:#fff; }
.aoplc-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.aoplc-dow{ text-align:center; font-size:10px; font-weight:700; color:#94a3b8; padding:3px 0; }
.aoplc-day{ height:30px; border:none; background:transparent; color:#334155; border-radius:7px; cursor:pointer; font-size:12px; font-variant-numeric:tabular-nums; }
.aoplc-day:hover{ background:#eef1f7; color:var(--navy); }
.aoplc-day.is-today{ box-shadow:inset 0 0 0 1px #cdd7e8; font-weight:700; }
.aoplc-day.is-sel{ background:var(--navy) !important; color:#fff !important; font-weight:700; }
.aoplc-day.is-past{ color:#cbd5e1; }
/* Today and anything earlier cannot be chosen in the Log panel (2026-08-17): the date you leave
   behind is the NEXT contact, and that is never the call you are on. Drawn, not hidden — a
   calendar that appears to start tomorrow with no sign of today looks broken. cursor:default and
   no hover, so it does not invite a click that will be ignored. */
.aoplc-day.is-blocked{ color:#dbe1ea; cursor:default; }
.aoplc-day.is-blocked:hover{ background:transparent; color:#dbe1ea; }
.aoplc-day.is-blocked.is-today{ box-shadow:inset 0 0 0 1px #e6eaf1; color:#b9c3d1; }

/* ============================================================================
   QUOTATION CHOOSER (Ujwal 2026-07-19) — one "Create quotation" button opens a
   slide-over with three option cards (Classic / Rate Card / Dealer).
   ============================================================================ */
.aop-qopts{ display:flex; flex-direction:column; gap:11px; }
.aop-qopt{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:#fff;
	border:1.5px solid var(--border); border-radius:13px; padding:15px 16px; cursor:pointer; transition:all .14s; font-family:inherit; }
.aop-qopt:hover{ border-color:var(--navy); box-shadow:0 4px 14px rgba(35,55,93,.10); transform:translateY(-1px); }
.aop-qopt-ic{ flex:0 0 auto; width:46px; height:46px; border-radius:11px; background:var(--coral-soft);
	display:inline-flex; align-items:center; justify-content:center; }
.aop-qopt-ic svg{ stroke:var(--navy); }
.aop-qopt:hover .aop-qopt-ic{ background:var(--navy); }
.aop-qopt:hover .aop-qopt-ic svg{ stroke:#fff; }
.aop-qopt-txt{ flex:1; display:flex; flex-direction:column; gap:3px; }
.aop-qopt-t{ font-size:15px; font-weight:700; color:var(--navy); font-family:'Archivo',system-ui,sans-serif; }
.aop-qopt-d{ font-size:12px; color:var(--text2); line-height:1.4; }
.aop-qopt-arw{ flex:0 0 auto; color:#b0b8c4; display:inline-flex; }
.aop-qopt:hover .aop-qopt-arw{ color:var(--coral); }

/* ============================================================================
   FINANCE — payments slide-over + table payment cell (Ujwal 2026-07-19)
   ============================================================================ */
.aop-paysum{ display:flex; border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:18px; background:#fff; }
.aop-paysum .pc{ flex:1; padding:12px 10px; text-align:center; }
.aop-paysum .pc+.pc{ border-left:1px solid var(--border); }
.aop-paysum .lbl{ display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text2); }
.aop-paysum .num{ display:block; font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:3px; font-family:'Archivo',system-ui,sans-serif; }
.aop-paysum .num.total{ color:var(--navy); } .aop-paysum .num.recv{ color:#2f7d5c; }
.aop-paysum .num.bal{ color:#c0392b; } .aop-paysum .num.bal.paid{ color:#2f7d5c; }
.aop-payform{ display:flex; flex-direction:column; gap:8px; }
.aop-payrow{ position:relative; border:1px solid var(--border); border-radius:9px; padding:9px 34px 9px 12px; margin-bottom:7px; background:#fff; }
.aop-payrow .pr-main{ display:flex; align-items:baseline; gap:8px; }
.aop-payrow .pr-amt{ font-size:14px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; }
.aop-payrow .pr-mode{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#2f7d5c; background:#e4efe9; padding:1px 7px; border-radius:5px; }
.aop-payrow .pr-meta{ font-size:11px; color:var(--text2); margin-top:3px; }
.aop-payrow .pr-del{ position:absolute; top:8px; right:9px; border:none; background:transparent; color:#c0c6d0; font-size:18px; line-height:1; cursor:pointer; }
.aop-payrow .pr-del:hover{ color:#c0392b; }
/* payment cell on the lead/order tables */
.aop-paycell{ font-variant-numeric:tabular-nums; line-height:1.5; }
.aop-paycell .pc-bal{ font-weight:700; }
.aop-paycell .pc-bal.is-due{ color:#c0392b; } .aop-paycell .pc-bal.is-paid{ color:#2f7d5c; }
.aop-paycell .pc-recv{ font-size:11.5px; color:#2f7d5c; }
.aop-paycell .pc-sub{ font-size:11px; color:var(--text2); }
.aop-paybtn svg{ stroke:#2f7d5c; }

/* Reverse-conversion action (Orders page, site-admin only). Amber, not red: it UNDOES a
   booking rather than destroying anything, and red is already the delete button two slots
   along. Until 2026-08-06 this button had the class but NO rule and rendered a bare text
   character among eight SVG siblings, so it was effectively invisible (Ujwal). */
.aop-revbtn svg{ stroke:#b45309; }
.aop-revbtn{ border-color:#f0d9b5 !important; background:#fffaf2 !important; }
.aop-revbtn:hover{ border-color:#b45309 !important; background:#fdf1de !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   VIEW AS — header user switcher + viewing-as banner  (2026-07-20)
   The header chip stopped being a Sign Out link (Log Out lives in the sidebar)
   and became the switcher. Brand law applied: navy carries authority, coral is
   EARNED (it marks the one abnormal state — you are inside someone else's
   portal), strict grid, no decoration. Same coral-soft (#fdeeec) treatment as
   the site's trust band, so the admin reads as one brand with the front.
   ═══════════════════════════════════════════════════════════════════════════ */

.aop-uwrap{ position:relative; }
.aop-userchip.is-static{ cursor:default; }
button.aop-userchip{ font-family:inherit; }
.aop-uchev{ width:0; height:0; margin-left:6px; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--text3); transition:transform .15s; flex-shrink:0; }
.aop-userchip.is-open .aop-uchev{ transform:rotate(180deg); }
.aop-userchip.is-open{ border-color:var(--navy-h) !important; box-shadow:0 2px 8px rgba(35,55,93,.12); }

/* ---- the switch panel ---- */
.aop-uspanel{ display:none; position:absolute; top:calc(100% + 8px); right:0; width:330px; background:#fff;
  border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 32px rgba(27,36,54,.14); z-index:1200;
  overflow:hidden; text-align:left; }
.aop-uspanel.is-open{ display:block; }
.aop-usp-head{ padding:12px 14px 10px; border-bottom:1px solid var(--borderL); background:var(--bg); }
.aop-usp-title{ display:block; font-family:'Archivo',sans-serif; font-size:12.5px; font-weight:700; color:var(--navy); letter-spacing:-0.01em; }
.aop-usp-note{ display:block; font-size:10.5px; color:var(--text2); margin-top:3px; line-height:1.35; }
.aop-usp-searchwrap{ padding:9px 10px 6px; }
.aop-usp-search{ width:100%; font-size:12.5px !important; padding:7px 11px !important; border-radius:8px !important; }
.aop-usp-list{ max-height:330px; overflow-y:auto; padding:0 6px 6px; margin:0; }
.aop-usp-grp{ display:flex; align-items:center; gap:6px; padding:9px 8px 5px; font-size:9.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--text3); }
.aop-usp-cnt{ font-size:9px; font-weight:700; color:var(--text3); background:var(--borderL); border-radius:20px; padding:1px 6px; }
.aop-usp-row{ display:flex; align-items:center; gap:9px; width:100%; padding:7px 8px; background:none; border:0;
  border-radius:8px; cursor:pointer; text-align:left; font-family:inherit; transition:background .12s; }
.aop-usp-row:hover{ background:var(--bg); }
.aop-usp-av{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; flex-shrink:0; }
.aop-usp-who{ display:flex; flex-direction:column; line-height:1.2; min-width:0; flex:1; }
.aop-usp-nm{ font-size:12.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aop-usp-rl{ font-size:10px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aop-usp-go{ font-size:10.5px; font-weight:700; color:var(--coral); opacity:0; transition:opacity .12s; flex-shrink:0; }
.aop-usp-row:hover .aop-usp-go{ opacity:1; }
.aop-usp-empty,.aop-usp-noresult{ padding:14px 10px; font-size:11.5px; color:var(--text3); text-align:center; }
.aop-usp-noresult{ display:none; }
.aop-usp-foot{ padding:8px 14px; border-top:1px solid var(--borderL); background:var(--bg);
  font-size:10px; color:var(--text3); line-height:1.35; }

/* ---- viewing-as banner (inside the fixed header, centre zone) ---- */
.aop-vwbar{ display:flex; align-items:center; gap:10px; margin-left:20px; padding:5px 6px 5px 12px;
  background:var(--coral-soft); border:1px solid #f6c9c3; border-radius:8px; }
.aop-vwdot{ width:7px; height:7px; border-radius:50%; background:var(--coral); flex-shrink:0;
  box-shadow:0 0 0 3px rgba(237,110,99,.18); }
.aop-vwtxt{ font-size:11.5px; color:#8f3a32 !important; white-space:nowrap; }
.aop-vwtxt b{ color:#7a2f28 !important; font-weight:700; }
.aop-vwsub{ color:#a86159 !important; }
.aop-vwform{ margin:0; }
.aop-vwback{ display:inline-flex; align-items:center; gap:5px; background:var(--navy); color:#fff !important;
  border:0; border-radius:6px; padding:5px 11px; font-family:inherit; font-size:11px; font-weight:600;
  cursor:pointer; white-space:nowrap; transition:background .15s; }
.aop-vwback:hover{ background:var(--navy-h); }
.aop-vwback svg{ stroke:#fff; }
/* the chip itself turns coral while borrowed, so the state is unmistakable at a glance */
.aop-uwrap.is-viewas .aop-userchip{ border-color:#f0b3ab !important; background:var(--coral-soft); }
.aop-uwrap.is-viewas .aop-avatar{ background:var(--coral); }

@media (max-width:1200px){ .aop-vwsub{ display:none; } }

/* ---- View As: hopping straight between portals (2026-07-20, Ujwal's sales-meeting use case) ----
   The switcher stays available WHILE inside someone, so he goes person-by-person without
   returning first. "Back to my own account" is pinned at the top of the same panel, so the exit
   is never one step further away than the next hop. */
.aop-usp-home{ margin:0; padding:0 6px; border-bottom:1px solid var(--borderL); padding-bottom:6px; }
.aop-usp-row.is-home{ background:#f4f6fa; }
.aop-usp-row.is-home:hover{ background:#e8edf6; }
.aop-usp-row.is-home .aop-usp-nm{ color:var(--navy); font-weight:700; }
.aop-usp-row.is-home .aop-usp-go{ color:var(--navy); opacity:1; }
.aop-usp-row.is-here{ background:var(--coral-soft); cursor:default; }
.aop-usp-row.is-here .aop-usp-go{ opacity:1; color:#a86159; font-weight:600; }
.aop-usp-row.is-here .aop-usp-nm{ color:#7a2f28; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   BOX BOUNDARIES — bold coloured top edge, thin same-colour edge on the other three sides.
   Ujwal, 2026-08-09: "on each and every page, wherever there is a box — a search box or a
   table box, any table or any box — put the similar different-coloured border, top side
   bold, other three sides thin, with the colour."

   WHY ROLE AND NOT POSITION. Cycling colours by nth-child would give the same box a
   different colour on different pages, which teaches nothing. Colour is assigned by WHAT
   THE BOX IS, so the meaning is learned once and holds on all 100+ screens:

       navy    summary tiles   — the numbers at the top of a page
       teal    search / filter — the controls that narrow what is shown
       violet  data table      — the rows themselves
       amber   auxiliary panel — payment/geography style side summaries

   WHY THIS LIVES IN ONE FILE. There are 167 modules and 102 views. Editing them one by one
   would guarantee drift and would have to be redone for every new page; one rule set here
   covers every page that already uses the house classes, including pages not yet written.

   WHAT IS DELIBERATELY NOT TOUCHED — measured in Chrome on a real page before writing this,
   rather than guessed from the markup:
     · modals and slide-overs (.aop-modal, .aop-slideover, .aop-so-*, .aop-overlay, .aop-drow)
       — transient surfaces; a coloured frame there reads as an alert state, not a boundary.
     · dropdown panels (.aop-cols-menu, .aop-spop) — same reason.
     · segmented pill controls (.aop-qseg, .aop-tseg, .aop-viewtoggle) — these are controls,
       not boxes, and a 3px cap makes them look pressed.
     · page chrome (.page-content, .page-container, header, footer, sidebar).
   Every rule below carries !important because the rules it must beat — ".page-content .card
   { border:none !important }" and ".table { border:1px solid var(--border) !important }" —
   are themselves !important. Specificity is matched, not exceeded, so a page-local override
   still wins.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --bx-kpi:    #23375d;   /* navy   */
  --bx-filter: #0d9488;   /* teal   */
  --bx-table:  #6d28d9;   /* violet */
  --bx-aux:    #b45309;   /* amber  */
}

/* 1 · SUMMARY TILES — the KPI strip at the top of a list page */
.page-content .aop-kpi{
  border:1px solid var(--bx-kpi) !important;
  border-top:3px solid var(--bx-kpi) !important;
}

/* 2 · SEARCH / FILTER BOXES.
   `.card.border-0` is the shared filter bar's own wrapper (views/partials/aop_filter_bar.php
   line 24), so this one selector reaches the search box on every list page that includes the
   bar. .cl-fcard is the Accounts page's own filter card; .aop-georow is the Leads
   state/city row. */
.page-content .card.border-0,
.page-content .cl-fcard,
.page-content .aop-georow{
  border:1px solid var(--bx-filter) !important;
  border-top:3px solid var(--bx-filter) !important;
  background:#fff !important;
  border-radius:12px !important;
}

/* 3 · DATA TABLES — every list on every page */
.page-content table.table,
.page-content .table{
  border:1px solid var(--bx-table) !important;
  border-top:3px solid var(--bx-table) !important;
}
.page-content table.table thead th{ border-bottom:2px solid var(--bx-table) !important; }

/* 4 · AUXILIARY PANELS */
.page-content .aop-paysum{
  border:1px solid var(--bx-aux) !important;
  border-top:3px solid var(--bx-aux) !important;
}

/* 5 · THE EXCLUSIONS, stated as rules so a future selector cannot accidentally catch them */
.aop-modal .table, .aop-slideover .table, .aop-overlay .table{
  border:1px solid var(--border) !important;
  border-top:1px solid var(--border) !important;
}
.aop-modal .aop-kpi, .aop-slideover .aop-kpi{
  border:1px solid var(--border) !important;
  border-top:1px solid var(--border) !important;
}

/* ── BOX BOUNDARIES, part 2: the ones the first pass missed ──────────────────────────────
   Found by MEASURING the computed style in headless Chrome on each page, not by reading
   the markup — which is the only reason these turned up at all.

   (a) THE SHARED FILTER CARD ON LIST PAGES was still grey. The block above targets
       `.page-content .card.border-0` (0,3,0) and it genuinely matches the element — but
       line ~290 of this file says `form#frm_orders_list .card`, and an ID makes that
       (1,1,1), which beats any number of classes. Specificity is not "how many selectors",
       it is a tuple compared left to right; one id outranks three classes. Hence the
       id-carrying selector below.

   (b) PAGES WITH THEIR OWN BOX CLASSES. Quotations (.qr-*), Inbox (.cvx-*) and the
       Boardroom (.brd-*) were built before the house classes settled, so nothing generic
       reaches them. Mapped to the SAME four roles rather than given new colours.

   (c) WHAT IS PROTECTED. .brd-gcell carries GREEN / AMBER / RED that MEAN
       relationship-referral / direct-enquiry / cold-web-traffic (views/boardroom.php:141).
       Recolouring those would destroy information, so they are pinned to their own colours
       and explicitly excluded. A decorative scheme must never overwrite a semantic one. */

/* (a) the shared list-page filter card — must out-specify form#frm_orders_list .card */
form#frm_orders_list .card,
form#frm_orders_list .card.border-0{
  border:1px solid var(--bx-filter) !important;
  border-top:3px solid var(--bx-filter) !important;
}

/* (b) summary tiles on pages with their own class names */
.page-content .qr-kpi,
.page-content .brd-kpi{
  border:1px solid var(--bx-kpi) !important;
  border-top:3px solid var(--bx-kpi) !important;
}
/* (b) search / filter boxes with their own class names */
.page-content .qr-fcard{
  border:1px solid var(--bx-filter) !important;
  border-top:3px solid var(--bx-filter) !important;
}
/* (b) content panels that ARE the data on their page */
.page-content .cvx-list,
.page-content .cvx-chat,
.page-content .brd-card{
  border:1px solid var(--bx-table) !important;
  border-top:3px solid var(--bx-table) !important;
}

/* (c) SEMANTIC COLOUR IS NOT DECORATION — leave the Boardroom traffic lights alone */
.page-content .brd-gcell{ border-width:1px !important; }
.page-content .brd-gcell.brd-gA{ border-color:#bbf7d0 !important; }
.page-content .brd-gcell.brd-gB{ border-color:#fde68a !important; }
.page-content .brd-gcell.brd-gC{ border-color:#fecaca !important; }

/* ── BOX BOUNDARIES, part 3: .aop-card, the one that matters most ───────────────────────
   .aop-card is the house content card and it appears in 54 views — every add/edit form and
   most catalog list pages. It was missed by parts 1 and 2 because those targeted the boxes
   visible on the LIST pages I sampled first; the sweep across catalog pages is what found
   it. Sampling three pages and generalising would have shipped a half-done job.

   It takes the FILTER colour rather than a fifth hue: whether it is wrapping a search row
   (product/list) or an edit form (client_add), what it contains is controls a person types
   into — the same role, so the same colour.

   .os-panel is EXCLUDED and stays plain: it is `position:fixed` (the Order Status
   slide-over), i.e. a transient surface, and part 1 already established that those keep
   their neutral frame. It is named here because its class does not begin with .aop-slideover
   and so was not caught by the earlier exclusion. */
.page-content .aop-card{
  border:1px solid var(--bx-filter) !important;
  border-top:3px solid var(--bx-filter) !important;
}
.os-panel, .os-panel .os-head{
  border-top-width:0 !important;
}

/* ── BOX BOUNDARIES, part 4: the *-fcard family ─────────────────────────────────────────
   The sweep across all 30 pages turned up the same box under ten different class names —
   every catalog page names its filter form after itself: .sl-fcard (series), .tl-fcard
   (type), .st-fcard (sub-type), .mp-fcard (map), .ml-fcard (media), .pl-fcard (pages),
   .ss-fcard (site settings), .seo-fcard, .pc-fcard (post categories), alongside the
   .cl-fcard and .qr-fcard already handled by name.

   Listing ten selectors would leave the eleventh page grey the day someone adds it, so this
   matches on the SUFFIX instead. `[class*="-fcard"]` is deliberately loose: the convention
   is already universal in this codebase, and a page that adopts it inherits the border for
   free. Scoped to form elements inside .page-content so it cannot reach a modal.

   This is why the job was measured page by page rather than assumed from three samples —
   ten of these were invisible to the markup grep that found .card and .table. */
.page-content form[class*="-fcard"],
.page-content .aop-cat-filterbar{
  border:1px solid var(--bx-filter) !important;
  border-top:3px solid var(--bx-filter) !important;
}

/* ============================================================================
   NARROW SCREENS (added 2026-08-16 — Ujwal bought an iPad Air specifically to run this).
   Until now this stylesheet had NO media query at all: the sidebar was a hard 196px and
   .page-content-wrapper carried a matching hard margin-left, so on a phone the content was
   squeezed into ~180px and the app was effectively unusable below tablet width.

   The fix is deliberately CONSERVATIVE, because this file is loaded by every admin page:
   nothing changes at or above 820px, so every existing desktop layout is byte-identical.
   Below that the sidebar collapses to an ICON RAIL rather than sliding off-canvas — a rail
   needs no JavaScript, no toggle button in a shared header, and cannot leave a user stranded
   with the navigation hidden and no way to bring it back.
   ============================================================================ */
@media (max-width:820px){
    /* icon rail: 54px of navigation, the rest of the screen is content */
    .sidebar-container{ width:54px !important; }
    .aop-sidebar{ width:54px; }
    .page-content-wrapper{ margin-left:54px !important; }

    /* labels go, icons stay. title="" is not available here, so each item keeps its icon as
       the only affordance — which is why the icons were made distinct per feature. */
    .aop-sidebar .aop-item span{ display:none !important; }
    .aop-sidebar .aop-item{ justify-content:center; padding-left:0 !important; padding-right:0 !important; }
    .aop-sidebar .aop-navicon{ margin:0 !important; }

    /* group headers shrink to a hairline label so the rail does not become one long list */
    .aop-sidebar summary{ font-size:0 !important; padding:6px 0 !important; text-align:center; }
    .aop-sidebar summary::after{ content:'•'; font-size:11px; color:#8a94a6; }
    /* a collapsed group in a rail is a dead end — every group is open at this width */
    .aop-sidebar details > *:not(summary){ display:block !important; }

    /* the page's own padding was tuned for a wide viewport */
    .page-content{ padding-left:10px !important; padding-right:10px !important; }
}

@media (max-width:560px){
    /* on a phone the rail costs more than it gives: it becomes a top strip that scrolls */
    .sidebar-container{ position:static !important; width:100% !important; height:auto !important;
                        top:auto !important; bottom:auto !important; }
    .aop-sidebar{ width:100%; flex-direction:row; overflow-x:auto; gap:4px; padding:6px 8px; }
    .aop-sidebar details{ display:flex; flex-direction:row; gap:4px; }
    .aop-sidebar summary{ display:none !important; }
    .page-content-wrapper{ margin-left:0 !important; }
}


/* ============================================================================
   NOTIFICATIONS — ONE HOUSE STYLE FOR EVERY MESSAGE THE APP SHOWS (2026-08-17)

   Ujwal, with a screenshot of a flash message sitting across the middle of the Leads filters:
   "I am not having any problem with the content, I am having the problem with the design. It is too
   old. Audit the entire application, check how many times this kind of pop-up and how many types,
   and design them properly."

   AUDITED FIRST. What the app actually had:
     917  native alert()      — a browser dialog. Cannot be styled AT ALL, in any browser.
      99  native confirm()    — same, and see the note in aop_notify.php about why these stay.
     492  msg_success/err/info references — the flash message in the screenshot.
      30  bootstrap .modal('show') — real dialogs, out of scope here, they look fine.
       9  my own .fl-toast on the Desk pages — a fourth style I added, now folded into this one.

   WHAT WAS WRONG WITH THE FLASH MESSAGE specifically, since it is the one he saw:
     · class="alert alert-dismissable" — the BARE Bootstrap .alert class, which is the exact
       collision DESIGN_SYSTEM warns about; it brought Bootstrap's own margin and border with it.
     · 60 lines of inline style, repeated THREE times (success/error/info) with one word different.
     · background #007bff — raw Bootstrap blue. Not a colour in this app's palette.
     · width:42%; bottom:15%; margin-bottom:17% — percentage positioning, which is why it landed
       in the middle of the page on top of the filter row instead of out of the way.
     · z-index:999999999999.
     · id="msg_success_div" on all three, so the page had duplicate ids whenever two showed.
     · TWO competing fade-out timers in footer.php, 5000ms and 3000ms, both targeting .allAlertMsg.

   THE REPLACEMENT: top-right, stacked, out of the way of every filter row and table on the app;
   navy/green/red from the house palette; one definition; auto-dismiss with a progress bar so the
   time left is visible; dismissible; and it never covers the content it is reporting on.
   ============================================================================ */
.aop-toastwrap{
  position:fixed; top:64px; right:18px; z-index:99999;
  display:flex; flex-direction:column; gap:9px;
  width:min(380px, calc(100vw - 36px)); pointer-events:none;
}
.aop-toast{
  position:relative; overflow:hidden; pointer-events:auto;
  display:flex; align-items:flex-start; gap:10px;
  background:#fff; border:1px solid var(--border, #e6e8ee); border-left:4px solid #23375d;
  border-radius:11px; padding:11px 13px 12px;
  box-shadow:0 6px 20px rgba(35,55,93,.13), 0 1px 3px rgba(0,0,0,.05);
  font-size:13px; line-height:1.45; color:#1e293b;
  /* enters from the right, which is where it lives — a message that slides in from where it will
     sit reads as arriving; one that fades in place is easy to miss entirely */
  animation:aopToastIn .22s cubic-bezier(.16,1,.3,1);
}
@keyframes aopToastIn{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }
.aop-toast.is-out{ animation:aopToastOut .18s ease-in forwards; }
@keyframes aopToastOut{ to{ opacity:0; transform:translateX(18px); } }
.aop-toast-ico{ flex:0 0 auto; width:18px; height:18px; display:flex; align-items:center; justify-content:center; margin-top:1px; color:#23375d; }
.aop-toast-txt{ flex:1 1 auto; min-width:0; word-wrap:break-word; overflow-wrap:anywhere; white-space:pre-wrap; }
.aop-toast-x{
  flex:0 0 auto; border:0; background:transparent; color:#94a3b8; cursor:pointer;
  font-size:15px; line-height:1; padding:0 0 0 4px; margin:0;
}
.aop-toast-x:hover{ color:#23375d; }
/* time remaining, so a message that is about to vanish says so */
.aop-toast-bar{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:#23375d; opacity:.22; transform-origin:left center; }
.aop-toast.is-ok   { border-left-color:#166534; }
.aop-toast.is-ok    .aop-toast-ico{ color:#166534; }
.aop-toast.is-ok    .aop-toast-bar{ background:#166534; }
.aop-toast.is-err  { border-left-color:#b91c1c; }
.aop-toast.is-err   .aop-toast-ico{ color:#b91c1c; }
.aop-toast.is-err   .aop-toast-bar{ background:#b91c1c; }
.aop-toast.is-warn { border-left-color:#b45309; }
.aop-toast.is-warn  .aop-toast-ico{ color:#b45309; }
.aop-toast.is-warn  .aop-toast-bar{ background:#b45309; }
/* an error stays until it is read: an auto-dismissing failure message is a failure nobody saw */
.aop-toast.is-err .aop-toast-bar{ display:none; }

/* ---- the house CONFIRM dialog (aopConfirm) ---- */
.aop-dlg-ov{ position:fixed; inset:0; background:rgba(23,28,38,.42); z-index:99998; opacity:0; transition:opacity .15s; }
.aop-dlg-ov.open{ opacity:1; }
.aop-dlg{
  position:fixed; z-index:99999; top:50%; left:50%; transform:translate(-50%,-48%);
  width:min(440px, calc(100vw - 32px)); background:#fff; border-radius:14px;
  box-shadow:0 18px 50px rgba(15,23,42,.25); padding:20px 22px 17px;
  opacity:0; transition:opacity .15s, transform .15s;
}
.aop-dlg.open{ opacity:1; transform:translate(-50%,-50%); }
.aop-dlg-t{ font-size:15px; font-weight:800; color:#23375d; margin:0 0 7px; display:flex; align-items:center; gap:9px; }
.aop-dlg-b{ font-size:13.5px; color:#475569; line-height:1.55; white-space:pre-wrap; margin:0 0 16px; }
.aop-dlg-f{ display:flex; justify-content:flex-end; gap:8px; }
.aop-dlg-btn{ border:1px solid #e6e8ee; background:#fff; color:#475569; border-radius:8px; padding:7px 15px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.aop-dlg-btn:hover{ background:#f1f5f9; color:#23375d; }
.aop-dlg-btn.is-go{ background:#23375d; border-color:#23375d; color:#fff; }
.aop-dlg-btn.is-go:hover{ background:#1b2b49; }
.aop-dlg-btn.is-danger{ background:#b91c1c; border-color:#b91c1c; color:#fff; }
.aop-dlg-btn.is-danger:hover{ background:#991b1b; }
@media (max-width:760px){
  .aop-toastwrap{ top:auto; bottom:44px; right:10px; left:10px; width:auto; }
}

/* ============================================================================
   AMOUNT AS THE DOOR TO THE ESTIMATE VERSIONS  (2026-08-18, Ujwal)
   "Give the effect of the Estimate-versions button to the amount itself. Then the
    button becomes irrelevant and repeated, so remove it from the action area."
   Used on Leads, Orders and Archive. The whole amount cell is the hit area, so
   there is nothing to aim at.

   EVERY PROPERTY HERE IS FIGHTING A GLOBAL, which is why they carry !important:
     .table tbody td a{ font-size:12px }        would shrink the figure
     a:hover,a:focus{ color:#375b8a }  (style.css) would turn it blue on hover
     bootstrap-reboot's a{}                     supplies its own colour + underline
   inherit is deliberate rather than a fixed colour: on Leads this wraps BOTH the
   dark X line and the grey G line, and each must keep its own weight and shade.
   (See the shorthand/!important lesson in CLAUDE.md, 2026-08-10.)
   ========================================================================== */
.page-content a.aop-amtlink{
    color:inherit !important; font-size:inherit !important; font-weight:inherit !important;
    text-decoration:none !important; cursor:pointer; display:block;
    border-radius:5px; margin:-2px -4px; padding:2px 4px;
    transition:background .12s ease;
}
.page-content a.aop-amtlink:hover,
.page-content a.aop-amtlink:focus{ color:inherit !important; background:#eef3ff; outline:none; }
/* the underline goes on the FIGURE, not the block, so the hit area can be padded
   without drawing a rule across empty space */
.page-content a.aop-amtlink:hover .aop-amt-x,
.page-content a.aop-amtlink:hover .aop-val,
.page-content a.aop-amtlink:hover .aop-amtnum{
    text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
}
.page-content a.aop-amtlink:focus-visible{ box-shadow:0 0 0 2px #b9ccf5; }

/* ============================================================================
   ESTIMATE VERSIONS — the change between one version and the next (2026-08-18)
   The page's reason to exist, and it had no column for it until now.
   COLOUR IS DELIBERATELY NOT red=bad / green=good. On a quotation a fall is
   usually a discount given and a rise is usually scope added, and neither is
   inherently good or bad — so these read as DIRECTION, not as judgement:
   slate-blue down, amber up, both calm enough to sit in a table without
   shouting. Reserving red for genuine trouble keeps red meaningful elsewhere.
   ========================================================================== */
.mye-delta{
    display:inline-block; font-size:11.5px; font-weight:700; white-space:nowrap;
    padding:2px 7px; border-radius:999px; font-variant-numeric:tabular-nums;
}
.mye-delta.is-down{ color:#1d4ed8; background:#eaf0fe; }   /* price came down */
.mye-delta.is-up{   color:#a8701a; background:#fdf3e2; }   /* price went up   */
.mye-delta-pct{ font-weight:600; opacity:.75; font-size:10.5px; }
.mye-flat{ font-size:11px; color:#94a3b8; font-style:italic; }