/**
 * CLUSTERWEB SOLUTION PRIVATE LIMITED
 * CENTRALIZED ENTERPRISE LIGHT DESIGN SYSTEM
 * Compiled at: 2026-11-04 11:25:44
 */


/* --- tokens.css --- */
/**
 * ==============================================================================
 * CLUSTERWEB SOLUTION PRIVATE LIMITED — DESIGN SYSTEM
 * 1. DESIGN TOKENS (LIGHT THEME ONLY)
 * ==============================================================================
 * Strict Light Theme Tokens: Crisp white surfaces, subtle borders, high-contrast
 * slate typography, and restrained corporate accents.
 * ==============================================================================
 */

:root {
    /* --- Primary Brand Colors (Enterprise Royal Blue) --- */
    --theme-primary: #2563eb;
    --theme-primary-hover: #1d4ed8;
    --theme-primary-active: #1e40af;
    --theme-primary-light: #eff6ff;
    --theme-primary-lighter: #f8fafc;
    --theme-primary-dark: #1e3a8a;
    --theme-primary-rgb: 37, 99, 235;
    --theme-primary-subtle: rgba(37, 99, 235, 0.08);
    --theme-primary-glow: rgba(37, 99, 235, 0.20);
    --theme-primary-gradient: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --theme-primary-gradient-alt: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);

    /* --- Secondary & Accent (Indigo & Sky) --- */
    --theme-secondary: #4f46e5;
    --theme-secondary-hover: #4338ca;
    --theme-secondary-light: #eef2ff;
    --theme-secondary-rgb: 79, 70, 229;
    --theme-secondary-subtle: rgba(79, 70, 229, 0.08);

    --theme-accent: #0ea5e9;
    --theme-accent-hover: #0284c7;
    --theme-accent-light: #f0f9ff;
    --theme-accent-rgb: 14, 165, 233;
    --theme-accent-subtle: rgba(14, 165, 233, 0.08);

    /* --- Semantic Feedback Colors --- */
    --theme-success: #10b981;
    --theme-success-hover: #059669;
    --theme-success-active: #047857;
    --theme-success-light: #ecfdf5;
    --theme-success-subtle: rgba(16, 185, 129, 0.08);
    --theme-success-rgb: 16, 185, 129;

    --theme-warning: #f59e0b;
    --theme-warning-hover: #d97706;
    --theme-warning-active: #b45309;
    --theme-warning-light: #fffbeb;
    --theme-warning-subtle: rgba(245, 158, 11, 0.08);
    --theme-warning-rgb: 245, 158, 11;

    --theme-danger: #ef4444;
    --theme-danger-hover: #dc2626;
    --theme-danger-active: #b91c1c;
    --theme-danger-light: #fef2f2;
    --theme-danger-subtle: rgba(239, 68, 68, 0.08);
    --theme-danger-rgb: 239, 68, 68;

    --theme-info: #0ea5e9;
    --theme-info-hover: #0284c7;
    --theme-info-light: #f0f9ff;
    --theme-info-subtle: rgba(14, 165, 233, 0.08);
    --theme-info-rgb: 14, 165, 233;

    /* --- Neutral Surfaces (Light Mode Invariants) --- */
    --theme-bg-body: #f8fafc;
    --theme-bg-surface: #ffffff;
    --theme-bg-surface-elevated: #ffffff;
    --theme-bg-surface-muted: #f1f5f9;
    --theme-bg-surface-subtle: #f8fafc;
    --theme-bg-surface-hover: #f1f5f9;

    /* --- Subtle Borders & Dividers --- */
    --theme-border: #e2e8f0;
    --theme-border-subtle: #f1f5f9;
    --theme-border-strong: #cbd5e1;
    --theme-border-focus: rgba(37, 99, 235, 0.45);
    --theme-divider: #e2e8f0;

    /* --- High Contrast Typography --- */
    --theme-text-primary: #0f172a;
    --theme-text-secondary: #334155;
    --theme-text-muted: #64748b;
    --theme-text-subtle: #94a3b8;
    --theme-text-inverse: #ffffff;
    --theme-text-link: #2563eb;
    --theme-text-link-hover: #1d4ed8;

    /* --- Sidebar Light Theme Tokens (Strict Light) --- */
    --theme-sidebar-bg: #ffffff;
    --theme-sidebar-border: #e2e8f0;
    --theme-sidebar-text: #475569;
    --theme-sidebar-text-hover: #0f172a;
    --theme-sidebar-text-active: #2563eb;
    --theme-sidebar-active-bg: #eff6ff;
    --theme-sidebar-active-bar: #2563eb;
    --theme-sidebar-hover-bg: #f8fafc;
    --theme-sidebar-title: #94a3b8;
    --theme-sidebar-submenu-bg: #f8fafc;

    /* --- Header / Topbar Tokens --- */
    --theme-header-bg: #ffffff;
    --theme-header-border: #e2e8f0;
    --theme-header-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05);

    /* --- Geometry & Radii --- */
    --theme-radius-xs: 4px;
    --theme-radius-sm: 6px;
    --theme-radius-md: 10px;
    --theme-radius-lg: 14px;
    --theme-radius-xl: 18px;
    --theme-radius-card: 14px;
    --theme-radius-button: 8px;
    --theme-radius-input: 8px;
    --theme-radius-badge: 6px;
    --theme-radius-pill: 9999px;

    /* --- Restrained Elevation & Shadows --- */
    --theme-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --theme-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
    --theme-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --theme-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
    --theme-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.09), 0 8px 10px -6px rgba(15, 23, 42, 0.03);
    --theme-shadow-card: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
    --theme-shadow-card-hover: 0 12px 24px -4px rgba(15, 23, 42, 0.09), 0 4px 8px -2px rgba(15, 23, 42, 0.04);

    /* --- Transitions & Timing --- */
    --theme-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --theme-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --theme-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}



/* --- base.css --- */
/**
 * ==============================================================================
 * CLUSTERWEB SOLUTION PRIVATE LIMITED — DESIGN SYSTEM
 * 2. BASE & RESETS (LIGHT THEME ONLY)
 * ==============================================================================
 */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    background-color: var(--theme-bg-body) !important;
    color: var(--theme-text-primary) !important;
    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* Light Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--theme-bg-body);
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: var(--theme-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Global Selection */
::selection {
    background: var(--theme-primary-light);
    color: var(--theme-primary);
}

/* Accessible Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--theme-primary) !important;
    outline-offset: 2px !important;
}

/* Remove default dark margins/paddings on containers */
.main-container {
    background-color: var(--theme-bg-body) !important;
    min-height: 100vh;
}

#content {
    background-color: var(--theme-bg-body) !important;
}

.layout-px-spacing {
    padding: 0 24px !important;
}



/* --- typography.css --- */
/**
 * ==============================================================================
 * CLUSTERWEB SOLUTION PRIVATE LIMITED — DESIGN SYSTEM
 * 3. TYPOGRAPHY SYSTEM
 * ==============================================================================
 */

h1, h2, h3, h4, h5, h6 {
    color: var(--theme-text-primary) !important;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 0.5rem;
}

h1 { font-size: 2rem; line-height: 1.25; }
h2 { font-size: 1.65rem; line-height: 1.3; }
h3 { font-size: 1.35rem; line-height: 1.35; }
h4 { font-size: 1.15rem; line-height: 1.4; }
h5 { font-size: 1rem; line-height: 1.45; }
h6 { font-size: 0.875rem; line-height: 1.5; }

p {
    color: var(--theme-text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.text-muted {
    color: var(--theme-text-muted) !important;
}

.text-dark {
    color: var(--theme-text-primary) !important;
}

.text-primary {
    color: var(--theme-primary) !important;
}

.text-success {
    color: var(--theme-success) !important;
}

.text-warning {
    color: var(--theme-warning) !important;
}

.text-danger {
    color: var(--theme-danger) !important;
}

.text-info {
    color: var(--theme-info) !important;
}

/* Typography Helpers */
.font-monospace {
    font-family: 'JetBrains Mono', 'Fira Code', Menlo, Monaco, Consolas, monospace !important;
}

.fw-bold { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-normal { font-weight: 400 !important; }

.fs-xs { font-size: 0.75rem !important; }
.fs-sm { font-size: 0.8125rem !important; }
.fs-base { font-size: 0.875rem !important; }
.fs-lg { font-size: 1rem !important; }
.fs-xl { font-size: 1.25rem !important; }
.fs-2xl { font-size: 1.5rem !important; }
.fs-3xl { font-size: 1.875rem !important; }

/* Pixel-precise typography utilities */
.font-9 { font-size: 9px !important; }
.font-10 { font-size: 10px !important; }
.font-11 { font-size: 11px !important; }
.font-12 { font-size: 12px !important; }
.font-13 { font-size: 13px !important; }
.font-14 { font-size: 14px !important; }
.font-15 { font-size: 15px !important; }
.font-16 { font-size: 16px !important; }
.font-18 { font-size: 18px !important; }
.font-19 { font-size: 19px !important; }
.font-20 { font-size: 20px !important; }
.font-22 { font-size: 22px !important; }
.font-24 { font-size: 24px !important; }

.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.05em; }


/* --- layout.css --- */
/**
 * ==============================================================================
 * CLUSTERWEB SOLUTION PRIVATE LIMITED — DESIGN SYSTEM
 * 12. LAYOUT & APPLICATION SHELL
 * ==============================================================================
 */

.main-container {
    display: flex;
    min-height: 100vh;
    background-color: var(--theme-bg-body);
}

.main-content {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.layout-top-spacing {
    margin-top: 20px;
}

.overlay {
    display: none;
}

.search-overlay,
.rightbar-overlay {
    display: none;
}

.section-gap {
    margin-bottom: 28px;
}

/* Dashboard / Admin Footer Wrapper */
.footer-wrapper {
    background-color: #ffffff !important;
    border-top: 1px solid var(--theme-border) !important;
    padding: 14px 24px !important;
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.footer-wrapper .footer-section {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-wrapper .footer-section p {
    margin-bottom: 0 !important;
    color: var(--theme-text-muted) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

.footer-wrapper .footer-section p a {
    color: var(--theme-text-secondary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.footer-wrapper .footer-section p a:hover {
    color: var(--theme-primary) !important;
}



/* --- navigation.css --- */
/**
 * ==============================================================================
 * CLUSTERWEB SOLUTION PRIVATE LIMITED — DESIGN SYSTEM
 * 4. NAVIGATION SYSTEM (PURE LIGHT SIDEBAR & TOPBAR)
 * ==============================================================================
 */

/* ==========================================
   TOPBAR & HEADER (PURE LIGHT)
   ========================================== */
.header-container {
    background: #ffffff !important;
    border-bottom: 1px solid var(--theme-border) !important;
    box-shadow: var(--theme-shadow-xs) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    z-index: 1030 !important;
}

body.has-impersonation .header-container {
    top: 42px !important;
}
body.has-impersonation .sidebar-wrapper {
    top: 102px !important;
}
body.has-impersonation .main-container {
    padding-top: 42px !important;
}

.header.navbar {
    background: #ffffff !important;
    padding: 0 20px !important;
    height: 100%;
}

.navbar-logo {
    max-height: 36px;
    width: auto;
    object-fit: contain;
}

.header-brand-title {
    color: var(--theme-text-primary) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: -0.01em;
}

.nav-hamburger-btn {
    color: var(--theme-text-secondary) !important;
    font-size: 22px;
    padding: 8px;
    border-radius: var(--theme-radius-button);
    transition: var(--theme-transition-fast);
}

.nav-hamburger-btn:hover {
    background-color: var(--theme-bg-surface-hover) !important;
    color: var(--theme-primary) !important;
}

/* Wallet Badge Pill */
.wallet-badge-modern {
    background: var(--theme-bg-surface-subtle) !important;
    border: 1px solid var(--theme-border) !important;
    color: var(--theme-text-primary) !important;
    border-radius: var(--theme-radius-pill) !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    transition: var(--theme-transition-fast);
}

.wallet-badge-modern:hover {
    border-color: var(--theme-primary) !important;
    background: var(--theme-primary-light) !important;
    color: var(--theme-primary) !important;
}

/* User Profile Avatar Wrap */
.user-avatar-wrap {
    position: relative;
    cursor: pointer;
}

.user-avatar-img {
    width: 38px;
    height: 38px;
    object-fit: cover;
}

.btn-nav-home {
    gap: 6px;
    font-size: 13px !important;
    border-width: 1.5px !important;
}

.dropdown-menu-user {
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--theme-border) !important;
}

.impersonation-user-highlight {
    color: #fef08a !important;
    font-weight: 700;
}

.badge-subtle-xs {
    font-size: 9px !important;
    padding: 2px 6px !important;
}

.user-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: var(--theme-success);
    border: 2px solid #ffffff;
    border-radius: 50%;
}

/* User Account Dropdown */
.nav-drop.is-account-dropdown {
    background: #ffffff !important;
    border-radius: var(--theme-radius-lg);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-xl) !important;
    overflow: hidden;
    min-width: 240px;
}

.nav-drop-header {
    background: var(--theme-bg-surface-muted) !important;
    padding: 16px !important;
    border-bottom: 1px solid var(--theme-border) !important;
}

.nav-drop-header span {
    color: var(--theme-text-primary) !important;
    font-weight: 700 !important;
}

.account-items .account-item {
    display: flex;
    align-items: center;
    padding: 10px 16px !important;
    color: var(--theme-text-secondary) !important;
    text-decoration: none !important;
    transition: var(--theme-transition-fast);
}

.account-items .account-item:hover {
    background: var(--theme-bg-surface-hover) !important;
    color: var(--theme-primary) !important;
}

.account-divider {
    border-top: 1px solid var(--theme-border) !important;
    margin: 4px 0 !important;
}

/* Sub-header Breadcrumb Area */
.sub-header-container {
    background: transparent !important;
    border-bottom: 1px solid var(--theme-border-subtle) !important;
    padding: 12px 24px !important;
}

.breadcrumb-one .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.breadcrumb-item a {
    color: var(--theme-text-muted) !important;
    text-decoration: none;
    font-size: 13px;
}

.breadcrumb-item.active {
    color: var(--theme-text-primary) !important;
    font-weight: 600;
    font-size: 13px;
}

/* ==========================================
   SIDEBAR (STRICT LIGHT THEME)
   ========================================== */
.sidebar-wrapper,
.sidebar-theme,
.theme--sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--theme-border) !important;
    box-shadow: 1px 0 3px 0 rgba(15, 23, 42, 0.03) !important;
}

#sidebar {
    background: #ffffff !important;
}

@media (min-width: 992px) {
    .sidebar-wrapper {
        width: 260px !important;
        position: fixed !important;
        top: 60px !important;
        bottom: 0 !important;
        left: 0 !important;
        height: calc(100vh - 60px) !important;
        z-index: 1020 !important;
    }
    .main-container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    #content {
        margin-left: 260px !important;
        margin-top: 0 !important;
        padding-top: 60px !important;
    }
    .sidebarCloseBtn {
        display: none !important;
    }
}

/* Mobile Sidebar Drawer */
@media (max-width: 991.98px) {
    .sidebar-wrapper {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: -280px !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 1050 !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: var(--theme-shadow-xl) !important;
    }
    .main-container.sbar-open .sidebar-wrapper {
        left: 0 !important;
    }
    .main-container.sbar-open .overlay {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 1040;
        backdrop-filter: blur(2px);
    }
    .main-container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    #content {
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding-top: 60px !important;
    }
}

/* Sidebar Header Profile & Balance */
.sidebar-user-header {
    background: #ffffff !important;
    padding: 18px 16px 14px 16px !important;
    border-bottom: 1px solid var(--theme-border-subtle) !important;
}

.sidebar-user-info h6 {
    color: var(--theme-text-primary) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

.sidebarCloseBtn {
    background: transparent;
    border: none;
    color: var(--theme-text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--theme-radius-sm);
}

.sidebarCloseBtn:hover {
    color: var(--theme-danger);
    background: var(--theme-danger-light);
}

.sidebar-wallet-card {
    background: var(--theme-bg-surface-subtle) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--theme-radius-card) !important;
    padding: 12px 14px !important;
    margin: 12px 14px 16px 14px !important;
}

.sidebar-wallet-card span {
    color: var(--theme-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em;
}

.sidebar-wallet-card h6 {
    color: var(--theme-text-primary) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

/* Sidebar Menu Categories & Headings */
#sidebar ul.menu-categories {
    padding: 4px 0 30px 0 !important;
    max-height: calc(100vh - 215px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#sidebar ul.menu-categories li.menu-title {
    color: var(--theme-sidebar-title) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    padding: 18px 18px 6px 18px !important;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle {
    color: var(--theme-sidebar-text) !important;
    padding: 9px 14px !important;
    border-radius: var(--theme-radius-button) !important;
    margin: 2px 10px !important;
    transition: var(--theme-transition-fast) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: calc(100% - 20px) !important;
    text-decoration: none !important;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 10px !important;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle span:not(.badge) {
    display: inline !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle span.badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 9999px !important;
    line-height: 1.2 !important;
    position: static !important;
    transform: none !important;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle:hover {
    background: var(--theme-sidebar-hover-bg) !important;
    color: var(--theme-sidebar-text-hover) !important;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle:hover i:not(.sidemenu-right-icon) {
    color: var(--theme-primary) !important;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle[aria-expanded="true"],
#sidebar ul.menu-categories li.menu.active > .dropdown-toggle {
    background: var(--theme-sidebar-active-bg) !important;
    color: var(--theme-sidebar-text-active) !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--theme-sidebar-active-bar) !important;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle[aria-expanded="true"] i,
#sidebar ul.menu-categories li.menu.active > .dropdown-toggle i {
    color: var(--theme-sidebar-text-active) !important;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle i:not(.sidemenu-right-icon) {
    color: #64748b !important;
    font-size: 19px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    transition: var(--theme-transition-fast);
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle .sidemenu-right-icon {
    font-size: 11px !important;
    color: #94a3b8 !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s ease;
}

#sidebar ul.menu-categories li.menu > .dropdown-toggle[aria-expanded="true"] .sidemenu-right-icon {
    transform: rotate(90deg);
}

/* Sidebar Submenus */
#sidebar ul.menu-categories ul.submenu {
    background: var(--theme-sidebar-submenu-bg) !important;
    border-left: 2px solid var(--theme-border) !important;
    margin: 4px 14px 8px 24px !important;
    padding: 4px 0 !important;
    list-style: none !important;
}

#sidebar ul.menu-categories ul.submenu > li a {
    color: #64748b !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    display: block !important;
    text-decoration: none !important;
    border-radius: var(--theme-radius-sm);
    transition: var(--theme-transition-fast);
}

#sidebar ul.menu-categories ul.submenu > li a:hover,
#sidebar ul.menu-categories ul.submenu > li.active a {
    color: var(--theme-primary) !important;
    background: #ffffff !important;
    font-weight: 600 !important;
    padding-left: 18px !important;
}


/* --- components.css --- */
/**
 * ==============================================================================
 * CLUSTERWEB SOLUTION PRIVATE LIMITED — DESIGN SYSTEM
 * 5. COMPONENT LIBRARY (CARDS, BUTTONS, BADGES, ALERTS, MODALS)
 * ==============================================================================
 */

/* ==========================================
   CARDS (PREMIUM LIGHT SURFACES)
   ========================================== */
.card,
.card-modern,
.cws-card,
.statbox.widget.box {
    background: var(--theme-bg-surface) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--theme-radius-card) !important;
    box-shadow: var(--theme-shadow-card) !important;
    transition: box-shadow var(--theme-transition-normal), border-color var(--theme-transition-normal);
    overflow: hidden;
    margin-bottom: 24px;
}

.card:hover,
.card-modern:hover,
.cws-card:hover {
    box-shadow: var(--theme-shadow-card-hover) !important;
    border-color: var(--theme-border-strong) !important;
}

.card-header,
.widget-header {
    background: transparent !important;
    border-bottom: 1px solid var(--theme-border-subtle) !important;
    padding: 18px 24px !important;
}

.card-header h5,
.card-header h6 {
    margin-bottom: 0 !important;
    font-weight: 700 !important;
    color: var(--theme-text-primary) !important;
}

.card-body,
.widget-content-area {
    background: transparent !important;
    padding: 24px !important;
}

.card-footer {
    background: var(--theme-bg-surface-subtle) !important;
    border-top: 1px solid var(--theme-border-subtle) !important;
    padding: 16px 24px !important;
}

/* ==========================================
   BUTTONS
   ========================================== */
.btn {
    border-radius: var(--theme-radius-button) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 8px 18px !important;
    transition: all var(--theme-transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px 0 rgba(37, 99, 235, 0.2) !important;
}
.btn-primary:hover {
    background: var(--theme-primary-hover) !important;
    border-color: var(--theme-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px 0 rgba(37, 99, 235, 0.25) !important;
}

.btn-secondary {
    background: #ffffff !important;
    border: 1px solid var(--theme-border) !important;
    color: var(--theme-text-secondary) !important;
}
.btn-secondary:hover {
    background: var(--theme-bg-surface-hover) !important;
    border-color: var(--theme-border-strong) !important;
    color: var(--theme-text-primary) !important;
}

.btn-outline-primary {
    background: transparent !important;
    border: 1px solid var(--theme-primary) !important;
    color: var(--theme-primary) !important;
}
.btn-outline-primary:hover {
    background: var(--theme-primary-light) !important;
    color: var(--theme-primary-hover) !important;
}

.btn-outline-secondary {
    background: transparent !important;
    border: 1px solid var(--theme-border) !important;
    color: var(--theme-text-secondary) !important;
}
.btn-outline-secondary:hover {
    background: var(--theme-bg-surface-hover) !important;
    border-color: var(--theme-border-strong) !important;
    color: var(--theme-text-primary) !important;
}

.btn-success {
    background: var(--theme-success) !important;
    border-color: var(--theme-success) !important;
    color: #ffffff !important;
}
.btn-success:hover {
    background: var(--theme-success-hover) !important;
    border-color: var(--theme-success-hover) !important;
}

.btn-danger {
    background: var(--theme-danger) !important;
    border-color: var(--theme-danger) !important;
    color: #ffffff !important;
}
.btn-danger:hover {
    background: var(--theme-danger-hover) !important;
    border-color: var(--theme-danger-hover) !important;
}

.btn-warning {
    background: var(--theme-warning) !important;
    border-color: var(--theme-warning) !important;
    color: #ffffff !important;
}
.btn-warning:hover {
    background: var(--theme-warning-hover) !important;
    border-color: var(--theme-warning-hover) !important;
}

.btn-light {
    background: var(--theme-bg-surface-muted) !important;
    border: 1px solid var(--theme-border) !important;
    color: var(--theme-text-secondary) !important;
}
.btn-light:hover {
    background: #e2e8f0 !important;
    color: var(--theme-text-primary) !important;
}

.btn-sm {
    padding: 5px 12px !important;
    font-size: 0.8125rem !important;
    border-radius: var(--theme-radius-sm) !important;
}

.btn-xs {
    padding: 3px 8px !important;
    font-size: 0.75rem !important;
    border-radius: var(--theme-radius-xs) !important;
}

.btn-lg {
    padding: 12px 26px !important;
    font-size: 1rem !important;
    border-radius: var(--theme-radius-md) !important;
}

.btn-pill,
.rounded-pill {
    border-radius: var(--theme-radius-pill) !important;
}

/* ==========================================
   STATUS BADGES & PILLS
   ========================================== */
.badge {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    padding: 4px 9px !important;
    border-radius: var(--theme-radius-badge) !important;
    letter-spacing: 0.02em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.badge-primary-subtle,
.bg-primary-subtle {
    background: var(--theme-primary-light) !important;
    color: var(--theme-primary) !important;
    border: 1px solid rgba(37, 99, 235, 0.18) !important;
}

.badge-success-subtle,
.bg-success-subtle,
.badge-soft-success {
    background: var(--theme-success-light) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
}

.badge-warning-subtle,
.bg-warning-subtle,
.badge-soft-warning {
    background: var(--theme-warning-light) !important;
    color: #92400e !important;
    border: 1px solid rgba(245, 158, 11, 0.22) !important;
}

.badge-danger-subtle,
.bg-danger-subtle,
.badge-soft-danger {
    background: var(--theme-danger-light) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(239, 68, 68, 0.22) !important;
}

.badge-info-subtle,
.bg-info-subtle,
.badge-soft-info {
    background: var(--theme-info-light) !important;
    color: #0369a1 !important;
    border: 1px solid rgba(14, 165, 233, 0.22) !important;
}

.badge-tech {
    background: var(--theme-bg-surface-muted) !important;
    color: var(--theme-text-secondary) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--theme-radius-pill) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
}

/* ==========================================
   ALERTS
   ========================================== */
.alert {
    border-radius: var(--theme-radius-md) !important;
    padding: 14px 18px !important;
    border: 1px solid transparent !important;
    font-size: 0.875rem !important;
}

.alert-success {
    background: var(--theme-success-light) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    color: #065f46 !important;
    border-left: 4px solid var(--theme-success) !important;
}

.alert-warning {
    background: var(--theme-warning-light) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
    color: #92400e !important;
    border-left: 4px solid var(--theme-warning) !important;
}

.alert-danger {
    background: var(--theme-danger-light) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #991b1b !important;
    border-left: 4px solid var(--theme-danger) !important;
}

.alert-info {
    background: var(--theme-info-light) !important;
    border-color: rgba(14, 165, 233, 0.25) !important;
    color: #075985 !important;
    border-left: 4px solid var(--theme-info) !important;
}

/* ==========================================
   MODALS
   ========================================== */
.modal-content {
    background: #ffffff !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--theme-radius-lg) !important;
    box-shadow: var(--theme-shadow-xl) !important;
    overflow: hidden;
}

.modal-header {
    background: var(--theme-bg-surface-subtle) !important;
    border-bottom: 1px solid var(--theme-border-subtle) !important;
    padding: 18px 24px !important;
}

.modal-title {
    color: var(--theme-text-primary) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

.modal-body {
    padding: 24px !important;
    color: var(--theme-text-secondary);
}

.modal-footer {
    background: var(--theme-bg-surface-subtle) !important;
    border-top: 1px solid var(--theme-border-subtle) !important;
    padding: 16px 24px !important;
}

/* ==========================================
   AUTH & UTILITY HELPERS
   ========================================== */
.auth-brand-logo {
    width: 100px;
    height: auto;
    object-fit: contain;
}

.auth-brand-logo-md {
    height: 70px;
    width: auto;
    object-fit: contain;
}

.hidden-initially {
    display: none;
}

/* ==========================================
   VOICE ASSISTANT LAUNCHER & PULSE
   ========================================== */
.cws-voice-launcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-sm);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-top: 6px;
    text-decoration: none !important;
}

.cws-voice-launcher:hover {
    background: var(--theme-bg-subtle);
    transform: scale(1.08);
}

.cws-voice-launcher.cws-voice-active {
    animation: cwsSoundwavePulse 1.2s infinite ease-in-out;
    border-color: var(--theme-primary);
    background: rgba(37, 99, 235, 0.08);
}

@keyframes cwsSoundwavePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}



/* --- forms.css --- */
/**
 * ==============================================================================
 * CLUSTERWEB SOLUTION PRIVATE LIMITED — DESIGN SYSTEM
 * 6. FORMS & INPUT CONTROLS
 * ==============================================================================
 */

.form-label {
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    color: var(--theme-text-secondary) !important;
    margin-bottom: 6px !important;
    display: inline-block;
}

.form-control,
.form-select,
select.form-control,
textarea.form-control {
    display: block;
    width: 100%;
    max-width: 100%;
    background-color: #ffffff !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--theme-radius-input) !important;
    color: var(--theme-text-primary) !important;
    font-size: 0.875rem !important;
    padding: 8px 14px !important;
    line-height: 1.5 !important;
    transition: border-color var(--theme-transition-fast), box-shadow var(--theme-transition-fast) !important;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px var(--theme-primary-subtle) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: var(--theme-text-subtle) !important;
    font-size: 0.8125rem !important;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--theme-bg-surface-muted) !important;
    color: var(--theme-text-muted) !important;
    cursor: not-allowed;
}

/* Input Groups */
.input-group {
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > select.form-control,
.input-group > input.form-control {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
}

.input-group-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--theme-bg-surface-muted) !important;
    border: 1px solid var(--theme-border) !important;
    color: var(--theme-text-muted) !important;
    font-size: 0.875rem !important;
    padding: 8px 14px !important;
    border-radius: var(--theme-radius-input);
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.input-group > :first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > :not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

.input-group > :last-child:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group > .input-group-text:first-child {
    border-right: 0 !important;
}

.input-group > .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.form-text {
    font-size: 0.75rem !important;
    color: var(--theme-text-muted) !important;
    margin-top: 4px !important;
}

/* Form Check & Radios */
.form-check-input {
    border: 1px solid var(--theme-border-strong) !important;
    border-radius: 4px;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.form-check-label {
    font-size: 0.875rem !important;
    color: var(--theme-text-secondary) !important;
    cursor: pointer;
}



/* --- tables.css --- */
/**
 * ==============================================================================
 * CLUSTERWEB SOLUTION PRIVATE LIMITED — DESIGN SYSTEM
 * 7. DATA TABLES & LISTS
 * ==============================================================================
 */

.table {
    width: 100%;
    margin-bottom: 0;
    color: var(--theme-text-secondary);
    vertical-align: middle;
    border-color: var(--theme-border-subtle);
}

.table thead th {
    background-color: var(--theme-bg-surface-muted) !important;
    color: var(--theme-text-secondary) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 16px !important;
    border-top: none !important;
    border-bottom: 1px solid var(--theme-border) !important;
    white-space: nowrap;
}

.table tbody td {
    padding: 13px 16px !important;
    border-top: none !important;
    border-bottom: 1px solid var(--theme-border-subtle) !important;
    color: var(--theme-text-secondary) !important;
    font-size: 13.5px !important;
    vertical-align: middle !important;
    background: transparent !important;
}

.table-hover tbody tr:hover td {
    background-color: var(--theme-bg-surface-hover) !important;
    color: var(--theme-text-primary) !important;
}

/* Datatables Pagination & Controls */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--theme-radius-input) !important;
    padding: 5px 10px !important;
    background: #ffffff !important;
    color: var(--theme-text-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--theme-radius-button) !important;
    border: 1px solid var(--theme-border) !important;
    background: #ffffff !important;
    color: var(--theme-text-secondary) !important;
    margin: 0 2px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--theme-primary) !important;
    color: #ffffff !important;
    border-color: var(--theme-primary) !important;
}



/* --- dashboard.css --- */
/**
 * ==============================================================================
 * CLUSTERWEB SOLUTION PRIVATE LIMITED — DESIGN SYSTEM
 * 8. DASHBOARD SYSTEM (EXECUTIVE & USER DASHBOARDS - LIGHT SURFACES)
 * ==============================================================================
 */

/* ==========================================
   EXECUTIVE ADMIN BANNER (LIGHT SURFACE)
   ========================================== */
.admin-banner {
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--theme-radius-xl) !important;
    padding: 1.75rem 2rem !important;
    color: var(--theme-text-primary) !important;
    box-shadow: var(--theme-shadow-sm) !important;
    margin-bottom: 1.75rem !important;
    position: relative;
    overflow: hidden;
}

.admin-banner h3,
.admin-banner h4 {
    color: var(--theme-text-primary) !important;
    font-weight: 800 !important;
}

.admin-banner p {
    color: var(--theme-text-secondary) !important;
    margin-bottom: 0 !important;
}

/* ==========================================
   FINTECH APP HERO CARD (LIGHT SURFACE)
   ========================================== */
.app-hero-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 60%, #eff6ff 100%) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--theme-radius-xl) !important;
    padding: 1.5rem 1.75rem !important;
    color: var(--theme-text-primary) !important;
    box-shadow: var(--theme-shadow-card) !important;
    margin-bottom: 0.75rem !important;
    position: relative;
}

.hero-greeting {
    color: var(--theme-text-primary) !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    margin-bottom: 2px !important;
}

.hero-subtitle {
    color: var(--theme-text-muted) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

.app-hero-balance-wrap {
    margin: 1rem 0 0 0 !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    border: 1px solid #dbeafe !important;
    border-left: 4px solid var(--theme-primary) !important;
    border-radius: 12px !important;
    display: inline-block;
    min-width: 240px;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.05) !important;
}

.balance-label {
    color: var(--theme-text-muted) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    display: block;
    margin-bottom: 2px;
}

.balance-amount {
    color: var(--theme-primary) !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    font-family: 'JetBrains Mono', monospace !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

/* Quick Action Grid */
.quick-action-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin-top: 1.15rem !important;
}

@media (max-width: 767.98px) {
    .quick-action-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.quick-action-item {
    background: #ffffff !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    text-align: left !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    transition: all var(--theme-transition-fast) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03) !important;
}

.quick-action-item:hover {
    transform: translateY(-2px);
    border-color: var(--theme-primary) !important;
    box-shadow: var(--theme-shadow-md) !important;
    background: #f8fafc !important;
}

.quick-action-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 10px;
    background: var(--theme-primary-light);
    color: var(--theme-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 1px solid #bfdbfe;
}

.quick-action-item:nth-child(2) .quick-action-icon {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}

.quick-action-item:nth-child(3) .quick-action-icon {
    background: #f5f3ff;
    color: #7c3aed;
    border-color: #ddd6fe;
}

.quick-action-item:nth-child(4) .quick-action-icon {
    background: #fffbeb;
    color: #d97706;
    border-color: #fde68a;
}

.quick-action-label {
    color: var(--theme-text-primary) !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
}

/* ==========================================
   USER DASHBOARD MARKETPLACE & KPI CARDS
   ========================================== */
.dash-marketplace-card {
    background: #ffffff !important;
    border: 1px solid var(--theme-border) !important;
    border-top: 3px solid var(--theme-primary) !important;
    border-radius: 16px !important;
    box-shadow: var(--theme-shadow-card) !important;
    overflow: hidden;
}

.dash-product-item {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    transition: all 0.2s ease !important;
}

.dash-product-item:hover {
    background: #ffffff !important;
    border-color: #93c5fd !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.08) !important;
    transform: translateY(-2px);
}

.dash-product-thumb {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 10px;
    overflow: hidden;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
    padding: 4px 2px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 8px !important;
}

.app-section-title {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.app-section-title i {
    color: var(--theme-primary) !important;
    font-size: 1.25rem !important;
}

.app-kpi-col {
    margin-bottom: 16px !important;
}

.app-kpi-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 3px solid var(--theme-primary) !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.2s ease !important;
    height: 100% !important;
    position: relative;
    overflow: hidden;
}

.app-kpi-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
    border-color: #cbd5e1 !important;
}

.app-kpi-card .kpi-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.35rem !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
}

.app-kpi-card .count-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
}

.app-kpi-card .amount {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-family: 'JetBrains Mono', monospace !important;
    line-height: 1.25 !important;
}

.app-kpi-card .card-title-text {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

/* Color Accents for .app-kpi-card */
.app-kpi-card.kpi-emerald,
.app-kpi-card.kpi-success {
    border-top-color: #10b981 !important;
}
.app-kpi-card.kpi-emerald .kpi-icon-wrap,
.app-kpi-card.kpi-success .kpi-icon-wrap {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border-color: #a7f3d0 !important;
}
.app-kpi-card.kpi-emerald .count-pill,
.app-kpi-card.kpi-success .count-pill {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border-color: #a7f3d0 !important;
}

.app-kpi-card.kpi-warning {
    border-top-color: #f59e0b !important;
}
.app-kpi-card.kpi-warning .kpi-icon-wrap {
    background: #fffbeb !important;
    color: #d97706 !important;
    border-color: #fde68a !important;
}
.app-kpi-card.kpi-warning .count-pill {
    background: #fffbeb !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
}

.app-kpi-card.kpi-danger,
.app-kpi-card.kpi-rose {
    border-top-color: #ef4444 !important;
}
.app-kpi-card.kpi-danger .kpi-icon-wrap,
.app-kpi-card.kpi-rose .kpi-icon-wrap {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}
.app-kpi-card.kpi-danger .count-pill,
.app-kpi-card.kpi-rose .count-pill {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: #fecaca !important;
}

.app-kpi-card.kpi-purple {
    border-top-color: #8b5cf6 !important;
}
.app-kpi-card.kpi-purple .kpi-icon-wrap {
    background: #f5f3ff !important;
    color: #7c3aed !important;
    border-color: #ddd6fe !important;
}
.app-kpi-card.kpi-purple .count-pill {
    background: #f5f3ff !important;
    color: #6d28d9 !important;
    border-color: #ddd6fe !important;
}

.app-kpi-card.kpi-blue {
    border-top-color: #2563eb !important;
}
.app-kpi-card.kpi-blue .kpi-icon-wrap {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}

.app-kpi-card.kpi-teal {
    border-top-color: #0d9488 !important;
}
.app-kpi-card.kpi-teal .kpi-icon-wrap {
    background: #f0fdfa !important;
    color: #0d9488 !important;
    border-color: #99f6e4 !important;
}

.app-kpi-card.kpi-dark {
    border-top-color: #475569 !important;
}
.app-kpi-card.kpi-dark .kpi-icon-wrap {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}

/* Staff Attendance Widget Card */
.app-attendance-card {
    background: #ffffff !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    box-shadow: var(--theme-shadow-card) !important;
}

.digital-clock-display {
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    color: var(--theme-primary) !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    padding: 6px 14px !important;
    border-radius: 10px !important;
}

.btn-work-start {
    background: #10b981 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    padding: 7px 16px !important;
    border-radius: 9999px !important;
    border: none !important;
}

.btn-work-end {
    background: #ef4444 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    padding: 7px 16px !important;
    border-radius: 9999px !important;
    border: none !important;
}

/* ==========================================
   KPI STAT CARDS (LIGHT ENTERPRISE THEME)
   ========================================== */
.kpi-card,
.web-stat-card,
.pl-kpi-card {
    background: #ffffff !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--theme-radius-card) !important;
    padding: 1.35rem 1.45rem !important;
    color: var(--theme-text-primary) !important;
    box-shadow: var(--theme-shadow-card) !important;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: transform var(--theme-transition-normal), box-shadow var(--theme-transition-normal);
}

.kpi-card:hover,
.web-stat-card:hover,
.pl-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--theme-shadow-card-hover) !important;
    border-color: var(--theme-border-strong) !important;
}

.kpi-card .kpi-label,
.web-stat-card .stat-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--theme-text-muted) !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 4px;
}

.kpi-card .kpi-value,
.web-stat-card .stat-value {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    color: var(--theme-text-primary) !important;
    font-family: 'JetBrains Mono', monospace !important;
    margin-bottom: 2px;
}

.kpi-card .kpi-icon,
.web-stat-card .stat-icon {
    position: absolute;
    right: 14px;
    bottom: 8px;
    font-size: 3.2rem;
    opacity: 0.12;
    pointer-events: none;
    color: var(--theme-primary);
}

/* Refined Light Accents for KPI Cards */
.kpi-accent-indigo { border-top: 4px solid #4f46e5 !important; }
.kpi-accent-emerald { border-top: 4px solid #10b981 !important; }
.kpi-accent-amber { border-top: 4px solid #f59e0b !important; }
.kpi-accent-cyan { border-top: 4px solid #06b6d4 !important; }
.kpi-accent-rose { border-top: 4px solid #ef4444 !important; }
.kpi-accent-teal { border-top: 4px solid #14b8a6 !important; }

/* Department Cards */
.dept-card {
    background: #ffffff !important;
    border-radius: var(--theme-radius-card) !important;
    border: 1px solid var(--theme-border) !important;
    box-shadow: var(--theme-shadow-card) !important;
    padding: 1.4rem !important;
    height: 100%;
}

.dept-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--theme-border-subtle);
    margin-bottom: 1.15rem;
}

.dept-card-header h6 {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--theme-text-primary) !important;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

/* Nav Tabs Modern */
.nav-tabs-modern {
    border-bottom: 1px solid var(--theme-border);
    background: var(--theme-bg-surface-subtle);
    padding: 0.5rem 1rem 0;
}
.nav-tabs-modern .nav-link {
    border: none;
    color: var(--theme-text-muted);
    font-weight: 600;
    font-size: 13px;
    padding: 0.75rem 1.15rem;
    border-radius: var(--theme-radius-button) var(--theme-radius-button) 0 0;
    transition: all var(--theme-transition-fast);
    display: flex;
    align-items: center;
}
.nav-tabs-modern .nav-link.active {
    background: #ffffff;
    color: var(--theme-primary);
    border-bottom: 3px solid var(--theme-primary);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.03);
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px dashed var(--theme-border-subtle);
    font-size: 13px;
}
.metric-row:last-child {
    border-bottom: none;
}

/* Quick Filter Search Input */
.table-search-input {
    border-radius: var(--theme-radius-pill);
    border: 1px solid var(--theme-border-strong);
    padding: 0.4rem 1rem 0.4rem 2.2rem;
    font-size: 13px;
    background: #ffffff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2394a3b8" viewBox="0 0 16 16"><path 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"/></svg>') no-repeat 0.75rem center;
    transition: all var(--theme-transition-fast);
    min-width: 260px;
}
.table-search-input:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px var(--theme-primary-subtle);
    outline: none;
}

.badge-soft-purple { background: #f3e8ff !important; color: #7e22ce !important; border-radius: 6px; font-weight: 600; }
.badge-soft-dark { background: #f1f5f9 !important; color: #334155 !important; border-radius: 6px; font-weight: 600; }

/* Light Theme Card Variants (Replacing dark gradients) */
.bg-gradient-indigo { background: #ffffff !important; border-top: 4px solid #4f46e5 !important; }
.bg-gradient-emerald { background: #ffffff !important; border-top: 4px solid #10b981 !important; }
.bg-gradient-amber { background: #ffffff !important; border-top: 4px solid #f59e0b !important; }
.bg-gradient-cyan { background: #ffffff !important; border-top: 4px solid #06b6d4 !important; }
.bg-gradient-rose { background: #ffffff !important; border-top: 4px solid #ef4444 !important; }
.bg-gradient-purple { background: #ffffff !important; border-top: 4px solid #8b5cf6 !important; }
.bg-gradient-dark { background: #ffffff !important; border-top: 4px solid #475569 !important; }
.bg-gradient-teal { background: #ffffff !important; border-top: 4px solid #14b8a6 !important; }
.bg-gradient-sky { background: #ffffff !important; border-top: 4px solid #0284c7 !important; }

/* Ensure text inside KPI cards & Light Hero Banners is dark and readable */
.kpi-card h2, .kpi-card h3, .kpi-card h4, .kpi-card h5, .kpi-card h6,
.kpi-card p, .kpi-card span:not(.badge), .kpi-card div,
.kpi-card .text-white,
.web-stat-card h2, .web-stat-card h3, .web-stat-card h4, .web-stat-card h5,
.web-stat-card p, .web-stat-card span:not(.badge), .web-stat-card div,
.web-stat-card .text-white,
.user-stat-card h2, .user-stat-card h3, .user-stat-card h4, .user-stat-card .text-white,
.att-stat-card h2, .att-stat-card h3, .att-stat-card h4, .att-stat-card .text-white,
.admin-banner .text-white, .admin-banner h3, .admin-banner h4,
.app-hero-card .text-white, .app-hero-card h3, .app-hero-card h4,
.ats-banner .text-white, .ats-banner h3, .ats-banner h4,
.kyc-hero .text-white, .kyc-hero h3, .kyc-hero-card .text-white, .kyc-hero-card h3,
.rbac-header-card .text-white, .rbac-header-card h3, .rbac-header-title,
.store-hero-card .text-white, .store-hero-card h3, .store-hero-card h4,
.downloads-hero-banner .text-white, .downloads-hero-banner h3, .downloads-hero-banner h4,
.form-header-gradient .text-white, .form-header-gradient h3, .form-header-gradient h4 {
    color: var(--theme-text-primary) !important;
}

.kpi-card .text-white-50,
.web-stat-card .text-white-50,
.user-stat-card .text-white-50,
.att-stat-card .text-white-50,
.admin-banner .text-white-50,
.app-hero-card .text-white-50,
.ats-banner .text-white-50,
.kyc-hero .text-white-50, .kyc-hero p,
.kyc-hero-card .text-white-50, .kyc-hero-card p,
.rbac-header-card .text-white-50, .rbac-header-sub,
.store-hero-card .text-white-50,
.downloads-hero-banner .text-white-50,
.form-header-gradient .text-white-50 {
    color: var(--theme-text-secondary) !important;
}

.admin-banner .btn-outline-light,
.app-hero-card .btn-outline-light,
.ats-banner .btn-outline-light,
.store-hero-card .btn-outline-light,
.downloads-hero-banner .btn-outline-light {
    background: #ffffff !important;
    color: var(--theme-text-primary) !important;
    border: 1px solid var(--theme-border-strong) !important;
}

.admin-banner .btn-outline-light:hover,
.app-hero-card .btn-outline-light:hover,
.ats-banner .btn-outline-light:hover,
.store-hero-card .btn-outline-light:hover,
.downloads-hero-banner .btn-outline-light:hover {
    background: var(--theme-bg-surface-hover) !important;
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.kpi-card .badge-light {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}


/* --- landing.css --- */
/**
 * ==============================================================================
 * CLUSTERWEB SOLUTION PRIVATE LIMITED — DESIGN SYSTEM
 * 9. PUBLIC LANDING PAGE (LIGHT ENTERPRISE THEME)
 * ==============================================================================
 */

/* ==========================================
   PUBLIC LANDING HERO SECTION (LIGHT)
   ========================================== */
.hero-light-section {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #eff6ff 100%) !important;
    border-bottom: 1px solid var(--theme-border) !important;
    padding: 100px 0 80px 0 !important;
    position: relative;
    overflow: hidden;
}

.hero-light-title {
    color: var(--theme-text-primary) !important;
    font-size: 2.75rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;
}

.hero-light-subtitle {
    color: var(--theme-text-secondary) !important;
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
    max-width: 650px;
}

/* Store Hero (Light Store Banner) */
.store-hero {
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--theme-radius-xl) !important;
    padding: 2.2rem 2.5rem !important;
    color: var(--theme-text-primary) !important;
    box-shadow: var(--theme-shadow-sm) !important;
    margin-bottom: 2rem !important;
    position: relative;
    overflow: hidden;
}

.store-hero h2,
.store-hero h3 {
    color: var(--theme-text-primary) !important;
    font-weight: 800 !important;
}

.store-hero p {
    color: var(--theme-text-secondary) !important;
}

/* Digital Products Card */
.digital-product-card {
    background: #ffffff !important;
    border-radius: var(--theme-radius-card) !important;
    border: 1px solid var(--theme-border) !important;
    box-shadow: var(--theme-shadow-card) !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all var(--theme-transition-normal);
    overflow: hidden;
    position: relative;
}

.digital-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--theme-shadow-card-hover) !important;
    border-color: var(--theme-primary) !important;
}

.product-cover-wrap {
    height: 190px;
    width: 100%;
    position: relative;
    background: var(--theme-bg-surface-muted) !important;
    overflow: hidden;
}

.product-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--theme-transition-slow);
}

.digital-product-card:hover .product-cover-img {
    transform: scale(1.05);
}

.product-type-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ffffff !important;
    color: var(--theme-primary) !important;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--theme-radius-pill);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-xs);
}

.product-price-pill {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: var(--theme-success) !important;
    color: #ffffff !important;
    font-weight: 800;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: var(--theme-radius-pill);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Public Footer (Pure Light Surface) */
.footer-section:not(.f-section-1):not(.f-section-2),
.cws-footer {
    background-color: #ffffff !important;
    border-top: 1px solid var(--theme-border) !important;
    color: var(--theme-text-secondary) !important;
    padding: 60px 0 30px 0 !important;
}

.footer-section:not(.f-section-1):not(.f-section-2) h5,
.cws-footer h5 {
    color: var(--theme-text-primary) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin-bottom: 20px !important;
}

.footer-section a,
.cws-footer a {
    color: var(--theme-text-muted) !important;
    text-decoration: none !important;
    transition: color var(--theme-transition-fast);
}

.footer-section a:hover,
.cws-footer a:hover {
    color: var(--theme-primary) !important;
}

.footer-bottom {
    border-top: 1px solid var(--theme-border-subtle) !important;
    padding-top: 24px !important;
    margin-top: 40px !important;
    font-size: 13px !important;
    color: var(--theme-text-muted) !important;
}

/* Digital Product Card Body & Elements */
.product-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}
.product-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--theme-text-primary);
    line-height: 1.35;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 40px;
}
.product-desc {
    color: var(--theme-text-muted);
    font-size: 12.5px;
    line-height: 1.45;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 54px;
}
.feature-specs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.spec-pill {
    background: var(--theme-bg-surface-muted);
    color: var(--theme-text-secondary);
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--theme-radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.btn-buy-wallet {
    background: var(--theme-primary) !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 12.5px;
    padding: 9px 14px;
    border-radius: var(--theme-radius-input);
    border: none;
    flex: 1;
    transition: all var(--theme-transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}
.btn-buy-wallet:hover {
    background: var(--theme-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.btn-pay-online {
    background: var(--theme-bg-surface-subtle);
    color: var(--theme-text-primary) !important;
    font-weight: 700;
    font-size: 12.5px;
    padding: 9px 14px;
    border-radius: var(--theme-radius-input);
    border: 1px solid var(--theme-border);
    transition: all var(--theme-transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}
.btn-pay-online:hover {
    background: var(--theme-bg-surface-hover);
    color: var(--theme-text-primary) !important;
    border-color: var(--theme-border-strong);
}

/* Landing Micro Utilities & UI Helpers */
.dot-indicator-sm { font-size: 0.5rem !important; }
.dot-indicator-xs { font-size: 0.45rem !important; }
.sidebar-brand-badge-active {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
.btn-dash-mini { font-size: 0.72rem !important; }
.hero-brand-logo {
    max-width: 140px;
    max-height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08));
}
.user-session-card-live {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 244, 0.7)) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
.user-avatar-emerald {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}
.text-gradient-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mobile-launcher-tile {
    border-radius: 14px;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}
.mobile-launcher-careers { background: linear-gradient(135deg, #2563eb, #3b82f6) !important; }
.mobile-launcher-store { background: linear-gradient(135deg, #0ea5e9, #0284c7) !important; }
.mobile-launcher-meeting { background: linear-gradient(135deg, #6366f1, #4f46e5) !important; }


/* --- View: welcome.blade.php (Block 1) --- */
:root {
            --light-primary: #3b82f6;
            --light-primary-dark: #1d4ed8;
            --light-accent: #10b981;
            --light-text: #1e293b;
            --light-muted: #64748b;
            --light-bg-card: #ffffff;
            --light-border: #e2e8f0;
            --light-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            --light-shadow-hover: 0 16px 40px rgba(59, 130, 246, 0.12);
        }

        /* Default Light Mode Global Refinement */
        html.max-width-d {
            min-height: 0 !important;
            height: 100% !important;
            max-height: 100% !important;
            overflow: hidden !important;
        }
        html.max-width-d body {
            font-family: 'Poppins', sans-serif !important;
            color: var(--light-text);
            background: #e8edf3 !important; /* Elegant light pearl canvas */
            overflow: hidden !important;
            position: fixed !important;
            left: 0 !important;
            top: 0 !important;
            bottom: 0 !important;
            right: 0 !important;
            min-height: 0 !important;
            height: 100% !important;
            max-height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            max-width: 100% !important; /* Explicitly overrides any 800px breakages */
        }

        /* Clean Card Deck Container */
        html.max-width-d #main {
            box-shadow: 0 20px 50px rgba(30, 41, 59, 0.08) !important;
            border-radius: 20px !important;
            border: 1px solid rgba(255, 255, 255, 0.8) !important;
            background: #ffffff !important;
        }
        html.max-width-d #main > section {
            background: #ffffff !important;
            border-radius: 20px !important;
            width: 100% !important;
            left: 0 !important;
            right: 0 !important;
            box-sizing: border-box !important;
        }

        /* ==============================================================================
           CENTRALIZED & SHINING SIDEBAR NAVIGATION (Desktop, Tablet, Mobile)
           ============================================================================== */
        /* 1. Left-Side Container (Desktop) */
        @media (min-width: 992px) {
            .left-side {
                position: fixed !important;
                left: 24px !important;
                top: 24px !important;
                bottom: 46px !important;
                height: auto !important;
                max-height: none !important;
                width: 280px !important;
                background: rgba(255, 255, 255, 0.96) !important;
                backdrop-filter: blur(24px) !important;
                -webkit-backdrop-filter: blur(24px) !important;
                border: 1px solid rgba(226, 232, 240, 0.9) !important;
                border-radius: 24px !important;
                box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: space-between !important;
                padding: 14px 12px !important;
                z-index: 100 !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                scrollbar-width: none !important;
                -ms-overflow-style: none !important;
            }
            .left-side::-webkit-scrollbar {
                display: none !important;
                width: 0 !important;
                height: 0 !important;
            }

            /* Main Container Between Left Sidebar and Right Rail */
            html.max-width-d #main {
                position: fixed !important;
                left: 324px !important;
                right: 120px !important;
                top: 24px !important;
                bottom: 46px !important;
                height: auto !important;
                max-height: none !important;
                width: auto !important;
                border-radius: 24px !important;
                box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08) !important;
                background: #ffffff !important;
                overflow: hidden !important;
            }
            html.max-width-d #main > section {
                position: absolute !important;
                top: 0 !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                height: 100% !important;
                padding: 24px 28px !important;
                overflow-x: hidden !important;
                overflow-y: auto !important;
            }
            html.max-width-d #main > section#hero {
                display: block !important;
                padding: 14px 24px !important;
                overflow-y: auto !important;
            }
            html.max-width-d #main > section#hero .mCustomScrollBox {
                width: 100% !important;
                height: auto !important;
                max-height: none !important;
                display: block !important;
            }
            html.max-width-d #main > section#hero .mCSB_container {
                width: 100% !important;
                height: auto !important;
                top: 0 !important;
                margin: 0 !important;
                display: block !important;
                min-height: 0 !important;
            }
            html.max-width-d .hero-center,
            html.max-width-d .hero .hero-center {
                min-height: 0 !important;
                height: auto !important;
                width: 100% !important;
                display: block !important;
                position: relative !important;
                top: 0 !important;
                transform: none !important;
                padding: 0 !important;
                margin: 0 !important;
            }
            .hero-content {
                max-width: 100% !important;
            }

            /* Right-Side Floating Rail: Pinned to Right Edge, Matching Left Sidebar Height */
            .right-side {
                position: fixed !important;
                right: 24px !important;
                left: auto !important;
                top: 24px !important;
                bottom: 46px !important;
                height: auto !important;
                max-height: none !important;
                width: 76px !important;
                background: rgba(255, 255, 255, 0.96) !important;
                backdrop-filter: blur(24px) !important;
                -webkit-backdrop-filter: blur(24px) !important;
                border: 1px solid rgba(226, 232, 240, 0.9) !important;
                border-radius: 24px !important;
                box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
                z-index: 100 !important;
                box-sizing: border-box !important;
                padding: 18px 0 !important;
                display: block !important;
            }
        }

        /* 2. Enlarged Company Brand Card (Top) */
        .sidebar-brand-card {
            background: #ffffff !important;
            border-radius: 18px !important;
            padding: 10px 8px !important;
            border: 1px solid rgba(226, 232, 240, 0.85) !important;
            box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
            text-align: center;
            transition: all 0.3s ease;
        }

        .sidebar-brand-card:hover {
            box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12) !important;
            transform: translateY(-1px);
        }

        .sidebar-brand-logo {
            max-width: 125px !important;
            max-height: 58px !important;
            width: auto !important;
            height: auto !important;
            object-fit: contain !important;
            filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.06));
            transition: transform 0.3s ease;
        }

        .sidebar-brand-card:hover .sidebar-brand-logo {
            transform: scale(1.04);
        }

        .sidebar-brand-title {
            font-size: 0.82rem !important;
            font-weight: 700 !important;
            color: #0f172a !important;
            margin-top: 5px !important;
            margin-bottom: 2px !important;
            letter-spacing: -0.01em;
            line-height: 1.2;
        }

        .sidebar-brand-badge {
            display: inline-flex !important;
            align-items: center !important;
            gap: 4px !important;
            font-size: 0.65rem !important;
            font-weight: 700 !important;
            color: #0d7a64 !important;
            background: #e6f7f3 !important;
            padding: 2px 8px !important;
            border-radius: 9999px !important;
            letter-spacing: 0.02em;
        }

        /* 3. Middle Shining App Menu Grid (No Empty Space!) */
        .sidebar-menu-wrapper {
            position: relative !important;
            width: 100% !important;
            margin: 6px 0 !important;
            flex-grow: 1 !important;
            display: flex !important;
            align-items: center !important;
        }

        .sidebar-menu-wrapper .menu {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 8px !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            list-style: none !important;
            position: static !important;
            overflow: visible !important;
            height: auto !important;
        }

        /* Modern Refined Navigation Cards */
        .left-side .menu .list-group-item,
        .sidebar-menu-wrapper .menu .list-group-item {
            position: relative !important;
            width: 100% !important;
            height: 64px !important;
            min-height: 64px !important;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
            border-radius: 14px !important;
            overflow: hidden !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        .left-side .menu .list-group-item a,
        .sidebar-menu-wrapper .menu .list-group-item a,
        .app-launcher-grid .app-launcher-item a {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            height: 100% !important;
            padding: 6px 4px !important;
            border-radius: 14px !important;
            text-decoration: none !important;
            position: relative !important;
            background-color: #ffffff !important;
            background-image: none !important;
            border: 1px solid #e2e8f0 !important;
            box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04) !important;
            transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
            color: #334155 !important;
            margin: 0 !important;
        }

        .app-launcher-grid .app-launcher-item {
            height: 70px !important;
            min-height: 70px !important;
            border-radius: 14px !important;
            overflow: hidden !important;
        }

        /* Icon & Label Styling: CRISP, REFINED & HARMONIOUS */
        .left-side .menu .list-group-item a i,
        .sidebar-menu-wrapper .menu .list-group-item a i,
        .app-launcher-grid .app-launcher-item a i {
            font-size: 1.25rem !important;
            line-height: 1 !important;
            margin: 0 0 4px 0 !important;
            padding: 0 !important;
            transition: transform 0.2s ease !important;
            filter: none !important;
        }

        .left-side .menu .list-group-item a span,
        .sidebar-menu-wrapper .menu .list-group-item a span,
        .app-launcher-grid .app-launcher-item a span,
        html.max-width-d .left-side .menu span, html.max-width-d .sidebar-menu-wrapper .menu span {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
            transform: none !important;
            font-size: 0.72rem !important;
            font-weight: 600 !important;
            color: #475569 !important;
            text-shadow: none !important;
            letter-spacing: -0.01em;
            text-transform: capitalize;
            line-height: 1.1 !important;
            margin: 0 !important;
            padding: 0 !important;
            transition: color 0.2s ease !important;
        }

        /* Curated Soft-Tint Icon Accents */
        .item-home a i { color: #2563eb !important; }
        .item-pay a i { color: #059669 !important; }
        .item-login a i { color: #d97706 !important; }
        .item-login.active-user-item a i { color: #059669 !important; }
        .item-services a i { color: #7c3aed !important; }
        .item-careers a i { color: #0284c7 !important; }
        .item-api a i { color: #4f46e5 !important; }
        .item-works a i { color: #db2777 !important; }
        .item-about a i { color: #ea580c !important; }
        .item-insights a i { color: #0d9488 !important; }
        .item-contact a i { color: #0284c7 !important; }

        /* Hover States */
        .left-side .menu .list-group-item a:hover,
        .sidebar-menu-wrapper .menu .list-group-item a:hover,
        .app-launcher-grid .app-launcher-item a:hover {
            transform: translateY(-2px) !important;
            border-color: #93c5fd !important;
            box-shadow: 0 6px 18px rgba(37, 99, 235, 0.12) !important;
            background: #f8fafc !important;
        }
        .left-side .menu .list-group-item a:hover i,
        .sidebar-menu-wrapper .menu .list-group-item a:hover i,
        .app-launcher-grid .app-launcher-item a:hover i {
            transform: scale(1.1) !important;
        }
        .left-side .menu .list-group-item a:hover span,
        .sidebar-menu-wrapper .menu .list-group-item a:hover span {
            color: #0f172a !important;
        }

        /* Active Selected State: Premium Gradient Fill */
        .left-side .menu .list-group-item a.active,
        .sidebar-menu-wrapper .menu .list-group-item a.active,
        .app-launcher-grid .app-launcher-item a.active {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
            border-color: #1d4ed8 !important;
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35) !important;
            color: #ffffff !important;
            transform: translateY(-1px) !important;
        }
        .left-side .menu .list-group-item a.active i,
        .sidebar-menu-wrapper .menu .list-group-item a.active i {
            color: #ffffff !important;
            transform: scale(1.1) !important;
        }
        .left-side .menu .list-group-item a.active span,
        .sidebar-menu-wrapper .menu .list-group-item a.active span {
            color: #ffffff !important;
            font-weight: 700 !important;
        }

        /* Logged In Active Dashboard Indicator */
        .left-side .menu .list-group-item.item-login.active-user-item a.active {
            background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
            border-color: #047857 !important;
            box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35) !important;
        }

        /* 4. Bottom Support Card inside Sidebar */
        .sidebar-footer-card {
            background: #ffffff !important;
            border-radius: 14px !important;
            padding: 6px 8px !important;
            border: 1px solid rgba(226, 232, 240, 0.85) !important;
            text-align: center;
            margin-top: 4px !important;
        }
        .sidebar-support-chips {
            display: flex;
            gap: 6px;
            justify-content: center;
            margin-bottom: 4px;
        }
        .support-chip {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 6px 8px;
            border-radius: 10px;
            font-size: 0.72rem;
            font-weight: 600;
            text-decoration: none !important;
            transition: all 0.25s ease;
        }
        .support-chip.whatsapp {
            background: #ecfdf5;
            color: #059669;
            border: 1px solid #a7f3d0;
        }
        .support-chip.whatsapp:hover {
            background: #10b981;
            color: #ffffff;
        }
        .support-chip.email {
            background: #eff6ff;
            color: #2563eb;
            border: 1px solid #bfdbfe;
        }
        .support-chip.email:hover {
            background: #3b82f6;
            color: #ffffff;
        }
        .sidebar-trust-note {
            font-size: 0.7rem;
            color: #64748b;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }

        /* ==============================================================================
           MOBILE APP EXPERIENCE ("mobile me app jesa dikhan chahiye")
           ============================================================================== */
        /* Sticky Mobile Top App Header */
        .mobile-app-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(226, 232, 240, 0.85);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
        }
        .mobile-app-logo {
            max-height: 40px;
            max-width: 110px;
            object-fit: contain;
        }
        .mobile-app-title {
            font-size: 0.88rem;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.1;
            max-width: 170px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .mobile-app-subtitle {
            font-size: 0.65rem;
            color: #64748b;
            font-weight: 600;
        }
        .mobile-app-action-btn {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            font-size: 1.15rem;
            text-decoration: none !important;
            transition: transform 0.2s ease;
        }
        .mobile-app-action-btn.whatsapp-btn {
            background: #ecfdf5;
            color: #10b981;
            border: 1px solid #a7f3d0;
        }
        .mobile-app-action-btn.menu-btn {
            background: #f1f5f9;
            color: #1e293b;
            border: 1px solid #e2e8f0;
        }

        /* Floating Mobile App Bottom Tab Bar */
        .mobile-app-bottom-bar {
            position: fixed;
            bottom: 12px;
            left: 12px;
            right: 12px;
            height: 64px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0 4px;
            z-index: 1000;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
        }
        .mobile-tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #64748b;
            text-decoration: none !important;
            padding: 6px 10px;
            border-radius: 14px;
            transition: all 0.25s ease;
            font-size: 0.68rem;
            font-weight: 600;
            flex: 1;
        }
        .mobile-tab-item i {
            font-size: 1.3rem;
            margin-bottom: 2px;
            line-height: 1;
            transition: transform 0.25s ease;
        }
        .mobile-tab-item.active {
            color: #2563eb;
            background: #eff6ff;
        }
        .mobile-tab-item.active i {
            transform: scale(1.15);
        }

        /* Mobile Screen Layout ("mobile me app jesa dikhan chahiye") */
        @media (max-width: 991px) {
            html.max-width-d {
                zoom: 1 !important;
                -webkit-text-size-adjust: 100% !important;
            }
        html.max-width-d body {
                overflow: hidden !important;
                background: #f1f5f9 !important;
            }
        html.max-width-d #main {
                position: fixed !important;
                top: 66px !important;
                bottom: 84px !important;
                left: 8px !important;
                right: 8px !important;
                width: calc(100% - 16px) !important;
                height: auto !important;
                border-radius: 20px !important;
                box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
                overflow: hidden !important;
                background: #ffffff !important;
            }
        html.max-width-d #main > section {
                position: absolute !important;
                top: 0 !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                height: 100% !important;
                overflow-x: hidden !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
                padding: 18px 14px 30px !important;
                border-radius: 20px !important;
            }
            .hero .hero-center {
                top: 0 !important;
                transform: none !important;
                margin: 0 auto !important;
                padding-top: 8px !important;
                padding-bottom: 24px !important;
                width: 100% !important;
            }
            .hero-content h2 {
                font-size: 1.65rem !important;
                line-height: 1.25 !important;
            }
            .contact-box {
                padding: 1.15rem !important;
                border-radius: 18px !important;
            }
            .left-side {
                display: none !important;
            }
            .right-side {
                display: none !important;
            }
            .custom-footer-bar {
                display: none !important;
            }
            .next-prev-page, .menu-toggle {
                display: none !important;
            }

            /* True Mobile Bottom Sheet App Launcher */
            #mobileAppLauncherModal.modal {
                padding: 0 !important;
            }
            #mobileAppLauncherModal .modal-dialog {
                position: fixed !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                margin: 0 !important;
                max-width: 100% !important;
                width: 100% !important;
                transform: none !important;
            }
            #mobileAppLauncherModal .modal-content {
                border-radius: 24px 24px 0 0 !important;
                border: none !important;
                box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.25) !important;
                padding: 16px 14px 28px !important;
                background: #ffffff !important;
                max-height: 85vh !important;
                overflow-y: auto !important;
            }

            /* Mobile GPU & Screen Stabilization (Zero Shaking / No Lag / Instant Touch Response) */
            .area, .circles, .m-magic-cursor {
                display: none !important;
                animation: none !important;
            }
            .section, #main, #main > section {
                -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
            }
            html.max-width-d #main > section {
                transform: none !important;
                -webkit-transform: none !important;
                backface-visibility: hidden !important;
                -webkit-backface-visibility: hidden !important;
                will-change: auto !important;
            }
            html.max-width-d #main > section.active {
                opacity: 1 !important;
                visibility: visible !important;
                transform: none !important;
            }
            .animate__animated,
            .animate__backInDown,
            .animate__backOutDown,
            .animate__zoomIn,
            .animate__zoomOut {
                transform: none !important;
                animation: none !important;
                transition: opacity 0.15s ease !important;
            }
            .mCustomScrollBox, .mCSB_container {
                height: auto !important;
                overflow: visible !important;
                position: static !important;
                top: 0 !important;
            }
        }

        /* Right Side Widget Internals */
        .right-side {
            background: rgba(255, 255, 255, 0.96) !important;
            box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
            border: 1px solid rgba(226, 232, 240, 0.9) !important;
            border-radius: 24px !important;
            box-sizing: border-box !important;
        }

        #date {
            color: #1e293b !important;
            font-weight: 600 !important;
            font-size: 0.85rem !important;
            text-align: center !important;
            position: absolute !important;
            top: 20px !important;
            left: 0 !important;
            right: 0 !important;
            line-height: 1.2 !important;
        }

        #date b {
            font-size: 1.6rem !important;
            font-weight: 800 !important;
            color: #2563eb !important;
            display: block !important;
            line-height: 1 !important;
            margin-bottom: 2px !important;
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
        }

        #date span {
            font-size: 0.76rem !important;
            font-weight: 700 !important;
            color: #475569 !important;
        }

        .right-side .social-box {
            position: absolute !important;
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: 1.5rem !important;
        }

        /* Primary Colored Vertical Line & Connect Label in Right Bar */
        .right-side .follow-label {
            color: #64748b !important;
            font-weight: 600 !important;
            font-size: 0.75rem !important;
            letter-spacing: 0.08em !important;
            text-transform: uppercase !important;
        }

        .right-side .follow-label::before {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.5) !important;
            height: 2.5px !important;
            border-radius: 2px !important;
        }

        /* Universal High-Contrast Badge Tags */
        .badge-tag-blue {
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important;
            padding: 5px 14px !important;
            background: #eff6ff !important;
            color: #1d4ed8 !important;
            border: 1px solid #bfdbfe !important;
            border-radius: 9999px !important;
            font-size: 0.8rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.02em !important;
            margin-bottom: 0.75rem !important;
            box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08) !important;
        }
        .badge-tag-blue, .badge-tag-blue * {
            color: #1d4ed8 !important;
        }
        .badge-tag-blue i {
            color: #2563eb !important;
            font-size: 0.95rem !important;
        }

        .badge-tag-green {
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important;
            padding: 5px 14px !important;
            background: #ecfdf5 !important;
            color: #065f46 !important;
            border: 1px solid #a7f3d0 !important;
            border-radius: 9999px !important;
            font-size: 0.8rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.02em !important;
            margin-bottom: 0.75rem !important;
            box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08) !important;
        }
        .badge-tag-green, .badge-tag-green * {
            color: #065f46 !important;
        }
        .badge-tag-green i {
            color: #059669 !important;
            font-size: 0.95rem !important;
        }

        /* High-Definition Contact & Feature Icon Boxes */
        .icon-box-green, .icon-box-blue, .icon-box-teal, .icon-box-amber {
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            border-radius: 12px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 1.25rem !important;
            transition: all 0.25s ease !important;
        }
        .icon-box-green {
            background: #ecfdf5 !important;
            color: #059669 !important;
            border: 1px solid #a7f3d0 !important;
        }
        .icon-box-green i {
            color: #059669 !important;
        }
        .icon-box-blue {
            background: #eff6ff !important;
            color: #2563eb !important;
            border: 1px solid #bfdbfe !important;
        }
        .icon-box-blue i {
            color: #2563eb !important;
        }
        .icon-box-teal {
            background: #f0fdfa !important;
            color: #0d9488 !important;
            border: 1px solid #99f6e4 !important;
        }
        .icon-box-teal i {
            color: #0d9488 !important;
        }
        .icon-box-amber {
            background: #fffbeb !important;
            color: #d97706 !important;
            border: 1px solid #fde68a !important;
        }
        .icon-box-amber i {
            color: #d97706 !important;
        }

        /* Universal High-Contrast Overrides for Green / Success Backgrounds */
        .bg-success:not([class*="opacity"]) {
            background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
            color: #ffffff !important;
        }
        .bg-success:not([class*="opacity"]) * {
            color: #ffffff !important;
        }
        .badge-success, .btn-success {
            color: #ffffff !important;
            background-color: #10b981 !important;
            border-color: #10b981 !important;
        }
        .badge-success *, .btn-success * {
            color: #ffffff !important;
        }
        .alert-success {
            background-color: #ecfdf5 !important;
            border-color: #a7f3d0 !important;
            color: #065f46 !important;
        }
        .alert-success * {
            color: #065f46 !important;
        }
        .text-success {
            color: #059669 !important;
        }
        .text-primary {
            color: #2563eb !important;
        }

        .bg-primary:not([class*="opacity"]) {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
            color: #ffffff !important;
        }
        .bg-primary:not([class*="opacity"]) * {
            color: #ffffff !important;
        }

        /* Soft Pastel Translucent Tints */
        .bg-primary.bg-opacity-10, [class*="bg-primary"][class*="opacity"] {
            background-color: #eff6ff !important;
            color: #1d4ed8 !important;
            border: 1px solid #bfdbfe !important;
        }
        .bg-primary.bg-opacity-10 *, [class*="bg-primary"][class*="opacity"] * {
            color: #1d4ed8 !important;
        }
        .bg-primary.bg-opacity-10 i, [class*="bg-primary"][class*="opacity"] i {
            color: #2563eb !important;
        }

        .bg-success.bg-opacity-10, [class*="bg-success"][class*="opacity"] {
            background-color: #ecfdf5 !important;
            color: #065f46 !important;
            border: 1px solid #a7f3d0 !important;
        }
        .bg-success.bg-opacity-10 *, [class*="bg-success"][class*="opacity"] * {
            color: #065f46 !important;
        }
        .bg-success.bg-opacity-10 i, [class*="bg-success"][class*="opacity"] i {
            color: #059669 !important;
        }

        .bg-info.bg-opacity-10 {
            background-color: #f0fdfa !important;
            color: #0d9488 !important;
            border: 1px solid #99f6e4 !important;
        }

        .bg-warning.bg-opacity-10 {
            background-color: #fffbeb !important;
            color: #d97706 !important;
            border: 1px solid #fde68a !important;
        }

        .right-side .next-prev-page {
            position: absolute !important;
            bottom: 20px !important;
            right: 50% !important;
            transform: translateX(50%) !important;
        }

        .next-prev-page button {
            width: 38px !important;
            height: 38px !important;
            border-radius: 12px !important;
            background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
            color: #ffffff !important;
            border: none !important;
            box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
            transition: all 0.25s ease !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .next-prev-page button:hover {
            transform: scale(1.1) !important;
            box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45) !important;
        }

        /* 2-Column Balanced Compact Hero CTA Grid */
        .hero-cta-grid {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(145px, 178px)) !important;
            gap: 8px 10px !important;
            margin-top: 0.75rem !important;
            margin-bottom: 0.25rem !important;
            justify-content: start !important;
        }

        @media (max-width: 991px) {
            .hero-cta-grid {
                justify-content: center !important;
                grid-template-columns: repeat(2, minmax(135px, 170px)) !important;
                gap: 8px !important;
            }
        }

        @media (max-width: 480px) {
            .hero-cta-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 8px !important;
            }
            .hero-badge-tag, .badge-tag-blue, .badge-tag-green {
                font-size: 0.72rem !important;
                padding: 4px 10px !important;
            }
            .contact-box {
                padding: 1rem 0.85rem !important;
                border-radius: 16px !important;
            }
        }

        .hero-cta-grid .hero-cta-btn {
            width: 100% !important;
            height: 36px !important;
            padding: 0 13px !important;
            border-radius: 10px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 6px !important;
            font-size: 0.78rem !important;
            font-weight: 600 !important;
            text-decoration: none !important;
            transition: all 0.2s ease !important;
            box-sizing: border-box !important;
            white-space: nowrap !important;
        }

        .hero-cta-grid .hero-cta-btn.primary {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
            color: #ffffff !important;
            box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
        }

        .hero-cta-grid .hero-cta-btn.primary:hover {
            transform: translateY(-1px) !important;
            box-shadow: 0 6px 18px rgba(37, 99, 235, 0.38) !important;
            color: #ffffff !important;
        }

        .hero-cta-grid .hero-cta-btn.secondary {
            background: #ffffff !important;
            color: #1e293b !important;
            border: 1px solid #cbd5e1 !important;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
        }

        .hero-cta-grid .hero-cta-btn.secondary:hover {
            background: #f8fafc !important;
            border-color: #3b82f6 !important;
            color: #2563eb !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1) !important;
        }

        .hero-cta-grid .hero-cta-btn i {
            font-size: 0.9rem !important;
        }

        /* Primary & Secondary Action Buttons (General) */
        .primary-button, .secondary-button {
            border-radius: 30px !important;
            font-weight: 600 !important;
            padding: 10px 24px !important;
            font-size: 0.9rem !important;
            transition: all 0.3s ease !important;
            text-decoration: none !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 6px !important;
        }

        .primary-button {
            background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
            color: #ffffff !important;
            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3) !important;
            border: none !important;
        }

        .primary-button:hover {
            color: #ffffff !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.45) !important;
        }

        .secondary-button {
            background: #ffffff !important;
            color: #1e293b !important;
            border: 1.5px solid var(--light-border) !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
        }

        .secondary-button:hover {
            background: #f8fafc !important;
            color: #2563eb !important;
            border-color: #3b82f6 !important;
            transform: translateY(-2px) !important;
        }

        #pay .extend-icon, #login .extend-icon, #register .extend-icon {
            display: none !important;
        }

        /* Hero Typography & Badges */
        .hero-content h2 {
            font-size: 2.3rem !important;
            font-weight: 800 !important;
            letter-spacing: -0.02em;
            color: #0f172a !important;
            line-height: 1.25;
        }

        .hero-badge-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 14px;
            background: #eff6ff;
            color: #2563eb;
            font-weight: 700;
            font-size: 0.78rem;
            border-radius: 30px;
            border: 1px solid #bfdbfe;
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .hero-trust-bar {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 1.25rem;
            margin-top: 0.85rem !important;
            padding-top: 0.75rem !important;
            border-top: 1px solid #f1f5f9;
        }

        .hero-trust-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            color: #475569;
        }

        .hero-trust-item i {
            color: #10b981;
            font-size: 1.1rem;
        }

        /* Clean Modern Form Inputs for Light Mode (Completely Overrides Orange/Red Gradient in style.css) */
        html.max-width-d .form-control, html.max-width-d select.form-control, html.max-width-d input.form-control, html.max-width-d textarea.form-control {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            background-image: none !important;
            background-color: #f8fafc !important;
            border: 1.5px solid #cbd5e1 !important;
            border-radius: 12px !important;
            box-shadow: none !important;
            color: #0f172a !important;
            font-size: 0.9rem !important;
            font-weight: 500 !important;
            height: auto !important;
            padding: 9px 14px !important;
        }
        html.max-width-d .form-select {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important;
            background-color: #f8fafc !important;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
            background-repeat: no-repeat !important;
            background-position: right 12px center !important;
            background-size: 14px 10px !important;
            border: 1.5px solid #cbd5e1 !important;
            border-radius: 12px !important;
            box-shadow: none !important;
            color: #0f172a !important;
            font-size: 0.88rem !important;
            font-weight: 500 !important;
            height: auto !important;
            padding: 9px 36px 9px 14px !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }
        html.max-width-d .form-control.form-control-sm {
            padding: 7px 12px !important;
            font-size: 0.84rem !important;
        }
        html.max-width-d .form-select.form-select-sm {
            padding: 7px 34px 7px 12px !important;
            font-size: 0.84rem !important;
        }
        html.max-width-d .form-control:focus, html.max-width-d select.form-control:focus, html.max-width-d input.form-control:focus, html.max-width-d textarea.form-control:focus {
            background-image: none !important;
            background-color: #ffffff !important;
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
            color: #0f172a !important;
            outline: none !important;
        }
        html.max-width-d .form-select:focus {
            background-color: #ffffff !important;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232563eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
            background-repeat: no-repeat !important;
            background-position: right 12px center !important;
            background-size: 14px 10px !important;
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
            color: #0f172a !important;
            outline: none !important;
        }

        .form-control::placeholder {
            color: #94a3b8 !important;
            font-weight: 400 !important;
        }

        .input-group-text {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            background-color: #f1f5f9 !important;
            border: 1.5px solid #cbd5e1 !important;
            color: #475569 !important;
            font-weight: 600 !important;
            padding: 0 14px !important;
            white-space: nowrap !important;
            flex-shrink: 0 !important;
        }

        html.max-width-d .input-group {
            position: relative !important;
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: stretch !important;
            width: 100% !important;
        }

        html.max-width-d .input-group > .form-control,
        html.max-width-d .input-group > input.form-control,
        html.max-width-d .input-group > select.form-control,
        html.max-width-d .input-group > .form-select {
            position: relative !important;
            flex: 1 1 auto !important;
            width: 1% !important;
            min-width: 0 !important;
            margin-bottom: 0 !important;
        }

        html.max-width-d .input-group > :first-child {
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
            border-top-left-radius: 12px !important;
            border-bottom-left-radius: 12px !important;
        }

        html.max-width-d .input-group > :not(:first-child):not(:last-child) {
            border-radius: 0 !important;
        }

        html.max-width-d .input-group > :last-child:not(:first-child) {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
            border-top-right-radius: 12px !important;
            border-bottom-right-radius: 12px !important;
        }

        html.max-width-d .input-group > .input-group-text:first-child {
            border-right: 0 !important;
        }

        html.max-width-d .input-group > .btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            border: 1.5px solid #cbd5e1 !important;
            border-left: 0 !important;
            background-color: #f1f5f9 !important;
            color: #475569 !important;
            padding: 0 14px !important;
            margin: 0 !important;
            box-shadow: none !important;
            flex-shrink: 0 !important;
        }

        html.max-width-d .input-group > .btn:hover {
            background-color: #e2e8f0 !important;
            color: #0f172a !important;
        }

        .form-label-custom {
            font-size: 0.82rem;
            font-weight: 600;
            color: #475569;
            margin-bottom: 6px;
            display: block;
        }

        /* Payment Chips */
        .quick-amt-chip {
            border: 1px solid #cbd5e1;
            background: #ffffff;
            color: #334155;
            font-weight: 600;
            font-size: 0.82rem;
            padding: 6px 14px;
            margin-right: 6px;
            margin-bottom: 4px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .quick-amt-chip:hover, .quick-amt-chip.active {
            background: #3b82f6;
            color: #ffffff;
            border-color: #3b82f6;
            box-shadow: 0 3px 8px rgba(59, 130, 246, 0.25);
        }

        /* Polished Services & Timeline Cards */
        .services-box {
            background: #ffffff !important;
            border: 1px solid #f1f5f9 !important;
            box-shadow: 0 8px 24px rgba(30, 41, 59, 0.04) !important;
            border-radius: 16px !important;
            padding: 24px !important;
            transition: all 0.3s ease !important;
            margin-bottom: 24px !important;
        }

        .services-box:hover {
            transform: translateY(-4px) !important;
            box-shadow: 0 16px 36px rgba(59, 130, 246, 0.1) !important;
            border-color: #bfdbfe !important;
        }

        .services-head {
            color: #0f172a !important;
            font-weight: 700 !important;
            font-size: 1.1rem !important;
            margin-bottom: 8px !important;
        }

        .services-description {
            color: #64748b !important;
            font-size: 0.88rem !important;
            line-height: 1.6 !important;
        }

        .timeline-box {
            background: #ffffff !important;
            border: 1px solid #f1f5f9 !important;
            box-shadow: 0 8px 24px rgba(30, 41, 59, 0.04) !important;
            border-radius: 16px !important;
            padding: 24px !important;
            transition: all 0.3s ease !important;
            margin-bottom: 24px !important;
        }

        .timeline-box:hover {
            transform: translateY(-3px) !important;
            box-shadow: 0 14px 30px rgba(59, 130, 246, 0.09) !important;
            border-color: #bfdbfe !important;
        }

        .timeline-year {
            background: #eff6ff !important;
            color: #2563eb !important;
            font-weight: 700 !important;
            border-radius: 20px !important;
            padding: 3px 12px !important;
            display: inline-block !important;
            font-size: 0.78rem !important;
        }

        .timeline-title {
            color: #0f172a !important;
            font-weight: 700 !important;
            font-size: 1.05rem !important;
            margin-top: 8px !important;
        }

        /* Portfolio Items */
        .portfolio-box {
            background: #ffffff;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid #f1f5f9;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
            transition: all 0.3s ease;
            margin-bottom: 24px;
        }

        .portfolio-box:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 36px rgba(59, 130, 246, 0.12);
        }

        .portfolio-image {
            height: 200px;
            position: relative;
            overflow: hidden;
            background: #f8fafc;
        }

        .portfolio-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .portfolio-box:hover .portfolio-image img {
            transform: scale(1.06);
        }

        .portfolio-content {
            padding: 18px;
        }

        .portfolio-content h6 {
            font-size: 1rem;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 4px;
        }

        .portfolio-content p {
            font-size: 0.8rem;
            color: #64748b;
        }

        /* Contact Section Matrix */
        .contact-box {
            margin-top: 0 !important;
        }

        #my-map {
            width: 100% !important;
            height: 180px !important;
            min-height: 180px !important;
            border-radius: 12px !important;
        }

        .info-box,
        .contact-01 .info-box {
            background: #ffffff !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 12px !important;
            padding: 12px 16px !important;
            margin-top: 0 !important;
            margin-bottom: 12px !important;
            display: flex !important;
            align-items: center !important;
            gap: 14px !important;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
            transition: all 0.25s ease !important;
            width: 100% !important;
            overflow: hidden !important;
        }

        .info-box:hover {
            transform: translateY(-2px) !important;
            border-color: #3b82f6 !important;
            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.08) !important;
        }

        .item-icon,
        .contact-01 .item-icon {
            float: none !important;
            flex-shrink: 0 !important;
            margin: 0 !important;
        }

        .item-icon i,
        .contact-01 .item-icon i {
            font-size: 1.2rem !important;
            line-height: 1 !important;
            position: static !important;
        }

        .info-text,
        .contact-01 .info-text {
            margin-left: 0 !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
            text-align: left !important;
        }

        .info-box h5 {
            font-size: 0.95rem;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 2px;
        }

        .info-box small,
        .info-box small a,
        .info-text small,
        .contact-01 .info-text small {
            color: #64748b !important;
            font-size: 0.74rem !important;
            font-weight: 600 !important;
            text-decoration: none !important;
            display: block !important;
            margin-bottom: 2px !important;
            line-height: 1.2 !important;
        }

        .info-text strong {
            color: #0f172a !important;
            font-size: 0.88rem !important;
            font-weight: 700 !important;
            line-height: 1.35 !important;
            display: block !important;
            word-break: break-word !important;
            overflow-wrap: anywhere !important;
        }

        /* Footer Policies Bar */
        .custom-footer-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(10px);
            border-top: 1px solid rgba(226, 232, 240, 0.8);
            padding: 8px 20px;
            z-index: 1020;
            text-align: center;
        }

        .custom-footer-bar ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1.25rem;
        }

        .custom-footer-bar ul li a {
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 600;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .custom-footer-bar ul li a:hover {
            color: #2563eb;
        }

        /* Clean Preloader */
        #line-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #ffffff;
            z-index: 999999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.4s ease;
        }

        #line-loader.preloaded,
        #line-loader.loaded {
            display: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
        
        .loader-spinner {
            width: 48px;
            height: 48px;
            border: 4px solid #e2e8f0;
            border-top-color: #3b82f6;
            border-radius: 50%;
            animation: spinLoader 0.8s linear infinite;
        }

        @keyframes spinLoader {
            to { transform: rotate(360deg); }
        }

        /* ==============================================================================
           MODERN FINTECH LOGIN LOADING OVERLAY DESIGN
           ============================================================================== */
        .contact-box.position-relative {
            position: relative !important;
        }

        .login-loader-overlay {
            position: absolute !important;
            inset: 0 !important;
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(14px) !important;
            -webkit-backdrop-filter: blur(14px) !important;
            z-index: 50 !important;
            display: none !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 2rem 1.5rem !important;
            border-radius: inherit !important;
        }

        .login-loader-overlay.active {
            display: flex !important;
            animation: fadeInLoader 0.25s ease-out forwards !important;
        }

        @keyframes fadeInLoader {
            from {
                opacity: 0;
                transform: scale(0.97);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .login-loader-card {
            text-align: center;
            max-width: 360px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .fintech-auth-spinner {
            position: relative;
            width: 90px;
            height: 90px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .auth-ring-outer {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 3.5px solid transparent;
            border-top-color: #3b82f6;
            border-right-color: #1d4ed8;
            animation: authSpinOuter 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
        }

        .auth-ring-inner {
            position: absolute;
            inset: 8px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-bottom-color: #10b981;
            border-left-color: #059669;
            animation: authSpinInner 1.6s linear infinite;
            filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.45));
        }

        .auth-ring-pulse {
            position: absolute;
            inset: 16px;
            border-radius: 50%;
            background: rgba(59, 130, 246, 0.08);
            animation: authPulse 1.8s ease-in-out infinite;
        }

        .auth-center-icon {
            position: relative;
            z-index: 2;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2);
        }

        .auth-center-icon i {
            font-size: 1.4rem;
            color: #2563eb;
            animation: authShieldGlow 2s ease-in-out infinite;
        }

        @keyframes authSpinOuter {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes authSpinInner {
            0% { transform: rotate(360deg); }
            100% { transform: rotate(0deg); }
        }

        @keyframes authPulse {
            0%, 100% { transform: scale(0.9); opacity: 0.5; }
            50% { transform: scale(1.18); opacity: 0.95; }
        }

        @keyframes authShieldGlow {
            0%, 100% { opacity: 0.85; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.08); }
        }

        .auth-loader-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #0f172a;
            letter-spacing: -0.01em;
        }

        .auth-loader-text {
            font-size: 0.86rem;
            color: #64748b;
            line-height: 1.5;
        }

        .auth-progress-track {
            width: 100%;
            height: 6px;
            background: #e2e8f0;
            border-radius: 9999px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) inset;
        }

        .auth-progress-bar {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 48%;
            background: linear-gradient(90deg, #3b82f6, #10b981, #3b82f6);
            background-size: 200% 100%;
            border-radius: 9999px;
            animation: authProgressMove 1.5s ease-in-out infinite, authShimmer 2s linear infinite;
        }

        @keyframes authProgressMove {
            0% { left: -48%; }
            100% { left: 100%; }
        }

        @keyframes authShimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        /* ==============================================================================
           PREMIUM CUSTOM SWEETALERT2 POPUP DESIGN
           ============================================================================== */
        .swal2-container {
            backdrop-filter: blur(8px) !important;
            -webkit-backdrop-filter: blur(8px) !important;
            background: rgba(15, 23, 42, 0.6) !important;
            z-index: 999999 !important;
        }

        .swal2-popup {
            border-radius: 28px !important;
            background: rgba(255, 255, 255, 0.98) !important;
            backdrop-filter: blur(24px) !important;
            -webkit-backdrop-filter: blur(24px) !important;
            border: 1px solid rgba(226, 232, 240, 0.9) !important;
            box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
            padding: 2.2rem 2rem !important;
            font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
            max-width: 440px !important;
            width: 90% !important;
        }

        .swal2-popup.swal2-show {
            animation: swalCustomPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        .swal2-popup.swal2-hide {
            animation: swalCustomHide 0.2s ease-in forwards !important;
        }

        @keyframes swalCustomPop {
            0% {
                opacity: 0;
                transform: scale(0.9) translateY(14px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        @keyframes swalCustomHide {
            0% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(0.92);
            }
        }

        .swal2-title {
            font-size: 1.4rem !important;
            font-weight: 700 !important;
            color: #0f172a !important;
            margin-top: 1rem !important;
            margin-bottom: 0.5rem !important;
            letter-spacing: -0.01em !important;
        }

        .swal2-html-container {
            font-size: 0.94rem !important;
            color: #64748b !important;
            line-height: 1.6 !important;
            margin: 0 !important;
            padding: 0 10px !important;
        }

        /* Custom Icon Glow & Badges */
        .swal2-icon {
            margin: 0.5rem auto 0.75rem !important;
            width: 76px !important;
            height: 76px !important;
            border-width: 3px !important;
        }

        /* Success Icon */
        .swal2-icon.swal2-success {
            border-color: #34d399 !important;
            color: #10b981 !important;
            box-shadow: 0 12px 30px rgba(16, 185, 129, 0.25) !important;
            background: #ecfdf5 !important;
        }
        .swal2-icon.swal2-success [class^='swal2-success-line'] {
            background-color: #10b981 !important;
            height: 4px !important;
            border-radius: 99px !important;
        }
        .swal2-icon.swal2-success .swal2-success-circular-line-left,
        .swal2-icon.swal2-success .swal2-success-circular-line-right,
        .swal2-icon.swal2-success .swal2-success-fix {
            background: transparent !important;
        }
        .swal2-icon.swal2-success .swal2-success-ring {
            border: 3px solid rgba(16, 185, 129, 0.25) !important;
        }

        /* Error Icon */
        .swal2-icon.swal2-error {
            border-color: #f87171 !important;
            color: #ef4444 !important;
            box-shadow: 0 12px 30px rgba(239, 68, 68, 0.25) !important;
            background: #fef2f2 !important;
        }
        .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
            background-color: #ef4444 !important;
            height: 4px !important;
            border-radius: 99px !important;
        }

        /* Info Icon */
        .swal2-icon.swal2-info {
            border-color: #60a5fa !important;
            color: #2563eb !important;
            box-shadow: 0 12px 30px rgba(59, 130, 246, 0.25) !important;
            background: #eff6ff !important;
        }

        /* Warning Icon */
        .swal2-icon.swal2-warning {
            border-color: #fbbf24 !important;
            color: #d97706 !important;
            box-shadow: 0 12px 30px rgba(245, 158, 11, 0.25) !important;
            background: #fffbeb !important;
        }

        /* Custom Action Buttons */
        .swal2-actions {
            margin-top: 1.5rem !important;
            gap: 12px !important;
            width: 100% !important;
            justify-content: center !important;
        }

        .swal2-confirm.swal2-styled {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
            color: #ffffff !important;
            border-radius: 9999px !important;
            padding: 12px 36px !important;
            font-size: 0.94rem !important;
            font-weight: 600 !important;
            letter-spacing: 0.01em !important;
            box-shadow: 0 8px 22px rgba(37, 99, 235, 0.35) !important;
            border: none !important;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
            min-width: 135px !important;
        }
        .swal2-confirm.swal2-styled:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 12px 28px rgba(37, 99, 235, 0.45) !important;
        }

        .swal2-cancel.swal2-styled {
            background: #f1f5f9 !important;
            color: #475569 !important;
            border-radius: 9999px !important;
            padding: 12px 28px !important;
            font-size: 0.94rem !important;
            font-weight: 600 !important;
            border: 1px solid #e2e8f0 !important;
            transition: all 0.25s ease !important;
        }
        /* ==============================================================================
           AUTHENTICATED USER SESSION & FEATURE SHOWCASE STYLES
           ============================================================================== */
        .user-session-floating-bar {
            position: fixed;
            top: 14px;
            left: 324px;
            right: 124px;
            height: 52px;
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(16, 185, 129, 0.35);
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px 0 20px;
            z-index: 998;
            box-shadow: 0 10px 25px rgba(16, 185, 129, 0.12);
        }
        .session-live-pulse {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.76rem;
            font-weight: 700;
            color: #059669;
            background: rgba(16, 185, 129, 0.1);
            padding: 4px 10px;
            border-radius: 9999px;
            border: 1px solid rgba(16, 185, 129, 0.25);
        }
        .user-session-info {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.88rem;
            color: #0f172a;
        }
        .role-pill-badge {
            background: #eff6ff;
            color: #2563eb;
            font-size: 0.72rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 9999px;
            border: 1px solid #bfdbfe;
        }
        .user-session-stats-group {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.8rem;
            color: #64748b;
        }
        .user-session-stats-group span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .btn-session-dash {
            background: linear-gradient(135deg, #059669, #10b981);
            color: #ffffff !important;
            padding: 6px 16px;
            border-radius: 9999px;
            font-size: 0.82rem;
            font-weight: 700;
            text-decoration: none !important;
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
            transition: all 0.2s ease;
        }
        .btn-session-dash:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
            color: #ffffff !important;
        }
        .btn-session-logout {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ef4444;
            background: #fef2f2;
            border: 1px solid #fecaca;
            text-decoration: none !important;
            transition: all 0.2s ease;
        }
        .btn-session-logout:hover {
            background: #fee2e2;
            color: #b91c1c;
            transform: scale(1.05);
        }

        /* User Session Hero Banner */
        .user-session-hero-card {
            background: linear-gradient(135deg, #ffffff, #f0fdf4) !important;
            border: 1.5px solid #a7f3d0 !important;
            box-shadow: 0 10px 25px rgba(16, 185, 129, 0.08) !important;
        }

        /* Active Session Workspace Box in #login */
        .active-workspace-card {
            background: #ffffff;
            border-radius: 20px;
            padding: 30px 24px;
            text-align: center;
        }

        /* Feature & Switch Grid Cards */
        .ecosystem-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            padding: 22px;
            height: 100%;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
            display: flex;
            flex-direction: column;
        }
        .ecosystem-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 30px rgba(37, 99, 235, 0.08);
            border-color: #93c5fd;
        }
        .ecosystem-icon-box {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 16px;
        }

        /* ==============================================================
           EXECUTIVE CALENDAR & LIVE SLOT SCHEDULER STYLES
           ============================================================== */
        .apt-date-carousel {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding: 6px 2px 14px 2px;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }
        .apt-date-carousel::-webkit-scrollbar {
            height: 5px;
        }
        .apt-date-carousel::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 9999px;
        }
        .apt-date-pill {
            flex: 0 0 70px;
            height: 82px;
            border-radius: 16px;
            border: 1.5px solid #e2e8f0;
            background: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
            user-select: none;
            position: relative;
        }
        .apt-date-pill:hover {
            border-color: #3b82f6;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
        }
        .apt-date-pill.active {
            background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important;
            border-color: #1d4ed8 !important;
            box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28) !important;
            transform: translateY(-3px) scale(1.02);
        }
        .apt-date-pill .pill-day {
            font-size: 0.68rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #64748b;
            letter-spacing: 0.5px;
            line-height: 1;
            margin-bottom: 3px;
        }
        .apt-date-pill .pill-num {
            font-size: 1.32rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1;
        }
        .apt-date-pill .pill-month {
            font-size: 0.65rem;
            font-weight: 600;
            color: #94a3b8;
            line-height: 1;
            margin-top: 3px;
            text-transform: uppercase;
        }
        .apt-date-pill.active .pill-day {
            color: #bfdbfe;
        }
        .apt-date-pill.active .pill-num {
            color: #ffffff;
        }
        .apt-date-pill.active .pill-month {
            color: #e0f2fe;
        }
        .apt-date-pill .today-indicator {
            position: absolute;
            top: 4px;
            right: 6px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #10b981;
        }
        .apt-date-pill.active .today-indicator {
            background: #a7f3d0;
            box-shadow: 0 0 6px #ffffff;
        }

        /* Live Slot Cards */
        .step-num-badge {
            width: 22px !important;
            height: 22px !important;
            font-size: 0.72rem !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-shrink: 0 !important;
        }
        html.max-width-d .apt-custom-date-input {
            width: 150px !important;
            padding: 5px 10px !important;
            font-size: 0.8rem !important;
            background-color: #eff6ff !important;
            border-color: #93c5fd !important;
            color: #1d4ed8 !important;
            font-weight: 700 !important;
        }
        .apt-slots-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        @media (max-width: 576px) {
            .apt-slots-container {
                grid-template-columns: 1fr;
            }
        }
        .apt-slot-btn {
            position: relative;
            border-radius: 14px;
            border: 1.5px solid #e2e8f0;
            background: #ffffff;
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: space-between;
            gap: 4px;
            cursor: pointer;
            transition: all 0.22s ease;
            user-select: none;
            text-align: left;
            min-width: 0;
        }
        .apt-slot-btn:hover:not(.slot-disabled) {
            border-color: #3b82f6;
            background: #f8faff;
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(37, 99, 235, 0.08);
        }
        .apt-slot-btn.selected {
            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
            border-color: #2563eb !important;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2), 0 8px 18px rgba(37, 99, 235, 0.12) !important;
            transform: translateY(-2px);
        }
        .apt-slot-btn.slot-disabled {
            background: repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f1f5f9 10px, #f1f5f9 20px) !important;
            border-color: #e2e8f0 !important;
            opacity: 0.65;
            cursor: not-allowed !important;
        }
        .apt-slot-top-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            width: 100%;
        }
        .apt-slot-btn .slot-time-text {
            font-size: 0.82rem;
            font-weight: 700;
            color: #0f172a;
            display: flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.25;
        }
        .apt-slot-btn.selected .slot-time-text {
            color: #1e3a8a;
        }
        .apt-slot-btn .slot-period-tag {
            font-size: 0.68rem;
            font-weight: 700;
            color: #475569;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            white-space: nowrap;
        }
        .apt-slot-btn .slot-period-sub {
            font-size: 0.68rem;
            font-weight: 500;
            color: #64748b;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .apt-slot-btn .apt-slot-badge-status,
        .apt-slot-btn .slot-badge-status {
            font-size: 0.65rem;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 9999px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .apt-slot-badge-avail {
            background: #dcfce7;
            color: #15803d;
            border: 1px solid #bbf7d0;
        }
        .apt-slot-badge-booked {
            background: #fee2e2;
            color: #b91c1c;
            border: 1px solid #fecaca;
        }

        /* Meeting Mode Selector Cards */
        .meeting-mode-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        @media (max-width: 576px) {
            .meeting-mode-grid {
                grid-template-columns: 1fr;
            }
        }
        .meeting-mode-card {
            border: 1.5px solid #e2e8f0;
            border-radius: 14px;
            padding: 12px 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.22s ease;
            background: #ffffff;
            user-select: none;
            position: relative;
        }
        .meeting-mode-card:hover {
            border-color: #3b82f6;
            transform: translateY(-2px);
        }
        .meeting-mode-card.selected {
            border-color: #2563eb !important;
            background: linear-gradient(135deg, #eff6ff, #f8faff) !important;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2), 0 6px 14px rgba(37, 99, 235, 0.1) !important;
        }
        .meeting-mode-card .mode-icon {
            font-size: 1.4rem;
            margin-bottom: 4px;
        }
        .meeting-mode-card .mode-title {
            font-size: 0.84rem;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 2px;
        }
        .meeting-mode-card .mode-sub {
            font-size: 0.68rem;
            color: #64748b;
        }
        .meeting-mode-card .mode-rec-tag {
            position: absolute;
            top: -8px;
            right: 8px;
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            color: #ffffff;
            font-size: 0.58rem;
            font-weight: 800;
            padding: 1px 6px;
            border-radius: 9999px;
            letter-spacing: 0.4px;
        }


/* --- View: welcome.blade.php (Block 2 — Super Premium Executive Hero & HD Showcase) --- */
.user-session-floating-bar { display: none !important; }
#color-switcher, .color-switcher { display: none !important; }

.user-session-hero-card {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.28) !important;
    border-radius: 12px !important;
    padding: 7px 11px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.06) !important;
}

.user-avatar-circle {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #059669, #10b981) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.22) !important;
}

.session-user-name {
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
}

.session-live-pill {
    font-size: 0.58rem !important;
    font-weight: 700 !important;
}

.session-meta-line {
    font-size: 0.69rem !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
}

.session-role-pill {
    font-size: 0.62rem !important;
    padding: 1px 6px !important;
}

.session-action-btn {
    font-size: 0.7rem !important;
    padding: 3.5px 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.hero-title {
    font-size: 1.52rem !important;
    line-height: 1.22 !important;
    color: #0f172a !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 6px !important;
}

.hero-subtitle-desc {
    max-width: 510px !important;
    font-size: 0.8rem !important;
    line-height: 1.52 !important;
    margin-top: 4px !important;
    margin-bottom: 10px !important;
    color: #475569 !important;
}

.hero-trust-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.hero-trust-item {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Super Premium Architectural Hero Showcase Frame (Full-Height Tall Portrait) */
.hero-full-row {
    min-height: 0 !important;
    height: auto !important;
    align-items: stretch !important;
}

.hero-left-stack {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    height: auto !important;
    width: 100% !important;
    padding: 0 !important;
}

.hero-bottom-telemetry-strip {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px dashed #e2e8f0 !important;
}

.hero-mini-stat-box {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    text-align: left !important;
}

.hero-mini-stat-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.78rem !important;
    flex-shrink: 0 !important;
}

.hero-mini-stat-icon.blue { background: #eff6ff !important; color: #2563eb !important; }
.hero-mini-stat-icon.green { background: #ecfdf5 !important; color: #059669 !important; }
.hero-mini-stat-icon.indigo { background: #eef2ff !important; color: #4f46e5 !important; }

.hero-mini-stat-val {
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.1 !important;
}

.hero-mini-stat-lbl {
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    line-height: 1.15 !important;
}

.hero-premium-showcase-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid #dbeafe !important;
    border-radius: 18px !important;
    padding: 8px !important;
    max-width: 360px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 365px !important;
    max-height: 415px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 18px 40px -12px rgba(30, 64, 175, 0.14), 0 4px 14px rgba(15, 23, 42, 0.05) !important;
    position: relative !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.hero-premium-showcase-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 22px 48px -12px rgba(37, 99, 235, 0.2), 0 6px 18px rgba(15, 23, 42, 0.07) !important;
}

.hero-showcase-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 2px 6px 6px 6px !important;
    flex-shrink: 0 !important;
}

.hero-showcase-tag {
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    color: #475569 !important;
    letter-spacing: 0.4px !important;
    margin-left: 5px !important;
    text-transform: uppercase !important;
}

.hero-showcase-live-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    padding: 1.5px 7px !important;
    border-radius: 20px !important;
    letter-spacing: 0.3px !important;
}

.hero-showcase-img-stage {
    position: relative !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    height: 305px !important;
    min-height: 290px !important;
    max-height: 330px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #eff6ff 0%, #f1f5f9 100%) !important;
    border: 1px solid #e2e8f0 !important;
}

.hero-dynamic-img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 22% !important;
    border-radius: 11px !important;
    display: block !important;
    image-rendering: -webkit-optimize-contrast !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-premium-showcase-card:hover .hero-dynamic-img {
    transform: scale(1.03) !important;
}

.hero-showcase-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 6px 6px 2px 6px !important;
    flex-shrink: 0 !important;
}

.hero-showcase-mini-logo {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    padding: 2px !important;
    flex-shrink: 0 !important;
}

.hero-showcase-company {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.15 !important;
}

.hero-showcase-loc {
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    line-height: 1.15 !important;
}

.hero-showcase-hd-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
}

.terminal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.terminal-dot-red { background: #ef4444; }
.terminal-dot-amber { background: #f59e0b; }
.terminal-dot-green { background: #10b981; }

/* --- Hero Bottom Highlights Deck (Enterprise Solutions & Telemetry) --- */
.hero-bottom-deck {
    margin-top: 0.85rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid #f1f5f9 !important;
    width: 100% !important;
}

.hero-feature-card {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-feature-card-inner {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.hero-feature-card:hover .hero-feature-card-inner {
    border-color: #3b82f6 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.12), 0 4px 10px rgba(15, 23, 42, 0.04) !important;
}

.hero-feature-card:hover .hero-card-title {
    color: #2563eb !important;
}

.hero-feature-card:hover .hero-card-arrow {
    transform: translateX(3px) !important;
}

.hero-card-arrow {
    transition: transform 0.2s ease !important;
}

.hero-card-icon-box {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
}

.hero-kpi-chip {
    display: inline-flex !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9999px !important;
    padding: 2px 10px !important;
    font-size: 0.72rem !important;
}


/* --- View: welcome.blade.php (Block 3) --- */
.floating-product-dock {
            position: fixed !important;
            bottom: 58px !important;
            right: 136px !important;
            z-index: 1025 !important;
            background: #ffffff !important;
            border: 1px solid #cbd5e1 !important;
            border-radius: 9999px !important;
            padding: 8px 14px 8px 8px !important;
            box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14) !important;
            backdrop-filter: blur(16px);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            animation: slideUpDock 0.5s ease-out;
            max-width: 340px;
        }
        .floating-product-dock:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 36px rgba(37, 99, 235, 0.2) !important;
        }
        .dock-img-box {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            overflow: hidden;
            background: #eff6ff !important;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1.5px solid #bfdbfe !important;
        }
        .dock-img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .floating-dock-close {
            position: absolute;
            top: -6px;
            right: 12px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #cbd5e1;
            color: #0f172a;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .floating-dock-close:hover {
            background: #ef4444;
            color: #fff;
        }
        @keyframes slideUpDock {
            from { transform: translateY(80px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

/* Careers Portal Job Cards & Custom Scrollbar Light Polish */
.career-job-card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    transition: all 0.25s ease !important;
}
.career-job-card:hover {
    transform: translateY(-3px) !important;
    border-color: #93c5fd !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.08) !important;
}
.career-job-badges {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}
.career-dept-badge {
    font-size: 0.72rem !important;
    max-width: 65% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.career-type-badge {
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Override Legacy Red/Orange mCustomScrollbar & Ambient Blobs */
html.max-width-d .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: #cbd5e1 !important;
    width: 5px !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
}
html.max-width-d .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
html.max-width-d .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: #2563eb !important;
    box-shadow: none !important;
}
html.max-width-d .mCSB_scrollTools .mCSB_draggerRail {
    background: transparent !important;
}
html.max-width-d .circles li {
    background: rgba(59, 130, 246, 0.06) !important;
}

/* Remove Legacy Red/Orange Pseudo-Lines on Count-Up, Boxes & Subtitles */
.count-up::before,
.count-up::after,
.boxes [class^="col-"]::after,
.boxes [class^="col-"]:nth-child(2n)::after,
.boxes [class^="col-"]:nth-child(2n+1)::after,
.subtitle::before,
.subtitle::after,
.vertical-line::after {
    display: none !important;
    content: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   SUPER-PREMIUM COMPACT ABOUT SECTION (#about)
   ========================================================================== */
.about-brand-showcase-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04) !important;
}

.about-brand-logo-stage {
    height: 115px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.about-brand-logo-img {
    max-width: 135px !important;
    max-height: 110px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.08)) !important;
}

.about-heading-title {
    font-size: 1.35rem !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
}

.about-lead-text {
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
}

.about-cred-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    height: 100% !important;
    transition: all 0.2s ease !important;
}

.about-cred-card:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

.about-cred-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.88rem !important;
    flex-shrink: 0 !important;
}

.about-cred-icon.blue { background: #eff6ff !important; color: #2563eb !important; }
.about-cred-icon.indigo { background: #eef2ff !important; color: #4f46e5 !important; }
.about-cred-icon.green { background: #ecfdf5 !important; color: #059669 !important; }
.about-cred-icon.amber { background: #fffbeb !important; color: #d97706 !important; }

.about-cred-body {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.about-cred-label {
    display: block !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #64748b !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
}

.about-cred-value {
    display: block !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

.about-cred-value.email-val {
    font-size: 0.74rem !important;
    letter-spacing: -0.01em !important;
}

/* Compact Enterprise Metrics Strip (#count-up) */
.about-metrics-strip {
    margin-top: 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.about-metric-card {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.2s ease !important;
    text-align: left !important;
}

.about-metric-card:hover {
    transform: translateY(-2px) !important;
    border-color: #bfdbfe !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.07) !important;
}

.about-metric-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
}

.about-metric-icon.blue { background: #eff6ff !important; color: #2563eb !important; border: 1px solid #dbeafe !important; }
.about-metric-icon.green { background: #ecfdf5 !important; color: #059669 !important; border: 1px solid #d1fae5 !important; }
.about-metric-icon.amber { background: #fffbeb !important; color: #d97706 !important; border: 1px solid #fef3c7 !important; }
.about-metric-icon.cyan { background: #ecfeff !important; color: #0891b2 !important; border: 1px solid #cffafe !important; }

.about-metric-num {
    font-size: 1.22rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
}

.about-metric-lbl {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-top: 2px !important;
}

/* ==========================================================================
   SUPER-PREMIUM COMPACT LOGIN & WORKSPACE SESSION CARD (#login)
   ========================================================================== */
.login-portal-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 18px 22px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04) !important;
}

.workspace-user-banner {
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%) !important;
    border: 1px solid #dbeafe !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
}

.workspace-user-avatar {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    border: 2.5px solid #2563eb !important;
}

.workspace-user-avatar-fallback {
    width: 60px !important;
    height: 60px !important;
    font-size: 1.5rem !important;
    background: linear-gradient(135deg, #2563eb, #10b981) !important;
    border: 2.5px solid #ffffff !important;
}

.workspace-user-heading {
    font-size: 1.15rem !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

.workspace-user-meta {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
}

.workspace-stat-card {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 12px 14px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    text-align: left !important;
    transition: all 0.2s ease !important;
}

.workspace-stat-card:hover {
    background: #ffffff !important;
    border-color: #bfdbfe !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.06) !important;
}

.workspace-stat-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
}

.workspace-stat-icon.blue { background: #eff6ff !important; color: #2563eb !important; border: 1px solid #dbeafe !important; }
.workspace-stat-icon.indigo { background: #eef2ff !important; color: #4f46e5 !important; border: 1px solid #e0e7ff !important; }
.workspace-stat-icon.green { background: #ecfdf5 !important; color: #059669 !important; border: 1px solid #d1fae5 !important; }

.workspace-stat-label {
    display: block !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #64748b !important;
    white-space: nowrap !important;
    margin-bottom: 1px !important;
}

.workspace-stat-value {
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

.workspace-stat-sub {
    display: inline-block !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
}

.workspace-action-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding-top: 4px !important;
}

@media (max-width: 767px) {
    .workspace-action-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.workspace-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.workspace-action-btn.primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: 1px solid #1d4ed8 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

.workspace-action-btn.primary:hover {
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28) !important;
}

.workspace-action-btn.outline-blue {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

.workspace-action-btn.outline-blue:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

.workspace-action-btn.outline-green {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
}

.workspace-action-btn.outline-green:hover {
    background: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
}

.workspace-action-btn.outline-red {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
}

.workspace-action-btn.outline-red:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

/* ==========================================================================
   PUBLIC PROJECTS & LIVE DELIVERY DIRECTORY (/projectList)
   ========================================================================== */
.public-projects-body {
    background: #f8fafc !important;
    color: #0f172a !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.public-projects-navbar {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
}

.public-projects-brand-logo {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 3px !important;
    background: #ffffff !important;
}

.public-projects-brand-name {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    line-height: 1.15 !important;
}

.public-projects-brand-sub {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

.pub-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 13px !important;
    border-radius: 9999px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.pub-nav-btn:hover {
    color: #2563eb !important;
    border-color: #93c5fd !important;
    background: #f8fafc !important;
}

.pub-nav-btn.primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

.pub-nav-btn.primary:hover {
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28) !important;
}

.pub-nav-btn.admin-switch {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}

.pub-nav-btn.whatsapp {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border-color: #a7f3d0 !important;
}

.public-projects-hero {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 26px 0 !important;
}

.pub-hero-pill {
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1d4ed8 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
}

.pub-hero-title {
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
}

.pub-hero-desc {
    font-size: 0.82rem !important;
    color: #475569 !important;
    line-height: 1.55 !important;
    max-width: 640px !important;
}

.pub-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

.pub-kpi-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 11px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
}

.pub-kpi-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
}

.pub-kpi-icon.blue { background: #eff6ff !important; color: #2563eb !important; }
.pub-kpi-icon.green { background: #ecfdf5 !important; color: #059669 !important; }
.pub-kpi-icon.indigo { background: #eef2ff !important; color: #4f46e5 !important; }
.pub-kpi-icon.amber { background: #fffbeb !important; color: #d97706 !important; }

.pub-kpi-val {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.1 !important;
}

.pub-kpi-lbl {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

.pub-filter-toolbar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.03) !important;
}

.pub-search-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.pub-search-icon {
    position: absolute !important;
    left: 12px !important;
    color: #64748b !important;
    font-size: 0.85rem !important;
}

.pub-search-input {
    width: 100% !important;
    padding: 7px 34px 7px 34px !important;
    border-radius: 9999px !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    font-size: 0.78rem !important;
    color: #0f172a !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

.pub-search-input:focus {
    background: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

.pub-search-clear {
    position: absolute !important;
    right: 10px !important;
    border: none !important;
    background: transparent !important;
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
    padding: 0 !important;
}

.pub-filter-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 12px !important;
    border-radius: 9999px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

.pub-filter-pill:hover {
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
}

.pub-filter-pill.active {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
}

.pub-result-count, .pub-privacy-note {
    font-size: 0.72rem !important;
    color: #64748b !important;
}

.pub-project-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.22s ease !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03) !important;
}

.pub-project-card:hover {
    transform: translateY(-3px) !important;
    border-color: #93c5fd !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.08) !important;
}

.pub-project-id {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    color: #1d4ed8 !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-family: monospace !important;
}

.pub-project-date {
    font-size: 0.68rem !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.pub-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 9px !important;
    border-radius: 9999px !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
}

.pub-status-badge.status-delivered {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
}

.pub-status-badge.status-active {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
}

.pub-status-badge.status-pending {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
}

.pub-status-badge.status-archived {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
}

.pub-project-title {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
    min-height: 2.4em !important;
}

.pub-category-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
}

.pub-mine-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    color: #0f766e !important;
    background: #f0fdfa !important;
    border: 1px solid #99f6e4 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
}

.pub-project-meta-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
}

.pub-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    font-size: 0.72rem !important;
    padding: 2px 0 !important;
}

.pub-meta-label {
    color: #64748b !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
}

.pub-meta-val {
    color: #0f172a !important;
    font-weight: 700 !important;
    max-width: 62% !important;
}

.pub-domain-link {
    color: #2563eb !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    max-width: 62% !important;
}

.pub-domain-link:hover {
    text-decoration: underline !important;
}

.pub-progress-lbl, .pub-progress-pct {
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
}

.pub-progress-track {
    height: 5px !important;
    border-radius: 9999px !important;
    background: #e2e8f0 !important;
    overflow: hidden !important;
}

.pub-progress-fill {
    height: 100% !important;
    border-radius: 9999px !important;
}

.pub-progress-fill.status-delivered { background: #10b981 !important; }
.pub-progress-fill.status-active { background: #2563eb !important; }
.pub-progress-fill.status-pending { background: #f59e0b !important; }
.pub-progress-fill.status-archived { background: #94a3b8 !important; }

.pub-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 5px 11px !important;
    border-radius: 8px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

.pub-action-btn.outline {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

.pub-action-btn.outline:hover {
    border-color: #2563eb !important;
    color: #2563eb !important;
    background: #eff6ff !important;
}

.pub-action-btn.primary {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

.pub-action-btn.primary:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

.pub-bottom-cta-card {
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%) !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 18px !important;
    padding: 20px 24px !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.06) !important;
}

.pub-modal-content {
    border-radius: 18px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16) !important;
}

.pub-timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.pub-timeline-step {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    opacity: 0.65 !important;
}

.pub-timeline-step.completed {
    opacity: 1 !important;
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
}

.pub-timeline-step.active {
    opacity: 1 !important;
    background: #eff6ff !important;
    border-color: #93c5fd !important;
}

.pub-step-dot {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #cbd5e1 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
}

.pub-timeline-step.completed .pub-step-dot {
    background: #10b981 !important;
}

.pub-timeline-step.active .pub-step-dot {
    background: #2563eb !important;
}

.pub-step-text strong {
    display: block !important;
    font-size: 0.76rem !important;
    color: #0f172a !important;
}

.pub-step-text span {
    font-size: 0.68rem !important;
    color: #64748b !important;
}

.public-projects-footer {
    margin-top: auto !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 16px 0 !important;
}

/* ==========================================================================
   PUBLIC IN-PAGE OUR PROJECTS SECTION ENHANCEMENTS
   ========================================================================== */
.pub-toolbar-wrap {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
}

.pub-section-filter-btn {
    border-radius: 9999px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #475569 !important;
    transition: all 0.2s ease !important;
}

.pub-section-filter-btn:hover {
    border-color: #2563eb !important;
    color: #2563eb !important;
    background: #eff6ff !important;
}

.pub-section-filter-btn.active {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

/* Elimination of excess vertical blank space in Hero */
.hero-center.hero-top-aligned,
.hero .hero-center {
    top: 0 !important;
    transform: none !important;
    margin: 0 auto !important;
    padding-top: 2px !important;
    padding-bottom: 8px !important;
    width: 100% !important;
    position: relative !important;
}

html.max-width-d #main > section#hero {
    display: block !important;
    padding: 10px 22px !important;
    overflow-y: auto !important;
}

.hero-full-row {
    min-height: 0 !important;
    height: auto !important;
    align-items: center !important;
}

.hero-left-stack {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    height: auto !important;
    width: 100% !important;
    padding: 0 !important;
}

.hero-title {
    font-size: 1.68rem !important;
    line-height: 1.22 !important;
    margin-bottom: 4px !important;
}

.hero-subtitle-desc {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
}

.hero-cta-grid {
    gap: 6px !important;
    margin-bottom: 6px !important;
}

.hero-cta-btn {
    padding: 7px 12px !important;
    font-size: 0.78rem !important;
    border-radius: 12px !important;
    min-height: 42px !important;
}

.hero-bottom-telemetry-strip {
    margin-top: 6px !important;
    padding-top: 6px !important;
    gap: 6px !important;
}

.hero-mini-stat-box {
    padding: 5px 8px !important;
}

.hero-premium-showcase-card {
    max-width: 330px !important;
    min-height: 310px !important;
    max-height: 360px !important;
    padding: 6px !important;
    border-radius: 16px !important;
}

.hero-showcase-img-wrap {
    height: 235px !important;
}

/* About Screen Email Full Visibility & Count-up cleanup */
.about-cred-card {
    overflow: visible !important;
}
.about-cred-body {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
}
.about-cred-value.email-val {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    text-overflow: clip !important;
    letter-spacing: -0.02em !important;
    color: #2563eb !important;
}
.about-cred-value.email-val:hover {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
}

.count-up::before,
.count-up::after,
#count-up::before,
#count-up::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}







/* --- projects.css --- */
/**
 * EXTRACTED FROM projectList.blade.php
 */
/* ==============================================================================
   PROJECT MANAGEMENT & MULTI-INVOICING ADVANCED UI/UX
   ============================================================================== */
.pl-wrapper {
    padding: 10px 0 50px 0;
}

/* Page Header Card */
.pl-header-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(240,253,250,0.95) 100%);
    border: 1px solid rgba(50, 168, 158, 0.2);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.pl-header-title {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pl-header-title i {
    color: var(--theme-primary, #32a89e);
}

.pl-header-sub {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 0;
}

/* KPI Stats Grid */
.pl-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.pl-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
}

.pl-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.pl-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.pl-kpi-val {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.pl-kpi-lbl {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Specific KPI Colors */
.kpi-total .pl-kpi-icon { background: #e0f2fe; color: #0284c7; }
.kpi-active .pl-kpi-icon { background: #dcfce7; color: #16a34a; }
.kpi-delivery .pl-kpi-icon { background: #ccfbf1; color: #0d9488; }
.kpi-pending .pl-kpi-icon { background: #fef3c7; color: #d97706; }
.kpi-budget .pl-kpi-icon { background: #f3e8ff; color: #9333ea; }
.kpi-due .pl-kpi-icon { background: #fee2e2; color: #dc2626; }

/* Control & Filter Bar */
.pl-control-bar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.pl-filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pl-filter-btn {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pl-filter-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.pl-filter-btn.active {
    background: var(--theme-primary, #32a89e);
    color: #ffffff;
    border-color: var(--theme-primary, #32a89e);
    box-shadow: 0 2px 8px rgba(50, 168, 158, 0.3);
}

.pl-search-box {
    position: relative;
    min-width: 280px;
    max-width: 400px;
    flex-grow: 1;
}

.pl-search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 18px;
}

.pl-search-input {
    width: 100%;
    padding: 9px 14px 9px 40px;
    border: 1.5px solid #e2e8f0;
    border-radius: 25px;
    font-size: 13px;
    background: #f8fafc;
    transition: all 0.2s;
}

.pl-search-input:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--theme-primary, #32a89e);
    box-shadow: 0 0 0 3px rgba(50, 168, 158, 0.15);
}

/* Projects Table Card */
.pl-table-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.pl-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

.pl-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 16px 14px;
    border-bottom: 1px solid #e2e8f0;
    border-top: none;
    white-space: nowrap;
}

.pl-table td {
    padding: 16px 14px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    color: #334155;
    background: #ffffff;
    transition: background 0.15s ease;
}

.pl-table tr:hover td {
    background: #f8fafc;
}

/* Project Info Cell */
.pl-prj-no {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: monospace;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.pl-prj-no:hover {
    background: #e2e8f0;
}

.pl-prj-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 14px;
    margin-top: 4px;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-prj-type {
    font-size: 11px;
    color: #64748b;
}

/* Client Cell */
.pl-client-name {
    font-weight: 700;
    color: #1e293b;
}

.pl-client-business {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pl-client-contact {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

/* Status Badges */
.pl-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pl-status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.pl-status-accept { background: #dcfce7; color: #15803d; }
.pl-status-accept::before { background: #22c55e; }

.pl-status-working { background: #e0f2fe; color: #0369a1; }
.pl-status-working::before { background: #0284c7; box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2); }

.pl-status-delivery { background: #ccfbf1; color: #0f766e; }
.pl-status-delivery::before { background: #14b8a6; }

.pl-status-pending { background: #fef3c7; color: #b45309; }
.pl-status-pending::before { background: #f59e0b; }

.pl-status-reject { background: #fee2e2; color: #b91c1c; }
.pl-status-reject::before { background: #ef4444; }

/* Financial Progress Cell */
.pl-finance-box {
    min-width: 150px;
}

.pl-progress-bar-bg {
    height: 6px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin: 6px 0;
}

.pl-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    border-radius: 10px;
    transition: width 0.3s;
}

.pl-amount-sub {
    font-size: 11px;
    display: flex;
    justify-content: space-between;
}

/* Invoices Button & Badge */
.pl-invoice-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(50, 168, 158, 0.1) 0%, rgba(50, 168, 158, 0.2) 100%);
    color: var(--theme-primary, #32a89e);
    border: 1px solid rgba(50, 168, 158, 0.3);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.pl-invoice-btn:hover {
    background: var(--theme-primary, #32a89e);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(50, 168, 158, 0.25);
}

.pl-invoice-count {
    background: #ffffff;
    color: var(--theme-primary, #32a89e);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 800;
}

.pl-invoice-btn:hover .pl-invoice-count {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* Action Buttons Group */
.pl-action-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pl-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    background: #f1f5f9;
    color: #475569;
}

.pl-btn-icon:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.pl-btn-preview:hover {
    background: #e0f2fe;
    color: #0284c7;
    border-color: #bae6fd;
}

.pl-btn-edit:hover {
    background: #dcfce7;
    color: #16a34a;
    border-color: #bbf7d0;
}

.pl-btn-delete:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

.pl-btn-pay {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pl-btn-pay:hover {
    background: #dc2626;
    color: #ffffff;
}

/* ==============================================================================
   MULTI-INVOICES MODAL STYLING
   ============================================================================== */
.modal-content.pl-modal-box {
    border-radius: 20px;
    border: none;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    overflow: hidden;
}

.pl-modal-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
    padding: 20px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pl-modal-header h4 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 2px;
}

.pl-modal-header p {
    color: #94a3b8;
    font-size: 12px;
    margin-bottom: 0;
}

.pl-modal-close {
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.pl-modal-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.pl-modal-kpi-bar {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 16px 28px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.pl-m-kpi {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.pl-m-kpi-lbl {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
}

.pl-m-kpi-val {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

.pl-modal-nav-tabs {
    border-bottom: 1px solid #e2e8f0;
    padding: 0 28px;
    margin-top: 10px;
    display: flex;
    gap: 20px;
}

.pl-nav-tab-btn {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 6px;
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.pl-nav-tab-btn.active {
    color: var(--theme-primary, #32a89e);
    border-bottom-color: var(--theme-primary, #32a89e);
}

/* Invoices Table in Modal */
.pl-modal-table {
    width: 100%;
    border-collapse: collapse;
}

.pl-modal-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.pl-modal-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    vertical-align: middle;
}

/* Form in Modal */
.pl-form-group {
    margin-bottom: 16px;
}

.pl-form-label {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
    display: block;
}

.pl-form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    font-size: 13px;
    color: #1e293b;
    transition: all 0.2s;
}

.pl-form-control:focus {
    outline: none;
    border-color: var(--theme-primary, #32a89e);
    box-shadow: 0 0 0 3px rgba(50, 168, 158, 0.15);
}

/* Toast Notification */
.pl-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #0f172a;
    color: #ffffff;
    padding: 14px 22px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: none;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    z-index: 99999;
}

.pl-toast.success {
    background: #065f46;
    border: 1px solid #10b981;
}

.pl-toast.error {
    background: #991b1b;
    border: 1px solid #ef4444;
}


/* --- careers.css --- */
/**
 * PUBLIC CAREERS APPLICATION PORTAL
 */
:root {
            --primary: #4f46e5;
            --primary-hover: #4338ca;
            --secondary: #0ea5e9;
            --dark: #0f172a;
            --slate: #1e293b;
            --text-muted: #64748b;
            --bg-body: #f8fafc;
            --card-border: #e2e8f0;
        }

        body {
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: var(--bg-body);
            color: #334155;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }

        /* Top Career Navbar */
        .career-navbar {
            background: #ffffff;
            border-bottom: 1px solid var(--card-border);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
        }
        .career-brand {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: var(--dark);
        }
        .career-logo {
            max-height: 40px;
            width: auto;
            object-fit: contain;
            margin-right: 12px;
        }

        /* Career Hero Banner */
        .career-hero {
            background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
            color: #ffffff;
            padding: 4.5rem 1rem 5.5rem;
            position: relative;
            overflow: hidden;
            text-align: center;
        }
        .career-hero::before {
            content: '';
            position: absolute;
            top: -80px;
            right: -80px;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, transparent 70%);
            border-radius: 50%;
        }
        .career-hero::after {
            content: '';
            position: absolute;
            bottom: -60px;
            left: 5%;
            width: 250px;
            height: 250px;
            background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 70%);
            border-radius: 50%;
        }
        .career-hero h1 {
            font-size: 2.75rem;
            font-weight: 800;
            letter-spacing: -0.5px;
            margin-bottom: 1rem;
        }
        .career-hero p {
            font-size: 1.15rem;
            color: rgba(255, 255, 255, 0.8);
            max-width: 650px;
            margin: 0 auto;
        }

        /* Perk Highlights Pill */
        .perks-bar {
            margin-top: -2.25rem;
            position: relative;
            z-index: 10;
        }
        .perk-card {
            background: #ffffff;
            border-radius: 14px;
            padding: 1rem 1.25rem;
            border: 1px solid var(--card-border);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            transition: transform 0.2s ease;
        }
        .perk-card:hover {
            transform: translateY(-3px);
        }
        .perk-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: #eef2ff;
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            margin-right: 14px;
            flex-shrink: 0;
        }

        /* Form Container */
        .form-section-card {
            background: #ffffff;
            border-radius: 20px;
            border: 1px solid var(--card-border);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
            padding: 2.5rem;
            margin-bottom: 2rem;
        }
        .section-header {
            display: flex;
            align-items: center;
            margin-bottom: 1.75rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #f1f5f9;
        }
        .section-step-num {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--primary);
            color: #ffffff;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 14px;
            font-size: 15px;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
        }
        .section-header h4 {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--dark);
            margin: 0;
        }

        /* Modern Form Inputs */
        .form-label {
            font-size: 13px;
            font-weight: 600;
            color: #475569;
            margin-bottom: 6px;
        }
        .form-control-modern {
            border: 1.5px solid #cbd5e1;
            border-radius: 10px;
            padding: 0.75rem 1rem;
            font-size: 14px;
            color: #1e293b;
            transition: all 0.2s ease;
            width: 100%;
            background-color: #ffffff;
        }
        .form-control-modern:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
            outline: none;
        }

        /* Drag & Drop Upload Zone */
        .upload-dropzone {
            border: 2px dashed #cbd5e1;
            border-radius: 14px;
            padding: 2.25rem 1.5rem;
            text-align: center;
            background: #f8fafc;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }
        .upload-dropzone:hover, .upload-dropzone.dragover {
            border-color: var(--primary);
            background: #eef2ff;
        }
        .upload-dropzone input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        .upload-icon {
            font-size: 3rem;
            color: var(--primary);
            margin-bottom: 0.75rem;
            display: inline-block;
        }

        /* Submit Button */
        .btn-submit-app {
            background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
            color: #ffffff;
            font-weight: 700;
            font-size: 16px;
            padding: 1rem 2.5rem;
            border-radius: 12px;
            border: none;
            box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
            transition: all 0.25s ease;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .btn-submit-app:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(79, 70, 229, 0.45);
            color: #ffffff;
        }

        /* Footer */
        .career-footer {
            background: #ffffff;
            border-top: 1px solid var(--card-border);
            padding: 2rem 0;
            text-align: center;
            color: var(--text-muted);
            font-size: 13px;
        }


/* --- modules.css --- */
/**
 * CLUSTERWEB SOLUTION PRIVATE LIMITED
 * MODULE & VIEW STYLES (MIGRATED INTO CENTRALIZED THEME - LIGHT THEME ONLY)
 */



/* --- View: index.blade.php (Block 1) --- */
.web-stat-card {
        border-radius: 14px;
        padding: 1.25rem 1.5rem;
        color: #fff;
        position: relative;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .web-stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    }
    .web-stat-card .stat-icon {
        position: absolute;
        right: 15px;
        bottom: 10px;
        font-size: 3.5rem;
        opacity: 0.22;
    }
    .bg-gradient-indigo { background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%); }
    .bg-gradient-emerald { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
    .bg-gradient-amber { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
    .bg-gradient-sky { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); }

    .card-modern {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        margin-bottom: 1.5rem;
    }
    .badge-soft-success { background: #dcfce7; color: #15803d; border-radius: 6px; font-weight: 600; }
    .badge-soft-warning { background: #fef3c7; color: #b45309; border-radius: 6px; font-weight: 600; }
    .badge-soft-danger { background: #fee2e2; color: #b91c1c; border-radius: 6px; font-weight: 600; }
    .badge-soft-info { background: #e0f2fe; color: #0369a1; border-radius: 6px; font-weight: 600; }
    .badge-tech {
        background: #f1f5f9;
        color: #334155;
        border: 1px solid #cbd5e1;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        padding: 3px 10px;
    }


/* --- View: kyc.blade.php (Block 1) --- */
/* Enterprise KYC Portal Styles */
.kyc-wrapper {
    padding: 10px 0 60px 0;
}

.kyc-hero-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #eff6ff 100%);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 24px;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    position: relative;
    overflow: hidden;
}

.kyc-hero-card::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.kyc-hero-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.4);
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.kyc-section-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.kyc-section-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07);
}

.kyc-card-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kyc-card-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.kyc-card-title i {
    font-size: 20px;
    color: #0284c7;
    background: #e0f2fe;
    padding: 8px;
    border-radius: 10px;
}

.kyc-card-body {
    padding: 24px;
}

/* Timeline Tracker */
.kyc-tracker {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 30px 10px 40px 10px;
}

.kyc-tracker::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 40px;
    right: 40px;
    height: 4px;
    background: #e2e8f0;
    z-index: 1;
}

.kyc-tracker-step {
    position: relative;
    z-index: 2;
    text-align: center;
    flex: 1;
}

.kyc-step-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #64748b;
    margin: 0 auto 10px auto;
    transition: all 0.3s;
}

.kyc-tracker-step.completed .kyc-step-circle {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.kyc-tracker-step.active .kyc-step-circle {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    animation: pulseStep 2s infinite;
}

.kyc-tracker-step.rejected .kyc-step-circle {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

.kyc-step-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2px;
}

.kyc-step-desc {
    font-size: 11px;
    color: #64748b;
}

@keyframes pulseStep {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Verified Certificate Badge */
.kyc-certificate-box {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.kyc-cert-stamp {
    position: absolute;
    right: 25px;
    top: 25px;
    width: 110px;
    height: 110px;
    border: 3px dashed #10b981;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #047857;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    transform: rotate(-12deg);
    opacity: 0.85;
    pointer-events: none;
}

.kyc-cert-stamp i {
    font-size: 32px;
    margin-bottom: 2px;
}

/* Form Styling */
.kyc-form-label {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.kyc-form-control {
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    padding: 10px 14px;
    font-size: 14px;
    color: #0f172a;
    transition: all 0.2s ease;
}

.kyc-form-control:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
    outline: none;
}

.kyc-form-control[readonly], .kyc-form-control:disabled {
    background-color: #f1f5f9;
    color: #475569;
    cursor: not-allowed;
    border-color: #e2e8f0;
}

.kyc-doc-card {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    transition: all 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.kyc-doc-card:hover {
    border-color: #0284c7;
    background: #f0f9ff;
}

.kyc-doc-preview {
    max-height: 90px;
    border-radius: 8px;
    margin-bottom: 10px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.kyc-btn-submit {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    padding: 14px 34px;
    border-radius: 12px;
    border: none;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.3);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.kyc-btn-submit:hover {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.4);
    transform: translateY(-2px);
}


/* --- View: kycapprove.blade.php (Block 1) --- */
/* Enterprise KYC Audit & History Styles */
.kyc-admin-wrap {
    padding: 10px 0 50px 0;
}

.kyc-hero {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #eff6ff 100%); border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 28px 32px;
    color: #ffffff;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    position: relative;
    overflow: hidden;
}

.kyc-hero::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.kyc-hero h3 {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.kyc-hero h3 i {
    color: #38bdf8;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 12px;
}

.kyc-hero p {
    color: #cbd5e1;
    font-size: 13.5px;
    margin-bottom: 0;
    max-width: 780px;
}

/* KPI Counter Cards */
.kyc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kyc-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s;
}

.kyc-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.kyc-kpi-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.kyc-kpi-icon.warning { background: #fffbeb; color: #d97706; border: 1px solid #fef3c7; }
.kyc-kpi-icon.success { background: #f0fdf4; color: #16a34a; border: 1px solid #dcfce7; }
.kyc-kpi-icon.danger { background: #fef2f2; color: #dc2626; border: 1px solid #fee2e2; }
.kyc-kpi-icon.info { background: #f0f9ff; color: #0284c7; border: 1px solid #e0f2fe; }

.kyc-kpi-num {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.kyc-kpi-lbl {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Toolbar & Filter Navigation */
.kyc-toolbar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.kyc-filter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kyc-filter-btn {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    padding: 7px 18px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.kyc-filter-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
    text-decoration: none;
}

.kyc-filter-btn.active {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.kyc-search {
    position: relative;
    min-width: 260px;
}

.kyc-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
}

.kyc-search input {
    width: 100%;
    padding: 8px 14px 8px 36px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    outline: none;
}

.kyc-search input:focus {
    border-color: #0369a1;
    box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.12);
}

/* Main Table Container */
.kyc-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}

.kyc-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.kyc-table thead th {
    background: #f1f5f9;
    color: #475569;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 14px 16px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.kyc-table tbody td {
    padding: 16px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    color: #334155;
}

.kyc-table tbody tr:hover {
    background-color: #f8fafc;
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar-thumb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    background: #e2e8f0;
    cursor: pointer;
    transition: transform 0.2s;
}

.user-avatar-thumb:hover {
    transform: scale(1.1);
}

.user-name-text {
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 2px;
}

.user-meta-sub {
    font-size: 11.5px;
    color: #64748b;
}

.doc-thumb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: #0369a1;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.doc-thumb-btn:hover {
    background: #bae6fd;
    color: #0c4a6e;
    text-decoration: none;
}

.doc-thumb-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
}

.rejection-box {
    background: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 11.5px;
    color: #991b1b;
    max-width: 250px;
    line-height: 1.35;
    margin-top: 6px;
}

.rejection-box strong {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}

/* Action Buttons */
.btn-action-approve {
    background: #059669;
    color: #ffffff;
    border: none;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.btn-action-approve:hover {
    background: #047857;
    color: #ffffff;
}

.btn-action-reject {
    background: #ffffff;
    color: #dc2626;
    border: 1px solid #dc2626;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.btn-action-reject:hover {
    background: #dc2626;
    color: #ffffff;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.empty-state i {
    font-size: 54px;
    color: #cbd5e1;
    margin-bottom: 12px;
    display: block;
}


/* --- View: kycpanding.blade.php (Block 1) --- */
/* Enterprise KYC Management Hub Styles */
.kyc-admin-wrap {
    padding: 10px 0 50px 0;
}

.kyc-hero {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #eff6ff 100%); border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 28px 32px;
    color: #ffffff;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    position: relative;
    overflow: hidden;
}

.kyc-hero::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.kyc-hero h3 {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.kyc-hero h3 i {
    color: #2dd4bf;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 12px;
}

.kyc-hero p {
    color: #cbd5e1;
    font-size: 13.5px;
    margin-bottom: 0;
    max-width: 780px;
}

/* KPI Counter Cards */
.kyc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kyc-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s;
}

.kyc-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.kyc-kpi-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.kyc-kpi-icon.warning { background: #fffbeb; color: #d97706; border: 1px solid #fef3c7; }
.kyc-kpi-icon.success { background: #f0fdf4; color: #16a34a; border: 1px solid #dcfce7; }
.kyc-kpi-icon.danger { background: #fef2f2; color: #dc2626; border: 1px solid #fee2e2; }
.kyc-kpi-icon.info { background: #f0f9ff; color: #0284c7; border: 1px solid #e0f2fe; }

.kyc-kpi-num {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.kyc-kpi-lbl {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Main Table Container */
.kyc-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}

.kyc-panel-header {
    padding: 18px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.kyc-panel-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kyc-panel-title .badge {
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 20px;
}

.kyc-search {
    position: relative;
    min-width: 260px;
}

.kyc-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
}

.kyc-search input {
    width: 100%;
    padding: 8px 14px 8px 36px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    outline: none;
}

.kyc-search input:focus {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

/* Modern Data Table */
.kyc-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.kyc-table thead th {
    background: #f1f5f9;
    color: #475569;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 14px 16px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.kyc-table tbody td {
    padding: 16px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    color: #334155;
}

.kyc-table tbody tr:hover {
    background-color: #f8fafc;
}

/* User Identity Cell */
.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar-thumb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    background: #e2e8f0;
    cursor: pointer;
    transition: transform 0.2s;
}

.user-avatar-thumb:hover {
    transform: scale(1.1);
}

.user-name-text {
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 2px;
}

.user-meta-sub {
    font-size: 11.5px;
    color: #64748b;
}

/* Document Thumbnail Pill */
.doc-thumb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: #0f766e;
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.doc-thumb-btn:hover {
    background: #ccfbf1;
    color: #115e59;
    text-decoration: none;
}

.doc-thumb-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
}

/* Action Buttons */
.btn-action-approve {
    background: #059669;
    color: #ffffff;
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-action-approve:hover {
    background: #047857;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}

.btn-action-reject {
    background: #ffffff;
    color: #dc2626;
    border: 1.5px solid #dc2626;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-action-reject:hover {
    background: #dc2626;
    color: #ffffff;
}

/* Reason Preset Chips */
.reason-chip {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 11.5px;
    font-weight: 600;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    margin: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.reason-chip:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.empty-state i {
    font-size: 54px;
    color: #cbd5e1;
    margin-bottom: 12px;
    display: block;
}


/* --- View: role.blade.php (Block 1) --- */
/* Enterprise RBAC & Security Matrix Styles */
.rbac-wrapper {
    padding: 10px 0 60px 0;
}

.rbac-header-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #eff6ff 100%); border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 24px;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    position: relative;
    overflow: hidden;
}

.rbac-header-card::after {
    content: '';
    position: absolute;
    right: -50px;
    bottom: -50px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.rbac-header-title {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.rbac-header-title i {
    color: #2dd4bf;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 14px;
}

.rbac-header-sub {
    font-size: 14px;
    color: #cbd5e1;
    max-width: 820px;
    margin-bottom: 16px;
    line-height: 1.6;
}

.rbac-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.rbac-stat-box {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.rbac-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(45, 212, 191, 0.2);
    color: #2dd4bf;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.rbac-stat-num {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
}

.rbac-stat-lbl {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Control Toolbar & Filters */
.rbac-toolbar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.rbac-filter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rbac-filter-btn {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.rbac-filter-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.rbac-filter-btn.active {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.rbac-search-box {
    position: relative;
    min-width: 260px;
}

.rbac-search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
}

.rbac-search-box input {
    width: 100%;
    padding: 8px 14px 8px 36px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    outline: none;
    transition: border 0.2s;
}

.rbac-search-box input:focus {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

/* Role Cards Grid */
.rbac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px;
    margin-bottom: 30px;
}

.rbac-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.rbac-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
    border-color: rgba(13, 148, 136, 0.35);
}

.rbac-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.rbac-role-name {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rbac-dept-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-dept-exec { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.badge-dept-tech { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.badge-dept-ops { background: #f3e8ff; color: #6b21a8; border: 1px solid #e9d5ff; }
.badge-dept-biz { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }

.rbac-role-slug {
    font-family: monospace;
    font-size: 11px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 5px;
}

.rbac-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #f0fdfa;
    color: #0d9488;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border: 1px solid #ccfbf1;
    flex-shrink: 0;
}

.rbac-card-body {
    margin-bottom: 20px;
}

.rbac-progress-wrap {
    margin-bottom: 14px;
}

.rbac-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
}

.rbac-progress-bar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}

.rbac-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0d9488, #2dd4bf);
    border-radius: 10px;
    transition: width 0.5s ease;
}

.rbac-perm-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rbac-pill {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.rbac-pill.active {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
    font-weight: 600;
}

.rbac-btn-manage {
    width: 100%;
    padding: 11px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    border: 1.5px solid #0d9488;
    color: #0d9488;
    cursor: pointer;
    transition: all 0.2s;
}

.rbac-btn-manage:hover {
    background: #0d9488;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25);
}

/* Modal styling */
.rbac-modal-box {
    border-radius: 20px;
    border: none;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}

.rbac-modal-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #eff6ff 100%); border: 1px solid #e2e8f0;
    color: #ffffff;
    padding: 22px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rbac-modal-header h4 {
    color: #ffffff;
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 2px;
}

.rbac-modal-header p {
    color: #94a3b8;
    font-size: 13px;
    margin-bottom: 0;
}

.rbac-modal-controls {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 14px 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.rbac-modal-search {
    position: relative;
    flex-grow: 1;
    max-width: 320px;
}

.rbac-modal-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
}

.rbac-modal-search input {
    width: 100%;
    padding: 7px 12px 7px 34px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    outline: none;
}

.rbac-modal-search input:focus {
    border-color: #0d9488;
}

.rbac-preset-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.rbac-preset-btn {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.rbac-preset-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

/* Module Group Accordion Card */
.rbac-group-card {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 16px;
    overflow: hidden;
    background: #ffffff;
    transition: border 0.2s;
}

.rbac-group-card:hover {
    border-color: #cbd5e1;
}

.rbac-group-header {
    background: #f8fafc;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
}

.rbac-group-title {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.rbac-group-title i {
    font-size: 18px;
    color: #0d9488;
}

.rbac-group-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rbac-group-count {
    font-size: 11px;
    font-weight: 700;
    background: #e2e8f0;
    color: #334155;
    padding: 3px 8px;
    border-radius: 12px;
}

.rbac-group-toggle-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.rbac-group-toggle-btn:hover {
    background: #0d9488;
    color: #ffffff;
    border-color: #0d9488;
}

.rbac-group-body {
    padding: 8px 16px;
}

.rbac-perm-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px dashed #edf2f7;
    transition: background 0.15s;
    border-radius: 8px;
}

.rbac-perm-item:last-child {
    border-bottom: none;
}

.rbac-perm-item:hover {
    background: #f8fafc;
}

.rbac-perm-info {
    padding-right: 20px;
}

.rbac-perm-info h6 {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rbac-perm-info p {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 0;
    line-height: 1.4;
}

/* Custom Switch Toggle */
.rbac-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}

.rbac-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.rbac-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1;
    transition: .3s;
    border-radius: 26px;
}

.rbac-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .rbac-slider {
    background-color: #0d9488;
}

input:checked + .rbac-slider:before {
    transform: translateX(20px);
}

/* Toast */
.rbac-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #0f172a;
    color: #ffffff;
    padding: 14px 22px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    display: none;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    z-index: 99999;
}
.rbac-toast.success { background: #065f46; border: 1px solid #10b981; }
.rbac-toast.error { background: #991b1b; border: 1px solid #ef4444; }


/* --- View: manage_user.blade.php (Block 1) --- */
.card-modern {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        margin-bottom: 1.5rem;
    }
    .form-header-gradient {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #eff6ff 100%); border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 1.5rem 1.75rem;
        color: #ffffff;
        margin-bottom: 1.5rem;
        box-shadow: 0 8px 24px rgba(49, 46, 129, 0.2);
    }
    .section-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .section-card:hover {
        border-color: #cbd5e1;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
    }
    .section-title {
        font-size: 13px;
        font-weight: 700;
        color: #4f46e5;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #f1f5f9;
    }
    .section-title i {
        font-size: 18px;
        margin-right: 8px;
    }
    .form-label {
        font-size: 13px;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 6px;
    }
    .input-group-text {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #64748b;
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 8px !important;
    }
    .form-control, .form-control:focus {
        border-radius: 8px;
    }
    .input-group .form-control {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
    .form-control:focus {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    }
    .role-badge-preview {
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        background: #eef2ff;
        color: #4338ca;
        border: 1px solid #c7d2fe;
        display: inline-flex;
        align-items: center;
    }


/* --- View: user.blade.php (Block 1) --- */
.user-stat-card {
        border-radius: 14px;
        padding: 1.25rem 1.5rem;
        color: #fff;
        position: relative;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .user-stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    }
    .user-stat-card .stat-icon {
        position: absolute;
        right: 15px;
        bottom: 10px;
        font-size: 3.5rem;
        opacity: 0.22;
    }
    .bg-gradient-indigo { background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%); }
    .bg-gradient-emerald { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
    .bg-gradient-amber { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
    .bg-gradient-sky { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); }

    .card-modern {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        margin-bottom: 1.5rem;
    }
    .user-avatar-circle {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        object-fit: cover;
    }
    .user-avatar-initials {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 14px;
    }
    .badge-dept {
        border-radius: 6px;
        font-size: 11px;
        font-weight: 700;
        padding: 3px 8px;
    }
    .badge-soft-success { background: #dcfce7; color: #15803d; border-radius: 6px; font-weight: 600; }
    .badge-soft-danger { background: #fee2e2; color: #b91c1c; border-radius: 6px; font-weight: 600; }
    .badge-soft-warning { background: #fef3c7; color: #b45309; border-radius: 6px; font-weight: 600; }
    .badge-soft-info { background: #e0f2fe; color: #0369a1; border-radius: 6px; font-weight: 600; }


/* --- View: applicationslist.blade.php (Block 1) --- */
/* Executive Header */
    .ats-banner {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #eff6ff 100%);
        border-radius: 18px;
        padding: 1.75rem 2rem;
        color: #ffffff;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
        margin-bottom: 1.75rem;
        position: relative;
        overflow: hidden;
    }
    .ats-banner::after {
        content: '';
        position: absolute;
        top: -60px;
        right: -60px;
        width: 240px;
        height: 240px;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

    /* KPI Cards */
    .ats-kpi-card {
        border-radius: 16px;
        padding: 1.25rem 1.4rem;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        margin-bottom: 1.5rem;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        position: relative;
        overflow: hidden;
    }
    .ats-kpi-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    }
    .ats-kpi-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 12px;
    }

    /* Modern Table Card */
    .card-modern {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        margin-bottom: 1.75rem;
        overflow: hidden;
    }

    /* Badges */
    .badge-soft-success { background: #dcfce7; color: #15803d; border-radius: 6px; font-weight: 600; }
    .badge-soft-danger { background: #fee2e2; color: #b91c1c; border-radius: 6px; font-weight: 600; }
    .badge-soft-warning { background: #fef3c7; color: #b45309; border-radius: 6px; font-weight: 600; }
    .badge-soft-info { background: #e0f2fe; color: #0369a1; border-radius: 6px; font-weight: 600; }
    .badge-soft-purple { background: #f3e8ff; color: #7e22ce; border-radius: 6px; font-weight: 600; }
    .badge-soft-dark { background: #f1f5f9; color: #334155; border-radius: 6px; font-weight: 600; }

    /* Filter Pills */
    .filter-pill {
        border-radius: 20px;
        padding: 0.35rem 0.9rem;
        font-size: 13px;
        font-weight: 600;
        border: 1px solid #cbd5e1;
        background: #ffffff;
        color: #64748b;
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none !important;
        display: inline-block;
        margin-right: 6px;
        margin-bottom: 6px;
    }
    .filter-pill:hover, .filter-pill.active {
        background: #4f46e5;
        color: #ffffff;
        border-color: #4f46e5;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
    }

    /* Candidate Avatar */
    .candidate-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
        color: #4338ca;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        flex-shrink: 0;
    }

    /* Search Input */
    .table-search-input {
        border-radius: 20px;
        border: 1px solid #cbd5e1;
        padding: 0.45rem 1rem 0.45rem 2.2rem;
        font-size: 13px;
        background: #ffffff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2394a3b8" viewBox="0 0 16 16"><path 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"/></svg>') no-repeat 0.75rem center;
        transition: all 0.2s ease;
        min-width: 250px;
    }
    .table-search-input:focus {
        border-color: #4f46e5;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
        outline: none;
    }


/* --- View: attendencecelender.blade.php (Block 1) --- */
.calendar-container-modern {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        padding: 1.5rem;
    }
    .calendar-controls {
        background: #f8fafc;
        border-radius: 12px;
        padding: 1rem 1.25rem;
        border: 1px solid #e2e8f0;
        margin-bottom: 1.5rem;
    }
    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 8px;
    }
    .day-header {
        font-weight: 700;
        text-align: center;
        padding: 10px 4px;
        background: #f1f5f9;
        border-radius: 8px;
        color: #475569;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .day {
        min-height: 96px;
        border-radius: 10px;
        padding: 8px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: all 0.2s ease;
    }
    .day:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    }
    .day-today {
        border: 2px solid #6366f1 !important;
        background: #f5f3ff !important;
    }
    .day-present {
        border-color: #86efac;
        background: #f0fdf4;
    }
    .day-weekend {
        background: #f8fafc;
        border-color: #e2e8f0;
    }
    .day-absent {
        background: #fef2f2;
        border-color: #fecaca;
    }
    .day-future {
        background: #ffffff;
        opacity: 0.6;
    }
    .day-empty {
        background: transparent;
        border: none;
        pointer-events: none;
    }
    .day-number {
        font-size: 14px;
        color: #1e293b;
    }
    .legend-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
    }


/* --- View: attendencereport.blade.php (Block 1) --- */
.att-stat-card {
        border-radius: 14px;
        padding: 1.25rem 1.5rem;
        color: #fff;
        position: relative;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .att-stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    }
    .att-stat-card .stat-icon {
        position: absolute;
        right: 15px;
        bottom: 10px;
        font-size: 3.5rem;
        opacity: 0.22;
    }
    .bg-gradient-indigo { background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%); }
    .bg-gradient-emerald { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
    .bg-gradient-amber { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
    .bg-gradient-sky { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); }

    .card-modern {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
        margin-bottom: 1.5rem;
    }
    .filter-bar {
        background: #f8fafc;
        border-radius: 12px;
        padding: 1rem 1.25rem;
        border: 1px solid #e2e8f0;
    }
    .badge-soft-success { background: #dcfce7; color: #15803d; border-radius: 6px; font-weight: 600; }
    .badge-soft-warning { background: #fef3c7; color: #b45309; border-radius: 6px; font-weight: 600; }
    .badge-soft-danger { background: #fee2e2; color: #b91c1c; border-radius: 6px; font-weight: 600; }
    .badge-soft-info { background: #e0f2fe; color: #0369a1; border-radius: 6px; font-weight: 600; }
    .user-avatar-initials {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 13px;
    }


/* --- View: header.blade.php (Block 1) --- */
.editor-toolbar.fullscreen,
.CodeMirror-fullscreen {
  z-index: 99999;
}

.theme--sidebar {
  background: var(--theme-sidebar-bg) !important;
}


/* --- View: index.blade.php (Block 1) --- */
.cl-white {
        color: #fff!important;
    }


/* --- View: ip.blade.php (Block 1) --- */
.cl-white {
        color: #fff!important;
    }


/* --- View: failed.blade.php (Block 1) --- */
#failedModal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            padding: 20px;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            z-index: 9999;
         }

         #failedModal h2 {
            color: #dc3545;
            margin-bottom: 10px;
         }

         #failedModal p {
            margin-bottom: 20px;
         }

         #failedModal button {
            background-color: #dc3545;
            color: #fff;
            border: none;
            padding: 8px 16px;
            cursor: pointer;
         }


/* --- View: success.blade.php (Block 1) --- */
#successModal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            padding: 20px;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            z-index: 9999;
         }

         #successModal h2 {
            color: #28a745;
            margin-bottom: 10px;
         }

         #successModal p {
            margin-bottom: 20px;
         }

         #successModal button {
            background-color: #28a745;
            color: #fff;
            border: none;
            padding: 8px 16px;
            cursor: pointer;
         }


/* --- View: create.blade.php (Block 1) --- */
/* ==============================================================================
   PROJECT BOOKING ADVANCED UI/UX STYLING (V3)
   ============================================================================== */
.project-booking-wrapper {
    padding: 10px 0 60px 0;
}

/* Page Header Card */
.pb-header-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(240,253,250,0.95) 100%);
    border: 1px solid rgba(50, 168, 158, 0.2);
    border-radius: var(--theme-radius-card, 16px);
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.pb-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(50, 168, 158, 0.12);
    color: var(--theme-primary, #32a89e);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pb-header-title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.pb-header-sub {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 0;
}

/* Staff Security Notice */
.pb-staff-notice {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 13px;
    color: #166534;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

/* Section Cards */
.pb-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--theme-radius-card, 16px);
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: all 0.2s ease;
}

.pb-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

.pb-card-header {
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafcfc;
}

.pb-card-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pb-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(50, 168, 158, 0.1);
    color: var(--theme-primary, #32a89e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.pb-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2px;
}

.pb-card-desc {
    font-size: 12.5px;
    color: #64748b;
    margin-bottom: 0;
}

.pb-card-body {
    padding: 24px;
}

/* Bulletproof Input Icon Styling (No Text Overlay) */
.pb-field-group {
    margin-bottom: 18px;
}

.pb-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pb-label .req {
    color: #ef4444;
    margin-left: 4px;
}

.pb-label .opt {
    color: #10b981;
    font-size: 11.5px;
    font-weight: 500;
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
}

.pb-input-wrapper {
    position: relative;
    width: 100%;
}

.pb-input-wrapper .pb-left-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 18px;
    pointer-events: none;
    z-index: 2;
    transition: color 0.2s ease;
}

.pb-input-wrapper input.form-control,
.pb-input-wrapper select.form-control {
    height: 48px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    padding-left: 44px !important;
    padding-right: 14px !important;
    font-size: 14px;
    color: #1e293b;
    background: #ffffff;
    transition: all 0.2s ease;
}

.pb-input-wrapper input.form-control:focus,
.pb-input-wrapper select.form-control:focus {
    border-color: var(--theme-primary, #32a89e);
    box-shadow: 0 0 0 3px rgba(50, 168, 158, 0.15);
    outline: none;
}

.pb-input-wrapper input.form-control:focus + .pb-left-icon,
.pb-input-wrapper select.form-control:focus + .pb-left-icon {
    color: var(--theme-primary, #32a89e);
}

.pb-input-wrapper input.form-control[readonly] {
    background-color: #f8fafc;
    color: #475569;
    border-color: #e2e8f0;
}

/* Password Eye Toggle */
.pb-password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    cursor: pointer;
    z-index: 3;
    padding: 4px;
}

.pb-password-toggle:hover {
    color: #334155;
}

/* Textarea - Icon in Label, Clean Body */
textarea.form-control.pb-textarea {
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    padding: 14px 44px 14px 14px;
    font-size: 14px;
    color: #1e293b;
    min-height: 110px;
    width: 100%;
}

textarea.form-control.pb-textarea:focus {
    border-color: var(--theme-primary, #32a89e);
    box-shadow: 0 0 0 3px rgba(50, 168, 158, 0.15);
    outline: none;
}

/* Custom Select Dropdown with Clean Right Arrow */
.pb-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    cursor: pointer;
}

/* ==============================================================================
   1. CLIENT SELECTION CARDS & LIVE SEARCH
   ============================================================================== */
.pb-client-search-box {
    position: relative;
    margin-bottom: 14px;
}

.pb-client-search-box .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 18px;
}

.pb-client-search-input {
    height: 46px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    padding-left: 42px;
    padding-right: 36px;
    width: 100%;
    font-size: 13.5px;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.pb-client-search-input:focus {
    background: #ffffff;
    border-color: var(--theme-primary, #32a89e);
    box-shadow: 0 0 0 3px rgba(50, 168, 158, 0.15);
    outline: none;
}

.pb-client-clear-search {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
    display: none;
}

.pb-client-cards-container {
    max-height: 310px;
    overflow-y: auto;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    background: #fafcfc;
}

@media (max-width: 767px) {
    .pb-client-cards-container {
        grid-template-columns: 1fr;
        max-height: 360px;
    }
}

.pb-client-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    user-select: none;
}

.pb-client-card:hover {
    border-color: rgba(50, 168, 158, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.pb-client-card.active {
    border-color: var(--theme-primary, #32a89e);
    background: linear-gradient(135deg, rgba(236,253,245,0.9) 0%, #ffffff 100%);
    box-shadow: 0 4px 14px rgba(50, 168, 158, 0.15);
}

.pb-client-card-img {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: cover;
    background: #e2e8f0;
    flex-shrink: 0;
    border: 1.5px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.pb-client-card-info {
    flex: 1;
    min-width: 0;
}

.pb-client-card-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-client-card-outlet {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pb-client-card-mobile {
    font-size: 11.5px;
    color: var(--theme-primary, #32a89e);
    font-weight: 600;
}

.pb-client-card-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 11px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.pb-client-card.active .pb-client-card-check {
    background: var(--theme-primary, #32a89e);
    border-color: var(--theme-primary, #32a89e);
    color: #ffffff;
}

/* Live Selected Client Banner */
.pb-selected-client-banner {
    background: linear-gradient(135deg, rgba(240,253,250,0.9) 0%, #ffffff 100%);
    border: 1.5px solid rgba(50, 168, 158, 0.35);
    border-radius: 14px;
    padding: 16px 20px;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 14px rgba(50, 168, 158, 0.08);
}

/* ==============================================================================
   2. CATEGORY SELECTOR CARDS
   ============================================================================== */
.pb-category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .pb-category-grid {
        grid-template-columns: 1fr;
    }
}

.pb-category-card {
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.pb-category-card:hover {
    border-color: rgba(50, 168, 158, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.pb-category-card.selected {
    border-color: var(--theme-primary, #32a89e);
    background: linear-gradient(135deg, rgba(240,253,250,0.9) 0%, rgba(255,255,255,0.9) 100%);
    box-shadow: 0 6px 20px rgba(50, 168, 158, 0.15);
}

.pb-category-card .pb-check-indicator {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 12px;
    transition: all 0.2s ease;
}

.pb-category-card.selected .pb-check-indicator {
    background: var(--theme-primary, #32a89e);
    border-color: var(--theme-primary, #32a89e);
    color: #ffffff;
}

.pb-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.pb-category-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(50, 168, 158, 0.12);
    color: var(--theme-primary, #32a89e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.pb-category-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.pb-category-desc {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.4;
    margin: 0;
}

/* Service Basket Items */
.pb-basket-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.pb-basket-empty {
    text-align: center;
    padding: 24px 16px;
    color: #94a3b8;
}

.pb-basket-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.pb-basket-item:last-child {
    margin-bottom: 0;
}

.pb-basket-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.pb-basket-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.pb-basket-sub {
    font-size: 12px;
    color: #64748b;
}

.pb-basket-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-primary, #32a89e);
    margin-right: 12px;
}

.pb-basket-remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pb-basket-remove:hover {
    background: #ef4444;
    color: #ffffff;
    transform: scale(1.05);
}

/* Total Price Highlight Card */
.pb-total-box {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #eff6ff 100%); border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    margin-top: 16px;
    box-shadow: 0 4px 16px rgba(9, 38, 34, 0.25);
}

.pb-total-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pb-total-amount {
    font-size: 22px;
    font-weight: 800;
    color: #34d399;
}

/* Voice Dictation Button & Wave Pulse */
.pb-voice-btn {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(50, 168, 158, 0.12);
    color: var(--theme-primary, #32a89e);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    z-index: 5;
}

.pb-voice-btn:hover {
    background: var(--theme-primary, #32a89e);
    color: #ffffff;
}

.pb-voice-btn.listening {
    background: #ef4444 !important;
    color: #ffffff !important;
    animation: voicePulse 1.2s infinite;
}

@keyframes voicePulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ==============================================================================
   3. EXPANDED SERVER ACCESS OPTIONS (7 SCENARIOS)
   ============================================================================== */
.pb-server-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.pb-server-option-card {
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    user-select: none;
}

.pb-server-option-card:hover {
    border-color: rgba(50, 168, 158, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.pb-server-option-card.selected {
    border-color: var(--theme-primary, #32a89e);
    background: linear-gradient(135deg, rgba(240,253,250,0.95) 0%, #ffffff 100%);
    box-shadow: 0 4px 14px rgba(50, 168, 158, 0.15);
}

.pb-server-option-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.pb-server-option-card.selected .pb-server-option-icon {
    background: var(--theme-primary, #32a89e);
    color: #ffffff;
}

.pb-server-option-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2px;
}

.pb-server-option-sub {
    font-size: 11px;
    color: #64748b;
    line-height: 1.3;
}

/* ==============================================================================
   4. MULTIPLE THIRD-PARTY PORTAL / API CREDENTIALS REPEATER
   ============================================================================== */
.pb-api-credential-card {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    position: relative;
    transition: all 0.2s ease;
}

.pb-api-credential-card:hover {
    border-color: #cbd5e1;
}

.pb-api-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.pb-api-remove-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pb-api-remove-btn:hover {
    background: #ef4444;
    color: #ffffff;
}

/* ==============================================================================
   5. T&C EMAIL & ELECTRONIC CLIENT ACCEPTANCE WORKFLOW
   ============================================================================== */
.pb-tc-workflow-box {
    background: linear-gradient(135deg, rgba(236,253,245,0.7) 0%, rgba(240,253,250,0.7) 100%);
    border: 1.5px solid rgba(50, 168, 158, 0.35);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}

.pb-tc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    color: var(--theme-primary, #32a89e);
    border: 1px solid rgba(50, 168, 158, 0.3);
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* Pill Toggle Switch */
.pb-pill-switch {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 30px;
    padding: 4px;
    gap: 4px;
}

.pb-pill-option {
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.pb-pill-option.active {
    background: #ffffff;
    color: var(--theme-primary, #32a89e);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Upload Grid */
.pb-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 767px) {
    .pb-upload-grid {
        grid-template-columns: 1fr;
    }
}

.pb-file-box {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.pb-file-box:hover {
    border-color: var(--theme-primary, #32a89e);
    background: rgba(240, 253, 250, 0.5);
}

.pb-file-box input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.pb-file-icon {
    font-size: 26px;
    color: #94a3b8;
    margin-bottom: 6px;
}

.pb-file-name {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    word-break: break-all;
    margin-bottom: 2px;
}

.pb-file-hint {
    font-size: 11px;
    color: #94a3b8;
}

/* Desktop Sticky Summary Panel */
.pb-sticky-summary {
    position: sticky;
    top: 90px;
}

.pb-summary-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--theme-radius-card, 16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: 20px;
}

.pb-summary-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #eff6ff 100%); border: 1px solid #e2e8f0;
    color: #ffffff;
    padding: 20px;
}

.pb-summary-body {
    padding: 20px;
}

.pb-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 13.5px;
}

.pb-summary-row:last-child {
    border-bottom: none;
}

.pb-summary-row .label {
    color: #64748b;
    font-weight: 500;
}

.pb-summary-row .val {
    color: #1e293b;
    font-weight: 700;
    text-align: right;
}

/* Submit Action Button */
.pb-submit-btn {
    height: 52px;
    background: linear-gradient(135deg, #32a89e 0%, #10b981 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 18px rgba(50, 168, 158, 0.4);
    transition: all 0.25s ease;
    width: 100%;
    cursor: pointer;
}

.pb-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(50, 168, 158, 0.5);
    color: #ffffff;
}

.pb-submit-btn:active {
    transform: translateY(0);
}


/* --- View: edit-service.blade.php (Block 1) --- */
/* Include your custom styles here */
        .required { color: red; margin-left: 5px; }
        .Optional { color: green; margin-left: 5px; }
        /* Add other styles as needed */


/* --- View: all_product.blade.php (Block 1) --- */
.store-hero-card {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #eff6ff 100%);
        border-radius: 18px;
        padding: 1.75rem 2rem;
        color: #ffffff;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
        margin-bottom: 1.75rem;
        position: relative;
        overflow: hidden;
    }
    .store-hero-card::after {
        content: '';
        position: absolute;
        top: -60px;
        right: -60px;
        width: 240px;
        height: 240px;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }
    .kpi-stat-card {
        background: #ffffff;
        border-radius: 14px;
        padding: 1.25rem 1.5rem;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
        border: 1px solid #e2e8f0;
        transition: transform 0.2s, box-shadow 0.2s;
        height: 100%;
    }
    .kpi-stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    }
    .product-thumb-box {
        width: 58px;
        height: 58px;
        border-radius: 10px;
        object-fit: cover;
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    .badge-file-type {
        background: #e0f2fe;
        color: #0369a1;
        font-weight: 700;
        font-size: 11px;
        padding: 4px 10px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        text-decoration: none !important;
    }
    .badge-file-type:hover {
        background: #bae6fd;
        color: #0284c7;
    }
    .badge-file-missing {
        background: #fee2e2;
        color: #b91c1c;
        font-weight: 600;
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 6px;
    }
    .store-toggle-switch {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: rgba(255, 255, 255, 0.12);
        padding: 6px 16px;
        border-radius: 30px;
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }


/* --- View: list.blade.php (Block 1) --- */
.downloads-hero-banner {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #eff6ff 100%); border: 1px solid #e2e8f0;
        border-radius: 18px;
        padding: 1.75rem 2rem;
        color: #ffffff;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
        margin-bottom: 1.75rem;
        position: relative;
        overflow: hidden;
    }
    .downloads-hero-banner::after {
        content: '';
        position: absolute;
        top: -60px;
        right: -60px;
        width: 240px;
        height: 240px;
        background: radial-gradient(circle, rgba(14, 165, 233, 0.25) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }
    .license-code-box {
        background: #f8fafc;
        border: 1px dashed #cbd5e1;
        border-radius: 8px;
        padding: 6px 10px;
        font-family: 'Space Grotesk', monospace, sans-serif;
        font-weight: 700;
        font-size: 12px;
        color: #1e293b;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .btn-download-asset {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: #ffffff !important;
        font-weight: 700;
        font-size: 12px;
        padding: 6px 14px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        text-decoration: none !important;
        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .btn-download-asset:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5);
    }
    .prod-thumb-sm {
        width: 44px;
        height: 44px;
        border-radius: 8px;
        object-fit: cover;
        border: 1px solid #e2e8f0;
    }



/* --- Safe Component Styles (Scoped & Light Theme Compliant) --- */
#featured_preview,
#preview {
    max-width: 200px;
    max-height: 200px;
    margin-top: 10px;
}
.image_preview {
    max-width: 100px;
    margin: 5px;
}
.image-preview-container {
    display: flex;
    flex-wrap: wrap;
}
.notice {
    color: var(--theme-danger, #dc2626);
}
.required {
    color: var(--theme-danger, #dc2626);
    margin-left: 5px;
}
.Optional {
    color: var(--theme-success, #16a34a);
    margin-left: 5px;
}
#project_description {
    padding-right: 40px;
}
#voiceButton {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 24px;
    color: #475569;
}
#popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: transparent;
    z-index: 1000;
    text-align: center;
}
#loadingGif {
    width: 200px;
    height: 200px;
}
.endpoint-section {
    margin-bottom: 40px;
}
.endpoint-title {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
}
.request-method {
    font-size: 18px;
    margin-bottom: 10px;
}
.url-example,
.response-example {
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 10px;
    word-break: break-all;
}
.response-section {
    margin-top: 30px;
    padding: 20px;
    border-radius: 8px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
}
#customers {
    width: 100%;
    border-collapse: collapse;
}
#customers td,
#customers th {
    border: 1px solid #e2e8f0;
    padding: 10px 14px;
    color: #0f172a;
    font-size: 14px;
}
#customers tr:nth-child(even) {
    background-color: #f8fafc;
}
#customers tr:hover {
    background-color: #f1f5f9;
}
#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #f1f5f9;
    color: #334155;
    font-weight: 700;
}
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.45);
    z-index: 9999;
    overflow: auto;
}
.popup-content {
    background-color: #ffffff;
    margin: 40px auto;
    padding: 24px;
    max-width: 600px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
    color: #0f172a;
}
.close-button {
    position: absolute;
    top: 12px;
    right: 14px;
    cursor: pointer;
    font-size: 20px;
    color: #64748b;
}
.project-details p {
    margin-bottom: 10px;
}
.project-details h3 {
    margin-top: 20px;
}


/* --- utilities.css --- */
/**
 * ==============================================================================
 * CLUSTERWEB SOLUTION PRIVATE LIMITED — DESIGN SYSTEM
 * 10. UTILITIES & REUSABLE LAYOUT CLASSES
 * ==============================================================================
 */

.bg-surface { background-color: var(--theme-bg-surface) !important; }
.bg-surface-muted { background-color: var(--theme-bg-surface-muted) !important; }
.bg-surface-subtle { background-color: var(--theme-bg-surface-subtle) !important; }

.border-subtle { border: 1px solid var(--theme-border-subtle) !important; }
.border-theme { border: 1px solid var(--theme-border) !important; }
.border-strong { border: 1px solid var(--theme-border-strong) !important; }

.rounded-sm { border-radius: var(--theme-radius-sm) !important; }
.rounded-md { border-radius: var(--theme-radius-md) !important; }
.rounded-lg { border-radius: var(--theme-radius-lg) !important; }
.rounded-xl { border-radius: var(--theme-radius-xl) !important; }
.rounded-card { border-radius: var(--theme-radius-card) !important; }

.shadow-xs { box-shadow: var(--theme-shadow-xs) !important; }
.shadow-sm { box-shadow: var(--theme-shadow-sm) !important; }
.shadow-md { box-shadow: var(--theme-shadow-md) !important; }
.shadow-lg { box-shadow: var(--theme-shadow-lg) !important; }
.shadow-card { box-shadow: var(--theme-shadow-card) !important; }
.shadow-none { box-shadow: none !important; }

/* Reusable Avatars */
.avatar-user-img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-sm { width: 32px; height: 32px; object-fit: cover; }
.avatar-md { width: 44px; height: 44px; object-fit: cover; }
.avatar-lg { width: 56px; height: 56px; object-fit: cover; }

/* Reusable Page Containers */
.cws-dashboard-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.page-header-card {
    background: #ffffff !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--theme-radius-card) !important;
    padding: 20px 24px !important;
    margin-bottom: 24px !important;
    box-shadow: var(--theme-shadow-card) !important;
}

/* Sidebar Home Link */
.sidebar-home-link {
    background: var(--theme-primary-light) !important;
    border-radius: var(--theme-radius-button) !important;
    border: 1px solid rgba(37, 99, 235, 0.2) !important;
}

/* Impersonation Notice Bar */
.admin-impersonation-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 42px;
    background: #ea580c !important;
    color: #ffffff !important;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.has-impersonation .header-container { top: 42px !important; }
.has-impersonation .sidebar-wrapper { top: 102px !important; }
.has-impersonation .main-container { padding-top: 42px !important; }

/* Editor Fullscreen Fix */
.editor-toolbar.fullscreen,
.CodeMirror-fullscreen {
    z-index: 99999 !important;
}

/* ==============================================================================
   BOOTSTRAP 5 UTILITY COMPATIBILITY LAYER (FOR BOOTSTRAP 4 SHELL)
   ============================================================================== */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

.row.g-1 { margin-left: -0.125rem; margin-right: -0.125rem; row-gap: 0.25rem; }
.row.g-1 > [class*="col"] { padding-left: 0.125rem; padding-right: 0.125rem; }
.row.g-2 { margin-left: -0.25rem; margin-right: -0.25rem; row-gap: 0.5rem; }
.row.g-2 > [class*="col"] { padding-left: 0.25rem; padding-right: 0.25rem; }
.row.g-3 { margin-left: -0.5rem; margin-right: -0.5rem; row-gap: 0.85rem; }
.row.g-3 > [class*="col"] { padding-left: 0.5rem; padding-right: 0.5rem; }
.row.g-4 { margin-left: -0.75rem; margin-right: -0.75rem; row-gap: 1.25rem; }
.row.g-4 > [class*="col"] { padding-left: 0.75rem; padding-right: 0.75rem; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-auto { margin-left: auto !important; }

.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-auto { margin-right: auto !important; }

.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }

.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }

.rounded-1 { border-radius: 0.25rem !important; }
.rounded-2 { border-radius: 0.375rem !important; }
.rounded-3 { border-radius: 0.5rem !important; }
.rounded-4 { border-radius: 0.875rem !important; }
.rounded-pill { border-radius: 50rem !important; }

.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-bolder { font-weight: 800 !important; }

.fs-1 { font-size: 2.25rem !important; }
.fs-2 { font-size: 1.875rem !important; }
.fs-3 { font-size: 1.5rem !important; }
.fs-4 { font-size: 1.25rem !important; }
.fs-5 { font-size: 1.1rem !important; }
.fs-6 { font-size: 0.95rem !important; }

.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.border-start-0 { border-left: 0 !important; }
.border-end-0 { border-right: 0 !important; }




/* --- responsive.css --- */
/**
 * ==============================================================================
 * CLUSTERWEB SOLUTION PRIVATE LIMITED — DESIGN SYSTEM
 * 11. RESPONSIVE BREAKPOINTS (320px to 1920px)
 * ==============================================================================
 */

/* Mobile Phones (<= 576px) */
@media (max-width: 575.98px) {
    .layout-px-spacing {
        padding: 0 12px !important;
    }
    .cws-dashboard-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .card-body,
    .widget-content-area {
        padding: 16px !important;
    }
    .app-hero-card {
        padding: 1.25rem 1rem !important;
    }
    .balance-amount {
        font-size: 1.75rem !important;
    }
    .quick-action-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .hero-light-title {
        font-size: 2rem !important;
    }
    .table-responsive {
        border-radius: var(--theme-radius-card);
    }
}

/* Tablets Portrait (576px to 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .layout-px-spacing {
        padding: 0 16px !important;
    }
    .quick-action-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Tablets Landscape & Small Laptops (768px to 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .layout-px-spacing {
        padding: 0 20px !important;
    }
}

/* Desktops & Laptops (>= 992px) */
@media (min-width: 992px) {
    .layout-px-spacing {
        padding: 0 28px !important;
    }
}

/* Ultra-Wide Displays (>= 1440px) */
@media (min-width: 1440px) {
    .cws-dashboard-container {
        max-width: 1400px;
        margin: 0 auto;
    }
}