/* assets/css/template2.css */
/* Modern Business Dashboard Theme */

:root {
    --primary-color: #2563eb;
    --primary-light: #3b82f6;
    --primary-dark: #1d4ed8;
    --secondary-color: #7c3aed;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #06b6d4;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --bg-light: #f1f5f9;
    --bg-white: #ffffff;
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
    --sidebar-width: 280px;
    --navbar-height: 72px;
    --border-radius: 16px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Auth Pages - Modern */
.auth-page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.auth-page::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    top: -200px;
    right: -200px;
}

.auth-page::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    bottom: -150px;
    left: -150px;
}

.auth-container {
    width: 100%;
    max-width: 440px;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.auth-card {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    border-radius: var(--border-radius);
    padding: 48px 40px;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255,255,255,0.2);
}

.company-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 32px;
    letter-spacing: -0.5px;
}

.company-logo i {
    font-size: 32px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-header h2 {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 8px;
}

.auth-header p {
    color: var(--text-secondary);
    font-size: 15px;
}

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

.auth-form label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 6px;
}

.auth-form .input-group {
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--border-color);
    transition: var(--transition);
    background: white;
}

.auth-form .input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.auth-form .input-group-text {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0 0 0 16px;
}

.auth-form .form-control {
    border: none;
    padding: 12px 16px;
    font-size: 15px;
    background: transparent;
}

.auth-form .form-control:focus {
    box-shadow: none;
    background: transparent;
}

.toggle-password {
    border: none;
    background: transparent;
    padding: 0 16px;
    color: var(--text-secondary);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 0 32px;
}

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

.forgot-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border: none;
    padding: 14px;
    font-weight: 600;
    border-radius: 12px;
    transition: var(--transition);
    font-size: 16px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    color: var(--text-secondary);
}

.auth-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

/* Main Layout - Modern */
.wrapper {
    display: flex;
    min-height: 100vh;
    background: var(--bg-light);
}

.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-white);
    border-right: 1px solid var(--border-color);
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    transition: var(--transition);
    z-index: 1000;
    padding: 24px 0;
}

.sidebar-brand {
    padding: 0 24px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-brand i {
    font-size: 32px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sidebar-brand span {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.sidebar-menu {
    padding: 16px 12px;
}

.sidebar-menu .nav-item {
    list-style: none;
    margin-bottom: 2px;
}

.sidebar-menu .nav-link {
    color: var(--text-secondary);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    border-radius: 12px;
    transition: var(--transition);
    font-weight: 500;
    font-size: 14px;
}

.sidebar-menu .nav-link:hover {
    background: var(--bg-light);
    color: var(--text-primary);
}

.sidebar-menu .nav-link.active {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.sidebar-menu .nav-link i {
    width: 20px;
    font-size: 18px;
}

.sidebar-menu .nav-section {
    padding: 16px 16px 8px;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 1px;
    font-weight: 600;
}

.sidebar-menu .sub-menu {
    padding-left: 20px;
    margin-top: 4px;
}

.sidebar-menu .sub-menu .nav-link {
    padding: 8px 16px 8px 48px;
    font-size: 13px;
    font-weight: 400;
}

.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    min-height: 100vh;
}

.top-nav {
    height: var(--navbar-height);
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 999;
}

.top-nav .search-box {
    position: relative;
}

.top-nav .search-box input {
    padding: 10px 20px 10px 44px;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    background: var(--bg-light);
    width: 300px;
    transition: var(--transition);
    font-size: 14px;
}

.top-nav .search-box input:focus {
    width: 360px;
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.top-nav .search-box i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-actions .notification-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--bg-light);
    color: var(--text-secondary);
    font-size: 18px;
    transition: var(--transition);
}

.nav-actions .notification-btn:hover {
    background: var(--primary-color);
    color: white;
}

.nav-actions .notification-btn .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--danger-color);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 20px;
    border: 2px solid white;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.user-menu:hover {
    background: var(--bg-light);
}

.user-menu .avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

.user-menu .user-info .user-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.user-menu .user-info .user-role {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Dashboard - Modern */
.dashboard-content {
    padding: 32px;
}

.dashboard-greeting {
    margin-bottom: 8px;
}

.dashboard-greeting h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.dashboard-greeting p {
    color: var(--text-secondary);
    font-size: 16px;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.kpi-card {
    background: var(--bg-white);
    border-radius: var(--border-radius);
    padding: 24px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.kpi-card.revenue::before {
    background: linear-gradient(90deg, var(--primary-color), var(--info-color));
}

.kpi-card.expenses::before {
    background: linear-gradient(90deg, var(--danger-color), var(--warning-color));
}

.kpi-card.profit::before {
    background: linear-gradient(90deg, var(--success-color), var(--primary-color));
}

.kpi-card.balance::before {
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
}

.kpi-card .kpi-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.kpi-card .kpi-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

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

.kpi-card.revenue .kpi-icon {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-color);
}

.kpi-card.expenses .kpi-icon {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.kpi-card.profit .kpi-icon {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.kpi-card.balance .kpi-icon {
    background: rgba(124, 58, 237, 0.1);
    color: var(--secondary-color);
}

.kpi-card .kpi-value {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.kpi-card .kpi-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
}

.kpi-card .kpi-change.positive {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.kpi-card .kpi-change.negative {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.chart-grid-modern {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.chart-card {
    background: var(--bg-white);
    border-radius: var(--border-radius);
    padding: 24px;
    border: 1px solid var(--border-color);
}

.chart-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.chart-card .card-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 16px;
}

.chart-card .card-action {
    font-size: 13px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.account-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.account-card {
    background: var(--bg-white);
    border-radius: var(--border-radius);
    padding: 20px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.account-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.account-card .account-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.account-card .account-balance {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.account-card .account-currency {
    font-size: 13px;
    color: var(--text-secondary);
}

.account-card .account-last {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* Modern Buttons */
.btn-modern {
    padding: 10px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: var(--transition);
    border: none;
}

.btn-modern-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
}

.btn-modern-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}

.btn-modern-success {
    background: linear-gradient(135deg, var(--success-color), #059669);
    color: white;
}

.btn-modern-danger {
    background: linear-gradient(135deg, var(--danger-color), #dc2626);
    color: white;
}

.btn-modern-info {
    background: linear-gradient(135deg, var(--info-color), #0891b2);
    color: white;
}

.quick-actions-modern {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.quick-actions-modern .btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
}

 /* ============================================
           COMPLETE TEMPLATE 2 DASHBOARD STYLES
           ============================================ */
        
        /* Reset & Base */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f1f5f9;
            color: #1e293b;
        }
        
        /* Wrapper */
        .wrapper { display: flex; min-height: 100vh; }
        
        /* ============================================
           SIDEBAR
           ============================================ */
        .sidebar {
            width: 280px;
            background: white;
            border-right: 1px solid #e2e8f0;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1000;
            display: flex;
            flex-direction: column;
        }
        .sidebar-brand {
            padding: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid #e2e8f0;
            flex-shrink: 0;
        }
        .sidebar-brand i {
            font-size: 28px;
            background: linear-gradient(135deg, #2563eb, #7c3aed);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .sidebar-brand span {
            font-size: 20px;
            font-weight: 700;
            color: #1e293b;
            letter-spacing: -0.5px;
        }
        .sidebar-menu {
            list-style: none;
            padding: 16px 12px;
            margin: 0;
            flex: 1;
            overflow-y: auto;
        }
        .sidebar-menu .nav-section {
            padding: 16px 16px 8px;
            font-size: 11px;
            text-transform: uppercase;
            color: #94a3b8;
            letter-spacing: 1px;
            font-weight: 600;
        }
        .sidebar-menu .nav-item { margin-bottom: 2px; }
        .sidebar-menu .nav-link {
            color: #64748b;
            padding: 10px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            border-radius: 12px;
            transition: all 0.3s;
            font-weight: 500;
            font-size: 14px;
        }
        .sidebar-menu .nav-link:hover {
            background: #f1f5f9;
            color: #1e293b;
        }
        .sidebar-menu .nav-link.active {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            color: white;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
        }
        .sidebar-menu .nav-link i { width: 20px; font-size: 16px; }
        
        /* ============================================
           TOP NAV
           ============================================ */
        .main-content {
            flex: 1;
            margin-left: 280px;
            min-height: 100vh;
        }
        .top-nav {
            height: 72px;
            background: white;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 32px;
            position: sticky;
            top: 0;
            z-index: 999;
        }
        .top-nav .search-box { position: relative; }
        .top-nav .search-box input {
            padding: 10px 20px 10px 44px;
            border-radius: 12px;
            border: 2px solid #e2e8f0;
            background: #f1f5f9;
            width: 300px;
            transition: all 0.3s;
            font-size: 14px;
        }
        .top-nav .search-box input:focus {
            width: 360px;
            border-color: #2563eb;
            outline: none;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
        }
        .top-nav .search-box i {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #64748b;
        }
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .nav-actions .notification-btn {
            position: relative;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: #f1f5f9;
            color: #64748b;
            font-size: 18px;
            transition: all 0.3s;
            text-decoration: none;
        }
        .nav-actions .notification-btn:hover {
            background: #2563eb;
            color: white;
        }
        .nav-actions .notification-btn .badge {
            position: absolute;
            top: -4px;
            right: -4px;
            background: #ef4444;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 20px;
            border: 2px solid white;
            color: white;
        }
        .user-menu {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 6px 12px 6px 8px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .user-menu:hover { background: #f1f5f9; }
        .user-menu .avatar {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            background: linear-gradient(135deg, #2563eb, #7c3aed);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 16px;
        }
        .user-menu .user-info .user-name {
            font-weight: 600;
            color: #1e293b;
            font-size: 14px;
        }
        .user-menu .user-info .user-role {
            font-size: 12px;
            color: #64748b;
            text-transform: capitalize;
        }
        
        /* ============================================
           DASHBOARD CONTENT
           ============================================ */
        .dashboard-content {
            padding: 24px;
            max-width: 1400px;
            margin: 0 auto;
        }
        .dashboard-greeting {
            margin-bottom: 24px;
        }
        .dashboard-greeting h1 {
            font-size: 28px;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 4px;
        }
        .dashboard-greeting p {
            color: #64748b;
            font-size: 16px;
        }
        
        /* Quick Actions */
        .quick-actions-modern {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 24px;
        }
        .btn-modern {
            padding: 10px 24px;
            border-radius: 12px;
            font-weight: 600;
            transition: all 0.3s;
            border: none;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .btn-modern:hover { transform: translateY(-2px); }
        .btn-modern-success {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
        }
        .btn-modern-success:hover {
            box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
            color: white;
        }
        .btn-modern-danger {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: white;
        }
        .btn-modern-danger:hover {
            box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3);
            color: white;
        }
        .btn-modern-info {
            background: linear-gradient(135deg, #06b6d4, #0891b2);
            color: white;
        }
        .btn-modern-info:hover {
            box-shadow: 0 8px 24px rgba(6, 182, 212, 0.3);
            color: white;
        }
        .btn-modern-primary {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            color: white;
        }
        .btn-modern-primary:hover {
            box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
            color: white;
        }
        
        /* KPI Cards */
        .kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin-bottom: 24px;
        }
        .kpi-card {
            background: white;
            border-radius: 16px;
            padding: 24px;
            border: 1px solid #e2e8f0;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }
        .kpi-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        }
        .kpi-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
        }
        .kpi-card.revenue::before { background: linear-gradient(90deg, #2563eb, #06b6d4); }
        .kpi-card.expenses::before { background: linear-gradient(90deg, #ef4444, #f59e0b); }
        .kpi-card.profit::before { background: linear-gradient(90deg, #10b981, #2563eb); }
        .kpi-card.balance::before { background: linear-gradient(90deg, #7c3aed, #2563eb); }
        
        .kpi-card .kpi-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;
        }
        .kpi-card .kpi-label {
            font-size: 14px;
            color: #64748b;
            font-weight: 500;
        }
        .kpi-card .kpi-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        .kpi-card.revenue .kpi-icon {
            background: rgba(37, 99, 235, 0.1);
            color: #2563eb;
        }
        .kpi-card.expenses .kpi-icon {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }
        .kpi-card.profit .kpi-icon {
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }
        .kpi-card.balance .kpi-icon {
            background: rgba(124, 58, 237, 0.1);
            color: #7c3aed;
        }
        .kpi-card .kpi-value {
            font-size: 28px;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 8px;
        }
        .kpi-card .kpi-change {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            font-weight: 500;
            padding: 4px 12px;
            border-radius: 20px;
        }
        .kpi-card .kpi-change.positive {
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }
        .kpi-card .kpi-change.negative {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }
        
        /* ============================================
           CATEGORY EXPANDABLE SECTIONS
           ============================================ */
        .category-expandable {
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            margin-bottom: 8px;
            background: white;
        }
        .category-expandable:hover {
            border-color: #2563eb;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .category-header {
            padding: 14px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .category-toggle {
            transition: transform 0.3s;
            display: inline-block;
            margin-right: 10px;
            font-size: 12px;
            color: #94a3b8;
        }
        .category-toggle.open { transform: rotate(90deg); }
        .category-sub-content {
            display: none;
            padding: 0 20px 16px 20px;
            border-top: 1px solid #e2e8f0;
        }
        .category-sub-content.show { display: block; }
        
        .sub-category-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f1f5f9;
        }
        .sub-category-item:last-child { border-bottom: none; }
        .sub-category-item .sub-name {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .sub-category-item .sub-name .sub-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        .sub-category-item .sub-name .sub-icon.blue { background: rgba(37, 99, 235, 0.1); }
        .sub-category-item .sub-name .sub-icon.green { background: rgba(16, 185, 129, 0.1); }
        .sub-category-item .sub-name .sub-icon.orange { background: rgba(245, 158, 11, 0.1); }
        .sub-category-item .sub-name .sub-icon.red { background: rgba(239, 68, 68, 0.1); }
        .sub-category-item .sub-name .sub-icon.purple { background: rgba(124, 58, 237, 0.1); }
        
        .sub-category-item .sub-amount {
            font-weight: 600;
            font-size: 14px;
        }
        .sub-category-item .sub-amount.text-danger { color: #ef4444; }
        .sub-category-item .sub-amount.text-success { color: #10b981; }
        
        .detail-badge {
            font-size: 10px;
            padding: 2px 10px;
            border-radius: 12px;
            background: #f1f5f9;
            color: #64748b;
        }
        
        /* Progress bar in categories */
        .category-progress {
            height: 4px;
            border-radius: 4px;
            background: #f1f5f9;
            margin-top: 8px;
            overflow: hidden;
        }
        .category-progress .progress-bar {
            height: 100%;
            border-radius: 4px;
            transition: width 1s ease;
        }
        
        /* Detail Modal */
        .detail-modal .modal-body { max-height: 70vh; overflow-y: auto; }
        .detail-transaction {
            padding: 8px 0;
            border-bottom: 1px solid #f1f5f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .detail-transaction:last-child { border-bottom: none; }
        
        /* ============================================
           CHARTS & ACCOUNT CARDS
           ============================================ */
        .chart-grid-modern {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            margin-bottom: 24px;
        }
        .chart-card {
            background: white;
            border-radius: 16px;
            padding: 24px;
            border: 1px solid #e2e8f0;
        }
        .chart-card .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .chart-card .card-title {
            font-weight: 600;
            color: #1e293b;
            font-size: 16px;
        }
        .chart-card .card-action {
            font-size: 13px;
            color: #2563eb;
            text-decoration: none;
            font-weight: 500;
        }
        .chart-card .card-action:hover { text-decoration: underline; }
        
        .account-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
        }
        .account-card {
            background: #f8fafc;
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #e2e8f0;
            transition: all 0.3s;
        }
        .account-card:hover {
            border-color: #2563eb;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .account-card .account-name {
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 4px;
        }
        .account-card .account-balance {
            font-size: 20px;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 4px;
        }
        .account-card .account-currency {
            font-size: 13px;
            color: #64748b;
        }
        .account-card .account-last {
            font-size: 12px;
            color: #94a3b8;
            margin-top: 8px;
        }
        
        /* ============================================
           TABLES
           ============================================ */
        .table { margin-bottom: 0; }
        .table th {
            font-weight: 600;
            color: #64748b;
            border-bottom: 2px solid #e2e8f0;
            padding: 12px 8px;
            font-size: 13px;
        }
        .table td {
            padding: 12px 8px;
            vertical-align: middle;
        }
        .badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-weight: 500;
            font-size: 12px;
        }
        .badge.bg-success { background: #d1fae5 !important; color: #065f46; }
        .badge.bg-danger { background: #fee2e2 !important; color: #991b1b; }
        .badge.bg-warning { background: #fef3c7 !important; color: #92400e; }
        .badge.bg-info { background: #dbeafe !important; color: #1e40af; }
        
        .text-success { color: #10b981 !important; }
        .text-danger { color: #ef4444 !important; }
        .text-info { color: #06b6d4 !important; }
        
        /* Pagination */
        .pagination { margin-bottom: 0; }
        .pagination .page-link {
            border: none;
            color: #64748b;
            border-radius: 8px;
            padding: 8px 14px;
            margin: 0 2px;
        }
        .pagination .page-link:hover {
            background: #f1f5f9;
            color: #1e293b;
        }
        .pagination .page-item.active .page-link {
            background: #2563eb;
            color: white;
        }
        .pagination .page-item.disabled .page-link {
            color: #94a3b8;
            background: transparent;
        }
        
        /* ============================================
           EXPAND ALL BUTTON
           ============================================ */
        .expand-all-btn {
            cursor: pointer;
            padding: 4px 16px;
            border-radius: 20px;
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            font-size: 12px;
            transition: all 0.3s;
            color: #64748b;
        }
        .expand-all-btn:hover {
            background: #2563eb;
            color: white;
            border-color: #2563eb;
        }
        
        /* ============================================
           RESPONSIVE
           ============================================ */
        @media (max-width: 992px) {
            .sidebar {
                transform: translateX(-100%);
            }
            .sidebar.show {
                transform: translateX(0);
                box-shadow: 0 10px 40px rgba(0,0,0,0.15);
            }
            .main-content { margin-left: 0; }
            .chart-grid-modern { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            .kpi-grid { grid-template-columns: 1fr 1fr; }
            .top-nav { padding: 0 16px; }
            .top-nav .search-box input { width: 160px; }
            .top-nav .search-box input:focus { width: 200px; }
            .dashboard-content { padding: 16px; }
            .quick-actions-modern { flex-direction: column; }
            .quick-actions-modern .btn-modern { width: 100%; justify-content: center; }
        }
        @media (max-width: 576px) {
            .kpi-grid { grid-template-columns: 1fr; }
            .account-cards { grid-template-columns: 1fr; }
            .user-menu .user-info { display: none; }
        }
        
        /* Sidebar Toggle Button */
        #sidebarToggle {
            background: none;
            border: none;
            font-size: 20px;
            color: #64748b;
            padding: 0;
            text-decoration: none;
        }
        #sidebarToggle:hover { color: #2563eb; }
        
        .sidebar::-webkit-scrollbar { width: 4px; }
        .sidebar::-webkit-scrollbar-track { background: transparent; }
        .sidebar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        .sidebar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Responsive */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.show {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .chart-grid-modern {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .kpi-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .top-nav .search-box input {
        width: 180px;
    }
    
    .top-nav .search-box input:focus {
        width: 220px;
    }
    
    .dashboard-content {
        padding: 16px;
    }
}

@media (max-width: 576px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .auth-card {
        padding: 32px 24px;
    }
}

/* ===== HCM GLOBAL DESIGN UPGRADE: Executive Accounting UI ===== */
.hcm-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid #e9edf3;border-radius:14px;padding:14px;margin:18px 0 22px}.hcm-toolbar>div{min-width:150px}.hcm-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.hcm-summary-card{background:#fff;border:1px solid #e9edf3;border-radius:16px;padding:18px;box-shadow:0 4px 16px rgba(15,23,42,.04)}.hcm-summary-label{font-size:.83rem;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.hcm-summary-value{font-size:1.55rem;font-weight:800;color:#172033;margin:7px 0}.hcm-summary-note{font-size:.82rem;color:#7b8799}.hcm-two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.hcm-panel{background:#fff;border:1px solid #e9edf3;border-radius:16px;padding:20px;box-shadow:0 4px 16px rgba(15,23,42,.04)}.hcm-panel-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}.hcm-panel-head h3{font-size:1.05rem;font-weight:800;margin:0 0 4px}.hcm-panel-head p{margin:0;color:#7b8799;font-size:.86rem}.hcm-panel-head a{text-decoration:none;font-size:.85rem;font-weight:700}.money-split,.advance-breakdown,.metric-list,.record-totals{display:grid;gap:10px}.money-split>div,.advance-breakdown>div,.metric-list>div,.record-totals>div{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#f8fafc;border-radius:12px;padding:13px 14px}.money-split strong,.advance-breakdown strong,.metric-list strong,.record-totals strong{color:#172033}.money-split small{display:block;color:#8a94a6;font-size:.72rem}.advance-breakdown .total,.metric-list .total{border-top:2px solid #e6ebf2;background:#f1f5f9}.hcm-accordion .accordion-item{border:1px solid #e9edf3!important;border-radius:12px!important;overflow:hidden;margin-bottom:10px}.hcm-accordion .accordion-button{display:flex;justify-content:space-between;gap:12px;font-weight:700}.hcm-accordion .accordion-button strong{margin-left:auto;margin-right:12px}.chip-grid{display:flex;gap:10px;flex-wrap:wrap}.chip-grid span{background:#f1f5f9;border:1px solid #e6ebf2;border-radius:999px;padding:9px 13px;font-size:.85rem}.alert-list{display:grid;gap:10px}.alert-row{display:flex;gap:12px;padding:12px;border-radius:12px;background:#f8fafc}.alert-row i{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#fff}.alert-row div{display:grid}.alert-row small{color:#7b8799}.alert-row.danger{border-left:3px solid #ef4444}.alert-row.warning{border-left:3px solid #f59e0b}.alert-row.info{border-left:3px solid #3b82f6}.hcm-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.hcm-tabs button{border:1px solid #e2e8f0;background:#fff;border-radius:999px;padding:8px 12px;font-size:.82rem}.hcm-tabs button.active{background:#172033;color:#fff;border-color:#172033}.timeline-simple{display:grid;gap:12px}.timeline-simple>div{display:flex;justify-content:space-between;gap:10px;border-left:3px solid #dbe4ef;padding:8px 0 8px 14px}.timeline-simple span{color:#7b8799;font-size:.85rem}.category-tree{display:grid;gap:10px}.category-tree details{border:1px solid #e7ebf0;border-radius:12px;overflow:hidden}.category-tree summary{cursor:pointer;padding:13px 15px;font-weight:800;background:#f8fafc}.category-tree summary span{float:right;color:#8a94a6;font-size:.78rem;font-weight:600}.category-tree details div{padding:9px 18px;border-top:1px solid #f0f2f5;color:#536174}.report-filters{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.report-card{background:#fff;border:1px solid #e9edf3;border-radius:16px;padding:20px}.report-card>i{font-size:1.35rem;margin-bottom:14px}.report-card h4{font-size:1rem;font-weight:800}.report-card p{color:#7b8799;font-size:.85rem;min-height:42px}.pnl-result{display:grid;grid-template-columns:1fr auto;align-items:center}.pnl-result>span{font-size:1.1rem;font-weight:800}.pnl-result>strong{font-size:1.8rem}.pnl-result>small{grid-column:1/-1;color:#7b8799;margin-top:4px}
@media(max-width:1100px){.hcm-summary-grid{grid-template-columns:repeat(2,1fr)}.report-grid{grid-template-columns:repeat(2,1fr)}.report-filters{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.hcm-summary-grid,.hcm-two-col,.report-grid,.report-filters{grid-template-columns:1fr}.hcm-toolbar>*{width:100%}.hcm-toolbar>div{min-width:0}.hcm-panel{padding:15px}.hcm-panel-head{flex-direction:column}.dashboard-content{padding-left:14px!important;padding-right:14px!important}}

/* ===== HCM GLOBAL DASHBOARD REFINEMENT ===== */
.hcm-dashboard-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}.hcm-dashboard-heading h1{margin-bottom:4px}.hcm-dashboard-heading p{margin-bottom:0}.hcm-quick-actions{margin:0}.hcm-toolbar-compact{padding:10px 12px;margin:16px 0 18px}.hcm-toolbar-compact .form-select{min-width:145px}.hcm-status-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#e9edf3;border:1px solid #e9edf3;border-radius:14px;overflow:hidden;margin:16px 0 20px}.hcm-status-strip a{display:grid;gap:2px;background:#fff;padding:13px 15px;text-decoration:none;color:inherit;transition:.2s}.hcm-status-strip a:hover{background:#f8fafc}.hcm-status-strip span{font-size:.76rem;font-weight:700;color:#64748b}.hcm-status-strip strong{font-size:1.05rem;color:#172033}.hcm-status-strip small{font-size:.72rem;color:#94a3b8}.hcm-chart-grid{margin-bottom:20px}.hcm-chart-grid .chart-card{min-height:360px}.hcm-chart-wrap{height:280px;position:relative}.hcm-chart-wrap-donut{max-width:420px;margin:auto}.hcm-card-subtitle{display:block;margin-top:3px;color:#94a3b8;font-size:.76rem;font-weight:400}.hcm-dashboard-detail-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.hcm-compact-panel{margin:0!important}.hcm-accordion-compact .accordion-item{margin-bottom:7px}.hcm-accordion-compact .accordion-button{padding:12px 14px;font-size:.88rem}.hcm-accordion-compact .accordion-body{padding:8px 14px 12px}.hcm-detail-list{display:grid}.hcm-detail-list>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #eef2f6;font-size:.82rem}.hcm-detail-list>div:last-child{border-bottom:0}.hcm-detail-list span{color:#64748b}.hcm-detail-list strong{color:#172033}.hcm-collection-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.hcm-collection-summary>div{display:grid;gap:3px;background:#f8fafc;border-radius:10px;padding:11px}.hcm-collection-summary .primary{grid-column:1/-1;background:#f1f5f9}.hcm-collection-summary span{font-size:.74rem;color:#64748b}.hcm-collection-summary strong{font-size:.96rem;color:#172033}.hcm-account-cards-compact{grid-template-columns:repeat(3,1fr);gap:10px}.hcm-account-cards-compact .account-card{padding:14px}.hcm-account-cards-compact .account-balance{font-size:1.1rem}.hcm-alert-list-compact .alert-row{padding:10px}.hcm-alert-list-compact .alert-row strong{font-size:.82rem}.hcm-alert-list-compact .alert-row small{font-size:.72rem}
@media(max-width:1100px){.hcm-status-strip{grid-template-columns:repeat(2,1fr)}.hcm-dashboard-detail-grid{grid-template-columns:1fr}.hcm-account-cards-compact{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.hcm-dashboard-heading{align-items:flex-start}.hcm-quick-actions{width:100%}.hcm-status-strip,.hcm-account-cards-compact,.hcm-collection-summary{grid-template-columns:1fr}.hcm-collection-summary .primary{grid-column:auto}.hcm-chart-grid .chart-card{min-height:330px}.hcm-chart-wrap{height:250px}}

/* ===== HCM GLOBAL MOBILE RESPONSIVE REFINEMENT ===== */
html, body { max-width: 100%; overflow-x: hidden; }
.main-content, .dashboard-content, .chart-card, .hcm-panel, .kpi-card { min-width: 0; }
.table-responsive { -webkit-overflow-scrolling: touch; }
.table-responsive .table { min-width: 720px; }

/* Tablet and smaller */
@media (max-width: 991.98px) {
    .sidebar { z-index: 1055; }
    body.sidebar-open { overflow: hidden; }
    body.sidebar-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .38);
        z-index: 1045;
    }
    .top-nav { padding: 0 20px; }
    .dashboard-content { padding: 20px; }
    .hcm-dashboard-heading { align-items: flex-start; }
    .hcm-quick-actions { width: 100%; }
    .hcm-quick-actions .btn-modern { flex: 1 1 180px; justify-content: center; }
    .hcm-toolbar-compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hcm-toolbar-compact > * { width: 100%; min-width: 0 !important; margin-left: 0 !important; }
    .hcm-toolbar-compact .btn { display: flex; align-items: center; justify-content: center; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .hcm-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hcm-chart-grid, .hcm-dashboard-detail-grid { grid-template-columns: 1fr; }
    .hcm-chart-grid .chart-card { min-height: 340px; }
    .hcm-chart-wrap { height: 260px; }
    .hcm-account-cards-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phones */
@media (max-width: 767.98px) {
    .top-nav { height: 64px; padding: 0 14px; }
    .nav-actions { gap: 8px; }
    .nav-actions .notification-btn { width: 38px; height: 38px; }
    .user-menu { padding: 4px; }
    .user-menu .avatar { width: 38px; height: 38px; }
    .dashboard-content { padding: 14px !important; }
    .dashboard-greeting { margin-bottom: 12px; }
    .dashboard-greeting h1 { font-size: 24px; line-height: 1.2; }
    .dashboard-greeting p { font-size: 14px; }
    .hcm-quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .hcm-quick-actions .btn-modern { width: 100%; min-width: 0; padding: 9px 7px; font-size: 12px; white-space: nowrap; }
    .hcm-quick-actions .btn-modern i { margin-right: 4px; }
    .hcm-toolbar-compact { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
    .hcm-toolbar-compact .form-select, .hcm-toolbar-compact .btn { font-size: 13px; min-height: 40px; }
    .hcm-toolbar-compact > :last-child { grid-column: 1 / -1; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kpi-card { padding: 14px; }
    .kpi-card .kpi-label { font-size: 11px; }
    .kpi-card .kpi-icon { width: 36px; height: 36px; font-size: 15px; }
    .kpi-card .kpi-value { font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
    .kpi-card .kpi-change { font-size: 11px; }
    .hcm-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 12px; }
    .hcm-status-strip a { padding: 11px; min-width: 0; }
    .hcm-status-strip strong { font-size: .95rem; }
    .hcm-status-strip small { line-height: 1.25; }
    .chart-card { border-radius: 14px; }
    .chart-card .card-header { padding: 14px; gap: 8px; align-items: flex-start; }
    .chart-card .card-title { font-size: .95rem; }
    .chart-card .card-action { font-size: .76rem; white-space: nowrap; }
    .hcm-chart-grid .chart-card { min-height: 315px; }
    .hcm-chart-wrap { height: 235px; padding: 0 4px 4px; }
    .hcm-chart-wrap-donut { max-width: 320px; }
    .hcm-compact-panel { overflow: hidden; }
    .hcm-accordion-compact .accordion-button { padding: 11px 12px; font-size: .82rem; align-items: center; }
    .hcm-accordion .accordion-button strong { margin-right: 8px; font-size: .78rem; white-space: nowrap; }
    .hcm-detail-list > div { font-size: .78rem; }
    .hcm-detail-list > div span { min-width: 0; overflow-wrap: anywhere; }
    .hcm-detail-list > div strong { white-space: nowrap; }
    .hcm-collection-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hcm-collection-summary .primary { grid-column: 1 / -1; }
    .hcm-account-cards-compact { grid-template-columns: 1fr; }
    .alert-row { min-width: 0; }
    .alert-row div { min-width: 0; }
    .alert-row strong, .alert-row small { overflow-wrap: anywhere; }
    .table-responsive { margin-left: -2px; margin-right: -2px; border-radius: 0 0 12px 12px; }
    .table-responsive .table { min-width: 680px; margin-bottom: 0; }
    .table-responsive .table th, .table-responsive .table td { white-space: nowrap; font-size: 12px; padding: 10px; }
}

/* Small phones */
@media (max-width: 575.98px) {
    .dashboard-content { padding: 12px !important; }
    .dashboard-greeting h1 { font-size: 21px; }
    .hcm-quick-actions { grid-template-columns: 1fr; }
    .hcm-quick-actions .btn-modern { justify-content: center; font-size: 13px; }
    .hcm-toolbar-compact { grid-template-columns: 1fr; }
    .hcm-toolbar-compact > :last-child { grid-column: auto; }
    .kpi-grid { grid-template-columns: 1fr; }
    .hcm-status-strip { grid-template-columns: 1fr 1fr; }
    .hcm-chart-grid .chart-card { min-height: 300px; }
    .hcm-chart-wrap { height: 220px; }
    .hcm-chart-wrap-donut { max-width: 270px; }
    .chart-card .card-header { flex-wrap: wrap; }
    .chart-card .card-action { margin-left: 0; }
    .hcm-accordion-compact .accordion-button { flex-wrap: wrap; padding-right: 38px; }
    .hcm-accordion .accordion-button strong { margin-left: 0; margin-right: 0; }
}

@media (max-width: 390px) {
    .hcm-status-strip { grid-template-columns: 1fr; }
    .top-nav { padding: 0 10px; }
    .dashboard-greeting h1 { font-size: 20px; }
}


/* =========================================================
   HCM GLOBAL BRAND REFINEMENT — red/white/charcoal identity
   ========================================================= */
:root {
    --primary-color: #c83a2d;
    --primary-light: #d84b3e;
    --primary-dark: #a92f25;
    --secondary-color: #2f3338;
    --text-primary: #161b22;
    --text-secondary: #68707d;
    --bg-light: #f7f7f8;
    --border-color: #e5e7eb;
}
.btn-primary, .btn-modern-primary { background: linear-gradient(135deg,#d82222,#c5161d)!important; border-color:#c5161d!important; color:#fff!important; }
.btn-outline-primary { color:#c83a2d!important; border-color:#c83a2d!important; }
.btn-outline-primary:hover { background:#c83a2d!important; color:#fff!important; }
a, .card-action, .forgot-link, .text-primary { color:#c83a2d; }
.sidebar { background: #fff; border-right:1px solid #ececef; }
.sidebar-brand { min-height:92px; padding:14px 18px; background:#fff; border-bottom:1px solid #ececef; }
.sidebar-logo { width:178px; max-width:100%; height:62px; object-fit:contain; object-position:left center; }
.sidebar .nav-link { color:#454b54; }
.sidebar .nav-link i { color:#7a8088; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { background:rgba(200,58,45,.09); color:#b72e24; }
.sidebar .nav-link:hover i, .sidebar .nav-link.active i { color:#c83a2d; }
.nav-section { color:#8b9098!important; }
.avatar { background:linear-gradient(135deg,#d82222,#c5161d)!important; }
.notification-btn .badge { background:#c83a2d!important; }
.auth-page { background: radial-gradient(circle at 50% 15%, rgba(216,34,34,.07), transparent 34%), #fbf9f9!important; }
.auth-page::before,.auth-page::after { background:rgba(200,58,45,.035)!important; }
.auth-card { border:1px solid #e7e7e9; box-shadow:0 18px 45px rgba(28,31,35,.12); }
.company-logo img { width:210px; max-width:80%; height:92px; object-fit:contain; }
.auth-form .input-group:focus-within { border-color:#c83a2d; box-shadow:0 0 0 4px rgba(200,58,45,.10); }
.form-check-input:checked { background-color:#c83a2d; border-color:#c83a2d; }
.kpi-card.revenue .kpi-icon, .kpi-card.balance .kpi-icon { color:#c83a2d!important; background:rgba(200,58,45,.10)!important; }
.hcm-summary-card::before { background:#c83a2d!important; }

/* Global page loading overlay */
.hcm-page-loader { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.97); opacity:1; visibility:visible; transition:opacity .25s ease,visibility .25s ease; }
.hcm-page-loader.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.hcm-loader-card { display:flex; flex-direction:column; align-items:center; gap:16px; color:#616872; font-weight:600; }
.hcm-loader-card img { width:190px; height:90px; object-fit:contain; }
.hcm-spinner { width:38px; height:38px; border:3px solid #ececef; border-top-color:#c83a2d; border-radius:50%; animation:hcmSpin .75s linear infinite; }
@keyframes hcmSpin { to { transform:rotate(360deg); } }

/* Post-auth welcome splash */
.hcm-welcome-splash { position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; background:#fff; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease,visibility .3s ease; }
.hcm-welcome-splash.show { opacity:1; visibility:visible; pointer-events:auto; }
.hcm-splash-content { text-align:center; padding:28px; animation:hcmSplashIn .45s ease both; }
.hcm-splash-content img { width:240px; max-width:75vw; height:120px; object-fit:contain; margin-bottom:18px; }
.hcm-splash-content h1 { color:#15191f; font-size:clamp(28px,5vw,46px); font-weight:800; margin-bottom:8px; }
.hcm-splash-content p { color:#707782; font-size:16px; }
@keyframes hcmSplashIn { from{opacity:0;transform:translateY(12px) scale(.98)} to{opacity:1;transform:none} }
@media(max-width:991.98px){ .sidebar-brand{min-height:82px}.sidebar-logo{width:155px;height:54px} }

/* =========================================================
   HCM GLOBAL DASHBOARD v1.4 — polished executive layout
   ========================================================= */
.sidebar-brand{
    background:linear-gradient(135deg,#d71f26 0%,#bd161c 100%)!important;
    min-height:96px!important;
    padding:16px 18px!important;
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    border-bottom:0!important;
    box-shadow:0 6px 18px rgba(190,22,28,.18);
}
.sidebar-brand .sidebar-logo{
    width:102px!important;
    height:60px!important;
    object-fit:contain!important;
    object-position:left center!important;
    background:#fff;
    border-radius:10px;
    padding:5px 7px;
}
.sidebar-product-name{
    color:#fff!important;
    font-size:19px!important;
    font-weight:800!important;
    letter-spacing:-.25px!important;
    white-space:nowrap;
}
.hcmv2-dashboard{padding:24px 28px 34px;background:#f7f8fa;}
.hcmv2-dashboard,.hcmv2-dashboard *{box-sizing:border-box;}
.hcmv2-top-nav{box-shadow:0 1px 0 rgba(15,23,42,.02);}
.hcmv2-heading-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px;}
.hcmv2-heading-row h1{font-size:26px;font-weight:800;color:#152033;margin:0 0 4px;letter-spacing:-.6px;}
.hcmv2-heading-row h1 span{color:#d71f26;}
.hcmv2-heading-row p{margin:0;color:#7b8492;font-size:14px;}
.hcmv2-heading-actions{display:flex;align-items:center;gap:10px;}
.hcmv2-period-select{width:210px;border:1px solid #e5e9ef;border-radius:10px;min-height:42px;background:#fff;font-size:13px;}
.hcmv2-quick-btn{min-height:42px;border-radius:10px!important;padding:0 18px!important;font-weight:700!important;box-shadow:0 7px 16px rgba(199,22,29,.16);}
.hcmv2-filter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 18px;}
.hcmv2-filter-row .form-select{width:auto;min-width:150px;border-radius:9px;border-color:#e4e8ee;font-size:13px;}
.hcmv2-filter-row .btn{border-radius:9px;font-size:13px;}
.hcmv2-report-link{margin-left:auto;border:1px solid #e4e8ee!important;color:#4b5563!important;background:#fff!important;}
.hcmv2-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:14px;}
.hcmv2-kpi-card{display:flex;align-items:flex-start;gap:11px;min-width:0;background:#fff;border:1px solid #e8ebf0;border-radius:14px;padding:15px 14px;text-decoration:none!important;color:inherit!important;box-shadow:0 2px 10px rgba(15,23,42,.025);transition:.18s ease;}
.hcmv2-kpi-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,23,42,.07);border-color:#dde2e8;}
.hcmv2-kpi-icon{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;font-size:15px;}
.hcmv2-kpi-icon.balance{background:#fee2e2;color:#d71f26}.hcmv2-kpi-icon.income{background:#dcfce7;color:#15803d}.hcmv2-kpi-icon.expense{background:#fee2e2;color:#dc2626}.hcmv2-kpi-icon.receivable{background:#dbeafe;color:#2563eb}.hcmv2-kpi-icon.payable{background:#ffedd5;color:#ea580c}.hcmv2-kpi-icon.profit{background:#f3e8ff;color:#9333ea}
.hcmv2-kpi-card>div:last-child{min-width:0;display:grid;gap:3px;}
.hcmv2-kpi-card span{font-size:11px;color:#6b7280;font-weight:700;}
.hcmv2-kpi-card strong{font-size:16px;color:#152033;font-weight:800;line-height:1.2;overflow-wrap:anywhere;}
.hcmv2-kpi-card small{font-size:10px;color:#8b95a5;line-height:1.3;}.hcmv2-kpi-card small.positive{color:#169449}.hcmv2-kpi-card small.negative{color:#d71f26}
.hcmv2-main-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr) minmax(0,1fr);gap:12px;margin-bottom:12px;align-items:stretch;}
.hcmv2-card{background:#fff;border:1px solid #e7eaf0;border-radius:15px;box-shadow:0 2px 10px rgba(15,23,42,.025);min-width:0;overflow:hidden;}
.hcmv2-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 18px 12px;border-bottom:1px solid #f0f2f5;}
.hcmv2-card-head h2{font-size:15px;font-weight:800;color:#172033;margin:0 0 2px;}
.hcmv2-card-head p{font-size:11px;color:#9299a6;margin:0;}
.hcmv2-card-head a{font-size:11px;font-weight:700;color:#d71f26;text-decoration:none;white-space:nowrap;padding-top:2px;}
.hcmv2-card-head .form-select{width:auto;min-width:105px;border-radius:8px;border-color:#e5e9ef;font-size:11px;}
.hcmv2-cash-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:13px 18px 4px;}
.hcmv2-cash-summary div{display:grid;gap:3px;}.hcmv2-cash-summary span{font-size:10px;color:#7b8492;font-weight:700}.hcmv2-cash-summary strong{font-size:13px;color:#172033}.hcmv2-cash-summary .positive{color:#169449}
.hcmv2-chart-box{height:220px;padding:8px 12px 14px;position:relative;}
.hcmv2-expense-layout{display:grid;grid-template-columns:minmax(150px,.78fr) minmax(0,1.22fr);gap:12px;align-items:center;padding:15px 16px 16px;}
.hcmv2-donut-box{height:185px;position:relative;min-width:0;}.hcmv2-donut-center{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;text-align:center;pointer-events:none}.hcmv2-donut-center span{font-size:10px;color:#8a93a2}.hcmv2-donut-center strong{font-size:12px;color:#172033}
.hcmv2-legend-list{display:grid;gap:4px;}.hcmv2-legend-list button{border:0;background:transparent;padding:6px 2px;display:grid;grid-template-columns:9px minmax(0,1fr) auto;align-items:center;gap:8px;text-align:left;border-bottom:1px solid #f3f4f6;}.hcmv2-legend-list button:last-child{border-bottom:0}.hcmv2-legend-list .dot{width:8px;height:8px;border-radius:50%;}.dot.red{background:#dc2626}.dot.orange{background:#f59e0b}.dot.blue{background:#3b82f6}.dot.green{background:#10b981}.dot.purple{background:#9333ea}.hcmv2-legend-list span{font-size:10px;font-weight:700;color:#4b5563;display:grid}.hcmv2-legend-list small{font-size:9px;color:#9aa1ac;font-weight:500}.hcmv2-legend-list strong{font-size:9px;color:#68707d;}
.hcmv2-detail-collapse{border-top:1px solid #f0f2f5;padding:8px 16px 12px}.hcmv2-detail-collapse>div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:10px;color:#68707d}.hcmv2-detail-collapse strong{color:#172033}
.hcmv2-table{font-size:11px;--bs-table-bg:transparent;}.hcmv2-table thead th{color:#77808e;font-size:10px;font-weight:800;border-bottom:1px solid #e5e9ef;padding:10px 9px;white-space:nowrap;}.hcmv2-table tbody td{padding:10px 9px;vertical-align:middle;border-bottom:1px solid #eef0f3;color:#2d3748;}.hcmv2-table tbody tr:last-child td{border-bottom:0}.hcmv2-table small{color:#9299a6}.hcmv2-pill{display:inline-block;margin-top:3px;border-radius:999px;padding:2px 7px;font-size:8px;font-weight:700}.hcmv2-pill.income{background:#dcfce7;color:#16803c}.hcmv2-pill.expense{background:#fee2e2;color:#c81e1e}.hcmv2-pill.advance{background:#fef3c7;color:#b45309}.hcmv2-pill.transfer{background:#ffedd5;color:#c2410c}
.hcmv2-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}.hcmv2-summary-table tbody td{padding-top:9px;padding-bottom:9px;}
.hcmv2-secondary-grid{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:12px;align-items:start;}.hcmv2-secondary-grid>.hcmv2-card{min-height:100%;}
.hcmv2-metric-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 16px 4px;}.hcmv2-metric-list>div{background:#f8f9fb;border:1px solid #eef0f3;border-radius:10px;padding:10px;display:grid;gap:3px}.hcmv2-metric-list span{font-size:9px;color:#7b8492}.hcmv2-metric-list strong{font-size:12px;color:#172033}
.hcmv2-mini-accordion{padding:0 16px 14px}.hcmv2-mini-accordion .accordion-item{border:1px solid #eceff3;border-radius:10px!important;overflow:hidden;margin-top:7px}.hcmv2-mini-accordion .accordion-button{font-size:10px;font-weight:700;padding:10px 12px}.hcmv2-mini-accordion .accordion-button strong{margin-left:auto;margin-right:8px}.hcmv2-mini-accordion .accordion-body{padding:7px 12px}.hcmv2-detail-row{display:flex;justify-content:space-between;gap:8px;padding:5px 0;font-size:10px;border-bottom:1px solid #f0f2f4}.hcmv2-detail-row:last-child{border-bottom:0}
.hcmv2-account-list{display:grid;gap:8px;padding:14px 16px 4px}.hcmv2-account-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px;border:1px solid #edf0f3;border-radius:10px}.hcmv2-account-list span{font-size:10px;color:#4b5563;font-weight:700}.hcmv2-account-list span i{color:#d71f26;width:18px}.hcmv2-account-list strong{font-size:11px;color:#172033}.hcmv2-account-list small{grid-column:1/-1;font-size:9px;color:#969da8}.hcmv2-mini-chart{height:150px;padding:8px 16px 16px}
.hcmv2-alerts{display:grid;gap:8px;padding:14px 16px 16px}.hcmv2-alerts a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;align-items:start;text-decoration:none;padding:10px;border-radius:10px;background:#fafbfc;border-left:3px solid #e5e7eb}.hcmv2-alerts a>i{width:30px;height:30px;border-radius:8px;background:#fff;display:grid;place-items:center;color:#374151}.hcmv2-alerts strong{font-size:10px;color:#263041;display:block;line-height:1.35}.hcmv2-alerts span{font-size:9px;color:#8b93a0;display:block;margin-top:2px}.hcmv2-alerts .danger{border-left-color:#ef4444}.hcmv2-alerts .warning{border-left-color:#f59e0b}.hcmv2-alerts .info{border-left-color:#3b82f6}

@media(max-width:1380px){.hcmv2-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.hcmv2-main-grid{grid-template-columns:1fr 1fr}.hcmv2-recent-card{grid-column:1/-1}.hcmv2-secondary-grid{grid-template-columns:1fr 1fr}.hcmv2-secondary-grid>section:last-child{grid-column:1/-1}.hcmv2-alerts{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1100px){.hcmv2-dashboard{padding:20px}.hcmv2-main-grid,.hcmv2-bottom-grid,.hcmv2-secondary-grid{grid-template-columns:1fr}.hcmv2-recent-card,.hcmv2-secondary-grid>section:last-child{grid-column:auto}.hcmv2-alerts{grid-template-columns:1fr}.hcmv2-expense-layout{grid-template-columns:220px 1fr}.hcmv2-report-link{margin-left:0}}
@media(max-width:991.98px){.sidebar-brand{min-height:82px!important;padding:12px 14px!important}.sidebar-brand .sidebar-logo{width:88px!important;height:54px!important}.sidebar-product-name{font-size:17px!important}.hcmv2-dashboard{padding:18px 16px 28px}.hcmv2-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hcmv2-heading-row{align-items:flex-start}.hcmv2-heading-actions{flex-wrap:wrap;justify-content:flex-end}.hcmv2-period-select{width:190px}}
@media(max-width:767px){.hcmv2-heading-row{flex-direction:column}.hcmv2-heading-actions{width:100%;justify-content:stretch}.hcmv2-period-select,.hcmv2-heading-actions .dropdown,.hcmv2-quick-btn{width:100%}.hcmv2-filter-row>*{width:100%!important;min-width:0!important}.hcmv2-kpi-grid{grid-template-columns:1fr 1fr}.hcmv2-expense-layout{grid-template-columns:1fr}.hcmv2-donut-box{height:180px}.hcmv2-cash-summary{grid-template-columns:1fr}.hcmv2-metric-list{grid-template-columns:1fr}.hcmv2-card-head{padding:14px}.hcmv2-chart-box{height:210px}}
@media(max-width:480px){.hcmv2-dashboard{padding:14px 12px 24px}.hcmv2-heading-row h1{font-size:22px}.hcmv2-kpi-grid{grid-template-columns:1fr}.hcmv2-kpi-card{padding:13px}.hcmv2-top-nav{padding-left:10px!important;padding-right:10px!important}.hcmv2-card{border-radius:12px}.hcmv2-table{font-size:10px}}


/* =========================================================
   HCM GLOBAL v1.5 — layout polish and compact registration
   ========================================================= */
/* Keep the brand flush with the viewport and visible while the sidebar scrolls. */
.sidebar{
    top:0!important;
    padding-top:0!important;
}
.sidebar-brand{
    position:sticky!important;
    top:0!important;
    z-index:6!important;
    margin-top:0!important;
}

/* Keep the application navigation attached to the top on every page. */
.top-nav{
    position:sticky!important;
    top:0!important;
    z-index:1040!important;
    margin-top:0!important;
}

/* Registration has one more field than login; compact only this page. */
.register-page{
    overflow-y:auto!important;
    align-items:flex-start!important;
    padding:14px 0!important;
}
.register-page .auth-container{
    max-width:430px!important;
    padding:6px 16px 12px!important;
    margin:auto!important;
}
.register-page .auth-card{
    padding:24px 30px!important;
}
.register-page .company-logo{
    margin-bottom:12px!important;
}
.register-page .company-logo img{
    max-height:58px!important;
    width:auto!important;
}
.register-page .auth-header h2{
    font-size:25px!important;
    margin-bottom:3px!important;
}
.register-page .auth-header p{
    margin-bottom:14px!important;
}
.register-page .auth-form .form-group{
    margin-bottom:12px!important;
}
.register-page .auth-form label{
    margin-bottom:4px!important;
}
.register-page .auth-form .form-control{
    padding:9px 14px!important;
}
.register-page .auth-form .input-group-text{
    padding-left:14px!important;
}
.register-page .form-check{
    margin-bottom:14px!important;
}
.register-page .btn-primary{
    padding:11px!important;
}
.register-page .auth-footer{
    margin-top:14px!important;
}
.register-page .auth-footer p{
    margin-bottom:0!important;
}
@media(max-width:480px){
    .register-page{padding:8px 0!important;}
    .register-page .auth-container{padding:4px 12px 8px!important;}
    .register-page .auth-card{padding:20px 18px!important;}
    .register-page .company-logo{margin-bottom:9px!important;}
    .register-page .company-logo img{max-height:52px!important;}
    .register-page .auth-header h2{font-size:23px!important;}
    .register-page .auth-header p{font-size:13px!important;margin-bottom:10px!important;}
    .register-page .auth-form .form-group{margin-bottom:10px!important;}
}

/* Receivable/payable classification is deliberately independent of P&L categories. */
.hcm-classification-note{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin:0 0 16px;
    padding:11px 13px;
    border:1px solid #f3d5d3;
    border-left:3px solid #c83a2d;
    background:#fffafa;
    border-radius:10px;
    color:#5d6168;
    font-size:12px;
    line-height:1.45;
}
.hcm-classification-note i{color:#c83a2d;margin-top:2px;}
.hcm-unclassified-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    border-radius:999px;
    padding:4px 8px;
    background:#f3f4f6;
    color:#4b5563;
    font-size:10px;
    font-weight:700;
    white-space:nowrap;
}

/* =========================================================
   HCM GLOBAL v1.6 — persistent dashboard top navigation
   Keeps the approved dashboard nav visible while page content scrolls.
   ========================================================= */
.hcmv2-top-nav{
    position:fixed!important;
    top:0!important;
    left:var(--sidebar-width)!important;
    right:0!important;
    width:auto!important;
    z-index:1040!important;
    margin:0!important;
}

/* The fixed nav is removed from normal document flow, so reserve its height. */
.hcmv2-top-nav + .hcmv2-dashboard{
    padding-top:calc(24px + var(--navbar-height))!important;
}

@media (max-width: 992px){
    .hcmv2-top-nav{
        left:0!important;
    }

    /* Keep the mobile drawer above the fixed top navigation when opened. */
    .sidebar{
        z-index:1060!important;
    }

    .hcmv2-top-nav + .hcmv2-dashboard{
        padding-top:calc(18px + var(--navbar-height))!important;
    }
}

@media (max-width: 480px){
    .hcmv2-top-nav + .hcmv2-dashboard{
        padding-top:calc(14px + var(--navbar-height))!important;
    }
}

/* =========================================================
   HCM GLOBAL v1.7 — fixed top navigation on every Template 2 page
   ========================================================= */
.hcmv2-top-nav{
    position:fixed!important;
    top:0!important;
    left:var(--sidebar-width)!important;
    right:0!important;
    width:auto!important;
    z-index:1040!important;
    margin:0!important;
}

.main-content > .hcmv2-top-nav + .dashboard-content,
.main-content > .hcmv2-top-nav + .hcmv2-dashboard{
    padding-top:calc(24px + var(--navbar-height))!important;
}

.main-content > .hcmv2-top-nav + :not(.dashboard-content):not(.hcmv2-dashboard){
    margin-top:var(--navbar-height)!important;
}

@media (max-width: 992px){
    .hcmv2-top-nav{
        left:0!important;
    }

    .sidebar{
        z-index:1060!important;
    }

    .main-content > .hcmv2-top-nav + .dashboard-content,
    .main-content > .hcmv2-top-nav + .hcmv2-dashboard{
        padding-top:calc(18px + var(--navbar-height))!important;
    }
}

@media (max-width: 480px){
    .main-content > .hcmv2-top-nav + .dashboard-content,
    .main-content > .hcmv2-top-nav + .hcmv2-dashboard{
        padding-top:calc(14px + var(--navbar-height))!important;
    }
}



/* =========================================================
   HCM GLOBAL v1.8 — top navigation matches sidebar brand
   ========================================================= */
.hcmv2-top-nav{
    background:linear-gradient(135deg,#d71f26 0%,#bd161c 100%)!important;
    border-bottom:0!important;
    box-shadow:0 6px 18px rgba(190,22,28,.14)!important;
    color:#fff!important;
}

.hcmv2-top-nav #sidebarToggle,
.hcmv2-top-nav #sidebarToggle i{
    color:#fff!important;
}

.hcmv2-top-nav .search-box input{
    background:rgba(255,255,255,.14)!important;
    border:1px solid rgba(255,255,255,.28)!important;
    color:#fff!important;
    box-shadow:none!important;
}

.hcmv2-top-nav .search-box input::placeholder{
    color:rgba(255,255,255,.78)!important;
}

.hcmv2-top-nav .search-box input:focus{
    background:rgba(255,255,255,.20)!important;
    border-color:rgba(255,255,255,.60)!important;
    box-shadow:0 0 0 3px rgba(255,255,255,.12)!important;
}

.hcmv2-top-nav .search-box i{
    color:rgba(255,255,255,.88)!important;
}

.hcmv2-top-nav .notification-btn{
    background:rgba(255,255,255,.14)!important;
    color:#fff!important;
}

.hcmv2-top-nav .notification-btn:hover{
    background:rgba(255,255,255,.24)!important;
    color:#fff!important;
}

.hcmv2-top-nav .notification-btn .badge{
    background:#fff!important;
    color:#c5161d!important;
    border:1px solid rgba(197,22,29,.18)!important;
}

.hcmv2-top-nav .user-menu .avatar{
    background:#fff!important;
    color:#c5161d!important;
    box-shadow:0 2px 7px rgba(0,0,0,.12)!important;
}

.hcmv2-top-nav .user-name{
    color:#fff!important;
}

.hcmv2-top-nav .user-role{
    color:rgba(255,255,255,.76)!important;
}

.hcmv2-top-nav .nav-actions form .btn,
.hcmv2-top-nav .nav-actions form .btn i{
    color:#fff!important;
}

.hcmv2-top-nav .nav-actions form .btn:hover{
    background:rgba(255,255,255,.12)!important;
}

@media(max-width:767px){
    .hcmv2-top-nav{
        padding-left:12px!important;
        padding-right:12px!important;
    }
}


/* HCM GLOBAL global search */
.hcm-global-search-box{position:relative!important}
.hcm-global-search-results{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    width:min(460px,82vw);
    max-height:430px;
    overflow-y:auto;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    box-shadow:0 18px 45px rgba(15,23,42,.18);
    display:none;
    z-index:2500;
    color:#24292f;
}
.hcm-global-search-results.show{display:block}
.hcm-search-state{padding:16px;color:#6b7280;font-size:13px}
.hcm-search-result{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 13px;
    text-decoration:none;
    color:#24292f!important;
    border-bottom:1px solid #f0f2f4;
}
.hcm-search-result:last-child{border-bottom:0}
.hcm-search-result:hover{background:#f8f9fa}
.hcm-search-result-icon{
    width:34px;height:34px;border-radius:8px;
    display:grid;place-items:center;
    background:#fff0f0;color:#c5161d;
    flex:0 0 auto;
}
.hcm-search-result-copy{min-width:0;display:flex;flex-direction:column}
.hcm-search-result-copy strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcm-search-result-copy small{font-size:11px;color:#737b86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* Phase 21 v3.9.4 dashboard filters + notifications */
.dashboard-custom-range{display:flex;align-items:center;gap:8px;flex:1 1 330px}
.dashboard-custom-range .form-control{min-width:145px}
.dashboard-date-separator{font-size:12px;color:#6b7280;font-weight:600}
.hcm-notification-wrap{position:relative}
.hcm-notification-menu{width:360px;max-width:90vw;padding:0;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 18px 45px rgba(15,23,42,.18);overflow:hidden}
.hcm-notification-head{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-bottom:1px solid #edf0f2}
.hcm-notification-head strong{font-size:14px}
.hcm-notification-head span{font-size:11px;color:#6b7280}
.hcm-notification-item{display:flex!important;gap:10px;align-items:flex-start;padding:11px 14px!important;white-space:normal!important;border-bottom:1px solid #f2f3f4}
.hcm-notification-item>span:last-child{display:flex;flex-direction:column;min-width:0}
.hcm-notification-item strong{font-size:12px;color:#252a30}
.hcm-notification-item small{font-size:11px;color:#737b86;margin-top:2px}
.hcm-notification-icon{width:31px;height:31px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto}
.hcm-notification-icon.warning{background:#fff7df;color:#d97706}
.hcm-notification-icon.danger{background:#fff0f0;color:#c5161d}
.hcm-notification-icon.success{background:#eaf8ef;color:#16803c}
.hcm-notification-empty{padding:22px 15px;text-align:center;color:#6b7280;font-size:12px}
.hcm-notification-footer{text-align:center;padding:9px 12px;background:#fafafa}
.hcm-notification-footer a{font-size:12px;font-weight:600;text-decoration:none}
@media(max-width:900px){.dashboard-custom-range{flex-basis:100%}}


/* HCM GLOBAL global notifications */
.hcm-global-notification-wrap{
    position:relative;
    display:inline-flex;
    align-items:center;
}
.hcm-global-notification-panel{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    width:360px;
    max-width:90vw;
    max-height:500px;
    overflow:hidden;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    box-shadow:0 18px 45px rgba(15,23,42,.18);
    display:none;
    z-index:2600;
    color:#24292f;
}
.hcm-global-notification-panel.show{display:block}
.hcm-notification-body{max-height:360px;overflow-y:auto}
.hcm-notification-copy{display:flex;flex-direction:column;min-width:0}
.hcm-notification-item{
    display:flex!important;
    gap:10px;
    align-items:flex-start;
    padding:11px 14px!important;
    white-space:normal!important;
    border-bottom:1px solid #f2f3f4;
    color:#24292f!important;
    text-decoration:none!important;
}
.hcm-notification-item:hover{background:#f8f9fa}
.hcm-notification-copy strong{font-size:12px;color:#252a30}
.hcm-notification-copy small{font-size:11px;color:#737b86;margin-top:2px}

/* Phase 24: larger Dashboard 3 x 2 summary cards */
.dashboard-six-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px}
.dashboard-six-grid .hcm-summary-card{min-height:145px;padding:24px}
.dashboard-six-grid .hcm-summary-value{font-size:1.8rem}
@media(max-width:1100px){.dashboard-six-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:767px){.dashboard-six-grid{grid-template-columns:1fr!important}}

/* KPI layout correction: compact cards, four per row on desktop */
.hcmv2-dashboard .hcmv2-kpi-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;
    margin-bottom:16px !important;
}
.hcmv2-dashboard .hcmv2-kpi-card{
    min-height:108px !important;
    padding:14px 12px !important;
    gap:10px !important;
    align-items:center !important;
    overflow:hidden;
}
.hcmv2-dashboard .hcmv2-kpi-card > div:last-child{min-width:0;flex:1 1 auto;}
.hcmv2-dashboard .hcmv2-kpi-card > div:last-child > span{
    display:block;font-size:12px !important;line-height:1.2 !important;
    font-weight:700 !important;margin-bottom:4px !important;
}
.hcmv2-dashboard .hcmv2-kpi-card small{
    display:block;font-size:10px !important;line-height:1.3 !important;margin-top:5px !important;
}
.hcmv2-dashboard .hcmv2-kpi-card .hcm-multi-value{
    display:flex !important;flex-direction:column !important;align-items:flex-start !important;
    gap:2px !important;width:100%;font-size:19px !important;line-height:1.12 !important;
    font-weight:800 !important;letter-spacing:-0.25px;
}
.hcmv2-dashboard .hcmv2-kpi-card .hcm-multi-value > *{
    white-space:nowrap !important;word-break:normal !important;overflow-wrap:normal !important;max-width:100%;
}
.hcmv2-dashboard .hcmv2-kpi-card .hcm-multi-value br{display:none;}
.hcmv2-dashboard .hcmv2-kpi-card strong.hcm-multi-value{white-space:nowrap;overflow:visible;}
.hcmv2-dashboard .hcmv2-kpi-icon{
    width:36px !important;height:36px !important;min-width:36px !important;font-size:14px !important;
}
/* Keep four columns on desktop; step down only at tablet/mobile widths. */
@media(max-width:991.98px){
    .hcmv2-dashboard .hcmv2-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:767.98px){
    .hcmv2-dashboard .hcmv2-kpi-card{min-height:96px !important;padding:12px 10px !important;gap:8px !important;}
    .hcmv2-dashboard .hcmv2-kpi-card .hcm-multi-value{font-size:17px !important;}
}
@media(max-width:480px){
    .hcmv2-dashboard .hcmv2-kpi-grid{grid-template-columns:1fr !important;}
}

/* v4.31 shared entry-action and multi-select filter UI */
.hcm-entry-action-btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;}
.hcm-generated-multi-filter{position:relative;width:100%;}
.hcm-generated-multi-filter .excel-filter-menu{width:280px;max-width:min(90vw,320px);border-radius:8px;overflow:hidden;}
.hcm-generated-multi-filter .excel-filter-search-wrap{position:relative;padding:10px 10px 6px;border-bottom:1px solid #edf0f3;}
.hcm-generated-multi-filter .excel-filter-search-wrap i{position:absolute;left:20px;top:20px;font-size:12px;color:#8a939f;}
.hcm-generated-multi-filter .excel-filter-search{padding-left:30px!important;}
.hcm-generated-multi-filter .excel-filter-actions{display:flex;justify-content:space-between;padding:3px 8px;border-bottom:1px solid #edf0f3;}
.hcm-generated-multi-filter .excel-filter-options{max-height:240px;overflow-y:auto;padding:6px;}
.hcm-generated-multi-filter .excel-filter-option{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:5px;cursor:pointer;font-size:13px;}
.hcm-generated-multi-filter .excel-filter-option:hover{background:#f3f5f7;}
.hcm-generated-multi-filter .excel-filter-option.excel-hidden{display:none;}


/* Final compact KPI layout override — desktop: four cards per row */
@media (min-width: 768px) {
  .hcmv2-dashboard .hcmv2-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .hcmv2-dashboard .hcmv2-kpi-card {
    min-width: 0 !important;
    min-height: 76px !important;
    padding: 9px 10px !important;
    gap: 8px !important;
    border-radius: 10px !important;
    align-items: center !important;
  }
  .hcmv2-dashboard .hcmv2-kpi-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    font-size: 12px !important;
  }
  .hcmv2-dashboard .hcmv2-kpi-card > div:last-child { gap: 2px !important; }
  .hcmv2-dashboard .hcmv2-kpi-card span { font-size: 10px !important; line-height: 1.15 !important; }
  .hcmv2-dashboard .hcmv2-kpi-card strong { font-size: 14px !important; line-height: 1.15 !important; }
  .hcmv2-dashboard .hcmv2-kpi-card small { font-size: 9px !important; line-height: 1.15 !important; }
  .hcmv2-dashboard .hcmv2-kpi-card .hcm-multi-value { font-size: 13px !important; line-height: 1.15 !important; }
}
@media (max-width: 767.98px) {
  .hcmv2-dashboard .hcmv2-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .hcmv2-dashboard .hcmv2-kpi-card { min-height: 76px !important; padding: 9px !important; gap: 7px !important; }
  .hcmv2-dashboard .hcmv2-kpi-icon { width: 28px !important; height: 28px !important; flex-basis: 28px !important; font-size: 11px !important; }
  .hcmv2-dashboard .hcmv2-kpi-card span { font-size: 10px !important; }
  .hcmv2-dashboard .hcmv2-kpi-card strong { font-size: 13px !important; }
  .hcmv2-dashboard .hcmv2-kpi-card small { font-size: 9px !important; }
}
@media (max-width: 420px) {
  .hcmv2-dashboard .hcmv2-kpi-grid { grid-template-columns: 1fr !important; }
}


/* HCM GLOBAL: Match InfinityFree dashboard spacing on Hostinger.
   Design-only override; keep content fluid and use a consistent 16px inset. */
.main-content > .dashboard-content,
.main-content > .hcmv2-dashboard,
.dashboard-content {
    box-sizing: border-box;
    width: 100%;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

@media (max-width: 576px) {
    .main-content > .dashboard-content,
    .main-content > .hcmv2-dashboard,
    .dashboard-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}


/* Payables: compact filter row, scoped to this page only. */
.payables-filter-form {
    display: grid;
    grid-template-columns: 118px minmax(180px, 1.65fr) repeat(7, minmax(92px, 1fr)) auto;
    gap: 6px;
    align-items: center;
    width: 100%;
    margin: 0 0 12px;
}
.payables-filter-form > div { min-width: 0; }
.payables-filter-form .form-control,
.payables-filter-form .form-select,
.payables-filter-form .btn {
    min-width: 0;
    width: 100%;
    height: 38px;
    padding: 6px 8px;
    font-size: 12px;
}
.payables-filter-form .payables-filter-search input { min-width: 0; }
.payables-filter-form .payables-filter-actions {
    display: flex;
    gap: 5px;
    align-items: center;
}
.payables-filter-form .payables-filter-actions .btn:first-child {
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
}
.payables-filter-form .payables-filter-actions a {
    width: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 1450px) {
    .payables-filter-form {
        grid-template-columns: 115px minmax(170px, 1.5fr) repeat(7, minmax(82px, 1fr)) auto;
        gap: 5px;
    }
    .payables-filter-form .form-control,
    .payables-filter-form .form-select,
    .payables-filter-form .btn { font-size: 11px; padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 1150px) {
    .payables-filter-form {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .payables-filter-form .payables-filter-month { grid-column: span 1; }
    .payables-filter-form .payables-filter-search { grid-column: span 3; }
    .payables-filter-form .payables-filter-actions { grid-column: span 4; justify-content: flex-end; }
    .payables-filter-form .payables-filter-actions .btn:first-child { width: auto; }
}
@media (max-width: 600px) {
    .payables-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payables-filter-form .payables-filter-search { grid-column: span 2; }
    .payables-filter-form .payables-filter-actions { grid-column: span 2; }
}