/*
 * custom.css — modern admin + premium login skin for the CRM fleet.
 * Update-safe: Perfex auto-loads this file LAST (after style.css on admin, and on
 * auth pages), referenced raw — so it overrides without touching any core file and
 * needs no .min twin. Identical across all 7 CRMs; each shows its own logo.
 *
 * SCOPE (never leaks):
 *   admin  -> body.app.admin
 *   login  -> body.login_admin, body.authentication
 *
 * Tune the whole look from --accent below.
 */

/* =====================================================================
   ADMIN — design tokens
   ===================================================================== */
body.app.admin{
  --accent:#4f46e5; --accent-hover:#4338ca;
  --accent-weak:rgba(79,70,229,.10); --accent-ring:rgba(79,70,229,.28);
  --app-bg:#f5f7fa; --surface:#fff; --surface-2:#f8fafc; --border:#e6e9ef;
  --text:#1f2733; --heading:#111827; --muted:#6b7280;
  --success:#16a34a; --success-weak:rgba(22,163,74,.12);
  --warning:#d97706; --warning-weak:rgba(217,119,6,.14);
  --danger:#dc2626;  --danger-weak:rgba(220,38,38,.12);
  --topbar-bg:#16202e; --sidebar-bg:#1b2738; --sidebar-text:rgba(255,255,255,.78);
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 4px 12px rgba(16,24,40,.08);
  --shadow-lg:0 12px 28px rgba(16,24,40,.14);
  background:var(--app-bg); color:var(--text);
}
body.app.admin h1,body.app.admin h2,body.app.admin h3,body.app.admin h4,body.app.admin h5{color:var(--heading);}
body.app.admin a{color:var(--accent);}
body.app.admin a:hover,body.app.admin a:focus{color:var(--accent-hover);}
body.app.admin .text-muted{color:var(--muted);}
body.app.admin .text-primary,body.app.admin .text-info{color:var(--accent);}

/* ---- buttons + brand-color override (both baked #28b8da and #03a9f4) ---- */
body.app.admin .btn{border-radius:var(--r-sm);font-weight:500;transition:background-color .15s,box-shadow .15s,border-color .15s;}
body.app.admin .btn-info,body.app.admin .btn-primary{background-color:var(--accent);border-color:var(--accent);color:#fff;}
body.app.admin .btn-info:hover,body.app.admin .btn-info:focus,body.app.admin .btn-info:active,body.app.admin .btn-info.active,
body.app.admin .btn-primary:hover,body.app.admin .btn-primary:focus,body.app.admin .btn-primary:active,body.app.admin .btn-primary.active,
body.app.admin .open>.dropdown-toggle.btn-info{background-color:var(--accent-hover);border-color:var(--accent-hover);color:#fff;}
body.app.admin .btn-info:focus,body.app.admin .btn-primary:focus{box-shadow:0 0 0 3px var(--accent-ring);}
body.app.admin .btn-default{background:var(--surface);border:1px solid var(--border);color:var(--text);}
body.app.admin .btn-default:hover,body.app.admin .btn-default:focus{background:var(--surface-2);border-color:var(--border);color:var(--text);}
/* Coloured buttons are often <a> elements, and `body.app.admin a{color:accent}` outranks
   Bootstrap's `.btn-success{color:#fff}` — that is what made CONVERT TO CUSTOMER render
   blue-on-green. Force white text on every solid button variant, link or not. */
body.app.admin a.btn-success,body.app.admin a.btn-info,body.app.admin a.btn-primary,
body.app.admin a.btn-danger,body.app.admin a.btn-warning,
body.app.admin a.btn-success:hover,body.app.admin a.btn-info:hover,body.app.admin a.btn-primary:hover,
body.app.admin a.btn-danger:hover,body.app.admin a.btn-warning:hover,
body.app.admin a.btn-success:focus,body.app.admin a.btn-info:focus,body.app.admin a.btn-primary:focus{color:#fff;}
body.app.admin a.btn-default,body.app.admin a.btn-default:hover{color:var(--text);}
body.app.admin .btn-success{background-color:var(--success);border-color:var(--success);}
body.app.admin .btn-danger{background-color:var(--danger);border-color:var(--danger);}
body.app.admin .btn-warning{background-color:var(--warning);border-color:var(--warning);color:#fff;}
body.app.admin .progress-bar,body.app.admin .progress-bar-info{background-color:var(--accent);}
body.app.admin .label-primary{color:#fff;background:var(--accent);}

/* ---- topbar ---- */
body.app.admin #header{background:var(--topbar-bg) !important;height:60px;box-shadow:var(--shadow-sm);border:0;}
body.app.admin #logo span{color:#fff;}
body.app.admin #header .nav>li>a{color:rgba(255,255,255,.82);}
body.app.admin #header .nav>li>a:hover,body.app.admin #header .nav>li>a:focus{color:#fff;background:rgba(255,255,255,.08);}

/* ---- sidebar ---- */
body.app.admin{position:relative;} /* make absolute #menu (bottom:0) fill full scroll height -> no white gap below */
body.app.admin #menu,body.app.admin #menu.sidebar,body.app.admin #side-menu{background:var(--sidebar-bg) !important;}
/* faux-column: keep the sidebar strip dark full-height even when the page scrolls past the menu */
@media (min-width:769px){body.app.admin:not(.hide-sidebar){background-image:linear-gradient(to right,var(--sidebar-bg) 210px,transparent 210px);background-repeat:no-repeat;background-attachment:fixed;}}
body.app.admin #side-menu>li>a{color:var(--sidebar-text);text-transform:none;letter-spacing:.01em;font-size:13px;}
body.app.admin #side-menu>li>a:hover,body.app.admin #side-menu>li>a:focus{background:rgba(255,255,255,.06);color:#fff;}
body.app.admin #side-menu>li>a i{color:rgba(255,255,255,.55);}
body.app.admin #side-menu li.active{background:transparent !important;} /* kill baked #fff -> no white corners */
body.app.admin #side-menu>li.active>a{background:var(--accent);color:#fff;border-radius:var(--r-sm);}
body.app.admin #side-menu>li.active>a i{color:#fff;}
/* second-level submenu: dark surface + visible text (baked sets li bg #fff) */
body.app.admin #side-menu .nav-second-level{background:rgba(0,0,0,.22);}
body.app.admin #side-menu li .nav-second-level li{background:transparent !important;}
body.app.admin #side-menu li .nav-second-level li a{color:rgba(255,255,255,.72);}
body.app.admin #side-menu li .nav-second-level li a:hover{background:rgba(255,255,255,.06);color:#fff;}
body.app.admin #side-menu li .nav-second-level li.active a{background-color:var(--accent) !important;color:#fff !important;}
/* setup / customizer slide-in panel (#setup-menu) — match the dark sidebar */
body.app.admin #setup-menu-wrapper,body.app.admin #setup-menu,body.app.admin #setup-menu>li{background-color:var(--sidebar-bg) !important;}
body.app.admin #setup-menu>li>a{color:var(--sidebar-text);text-transform:none;}
body.app.admin #setup-menu li:first-child{color:#fff;border-color:rgba(255,255,255,.12);}
body.app.admin #setup-menu .customizer-heading,body.app.admin #setup-menu .close-customizer{color:#fff;}
body.app.admin #setup-menu li>a:hover,body.app.admin #setup-menu li>a:active,body.app.admin #setup-menu li>a:focus,body.app.admin #setup-menu li>a.active{background-color:rgba(255,255,255,.06) !important;color:#fff !important;}
body.app.admin #setup-menu li.active>a{background-color:var(--accent) !important;color:#fff !important;border-radius:var(--r-sm);}
body.app.admin #setup-menu .nav-second-level{background:rgba(0,0,0,.22);}
/* Every nested li, not just the first. style.css carries
       #side-menu li.active, li .nav-second-level li { background: #fff }
   whose SECOND selector is unscoped — `li .nav-second-level li` matches any nested
   submenu anywhere in the app, so it painted the setup menu's children white. The main
   menu already had an override (#side-menu li .nav-second-level li); the setup menu was
   missing its counterpart, which is why Payment Sources rendered as a white block under
   Payment Modes. Measured in a harness: without this rule the child computes
   rgb(255,255,255), with it rgba(0,0,0,0). */
body.app.admin #setup-menu li .nav-second-level li{background:transparent !important;}
body.app.admin #setup-menu .nav-second-level li:first-child{background:transparent !important;color:var(--sidebar-text) !important;}
body.app.admin #setup-menu li .nav-second-level li .sub-menu-text{color:inherit;}
body.app.admin #setup-menu li .nav-second-level li a{color:rgba(255,255,255,.7);}
body.app.admin #setup-menu li .nav-second-level li a:hover,body.app.admin #setup-menu li .nav-second-level li a.active{background-color:rgba(255,255,255,.06) !important;color:#fff !important;}
body.app.admin #setup-menu li .nav-second-level li.active a{background-color:var(--accent) !important;color:#fff !important;}

/* ---- cards (.panel_s) ---- */
body.app.admin .panel_s{box-shadow:var(--shadow-sm);border-radius:var(--r-md);border:0;background:transparent;margin-bottom:20px;}
body.app.admin .panel_s .panel-body{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);}
body.app.admin .panel_s>.panel-heading{background:var(--surface-2);border-color:var(--border);border-radius:var(--r-md) var(--r-md) 0 0;color:var(--heading);}
body.app.admin .no-shadow{box-shadow:none;}
body.app.admin hr.hr-panel-heading{border-color:var(--border);}

/* ---- forms ---- */
body.app.admin .form-control{border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:none;color:var(--text);transition:border-color .15s,box-shadow .15s;}
body.app.admin .form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak);}
body.app.admin .control-label,body.app.admin label{color:#374151;}
body.app.admin .bootstrap-select>.dropdown-toggle,body.app.admin .input-group .form-control{border-radius:var(--r-sm);}
body.app.admin .bootstrap-select.btn-group .dropdown-toggle{border:1px solid var(--border);}
body.app.admin .input-group-addon{background:var(--surface-2);border-color:var(--border);color:var(--muted);}
body.app.admin .checkbox-primary input[type=checkbox]:checked+label::before,body.app.admin .radio-primary input[type=radio]:checked+label::before{background-color:var(--accent);border-color:var(--accent);}
body.app.admin .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner:before{background-color:var(--success);}
body.app.admin .onoffswitch-checkbox:checked+.onoffswitch-label{border-color:var(--success);}

/* ---- tables + DataTables chrome ---- */
body.app.admin .table>thead>tr>th{background:var(--surface-2);color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.03em;font-weight:600;border-bottom:1px solid var(--border);}
body.app.admin .table>tbody>tr>td{border-top:1px solid var(--border);vertical-align:middle;color:var(--text);}
body.app.admin .table.dataTable tbody tr:hover>td,body.app.admin .table-hover>tbody>tr:hover>td{background:var(--surface-2);}
body.app.admin .dataTables_wrapper .dataTables_filter input,body.app.admin .dataTables_wrapper .dataTables_length select{border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 10px;}
body.app.admin .dataTables_wrapper .dataTables_filter input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak);outline:0;}
body.app.admin .dataTables_wrapper .dataTables_paginate .paginate_button{border-radius:var(--r-sm);border:1px solid transparent;color:var(--text);}
body.app.admin .dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:var(--accent-weak);border-color:var(--accent);color:var(--accent) !important;}
body.app.admin .dataTables_wrapper .dataTables_paginate .paginate_button.current,body.app.admin .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{background:var(--accent);border-color:var(--accent);color:#fff !important;}
body.app.admin .dataTables_info,body.app.admin .dataTables_length label,body.app.admin .dataTables_filter label{color:var(--muted);}

/* ---- modals ---- */
body.app.admin .modal-content{border:0;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);}
body.app.admin .modal-header{background:var(--surface);color:var(--heading);border-bottom:1px solid var(--border);border-radius:var(--r-lg) var(--r-lg) 0 0;}
body.app.admin .modal-header .modal-title{color:var(--heading);font-weight:600;}
body.app.admin .modal-header .close{color:var(--muted);opacity:.75;text-shadow:none;}
body.app.admin .modal-footer{border-top:1px solid var(--border);}

/* ---- tabs ---- */
body.app.admin .nav-tabs{border-bottom:1px solid var(--border);}
body.app.admin .nav-tabs>li>a{color:var(--muted);border:0;border-bottom:2px solid transparent;border-radius:0;margin-right:2px;}
body.app.admin .nav-tabs>li>a:hover{color:var(--accent);background:transparent;border-color:transparent;border-bottom-color:var(--accent-weak);}
body.app.admin .nav-tabs>li.active>a,body.app.admin .nav-tabs>li.active>a:hover,body.app.admin .nav-tabs>li.active>a:focus{color:var(--accent);background:transparent;border:0;border-bottom:2px solid var(--accent);}

/* ---- labels / pills ---- */
body.app.admin .label{border-radius:var(--r-pill);font-weight:500;padding:.3em .7em;font-size:85%;}

/* ---- summary tiles / stat cards ---- */
body.app.admin .border-right{border-color:var(--border) !important;}
body.app.admin .leads-overview h3.bold,body.app.admin .row .border-right h3{color:var(--heading);font-weight:700;}
body.app.admin .total-column .panel_s .panel-body{border-left:3px solid var(--accent);border-radius:var(--r-md);padding:18px 20px;}
body.app.admin .total-column h3,body.app.admin .total-column h3._total{font-size:26px;font-weight:700;color:var(--heading);margin:0 0 4px;}
body.app.admin .total-column span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em;}
/* reusable stat card (installments summary etc.) */
body.app.admin .inst-stats{display:flex;gap:14px;flex-wrap:wrap;margin:6px 0 18px;}
body.app.admin .stat-card{flex:1 1 190px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--shadow-sm);}
body.app.admin .stat-card .stat-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em;display:block;margin-bottom:5px;}
body.app.admin .stat-card .stat-value{color:var(--heading);font-size:20px;font-weight:700;}
body.app.admin .stat-card.is-paid{border-left:3px solid var(--success);}

/* ---- leads: toolbar / filters / kanban ---- */
body.app.admin ._buttons .btn{margin-bottom:4px;}
body.app.admin .leads-filter-column{margin-bottom:8px;}
body.app.admin .kan-ban-col-wrapper .panel_s{border-radius:var(--r-md);box-shadow:var(--shadow-sm);overflow:hidden;}
body.app.admin .kan-ban-col-wrapper .panel-heading-bg{border-radius:var(--r-md) var(--r-md) 0 0;font-weight:600;}
body.app.admin li.lead-kan-ban .panel-body.lead-body{border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-sm);background:var(--surface);transition:box-shadow .15s;}
body.app.admin li.lead-kan-ban .panel-body.lead-body:hover{box-shadow:var(--shadow-md);}
body.app.admin .kanban-tags .label{font-size:10px;}
/* leads: overdue "next reminder" -> soft pill instead of harsh red block */
body.app.admin .is-date.reminder-overdue{background:var(--danger-weak);color:var(--danger);border-radius:var(--r-pill);padding:2px 9px;font-weight:600;display:inline-block;white-space:nowrap;}
/* leads table cells: phone / source / merged activity dates / clamped notes
   Tighter gutters — Perfex's default cell padding plus fixed % widths pushed the table
   far off-screen. */
body.app.admin #table-leads>tbody>tr>td{vertical-align:top;padding:10px 8px;}
body.app.admin #table-leads>thead>tr>th{padding:10px 8px;}
body.app.admin #table-leads>tbody>tr>td:first-child,body.app.admin #table-leads>thead>tr>th:first-child{padding-left:12px;}
body.app.admin #table-leads .lead-phone,body.app.admin #table-leads .lead-source,
body.app.admin #table-leads td:nth-child(3) a{white-space:nowrap;} /* stop NAME wrapping to 2 lines */
body.app.admin .lead-phone i{color:var(--success);margin-right:4px;font-size:11px;}
body.app.admin .lead-source i{color:var(--accent);margin-right:4px;font-size:11px;}
body.app.admin .lead-activity{display:flex;flex-direction:column;gap:2px;}
body.app.admin .lead-activity .la-item{white-space:nowrap;font-size:12px;color:var(--text);}
body.app.admin .lead-activity .la-item i{width:13px;margin-right:4px;font-size:11px;}
/* colour-coded icons — deliberately distinct hues (teal vs green read as the same) */
body.app.admin .la-contact i{color:#2563eb;} /* last contact  = blue  */
body.app.admin .la-created i{color:#16a34a;} /* created       = green */
body.app.admin .la-enquiry i{color:#d97706;} /* enquiry conv. = amber */
body.app.admin .lead-note-date i{color:var(--muted);}

/* --- wide table: an ALWAYS-VISIBLE horizontal scrollbar ---------------------------
   Bootstrap 3 only sets overflow-x on .table-responsive below 767px, so on a laptop the
   table simply overflowed with no scrollbar at all. Force the scroller, and use
   `scroll` (not `auto`) so the bar is always on screen and grabbable with a mouse —
   two-finger trackpad scrolling is not something every user can do.
   NOTE: no frozen/sticky columns — removed at the client's request. */
body.app.admin .table-responsive{overflow-x:scroll !important;-webkit-overflow-scrolling:touch;}
body.app.admin .table-responsive::-webkit-scrollbar{height:16px;}
body.app.admin .table-responsive::-webkit-scrollbar-track{background:#eef1f6;border-radius:var(--r-pill);}
body.app.admin .table-responsive::-webkit-scrollbar-thumb{background:#98a2b3;border-radius:var(--r-pill);border:3px solid #eef1f6;}
body.app.admin .table-responsive::-webkit-scrollbar-thumb:hover{background:var(--accent);}
body.app.admin .table-responsive{scrollbar-width:auto;scrollbar-color:#98a2b3 #eef1f6;}
/* mirrored scrollbar ABOVE the table so it is obvious there is more to the right */
body.app.admin .dt-top-scroll{overflow-x:scroll;overflow-y:hidden;height:16px;margin-bottom:4px;}
body.app.admin .dt-top-scroll>div{height:1px;}
body.app.admin .dt-top-scroll::-webkit-scrollbar{height:16px;}
body.app.admin .dt-top-scroll::-webkit-scrollbar-track{background:#eef1f6;border-radius:var(--r-pill);}
body.app.admin .dt-top-scroll::-webkit-scrollbar-thumb{background:#98a2b3;border-radius:var(--r-pill);border:3px solid #eef1f6;}
body.app.admin .dt-top-scroll::-webkit-scrollbar-thumb:hover{background:var(--accent);}
body.app.admin .dt-top-scroll{scrollbar-width:auto;scrollbar-color:#98a2b3 #eef1f6;}
body.app.admin .lead-note-cell{min-width:190px;max-width:320px;}
body.app.admin .lead-note-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;}
body.app.admin .lead-note-cell.expanded .lead-note-text{-webkit-line-clamp:unset;overflow:visible;}
body.app.admin .lead-note-date{display:block;color:var(--muted);font-size:11px;margin-top:3px;}
body.app.admin .lead-note-date i{margin-right:3px;}
body.app.admin .lead-note-toggle{font-size:11px;font-weight:500;}
body.app.admin .lead-note-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px;}
body.app.admin .lead-note-meta .lead-note-date{margin-top:0;}
body.app.admin .lead-note-play{font-size:11px;font-weight:600;color:var(--success);white-space:nowrap;}
body.app.admin .lead-note-play:hover{color:#15803d;}
body.app.admin .lead-note-play i{margin-right:3px;font-size:13px;vertical-align:-1px;}

/* WhatsApp template + send, grouped as one control (no layout jump) */
/* Lead toolbar — ONE flex row (markup restructured in leads/profile.php: the old
   pull-left/pull-right floats were removed). Every control is the same height. */
body.app.admin .lead-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:100%;margin-bottom:15px;}
body.app.admin .lead-toolbar-right{margin-left:auto;display:flex;align-items:center;gap:6px;}
body.app.admin .lead-toolbar .lead-actions-left{display:flex;align-items:center;gap:12px;float:none;}
body.app.admin .lead-toolbar .lead-actions-left>a{float:none;margin:0;}
body.app.admin .lead-toolbar .btn{height:34px;display:inline-flex;align-items:center;padding-top:0;padding-bottom:0;margin:0;float:none;}
body.app.admin .lead-toolbar .lead-edit{margin:0;}
body.app.admin .lead-quick-actions{display:inline-flex !important;align-items:center !important;gap:6px;}
body.app.admin .subutton{margin-left:0 !important;}
body.app.admin .wa-group{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;}
body.app.admin .wa-group>.bootstrap-select{margin:0 !important;float:none !important;vertical-align:middle;}
body.app.admin .wa-group .bootstrap-select.wa-template>.dropdown-toggle{height:34px;line-height:1;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;margin:0;}
/* bootstrap-select v1.13 forces height:100% on .filter-option, so the label rendered at
   the TOP of the button instead of centred — centre its inner text. (Verified: text
   mid-point now matches the neighbouring buttons to within 0.5px.) */
body.app.admin .wa-group .bootstrap-select>.dropdown-toggle .filter-option{display:flex;align-items:center;}
body.app.admin .wa-group .bootstrap-select>.dropdown-toggle .filter-option-inner{width:100%;}
body.app.admin .wa-send{height:34px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);border:1px solid transparent;margin:0;}
body.app.admin .wa-send svg{fill:#fff;width:17px;height:17px;margin:0;}
body.app.admin .wa-send .Icon-Wrapper--clickable{display:inline-flex;align-items:center;}
/* disabled = quiet outline (not a grey blob); enabled = WhatsApp green */
body.app.admin .wa-send.is-disabled{background:var(--surface) !important;border-color:var(--border) !important;pointer-events:none;}
body.app.admin .wa-send.is-disabled svg{fill:#c2c8d2;}

/* installment page: payment completion bar + status pills */
body.app.admin .stat-card.is-due{border-left:3px solid var(--warning);}
body.app.admin .inst-paid-text{color:var(--success);}
body.app.admin .inst-due-text{color:var(--warning);}
body.app.admin .inst-progress{width:100%;margin:0 0 20px;}
body.app.admin .inst-progress-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
body.app.admin .inst-progress-head span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em;}
body.app.admin .inst-progress-head strong{color:var(--heading);font-size:14px;}
body.app.admin .inst-progress-bar{height:8px;background:var(--border);border-radius:var(--r-pill);overflow:hidden;}
body.app.admin .inst-progress-bar>span{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill);transition:width .4s ease;}
body.app.admin .inst-progress.is-complete .inst-progress-bar>span{background:var(--success);}
body.app.admin .inst-status{font-weight:600;font-size:12px;}
body.app.admin .inst-status-1,body.app.admin .inst-status-2{color:var(--success);}

/* datepicker — this build uses the xdsoft jQuery datetimepicker (.xdsoft_*),
   NOT bootstrap-datepicker. Its widget is appended to <body>. */
.xdsoft_datetimepicker{border:1px solid var(--border) !important;border-radius:8px !important;box-shadow:0 4px 12px rgba(16,24,40,.08) !important;padding:8px 8px 4px !important;}
.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th{border-color:#eef1f6 !important;}
.xdsoft_datetimepicker .xdsoft_calendar td>div{padding-right:6px;}
/* "today" must NOT restyle the selected cell — same specificity + !important means the
   later rule wins, which made indigo text sit on the indigo selected background. */
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today:not(.xdsoft_current){color:#4f46e5 !important;font-weight:700;}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current:hover,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current>div,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current{background:#4f46e5 !important;box-shadow:none !important;color:#fff !important;font-weight:600;}
.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_calendar td:hover>div,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover{background:#4f46e5 !important;color:#fff !important;}
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current{background:#4f46e5 !important;box-shadow:none !important;}
.xdsoft_datetimepicker .xdsoft_label i,.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_next,.xdsoft_datetimepicker .xdsoft_today_button{opacity:.6;}

/* bootstrap-select / dropdown selected + highlighted item */
body.app.admin .bootstrap-select .dropdown-menu li.selected>a,
body.app.admin .bootstrap-select .dropdown-menu>.active>a,
body.app.admin .bootstrap-select .dropdown-menu>.active>a:hover,
body.app.admin .bootstrap-select .dropdown-menu>.active>a:focus,
body.app.admin .dropdown-menu>.active>a,body.app.admin .dropdown-menu>.active>a:hover,body.app.admin .dropdown-menu>.active>a:focus{background-color:var(--accent) !important;background-image:none !important;color:#fff !important;}
body.app.admin .bootstrap-select .dropdown-menu li a:hover,body.app.admin .dropdown-menu>li>a:hover,body.app.admin .dropdown-menu>li>a:focus{background-color:var(--accent-weak);color:var(--accent);}
body.app.admin .dropdown-menu{border-radius:var(--r-md);border:1px solid var(--border);box-shadow:var(--shadow-md);}

/* --- dashboard FullCalendar -------------------------------------------------------
   NOTE: per-event colours are Perfex SETTINGS (tbloptions: calendar_reminder_color
   #03A9F4, calendar_invoice_color / calendar_estimate_color #FF6F00,
   calendar_proposal_color #84c529, calendar_contract_color / calendar_project_color
   #B72974) — change those in Setup -> Settings -> Calendar, CSS cannot fix them. */
body.app.admin .fc-toolbar h2{font-size:18px;font-weight:600;color:var(--heading);}
body.app.admin .fc-day-header{background:var(--surface-2);color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.03em;font-weight:600;padding:8px 0;}
body.app.admin .fc-unthemed td,body.app.admin .fc-unthemed th,
body.app.admin .fc-unthemed .fc-divider,body.app.admin .fc-unthemed .fc-row{border-color:var(--border);}
body.app.admin .fc-unthemed td.fc-today{background:var(--accent-weak);}
body.app.admin .fc-day-number{color:var(--text);padding:4px 6px;}
body.app.admin .fc-other-month .fc-day-number{color:#c3c9d4;}
body.app.admin .fc-event,body.app.admin .fc-event-dot{border:0;border-radius:var(--r-sm);padding:1px 4px;font-size:11px;}
body.app.admin .fc-event .fc-title,body.app.admin .fc-event .fc-time{color:#fff;}
body.app.admin .fc-button-primary,body.app.admin .fc-state-default{background:var(--surface);border:1px solid var(--border);color:var(--text);background-image:none;box-shadow:none;text-shadow:none;border-radius:var(--r-sm);}
body.app.admin .fc-button-primary:not(:disabled).fc-button-active,
body.app.admin .fc-state-active,body.app.admin .fc-state-down{background:var(--accent) !important;border-color:var(--accent) !important;color:#fff !important;background-image:none !important;box-shadow:none !important;}
body.app.admin .fc-state-hover{background:var(--surface-2);}

/* --- dashboard leftovers ---------------------------------------------------------- */
body.app.admin .dashboard-widget .panel-body,body.app.admin .widget .panel-body{border-radius:var(--r-md);}
body.app.admin .top-stats-widget .text-info,body.app.admin .dash-widget-title{color:var(--heading);}
body.app.admin #dashboard .nav-tabs>li.active>a{color:var(--accent);border-bottom-color:var(--accent);}
body.app.admin .widget-dashboard-links a,body.app.admin .dashboard-widget a.view-all,
body.app.admin a[href*="view_all"]{color:var(--accent);}
body.app.admin .panel-full-width-heading,body.app.admin .widget-title{color:var(--heading);}

/* fields kept in the DOM (so their values still post) but hidden from staff —
   see views/admin/clients/modals/contact.php */
body.app.admin .crm-hide{display:none !important;}
/* read-only contact fields read as locked, not broken */
body.app.admin input[readonly]{background:var(--surface-2);cursor:not-allowed;color:var(--muted);}

/* accept-payment row: Source / Mode selects + what was recorded */
body.app.admin .inst-accept{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center;margin:6px 0;max-width:250px;}
body.app.admin .inst-accept-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;margin:0;}
body.app.admin .inst-accept-lbl .req{color:var(--danger);}
body.app.admin .inst-src-select{height:30px;width:100%;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-size:12px;padding:0 6px;}
body.app.admin td .inst-accept + .btn{margin-top:2px;}
body.app.admin td input[type="number"][id^="amount"]{height:30px;border:1px solid var(--border);border-radius:var(--r-sm);padding:0 8px;max-width:150px;}
body.app.admin .inst-src-select:focus{border-color:var(--accent);outline:0;box-shadow:0 0 0 3px var(--accent-weak);}
body.app.admin .inst-srcmode{display:inline-block;margin-top:3px;color:var(--muted);font-size:11px;white-space:nowrap;}
body.app.admin .inst-srcmode i{margin-right:3px;}

/* payment audit: manager = soft orange (intermediate), owner = soft green (final) */
body.app.admin tr.audit-manager>td{background:rgba(217,119,6,.10) !important;}
body.app.admin tr.audit-owner>td{background:rgba(22,163,74,.12) !important;}
body.app.admin .audit-badge{display:inline-block;font-size:11px;font-weight:600;border-radius:var(--r-pill);padding:2px 9px;white-space:nowrap;}
body.app.admin .audit-badge-manager{background:var(--warning-weak);color:#b45309;}
body.app.admin .audit-badge-owner{background:var(--success-weak);color:#15803d;}
body.app.admin .audit-badge i{margin-right:3px;}
body.app.admin .crm-audit-btn{font-size:11px;padding:3px 9px;height:auto;white-space:nowrap;}

/* payment integrity report: raw JSON drill-down */
body.app.admin .pi-raw{max-height:340px;overflow:auto;background:#0f172a;color:#e2e8f0;border:0;border-radius:var(--r-md);font-size:11px;line-height:1.5;padding:12px 14px;margin:0;}
body.app.admin .pi-raw-toggle{font-size:11px;font-weight:600;}
body.app.admin tr.pi-raw-row>td{background:var(--surface-2);}

/* column-visibility gear */
body.app.admin .lead-colvis{display:inline-block;position:relative;}
body.app.admin .lead-colvis .dropdown-menu{padding:6px 0;max-height:340px;overflow:auto;min-width:210px;}
body.app.admin .lead-colvis .dropdown-menu li a{padding:5px 14px;cursor:pointer;}
body.app.admin .lead-colvis .dropdown-menu li a i{width:14px;margin-right:6px;}
body.app.admin .lead-colvis .dropdown-menu li a .fa-check-square-o{color:var(--accent);}

/* ---- lead modal / profile info ---- */
body.app.admin .lead-information-col h4{color:var(--heading);font-weight:600;font-size:15px;}
body.app.admin .lead-field-heading{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:2px;}
/* lead toolbar: align the action buttons with the select on one line */
body.app.admin .lead-top-btn,body.app.admin .subutton{vertical-align:middle;}
/* WhatsApp template selectpicker: compact inline button, but dropdown stays wide so options don't cut */
body.app.admin .bootstrap-select.wa-template{margin-left:5px;vertical-align:middle;}
body.app.admin .bootstrap-select.wa-template>.dropdown-toggle{max-width:230px;}
body.app.admin .bootstrap-select.wa-template .dropdown-menu{width:auto !important;min-width:270px;}
body.app.admin .bootstrap-select.wa-template .dropdown-menu li a{white-space:nowrap;}

/* ---- installment rows (semantic; replaces inline hex) ---- */
body.app.admin tr.inst-overdue>td{background:var(--danger-weak);}
body.app.admin tr.inst-partial>td{background:var(--warning-weak);}
body.app.admin tr.inst-received>td{background:var(--success-weak);}

/* ---- reports: total footer rows + chart ---- */
body.app.admin .report-total-row>td{background:var(--surface-2);border-top:2px solid var(--border);}
body.app.admin td.report-total-due{color:var(--danger);font-size:15px;font-weight:700;}
body.app.admin td.report-total-received{color:var(--success);font-size:15px;font-weight:700;}
body.app.admin #su{margin-top:10px;}

/* ---- helpers ---- */
body.app.admin .btn-whatsapp{background:#25d366 !important;border-color:#25d366 !important;color:#fff !important;}
body.app.admin .btn-whatsapp:hover{background:#1fb457 !important;}
/* customers list: fully-paid amount as a soft green "paid" badge with a check */
body.app.admin .pay-paid{display:inline-flex;align-items:center;gap:5px;background:var(--success-weak);color:#15803d;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap;}
body.app.admin .pay-paid::before{content:"\f058";font-family:FontAwesome;font-size:12px;line-height:1;}
body.app.admin .pay-partial{color:var(--text);font-weight:700;}
/* customers table: contact cell, icon links, payment progress */
body.app.admin #table-clients>tbody>tr>td{vertical-align:top;padding-top:12px;padding-bottom:12px;}
body.app.admin .cl-name{display:block;font-weight:600;color:var(--heading);}
body.app.admin .cl-name:hover{color:var(--accent);}
body.app.admin .cl-pay-link{display:inline-block;margin-top:3px;font-size:11px;color:var(--muted);}
body.app.admin .cl-pay-link:hover{color:var(--accent);}
body.app.admin .cl-pay-link i{margin-right:4px;}
body.app.admin .cl-email,body.app.admin .cl-phone{white-space:nowrap;}
body.app.admin .cl-email i,body.app.admin .cl-phone i{color:var(--muted);margin-right:5px;font-size:11px;}
body.app.admin .pay-bar{display:block;height:4px;width:100%;max-width:120px;background:var(--border);border-radius:var(--r-pill);margin-top:6px;overflow:hidden;}
body.app.admin .pay-bar-fill{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill);}
body.app.admin .pay-months{display:block;color:var(--muted);font-size:11px;margin-top:3px;}
body.app.admin .pay-months i{margin-right:4px;}

/* =====================================================================
   LOGIN / AUTH — premium  (scope: body.login_admin, body.authentication)
   style.css is NOT loaded here; this overrides the inline <style> block.
   ===================================================================== */
body.login_admin,body.authentication{
  min-height:100vh;
  background:#141b30 !important;
  color:#e5e7eb;
}
/* full-viewport gradient layer (fixed, behind content) -> always fills */
body.login_admin::before,body.authentication::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 12% 8%, rgba(99,102,241,.40), transparent 58%),
    radial-gradient(900px 560px at 88% 92%, rgba(79,70,229,.34), transparent 55%),
    radial-gradient(620px 320px at 50% -6%, rgba(129,140,248,.20), transparent 60%),
    linear-gradient(140deg,#131a2c 0%,#1c2542 55%,#20204a 100%);
}
body.login_admin .authentication-form-wrapper,body.authentication .authentication-form-wrapper{margin-top:7vh;position:relative;z-index:1;}
body.login_admin .company-logo,body.authentication .company-logo{text-align:center;margin-bottom:20px;}
body.login_admin .company-logo img,body.authentication .company-logo img{max-height:56px;width:auto;display:inline-block;}
body.login_admin .company-logo.logo-text,body.authentication .logo-text{color:#fff;font-size:22px;font-weight:700;}
body.login_admin .authentication-form,body.authentication .authentication-form{
  background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.5);border-radius:16px;
  padding:34px 32px 30px;box-shadow:0 24px 64px rgba(8,11,25,.5),0 2px 8px rgba(8,11,25,.35);
  animation:authIn .5s cubic-bezier(.2,.7,.2,1);
}
@keyframes authIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
body.login_admin h1,body.authentication h1{font-size:20px;font-weight:700;text-transform:none;letter-spacing:0;color:#111827;text-align:center;margin:0 0 22px;}
body.login_admin .authentication-form label,body.authentication .authentication-form label{font-weight:500 !important;color:#374151;margin-bottom:6px;}
body.login_admin .authentication-form .form-control,body.authentication .authentication-form .form-control{height:46px;border:1px solid #e6e9ef;border-radius:10px;box-shadow:none;font-size:14px;background:#fff;color:#1f2733;}
body.login_admin .authentication-form .form-control:focus,body.authentication .authentication-form .form-control:focus{border-color:#4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,.18);}
body.login_admin .authentication-form .btn-info,body.login_admin .authentication-form .btn-primary,
body.authentication .authentication-form .btn-info,body.authentication .authentication-form .btn-primary{background:#4f46e5;border:0;height:47px;border-radius:10px;font-weight:600;font-size:15px;color:#fff;box-shadow:0 8px 20px rgba(79,70,229,.4);width:100%;}
body.login_admin .authentication-form .btn-info:hover,body.login_admin .authentication-form .btn-info:focus,
body.authentication .authentication-form .btn-info:hover{background:#4338ca;}
body.login_admin .authentication-form a,body.authentication .authentication-form a{color:#4f46e5;font-weight:500;}
body.login_admin .authentication-form a:hover,body.authentication .authentication-form a:hover{color:#4338ca;}
body.login_admin .authentication-form .checkbox label,body.authentication .authentication-form .checkbox label{color:#4b5563;font-weight:400 !important;}
@media (max-width:600px){
  body.login_admin .authentication-form,body.authentication .authentication-form{padding:26px 20px;}
  body.login_admin .authentication-form-wrapper,body.authentication .authentication-form-wrapper{margin-top:4vh;}
}

/* ============================================================================
   Round 3 — payment-plan reconciliation gate
   A plan whose unpaid EMIs no longer add up to the balance holds this page behind
   the Restructure modal. The rest of the CRM is untouched.
   NOTE: deliberately no `filter`/`transform` on an ancestor of the modal — either
   one creates a containing block, which breaks `position: fixed` and would blur
   the modal along with the page. The static backdrop already swallows every click;
   this just makes the state unmistakable.
   ========================================================================= */
body.app.admin .crm-reconcile-alert {
	border-left: 4px solid #c0392b;
	background: #fdecea;
	color: #7d2820;
}
body.app.admin .crm-reconcile-alert h4 {
	font-weight: 600;
	color: #a5281b;
}
body.app.admin.crm-reconcile-locked {
	overflow: hidden;
}
body.app.admin.crm-reconcile-locked .modal-backdrop.in {
	opacity: .72;
}
body.app.admin.crm-reconcile-locked #restructureModal .modal-content {
	border: 2px solid #c0392b;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
body.app.admin.crm-reconcile-locked #restructureModal .modal-header {
	background: #fdecea;
	border-bottom-color: #f0b5ae;
}
/* Dashboard panel: plans whose EMIs no longer match the balance. Loud on purpose. */
body.app.admin .crm-reconcile-dash {
	border-left: 4px solid #c0392b;
}
body.app.admin .crm-reconcile-dash-title {
	color: #a5281b;
	font-weight: 600;
}
body.app.admin .crm-reconcile-table td,
body.app.admin .crm-reconcile-table th {
	vertical-align: middle;
}
body.app.admin .crm-reconcile-table .text-right {
	font-variant-numeric: tabular-nums;
}
/* Restructure modal: compact helper. The explanation used to sit open as a wall of
   text that pushed the actual choice below the fold. */
body.app.admin .crm-rs-lede {
	font-size: 12.5px;
	line-height: 1.55;
	color: #5b6b7c;
	margin-bottom: 10px;
}
body.app.admin .crm-rs-lede a {
	margin-left: 4px;
	font-size: 12px;
	white-space: nowrap;
}
body.app.admin .crm-rs-help {
	font-size: 12px;
	line-height: 1.55;
	color: #5b6b7c;
	background: #f5f8fb;
	border: 1px solid #e3ebf3;
	border-radius: 5px;
	padding: 10px 12px;
	margin-bottom: 12px;
}
body.app.admin .crm-rs-help p { margin-bottom: 7px; }
body.app.admin .crm-rs-help .crm-rs-eg { margin-bottom: 3px; }
body.app.admin .crm-rs-help ul { margin: 0; padding-left: 16px; }
body.app.admin .crm-rs-help li { margin-bottom: 2px; }
/* Accept-payment row: the amount now carries a label like Source and Mode do. */
body.app.admin .inst-amt-input {
	width: 120px;
	max-width: 100%;
}

/* Customers list: the four batch fields are editable in place.
   Styled as real app controls rather than raw native selects — same height, border and
   focus treatment as the rest of the admin, with a drawn chevron so the control looks
   identical across browsers. Kept narrow so four extra columns do not bloat the table. */
body.app.admin .crm-cf-inline {
	display: block;
	width: 100%;
	min-width: 104px;
	max-width: 168px;
	height: 30px;
	padding: 0 8px;
	font-size: 12px;
	line-height: 28px;
	color: #29343d;
	background-color: #fff;
	border: 1px solid #dde4ea;
	border-radius: 4px;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .5s ease;
}
body.app.admin select.crm-cf-inline {
	/* drawn chevron, so every browser renders the same control */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 24px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%237b8a99' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	cursor: pointer;
}
body.app.admin .crm-cf-inline:hover {
	border-color: #c2ced9;
}
body.app.admin .crm-cf-inline:focus {
	border-color: #7d95ff;
	box-shadow: 0 0 0 3px rgba(125, 149, 255, .16);
	outline: 0;
}
body.app.admin .crm-cf-inline:disabled {
	opacity: .55;
	cursor: default;
}
/* An unset field should read as empty, not as a real value. */
body.app.admin select.crm-cf-inline:invalid,
body.app.admin .crm-cf-inline[data-original=""]:not(:focus) {
	color: #94a3b0;
}
/* Brief confirmation that the save actually landed. */
body.app.admin .crm-cf-inline.crm-cf-ok {
	background-color: #e8f7ec;
	border-color: #7fc494;
}
body.app.admin .crm-cf-inline.crm-cf-err {
	border-color: #dd8b81;
	background-color: #fdf1ef;
}

/* Notes: clamp to two lines with a Show more toggle, matching the leads listing.
   The clamp sits on an inner .crm-note-text so [data-note-description] keeps its own
   display state for toggle_edit_note(). */
body.app.admin .crm-note-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.5;
}
body.app.admin .crm-note-cell.expanded .crm-note-text {
	-webkit-line-clamp: unset;
	overflow: visible;
}
body.app.admin .crm-note-toggle {
	display: inline-block;
	margin-top: 3px;
	font-size: 11px;
	font-weight: 500;
}

/* Draft-leads shortcut on the leads toolbar. */
body.app.admin .crm-draft-badge {
	margin-left: 6px;
	background: #e8734a;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 6px;
}

/* Export-only text. The table export is DOM-based — it strips a cell's HTML to text —
   so a display:none span is invisible on screen but still lands in the XLS/CSV, because
   textContent includes hidden elements. Paired with .table-export-exclude on the visible
   controls, this lets a cell full of form inputs export as one clean value. */
body.app.admin .crm-export-only {
	display: none !important;
}