/* ============================================================
   WEVA UI Refresh — loaded automatically by layouts/app.blade.php
   Pure CSS overrides: no markup or behaviour changes.
   Typeface: Poppins (geometric sans matching the WEVA wordmark,
   tracked like Samsung One UI: tight headlines, airy labels).
   ============================================================ */

/* ---------- 1. Poppins (self-hosted) ---------- */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins/Poppins-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins/Poppins-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins/Poppins-Bold.ttf') format('truetype');
}

:root {
    --weva-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --weva-radius-sm: 8px;
    --weva-radius: 10px;
    --weva-radius-lg: 14px;
    --weva-border: #e8ecf3;
    --weva-bg: #f4f6fa;
    --weva-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .05);
    --weva-shadow-hover: 0 4px 8px rgba(15, 23, 42, .06), 0 12px 28px rgba(15, 23, 42, .09);
    --weva-track-head: -0.02em;  /* Samsung-style tight headlines   */
    --weva-track-body: -0.01em;  /* slightly snug body copy         */
    --weva-track-label: 0.05em;  /* wide, airy small-caps labels    */
}

/* ---------- 2. Global typography ---------- */
body,
.tooltip h3, .tooltip h6, .tooltip span,
.swal2-popup, .select-picker, .bootstrap-select,
input, button, select, optgroup, textarea {
    font-family: var(--weva-font) !important;
}

body {
    letter-spacing: var(--weva-track-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5,
.card-title, .modal-title, .page-title {
    font-family: var(--weva-font) !important;
    font-weight: 600;
    letter-spacing: var(--weva-track-head);
}

h1, .h1 { letter-spacing: -0.025em; }

/* wide-tracked brand mark, echoing the WEVA logo */
.sidebar-brand-name,
.sidebar-brand .mb-0 {
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase;
}

/* airy uppercase labels (Samsung One UI style) */
.text-lightest, .f-11, .f-10,
label.f-14, .form-group > label,
th {
    letter-spacing: 0.01em;
}

/* ---------- 3. Page canvas ---------- */
body:not(.dark-theme) .main-container,
body:not(.dark-theme) .bg-additional-grey {
    background-color: var(--weva-bg) !important;
}

/* ---------- 4. Sidebar ---------- */
.main-sidebar {
    box-shadow: 2px 0 18px rgba(15, 23, 42, .12);
}

.main-sidebar aside a,
.sidebar-menu li a,
.main-sidebar .nav-item a {
    border-radius: var(--weva-radius-sm);
    transition: background-color .18s ease, color .18s ease, padding-left .18s ease;
}

body:not(.rtl) .main-sidebar aside a:hover,
body:not(.rtl) .sidebar-menu li a:hover {
    padding-left: 4px;
}

.sidebar-brand-box {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* ---------- 5. Cards & dashboard widgets ---------- */
.card,
.bg-white.rounded,
.white-box,
.border-box {
    border-radius: var(--weva-radius-lg) !important;
    transition: box-shadow .2s ease, transform .2s ease;
}

body:not(.dark-theme) .card,
body:not(.dark-theme) .white-box,
body:not(.dark-theme) .border-box {
    border: 1px solid var(--weva-border);
    box-shadow: var(--weva-shadow);
}

body:not(.dark-theme) .border-box:hover,
body:not(.dark-theme) .card.clickable-card:hover,
body:not(.dark-theme) .dashboard-box:hover {
    box-shadow: var(--weva-shadow-hover);
    transform: translateY(-2px);
}

.card-header {
    border-top-left-radius: var(--weva-radius-lg) !important;
    border-top-right-radius: var(--weva-radius-lg) !important;
    background-color: transparent;
    border-bottom: 1px solid var(--weva-border);
}

/* KPI numbers on dashboards */
.border-box-number, .dashboard-stats h3, .card h1.mb-0 {
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

/* ---------- 6. Buttons ---------- */
.btn, .btn-primary, .btn-secondary, .btn-cancel,
button.swal2-styled {
    border-radius: var(--weva-radius) !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease, opacity .18s ease;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
}

body:not(.dark-theme) .btn-primary:hover:not(:disabled) {
    box-shadow: 0 6px 16px rgba(29, 130, 245, .28);
}

.btn-sm { border-radius: var(--weva-radius-sm) !important; }

/* ---------- 7. Forms ---------- */
.form-control,
.select-picker + .dropdown-toggle,
.bootstrap-select > .dropdown-toggle,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
textarea.form-control {
    border-radius: var(--weva-radius) !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}

body:not(.dark-theme) .form-control,
body:not(.dark-theme) .bootstrap-select > .dropdown-toggle {
    border-color: var(--weva-border);
}

.form-control:focus,
.bootstrap-select > .dropdown-toggle:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    box-shadow: 0 0 0 3px rgba(29, 130, 245, .14) !important;
    outline: none;
}

.form-group > label {
    font-weight: 500;
}

/* file inputs & dropzone */
.dropzone, .vue-dropzone {
    border-radius: var(--weva-radius-lg) !important;
    border-style: dashed !important;
}

/* ---------- 8. Tables ---------- */
.table thead th,
table.dataTable thead th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--weva-track-label);
    border-top: 0;
}

body:not(.dark-theme) .table thead th,
body:not(.dark-theme) table.dataTable thead th {
    color: #64748b;
    background-color: #f8fafd;
    border-bottom: 1px solid var(--weva-border);
}

body:not(.dark-theme) .table td {
    border-color: #eef1f6;
}

body:not(.dark-theme) .table-hover tbody tr:hover,
body:not(.dark-theme) table.dataTable tbody tr:hover {
    background-color: #f4f8ff;
}

.table td, .table th { vertical-align: middle; }

/* DataTables pagination */
.dataTables_paginate .paginate_button {
    border-radius: var(--weva-radius-sm) !important;
}

/* ---------- 9. Modals, dropdowns, popovers ---------- */
.modal-content {
    border-radius: var(--weva-radius-lg);
    border: 0;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .22);
}

.modal-header { border-bottom-color: var(--weva-border); }
.modal-footer { border-top-color: var(--weva-border); }

.dropdown-menu {
    border-radius: var(--weva-radius);
    border: 1px solid var(--weva-border);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    overflow: hidden;
}

.dropdown-item {
    transition: background-color .15s ease;
}

/* ---------- 10. Badges, chips, avatars ---------- */
.badge {
    border-radius: 20px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: .3em .75em;
}

.taskEmployeeImg, .rounded-circle {
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}

/* ---------- 11. Tabs & pills ---------- */
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    letter-spacing: 0;
    transition: color .18s ease, border-color .18s ease;
}

.nav-tabs .nav-link.active {
    border-bottom-color: currentColor;
    background: transparent;
}

/* ---------- 12. Alerts & toasts ---------- */
.alert { border-radius: var(--weva-radius); border-width: 0 0 0 4px; }
.swal2-popup { border-radius: var(--weva-radius-lg) !important; }

/* ---------- 13. Scrollbars & selection ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #c6cede;
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: #a8b3c9; }

::selection { background: rgba(29, 130, 245, .18); }

/* ---------- 14. Quill editor & misc embeds ---------- */
.ql-container {
    font-family: var(--weva-font) !important;
    border-bottom-left-radius: var(--weva-radius);
    border-bottom-right-radius: var(--weva-radius);
}
.ql-toolbar {
    border-top-left-radius: var(--weva-radius);
    border-top-right-radius: var(--weva-radius);
}

/* calendar (FullCalendar) */
.fc .fc-button { border-radius: var(--weva-radius-sm) !important; }
.fc .fc-daygrid-day { transition: background-color .15s ease; }

/* preloader */
.preloader-container { backdrop-filter: blur(2px); }

/* ============================================================
   v2 — Login-page design language applied app-wide
   ============================================================ */

/* ---------- Sidebar: navy gradient brand panel (as on login) ---------- */
.main-sidebar {
    background: #05152e !important;
}

.main-sidebar .sidebar-brand-box,
.main-sidebar .sidebar-brand {
    background: transparent !important;
}

.main-sidebar a.nav-item,
.main-sidebar .sidebar-text-color,
.main-sidebar .text-lightest {
    color: rgba(255, 255, 255, .82) !important;
}

.main-sidebar a.nav-item svg { opacity: .85; }

.main-sidebar a.nav-item:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .10);
}

/* active item: simple tonal pill in the same navy family */
.main-sidebar a.nav-item.active,
.main-sidebar li.accordionItem.active > a.nav-item,
.main-sidebar a.accordionItemHeading.active {
    color: #ffffff !important;
    background: #10294d !important;
    box-shadow: inset 3px 0 0 #4d79c0;
    font-weight: 600;
}

.main-sidebar a.nav-item.active svg,
.main-sidebar a.nav-item.active i {
    opacity: 1;
}

.main-sidebar a.nav-item { position: relative; }

.main-sidebar .menu-item-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ---------- Primary buttons: login gradient ---------- */
body:not(.dark-theme) .btn-primary,
body:not(.dark-theme) button.btn-primary,
body:not(.dark-theme) a.btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}

body:not(.dark-theme) .btn-primary:hover:not(:disabled) {
    box-shadow: 0 8px 20px rgba(37, 99, 235, .32);
}

/* ---------- Page headings ---------- */
.content-wrapper > .d-flex h1,
.content-wrapper h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #0f172a;
}

/* ---------- Dashboard / KPI cards: soft top accent like the login panel ---------- */
body:not(.dark-theme) .border-box,
body:not(.dark-theme) .dashboard-box {
    border-top: 3px solid #2563eb;
}

body:not(.dark-theme) .card .card-title {
    color: #0f172a;
}

/* icon chips inside widgets */
body:not(.dark-theme) .card .btn-secondary.rounded,
body:not(.dark-theme) .action-box .btn-secondary {
    border-radius: 10px !important;
}

/* ---------- Content area breathing room ---------- */
.content-wrapper { padding-top: 20px; }

/* ---------- Links ---------- */
body:not(.dark-theme) a { transition: color .15s ease; }
body:not(.dark-theme) .text-primary { color: #2563eb !important; }

/* ============================================================
   v3 — Dashboard: professional stat cards & header
   (targets the rendered admin dashboard at /account/dashboard)
   ============================================================ */

/* topbar page title */
.page-heading h2 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.page-heading .text-lightest { letter-spacing: 0.01em; }

/* KPI stat cards */
body:not(.dark-theme) .hover-class.b-shadow-4 {
    background: #ffffff;
    border: 1px solid var(--weva-border);
    border-radius: 14px !important;
    box-shadow: var(--weva-shadow) !important;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    min-height: 96px;
}

body:not(.dark-theme) a:hover .hover-class.b-shadow-4 {
    transform: translateY(-3px);
    box-shadow: var(--weva-shadow-hover) !important;
    border-color: #c7d7f5;
}

/* label: airy uppercase, Samsung-style */
.hover-class.b-shadow-4 h5.f-15 {
    font-size: 11px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #64748b !important;
    margin-bottom: 10px !important;
}

/* the big number: large, dark, tightly tracked, tabular */
.hover-class.b-shadow-4 p.f-20 {
    font-size: 26px !important;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* icon chip: rounded tinted square instead of a floating grey icon */
.hover-class.b-shadow-4 > .d-block:last-child {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, .10);
    flex: 0 0 46px;
}
.hover-class.b-shadow-4 > .d-block:last-child i {
    color: #2563eb !important;
    font-size: 17px !important;
}

/* per-card accent colours */
.row-card-2 .hover-class > .d-block:last-child { background: rgba(22, 163, 74, .10); }
.row-card-2 .hover-class > .d-block:last-child i { color: #16a34a !important; }
.row-card-3 .hover-class > .d-block:last-child { background: rgba(217, 119, 6, .12); }
.row-card-3 .hover-class > .d-block:last-child i { color: #d97706 !important; }
.row-card-4 .hover-class > .d-block:last-child { background: rgba(124, 58, 237, .10); }
.row-card-4 .hover-class > .d-block:last-child i { color: #7c3aed !important; }
.row-card-5 .hover-class > .d-block:last-child { background: rgba(13, 148, 136, .10); }
.row-card-5 .hover-class > .d-block:last-child i { color: #0d9488 !important; }
.row-card-6 .hover-class > .d-block:last-child { background: rgba(220, 38, 38, .10); }
.row-card-6 .hover-class > .d-block:last-child i { color: #dc2626 !important; }
.row-card-7 .hover-class > .d-block:last-child { background: rgba(79, 70, 229, .10); }
.row-card-7 .hover-class > .d-block:last-child i { color: #4f46e5 !important; }

/* card links shouldn't look like links */
.admin-dashboard a, a .hover-class { text-decoration: none !important; }

/* dashboard section spacing */
.admin-dashboard .row [class*='col-'] { margin-bottom: 1rem; }

/* welcome / info cards inside dashboard get the same card language */
body:not(.dark-theme) .admin-dashboard .bg-white,
body:not(.dark-theme) .admin-dashboard .white-box {
    border-radius: 14px !important;
    border: 1px solid var(--weva-border);
}

/* ============================================================
   v4 — Multicolor dashboard tiles, micro-animations, sidebar polish
   (pure CSS: transform/opacity only — no JS, no images, GPU-cheap)
   ============================================================ */

@keyframes wevaFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes wevaSlideIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes wevaPop {
    0% { transform: scale(.92); } 60% { transform: scale(1.04); } 100% { transform: scale(1); }
}

/* ---------- Multicolor stat tiles ---------- */
body:not(.dark-theme) .hover-class.b-shadow-4 {
    position: relative;
    overflow: hidden;
}

/* soft gradient wash per tile + tinted border */
body:not(.dark-theme) .row-card-1 .hover-class.b-shadow-4 { background: linear-gradient(135deg, #ffffff 30%, #dbeafe 130%); border-color: #d3e3fd; }
body:not(.dark-theme) .row-card-2 .hover-class.b-shadow-4 { background: linear-gradient(135deg, #ffffff 30%, #dcfce7 130%); border-color: #cdeed9; }
body:not(.dark-theme) .row-card-3 .hover-class.b-shadow-4 { background: linear-gradient(135deg, #ffffff 30%, #fef3c7 130%); border-color: #f3e5b8; }
body:not(.dark-theme) .row-card-4 .hover-class.b-shadow-4 { background: linear-gradient(135deg, #ffffff 30%, #f3e8ff 130%); border-color: #e6d8f7; }
body:not(.dark-theme) .row-card-5 .hover-class.b-shadow-4 { background: linear-gradient(135deg, #ffffff 30%, #ccfbf1 130%); border-color: #bfeee2; }
body:not(.dark-theme) .row-card-6 .hover-class.b-shadow-4 { background: linear-gradient(135deg, #ffffff 30%, #ffe4e6 130%); border-color: #f6d3d7; }
body:not(.dark-theme) .row-card-7 .hover-class.b-shadow-4 { background: linear-gradient(135deg, #ffffff 30%, #e0e7ff 130%); border-color: #d6dcf8; }

/* icon chips: solid gradient with white glyph (content icon stays) */
.hover-class.b-shadow-4 > .d-block:last-child {
    transition: transform .25s ease;
}
.row-card-1 .hover-class > .d-block:last-child { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.row-card-2 .hover-class > .d-block:last-child { background: linear-gradient(135deg, #22c55e, #16a34a); }
.row-card-3 .hover-class > .d-block:last-child { background: linear-gradient(135deg, #f59e0b, #d97706); }
.row-card-4 .hover-class > .d-block:last-child { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.row-card-5 .hover-class > .d-block:last-child { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.row-card-6 .hover-class > .d-block:last-child { background: linear-gradient(135deg, #f43f5e, #dc2626); }
.row-card-7 .hover-class > .d-block:last-child { background: linear-gradient(135deg, #6366f1, #4f46e5); }
[class*='row-card-'] .hover-class > .d-block:last-child i { color: #ffffff !important; }

/* big decorative watermark ring behind the chip */
body:not(.dark-theme) .hover-class.b-shadow-4::before {
    content: "";
    position: absolute;
    right: -34px;
    top: -34px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}

/* shine sweep on hover */
.hover-class.b-shadow-4::after {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-20deg);
    transition: left .5s ease;
    pointer-events: none;
}
a:hover .hover-class.b-shadow-4::after { left: 130%; }
a:hover .hover-class.b-shadow-4 > .d-block:last-child { transform: scale(1.1) rotate(-4deg); }

/* staggered entry animation for the tile row */
[class*='row-card-'] { animation: wevaFadeUp .45s ease both; }
.row-card-1 { animation-delay: .03s; }
.row-card-2 { animation-delay: .09s; }
.row-card-3 { animation-delay: .15s; }
.row-card-4 { animation-delay: .21s; }
.row-card-5 { animation-delay: .27s; }
.row-card-6 { animation-delay: .33s; }
.row-card-7 { animation-delay: .39s; }

/* the rest of the dashboard content fades in gently */
.admin-dashboard, .content-wrapper > .card { animation: wevaFadeUp .5s ease both; }

/* ---------- Sidebar: latest-style polish ---------- */
.main-sidebar li.accordionItem {
    animation: wevaSlideIn .35s ease both;
}
.main-sidebar li.accordionItem:nth-child(1)  { animation-delay: .02s; }
.main-sidebar li.accordionItem:nth-child(2)  { animation-delay: .05s; }
.main-sidebar li.accordionItem:nth-child(3)  { animation-delay: .08s; }
.main-sidebar li.accordionItem:nth-child(4)  { animation-delay: .11s; }
.main-sidebar li.accordionItem:nth-child(5)  { animation-delay: .14s; }
.main-sidebar li.accordionItem:nth-child(6)  { animation-delay: .17s; }
.main-sidebar li.accordionItem:nth-child(7)  { animation-delay: .20s; }
.main-sidebar li.accordionItem:nth-child(8)  { animation-delay: .23s; }
.main-sidebar li.accordionItem:nth-child(9)  { animation-delay: .26s; }
.main-sidebar li.accordionItem:nth-child(10) { animation-delay: .29s; }
.main-sidebar li.accordionItem:nth-child(n+11) { animation-delay: .32s; }

.main-sidebar a.nav-item {
    margin: 2px 8px;
    padding-left: 12px !important;
    border-radius: 10px;
}

.main-sidebar a.nav-item svg,
.main-sidebar a.nav-item i {
    transition: transform .2s ease;
}
.main-sidebar a.nav-item:hover svg,
.main-sidebar a.nav-item:hover i {
    transform: scale(1.15);
}

/* hover on non-active items: faint tonal tint, same navy family */
.main-sidebar a.nav-item:not(.active):hover {
    background: #0a1f3d;
}

/* ---------- Accordion submenus (Tasks, etc.): keep navy, readable text ---------- */
.main-sidebar .sidebar-menu li,
.main-sidebar li.accordionItem {
    background: #05152e !important;
}

/* collapsed submenu must stay a zero box — main.css floats it, and any
   padding/margin here makes the next menu item flow beside the float
   (was pushing "Customer Update"'s icon inward and cutting its text) */
.main-sidebar .closeIt .accordionItemContent {
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* only the expanded submenu gets the inset navy panel */
.main-sidebar .openIt .accordionItemContent {
    background: #081c39 !important;
    border-radius: 10px;
    margin: 2px 10px;
    padding: 4px 0;
    clear: both;
}

.main-sidebar .accordionItemContent a,
.main-sidebar .accordionItemContent .nav-item {
    display: block;
    color: rgba(255, 255, 255, .72) !important;
    font-size: 13px;
    padding: 7px 12px 7px 36px;
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease;
}

.main-sidebar .accordionItemContent a:hover {
    color: #ffffff !important;
    background: #0a1f3d;
}

.main-sidebar .accordionItemContent a.active {
    color: #ffffff !important;
    background: #10294d;
    box-shadow: inset 3px 0 0 #4d79c0;
}

/* defeat the sidebar-light theme hover/active colour vars inside our navy sidebar */
.sidebar-light .sidebar-menu li .nav-item:focus,
.sidebar-light .sidebar-menu li .nav-item:hover,
.sidebar-light .sidebar-menu li .accordionItemContent a:hover {
    color: #ffffff !important;
}
.sidebar-light .accordionItem a.active { color: #ffffff !important; }

/* accordion caret/arrow stays visible */
.main-sidebar .accordionItemHeading::after,
.main-sidebar .accordionItemHeading .icon-arrow-down {
    color: rgba(255, 255, 255, .6) !important;
}

/* thin translucent scrollbar inside the sidebar */
.main-sidebar ::-webkit-scrollbar { width: 5px; }
.main-sidebar ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); }

/* the version footer (.sidebarTogglerBox) is position:fixed at the bottom and
   overlaps the scrollable menu — give the list bottom room so the last items
   (Customer Share Link, Report) can scroll clear of it */
.main-sidebar #sideMenuScroll > ul,
.main-sidebar .sidebar-menu > ul {
    padding-bottom: 72px;
}

/* brand box: soft glow divider */
.main-sidebar .sidebar-brand-box {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

/* ---------- Preloader: smooth fade ---------- */
.preloader-container { transition: opacity .3s ease; }

/* ---------- Accessibility: honour reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    [class*='row-card-'], .admin-dashboard, .content-wrapper > .card,
    .main-sidebar li.accordionItem { animation: none !important; }
    .hover-class.b-shadow-4::after { display: none; }
}

/* ============================================================
   v5 — Compact list pages (Leads & all DataTable screens)
   ============================================================ */

/* ---------- Filter bar: one tidy rounded strip ---------- */
body:not(.dark-theme) .filter-box.bg-white,
body:not(.dark-theme) form .filter-box {
    border-radius: 12px;
    border: 1px solid var(--weva-border);
    box-shadow: var(--weva-shadow);
    padding: 4px 8px;
    align-items: center;
}

.filter-box .select-box {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.filter-box p.f-14 { font-size: 12.5px !important; }

.filter-box .select-picker + .dropdown-toggle,
.filter-box .form-control {
    min-height: 34px;
    height: 34px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 13px;
}

/* "more filters" drawer */
.more-filter-items label { font-size: 12px; letter-spacing: 0.03em; }

/* ---------- Table container ---------- */
body:not(.dark-theme) .w-tables {
    border: 1px solid var(--weva-border);
    border-radius: 14px !important;
    box-shadow: var(--weva-shadow);
    overflow: hidden;
    padding: 4px 10px 10px 10px;
}

/* ---------- Compact table cells ---------- */
.w-tables .table td,
table.dataTable td {
    padding: 8px 10px !important;
    font-size: 12.5px;
    line-height: 1.45;
}

.w-tables .table thead th,
table.dataTable thead th {
    padding: 9px 10px !important;
    font-size: 10.5px !important;
    white-space: nowrap;
}

/* row hover: subtle lift-tint, clear affordance */
body:not(.dark-theme) .w-tables .table-hover tbody tr:hover {
    background-color: #f2f7ff;
    box-shadow: inset 3px 0 0 #2563eb;
}

/* avatars inside tables: smaller */
.w-tables .taskEmployeeImg,
table.dataTable img.rounded-circle {
    width: 26px !important;
    height: 26px !important;
}

/* inline status dropdown (lead status): compact pill */
table.dataTable select.statusChange,
.w-tables select.statusChange {
    height: 28px;
    padding: 2px 22px 2px 10px;
    font-size: 12px;
    border-radius: 20px !important;
    border: 1px solid var(--weva-border);
    background-color: #f8fafd;
    max-width: 140px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
table.dataTable select.statusChange:hover { border-color: #94a3b8; }
table.dataTable select.statusChange:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    outline: none;
}

/* row action buttons: compact icon buttons */
.w-tables .btn-sm, table.dataTable .btn-sm {
    padding: 3px 8px;
    font-size: 12px;
}

/* ---------- DataTables chrome: search, length, pagination ---------- */
.dataTables_filter input {
    height: 32px;
    border-radius: 10px !important;
    font-size: 13px;
}
.dataTables_length select {
    height: 32px;
    padding: 2px 8px;
    border-radius: 8px !important;
    font-size: 13px;
}
.dataTables_info { font-size: 12px; color: #64748b; }

.dataTables_paginate .paginate_button {
    padding: 4px 10px !important;
    font-size: 12.5px;
    transition: background-color .15s ease;
}
body:not(.dark-theme) .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: #fff !important;
    border: 0 !important;
}

/* checkbox column: keep narrow */
.w-tables .table td:first-child,
.w-tables .table th:first-child { width: 34px; }

/* toolbar above the table (add/export buttons) */
.w-tables .btn, #leads-table_wrapper .btn { white-space: nowrap; }

/* long text cells (names, categories) stay on one line, ellipsized */
table.dataTable td { vertical-align: middle !important; }

/* horizontal scroll stays smooth and obvious */
.w-tables { -webkit-overflow-scrolling: touch; }

/* ---------- Leads page: compact tiles + filters ---------- */
/* smaller stat tiles */
body:not(.dark-theme) .row-card-1 .hover-class.b-shadow-4,
body:not(.dark-theme) .row-card-2 .hover-class.b-shadow-4 {
    min-height: 0;
    padding: 12px 14px !important;
}
.row-card-1 .hover-class.b-shadow-4 p.f-20,
.row-card-2 .hover-class.b-shadow-4 p.f-20 {
    font-size: 22px !important;
}
.row-card-1 .hover-class.b-shadow-4 > .d-block:last-child,
.row-card-2 .hover-class.b-shadow-4 > .d-block:last-child {
    width: 38px; height: 38px; flex: 0 0 38px;
}

/* compact filter fields */
.leads-filter-field .form-label {
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b !important;
    margin-bottom: 4px;
    font-weight: 600 !important;
}
.leads-filter-field .form-control {
    height: 34px;
    min-height: 34px;
    padding: 4px 10px;
    font-size: 13px;
    border-radius: 8px !important;
}
.leads-filter-field #clear-filters {
    height: 34px;
    margin-top: 0 !important;
    padding: 4px 10px;
    border-radius: 8px !important;
}

/* ---------- Lead status: semantic colour + bold ---------- */
.lead-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.lead-status-select {
    font-weight: 600 !important;
    max-width: 150px;
}
.lead-status-select option { color: #0f172a; font-weight: 600; }

/* status selectpicker dropdown (rendered to body via container:body) — keep it
   compact, readable and above the table so nothing is clipped */
.bootstrap-select .dropdown-menu.inner { max-height: 320px; }
.statusChange + .dropdown-menu li a,
.bootstrap-select .dropdown-menu li a { font-size: 13px; padding: 6px 14px; color: #0f172a; }
/* highlighted / selected / hovered option must stay readable — the theme paints
   the active item with a dark background but leaves the text dark (invisible) */
.bootstrap-select .dropdown-menu li.active > a,
.bootstrap-select .dropdown-menu li.selected > a,
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* keep RTL + dark theme functional: no positional overrides above,
   and colour overrides are scoped to body:not(.dark-theme) where they
   could clash (typography + sidebar gradient apply to both themes). */