/*
 * SVSS CRM Theme — Zoho CRM Inspired
 * Light, airy, modern SaaS design
 * White sidebar + White header + Soft shadows
 */

/* ============================================
   1. DESIGN TOKENS (CSS Variables)
   ============================================ */
:root {
    /* Primary — Zoho Blue */
    --z-primary: #2c83ec;
    --z-primary-hover: #1a6fd4;
    --z-primary-dark: #1b5eb5;
    --z-primary-light: #e8f2fd;
    --z-primary-50: #f0f7ff;

    /* Accent / CTA — Zoho Red */
    --z-accent: #e04646;
    --z-accent-hover: #c93c3c;

    /* Brand — Maroon (Invoices, badges, CTAs) */
    --z-brand: #5A1740;
    --z-brand-hover: #4a1236;
    --z-brand-light: #faf5f7;
    --z-brand-50: #f5eef2;
    --z-brand-glow: rgba(90,23,64,0.15);
    --z-brand-border: #e0d0d8;
    --z-brand-shadow: rgba(90, 23, 64, 0.25);
    --z-brand-shadow-light: rgba(90, 23, 64, 0.1);

    /* Gold Accent */
    --z-gold: #C4962E;

    /* Sidebar — Light */
    --z-sidebar-bg: #ffffff;
    --z-sidebar-hover: #f0f4f8;
    --z-sidebar-text: #374151;
    --z-sidebar-active-bg: #e8f2fd;
    --z-sidebar-active-text: #2c83ec;
    --z-sidebar-active-border: #2c83ec;
    --z-sidebar-width: 220px;
    --z-sidebar-border: #e8ecf1;

    /* Header — White */
    --z-header-bg: #ffffff;
    --z-header-height: 52px;
    --z-header-border: #e0e5ec;
    --z-header-text: #333e50;

    /* Body & Cards */
    --z-body-bg: #f5f5f5;
    --z-card-bg: #ffffff;

    /* Text */
    --z-text: #333e50;
    --z-text-secondary: #6b7a90;
    --z-text-muted: #8d9bb5;
    --z-text-heading: #1a2332;

    /* Borders */
    --z-border: #e0e5ec;
    --z-border-light: #eef1f5;

    /* Radius */
    --z-radius: 8px;
    --z-radius-sm: 4px;
    --z-radius-lg: 12px;
    --z-radius-xl: 16px;

    /* Shadows — Soft Elevation */
    --z-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --z-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --z-shadow-lg: 0 4px 16px rgba(0,0,0,0.1);
    --z-shadow-xl: 0 8px 32px rgba(0,0,0,0.12);

    /* Semantic */
    --z-success: #2ecc71;
    --z-success-bg: #e8faf0;
    --z-success-text: #1a7a42;
    --z-warning: #f5a623;
    --z-warning-bg: #fef6e6;
    --z-warning-text: #8a5d13;
    --z-danger: #e04646;
    --z-danger-bg: #fde8e8;
    --z-danger-text: #991b1b;
    --z-info: #2c83ec;
    --z-info-bg: #e8f2fd;
    --z-info-text: #1b5eb5;

    /* Spacing */
    --z-space-xs: 4px;
    --z-space-sm: 8px;
    --z-space-md: 16px;
    --z-space-lg: 24px;
    --z-space-xl: 32px;

    /* Transition */
    --z-transition: all 0.2s ease;
}


/* ============================================
   2. BASE / RESET OVERRIDES
   ============================================ */
body {
    background: var(--z-body-bg) !important;
    color: var(--z-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased !important;
}

a { color: var(--z-primary); text-decoration: none !important; }
a:hover { color: var(--z-primary-hover); }

/* Force white text on all Bootstrap button links — prevents a{color} from overriding */
a.btn-primary, a.btn-success, a.btn-danger, a.btn-warning, a.btn-info,
a.btn-primary:hover, a.btn-success:hover, a.btn-danger:hover, a.btn-warning:hover, a.btn-info:hover,
a.btn-primary:focus, a.btn-success:focus, a.btn-danger:focus, a.btn-warning:focus, a.btn-info:focus,
.btn-primary a, .btn-success a, .btn-danger a, .btn-warning a, .btn-info a,
.btn-group a.btn, .btn-group a.btn:hover,
a[class*="btn-primary"], a[class*="btn-success"], a[class*="btn-danger"],
a[class*="btn-warning"], a[class*="btn-info"] {
    color: #fff !important;
}
a.btn-default, a.btn-default:hover, a.btn-default:focus {
    color: var(--z-text, #333) !important;
}

::selection { background: var(--z-primary-light) !important; color: var(--z-text-heading) !important; }

hr { border-top-color: var(--z-border-light) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c8cfd8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a0aab5; }


/* ============================================
   3. HEADER — White Zoho Style
   ============================================ */
#header {
    background: var(--z-header-bg) !important;
    border-bottom: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    height: var(--z-header-height) !important;
    min-height: var(--z-header-height) !important;
    z-index: 1000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* Blue accent strip at top */
#header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--z-primary);
    z-index: 1001;
}

/* Logo */
#header .navbar-header {
    height: var(--z-header-height) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
}

#header .navbar-header .navbar-brand {
    padding: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}

#header .navbar-header .navbar-brand img,
#header .navbar-header img {
    max-height: 32px !important;
    width: auto !important;
    /* NO filter — show logo in full color */
    filter: none !important;
}

/* Hamburger */
#header .hide-menu,
#header .navbar-toggle {
    color: var(--z-text-secondary) !important;
    font-size: 18px !important;
}

#header .hide-menu:hover {
    color: var(--z-primary) !important;
}

/* Old company-branch-switcher — replaced by .header-branch-switcher */
.company-branch-switcher {
    display: none !important;
    border-top-color: var(--z-text-muted) !important;
}

/* Company switcher dropdown menu */
.company-switcher-menu {
    border: none !important;
    border-radius: var(--z-radius-lg) !important;
    box-shadow: var(--z-shadow-xl) !important;
    padding: 6px 0 0 0 !important;
    min-width: 280px !important;
    margin-top: 8px !important;
    background: #fff !important;
    overflow: hidden !important;
}

.company-switcher-menu .switcher-section-label {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--z-text-muted) !important;
    font-weight: 700 !important;
    padding: 10px 18px 6px !important;
}

.company-switcher-menu .company-option {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 18px !important;
    color: var(--z-text) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: var(--z-transition) !important;
    border-left: 3px solid transparent !important;
}

.company-switcher-menu .company-option:hover {
    background: var(--z-primary-50) !important;
    color: var(--z-primary) !important;
    text-decoration: none !important;
}

.company-switcher-menu .company-option.active {
    background: var(--z-primary-light) !important;
    color: var(--z-primary) !important;
    font-weight: 600 !important;
    border-left-color: var(--z-primary) !important;
}

.company-switcher-menu .company-opt-icon {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: var(--z-primary-light) !important;
    color: var(--z-primary) !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

.company-switcher-menu .company-option.active .company-opt-icon {
    background: var(--z-primary) !important;
    color: #fff !important;
}

.company-switcher-menu .company-option small {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
    font-weight: 400 !important;
    margin-left: 4px !important;
}

/* Branch list under active company */
.company-switcher-menu .branch-list {
    list-style: none !important;
    padding: 2px 0 6px 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--z-border-light) !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    background: #fafbfc !important;
}

.company-switcher-menu .branch-list .branch-item,
.company-switcher-menu .branch-list li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 18px 8px 62px !important;
    font-size: 13px !important;
    color: var(--z-text-secondary) !important;
    cursor: pointer !important;
    transition: var(--z-transition) !important;
    font-weight: 500 !important;
    position: relative !important;
    list-style: none !important;
}

.company-switcher-menu .branch-list .branch-item::before,
.company-switcher-menu .branch-list li::before {
    content: '' !important;
    position: absolute !important;
    left: 42px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--z-border) !important;
}

.company-switcher-menu .branch-list .branch-item:hover,
.company-switcher-menu .branch-list li:hover {
    background: var(--z-primary-50) !important;
    color: var(--z-primary) !important;
}

.company-switcher-menu .branch-list .branch-item.active,
.company-switcher-menu .branch-list li.active {
    color: var(--z-primary) !important;
    font-weight: 600 !important;
}

.company-switcher-menu .branch-list .branch-item.active::before,
.company-switcher-menu .branch-list li.active::before {
    background: var(--z-primary) !important;
}

.company-switcher-menu .branch-list li small {
    font-size: 10.5px !important;
    color: var(--z-text-muted) !important;
    font-weight: 400 !important;
}

/* Manage Companies footer link */
.company-switcher-menu .manage-companies-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    font-size: 12.5px !important;
    color: var(--z-primary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-top: 1px solid var(--z-border-light) !important;
    background: #fafbfc !important;
    transition: var(--z-transition) !important;
    margin-top: 2px !important;
}

.company-switcher-menu .manage-companies-link:hover {
    background: var(--z-primary-50) !important;
    text-decoration: none !important;
}

.company-switcher-menu .manage-companies-link i {
    font-size: 13px !important;
    color: var(--z-primary) !important;
}

/* Search bar */
#header .header-search input,
#header .search-input,
#header input[type="search"],
#header .form-control {
    background: #f0f4f8 !important;
    border: 1px solid #e0e5ec !important;
    border-radius: 20px !important;
    color: var(--z-text) !important;
    font-size: 13px !important;
    height: 36px !important;
    padding: 6px 16px 6px 36px !important;
    box-shadow: none !important;
}

#header .header-search input:focus,
#header .search-input:focus,
#header input[type="search"]:focus {
    border-color: var(--z-primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(44,131,236,0.1) !important;
}

#header .header-search input::placeholder,
#header .search-input::placeholder {
    color: var(--z-text-muted) !important;
}

#header .header-search .search-icon,
#header .header-search i,
#header .header-search svg {
    color: var(--z-text-muted) !important;
}

/* Nav items — dark text on white */
#header .navbar-nav > li > a {
    color: var(--z-text-secondary) !important;
    height: var(--z-header-height) !important;
    padding: 14px 10px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    transition: var(--z-transition) !important;
}

#header .navbar-nav > li > a:hover {
    color: var(--z-primary) !important;
    background: transparent !important;
}

/* Header icon buttons — Zoho style */
#header .navbar-right > li.icon,
#header .navbar-right > li.header-notifications,
#header .navbar-right > li.notifications-wrapper {
    margin: 0 0 0 2px !important;
}

#header .navbar-right > li > a,
#header .navbar-right > li > a.dropdown-toggle,
#header .navbar-right > li.icon > a,
#header .navbar-right > li.icon > a.dropdown-toggle {
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    padding: 0 !important;
    transition: var(--z-transition) !important;
    position: relative !important;
    margin-top: 9px !important;
}

#header .navbar-right > li > a:hover,
#header .navbar-right > li.icon > a:hover {
    background: var(--z-sidebar-hover) !important;
}

/* Force all header nav icons to proper size — override Tailwind fa-lg etc */
#header .navbar-right > li > a i,
#header .navbar-right > li > a i.fa-lg,
#header .navbar-right > li > a i[class*="fa-"],
#header .navbar-right > li > a .fa,
#header .navbar-right > li > a .fa-lg,
#header .navbar-nav > li > a i,
#header .navbar-nav > li > a .fa,
#header .navbar-nav > li > a .icon {
    color: #5b6b82 !important;
    font-size: 15px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    text-align: center !important;
}

/* SVG icons in header */
#header .navbar-right > li > a svg,
#header .navbar-nav > li > a svg {
    color: #5b6b82 !important;
    stroke: #5b6b82 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
}

/* Hover — all icons turn blue */
#header .navbar-right > li > a:hover i,
#header .navbar-right > li > a:hover i[class*="fa-"],
#header .navbar-right > li > a:hover .fa,
#header .navbar-nav > li > a:hover i,
#header .navbar-nav > li > a:hover .fa,
#header .navbar-nav > li > a:hover svg {
    color: var(--z-primary) !important;
    stroke: var(--z-primary) !important;
}


/* Notification badge counter */
#header .navbar-nav .badge,
#header .navbar-nav .label,
#header .navbar-right span[class*="tw-rounded-full"][class*="tw-absolute"] {
    background: var(--z-accent) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-size: 9px !important;
    padding: 1px 4px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    line-height: 1.2 !important;
    border: 2px solid #fff !important;
}

/* Header dropdowns */
#header .dropdown-menu {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: var(--z-shadow-lg) !important;
    padding: 6px !important;
    background: #fff !important;
    margin-top: 4px !important;
}

#header .dropdown-menu > li > a {
    color: var(--z-text) !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
}

#header .dropdown-menu > li > a:hover {
    background: var(--z-sidebar-hover) !important;
    color: var(--z-primary) !important;
}

/* Hide quick create + and settings from header */
#header .navbar-nav .icon[title*="quick_create"],
#header .navbar-nav > li:has(> a[href*="/settings"]),
#header ul.nav.navbar-nav.visible-md.visible-lg {
    display: none !important;
}
#header .navbar-right > li > a[href*="/settings"] {
    display: none !important;
}

/* ── Header Branch Switcher — Bold, prominent pill ── */
.header-branch-switcher {
    margin: 0 12px !important;
    position: relative !important;
}
#header .navbar-right > li.header-branch-switcher > a.branch-switcher-trigger,
.header-branch-switcher .branch-switcher-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 18px 7px 14px !important;
    background: linear-gradient(135deg, var(--z-primary, #2c83ec), var(--z-primary-dark, #1b5eb5)) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    border: none !important;
    margin-top: 9px !important;
    box-shadow: 0 2px 8px rgba(44,131,236,0.25) !important;
    letter-spacing: 0.2px !important;
    text-decoration: none !important;
    height: auto !important;
    width: auto !important;
}
#header .navbar-right > li.header-branch-switcher > a.branch-switcher-trigger:hover,
#header .navbar-right > li.header-branch-switcher > a.branch-switcher-trigger:focus,
#header .navbar-right > li.header-branch-switcher.open > a.branch-switcher-trigger {
    background: linear-gradient(135deg, var(--z-primary-dark, #1b5eb5), #1550a0) !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(44,131,236,0.35) !important;
    transform: translateY(-1px) !important;
}
#header .navbar-right > li.header-branch-switcher > a i.fa-code-branch {
    font-size: 13px !important;
    opacity: 0.9 !important;
}
#header .navbar-right > li.header-branch-switcher > a i.fa-caret-down {
    font-size: 11px !important;
    opacity: 0.7 !important;
    margin-left: 2px !important;
}
#header .navbar-right > li.header-branch-switcher > a .branch-current-name {
    display: inline !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #fff !important;
}
.branch-dropdown-menu {
    min-width: 260px !important;
    padding: 8px 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
    border: none !important;
    margin-top: 8px !important;
}
.branch-dropdown-menu .dropdown-header {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--z-text-muted, #8c9bab) !important;
    padding: 10px 16px 8px !important;
    border-bottom: 1px solid var(--z-border-light, #f0f2f5) !important;
    margin-bottom: 4px !important;
}
.branch-dropdown-menu > li > a {
    padding: 10px 16px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--z-text, #475569) !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.12s ease !important;
}
.branch-dropdown-menu > li > a:hover {
    background: var(--z-primary-light, #e8f2fd) !important;
    color: var(--z-primary, #2c83ec) !important;
}
.branch-dropdown-menu > li.active > a {
    background: var(--z-primary-light, #e8f2fd) !important;
    color: var(--z-primary, #2c83ec) !important;
    font-weight: 600 !important;
}
.branch-dropdown-menu > li .label-default {
    background: #dbeafe !important;
    color: var(--z-primary, #2c83ec) !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    font-size: 9px !important;
    padding: 2px 5px !important;
}
.branch-dropdown-menu .divider {
    margin: 6px 14px !important;
    background: var(--z-border-light, #f0f2f5) !important;
}

/* Responsive — compact on small screens */
@media (max-width: 992px) {
    .header-branch-switcher .branch-current-name {
        max-width: 100px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}
@media (max-width: 768px) {
    .header-branch-switcher .branch-switcher-trigger {
        padding: 5px 10px 5px 8px !important;
        font-size: 12px !important;
        margin-top: 12px !important;
        border-radius: 6px !important;
    }
    .header-branch-switcher {
        margin: 0 4px !important;
    }
}


/* ============================================
   4. SIDEBAR — White / Light Zoho Style
   ============================================ */
#menu,
aside#menu,
aside.sidebar {
    background: var(--z-sidebar-bg) !important;
    border-right: 1px solid var(--z-sidebar-border) !important;
    border-left: none !important;
    width: var(--z-sidebar-width) !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 999 !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Sidebar scrollbar */
#menu::-webkit-scrollbar { width: 3px; }
#menu::-webkit-scrollbar-track { background: transparent; }
#menu::-webkit-scrollbar-thumb { background: #d5dbe3; border-radius: 3px; }

/* Setup menu panel — must overlay on top of the fixed sidebar */
#setup-menu-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--z-sidebar-width, 220px) !important;
    z-index: 10000 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--z-sidebar-bg, #fff) !important;
    border-right: 1px solid var(--z-sidebar-border, #e8ecf1) !important;
    box-shadow: 2px 0 12px rgba(0,0,0,0.08) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 0 !important;
}
#setup-menu-wrapper::-webkit-scrollbar { width: 3px; }
#setup-menu-wrapper::-webkit-scrollbar-track { background: transparent; }
#setup-menu-wrapper::-webkit-scrollbar-thumb { background: #d5dbe3; border-radius: 3px; }

/* User profile at top */
.sidebar .user-profile,
.sidebar .sidebar-profile,
.sidebar-user-info {
    border-bottom: 1px solid var(--z-border-light) !important;
    background: transparent !important;
    padding: 12px 14px !important;
}
/* Dashboard (first sidebar item) — compact, no extra spacing */
.sidebar > .nav > li:first-child {
    background: transparent !important;
    padding: 0 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.sidebar .user-profile img,
.sidebar .sidebar-profile img,
.sidebar-user-info img {
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    border: 2px solid var(--z-border) !important;
}

.sidebar .user-profile .media-body,
.sidebar-user-info .user-name {
    color: var(--z-text-heading) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.sidebar .user-profile small,
.sidebar-user-info .user-email {
    color: var(--z-text-muted) !important;
    font-size: 11px !important;
}

/* Group labels */
.sidebar > ul.nav > li.sidebar-group-heading,
.sidebar > ul > li.menu-item-header,
.sidebar .sidebar-title,
.sidebar > ul.nav > li > span.menu-text:empty + ul,
.sidebar ul.nav li.heading {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--z-text-muted) !important;
    padding: 18px 16px 6px 16px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Sidebar group heading labels via ::before */
.sidebar > ul.nav > li.heading > a::before,
.sidebar > ul.nav > li.sidebar-group-heading > span {
    color: var(--z-text-muted) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

/* Menu links — Base */
.sidebar > ul.nav > li > a {
    color: var(--z-sidebar-text) !important;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 14px 10px 16px !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    margin: 1px 0 !important;
    transition: var(--z-transition) !important;
    display: flex !important;
    align-items: center !important;
}

/* Menu links — Hover */
.sidebar > ul.nav > li > a:hover {
    color: var(--z-text-heading) !important;
    background: var(--z-sidebar-hover) !important;
    border-left-color: transparent !important;
}

/* Menu links — Active */
.sidebar > ul.nav > li.active > a,
.sidebar > ul.nav > li.active > a:hover,
.sidebar > ul.nav > li.active > a:focus {
    color: var(--z-sidebar-active-text) !important;
    background: var(--z-sidebar-active-bg) !important;
    border-left: 3px solid var(--z-sidebar-active-border) !important;
    font-weight: 600 !important;
}

/* Icons */
.sidebar > ul.nav > li > a > i,
.sidebar > ul.nav > li > a > i,
.sidebar > ul.nav > li > a > .fa,
.sidebar > ul.nav > li > a > svg,
.sidebar > ul.nav > li > a > .menu-icon {
    color: #5a6a7e !important;
    font-size: 16px !important;
    width: 22px !important;
    min-width: 22px !important;
    margin-right: 10px !important;
    text-align: center !important;
    transition: var(--z-transition) !important;
    flex-shrink: 0 !important;
}

.sidebar > ul.nav > li > a:hover > i,
.sidebar > ul.nav > li > a:hover > .fa,
.sidebar > ul.nav > li > a:hover > svg,
.sidebar > ul.nav > li > a:hover > .menu-icon {
    color: var(--z-text-secondary) !important;
}

.sidebar > ul.nav > li.active > a > i,
.sidebar > ul.nav > li.active > a > .fa,
.sidebar > ul.nav > li.active > a > svg,
.sidebar > ul.nav > li.active > a > .menu-icon {
    color: var(--z-sidebar-active-text) !important;
}

/* Sidebar badge */
.sidebar > ul.nav > li > a .badge {
    background: var(--z-primary) !important;
    color: #fff !important;
    font-size: 10px !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    margin-left: auto !important;
}

/* Submenu — style expanded state only (don't override .collapse hidden state) */
.sidebar .nav .collapse.in,
.sidebar .nav-second-level.in {
    background: #f0f4f8 !important;
    border-left: none !important;
    padding: 2px 0 !important;
    position: relative !important;
    z-index: 1000 !important;
}
/* Ensure collapsing animation works — don't override overflow */
.sidebar .nav .collapsing {
    background: #f0f4f8 !important;
    border-left: none !important;
}

.sidebar > ul.nav > li > ul > li > a,
.sidebar ul.nav ul li a {
    color: #1e293b !important;
    font-size: 14px !important;
    padding: 9px 14px 9px 38px !important;
    font-weight: 500 !important;
    border-left: 3px solid transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Submenu icons — Zoho-style: small, visible, consistent */
.sidebar ul.nav ul li a i.menu-icon,
.sidebar ul.nav ul li a i[class*="fa-"] {
    font-size: 14px !important;
    width: 18px !important;
    min-width: 18px !important;
    text-align: center !important;
    color: #5a6a7e !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    transition: var(--z-transition) !important;
}

.sidebar ul.nav ul li a:hover i.menu-icon,
.sidebar ul.nav ul li a:hover i[class*="fa-"] {
    color: var(--z-primary) !important;
    opacity: 1 !important;
}

.sidebar ul.nav ul li.active a i.menu-icon,
.sidebar ul.nav ul li.active a i[class*="fa-"] {
    color: var(--z-primary) !important;
    opacity: 1 !important;
}

.sidebar > ul.nav > li > ul > li > a:hover,
.sidebar ul.nav ul li a:hover {
    color: var(--z-primary) !important;
    background: var(--z-sidebar-hover) !important;
}

.sidebar > ul.nav > li > ul > li.active > a,
.sidebar ul.nav ul li.active a {
    color: var(--z-primary) !important;
    font-weight: 600 !important;
    background: var(--z-primary-light) !important;
    border-left-color: var(--z-primary) !important;
}

/* Chevron/arrow — vertically centered, pushed to right */
.sidebar > ul.nav > li > a .caret,
.sidebar > ul.nav > li > a .collapse-icon,
.sidebar > ul.nav > li > a .arrow,
.sidebar > ul.nav > li > a > span.fa.arrow {
    color: var(--z-text-muted) !important;
    margin-left: auto !important;
    float: none !important;
    margin-top: 0 !important;
    align-self: center !important;
    line-height: 1 !important;
}

/* Sidebar collapse toggle */
.sidebar .collapse-sidebar-btn,
#menu .collapse-sidebar-btn {
    color: var(--z-text-muted) !important;
    border-top: 1px solid var(--z-border-light) !important;
}

.sidebar .collapse-sidebar-btn:hover {
    color: var(--z-primary) !important;
}


/* ============================================
   5. CONTENT AREA & BODY
   ============================================ */
#wrapper {
    background: var(--z-body-bg) !important;
    margin-left: var(--z-sidebar-width, 220px) !important;
    min-height: 100vh !important;
    height: auto !important;
}

#wrapper > .content,
.main-content,
.content {
    padding: var(--z-space-md) 15px !important;
    padding-top: calc(var(--z-header-height) + var(--z-space-md)) !important;
    min-height: calc(100vh - var(--z-header-height)) !important;
    overflow: visible !important;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 var(--z-space-md) 0 !important;
    font-size: 12px !important;
}

.breadcrumb > li {
    color: var(--z-text-muted) !important;
}

.breadcrumb > li a {
    color: var(--z-text-muted) !important;
    text-decoration: none !important;
}

.breadcrumb > li a:hover {
    color: var(--z-primary) !important;
}

.breadcrumb > .active {
    color: var(--z-text-secondary) !important;
}

/* Page title */
.page-heading, .page-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    margin-bottom: var(--z-space-sm) !important;
}


/* ============================================
   6. CARDS, PANELS, WIDGETS
   ============================================ */
.panel_s {
    background: var(--z-card-bg) !important;
    border: 1px solid #eef1f5 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    margin-bottom: var(--z-space-lg) !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease !important;
}

.panel_s:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.panel_s > .panel-body {
    padding: 20px !important;
}

/* Table-full panels: no inner padding so table stretches edge-to-edge */
.panel_s > .panel-body.panel-table-full,
.panel_s .panel-body.panel-table-full {
    padding: 0 !important;
}

.panel_s > .panel-heading,
.panel_s .panel-heading {
    background: #fff !important;
    border-bottom: 1px solid #eef1f5 !important;
    padding: 16px 20px !important;
}

.panel_s .panel-heading h4,
.panel_s .panel-heading .panel-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--z-text-heading) !important;
    margin: 0 !important;
    letter-spacing: 0.01em !important;
}

.panel_s .panel-footer {
    background: #fafbfc !important;
    border-top: 1px solid var(--z-border-light) !important;
    padding: 12px 20px !important;
}

/* Widget */
.widget {
    border-radius: var(--z-radius-lg) !important;
    border: none !important;
    background: var(--z-card-bg) !important;
    box-shadow: var(--z-shadow) !important;
    margin-bottom: var(--z-space-lg) !important;
    overflow: hidden !important;
}

.widget .panel, .widget .panel_s {
    box-shadow: none !important;
    margin-bottom: 0 !important;
    border: none !important;
}

.widget .panel-heading, .widget .panel_s .panel-heading {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    background: #fff !important;
}

.widget .panel-body { padding: 16px 20px !important; }

/* Sales panel */
.panel_s.sales-panel {
    border-radius: var(--z-radius-lg) !important;
    box-shadow: var(--z-shadow) !important;
}

/* Hero panel */
.hero-panel,
.panel_s.panel-table-full, .panel-table-full,
.panel_s:has(.table-responsive),
.panel_s:has(.dataTables_wrapper) {
    overflow: visible !important;
}
/* Inner table-full div needs auto scroll for wide tables */
.panel-table-full {
    overflow-x: auto !important;
    overflow-y: visible !important;
}


/* ============================================
   7. TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    color: var(--z-text-heading) !important;
}

.text-primary { color: var(--z-primary) !important; }
.text-success { color: var(--z-success) !important; }
.text-info { color: var(--z-info) !important; }
.text-warning { color: var(--z-warning) !important; }
.text-danger { color: var(--z-danger) !important; }
.text-muted { color: var(--z-text-muted) !important; }

.bg-primary { background-color: var(--z-primary) !important; }
.bg-success { background-color: var(--z-success) !important; }
.bg-info { background-color: var(--z-info) !important; }
.bg-warning { background-color: var(--z-warning) !important; }
.bg-danger { background-color: var(--z-danger) !important; }


/* ============================================
   8. BUTTONS — Zoho Style
   ============================================ */
.btn {
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: var(--z-transition) !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
}

.btn:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important; }

.btn-xs { padding: 3px 10px !important; font-size: 11px !important; }
.btn-sm { padding: 5px 12px !important; font-size: 12px !important; }
.btn-lg { padding: 10px 24px !important; font-size: 15px !important; }

/* Primary — Brand Maroon/Purple */
.btn-primary {
    background: var(--z-brand) !important;
    color: #fff !important;
    border-color: var(--z-brand) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--z-brand-hover) !important;
    border-color: var(--z-brand-hover) !important;
    box-shadow: 0 2px 8px var(--z-brand-glow, rgba(90,23,64,0.3)) !important;
}

/* Default / Secondary */
.btn-default,
a.btn-default,
a.btn-default:visited {
    background: #fff !important;
    color: #333 !important;
    border-color: #d5dbe3 !important;
}
.btn-default:hover,
a.btn-default:hover {
    background: #f7f8fa !important;
    border-color: #c0c8d2 !important;
    color: #1a2332 !important;
}

/* Success */
.btn-success {
    background: var(--z-success) !important;
    color: #fff !important;
    border-color: var(--z-success) !important;
}
.btn-success:hover {
    background: #27b562 !important;
    box-shadow: 0 2px 8px rgba(46,204,113,0.3) !important;
}

/* Info — Blue */
.btn-info {
    background: var(--z-primary) !important;
    color: #fff !important;
    border-color: var(--z-primary) !important;
}
.btn-info:hover {
    background: var(--z-primary-hover) !important;
    box-shadow: 0 2px 8px rgba(44,131,236,0.3) !important;
}

/* Warning */
.btn-warning {
    background: var(--z-warning) !important;
    color: #fff !important;
    border-color: var(--z-warning) !important;
}

/* Danger */
.btn-danger {
    background: var(--z-danger) !important;
    color: #fff !important;
    border-color: var(--z-danger) !important;
}

/* Action bar buttons (New Lead, Create Invoice, etc.) */
._buttons,
.btn-bottom-toolbar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 0 !important;
}

._buttons .btn-primary {
    border-radius: 8px !important;
    padding: 9px 20px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px var(--z-brand-glow, rgba(90,23,64,0.2)) !important;
}

._buttons .btn-primary:hover {
    box-shadow: 0 4px 12px var(--z-brand-shadow, rgba(90,23,64,0.3)) !important;
}

._buttons .btn-default {
    border-radius: 8px !important;
    padding: 9px 16px !important;
}


/* ============================================
   9. GLOBAL ADMIN DATATABLE STYLING
      Clean ESS-style design applied to ALL tables
   ============================================ */

/* ── 9.1 Card Wrapper — White card with subtle shadow ── */
.panel_s:has(.dataTables_wrapper),
.panel_s:has(.table-responsive),
.panel_s.panel-table-full,
.panel-table-full {
    border-radius: var(--z-radius-lg) !important;
    border: 1px solid var(--z-border-light) !important;
    box-shadow: var(--z-shadow-sm) !important;
    overflow: visible !important;
}

.panel_s:has(.dataTables_wrapper):hover,
.panel_s:has(.table-responsive):hover {
    box-shadow: var(--z-shadow) !important;
}

/* ── 9.2 Base Table Reset ── */
.table {
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

/* ── 9.3 Column Headers — UPPERCASE, 11px, sort arrows ── */
.table > thead > tr > th {
    background: #f8f9fc !important;
    color: #6b7a90 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid #eef1f5 !important;
    border-top: none !important;
    white-space: nowrap !important;
    position: relative !important;
}

/* Sort arrow styling */
.table.dataTable > thead > tr > th.sorting::after,
.table.dataTable > thead > tr > th.sorting_asc::after,
.table.dataTable > thead > tr > th.sorting_desc::after,
table.dataTable > thead > tr > th.sorting::after,
table.dataTable > thead > tr > th.sorting_asc::after,
table.dataTable > thead > tr > th.sorting_desc::after {
    opacity: 0.4 !important;
    font-size: 10px !important;
}
.table.dataTable > thead > tr > th.sorting_asc::after,
.table.dataTable > thead > tr > th.sorting_desc::after,
table.dataTable > thead > tr > th.sorting_asc::after,
table.dataTable > thead > tr > th.sorting_desc::after {
    opacity: 0.85 !important;
    color: var(--z-brand, #5A1740) !important;
}

/* ── 9.3b Sticky Table Headers — Stay fixed when scrolling ── */
.table > thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 11 !important;
}

/* ── 9.4 Table Body — compact enterprise padding ── */
.table > tbody > tr > td {
    padding: 10px 14px !important;
    font-size: 13px !important;
    color: #333e50 !important;
    border-bottom: 1px solid #eef1f5 !important;
    border-top: none !important;
    vertical-align: middle !important;
    transition: background 0.15s ease !important;
}

/* Last row — no bottom border */
.table > tbody > tr:last-child > td {
    border-bottom: none !important;
}

/* ── 9.5 Row Hover & Zebra Striping — Clear row separation ── */
.table > tbody > tr:nth-of-type(even) > td {
    background: #f8fafc !important;
}
.table > tbody > tr:nth-of-type(odd) > td {
    background: #fff !important;
}
.table > tbody > tr:hover > td {
    background: var(--z-brand-light, #faf8fb) !important;
}

/* Striped tables — same pattern */
.table-striped > tbody > tr:nth-of-type(odd) > td {
    background: #f8fafc !important;
}
.table-striped > tbody > tr:nth-of-type(even) > td {
    background: #fff !important;
}
.table-striped > tbody > tr:hover > td {
    background: var(--z-brand-light, #faf8fb) !important;
}

/* ── 9.6 Status Badges — Rounded pills ── */
.table .label,
.table .badge,
.table .label-default,
.table .label-success,
.table .label-warning,
.table .label-danger,
.table .label-info,
.table .label-primary {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    display: inline-block !important;
    line-height: 1.3 !important;
    letter-spacing: 0.2px !important;
    text-transform: capitalize !important;
    border: none !important;
}

.table .label-success { background: var(--z-success-bg) !important; color: var(--z-success-text) !important; }
.table .label-warning { background: var(--z-warning-bg) !important; color: var(--z-warning-text) !important; }
.table .label-danger  { background: var(--z-danger-bg) !important;  color: var(--z-danger-text) !important;  }
.table .label-info    { background: var(--z-info-bg) !important;    color: var(--z-info-text) !important;    }
.table .label-primary { background: var(--z-primary-light) !important; color: var(--z-primary-dark) !important; }
.table .label-default { background: #f0f2f5 !important; color: var(--z-text-secondary) !important; }

/* ── 9.7 Action Buttons — 30px icon circles ── */
.table .row-options a,
.table td .row-options a {
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: var(--z-text-muted) !important;
    background: transparent !important;
    border: 1px solid var(--z-border-light) !important;
    transition: var(--z-transition) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    margin: 0 2px !important;
}

.table .row-options a:hover {
    background: var(--z-brand-50, #f5eef2) !important;
    color: var(--z-brand, #5A1740) !important;
    border-color: var(--z-brand-border, #e0d0d8) !important;
}

/* Delete action — red on hover */
.table .row-options a._delete:hover,
.table .row-options a[onclick*="delete"]:hover,
.table .row-options a.text-danger:hover {
    background: var(--z-danger-bg) !important;
    color: var(--z-danger) !important;
    border-color: var(--z-danger) !important;
}

/* Row options container */
/* Override framework's hide-until-hover on row-options */
table .row-options,
table tr td .row-options {
    position: static !important;
    left: auto !important;
    right: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

/* ── 9.8 DataTables Controls — Length, Filter, Info ── */
.dataTables_wrapper {
    padding: 0 !important;
}

/* Top row: length + buttons left, search right — single line */
.dataTables_wrapper > .row:first-child,
.dataTables_wrapper > div:first-child:has(.dataTables_length) {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 16px !important;
}

.dataTables_wrapper > .row:first-child > [class*="col-"] {
    float: none !important;
    width: auto !important;
    flex: none !important;
    padding: 0 !important;
}

.dataTables_wrapper > .row:first-child > [class*="col-"]:last-child {
    margin-left: auto !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    padding: 0 !important;
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: var(--z-text-secondary) !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
}

.dataTables_wrapper .dataTables_length select {
    height: 34px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    border: 1px solid var(--z-border) !important;
    padding: 4px 10px !important;
    background: #fff !important;
    color: var(--z-text) !important;
    transition: var(--z-transition) !important;
    appearance: auto !important;
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--z-brand, #5A1740) !important;
    box-shadow: 0 0 0 3px var(--z-brand-shadow-light, rgba(90,23,64,0.1)) !important;
    outline: none !important;
}

/* Search input — rounded, clean border */
.dataTables_wrapper .dataTables_filter input {
    border-radius: 20px !important;
    border: 1px solid #e0e5ec !important;
    padding: 7px 16px !important;
    font-size: 13px !important;
    height: 36px !important;
    min-width: 220px !important;
    transition: var(--z-transition) !important;
    background: #f8f9fc !important;
    color: var(--z-text) !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--z-brand, #5A1740) !important;
    box-shadow: 0 0 0 3px var(--z-brand-shadow-light, rgba(90,23,64,0.1)) !important;
    background: #fff !important;
    outline: none !important;
}

/* "X shown" counter — muted text */
.dataTables_wrapper .dataTables_info {
    font-size: 12px !important;
    color: var(--z-text-muted) !important;
    padding: 12px 16px !important;
}

/* ── 9.9 DataTables Pagination — Rounded buttons ── */
.dataTables_wrapper .dataTables_paginate {
    padding: 8px 16px 12px 16px !important;
    text-align: right !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-block !important;
    min-width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 10px !important;
    margin: 0 1px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--z-text-secondary, #64748b) !important;
    background: transparent !important;
    border: none !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background: var(--z-brand-50, #f5eef2) !important;
    color: var(--z-brand, #5A1740) !important;
}

/* Active page = brand maroon pill */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--z-brand, #5A1740) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(90,23,64,0.25) !important;
}

/* Disabled state */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #cbd5e1 !important;
    background: transparent !important;
    border: none !important;
    cursor: default !important;
    box-shadow: none !important;
    opacity: 0.5 !important;
}

/* ── 9.10 Bootstrap Pagination (fallback) ── */
.pagination > li > a, .pagination > li > span {
    color: var(--z-text-secondary) !important;
    border: none !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    margin: 0 2px !important;
    transition: var(--z-transition) !important;
}

.pagination > li > a:hover {
    background: var(--z-brand-50, #f5eef2) !important;
    color: var(--z-brand, #5A1740) !important;
    border-color: var(--z-brand-border, #e0d0d8) !important;
}

.pagination > .active > a,
.pagination > .active > span {
    background: var(--z-brand, #5A1740) !important;
    border-color: var(--z-brand, #5A1740) !important;
    color: #fff !important;
}

/* ── 9.11 Toggle Switch — Consistent active/inactive ── */
.onoffswitch {
    position: relative !important;
    width: 46px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.onoffswitch-checkbox {
    display: none !important;
}

.onoffswitch-label {
    display: block !important;
    overflow: hidden !important;
    cursor: pointer !important;
    border-radius: 20px !important;
    margin: 0 !important;
    height: 24px !important;
    border: 1px solid #d5dbe3 !important;
}

.onoffswitch-inner {
    display: block !important;
    width: 200% !important;
    margin-left: -100% !important;
    transition: margin 0.2s ease-in-out !important;
}

.onoffswitch-inner::before,
.onoffswitch-inner::after {
    display: block !important;
    float: left !important;
    width: 50% !important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: 0 !important;
    box-sizing: border-box !important;
}

.onoffswitch-inner::before {
    background: var(--z-primary) !important;
    content: "" !important;
}

.onoffswitch-inner::after {
    background: #e0e5ec !important;
    content: "" !important;
}

.onoffswitch-switch {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background: #fff !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 3px !important;
    right: 25px !important;
    transition: right 0.2s ease-in-out !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
    border: none !important;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0 !important;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 3px !important;
}

/* ── 9.12 Empty State — Centered icon + muted message ── */
.dataTables_wrapper .dataTables_empty,
.table tbody td.dataTables_empty {
    padding: 48px 20px !important;
    text-align: center !important;
    color: var(--z-text-muted) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    background: #fff !important;
    border-bottom: none !important;
}

/* ── 9.13 Table-Responsive Wrapper ── */
.table-responsive {
    border: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ── 9.14 Checkbox Column — Compact ── */
.table > thead > tr > th:first-child .checkbox,
.table > tbody > tr > td:first-child .checkbox {
    margin: 0 !important;
    padding: 0 !important;
}

.table > thead > tr > th.sorting_disabled:first-child {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    text-align: center !important;
}

.table > tbody > tr > td:first-child {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    text-align: center !important;
}

/* ── 9.15 DataTables Bottom Bar (info + paginate) ── */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    border-top: 1px solid #f1f5f9 !important;
    margin-top: 0 !important;
}

/* ── 9.16 Links Inside Table Cells ── */
.table > tbody > tr > td a:not(.btn):not(.row-options a) {
    color: var(--z-primary) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.table > tbody > tr > td a:not(.btn):not(.row-options a):hover {
    color: var(--z-primary-hover) !important;
    text-decoration: underline !important;
}

/* Stat cards on top of list pages */
.top_stats_wrapper {
    background: var(--z-card-bg) !important;
    border-radius: var(--z-radius-lg) !important;
    padding: 16px 18px !important;
    border: none !important;
    box-shadow: var(--z-shadow-sm) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: var(--z-transition) !important;
}

.top_stats_wrapper:hover {
    box-shadow: var(--z-shadow) !important;
}

/* Stat card text */
.top_stats_wrapper .tw-text-neutral-600,
.top_stats_wrapper .tw-text-neutral-800 {
    color: var(--z-text-secondary) !important;
}

.top_stats_wrapper .tw-font-medium,
.top_stats_wrapper .text-muted,
.top_stats_wrapper span.tw-text-neutral-600 {
    font-size: 12px !important;
    color: var(--z-text-muted) !important;
}

.top_stats_wrapper .tw-text-2xl,
.top_stats_wrapper .tw-text-xl,
.top_stats_wrapper .tw-font-semibold,
.top_stats_wrapper h3,
.top_stats_wrapper .tw-text-neutral-800 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
}

.top_stats_wrapper .progress {
    height: 3px !important;
    border-radius: 2px !important;
    background: var(--z-border-light) !important;
    margin: 8px 0 0 0 !important;
}

.top_stats_wrapper .progress-bar {
    background: var(--z-primary) !important;
}

/* Stat card icon colors */
.quick-stats-invoices .top_stats_wrapper svg,
.quick-stats-invoices .top_stats_wrapper .menu-icon { color: var(--z-danger) !important; }
.quick-stats-leads .top_stats_wrapper svg,
.quick-stats-leads .top_stats_wrapper .menu-icon { color: var(--z-primary) !important; }
.quick-stats-projects .top_stats_wrapper svg,
.quick-stats-projects .top_stats_wrapper .menu-icon { color: var(--z-success) !important; }
.quick-stats-tasks .top_stats_wrapper svg,
.quick-stats-tasks .top_stats_wrapper .menu-icon { color: #7c3aed !important; }

/* Stat card container — remove colored borders */
.top_stats_wrapper .col-md-2 > div,
.top_stats_wrapper .col-lg-2 > div,
.top_stats_wrapper [class*="col-"] > div[class*="tw-rounded"] {
    border: 1px solid var(--z-border-light) !important;
    border-left: 1px solid var(--z-border-light) !important;
    border-radius: var(--z-radius) !important;
}

.top_stats_wrapper [class*="col-"] > div:hover {
    border-color: var(--z-border) !important;
}

/* Remove rainbow borders */
.top_stats_wrapper [class*="col-"]:nth-child(n) > div {
    border-left-color: var(--z-border-light) !important;
}

.top_stats_wrapper .text-dark,
.top_stats_wrapper .tw-font-semibold {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
}

.top_stats_wrapper .text-uppercase,
.top_stats_wrapper .tw-truncate,
.top_stats_wrapper small {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
    letter-spacing: 0.3px !important;
}


/* ============================================
   10. FORMS & INPUTS — Zoho Style
   ============================================ */
.form-control {
    height: 40px !important;
    border: 1px solid #d5dbe3 !important;
    border-radius: var(--z-radius) !important;
    font-size: 14px !important;
    color: var(--z-text) !important;
    padding: 8px 14px !important;
    background: #fff !important;
    transition: var(--z-transition) !important;
    box-shadow: none !important;
}

.form-control:focus {
    border-color: var(--z-primary) !important;
    box-shadow: 0 0 0 3px rgba(44,131,236,0.15) !important;
    outline: none !important;
}

.form-control:hover:not(:focus) {
    border-color: #b8c0cc !important;
}

.form-control::placeholder {
    color: var(--z-text-muted) !important;
}

textarea.form-control {
    height: auto !important;
    min-height: 90px !important;
}

/* Labels — NOT uppercase (Zoho style) */
.form-group label,
.control-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--z-text-secondary) !important;
    margin-bottom: 6px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.form-group {
    margin-bottom: 20px !important;
}

.form-group label .req {
    color: var(--z-danger) !important;
}

.help-block {
    font-size: 12px !important;
    color: var(--z-text-muted) !important;
    margin-top: 4px !important;
}

/* Select2 */
.select2-container--default .select2-selection--single {
    height: 40px !important;
    border: 1px solid #d5dbe3 !important;
    border-radius: var(--z-radius) !important;
    transition: var(--z-transition) !important;
    box-shadow: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    font-size: 14px !important;
    color: var(--z-text) !important;
    padding-left: 14px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
    right: 8px !important;
}

.select2-container--default .select2-selection--single:hover {
    border-color: #b8c0cc !important;
}

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--z-primary) !important;
    box-shadow: 0 0 0 3px rgba(44,131,236,0.15) !important;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid #d5dbe3 !important;
    border-radius: var(--z-radius) !important;
    min-height: 40px !important;
    padding: 4px 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--z-primary-light) !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 5px !important;
    color: var(--z-primary-dark) !important;
    font-size: 12px !important;
    padding: 2px 8px !important;
}

.select2-dropdown {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: var(--z-shadow-lg) !important;
}

.select2-results__option {
    padding: 8px 14px !important;
    font-size: 13px !important;
}

.select2-results__option--highlighted[aria-selected] {
    background: var(--z-primary) !important;
    color: #fff !important;
}

/* Input group */
.input-group-addon {
    background: #f7f8fa !important;
    border: 1px solid #d5dbe3 !important;
    border-radius: var(--z-radius) 0 0 var(--z-radius) !important;
    color: var(--z-text-muted) !important;
    font-size: 14px !important;
}

.input-group .form-control:last-child {
    border-radius: 0 var(--z-radius) var(--z-radius) 0 !important;
}

/* Switch */
.onoffswitch-inner:before {
    background: var(--z-primary) !important;
}

/* ── Bootstrap-Select / Selectpicker — Fix double border ── */
/* When bootstrap-select adds .form-control to its wrapper div,
   BOTH the wrapper and inner .btn get borders. Remove wrapper border. */
.bootstrap-select.form-control,
.bootstrap-select.form-control:focus,
.bootstrap-select.form-control:hover,
.bootstrap-select.form-control:active,
div.bootstrap-select,
div.bootstrap-select.form-control,
.dropdown.bootstrap-select,
.dropdown.bootstrap-select.form-control {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    outline: none !important;
}

/* Hide the raw <select> ONLY when bootstrap-select has replaced it.
   Bootstrap-select adds a sibling .bootstrap-select div — target only those. */
.bootstrap-select > select.selectpicker,
.bootstrap-select > select[data-live-search="true"],
.bootstrap-select > select {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* The .btn inside bootstrap-select IS the visible select element */
.bootstrap-select .btn.dropdown-toggle,
.bootstrap-select .btn.dropdown-toggle .filter-option,
.bootstrap-select .btn.dropdown-toggle .filter-option-inner,
.bootstrap-select .btn.dropdown-toggle .filter-option-inner-inner {
    color: #333 !important;
}
.bootstrap-select .btn.dropdown-toggle {
    height: 40px !important;
    border: 1px solid #d5dbe3 !important;
    border-radius: var(--z-radius) !important;
    background: #fff !important;
    color: #333 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 8px 14px !important;
    box-shadow: none !important;
    transition: var(--z-transition) !important;
    display: flex !important;
    align-items: center !important;
}

.bootstrap-select .btn.dropdown-toggle:hover {
    border-color: #b8c0cc !important;
}

.bootstrap-select .btn.dropdown-toggle:focus,
.bootstrap-select.open .btn.dropdown-toggle,
.bootstrap-select .btn.dropdown-toggle:active {
    border-color: var(--z-primary) !important;
    box-shadow: 0 0 0 3px rgba(44,131,236,0.15) !important;
    outline: none !important;
}

.bootstrap-select .btn.dropdown-toggle .filter-option {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Multi-select bootstrap-select — hide ALL Tailwind skeleton pills, show text instead */
.bootstrap-select .filter-option-inner-inner > span[class*="tw-bg-neutral"],
.bootstrap-select .filter-option-inner-inner > span[class*="tw-rounded-full"],
.bootstrap-select .filter-option-inner-inner > span[class*="tw-h-"],
.bootstrap-select .filter-option-inner-inner > span[class*="tw-bg-"],
.bootstrap-select .filter-option-inner-inner > span[class*="tw-w-"],
.bootstrap-select .filter-option-inner-inner > span.tw-rounded-full {
    display: none !important;
}
/* Also hide any span children inside filter-option that have Tailwind utility classes */
.bootstrap-select .filter-option-inner-inner span[class*="tw-"] {
    display: none !important;
}

/* Force the filter-option to show the selected text as plain comma-separated list */
.bootstrap-select[multiple] .filter-option-inner-inner,
.bootstrap-select .btn.dropdown-toggle[aria-expanded] .filter-option-inner-inner {
    font-size: 13px !important;
    color: var(--z-text, #333) !important;
    opacity: 1 !important;
}

/* If bootstrap-select renders actual text content, style it */
.bootstrap-select .filter-option-inner-inner .badge,
.bootstrap-select .filter-option-inner-inner > span:not([class*="tw-"]) {
    background: var(--z-primary-50, #e8f0fe) !important;
    color: var(--z-primary, #1B73E8) !important;
    border: 1px solid var(--z-primary-100, #c5d9f7) !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    display: inline-block !important;
    margin: 1px 2px !important;
    opacity: 1 !important;
}

/* Multi-select actions box (Select All / Deselect All) */
.bootstrap-select .bs-actionsbox .btn {
    border-radius: var(--z-radius, 6px) !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
}

/* Multi-select dropdown menu items */
.bootstrap-select .dropdown-menu li a {
    padding: 6px 14px !important;
    font-size: 13px !important;
}
.bootstrap-select .dropdown-menu li a.selected {
    background: var(--z-primary-50, #e8f0fe) !important;
    color: var(--z-primary, #1B73E8) !important;
}
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus {
    background: #f1f5f9 !important;
    color: var(--z-text, #333) !important;
}

.bootstrap-select .btn.dropdown-toggle .caret {
    color: var(--z-text-muted) !important;
    border-top-color: var(--z-text-muted) !important;
}

/* Bootstrap-select dropdown menu */
.bootstrap-select .dropdown-menu {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: var(--z-shadow-lg) !important;
    padding: 6px !important;
    margin-top: 4px !important;
}

.bootstrap-select .dropdown-menu li a {
    padding: 8px 14px !important;
    font-size: 13px !important;
    color: var(--z-text) !important;
    border-radius: 6px !important;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.selected a {
    background: var(--z-primary-light) !important;
    color: var(--z-primary) !important;
}

/* Also fix bootstrap-select without .form-control class */
.bootstrap-select:not(.form-control) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Disabled bootstrap-select — remove any background bleed */
.bootstrap-select.disabled {
    background: transparent !important;
    border: none !important;
    opacity: 1 !important;
}

.bootstrap-select.disabled .btn.dropdown-toggle {
    background: #f7f8fa !important;
    color: var(--z-text-muted) !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
}

/* Ensure ALL bootstrap-select wrappers have no visible border */
div.bootstrap-select,
.dropdown.bootstrap-select {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Fix bootstrap-select inside input-group */
.input-group .bootstrap-select .btn.dropdown-toggle {
    border-radius: 0 var(--z-radius) var(--z-radius) 0 !important;
}

.input-group .bootstrap-select.input-group-btn .btn.dropdown-toggle {
    border-radius: var(--z-radius) 0 0 var(--z-radius) !important;
}

/* Native select.form-control — ensure no double styling */
select.form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%236b7a90' d='M6 8.825L.375 3.2l.884-.884L6 7.057l4.741-4.741.884.884z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    padding-right: 32px !important;
}


/* ============================================
   11. TABS — Zoho Underline Style
   ============================================ */
.nav-tabs {
    border-bottom: 2px solid var(--z-border-light) !important;
    margin-bottom: 0 !important;
}

.nav-tabs > li {
    margin-bottom: -2px !important;
}

.nav-tabs > li > a {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--z-text-muted) !important;
    background: transparent !important;
    transition: var(--z-transition) !important;
}

.nav-tabs > li:not(.active) > a:hover {
    color: var(--z-text) !important;
    background: transparent !important;
    border-bottom-color: #c0c8d2 !important;
}

/* Active tab — blue underline, NO filled background */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: transparent !important;
    color: var(--z-primary) !important;
    font-weight: 600 !important;
    border: none !important;
    border-bottom: 2px solid var(--z-primary) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Tab badges */
.nav-tabs > li > a .badge {
    background: var(--z-border-light) !important;
    color: var(--z-text-secondary) !important;
    font-size: 10px !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
}

.nav-tabs > li.active > a .badge {
    background: var(--z-primary-light) !important;
    color: var(--z-primary) !important;
}

/* Tab content */
.tab-content {
    padding: 20px !important;
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Standalone tab-content (not inside a panel) gets its own border */
.tab-content:not(.panel_s .tab-content):not(.panel-body .tab-content) {
    border: 1px solid var(--z-border-light) !important;
    border-top: none !important;
    border-radius: 0 0 var(--z-radius-lg) var(--z-radius-lg) !important;
}


/* ============================================
   12. MODALS & DROPDOWNS
   ============================================ */
/* Modal */
.modal-content {
    border: none !important;
    border-radius: var(--z-radius-xl) !important;
    box-shadow: var(--z-shadow-xl) !important;
    overflow: hidden !important;
}

.modal-header {
    background: #fff !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    padding: 18px 24px !important;
}

.modal-header .modal-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
}

.modal-header .close {
    font-size: 20px !important;
    color: var(--z-text-muted) !important;
    opacity: 0.6 !important;
}

.modal-body { padding: 24px !important; }

.modal-footer {
    border-top: 1px solid var(--z-border-light) !important;
    padding: 14px 24px !important;
    background: #fafbfc !important;
}

.modal-backdrop.in { opacity: 0.45 !important; }

/* Dropdown */
.dropdown-menu {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: var(--z-shadow-lg) !important;
    padding: 6px !important;
    background: #fff !important;
}

.dropdown-menu > li > a {
    padding: 10px 16px !important;
    font-size: 13px !important;
    color: var(--z-text) !important;
    border-radius: 6px !important;
    transition: var(--z-transition) !important;
}

.dropdown-menu > li > a:hover {
    background: var(--z-sidebar-hover) !important;
    color: var(--z-primary) !important;
}

.dropdown-header {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--z-text-muted) !important;
    padding: 8px 16px 4px !important;
}

/* Tooltip */
.tooltip-inner {
    background: #1a2332 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    max-width: 250px !important;
}


/* ============================================
   13. ALERTS, LABELS, BADGES
   ============================================ */
/* Alerts */
.alert {
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.alert-success { background: var(--z-success-bg) !important; color: var(--z-success-text) !important; border-left: 4px solid var(--z-success) !important; }
.alert-danger { background: var(--z-danger-bg) !important; color: var(--z-danger-text) !important; border-left: 4px solid var(--z-danger) !important; }
.alert-warning { background: var(--z-warning-bg) !important; color: var(--z-warning-text) !important; border-left: 4px solid var(--z-warning) !important; }
.alert-info { background: var(--z-info-bg) !important; color: var(--z-info-text) !important; border-left: 4px solid var(--z-info) !important; }

/* Labels — Pill shaped */
.label, span.label {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.label-primary { background: var(--z-primary-light) !important; color: var(--z-primary-dark) !important; }
.label-success { background: var(--z-success-bg) !important; color: var(--z-success-text) !important; }
.label-danger { background: var(--z-danger-bg) !important; color: var(--z-danger-text) !important; }
.label-warning { background: var(--z-warning-bg) !important; color: var(--z-warning-text) !important; }
.label-info { background: var(--z-info-bg) !important; color: var(--z-info-text) !important; }
.label-default { background: #e2e8f0 !important; color: var(--z-text) !important; }

/* Badge */
.badge {
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 10px !important;
}

/* Progress bars */
.progress {
    height: 6px !important;
    background: var(--z-border-light) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

.progress-bar { background: var(--z-primary) !important; transition: width 0.6s ease !important; }
.progress-bar-success { background: var(--z-success) !important; }
.progress-bar-warning { background: var(--z-warning) !important; }
.progress-bar-danger { background: var(--z-danger) !important; }
.progress-bar-info { background: var(--z-info) !important; }


/* ============================================
   14. DASHBOARD — Zoho Style
   ============================================ */
/* Greeting card */
.dashboard-greeting {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(135deg, #4a9af5 0%, #2c83ec 40%, #1a6fd4 100%) !important;
    padding: 18px 28px !important;
    border-radius: var(--z-radius-lg) !important;
    color: #ffffff !important;
    margin-bottom: var(--z-space-lg) !important;
    box-shadow: 0 4px 16px rgba(44,131,236,0.2) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Subtle decorative pattern on greeting */
.dashboard-greeting::before {
    content: '' !important;
    position: absolute !important;
    top: -30px !important;
    right: -20px !important;
    width: 160px !important;
    height: 160px !important;
    background: rgba(255,255,255,0.06) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.dashboard-greeting::after {
    content: '' !important;
    position: absolute !important;
    bottom: -40px !important;
    right: 80px !important;
    width: 100px !important;
    height: 100px !important;
    background: rgba(255,255,255,0.04) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.greeting-left {
    position: relative !important;
    z-index: 1 !important;
}

.greeting-right {
    position: relative !important;
    z-index: 1 !important;
}

.greeting-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 0 3px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.greeting-subtitle {
    font-size: 12.5px !important;
    color: rgba(255,255,255,0.8) !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

.greeting-time {
    font-size: 28px !important;
    font-weight: 300 !important;
    color: rgba(255,255,255,0.95) !important;
    letter-spacing: 1px !important;
    font-variant-numeric: tabular-nums !important;
}

/* KPI Row — Flex container for horizontal layout */
.sales-kpi-row {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}

/* KPI Cards — Sales dashboard */
.sales-kpi-card {
    flex: 1 1 0 !important;
    min-width: 160px !important;
    background: var(--z-card-bg) !important;
    border-radius: var(--z-radius-lg) !important;
    border: none !important;
    box-shadow: var(--z-shadow-sm) !important;
    padding: 12px 16px !important;
    transition: var(--z-transition) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.sales-kpi-card:hover {
    box-shadow: var(--z-shadow) !important;
    transform: translateY(-1px) !important;
}

/* KPI Content */
.sales-kpi-card .kpi-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
}

.sales-kpi-card .kpi-value {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    line-height: 1.2 !important;
}

.sales-kpi-card .kpi-label {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    order: -1 !important;
}

.sales-kpi-card .kpi-change {
    font-size: 11px !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
}

.sales-kpi-card .kpi-change.kpi-up {
    color: #27ae60 !important;
}

.sales-kpi-card .kpi-change.kpi-down {
    color: var(--z-danger) !important;
}

.sales-kpi-card .kpi-change.kpi-neutral {
    color: var(--z-text-muted) !important;
}

/* KPI Icon */
.sales-kpi-card .kpi-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* KPI Icon Color Variants */
.kpi-icon.kpi-blue {
    background: #e8f2fd !important;
    color: #2c83ec !important;
}
.kpi-icon.kpi-orange {
    background: #fff3e0 !important;
    color: #f5a623 !important;
}
.kpi-icon.kpi-teal {
    background: #e0f7f3 !important;
    color: #1abc9c !important;
}
.kpi-icon.kpi-green {
    background: #e8faf0 !important;
    color: #27ae60 !important;
}
.kpi-icon.kpi-purple {
    background: #f0e8fd !important;
    color: #8e44ad !important;
}

/* Notifications */
.notifications-wrapper .dropdown-menu {
    width: 360px !important;
    max-height: 420px !important;
    overflow-y: auto !important;
    padding: 0 !important;
}

/* ── Sales Pipeline ── */
.pipeline-body {
    padding: 16px 20px !important;
}

.pipeline-funnel {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.pipeline-stage {
    width: 100% !important;
}

.pipeline-stage .stage-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    border-radius: var(--z-radius) !important;
    transition: var(--z-transition) !important;
    min-height: 48px !important;
}

.pipeline-stage .stage-bar:hover {
    transform: translateX(4px) !important;
    box-shadow: var(--z-shadow-sm) !important;
}

.pipeline-stage .stage-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.pipeline-stage .stage-label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--z-text) !important;
}

.pipeline-stage .stage-count {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
    background: rgba(0,0,0,0.06) !important;
    padding: 2px 10px !important;
    border-radius: 20px !important;
    min-width: 28px !important;
    text-align: center !important;
}

.pipeline-stage .stage-amount {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    white-space: nowrap !important;
}

/* ── Top Customers List ── */
.top-customers-list {
    padding: 0 !important;
}

.top-customers-list .customer-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    transition: var(--z-transition) !important;
}

.top-customers-list .customer-row:last-child {
    border-bottom: none !important;
}

.top-customers-list .customer-row:hover {
    background: var(--z-primary-50) !important;
}

.top-customers-list .customer-rank {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--z-text-muted) !important;
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--z-body-bg) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

.top-customers-list .customer-row:first-child .customer-rank {
    background: var(--z-primary-light) !important;
    color: var(--z-primary) !important;
}

.top-customers-list .customer-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.top-customers-list .customer-name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--z-primary) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.top-customers-list .customer-name:hover {
    color: var(--z-primary-hover) !important;
    text-decoration: underline !important;
}

.top-customers-list .customer-invoices {
    font-size: 11.5px !important;
    color: var(--z-text-muted) !important;
}

.top-customers-list .customer-revenue {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* ── Followups List ── */
.followups-list .followup-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    transition: var(--z-transition) !important;
}

.followups-list .followup-row:last-child {
    border-bottom: none !important;
}

.followups-list .followup-row:hover {
    background: var(--z-primary-50) !important;
}

.followups-list .followup-priority {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    margin-top: 6px !important;
}

.followup-priority.priority-1 { background: var(--z-danger) !important; }
.followup-priority.priority-2 { background: var(--z-warning) !important; }
.followup-priority.priority-3 { background: var(--z-info) !important; }
.followup-priority.priority-4,
.followup-priority.priority-5 { background: var(--z-text-muted) !important; }
.followup-priority.priority-high { background: #e74c3c !important; }
.followup-priority.priority-medium { background: #f39c12 !important; }
.followup-priority.priority-low { background: #27ae60 !important; }

.followups-list .followup-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.followups-list .followup-name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--z-text) !important;
    text-decoration: none !important;
}

.followups-list .followup-name:hover {
    color: var(--z-primary) !important;
}

.followups-list .followup-meta {
    font-size: 12px !important;
    color: var(--z-text-muted) !important;
}

/* ── Invoice Status Badge ── */
.inv-status-badge {
    display: inline-block !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* ── Sales Table ── */
.sales-table thead th {
    background: transparent !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--z-text-muted) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--z-border) !important;
    padding: 10px 16px !important;
}

.sales-table tbody td {
    padding: 11px 16px !important;
    font-size: 13.5px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--z-border-light) !important;
}

.sales-table tbody tr:hover {
    background: var(--z-primary-50) !important;
}

.sales-table .invoice-link {
    color: var(--z-primary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.sales-table .invoice-link:hover {
    text-decoration: underline !important;
}


/* ============================================
   15. LOGIN PAGE — Light Zoho Style
   ============================================ */
body.login_admin {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8f2fd 100%) !important;
    min-height: 100vh !important;
}

body.login_admin .company-logo img {
    max-height: 60px !important;
    /* Full color logo — no filter */
    filter: none !important;
    opacity: 1 !important;
}

/* Login card */
body.login_admin .authentication-form-wrapper > .tw-bg-white,
body.login_admin .authentication-form-wrapper .panel_s,
body.login_admin .authentication-form-wrapper .panel {
    border-radius: var(--z-radius-xl) !important;
    box-shadow: var(--z-shadow-xl) !important;
    border: none !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

/* Remove any glassmorphism / dark background */
body.login_admin .authentication-form-wrapper > .tw-bg-white::before,
body.login_admin::before {
    display: none !important;
}

/* Login heading */
body.login_admin h1,
body.login_admin .authentication-form-wrapper h1 {
    color: var(--z-text-heading) !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    text-shadow: none !important;
}

/* Login form fields */
body.login_admin .form-control {
    height: 44px !important;
    border-radius: var(--z-radius) !important;
    font-size: 14px !important;
    border: 1px solid #d5dbe3 !important;
}

body.login_admin .form-control:focus {
    border-color: var(--z-primary) !important;
    box-shadow: 0 0 0 3px rgba(44,131,236,0.15) !important;
}

/* Login button */
body.login_admin .authentication-form-wrapper .btn-primary,
body.login_admin .btn-primary {
    background: var(--z-primary) !important;
    border-color: var(--z-primary) !important;
    border-radius: var(--z-radius) !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    box-shadow: 0 2px 8px rgba(44,131,236,0.3) !important;
}

body.login_admin .btn-primary:hover {
    background: var(--z-primary-hover) !important;
    box-shadow: 0 4px 16px rgba(44,131,236,0.35) !important;
}

/* Login links */
body.login_admin a {
    color: var(--z-primary) !important;
}

/* Client login */
.login-form .panel, .login-form .panel_s {
    border-radius: var(--z-radius-xl) !important;
    box-shadow: var(--z-shadow-lg) !important;
    border: none !important;
}


/* ============================================
   16. KANBAN / PIPELINE
   ============================================ */
.kan-ban-content-wrapper, .pipeline-content {
    background: var(--z-body-bg) !important;
}

.kan-ban-content {
    padding: 10px 0 !important;
    min-height: 200px !important;
}

.kanban-col, .pipeline-status {
    background: #fafbfc !important;
    border-radius: var(--z-radius) !important;
    border: 1px solid var(--z-border-light) !important;
}

.kanban-item, .pipeline-card {
    background: #fff !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: var(--z-shadow-sm) !important;
    margin: 6px 8px !important;
    padding: 12px 14px !important;
    transition: var(--z-transition) !important;
}

.kanban-item:hover, .pipeline-card:hover {
    box-shadow: var(--z-shadow) !important;
}


/* ============================================
   17. MISC ELEMENTS
   ============================================ */
/* Well */
.well {
    background: #fafbfc !important;
    border: 1px solid var(--z-border-light) !important;
    border-radius: var(--z-radius) !important;
    box-shadow: none !important;
}

/* Profile / Detail pages — accent top border only, no side borders (shadow provides edge) */
.customer_profile .panel_s:first-child,
.lead-wrapper .panel_s:first-child {
    border: none !important;
    border-top: 3px solid var(--z-primary) !important;
    border-radius: var(--z-radius-lg) !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* Import area */
.import-wrapper .panel_s, .import-area {
    border: 2px dashed var(--z-border) !important;
    border-radius: var(--z-radius-lg) !important;
    background: #fafbfc !important;
    padding: 40px 20px !important;
}

.import-wrapper .panel_s:hover {
    border-color: var(--z-primary) !important;
    background: var(--z-primary-50) !important;
}

/* ── 16b. HR RECRUITMENT PIPELINE ── */
.pipeline-board {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding-bottom: 16px !important;
    min-height: 500px !important;
}
.pipeline-column {
    min-width: 260px !important;
    max-width: 280px !important;
    background: var(--z-body-bg, #f8fafc) !important;
    border-radius: var(--z-radius-lg, 10px) !important;
    display: flex !important;
    flex-direction: column !important;
}
.pipeline-header {
    padding: 12px 14px !important;
    border-radius: 10px 10px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.pipeline-header h6 {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
}
.pipeline-count {
    background: rgba(255,255,255,0.3) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
}
.pipeline-cards {
    padding: 8px !important;
    flex: 1 !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 280px) !important;
}
.candidate-card {
    background: #fff !important;
    border-radius: var(--z-radius, 8px) !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    box-shadow: var(--z-shadow-sm) !important;
    cursor: grab !important;
    transition: box-shadow 0.2s !important;
}
.candidate-card:hover {
    box-shadow: var(--z-shadow-lg, 0 4px 12px rgba(0,0,0,0.12)) !important;
}
.candidate-card.dragging { opacity: 0.5 !important; }
.candidate-name { font-weight: 600 !important; font-size: 13px !important; color: var(--z-text-heading, #1a2332) !important; }
.candidate-meta { font-size: 11px !important; color: var(--z-text-muted, #64748b) !important; margin-top: 3px !important; }
.candidate-tags { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; margin-top: 6px !important; }
.candidate-tag { background: var(--z-body-bg, #f1f5f9) !important; padding: 2px 6px !important; border-radius: 4px !important; font-size: 10px !important; color: var(--z-text, #475569) !important; }
.star-rating { color: var(--z-warning, #f59e0b) !important; font-size: 10px !important; }
.drag-over { background: #e0e7ff !important; }

/* Client portal */
.header.navbar {
    background: #fff !important;
    border-bottom: none !important;
    box-shadow: var(--z-shadow-sm) !important;
}

.header.navbar .navbar-nav > li > a {
    color: var(--z-text-secondary) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

.header.navbar .navbar-nav > li > a:hover,
.header.navbar .navbar-nav > li.active > a {
    color: var(--z-primary) !important;
}

.footer {
    background: #fafbfc !important;
    border-top: 1px solid var(--z-border-light) !important;
    color: var(--z-text-muted) !important;
    font-size: 12px !important;
}

/* Loading spinner */
#loading-placeholder,
.dt-loader,
.loading-placeholder {
    background: var(--z-body-bg) !important;
}

/* Calendar */
.fc-toolbar .fc-button {
    background: #fff !important;
    border: 1px solid var(--z-border) !important;
    color: var(--z-text) !important;
    border-radius: 6px !important;
}

.fc-toolbar .fc-button:hover {
    background: var(--z-primary-50) !important;
    color: var(--z-primary) !important;
}

.fc-toolbar .fc-button.fc-state-active {
    background: var(--z-primary) !important;
    color: #fff !important;
    border-color: var(--z-primary) !important;
}


/* ============================================
   17b. INVOICE / ESTIMATE PREVIEW — Zoho Style
   ============================================ */

/* Invoice preview container */
#invoice-preview,
#estimate-preview,
#proposal-preview,
#credit_note-preview {
    padding: 0 !important;
}

/* Invoice header info section */
#invoice-preview > .row:first-child {
    padding: 24px !important;
}

#invoice-preview h4.bold,
#invoice-preview h4.bold a {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--z-primary) !important;
    text-decoration: none !important;
}

#invoice-preview address {
    font-size: 13px !important;
    line-height: 1.7 !important;
    color: var(--z-text-secondary) !important;
    font-style: normal !important;
}

#invoice-preview .bold {
    color: var(--z-text-heading) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* Invoice items table */
#invoice-preview .table-responsive {
    margin: 0 !important;
}

#invoice-preview .table-responsive > table {
    margin-bottom: 0 !important;
}

#invoice-preview .table-responsive > table > thead > tr > th {
    background: var(--z-primary) !important;
    color: #fff !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    border: none !important;
    white-space: nowrap !important;
}

#invoice-preview .table-responsive > table > thead > tr > th:first-child {
    border-radius: 0 !important;
}

#invoice-preview .table-responsive > table > thead > tr > th:last-child {
    border-radius: 0 !important;
}

#invoice-preview .table-responsive > table > tbody > tr > td {
    padding: 14px 16px !important;
    font-size: 13.5px !important;
    color: var(--z-text) !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    vertical-align: middle !important;
}

#invoice-preview .table-responsive > table > tbody > tr:hover > td {
    background: var(--z-primary-50) !important;
}

/* ── Invoice Totals Section — Zoho Style ── */
#invoice-preview > .row > .col-md-5.col-md-offset-7,
#estimate-preview > .row > .col-md-5.col-md-offset-7,
#credit_note-preview > .row > .col-md-5.col-md-offset-7 {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
}

#invoice-preview > .row > .col-md-5 > .table,
#estimate-preview > .row > .col-md-5 > .table,
#credit_note-preview > .row > .col-md-5 > .table {
    background: #fafbfc !important;
    border-radius: 0 0 var(--z-radius-lg) var(--z-radius-lg) !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

#invoice-preview > .row > .col-md-5 > .table > tbody > tr > td,
#estimate-preview > .row > .col-md-5 > .table > tbody > tr > td,
#credit_note-preview > .row > .col-md-5 > .table > tbody > tr > td {
    padding: 11px 24px !important;
    font-size: 13.5px !important;
    color: var(--z-text-secondary) !important;
    border-bottom: 1px solid #eef1f5 !important;
    border-top: none !important;
    vertical-align: middle !important;
}

/* ── Invoice/Estimate Form — Totals Area Fix ── */
/* The totals table below the line items in create/edit form */
.col-md-8.col-md-offset-4 > .table {
    table-layout: fixed !important;
}

.col-md-8.col-md-offset-4 > .table td {
    vertical-align: middle !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
}

.col-md-8.col-md-offset-4 > .table td:first-child {
    width: 70% !important;
}

.col-md-8.col-md-offset-4 > .table td:last-child {
    width: 30% !important;
    text-align: right !important;
}

/* Sub Total / Total labels — prevent wrapping */
.col-md-8.col-md-offset-4 > .table #subtotal td span.bold,
.col-md-8.col-md-offset-4 > .table .total td span.bold {
    white-space: nowrap !important;
    font-size: 14px !important;
}

/* Discount area — fix the nested grid inside td */
.col-md-8.col-md-offset-4 > .table #discount_area td {
    white-space: normal !important;
}

.col-md-8.col-md-offset-4 > .table #discount_area td .row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}

.col-md-8.col-md-offset-4 > .table #discount_area td .row > [class*="col-"] {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    flex: none !important;
}

.col-md-8.col-md-offset-4 > .table #discount_area .input-group {
    min-width: 160px !important;
}

.col-md-8.col-md-offset-4 > .table #discount_area .form-control {
    height: 34px !important;
    border-radius: 6px 0 0 6px !important;
}

.col-md-8.col-md-offset-4 > .table #discount_area .input-group-addon {
    border-radius: 0 6px 6px 0 !important;
}

/* Adjustment input */
.col-md-8.col-md-offset-4 > .table input[name="adjustment"] {
    height: 34px !important;
    min-width: 120px !important;
    border-radius: 6px !important;
    border: 1px solid var(--z-border, #e0e5ec) !important;
    padding: 4px 10px !important;
}

/* Subtotal row */
#invoice-preview > .row > .col-md-5 > .table #subtotal > td,
#estimate-preview > .row > .col-md-5 > .table #subtotal > td {
    padding-top: 16px !important;
    border-top: 2px solid var(--z-border) !important;
}

/* Labels in the totals */
#invoice-preview > .row > .col-md-5 > .table span.tw-font-medium,
#estimate-preview > .row > .col-md-5 > .table span.tw-font-medium,
#credit_note-preview > .row > .col-md-5 > .table span.tw-font-medium {
    color: var(--z-text) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* Amount values — right column */
#invoice-preview > .row > .col-md-5 > .table > tbody > tr > td:last-child,
#estimate-preview > .row > .col-md-5 > .table > tbody > tr > td:last-child {
    font-weight: 600 !important;
    color: var(--z-text-heading) !important;
    white-space: nowrap !important;
}

/* Tax rows */
#invoice-preview .tax-area > td,
#estimate-preview .tax-area > td {
    font-size: 13px !important;
}

/* TOTAL row — Grand Total highlight */
#invoice-preview > .row > .col-md-5 > .table > tbody > tr > td.total,
#estimate-preview > .row > .col-md-5 > .table > tbody > tr > td.total,
#credit_note-preview > .row > .col-md-5 > .table > tbody > tr > td.total {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--z-text-heading) !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* Total row — the whole row */
#invoice-preview > .row > .col-md-5 > .table > tbody > tr:has(> td.total),
#estimate-preview > .row > .col-md-5 > .table > tbody > tr:has(> td.total) {
    background: var(--z-primary-light) !important;
}

#invoice-preview > .row > .col-md-5 > .table > tbody > tr:has(> td.total) > td,
#estimate-preview > .row > .col-md-5 > .table > tbody > tr:has(> td.total) > td {
    border-bottom: none !important;
    border-top: 2px solid var(--z-primary) !important;
}

#invoice-preview > .row > .col-md-5 > .table > tbody > tr:has(> td.total) span,
#estimate-preview > .row > .col-md-5 > .table > tbody > tr:has(> td.total) span {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--z-primary-dark) !important;
}

/* Amount Due row — red highlight when unpaid */
#invoice-preview > .row > .col-md-5 > .table > tbody > tr:last-child > td .text-danger {
    color: var(--z-danger) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* Discount row — subtle green */
#invoice-preview > .row > .col-md-5 > .table > tbody > tr > td.discount {
    color: #27ae60 !important;
}

/* Total Paid row */
#invoice-preview > .row > .col-md-5 > .table > tbody > tr > td:last-child:not(.total):not(.subtotal):not(.discount):not(.adjustment) {
    font-weight: 600 !important;
}

/* Invoice notes and terms section */
#invoice-preview hr {
    border-color: var(--z-border-light) !important;
    margin: 0 !important;
}

#invoice-preview .col-md-12.row.mtop15 {
    padding: 20px 24px !important;
    margin: 0 !important;
}

#invoice-preview .col-md-12.row.mtop15 > p.tw-font-medium {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
}

/* Invoice attachments */
#invoice-preview .mbot15.row {
    padding: 8px 24px !important;
    border-bottom: 1px solid var(--z-border-light) !important;
}

/* Invoice page — tabs panel override */
.invoice-preview-template .panel_s,
.invoice-wrapper .panel_s,
[class*="preview_template"] .panel_s {
    border-radius: var(--z-radius-lg) !important;
    overflow: hidden !important;
}

/* ── Invoice Preview Action Bar ── */
/* Status badge area + action buttons row */
.panel_s .panel-body > .row.mtop20 {
    margin: 0 !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    background: #fafbfc !important;
}

.panel_s .panel-body > .row.mtop20 ._buttons .pull-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

/* Action buttons (Edit, PDF, Email, etc.) */
.panel_s .panel-body > .row.mtop20 .btn-default,
.panel_s .panel-body > .row.mtop20 .btn-with-tooltip {
    background: #fff !important;
    border: 1px solid var(--z-border) !important;
    color: var(--z-text-secondary) !important;
    border-radius: 8px !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: var(--z-transition) !important;
}

.panel_s .panel-body > .row.mtop20 .btn-default:hover {
    background: var(--z-primary-50) !important;
    border-color: var(--z-primary) !important;
    color: var(--z-primary) !important;
}

/* + Payment button — green CTA */
.panel_s .panel-body > .row.mtop20 .btn-success,
.panel_s .panel-body > .row.mtop20 a.btn-success {
    background: #27ae60 !important;
    border: none !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 0 18px !important;
    height: 36px !important;
    font-size: 13px !important;
    box-shadow: 0 2px 6px rgba(39,174,96,0.25) !important;
}

.panel_s .panel-body > .row.mtop20 .btn-success:hover {
    background: #219a52 !important;
    box-shadow: 0 4px 10px rgba(39,174,96,0.3) !important;
}

/* ── Invoice Payments Table — Zoho Style ── */
#invoice_payments_received .table-responsive > .table {
    margin: 0 !important;
}

#invoice_payments_received .table > thead > tr > th {
    background: transparent !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--z-text-muted) !important;
    font-weight: 700 !important;
    padding: 14px 20px !important;
    border-bottom: 2px solid var(--z-border) !important;
    border-top: none !important;
}

#invoice_payments_received .table > thead > tr > th .bold {
    font-weight: 700 !important;
    color: var(--z-text-muted) !important;
}

#invoice_payments_received .table > tbody > tr > td {
    padding: 14px 20px !important;
    font-size: 13.5px !important;
    color: var(--z-text) !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    border-top: none !important;
    vertical-align: middle !important;
}

#invoice_payments_received .table > tbody > tr:hover > td {
    background: var(--z-primary-50) !important;
}

/* Payment # — make the number prominent */
#invoice_payments_received .table > tbody > tr > td:first-child {
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
}

/* PDF icon button in payment row */
#invoice_payments_received .table > tbody > tr > td .btn-default {
    background: transparent !important;
    border: 1px solid var(--z-border) !important;
    color: var(--z-text-muted) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
}

#invoice_payments_received .table > tbody > tr > td .btn-default:hover {
    background: var(--z-primary-50) !important;
    color: var(--z-primary) !important;
    border-color: var(--z-primary) !important;
}

/* Edit/Delete action icons */
#invoice_payments_received .table > tbody > tr > td .tw-flex a {
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    color: var(--z-text-muted) !important;
    transition: var(--z-transition) !important;
}

#invoice_payments_received .table > tbody > tr > td .tw-flex a:hover {
    background: var(--z-primary-50) !important;
    color: var(--z-primary) !important;
}

#invoice_payments_received .table > tbody > tr > td .tw-flex a._delete:hover {
    background: var(--z-danger-bg) !important;
    color: var(--z-danger) !important;
}


/* ── Sidebar Section Separators — Unified data-group system ── */
/* OLD CSS ::before labels removed — now using data-group attribute from core_hooks_helper.php */
/* The data-group system in Section 20 handles all section labels dynamically */

/* General sidebar spacing */
#side-menu > li {
    margin-bottom: 0 !important;
}

/* Dashboard standalone — small gap below */
#side-menu > li.menu-item-dashboard {
    margin-bottom: 2px !important;
}

/* ── Zoho-style sidebar section separators ── */
/* Removed duplicate CSS ::before labels — data-group attribute system (Section 20) handles all section labels */


/* ============================================
   18. RESPONSIVE
   ============================================ */
/* When sidebar is hidden, remove wrapper margin */
body.hide-sidebar:not(.show-sidebar) #wrapper,
body.page-small:not(.show-sidebar) #wrapper {
    margin-left: 0 !important;
}

@media (max-width: 992px) {
    #wrapper {
        margin-left: 0 !important;
    }
    #wrapper > .content {
        padding: var(--z-space-md) !important;
        padding-top: calc(var(--z-header-height) + var(--z-space-md)) !important;
    }
    .panel_s > .panel-body { padding: 14px !important; }
    .table > thead > tr > th,
    .table > tbody > tr > td { padding: 10px !important; font-size: 13px !important; }
}

@media (max-width: 768px) {

    /* ── Zoho-style Mobile Header ── */
    #header {
        margin-left: 0 !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: #fff !important;
        border-bottom: 2px solid var(--z-primary, #2c83ec) !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }

    #header > nav {
        width: 100% !important;
    }

    #header > nav > .tw-flex {
        align-items: center !important;
        height: 52px !important;
        padding: 0 8px !important;
    }

    /* Hamburger — left side */
    #header .hide-menu {
        order: -1 !important;
        margin: 0 4px 0 0 !important;
        padding: 8px !important;
        float: none !important;
        position: static !important;
        flex-shrink: 0 !important;
    }
    #header .hide-menu svg {
        width: 20px !important;
        height: 20px !important;
        color: #4a5568 !important;
    }

    /* Hide desktop logo on mobile */
    #header #logo { display: none !important; }
    #header .tw-overflow-hidden.tw-shrink-0 { display: none !important; }

    /* Search bar — centered, fills space */
    #header #top_search {
        flex: 1 !important;
        max-width: none !important;
        margin: 0 6px !important;
        order: 0 !important;
    }
    #header #search_input {
        width: 100% !important;
        height: 36px !important;
        margin: 0 !important;
        border-radius: 20px !important;
        background: #f0f2f5 !important;
        border: 1px solid #e2e8f0 !important;
        font-size: 13px !important;
        padding-left: 36px !important;
        padding-right: 12px !important;
    }
    #header #search_input:focus {
        border-color: var(--z-primary, #2c83ec) !important;
        background: #fff !important;
        box-shadow: 0 0 0 2px rgba(44,131,236,0.15) !important;
    }
    #header #top_search_button {
        top: 0 !important;
        left: 0 !important;
    }
    #header #top_search_button button {
        padding: 8px 10px !important;
        color: #94a3b8 !important;
        font-size: 13px !important;
    }

    /* Right icons — bell + chevron */
    #header .navbar-right {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        float: none !important;
        flex-shrink: 0 !important;
        order: 1 !important;
        gap: 2px !important;
    }
    #header .navbar-right > li {
        margin: 0 !important;
        float: none !important;
    }
    #header .navbar-right > li > a {
        padding: 6px 8px !important;
        color: #4a5568 !important;
        font-size: 16px !important;
    }

    /* Hide settings text link on mobile, show only icons */
    #header .navbar-right > li > a[href*="settings"] {
        display: none !important;
    }

    /* Branch switcher — compact on mobile */
    #header .header-branch-switcher {
        display: none !important;
    }

    /* Quick create — hide on mobile */
    #header .visible-md,
    #header .visible-lg {
        display: none !important;
    }

    /* Mobile dropdown toggle — style as chevron icon */
    #header .mobile-menu {
        order: 2 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    #header .mobile-menu-toggle {
        margin: 0 !important;
        padding: 6px 8px !important;
        color: #4a5568 !important;
        font-size: 16px !important;
    }
    #header .mobile-icon-menu {
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    #header .mobile-icon-menu > li {
        margin: 0 4px !important;
    }

    /* Notification bell in mobile — clean icon */
    #header .header-notifications > a {
        padding: 6px 8px !important;
    }
    #header .header-notifications > a i,
    #header .header-notifications > a svg {
        font-size: 16px !important;
        width: 18px !important;
        height: 18px !important;
        color: #4a5568 !important;
    }

    /* ── Content Area ── */
    #wrapper > .content {
        padding: 12px !important;
        padding-top: 64px !important;
        margin-left: 0 !important;
    }

    /* Fix client profile on mobile — ensure content is visible */
    .customer_profile #wrapper > .content,
    body .content {
        padding-top: 64px !important;
    }

    .form-control { height: 38px !important; font-size: 13px !important; }
    .dashboard-greeting {
        flex-direction: column !important;
        text-align: center !important;
        padding: 16px !important;
    }
    .greeting-time { margin-top: 8px !important; }
    .nav-tabs > li > a { padding: 10px 14px !important; font-size: 13px !important; }

    /* Mobile sidebar — hidden by default, slide-in overlay on toggle */
    #menu,
    aside#menu,
    aside.sidebar {
        left: -230px !important;
        transition: left 0.25s ease !important;
        z-index: 10001 !important;
        box-shadow: none !important;
    }
    body.page-small.show-sidebar #menu,
    body.show-sidebar #menu,
    body.show-sidebar aside#menu {
        left: 0 !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.15) !important;
    }
    /* Content wrapper — full width on mobile */
    #wrapper {
        margin-left: 0 !important;
    }
    /* Sidebar user profile — compact on mobile */
    .sidebar .dropdown.sidebar-user-profile {
        margin-top: 60px !important;
    }

    /* ── Client Profile Mobile Fix ── */
    /* Ensure tab content is visible and scrollable */
    .customer_profile .tw-mt-12 {
        margin-top: 16px !important;
    }
    .customer_profile .panel_s {
        margin-bottom: 12px !important;
    }
    /* Make tab panels full width */
    .customer_profile [class*="md:tw-flex"] {
        display: block !important;
    }
    .customer_profile [class*="md:tw-max-w-64"] {
        max-width: 100% !important;
    }
    .customer_profile [class*="tw-max-w-6xl"] {
        max-width: 100% !important;
    }
}

/* ============================================
   INTL-TEL-INPUT — Phone Country Code Selector
   ============================================ */
/* Double-border fix: .form-group wraps .iti which wraps input.form-control.
   Reset the outer wrapper so only the inner input shows the border. */
.form-group .iti,
.iti.form-control,
.iti.iti--allow-dropdown {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    box-shadow: none !important;
}
.iti { display: block !important; width: 100% !important; }
.iti .iti__flag-container { z-index: 3; }
.iti input.form-control {
    padding-left: 52px !important;
    width: 100% !important;
    border: 1px solid var(--z-border, #e2e8f0) !important;
    border-radius: var(--z-radius, 8px) !important;
    height: 38px !important;
}
.iti input.form-control:focus {
    border-color: var(--z-primary, #4361ee) !important;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.08) !important;
}
.iti--separate-dial-code input.form-control {
    padding-left: 90px !important;
}
.iti--separate-dial-code .iti__selected-flag {
    background: rgba(0,0,0,0.02) !important;
    border-right: 1px solid var(--z-border, #e2e8f0);
    border-radius: var(--z-radius, 8px) 0 0 var(--z-radius, 8px);
}
/* ESS portal phone inputs */
.ess-create-form .iti input.ess-form-control,
.ess-card-body .iti input.ess-form-control {
    padding-left: 90px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
}
.ess-create-form .iti,
.ess-card-body .iti {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.iti__country-list {
    z-index: 9999 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    border: none !important;
    max-height: 240px !important;
    font-size: 13px !important;
}
.iti__country.iti__highlight {
    background-color: var(--z-primary-bg, #eff6ff) !important;
}
.iti__country-name { font-size: 13px; color: #334155; }
.iti__dial-code { color: #64748b; font-size: 12px; }
.iti__selected-dial-code { font-size: 13px; color: #334155; font-weight: 500; }
/* Fix inside modals */
.modal .iti { display: block !important; width: 100% !important; }
.modal .iti__country-list { z-index: 99999 !important; }

/* ═══════════════════════════════════════════════
   Section 20: SIDEBAR MENU SECTION SEPARATORS
   ═══════════════════════════════════════════════ */
/* Section headers via data-group attribute */
#side-menu > li[data-group]::before {
    content: attr(data-group);
    display: block;
    padding: 12px 18px 6px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #475569;
    text-transform: uppercase;
    border-top: 1px solid var(--z-border, #e0e5ec);
    margin-top: 6px;
}
/* No border-top for the very first section item */
#side-menu > li[data-group]:first-child::before {
    border-top: none;
    margin-top: 0;
    padding-top: 6px;
}


/* ═══════════════════════════════════════════════
   Section 21: FORGOT PASSWORD / AUTH PAGES FIX
   ═══════════════════════════════════════════════ */
/* Back-to-login link was white text on light bg — make it visible */
body.login_admin .forgot-back-link,
body.login_admin.forgot-password a.forgot-back-link {
    color: var(--z-primary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: var(--z-transition) !important;
}

body.login_admin .forgot-back-link:hover {
    color: var(--z-primary-hover) !important;
    text-decoration: underline !important;
}

body.login_admin .forgot-back-link i {
    margin-right: 4px !important;
}

/* Forgot password subtitle text */
body.login_admin.forgot-password .tw-text-neutral-600 {
    color: var(--z-text-secondary) !important;
}


/* ═══════════════════════════════════════════════
   Section 22: HR MODULE — Dashboard & Shared Styles
   ═══════════════════════════════════════════════ */

/* ── HR KPI Grid — Responsive grid for mini stat cards ── */
.hr-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.hr-kpi-card {
    background: var(--z-card-bg) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    box-shadow: var(--z-shadow-sm) !important;
    transition: var(--z-transition) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    border: none !important;
}

.hr-kpi-card:hover {
    box-shadow: var(--z-shadow) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

.hr-kpi-card .hr-kpi-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.hr-kpi-card .hr-kpi-icon i {
    font-size: 16px !important;
}

.hr-kpi-card .hr-kpi-value {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--z-text-heading) !important;
    line-height: 1 !important;
}

.hr-kpi-card .hr-kpi-label {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
    margin-top: 2px !important;
}

/* ── HR Section Header ── */
.hr-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

.hr-section-header h4 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
}

.hr-section-header .hr-view-all {
    font-size: 11px !important;
    color: var(--z-primary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.hr-section-header .hr-view-all:hover {
    text-decoration: underline !important;
}

/* ── HR Event List Items ── */
.hr-event-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
}

.hr-event-item:hover {
    background: var(--z-primary-50) !important;
    text-decoration: none !important;
}

.hr-event-item i {
    font-size: 13px !important;
    width: 18px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.hr-event-item span {
    font-size: 12px !important;
    color: var(--z-text) !important;
}

/* ── HR Department Distribution Bar ── */
.hr-dept-bar {
    margin-bottom: 8px !important;
}

.hr-dept-bar .hr-dept-info {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    margin-bottom: 3px !important;
}

.hr-dept-bar .hr-dept-name {
    color: var(--z-text) !important;
    font-weight: 500 !important;
}

.hr-dept-bar .hr-dept-count {
    color: var(--z-text-muted) !important;
}

.hr-dept-bar .hr-dept-track {
    height: 6px !important;
    background: var(--z-border-light) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

.hr-dept-bar .hr-dept-fill {
    height: 100% !important;
    border-radius: 3px !important;
    transition: width 0.6s ease !important;
}


/* ═══════════════════════════════════════════════
   Section 22b: HR ATTENDANCE MODULE
   ═══════════════════════════════════════════════ */

/* ── Check-in/out Widget ── */
.hr-checkin-widget {
    background: linear-gradient(135deg, var(--z-primary) 0%, #1a5fb4 100%) !important;
    border-radius: var(--z-radius-lg) !important;
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-bottom: 16px !important;
}

.hr-checkin-widget .hr-checkin-info {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.hr-checkin-widget .hr-checkin-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hr-checkin-widget .hr-checkin-avatar i {
    font-size: 20px !important;
    color: #fff !important;
}

.hr-checkin-widget .hr-checkin-status {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.hr-checkin-widget .hr-checkin-detail {
    font-size: 12px !important;
    color: rgba(255,255,255,0.75) !important;
}

.hr-checkin-widget .btn {
    border-radius: var(--z-radius) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 8px 20px !important;
    background: #fff !important;
    color: var(--z-primary) !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    transition: all 0.2s ease !important;
}

.hr-checkin-widget .btn:hover {
    background: #f0f4ff !important;
    color: #1a5fb4 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
}

/* ── Attendance Summary Cards ── */
.hr-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

.hr-stat-card {
    background: var(--z-card-bg) !important;
    border-radius: var(--z-radius) !important;
    padding: 16px !important;
    box-shadow: var(--z-shadow-sm) !important;
    border: none !important;
    text-align: center !important;
    transition: var(--z-transition) !important;
}

.hr-stat-card:hover {
    box-shadow: var(--z-shadow) !important;
}

.hr-stat-card .hr-stat-value {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--z-text-heading) !important;
    line-height: 1 !important;
}

.hr-stat-card .hr-stat-label {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
    margin-top: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
}

/* Stat card with colored top border */
.hr-stat-card[data-accent="primary"] { border-top: 3px solid var(--z-primary) !important; }
.hr-stat-card[data-accent="success"] { border-top: 3px solid var(--z-success) !important; }
.hr-stat-card[data-accent="warning"] { border-top: 3px solid var(--z-warning) !important; }
.hr-stat-card[data-accent="danger"] { border-top: 3px solid var(--z-danger) !important; }
.hr-stat-card[data-accent="purple"] { border-top: 3px solid #8b5cf6 !important; }
.hr-stat-card[data-accent="teal"] { border-top: 3px solid #06b6d4 !important; }

/* ── Attendance Calendar Grid ── */
.hr-calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
    margin-bottom: 20px !important;
}

.hr-calendar-header {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--z-text-muted) !important;
    text-align: center !important;
    padding: 8px 4px !important;
}

.hr-calendar-cell {
    border: 1px solid var(--z-border-light) !important;
    border-radius: var(--z-radius-sm) !important;
    padding: 6px !important;
    min-height: 60px !important;
    font-size: 12px !important;
    transition: var(--z-transition) !important;
    background: var(--z-card-bg) !important;
}

.hr-calendar-cell:hover {
    border-color: var(--z-primary) !important;
    box-shadow: var(--z-shadow-sm) !important;
}

.hr-calendar-cell .day-num {
    font-weight: 600 !important;
    color: var(--z-text-heading) !important;
    font-size: 13px !important;
}

.hr-calendar-cell.is-today {
    border-color: var(--z-primary) !important;
    background: var(--z-primary-50) !important;
}

.hr-calendar-cell.is-weekend {
    background: #fafbfc !important;
}

.hr-calendar-cell.is-holiday {
    background: var(--z-danger-bg) !important;
    border-color: #fca5a5 !important;
}

/* ── Leave Balance Cards ── */
.hr-leave-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

.hr-leave-card {
    flex: 1 1 160px !important;
    background: var(--z-card-bg) !important;
    border-radius: var(--z-radius) !important;
    padding: 14px 16px !important;
    border: none !important;
    box-shadow: var(--z-shadow-sm) !important;
}

.hr-leave-card .leave-type-name {
    font-size: 12px !important;
    color: var(--z-text-secondary) !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

.hr-leave-card .leave-balance {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--z-text-heading) !important;
    line-height: 1 !important;
}

.hr-leave-card .leave-used {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
    margin-top: 4px !important;
}

/* ── HR Status Badges ── */
.hr-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.hr-status-badge.status-present { background: var(--z-success-bg) !important; color: var(--z-success-text) !important; }
.hr-status-badge.status-absent { background: var(--z-danger-bg) !important; color: var(--z-danger-text) !important; }
.hr-status-badge.status-late { background: var(--z-warning-bg) !important; color: var(--z-warning-text) !important; }
.hr-status-badge.status-half-day { background: #fff7ed !important; color: #9a3412 !important; }
.hr-status-badge.status-on-leave { background: var(--z-info-bg) !important; color: var(--z-info-text) !important; }
.hr-status-badge.status-holiday { background: #fce7f3 !important; color: #9d174d !important; }
.hr-status-badge.status-approved { background: var(--z-success-bg) !important; color: var(--z-success-text) !important; }
.hr-status-badge.status-pending { background: var(--z-warning-bg) !important; color: var(--z-warning-text) !important; }
.hr-status-badge.status-rejected { background: var(--z-danger-bg) !important; color: var(--z-danger-text) !important; }
.hr-status-badge.status-draft { background: #eef1f5 !important; color: var(--z-text-secondary) !important; }


/* ═══════════════════════════════════════════════
   Section 22c: HR PAYROLL MODULE
   ═══════════════════════════════════════════════ */

.hr-payroll-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
}

.hr-payroll-card {
    background: var(--z-card-bg) !important;
    border-radius: var(--z-radius-lg) !important;
    padding: 18px 20px !important;
    border: none !important;
    box-shadow: var(--z-shadow-sm) !important;
    transition: var(--z-transition) !important;
}

.hr-payroll-card:hover {
    box-shadow: var(--z-shadow) !important;
}

.hr-payroll-card .payroll-label {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}

.hr-payroll-card .payroll-value {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
}

/* Payroll month badges */
.hr-payroll-month-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

.hr-payroll-month {
    background: var(--z-card-bg) !important;
    border: 1px solid var(--z-border-light) !important;
    border-radius: var(--z-radius) !important;
    padding: 10px 12px !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--z-text) !important;
    cursor: pointer !important;
    transition: var(--z-transition) !important;
}

.hr-payroll-month:hover {
    border-color: var(--z-primary) !important;
    background: var(--z-primary-50) !important;
    color: var(--z-primary) !important;
}

.hr-payroll-month.active {
    background: var(--z-primary) !important;
    color: #fff !important;
    border-color: var(--z-primary) !important;
}

.hr-payroll-month.status-processed {
    border-left: 3px solid var(--z-success) !important;
}

.hr-payroll-month.status-pending {
    border-left: 3px solid var(--z-warning) !important;
}


/* ═══════════════════════════════════════════════
   Section 22d: HR RECRUITMENT MODULE
   ═══════════════════════════════════════════════ */

/* ── Recruitment Pipeline / Kanban Board ── */
.hr-pipeline-board {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding-bottom: 12px !important;
    min-height: 400px !important;
}

.hr-pipeline-column {
    min-width: 260px !important;
    max-width: 300px !important;
    background: #fafbfc !important;
    border-radius: var(--z-radius-lg) !important;
    border: 1px solid var(--z-border-light) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.hr-pipeline-column .pipeline-col-header {
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.hr-pipeline-column .pipeline-col-header .col-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
}

.hr-pipeline-column .pipeline-col-header .col-count {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
    background: rgba(0,0,0,0.06) !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
}

.hr-pipeline-column .pipeline-col-body {
    padding: 8px !important;
    flex: 1 !important;
    overflow-y: auto !important;
}

.hr-candidate-card {
    background: var(--z-card-bg) !important;
    border-radius: var(--z-radius) !important;
    border: none !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    box-shadow: var(--z-shadow-sm) !important;
    transition: var(--z-transition) !important;
    cursor: grab !important;
}

.hr-candidate-card:hover {
    box-shadow: var(--z-shadow) !important;
}

.hr-candidate-card .candidate-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--z-text-heading) !important;
    margin-bottom: 4px !important;
}

.hr-candidate-card .candidate-role {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
}

.hr-candidate-card .candidate-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
}

/* ── Open Position Cards ── */
.hr-position-card {
    background: var(--z-card-bg) !important;
    border: 1px solid var(--z-border-light) !important;
    border-radius: var(--z-radius) !important;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: var(--z-transition) !important;
}

.hr-position-card:hover {
    border-color: var(--z-primary) !important;
    box-shadow: var(--z-shadow-sm) !important;
}

.hr-position-card .position-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--z-text-heading) !important;
}

.hr-position-card .position-dept {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
    margin-top: 2px !important;
}

.hr-position-card .position-count {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--z-primary) !important;
}


/* ═══════════════════════════════════════════════
   Section 22e: HR TABLES — Shared across all HR modules
   ═══════════════════════════════════════════════ */

.hr-table {
    width: 100% !important;
    margin: 0 !important;
}

.hr-table > thead > tr > th {
    background: transparent !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--z-text-muted) !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid var(--z-border) !important;
    border-top: none !important;
    white-space: nowrap !important;
}

.hr-table > tbody > tr > td {
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    color: var(--z-text) !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    border-top: none !important;
    vertical-align: middle !important;
}

.hr-table > tbody > tr:hover > td {
    background: var(--z-primary-50) !important;
}

/* Employee avatar in HR tables */
.hr-table .employee-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--z-primary-light) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--z-primary) !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
}

/* ── HR Action Buttons Row ── */
.hr-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.hr-actions .btn {
    padding: 5px 12px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}


/* ═══════════════════════════════════════════════
   Section 22f: HR MODALS
   ═══════════════════════════════════════════════ */
.hr-modal .modal-content {
    border-radius: var(--z-radius-lg) !important;
}

.hr-modal .modal-header {
    border-radius: var(--z-radius-lg) var(--z-radius-lg) 0 0 !important;
    border: none !important;
}

.hr-modal .modal-header.modal-header-primary {
    background: linear-gradient(135deg, var(--z-primary), #1a5fb4) !important;
    color: #fff !important;
}

.hr-modal .modal-header.modal-header-danger {
    background: linear-gradient(135deg, var(--z-danger), #c0392b) !important;
    color: #fff !important;
}

.hr-modal .modal-header.modal-header-success {
    background: linear-gradient(135deg, var(--z-success), #1a9c4b) !important;
    color: #fff !important;
}

.hr-modal .modal-header .modal-title {
    color: #fff !important;
    font-weight: 700 !important;
}

.hr-modal .modal-header .close {
    color: #fff !important;
    opacity: 0.8 !important;
}

.hr-modal .modal-body {
    padding: 20px !important;
}

.hr-modal .modal-body .form-group label {
    font-weight: 600 !important;
    font-size: 13px !important;
}

.hr-modal .modal-footer {
    border-top: 1px solid var(--z-border-light) !important;
}


/* ═══════════════════════════════════════════════
   Section 23: HR RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .hr-kpi-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .hr-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hr-pipeline-board {
        gap: 10px !important;
    }

    .hr-pipeline-column {
        min-width: 220px !important;
    }

    .hr-calendar-grid {
        gap: 2px !important;
    }

    .hr-calendar-cell {
        min-height: 50px !important;
        padding: 4px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 768px) {
    .hr-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .hr-kpi-card {
        padding: 10px 12px !important;
    }

    .hr-kpi-card .hr-kpi-value {
        font-size: 16px !important;
    }

    .hr-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hr-calendar-grid {
        grid-template-columns: repeat(7, 1fr) !important;
    }

    .hr-calendar-cell {
        min-height: 40px !important;
        font-size: 10px !important;
    }

    .hr-calendar-cell .day-num {
        font-size: 11px !important;
    }

    .hr-leave-grid {
        gap: 8px !important;
    }

    .hr-leave-card {
        flex: 1 1 140px !important;
    }

    .hr-payroll-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hr-pipeline-board {
        flex-direction: column !important;
    }

    .hr-pipeline-column {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .hr-checkin-widget {
        padding: 12px 16px !important;
        flex-direction: column !important;
        text-align: center !important;
    }

    /* Dashboard HR KPIs (inline grid on dashboard) — override inline styles */
    .col-md-12 > div[style*="grid-template-columns:repeat(6"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .hr-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .hr-stat-grid {
        grid-template-columns: 1fr !important;
    }

    .hr-payroll-grid {
        grid-template-columns: 1fr !important;
    }

    .hr-payroll-month-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}


/* ═══════════════════════════════════════════════
   Section 24: GENERAL UI POLISH & FIXES
   ═══════════════════════════════════════════════ */

/* ── Empty State Styling ── */
.empty-state {
    padding: 40px 20px !important;
    text-align: center !important;
    color: var(--z-text-muted) !important;
}

.empty-state i {
    font-size: 32px !important;
    display: block !important;
    margin-bottom: 10px !important;
    color: var(--z-text-muted) !important;
    opacity: 0.5 !important;
}

.empty-state p {
    font-size: 13px !important;
    color: var(--z-text-muted) !important;
}

/* ── Smooth page transitions ── */
.content .row > [class*="col-"] {
    transition: opacity 0.2s ease !important;
}

/* ── Action icon buttons in tables (tooltip-based) ── */
.table .action-icon-btn,
.table td a[data-toggle="tooltip"],
.table td a.btn-with-tooltip {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: var(--z-text-muted) !important;
    background: transparent !important;
    border: 1px solid var(--z-border-light) !important;
    transition: var(--z-transition) !important;
    text-decoration: none !important;
    font-size: 13px !important;
}

.table .action-icon-btn:hover,
.table td a[data-toggle="tooltip"]:hover,
.table td a.btn-with-tooltip:hover {
    background: var(--z-primary-light) !important;
    color: var(--z-primary) !important;
    border-color: var(--z-primary) !important;
}

/* Delete action — red on hover */
.table td a._delete:hover,
.table td a[onclick*="delete"]:hover,
.table td a.text-danger:hover {
    background: var(--z-danger-bg) !important;
    color: var(--z-danger) !important;
    border-color: var(--z-danger) !important;
}

/* ── Card loading skeleton effect ── */
@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}

.skeleton-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 400px 100% !important;
    animation: shimmer 1.5s infinite !important;
    border-radius: var(--z-radius) !important;
}

/* ── Focus-visible for accessibility ── */
.btn:focus-visible,
.form-control:focus-visible,
a:focus-visible {
    outline: 2px solid var(--z-primary) !important;
    outline-offset: 2px !important;
}

/* ── Toast/Alert Float animation ── */
.alert-float,
.alert_float {
    border-radius: var(--z-radius) !important;
    box-shadow: var(--z-shadow-lg) !important;
}



/* === SECTION 28. DEALS / OPPORTUNITIES MODULE -- DISABLED ===

/* ── 28.1 Page Header ── */
.deals-page-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.deals-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
.deals-header-left h3 {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
}
.deals-subtitle {
    font-size: 12px !important;
    color: var(--z-text-muted) !important;
    font-weight: 400 !important;
}
.deals-back-link {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: var(--z-body-bg) !important;
    color: var(--z-text-muted) !important;
    border: 1px solid var(--z-border-light) !important;
    transition: var(--z-transition) !important;
}
.deals-back-link:hover {
    background: var(--z-primary) !important;
    color: #fff !important;
    border-color: var(--z-primary) !important;
}
.deals-header-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

/* ── 28.2 KPI Row ── */
.deals-kpi-row {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}
.deals-kpi-card {
    background: #fff !important;
    border-radius: var(--z-radius-lg) !important;
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    box-shadow: var(--z-shadow-sm) !important;
    border: none !important;
    transition: var(--z-transition) !important;
}
.deals-kpi-card:hover {
    box-shadow: var(--z-shadow) !important;
    transform: translateY(-2px) !important;
}
.deals-kpi-card .kpi-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}
.kpi-icon.kpi-blue { background: #dbeafe !important; color: #2563eb !important; }
.kpi-icon.kpi-green { background: #dcfce7 !important; color: #16a34a !important; }
.kpi-icon.kpi-red { background: #fee2e2 !important; color: #dc2626 !important; }
.kpi-icon.kpi-orange { background: #fff7ed !important; color: #ea580c !important; }
.kpi-icon.kpi-purple { background: #f3e8ff !important; color: #9333ea !important; }
.kpi-data .kpi-value {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    line-height: 1.2 !important;
}
.kpi-data .kpi-label {
    font-size: 12px !important;
    color: var(--z-text-muted) !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
}
.kpi-data .kpi-sub {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
    margin-top: 2px !important;
}

/* ── 28.3 Section Titles ── */
.deals-section-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    margin: 0 0 16px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.deals-section-title i {
    color: var(--z-primary) !important;
    font-size: 14px !important;
}

/* ── 28.4 Sales Funnel ── */
.deals-funnel {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.funnel-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
.funnel-label {
    width: 160px !important;
    flex-shrink: 0 !important;
    text-align: right !important;
}
.funnel-stage-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--z-text-heading) !important;
    display: block !important;
}
.funnel-stage-count {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
}
.funnel-bar-wrapper {
    flex: 1 !important;
}
.funnel-bar {
    height: 36px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    min-width: 60px !important;
    transition: width 0.5s ease !important;
}
.funnel-bar-value {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap !important;
}

/* ── 28.5 Pipeline Board (Kanban) ── */
.deals-pipeline-board {
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    padding-bottom: 20px !important;
    min-height: calc(100vh - 200px) !important;
    align-items: flex-start !important;
}
.pipeline-stage-col {
    min-width: 280px !important;
    max-width: 300px !important;
    background: var(--z-body-bg, #f8fafc) !important;
    border-radius: var(--z-radius-lg) !important;
    border: 1px solid var(--z-border-light) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    transition: background 0.2s !important;
}
.pipeline-stage-col.drag-over {
    background: #e0e7ff !important;
    border-color: var(--z-primary) !important;
}
.pipeline-stage-header {
    padding: 14px 16px !important;
    border-top: 3px solid var(--z-primary) !important;
    border-radius: var(--z-radius-lg) var(--z-radius-lg) 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #fff !important;
}
.stage-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.stage-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
}
.stage-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
}
.stage-header-value {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
}
.pipeline-stage-cards {
    padding: 8px !important;
    flex: 1 !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 300px) !important;
    min-height: 100px !important;
}

/* ── 28.6 Deal Cards ── */
.deal-card {
    background: #fff !important;
    border-radius: var(--z-radius) !important;
    padding: 14px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
.deal-card:hover {
    box-shadow: var(--z-shadow) !important;
    transform: translateY(-1px) !important;
}
.deal-card.dragging {
    opacity: 0.4 !important;
    transform: rotate(2deg) !important;
}
.deal-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}
.deal-card-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--z-text-heading) !important;
    line-height: 1.3 !important;
}
.deal-card-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--z-primary) !important;
    white-space: nowrap !important;
}
.deal-card-client {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
    margin-bottom: 8px !important;
}
.deal-card-client i {
    margin-right: 4px !important;
    font-size: 10px !important;
}
.deal-card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.deal-card-owner {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
}
.deal-owner-avatar {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: var(--z-primary) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}
.deal-card-days {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    color: var(--z-text-muted) !important;
}
.deal-card-days.urgent {
    background: #fef3c7 !important;
    color: #d97706 !important;
}
.deal-card-days.overdue {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}
.deal-card-source {
    font-size: 10px !important;
    color: var(--z-text-muted) !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid var(--z-border-light) !important;
}
.deal-card-empty {
    text-align: center !important;
    padding: 30px 16px !important;
    color: var(--z-border) !important;
    font-size: 12px !important;
}
.deal-card-empty i {
    font-size: 24px !important;
    display: block !important;
    margin-bottom: 8px !important;
}

/* Won/Lost drop zones */
.pipeline-result-col {
    min-width: 140px !important;
    max-width: 160px !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s !important;
}
.pipeline-result-col:hover,
.pipeline-result-col.drag-over {
    opacity: 1 !important;
}
.result-drop-zone {
    min-height: 200px !important;
}
.result-drop-hint {
    text-align: center !important;
    padding: 40px 12px !important;
    color: var(--z-text-muted) !important;
    font-size: 12px !important;
}
.result-drop-hint i {
    font-size: 28px !important;
    display: block !important;
    margin-bottom: 8px !important;
}
.won-col .result-drop-hint i { color: #10b981 !important; }
.lost-col .result-drop-hint i { color: #ef4444 !important; }

/* Pipeline tabs */
.pipeline-tabs {
    display: flex !important;
    gap: 4px !important;
}
.pipeline-tab {
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
    background: transparent !important;
    transition: var(--z-transition) !important;
    text-decoration: none !important;
}
.pipeline-tab:hover {
    background: var(--z-body-bg) !important;
    color: var(--z-text) !important;
}
.pipeline-tab.active {
    background: var(--z-primary) !important;
    color: #fff !important;
}

/* ── 28.7 Leaderboard ── */
.deals-leaderboard {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.lb-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: var(--z-radius) !important;
    background: var(--z-body-bg) !important;
    transition: var(--z-transition) !important;
}
.lb-row:hover { background: #f1f5f9 !important; }
.lb-rank {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: var(--z-border-light) !important;
    color: var(--z-text-muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}
.lb-rank.lb-top {
    background: #fef3c7 !important;
    color: #d97706 !important;
}
.lb-info { flex: 1 !important; min-width: 0 !important; }
.lb-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--z-text-heading) !important;
}
.lb-stats {
    display: flex !important;
    gap: 10px !important;
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
}
.lb-won { color: #16a34a !important; }
.lb-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--z-primary) !important;
    white-space: nowrap !important;
}

/* ── 28.8 Closing Soon ── */
.closing-deal-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: var(--z-transition) !important;
}
.closing-deal-row:last-child { border-bottom: none !important; }
.closing-deal-row:hover { background: var(--z-body-bg) !important; padding-left: 8px !important; padding-right: 8px !important; border-radius: 6px !important; }
.closing-deal-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--z-text-heading) !important;
}
.closing-deal-meta {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
    display: flex !important;
    gap: 8px !important;
}
.closing-deal-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    text-align: right !important;
}
.closing-deal-date {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-align: right !important;
    color: var(--z-text-muted) !important;
}
.closing-deal-date.urgent { color: #d97706 !important; }
.closing-deal-date.warning { color: #ea580c !important; }

/* ── 28.9 Recent Deals List ── */
.recent-deal-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    text-decoration: none !important;
    color: inherit !important;
}
.recent-deal-row:last-child { border-bottom: none !important; }
.recent-deal-status {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
.recent-deal-status.deal-status-open { background: #3b82f6 !important; }
.recent-deal-status.deal-status-won { background: #10b981 !important; }
.recent-deal-status.deal-status-lost { background: #ef4444 !important; }
.recent-deal-info { flex: 1 !important; min-width: 0 !important; }
.recent-deal-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--z-text-heading) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.recent-deal-meta {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
}
.recent-deal-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--z-primary) !important;
    white-space: nowrap !important;
}

/* ── 28.10 Deal Detail — Stage Progress ── */
.deal-stage-progress {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 8px 0 !important;
}
.stage-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1 !important;
    position: relative !important;
}
.stage-step::before {
    content: '' !important;
    position: absolute !important;
    top: 10px !important;
    left: -50% !important;
    right: 50% !important;
    height: 3px !important;
    background: var(--z-border-light) !important;
}
.stage-step:first-child::before { display: none !important; }
.stage-step.completed::before { background: var(--z-primary) !important; }
.stage-step.active::before { background: var(--z-primary) !important; }
.stage-step-dot {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: var(--z-border-light) !important;
    border: 3px solid #fff !important;
    box-shadow: 0 0 0 2px var(--z-border-light) !important;
    position: relative !important;
    z-index: 1 !important;
    transition: var(--z-transition) !important;
}
.stage-step.completed .stage-step-dot {
    background: var(--z-primary) !important;
    box-shadow: 0 0 0 2px var(--z-primary) !important;
}
.stage-step.active .stage-step-dot {
    background: #fff !important;
    box-shadow: 0 0 0 3px var(--z-primary) !important;
    border-color: var(--z-primary) !important;
}
.stage-step:hover .stage-step-dot {
    transform: scale(1.2) !important;
}
.stage-step-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
    margin-top: 8px !important;
    text-align: center !important;
    white-space: nowrap !important;
}
.stage-step.active .stage-step-label { color: var(--z-primary) !important; }
.stage-step.completed .stage-step-label { color: var(--z-text-heading) !important; }

/* ── 28.11 Deal Detail Grid ── */
.deal-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}
.deal-detail-item label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
}
.deal-detail-value {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--z-text-heading) !important;
}
.deal-value-highlight {
    font-size: 22px !important;
    color: var(--z-primary) !important;
}
.deal-notes-section {
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--z-border-light) !important;
}
.deal-notes-section p {
    color: var(--z-text) !important;
    line-height: 1.6 !important;
}
.deal-lost-reason {
    margin-top: 16px !important;
    padding: 12px 16px !important;
    background: #fef2f2 !important;
    border-radius: var(--z-radius) !important;
    border-left: 3px solid #ef4444 !important;
}
.deal-lost-reason label { color: #dc2626 !important; }

/* ── 28.12 Comments ── */
.deal-comment-form textarea {
    border-radius: var(--z-radius) !important;
    resize: vertical !important;
}
.deal-comments-list {
    margin-top: 20px !important;
}
.deal-comment {
    display: flex !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--z-border-light) !important;
}
.deal-comment:last-child { border-bottom: none !important; }
.comment-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--z-primary) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}
.comment-body { flex: 1 !important; }
.comment-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 4px !important;
}
.comment-header strong { font-size: 13px !important; color: var(--z-text-heading) !important; }
.comment-date { font-size: 11px !important; color: var(--z-text-muted) !important; }
.comment-body p { font-size: 13px !important; color: var(--z-text) !important; margin: 0 !important; line-height: 1.5 !important; }

/* ── 28.13 Activity Log ── */
.deal-activity-log {
    position: relative !important;
    padding-left: 20px !important;
}
.deal-activity-log::before {
    content: '' !important;
    position: absolute !important;
    left: 5px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: var(--z-border-light) !important;
}
.activity-item {
    position: relative !important;
    padding-bottom: 16px !important;
}
.activity-dot {
    position: absolute !important;
    left: -19px !important;
    top: 4px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--z-primary) !important;
    border: 2px solid #fff !important;
}
.activity-desc {
    font-size: 13px !important;
    color: var(--z-text-heading) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}
.activity-meta {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
}

/* ── 28.14 List View ── */
.deals-filters-bar {
    margin-bottom: 16px !important;
}
.deals-filter-form {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
.deals-table {
    margin: 0 !important;
}
.deals-table thead th {
    background: var(--z-body-bg) !important;
    color: var(--z-text-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid var(--z-border-light) !important;
}
.deals-table tbody tr {
    transition: var(--z-transition) !important;
}
.deals-table tbody tr:hover {
    background: #f8fafc !important;
}
.deals-table tbody td {
    padding: 14px 16px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    font-size: 13px !important;
}
.deal-list-name {
    font-weight: 600 !important;
    color: var(--z-text-heading) !important;
}
.deal-list-value {
    font-weight: 700 !important;
    color: var(--z-primary) !important;
}
.deal-stage-pill {
    padding: 3px 10px !important;
    border-radius: 12px !important;
    background: #f1f5f9 !important;
    color: var(--z-text) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}
.deal-status-badge {
    padding: 3px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}
.deal-status-open { background: #dbeafe !important; color: #2563eb !important; }
.deal-status-won { background: #dcfce7 !important; color: #16a34a !important; }
.deal-status-lost { background: #fee2e2 !important; color: #dc2626 !important; }

/* Won/Lost result badges */
.deal-result-badge {
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.deal-result-won { background: #dcfce7 !important; color: #16a34a !important; }
.deal-result-lost { background: #fee2e2 !important; color: #dc2626 !important; }

/* ── 28.15 Dashboard Deals Mini Pipeline ── */
.dash-deals-stages {
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
}
.dash-deal-stage {
    flex: 1 !important;
    min-width: 180px !important;
}
.dash-deal-stage-bar {
    background: var(--z-body-bg, #f8fafc) !important;
    border-radius: var(--z-radius) !important;
    border-left: 3px solid var(--z-primary) !important;
    padding: 12px !important;
}
.dash-deal-stage-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 4px !important;
}
.dash-deal-stage-name {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
}
.dash-deal-stage-badge {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 1px 7px !important;
    border-radius: 10px !important;
}
.dash-deal-stage-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--z-primary) !important;
    margin-bottom: 8px !important;
}
.dash-deal-mini-card {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 8px !important;
    background: #fff !important;
    border-radius: 6px !important;
    margin-bottom: 4px !important;
    text-decoration: none !important;
    transition: var(--z-transition) !important;
    border: 1px solid var(--z-border-light) !important;
}
.dash-deal-mini-card:hover {
    border-color: var(--z-primary) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}
.dash-deal-mini-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--z-text-heading) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 200px !important;
}
.dash-deal-mini-value {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--z-primary) !important;
    white-space: nowrap !important;
}

/* ── 28.16 Responsive ── */
@media (max-width: 992px) {
    .deals-kpi-row { grid-template-columns: repeat(3, 1fr) !important; }
    .deal-detail-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
    .deals-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
    .deals-pipeline-board { min-height: auto !important; }
    .pipeline-stage-col { min-width: 260px !important; }
    .deals-page-header { flex-direction: column !important; align-items: flex-start !important; }
    .deal-detail-grid { grid-template-columns: 1fr !important; }
    .funnel-label { width: 100px !important; }
}
=== END DISABLED SECTION 28 === */


/* ── Perfected scrollable panel body ── */
.panel-body.scrollable {
    overflow-y: auto !important;
    max-height: 400px !important;
}

.panel-body.scrollable::-webkit-scrollbar { width: 3px; }
.panel-body.scrollable::-webkit-scrollbar-track { background: transparent; }
.panel-body.scrollable::-webkit-scrollbar-thumb { background: #d5dbe3; border-radius: 3px; }

/* ── Fix table action column width ── */
.table th:last-child,
.table td:last-child {
    white-space: nowrap !important;
}

/* ── Quick stats filter pills (active state) ── */
.top_stats_wrapper [class*="col-"] > div[class*="active"],
.top_stats_wrapper [class*="col-"] > div.active {
    border-color: var(--z-primary) !important;
    background: var(--z-primary-50) !important;
    box-shadow: 0 0 0 2px rgba(44,131,236,0.15) !important;
}


/* ═══════════════════════════════════════════════
   Section 25: HIDDEN MODULES
   ═══════════════════════════════════════════════ */

/* Hide "Companies" from sidebar — replaced with Branch-only system */
#side-menu > li.menu-item-companies,
.sidebar li.menu-item-companies {
    display: none !important;
}

/* Hide "Custom Fields" from setup/admin menu */
#setup-menu li.menu-item-custom_fields,
.setup-menu li.menu-item-custom_fields,
li.menu-item-custom_fields,
li.sub-menu-item-custom_fields,
#setup_menu a[href*="custom_fields"],
.sidebar li a[href*="custom_fields"] {
    display: none !important;
}

/* Hide quick_create + and settings icons (already hidden) */
#header li.quick_create,
#header li a[href*="settings"] {
    display: none !important;
}

/* Hide Subscriptions, Estimate Request from sidebar (Contracts kept visible) */
#side-menu > li.menu-item-subscriptions,
#side-menu > li.menu-item-estimate_request,
.sidebar li.menu-item-subscriptions,
.sidebar li.menu-item-estimate_request {
    display: none !important;
}

/* Hide Estimate Request from setup menu (Contracts kept visible) */
#setup-menu li.menu-item-estimate_request,
li[data-submenu-id="estimate_request"] {
    display: none !important;
}

/* Hide Subscriptions Summary dashboard widget */
[data-name*="Subscription"],
[data-name*="subscription"] {
    display: none !important;
}

/* ============================================
   SECTION 20. HIDE CUSTOM FIELDS FROM SETUP MENU
   ============================================ */
#setup-menu-item .menu-item-custom-fields,
li.menu-item-custom-fields,
li.menu-item-custom_fields,
li[data-submenu-id="custom_fields"],
li[data-submenu-id="custom-fields"],
#setup_menu li a[href*="custom_fields"] {
    display: none !important;
}

/* ============================================
   SECTION 21. CLIENT / LEAD FORM CLEANUP
   ============================================ */
/* Better spacing for client form fields */
.client-form .form-group {
    margin-bottom: 18px;
}

/* GST / CIN field styling */
.client-form input[name="gst_number"],
.client-form input[name="cin_number"] {
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Lead form — compact spacing in modal */
#lead_form .form-group {
    margin-bottom: 14px;
}

/* Lead form — tags section breathing room */
#lead_form #inputTagsWrapper {
    margin-bottom: 8px;
}

/* Lead form — description textarea */
#lead_form textarea[name="description"] {
    min-height: 80px;
}


/* Mobile bottom nav — hidden on desktop, shown only on mobile */
#mobile-bottom-nav,
.mobile-bottom-nav {
    display: none !important;
}

/* ============================================
   SECTION 26. MOBILE APP EXPERIENCE
   Native mobile-app feel for phones (≤768px)
   ============================================ */
@media (max-width: 768px) {

    /* ── 26.1 HEADER (mobile) ───────────────────── */

    #header {
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 !important;
        z-index: 10000 !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
    }

    /* Ensure top accent strip stays above safe area */
    #header::before {
        top: env(safe-area-inset-top, 0px);
    }

    /* Navbar header — logo + hamburger area */
    #header .navbar-header {
        height: 56px !important;
        padding: 0 8px !important;
        flex-shrink: 0 !important;
    }

    /* Show logo at compact size */
    #header .navbar-header .navbar-brand {
        max-width: 120px !important;
        overflow: hidden !important;
    }

    #header .navbar-header .navbar-brand img,
    #header .navbar-header img {
        max-height: 28px !important;
    }

    /* Hamburger button — larger touch target */
    #header .hide-menu,
    #header .navbar-toggle,
    #header button.navbar-toggle {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 20px !important;
        color: var(--z-text) !important;
        border: none !important;
        background: transparent !important;
        border-radius: 8px !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    #header .hide-menu:active,
    #header .navbar-toggle:active {
        background: var(--z-primary-light) !important;
    }

    /* Branch switcher — compact pill on mobile */
    .header-branch-switcher .branch-switcher-trigger,
    .company-branch-switcher .switcher-btn,
    .company-branch-switcher .btn,
    .company-branch-switcher .dropdown-toggle {
        font-size: 11px !important;
        padding: 4px 8px !important;
        border-radius: 12px !important;
        background: var(--z-primary-light) !important;
        color: var(--z-primary) !important;
        max-width: 100px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Search — compact icon style */
    #header .header-search,
    #header .navbar-right .search-bar,
    #header .navbar-form,
    #header form[role="search"] {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 56px !important;
        background: var(--z-header-bg) !important;
        z-index: 10002 !important;
        padding: 8px 12px !important;
        display: none !important;
        align-items: center !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }

    #header .header-search.mobile-search-open,
    #header .navbar-form.mobile-search-open {
        display: flex !important;
    }

    /* Header right nav icons — compact */
    #header .navbar-right > li > a {
        padding: 8px 10px !important;
        min-width: 40px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Notification badges */
    #header .navbar-right .badge,
    #header .navbar-right .label {
        position: absolute !important;
        top: 6px !important;
        right: 4px !important;
        font-size: 9px !important;
        min-width: 16px !important;
        height: 16px !important;
        line-height: 16px !important;
        padding: 0 4px !important;
        border-radius: 8px !important;
    }

    /* Header dropdowns — full width on mobile */
    #header .navbar-right > li > .dropdown-menu {
        position: fixed !important;
        top: 56px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
    }


    /* ── 26.2 SIDEBAR (mobile) ──────────────────── */

    #menu,
    aside#menu,
    aside.sidebar {
        left: calc(-1 * var(--z-sidebar-width, 220px) - 20px) !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease !important;
        z-index: 10003 !important;
        box-shadow: none !important;
        width: min(var(--z-sidebar-width, 220px), 85vw) !important;
        top: 0 !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
    }

    /* Sidebar open state */
    body.page-small.show-sidebar #menu,
    body.show-sidebar #menu,
    body.show-sidebar aside#menu,
    body.show-sidebar aside.sidebar {
        left: 0 !important;
        box-shadow: 8px 0 32px rgba(0,0,0,0.2) !important;
    }

    /* Dark overlay backdrop when sidebar is open */
    body.show-sidebar #wrapper::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.4) !important;
        z-index: 10002 !important;
        opacity: 1 !important;
        transition: opacity 0.3s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* When sidebar is closed, overlay is invisible but allows transition */
    body:not(.show-sidebar) #wrapper::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0) !important;
        z-index: -1 !important;
        pointer-events: none !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease, z-index 0s 0.3s !important;
    }

    /* Content wrapper — full width, no left margin */
    #wrapper {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
    }

    /* Header — full width */
    #header {
        margin-left: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    /* Sidebar user profile — compact with smaller avatar */
    .sidebar .dropdown.sidebar-user-profile {
        margin-top: 10px !important;
        padding: 10px 14px !important;
    }

    .sidebar .dropdown.sidebar-user-profile img,
    .sidebar .user-profile img,
    .sidebar .sidebar-profile img {
        width: 32px !important;
        height: 32px !important;
    }

    .sidebar .dropdown.sidebar-user-profile .media-body {
        font-size: 12px !important;
    }

    /* Sidebar menu items — larger touch targets */
    #side-menu > li > a,
    .sidebar ul.nav > li > a {
        padding: 12px 16px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Sidebar sub-menu items */
    #side-menu > li > ul > li > a,
    .sidebar ul.nav > li > ul > li > a {
        padding: 10px 16px 10px 40px !important;
        min-height: 40px !important;
    }

    /* Setup menu panel — also slide-in on mobile */
    #setup-menu-wrapper {
        left: calc(-1 * var(--z-sidebar-width, 220px) - 20px) !important;
        z-index: 10004 !important;
        width: min(var(--z-sidebar-width, 220px), 85vw) !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }


    /* ── 26.3 BOTTOM NAVIGATION BAR ─────────────── */
    /* Base: hidden on desktop — shown only inside @media ≤768px below */
    /* NOTE: Requires adding a #mobile-bottom-nav element in the PHP.
       The CSS below styles it when present. Suggested HTML:
       <nav id="mobile-bottom-nav" class="mobile-bottom-nav">
         <a href="admin/" class="bnav-item active"><i class="fa fa-th-large"></i><span>Dashboard</span></a>
         <a href="admin/clients" class="bnav-item"><i class="fa fa-users"></i><span>Customers</span></a>
         <a href="admin/leads" class="bnav-item"><i class="fa fa-bullseye"></i><span>Leads</span></a>
         <a href="admin/invoices" class="bnav-item"><i class="fa fa-file-text"></i><span>Sales</span></a>
         <a href="#" class="bnav-item bnav-more" onclick="...toggle sidebar..."><i class="fa fa-bars"></i><span>More</span></a>
       </nav>
    */

    #mobile-bottom-nav,
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        background: #ffffff !important;
        border-top: 1px solid var(--z-border, #e0e5ec) !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: space-around !important;
        z-index: 10001 !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.06) !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
        backdrop-filter: saturate(180%) blur(20px) !important;
    }

    #mobile-bottom-nav .bnav-item,
    .mobile-bottom-nav .bnav-item {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        color: var(--z-text-muted, #8d9bb5) !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        padding: 6px 4px !important;
        transition: color 0.2s ease !important;
        -webkit-tap-highlight-color: transparent !important;
        position: relative !important;
    }

    #mobile-bottom-nav .bnav-item i,
    .mobile-bottom-nav .bnav-item i {
        font-size: 18px !important;
        margin-bottom: 2px !important;
        line-height: 1 !important;
    }

    #mobile-bottom-nav .bnav-item span,
    .mobile-bottom-nav .bnav-item span {
        line-height: 1.2 !important;
        letter-spacing: 0.2px !important;
    }

    /* Active state */
    #mobile-bottom-nav .bnav-item.active,
    .mobile-bottom-nav .bnav-item.active {
        color: var(--z-primary, #2c83ec) !important;
    }

    #mobile-bottom-nav .bnav-item.active::before,
    .mobile-bottom-nav .bnav-item.active::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 32px !important;
        height: 3px !important;
        background: var(--z-primary, #2c83ec) !important;
        border-radius: 0 0 3px 3px !important;
    }

    /* Pressed state */
    #mobile-bottom-nav .bnav-item:active,
    .mobile-bottom-nav .bnav-item:active {
        color: var(--z-primary, #2c83ec) !important;
        background: var(--z-primary-light, #e8f2fd) !important;
    }

    /* Account for bottom nav in body padding */
    body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    }


    /* ── 26.4 CONTENT AREA ──────────────────────── */

    /* Full width, tighter padding */
    #wrapper > .content,
    .content,
    #wrapper .content {
        padding: 12px !important;
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Offset for fixed header */
    #wrapper {
        padding-top: 56px !important;
    }

    /* Cards / Panels — full width, compact */
    .panel,
    .panel_s,
    .panel-default,
    .card {
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    }

    .panel > .panel-body,
    .panel_s > .panel-body,
    .card-body {
        padding: 12px !important;
    }

    .panel > .panel-heading,
    .panel_s > .panel-heading,
    .card-header {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    /* KPI cards — 2 columns on mobile */
    .sales-kpi-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .sales-kpi-card {
        min-width: 0 !important;
        padding: 12px !important;
        border-radius: 10px !important;
    }

    .sales-kpi-card .kpi-value {
        font-size: 18px !important;
    }

    .sales-kpi-card .kpi-label {
        font-size: 11px !important;
    }

    .sales-kpi-card .kpi-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    /* Top stats / filters row */
    .top_stats_wrapper {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
    }

    .top_stats_wrapper [class*="col-"] {
        min-width: 120px !important;
        flex: 0 0 auto !important;
    }

    /* Chart containers */
    .chart-container,
    .chart-area,
    [id*="chart"],
    canvas {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Dashboard widgets — full width stack */
    .col-md-6, .col-md-4, .col-md-3, .col-lg-6, .col-lg-4, .col-lg-3 {
        /* Let Bootstrap handle stacking, just ensure no overflow */
        min-width: 0 !important;
    }

    /* Pipeline stages — compact */
    .pipeline-stage {
        padding: 8px 10px !important;
    }

    .stage-bar {
        min-width: 0 !important;
    }


    /* ── 26.5 TABLES ────────────────────────────── */

    /* Horizontal scroll wrapper */
    .table-responsive {
        border: none !important;
        margin-bottom: 12px !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 8px !important;
    }

    /* Compact table cells */
    .table > thead > tr > th,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .table > thead > tr > th {
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
    }

    /* Make first column sticky if table allows it */
    .table-responsive .table > thead > tr > th:first-child,
    .table-responsive .table > tbody > tr > td:first-child {
        position: sticky !important;
        left: 0 !important;
        background: var(--z-card-bg, #fff) !important;
        z-index: 2 !important;
        border-right: 1px solid var(--z-border-light, #eef1f5) !important;
    }

    .table-responsive .table > thead > tr > th:first-child {
        z-index: 3 !important;
    }

    /* DataTables wrapper */
    div.dataTables_wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* DataTables length & filter — stack vertically */
    div.dataTables_wrapper .dataTables_length,
    div.dataTables_wrapper .dataTables_filter {
        float: none !important;
        text-align: left !important;
        margin-bottom: 8px !important;
    }

    div.dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        max-width: none !important;
    }

    /* DataTables info & pagination — stack */
    div.dataTables_wrapper .dataTables_info,
    div.dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        margin-top: 8px !important;
    }

    div.dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 6px 10px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }


    /* ── 26.6 FORMS ─────────────────────────────── */

    /* Full width inputs with larger touch targets */
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    select.form-control,
    textarea.form-control {
        min-height: 44px !important;
        font-size: 14px !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        width: 100% !important;
    }

    textarea.form-control {
        min-height: 80px !important;
    }

    /* Bootstrap-select on mobile */
    .bootstrap-select .btn.dropdown-toggle {
        min-height: 44px !important;
        font-size: 14px !important;
    }

    /* Form groups — proper spacing */
    .form-group {
        margin-bottom: 14px !important;
    }

    /* Labels */
    .form-group label,
    .control-label {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }

    /* Inline form elements — stack on mobile */
    .form-inline .form-group,
    .form-inline .form-control {
        display: block !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* Select2 on mobile */
    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        min-height: 44px !important;
        padding: 8px 12px !important;
    }


    /* ── 26.7 MODALS ────────────────────────────── */

    /* Full-screen modals on mobile */
    .modal-dialog {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
    }

    .modal-content {
        border-radius: 16px 16px 0 0 !important;
        border: none !important;
        min-height: 100vh !important;
        box-shadow: none !important;
    }

    .modal-header {
        padding: 14px 16px !important;
        border-bottom: 1px solid var(--z-border-light) !important;
        position: sticky !important;
        top: 0 !important;
        background: var(--z-card-bg, #fff) !important;
        z-index: 5 !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .modal-header .close,
    .modal-header .btn-close {
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        opacity: 0.7 !important;
    }

    .modal-title {
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    .modal-body {
        padding: 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-footer {
        padding: 12px 16px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        position: sticky !important;
        bottom: 0 !important;
        background: var(--z-card-bg, #fff) !important;
        border-top: 1px solid var(--z-border-light) !important;
        z-index: 5 !important;
    }

    .modal-footer .btn {
        min-height: 44px !important;
        font-size: 14px !important;
    }



    /* ── 26.8 BUTTONS & INTERACTIONS ────────────── */

    /* Larger touch targets for all buttons */
    .btn {
        min-height: 40px !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .btn-sm {
        min-height: 34px !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    .btn-xs {
        min-height: 30px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    /* Primary CTA buttons — full width */
    .modal-footer .btn-primary,
    .modal-footer .btn-info,
    form .btn-primary[type="submit"],
    .panel-footer .btn-primary {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Button groups — wrap */
    .btn-group,
    .btn-toolbar {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    /* Dropdown menus — wider on mobile */
    .dropdown-menu {
        min-width: 180px !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
    }

    .dropdown-menu > li > a {
        padding: 10px 16px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        font-size: 14px !important;
    }

    /* Action buttons row (edit/delete etc) — icon only on mobile */
    .table .row-options a,
    .table .actions a,
    td .btn-group .btn {
        padding: 6px 8px !important;
    }

    /* Floating Action Button (if added) */
    .fab,
    .floating-action-btn {
        position: fixed !important;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        background: var(--z-primary, #2c83ec) !important;
        color: #fff !important;
        box-shadow: 0 4px 12px rgba(44,131,236,0.35) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 22px !important;
        z-index: 9999 !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }

    .fab:active,
    .floating-action-btn:active {
        transform: scale(0.92) !important;
        box-shadow: 0 2px 8px rgba(44,131,236,0.3) !important;
    }


    /* ── 26.9 TYPOGRAPHY ────────────────────────── */

    body {
        font-size: 14px !important;
        -webkit-text-size-adjust: 100% !important;
    }

    h1, .h1 { font-size: 22px !important; }
    h2, .h2 { font-size: 18px !important; }
    h3, .h3 { font-size: 16px !important; }
    h4, .h4 { font-size: 14px !important; }
    h5, .h5 { font-size: 13px !important; }
    h6, .h6 { font-size: 12px !important; }

    /* Page titles */
    .page-title,
    .page-header,
    .content > .row:first-child h4,
    ._title,
    .panel-title {
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    /* Breadcrumbs — compact */
    .breadcrumb {
        font-size: 11px !important;
        padding: 6px 0 !important;
        margin-bottom: 8px !important;
    }

    /* Tab navigation — horizontal scroll */
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        white-space: nowrap !important;
    }

    .nav-tabs::-webkit-scrollbar { display: none !important; }

    .nav-tabs > li {
        flex: 0 0 auto !important;
    }

    .nav-tabs > li > a {
        padding: 10px 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }


    /* ── 26.10 SAFE AREAS & VIEWPORT ────────────── */

    /* Prevent horizontal overflow on the entire page */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Safe area padding for notched devices */
    #header {
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
    }

    #mobile-bottom-nav,
    .mobile-bottom-nav {
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
    }

    /* Prevent body scroll when sidebar is open */
    body.show-sidebar {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }


    /* ── 26.11 MISC MOBILE FIXES ────────────────── */

    /* Alerts — compact */
    .alert {
        padding: 10px 12px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        margin-bottom: 10px !important;
    }

    /* Pagination — centered, touch-friendly */
    .pagination > li > a,
    .pagination > li > span {
        min-width: 36px !important;
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px 8px !important;
        font-size: 13px !important;
        margin: 0 2px !important;
        border-radius: 6px !important;
    }

    /* Tags / Badges */
    .label, .badge, .tag {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }

    /* Progress bars */
    .progress {
        height: 6px !important;
        border-radius: 3px !important;
    }

    /* Tooltip / Popover — wider */
    .tooltip-inner {
        max-width: 250px !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    .popover {
        max-width: calc(100vw - 24px) !important;
    }

    /* Calendar views — compact */
    .fc-toolbar {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .fc-toolbar .fc-left,
    .fc-toolbar .fc-center,
    .fc-toolbar .fc-right {
        float: none !important;
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 4px !important;
    }

    /* Invoice / Estimate preview — full width */
    #invoice-preview,
    .invoice-preview,
    .estimate-preview {
        padding: 12px !important;
    }

    #invoice-preview .row > [class*="col-"],
    .invoice-preview .row > [class*="col-"] {
        width: 100% !important;
        float: none !important;
    }

    /* Ticket / Task detail — compact */
    .ticket-detail,
    .task-detail {
        padding: 12px !important;
    }

    /* Scroll to top button — position above bottom nav */
    .scroll-top,
    #back-to-top,
    [id*="scroll-top"] {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
    }

    /* Widget/dashboard greeting */
    .dashboard-greeting {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .dashboard-greeting h2,
    .dashboard-greeting h3 {
        font-size: 16px !important;
    }

    /* Quick filter / top bar actions */
    ._buttons,
    .dt-buttons,
    .btn-bottom-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    ._buttons .btn,
    .dt-buttons .btn {
        flex: 0 0 auto !important;
        font-size: 12px !important;
    }

    /* Timeline — compact */
    .timeline-item,
    .activity-item {
        padding: 10px !important;
        margin-bottom: 8px !important;
    }

    /* Image thumbnails in lists */
    .table img.staff-profile-image,
    .table img[class*="avatar"],
    .table img[class*="thumb"] {
        width: 28px !important;
        height: 28px !important;
    }

    /* Hide desktop-only elements */
    .hidden-mobile,
    .desktop-only {
        display: none !important;
    }

    /* Show mobile-only elements */
    .mobile-only,
    .visible-mobile {
        display: block !important;
    }

} /* END SECTION 26 — Mobile App Experience */


/* ============================================
   29. LEADS MODULE — ZOHO CRM INSPIRED REDESIGN
   Full enterprise-grade leads management UI
   ============================================ */

/* ── 29.1 Page Header ── */
.leads-page-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--z-card-bg) !important;
    border-radius: var(--z-radius-lg) !important;
    padding: 18px 24px !important;
    margin-bottom: 16px !important;
    box-shadow: var(--z-shadow-sm) !important;
    border-top: 3px solid var(--z-primary) !important;
}

.leads-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.leads-header-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--z-primary), var(--z-primary-hover)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 3px 10px rgba(44,131,236,0.3) !important;
}

.leads-header-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.2 !important;
}

.leads-header-count {
    font-size: 12px !important;
    color: var(--z-text-muted) !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
}

.leads-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.leads-btn-primary {
    background: linear-gradient(135deg, var(--z-primary), var(--z-primary-hover)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(44,131,236,0.25) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.leads-btn-primary:hover {
    background: linear-gradient(135deg, var(--z-primary-hover), var(--z-primary-dark)) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(44,131,236,0.35) !important;
    transform: translateY(-1px) !important;
}

.leads-btn-outline {
    background: #fff !important;
    color: var(--z-text) !important;
    border: 1px solid var(--z-border) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.leads-btn-outline:hover {
    background: var(--z-primary-50, #f0f7ff) !important;
    border-color: var(--z-primary) !important;
    color: var(--z-primary) !important;
}

/* ── 29.2 KPI Cards Row ── */
.leads-kpi-row {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
}

.leads-kpi-row::-webkit-scrollbar {
    height: 4px !important;
}

.leads-kpi-row::-webkit-scrollbar-track {
    background: transparent !important;
}

.leads-kpi-row::-webkit-scrollbar-thumb {
    background: var(--z-border) !important;
    border-radius: 4px !important;
}

.leads-kpi-card {
    flex: 1 0 140px !important;
    min-width: 140px !important;
    background: var(--z-card-bg) !important;
    border-radius: var(--z-radius-lg) !important;
    padding: 16px 18px !important;
    border-left: 4px solid var(--kpi-color, var(--z-primary)) !important;
    box-shadow: var(--z-shadow-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.leads-kpi-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 60px !important;
    height: 100% !important;
    background: linear-gradient(135deg, transparent 30%, color-mix(in srgb, var(--kpi-color) 5%, transparent)) !important;
    pointer-events: none !important;
}

.leads-kpi-card:hover {
    box-shadow: var(--z-shadow) !important;
    transform: translateY(-2px) !important;
    border-left-width: 5px !important;
}

.leads-kpi-card.leads-kpi-negative {
    cursor: default !important;
    opacity: 0.85 !important;
}

.leads-kpi-card.leads-kpi-negative:hover {
    transform: none !important;
    box-shadow: var(--z-shadow-sm) !important;
}

.leads-kpi-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.leads-kpi-count {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--z-text-heading) !important;
    line-height: 1 !important;
}

.leads-kpi-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--z-text-muted) !important;
    white-space: nowrap !important;
}

.leads-kpi-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
    position: relative !important;
    z-index: 1 !important;
}

.leads-kpi-percent {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--kpi-color, var(--z-primary)) !important;
    background: color-mix(in srgb, var(--kpi-color) 10%, transparent) !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
}

.leads-kpi-icon {
    font-size: 16px !important;
    color: var(--kpi-color, var(--z-primary)) !important;
    opacity: 0.4 !important;
}

/* ── 29.3 Filter Bar ── */
.leads-filter-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

.leads-filter-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 !important;
}

/* Hide old leads-overview that was replaced */
.leads-overview {
    display: none !important;
}

/* Hide old _buttons wrapper — replaced by leads-page-header + leads-filter-bar */
.leads-page-header ~ ._buttons {
    display: none !important;
}

/* ── 29.4 Table Card Wrapper ── */
.leads-table-card {
    background: var(--z-card-bg) !important;
    border-radius: var(--z-radius-lg) !important;
    box-shadow: var(--z-shadow-sm) !important;
    border: 1px solid var(--z-border-light) !important;
    overflow: hidden !important;
}

.leads-table-card-body {
    padding: 0 !important;
}

.leads-table-card .panel-table-full {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* ── 29.5 Leads Table Enhancement ── */
.table-leads thead th,
table.dataTable.table-leads thead th {
    background: #f8fafb !important;
    color: var(--z-text-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    border-bottom: 2px solid var(--z-border) !important;
    border-top: none !important;
    padding: 12px 16px !important;
    white-space: nowrap !important;
}

.table-leads tbody td {
    padding: 13px 16px !important;
    font-size: 13px !important;
    color: var(--z-text) !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--z-border-light) !important;
}

.table-leads tbody tr {
    transition: background 0.15s ease !important;
}

.table-leads tbody tr:hover td {
    background: var(--z-primary-50, #f0f7ff) !important;
}

/* Lead name link in table */
.table-leads tbody td a[onclick*="init_lead"] {
    font-weight: 600 !important;
    color: var(--z-text-heading) !important;
    transition: color 0.15s ease !important;
}

.table-leads tbody td a[onclick*="init_lead"]:hover {
    color: var(--z-primary) !important;
}

/* Status badges in table */
.table-leads span[class*="lead-status-"],
.table-leads .lead-status-badge {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* DataTable wrapper inside leads-table-card */
.leads-table-card .dataTables_wrapper {
    padding: 0 !important;
}

.leads-table-card .dataTables_wrapper .dataTables_filter,
.leads-table-card .dataTables_wrapper .dataTables_length {
    padding: 12px 16px 0 !important;
}

.leads-table-card .dataTables_wrapper .dataTables_info,
.leads-table-card .dataTables_wrapper .dataTables_paginate {
    padding: 12px 16px !important;
}

.leads-table-card .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    margin: 0 2px !important;
}

.leads-table-card .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--z-primary) !important;
    color: #fff !important;
    border-color: var(--z-primary) !important;
}

/* Bulk actions link styling */
.leads-table-card .bulk-actions-btn {
    margin: 12px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* ── 29.6 Kanban Board — Modern ── */
.kanban-leads-sort {
    background: var(--z-card-bg) !important;
    border: none !important;
    border-radius: var(--z-radius-lg) !important;
    padding: 12px 20px !important;
    margin-bottom: 14px !important;
    font-size: 13px !important;
    box-shadow: var(--z-shadow-sm) !important;
}

.kanban-leads-sort a {
    color: var(--z-primary) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    transition: all 0.15s !important;
}

.kanban-leads-sort a:hover {
    background: rgba(44,131,236,0.08) !important;
}

/* Kanban columns */
.leads-kan-ban .kan-ban-col,
.leads-kan-ban .kanban-col,
#kan-ban .kan-ban-col {
    background: #f4f6f9 !important;
    border-radius: 12px !important;
    border: 1px solid var(--z-border-light) !important;
    margin: 0 5px !important;
    overflow: hidden !important;
}

.leads-kan-ban .kan-ban-col .kan-ban-col-heading,
#kan-ban .kan-ban-col .panel-heading,
#kan-ban .kan-ban-heading,
.kanban-col .panel-heading,
.kan-ban-col > .panel-heading {
    background: #fff !important;
    border-bottom: 2px solid var(--z-border-light) !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    letter-spacing: 0.2px !important;
}

.leads-kan-ban .kan-ban-col .kan-ban-col-heading .label,
#kan-ban .kan-ban-col .panel-heading .label,
.kan-ban-col > .panel-heading .badge,
.kan-ban-col > .panel-heading .label {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    margin-left: 8px !important;
}

/* ── 29.7 Kanban Cards ── */
.lead-kan-ban .panel-body,
.lead-kan-ban .lead-body,
li.lead-kan-ban {
    background: #fff !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    margin: 6px 10px !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    list-style: none !important;
}

li.lead-kan-ban:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.1) !important;
    border-color: color-mix(in srgb, var(--z-primary) 30%, transparent) !important;
    transform: translateY(-1px) !important;
}

li.lead-kan-ban .panel-body,
li.lead-kan-ban .lead-body {
    padding: 14px 16px !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    background: transparent !important;
}

.lead-kan-ban .lead-name a,
.lead-kan-ban .lead-name .tw-block {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--z-text-heading) !important;
    line-height: 1.4 !important;
}

.lead-kan-ban .lead-name a:hover {
    color: var(--z-primary) !important;
}

.lead-kan-ban .tw-text-sm {
    color: var(--z-text-muted) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.lead-kan-ban .lead-field-heading {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
    margin-bottom: 2px !important;
}

.lead-kan-ban .staff-profile-image-xs {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.lead-kan-ban .text-muted i {
    font-size: 13px !important;
}

.lead-kan-ban .kanban-tags .label,
.lead-kan-ban .kanban-tags span[class*="label"] {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    margin: 2px 2px 0 0 !important;
}

.lead-kan-ban .kan-ban-expand-top {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
    opacity: 0.4 !important;
    transition: opacity 0.2s !important;
}

.lead-kan-ban:hover .kan-ban-expand-top {
    opacity: 1 !important;
}

li.lead-kan-ban.current-user-lead {
    border-left: 3px solid var(--z-primary) !important;
}

/* ── 29.8 Lead Modal / Profile ── */
#lead-modal .modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18) !important;
    overflow: hidden !important;
}

#lead-modal .modal-header {
    background: linear-gradient(135deg, #f8fafb, #fff) !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    padding: 18px 24px !important;
}

#lead-modal .modal-header .modal-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#lead-modal .modal-header .modal-title .label {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

#lead-modal .modal-header .close {
    font-size: 22px !important;
    opacity: 0.5 !important;
    transition: opacity 0.2s !important;
}

#lead-modal .modal-header .close:hover {
    opacity: 1 !important;
}

#lead-modal .modal-body {
    padding: 20px 24px !important;
}

/* Lead print button */
.lead-print-btn {
    background: var(--z-card-bg) !important;
    border: 1px solid var(--z-border) !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
}

.lead-print-btn:hover {
    background: var(--z-primary-50, #f0f7ff) !important;
    border-color: var(--z-primary) !important;
    color: var(--z-primary) !important;
}

/* Lead modal header — Zoho CRM redesign */
.lead-modal-header {
    padding: 0 !important;
    background: linear-gradient(135deg, #f8fafb, #fff) !important;
    border-bottom: 1px solid var(--z-border-light) !important;
}

.lead-modal-header .close {
    position: absolute !important;
    top: 14px !important;
    right: 18px !important;
    z-index: 10 !important;
    font-size: 22px !important;
    opacity: 0.5 !important;
    transition: opacity 0.2s !important;
}

.lead-modal-header .close:hover {
    opacity: 1 !important;
}

.lead-modal-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 24px !important;
}

.lead-modal-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.lead-modal-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--z-primary), var(--z-primary-hover)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 3px 10px rgba(44,131,236,0.25) !important;
}

.lead-modal-avatar span {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 0.5px !important;
}

.lead-modal-avatar-new {
    background: linear-gradient(135deg, var(--z-success), #1a9d5a) !important;
    box-shadow: 0 3px 10px rgba(46,204,113,0.25) !important;
}

.lead-modal-avatar-new i {
    font-size: 18px !important;
    color: #fff !important;
}

.lead-modal-title-group {
    min-width: 0 !important;
    flex: 1 !important;
}

.lead-modal-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.lead-modal-id {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
    margin-right: 6px !important;
}

.lead-modal-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.lead-modal-badge {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

.lead-modal-badge-danger {
    background: var(--z-danger-bg) !important;
    color: var(--z-danger-text) !important;
    border: 1px solid #fecaca !important;
}

.lead-modal-badge-warning {
    background: var(--z-warning-bg) !important;
    color: var(--z-warning-text) !important;
    border: 1px solid #fde68a !important;
}

.lead-modal-badge-success {
    background: var(--z-success-bg) !important;
    color: var(--z-success-text) !important;
    border: 1px solid #a7f3d0 !important;
}

.lead-modal-status {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    border: 1px solid !important;
}

.lead-modal-source {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    background: #f0f4f8 !important;
    color: var(--z-text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.lead-modal-value {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--z-success-text) !important;
    background: var(--z-success-bg) !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
}

.lead-modal-value i {
    font-size: 10px !important;
    margin-right: 2px !important;
}

.lead-modal-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-right: 24px !important;
}

.lead-modal-header-right .lead-print-btn {
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    border: 1px solid var(--z-border) !important;
    color: var(--z-text-muted) !important;
    font-size: 14px !important;
}

.lead-modal-header-right .lead-print-btn:hover {
    background: var(--z-primary-50, #f0f7ff) !important;
    border-color: var(--z-primary) !important;
    color: var(--z-primary) !important;
}

/* Lead tabs in modal — segmented style */
#lead-modal .nav-tabs,
.lead-wrapper .nav-tabs {
    border-bottom: 2px solid var(--z-border-light) !important;
    padding: 0 !important;
}

#lead-modal .nav-tabs > li > a,
.lead-wrapper .nav-tabs > li > a {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
    padding: 10px 16px !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
}

#lead-modal .nav-tabs > li > a .menu-icon,
.lead-wrapper .nav-tabs > li > a .menu-icon {
    margin-right: 5px !important;
    font-size: 13px !important;
}

#lead-modal .nav-tabs > li.active > a,
.lead-wrapper .nav-tabs > li.active > a {
    color: var(--z-primary) !important;
    border-bottom-color: var(--z-primary) !important;
    background: transparent !important;
}

#lead-modal .nav-tabs > li > a:hover,
.lead-wrapper .nav-tabs > li > a:hover {
    color: var(--z-primary) !important;
    background: rgba(44,131,236,0.04) !important;
}

#lead-modal .nav-tabs > li > a .badge {
    background: var(--z-primary) !important;
    color: #fff !important;
    font-size: 10px !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    min-width: 18px !important;
    margin-left: 4px !important;
}

/* Lead modal & panel-full-width scroller arrows — visible */
#lead-modal .horizontal-scrollable-tabs .scroller,
#lead-modal .horizontal-scrollable-tabs .scroller:hover,
.modal .panel-full-width-tabs.horizontal-scrollable-tabs .scroller {
    background-color: #fff !important;
    color: var(--z-primary) !important;
    border-color: var(--z-border-light) !important;
    box-shadow: -4px 0 8px rgba(0,0,0,0.05) !important;
}
#lead-modal .horizontal-scrollable-tabs .scroller i,
.modal .panel-full-width-tabs.horizontal-scrollable-tabs .scroller i {
    color: var(--z-primary) !important;
    font-size: 14px !important;
}
#lead-modal .horizontal-scrollable-tabs .scroller.disabled i,
.modal .panel-full-width-tabs.horizontal-scrollable-tabs .scroller.disabled i {
    color: #ccc !important;
}

/* ── 29.9 Lead Profile Info Sections ── */
.lead-info-heading {
    margin-bottom: 12px !important;
}

.lead-info-heading h4 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin: 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid var(--z-primary) !important;
    display: inline-block !important;
}

.lead-information-col {
    padding: 0 20px !important;
}

.lead-information-col dl {
    margin: 0 !important;
}

.lead-information-col dt.lead-field-heading {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
    margin: 10px 0 2px 0 !important;
}

.lead-information-col dd {
    font-size: 13.5px !important;
    color: var(--z-text-heading) !important;
    font-weight: 500 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.5 !important;
}

.lead-information-col dd a {
    color: var(--z-primary) !important;
    font-weight: 500 !important;
}

/* Lead value highlight */
.lead-information-col dd:has(+ dt) {
    margin-bottom: 0 !important;
}

/* Lead status badge in profile */
.lead-status-badge,
span[class*="lead-status-"] {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
}

/* Lead action buttons in profile */
.lead-top-btn {
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    transition: all 0.2s !important;
}

.lead-top-btn.btn-primary {
    box-shadow: 0 2px 6px rgba(44,131,236,0.2) !important;
}

.lead-top-btn.btn-default {
    border: 1px solid var(--z-border) !important;
    background: #fff !important;
}

.lead-top-btn.btn-default:hover {
    background: var(--z-primary-50, #f0f7ff) !important;
    border-color: var(--z-primary) !important;
    color: var(--z-primary) !important;
}

/* More dropdown in lead profile */
#lead-more-btn .dropdown-toggle {
    border-radius: 8px !important;
}

#lead-more-dropdown {
    border-radius: 10px !important;
    box-shadow: var(--z-shadow-lg) !important;
    border: 1px solid var(--z-border-light) !important;
    padding: 6px 0 !important;
    min-width: 180px !important;
}

#lead-more-dropdown li a {
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background 0.15s !important;
}

#lead-more-dropdown li a:hover {
    background: var(--z-primary-50, #f0f7ff) !important;
}

#lead-more-dropdown li a .text-danger,
#lead-more-dropdown li a.text-danger {
    color: var(--z-danger) !important;
}

/* ── 29.10 Lead Notes Section ── */
.lead-note {
    padding: 14px 0 !important;
}

.lead-note .media-heading {
    font-size: 13px !important;
    color: var(--z-text-heading) !important;
}

.lead-note .media-body .text-muted {
    font-size: 12px !important;
}

/* ── 29.11 Lead Activity Feed ── */
.lead-wrapper .activity-feed .feed-item {
    padding: 10px 0 10px 24px !important;
    border-left: 2px solid var(--z-border-light) !important;
    position: relative !important;
}

.lead-wrapper .activity-feed .feed-item::before {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--z-primary) !important;
    position: absolute !important;
    left: -5px !important;
    top: 14px !important;
}

.lead-wrapper .activity-feed .feed-item .date {
    font-size: 11px !important;
    color: var(--z-text-muted) !important;
    margin-bottom: 3px !important;
}

.lead-wrapper .activity-feed .feed-item .text {
    font-size: 13px !important;
    color: var(--z-text) !important;
    line-height: 1.5 !important;
}

/* ── 29.12 Bulk Actions Modal ── */
#leads_bulk_actions .modal-content {
    border-radius: 14px !important;
    overflow: hidden !important;
    border: none !important;
}

#leads_bulk_actions .modal-header {
    background: linear-gradient(135deg, #f8fafb, #fff) !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    padding: 16px 20px !important;
}

#leads_bulk_actions .modal-header h4 {
    font-weight: 700 !important;
    font-size: 15px !important;
}

#leads_bulk_actions .modal-footer {
    background: #f8fafb !important;
    border-top: 1px solid var(--z-border-light) !important;
    padding: 12px 20px !important;
}

/* ── 29.13 Kanban Content Wrapper ── */
.leads-kan-ban,
#kan-ban {
    padding: 4px 0 !important;
}

.kan-ban-content-wrapper {
    min-height: 250px !important;
    padding: 4px 0 8px !important;
}

.kan-ban-load-more,
.kanban-load-more {
    background: transparent !important;
    border: 1px dashed var(--z-border) !important;
    border-radius: 8px !important;
    color: var(--z-text-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 8px !important;
    margin: 8px 10px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.kan-ban-load-more:hover,
.kanban-load-more:hover {
    background: rgba(44,131,236,0.04) !important;
    border-color: var(--z-primary) !important;
    color: var(--z-primary) !important;
}

/* ── 29.14 Kanban Search ── */
.leads-search input[type="search"],
.leads-search input[name="search"] {
    border-radius: 10px !important;
    border: 1px solid var(--z-border) !important;
    padding: 8px 14px 8px 36px !important;
    font-size: 13px !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 12px center !important;
    background-size: 14px !important;
    transition: all 0.2s !important;
    width: 280px !important;
}

.leads-search input:focus {
    border-color: var(--z-primary) !important;
    box-shadow: 0 0 0 3px rgba(44,131,236,0.1) !important;
}

/* ── 29.15 Empty State ── */
.leads-kan-ban .text-center.mtop20,
#kan-ban .text-center.mtop20 {
    padding: 40px !important;
    color: var(--z-text-muted) !important;
    font-size: 14px !important;
}

/* ── 29.16 Lead Email Activity ── */
.lead-email-activity {
    display: flex !important;
    gap: 14px !important;
    padding: 14px 0 !important;
}

.lead-email-activity .media-left i {
    font-size: 18px !important;
    color: var(--z-primary) !important;
    margin-top: 4px !important;
}

.lead-mail-activity-subject {
    font-size: 14px !important;
    color: var(--z-text-heading) !important;
}

/* ── 29.17 Follow-ups & Call Logs in Modal ── */
#tab_followups_leads .table,
#tab_call_logs .table {
    border-radius: 8px !important;
    overflow: hidden !important;
}

#tab_followups_leads .table thead th,
#tab_call_logs .table thead th {
    background: #f8fafb !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--z-text-muted) !important;
    padding: 10px 14px !important;
    border-bottom: 2px solid var(--z-border) !important;
}

#tab_followups_leads .table tbody td,
#tab_call_logs .table tbody td {
    padding: 10px 14px !important;
    font-size: 13px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--z-border-light) !important;
}

/* ── 29.18 Lead Form Edit Mode ── */
.lead-edit .form-group label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--z-text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.lead-edit .form-control {
    border-radius: 8px !important;
    border: 1px solid var(--z-border) !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.lead-edit .form-control:focus {
    border-color: var(--z-primary) !important;
    box-shadow: 0 0 0 3px rgba(44,131,236,0.1) !important;
}

.lead-save-btn {
    border-radius: 8px !important;
    padding: 8px 24px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* ── 29.19 Lead Latest Activity ── */
.lead-latest-activity {
    background: #f8fafb !important;
    border-radius: var(--z-radius) !important;
    padding: 14px 18px !important;
    margin-top: 12px !important;
}

.lead-latest-activity .lead-info-heading h4 {
    font-size: 12px !important;
    margin-bottom: 8px !important;
}

/* ── 29.20 Responsive ── */
@media (max-width: 992px) {
    .leads-page-header {
        flex-direction: column !important;
        gap: 14px !important;
        padding: 16px 18px !important;
        align-items: flex-start !important;
    }

    .leads-header-actions {
        width: 100% !important;
        justify-content: flex-end !important;
    }

    .leads-kpi-row {
        gap: 8px !important;
    }

    .leads-kpi-card {
        flex: 1 0 120px !important;
        min-width: 120px !important;
        padding: 12px 14px !important;
    }

    .leads-kpi-count {
        font-size: 18px !important;
    }

    .leads-search input[type="search"] {
        width: 100% !important;
    }

    .lead-information-col {
        padding: 0 15px !important;
        margin-bottom: 16px !important;
    }
}

@media (max-width: 576px) {
    .leads-page-header {
        padding: 14px !important;
    }

    .leads-header-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
    }

    .leads-header-title {
        font-size: 17px !important;
    }

    .leads-kpi-card {
        flex: 1 0 100px !important;
        min-width: 100px !important;
        padding: 10px 12px !important;
    }

    .leads-kpi-count {
        font-size: 16px !important;
    }

    .leads-kpi-label {
        font-size: 10px !important;
    }

    .leads-kpi-percent {
        font-size: 10px !important;
    }

    .leads-btn-primary,
    .leads-btn-outline {
        padding: 7px 12px !important;
        font-size: 12px !important;
    }
}


/* ============================================
   30. CLIENT / CUSTOMER PROFILE PAGE
   Zoho CRM–inspired modern customer detail page
   Profile Header → KPI Row → Horizontal Tabs → Content
   ============================================ */

/* --- 30.1 Page Layout --- */
.customer_profile .content {
    max-width: 1280px !important;
    padding-top: 16px !important;
}

/* --- 30.2 Profile Header Card --- */
.cp-header-card {
    background: var(--z-card-bg) !important;
    border-radius: 14px !important;
    box-shadow: var(--z-shadow) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    border-top: 3px solid var(--z-primary) !important;
}

.cp-header-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 24px 28px !important;
    gap: 20px !important;
}

.cp-header-left {
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* Avatar */
.cp-avatar {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--z-primary), var(--z-primary-dark)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(44, 131, 236, 0.25) !important;
}

.cp-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

.cp-avatar-initials {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
}

/* Header info */
.cp-header-info {
    flex: 1 !important;
    min-width: 0 !important;
    padding-top: 2px !important;
}

.cp-company-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-bottom: 8px !important;
}

.cp-company-name {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading, #1a2332) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.cp-id-badge {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
    background: var(--z-border-light) !important;
    padding: 2px 10px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
}

.cp-status-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 12px !important;
    border-radius: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
}

.cp-status-active {
    background: var(--z-success-bg) !important;
    color: var(--z-success-text) !important;
    border: 1px solid rgba(46, 204, 113, 0.3) !important;
}

.cp-status-inactive {
    background: var(--z-danger-bg) !important;
    color: var(--z-danger-text) !important;
    border: 1px solid rgba(224, 70, 70, 0.3) !important;
}

/* Meta row (contact, email, phone, website) */
.cp-meta-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 20px !important;
    margin-bottom: 6px !important;
}

.cp-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: var(--z-text-secondary) !important;
}

.cp-meta-item i {
    font-size: 12px !important;
    color: var(--z-text-muted) !important;
    width: 14px !important;
    text-align: center !important;
}

.cp-meta-item a {
    color: var(--z-primary) !important;
    text-decoration: none !important;
}

.cp-meta-item a:hover {
    text-decoration: underline !important;
}

/* Lead source link */
.cp-lead-from {
    font-size: 12px !important;
    color: var(--z-text-muted) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--z-primary-50) !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    margin-top: 4px !important;
}

.cp-lead-from a {
    color: var(--z-primary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.cp-lead-from a:hover {
    text-decoration: underline !important;
}

/* Header action buttons */
.cp-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.cp-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    border: none !important;
}

.cp-btn i {
    font-size: 13px !important;
}

.cp-btn-primary {
    background: var(--z-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(44, 131, 236, 0.25) !important;
}

.cp-btn-primary:hover {
    background: var(--z-primary-hover) !important;
    box-shadow: 0 4px 10px rgba(44, 131, 236, 0.3) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.cp-btn-outline {
    background: #fff !important;
    color: var(--z-text-secondary) !important;
    border: 1px solid var(--z-border) !important;
}

.cp-btn-outline:hover {
    background: var(--z-primary-50) !important;
    color: var(--z-primary) !important;
    border-color: var(--z-primary) !important;
    text-decoration: none !important;
}

/* More actions dropdown */
.cp-header-actions .btn-group .cp-btn {
    padding: 8px 10px !important;
}

.cp-header-actions .dropdown-menu {
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid var(--z-border-light) !important;
    padding: 6px !important;
    min-width: 180px !important;
}

.cp-header-actions .dropdown-menu li a {
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background 0.15s !important;
}

.cp-header-actions .dropdown-menu li a:hover {
    background: var(--z-bg-light, #f8fafc) !important;
}

/* --- 30.3 KPI Summary Row --- */
.cp-kpi-row {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
}

.cp-kpi-card {
    background: var(--z-card-bg) !important;
    border-radius: 12px !important;
    box-shadow: var(--z-shadow-sm) !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    border-left: 4px solid transparent !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
}

.cp-kpi-card:hover {
    box-shadow: var(--z-shadow) !important;
    transform: translateY(-1px) !important;
}

.cp-kpi-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
}

.cp-kpi-data {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.cp-kpi-value {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cp-kpi-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-top: 2px !important;
}

/* KPI Color Variants */
.cp-kpi-blue {
    border-left-color: var(--z-primary) !important;
}
.cp-kpi-blue .cp-kpi-icon {
    background: var(--z-primary-50) !important;
    color: var(--z-primary) !important;
}

.cp-kpi-green {
    border-left-color: var(--z-success) !important;
}
.cp-kpi-green .cp-kpi-icon {
    background: var(--z-success-bg) !important;
    color: var(--z-success-text) !important;
}

.cp-kpi-orange {
    border-left-color: var(--z-warning) !important;
}
.cp-kpi-orange .cp-kpi-icon {
    background: var(--z-warning-bg) !important;
    color: var(--z-warning-text) !important;
}

.cp-kpi-purple {
    border-left-color: #7c3aed !important;
}
.cp-kpi-purple .cp-kpi-icon {
    background: #f3eefb !important;
    color: #7c3aed !important;
}

.cp-kpi-teal {
    border-left-color: #0d9488 !important;
}
.cp-kpi-teal .cp-kpi-icon {
    background: #e6f7f5 !important;
    color: #0d9488 !important;
}

.cp-kpi-red {
    border-left-color: var(--z-danger) !important;
}
.cp-kpi-red .cp-kpi-icon {
    background: var(--z-danger-bg) !important;
    color: var(--z-danger-text) !important;
}

/* --- 30.4 Horizontal Tabs Navigation --- */
.cp-tabs-wrapper {
    background: var(--z-card-bg) !important;
    border-radius: 14px !important;
    box-shadow: var(--z-shadow-sm) !important;
    overflow: hidden !important;
}

.cp-horizontal-tabs {
    border-bottom: 2px solid var(--z-border-light) !important;
    background: #fff !important;
}

.cp-tabs-scroll-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

.cp-tabs-scroll-wrapper::-webkit-scrollbar {
    display: none !important;
}

.cp-tab-list {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
}

.cp-tab-item {
    flex-shrink: 0 !important;
}

.cp-tab-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.cp-tab-link:hover {
    color: var(--z-primary) !important;
    text-decoration: none !important;
    background: rgba(44, 131, 236, 0.03) !important;
    border-bottom-color: rgba(44, 131, 236, 0.3) !important;
}

.cp-tab-link:focus {
    text-decoration: none !important;
}

.cp-tab-link i {
    font-size: 14px !important;
    color: var(--z-text-muted) !important;
    transition: color 0.2s !important;
}

.cp-tab-link:hover i {
    color: var(--z-primary) !important;
}

/* Active tab */
.cp-tab-active .cp-tab-link {
    color: var(--z-primary) !important;
    border-bottom-color: var(--z-primary) !important;
    font-weight: 700 !important;
}

.cp-tab-active .cp-tab-link i {
    color: var(--z-primary) !important;
}

/* Tab badge */
.cp-tab-badge {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 1px 7px !important;
    border-radius: 10px !important;
    color: #fff !important;
    line-height: 1.5 !important;
}

/* Mobile tab select */
.cp-tab-mobile-select {
    border-radius: 10px !important;
    border: 1px solid var(--z-border) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: #fff !important;
    margin-bottom: 12px !important;
    box-shadow: var(--z-shadow-sm) !important;
}

/* --- 30.5 Content Area inside Tabs Wrapper --- */
.cp-content-area {
    padding: 0 !important;
}

.cp-content-area .panel_s {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
}

.cp-content-area .panel_s .panel-body {
    padding: 24px 28px !important;
}

/* Panel footer (Save buttons) */
.cp-content-area .panel-footer,
.cp-content-area #profile-save-section {
    background: var(--z-bg-light, #f8fafc) !important;
    border-top: 1px solid var(--z-border-light) !important;
    padding: 16px 28px !important;
}

.cp-content-area .panel-footer .btn-primary,
.cp-content-area #profile-save-section .btn-primary {
    padding: 10px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(44, 131, 236, 0.2) !important;
}

.cp-content-area .panel-footer .btn-default,
.cp-content-area #profile-save-section .btn-default {
    padding: 10px 20px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    border: 1px solid var(--z-border) !important;
}

/* --- 30.6 Form Section Headers (inside profile tab) --- */
.customer-profile-group-heading {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    margin: 0 0 20px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--z-primary-light) !important;
}

/* Section dividers */
.customer_profile .tab-pane hr {
    border-top: 1px solid var(--z-border-light) !important;
    margin: 24px 0 !important;
}

/* --- 30.7 Profile Tabs (Horizontal within profile edit) --- */
.customer-profile-tabs.nav-tabs,
.customer_profile .nav-tabs-horizontal {
    border-bottom: 2px solid var(--z-border-light) !important;
    margin-bottom: 0 !important;
}

.customer-profile-tabs > li > a {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
    padding: 12px 20px !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    transition: all 0.2s !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.customer-profile-tabs > li > a:hover {
    color: var(--z-primary) !important;
    background: rgba(44, 131, 236, 0.03) !important;
    border-bottom-color: rgba(44, 131, 236, 0.3) !important;
}

.customer-profile-tabs > li.active > a,
.customer-profile-tabs > li.active > a:hover,
.customer-profile-tabs > li.active > a:focus {
    color: var(--z-primary) !important;
    border-bottom-color: var(--z-primary) !important;
    background: transparent !important;
    font-weight: 700 !important;
}

.customer-profile-tabs > li > a i.fa-fw {
    margin-right: 4px !important;
    font-size: 13px !important;
    opacity: 0.7 !important;
}

.customer-profile-tabs > li.active > a i.fa-fw {
    opacity: 1 !important;
    color: var(--z-primary) !important;
}

/* --- 30.8 Form Controls Enhancement --- */
.client-form .form-group label,
.customer_profile .form-group > label,
.customer_profile .control-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 6px !important;
}

.client-form .form-control,
.customer_profile .tab-pane .form-control {
    border: 1px solid var(--z-border) !important;
    border-radius: 8px !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
    color: var(--z-text) !important;
    background: #fff !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    height: auto !important;
    min-height: 40px !important;
}

.client-form .form-control:focus,
.customer_profile .tab-pane .form-control:focus {
    border-color: var(--z-primary) !important;
    box-shadow: 0 0 0 3px rgba(44, 131, 236, 0.1) !important;
    outline: none !important;
}

.client-form textarea.form-control,
.customer_profile .tab-pane textarea.form-control {
    min-height: 80px !important;
    resize: vertical !important;
}

/* Select pickers */
.client-form .bootstrap-select .btn.dropdown-toggle,
.customer_profile .tab-pane .bootstrap-select .btn.dropdown-toggle {
    border: 1px solid var(--z-border) !important;
    border-radius: 8px !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
    background: #fff !important;
    height: auto !important;
    min-height: 40px !important;
}

.client-form .bootstrap-select .btn.dropdown-toggle:focus,
.customer_profile .tab-pane .bootstrap-select .btn.dropdown-toggle:focus {
    border-color: var(--z-primary) !important;
    box-shadow: 0 0 0 3px rgba(44, 131, 236, 0.1) !important;
}

/* Input group buttons */
.client-form .input-group-btn .btn {
    border-radius: 0 8px 8px 0 !important;
    border: 1px solid var(--z-border) !important;
    border-left: none !important;
    min-height: 40px !important;
}

/* --- 30.9 Billing & Shipping Section --- */
.customer_profile #billing_and_shipping h4 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--z-border-light) !important;
    margin-bottom: 20px !important;
}

.customer_profile #billing_and_shipping h4 a {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--z-primary) !important;
    text-decoration: none !important;
}

.customer_profile #billing_and_shipping h4 a:hover {
    text-decoration: underline !important;
}

.customer_profile #billing_and_shipping .col-md-6 {
    padding: 0 20px !important;
}

.customer_profile #billing_and_shipping .col-md-6:first-child {
    border-right: 1px solid var(--z-border-light) !important;
}

.customer_profile #billing_and_shipping .tw-bg-neutral-50 {
    background: var(--z-primary-50, #f0f7ff) !important;
    border-color: var(--z-primary-light) !important;
    border-radius: 10px !important;
    margin-top: 20px !important;
}

/* --- 30.10 Checkbox & Radio --- */
.customer_profile .checkbox label,
.customer_profile .radio label {
    font-size: 13px !important;
    color: var(--z-text) !important;
}

/* --- 30.11 Customer Admins Tab --- */
.customer_profile #customer_admins .btn-primary {
    border-radius: 8px !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.customer_profile #customer_admins .table th {
    background: var(--z-bg-light, #f8fafc) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--z-text-muted) !important;
    padding: 10px 14px !important;
    border-bottom: 2px solid var(--z-border) !important;
}

.customer_profile #customer_admins .table td {
    padding: 12px 14px !important;
    font-size: 13px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--z-border-light) !important;
}

.customer_profile #customer_admins .table tr:hover td {
    background: #f0f7ff !important;
}

/* --- 30.12 New Client Form (Create mode) --- */
.customer_profile .tw-mx-auto.tw-max-w-4xl {
    max-width: 800px !important;
}

.customer_profile .tw-mx-auto.tw-max-w-4xl .panel_s {
    border: none !important;
    border-top: 3px solid var(--z-primary) !important;
    border-radius: 14px !important;
    box-shadow: var(--z-shadow) !important;
}

.customer_profile .tw-mx-auto.tw-max-w-4xl h4.tw-font-bold {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    margin-bottom: 20px !important;
}

.customer_profile .tw-mx-auto .panel_s .panel-body {
    padding: 24px 28px !important;
    background: var(--z-bg-light, #f8fafc) !important;
}

/* --- 30.13 Alert Styling --- */
.customer_profile .alert {
    border-radius: 10px !important;
    border: none !important;
    padding: 14px 20px !important;
    font-size: 13px !important;
    margin-bottom: 16px !important;
}

.customer_profile .alert-warning {
    background: #fff8e1 !important;
    color: #8a6d00 !important;
    border-left: 4px solid #f9a825 !important;
}

.customer_profile .alert-info {
    background: var(--z-primary-50) !important;
    color: var(--z-primary-dark) !important;
    border-left: 4px solid var(--z-primary) !important;
}

/* --- 30.14 Tables inside Customer Tabs --- */
.cp-content-area .table th,
.customer_profile .cp-content-area .table th {
    background: #f8fafc !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
    padding: 10px 14px !important;
    border-bottom: 2px solid var(--z-border) !important;
}

.cp-content-area .table td {
    padding: 11px 14px !important;
    font-size: 13px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    color: var(--z-text) !important;
}

.cp-content-area .table tbody tr:hover td {
    background: #f8fbff !important;
}

/* Status badges in tables */
.cp-content-area .label,
.cp-content-area .badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
}

/* --- 30.15 Onboard Section Groups (Zoho-style) --- */
.onboard-section {
    background: #fff !important;
    border: 1px solid var(--z-border-light) !important;
    border-radius: 10px !important;
    padding: 20px 24px 8px !important;
    margin-bottom: 20px !important;
    position: relative !important;
}

.onboard-section-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    margin-bottom: 18px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.onboard-section-title i {
    color: var(--z-primary) !important;
    font-size: 15px !important;
    width: 18px !important;
    text-align: center !important;
}

.onboard-section-title a {
    color: var(--z-primary) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.onboard-section-title a:hover {
    text-decoration: underline !important;
}

.onboard-section .form-group {
    margin-bottom: 16px !important;
}

/* --- 30.16 Responsive --- */
@media (max-width: 991px) {
    .cp-kpi-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .cp-header-top {
        flex-direction: column !important;
        padding: 18px 16px !important;
    }

    .cp-header-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .cp-kpi-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .cp-kpi-card {
        padding: 12px 14px !important;
    }

    .cp-kpi-value {
        font-size: 15px !important;
    }

    .cp-content-area .panel_s .panel-body {
        padding: 18px 16px !important;
    }

    .cp-content-area .panel-footer,
    .cp-content-area #profile-save-section {
        padding: 12px 16px !important;
    }

    .customer_profile #billing_and_shipping .col-md-6:first-child {
        border-right: none !important;
        border-bottom: 1px solid var(--z-border-light) !important;
        padding-bottom: 20px !important;
        margin-bottom: 20px !important;
    }

    .cp-company-name {
        font-size: 18px !important;
    }

    .cp-avatar {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
    }

    .cp-avatar-initials {
        font-size: 18px !important;
    }
}

@media (max-width: 480px) {
    .cp-kpi-row {
        grid-template-columns: 1fr !important;
    }
}

/* --- 30.17 Legacy Layout Override --- */
/* Hide old sidebar layout when new horizontal tabs are in use */
.customer_profile .content > .md\:tw-flex {
    display: block !important;
}

.customer_profile .content > .md\:tw-max-w-64 {
    display: none !important;
}

/* Override old sidebar-based width constraint */
.customer_profile .tw-max-w-6xl {
    max-width: 100% !important;
}

/* Neutralize the generic blue-top-border rule for panels inside the new tabs wrapper */
.cp-tabs-wrapper .panel_s,
.cp-tabs-wrapper .panel_s:first-child,
.cp-content-area .panel_s:first-child {
    border-top: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* ═══════════════════════════════════════════════
   Section 29: PROJECTS MODULE — Zoho CRM Redesign
   ═══════════════════════════════════════════════ */

/* ── 29.1 Page Layout & Buttons ── */

/* Hide old stats.php on manage page (replaced by KPI cards) */
._filters._hidden_inputs {
    display: none !important;
}


/* ── 29.3 Projects DataTable Card ── */

/* Table header row */
.table-projects > thead > tr > th,
.table.table-projects > thead > tr > th {
    background: var(--z-body-bg) !important;
    color: var(--z-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 14px !important;
    border-bottom: 2px solid var(--z-border) !important;
    border-top: none !important;
    white-space: nowrap !important;
}

/* Table body rows */
.table-projects > tbody > tr > td,
.table.table-projects > tbody > tr > td {
    padding: 11px 14px !important;
    font-size: 13px !important;
    color: var(--z-text) !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    vertical-align: middle !important;
}

/* Row hover */
.table-projects > tbody > tr:hover > td,
.table.table-projects > tbody > tr:hover > td {
    background: var(--z-primary-50) !important;
}

/* Alternating rows */
.table-projects > tbody > tr:nth-child(even) > td {
    background: #fafbfc !important;
}
.table-projects > tbody > tr:nth-child(even):hover > td {
    background: var(--z-primary-50) !important;
}

/* Project # column */
.table-projects > tbody > tr > td:first-child {
    font-weight: 600 !important;
    color: var(--z-primary) !important;
    font-size: 12.5px !important;
}

/* Project name column */
.table-projects > tbody > tr > td:nth-child(2) a,
.table-projects > tbody > tr > td a[href*="projects/view"] {
    color: var(--z-text-heading) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.table-projects > tbody > tr > td:nth-child(2) a:hover,
.table-projects > tbody > tr > td a[href*="projects/view"]:hover {
    color: var(--z-primary) !important;
}

/* Customer column */
.table-projects > tbody > tr > td:nth-child(3) a {
    color: var(--z-text-secondary) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
.table-projects > tbody > tr > td:nth-child(3) a:hover {
    color: var(--z-primary) !important;
}


/* ── 29.4 Project Status Badges in Table ── */

.table-projects .project-status-1,
.table-projects .project-status-2,
.table-projects .project-status-3,
.table-projects .project-status-4,
.table-projects .project-status-5,
.table-projects span[class*="project-status-"],
.table-projects .label {
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

/* Not Started */
.table-projects .project-status-1,
.table-projects .label-default {
    background: #f0f2f5 !important;
    color: #5b6b82 !important;
    border: 1px solid #dde2e8 !important;
}
/* In Progress */
.table-projects .project-status-2,
.table-projects .label-primary {
    background: var(--z-info-bg) !important;
    color: var(--z-info-text) !important;
    border: 1px solid rgba(44, 131, 236, 0.2) !important;
}
/* On Hold */
.table-projects .project-status-3,
.table-projects .label-warning {
    background: var(--z-warning-bg) !important;
    color: var(--z-warning-text) !important;
    border: 1px solid rgba(245, 166, 35, 0.2) !important;
}
/* Cancelled */
.table-projects .project-status-4,
.table-projects .label-danger {
    background: var(--z-danger-bg) !important;
    color: var(--z-danger-text) !important;
    border: 1px solid rgba(224, 70, 70, 0.2) !important;
}
/* Finished */
.table-projects .project-status-5,
.table-projects .label-success {
    background: var(--z-success-bg) !important;
    color: var(--z-success-text) !important;
    border: 1px solid rgba(46, 204, 113, 0.2) !important;
}


/* ── 29.5 Table Action Buttons ── */

.table-projects .btn-group .btn,
.table-projects td .btn-icon,
.table-projects td a.btn {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--z-radius-sm) !important;
    font-size: 13px !important;
    background: var(--z-body-bg) !important;
    border: 1px solid var(--z-border) !important;
    color: var(--z-text-secondary) !important;
    transition: all 0.2s ease !important;
}
.table-projects .btn-group .btn:hover,
.table-projects td .btn-icon:hover,
.table-projects td a.btn:hover {
    background: var(--z-primary-light) !important;
    color: var(--z-primary) !important;
    border-color: rgba(44, 131, 236, 0.15) !important;
}
.table-projects td a.btn[class*="text-danger"]:hover,
.table-projects td a.btn.btn-danger:hover {
    background: var(--z-danger-bg) !important;
    color: var(--z-danger) !important;
    border-color: rgba(224, 70, 70, 0.15) !important;
}


/* ── 29.6 Tags Column ── */

.table-projects td .label-tag,
.table-projects td .tag {
    background: var(--z-body-bg) !important;
    color: var(--z-text-secondary) !important;
    border: 1px solid var(--z-border) !important;
    border-radius: var(--z-radius-sm) !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    margin: 1px 2px !important;
    display: inline-block !important;
}


/* ── 29.7 Members / Avatars Column ── */

.table-projects td .staff-profile-image,
.table-projects td img.staff-profile-image {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    margin-right: -6px !important;
    transition: all 0.2s ease !important;
}
.table-projects td .staff-profile-image:hover {
    transform: scale(1.15) !important;
    z-index: 2 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
.table-projects td .members-count,
.table-projects td .extra-members {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: var(--z-primary-light) !important;
    color: var(--z-primary) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border: 2px solid #fff !important;
}


/* ── 29.8 Date Columns ── */

.table-projects > tbody > tr > td:nth-child(5),
.table-projects > tbody > tr > td:nth-child(6) {
    color: var(--z-text-secondary) !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
}

/* Overdue deadline highlight */
.table-projects td .text-danger,
.table-projects td span.text-danger {
    color: var(--z-danger) !important;
    font-weight: 600 !important;
}


/* ── 29.9 DataTable Controls ── */

.prj-table-card .dataTables_filter input,
.table-projects_wrapper .dataTables_filter input,
#projects_wrapper .dataTables_filter input {
    border: 1px solid var(--z-border) !important;
    border-radius: var(--z-radius) !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    color: var(--z-text) !important;
    background: var(--z-card-bg) !important;
    transition: all 0.2s ease !important;
    min-width: 220px !important;
}
.prj-table-card .dataTables_filter input:focus,
.table-projects_wrapper .dataTables_filter input:focus,
#projects_wrapper .dataTables_filter input:focus {
    border-color: var(--z-primary) !important;
    box-shadow: 0 0 0 3px rgba(44, 131, 236, 0.1) !important;
    outline: none !important;
}

/* Pagination */
.prj-table-card .dataTables_paginate .paginate_button,
.table-projects_wrapper .dataTables_paginate .paginate_button,
#projects_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--z-border) !important;
    border-radius: var(--z-radius-sm) !important;
    background: var(--z-card-bg) !important;
    color: var(--z-text-secondary) !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
    margin: 0 2px !important;
    transition: all 0.2s ease !important;
}
.prj-table-card .dataTables_paginate .paginate_button:hover,
.table-projects_wrapper .dataTables_paginate .paginate_button:hover,
#projects_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--z-primary-50) !important;
    border-color: var(--z-primary) !important;
    color: var(--z-primary) !important;
}
.prj-table-card .dataTables_paginate .paginate_button.current,
.table-projects_wrapper .dataTables_paginate .paginate_button.current,
#projects_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--z-primary) !important;
    border-color: var(--z-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(44, 131, 236, 0.25) !important;
}

/* Entries info */
.prj-table-card .dataTables_info,
.table-projects_wrapper .dataTables_info,
#projects_wrapper .dataTables_info {
    font-size: 12px !important;
    color: var(--z-text-muted) !important;
    padding-top: 12px !important;
}

/* Length selector */
.prj-table-card .dataTables_length select,
.table-projects_wrapper .dataTables_length select,
#projects_wrapper .dataTables_length select {
    border: 1px solid var(--z-border) !important;
    border-radius: var(--z-radius-sm) !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    color: var(--z-text) !important;
    background: var(--z-card-bg) !important;
}


/* ── 29.10 Panel Card for Projects Table ── */

.panel-table-full .table-projects {
    margin-bottom: 0 !important;
}

/* App Filters */
.prj-header-actions app-filters {
    display: flex !important;
    align-items: center !important;
}
.prj-header-actions app-filters .btn {
    border: 1px solid var(--z-border) !important;
    border-radius: var(--z-radius) !important;
    background: var(--z-card-bg) !important;
    color: var(--z-text-secondary) !important;
    font-size: 13px !important;
    padding: 7px 14px !important;
    transition: all 0.2s ease !important;
}
.prj-header-actions app-filters .btn:hover {
    border-color: var(--z-primary) !important;
    color: var(--z-primary) !important;
    background: var(--z-primary-50) !important;
}


/* ── 29.11 Project Detail View — Shared Styles ── */

/* Project view tab content cards */
.prj-tabs-wrapper + .panel_s,
.prj-tabs-wrapper ~ .panel_s,
.prj-tabs-wrapper ~ div > .panel_s {
    border-radius: var(--z-radius-lg) !important;
    box-shadow: var(--z-shadow-sm) !important;
    border: 1px solid var(--z-border-light) !important;
}

/* Project Gantt page */
.content .gantt-chart-wrapper {
    border-radius: var(--z-radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--z-shadow-sm) !important;
}

/* Milestones Kanban */
.prj-tabs-wrapper ~ .kan-ban-content {
    border-radius: var(--z-radius-lg) !important;
}

/* Project discussion styling */
.prj-tabs-wrapper ~ .panel_s .jquery-comments {
    border-radius: var(--z-radius-lg) !important;
}

/* Files, Tickets, Notes sub-tables */
.prj-tabs-wrapper ~ .panel_s .table th {
    background: var(--z-body-bg) !important;
    color: var(--z-text-secondary) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    border-bottom: 2px solid var(--z-border) !important;
    padding: 10px 14px !important;
}
.prj-tabs-wrapper ~ .panel_s .table td {
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    vertical-align: middle !important;
}
.prj-tabs-wrapper ~ .panel_s .table tbody tr:hover td {
    background: var(--z-primary-50) !important;
}


/* ── 29.12 Responsive — Projects ── */

@media (max-width: 767px) {
    /* Table horizontal scroll */
    .prj-table-card .panel-table-full,
    .panel-table-full:has(.table-projects) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .table-projects > thead > tr > th,
    .table.table-projects > thead > tr > th {
        font-size: 10.5px !important;
        padding: 8px 10px !important;
    }

    .table-projects > tbody > tr > td,
    .table.table-projects > tbody > tr > td {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
}

/* =============================================
   Section 29 — Bulk Attendance Page
   ============================================= */

#bulk_attendance_table {
    border-collapse: separate;
    border-spacing: 0;
}

#bulk_attendance_table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--z-table-header-bg, #f8fafc) !important;
}

#bulk_attendance_table tbody tr:hover {
    background: #f1f5f9 !important;
}

.bulk-status-select {
    transition: all 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 28px !important;
}

.bulk-status-select:focus {
    border-color: var(--z-primary, #2c83ec) !important;
    box-shadow: 0 0 0 3px rgba(44, 131, 236, 0.1);
}

#bulk_attendance_form .btn-primary:hover {
    background: var(--z-primary-dark, #1a56db) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44, 131, 236, 0.3);
}

/* Attendance mode badge in staff edit */
#attendance_mode + .text-muted {
    line-height: 1.5;
}


/* ============================================
   31. ONBOARDING WIZARD
   ============================================ */

/* --- Step Indicator Bar --- */
.wizard-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: var(--z-space-lg);
    padding: var(--z-space-lg) var(--z-space-md);
    background: var(--z-card-bg);
    border-radius: var(--z-radius-lg);
    box-shadow: var(--z-shadow-sm);
    position: relative;
    overflow: hidden;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    cursor: pointer;
    transition: var(--z-transition);
}

.wizard-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8ecf1;
    color: var(--z-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    position: relative;
    z-index: 2;
    transition: var(--z-transition);
    border: 2px solid transparent;
}

.wizard-step .wizard-step-check {
    display: none;
}

.wizard-step-label {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--z-text-muted);
    text-align: center;
    white-space: nowrap;
    transition: var(--z-transition);
}

/* Connecting line */
.wizard-step-line {
    position: absolute;
    top: 18px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: #e0e5ec;
    z-index: 1;
    transition: background 0.3s ease;
}

/* Active step */
.wizard-step.active .wizard-step-circle {
    background: var(--z-primary);
    color: #ffffff;
    border-color: var(--z-primary);
    box-shadow: 0 0 0 4px var(--z-primary-light);
}

.wizard-step.active .wizard-step-label {
    color: var(--z-primary);
    font-weight: 600;
}

/* Completed step */
.wizard-step.completed .wizard-step-circle {
    background: var(--z-success);
    color: #ffffff;
    border-color: var(--z-success);
}

.wizard-step.completed .wizard-step-num {
    display: none;
}

.wizard-step.completed .wizard-step-check {
    display: inline;
    font-size: 14px;
    color: #ffffff;
}

.wizard-step.completed .wizard-step-label {
    color: var(--z-success-text);
}

.wizard-step.completed + .wizard-step .wizard-step-line,
.wizard-step.completed .wizard-step-line {
    /* line before a completed step becomes green */
}

.wizard-step.completed .wizard-step-line {
    background: var(--z-success);
}

.wizard-step.active .wizard-step-line {
    background: var(--z-primary);
}

/* --- Wizard Next Button Blink Animation --- */
@keyframes wizardBtnBlink {
    0%   { box-shadow: 0 0 0 0 rgba(44,131,236,0.8) !important; transform: scale(1); opacity: 1; }
    50%  { box-shadow: 0 0 0 14px rgba(44,131,236,0) !important; transform: scale(1.08); opacity: 0.85; }
    100% { box-shadow: 0 0 0 0 rgba(44,131,236,0) !important; transform: scale(1); opacity: 1; }
}
#btn-next.wizard-btn-blink,
#btn-complete.wizard-btn-blink {
    animation: wizardBtnBlink 0.6s ease-in-out infinite !important;
    position: relative !important;
    z-index: 10 !important;
}

/* --- Wizard Panel --- */
.wizard-panel {
    border-radius: var(--z-radius-lg) !important;
    box-shadow: var(--z-shadow) !important;
    border: 1px solid var(--z-border-light) !important;
    overflow: visible !important;
}

.wizard-panel > .panel-body {
    padding: var(--z-space-xl) !important;
}

/* Step panels: hide/show */
.wizard-content .step-panel {
    display: none;
}

.wizard-content .step-panel.active {
    display: block;
    animation: wizardFadeIn 0.3s ease;
}

@keyframes wizardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Step Title --- */
.step-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--z-text-heading);
    margin-bottom: var(--z-space-lg);
    padding-bottom: var(--z-space-md);
    border-bottom: 1px solid var(--z-border-light);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.step-title i {
    color: var(--z-primary);
    font-size: 20px;
}

.step-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: var(--z-text-muted);
    margin-left: auto;
}

/* --- Section Headings inside steps --- */
.wizard-section-heading {
    font-size: 14px;
    font-weight: 600;
    color: var(--z-text-heading);
    margin-bottom: var(--z-space-md);
    margin-top: var(--z-space-sm);
}

.wizard-section-heading i {
    color: var(--z-primary);
}

.wizard-divider {
    border-top: 1px dashed var(--z-border);
    margin: var(--z-space-lg) 0;
}

/* --- Info Alert --- */
.wizard-info-alert {
    background: var(--z-info-bg) !important;
    border: 1px solid rgba(44, 131, 236, 0.15) !important;
    color: var(--z-info-text) !important;
    border-radius: var(--z-radius) !important;
    padding: 14px 18px !important;
    font-size: 13px;
}

.wizard-info-alert a {
    color: var(--z-primary) !important;
    font-weight: 600;
    text-decoration: underline;
}

/* --- File Upload (inline) --- */
.wizard-file-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wizard-file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.wizard-file-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--z-primary-light);
    color: var(--z-primary);
    border: 1px dashed var(--z-primary);
    border-radius: var(--z-radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--z-transition);
    white-space: nowrap;
    margin-bottom: 0;
}

.wizard-file-label:hover {
    background: var(--z-primary);
    color: #ffffff;
}

.wizard-file-name {
    font-size: 12px;
    color: var(--z-text-secondary);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Dropzone (drag & drop) --- */
.wizard-dropzone {
    border: 2px dashed var(--z-border);
    border-radius: var(--z-radius-lg);
    padding: var(--z-space-xl) var(--z-space-lg);
    text-align: center;
    cursor: pointer;
    transition: var(--z-transition);
    position: relative;
    background: #fafbfc;
}

.wizard-dropzone:hover,
.wizard-dropzone.dragover {
    border-color: var(--z-primary);
    background: var(--z-primary-50);
}

.wizard-dropzone .wizard-file-input-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.wizard-dropzone-content {
    pointer-events: none;
}

/* --- File List (uploaded) --- */
.wizard-file-list {
    margin-top: var(--z-space-sm);
}

.wizard-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--z-primary-light);
    border-radius: var(--z-radius-sm);
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--z-text);
}

.wizard-file-item i {
    color: var(--z-primary);
}

.wizard-file-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wizard-file-remove {
    color: var(--z-danger) !important;
    font-size: 14px;
    opacity: 0.6;
    transition: var(--z-transition);
}

.wizard-file-remove:hover {
    opacity: 1;
}

/* --- Placeholder Cards (Steps 6-8) --- */
.wizard-placeholder-card {
    text-align: center;
    padding: 48px 32px;
    background: #fafbfc;
    border: 1px dashed var(--z-border);
    border-radius: var(--z-radius-lg);
    position: relative;
}

.wizard-placeholder-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--z-primary-light);
    color: var(--z-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: var(--z-space-md);
}

.wizard-placeholder-card h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--z-text-heading);
    margin-bottom: 8px;
}

.wizard-placeholder-card p {
    color: var(--z-text-secondary);
    font-size: 13px;
    max-width: 420px;
    margin: 0 auto 20px;
    line-height: 1.6;
}

.wizard-placeholder-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--z-warning-bg);
    color: var(--z-warning-text);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Complete Alert --- */
.wizard-complete-alert {
    background: var(--z-success-bg) !important;
    border: 1px solid rgba(46, 204, 113, 0.2) !important;
    color: var(--z-success-text) !important;
    border-radius: var(--z-radius) !important;
    padding: 14px 18px !important;
    font-size: 13px;
}

/* --- Navigation Buttons --- */
.wizard-nav {
    padding-bottom: var(--z-space-xl);
}

.wizard-btn {
    padding: 9px 22px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: var(--z-radius) !important;
    transition: var(--z-transition) !important;
}

.wizard-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--z-shadow);
}

.wizard-btn.btn-primary {
    background: var(--z-primary) !important;
    border-color: var(--z-primary) !important;
}

.wizard-btn.btn-primary:hover {
    background: var(--z-primary-hover) !important;
    border-color: var(--z-primary-hover) !important;
}

.wizard-btn.btn-success {
    background: var(--z-success) !important;
    border-color: var(--z-success) !important;
}

.wizard-btn.btn-success:hover {
    background: #27ae60 !important;
    border-color: #27ae60 !important;
}

.wizard-btn.disabled,
.wizard-btn:disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .wizard-steps {
        padding: var(--z-space-md) var(--z-space-sm);
        overflow-x: auto;
        justify-content: flex-start;
        gap: 0;
    }

    .wizard-step {
        min-width: 70px;
    }

    .wizard-step-circle {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .wizard-step-label {
        font-size: 9px;
    }

    .wizard-panel > .panel-body {
        padding: var(--z-space-md) !important;
    }

    .step-title {
        font-size: 15px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .step-subtitle {
        margin-left: 0;
    }

    .wizard-placeholder-card {
        padding: 32px 16px;
    }

    .wizard-nav {
        flex-direction: column;
        gap: 10px;
    }

    .wizard-nav > div {
        display: flex;
        gap: 8px;
        width: 100%;
    }

    .wizard-nav .wizard-btn {
        flex: 1;
    }
}

/* Dropzone small variant */
.wizard-dropzone-sm {
    min-height: 120px !important;
    padding: 12px !important;
}
.wizard-dropzone-sm .wizard-dropzone-content {
    padding: 8px 0 !important;
}
.wizard-dropzone-sm .wizard-dropzone-content i.fa-2x {
    font-size: 1.4em !important;
}

/* ============================================================
   32. EMPLOYEE ID CARD — Professional Green Template
   ============================================================ */
:root {
    --idc-accent: #2196F3;
    --idc-accent-dark: #1565C0;
    --idc-accent-light: #e3f2fd;
    --idc-gray: #6b7280;
    --idc-dark: #1f2937;
}

.id-card-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.id-card {
    width: 320px;
    min-height: 520px;
    border-radius: 18px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    overflow: visible;
    font-family: 'Inter', -apple-system, sans-serif;
    position: relative;
    padding-bottom: 24px;
}

/* Decorative SVG network dots — HIDDEN per design request */
.idc-deco { display: none !important; }
.idc-deco-tl, .idc-deco-br, .idc-deco-tr, .idc-deco-bl { display: none !important; }

/* Lanyard hole at top — REMOVED per design request */
.idc-lanyard { display: none !important; }
.idc-lanyard-hole { display: none !important; }
.idc-lanyard-clip { display: none !important; }

/* ---- FRONT CARD ---- */
.idc-front-header {
    text-align: center;
    padding: 30px 20px 8px;
    position: relative;
    z-index: 1;
}
.idc-company-logo {
    height: 40px;
    max-width: 200px;
    object-fit: contain;
    margin-bottom: 4px;
    background: transparent;
    padding: 8px 16px;
    border-radius: 8px;
}
.idc-logo-lg { height: 56px; max-width: 240px; padding: 10px 20px; }
.idc-logo-sm { height: 24px; max-width: 140px; opacity: 0.4; padding: 4px 8px; border-radius: 6px; background: transparent; }
.idc-company-name-large {
    font-size: 18px;
    font-weight: 800;
    color: var(--idc-dark);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.idc-company-addr {
    font-size: 11px;
    font-weight: 700;
    color: var(--idc-dark);
    letter-spacing: 1.2px;
    margin-top: 4px;
}

/* Photo ring — green circle */
.idc-photo-ring {
    display: flex;
    justify-content: center;
    margin: 14px auto 12px;
    position: relative;
    z-index: 2;
}
.idc-photo-ring::before {
    content: '';
    position: absolute;
    top: -6px; left: 50%; transform: translateX(-50%);
    width: 118px; height: 118px;
    border-radius: 50%;
    border: 4px solid var(--idc-accent);
    background: transparent;
    box-shadow: 0 0 0 2px rgba(33,150,243,0.15);
}
.idc-photo {
    width: 106px;
    height: 106px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    object-fit: cover;
    background: #f3f4f6;
    position: relative;
    z-index: 3;
}
.idc-photo-placeholder {
    width: 106px;
    height: 106px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 40px;
    position: relative;
    z-index: 3;
}

/* Employee name & designation */
.idc-emp-name {
    text-align: center;
    font-size: 19px;
    font-weight: 800;
    color: var(--idc-dark);
    letter-spacing: 1.5px;
    margin-top: 8px;
    padding: 0 16px;
}
.idc-emp-desg {
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--idc-accent-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

/* Employee code */
.idc-emp-code {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--idc-dark);
    letter-spacing: 1.5px;
    margin: 16px 0 0;
    padding: 6px 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    margin-left: 40px;
    margin-right: 40px;
}

/* Signature */
.idc-signature-area {
    text-align: center;
    margin-top: 20px;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}
.idc-sig-img {
    height: 40px;
    max-width: 160px;
    object-fit: contain;
    margin-bottom: 2px;
}
.idc-sig-script {
    font-family: 'Dancing Script', 'Brush Script MT', 'Segoe Script', cursive;
    font-size: 22px;
    color: var(--idc-dark);
    opacity: 0.5;
    margin-bottom: -2px;
}
.idc-sig-line {
    width: 160px;
    height: 1px;
    background: #374151;
    margin: 0 auto 4px;
}
.idc-sig-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--idc-dark);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ---- BACK CARD ---- */
.idc-back {
    padding-bottom: 20px;
}
.idc-back-logo {
    text-align: center;
    padding: 32px 20px 20px;
    position: relative;
    z-index: 1;
}

/* Contact list */
.idc-contact-list {
    padding: 0 28px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.idc-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}
.idc-contact-row:last-child { border-bottom: none; }
.idc-contact-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--idc-accent-light);
    color: var(--idc-accent);
    font-size: 12px;
    flex-shrink: 0;
}
.idc-contact-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--idc-dark);
    word-break: break-all;
}

/* Emergency contact */
.idc-emergency {
    padding: 0 28px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}
.idc-emergency-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #dc3545;
    margin-bottom: 4px;
    padding-top: 8px;
    border-top: 1px dashed #e5e7eb;
}
.idc-emergency .idc-contact-row { border-bottom: none; padding: 4px 0; }
.idc-emergency .idc-contact-icon { background: #fef2f2; color: #dc3545; }

/* Return notice */
.idc-return-notice {
    text-align: center;
    padding: 16px 28px;
    position: relative;
    z-index: 1;
}
.idc-return-notice p {
    margin: 0;
    font-size: 11px;
    color: var(--idc-gray);
    line-height: 1.5;
}
.idc-return-addr {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--idc-accent-dark) !important;
    letter-spacing: 0.5px;
    margin-top: 2px !important;
}

/* Back footer logo */
.idc-back-footer-logo {
    text-align: right;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* Print styles for ID card */
@media print {
    .id-card-wrapper { page-break-inside: avoid; }
    .id-card { box-shadow: none; border: 1px solid #ccc; }
}

/* ============================================
   29. STAFF LIST PAGE — Matches Leads Layout
   ============================================ */

/* Role badge (used in table) */
.staff-role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}

/* Never logged in badge */
.staff-never-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #f3f4f6;
    color: #9ca3af;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 500;
}

/* Staff avatar in table */
.table-staff .staff-profile-image-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--z-border-light);
    vertical-align: middle;
    margin-right: 6px;
}

/* Delete modal */
#delete_staff .modal-content {
    border-radius: var(--z-radius-lg);
    border: none;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

#delete_staff .modal-header {
    border-bottom: 1px solid var(--z-border-light);
    padding: 14px 20px;
}

#delete_staff .modal-header .modal-title {
    font-size: 15px;
    font-weight: 600;
}

#delete_staff .modal-body { padding: 16px 20px; }
#delete_staff .modal-footer { border-top: 1px solid var(--z-border-light); padding: 10px 20px; }
#delete_staff .btn-danger { border-radius: 6px; }

/* ============================================
   30. DPDP ACT COMPLIANCE — Zoho Settings Style
   ============================================ */

/* Enable card (when DPDP not activated) */
.dpdp-enable-card {
    background: var(--z-card-bg);
    border-radius: 16px;
    box-shadow: var(--z-shadow);
    border: 1px solid var(--z-border-light);
    text-align: center;
    padding: 60px 40px;
    max-width: 560px;
    margin: 60px auto;
}

.dpdp-enable-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f2fd 0%, #d6e8fc 100%);
    color: var(--z-primary);
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.dpdp-enable-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--z-text-heading);
    margin: 0 0 10px;
}

.dpdp-enable-card p {
    font-size: 13.5px;
    color: var(--z-text-secondary);
    line-height: 1.6;
    margin: 0 0 24px;
}

/* Page Header */
.dpdp-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.dpdp-page-title {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
}

.dpdp-page-title i {
    color: var(--z-primary);
    margin-right: 6px;
}

.dpdp-page-subtitle {
    font-size: 12px;
    color: var(--z-text-muted);
    font-weight: 400;
    margin-left: 12px;
}

/* Navigation Card */
.dpdp-nav-card {
    background: var(--z-card-bg);
    border-radius: var(--z-radius-lg);
    box-shadow: var(--z-shadow-sm);
    border: 1px solid var(--z-border-light);
    overflow: hidden;
    position: sticky;
    top: 80px;
}

.dpdp-nav-list {
    list-style: none;
    padding: 6px 0;
    margin: 0;
}

.dpdp-nav-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--z-text-secondary);
    text-decoration: none;
    transition: all 0.12s;
    border-left: 3px solid transparent;
}

.dpdp-nav-list li a:hover {
    background: #f6f8fa;
    color: var(--z-text-heading);
}

.dpdp-nav-list li.active a {
    background: var(--z-primary-50);
    color: var(--z-primary);
    font-weight: 600;
    border-left-color: var(--z-primary);
}

.dpdp-nav-list li a i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    flex-shrink: 0;
}

.dpdp-nav-section {
    padding: 10px 16px 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: var(--z-text-muted) !important;
    pointer-events: none;
    border-top: 1px solid var(--z-border-light);
    margin-top: 4px;
}

/* Content Card */
.dpdp-content-card {
    background: var(--z-card-bg);
    border-radius: var(--z-radius-lg);
    box-shadow: var(--z-shadow-sm);
    border: 1px solid var(--z-border-light);
    padding: 24px 28px;
}

/* Section Header */
.dpdp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.dpdp-section-header h4 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dpdp-section-header h4 i {
    color: var(--z-primary);
    font-size: 15px;
}

.dpdp-ref-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #e8f2fd;
    color: var(--z-primary);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Info Box */
.dpdp-info-box {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: #f0f7ff;
    border: 1px solid #d6e8fc;
    border-radius: 10px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.dpdp-info-box.dpdp-info-warning {
    background: #fff8f0;
    border-color: #fde0b2;
}

.dpdp-info-box.dpdp-info-warning .dpdp-info-icon {
    background: #fef3e6;
    color: #d97706;
}

.dpdp-info-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    background: #e8f2fd;
    color: var(--z-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.dpdp-info-content {
    font-size: 12.5px;
    color: var(--z-text);
    line-height: 1.6;
}

.dpdp-learn-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--z-primary);
}

/* Option Group */
.dpdp-option-group {
    border: 1px solid var(--z-border-light);
    border-radius: 10px;
    overflow: hidden;
}

.dpdp-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    gap: 16px;
    border-bottom: 1px solid var(--z-border-light);
}

.dpdp-option-row:last-child {
    border-bottom: none;
}

.dpdp-option-row:hover {
    background: #fafbfc;
}

.dpdp-option-label {
    flex: 1;
}

.dpdp-option-label strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--z-text-heading);
    line-height: 1.3;
}

.dpdp-option-desc {
    display: block;
    font-size: 11.5px;
    color: var(--z-text-muted);
    margin-top: 2px;
    line-height: 1.4;
}

.dpdp-option-control {
    flex-shrink: 0;
}

/* Hide the label text from render_yes_no_option inside our custom layout */
.dpdp-option-control > div > label.control-label {
    display: none !important;
}

.dpdp-option-control .form-group {
    margin-bottom: 0 !important;
}

/* Divider */
.dpdp-divider {
    border: none;
    border-top: 1px solid var(--z-border-light);
    margin: 24px 0;
}

/* Subsection */
.dpdp-subsection h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--z-text-heading);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
}

.dpdp-subsection h5 i {
    color: var(--z-primary);
}

/* Definitions Table */
.dpdp-definitions-box {
    background: #fafbfc;
    border: 1px solid var(--z-border-light);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 20px 0;
}

.dpdp-definitions-box h5 {
    font-size: 13px;
    font-weight: 700;
    color: var(--z-text-heading);
    margin: 0 0 12px;
}

.dpdp-def-table {
    width: 100%;
    border-collapse: collapse;
}

.dpdp-def-table tr {
    border-bottom: 1px solid #eef0f3;
}

.dpdp-def-table tr:last-child {
    border-bottom: none;
}

.dpdp-def-table td {
    padding: 7px 0;
    font-size: 12.5px;
    color: var(--z-text);
    vertical-align: top;
}

.dpdp-def-term {
    font-weight: 600;
    color: var(--z-primary);
    white-space: nowrap;
    padding-right: 16px !important;
    width: 180px;
}

/* Warning Box */
.dpdp-warning-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 12.5px;
    color: #991b1b;
    margin-top: 12px;
}

.dpdp-warning-box i {
    color: #dc2626;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Checklist */
.dpdp-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.dpdp-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--z-text);
}

.dpdp-check-item.dpdp-check-danger {
    background: #fef2f2;
    border-color: #fecaca;
}

.dpdp-check-item i {
    font-size: 14px;
    flex-shrink: 0;
}

/* Steps (for nomination page) */
.dpdp-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.dpdp-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.dpdp-step-num {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: var(--z-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dpdp-step-content {
    flex: 1;
}

.dpdp-step-content strong {
    display: block;
    font-size: 13px;
    color: var(--z-text-heading);
    margin-bottom: 2px;
}

.dpdp-step-content p {
    font-size: 12px;
    color: var(--z-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Tabs inside DPDP pages */
.dpdp-tabs > li > a {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--z-text-secondary) !important;
}

.dpdp-tabs > li.active > a {
    font-weight: 600 !important;
    color: var(--z-primary) !important;
}

/* Responsive */
@media (max-width: 991px) {
    .dpdp-nav-card { position: static; margin-bottom: 16px; }
    .dpdp-option-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 576px) {
    .dpdp-content-card { padding: 16px; }
    .dpdp-section-header { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════
   Section 30: SALARY STRUCTURE — Onboarding Wizard Step 6
   ═══════════════════════════════════════════════════════════════════ */

/* Salary breakdown table */
#salary-breakdown-table {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

#salary-breakdown-table thead tr {
    background: #f1f5f9 !important;
}

#salary-breakdown-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 8px 12px;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
}

/* Component rows — zebra striping */
.sal-component-row:nth-child(even) {
    background: #fafbfc;
}

.sal-component-row:hover {
    background: #f0f4ff;
}

.sal-component-row td {
    padding: 8px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

/* Inline amount inputs */
.sal-monthly-input,
.sal-annual-input {
    width: 120px !important;
    display: inline-block !important;
    text-align: right !important;
    font-size: 13px !important;
    padding: 4px 8px !important;
    height: 32px !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sal-monthly-input:focus,
.sal-annual-input:focus {
    border-color: var(--z-primary, #3b82f6) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none;
}

.sal-annual-input[readonly] {
    background: #f8fafc !important;
    color: #64748b !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sal-monthly-input,
    .sal-annual-input {
        width: 90px !important;
        font-size: 12px !important;
    }
}

/* =============================================
   Section 31: APPROVALS PAGE
   ============================================= */

/* ── Approvals Page — Clean, high-contrast Zoho-style ── */
.approvals-page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding: 22px 28px;
    background: linear-gradient(135deg, #1a3a6b 0%, #2c5ea0 50%, #3a7bd5 100%) !important;
    border-radius: 12px;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(78,115,223,0.25);
}
.approvals-page-header h4 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.approvals-page-header .appr-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.25) !important;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.approvals-page-header .appr-pending-badge {
    background: #fbbf24;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    border: none;
    margin-left: auto;
}

/* Filter bar */
.appr-filter-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.appr-filter-bar .appr-status-tabs {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.appr-filter-bar .appr-status-tabs a {
    display: inline-block;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    transition: all 0.15s ease;
}
.appr-filter-bar .appr-status-tabs a:hover {
    background: #e0e7ff;
    color: #1e3a5f;
    border-color: #c7d2fe;
}
.appr-filter-bar .appr-status-tabs a.active {
    background: #1a3a6b !important;
    color: #ffffff !important;
    border-color: #1a3a6b !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.appr-filter-bar select {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #1f2937;
    background: #fff;
    min-width: 160px;
    cursor: pointer;
}
.appr-filter-bar select:focus {
    border-color: #1e3a5f;
    outline: none;
    box-shadow: 0 0 0 3px rgba(30,58,95,0.12);
}

/* Table container — horizontal scroll for small screens */
.panel-table-full .panel-body { overflow-x: auto; }

/* Table */
.appr-table {
    width: 100%;
    min-width: 800px;
    border-collapse: separate;
    border-spacing: 0;
}
.appr-table thead th {
    padding: 13px 16px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    color: #1e3a5f;
    background: #f1f5f9;
    border-bottom: 2px solid #cbd5e1;
}
.appr-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.appr-table tbody tr:hover {
    background: #f8fafc;
}
.appr-table tbody td {
    padding: 14px 16px;
    font-size: 13.5px;
    color: #1e293b;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

/* Employee cell */
.appr-employee {
    display: flex;
    align-items: center;
    gap: 10px;
}
.appr-employee .staff-profile-image-small {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
}
.appr-employee-name {
    font-weight: 600;
    color: #0f172a;
    font-size: 13.5px;
}

/* Module badge — high contrast, distinct colors */
.appr-module-badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 6px;
}
.appr-module-invoices  { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.appr-module-estimates { background: #ccfbf1; color: #115e59; border: 1px solid #5eead4; }
.appr-module-leads     { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.appr-module-expenses  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.appr-module-tasks     { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }
.appr-module-projects  { background: #e0e7ff; color: #3730a3; border: 1px solid #a5b4fc; }
.appr-module-tickets   { background: #fce7f3; color: #9d174d; border: 1px solid #f9a8d4; }
.appr-module-deals     { background: #dcfce7; color: #166534; border: 1px solid #86efac; }

/* Status badges — clear pill badges */
.appr-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 20px;
}
.appr-status-pending {
    background: #fef3c7;
    color: #92400e;
    border: 1.5px solid #f59e0b;
}
.appr-status-approved {
    background: #dcfce7;
    color: #166534;
    border: 1.5px solid #22c55e;
}
.appr-status-rejected,
.appr-status-revision {
    background: #fef3c7;
    color: #92400e;
    border: 1.5px solid #f59e0b;
}
.appr-status i {
    font-size: 11px;
}

/* Action buttons — prominent, clear */
.appr-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.appr-btn-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: #1e3a5f;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(30,58,95,0.3);
}
.appr-btn-view:hover { background: #16304d; color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(30,58,95,0.3); }
.appr-btn-approve {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: #059669;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(5,150,105,0.3);
}
.appr-btn-approve:hover { background: #047857; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(5,150,105,0.3); }
.appr-btn-revise {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: #e67e22;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(230,126,34,0.3);
}
.appr-btn-revise:hover { background: #d35400; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(230,126,34,0.3); }

/* Action result text */
.appr-result-approved {
    color: #059669;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.appr-result-revision {
    color: #e67e22;
    font-size: 13px;
    font-weight: 600;
    cursor: help;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Empty state */
.appr-empty {
    text-align: center;
    padding: 60px 20px;
}
.appr-empty i {
    font-size: 52px;
    color: #cbd5e1;
}
.appr-empty p {
    margin-top: 14px;
    color: #64748b;
    font-size: 15px;
    font-weight: 500;
}

/* Submitted date */
.appr-date {
    color: #475569;
    font-size: 12.5px;
    font-weight: 500;
}

/* Rejection modal */
.appr-reject-modal .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.appr-reject-modal .modal-header {
    border-bottom: 1px solid #f1f5f9;
    padding: 18px 24px;
    background: #fef2f2;
    border-radius: 12px 12px 0 0;
}
.appr-reject-modal .modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #991b1b;
}
.appr-reject-modal .modal-body {
    padding: 24px;
}
.appr-reject-modal .modal-body .form-control {
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 13.5px;
    color: #1e293b;
}
.appr-reject-modal .modal-body .form-control:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
}
.appr-reject-modal .modal-footer {
    border-top: 1px solid #f1f5f9;
    padding: 14px 24px;
}

/* Inline detail panel */
.appr-detail-row td { background: #f8fafc !important; }
.appr-detail-row:hover td { background: #f8fafc !important; }
.appr-detail-panel {
    border-top: 2px solid #1e3a5f;
}
.appr-detail-content {
    padding: 20px 24px;
}
.appr-detail-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}
.appr-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.appr-detail-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.appr-detail-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}
.appr-detail-value {
    font-size: 13.5px;
    font-weight: 500;
    color: #0f172a;
    word-break: break-word;
}
.appr-detail-items {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}
.appr-detail-notes {
    margin-top: 14px;
    padding: 12px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 13px;
    color: #92400e;
}

/* ============================================================
   Section 32: EXTERNAL USERS MODULE
   ============================================================ */

/* ── Page Header ── */
.ext-users-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 28px 32px 20px;
    background: linear-gradient(135deg, var(--z-primary, #1a56db) 0%, #2563eb 100%);
    border-radius: 12px;
    margin-bottom: 20px;
    color: #fff;
}
.ext-users-header h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
.ext-users-header h3 i {
    margin-right: 8px;
    opacity: 0.85;
}
.ext-users-subtitle {
    margin: 0;
    font-size: 13px;
    opacity: 0.8;
}
.ext-users-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.ext-btn-add {
    background: #fff !important;
    color: var(--z-primary, #1a56db) !important;
    border: none !important;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
}
.ext-btn-add:hover {
    background: #f0f4ff !important;
}

/* ── Filter Bar ── */
.ext-users-filters {
    margin-bottom: 20px;
}
.ext-filter-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.ext-filter-form .form-control {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    height: 34px;
}
.ext-filter-form select.form-control {
    width: auto;
    min-width: 140px;
}

/* ── Users Grid ── */
.ext-users-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 1200px) {
    .ext-users-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ext-users-grid { grid-template-columns: 1fr; }
}

/* ── User Card ── */
.ext-user-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.ext-user-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border-color: #cbd5e1;
}
.ext-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 0;
}
.ext-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}
.ext-avatar-lg {
    width: 56px;
    height: 56px;
    font-size: 19px;
}
.ext-type-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}
.ext-card-body {
    padding: 12px 18px 14px;
}
.ext-card-name {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}
.ext-card-role {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: #64748b;
}
.ext-card-details {
    margin-bottom: 10px;
}
.ext-detail-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: #475569;
    padding: 2px 0;
}
.ext-detail-row i {
    font-size: 11px;
    color: #94a3b8;
    width: 14px;
    text-align: center;
}
.ext-card-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* ── Badges ── */
.ext-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.2px;
}
.ext-badge-green {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}
.ext-badge-blue {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.ext-badge-gray {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}
.ext-badge-red {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
.ext-badge-purple {
    background: #f3e8ff;
    color: #7c3aed;
    border: 1px solid #e9d5ff;
}

.ext-card-login {
    font-size: 11.5px;
    color: #64748b;
    padding-top: 6px;
}
.ext-card-login i {
    margin-right: 4px;
    font-size: 11px;
}
.ext-muted {
    color: #94a3b8;
}

/* ── Card Actions ── */
.ext-card-actions {
    display: flex;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
}
.ext-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    color: #64748b;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    border-right: 1px solid #f1f5f9;
}
.ext-action-btn:last-child {
    border-right: none;
}
.ext-action-btn:hover {
    background: #f0f4ff;
    color: var(--z-primary, #1a56db);
    text-decoration: none;
}
.ext-action-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* ── Empty State ── */
.ext-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
.ext-empty-state i {
    font-size: 42px;
    color: #cbd5e1;
    margin-bottom: 16px;
}
.ext-empty-state h4 {
    margin: 0 0 6px;
    color: #334155;
    font-size: 16px;
    font-weight: 600;
}
.ext-empty-state p {
    color: #94a3b8;
    font-size: 13px;
    margin: 0 0 16px;
}

/* ── Breadcrumb ── */
.ext-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 13px;
}
.ext-breadcrumb a {
    color: var(--z-primary, #1a56db);
    text-decoration: none;
    font-weight: 500;
}
.ext-breadcrumb a:hover {
    text-decoration: underline;
}
.ext-bc-sep {
    color: #94a3b8;
    font-size: 10px;
}
.ext-breadcrumb > span:last-child {
    color: #64748b;
    font-weight: 500;
}

/* ── Form Sections ── */
.ext-form-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 22px 24px 18px;
    margin-bottom: 18px;
}
.ext-section-title {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}
.ext-section-title i {
    color: var(--z-primary, #1a56db);
    font-size: 14px;
}
.ext-form-section .form-group label {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
}
.ext-form-section .form-control {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    padding: 7px 12px;
}
.ext-form-section .form-control:focus {
    border-color: var(--z-primary, #1a56db);
    box-shadow: 0 0 0 3px rgba(26,86,219,0.08);
}
.ext-radio-group {
    display: flex;
    gap: 16px;
    padding-top: 6px;
}
.ext-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
}
.ext-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 10px 0 30px;
}

/* ── Permissions Panel ── */
.ext-perm-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    position: sticky;
    top: 20px;
}
.ext-perm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
}
.ext-perm-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 7px;
}
.ext-perm-header h4 i {
    color: var(--z-primary, #1a56db);
    font-size: 13px;
}
.ext-perm-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ext-perm-link {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--z-primary, #1a56db);
    cursor: pointer;
    text-decoration: none;
}
.ext-perm-link:hover {
    text-decoration: underline;
}
.ext-perm-sep {
    color: #cbd5e1;
    font-size: 11px;
}
.ext-perm-group {
    padding: 12px 18px;
    border-bottom: 1px solid #f1f5f9;
}
.ext-perm-group:last-child {
    border-bottom: none;
}
.ext-perm-group-title {
    margin: 0 0 10px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}
.ext-perm-module {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}
.ext-perm-module-name {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}
.ext-perm-caps {
    display: flex;
    gap: 10px;
}
.ext-perm-cap {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #475569;
    cursor: pointer;
    margin-bottom: 0;
}
.ext-perm-cap input[type="checkbox"] {
    margin: 0;
    accent-color: var(--z-primary, #1a56db);
}

/* ── Activity User Card ── */
.ext-activity-user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.ext-auc-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ext-auc-info h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
}
.ext-auc-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ext-auc-company {
    font-size: 12.5px;
    color: #64748b;
}
.ext-auc-company i {
    margin-right: 3px;
    font-size: 11px;
}
.ext-auc-right {
    display: flex;
    gap: 28px;
}
.ext-auc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.ext-auc-stat-val {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}
.ext-auc-stat-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── KPI Cards ── */
.ext-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 992px) {
    .ext-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
.ext-kpi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 18px;
}
.ext-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.ext-kpi-blue   { background: #dbeafe; color: #2563eb; }
.ext-kpi-purple { background: #f3e8ff; color: #7c3aed; }
.ext-kpi-teal   { background: #ccfbf1; color: #0d9488; }
.ext-kpi-orange { background: #ffedd5; color: #ea580c; }
.ext-kpi-data {
    display: flex;
    flex-direction: column;
}
.ext-kpi-val {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.ext-kpi-label {
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 500;
}

/* ── Activity Timeline ── */
.ext-activity-timeline {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}
.ext-timeline-entry {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.ext-timeline-entry:last-child {
    border-bottom: none;
}
.ext-timeline-entry:hover {
    background: #f8fafc;
}
.ext-timeline-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f0f4ff;
    color: var(--z-primary, #1a56db);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 2px;
}
.ext-timeline-content {
    flex: 1;
    min-width: 0;
}
.ext-timeline-desc {
    font-size: 13.5px;
    color: #0f172a;
    font-weight: 500;
    margin-bottom: 3px;
}
.ext-timeline-meta {
    display: flex;
    gap: 14px;
    font-size: 11.5px;
    color: #94a3b8;
}
.ext-timeline-meta i {
    margin-right: 3px;
    font-size: 10px;
}
.ext-timeline-ip {
    color: #cbd5e1;
}

/* ── Responsive Fixes ── */
@media (max-width: 768px) {
    .ext-users-header {
        flex-direction: column;
        gap: 12px;
        padding: 20px;
    }
    .ext-activity-user-card {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    .ext-auc-right {
        width: 100%;
        justify-content: space-around;
    }
    .ext-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================
   SECTION 29 – TAX REPORTS MODULE
   All classes used across 26 tax report views.
   Moves inline <style> blocks into the central design system.
   ===================================================== */

/* ---------------------------------------------------
   29a. Shared Page Header (gradient banner)
   Used by: index, gstr1, gstr3b, gst_reconciliation,
   cash_flow, bank_reconciliation, rcm_report, pf_esi,
   professional_tax, einvoice_readiness, profit_loss
   --------------------------------------------------- */
.tax-reports-header {
    background: linear-gradient(135deg, var(--z-primary, #1B73E8) 0%, #1557b0 100%);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tax-reports-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}
.tax-reports-header .subtitle {
    font-size: 13px;
    opacity: 0.85;
    margin-top: 2px;
}
.tax-reports-header .header-actions .btn {
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    background: rgba(255,255,255,0.1);
    font-size: 13px;
    margin-left: 8px;
}
.tax-reports-header .header-actions .btn:hover {
    background: rgba(255,255,255,0.2);
}

/* Prefixed header variants (same pattern, different prefix) */
.pl-header,
.pfesi-header,
.cf-header,
.br-header,
.einv-header,
.rcm-header,
.gstr-header,
.pt-header {
    background: linear-gradient(135deg, var(--z-primary, #1B73E8) 0%, #1557b0 100%);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pl-header h3,
.pfesi-header h3,
.cf-header h3,
.br-header h3,
.einv-header h3,
.rcm-header h3,
.gstr-header h3,
.pt-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}
.pl-header .subtitle,
.pfesi-header .subtitle,
.cf-header .subtitle,
.br-header .subtitle,
.einv-header .subtitle,
.rcm-header .subtitle,
.gstr-header .subtitle,
.pt-header .subtitle {
    font-size: 13px;
    opacity: 0.85;
    margin-top: 2px;
}
.pl-header .header-actions .btn,
.pfesi-header .header-actions .btn,
.cf-header .header-actions .btn,
.br-header .header-actions .btn,
.einv-header .header-actions .btn,
.rcm-header .header-actions .btn,
.gstr-header .header-actions .btn,
.pt-header .header-actions .btn {
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    background: rgba(255,255,255,0.1);
    font-size: 13px;
    margin-left: 8px;
}
.pl-header .header-actions .btn:hover,
.pfesi-header .header-actions .btn:hover,
.cf-header .header-actions .btn:hover,
.br-header .header-actions .btn:hover,
.einv-header .header-actions .btn:hover,
.rcm-header .header-actions .btn:hover,
.gstr-header .header-actions .btn:hover,
.pt-header .header-actions .btn:hover {
    background: rgba(255,255,255,0.2);
}

/* ---------------------------------------------------
   29b. Sidebar Navigation (index.php)
   --------------------------------------------------- */
.tax-sidebar {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    overflow: hidden;
}
.tax-sidebar .sidebar-group {
    border-bottom: 1px solid var(--z-border, #e0e0e0);
}
.tax-sidebar .sidebar-group:last-child {
    border-bottom: none;
}
.tax-sidebar .sidebar-group-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--z-muted, #84878f);
    padding: 14px 16px 6px;
}
.tax-sidebar .sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    color: var(--z-text, #333);
    font-size: 13px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.tax-sidebar .sidebar-link:hover {
    background: var(--z-hover-bg, #f5f7fa);
    color: var(--z-primary, #1B73E8);
}
.tax-sidebar .sidebar-link.active {
    background: rgba(27, 115, 232, 0.08);
    color: var(--z-primary, #1B73E8);
    font-weight: 600;
    border-left: 3px solid var(--z-primary, #1B73E8);
}
.tax-sidebar .sidebar-link i {
    width: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--z-muted, #84878f);
}
.tax-sidebar .sidebar-link.active i,
.tax-sidebar .sidebar-link:hover i {
    color: var(--z-primary, #1B73E8);
}

/* ---------------------------------------------------
   29c. KPI Cards (index dashboard)
   --------------------------------------------------- */
.tax-kpi-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.tax-kpi-card {
    flex: 1;
    min-width: 180px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.tax-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.tax-kpi-icon.kpi-blue   { background: rgba(27,115,232,0.1); color: var(--z-primary, #1B73E8); }
.tax-kpi-icon.kpi-green  { background: rgba(52,168,83,0.1);  color: #34a853; }
.tax-kpi-icon.kpi-orange { background: rgba(251,188,4,0.1);  color: #f59e0b; }
.tax-kpi-icon.kpi-purple { background: rgba(142,68,230,0.1); color: #8e44e6; }
.tax-kpi-data .kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--z-heading, #1a1a2e);
}
.tax-kpi-data .kpi-label {
    font-size: 12px;
    color: var(--z-muted, #84878f);
    margin-top: 2px;
}

/* ---------------------------------------------------
   29d. Deadlines Card (index dashboard)
   --------------------------------------------------- */
.tax-deadlines {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    padding: 20px 24px;
}
.tax-deadlines h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--z-heading, #1a1a2e);
}
.deadline-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--z-border, #e0e0e0);
}
.deadline-item:last-child { border-bottom: none; }
.deadline-date {
    min-width: 60px;
    text-align: center;
    background: rgba(27,115,232,0.08);
    border-radius: 8px;
    padding: 6px 10px;
}
.deadline-date .dd-day {
    font-size: 18px;
    font-weight: 700;
    color: var(--z-primary, #1B73E8);
    line-height: 1;
}
.deadline-date .dd-mon {
    font-size: 10px;
    color: var(--z-muted, #84878f);
    text-transform: uppercase;
}
.deadline-info .dl-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--z-text, #333);
}
.deadline-info .dl-desc {
    font-size: 12px;
    color: var(--z-muted, #84878f);
}
.deadline-badge {
    margin-left: auto;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
}
.deadline-badge.upcoming { background: rgba(251,188,4,0.12); color: #b45309; }
.deadline-badge.overdue  { background: rgba(234,67,53,0.1);  color: #ea4335; }
.deadline-badge.filed    { background: rgba(52,168,83,0.1);  color: #34a853; }

/* ---------------------------------------------------
   29e. Filter Bars (all variants)
   --------------------------------------------------- */
.tax-filter-bar,
.pl-filter-bar,
.pfesi-filter-bar,
.cf-filter-bar,
.br-filter-bar,
.einv-filter-bar,
.rcm-filter-bar,
.gstr-filter-bar,
.pt-filter-bar {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.tax-filter-bar label,
.pl-filter-bar label,
.pfesi-filter-bar label,
.cf-filter-bar label,
.br-filter-bar label,
.einv-filter-bar label,
.rcm-filter-bar label,
.gstr-filter-bar label,
.pt-filter-bar label {
    font-size: 12px;
    font-weight: 600;
    color: var(--z-muted, #84878f);
    margin-bottom: 0;
    margin-right: 4px;
}
.tax-filter-bar select,
.tax-filter-bar input[type="month"],
.tax-filter-bar input[type="date"],
.pl-filter-bar select,
.pl-filter-bar input[type="date"],
.pfesi-filter-bar select,
.pfesi-filter-bar input[type="month"],
.cf-filter-bar select,
.br-filter-bar select,
.br-filter-bar input[type="month"],
.einv-filter-bar input[type="date"],
.rcm-filter-bar select,
.rcm-filter-bar input[type="date"],
.gstr-filter-bar select,
.gstr-filter-bar input[type="date"],
.pt-filter-bar select,
.pt-filter-bar input[type="month"] {
    border: 1px solid var(--z-border, #e0e0e0);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--z-text, #333);
    background: #fff;
}
.tax-filter-bar .btn-filter,
.pl-filter-bar .btn-filter,
.pfesi-filter-bar .btn-filter,
.cf-filter-bar .btn-filter,
.br-filter-bar .btn-filter,
.einv-filter-bar .btn-filter,
.rcm-filter-bar .btn-filter,
.gstr-filter-bar .btn-filter,
.pt-filter-bar .btn-filter {
    background: var(--z-primary, #1B73E8);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
}
.tax-filter-bar .btn-export,
.pl-filter-bar .btn-export,
.pt-filter-bar .btn-export {
    background: #fff;
    color: var(--z-primary, #1B73E8);
    border: 1px solid var(--z-primary, #1B73E8);
    border-radius: 6px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    margin-left: auto;
}
.tax-filter-bar .btn-export:hover,
.pl-filter-bar .btn-export:hover,
.pt-filter-bar .btn-export:hover {
    background: rgba(27,115,232,0.06);
}

/* Generic filter-bar (tds_deductions, tax_calendar, outstanding) */
.filter-bar {
    background: var(--z-card-bg, #ffffff);
    border: 1px solid var(--z-border-light, #eef1f5);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
}
.filter-bar .form-group { margin-bottom: 0; }

/* Bank reconciliation import button */
.br-filter-bar .btn-import {
    background: #34a853;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    margin-left: auto;
}
.br-filter-bar .btn-import:hover { background: #2d9249; }

/* ---------------------------------------------------
   29f. GSTR-1 Tabs
   --------------------------------------------------- */
.gstr-tabs {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    overflow: hidden;
}
.gstr-tabs .nav-tabs {
    border-bottom: 2px solid var(--z-border, #e0e0e0);
    padding: 0 16px;
    margin: 0;
    background: var(--z-hover-bg, #f8f9fb);
}
.gstr-tabs .nav-tabs > li > a {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--z-muted, #84878f);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 18px;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.gstr-tabs .nav-tabs > li > a:hover {
    color: var(--z-primary, #1B73E8);
    background: transparent;
    border-bottom-color: var(--z-primary, #1B73E8);
}
.gstr-tabs .nav-tabs > li.active > a,
.gstr-tabs .nav-tabs > li.active > a:focus,
.gstr-tabs .nav-tabs > li.active > a:hover {
    color: var(--z-primary, #1B73E8);
    border: none;
    border-bottom: 2px solid var(--z-primary, #1B73E8);
    background: transparent;
}
.gstr-tabs .tab-content { padding: 0; }
.gstr-tabs .table { margin-bottom: 0; }
.gstr-tabs .table thead th {
    background: var(--z-hover-bg, #f8f9fb);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--z-muted, #84878f);
    border-bottom: 2px solid var(--z-border, #e0e0e0);
    padding: 10px 12px;
    white-space: nowrap;
}
.gstr-tabs .table tbody td {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--z-text, #333);
    vertical-align: middle;
}
.gstr-tabs .table .totals-row td {
    font-weight: 700;
    background: rgba(27,115,232,0.04);
    color: var(--z-heading, #1a1a2e);
    border-top: 2px solid var(--z-border, #e0e0e0);
}

/* ---------------------------------------------------
   29g. GSTR-3B Cards & Sections
   --------------------------------------------------- */
.gstr3b-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    margin-bottom: 20px;
    overflow: hidden;
}
.gstr3b-section-header {
    background: var(--z-hover-bg, #f8f9fb);
    padding: 14px 20px;
    border-bottom: 1px solid var(--z-border, #e0e0e0);
    display: flex;
    align-items: center;
    gap: 10px;
}
.gstr3b-section-num {
    background: var(--z-primary, #1B73E8);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gstr3b-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--z-heading, #1a1a2e);
}
.gstr3b-card .table { margin-bottom: 0; }
.gstr3b-card .table thead th {
    background: var(--z-hover-bg, #f8f9fb);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--z-muted, #84878f);
    border-bottom: 2px solid var(--z-border, #e0e0e0);
    padding: 10px 14px;
    white-space: nowrap;
}
.gstr3b-card .table tbody td {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--z-text, #333);
    vertical-align: middle;
}
.gstr3b-card .table tbody td.row-label {
    font-weight: 600;
    color: var(--z-heading, #1a1a2e);
    padding-left: 20px;
}
.gstr3b-card .table tbody td.row-sublabel {
    padding-left: 36px;
    color: var(--z-muted, #84878f);
}
.gstr3b-card .table .net-row td {
    font-weight: 700;
    background: rgba(52,168,83,0.06);
    color: #1a6e2e;
    border-top: 2px solid var(--z-border, #e0e0e0);
}
.gstr3b-card .table .totals-row td {
    font-weight: 700;
    background: rgba(27,115,232,0.04);
    color: var(--z-heading, #1a1a2e);
    border-top: 2px solid var(--z-border, #e0e0e0);
}

/* ---------------------------------------------------
   29h. GST Reconciliation Sections
   --------------------------------------------------- */
.gstr-section-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    margin-bottom: 20px;
    overflow: hidden;
}
.gstr-section-title {
    padding: 14px 20px;
    border-bottom: 1px solid var(--z-border, #e0e0e0);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}
.gstr-section-title i { font-size: 16px; }
.gstr-section-title.output { background: #e8f2fd; color: var(--z-primary, #1B73E8); }
.gstr-section-title.input  { background: #e8faf0; color: #1a6e2e; }
.gstr-section-title.net    { background: #fff3e0; color: #f57c00; }
.gstr-section-card .table { margin-bottom: 0; }
.gstr-section-card .table thead th {
    background: var(--z-hover-bg, #f8f9fb);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--z-muted, #84878f);
    border-bottom: 2px solid var(--z-border, #e0e0e0);
    padding: 10px 14px;
    white-space: nowrap;
}
.gstr-section-card .table tbody td {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--z-text, #333);
    vertical-align: middle;
}
.gstr-section-card .table .totals-row td {
    font-weight: 700;
    background: rgba(27,115,232,0.04);
    border-top: 2px solid var(--z-border, #e0e0e0);
    color: var(--z-heading, #1a1a2e);
}
.amt-payable { color: #c62828; font-weight: 600; }
.amt-refundable { color: #1a6e2e; font-weight: 600; }

/* ---------------------------------------------------
   29i. Profit & Loss Statement
   --------------------------------------------------- */
.pl-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    margin-bottom: 20px;
    overflow: hidden;
}
.pl-card .table { margin-bottom: 0; }
.pl-card .table thead th {
    background: var(--z-hover-bg, #f8f9fb);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--z-muted, #84878f);
    border-bottom: 2px solid var(--z-border, #e0e0e0);
    padding: 10px 14px;
    white-space: nowrap;
}
.pl-card .table tbody td {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--z-text, #333);
    vertical-align: middle;
}
.pl-card .table .section-header td {
    background: var(--z-hover-bg, #f8f9fb);
    font-weight: 700;
    font-size: 13px;
    color: var(--z-heading, #1a1a2e);
    border-top: 2px solid var(--z-border, #e0e0e0);
}
.pl-card .table .sub-row td {
    padding-left: 36px;
    color: var(--z-muted, #84878f);
}
.pl-card .table .total-row td {
    font-weight: 700;
    background: rgba(27,115,232,0.04);
    color: var(--z-heading, #1a1a2e);
    border-top: 2px solid var(--z-border, #e0e0e0);
}
.pl-card .table .total-revenue td {
    font-weight: 700;
    background: rgba(27,115,232,0.08);
    color: var(--z-primary, #1B73E8);
}
.pl-card .table .gross-profit td {
    font-weight: 700;
    background: rgba(52,168,83,0.06);
    color: #1a6e2e;
}
.pl-card .table .ebitda-row td {
    font-weight: 700;
    background: rgba(27,115,232,0.04);
    color: var(--z-heading, #1a1a2e);
}
.pl-card .table .pbt-row td {
    font-weight: 700;
    background: rgba(251,188,5,0.08);
    color: #7c5e00;
    border-top: 2px solid var(--z-border, #e0e0e0);
}
.pl-card .table .net-profit-positive td {
    font-weight: 700;
    background: rgba(52,168,83,0.1);
    color: #1a6e2e;
    border-top: 2px solid #34a853;
}
.pl-card .table .net-profit-negative td {
    font-weight: 700;
    background: rgba(234,67,53,0.08);
    color: #c62828;
    border-top: 2px solid #ea4335;
}
.change-up   { color: #1a6e2e; font-weight: 600; font-size: 12px; }
.change-down { color: #c62828; font-weight: 600; font-size: 12px; }

/* P&L Monthly Bar Chart */
.pl-chart-section {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    padding: 20px;
    margin-bottom: 20px;
}
.pl-chart-section h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--z-heading, #1a1a2e);
    margin-bottom: 16px;
}
.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 200px;
    padding-top: 10px;
}
.bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
}
.bar-pair {
    display: flex;
    gap: 3px;
    align-items: flex-end;
}
.bar-pair .bar {
    width: 18px;
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.3s;
}
.bar-revenue { background: var(--z-primary, #1B73E8); }
.bar-expense { background: #ea4335; }
.bar-label {
    font-size: 10px;
    color: var(--z-muted, #84878f);
    margin-top: 6px;
    text-align: center;
}
.chart-legend {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    justify-content: center;
}
.chart-legend span {
    font-size: 12px;
    color: var(--z-muted, #84878f);
    display: flex;
    align-items: center;
    gap: 6px;
}
.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

/* ---------------------------------------------------
   29j. PF & ESI Reports
   --------------------------------------------------- */
.pfesi-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--z-border, #e0e0e0);
}
.pfesi-tab {
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: var(--z-muted, #84878f);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.pfesi-tab:hover { color: var(--z-primary, #1B73E8); }
.pfesi-tab.active {
    color: var(--z-primary, #1B73E8);
    border-bottom-color: var(--z-primary, #1B73E8);
}
.pfesi-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    margin-bottom: 20px;
    overflow: hidden;
}
.pfesi-card .table { margin-bottom: 0; }
.pfesi-card .table thead th {
    background: var(--z-hover-bg, #f8f9fb);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--z-muted, #84878f);
    border-bottom: 2px solid var(--z-border, #e0e0e0);
    padding: 10px 14px;
    white-space: nowrap;
}
.pfesi-card .table tbody td {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--z-text, #333);
    vertical-align: middle;
}
.pfesi-card .table .totals-row td {
    font-weight: 700;
    background: rgba(27,115,232,0.04);
    border-top: 2px solid var(--z-border, #e0e0e0);
    color: var(--z-heading, #1a1a2e);
}

/* ECR Summary bar */
.ecr-summary {
    background: var(--z-hover-bg, #f8f9fb);
    border-radius: 10px;
    padding: 16px 20px;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ecr-summary .ecr-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--z-heading, #1a1a2e);
}
.ecr-summary .ecr-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--z-primary, #1B73E8);
}

/* ESI Note banner */
.esi-note {
    background: #fff8e1;
    border: 1px solid #fbc02d;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #7c5e00;
}
.esi-note i { margin-right: 8px; color: #f57c00; }

/* ---------------------------------------------------
   29k. Cash Flow Forecast
   --------------------------------------------------- */
.cf-kpi-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.cf-kpi-card {
    flex: 1;
    min-width: 200px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.cf-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.cf-kpi-icon.green  { background: #e8faf0; color: #2ecc71; }
.cf-kpi-icon.red    { background: #fde8e8; color: #e04646; }
.cf-kpi-icon.blue   { background: #e8f2fd; color: var(--z-primary, #1B73E8); }
.cf-kpi-icon.orange { background: #fff3e0; color: #f57c00; }
.cf-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--z-heading, #1a1a2e);
    line-height: 1.2;
}
.cf-kpi-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--z-muted, #84878f);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Cash Flow section cards */
.cf-section-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    margin-bottom: 20px;
    overflow: hidden;
}
.cf-section-title {
    background: var(--z-hover-bg, #f8f9fb);
    padding: 14px 20px;
    border-bottom: 1px solid var(--z-border, #e0e0e0);
    font-size: 14px;
    font-weight: 700;
    color: var(--z-heading, #1a1a2e);
}
.cf-section-title i { margin-right: 8px; }
.cf-section-card .table { margin-bottom: 0; }
.cf-section-card .table thead th {
    background: var(--z-hover-bg, #f8f9fb);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--z-muted, #84878f);
    border-bottom: 2px solid var(--z-border, #e0e0e0);
    padding: 10px 14px;
    white-space: nowrap;
}
.cf-section-card .table tbody td {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--z-text, #333);
    vertical-align: middle;
}
.cf-section-card .table .totals-row td {
    font-weight: 700;
    background: rgba(27,115,232,0.04);
    border-top: 2px solid var(--z-border, #e0e0e0);
}
.due-soon    { color: #f57c00; font-weight: 600; }
.due-overdue { color: #c62828; font-weight: 600; }

/* Aging cards */
.aging-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.aging-card {
    flex: 1;
    min-width: 180px;
    border-radius: 10px;
    padding: 18px 20px;
    text-align: center;
    border: 1px solid var(--z-border, #e0e0e0);
}
.aging-card.age-0-30   { background: #e8f2fd; border-left: 4px solid var(--z-primary, #1B73E8); }
.aging-card.age-31-60  { background: #fff8e1; border-left: 4px solid #fbc02d; }
.aging-card.age-61-90  { background: #fff3e0; border-left: 4px solid #f57c00; }
.aging-card.age-90plus { background: #fde8e8; border-left: 4px solid #e04646; }
.aging-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--z-muted, #84878f);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.aging-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--z-heading, #1a1a2e);
    margin-top: 6px;
}
.aging-count {
    font-size: 12px;
    color: var(--z-muted, #84878f);
    margin-top: 2px;
}

/* Cash Flow Timeline chart */
.cf-timeline {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    padding: 20px;
    margin-bottom: 20px;
}
.cf-timeline h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--z-heading, #1a1a2e);
    margin-bottom: 16px;
}
.timeline-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 160px;
    overflow-x: auto;
}
.timeline-bar {
    flex: 1;
    min-width: 6px;
    border-radius: 2px 2px 0 0;
    transition: height 0.3s;
}
.timeline-bar.positive { background: var(--z-primary, #1B73E8); }
.timeline-bar.negative { background: #ea4335; }
.timeline-labels {
    display: flex;
    gap: 2px;
    margin-top: 6px;
    overflow-x: auto;
}
.timeline-labels span {
    flex: 1;
    min-width: 6px;
    font-size: 9px;
    color: var(--z-muted, #84878f);
    text-align: center;
}

/* ---------------------------------------------------
   29l. Bank Reconciliation
   --------------------------------------------------- */
.br-kpi-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.br-kpi-card {
    flex: 1;
    min-width: 170px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.br-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.br-kpi-icon.blue   { background: #e8f2fd; color: var(--z-primary, #1B73E8); }
.br-kpi-icon.green  { background: #e8faf0; color: #2ecc71; }
.br-kpi-icon.red    { background: #fde8e8; color: #e04646; }
.br-kpi-icon.purple { background: #f3e8fd; color: #7c3aed; }
.br-kpi-icon.orange { background: #fff3e0; color: #f57c00; }
.br-kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--z-heading, #1a1a2e);
    line-height: 1.2;
}
.br-kpi-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--z-muted, #84878f);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Bank Recon section cards & tables */
.br-section-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    margin-bottom: 20px;
    overflow: hidden;
}
.br-section-title {
    background: var(--z-hover-bg, #f8f9fb);
    padding: 14px 20px;
    border-bottom: 1px solid var(--z-border, #e0e0e0);
    font-size: 14px;
    font-weight: 700;
    color: var(--z-heading, #1a1a2e);
}
.br-section-title i { margin-right: 8px; }
.br-section-card .table { margin-bottom: 0; }
.br-section-card .table thead th {
    background: var(--z-hover-bg, #f8f9fb);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--z-muted, #84878f);
    border-bottom: 2px solid var(--z-border, #e0e0e0);
    padding: 10px 14px;
    white-space: nowrap;
}
.br-section-card .table tbody td {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--z-text, #333);
    vertical-align: middle;
}

/* Match badges & buttons */
.match-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.match-badge.matched   { background: #e8faf0; color: #1a6e2e; }
.match-badge.unmatched { background: #fde8e8; color: #c62828; }
.match-badge.manual    { background: #e8f2fd; color: var(--z-primary, #1B73E8); }
.btn-match {
    background: var(--z-primary, #1B73E8);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.btn-match:hover { background: #1557b0; color: #fff; }

/* Reconciliation summary */
.recon-summary {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    padding: 20px;
    margin-bottom: 20px;
}
.recon-summary h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--z-heading, #1a1a2e);
    margin-bottom: 16px;
}
.recon-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--z-border, #e0e0e0);
}
.recon-row:last-child { border-bottom: none; }
.recon-row .label {
    font-size: 14px;
    color: var(--z-text, #333);
}
.recon-row .value {
    font-size: 16px;
    font-weight: 700;
    color: var(--z-heading, #1a1a2e);
}
.recon-row.diff .value { color: #c62828; }
.recon-row.diff.zero .value { color: #1a6e2e; }

/* Import modal */
.import-modal .modal-header {
    background: var(--z-hover-bg, #f8f9fb);
    border-bottom: 1px solid var(--z-border, #e0e0e0);
}

/* ---------------------------------------------------
   29m. RCM Report
   --------------------------------------------------- */
.rcm-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    margin-bottom: 20px;
    overflow: hidden;
}
.rcm-card .table { margin-bottom: 0; }
.rcm-card .table thead th {
    background: var(--z-hover-bg, #f8f9fb);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--z-muted, #84878f);
    border-bottom: 2px solid var(--z-border, #e0e0e0);
    padding: 10px 14px;
    white-space: nowrap;
}
.rcm-card .table tbody td {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--z-text, #333);
    vertical-align: middle;
}
.rcm-card .table .totals-row td {
    font-weight: 700;
    background: rgba(27,115,232,0.04);
    border-top: 2px solid var(--z-border, #e0e0e0);
    color: var(--z-heading, #1a1a2e);
}
.type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.type-badge.invoice { background: #e8f2fd; color: var(--z-primary, #1B73E8); }
.type-badge.expense { background: #fff3e0; color: #f57c00; }

/* ---------------------------------------------------
   29n. Professional Tax
   --------------------------------------------------- */
.pt-slab-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    margin-bottom: 20px;
    overflow: hidden;
}
.pt-slab-card .slab-title {
    background: var(--z-hover-bg, #f8f9fb);
    padding: 12px 20px;
    border-bottom: 1px solid var(--z-border, #e0e0e0);
    font-size: 14px;
    font-weight: 700;
    color: var(--z-heading, #1a1a2e);
}
.pt-slab-card .slab-title i {
    margin-right: 8px;
    color: var(--z-primary, #1B73E8);
}
.pt-slab-card .table { margin-bottom: 0; }
.pt-slab-card .table thead th {
    background: var(--z-hover-bg, #f8f9fb);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--z-muted, #84878f);
    border-bottom: 2px solid var(--z-border, #e0e0e0);
    padding: 8px 14px;
}
.pt-slab-card .table tbody td {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--z-text, #333);
    vertical-align: middle;
}

/* ---------------------------------------------------
   29o. E-Invoice Readiness
   --------------------------------------------------- */
.score-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--z-border, #e0e0e0);
    padding: 28px;
    margin-bottom: 24px;
    text-align: center;
}
.score-card .score-value {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}
.score-card .score-value.high   { color: #1a6e2e; }
.score-card .score-value.medium { color: #f57c00; }
.score-card .score-value.low    { color: #c62828; }
.score-card .score-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--z-muted, #84878f);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}
.score-progress {
    width: 100%;
    max-width: 400px;
    height: 12px;
    background: #f0f1f3;
    border-radius: 6px;
    margin: 16px auto 0;
    overflow: hidden;
}
.score-progress-bar {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
}
.score-progress-bar.high   { background: linear-gradient(90deg, #34a853, #1a6e2e); }
.score-progress-bar.medium { background: linear-gradient(90deg, #fbc02d, #f57c00); }
.score-progress-bar.low    { background: linear-gradient(90deg, #ea4335, #c62828); }
.score-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 16px;
}
.score-stat { text-align: center; }
.score-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--z-heading, #1a1a2e);
}
.score-stat-label {
    font-size: 11px;
    color: var(--z-muted, #84878f);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* E-Invoice card table */
.einv-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--z-border, #e0e0e0);
    margin-bottom: 20px;
    overflow: hidden;
}
.einv-card .table { margin-bottom: 0; }
.einv-card .table thead th {
    background: var(--z-hover-bg, #f8f9fb);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--z-muted, #84878f);
    border-bottom: 2px solid var(--z-border, #e0e0e0);
    padding: 10px 14px;
    white-space: nowrap;
}
.einv-card .table tbody td {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--z-text, #333);
    vertical-align: middle;
}
.check-pass { color: #1a6e2e; font-size: 15px; }
.check-fail { color: #c62828; font-size: 15px; }
.inv-score-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}
.inv-score-badge.high   { background: #e8faf0; color: #1a6e2e; }
.inv-score-badge.medium { background: #fff3e0; color: #f57c00; }
.inv-score-badge.low    { background: #fde8e8; color: #c62828; }
.row-noncompliant { background: rgba(234,67,53,0.04) !important; }
.row-warning      { background: rgba(251,188,5,0.04) !important; }

/* ---------------------------------------------------
   29p. TDS / Outstanding / Shared Table Rows
   --------------------------------------------------- */
.tax-report-card {
    background: var(--z-card-bg, #ffffff);
    border: 1px solid var(--z-border-light, #eef1f5);
    border-radius: 10px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: box-shadow 0.2s;
}
.tax-report-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.tax-report-card .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.card-icon.blue   { background: var(--z-primary-light, #e8f2fd); color: var(--z-primary, #2c83ec); }
.card-icon.green  { background: var(--z-success-bg, #e8faf0); color: var(--z-success, #2ecc71); }
.card-icon.red    { background: var(--z-danger-bg, #fde8e8); color: var(--z-danger, #e04646); }
.card-icon.yellow { background: #fef3c7; color: #d97706; }
.card-icon.orange { background: #ffedd5; color: #ea580c; }
.tax-report-card .card-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--z-text-heading, #1a2332);
    line-height: 1.2;
}
.tax-report-card .card-label {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Section group header (TDS) */
.section-group-header td {
    background: var(--z-primary-50, #f0f7ff) !important;
    font-weight: 700 !important;
    color: var(--z-primary-dark, #1b5eb5) !important;
    font-size: 13px;
    border-top: 2px solid var(--z-primary, #2c83ec) !important;
}
.subtotal-row td {
    background: #f9fafb !important;
    font-weight: 600 !important;
    border-top: 1px dashed var(--z-border, #e0e5ec) !important;
}
.summary-row td {
    font-weight: 700 !important;
    background: var(--z-primary-50, #f0f7ff) !important;
    border-top: 2px solid var(--z-primary, #2c83ec) !important;
}

/* Chart container (outstanding) */
.chart-container {
    background: var(--z-card-bg, #ffffff);
    border: 1px solid var(--z-border-light, #eef1f5);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
}

/* ---------------------------------------------------
   29q. Tax Calendar
   --------------------------------------------------- */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
@media (max-width: 991px)  { .cal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .cal-grid { grid-template-columns: 1fr; } }
.cal-month-card {
    background: var(--z-card-bg, #ffffff);
    border: 1px solid var(--z-border-light, #eef1f5);
    border-radius: 10px;
    padding: 16px;
    transition: box-shadow 0.2s;
}
.cal-month-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.cal-month-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--z-text-heading, #1a2332);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--z-primary, #2c83ec);
}
.cal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cal-chip {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.cal-chip.overdue  { background: var(--z-danger-bg, #fde8e8);  color: var(--z-danger-text, #991b1b); }
.cal-chip.due-soon { background: #fef3c7; color: #92400e; }
.cal-chip.filed    { background: var(--z-success-bg, #e8faf0); color: var(--z-success-text, #1a7a42); }
.cal-chip.upcoming { background: var(--z-primary-light, #e8f2fd); color: var(--z-primary, #2c83ec); }
.cal-chip i { font-size: 10px; }
.cal-no-deadlines {
    color: #9ca3af;
    font-size: 12px;
    font-style: italic;
}
.deadline-status-select {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    border: 1px solid var(--z-border, #e0e5ec);
    background: #fff;
}
.btn-mark-filed {
    background: var(--z-success, #2ecc71);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-mark-filed:hover { background: var(--z-success-text, #1a7a42); }

/* ---------------------------------------------------
   29r. Tax Reports Responsive
   --------------------------------------------------- */
@media (max-width: 768px) {
    .tax-reports-header,
    .pl-header,
    .pfesi-header,
    .cf-header,
    .br-header,
    .einv-header,
    .rcm-header,
    .gstr-header,
    .pt-header {
        flex-direction: column;
        gap: 12px;
        padding: 20px;
    }
    .tax-kpi-row,
    .cf-kpi-row,
    .br-kpi-row,
    .aging-row {
        flex-direction: column;
    }
    .tax-filter-bar,
    .pl-filter-bar,
    .pfesi-filter-bar,
    .cf-filter-bar,
    .br-filter-bar,
    .einv-filter-bar,
    .rcm-filter-bar,
    .gstr-filter-bar,
    .pt-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .tax-filter-bar .btn-export,
    .pl-filter-bar .btn-export,
    .pt-filter-bar .btn-export,
    .br-filter-bar .btn-import {
        margin-left: 0;
        margin-top: 8px;
    }
    .score-stats {
        flex-direction: column;
        gap: 12px;
    }
    .pfesi-tabs {
        flex-direction: column;
    }
    .ecr-summary {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}
/* ===================================================
   END SECTION 29 – TAX REPORTS MODULE
   =================================================== */

/* ===================================================
   SECTION 30 – DOCUMENT VERIFICATION UI
   =================================================== */

/* Table header cells */
.doc-th {
    padding: 10px 16px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--z-text-muted, #64748b) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid var(--z-border, #e2e8f0) !important;
    white-space: nowrap;
}

/* Table row hover */
.doc-row:hover {
    background: var(--z-bg-light, #f8fafc);
}

/* File preview link */
.doc-file-link:hover {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

/* Verify button (single doc) */
.btn-verify-doc {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #fff !important;
    transition: all 0.15s;
}
.btn-verify-doc:hover {
    background: #16a34a !important;
    border-color: #16a34a !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
}

/* Reject button (single doc) */
.btn-reject-doc {
    background: #fff !important;
    border: 1px solid #fca5a5 !important;
    color: #ef4444 !important;
    transition: all 0.15s;
}
.btn-reject-doc:hover {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

/* Verify All bulk button */
.btn-verify-all {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #fff !important;
    transition: all 0.15s;
}
.btn-verify-all:hover {
    background: #16a34a !important;
    border-color: #16a34a !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* "All Verified" badge pulse animation */
.doc-all-verified-badge {
    animation: docVerifiedPulse 2s ease-in-out infinite;
}
@keyframes docVerifiedPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.2); }
    50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* Staff panel card hover */
.doc-staff-panel {
    transition: box-shadow 0.2s;
}
.doc-staff-panel:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Reject modal animation */
#rejectDocModal .modal-content {
    animation: docModalSlide 0.2s ease-out;
}
@keyframes docModalSlide {
    from { transform: translateY(-10px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* Loading spinner state for action buttons */
.btn-loading {
    pointer-events: none;
    opacity: 0.7;
}
.btn-loading i.fa-solid {
    display: none;
}
.btn-loading::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: docBtnSpin 0.5s linear infinite;
    margin-right: 5px;
    vertical-align: middle;
}
@keyframes docBtnSpin {
    to { transform: rotate(360deg); }
}

/* ===================================================
   END SECTION 30 – DOCUMENT VERIFICATION UI
   =================================================== */

/* ===================================================
   SECTION 31 – HRMS SIDEBAR COLLAPSIBLE SUB-GROUPS
   =================================================== */
.menu-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--z-text-muted, #94a3b8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.menu-section-label::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    transition: transform 0.2s;
}
.hrms-section-collapsed .menu-section-label::after {
    transform: rotate(-90deg);
}
#side-menu .menu-item-hr-section-people > a,
#side-menu .menu-item-hr-section-payroll > a,
#side-menu .menu-item-hr-section-hiring > a,
#side-menu .menu-item-hr-section-onboarding > a,
#side-menu .menu-item-hr-section-letters > a,
#side-menu .menu-item-hr-section-settings > a {
    padding: 6px 15px 4px !important;
    cursor: pointer !important;
    background: transparent !important;
    border-top: 1px solid rgba(0,0,0,0.04);
    margin-top: 4px;
}
#side-menu .menu-item-hr-section-people > a:hover,
#side-menu .menu-item-hr-section-payroll > a:hover,
#side-menu .menu-item-hr-section-hiring > a:hover,
#side-menu .menu-item-hr-section-onboarding > a:hover,
#side-menu .menu-item-hr-section-letters > a:hover,
#side-menu .menu-item-hr-section-settings > a:hover {
    background: rgba(0,0,0,0.02) !important;
}
.hrms-section-child { transition: all 0.2s; }
.hrms-section-child.hrms-hidden { display: none !important; }


/* ==========================================================================
   Section 33: Tasks — Rebuilt
   ========================================================================== */

/* --- View Tabs --- */
.task-view-tab {
    background: transparent;
    color: #64748b;
}
.task-view-tab:hover {
    background: #e5e7eb;
    color: #1e293b;
}
.task-view-tab.active {
    background: #fff;
    color: var(--z-primary, #2563eb);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* --- KPI Cards --- */
.task-kpi-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}
.task-kpi-card.active-filter {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* --- List Table --- */
.tasks-table-wrapper .table {
    margin: 0;
    font-size: 13px;
}
.tasks-table-wrapper .table thead th {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 10px 14px;
    white-space: nowrap;
}
.tasks-table-wrapper .table tbody td {
    padding: 10px 14px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}
.tasks-table-wrapper .table tbody tr:hover {
    background: #f8fafc;
}

/* --- Priority Badges --- */
.task-priority-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.task-priority-badge.priority-low    { background: #f1f5f9; color: #64748b; }
.task-priority-badge.priority-medium { background: #dbeafe; color: #2563eb; }
.task-priority-badge.priority-high   { background: #fff7ed; color: #ea580c; }
.task-priority-badge.priority-urgent { background: #fef2f2; color: #dc2626; }

/* --- Status Badges --- */
.task-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.task-status-badge .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

/* --- Task Name Link (DataTable) --- */
.task-name-link {
    color: #1e293b;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
.task-name-link:hover {
    color: var(--z-primary, #2563eb);
}

/* --- Date Pickers --- */
#task_filter_date_from,
#task_filter_date_to {
    cursor: pointer;
}

/* --- Kanban Column --- */
.kanban-column-body.drag-over {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
    border-style: dashed !important;
}
.kanban-card.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}
.kanban-card:active {
    cursor: grabbing;
}

/* --- Detail Slide Panel --- */
.task-detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s ease;
}
.task-detail-panel.open {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.3s ease;
}
.task-detail-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.25);
}
.task-detail-content {
    position: absolute;
    top: 0;
    right: -500px;
    bottom: 0;
    width: 500px;
    max-width: 90vw;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}
.task-detail-panel.open .task-detail-content {
    right: 0;
}
.task-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.task-detail-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}
.task-detail-tab.active {
    color: var(--z-primary, #2563eb);
    border-bottom-color: var(--z-primary, #2563eb) !important;
}
.task-detail-tab:hover:not(.active) {
    color: #1e293b;
}

/* --- Assignee Chips --- */
.assignee-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border-radius: 20px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 12px;
    color: #334155;
}
.assignee-chip img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}
.assignee-chip .remove-assignee {
    margin-left: 4px;
    color: #94a3b8;
    cursor: pointer;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 11px;
}
.assignee-chip .remove-assignee:hover {
    color: #ef4444;
}

/* --- Timesheet Entry --- */
.timesheet-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
}
.timesheet-entry .ts-duration {
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
    font-family: monospace;
}
.timesheet-entry .ts-meta {
    font-size: 11px;
    color: #94a3b8;
}

/* --- Attachment Item --- */
.attachment-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.attachment-item:hover {
    background: #f1f5f9;
}
.attachment-item .att-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #e0e7ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.attachment-item .att-name {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.attachment-item .att-size {
    font-size: 11px;
    color: #94a3b8;
}

/* --- Activity Item --- */
.activity-item {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #64748b;
}
.activity-item .act-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
    margin-top: 5px;
}
.activity-item .act-time {
    font-size: 11px;
    color: #94a3b8;
}

/* ==========================================================================
   Section 34: LOAN SETTINGS / LOAN POLICIES PAGE
   ========================================================================== */

/* Page Header */
.loan-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.loan-settings-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--z-text-primary, #1a2332);
}

/* KPI Cards Row */
.loan-policy-kpis {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.loan-kpi-card {
    flex: 1;
    min-width: 160px;
    background: #fff;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.loan-kpi-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}
.loan-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.loan-kpi-info {
    display: flex;
    flex-direction: column;
}
.loan-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--z-text-primary, #1a2332);
    line-height: 1.1;
}
.loan-kpi-label {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Card Wrapper */
.loan-settings-card {
    background: #fff;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* Table */
.loan-policies-table {
    margin: 0;
    font-size: 13px;
}
.loan-policies-table > thead > tr > th {
    background: #f8fafc;
    font-weight: 600;
    color: #64748b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid #e2e8f0;
    padding: 12px 16px;
    white-space: nowrap;
}
.loan-policies-table > tbody > tr > td {
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.loan-policies-table > tbody > tr:hover > td {
    background: #f8fafc;
}
.loan-policies-table > tbody > tr:last-child > td {
    border-bottom: none;
}

/* Disabled Row */
.loan-row-disabled {
    opacity: 0.45;
}
.loan-row-disabled:hover {
    opacity: 0.65;
}

/* Row Number */
.loan-row-num {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-align: center;
}

/* Loan Type Cell */
.loan-type-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.loan-type-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--z-text-primary, #1a2332);
}
.loan-type-code {
    font-size: 10px;
    color: #94a3b8;
    font-family: 'SF Mono', 'Fira Code', monospace;
    letter-spacing: 0.3px;
}

/* Rate Badges */
.loan-rate-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    background: #dbeafe;
    color: #1e40af;
}
.loan-rate-free {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    background: #dcfce7;
    color: #166534;
}

/* Method Badges */
.loan-method-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.loan-method-flat {
    background: #f1f5f9;
    color: #475569;
}
.loan-method-reducing_balance {
    background: #fef3c7;
    color: #92400e;
}

/* Tenure & Service Badges */
.loan-tenure-badge,
.loan-service-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
}

/* Toggle Switch */
.loan-toggle-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}
.loan-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.loan-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cbd5e1;
    border-radius: 20px;
    transition: background 0.25s;
}
.loan-toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.loan-toggle-switch input:checked + .loan-toggle-slider {
    background: #22c55e;
}
.loan-toggle-switch input:checked + .loan-toggle-slider::before {
    transform: translateX(18px);
}

/* Edit Button */
.loan-edit-btn {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    background: #fff !important;
    padding: 4px 10px !important;
    transition: all 0.2s;
}
.loan-edit-btn:hover {
    border-color: #2c83ec !important;
    color: #2c83ec !important;
    background: #eff6ff !important;
}

/* Modal */
.loan-modal-content {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.loan-modal-header {
    border-bottom: 1px solid #eef1f5;
    padding: 18px 24px;
}
.loan-modal-footer {
    border-top: 1px solid #eef1f5;
    padding: 16px 24px;
}

/* Form Elements */
.loan-form-label {
    font-weight: 600;
    font-size: 12px;
    color: #475569;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.loan-form-input {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    height: auto !important;
}
.loan-form-input:focus {
    border-color: #2c83ec !important;
    box-shadow: 0 0 0 3px rgba(44, 131, 236, 0.1) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .loan-policy-kpis {
        flex-direction: column;
    }
    .loan-kpi-card {
        min-width: 100%;
    }
    .loan-settings-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}



/* ============================================
   SECTION 35 – ADMINISTRATION PAGES
   Zoho CRM Inspired: Roles, Settings, Activity Log
   ============================================ */

/* ── 35a. Global Admin Page Headers ── */
.adm-page-header,
.settings-page-header,
.alog-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 0 2px;
}

/* ── 35b. Global Admin Table Panel Enhancements ── */
.adm-table-panel .table,
.alog-table-panel .table {
    margin-bottom: 0 !important;
}

/* Pagination styling */
.adm-table-panel .dataTables_paginate .paginate_button,
.alog-table-panel .dataTables_paginate .paginate_button {
    border-radius: var(--z-radius, 8px) !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    margin: 0 2px !important;
    border: 1px solid var(--z-border-light, #eef1f5) !important;
    transition: all 0.15s ease !important;
}
.adm-table-panel .dataTables_paginate .paginate_button.current,
.alog-table-panel .dataTables_paginate .paginate_button.current {
    background: var(--z-primary, #2c83ec) !important;
    border-color: var(--z-primary, #2c83ec) !important;
    color: #fff !important;
}
.adm-table-panel .dataTables_paginate .paginate_button:hover:not(.current),
.alog-table-panel .dataTables_paginate .paginate_button:hover:not(.current) {
    background: var(--z-primary-50, #f0f7ff) !important;
    border-color: var(--z-primary, #2c83ec) !important;
    color: var(--z-primary, #2c83ec) !important;
}

/* Search input in DataTables */
.adm-table-panel .dataTables_filter input,
.alog-table-panel .dataTables_filter input {
    border-radius: var(--z-radius, 8px) !important;
    border: 1px solid var(--z-border, #e0e5ec) !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.adm-table-panel .dataTables_filter input:focus,
.alog-table-panel .dataTables_filter input:focus {
    border-color: var(--z-primary, #2c83ec) !important;
    box-shadow: 0 0 0 3px rgba(44, 131, 236, 0.1) !important;
    outline: none !important;
}

/* Length selector */
.adm-table-panel .dataTables_length select,
.alog-table-panel .dataTables_length select {
    border-radius: var(--z-radius, 8px) !important;
    border: 1px solid var(--z-border, #e0e5ec) !important;
    padding: 5px 8px !important;
    font-size: 13px !important;
}

/* ── 35c. Settings Form Enhancements ── */
.settings-form-panel .panel_s {
    border: none !important;
    box-shadow: none !important;
}

/* Checkbox/radio inside settings */
.settings-form-panel .checkbox label,
.settings-form-panel .radio label {
    font-size: 13px;
    color: var(--z-text, #333e50);
    font-weight: 500;
}

/* Alert inside settings */
.settings-form-panel .alert {
    border-radius: var(--z-radius, 8px);
    border: none;
    font-size: 13px;
}
.settings-form-panel .alert-info {
    background: var(--z-info-bg, #e8f2fd);
    color: var(--z-info-text, #1b5eb5);
}
.settings-form-panel .alert-warning {
    background: var(--z-warning-bg, #fef6e6);
    color: var(--z-warning-text, #8a5d13);
}
.settings-form-panel .alert-success {
    background: var(--z-success-bg, #e8faf0);
    color: var(--z-success-text, #1a7a42);
}
.settings-form-panel .alert-danger {
    background: var(--z-danger-bg, #fde8e8);
    color: var(--z-danger-text, #991b1b);
}

/* ── 35d. Admin Permissions Table Styling ── */
.adm-form-panel .table-permissions,
.adm-form-panel .table {
    margin-bottom: 0;
}
.adm-form-panel .table-permissions thead th,
.adm-form-panel .table thead th {
    background: #f8fafc;
    border-bottom: 1px solid var(--z-border-light, #eef1f5);
    color: var(--z-text-secondary, #6b7a90);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 10px 14px;
}
.adm-form-panel .table-permissions tbody td,
.adm-form-panel .table tbody td {
    padding: 10px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--z-border-light, #eef1f5);
    font-size: 13px;
}
.adm-form-panel .table-permissions tbody tr:hover td,
.adm-form-panel .table tbody tr:hover td {
    background: var(--z-primary-50, #f0f7ff);
}

/* ── 35e. Roles Card Grid — Action Buttons Hover Enhancement ── */
.adm-role-card .row-options a,
.adm-table-panel .row-options a {
    font-size: 12px;
    font-weight: 500;
    color: var(--z-text-secondary, #6b7a90);
    transition: color 0.15s ease;
}
.adm-role-card .row-options a:hover,
.adm-table-panel .row-options a:hover {
    color: var(--z-primary, #2c83ec);
}

/* ── 35f. Activity Log — Description Text Wrapping ── */
.alog-table-panel .table tbody td:first-child {
    max-width: 480px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
}

/* ============================================
   END SECTION 35 – ADMINISTRATION PAGES
   ============================================ */


/* ============================================
   36. ADMIN PAGE HEADERS — Purple Gradient Banner
       Matches the invoice page header design
   ============================================ */

/* ── 36.1 Reusable .z-page-header class ── */
.z-page-header {
    background: linear-gradient(135deg, var(--z-brand, #5A1740) 0%, #7a2258 100%);
    color: #fff;
    padding: 16px 24px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 2px 8px var(--z-brand-shadow, rgba(90,23,64,0.25));
}

.z-page-header h4,
.z-page-header .z-page-title {
    color: #fff !important;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 10px;
}

.z-page-header .z-page-title small,
.z-page-header h4 small {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-weight: 400;
}

/* Count badge in page header */
.z-page-header .z-count-badge {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
    line-height: 1.4;
    backdrop-filter: blur(4px);
}

/* Buttons inside page header */
.z-page-header .btn {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.z-page-header .btn:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.z-page-header .btn-success,
.z-page-header .btn.z-create-btn {
    background: var(--z-brand, #5A1740) !important;
    color: #fff !important;
    border-color: var(--z-brand, #5A1740) !important;
    font-weight: 700;
}

.z-page-header .btn-success:hover,
.z-page-header .btn.z-create-btn:hover {
    background: var(--z-brand-hover, #4a1236) !important;
    border-color: var(--z-brand-hover, #4a1236) !important;
    box-shadow: 0 2px 8px var(--z-brand-shadow, rgba(90,23,64,0.25)) !important;
    color: #fff !important;
}

/* ── 36.2 Auto-style common page title patterns ── */
/* Target the Tailwind page title used across admin pages */
#wrapper > .content > .row:first-child .tw-font-semibold {
    color: var(--z-text-heading) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* ── 36.3 Filter Tabs / Status Pills (below header) ── */
.z-filter-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
}

.z-filter-tabs .z-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--z-text-secondary);
    background: #fff;
    border: 1px solid var(--z-border-light);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.z-filter-tabs .z-tab:hover {
    background: var(--z-brand-50, #f5eef2);
    color: var(--z-brand, #5A1740);
    border-color: var(--z-brand-border, #e0d0d8);
}

.z-filter-tabs .z-tab.active {
    background: var(--z-brand, #5A1740);
    color: #fff;
    border-color: var(--z-brand, #5A1740);
    font-weight: 600;
}

/* Status dot indicator in filter tab */
.z-filter-tabs .z-tab .z-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.z-filter-tabs .z-tab .z-dot.dot-success { background: var(--z-success); }
.z-filter-tabs .z-tab .z-dot.dot-warning { background: var(--z-warning); }
.z-filter-tabs .z-tab .z-dot.dot-danger  { background: var(--z-danger);  }
.z-filter-tabs .z-tab .z-dot.dot-info    { background: var(--z-info);    }
.z-filter-tabs .z-tab .z-dot.dot-default { background: #c5cdd8; }

/* Tab count badge */
.z-filter-tabs .z-tab .z-tab-count {
    background: rgba(0,0,0,0.06);
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    line-height: 1.4;
}

.z-filter-tabs .z-tab.active .z-tab-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* ── 36.4 Global link/anchor brand accent ── */
.table a:not(.btn):not(.row-options a) {
    color: var(--z-brand, #5A1740);
    text-decoration: none;
    transition: color 0.15s ease;
}

.table a:not(.btn):not(.row-options a):hover {
    color: var(--z-brand-hover, #4a1236);
    text-decoration: underline;
}

/* ── 36.5 Form focus states — brand accent ── */
.form-control:focus {
    border-color: var(--z-brand, #5A1740) !important;
    box-shadow: 0 0 0 3px var(--z-brand-shadow-light, rgba(90,23,64,0.1)) !important;
    outline: none !important;
}

/* ── 36.6 Toggle switch — brand color when checked ── */
.onoffswitch-inner::before {
    background: var(--z-brand, #5A1740) !important;
}

/* ── 36.7 Reusable KPI Summary Bar ── */
.z-kpi-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.z-kpi-item {
    flex: 1;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    cursor: default;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: visible;
}
.z-kpi-item:hover {
    border-color: var(--z-brand, #5A1740);
    box-shadow: 0 2px 8px var(--z-brand-shadow-light, rgba(90,23,64,0.1));
}
.z-kpi-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.z-kpi-label {
    font-size: 12px;
    color: #888;
    font-weight: 500;
}
.z-kpi-value {
    font-size: 18px;
    font-weight: 700;
    color: #2d2d2d;
    line-height: 1.2;
    white-space: nowrap;
}

/* ── 36.8 Reusable Card Container ── */
.z-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
}
.z-card + .z-card {
    margin-top: 20px;
}
.z-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.z-card-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #2d2d2d;
    display: flex;
    align-items: center;
    gap: 8px;
}
.z-card-header h3 i {
    color: var(--z-gold, #C4962E);
}
.z-card-body {
    padding: 16px 20px;
}
.z-card-body.z-p0 {
    padding: 0;
}

/* ── 36.9 Reusable DataTable Wrapper ── */
.z-table-wrap .panel_s {
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
    border-radius: 0;
}
.z-table-wrap .panel-body.panel-table-full {
    padding: 0;
}
.z-table-wrap .table {
    margin-bottom: 0;
}
.z-table-wrap .table > thead > tr > th {
    background: #fafafa;
    color: #666;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 14px;
    border-bottom: 2px solid #f0f0f0;
    border-top: none;
    white-space: nowrap;
}
.z-table-wrap .table > tbody > tr > td {
    padding: 12px 14px;
    font-size: 13px;
    color: #444;
    border-bottom: 1px solid #f5f5f5;
    vertical-align: middle;
}
.z-table-wrap .table > tbody > tr:hover > td {
    background: var(--z-brand-light, #faf5f7);
}
.z-table-wrap .table > tbody > tr:last-child > td {
    border-bottom: none;
}
.z-table-wrap .dataTables_wrapper .dataTables_length,
.z-table-wrap .dataTables_wrapper .dataTables_info {
    font-size: 13px;
    color: #888;
    padding: 10px 14px;
}
.z-table-wrap .dataTables_wrapper .dataTables_length select {
    padding: 4px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
}

/* ── Reusable Invoice-style Card (used across invoices, applications, etc.) ── */
.inv-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
}
.inv-card + .inv-card {
    margin-top: 20px;
}
.inv-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.inv-card-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #2d2d2d;
    display: flex;
    align-items: center;
    gap: 8px;
}
.inv-card-header h3 i {
    color: var(--z-gold, #C4962E);
}
.inv-card-body {
    padding: 16px 20px;
}
.inv-card-body.inv-p0 {
    padding: 0;
}
.inv-table-wrap .dataTables_wrapper {
    padding: 0;
}
.z-table-wrap .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 4px 10px;
    margin: 0 2px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    color: #555 !important;
    background: #fff !important;
}
.z-table-wrap .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.z-table-wrap .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--z-brand, #5A1740) !important;
    color: #fff !important;
    border-color: var(--z-brand, #5A1740) !important;
}
.z-table-wrap .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--z-brand-light, #faf5f7) !important;
    border-color: var(--z-brand, #5A1740) !important;
    color: var(--z-brand, #5A1740) !important;
}

/* ── 36.10 Secondary & Primary Buttons (reusable) ── */
.z-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--z-brand, #5A1740);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}
.z-btn-primary:hover,
.z-btn-primary:focus {
    background: var(--z-brand-hover, #4a1235);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 8px var(--z-brand-shadow, rgba(90,23,64,0.25));
}
.z-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--z-brand, #5A1740);
    background: #fff;
    border: 1px solid var(--z-brand-border, #e0d0d8);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.z-btn-secondary:hover,
.z-btn-secondary:focus {
    background: var(--z-brand-light, #faf5f7);
    border-color: var(--z-brand, #5A1740);
    color: var(--z-brand, #5A1740);
    text-decoration: none;
}

/* Responsive for z- reusable components */
@media (max-width: 768px) {
    .z-kpi-bar {
        flex-direction: column;
    }
    .z-page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }
    .z-filter-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
}

/* ============================================
   END SECTION 36 – ADMIN PAGE HEADERS
   ============================================ */


/* ============================================
   37. GLOBAL ADMIN PAGE OVERRIDES
       CSS-only restyling of all remaining admin pages
       to match the polished invoice-page design pattern.
       Targets structural classes shared across pages:
       .panel_s, .nav-tabs, ._buttons, .modal, .dt-buttons,
       settings-tab, form panels, etc.
   ============================================ */

/* ── 37.1 Page Title Area ──
   The .tw-mb-2 > .btn pattern is used on config pages
   (currencies, taxes, departments, expense categories, etc.)
   as the "New …" button sitting above the table panel.
   Give it a more intentional look. */
#wrapper > .content > .row > .col-md-12 > .tw-mb-2 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 0 10px 0 !important;
}

/* Page-level title h4 inside ._buttons (used on many list pages) */
._buttons .pull-left h4,
._buttons h4.pull-left,
._buttons > h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--z-text-heading) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

._buttons .pull-left h4 i,
._buttons h4.pull-left i {
    color: var(--z-brand, #5A1740) !important;
    font-size: 16px !important;
}


/* ── 37.2 Settings Page — Left Navigation ──
   Styles the .settings-tab vertical pill nav (col-md-3)
   in admin/settings. Gives it a clean card look with
   brand-color active state. */
.settings-tab.nav-stacked {
    background: #fff !important;
    border-radius: var(--z-radius-lg) !important;
    border: 1px solid var(--z-border-light) !important;
    box-shadow: var(--z-shadow-sm) !important;
    padding: 8px 0 !important;
    overflow: hidden !important;
}

.settings-tab.nav-stacked > li > a {
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--z-text-secondary) !important;
    border: none !important;
    border-radius: 0 !important;
    border-left: 3px solid transparent !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
}

.settings-tab.nav-stacked > li > a:hover {
    background: var(--z-brand-light, #faf5f7) !important;
    color: var(--z-brand, #5A1740) !important;
    border-left-color: var(--z-brand-border, #e0d0d8) !important;
}

.settings-tab.nav-stacked > li.active > a,
.settings-tab.nav-stacked > li.active > a:hover,
.settings-tab.nav-stacked > li.active > a:focus {
    background: var(--z-brand-light, #faf5f7) !important;
    color: var(--z-brand, #5A1740) !important;
    font-weight: 600 !important;
    border-left-color: var(--z-brand, #5A1740) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.settings-tab.nav-stacked > li > a .menu-icon,
.settings-tab.nav-stacked > li > a i {
    width: 18px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: inherit !important;
    opacity: 0.7 !important;
}

.settings-tab.nav-stacked > li.active > a .menu-icon,
.settings-tab.nav-stacked > li.active > a i {
    opacity: 1 !important;
}

/* Settings group title (section dividers in settings nav) */
.settings-tab.nav-stacked > li.settings-group-title {
    padding: 14px 18px 6px 18px !important;
}

.settings-tab.nav-stacked > li.settings-group-title > span {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--z-text-muted) !important;
    display: block !important;
}

/* Badge inside settings nav */
.settings-tab.nav-stacked > li > a .badge {
    background: var(--z-brand-50, #f5eef2) !important;
    color: var(--z-brand, #5A1740) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    margin-left: auto !important;
}


/* ── 37.3 Settings Page — Right Content Panel ──
   The form panel in the col-md-9 of settings. */
.settings-tab ~ .col-md-9 .panel_s,
.col-md-3:has(.settings-tab) ~ .col-md-9 .panel_s {
    border-radius: var(--z-radius-lg) !important;
    border: 1px solid var(--z-border-light) !important;
    box-shadow: var(--z-shadow-sm) !important;
}


/* ── 37.4 Nav Tabs — Brand Color Active State ──
   Override the default blue active tab to use brand color
   on settings sub-tabs and all other admin tab pages. */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--z-brand, #5A1740) !important;
    border-bottom-color: var(--z-brand, #5A1740) !important;
}

.nav-tabs > li:not(.active) > a:hover {
    color: var(--z-brand, #5A1740) !important;
    border-bottom-color: var(--z-brand-border, #e0d0d8) !important;
}

.nav-tabs > li.active > a .badge {
    background: var(--z-brand-50, #f5eef2) !important;
    color: var(--z-brand, #5A1740) !important;
}


/* ── 37.5 DT Export Buttons (.dt-buttons) ──
   DataTables auto-generates export buttons (Copy, CSV, Excel, PDF, Print).
   Give them a subtle, unified look. */
.dt-buttons {
    display: inline-flex !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}

.dt-buttons .btn,
.dt-buttons .dt-button {
    background: #fff !important;
    color: var(--z-text-secondary) !important;
    border: 1px solid var(--z-border) !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    transition: var(--z-transition) !important;
    box-shadow: none !important;
}

.dt-buttons .btn:hover,
.dt-buttons .dt-button:hover {
    background: var(--z-brand-light, #faf5f7) !important;
    color: var(--z-brand, #5A1740) !important;
    border-color: var(--z-brand-border, #e0d0d8) !important;
}

/* Export dropdown popup (dt-button-collection) */
div.dt-button-collection {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06) !important;
    padding: 4px !important;
    min-width: 140px !important;
    z-index: 9999 !important;
    overflow: hidden !important;
}

div.dt-button-collection a.dt-button,
div.dt-button-collection button.dt-button,
div.dt-button-collection a.btn,
div.dt-button-collection button.btn,
div.dt-button-collection .dt-button {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    background: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    box-shadow: none !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

div.dt-button-collection a.dt-button:hover,
div.dt-button-collection button.dt-button:hover,
div.dt-button-collection a.btn:hover,
div.dt-button-collection button.btn:hover,
div.dt-button-collection .dt-button:hover {
    background: #f8f5f9 !important;
    color: #5A1740 !important;
}

div.dt-button-collection a.dt-button span,
div.dt-button-collection button.dt-button span,
div.dt-button-collection .dt-button span,
div.dt-button-collection .btn span {
    color: inherit !important;
    font-size: inherit !important;
}

/* Backdrop behind the collection */
div.dt-button-background {
    background: rgba(0,0,0,0.08) !important;
    z-index: 9998 !important;
}


/* ── 37.6 Modal Header — Brand Accent ──
   Add a brand-color top border to modals for visual polish. */
.modal-content {
    border-top: 3px solid var(--z-brand, #5A1740) !important;
}

.modal-header .modal-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.modal-header .modal-title i,
.modal-header .modal-title .fa,
.modal-header .modal-title [class*="fa-"] {
    color: var(--z-brand, #5A1740) !important;
}


/* ── 37.7 Panel Heading — Subtle Brand Accent ──
   For .panel_s that have a .panel-heading, add a
   left-border accent for visual hierarchy. */
.panel_s > .panel-heading {
    border-left: 3px solid var(--z-brand, #5A1740) !important;
}


/* ── 37.8 Form Panel (inside settings / config forms) ──
   When a panel is used as a form container, polish
   the heading label area. */
.panel_s .panel-heading h4 .panel-title-icon,
.panel_s .panel-heading .panel-title i {
    color: var(--z-brand, #5A1740) !important;
    margin-right: 6px !important;
}

/* Settings form submit footer */
.panel_s .panel-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}


/* ── 37.9 Config Pages — 2-Column Layout Polish ──
   Pages like leads/sources, leads/statuses, tickets/services,
   tickets/priorities, etc. use a col-md-5 (form) + col-md-7 (table)
   2-column layout. Style the form heading area. */
.col-md-5 > .panel_s > .panel-heading h4,
.col-md-4 > .panel_s > .panel-heading h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--z-text-heading) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Form side panel body — breathable spacing */
.col-md-5 > .panel_s > .panel-body,
.col-md-4 > .panel_s > .panel-body {
    padding: 20px !important;
}

/* Table side panel — flush */
.col-md-7 > .panel_s > .panel-body.panel-table-full,
.col-md-8 > .panel_s > .panel-body.panel-table-full {
    padding: 0 !important;
}


/* ── 37.10 Alerts Inside Panels — Themed ── */
.panel_s .panel-body > .alert {
    border-radius: var(--z-radius) !important;
    border: none !important;
    font-size: 13px !important;
    margin-bottom: 16px !important;
}

.panel_s .panel-body > .alert-info {
    background: var(--z-info-bg) !important;
    color: var(--z-info-text) !important;
}

.panel_s .panel-body > .alert-warning {
    background: var(--z-warning-bg) !important;
    color: var(--z-warning-text) !important;
}

.panel_s .panel-body > .alert-success {
    background: var(--z-success-bg) !important;
    color: var(--z-success-text) !important;
}

.panel_s .panel-body > .alert-danger {
    background: var(--z-danger-bg) !important;
    color: var(--z-danger-text) !important;
}


/* ── 37.11 Knowledge Base — Article Groups ──
   The knowledge base page uses .panel_s with nested groups.
   Polish the group headers. */
.knowledge-group-heading,
.kb-group .panel-heading,
.knowledge-base-body .panel_s .panel-heading {
    background: var(--z-brand-light, #faf5f7) !important;
    border-bottom: 1px solid var(--z-brand-border, #e0d0d8) !important;
}


/* ── 37.12 Activity / Pipe Log Pages ──
   Style the log date headers and log entry rows. */
.activity-log-date,
.pipe-log-date {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--z-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    padding: 10px 16px !important;
    background: #f8f9fc !important;
    border-bottom: 1px solid var(--z-border-light) !important;
}

/* Activity Log table — date & staff columns fixed, description takes remaining space */
.table-activity-log th:nth-child(2),
.table-activity-log td:nth-child(2) {
    width: 180px !important;
    white-space: nowrap !important;
}
.table-activity-log th:nth-child(3),
.table-activity-log td:nth-child(3) {
    width: 130px !important;
    white-space: nowrap !important;
}


/* ── 37.13 Breadcrumb / Page Subtitle ──
   Many admin pages show a muted subtitle or breadcrumb
   below the title. */
#wrapper > .content .tw-text-neutral-500,
#wrapper > .content .tw-text-sm.tw-text-neutral-500 {
    color: var(--z-text-muted) !important;
    font-size: 13px !important;
}


/* ── 37.14 Inline Filters / Search Bars ──
   Some pages have inline .form-control filters above the table
   (date range pickers, status dropdowns, etc.). */
._buttons .form-control,
._buttons select.form-control,
._buttons input.form-control {
    height: 38px !important;
    border-radius: 8px !important;
    border: 1px solid var(--z-border) !important;
    font-size: 13px !important;
    background: #fff !important;
    transition: var(--z-transition) !important;
}

._buttons .form-control:focus {
    border-color: var(--z-brand, #5A1740) !important;
    box-shadow: 0 0 0 3px var(--z-brand-shadow-light, rgba(90,23,64,0.1)) !important;
}


/* ── 37.15 Progress Bars — Brand Color ── */
.progress {
    background: var(--z-border-light) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    height: 6px !important;
    box-shadow: none !important;
}

.progress-bar {
    background: var(--z-brand, #5A1740) !important;
    border-radius: 20px !important;
    transition: width 0.4s ease !important;
}

.progress-bar-success { background: var(--z-success) !important; }
.progress-bar-info    { background: var(--z-info) !important; }
.progress-bar-warning { background: var(--z-warning) !important; }
.progress-bar-danger  { background: var(--z-danger) !important; }


/* ── 37.16 Well Component — Used on Some Config Pages ── */
.well {
    background: #f8f9fc !important;
    border: 1px solid var(--z-border-light) !important;
    border-radius: var(--z-radius) !important;
    box-shadow: none !important;
    padding: 16px !important;
}


/* ── 37.17 List Group — Used in Knowledge Base & Settings ── */
.list-group-item {
    border: none !important;
    border-bottom: 1px solid var(--z-border-light) !important;
    padding: 12px 18px !important;
    font-size: 13px !important;
    color: var(--z-text) !important;
    transition: background 0.15s ease !important;
}

.list-group-item:first-child {
    border-top-left-radius: var(--z-radius) !important;
    border-top-right-radius: var(--z-radius) !important;
}

.list-group-item:last-child {
    border-bottom: none !important;
    border-bottom-left-radius: var(--z-radius) !important;
    border-bottom-right-radius: var(--z-radius) !important;
}

.list-group-item:hover {
    background: var(--z-brand-light, #faf5f7) !important;
}

.list-group-item.active,
.list-group-item.active:hover {
    background: var(--z-brand, #5A1740) !important;
    border-color: var(--z-brand, #5A1740) !important;
    color: #fff !important;
}


/* ── 37.18 Thumbnail / Media Object — Staff Cards ── */
.media .media-left img,
.staff-profile-image,
img.staff-profile-image-small {
    border-radius: 50% !important;
    border: 2px solid var(--z-border-light) !important;
    object-fit: cover !important;
}


/* ── 37.19 Tooltip / Popover — Brand Accent ── */
.tooltip-inner {
    background: var(--z-brand, #5A1740) !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
    max-width: 260px !important;
}

.tooltip.top .tooltip-arrow { border-top-color: var(--z-brand, #5A1740) !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--z-brand, #5A1740) !important; }
.tooltip.left .tooltip-arrow { border-left-color: var(--z-brand, #5A1740) !important; }
.tooltip.right .tooltip-arrow { border-right-color: var(--z-brand, #5A1740) !important; }


/* ── 37.20 Breadcrumb Styling ── */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    font-size: 13px !important;
}

.breadcrumb > li + li::before {
    color: var(--z-text-muted) !important;
}

.breadcrumb > .active {
    color: var(--z-text-muted) !important;
}

.breadcrumb > li > a {
    color: var(--z-brand, #5A1740) !important;
}

.breadcrumb > li > a:hover {
    color: var(--z-brand-hover, #4a1236) !important;
    text-decoration: underline !important;
}


/* ── 37.21 Checkbox / Radio — Brand Color ──
   The custom checkboxes used throughout admin forms. */
.chk input[type="checkbox"]:checked + label::before,
input[type="checkbox"]:checked + span::before,
.checkbox input[type="checkbox"]:checked + label::after {
    border-color: var(--z-brand, #5A1740) !important;
}


/* ── 37.22 Admin Profile / Staff Image Headers ──
   Used on staff detail pages and admin_users. */
.staff-profile-image-wrapper {
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 3px solid var(--z-border-light) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}


/* ── 37.23 Table Bordered Override — Lighter Borders ── */
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--z-border-light) !important;
}


/* ── 37.24 Empty State for Non-DataTable Areas ──
   Some pages have custom "no data" messages. */
.no-data-found,
.no-results,
.text-center.mtop20 {
    padding: 40px 20px !important;
    text-align: center !important;
    color: var(--z-text-muted) !important;
    font-size: 14px !important;
}

.no-data-found i,
.no-results i {
    font-size: 36px !important;
    display: block !important;
    margin-bottom: 10px !important;
    opacity: 0.4 !important;
}


/* ── 37.25 Responsive: Settings Page ── */
@media (max-width: 991px) {
    .settings-tab.nav-stacked {
        margin-bottom: 16px !important;
        border-radius: var(--z-radius) !important;
    }

    .settings-tab.nav-stacked > li > a {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 768px) {
    ._buttons .pull-left h4 {
        font-size: 16px !important;
    }

    .dt-buttons {
        flex-wrap: wrap !important;
    }

    .dt-buttons .btn,
    .dt-buttons .dt-button {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
}

/* ============================================
   END SECTION 37 – GLOBAL ADMIN PAGE OVERRIDES
   ============================================ */


/* ============================================
   38. CRON MANAGEMENT PAGE
       Custom styles for cron task list, history,
       status badges, and configuration display.
   ============================================ */

/* Cron URL / command box */
.cron-field-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: block;
}
.cron-url-box {
    background: #f8f9fb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;
    word-break: break-all;
    font-size: 12px;
}
.cron-url-box code {
    background: none;
    color: #374151;
    font-size: 12px;
    padding: 0;
}

/* Task name code style */
.cron-task-name {
    background: #f3f0ff;
    color: var(--z-brand, #5A1740);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Source badges */
.cron-source-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    line-height: 1.4;
    white-space: nowrap;
}
.cron-badge-core {
    background: #EBF5FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
}
.cron-badge-hook {
    background: #ECFDF5;
    color: #059669;
    border: 1px solid #A7F3D0;
}
.cron-badge-module {
    background: #FFFBEB;
    color: #D97706;
    border: 1px solid #FDE68A;
}
.cron-badge-default {
    background: #F3F4F6;
    color: #6B7280;
    border: 1px solid #E5E7EB;
}

/* Status badges */
.cron-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    line-height: 1.4;
}
.cron-status-success {
    background: #ECFDF5;
    color: #059669;
    border: 1px solid #A7F3D0;
}
.cron-status-error {
    background: #FEF2F2;
    color: #DC2626;
    border: 1px solid #FECACA;
}

/* Duration chip */
.cron-duration {
    font-size: 12px;
    font-weight: 500;
    color: #6B7280;
    background: #F3F4F6;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Run button */
.cron-run-btn {
    border-radius: 6px !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.cron-run-btn:hover {
    background: var(--z-brand, #5A1740) !important;
    color: #fff !important;
    border-color: var(--z-brand, #5A1740) !important;
}
.cron-run-btn i {
    font-size: 9px;
    margin-right: 2px;
}

/* Tables inside cron cards */
.cron-tasks-table,
.cron-history-table {
    margin-bottom: 0;
}
.cron-tasks-table thead th,
.cron-history-table thead th {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    padding: 10px 14px;
    white-space: nowrap;
}
.cron-tasks-table tbody td,
.cron-history-table tbody td {
    padding: 10px 14px;
    vertical-align: middle;
    font-size: 13px;
    border-top: 1px solid #f0f0f0;
}
.cron-tasks-table tbody tr:hover,
.cron-history-table tbody tr:hover {
    background: #faf9ff;
}

/* ============================================
   END SECTION 38 – CRON MANAGEMENT PAGE
   ============================================ */
/* ====================== SECTION 39: WEBSITE CMS EXTRACTED INLINE STYLES ====================== */

/* This section was extracted in bulk from inline <style> blocks of the
 * /admin/website_cms/* views to make the CSS browser-cacheable across
 * page navigations and to remove ~5.2k lines of HTML payload per page.
 *
 * Each subsection below preserves the original view's class-prefix
 * conventions (zcms-*, wcms-*, qr-*, cms-* etc.) so no rename was needed.
 * If you change a CMS view's styles, edit them HERE rather than re-adding
 * an inline <style> block to the view file.
 */


/* ── §39.1 blog_categories.php ──────────────────────────── */
        /* ===== CMS Blog Categories — Zoho CRM Inspired ===== */
        .cms-catg-wrap * { box-sizing: border-box; }

        /* --- Page Header --- */
        .cms-catg-header {
            display: flex; align-items: center; justify-content: space-between;
            background: linear-gradient(135deg, #1B73E8 0%, #1252a6 100%);
            border-radius: 12px; padding: 26px 32px; margin-bottom: 24px;
            color: #fff; box-shadow: 0 4px 20px rgba(27,115,232,.18);
        }
        .cms-catg-header .hdr-left { display: flex; align-items: center; gap: 14px; }
        .cms-catg-header .hdr-icon {
            width: 44px; height: 44px; border-radius: 10px;
            background: rgba(255,255,255,.18); display: flex;
            align-items: center; justify-content: center; font-size: 18px;
        }
        .cms-catg-header h3 { margin: 0; font-size: 19px; font-weight: 700; color: #fff; }
        .cms-catg-header .subtitle { font-size: 12.5px; opacity: .82; margin-top: 3px; }
        .cms-catg-header .btn-back {
            background: rgba(255,255,255,.16); color: #fff !important; border: 1px solid rgba(255,255,255,.28);
            font-weight: 600; font-size: 13px; padding: 8px 20px; border-radius: 8px;
            display: inline-flex; align-items: center; gap: 6px;
            transition: background .2s;
        }
        .cms-catg-header .btn-back:hover { background: rgba(255,255,255,.26); color: #fff !important; text-decoration: none; }

        /* --- Table Card --- */
        .catg-table-card {
            background: #fff; border: 1px solid var(--z-border, #e5e8eb);
            border-radius: 12px; overflow: hidden;
            box-shadow: 0 1px 6px rgba(0,0,0,.04);
        }
        .catg-table-card .card-hdr {
            display: flex; align-items: center; justify-content: space-between;
            padding: 16px 20px; border-bottom: 1px solid var(--z-border, #eef0f2);
        }
        .catg-table-card .card-hdr h4 {
            margin: 0; font-size: 14px; font-weight: 700;
            color: var(--z-heading, #1a1a2e);
            display: flex; align-items: center; gap: 8px;
        }
        .catg-table-card .card-hdr h4 .cnt-badge {
            display: inline-block; background: #e8f0fe; color: #1B73E8 !important;
            font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px;
        }
        .catg-tbl { width: 100%; border-collapse: collapse; }
        .catg-tbl thead th {
            background: var(--z-bg-light, #f8f9fb);
            font-size: 10.5px; font-weight: 700; text-transform: uppercase;
            letter-spacing: .6px; color: var(--z-text-muted, #6b7280);
            padding: 11px 18px; border-bottom: 2px solid var(--z-border, #e5e8eb);
            white-space: nowrap;
        }
        .catg-tbl tbody tr {
            border-bottom: 1px solid var(--z-border, #eef0f2);
            transition: background .15s;
        }
        .catg-tbl tbody tr:last-child { border-bottom: none; }
        .catg-tbl tbody tr:hover { background: #f9fbff; }
        .catg-tbl tbody td {
            padding: 14px 18px; font-size: 13px;
            color: var(--z-text, #333); vertical-align: middle;
        }
        .catg-name {
            display: flex; align-items: center; gap: 10px;
        }
        .catg-name .icon {
            width: 32px; height: 32px; border-radius: 8px;
            background: #e8f0fe; color: #1B73E8 !important;
            display: flex; align-items: center; justify-content: center;
            font-size: 13px; flex-shrink: 0;
        }
        .catg-name .label { font-weight: 600; color: var(--z-heading, #1a1a2e); font-size: 13.5px; }
        .catg-slug {
            font-size: 11.5px; color: var(--z-text-muted, #999);
            font-family: 'SFMono-Regular', Consolas, monospace;
            background: var(--z-bg-light, #f4f6f9); padding: 2px 8px;
            border-radius: 4px;
        }
        .catg-count-badge {
            display: inline-flex; align-items: center; gap: 5px;
            background: var(--z-bg-light, #f0f3f8); color: #1B73E8 !important;
            font-size: 12px; font-weight: 700; padding: 4px 12px;
            border-radius: 20px;
        }
        .catg-count-badge i { font-size: 10px; }

        /* Action buttons */
        .catg-actions { display: flex; gap: 4px; }
        .catg-actions .btn-act {
            width: 30px; height: 30px; border-radius: 6px;
            border: 1px solid var(--z-border, #e5e8eb); background: #fff;
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; color: var(--z-text-muted, #888) !important;
            transition: all .15s; cursor: pointer; text-decoration: none;
        }
        .catg-actions .btn-act:hover { background: #f0f3f8; color: #1B73E8 !important; border-color: #c5d0e0; }
        .catg-actions .btn-act.del:hover { background: #fef2f2; color: #dc2626 !important; border-color: #fca5a5; }

        /* Empty state */
        .catg-empty {
            text-align: center; padding: 50px 20px; color: var(--z-text-muted, #999);
        }
        .catg-empty .empty-icon {
            width: 64px; height: 64px; border-radius: 50%;
            background: var(--z-bg-light, #f0f3f8); display: flex;
            align-items: center; justify-content: center;
            margin: 0 auto 16px; font-size: 24px; color: #c5c9cf;
        }
        .catg-empty p { font-size: 13.5px; margin: 0; }

        /* --- Form Card --- */
        .catg-form-card {
            background: #fff; border: 1px solid var(--z-border, #e5e8eb);
            border-radius: 12px; overflow: hidden;
            box-shadow: 0 1px 6px rgba(0,0,0,.04);
        }
        .catg-form-card .form-hdr {
            display: flex; align-items: center; gap: 10px;
            padding: 16px 22px; border-bottom: 1px solid var(--z-border, #eef0f2);
            background: var(--z-bg-light, #f8f9fb);
        }
        .catg-form-card .form-hdr .form-icon {
            width: 32px; height: 32px; border-radius: 8px;
            background: #e8f0fe; color: #1B73E8;
            display: flex; align-items: center; justify-content: center;
            font-size: 13px;
        }
        .catg-form-card .form-hdr h4 {
            margin: 0; font-size: 14px; font-weight: 700;
            color: var(--z-heading, #1a1a2e);
        }
        .catg-form-card .form-body { padding: 22px; }
        .catg-form-card .form-group label {
            font-size: 12.5px; font-weight: 600;
            color: var(--z-heading, #1a1a2e); margin-bottom: 5px;
        }
        .catg-form-card .form-control {
            border-radius: 8px; font-size: 13px;
            border: 1px solid var(--z-border, #dde0e5);
            transition: border-color .2s, box-shadow .2s;
        }
        .catg-form-card .form-control:focus {
            border-color: #1B73E8;
            box-shadow: 0 0 0 3px rgba(27,115,232,.1);
        }
        .catg-form-card .hint { font-size: 11px; color: var(--z-text-muted, #999); margin-top: 4px; }
        .catg-form-card .form-btns {
            display: flex; gap: 8px; padding-top: 6px;
        }
        .catg-form-card .btn-save {
            background: #1B73E8; color: #fff !important; border: none; font-weight: 600;
            font-size: 13px; padding: 8px 20px; border-radius: 8px;
            display: inline-flex; align-items: center; gap: 6px;
            transition: background .2s;
        }
        .catg-form-card .btn-save:hover { background: #1565c0; }
        .catg-form-card .btn-cancel {
            background: var(--z-bg-light, #f0f3f8); color: var(--z-text-muted, #6b7280) !important;
            border: 1px solid var(--z-border, #e5e8eb); font-weight: 600;
            font-size: 13px; padding: 8px 20px; border-radius: 8px;
            transition: all .2s; text-decoration: none;
            display: inline-flex; align-items: center;
        }
        .catg-form-card .btn-cancel:hover { background: #e8eaee; color: #333 !important; }
        


/* ── §39.2 blog_post_form.php ──────────────────────────── */
        .cms-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(135deg, var(--z-primary, #1B73E8) 0%, #1565c0 100%);
            border-radius: 10px;
            padding: 22px 28px;
            margin-bottom: 20px;
            color: #fff;
        }
        .cms-page-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            color: #fff;
        }
        .cms-page-header .subtitle {
            font-size: 12px;
            opacity: 0.85;
            margin-top: 2px;
        }
        .cms-page-header .btn-back {
            background: rgba(255,255,255,0.2);
            color: #fff !important;
            border: 1px solid rgba(255,255,255,0.3);
            font-weight: 600;
            font-size: 13px;
            padding: 7px 16px;
            border-radius: 8px;
        }
        .cms-page-header .btn-back:hover {
            background: rgba(255,255,255,0.35);
        }
        .post-editor-panel {
            background: #fff;
            border: 1px solid var(--z-border, #e5e8eb);
            border-radius: 10px;
            padding: 24px;
            margin-bottom: 18px;
        }
        .post-editor-panel .panel-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--z-heading, #1a1a2e);
            margin: 0 0 14px 0;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--z-border, #e5e8eb);
        }
        .post-editor-panel .panel-title i {
            margin-right: 6px;
            color: var(--z-primary, #1B73E8);
        }
        .post-title-input {
            font-size: 22px !important;
            font-weight: 700 !important;
            border: 1px solid var(--z-border, #e5e8eb) !important;
            padding: 12px 16px !important;
            border-radius: 8px !important;
            color: var(--z-heading, #1a1a2e) !important;
        }
        .post-title-input:focus {
            border-color: var(--z-primary, #1B73E8) !important;
            box-shadow: 0 0 0 3px rgba(27,115,232,0.1) !important;
        }
        .slug-input-group {
            display: flex;
            align-items: center;
            gap: 0;
        }
        .slug-input-group .slug-prefix {
            background: var(--z-bg-light, #f0f3f8);
            border: 1px solid var(--z-border, #e5e8eb);
            border-right: none;
            padding: 6px 10px;
            font-size: 12px;
            color: var(--z-text-muted, #999);
            border-radius: 6px 0 0 6px;
            white-space: nowrap;
        }
        .slug-input-group input {
            border-radius: 0 6px 6px 0 !important;
            font-size: 13px;
        }
        .char-counter {
            font-size: 11px;
            color: var(--z-text-muted, #999);
            text-align: right;
            margin-top: 4px;
        }
        .char-counter.warning { color: #e67e22; }
        .char-counter.danger { color: #e74c3c; }
        .char-counter.good { color: #27ae60; }
        .tag-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }
        .tag-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: var(--z-bg-light, #f0f3f8);
            border: 1px solid var(--z-border, #e5e8eb);
            padding: 3px 10px;
            border-radius: 14px;
            font-size: 12px;
            color: var(--z-text, #333) !important;
        }
        .tag-pill .remove-tag {
            cursor: pointer;
            color: var(--z-text-muted, #999) !important;
            font-size: 14px;
            line-height: 1;
            margin-left: 2px;
        }
        .tag-pill .remove-tag:hover {
            color: #e74c3c !important;
        }
        .featured-img-preview {
            width: 100%;
            max-height: 200px;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid var(--z-border, #e5e8eb);
            margin-bottom: 10px;
        }
        .featured-img-placeholder {
            width: 100%;
            height: 120px;
            border: 2px dashed var(--z-border, #e5e8eb);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: var(--z-text-muted, #999) !important;
            font-size: 13px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: border-color .2s;
        }
        .featured-img-placeholder:hover {
            border-color: var(--z-primary, #1B73E8);
        }
        .featured-img-placeholder i {
            font-size: 28px;
            margin-bottom: 6px;
        }
        .seo-panel-toggle {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .seo-panel-toggle .chevron {
            transition: transform .2s;
        }
        .seo-panel-toggle.collapsed .chevron {
            transform: rotate(-90deg);
        }
        .seo-score-bar {
            height: 8px;
            border-radius: 4px;
            background: #eee;
            overflow: hidden;
            margin-bottom: 8px;
        }
        .seo-score-bar .fill {
            height: 100%;
            border-radius: 4px;
            transition: width .4s, background .4s;
        }
        .seo-check-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .seo-check-list li {
            font-size: 12px;
            padding: 4px 0;
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--z-text, #333);
        }
        .seo-check-list li .check-icon {
            width: 16px;
            text-align: center;
            font-size: 12px;
        }
        .seo-check-list li .check-icon.pass { color: #27ae60 !important; }
        .seo-check-list li .check-icon.fail { color: #e74c3c !important; }
        .seo-score-number {
            font-size: 28px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 4px;
        }
        .seo-score-label {
            text-align: center;
            font-size: 12px;
            color: var(--z-text-muted, #999);
            margin-bottom: 12px;
        }
        .btn-publish {
            background: var(--z-primary, #1B73E8);
            color: #fff !important;
            border: none;
            font-weight: 600;
        }
        .btn-publish:hover { background: #1565c0; color: #fff !important; }
        .btn-draft {
            background: var(--z-bg-light, #f0f3f8);
            color: var(--z-text, #333) !important;
            border: 1px solid var(--z-border, #e5e8eb);
            font-weight: 600;
        }
        .btn-draft:hover { background: #e5e8eb; }
        


/* ── §39.3 blog_posts.php ──────────────────────────── */
        /* ===== CMS Blog Posts — Zoho CRM Inspired ===== */
        .cms-blog-wrap * { box-sizing: border-box; }

        /* --- Page Header --- */
        .cms-blog-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(135deg, #1B73E8 0%, #1252a6 100%);
            border-radius: 12px;
            padding: 26px 32px;
            margin-bottom: 24px;
            color: #fff;
            box-shadow: 0 4px 20px rgba(27, 115, 232, .18);
        }
        .cms-blog-header .hdr-left { display: flex; align-items: center; gap: 14px; }
        .cms-blog-header .hdr-icon {
            width: 44px; height: 44px; border-radius: 10px;
            background: rgba(255,255,255,.18); display: flex;
            align-items: center; justify-content: center; font-size: 18px;
        }
        .cms-blog-header h3 { margin: 0; font-size: 19px; font-weight: 700; color: #fff; }
        .cms-blog-header .subtitle { font-size: 12.5px; opacity: .82; margin-top: 3px; }
        .cms-blog-header .btn-add-post {
            background: #fff; color: #1B73E8 !important; border: none; font-weight: 600;
            font-size: 13px; padding: 9px 22px; border-radius: 8px;
            display: inline-flex; align-items: center; gap: 6px;
            transition: box-shadow .2s, transform .15s;
        }
        .cms-blog-header .btn-add-post:hover {
            box-shadow: 0 6px 18px rgba(0,0,0,.15); transform: translateY(-1px);
        }

        /* --- Stats Row --- */
        .blog-stats-row {
            display: flex; gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
        }
        .blog-stat-chip {
            display: flex; align-items: center; gap: 10px;
            background: #fff; border: 1px solid var(--z-border, #e5e8eb);
            border-radius: 10px; padding: 12px 20px; min-width: 150px;
            transition: box-shadow .2s;
        }
        .blog-stat-chip:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
        .blog-stat-chip .chip-icon {
            width: 36px; height: 36px; border-radius: 8px; display: flex;
            align-items: center; justify-content: center; font-size: 14px;
        }
        .blog-stat-chip .chip-icon.all   { background: #e8f0fe; color: #1B73E8; }
        .blog-stat-chip .chip-icon.pub   { background: #e6f9ed; color: #1b8a4a; }
        .blog-stat-chip .chip-icon.dft   { background: #f0f1f3; color: #6b7280; }
        .blog-stat-chip .chip-icon.sch   { background: #fff3e0; color: #e67e22; }
        .blog-stat-chip .chip-num { font-size: 20px; font-weight: 700; color: var(--z-heading, #1a1a2e); line-height: 1; }
        .blog-stat-chip .chip-label { font-size: 11px; color: var(--z-text-muted, #6b7280); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }

        /* --- Filter Tabs --- */
        .cms-blog-filters {
            display: flex; align-items: center; gap: 4px;
            background: var(--z-bg-light, #f4f6f9); border-radius: 10px;
            padding: 4px; margin-bottom: 20px; width: fit-content;
        }
        .cms-blog-filters a {
            font-size: 12.5px; font-weight: 600; padding: 7px 18px;
            border-radius: 8px; color: var(--z-text-muted, #6b7280) !important;
            text-decoration: none; transition: all .2s;
        }
        .cms-blog-filters a:hover { color: #1B73E8 !important; background: #fff; }
        .cms-blog-filters a.active {
            background: #fff; color: #1B73E8 !important;
            box-shadow: 0 1px 4px rgba(0,0,0,.08);
        }
        .cms-blog-filters a .cnt {
            display: inline-block; background: rgba(0,0,0,.06);
            font-size: 10px; padding: 1px 7px; border-radius: 10px;
            margin-left: 4px; font-weight: 700;
        }
        .cms-blog-filters a.active .cnt { background: #e8f0fe; color: #1B73E8 !important; }

        /* --- Table Card --- */
        .blog-table-card {
            background: #fff; border: 1px solid var(--z-border, #e5e8eb);
            border-radius: 12px; overflow: hidden;
            box-shadow: 0 1px 6px rgba(0,0,0,.04);
        }
        .blog-tbl { width: 100%; border-collapse: collapse; }
        .blog-tbl thead th {
            background: var(--z-bg-light, #f8f9fb);
            font-size: 10.5px; font-weight: 700; text-transform: uppercase;
            letter-spacing: .6px; color: var(--z-text-muted, #6b7280);
            padding: 11px 16px; border-bottom: 2px solid var(--z-border, #e5e8eb);
            white-space: nowrap;
        }
        .blog-tbl tbody tr {
            border-bottom: 1px solid var(--z-border, #eef0f2);
            transition: background .15s;
        }
        .blog-tbl tbody tr:last-child { border-bottom: none; }
        .blog-tbl tbody tr:hover { background: #f9fbff; }
        .blog-tbl tbody td {
            padding: 14px 16px; font-size: 13px;
            color: var(--z-text, #333); vertical-align: middle;
        }

        /* Thumbnail */
        .bp-thumb {
            width: 56px; height: 40px; border-radius: 8px; object-fit: cover;
            border: 1px solid var(--z-border, #e5e8eb);
        }
        .bp-thumb-ph {
            width: 56px; height: 40px; border-radius: 8px;
            background: var(--z-bg-light, #f0f3f8);
            display: flex; align-items: center; justify-content: center;
            color: #c5c9cf; font-size: 16px;
        }

        /* Title cell */
        .bp-title-cell .bp-title {
            font-weight: 600; color: var(--z-heading, #1a1a2e) !important; font-size: 13.5px;
            margin-bottom: 2px; display: block;
        }
        .bp-title-cell .bp-title:hover { color: #1B73E8 !important; }
        .bp-title-cell .bp-slug { font-size: 11px; color: var(--z-text-muted, #999); }

        /* Category badge */
        .bp-cat-badge {
            display: inline-block; padding: 3px 10px; border-radius: 6px;
            font-size: 11px; font-weight: 600;
            background: #f0f3f8; color: #475569 !important;
        }

        /* Status */
        .bp-status {
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 11.5px; font-weight: 600; padding: 4px 12px;
            border-radius: 20px; text-transform: capitalize;
        }
        .bp-status .dot { width: 6px; height: 6px; border-radius: 50%; }
        .bp-status.published { background: #e6f9ed; color: #1b8a4a !important; }
        .bp-status.published .dot { background: #1b8a4a; }
        .bp-status.draft { background: #f0f1f3; color: #6b7280 !important; }
        .bp-status.draft .dot { background: #9ca3af; }
        .bp-status.scheduled { background: #fff3e0; color: #e67e22 !important; }
        .bp-status.scheduled .dot { background: #e67e22; }

        /* Views */
        .bp-views { display: flex; align-items: center; gap: 4px; color: var(--z-text-muted, #888); font-size: 12.5px; }
        .bp-views i { font-size: 11px; }

        /* Date */
        .bp-date { font-size: 12.5px; color: var(--z-text-muted, #888); }

        /* Action Buttons */
        .bp-actions { display: flex; gap: 4px; }
        .bp-actions .btn-act {
            width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--z-border, #e5e8eb);
            background: #fff; display: flex; align-items: center; justify-content: center;
            font-size: 12px; color: var(--z-text-muted, #888) !important; transition: all .15s; cursor: pointer;
            text-decoration: none;
        }
        .bp-actions .btn-act:hover { background: #f0f3f8; color: #1B73E8 !important; border-color: #c5d0e0; }
        .bp-actions .btn-act.del:hover { background: #fef2f2; color: #dc2626 !important; border-color: #fca5a5; }

        /* Empty State */
        .blog-empty {
            text-align: center; padding: 70px 20px; color: var(--z-text-muted, #999);
        }
        .blog-empty .empty-icon {
            width: 80px; height: 80px; border-radius: 50%;
            background: var(--z-bg-light, #f0f3f8);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 20px; font-size: 32px; color: #c5c9cf;
        }
        .blog-empty h4 { font-size: 16px; font-weight: 600; color: var(--z-heading, #1a1a2e); margin-bottom: 6px; }
        .blog-empty p { font-size: 13.5px; margin-bottom: 20px; }
        .blog-empty .btn-create {
            background: #1B73E8; color: #fff !important; border: none; font-weight: 600;
            font-size: 13px; padding: 9px 22px; border-radius: 8px;
            display: inline-flex; align-items: center; gap: 6px;
        }
        .blog-empty .btn-create:hover { background: #1565c0; }
        


/* ── §39.4 dashboard.php ──────────────────────────── */
/* ================================================
   Website CMS Dashboard — Zoho CRM Inspired
   ================================================ */

/* --- Page Header --- */
.wcms-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.wcms-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.wcms-header-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--z-radius, 8px);
    background: var(--z-primary-light, #e8f2fd);
    color: var(--z-primary, #2c83ec);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.wcms-page-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--z-text-heading, #1a2332);
    line-height: 1.3;
}
.wcms-header-sub {
    font-size: 13px;
    color: var(--z-text-muted, #8d9bb5);
    display: block;
    margin-top: 1px;
}
.wcms-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.wcms-header-actions .btn {
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 14px;
    border-color: var(--z-border, #e0e5ec);
    color: var(--z-text, #333e50);
    background: #fff;
    transition: all 0.15s ease;
}
.wcms-header-actions .btn:hover {
    background: var(--z-primary-light, #e8f2fd);
    color: var(--z-primary, #2c83ec);
    border-color: var(--z-primary, #2c83ec);
}
.wcms-header-actions .btn i {
    margin-right: 5px;
}

/* --- KPI Row --- */
.wcms-kpi-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.wcms-kpi-card {
    background: var(--z-card-bg, #fff);
    border: 1px solid var(--z-border, #e0e5ec);
    border-radius: var(--z-radius-lg, 12px);
    padding: 20px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: var(--z-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
}
.wcms-kpi-card:hover {
    box-shadow: var(--z-shadow, 0 2px 8px rgba(0,0,0,0.08));
    border-color: var(--z-primary, #2c83ec);
    transform: translateY(-1px);
}
.wcms-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.wcms-kpi-blue   { background: #eff6ff; color: #2563eb; }
.wcms-kpi-green  { background: #ecfdf5; color: #059669; }
.wcms-kpi-orange { background: #fffbeb; color: #d97706; }
.wcms-kpi-purple { background: #f5f3ff; color: #7c3aed; }
.wcms-kpi-teal   { background: #ecfeff; color: #0891b2; }
.wcms-kpi-red    { background: #fef2f2; color: #dc2626; }

.wcms-kpi-body {
    flex: 1;
    min-width: 0;
}
.wcms-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--z-text-heading, #1a2332);
    line-height: 1.2;
}
.wcms-kpi-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--z-text-muted, #8d9bb5);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 2px;
}
.wcms-kpi-action {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--z-text-muted, #8d9bb5);
    font-size: 12px;
    text-decoration: none;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.wcms-kpi-card:hover .wcms-kpi-action {
    background: var(--z-primary-light, #e8f2fd);
    color: var(--z-primary, #2c83ec);
}

/* --- Quick Actions --- */
.wcms-quick-row {
    margin-bottom: 24px;
}
.wcms-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--z-text-heading, #1a2332);
    margin: 0 0 16px 0;
}
.wcms-section-title i {
    color: var(--z-primary, #2c83ec);
    margin-right: 8px;
    font-size: 14px;
}
.wcms-quick-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.wcms-quick-card {
    background: var(--z-card-bg, #fff);
    border: 1px solid var(--z-border, #e0e5ec);
    border-radius: var(--z-radius-lg, 12px);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: var(--z-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
}
.wcms-quick-card:hover {
    border-color: var(--z-primary, #2c83ec);
    box-shadow: var(--z-shadow, 0 2px 8px rgba(0,0,0,0.08));
    transform: translateY(-2px);
    text-decoration: none;
}
.wcms-quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.wcms-quick-card span {
    font-size: 12px;
    font-weight: 600;
    color: var(--z-text, #333e50);
    text-align: center;
}
.wcms-quick-card:hover span {
    color: var(--z-primary, #2c83ec);
}

/* --- Panel / Table Card --- */
.wcms-panel {
    background: var(--z-card-bg, #fff);
    border: 1px solid var(--z-border, #e0e5ec);
    border-radius: var(--z-radius-lg, 12px);
    box-shadow: var(--z-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
    overflow: hidden;
    margin-bottom: 24px;
}
.wcms-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 0 22px;
}
.wcms-panel-header .wcms-section-title {
    margin-bottom: 0;
}
.wcms-view-all {
    font-size: 12px;
    font-weight: 600;
    color: var(--z-primary, #2c83ec);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.15s;
}
.wcms-view-all:hover {
    opacity: 0.8;
    text-decoration: none;
    color: var(--z-primary, #2c83ec);
}
.wcms-panel-body {
    padding: 18px 22px 22px 22px;
}

/* --- Table --- */
.wcms-table-wrap {
    overflow-x: auto;
}
.wcms-table {
    width: 100%;
    border-collapse: collapse;
}
.wcms-table thead th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
    font-weight: 600;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid var(--z-border, #e0e5ec);
    white-space: nowrap;
}
.wcms-table tbody td {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--z-text, #333e50);
    border-bottom: 1px solid var(--z-border-light, #eef1f5);
    vertical-align: middle;
}
.wcms-table tbody tr:last-child td {
    border-bottom: none;
}
.wcms-table tbody tr:hover {
    background: #f8fafc;
}

/* Cell helpers */
.wcms-cell-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--z-text-heading, #1a2332);
}
.wcms-avatar-sm {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--z-primary-light, #e8f2fd);
    color: var(--z-primary, #2c83ec);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.wcms-cell-muted {
    color: var(--z-text-muted, #8d9bb5);
    font-size: 12px;
}

/* Status badges */
.wcms-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.wcms-badge-new     { background: #dbeafe; color: #2563eb; }
.wcms-badge-pending { background: #fef3c7; color: #d97706; }
.wcms-badge-replied { background: #d1fae5; color: #059669; }
.wcms-badge-closed  { background: #f1f5f9; color: #64748b; }

/* Action icon button */
.wcms-btn-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--z-text-muted, #8d9bb5);
    text-decoration: none;
    transition: all 0.15s ease;
    font-size: 13px;
}
.wcms-btn-icon:hover {
    background: var(--z-primary-light, #e8f2fd);
    color: var(--z-primary, #2c83ec);
    text-decoration: none;
}

/* --- Empty State --- */
.wcms-empty-state {
    text-align: center;
    padding: 48px 20px;
}
.wcms-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f1f5f9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #cbd5e1;
    margin-bottom: 14px;
}
.wcms-empty-state p {
    font-size: 15px;
    font-weight: 600;
    color: var(--z-text-heading, #1a2332);
    margin: 0 0 4px 0;
}
.wcms-empty-state span {
    font-size: 13px;
    color: var(--z-text-muted, #8d9bb5);
}

/* --- Responsive --- */
@media (max-width: 1199px) {
    .wcms-kpi-row { grid-template-columns: repeat(3, 1fr); }
    .wcms-quick-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .wcms-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .wcms-quick-grid { grid-template-columns: repeat(2, 1fr); }
    .wcms-page-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .wcms-kpi-row { grid-template-columns: 1fr; }
    .wcms-quick-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ── §39.5 faqs.php ──────────────────────────── */
        /* ============================================================
           FAQ Management — Zoho CRM Inspired Design
           ============================================================ */

        /* Header */
        .faq-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }
        .faq-page-header .faq-title-block h3 {
            margin: 0;
            font-size: 21px;
            font-weight: 700;
            color: var(--z-heading, #1e293b);
        }
        .faq-page-header .faq-title-block h3 i {
            color: var(--z-primary, #2c83ec);
            margin-right: 8px;
            font-size: 19px;
        }
        .faq-page-header .faq-title-block .faq-subtitle {
            font-size: 13px;
            color: var(--z-muted, #64748b);
            margin-top: 3px;
        }
        .faq-page-header .btn-add-faq {
            background: var(--z-primary, #2c83ec);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 13px;
            padding: 9px 22px;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            transition: background 0.2s, box-shadow 0.2s;
        }
        .faq-page-header .btn-add-faq:hover {
            background: #1b6fd1;
            box-shadow: 0 4px 14px rgba(44,131,236,0.25);
            color: #fff;
        }

        /* KPI Row */
        .faq-kpi-row {
            display: flex;
            gap: 16px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }
        .faq-kpi-card {
            flex: 1;
            min-width: 160px;
            background: #fff;
            border: 1px solid var(--z-border, #e5e7eb);
            border-radius: 12px;
            padding: 18px 20px;
            display: flex;
            align-items: center;
            gap: 14px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            transition: box-shadow 0.2s;
        }
        .faq-kpi-card:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        }
        .faq-kpi-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }
        .faq-kpi-icon.kpi-blue   { background: #dbeafe; color: #2563eb; }
        .faq-kpi-icon.kpi-green  { background: #d1fae5; color: #059669; }
        .faq-kpi-icon.kpi-orange { background: #ffedd5; color: #ea580c; }
        .faq-kpi-icon.kpi-purple { background: #ede9fe; color: #7c3aed; }
        .faq-kpi-info .kpi-value {
            font-size: 22px;
            font-weight: 700;
            color: var(--z-heading, #1e293b);
            line-height: 1.1;
        }
        .faq-kpi-info .kpi-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--z-muted, #64748b);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 2px;
        }

        /* Category Filter Tabs */
        .faq-filter-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .faq-filter-bar .filter-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--z-muted, #64748b);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-right: 4px;
        }
        .faq-filter-bar .filter-pill {
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            border: 1px solid var(--z-border, #e5e7eb);
            background: #fff;
            color: var(--z-text, #334155);
            text-decoration: none;
            transition: all 0.2s;
            display: inline-block;
        }
        .faq-filter-bar .filter-pill:hover {
            border-color: var(--z-primary, #2c83ec);
            color: var(--z-primary, #2c83ec);
            text-decoration: none;
        }
        .faq-filter-bar .filter-pill.active {
            background: var(--z-primary, #2c83ec);
            color: #fff;
            border-color: var(--z-primary, #2c83ec);
        }

        /* FAQ Card Container */
        .faq-list-panel {
            background: #fff;
            border: 1px solid var(--z-border, #e5e7eb);
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            overflow: hidden;
        }
        .faq-list-panel .panel-top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 20px;
            border-bottom: 1px solid var(--z-border, #e5e7eb);
            background: #fafbfc;
        }
        .faq-list-panel .panel-top-bar .result-count {
            font-size: 13px;
            color: var(--z-muted, #64748b);
            font-weight: 500;
        }
        .faq-list-panel .panel-top-bar .result-count strong {
            color: var(--z-heading, #1e293b);
        }
        .faq-list-panel .panel-top-bar .search-box {
            position: relative;
        }
        .faq-list-panel .panel-top-bar .search-box input {
            border: 1px solid var(--z-border, #e5e7eb);
            border-radius: 8px;
            padding: 7px 12px 7px 34px;
            font-size: 13px;
            width: 240px;
            background: #fff;
            transition: border-color 0.2s;
        }
        .faq-list-panel .panel-top-bar .search-box input:focus {
            border-color: var(--z-primary, #2c83ec);
            outline: none;
            box-shadow: 0 0 0 3px rgba(44,131,236,0.1);
        }
        .faq-list-panel .panel-top-bar .search-box i {
            position: absolute;
            left: 11px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            font-size: 13px;
        }

        /* Accordion FAQ Items */
        .faq-accordion {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .faq-accordion .faq-item {
            border-bottom: 1px solid var(--z-border, #e5e7eb);
            transition: background 0.2s;
        }
        .faq-accordion .faq-item:last-child {
            border-bottom: none;
        }
        .faq-accordion .faq-item:hover {
            background: #f8fafc;
        }
        .faq-item-header {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            cursor: pointer;
            gap: 14px;
            user-select: none;
        }
        .faq-item-header .faq-expand-icon {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            background: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.25s;
            color: var(--z-muted, #64748b);
            font-size: 12px;
        }
        .faq-item.active .faq-item-header .faq-expand-icon {
            background: var(--z-primary, #2c83ec);
            color: #fff;
            transform: rotate(90deg);
        }
        .faq-item-header .faq-item-content {
            flex: 1;
            min-width: 0;
        }
        .faq-item-header .faq-q-text {
            font-size: 14px;
            font-weight: 600;
            color: var(--z-heading, #1e293b);
            margin: 0;
            line-height: 1.4;
        }
        .faq-item-header .faq-q-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 5px;
        }
        .faq-badge-cat {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 600;
            background: #eff6ff;
            color: #2563eb;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .faq-badge-active {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 600;
            background: #d1fae5;
            color: #059669;
        }
        .faq-badge-draft {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 600;
            background: #fee2e2;
            color: #dc2626;
        }
        .faq-sort-num {
            font-size: 10px;
            font-weight: 600;
            color: #94a3b8;
        }
        .faq-item-header .faq-actions {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .faq-item:hover .faq-item-header .faq-actions {
            opacity: 1;
        }
        .faq-actions .btn-faq-action {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: 1px solid var(--z-border, #e5e7eb);
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            color: var(--z-muted, #64748b);
            transition: all 0.2s;
            cursor: pointer;
            padding: 0;
        }
        .faq-actions .btn-faq-action:hover {
            border-color: var(--z-primary, #2c83ec);
            color: var(--z-primary, #2c83ec);
            background: #eff6ff;
        }
        .faq-actions .btn-faq-action.btn-faq-delete:hover {
            border-color: #dc2626;
            color: #dc2626;
            background: #fef2f2;
        }

        /* Expanded Answer */
        .faq-answer-panel {
            display: none;
            padding: 0 20px 18px 62px;
        }
        .faq-item.active .faq-answer-panel {
            display: block;
        }
        .faq-answer-panel .faq-answer-text {
            font-size: 13px;
            line-height: 1.7;
            color: var(--z-text, #475569);
            background: #f8fafc;
            border-radius: 8px;
            padding: 14px 18px;
            margin: 0;
        }

        /* Empty State */
        .faq-empty-state {
            text-align: center;
            padding: 60px 20px;
        }
        .faq-empty-state .empty-icon {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            background: #eff6ff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: var(--z-primary, #2c83ec);
            margin-bottom: 16px;
        }
        .faq-empty-state h4 {
            font-size: 16px;
            font-weight: 600;
            color: var(--z-heading, #1e293b);
            margin: 0 0 6px;
        }
        .faq-empty-state p {
            font-size: 13px;
            color: var(--z-muted, #64748b);
            margin: 0;
        }

        /* Modal */
        .faq-modal .modal-content {
            border: none;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        }
        .faq-modal .modal-header {
            background: linear-gradient(135deg, #2c83ec 0%, #1b6fd1 100%);
            color: #fff;
            padding: 18px 24px;
            border: none;
        }
        .faq-modal .modal-header .modal-title {
            font-weight: 700;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .faq-modal .modal-header .close {
            color: #fff;
            opacity: 0.8;
            text-shadow: none;
            font-size: 22px;
        }
        .faq-modal .modal-header .close:hover {
            opacity: 1;
        }
        .faq-modal .modal-body {
            padding: 24px;
        }
        .faq-modal .modal-footer {
            padding: 14px 24px;
            border-top: 1px solid var(--z-border, #e5e7eb);
            background: #fafbfc;
        }
        .faq-form-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--z-heading, #1e293b);
            margin-bottom: 6px;
            display: block;
        }
        .faq-form-label .text-danger {
            margin-left: 2px;
        }
        .faq-modal .form-control {
            border-radius: 8px;
            border: 1px solid var(--z-border, #e5e7eb);
            font-size: 13px;
            padding: 9px 12px;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .faq-modal .form-control:focus {
            border-color: var(--z-primary, #2c83ec);
            box-shadow: 0 0 0 3px rgba(44,131,236,0.1);
        }
        .faq-modal textarea.form-control {
            resize: vertical;
        }
        .faq-toggle-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 8px;
        }
        .faq-toggle-wrap .faq-toggle-switch {
            position: relative;
            width: 42px;
            height: 22px;
        }
        .faq-toggle-wrap .faq-toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .faq-toggle-wrap .faq-toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #cbd5e1;
            border-radius: 22px;
            transition: background 0.25s;
        }
        .faq-toggle-wrap .faq-toggle-slider::before {
            content: '';
            position: absolute;
            height: 16px;
            width: 16px;
            left: 3px;
            bottom: 3px;
            background: #fff;
            border-radius: 50%;
            transition: transform 0.25s;
            box-shadow: 0 1px 3px rgba(0,0,0,0.15);
        }
        .faq-toggle-wrap .faq-toggle-switch input:checked + .faq-toggle-slider {
            background: #059669;
        }
        .faq-toggle-wrap .faq-toggle-switch input:checked + .faq-toggle-slider::before {
            transform: translateX(20px);
        }
        .faq-toggle-wrap .toggle-text {
            font-size: 13px;
            font-weight: 600;
            color: var(--z-heading, #1e293b);
        }
        .faq-modal .btn-save-faq {
            background: var(--z-primary, #2c83ec);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 13px;
            padding: 9px 22px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: background 0.2s;
        }
        .faq-modal .btn-save-faq:hover {
            background: #1b6fd1;
        }
        .faq-modal .btn-cancel {
            border-radius: 8px;
            font-weight: 600;
            font-size: 13px;
            padding: 9px 18px;
            border: 1px solid var(--z-border, #e5e7eb);
            background: #fff;
            color: var(--z-text, #334155);
        }
        .faq-modal .btn-cancel:hover {
            background: #f1f5f9;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .faq-kpi-row {
                flex-wrap: wrap;
            }
            .faq-kpi-card {
                min-width: calc(50% - 12px);
                flex: unset;
            }
        }
        @media (max-width: 768px) {
            .faq-page-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
            .faq-filter-bar {
                gap: 6px;
            }
            .faq-list-panel .panel-top-bar {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            .faq-list-panel .panel-top-bar .search-box input {
                width: 100%;
            }
            .faq-kpi-card {
                min-width: 100%;
            }
        }
        @media (max-width: 480px) {
            .faq-item-header {
                padding: 12px 14px;
                gap: 10px;
            }
            .faq-answer-panel {
                padding: 0 14px 14px 42px;
            }
        }
        


/* ── §39.6 landing_page_form.php ──────────────────────────── */
        .cms-form-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 20px;
        }
        .cms-form-header h3 {
            margin: 0; font-size: 20px; font-weight: 700;
            color: var(--z-heading, #1e293b);
        }
        .cms-form-header h3 i { color: var(--z-primary, #2c83ec); margin-right: 8px; }
        .cms-form-panel {
            border: 1px solid var(--z-border, #e5e7eb); border-radius: 10px;
            background: #fff; margin-bottom: 20px; overflow: hidden;
        }
        .cms-form-panel .panel-title {
            background: #f8fafc; padding: 14px 18px; font-size: 14px; font-weight: 700;
            color: var(--z-heading, #1e293b); border-bottom: 1px solid var(--z-border, #e5e7eb); margin: 0;
        }
        .cms-form-panel .panel-title i { color: var(--z-primary, #2c83ec); margin-right: 8px; }
        .cms-form-panel .panel-inner { padding: 20px; }
        .cms-form-panel .form-group { margin-bottom: 16px; }
        .cms-form-panel label {
            font-size: 12px; font-weight: 600; color: var(--z-muted, #64748b);
            text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px;
        }
        .cms-form-panel .form-control { border-radius: 8px; border: 1px solid var(--z-border, #e5e7eb); font-size: 13px; }
        .cms-form-panel .form-control:focus { border-color: var(--z-primary, #2c83ec); box-shadow: 0 0 0 3px rgba(44,131,236,0.10); }
        


/* ── §39.7 landing_pages.php ──────────────────────────── */
        /* ── CMS Landing Pages — Zoho CRM Inspired ────────────── */
        .zcms-page-header {
            background: linear-gradient(135deg, var(--z-primary, #2c83ec) 0%, #1565c0 100%);
            border-radius: var(--z-radius-lg, 12px);
            padding: 28px 32px;
            margin-bottom: 24px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 4px 20px rgba(44, 131, 236, 0.18);
        }
        .zcms-page-header h3 {
            margin: 0; font-size: 20px; font-weight: 700; color: #fff;
            display: flex; align-items: center; gap: 10px;
        }
        .zcms-page-header .zcms-subtitle {
            font-size: 13px; opacity: 0.85; margin-top: 4px;
        }
        .zcms-page-header .zcms-header-icon {
            width: 42px; height: 42px; border-radius: 10px;
            background: rgba(255,255,255,0.18); display: flex;
            align-items: center; justify-content: center; font-size: 18px;
        }
        .zcms-page-header .btn-zcms-add {
            background: #fff; color: var(--z-primary, #2c83ec);
            border: none; border-radius: var(--z-radius, 8px);
            padding: 10px 22px; font-weight: 700; font-size: 13px;
            display: inline-flex; align-items: center; gap: 8px;
            text-decoration: none; transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        .zcms-page-header .btn-zcms-add:hover {
            background: #f0f7ff; box-shadow: 0 4px 14px rgba(0,0,0,0.12);
            transform: translateY(-1px);
        }
        .zcms-page-header .btn-zcms-back {
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(255,255,255,0.18); color: #fff;
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: var(--z-radius, 8px);
            padding: 9px 20px; font-weight: 600; font-size: 13px;
            text-decoration: none; transition: all 0.2s;
        }
        .zcms-page-header .btn-zcms-back:hover {
            background: rgba(255,255,255,0.28);
        }

        /* ── Badges ──────────────────────────────────────────── */
        .zcms-badge {
            display: inline-flex; align-items: center;
            padding: 4px 12px; border-radius: 20px;
            font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
        }
        .zcms-badge-active { background: #d1fae5; color: #059669; }
        .zcms-badge-inactive { background: #fee2e2; color: #dc2626; }
        .zcms-badge-draft { background: #fef3c7; color: #d97706; }

        /* ── Panel ───────────────────────────────────────────── */
        .zcms-panel {
            background: var(--z-card-bg, #fff);
            border: 1px solid var(--z-border, #e0e5ec);
            border-radius: var(--z-radius-lg, 12px);
            overflow: hidden;
            box-shadow: var(--z-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
        }
        .zcms-panel .panel-body { padding: 0; }

        /* ── Table ────────────────────────────────────────────── */
        .zcms-table {
            width: 100%; border-collapse: collapse; margin: 0;
        }
        .zcms-table thead th {
            background: #f8f9fb;
            font-size: 11px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.6px;
            color: var(--z-text-muted, #8d9bb5);
            padding: 14px 18px;
            border-bottom: 2px solid var(--z-border, #e0e5ec);
            text-align: left; white-space: nowrap;
        }
        .zcms-table tbody td {
            padding: 14px 18px; font-size: 13px;
            color: var(--z-text, #333e50);
            border-bottom: 1px solid var(--z-border-light, #eef1f5);
            vertical-align: middle;
        }
        .zcms-table tbody tr { transition: background 0.15s; }
        .zcms-table tbody tr:hover { background: #f8fafd; }
        .zcms-table tbody tr:last-child td { border-bottom: none; }

        .zcms-lp-title {
            font-size: 14px; font-weight: 600;
            color: var(--z-text-heading, #1a2332);
        }
        .zcms-lp-slug {
            font-size: 12px; color: var(--z-text-muted, #8d9bb5);
            font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
            background: #f0f4f8; padding: 3px 10px;
            border-radius: var(--z-radius-sm, 4px);
            display: inline-block;
        }
        .zcms-lp-url {
            font-size: 12px; color: var(--z-primary, #2c83ec);
            text-decoration: none; max-width: 260px;
            white-space: nowrap; overflow: hidden;
            text-overflow: ellipsis; display: flex;
            align-items: center; gap: 4px;
        }
        .zcms-lp-url:hover { text-decoration: underline; }
        .zcms-lp-url i { font-size: 10px; flex-shrink: 0; }
        .zcms-lp-date {
            font-size: 12px; color: var(--z-text-muted, #8d9bb5);
        }

        /* ── Action buttons ──────────────────────────────────── */
        .zcms-actions {
            display: flex; align-items: center; gap: 6px;
        }
        .zcms-btn-action {
            width: 34px; height: 34px; border-radius: var(--z-radius, 8px);
            border: 1px solid var(--z-border, #e0e5ec);
            background: var(--z-card-bg, #fff);
            display: flex; align-items: center; justify-content: center;
            font-size: 13px; color: var(--z-text-muted, #8d9bb5);
            cursor: pointer; transition: all 0.15s; text-decoration: none;
        }
        .zcms-btn-action:hover {
            border-color: var(--z-primary, #2c83ec); color: var(--z-primary, #2c83ec);
            background: #f0f7ff;
        }
        .zcms-btn-action.danger:hover {
            border-color: #ef4444; color: #ef4444; background: #fef2f2;
        }

        /* ── Empty state ─────────────────────────────────────── */
        .zcms-empty-state {
            text-align: center; padding: 60px 20px;
        }
        .zcms-empty-state .empty-icon {
            width: 80px; height: 80px; border-radius: 50%;
            background: linear-gradient(135deg, #f0f4f8, #e8ecf1);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 20px; font-size: 32px; color: #c5ccd6;
        }
        .zcms-empty-state h5 {
            font-size: 16px; font-weight: 700;
            color: var(--z-text-heading, #1a2332); margin: 0 0 6px;
        }
        .zcms-empty-state p {
            font-size: 13px; color: var(--z-text-muted, #8d9bb5); margin: 0 0 20px;
        }

        /* ── Builder section panels ──────────────────────────── */
        .zcms-builder-section {
            background: var(--z-card-bg, #fff);
            border: 1px solid var(--z-border, #e0e5ec);
            border-radius: var(--z-radius-lg, 12px);
            overflow: hidden; margin-bottom: 20px;
            box-shadow: var(--z-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
        }
        .zcms-builder-header {
            background: #f8f9fb;
            padding: 16px 22px;
            border-bottom: 1px solid var(--z-border, #e0e5ec);
            display: flex; align-items: center; gap: 8px;
        }
        .zcms-builder-header h4 {
            margin: 0; font-size: 15px; font-weight: 700;
            color: var(--z-text-heading, #1a2332);
            display: flex; align-items: center; gap: 8px;
        }
        .zcms-builder-header h4 i {
            color: var(--z-primary, #2c83ec); font-size: 14px;
        }
        .zcms-builder-body { padding: 22px; }

        /* ── Builder form fields ─────────────────────────────── */
        .zcms-form-label {
            font-size: 13px; font-weight: 600;
            color: var(--z-text, #333e50);
            margin-bottom: 7px; display: block;
        }
        .zcms-form-label .text-danger { font-size: 13px; }
        .zcms-form-hint {
            font-size: 11px; color: var(--z-text-muted, #8d9bb5); margin-top: 5px;
        }
        .zcms-builder-body .form-control {
            border-radius: var(--z-radius, 8px);
            border: 1px solid var(--z-border, #e0e5ec);
            padding: 9px 14px; font-size: 14px;
            color: var(--z-text, #333e50);
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .zcms-builder-body .form-control:focus {
            border-color: var(--z-primary, #2c83ec);
            box-shadow: 0 0 0 3px rgba(44,131,236,0.10);
        }
        .zcms-builder-body select.form-control { height: auto; }

        /* ── Block list (page sections) ──────────────────────── */
        .zcms-block-list { min-height: 40px; }
        .zcms-block-item {
            border: 1px solid var(--z-border, #e0e5ec);
            border-radius: var(--z-radius, 8px);
            margin-bottom: 10px; background: var(--z-card-bg, #fff);
            overflow: hidden; transition: border-color 0.2s;
        }
        .zcms-block-item:hover {
            border-color: var(--z-primary, #2c83ec);
        }
        .zcms-block-item.sortable-ghost { opacity: 0.35; }
        .zcms-block-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 16px; background: #f8f9fb; cursor: pointer;
            transition: background 0.15s;
        }
        .zcms-block-header:hover { background: #f0f4f8; }
        .zcms-block-header-left {
            display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
        }
        .zcms-block-drag {
            cursor: grab; color: var(--z-text-muted, #8d9bb5); font-size: 14px;
        }
        .zcms-block-type-badge {
            display: inline-flex; padding: 3px 10px; border-radius: 20px;
            font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
            background: linear-gradient(135deg, #dbeafe, #e0edff);
            color: var(--z-primary, #2c83ec); text-transform: uppercase;
        }
        .zcms-block-title {
            font-weight: 600; font-size: 13px; color: var(--z-text-heading, #1a2332);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .zcms-btn-remove-block {
            color: #dc2626; background: none; border: none;
            cursor: pointer; font-size: 14px; padding: 4px 8px;
            border-radius: var(--z-radius-sm, 4px);
            transition: background 0.15s;
        }
        .zcms-btn-remove-block:hover { background: #fee2e2; }
        .zcms-block-body {
            padding: 16px 20px; display: none;
            border-top: 1px solid var(--z-border-light, #eef1f5);
        }
        .zcms-block-body.show { display: block; }

        /* ── Add block bar ───────────────────────────────────── */
        .zcms-add-block-bar {
            display: flex; gap: 8px; flex-wrap: wrap;
            margin-top: 18px; padding-top: 18px;
            border-top: 1px dashed var(--z-border, #e0e5ec);
            align-items: center;
        }
        .zcms-add-block-bar .add-label {
            font-size: 12px; font-weight: 600;
            color: var(--z-text-muted, #8d9bb5);
            line-height: 32px;
        }
        .zcms-btn-block-type {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 6px 16px; border-radius: 20px;
            font-size: 12px; font-weight: 600;
            border: 1px solid var(--z-border, #e0e5ec);
            background: var(--z-card-bg, #fff);
            color: var(--z-text, #333e50);
            cursor: pointer; transition: all 0.2s;
        }
        .zcms-btn-block-type:hover {
            border-color: var(--z-primary, #2c83ec);
            color: var(--z-primary, #2c83ec);
            background: #f0f7ff;
        }
        .zcms-btn-block-type i { font-size: 11px; }

        /* ── Submit button ───────────────────────────────────── */
        .zcms-btn-submit {
            width: 100%; padding: 12px 20px;
            border-radius: var(--z-radius, 8px);
            border: none; cursor: pointer;
            background: linear-gradient(135deg, var(--z-primary, #2c83ec), #1b6fd1);
            color: #fff; font-size: 14px; font-weight: 700;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            transition: all 0.2s;
        }
        .zcms-btn-submit:hover {
            box-shadow: 0 4px 14px rgba(44,131,236,0.30);
            transform: translateY(-1px);
        }

        @media (max-width: 768px) {
            .zcms-page-header { flex-direction: column; gap: 16px; text-align: center; padding: 22px; }
        }
        


/* ── §39.8 link_keywords.php ──────────────────────────── */
        .cms-header {
            background: linear-gradient(135deg, #2c83ec 0%, #1b6fd1 100%);
            border-radius: 12px;
            padding: 28px 32px;
            margin-bottom: 24px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .cms-header h3 {
            margin: 0; font-size: 22px; font-weight: 700; color: #fff;
        }
        .cms-header .cms-subtitle {
            font-size: 13px; opacity: 0.85; margin-top: 4px;
        }
        .cms-info-box {
            background: #eff6ff; border: 1px solid #bfdbfe;
            border-radius: 8px; padding: 14px 18px;
            font-size: 13px; color: #1e40af; margin-bottom: 20px;
        }
        .cms-info-box i { margin-right: 8px; }
        .cms-badge-active {
            display: inline-block; padding: 3px 10px; border-radius: 20px;
            font-size: 11px; font-weight: 600; background: #d1fae5; color: #059669;
        }
        .cms-badge-inactive {
            display: inline-block; padding: 3px 10px; border-radius: 20px;
            font-size: 11px; font-weight: 600; background: #fee2e2; color: #dc2626;
        }
        .lk-table .btn-action {
            padding: 5px 10px; border-radius: 6px;
            font-size: 12px; font-weight: 600; margin-right: 4px;
        }
        .lk-keyword {
            font-weight: 600; color: var(--z-heading, #1e293b);
            background: #f1f5f9; padding: 2px 10px; border-radius: 4px;
            font-size: 13px;
        }
        .lk-url {
            font-size: 12px; color: var(--z-primary, #2c83ec);
            max-width: 280px; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; display: block;
        }
        /* Form section */
        .lk-form-section {
            background: #fff;
            border: 1px solid var(--z-border, #e5e7eb);
            border-radius: 10px;
            padding: 24px;
        }
        .lk-form-section h4 {
            font-size: 15px; font-weight: 700;
            color: var(--z-heading, #1e293b);
            margin: 0 0 18px 0; padding-bottom: 12px;
            border-bottom: 1px solid var(--z-border, #e5e7eb);
        }
        .lk-form-section h4 i {
            color: var(--z-primary, #2c83ec); margin-right: 8px;
        }
        .cms-form-label {
            font-size: 13px; font-weight: 600;
            color: var(--z-heading, #1e293b); margin-bottom: 6px;
        }
        .cms-form-hint {
            font-size: 11px; color: var(--z-muted, #64748b); margin-top: 4px;
        }
        


/* ── §39.9 locations.php ──────────────────────────── */
        .cms-header {
            background: linear-gradient(135deg, #2c83ec 0%, #1b6fd1 100%);
            border-radius: 12px;
            padding: 28px 32px;
            margin-bottom: 24px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .cms-header h3 {
            margin: 0; font-size: 22px; font-weight: 700; color: #fff;
        }
        .cms-header .cms-subtitle {
            font-size: 13px; opacity: 0.85; margin-top: 4px;
        }
        .cms-header .btn-add {
            background: #fff; color: var(--z-primary, #2c83ec);
            border: none; border-radius: 8px; font-weight: 600;
            font-size: 13px; padding: 9px 20px; transition: box-shadow 0.2s;
        }
        .cms-header .btn-add:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
        .cms-header-actions {
            display: flex; gap: 10px; align-items: center;
        }
        .btn-bulk {
            background: rgba(255,255,255,0.2); color: #fff;
            border: 1px solid rgba(255,255,255,0.4); border-radius: 8px;
            font-weight: 600; font-size: 12px; padding: 8px 16px;
            cursor: pointer; transition: all 0.2s;
        }
        .btn-bulk:hover { background: rgba(255,255,255,0.3); }
        .cms-badge-active {
            display: inline-block; padding: 3px 10px; border-radius: 20px;
            font-size: 11px; font-weight: 600; background: #d1fae5; color: #059669;
        }
        .cms-badge-inactive {
            display: inline-block; padding: 3px 10px; border-radius: 20px;
            font-size: 11px; font-weight: 600; background: #fee2e2; color: #dc2626;
        }
        .loc-table .btn-action {
            padding: 5px 10px; border-radius: 6px;
            font-size: 12px; font-weight: 600; margin-right: 4px;
        }
        .loc-city-name {
            font-weight: 600; color: var(--z-heading, #1e293b);
        }
        .loc-slug-code {
            font-size: 12px; color: var(--z-muted, #64748b);
            font-family: monospace; background: #f8fafc;
            padding: 2px 8px; border-radius: 4px;
        }
        .loc-url-example {
            font-size: 12px; color: var(--z-primary, #2c83ec);
            font-family: monospace;
        }
        /* Modal */
        .cms-modal .modal-header {
            background: linear-gradient(135deg, #2c83ec 0%, #1b6fd1 100%);
            color: #fff; border-radius: 8px 8px 0 0; padding: 18px 24px;
        }
        .cms-modal .modal-header .modal-title {
            font-weight: 700; font-size: 16px;
        }
        .cms-modal .modal-header .close {
            color: #fff; opacity: 0.8;
        }
        .cms-modal .modal-body { padding: 24px; }
        .cms-modal .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid var(--z-border, #e5e7eb);
        }
        .cms-form-label {
            font-size: 13px; font-weight: 600;
            color: var(--z-heading, #1e293b); margin-bottom: 6px;
        }
        .cms-form-hint {
            font-size: 11px; color: var(--z-muted, #64748b); margin-top: 4px;
        }
        .placeholder-tags {
            display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px;
        }
        .placeholder-tags .ptag {
            display: inline-block; padding: 2px 8px; border-radius: 12px;
            font-size: 11px; font-weight: 600; background: #ede9fe;
            color: #7c3aed; cursor: pointer;
        }
        .cms-info-box {
            background: #eff6ff; border: 1px solid #bfdbfe;
            border-radius: 8px; padding: 14px 18px;
            font-size: 13px; color: #1e40af; margin-bottom: 20px;
        }
        .cms-info-box i { margin-right: 8px; }
        


/* ── §39.10 media.php ──────────────────────────── */
        .cms-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(135deg, var(--z-primary, #1B73E8) 0%, #1565c0 100%);
            border-radius: 10px;
            padding: 22px 28px;
            margin-bottom: 20px;
            color: #fff;
        }
        .cms-page-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            color: #fff;
        }
        .cms-page-header .subtitle {
            font-size: 12px;
            opacity: 0.85;
            margin-top: 2px;
        }
        .cms-page-header .btn-add {
            background: #fff;
            color: var(--z-primary, #1B73E8);
            border: none;
            font-weight: 600;
            font-size: 13px;
            padding: 8px 18px;
            border-radius: 8px;
            transition: box-shadow .2s;
        }
        .cms-page-header .btn-add:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .upload-dropzone {
            border: 2px dashed var(--z-border, #d0d5dd);
            border-radius: 12px;
            padding: 40px 20px;
            text-align: center;
            background: var(--z-bg-light, #f8f9fb);
            margin-bottom: 24px;
            transition: border-color .2s, background .2s;
            cursor: pointer;
        }
        .upload-dropzone:hover,
        .upload-dropzone.dragover {
            border-color: var(--z-primary, #1B73E8);
            background: #e8f0fe;
        }
        .upload-dropzone .icon {
            font-size: 40px;
            color: var(--z-primary, #1B73E8);
            margin-bottom: 12px;
            opacity: 0.7;
        }
        .upload-dropzone .text-main {
            font-size: 14px;
            font-weight: 600;
            color: var(--z-heading, #1a1a2e);
            margin-bottom: 4px;
        }
        .upload-dropzone .text-sub {
            font-size: 12px;
            color: var(--z-text-muted, #999);
        }
        .upload-dropzone .text-sub a {
            color: var(--z-primary, #1B73E8);
            font-weight: 600;
        }
        .media-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }
        @media (max-width: 992px) {
            .media-grid { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 768px) {
            .media-grid { grid-template-columns: repeat(2, 1fr); }
        }
        .media-card {
            background: #fff;
            border: 1px solid var(--z-border, #e5e8eb);
            border-radius: 10px;
            overflow: hidden;
            transition: box-shadow .2s, transform .15s;
        }
        .media-card:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
            transform: translateY(-2px);
        }
        .media-card .thumb-container {
            width: 100%;
            height: 160px;
            background: var(--z-bg-light, #f8f9fb);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .media-card .thumb-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .media-card .thumb-container .file-icon {
            font-size: 40px;
            color: var(--z-text-muted, #aaa);
        }
        .media-card .info {
            padding: 12px 14px;
        }
        .media-card .info .filename {
            font-size: 12px;
            font-weight: 600;
            color: var(--z-heading, #1a1a2e);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 4px;
        }
        .media-card .info .meta {
            font-size: 11px;
            color: var(--z-text-muted, #999);
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        .media-card .info .actions {
            display: flex;
            gap: 6px;
        }
        .media-card .info .actions .btn {
            font-size: 11px;
            padding: 3px 8px;
        }
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--z-text-muted, #999);
        }
        .empty-state i {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.4;
        }
        .empty-state p {
            font-size: 14px;
            margin-bottom: 16px;
        }
        


/* ── §39.11 menus.php ──────────────────────────── */
        /* ── CMS Menu Builder — Zoho CRM Inspired ─────────────── */
        .zcms-page-header {
            background: linear-gradient(135deg, var(--z-primary, #2c83ec) 0%, #1565c0 100%);
            border-radius: var(--z-radius-lg, 12px);
            padding: 28px 32px;
            margin-bottom: 24px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 4px 20px rgba(44, 131, 236, 0.18);
        }
        .zcms-page-header h3 {
            margin: 0; font-size: 20px; font-weight: 700; color: #fff;
            display: flex; align-items: center; gap: 10px;
        }
        .zcms-page-header .zcms-subtitle {
            font-size: 13px; opacity: 0.85; margin-top: 4px;
        }
        .zcms-page-header .zcms-header-icon {
            width: 42px; height: 42px; border-radius: 10px;
            background: rgba(255,255,255,0.18); display: flex;
            align-items: center; justify-content: center; font-size: 18px;
        }

        /* ── Location pill tabs ──────────────────────────────── */
        .zcms-location-tabs {
            display: inline-flex; gap: 4px; margin-bottom: 24px;
            background: var(--z-card-bg, #fff);
            border: 1px solid var(--z-border, #e0e5ec);
            border-radius: var(--z-radius-lg, 12px);
            padding: 5px;
            box-shadow: var(--z-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
        }
        .zcms-location-tabs a {
            display: inline-flex; align-items: center; gap: 7px;
            padding: 10px 22px; border-radius: var(--z-radius, 8px);
            font-size: 13px; font-weight: 600;
            color: var(--z-text-muted, #8d9bb5);
            text-decoration: none; transition: all 0.2s;
        }
        .zcms-location-tabs a:hover {
            color: var(--z-text, #333e50);
            background: #f0f4f8;
        }
        .zcms-location-tabs a.active {
            background: linear-gradient(135deg, var(--z-primary, #2c83ec), #1b6fd1);
            color: #fff;
            box-shadow: 0 2px 10px rgba(44,131,236,0.25);
        }
        .zcms-location-tabs a i { font-size: 13px; }

        /* ── Menu tree panel ─────────────────────────────────── */
        .zcms-tree-panel {
            background: var(--z-card-bg, #fff);
            border: 1px solid var(--z-border, #e0e5ec);
            border-radius: var(--z-radius-lg, 12px);
            overflow: hidden;
            box-shadow: var(--z-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
        }
        .zcms-tree-header {
            background: #f8f9fb;
            padding: 16px 22px;
            border-bottom: 1px solid var(--z-border, #e0e5ec);
            display: flex; align-items: center; justify-content: space-between;
        }
        .zcms-tree-header h4 {
            margin: 0; font-size: 15px; font-weight: 700;
            color: var(--z-text-heading, #1a2332);
            display: flex; align-items: center; gap: 8px;
        }
        .zcms-tree-header h4 i {
            color: var(--z-primary, #2c83ec); font-size: 14px;
        }
        .zcms-tree-header .drag-hint {
            font-size: 12px; font-weight: 500;
            color: var(--z-text-muted, #8d9bb5);
            display: flex; align-items: center; gap: 5px;
        }
        .zcms-tree-body { padding: 16px 20px; }

        /* ── Menu tree items ─────────────────────────────────── */
        .zcms-menu-tree { list-style: none; padding: 0; margin: 0; }
        .zcms-menu-tree .zcms-menu-tree { padding-left: 32px; margin-top: 6px; }

        .zcms-menu-item {
            background: var(--z-card-bg, #fff);
            border: 1px solid var(--z-border, #e0e5ec);
            border-radius: var(--z-radius, 8px);
            padding: 14px 16px;
            margin-bottom: 8px;
            display: flex; align-items: center; justify-content: space-between;
            cursor: grab; transition: all 0.2s;
        }
        .zcms-menu-item:hover {
            border-color: var(--z-primary, #2c83ec);
            box-shadow: 0 2px 10px rgba(44,131,236,0.08);
        }
        .zcms-menu-item.sortable-ghost { opacity: 0.35; }
        .zcms-menu-item.inactive-item { opacity: 0.5; }

        .zcms-menu-item-left {
            display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1;
        }
        .zcms-menu-drag {
            color: var(--z-text-muted, #8d9bb5); font-size: 14px; cursor: grab;
            flex-shrink: 0; padding: 2px;
        }
        .zcms-menu-icon {
            width: 36px; height: 36px; border-radius: var(--z-radius, 8px);
            background: linear-gradient(135deg, #e0edff, #dbeafe);
            display: flex; align-items: center; justify-content: center;
            color: var(--z-primary, #2c83ec); font-size: 14px; flex-shrink: 0;
        }
        .zcms-menu-info { min-width: 0; flex: 1; }
        .zcms-menu-label {
            font-size: 14px; font-weight: 600; color: var(--z-text-heading, #1a2332);
            display: flex; align-items: center; gap: 6px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .zcms-menu-url {
            font-size: 11px; color: var(--z-text-muted, #8d9bb5); margin-top: 2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            max-width: 280px; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
        }
        .zcms-menu-badge {
            display: inline-flex; padding: 2px 8px; border-radius: 4px;
            font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
        }
        .zcms-menu-badge.badge-inactive {
            background: #fee2e2; color: #991b1b;
        }
        .zcms-menu-badge.badge-children {
            background: #fef3c7; color: #92400e;
        }

        /* ── Menu item actions ───────────────────────────────── */
        .zcms-menu-actions {
            display: flex; gap: 6px; flex-shrink: 0;
        }
        .zcms-menu-actions a,
        .zcms-menu-actions button {
            width: 32px; height: 32px; border-radius: var(--z-radius, 8px);
            border: 1px solid var(--z-border, #e0e5ec);
            background: var(--z-card-bg, #fff);
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; color: var(--z-text-muted, #8d9bb5);
            cursor: pointer; transition: all 0.15s; text-decoration: none;
        }
        .zcms-menu-actions a:hover {
            border-color: var(--z-primary, #2c83ec); color: var(--z-primary, #2c83ec);
            background: #f0f7ff;
        }
        .zcms-menu-actions button.btn-del {
            border: 1px solid var(--z-border, #e0e5ec); padding: 0;
        }
        .zcms-menu-actions button.btn-del:hover {
            border-color: #ef4444; color: #ef4444; background: #fef2f2;
        }

        /* ── Save order button ───────────────────────────────── */
        .zcms-btn-save-order {
            display: inline-flex; align-items: center; gap: 8px;
            margin-top: 16px; padding: 10px 24px;
            border-radius: var(--z-radius, 8px);
            border: none; cursor: pointer;
            background: linear-gradient(135deg, var(--z-primary, #2c83ec), #1b6fd1);
            color: #fff; font-size: 13px; font-weight: 700;
            transition: all 0.2s;
        }
        .zcms-btn-save-order:hover {
            box-shadow: 0 4px 14px rgba(44,131,236,0.30);
            transform: translateY(-1px);
        }

        /* ── Form panel ──────────────────────────────────────── */
        .zcms-form-panel {
            background: var(--z-card-bg, #fff);
            border: 1px solid var(--z-border, #e0e5ec);
            border-radius: var(--z-radius-lg, 12px);
            overflow: hidden;
            box-shadow: var(--z-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
            position: sticky; top: 70px;
        }
        .zcms-form-header {
            background: #f8f9fb;
            padding: 16px 22px;
            border-bottom: 1px solid var(--z-border, #e0e5ec);
            display: flex; align-items: center; gap: 8px;
        }
        .zcms-form-header h4 {
            margin: 0; font-size: 15px; font-weight: 700;
            color: var(--z-text-heading, #1a2332);
            display: flex; align-items: center; gap: 8px;
        }
        .zcms-form-header h4 i {
            color: var(--z-primary, #2c83ec);
        }
        .zcms-form-body { padding: 22px; }
        .zcms-form-body .form-group { margin-bottom: 16px; }
        .zcms-form-body label {
            font-size: 12px; font-weight: 600;
            color: var(--z-text-secondary, #6b7a90);
            text-transform: uppercase; letter-spacing: 0.4px;
            margin-bottom: 6px; display: block;
        }
        .zcms-form-body .form-control {
            border-radius: var(--z-radius, 8px);
            border: 1px solid var(--z-border, #e0e5ec);
            padding: 9px 14px; font-size: 14px;
            color: var(--z-text, #333e50);
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .zcms-form-body .form-control:focus {
            border-color: var(--z-primary, #2c83ec);
            box-shadow: 0 0 0 3px rgba(44,131,236,0.10);
        }
        .zcms-form-body select.form-control { height: auto; }

        /* ── URL suggestions ─────────────────────────────────── */
        .zcms-url-chips {
            display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px;
        }
        .zcms-url-chip {
            display: inline-flex; align-items: center;
            padding: 4px 12px; border-radius: 20px;
            font-size: 11px; font-weight: 600;
            border: 1px solid var(--z-border, #e0e5ec);
            background: var(--z-card-bg, #fff);
            color: var(--z-text-secondary, #6b7a90);
            cursor: pointer; transition: all 0.15s;
            text-decoration: none;
        }
        .zcms-url-chip:hover {
            border-color: var(--z-primary, #2c83ec);
            color: var(--z-primary, #2c83ec);
            background: #f0f7ff;
        }

        /* ── Toggle switch ───────────────────────────────────── */
        .zcms-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
        .zcms-toggle input { opacity: 0; width: 0; height: 0; }
        .zcms-toggle-slider {
            position: absolute; cursor: pointer; inset: 0;
            background-color: #cbd5e1; border-radius: 24px; transition: 0.3s;
        }
        .zcms-toggle-slider:before {
            position: absolute; content: ""; width: 18px; height: 18px;
            left: 3px; bottom: 3px;
            background: #fff; border-radius: 50%; transition: 0.3s;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12);
        }
        .zcms-toggle input:checked + .zcms-toggle-slider { background-color: var(--z-primary, #2c83ec); }
        .zcms-toggle input:checked + .zcms-toggle-slider:before { transform: translateX(20px); }

        /* ── Submit buttons ───────────────────────────────────── */
        .zcms-btn-primary-full {
            width: 100%; padding: 12px 20px;
            border-radius: var(--z-radius, 8px);
            border: none; cursor: pointer;
            background: linear-gradient(135deg, var(--z-primary, #2c83ec), #1b6fd1);
            color: #fff; font-size: 14px; font-weight: 700;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            transition: all 0.2s;
        }
        .zcms-btn-primary-full:hover {
            box-shadow: 0 4px 14px rgba(44,131,236,0.30);
        }
        .zcms-btn-cancel-full {
            width: 100%; padding: 10px 20px; margin-top: 8px;
            border-radius: var(--z-radius, 8px);
            border: 1px solid var(--z-border, #e0e5ec);
            background: var(--z-card-bg, #fff);
            color: var(--z-text-secondary, #6b7a90);
            font-size: 13px; font-weight: 600;
            text-align: center; text-decoration: none;
            display: block; cursor: pointer; transition: all 0.2s;
        }
        .zcms-btn-cancel-full:hover {
            border-color: #94a3b8; color: var(--z-text, #333e50);
        }

        /* ── Empty state ─────────────────────────────────────── */
        .zcms-empty {
            text-align: center; padding: 50px 20px;
        }
        .zcms-empty .empty-icon {
            width: 70px; height: 70px; border-radius: 50%;
            background: linear-gradient(135deg, #f0f4f8, #e8ecf1);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 16px; font-size: 28px; color: #c5ccd6;
        }
        .zcms-empty h5 { font-size: 15px; font-weight: 700; color: var(--z-text-heading, #1a2332); margin: 0 0 6px; }
        .zcms-empty p { font-size: 13px; color: var(--z-text-muted, #8d9bb5); margin: 0; }

        @media (max-width: 991px) {
            .zcms-form-panel { margin-top: 20px; }
        }
        @media (max-width: 768px) {
            .zcms-page-header { flex-direction: column; gap: 12px; text-align: center; padding: 22px; }
        }
        


/* ── §39.12 page_edit.php ──────────────────────────── */
        .cms-breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--z-muted, #64748b);
            margin-bottom: 20px;
        }
        .cms-breadcrumb a {
            color: var(--z-primary, #2c83ec);
            text-decoration: none;
            font-weight: 600;
        }
        .cms-breadcrumb a:hover { text-decoration: underline; }
        .cms-breadcrumb .separator { color: #cbd5e1; }
        .cms-page-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--z-heading, #1e293b);
            margin-bottom: 4px;
        }
        .cms-page-title i {
            color: var(--z-primary, #2c83ec);
            margin-right: 8px;
        }
        .cms-section-panel {
            border: 1px solid var(--z-border, #e5e7eb);
            border-radius: 10px;
            margin-bottom: 16px;
            background: #fff;
            overflow: hidden;
        }
        .cms-section-header {
            background: #f8fafc;
            padding: 12px 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--z-border, #e5e7eb);
            transition: background 0.2s;
        }
        .cms-section-header:hover { background: #f1f5f9; }
        .cms-section-header .section-key {
            font-size: 14px;
            font-weight: 700;
            color: var(--z-heading, #1e293b);
        }
        .cms-section-header .section-key i {
            margin-right: 8px;
            color: var(--z-primary, #2c83ec);
        }
        .cms-section-header .toggle-icon {
            font-size: 13px;
            color: var(--z-muted, #64748b);
            transition: transform 0.2s;
        }
        .cms-section-body {
            padding: 18px;
            display: none;
        }
        .cms-section-panel.active .cms-section-body { display: block; }
        .cms-section-panel.active .toggle-icon { transform: rotate(180deg); }
        .cms-section-body .form-group { margin-bottom: 14px; }
        .cms-section-body label {
            font-size: 12px;
            font-weight: 600;
            color: var(--z-muted, #64748b);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            margin-bottom: 6px;
        }
        .cms-section-body .form-control {
            border-radius: 8px;
            border: 1px solid var(--z-border, #e5e7eb);
            font-size: 13px;
        }
        .cms-section-body .form-control:focus {
            border-color: var(--z-primary, #2c83ec);
            box-shadow: 0 0 0 3px rgba(44,131,236,0.10);
        }
        .cms-section-save {
            text-align: right;
            padding-top: 8px;
        }
        .cms-seo-panel {
            position: sticky;
            top: 20px;
        }
        .cms-seo-panel .panel-heading-custom {
            background: #f8fafc;
            padding: 14px 18px;
            border-bottom: 1px solid var(--z-border, #e5e7eb);
            font-size: 14px;
            font-weight: 700;
            color: var(--z-heading, #1e293b);
        }
        .cms-seo-panel .panel-heading-custom i {
            color: var(--z-primary, #2c83ec);
            margin-right: 8px;
        }
        .cms-seo-panel .panel-body-custom {
            padding: 18px;
        }
        .cms-seo-panel .form-group { margin-bottom: 14px; }
        .cms-seo-panel label {
            font-size: 12px;
            font-weight: 600;
            color: var(--z-muted, #64748b);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            margin-bottom: 6px;
        }
        .cms-seo-panel .form-control {
            border-radius: 8px;
            font-size: 13px;
        }
        


/* ── §39.13 pages.php ──────────────────────────── */
/* ================================================
   Website CMS Pages — Zoho CRM Inspired
   ================================================ */

/* --- Page Header --- */
.wcms-pg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.wcms-pg-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.wcms-pg-header-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--z-radius, 8px);
    background: var(--z-primary-light, #e8f2fd);
    color: var(--z-primary, #2c83ec);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.wcms-pg-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--z-text-heading, #1a2332);
    line-height: 1.3;
}
.wcms-pg-header-sub {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 2px;
}
.wcms-pg-stat {
    font-size: 12px;
    font-weight: 500;
    color: var(--z-text-muted, #8d9bb5);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.wcms-pg-stat i {
    font-size: 10px;
}
.wcms-pg-stat-green { color: #059669; }
.wcms-pg-stat-red   { color: #dc2626; }

.wcms-pg-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.wcms-pg-header-actions .btn {
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 16px;
    transition: all 0.15s ease;
}
.wcms-pg-header-actions .btn-default {
    border-color: var(--z-border, #e0e5ec);
    color: var(--z-text, #333e50);
    background: #fff;
}
.wcms-pg-header-actions .btn-default:hover {
    background: var(--z-primary-light, #e8f2fd);
    color: var(--z-primary, #2c83ec);
    border-color: var(--z-primary, #2c83ec);
}
.wcms-pg-header-actions .btn-primary {
    background: var(--z-primary, #2c83ec);
    border-color: var(--z-primary, #2c83ec);
    color: #fff;
}
.wcms-pg-header-actions .btn-primary:hover {
    background: var(--z-primary-hover, #1a6fd4);
}
.wcms-pg-header-actions .btn i {
    margin-right: 5px;
}

/* --- KPI Row --- */
.wcms-pg-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.wcms-pg-kpi {
    background: var(--z-card-bg, #fff);
    border: 1px solid var(--z-border, #e0e5ec);
    border-radius: var(--z-radius-lg, 12px);
    padding: 20px 22px;
    box-shadow: var(--z-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
}
.wcms-pg-kpi:hover {
    box-shadow: var(--z-shadow, 0 2px 8px rgba(0,0,0,0.08));
}
.wcms-pg-kpi.active   { border-left-color: var(--z-primary, #2c83ec); }
.wcms-pg-kpi.published { border-left-color: #059669; }
.wcms-pg-kpi.draft     { border-left-color: #f59e0b; }

.wcms-pg-kpi-num {
    font-size: 28px;
    font-weight: 700;
    color: var(--z-text-heading, #1a2332);
    line-height: 1.2;
}
.wcms-pg-kpi-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--z-text-muted, #8d9bb5);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 4px;
}

/* --- Table Panel --- */
.wcms-pg-panel {
    background: var(--z-card-bg, #fff);
    border: 1px solid var(--z-border, #e0e5ec);
    border-radius: var(--z-radius-lg, 12px);
    box-shadow: var(--z-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
    overflow: hidden;
    margin-bottom: 24px;
}
.wcms-pg-panel-body {
    padding: 0;
}
.wcms-pg-table-wrap {
    overflow-x: auto;
}

/* --- Table Styling --- */
.wcms-pg-table {
    width: 100%;
    margin-bottom: 0 !important;
    border-collapse: collapse;
}
.wcms-pg-table thead th {
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b !important;
    font-weight: 600;
    padding: 12px 16px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid var(--z-border, #e0e5ec) !important;
    white-space: nowrap;
}
.wcms-pg-table tbody td {
    padding: 14px 16px !important;
    font-size: 13px;
    color: var(--z-text, #333e50);
    border-bottom: 1px solid var(--z-border-light, #eef1f5) !important;
    vertical-align: middle;
}
.wcms-pg-table tbody tr:last-child td {
    border-bottom: none !important;
}
.wcms-pg-table tbody tr:hover {
    background: #f8fafc;
}
.wcms-pg-table.dataTable thead th {
    border-bottom: 1px solid var(--z-border, #e0e5ec) !important;
}

/* Title link */
.wcms-pg-title-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    color: var(--z-text-heading, #1a2332);
    text-decoration: none;
    transition: color 0.15s ease;
}
.wcms-pg-title-link:hover {
    color: var(--z-primary, #2c83ec);
    text-decoration: none;
}
.wcms-pg-title-icon {
    font-size: 14px;
    color: var(--z-text-muted, #8d9bb5);
}
.wcms-pg-title-link:hover .wcms-pg-title-icon {
    color: var(--z-primary, #2c83ec);
}

/* Slug */
.wcms-pg-slug {
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
    font-size: 12px;
    padding: 2px 8px;
    background: #f1f5f9;
    border-radius: 4px;
    color: #475569;
    display: inline-block;
}

/* Meta */
.wcms-pg-meta {
    color: var(--z-text-muted, #8d9bb5);
    font-size: 12px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Date */
.wcms-pg-date {
    font-size: 12px;
    color: var(--z-text-muted, #8d9bb5);
    white-space: nowrap;
}

/* Status badges */
.wcms-pg-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.wcms-pg-badge i {
    font-size: 6px;
}
.wcms-pg-badge-active {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}
.wcms-pg-badge-inactive {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* Action buttons */
.wcms-pg-actions {
    display: inline-flex;
    gap: 4px;
}
.wcms-pg-action-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}
.wcms-pg-action-edit {
    color: var(--z-primary, #2c83ec);
    background: transparent;
}
.wcms-pg-action-edit:hover {
    background: var(--z-primary-light, #e8f2fd);
    border-color: var(--z-primary, #2c83ec);
    color: var(--z-primary, #2c83ec);
    text-decoration: none;
}
.wcms-pg-action-view {
    color: var(--z-text-muted, #8d9bb5);
    background: transparent;
}
.wcms-pg-action-view:hover {
    background: #f1f5f9;
    border-color: var(--z-border, #e0e5ec);
    color: var(--z-text, #333e50);
    text-decoration: none;
}

/* --- DataTable overrides inside our panel --- */
.wcms-pg-panel .dataTables_wrapper {
    padding: 16px 16px 12px 16px;
}
.wcms-pg-panel .dataTables_wrapper .dataTables_filter input {
    border-radius: 8px;
    border: 1px solid var(--z-border, #e0e5ec);
    padding: 6px 12px;
    font-size: 13px;
}
.wcms-pg-panel .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--z-primary, #2c83ec);
    outline: none;
    box-shadow: 0 0 0 3px rgba(44,131,236,0.1);
}
.wcms-pg-panel .dataTables_wrapper .dataTables_length select {
    border-radius: 6px;
    border: 1px solid var(--z-border, #e0e5ec);
    padding: 4px 8px;
    font-size: 13px;
}
.wcms-pg-panel .dataTables_wrapper .dataTables_info {
    font-size: 12px;
    color: var(--z-text-muted, #8d9bb5);
    padding: 12px 0;
}
.wcms-pg-panel .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    font-size: 12px;
    padding: 4px 10px !important;
    margin: 0 2px;
}
.wcms-pg-panel .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--z-primary, #2c83ec) !important;
    color: #fff !important;
    border-color: var(--z-primary, #2c83ec) !important;
}
.wcms-pg-panel .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--z-primary-light, #e8f2fd) !important;
    color: var(--z-primary, #2c83ec) !important;
    border-color: var(--z-primary, #2c83ec) !important;
}

/* --- Responsive --- */
@media (max-width: 767px) {
    .wcms-pg-header { flex-direction: column; align-items: flex-start; }
    .wcms-pg-kpi-row { grid-template-columns: 1fr; }
    .wcms-pg-header-sub { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 480px) {
    .wcms-pg-header-actions { flex-direction: column; width: 100%; }
    .wcms-pg-header-actions .btn { width: 100%; text-align: center; }
}


/* ── §39.14 portfolio.php ──────────────────────────── */
        /* ===== CMS Portfolio — Zoho CRM Inspired ===== */
        .cms-port-wrap * { box-sizing: border-box; }

        /* --- Page Header --- */
        .cms-port-header {
            display: flex; align-items: center; justify-content: space-between;
            background: linear-gradient(135deg, #1B73E8 0%, #1252a6 100%);
            border-radius: 12px; padding: 26px 32px; margin-bottom: 24px;
            color: #fff; box-shadow: 0 4px 20px rgba(27,115,232,.18);
        }
        .cms-port-header .hdr-left { display: flex; align-items: center; gap: 14px; }
        .cms-port-header .hdr-icon {
            width: 44px; height: 44px; border-radius: 10px;
            background: rgba(255,255,255,.18); display: flex;
            align-items: center; justify-content: center; font-size: 18px;
        }
        .cms-port-header h3 { margin: 0; font-size: 19px; font-weight: 700; color: #fff; }
        .cms-port-header .subtitle { font-size: 12.5px; opacity: .82; margin-top: 3px; }
        .cms-port-header .btn-add-case {
            background: #fff; color: #1B73E8 !important; border: none; font-weight: 600;
            font-size: 13px; padding: 9px 22px; border-radius: 8px;
            display: inline-flex; align-items: center; gap: 6px;
            transition: box-shadow .2s, transform .15s;
        }
        .cms-port-header .btn-add-case:hover {
            box-shadow: 0 6px 18px rgba(0,0,0,.15); transform: translateY(-1px);
        }

        /* --- Stats Row --- */
        .port-stats-row {
            display: flex; gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
        }
        .port-stat-chip {
            display: flex; align-items: center; gap: 10px;
            background: #fff; border: 1px solid var(--z-border, #e5e8eb);
            border-radius: 10px; padding: 12px 20px; min-width: 140px;
            transition: box-shadow .2s;
        }
        .port-stat-chip:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
        .port-stat-chip .chip-icon {
            width: 36px; height: 36px; border-radius: 8px; display: flex;
            align-items: center; justify-content: center; font-size: 14px;
        }
        .port-stat-chip .chip-icon.total  { background: #e8f0fe; color: #1B73E8 !important; }
        .port-stat-chip .chip-icon.active  { background: #e6f9ed; color: #1b8a4a !important; }
        .port-stat-chip .chip-icon.feat    { background: #fff8e1; color: #f59e0b !important; }
        .port-stat-chip .chip-num { font-size: 20px; font-weight: 700; color: var(--z-heading, #1a1a2e); line-height: 1; }
        .port-stat-chip .chip-label { font-size: 11px; color: var(--z-text-muted, #6b7280); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }

        /* --- Table Card --- */
        .port-table-card {
            background: #fff; border: 1px solid var(--z-border, #e5e8eb);
            border-radius: 12px; overflow: hidden;
            box-shadow: 0 1px 6px rgba(0,0,0,.04);
        }
        .port-tbl { width: 100%; border-collapse: collapse; }
        .port-tbl thead th {
            background: var(--z-bg-light, #f8f9fb);
            font-size: 10.5px; font-weight: 700; text-transform: uppercase;
            letter-spacing: .6px; color: var(--z-text-muted, #6b7280);
            padding: 11px 16px; border-bottom: 2px solid var(--z-border, #e5e8eb);
            white-space: nowrap;
        }
        .port-tbl tbody tr {
            border-bottom: 1px solid var(--z-border, #eef0f2);
            transition: background .15s;
        }
        .port-tbl tbody tr:last-child { border-bottom: none; }
        .port-tbl tbody tr:hover { background: #f9fbff; }
        .port-tbl tbody td {
            padding: 14px 16px; font-size: 13px;
            color: var(--z-text, #333); vertical-align: middle;
        }

        /* Project name */
        .port-project-name {
            display: flex; align-items: center; gap: 12px;
        }
        .port-project-name .proj-icon {
            width: 38px; height: 38px; border-radius: 10px;
            background: linear-gradient(135deg, #e8f0fe, #d6e4ff);
            display: flex; align-items: center; justify-content: center;
            font-size: 14px; color: #1B73E8 !important; flex-shrink: 0;
        }
        .port-project-name .proj-label {
            font-weight: 600; color: var(--z-heading, #1e293b);
            font-size: 13.5px; text-decoration: none;
        }
        .port-project-name .proj-label:hover { color: #1B73E8 !important; }

        /* Client */
        .port-client { font-size: 13px; color: var(--z-text, #555); }
        .port-client i { margin-right: 4px; color: var(--z-text-muted, #aaa); font-size: 11px; }

        /* Industry badge */
        .port-industry {
            display: inline-block; padding: 3px 12px; border-radius: 6px;
            font-size: 11px; font-weight: 600;
            background: #ede9fe; color: #7c3aed !important;
        }

        /* Featured star */
        .port-featured {
            width: 28px; height: 28px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 14px;
        }
        .port-featured.yes { color: #f59e0b !important; background: #fff8e1; }
        .port-featured.no  { color: #d1d5db !important; background: var(--z-bg-light, #f4f6f9); }

        /* Status badge */
        .port-status {
            display: inline-flex; align-items: center; gap: 5px;
            font-size: 11.5px; font-weight: 600; padding: 4px 12px;
            border-radius: 20px;
        }
        .port-status .dot { width: 6px; height: 6px; border-radius: 50%; }
        .port-status.active { background: #e6f9ed; color: #1b8a4a !important; }
        .port-status.active .dot { background: #1b8a4a; }
        .port-status.inactive { background: #fef2f2; color: #dc2626 !important; }
        .port-status.inactive .dot { background: #dc2626; }

        /* Action buttons */
        .port-actions { display: flex; gap: 4px; }
        .port-actions .btn-act {
            width: 30px; height: 30px; border-radius: 6px;
            border: 1px solid var(--z-border, #e5e8eb); background: #fff;
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; color: var(--z-text-muted, #888) !important;
            transition: all .15s; cursor: pointer; text-decoration: none;
        }
        .port-actions .btn-act:hover { background: #f0f3f8; color: #1B73E8 !important; border-color: #c5d0e0; }
        .port-actions .btn-act.del:hover { background: #fef2f2; color: #dc2626 !important; border-color: #fca5a5; }

        /* Empty State */
        .port-empty {
            text-align: center; padding: 70px 20px; color: var(--z-text-muted, #999);
        }
        .port-empty .empty-icon {
            width: 80px; height: 80px; border-radius: 50%;
            background: var(--z-bg-light, #f0f3f8); display: flex;
            align-items: center; justify-content: center;
            margin: 0 auto 20px; font-size: 32px; color: #c5c9cf !important;
        }
        .port-empty h4 { font-size: 16px; font-weight: 600; color: var(--z-heading, #1a1a2e); margin-bottom: 6px; }
        .port-empty p { font-size: 13.5px; margin-bottom: 20px; }
        .port-empty .btn-create {
            background: #1B73E8; color: #fff !important; border: none; font-weight: 600;
            font-size: 13px; padding: 9px 22px; border-radius: 8px;
            display: inline-flex; align-items: center; gap: 6px;
        }
        .port-empty .btn-create:hover { background: #1565c0; }
        


/* ── §39.15 portfolio_form.php ──────────────────────────── */
        .cms-header {
            background: linear-gradient(135deg, #2c83ec 0%, #1b6fd1 100%);
            border-radius: 12px;
            padding: 28px 32px;
            margin-bottom: 24px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .cms-header h3 {
            margin: 0;
            font-size: 22px;
            font-weight: 700;
            color: #fff;
        }
        .cms-header .cms-subtitle {
            font-size: 13px;
            opacity: 0.85;
            margin-top: 4px;
        }
        .cms-form-section {
            background: #fff;
            border: 1px solid var(--z-border, #e5e7eb);
            border-radius: 10px;
            padding: 24px;
            margin-bottom: 20px;
        }
        .cms-form-section h4 {
            font-size: 15px;
            font-weight: 700;
            color: var(--z-heading, #1e293b);
            margin: 0 0 18px 0;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--z-border, #e5e7eb);
        }
        .cms-form-section h4 i {
            color: var(--z-primary, #2c83ec);
            margin-right: 8px;
        }
        .cms-form-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--z-heading, #1e293b);
            margin-bottom: 6px;
        }
        .cms-form-hint {
            font-size: 11px;
            color: var(--z-muted, #64748b);
            margin-top: 4px;
        }
        .cms-upload-zone {
            border: 2px dashed var(--z-border, #e5e7eb);
            border-radius: 10px;
            padding: 24px;
            text-align: center;
            color: var(--z-muted, #64748b);
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
        }
        .cms-upload-zone:hover {
            border-color: var(--z-primary, #2c83ec);
            background: #f0f7ff;
        }
        .cms-upload-zone i {
            font-size: 28px;
            display: block;
            margin-bottom: 8px;
            opacity: 0.5;
        }
        .cms-featured-check {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            color: #92400e;
        }
        .cms-featured-check input[type="checkbox"] {
            width: 18px;
            height: 18px;
        }
        


/* ── §39.16 product_categories.php ──────────────────────────── */
        /* ── CMS Product Categories — Zoho CRM Inspired ───────── */
        .zcms-page-header {
            background: linear-gradient(135deg, var(--z-primary, #2c83ec) 0%, #1565c0 100%);
            border-radius: var(--z-radius-lg, 12px);
            padding: 28px 32px;
            margin-bottom: 24px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 4px 20px rgba(44, 131, 236, 0.18);
        }
        .zcms-page-header h3 {
            margin: 0; font-size: 20px; font-weight: 700; color: #fff;
            display: flex; align-items: center; gap: 10px;
        }
        .zcms-page-header .zcms-subtitle {
            font-size: 13px; opacity: 0.85; margin-top: 4px;
        }
        .zcms-page-header .zcms-header-icon {
            width: 42px; height: 42px; border-radius: 10px;
            background: rgba(255,255,255,0.18); display: flex;
            align-items: center; justify-content: center; font-size: 18px;
        }
        .zcms-page-header .btn-zcms-back {
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(255,255,255,0.18); color: #fff;
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: var(--z-radius, 8px);
            padding: 9px 20px; font-weight: 600; font-size: 13px;
            text-decoration: none; transition: all 0.2s;
        }
        .zcms-page-header .btn-zcms-back:hover {
            background: rgba(255,255,255,0.28);
        }

        /* ── Panel ───────────────────────────────────────────── */
        .zcms-panel {
            background: var(--z-card-bg, #fff);
            border: 1px solid var(--z-border, #e0e5ec);
            border-radius: var(--z-radius-lg, 12px);
            overflow: hidden;
            box-shadow: var(--z-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
        }
        .zcms-panel-header {
            background: #f8f9fb;
            padding: 16px 22px;
            border-bottom: 1px solid var(--z-border, #e0e5ec);
            display: flex; align-items: center; justify-content: space-between;
        }
        .zcms-panel-header h4 {
            margin: 0; font-size: 15px; font-weight: 700;
            color: var(--z-text-heading, #1a2332);
            display: flex; align-items: center; gap: 8px;
        }
        .zcms-panel-header h4 i {
            color: var(--z-primary, #2c83ec); font-size: 14px;
        }
        .zcms-panel-header .count-badge {
            display: inline-flex; align-items: center; justify-content: center;
            padding: 2px 10px; border-radius: 20px;
            font-size: 11px; font-weight: 700;
            background: var(--z-primary-light, #e8f2fd);
            color: var(--z-primary, #2c83ec);
        }
        .zcms-panel-body { padding: 0; }

        /* ── Table ────────────────────────────────────────────── */
        .zcms-table {
            width: 100%; border-collapse: collapse; margin: 0;
        }
        .zcms-table thead th {
            font-size: 11px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.6px;
            color: var(--z-text-muted, #8d9bb5);
            padding: 13px 18px;
            border-bottom: 2px solid var(--z-border, #e0e5ec);
            text-align: left; white-space: nowrap;
            background: #f8f9fb;
        }
        .zcms-table tbody td {
            padding: 14px 18px; font-size: 13px;
            color: var(--z-text, #333e50);
            border-bottom: 1px solid var(--z-border-light, #eef1f5);
            vertical-align: middle;
        }
        .zcms-table tbody tr { transition: background 0.15s; }
        .zcms-table tbody tr:hover { background: #f8fafd; }
        .zcms-table tbody tr:last-child td { border-bottom: none; }

        .zcms-cat-name {
            font-weight: 600; color: var(--z-text-heading, #1a2332);
            font-size: 14px;
        }
        .zcms-cat-slug {
            font-size: 12px; color: var(--z-text-muted, #8d9bb5);
            font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
            background: #f0f4f8; padding: 3px 10px;
            border-radius: var(--z-radius-sm, 4px);
            display: inline-block;
        }
        .zcms-cat-icon-badge {
            width: 36px; height: 36px; border-radius: var(--z-radius, 8px);
            background: linear-gradient(135deg, #e0edff, #dbeafe);
            display: inline-flex; align-items: center; justify-content: center;
            color: var(--z-primary, #2c83ec); font-size: 14px;
        }
        .zcms-cat-sort {
            display: inline-flex; align-items: center; justify-content: center;
            width: 30px; height: 30px; border-radius: 50%;
            background: #f0f4f8; font-size: 12px; font-weight: 700;
            color: var(--z-text-secondary, #6b7a90);
        }

        /* ── Action buttons ──────────────────────────────────── */
        .zcms-actions {
            display: flex; align-items: center; gap: 6px;
        }
        .zcms-btn-action {
            width: 34px; height: 34px; border-radius: var(--z-radius, 8px);
            border: 1px solid var(--z-border, #e0e5ec);
            background: var(--z-card-bg, #fff);
            display: flex; align-items: center; justify-content: center;
            font-size: 13px; color: var(--z-text-muted, #8d9bb5);
            cursor: pointer; transition: all 0.15s; text-decoration: none;
        }
        .zcms-btn-action:hover {
            border-color: var(--z-primary, #2c83ec); color: var(--z-primary, #2c83ec);
            background: #f0f7ff;
        }
        .zcms-btn-action.danger:hover {
            border-color: #ef4444; color: #ef4444; background: #fef2f2;
        }

        /* ── Form panel ──────────────────────────────────────── */
        .zcms-form-panel {
            background: var(--z-card-bg, #fff);
            border: 1px solid var(--z-border, #e0e5ec);
            border-radius: var(--z-radius-lg, 12px);
            overflow: hidden;
            box-shadow: var(--z-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
        }
        .zcms-form-header {
            background: #f8f9fb;
            padding: 16px 22px;
            border-bottom: 1px solid var(--z-border, #e0e5ec);
            display: flex; align-items: center; gap: 8px;
        }
        .zcms-form-header h4 {
            margin: 0; font-size: 15px; font-weight: 700;
            color: var(--z-text-heading, #1a2332);
        }
        .zcms-form-header h4 i {
            color: var(--z-primary, #2c83ec); margin-right: 6px;
        }
        .zcms-form-body { padding: 22px; }
        .zcms-form-body .form-group { margin-bottom: 18px; }
        .zcms-form-body .form-group label {
            font-size: 12px; font-weight: 600;
            color: var(--z-text-secondary, #6b7a90);
            text-transform: uppercase; letter-spacing: 0.4px;
            margin-bottom: 7px; display: block;
        }
        .zcms-form-body .form-group label .text-danger { font-size: 12px; }
        .zcms-form-body .form-control {
            border-radius: var(--z-radius, 8px);
            border: 1px solid var(--z-border, #e0e5ec);
            padding: 9px 14px; font-size: 14px;
            color: var(--z-text, #333e50);
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .zcms-form-body .form-control:focus {
            border-color: var(--z-primary, #2c83ec);
            box-shadow: 0 0 0 3px rgba(44,131,236,0.10);
        }
        .zcms-form-body .form-control::placeholder {
            color: var(--z-text-muted, #8d9bb5);
        }
        .zcms-form-body .help-text {
            font-size: 11px; color: var(--z-text-muted, #8d9bb5); margin-top: 5px;
        }
        .zcms-form-actions {
            display: flex; gap: 10px; margin-top: 4px; padding-top: 18px;
            border-top: 1px solid var(--z-border-light, #eef1f5);
        }
        .zcms-btn-primary {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 10px 22px; border-radius: var(--z-radius, 8px);
            border: none; cursor: pointer;
            background: linear-gradient(135deg, var(--z-primary, #2c83ec), #1b6fd1);
            color: #fff; font-size: 13px; font-weight: 700;
            transition: all 0.2s;
        }
        .zcms-btn-primary:hover {
            box-shadow: 0 4px 12px rgba(44,131,236,0.3);
            transform: translateY(-1px);
        }
        .zcms-btn-secondary {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 10px 20px; border-radius: var(--z-radius, 8px);
            border: 1px solid var(--z-border, #e0e5ec);
            background: var(--z-card-bg, #fff);
            color: var(--z-text-secondary, #6b7a90);
            font-size: 13px; font-weight: 600; cursor: pointer;
            transition: all 0.2s;
        }
        .zcms-btn-secondary:hover {
            border-color: #94a3b8; color: var(--z-text, #333e50);
        }

        /* ── Empty state ─────────────────────────────────────── */
        .zcms-empty {
            text-align: center; padding: 40px 20px; color: var(--z-text-muted, #8d9bb5);
        }
        .zcms-empty i { font-size: 36px; opacity: 0.25; margin-bottom: 10px; display: block; }
        .zcms-empty p { font-size: 13px; margin: 0; }

        @media (max-width: 991px) {
            .zcms-page-header { flex-direction: column; gap: 16px; text-align: center; }
        }
        


/* ── §39.17 product_form.php ──────────────────────────── */
        .cms-form-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .cms-form-header h3 {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            color: var(--z-heading, #1e293b);
        }
        .cms-form-header h3 i {
            color: var(--z-primary, #2c83ec);
            margin-right: 8px;
        }
        .cms-form-panel {
            border: 1px solid var(--z-border, #e5e7eb);
            border-radius: 10px;
            background: #fff;
            margin-bottom: 20px;
            overflow: hidden;
        }
        .cms-form-panel .panel-title {
            background: #f8fafc;
            padding: 14px 18px;
            font-size: 14px;
            font-weight: 700;
            color: var(--z-heading, #1e293b);
            border-bottom: 1px solid var(--z-border, #e5e7eb);
            margin: 0;
        }
        .cms-form-panel .panel-title i {
            color: var(--z-primary, #2c83ec);
            margin-right: 8px;
        }
        .cms-form-panel .panel-inner {
            padding: 20px;
        }
        .cms-form-panel .form-group { margin-bottom: 16px; }
        .cms-form-panel label {
            font-size: 12px;
            font-weight: 600;
            color: var(--z-muted, #64748b);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            margin-bottom: 6px;
        }
        .cms-form-panel .form-control {
            border-radius: 8px;
            border: 1px solid var(--z-border, #e5e7eb);
            font-size: 13px;
        }
        .cms-form-panel .form-control:focus {
            border-color: var(--z-primary, #2c83ec);
            box-shadow: 0 0 0 3px rgba(44,131,236,0.10);
        }
        .cms-platforms-group {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }
        .cms-platforms-group label {
            text-transform: none;
            font-size: 13px;
            font-weight: 500;
            color: var(--z-text, #334155);
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }
        .cms-image-preview {
            width: 100%;
            max-width: 240px;
            border-radius: 8px;
            border: 1px solid var(--z-border, #e5e7eb);
            margin-top: 8px;
        }
        .cms-feature-row {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 8px;
        }
        .cms-feature-row input {
            border-radius: 8px;
            border: 1px solid var(--z-border, #e5e7eb);
            font-size: 13px;
            padding: 6px 10px;
        }
        .cms-feature-row .btn-remove-feature {
            background: #fee2e2;
            color: #dc2626;
            border: none;
            border-radius: 6px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
        }
        .cms-feature-row .btn-remove-feature:hover { background: #fecaca; }
        .btn-add-feature {
            font-size: 13px;
            font-weight: 600;
            border-radius: 8px;
            padding: 6px 16px;
        }
        .cms-featured-check {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 4px;
        }
        .cms-featured-check label {
            text-transform: none;
            font-size: 13px;
            font-weight: 500;
            color: var(--z-text, #334155);
            margin: 0;
            cursor: pointer;
        }
        .cms-gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 12px;
            margin-top: 10px;
        }
        .cms-gallery-item {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--z-border, #e5e7eb);
            aspect-ratio: 1;
        }
        .cms-gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .cms-gallery-item .gallery-remove {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(220,38,38,0.9);
            color: #fff;
            border: none;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .cms-gallery-item:hover .gallery-remove {
            opacity: 1;
        }
        .cms-upload-zone {
            border: 2px dashed var(--z-border, #e5e7eb);
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
            margin-top: 10px;
        }
        .cms-upload-zone:hover {
            border-color: var(--z-primary, #2c83ec);
            background: rgba(44,131,236,0.04);
        }
        .cms-upload-zone i {
            font-size: 24px;
            color: var(--z-muted, #64748b);
            margin-bottom: 6px;
        }
        .cms-upload-zone p {
            margin: 0;
            font-size: 12px;
            color: var(--z-muted, #64748b);
        }
        


/* ── §39.18 products.php ──────────────────────────── */
        /* ── CMS Products — Zoho CRM Inspired ─────────────────── */
        .zcms-page-header {
            background: linear-gradient(135deg, var(--z-primary, #2c83ec) 0%, #1565c0 100%);
            border-radius: var(--z-radius-lg, 12px);
            padding: 28px 32px;
            margin-bottom: 24px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 4px 20px rgba(44, 131, 236, 0.18);
        }
        .zcms-page-header h3 {
            margin: 0; font-size: 20px; font-weight: 700; color: #fff;
            display: flex; align-items: center; gap: 10px;
        }
        .zcms-page-header .zcms-subtitle {
            font-size: 13px; opacity: 0.85; margin-top: 4px;
        }
        .zcms-page-header .zcms-header-icon {
            width: 42px; height: 42px; border-radius: 10px;
            background: rgba(255,255,255,0.18); display: flex;
            align-items: center; justify-content: center; font-size: 18px;
        }
        .zcms-page-header .btn-zcms-add {
            background: #fff; color: var(--z-primary, #2c83ec);
            border: none; border-radius: var(--z-radius, 8px);
            padding: 10px 22px; font-weight: 700; font-size: 13px;
            display: inline-flex; align-items: center; gap: 8px;
            text-decoration: none; transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        .zcms-page-header .btn-zcms-add:hover {
            background: #f0f7ff; box-shadow: 0 4px 14px rgba(0,0,0,0.12);
            transform: translateY(-1px);
        }

        /* ── Stats row ───────────────────────────────────────── */
        .zcms-stats-row {
            display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
        }
        .zcms-stat-card {
            flex: 1; min-width: 160px;
            background: var(--z-card-bg, #fff);
            border: 1px solid var(--z-border, #e0e5ec);
            border-radius: var(--z-radius-lg, 12px);
            padding: 18px 20px;
            display: flex; align-items: center; gap: 14px;
            transition: box-shadow 0.2s;
        }
        .zcms-stat-card:hover { box-shadow: var(--z-shadow, 0 2px 8px rgba(0,0,0,0.08)); }
        .zcms-stat-icon {
            width: 44px; height: 44px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; flex-shrink: 0;
        }
        .zcms-stat-icon.blue { background: #e8f2fd; color: var(--z-primary, #2c83ec); }
        .zcms-stat-icon.green { background: #d1fae5; color: #059669; }
        .zcms-stat-icon.amber { background: #fef3c7; color: #d97706; }
        .zcms-stat-icon.red { background: #fee2e2; color: #dc2626; }
        .zcms-stat-icon.purple { background: #ede9fe; color: #7c3aed; }
        .zcms-stat-value {
            font-size: 22px; font-weight: 800; color: var(--z-text-heading, #1a2332); line-height: 1.1;
        }
        .zcms-stat-label {
            font-size: 12px; font-weight: 500; color: var(--z-text-muted, #8d9bb5);
            text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px;
        }

        /* ── Toolbar / filter bar ────────────────────────────── */
        .zcms-toolbar {
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
        }
        .zcms-toolbar-left {
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
        }
        .zcms-filter-group {
            display: flex; align-items: center; gap: 6px;
        }
        .zcms-filter-group label {
            font-size: 12px; font-weight: 600; color: var(--z-text-muted, #8d9bb5);
            text-transform: uppercase; letter-spacing: 0.3px; margin: 0; white-space: nowrap;
        }
        .zcms-filter-group select {
            border: 1px solid var(--z-border, #e0e5ec);
            border-radius: var(--z-radius, 8px);
            padding: 7px 30px 7px 12px;
            font-size: 13px; font-weight: 500;
            color: var(--z-text, #333e50);
            background: var(--z-card-bg, #fff);
            appearance: auto; min-width: 180px;
            transition: border-color 0.2s;
        }
        .zcms-filter-group select:focus {
            border-color: var(--z-primary, #2c83ec);
            outline: none; box-shadow: 0 0 0 3px rgba(44,131,236,0.10);
        }
        .zcms-toolbar-right {
            display: flex; align-items: center; gap: 4px;
        }
        .zcms-view-btn {
            width: 36px; height: 36px; border-radius: var(--z-radius, 8px);
            border: 1px solid var(--z-border, #e0e5ec);
            background: var(--z-card-bg, #fff); color: var(--z-text-muted, #8d9bb5);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; font-size: 14px; transition: all 0.2s;
        }
        .zcms-view-btn:hover, .zcms-view-btn.active {
            background: var(--z-primary, #2c83ec); color: #fff;
            border-color: var(--z-primary, #2c83ec);
        }

        /* ── Panel container ─────────────────────────────────── */
        .zcms-panel {
            background: var(--z-card-bg, #fff);
            border: 1px solid var(--z-border, #e0e5ec);
            border-radius: var(--z-radius-lg, 12px);
            overflow: hidden;
            box-shadow: var(--z-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
        }
        .zcms-panel .panel-body { padding: 0; }

        /* ── Table styling ───────────────────────────────────── */
        .zcms-table {
            width: 100%; border-collapse: collapse; margin: 0;
        }
        .zcms-table thead th {
            background: #f8f9fb;
            font-size: 11px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.6px;
            color: var(--z-text-muted, #8d9bb5);
            padding: 14px 18px;
            border-bottom: 2px solid var(--z-border, #e0e5ec);
            text-align: left; white-space: nowrap;
        }
        .zcms-table tbody td {
            padding: 14px 18px; font-size: 13px;
            color: var(--z-text, #333e50);
            border-bottom: 1px solid var(--z-border-light, #eef1f5);
            vertical-align: middle;
        }
        .zcms-table tbody tr {
            transition: background 0.15s;
        }
        .zcms-table tbody tr:hover {
            background: #f8fafd;
        }
        .zcms-table tbody tr:last-child td {
            border-bottom: none;
        }

        /* ── Product row elements ────────────────────────────── */
        .zcms-product-cell {
            display: flex; align-items: center; gap: 14px;
        }
        .zcms-product-thumb {
            width: 52px; height: 52px; border-radius: var(--z-radius, 8px);
            object-fit: cover; border: 1px solid var(--z-border-light, #eef1f5);
            flex-shrink: 0;
        }
        .zcms-product-thumb-placeholder {
            width: 52px; height: 52px; border-radius: var(--z-radius, 8px);
            background: linear-gradient(135deg, #f0f4f8, #e8ecf1);
            display: flex; align-items: center; justify-content: center;
            color: #c5ccd6; font-size: 20px; flex-shrink: 0;
        }
        .zcms-product-info { min-width: 0; }
        .zcms-product-name {
            font-size: 14px; font-weight: 600; color: var(--z-text-heading, #1a2332);
            display: block; line-height: 1.3;
        }
        .zcms-product-name:hover { color: var(--z-primary, #2c83ec); }
        .zcms-product-platforms {
            font-size: 11px; color: var(--z-text-muted, #8d9bb5); margin-top: 2px;
        }
        .zcms-category-tag {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 4px 12px; border-radius: 20px;
            font-size: 12px; font-weight: 500;
            background: #f0f4f8; color: var(--z-text-secondary, #6b7a90);
        }

        /* ── Badges ──────────────────────────────────────────── */
        .zcms-badge {
            display: inline-flex; align-items: center;
            padding: 4px 12px; border-radius: 20px;
            font-size: 11px; font-weight: 600;
            letter-spacing: 0.2px;
        }
        .zcms-badge-active { background: #d1fae5; color: #059669; }
        .zcms-badge-inactive { background: #fee2e2; color: #dc2626; }
        .zcms-badge-featured {
            background: linear-gradient(135deg, #dbeafe, #e0edff);
            color: var(--z-primary, #2c83ec);
        }
        .zcms-badge-featured i { margin-right: 3px; font-size: 10px; }
        .zcms-badge-no {
            background: #f1f5f9; color: #94a3b8;
        }

        /* ── Action buttons ──────────────────────────────────── */
        .zcms-actions {
            display: flex; align-items: center; gap: 6px;
        }
        .zcms-btn-action {
            width: 34px; height: 34px; border-radius: var(--z-radius, 8px);
            border: 1px solid var(--z-border, #e0e5ec);
            background: var(--z-card-bg, #fff);
            display: flex; align-items: center; justify-content: center;
            font-size: 13px; color: var(--z-text-muted, #8d9bb5);
            cursor: pointer; transition: all 0.15s; text-decoration: none;
        }
        .zcms-btn-action:hover {
            border-color: var(--z-primary, #2c83ec); color: var(--z-primary, #2c83ec);
            background: #f0f7ff;
        }
        .zcms-btn-action.danger:hover {
            border-color: #ef4444; color: #ef4444; background: #fef2f2;
        }
        .zcms-btn-action-text {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 7px 14px; border-radius: var(--z-radius, 8px);
            border: 1px solid var(--z-border, #e0e5ec);
            background: var(--z-card-bg, #fff);
            font-size: 12px; font-weight: 600;
            color: var(--z-text, #333e50);
            cursor: pointer; transition: all 0.15s; text-decoration: none;
        }
        .zcms-btn-action-text:hover {
            border-color: var(--z-primary, #2c83ec); color: var(--z-primary, #2c83ec);
            background: #f0f7ff;
        }

        /* ── Empty state ─────────────────────────────────────── */
        .zcms-empty-state {
            text-align: center; padding: 60px 20px;
        }
        .zcms-empty-state .empty-icon {
            width: 80px; height: 80px; border-radius: 50%;
            background: linear-gradient(135deg, #f0f4f8, #e8ecf1);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 20px; font-size: 32px; color: #c5ccd6;
        }
        .zcms-empty-state h5 {
            font-size: 16px; font-weight: 700; color: var(--z-text-heading, #1a2332);
            margin: 0 0 6px;
        }
        .zcms-empty-state p {
            font-size: 13px; color: var(--z-text-muted, #8d9bb5); margin: 0 0 20px;
        }

        /* ── Categories link ─────────────────────────────────── */
        .zcms-link-chip {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 18px; border-radius: var(--z-radius, 8px);
            border: 1px solid var(--z-border, #e0e5ec);
            background: var(--z-card-bg, #fff);
            font-size: 13px; font-weight: 600;
            color: var(--z-text, #333e50);
            text-decoration: none; transition: all 0.2s;
        }
        .zcms-link-chip:hover {
            border-color: var(--z-primary, #2c83ec); color: var(--z-primary, #2c83ec);
            background: #f0f7ff;
        }
        .zcms-link-chip i { font-size: 12px; }

        @media (max-width: 768px) {
            .zcms-stats-row { gap: 10px; }
            .zcms-stat-card { min-width: 140px; }
            .zcms-page-header { flex-direction: column; gap: 16px; text-align: center; }
        }
        


/* ── §39.19 quotes.php ──────────────────────────── */
/* ================================================================
   QUOTE REQUESTS — Zoho CRM Inspired Design
   ================================================================ */

/* Page Header */
.qr-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}
.qr-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.qr-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2c83ec 0%, #1b6fd1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(44,131,236,0.25);
}
.qr-page-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--z-heading, #1e293b);
    line-height: 1.2;
}
.qr-page-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--z-muted, #64748b);
    font-weight: 400;
}
.qr-header-actions {
    display: flex;
    gap: 8px;
}
.qr-btn-refresh {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--z-border, #e2e8f0);
    background: #fff;
    color: var(--z-muted, #64748b);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.qr-btn-refresh:hover {
    border-color: var(--z-primary, #2c83ec);
    color: var(--z-primary, #2c83ec);
    background: #f0f7ff;
}
.qr-btn-export {
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--z-border, #e2e8f0);
    background: #fff;
    color: var(--z-text, #334155);
    font-size: 13px;
    font-weight: 600;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.qr-btn-export:hover {
    border-color: var(--z-primary, #2c83ec);
    color: var(--z-primary, #2c83ec);
    background: #f0f7ff;
}

/* KPI Cards */
.qr-kpi-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.qr-kpi-card {
    flex: 1;
    min-width: 170px;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid var(--z-border, #e2e8f0);
    transition: box-shadow 0.2s, transform 0.2s;
}
.qr-kpi-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}
.qr-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.qr-kpi-blue    { background: #dbeafe; color: #2563eb; }
.qr-kpi-indigo  { background: #e0e7ff; color: #4f46e5; }
.qr-kpi-green   { background: #dcfce7; color: #16a34a; }
.qr-kpi-emerald { background: #d1fae5; color: #059669; }
.qr-kpi-orange  { background: #ffedd5; color: #ea580c; }
.qr-kpi-body {
    display: flex;
    flex-direction: column;
}
.qr-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--z-heading, #1e293b);
    line-height: 1;
}
.qr-kpi-label {
    font-size: 11px;
    color: var(--z-muted, #64748b);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Filter Bar */
.qr-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 16px;
    flex-wrap: wrap;
}
.qr-status-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.qr-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--z-border, #e2e8f0);
    background: #fff;
    color: var(--z-text, #334155);
    text-decoration: none;
    transition: all 0.2s;
}
.qr-tab:hover {
    border-color: var(--z-primary, #2c83ec);
    color: var(--z-primary, #2c83ec);
    background: #f0f7ff;
    text-decoration: none;
}
.qr-tab.active {
    background: var(--z-primary, #2c83ec);
    color: #fff;
    border-color: var(--z-primary, #2c83ec);
}
.qr-tab.active .qr-tab-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}
.qr-tab i {
    font-size: 11px;
}
.qr-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--z-border, #e2e8f0);
    color: var(--z-muted, #64748b);
    font-size: 11px;
    font-weight: 700;
    padding: 0 6px;
}
.qr-search-box {
    position: relative;
}
.qr-search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--z-muted, #94a3b8);
    font-size: 13px;
}
.qr-search-box input {
    width: 240px;
    height: 38px;
    border: 1px solid var(--z-border, #e2e8f0);
    border-radius: 8px;
    padding: 0 14px 0 34px;
    font-size: 13px;
    color: var(--z-text, #334155);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.qr-search-box input:focus {
    outline: none;
    border-color: var(--z-primary, #2c83ec);
    box-shadow: 0 0 0 3px rgba(44,131,236,0.1);
}

/* Table Card */
.qr-table-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--z-border, #e2e8f0);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}
.qr-table-card .dataTables_wrapper {
    padding: 0;
}
.qr-table-card .dataTables_length,
.qr-table-card .dataTables_filter {
    display: none;
}
.qr-table-card .dataTables_info,
.qr-table-card .dataTables_paginate {
    padding: 14px 20px;
}

/* Table Styles */
.qr-table {
    margin-bottom: 0 !important;
}
.qr-table thead th {
    background: #f8fafc;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    font-weight: 600;
    padding: 12px 16px;
    border-bottom: 1px solid var(--z-border, #e2e8f0);
    white-space: nowrap;
    border-top: none;
}
.qr-table tbody td {
    padding: 14px 16px;
    vertical-align: middle;
    font-size: 13px;
    color: var(--z-text, #334155);
    border-bottom: 1px solid #f1f5f9;
    border-top: none;
}
.qr-table tbody tr:hover {
    background: #f8fafc;
}
.qr-table tbody tr:last-child td {
    border-bottom: none;
}

/* Customer Cell */
.qr-customer-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.qr-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.qr-customer-name {
    font-weight: 600;
    color: var(--z-heading, #1e293b);
    font-size: 13px;
    line-height: 1.3;
}
.qr-customer-company {
    font-size: 11px;
    color: var(--z-muted, #94a3b8);
    margin-top: 1px;
}
.qr-customer-company i {
    font-size: 10px;
    margin-right: 3px;
}

/* Contact Cell */
.qr-contact-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.qr-contact-line {
    font-size: 12px;
    color: var(--z-text, #475569);
    white-space: nowrap;
}
.qr-contact-line i {
    font-size: 10px;
    color: var(--z-muted, #94a3b8);
    width: 14px;
    margin-right: 4px;
}

/* Service Tag */
.qr-service-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

/* Message Preview */
.qr-message-preview {
    font-size: 12px;
    color: var(--z-muted, #64748b);
    max-width: 200px;
    line-height: 1.5;
    cursor: default;
}

/* Status Badges */
.qr-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.qr-status-new       { background: #dbeafe; color: #2563eb; }
.qr-status-contacted  { background: #fef3c7; color: #d97706; }
.qr-status-converted  { background: #d1fae5; color: #059669; }
.qr-status-closed     { background: #f1f5f9; color: #64748b; }

/* Status Select */
.qr-status-select {
    border: 1px solid var(--z-border, #e2e8f0);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 8px;
    background: #fff;
    color: var(--z-text, #334155);
    cursor: pointer;
    transition: border-color 0.2s;
    min-width: 110px;
}
.qr-status-select:focus {
    outline: none;
    border-color: var(--z-primary, #2c83ec);
    box-shadow: 0 0 0 3px rgba(44,131,236,0.1);
}

/* Date Cell */
.qr-date-cell {
    display: flex;
    flex-direction: column;
}
.qr-date-main {
    font-size: 13px;
    font-weight: 500;
    color: var(--z-text, #334155);
}
.qr-date-time {
    font-size: 11px;
    color: var(--z-muted, #94a3b8);
    margin-top: 1px;
}

/* Action Buttons */
.qr-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}
.qr-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 0;
    transition: all 0.2s;
}
.qr-action-view {
    background: #eff6ff;
    color: #2563eb;
}
.qr-action-view:hover {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #93c5fd;
}
.qr-action-respond {
    background: #f0fdf4;
    color: #16a34a;
}
.qr-action-respond:hover {
    background: #dcfce7;
    color: #15803d;
    border-color: #86efac;
}
.qr-action-delete {
    background: #fef2f2;
    color: #dc2626;
}
.qr-action-delete:hover {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}

/* Modals */
.qr-modal .modal-content {
    border-radius: 12px;
    overflow: hidden;
    border: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.qr-modal-header {
    background: linear-gradient(135deg, #2c83ec 0%, #1b6fd1 100%);
    color: #fff;
    padding: 18px 24px;
    border-bottom: none;
}
.qr-modal-header .modal-title {
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}
.qr-modal-header .modal-title i {
    margin-right: 8px;
}
.qr-modal-header .close {
    color: #fff;
    opacity: 0.8;
    text-shadow: none;
    font-size: 22px;
}
.qr-modal-header .close:hover {
    opacity: 1;
}
.qr-respond-header {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.qr-modal-body {
    padding: 24px;
}
.qr-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
}

/* Modal Detail View */
.qr-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.qr-detail-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 20px;
}
.qr-detail-avatar {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2c83ec 0%, #1b6fd1 100%);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.qr-detail-top-info {
    flex: 1;
}
.qr-detail-name {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--z-heading, #1e293b);
}
.qr-detail-company {
    font-size: 13px;
    color: var(--z-muted, #64748b);
    margin-top: 2px;
}
.qr-detail-company i {
    font-size: 11px;
    margin-right: 4px;
}
.qr-detail-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.qr-detail-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.qr-detail-field-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--z-muted, #64748b);
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}
.qr-detail-field-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    color: var(--z-muted, #94a3b8);
    margin-bottom: 1px;
}
.qr-detail-field-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--z-text, #334155);
}
.qr-detail-desc-section {
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}
.qr-detail-desc-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    color: var(--z-muted, #64748b);
    margin-bottom: 10px;
}
.qr-detail-desc-label i {
    margin-right: 6px;
}
.qr-detail-desc-body {
    font-size: 13px;
    line-height: 1.7;
    color: var(--z-text, #334155);
    background: #f8fafc;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #f1f5f9;
}

/* Respond Modal */
.qr-respond-summary {
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
}
.qr-respond-to {
    font-size: 13px;
    color: var(--z-text, #334155);
    margin-bottom: 6px;
}
.qr-respond-service {
    font-size: 13px;
    color: var(--z-text, #334155);
    margin-bottom: 6px;
}
.qr-respond-orig {
    font-size: 12px;
    color: var(--z-text, #475569);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    line-height: 1.6;
}
.qr-respond-form {
    margin-top: 4px;
}
.qr-respond-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--z-heading, #1e293b);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.qr-respond-textarea {
    border-radius: 8px;
    border: 1px solid var(--z-border, #e2e8f0);
    font-size: 13px;
    padding: 12px 14px;
    resize: vertical;
    min-height: 120px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.qr-respond-textarea:focus {
    border-color: var(--z-primary, #2c83ec);
    box-shadow: 0 0 0 3px rgba(44,131,236,0.1);
}
.qr-btn-send {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
    transition: all 0.2s;
}
.qr-btn-send:hover,
.qr-btn-send:focus {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(5,150,105,0.3);
}
.qr-btn-send i {
    margin-right: 6px;
}

/* Responsive */
@media (max-width: 992px) {
    .qr-kpi-row {
        flex-wrap: wrap;
    }
    .qr-kpi-card {
        min-width: calc(50% - 12px);
        flex: unset;
    }
    .qr-detail-fields {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .qr-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .qr-filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .qr-search-box input {
        width: 100%;
    }
    .qr-kpi-card {
        min-width: 100%;
    }
}


/* ── §39.20 settings.php ──────────────────────────── */
        /* ── CMS Settings — Zoho CRM Inspired ─────────────────── */
        .zcms-page-header {
            background: linear-gradient(135deg, var(--z-primary, #2c83ec) 0%, #1565c0 100%);
            border-radius: var(--z-radius-lg, 12px);
            padding: 28px 32px;
            margin-bottom: 24px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 4px 20px rgba(44, 131, 236, 0.18);
        }
        .zcms-page-header h3 {
            margin: 0; font-size: 20px; font-weight: 700; color: #fff;
            display: flex; align-items: center; gap: 10px;
        }
        .zcms-page-header .zcms-subtitle {
            font-size: 13px; opacity: 0.85; margin-top: 4px;
        }
        .zcms-page-header .zcms-header-icon {
            width: 42px; height: 42px; border-radius: 10px;
            background: rgba(255,255,255,0.18); display: flex;
            align-items: center; justify-content: center; font-size: 18px;
        }

        /* ── Tabs ────────────────────────────────────────────── */
        .zcms-tabs-container {
            background: var(--z-card-bg, #fff);
            border: 1px solid var(--z-border, #e0e5ec);
            border-radius: var(--z-radius-lg, 12px);
            overflow: hidden;
            box-shadow: var(--z-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
        }
        .zcms-tabs {
            display: flex; align-items: center;
            background: #f8f9fb;
            border-bottom: 2px solid var(--z-border, #e0e5ec);
            padding: 0 8px;
            margin: 0; list-style: none;
            overflow-x: auto;
        }
        .zcms-tabs > li { margin: 0; }
        .zcms-tabs > li > a {
            display: flex; align-items: center; gap: 7px;
            padding: 14px 20px;
            font-size: 13px; font-weight: 600;
            color: var(--z-text-muted, #8d9bb5);
            text-decoration: none;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .zcms-tabs > li > a:hover {
            color: var(--z-primary, #2c83ec);
            background: transparent;
        }
        .zcms-tabs > li.active > a,
        .zcms-tabs > li.active > a:hover,
        .zcms-tabs > li.active > a:focus {
            color: var(--z-primary, #2c83ec);
            border-bottom-color: var(--z-primary, #2c83ec);
            background: transparent;
        }
        .zcms-tabs > li > a i {
            font-size: 14px; width: 16px; text-align: center;
        }

        /* ── Tab content ─────────────────────────────────────── */
        .zcms-tab-content {
            padding: 28px 32px;
        }

        /* ── Section title ───────────────────────────────────── */
        .zcms-section-title {
            display: flex; align-items: center; gap: 10px;
            font-size: 15px; font-weight: 700;
            color: var(--z-text-heading, #1a2332);
            margin: 0 0 22px 0;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--z-border-light, #eef1f5);
        }
        .zcms-section-title i {
            width: 32px; height: 32px; border-radius: var(--z-radius, 8px);
            background: var(--z-primary-light, #e8f2fd);
            color: var(--z-primary, #2c83ec);
            display: flex; align-items: center; justify-content: center;
            font-size: 14px;
        }
        .zcms-section-divider {
            border: none; border-top: 1px solid var(--z-border-light, #eef1f5);
            margin: 28px 0;
        }

        /* ── Form styling ────────────────────────────────────── */
        .zcms-form-group { margin-bottom: 20px; }
        .zcms-form-group label {
            display: block;
            font-size: 13px; font-weight: 600;
            color: var(--z-text, #333e50);
            margin-bottom: 7px;
        }
        .zcms-form-group label .social-icon {
            margin-right: 6px; font-size: 14px;
        }
        .zcms-form-group .form-control {
            border-radius: var(--z-radius, 8px);
            border: 1px solid var(--z-border, #e0e5ec);
            padding: 10px 14px; font-size: 14px;
            color: var(--z-text, #333e50);
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .zcms-form-group .form-control:focus {
            border-color: var(--z-primary, #2c83ec);
            box-shadow: 0 0 0 3px rgba(44,131,236,0.10);
        }
        .zcms-form-group .form-control::placeholder {
            color: var(--z-text-muted, #8d9bb5);
        }
        .zcms-form-group textarea.form-control {
            resize: vertical; min-height: 80px;
        }
        .zcms-form-group .help-text {
            font-size: 11px; color: var(--z-text-muted, #8d9bb5);
            margin-top: 5px; line-height: 1.5;
        }

        /* ── Social input with icon ──────────────────────────── */
        .zcms-input-icon-wrapper {
            position: relative;
        }
        .zcms-input-icon-wrapper .input-icon-left {
            position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
            font-size: 16px; color: var(--z-text-muted, #8d9bb5);
        }
        .zcms-input-icon-wrapper .form-control {
            padding-left: 40px;
        }

        /* ── OG Image preview ────────────────────────────────── */
        .zcms-og-preview {
            margin-top: 10px;
            border-radius: var(--z-radius, 8px);
            border: 1px solid var(--z-border, #e0e5ec);
            overflow: hidden; display: inline-block;
        }
        .zcms-og-preview img {
            max-width: 220px; max-height: 130px; display: block;
        }

        /* ── Code/mono textarea ──────────────────────────────── */
        .zcms-code-textarea {
            font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
            font-size: 12px !important;
            background: #f8f9fb !important;
            line-height: 1.6 !important;
        }

        /* ── Save bar ────────────────────────────────────────── */
        .zcms-save-bar {
            background: var(--z-card-bg, #fff);
            border: 1px solid var(--z-border, #e0e5ec);
            border-radius: var(--z-radius-lg, 12px);
            padding: 18px 28px;
            margin-top: 20px;
            display: flex; align-items: center;
            justify-content: space-between;
            box-shadow: var(--z-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
        }
        .zcms-save-bar .save-hint {
            font-size: 12px; color: var(--z-text-muted, #8d9bb5);
            display: flex; align-items: center; gap: 6px;
        }
        .zcms-save-bar .save-hint i { font-size: 14px; }
        .zcms-btn-save {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 11px 28px; border-radius: var(--z-radius, 8px);
            border: none; cursor: pointer;
            background: linear-gradient(135deg, var(--z-primary, #2c83ec), #1b6fd1);
            color: #fff; font-size: 14px; font-weight: 700;
            transition: all 0.2s;
        }
        .zcms-btn-save:hover {
            box-shadow: 0 4px 14px rgba(44,131,236,0.30);
            transform: translateY(-1px);
        }

        @media (max-width: 768px) {
            .zcms-tab-content { padding: 20px; }
            .zcms-page-header { flex-direction: column; gap: 12px; text-align: center; padding: 22px; }
        }
        


/* ── §39.21 solution_form.php ──────────────────────────── */
        .cms-header {
            background: linear-gradient(135deg, #2c83ec 0%, #1b6fd1 100%);
            border-radius: 12px;
            padding: 28px 32px;
            margin-bottom: 24px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .cms-header h3 {
            margin: 0; font-size: 22px; font-weight: 700; color: #fff;
        }
        .cms-header .cms-subtitle {
            font-size: 13px; opacity: 0.85; margin-top: 4px;
        }
        .cms-form-section {
            background: #fff;
            border: 1px solid var(--z-border, #e5e7eb);
            border-radius: 10px;
            padding: 24px;
            margin-bottom: 20px;
        }
        .cms-form-section h4 {
            font-size: 15px; font-weight: 700;
            color: var(--z-heading, #1e293b);
            margin: 0 0 18px 0; padding-bottom: 12px;
            border-bottom: 1px solid var(--z-border, #e5e7eb);
        }
        .cms-form-section h4 i {
            color: var(--z-primary, #2c83ec); margin-right: 8px;
        }
        .cms-form-label {
            font-size: 13px; font-weight: 600;
            color: var(--z-heading, #1e293b); margin-bottom: 6px;
        }
        .cms-form-hint {
            font-size: 11px; color: var(--z-muted, #64748b); margin-top: 4px;
        }
        .cms-upload-zone {
            border: 2px dashed var(--z-border, #e5e7eb);
            border-radius: 10px; padding: 24px; text-align: center;
            color: var(--z-muted, #64748b); cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
            position: relative;
        }
        .cms-upload-zone:hover {
            border-color: var(--z-primary, #2c83ec); background: #f0f7ff;
        }
        .cms-upload-zone i {
            font-size: 28px; display: block; margin-bottom: 8px; opacity: 0.5;
        }
        /* Dynamic rows */
        .dynamic-rows { margin-top: 10px; }
        .dynamic-row {
            display: flex; gap: 10px; align-items: flex-start;
            margin-bottom: 10px; padding: 14px;
            background: #f8fafc; border-radius: 8px;
            border: 1px solid var(--z-border, #e5e7eb);
        }
        .dynamic-row .form-control { font-size: 13px; }
        .dynamic-row .btn-remove-row {
            background: none; border: none; color: #dc2626 !important;
            cursor: pointer; font-size: 16px; padding: 6px;
            flex-shrink: 0; margin-top: 2px;
        }
        .dynamic-row .btn-remove-row:hover { color: #991b1b !important; }
        .btn-add-row {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 16px; border-radius: 8px; font-size: 12px;
            font-weight: 600; border: 1px dashed var(--z-primary, #2c83ec);
            background: #f0f7ff; color: var(--z-primary, #2c83ec) !important;
            cursor: pointer; transition: all 0.2s; margin-top: 8px;
        }
        .btn-add-row:hover {
            background: var(--z-primary, #2c83ec); color: #fff !important;
        }
        


/* ── §39.22 solutions.php ──────────────────────────── */
        /* ── CMS Solutions — Zoho CRM Inspired ────────────────── */
        .zcms-page-header {
            background: linear-gradient(135deg, var(--z-primary, #2c83ec) 0%, #1565c0 100%);
            border-radius: var(--z-radius-lg, 12px);
            padding: 28px 32px;
            margin-bottom: 24px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 4px 20px rgba(44, 131, 236, 0.18);
        }
        .zcms-page-header h3 {
            margin: 0; font-size: 20px; font-weight: 700; color: #fff;
            display: flex; align-items: center; gap: 10px;
        }
        .zcms-page-header .zcms-subtitle {
            font-size: 13px; opacity: 0.85; margin-top: 4px;
        }
        .zcms-page-header .zcms-header-icon {
            width: 42px; height: 42px; border-radius: 10px;
            background: rgba(255,255,255,0.18); display: flex;
            align-items: center; justify-content: center; font-size: 18px;
        }
        .zcms-page-header .btn-zcms-add {
            background: #fff; color: var(--z-primary, #2c83ec);
            border: none; border-radius: var(--z-radius, 8px);
            padding: 10px 22px; font-weight: 700; font-size: 13px;
            display: inline-flex; align-items: center; gap: 8px;
            text-decoration: none; transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        .zcms-page-header .btn-zcms-add:hover {
            background: #f0f7ff; box-shadow: 0 4px 14px rgba(0,0,0,0.12);
            transform: translateY(-1px);
        }

        /* ── Solutions stats ──────────────────────────────────── */
        .zcms-solution-count {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 16px; border-radius: 20px;
            background: var(--z-card-bg, #fff);
            border: 1px solid var(--z-border, #e0e5ec);
            font-size: 12px; font-weight: 600;
            color: var(--z-text-secondary, #6b7a90);
            margin-bottom: 20px;
        }
        .zcms-solution-count .count-num {
            display: inline-flex; align-items: center; justify-content: center;
            width: 24px; height: 24px; border-radius: 50%;
            background: var(--z-primary-light, #e8f2fd);
            color: var(--z-primary, #2c83ec);
            font-size: 12px; font-weight: 800;
        }

        /* ── Solutions grid ──────────────────────────────────── */
        .zcms-solutions-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 24px;
        }

        /* ── Solution card ───────────────────────────────────── */
        .zcms-solution-card {
            background: var(--z-card-bg, #fff);
            border: 1px solid var(--z-border, #e0e5ec);
            border-radius: var(--z-radius-lg, 12px);
            padding: 0;
            overflow: hidden;
            transition: all 0.25s;
            position: relative;
        }
        .zcms-solution-card:hover {
            border-color: var(--z-primary, #2c83ec);
            box-shadow: 0 8px 28px rgba(44,131,236,0.12);
            transform: translateY(-3px);
        }
        .zcms-solution-card-top {
            padding: 28px 24px 20px;
            text-align: center;
            position: relative;
        }
        .zcms-solution-card-top::after {
            content: '';
            position: absolute; bottom: 0; left: 24px; right: 24px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--z-border, #e0e5ec), transparent);
        }
        .zcms-solution-icon {
            width: 64px; height: 64px; border-radius: 16px;
            background: linear-gradient(135deg, var(--z-primary, #2c83ec) 0%, #1565c0 100%);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 16px; font-size: 26px; color: #fff;
            box-shadow: 0 4px 14px rgba(44,131,236,0.25);
        }
        .zcms-solution-title {
            font-size: 16px; font-weight: 700;
            color: var(--z-text-heading, #1a2332);
            margin-bottom: 8px; line-height: 1.3;
        }
        .zcms-solution-tagline {
            font-size: 13px; color: var(--z-text-muted, #8d9bb5);
            line-height: 1.5; min-height: 40px;
            display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden;
        }
        .zcms-solution-card-bottom {
            padding: 16px 24px;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            background: #f8f9fb;
        }
        .zcms-solution-card-bottom .btn-sol {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 7px 16px; border-radius: var(--z-radius, 8px);
            font-size: 12px; font-weight: 600; text-decoration: none;
            transition: all 0.15s; cursor: pointer;
        }
        .zcms-solution-card-bottom .btn-sol-edit {
            border: 1px solid var(--z-border, #e0e5ec);
            background: var(--z-card-bg, #fff);
            color: var(--z-text, #333e50);
        }
        .zcms-solution-card-bottom .btn-sol-edit:hover {
            border-color: var(--z-primary, #2c83ec);
            color: var(--z-primary, #2c83ec);
            background: #f0f7ff;
        }
        .zcms-solution-card-bottom .btn-sol-delete {
            border: 1px solid #fecaca;
            background: #fef2f2;
            color: #dc2626;
        }
        .zcms-solution-card-bottom .btn-sol-delete:hover {
            border-color: #ef4444;
            background: #fee2e2;
        }

        /* ── Empty state ─────────────────────────────────────── */
        .zcms-empty-panel {
            background: var(--z-card-bg, #fff);
            border: 1px solid var(--z-border, #e0e5ec);
            border-radius: var(--z-radius-lg, 12px);
            box-shadow: var(--z-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
        }
        .zcms-empty-state {
            text-align: center; padding: 60px 20px;
        }
        .zcms-empty-state .empty-icon {
            width: 80px; height: 80px; border-radius: 50%;
            background: linear-gradient(135deg, #f0f4f8, #e8ecf1);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 20px; font-size: 32px; color: #c5ccd6;
        }
        .zcms-empty-state h5 {
            font-size: 16px; font-weight: 700;
            color: var(--z-text-heading, #1a2332);
            margin: 0 0 6px;
        }
        .zcms-empty-state p {
            font-size: 13px; color: var(--z-text-muted, #8d9bb5);
            margin: 0 0 20px; max-width: 380px; margin-left: auto; margin-right: auto;
        }
        .zcms-btn-primary {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 10px 24px; border-radius: var(--z-radius, 8px);
            border: none; cursor: pointer;
            background: linear-gradient(135deg, var(--z-primary, #2c83ec), #1b6fd1);
            color: #fff; font-size: 13px; font-weight: 700;
            text-decoration: none; transition: all 0.2s;
        }
        .zcms-btn-primary:hover {
            box-shadow: 0 4px 14px rgba(44,131,236,0.30);
            transform: translateY(-1px); color: #fff;
        }

        @media (max-width: 991px) {
            .zcms-solutions-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 575px) {
            .zcms-solutions-grid { grid-template-columns: 1fr; }
            .zcms-page-header { flex-direction: column; gap: 16px; text-align: center; padding: 22px; }
        }
        


/* ── §39.23 testimonials.php ──────────────────────────── */
        /* ===== CMS Testimonials — Zoho CRM Inspired ===== */
        .cms-test-wrap * { box-sizing: border-box; }

        /* --- Page Header --- */
        .cms-test-header {
            display: flex; align-items: center; justify-content: space-between;
            background: linear-gradient(135deg, #1B73E8 0%, #1252a6 100%);
            border-radius: 12px; padding: 26px 32px; margin-bottom: 24px;
            color: #fff; box-shadow: 0 4px 20px rgba(27,115,232,.18);
        }
        .cms-test-header .hdr-left { display: flex; align-items: center; gap: 14px; }
        .cms-test-header .hdr-icon {
            width: 44px; height: 44px; border-radius: 10px;
            background: rgba(255,255,255,.18); display: flex;
            align-items: center; justify-content: center; font-size: 18px;
        }
        .cms-test-header h3 { margin: 0; font-size: 19px; font-weight: 700; color: #fff; }
        .cms-test-header .subtitle { font-size: 12.5px; opacity: .82; margin-top: 3px; }
        .cms-test-header .btn-add-test {
            background: #fff; color: #1B73E8; border: none; font-weight: 600;
            font-size: 13px; padding: 9px 22px; border-radius: 8px;
            display: inline-flex; align-items: center; gap: 6px;
            transition: box-shadow .2s, transform .15s; cursor: pointer;
        }
        .cms-test-header .btn-add-test:hover {
            box-shadow: 0 6px 18px rgba(0,0,0,.15); transform: translateY(-1px);
        }

        /* --- Stats Row --- */
        .test-stats-row {
            display: flex; gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
        }
        .test-stat-chip {
            display: flex; align-items: center; gap: 10px;
            background: #fff; border: 1px solid var(--z-border, #e5e8eb);
            border-radius: 10px; padding: 12px 20px; min-width: 150px;
            transition: box-shadow .2s;
        }
        .test-stat-chip:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
        .test-stat-chip .chip-icon {
            width: 36px; height: 36px; border-radius: 8px; display: flex;
            align-items: center; justify-content: center; font-size: 14px;
        }
        .test-stat-chip .chip-icon.total  { background: #e8f0fe; color: #1B73E8; }
        .test-stat-chip .chip-icon.stars  { background: #fff8e1; color: #f59e0b; }
        .test-stat-chip .chip-num { font-size: 20px; font-weight: 700; color: var(--z-heading, #1a1a2e); line-height: 1; }
        .test-stat-chip .chip-label { font-size: 11px; color: var(--z-text-muted, #6b7280); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }

        /* --- Testimonial Card --- */
        .tcard {
            background: #fff; border: 1px solid var(--z-border, #e5e8eb);
            border-radius: 12px; padding: 0; margin-bottom: 20px;
            transition: box-shadow .2s, transform .15s; position: relative;
            overflow: hidden;
        }
        .tcard:hover {
            box-shadow: 0 6px 24px rgba(0,0,0,.08); transform: translateY(-2px);
        }
        .tcard .card-top {
            padding: 22px 22px 0; position: relative;
        }
        .tcard .quote-watermark {
            position: absolute; top: 12px; right: 16px;
            font-size: 48px; color: var(--z-bg-light, #f0f3f8);
            line-height: 1; pointer-events: none;
        }

        /* Avatar & info */
        .tcard .person-row {
            display: flex; align-items: center; gap: 14px;
            margin-bottom: 16px;
        }
        .tcard .avatar-img {
            width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
            border: 2px solid var(--z-border, #e5e8eb);
        }
        .tcard .avatar-initials {
            width: 50px; height: 50px; border-radius: 50%;
            background: linear-gradient(135deg, #1B73E8, #1252a6);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 17px; font-weight: 700; flex-shrink: 0;
        }
        .tcard .person-info .p-name {
            font-size: 14px; font-weight: 700;
            color: var(--z-heading, #1a1a2e); margin: 0;
        }
        .tcard .person-info .p-role {
            font-size: 12px; color: var(--z-text-muted, #6b7280);
            margin: 2px 0 0 0;
        }

        /* Stars */
        .tcard .star-row { margin-bottom: 12px; display: flex; gap: 2px; }
        .tcard .star-row i { font-size: 13px; }
        .tcard .star-row i.filled { color: #f5a623; }
        .tcard .star-row i.empty  { color: #e0e2e6; }

        /* Quote text */
        .tcard .quote-text {
            font-size: 13.5px; line-height: 1.65; color: var(--z-text, #444);
            padding: 0 22px 18px;
            display: -webkit-box; -webkit-line-clamp: 4;
            -webkit-box-orient: vertical; overflow: hidden;
        }

        /* Card footer */
        .tcard .card-foot {
            display: flex; gap: 0; border-top: 1px solid var(--z-border, #eef0f2);
        }
        .tcard .card-foot .foot-btn {
            flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
            padding: 10px 0; font-size: 12px; font-weight: 600;
            color: var(--z-text-muted, #888); background: none; border: none;
            cursor: pointer; transition: all .15s; text-decoration: none;
        }
        .tcard .card-foot .foot-btn:first-child { border-right: 1px solid var(--z-border, #eef0f2); }
        .tcard .card-foot .foot-btn:hover { background: var(--z-bg-light, #f8f9fb); color: #1B73E8; }
        .tcard .card-foot .foot-btn.del:hover { color: #dc2626; background: #fef2f2; }

        /* --- Empty State --- */
        .test-empty {
            text-align: center; padding: 70px 20px; color: var(--z-text-muted, #999);
        }
        .test-empty .empty-icon {
            width: 80px; height: 80px; border-radius: 50%;
            background: var(--z-bg-light, #f0f3f8); display: flex;
            align-items: center; justify-content: center;
            margin: 0 auto 20px; font-size: 32px; color: #c5c9cf;
        }
        .test-empty h4 { font-size: 16px; font-weight: 600; color: var(--z-heading, #1a1a2e); margin-bottom: 6px; }
        .test-empty p { font-size: 13.5px; margin-bottom: 20px; }
        .test-empty .btn-create {
            background: #1B73E8; color: #fff; border: none; font-weight: 600;
            font-size: 13px; padding: 9px 22px; border-radius: 8px;
            display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
        }
        .test-empty .btn-create:hover { background: #1565c0; }

        /* --- Modal Styling --- */
        .test-modal .modal-content {
            border: none; border-radius: 14px;
            box-shadow: 0 12px 48px rgba(0,0,0,.18);
            overflow: hidden;
        }
        .test-modal .modal-header {
            background: var(--z-bg-light, #f8f9fb);
            border-bottom: 1px solid var(--z-border, #eef0f2);
            padding: 18px 24px; display: flex; align-items: center;
        }
        .test-modal .modal-header .modal-title {
            font-size: 15px; font-weight: 700;
            color: var(--z-heading, #1a1a2e);
            display: flex; align-items: center; gap: 8px;
        }
        .test-modal .modal-header .modal-title .title-icon {
            width: 30px; height: 30px; border-radius: 8px;
            background: #e8f0fe; color: #1B73E8; display: flex;
            align-items: center; justify-content: center; font-size: 12px;
        }
        .test-modal .modal-header .close {
            font-size: 22px; color: var(--z-text-muted, #999);
            opacity: 1; margin-left: auto;
        }
        .test-modal .modal-body { padding: 24px; }
        .test-modal .modal-body .form-group label {
            font-size: 12.5px; font-weight: 600;
            color: var(--z-heading, #1a1a2e); margin-bottom: 5px;
        }
        .test-modal .modal-body .form-control {
            border-radius: 8px; font-size: 13px;
            border: 1px solid var(--z-border, #dde0e5);
            transition: border-color .2s, box-shadow .2s;
        }
        .test-modal .modal-body .form-control:focus {
            border-color: #1B73E8;
            box-shadow: 0 0 0 3px rgba(27,115,232,.1);
        }
        .test-modal .modal-footer {
            border-top: 1px solid var(--z-border, #eef0f2);
            padding: 14px 24px; display: flex; gap: 8px; justify-content: flex-end;
        }
        .test-modal .btn-modal-cancel {
            background: var(--z-bg-light, #f0f3f8); color: var(--z-text-muted, #6b7280);
            border: 1px solid var(--z-border, #e5e8eb); font-weight: 600;
            font-size: 13px; padding: 8px 20px; border-radius: 8px; cursor: pointer;
        }
        .test-modal .btn-modal-cancel:hover { background: #e8eaee; }
        .test-modal .btn-modal-save {
            background: #1B73E8; color: #fff; border: none; font-weight: 600;
            font-size: 13px; padding: 8px 22px; border-radius: 8px;
            display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
        }
        .test-modal .btn-modal-save:hover { background: #1565c0; }

        /* Star rating input */
        .star-rating-input {
            display: flex; gap: 4px; flex-direction: row-reverse;
            justify-content: flex-end;
        }
        .star-rating-input label {
            cursor: pointer; font-size: 22px; color: #ddd; transition: color .15s;
        }
        .star-rating-input label:hover,
        .star-rating-input label:hover ~ label,
        .star-rating-input input:checked + label,
        .star-rating-input input:checked + label ~ label {
            color: #f5a623;
        }
        .star-rating-input input { display: none; }
        .star-rating-input label:hover ~ label,
        .star-rating-input input:checked ~ label { color: #f5a623; }

        /* Avatar preview */
        .avatar-preview-small {
            width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
            border: 2px solid var(--z-border, #e5e8eb); margin-top: 8px;
        }

        /* Responsive grid fix */
        @media (max-width: 991px) {
            .tcard-grid .col-md-4 { width: 50%; }
        }
        @media (max-width: 600px) {
            .tcard-grid .col-md-4 { width: 100%; }
        }
        


/* ====================== END SECTION 39 ====================== */

/* ====================== SECTION 40: SINGLE TICKET RIGHT PANEL FIX ====================== */
/* The Ticket Information panel (#ticketDetails.ticket-right-column) is
   position:fixed and anchored at top:58px (below the header), but Tailwind's
   tw-h-full gives it height:100vh -- so its bottom extends ~58px BELOW the
   viewport and the last fields (Project, Merge Ticket #) get clipped and can
   never scroll into view. Pin the bottom to the viewport instead of using a
   full-viewport height; bottom:0 + height:auto is header-height agnostic, so
   internal overflow-y:auto can reach every field. */
#ticketDetails.ticket-right-column {
    height: auto !important;
    bottom: 0 !important;
}
/* ====================== END SECTION 40 ====================== */

/* ====================== SECTION 41: CLIENT PORTAL RESTYLE (Zoho / admin look) ======================
   Scoped to body.customers so it NEVER affects the admin area. Re-skins the whole
   client portal (login, OTP, dashboard, tickets, invoices, projects, profile…) onto
   the admin design system using the --z-* tokens defined at the top of this file. */

body.customers {
    background: #f3f5f9 !important;
    color: var(--z-text);
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
/* The portal has NO left sidebar, so undo the admin layout that custom.css applies
   globally (body flex + #wrapper margin-left:220px for the admin sidebar) — otherwise
   all portal content is pushed ~220px to the right and looks off-centre. */
body.customers { display: block !important; }
body.customers #wrapper,
body.customers #content { margin-left: 0 !important; width: auto !important; }
body.customers h1, body.customers h2, body.customers h3,
body.customers h4, body.customers h5 { color: var(--z-text-heading); }
body.customers a { color: var(--z-primary); }

/* ---- Top navigation bar ---- */
body.customers .navbar.header {
    background: var(--z-card-bg) !important;
    border: none;
    border-bottom: 1px solid var(--z-sidebar-border);
    box-shadow: 0 1px 4px rgba(16,30,54,0.05);
    margin-bottom: 0;
    min-height: 64px;
    border-radius: 0;
}
body.customers .navbar.header .navbar-brand.logo {
    height: 64px; display: flex; align-items: center; padding: 8px 0;
}
body.customers .navbar.header .navbar-brand.logo img { max-height: 40px; width: auto; }
body.customers .navbar.header .navbar-nav > li > a {
    color: var(--z-sidebar-text);
    font-size: 14px; font-weight: 600;
    padding: 21px 16px;
    border-bottom: 2px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
}
body.customers .navbar.header .navbar-nav > li > a:hover,
body.customers .navbar.header .navbar-nav > li > a:focus {
    color: var(--z-primary); background: var(--z-sidebar-hover);
}
body.customers .navbar.header .navbar-nav > li.active > a {
    color: var(--z-primary); background: transparent; border-bottom-color: var(--z-primary);
}
body.customers .navbar.header .navbar-nav > li > a i { margin-right: 6px; }
body.customers .navbar.header .client-profile-image-small {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--z-border-light);
}
body.customers .navbar.header .dropdown-menu {
    border: 1px solid var(--z-border); border-radius: var(--z-radius);
    box-shadow: 0 8px 28px rgba(16,30,54,0.12); padding: 6px; margin-top: 4px;
}
body.customers .navbar.header .dropdown-menu > li > a {
    border-radius: var(--z-radius-sm); padding: 9px 14px; font-size: 13.5px; color: var(--z-text);
}
body.customers .navbar.header .dropdown-menu > li > a:hover { background: var(--z-sidebar-hover); color: var(--z-primary); }
body.customers .navbar.header .navbar-toggle { border-color: var(--z-border); }
body.customers .navbar.header .navbar-toggle .icon-bar { background: var(--z-text-secondary); }

/* ---- Content area ---- */
body.customers #content { padding-top: 28px; padding-bottom: 48px; }
body.customers #content > .container { max-width: 1200px; }

/* ---- Submenu (files / calendar pills) ---- */
body.customers .customer-top-submenu {
    background: transparent; border: none; padding: 0; margin: 0 0 18px; display: flex; gap: 8px; list-style: none;
}
body.customers .customer-top-submenu > li { float: none; }
body.customers .customer-top-submenu > li > a {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--z-card-bg); border: 1px solid var(--z-border);
    border-radius: 30px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--z-text-secondary);
}
body.customers .customer-top-submenu > li > a:hover { color: var(--z-primary); border-color: var(--z-primary); }

/* ---- Cards / panels ---- */
body.customers .panel_s {
    background: var(--z-card-bg);
    border: 1px solid var(--z-border-light);
    border-radius: var(--z-radius-lg);
    box-shadow: 0 2px 10px rgba(16,30,54,0.04);
}
body.customers .panel_s > .panel-body { padding: 22px 24px; }

/* ---- Buttons (replace theme maroon with admin blue) ---- */
body.customers .btn { border-radius: var(--z-radius); }
body.customers .btn-primary, body.customers .btn-info {
    background: var(--z-primary) !important; border-color: var(--z-primary) !important; color: #fff !important;
    font-weight: 600; box-shadow: 0 2px 6px rgba(44,131,236,0.25);
}
body.customers .btn-primary:hover, body.customers .btn-info:hover,
body.customers .btn-primary:focus, body.customers .btn-info:focus {
    background: var(--z-primary-hover) !important; border-color: var(--z-primary-hover) !important; color: #fff !important;
}
body.customers .btn-default {
    background: #fff; border: 1px solid var(--z-border); color: var(--z-text); font-weight: 600;
}
body.customers .btn-default:hover { background: var(--z-sidebar-hover); border-color: var(--z-primary); color: var(--z-primary); }

/* ---- Forms ---- */
body.customers .form-control {
    border: 1px solid var(--z-border); border-radius: var(--z-radius); box-shadow: none;
    color: var(--z-text); height: 42px; padding: 8px 14px;
}
body.customers textarea.form-control { height: auto; }
body.customers .form-control:focus { border-color: var(--z-primary); box-shadow: 0 0 0 3px var(--z-primary-light); }
body.customers .form-group label, body.customers label.control-label {
    font-weight: 600; color: var(--z-text-secondary); font-size: 13px; margin-bottom: 6px;
}

/* ---- Tables ---- */
body.customers .table > thead > tr > th {
    background: var(--z-primary-50); color: var(--z-text-secondary);
    text-transform: uppercase; font-size: 11px; letter-spacing: .4px; font-weight: 700;
    border-bottom: 1px solid var(--z-border);
}
body.customers .table > tbody > tr > td { border-top: 1px solid var(--z-border-light); vertical-align: middle; color: var(--z-text); }
body.customers .table-hover > tbody > tr:hover { background: var(--z-sidebar-hover); }

/* ---- Labels / badges ---- */
body.customers .label, body.customers .badge { border-radius: 20px; font-weight: 600; padding: .35em .7em; }

/* ---- Login / OTP / register pages ---- */
body.customers.customers_login #content { padding-top: 48px; padding-bottom: 60px; }
body.customers .input-group-addon { background: var(--z-sidebar-hover); border: 1px solid var(--z-border); color: var(--z-text-secondary); border-radius: var(--z-radius); }

/* Perfectly-centered auth card (login + OTP). Uses a plain centered wrapper
   instead of Bootstrap col-offset, which was rendering the card off-center. */
body.customers .ws-auth { width: 100%; max-width: 430px; margin: 0 auto; }
body.customers .ws-auth-head { text-align: center; margin-bottom: 22px; }
body.customers .ws-auth-icon {
    width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: var(--z-primary-light); color: var(--z-primary); font-size: 24px;
}
body.customers .ws-auth-head .login-heading { font-size: 24px; font-weight: 700; margin: 0 0 6px; color: var(--z-text-heading); }
body.customers .ws-auth-head p { font-size: 14px; margin: 0; color: var(--z-text-secondary); }
body.customers .ws-auth-card { margin-bottom: 0; border: none; box-shadow: 0 10px 40px rgba(16,30,54,0.10); border-radius: var(--z-radius-lg); }
body.customers .ws-auth-card .panel-body { padding: 26px 28px; }
body.customers .ws-auth .btn-lg { padding: 11px 18px; font-size: 15px; font-weight: 600; }
body.customers .ws-auth .btn-block + .btn-block { margin-top: 10px; }
body.customers .ws-auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--z-text-muted); }
body.customers .ws-auth-divider::before, body.customers .ws-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--z-border); }
body.customers .ws-auth-divider span { font-size: 11px; font-weight: 700; letter-spacing: .5px; }
body.customers .ws-auth-foot { margin-top: 18px; }
body.customers .ws-auth-inner { margin-top: 8px; }

/* ---- Profile read-only fields + change-password card ---- */
body.customers .ws-profile-locked-note {
    background: var(--z-primary-50); border: 1px solid var(--z-primary-light);
    color: var(--z-text-secondary); border-radius: var(--z-radius);
    padding: 11px 14px; font-size: 12.5px; line-height: 1.5; margin-bottom: 18px;
}
body.customers .ws-profile-locked-note i { color: var(--z-primary); margin-right: 6px; }
body.customers input[readonly] { background: var(--z-sidebar-hover) !important; color: var(--z-text-secondary); cursor: not-allowed; }
body.customers .ws-pwd-icon {
    width: 56px; height: 56px; margin: 6px auto 14px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--z-primary-light); color: var(--z-primary); font-size: 22px;
}

/* ---- Dashboard Quick Actions ---- */
body.customers .ws-qa-heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--z-text-muted); margin: 18px 0 14px; }
body.customers .ws-quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
body.customers .ws-qa-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    background: var(--z-card-bg); border: 1px solid var(--z-border-light); border-radius: var(--z-radius-lg);
    padding: 18px; box-shadow: 0 2px 10px rgba(16,30,54,0.04); transition: all .15s ease; text-decoration: none;
}
body.customers .ws-qa-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,30,54,0.10); border-color: var(--z-primary); }
body.customers .ws-qa-ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; }
body.customers .ws-qa-label { font-size: 14.5px; font-weight: 700; color: var(--z-text-heading); }
body.customers .ws-qa-sub { font-size: 12px; color: var(--z-text-secondary); margin-top: -4px; }
body.customers .ws-qa-ic.ic-blue   { background: #eaf0ff; color: #3b5bdb; }
body.customers .ws-qa-ic.ic-green  { background: #e7f7ec; color: #127a3e; }
body.customers .ws-qa-ic.ic-orange { background: #fff3e6; color: #d9822b; }
body.customers .ws-qa-ic.ic-purple { background: #f3ebff; color: #7048e8; }
body.customers .ws-qa-ic.ic-teal   { background: #e6f7f5; color: #0d9488; }
body.customers .ws-qa-ic.ic-indigo { background: #e8eaff; color: #4f46e5; }
body.customers .ws-qa-ic.ic-slate  { background: #eef1f5; color: #475569; }
body.customers .ws-qa-ic.ic-red    { background: #fdeaea; color: #c0392b; }
@media (max-width: 991px) { body.customers .ws-quick-actions { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { body.customers .ws-quick-actions { grid-template-columns: repeat(2, 1fr); } }

/* ====================== END SECTION 41 ====================== */