/* H2 Compressor Design System - Theme Variables */

/* ============================================
   LIGHT THEME (Default)
   ============================================ */
:root,
[data-theme="light"] {
    /* === Colors - Background === */
    --h2-bg-page: #f1f0ea;
    --h2-bg-card: #ffffff;
    --h2-bg-sidebar: #ffffff;
    --h2-bg-topbar: #ffffff;
    --h2-bg-input: #ffffff;
    --h2-bg-hover: #f8f9fa;
    --h2-bg-active: #e3f2fd;
    --h2-bg-muted: #f8f9fa;

    /* === Colors - Text === */
    --h2-text-primary: #0c2b42;
    --h2-text-secondary: #64748b;
    --h2-text-muted: #c2c2c2;
    --h2-text-heading: #1a1a1a;
    --h2-text-body: #333333;
    --h2-text-inverse: #ffffff;

    /* === Colors - Brand === */
    --h2-brand-primary: #0c2b42;
    --h2-brand-primary-hover: #0a2235;
    --h2-brand-primary-active: #081a2a;
    --h2-brand-accent: #0088ff;
    --h2-brand-accent-light: #e3f2fd;

    /* === Colors - Status === */
    --h2-status-success: #16a34a;
    --h2-status-success-bg: #d1fae5;
    --h2-status-success-text: #065f46;

    --h2-status-error: #ef4444;
    --h2-status-error-bg: #fee2e2;
    --h2-status-error-text: #991b1b;

    --h2-status-warning: #f39c12;
    --h2-status-warning-bg: #fff9e6;
    --h2-status-warning-text: #92400e;

    --h2-status-info: #3b82f6;
    --h2-status-info-bg: #dbeafe;
    --h2-status-info-text: #1e40af;

    /* === Colors - Border === */
    --h2-border-default: #e2e8f0;
    --h2-border-light: #ebebeb;
    --h2-border-input: #d1d5db;
    --h2-border-focus: #0088ff;
    --h2-border-active: #0088ff;

    /* === Colors - Shadow === */
    --h2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --h2-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06);
    --h2-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
    --h2-shadow-sidebar: 2px 0 5px rgba(0, 0, 0, 0.05);
    --h2-shadow-topbar: 0 2px 4px rgba(0, 0, 0, 0.05);

    /* === Typography - Font Family === */
    --h2-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;

    /* === Typography - Font Sizes === */
    --h2-font-size-xs: 12px;
    --h2-font-size-sm: 13px;
    --h2-font-size-base: 14px;
    --h2-font-size-md: 15px;
    --h2-font-size-lg: 16px;
    --h2-font-size-xl: 18px;
    --h2-font-size-2xl: 24px;
    --h2-font-size-3xl: 27px;
    --h2-font-size-4xl: 28px;
    --h2-font-size-5xl: 32px;

    /* === Typography - Font Weights === */
    --h2-font-weight-normal: 400;
    --h2-font-weight-medium: 500;
    --h2-font-weight-semibold: 600;
    --h2-font-weight-bold: 700;

    /* === Typography - Line Heights === */
    --h2-line-height-tight: 1.25;
    --h2-line-height-normal: 1.5;
    --h2-line-height-relaxed: 1.75;

    /* === Spacing === */
    --h2-spacing-xs: 4px;
    --h2-spacing-sm: 8px;
    --h2-spacing-md: 12px;
    --h2-spacing-lg: 16px;
    --h2-spacing-xl: 20px;
    --h2-spacing-2xl: 24px;
    --h2-spacing-3xl: 30px;
    --h2-spacing-4xl: 40px;

    /* === Border Radius === */
    --h2-radius-sm: 4px;
    --h2-radius-md: 5px;
    --h2-radius-lg: 6px;
    --h2-radius-xl: 8px;
    --h2-radius-2xl: 12px;
    --h2-radius-full: 9999px;

    /* === Layout === */
    --h2-sidebar-width: 250px;
    --h2-sidebar-collapsed-width: 70px;
    --h2-topbar-height: 70px;
    --h2-content-max-width: 1400px;

    /* === Transitions === */
    --h2-transition-fast: 0.15s ease;
    --h2-transition-normal: 0.2s ease;
    --h2-transition-slow: 0.3s ease;

    /* === Z-Index === */
    --h2-z-dropdown: 100;
    --h2-z-sticky: 500;
    --h2-z-sidebar: 1000;
    --h2-z-topbar: 999;
    --h2-z-modal: 1100;
    --h2-z-tooltip: 1200;
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"] {
    /* === Colors - Background === */
    --h2-bg-page: #121212;
    --h2-bg-card: #1e1e1e;
    --h2-bg-sidebar: #1a1a1a;
    --h2-bg-topbar: #1a1a1a;
    --h2-bg-input: #2d2d2d;
    --h2-bg-hover: #2a2a2a;
    --h2-bg-active: #1a3a5c;
    --h2-bg-muted: #2a2f33;

    /* === Colors - Text === */
    --h2-text-primary: #f1f0ea;
    --h2-text-secondary: #a0aec0;
    --h2-text-muted: #6b7280;
    --h2-text-heading: #ffffff;
    --h2-text-body: #e2e8f0;
    --h2-text-inverse: #ffffff;

    /* === Colors - Brand === */
    --h2-brand-primary: #3b82f6;
    --h2-brand-primary-hover: #2563eb;
    --h2-brand-primary-active: #1d4ed8;
    --h2-brand-accent: #60a5fa;
    --h2-brand-accent-light: #1e3a5f;

    /* === Colors - Status === */
    --h2-status-success: #34d399;
    --h2-status-success-bg: #064e3b;
    --h2-status-success-text: #a7f3d0;

    --h2-status-error: #f87171;
    --h2-status-error-bg: #7f1d1d;
    --h2-status-error-text: #fecaca;

    --h2-status-warning: #fbbf24;
    --h2-status-warning-bg: #78350f;
    --h2-status-warning-text: #fef3c7;

    --h2-status-info: #60a5fa;
    --h2-status-info-bg: #1e3a8a;
    --h2-status-info-text: #bfdbfe;

    /* === Colors - Border === */
    --h2-border-default: #3d4450;
    --h2-border-light: #3d4450;
    --h2-border-input: #4b5563;
    --h2-border-focus: #60a5fa;
    --h2-border-active: #60a5fa;

    /* === Colors - Shadow === */
    --h2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --h2-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
    --h2-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
    --h2-shadow-sidebar: 2px 0 5px rgba(0, 0, 0, 0.3);
    --h2-shadow-topbar: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ============================================
   BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size-base);
    line-height: var(--h2-line-height-normal);
    color: var(--h2-text-body);
    background-color: var(--h2-bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text Colors */
.h2-text-primary { color: var(--h2-text-primary); }
.h2-text-secondary { color: var(--h2-text-secondary); }
.h2-text-muted { color: var(--h2-text-muted); }
.h2-text-heading { color: var(--h2-text-heading); }
.h2-text-success { color: var(--h2-status-success); }
.h2-text-error { color: var(--h2-status-error); }
.h2-text-warning { color: var(--h2-status-warning); }
.h2-text-info { color: var(--h2-status-info); }

/* Background Colors */
.h2-bg-page { background-color: var(--h2-bg-page); }
.h2-bg-card { background-color: var(--h2-bg-card); }
.h2-bg-muted { background-color: var(--h2-bg-muted); }
.h2-bg-success { background-color: var(--h2-status-success-bg); }
.h2-bg-error { background-color: var(--h2-status-error-bg); }
.h2-bg-warning { background-color: var(--h2-status-warning-bg); }
.h2-bg-info { background-color: var(--h2-status-info-bg); }

/* Font Sizes */
.h2-text-xs { font-size: var(--h2-font-size-xs); }
.h2-text-sm { font-size: var(--h2-font-size-sm); }
.h2-text-base { font-size: var(--h2-font-size-base); }
.h2-text-md { font-size: var(--h2-font-size-md); }
.h2-text-lg { font-size: var(--h2-font-size-lg); }
.h2-text-xl { font-size: var(--h2-font-size-xl); }
.h2-text-2xl { font-size: var(--h2-font-size-2xl); }
.h2-text-3xl { font-size: var(--h2-font-size-3xl); }
.h2-text-4xl { font-size: var(--h2-font-size-4xl); }

/* Font Weights */
.h2-font-normal { font-weight: var(--h2-font-weight-normal); }
.h2-font-medium { font-weight: var(--h2-font-weight-medium); }
.h2-font-semibold { font-weight: var(--h2-font-weight-semibold); }
.h2-font-bold { font-weight: var(--h2-font-weight-bold); }

/* Border Radius */
.h2-rounded-sm { border-radius: var(--h2-radius-sm); }
.h2-rounded-md { border-radius: var(--h2-radius-md); }
.h2-rounded-lg { border-radius: var(--h2-radius-lg); }
.h2-rounded-xl { border-radius: var(--h2-radius-xl); }
.h2-rounded-2xl { border-radius: var(--h2-radius-2xl); }
.h2-rounded-full { border-radius: var(--h2-radius-full); }

/* Shadows */
.h2-shadow-sm { box-shadow: var(--h2-shadow-sm); }
.h2-shadow-md { box-shadow: var(--h2-shadow-md); }
.h2-shadow-lg { box-shadow: var(--h2-shadow-lg); }

/* Transitions */
.h2-transition { transition: all var(--h2-transition-normal); }
.h2-transition-fast { transition: all var(--h2-transition-fast); }
.h2-transition-slow { transition: all var(--h2-transition-slow); }

/* ============================================
   H2INPUT COMPONENT
   ============================================ */
.h2-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.h2-input-full {
    width: 100%;
}

.h2-input-label {
    font-size: 14px;
    font-weight: 300;
    color: var(--h2-text-secondary);
}

.h2-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.h2-input {
    width: 100%;
    min-height: 48px;
    padding: 14px 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.2;
    color: var(--h2-text-body);
    background-color: var(--h2-bg-input);
    border: 1px solid var(--h2-border-input);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

/* Force all inputs (not textareas) to consistent height - fixes iOS Safari password field */
input.h2-input {
    height: 48px;
}

/* Remove iOS Safari internal password pseudo-elements that affect height */
input[type="password"]::-webkit-caps-lock-indicator {
    display: none;
}

/* Normalize webkit internal input padding */
input::-webkit-textfield-decoration-container {
    padding: 0;
}

.h2-input::placeholder {
    color: var(--h2-text-secondary);
}

.h2-input:focus {
    border-color: var(--h2-border-focus);
}

.h2-input:disabled {
    background-color: var(--h2-bg-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Input Size Variants */
.h2-input.h2-input-sm {
    padding: 10px 14px !important;
    font-size: 12px !important;
    border-radius: 5px !important;
}

.h2-input.h2-input-md {
    padding: 14px 16px;
    font-size: 15px;
}

.h2-input.h2-input-lg {
    padding: 16px 18px;
    font-size: 16px;
}

/* Icon padding for different sizes */
.h2-input.h2-input-sm.h2-input-has-icon-left {
    padding-left: 36px !important;
}

.h2-input.h2-input-sm.h2-input-has-icon-right {
    padding-right: 36px !important;
}

.h2-input.h2-input-has-icon-left {
    padding-left: 48px !important;
}

.h2-input.h2-input-has-icon-right {
    padding-right: 48px !important;
}

.h2-input-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.5;
}

.h2-input-icon-left {
    left: 16px;
}

.h2-input-icon-right {
    right: 16px;
}

.h2-input-toggle {
    position: absolute;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: var(--h2-text-secondary);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.h2-input-toggle:hover {
    opacity: 0.7;
}

.h2-input-error .h2-input {
    border-color: #ef4444;
}

.h2-input-error-message {
    font-size: 12px;
    color: #ef4444;
}

.h2-input-helper {
    font-size: 12px;
    color: var(--h2-text-secondary);
}

.h2-input-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.h2-textarea {
    min-height: 80px;
    padding: 14px 16px;
    resize: vertical;
}

/* ============================================
   H2BUTTON COMPONENT
   ============================================ */
.h2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none;
    white-space: nowrap;
    outline: none;
}

.h2-btn:focus-visible {
    outline: 2px solid var(--h2-border-focus);
    outline-offset: 2px;
}

.h2-btn-sm {
    padding: 12px 16px;
    font-size: 14px;
}

.h2-btn-md {
    padding: 14px 20px;
    font-size: 15px;
}

.h2-btn-lg {
    padding: 16px 24px;
    font-size: 16px;
}

.h2-btn-primary {
    background-color: var(--h2-brand-primary);
    color: var(--h2-text-inverse);
}

.h2-btn-primary:hover:not(:disabled) {
    background-color: var(--h2-brand-primary-hover);
}

.h2-btn-primary:active:not(:disabled) {
    transform: translateY(1px);
}

.h2-btn-secondary {
    background-color: var(--h2-bg-muted);
    color: var(--h2-text-body);
    border: 1px solid var(--h2-border-input);
}

.h2-btn-secondary:hover:not(:disabled) {
    background-color: var(--h2-bg-hover);
}

.h2-btn-outline {
    background-color: transparent;
    color: var(--h2-brand-primary);
    border: 1px solid var(--h2-brand-primary);
}

.h2-btn-outline:hover:not(:disabled) {
    background-color: var(--h2-bg-hover);
}

.h2-btn-ghost {
    background-color: transparent;
    color: var(--h2-text-body);
}

.h2-btn-ghost:hover:not(:disabled) {
    background-color: var(--h2-bg-muted);
}

.h2-btn-danger {
    background-color: var(--h2-status-error);
    color: #ffffff;
}

.h2-btn-danger:hover:not(:disabled) {
    background-color: #dc2626;
}

.h2-btn-success {
    background-color: var(--h2-status-success);
    color: #ffffff;
}

.h2-btn-success:hover:not(:disabled) {
    background-color: #059669;
}

.h2-btn-full {
    width: 100%;
}

.h2-btn-disabled,
.h2-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.h2-btn-loading {
    position: relative;
    pointer-events: none;
}

.h2-btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: h2-spin 0.6s linear infinite;
}

@keyframes h2-spin {
    to {
        transform: rotate(360deg);
    }
}

.h2-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.h2-btn-icon-left {
    margin-right: 4px;
}

.h2-btn-icon-right {
    margin-left: 4px;
}

/* ============================================
   H2PAGEHEADER COMPONENT
   ============================================ */
.h2-page-header {
    margin-bottom: 30px;
}

.h2-page-title {
    font-size: 27px;
    font-weight: 400;
    color: var(--h2-text-primary);
    margin: 0 0 5px 0;
}

.h2-page-subtitle {
    font-size: 13.2px;
    font-weight: 400;
    color: var(--h2-text-primary);
    margin: 0;
}

/* Page header wrapper - for pages with action buttons next to title */
.h2-page-header-wrapper {
    position: relative;
}

.h2-page-header-wrapper .h2-header-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 10px;
}

/* Responsive styles for page header wrapper */
@media (max-width: 768px) {
    .h2-page-header-wrapper {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 20px;
    }

    .h2-page-header-wrapper .h2-header-actions {
        position: static;
        flex-wrap: wrap;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .h2-page-header-wrapper {
        gap: 12px;
        margin-bottom: 16px;
    }

    .h2-page-header-wrapper .h2-header-actions {
        flex-direction: column;
        gap: 10px;
    }

    .h2-page-header-wrapper .h2-header-actions select,
    .h2-page-header-wrapper .h2-header-actions button {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Clear Filters Button */
.h2-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--h2-status-error);
    border-radius: 5px;
    font-size: 12px;
    font-family: var(--h2-font-family);
    color: var(--h2-status-error);
    background-color: var(--h2-bg-card);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.h2-clear-btn:hover {
    background-color: var(--h2-status-error);
    color: var(--h2-text-inverse);
}

/* Shared Header Action Button - used for "Add New User", "Add New Customer", etc. */
.h2-header-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-family: var(--h2-font-family);
    font-size: 13px;
    font-weight: 500;
    color: var(--h2-text-inverse);
    background-color: var(--h2-brand-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--h2-transition-fast);
}

.h2-header-action-btn:hover {
    background-color: var(--h2-brand-primary-hover);
}

.h2-header-action-btn img,
.h2-header-action-btn svg {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

/* Shared Export Button - used for "Export" buttons on Analytics, Session History, etc. */
.h2-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-family: var(--h2-font-family);
    font-size: 13px;
    font-weight: 500;
    color: var(--h2-text-inverse);
    background-color: var(--h2-brand-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--h2-transition-fast);
}

.h2-export-btn:hover {
    background-color: var(--h2-brand-primary-hover);
}

.h2-export-btn img,
.h2-export-btn svg {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

/* Role Badge - Global styles for consistent badge width */
.h2-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 10.68px;
    font-size: 10px;
    font-weight: 400;
    color: white;
    min-width: 90px;
    text-align: center;
}

.h2-role-badge.role-superadmin {
    background-color: #dc2626;
}

.h2-role-badge.role-admin {
    background-color: #dc2649;
}

.h2-role-badge.role-management {
    background-color: #0c2b42;
}

.h2-role-badge.role-financial {
    background-color: #16a34a;
}

.h2-role-badge.role-employee {
    background-color: #64748b;
}

/* Status Badge - Global styles */
.h2-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 10.68px;
    font-size: 10px;
    font-weight: 400;
    color: white;
    min-width: 70px;
    text-align: center;
}

.h2-status-badge.status-active {
    background-color: #16a34a;
}

.h2-status-badge.status-inactive {
    background-color: #ef4444;
}

/* ============================================
   H2STATCARD COMPONENT
   ============================================ */
.h2-stat-card {
    background-color: var(--h2-bg-card);
    border: 1px solid var(--h2-border-default);
    border-radius: 8px;
    padding: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.h2-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--h2-shadow-lg);
}

.h2-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.h2-stat-label {
    font-size: 13.2px;
    font-weight: 400;
    color: var(--h2-text-primary);
}

.h2-stat-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--h2-brand-accent);
}

.h2-stat-icon svg {
    width: 100%;
    height: 100%;
}

.h2-stat-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.h2-stat-value {
    font-size: 20.8px;
    font-weight: 500;
    color: var(--h2-text-primary);
    margin-bottom: 8px;
}

.h2-stat-change {
    font-size: 10px;
    font-weight: 400;
}

.h2-stat-change-positive {
    color: var(--h2-status-success);
}

.h2-stat-change-negative {
    color: var(--h2-status-error);
}

/* ============================================
   H2CONTENTCARD COMPONENT
   ============================================ */
.h2-content-card {
    background-color: var(--h2-bg-card);
    border: 1px solid var(--h2-border-default);
    border-radius: 8px;
    padding: 24px;
}

.h2-content-card-header {
    margin-bottom: 20px;
}

.h2-content-card-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--h2-text-primary);
    margin: 0 0 8px 0;
}

.h2-content-card-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: var(--h2-text-secondary);
    margin: 0;
}

.h2-content-card-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ============================================
   H2SESSIONITEM COMPONENT
   ============================================ */
.h2-session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--h2-bg-muted);
    border-radius: 7px;
    padding: 16px 20px;
}

.h2-session-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.h2-session-avatar {
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h2-session-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.h2-session-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.h2-session-name {
    font-size: 12px;
    font-weight: 400;
    color: var(--h2-text-primary);
    margin: 0;
}

.h2-session-mode {
    font-size: 12px;
    font-weight: 400;
    color: var(--h2-text-secondary);
    margin: 0;
}

.h2-session-time {
    font-size: 12px;
    font-weight: 400;
    color: var(--h2-text-secondary);
    margin: 4px 0 0;
}

/* flatpickr popup styling — replaces the browser-native date picker on
   the Session History filters so the popup can carry a visible, branded
   border per spec 5.6 ("visible border to the calendar pop-up"). */
.flatpickr-calendar {
    border: 2px solid #111 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}
[data-theme="dark"] .flatpickr-calendar {
    border-color: #e2e8f0 !important;
    background: #1e293b !important;
    color: #e2e8f0 !important;
}
[data-theme="dark"] .flatpickr-day {
    color: #e2e8f0 !important;
}
[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: #64748b !important;
}

.h2-session-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.h2-session-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 10.68px;
    font-size: 10px;
    font-weight: 600;
    color: var(--h2-text-inverse);
}

.h2-session-badge-progress {
    background-color: var(--h2-status-info);
}

.h2-session-badge-completed {
    background-color: var(--h2-status-success);
}

.h2-session-badge-failed,
.h2-session-badge-error {
    background-color: var(--h2-status-error);
}

.h2-session-amount {
    font-size: 12px;
    font-weight: 400;
    color: var(--h2-text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .h2-session-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .h2-session-right {
        align-items: flex-start;
    }
}

/* ============================================
   H2PRESSUREITEM COMPONENT
   ============================================ */
.h2-pressure-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--h2-bg-muted);
    border-radius: 7px;
    padding: 16px 20px;
}

.h2-pressure-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.h2-pressure-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}

.h2-pressure-dot-online {
    background-color: var(--h2-status-success);
}

.h2-pressure-dot-offline {
    background-color: var(--h2-text-muted);
}

.h2-pressure-dot-error {
    background-color: var(--h2-status-error);
}

.h2-pressure-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.h2-pressure-name {
    font-size: 12px;
    font-weight: 400;
    color: var(--h2-text-primary);
    margin: 0;
}

.h2-pressure-source {
    font-size: 12px;
    font-weight: 400;
    color: var(--h2-text-secondary);
    margin: 0;
}

.h2-pressure-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.h2-pressure-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 10.68px;
    font-size: 10px;
    font-weight: 600;
    color: var(--h2-text-inverse);
}

.h2-pressure-badge-online {
    background-color: var(--h2-status-success);
}

.h2-pressure-badge-offline {
    background-color: var(--h2-text-muted);
}

.h2-pressure-badge-error {
    background-color: var(--h2-status-error);
}

.h2-pressure-value {
    font-size: 12px;
    font-weight: 400;
    color: var(--h2-text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .h2-pressure-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .h2-pressure-right {
        align-items: flex-start;
    }
}

/* ============================================
   H2PROGRESSBAR COMPONENT
   ============================================ */
.h2-progress-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.h2-progress-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.h2-progress-label-left {
    font-size: 12px;
    font-weight: 400;
    color: var(--h2-text-primary);
}

.h2-progress-label-left .h2-highlight-success {
    color: var(--h2-status-success);
}

.h2-progress-label-left .h2-highlight-info {
    color: var(--h2-status-info);
}

.h2-progress-label-right {
    font-size: 12px;
    font-weight: 400;
    color: var(--h2-text-secondary);
}

.h2-progress-track {
    width: 100%;
    height: 7px;
    background-color: var(--h2-border-light);
    border-radius: 7px;
    overflow: hidden;
}

.h2-progress-fill {
    height: 100%;
    border-radius: 7px;
    transition: width 0.3s ease;
}

.h2-progress-fill-success {
    background-color: var(--h2-status-success);
}

.h2-progress-fill-info {
    background-color: var(--h2-status-info);
}

.h2-progress-fill-warning {
    background-color: var(--h2-status-warning);
}

.h2-progress-fill-error {
    background-color: var(--h2-status-error);
}

/* ============================================
   H2STATUSBADGE COMPONENT
   ============================================ */
.h2-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    color: var(--h2-text-inverse);
    flex-shrink: 0;
    line-height: 1.2;
}

/* Large variant for card headers */
.h2-status-badge.h2-status-badge-lg {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
}

/* Small inline variant for lists */
.h2-status-badge.h2-status-badge-sm {
    padding: 2px 8px;
    font-size: 9px;
    border-radius: 8px;
}

.h2-status-badge-default {
    background-color: var(--h2-text-muted);
}

.h2-status-badge-online,
.h2-status-badge-completed,
.h2-status-badge.online {
    background-color: var(--h2-status-success);
}

.h2-status-badge-offline,
.h2-status-badge.offline {
    background-color: var(--h2-text-muted);
}

.h2-status-badge-error,
.h2-status-badge-failed {
    background-color: var(--h2-status-error);
}

.h2-status-badge-progress {
    background-color: var(--h2-status-info);
}

.h2-status-badge-warning {
    background-color: var(--h2-status-warning);
}

/* Inline status badge (transparent background) */
.h2-status-badge-inline {
    background-color: transparent;
    font-weight: 400;
}

.h2-status-badge-inline.online {
    background-color: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}

.h2-status-badge-inline.offline {
    background-color: rgba(100, 116, 139, 0.1);
    color: #64748b;
}

/* ============================================
   LAYOUT - TOPBAR
   ============================================ */
.h2-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--h2-topbar-height);
    background-color: var(--h2-bg-topbar);
    border-bottom: 1px solid var(--h2-border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: var(--h2-z-topbar);
}

.h2-topbar-logo img {
    height: 34px;
    width: auto;
    object-fit: contain;
}

/* Dark mode logo adjustment - brighten dark text while preserving blue */
[data-theme="dark"] .h2-topbar-logo img {
    filter: brightness(1.8) contrast(1.1);
}

.h2-topbar-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.h2-topbar-profile-info {
    text-align: right;
}

.h2-topbar-profile-name {
    font-size: 13.2px;
    font-weight: 400;
    color: var(--h2-text-primary);
}

.h2-topbar-profile-role {
    font-size: 10px;
    font-weight: 400;
    color: var(--h2-text-secondary);
}

.h2-topbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--h2-brand-primary);
    color: var(--h2-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13.2px;
    font-weight: 400;
    cursor: pointer;
    transition: transform 0.2s;
}

.h2-topbar-avatar:hover {
    transform: scale(1.05);
}

/* ============================================
   LAYOUT - SIDEBAR
   ============================================ */
.h2-sidebar {
    width: var(--h2-sidebar-width);
    background-color: var(--h2-bg-sidebar);
    position: fixed;
    top: var(--h2-topbar-height);
    left: 0;
    bottom: 0;
    border-right: 1px solid var(--h2-border-default);
    display: flex;
    flex-direction: column;
    z-index: var(--h2-z-sidebar);
    overflow-y: auto;
}

.h2-sidebar-menu {
    list-style: none;
    padding: 20px 0;
    margin: 0;
    flex: 1;
}

.h2-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
    color: var(--h2-text-primary);
    font-size: 13.2px;
    font-weight: 400;
}

.h2-sidebar-item:hover {
    background-color: var(--h2-bg-hover);
}

.h2-sidebar-item.active {
    background-color: var(--h2-brand-accent-light);
    color: var(--h2-brand-accent);
    font-weight: 500;
    border-right: 3px solid var(--h2-brand-accent);
    margin-left: 10px;
}

.h2-sidebar-item.active span {
    color: var(--h2-brand-accent);
    font-weight: 600;
}

/* Inline SVG icons */
.h2-sidebar-item .nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--h2-brand-accent);
}

.h2-sidebar-item.active .nav-icon {
    color: var(--h2-brand-accent);
}

/* Legacy img support */
.h2-sidebar-item img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.h2-sidebar-item.active img {
    filter: brightness(0) saturate(100%) invert(40%) sepia(90%) saturate(2000%) hue-rotate(190deg) brightness(105%) contrast(101%);
}

.h2-sidebar-footer {
    padding: 20px;
    border-top: 1px solid var(--h2-border-default);
}

.h2-sidebar-signout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--h2-status-error);
    font-size: 12px;
    font-weight: 400;
    font-family: var(--h2-font-family);
}

.h2-sidebar-signout:hover {
    opacity: 0.8;
}

/* Inline SVG signout icon */
.h2-sidebar-signout .nav-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--h2-status-error);
}

/* Legacy img support */
.h2-sidebar-signout img {
    width: 12px;
    height: 12px;
    object-fit: contain;
}

/* Collapsed Sidebar */
.h2-sidebar.collapsed {
    width: var(--h2-sidebar-collapsed-width);
}

.h2-sidebar.collapsed .h2-sidebar-item span,
.h2-sidebar.collapsed .h2-sidebar-signout span {
    display: none;
}

@media (max-width: 768px) {
    .h2-sidebar {
        width: var(--h2-sidebar-collapsed-width);
    }

    .h2-sidebar .h2-sidebar-item span,
    .h2-sidebar .h2-sidebar-signout span {
        display: none;
    }
}

/* ============================================
   H2TOAST COMPONENT
   ============================================ */
.h2-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}

.h2-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: h2-toast-slide-in 0.3s ease-out;
    border-left: 4px solid;
}

.h2-toast-exit {
    animation: h2-toast-slide-out 0.3s ease-in forwards;
}

@keyframes h2-toast-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes h2-toast-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.h2-toast-success {
    border-left-color: #16a34a;
}

.h2-toast-success .h2-toast-icon {
    color: #16a34a;
}

.h2-toast-error {
    border-left-color: #ef4444;
}

.h2-toast-error .h2-toast-icon {
    color: #ef4444;
}

.h2-toast-warning {
    border-left-color: #f59e0b;
}

.h2-toast-warning .h2-toast-icon {
    color: #f59e0b;
}

.h2-toast-info {
    border-left-color: #3b82f6;
}

.h2-toast-info .h2-toast-icon {
    color: #3b82f6;
}

.h2-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.h2-toast-message {
    flex: 1;
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.4;
}

.h2-toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.h2-toast-close:hover {
    background-color: #f3f4f6;
    color: #6b7280;
}

/* ============================================
   H2CONFIRMDIALOG COMPONENT
   ============================================ */
.h2-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--h2-z-modal);
    animation: h2-confirm-fade-in 0.2s ease-out;
}

@keyframes h2-confirm-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.h2-confirm-dialog {
    background-color: var(--h2-bg-card);
    border: 1px solid var(--h2-border-default);
    border-radius: 12px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: var(--h2-shadow-lg);
    animation: h2-confirm-scale-in 0.2s ease-out;
}

@keyframes h2-confirm-scale-in {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.h2-confirm-icon {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}

.h2-confirm-icon svg {
    width: 48px;
    height: 48px;
}

.h2-confirm-info .h2-confirm-icon {
    color: var(--h2-status-info);
}

.h2-confirm-warning .h2-confirm-icon {
    color: var(--h2-status-warning);
}

.h2-confirm-danger .h2-confirm-icon {
    color: var(--h2-status-error);
}

.h2-confirm-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--h2-text-heading);
    margin: 0 0 8px 0;
}

.h2-confirm-message {
    font-size: 14px;
    color: var(--h2-text-secondary);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.h2-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.h2-confirm-actions .h2-btn {
    min-width: 100px;
}

/* ============================================
   MOBILE RESPONSIVE STYLES (480px and below)
   ============================================ */
@media (max-width: 480px) {
    /* Page Header */
    .h2-page-header {
        margin-bottom: 20px;
    }

    .h2-page-title {
        font-size: 22px;
    }

    .h2-page-subtitle {
        font-size: 12px;
    }

    /* Stat Cards */
    .h2-stat-card {
        padding: 16px;
    }

    .h2-stat-label {
        font-size: 12px;
    }

    .h2-stat-value {
        font-size: 18px;
    }

    .h2-stat-change {
        font-size: 9px;
    }

    /* Content Cards */
    .h2-content-card {
        padding: 16px;
    }

    .h2-content-card-header {
        margin-bottom: 16px;
    }

    .h2-content-card-title {
        font-size: 16px;
    }

    .h2-content-card-subtitle {
        font-size: 11px;
    }

    .h2-content-card-body {
        gap: 10px;
    }

    /* Session Items */
    .h2-session-item {
        padding: 12px 14px;
    }

    .h2-session-name {
        font-size: 13px;
        font-weight: 500;
    }

    .h2-session-mode {
        font-size: 11px;
    }

    .h2-session-badge {
        padding: 4px 10px;
        font-size: 9px;
    }

    .h2-session-amount {
        font-size: 11px;
    }

    /* Pressure Items */
    .h2-pressure-item {
        padding: 12px 14px;
    }

    .h2-pressure-name {
        font-size: 13px;
        font-weight: 500;
    }

    .h2-pressure-source {
        font-size: 11px;
    }

    .h2-pressure-badge {
        padding: 4px 10px;
        font-size: 9px;
    }

    .h2-pressure-value {
        font-size: 11px;
    }

    /* Progress Bars */
    .h2-progress-label-left,
    .h2-progress-label-right {
        font-size: 11px;
    }

    .h2-progress-track {
        height: 6px;
    }

    /* Topbar */
    .h2-topbar {
        padding: 0 12px;
    }

    .h2-topbar-logo img {
        height: 28px;
    }

    .h2-topbar-profile-info {
        display: none;
    }

    .h2-topbar-avatar {
        width: 32px;
        height: 32px;
    }

    /* Buttons */
    .h2-btn-sm {
        padding: 10px 14px;
        font-size: 13px;
    }

    .h2-btn-md {
        padding: 12px 16px;
        font-size: 14px;
    }

    /* Inputs */
    .h2-input {
        padding: 12px 14px;
        font-size: 14px;
    }

    .h2-input-label {
        font-size: 13px;
    }

    /* Toast mobile */
    .h2-toast-container {
        left: 10px;
        right: 10px;
        max-width: none;
    }

    /* Confirm dialog mobile */
    .h2-confirm-dialog {
        padding: 24px 20px;
    }

    .h2-confirm-title {
        font-size: 16px;
    }

    .h2-confirm-message {
        font-size: 13px;
    }

    .h2-confirm-actions {
        flex-direction: column;
    }

    .h2-confirm-actions .h2-btn {
        width: 100%;
    }
}

/* Extra small screens (360px and below) */
@media (max-width: 360px) {
    .h2-page-title {
        font-size: 20px;
    }

    .h2-stat-card {
        padding: 12px;
    }

    .h2-stat-value {
        font-size: 16px;
    }

    .h2-content-card {
        padding: 12px;
    }

    .h2-content-card-title {
        font-size: 15px;
    }

    .h2-session-item,
    .h2-pressure-item {
        padding: 10px 12px;
    }
}

/* ============================================
   UNIFIED PAGE LOADER
   ============================================
   Single source of truth for the in-page loading indicator shown while
   a page fetches its initial data. Replaces several divergent per-page
   loader styles so every page shows the same spinner, size, and color.

   Usage:
       <div class="h2-page-loader">
           <div class="h2-page-loader__spinner"></div>
           <p>Loading ...</p>
       </div>
*/
.h2-page-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
    /* Use --h2-text-body so the text has strong contrast in both light
       (#333) and dark (#e2e8f0) themes. --h2-text-secondary was too dim
       once Bootstrap/browser-default <p> inheritance got in the way. */
    color: var(--h2-text-body);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

/* Explicit color on the <p> so no parent rule (Bootstrap body, browser
   defaults, or scoped Blazor CSS) can override the theme-aware value
   via a direct-rule-beats-inheritance cascade. */
.h2-page-loader p {
    margin: 0;
    color: var(--h2-text-body);
}

.h2-page-loader__spinner {
    width: 44px;
    height: 44px;
    border: 4px solid var(--h2-border-light);
    border-top-color: var(--h2-brand-accent);
    border-radius: 50%;
    animation: h2-page-loader-spin 0.9s linear infinite;
}

@keyframes h2-page-loader-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .h2-page-loader__spinner {
        animation-duration: 3s;
    }
}

/* ============================================
   DARK-MODE COMPATIBILITY SHIMS
   ============================================
   Some pages were built with hardcoded light-mode colors (dark text on
   white backgrounds) before the dark theme existed. These overrides
   make them readable in dark mode without requiring a full CSS rewrite.

   Long-term fix: replace the hardcoded hex values in those pages with
   CSS variables. Short-term fix: override via [data-theme="dark"] here.
*/
[data-theme="dark"] .page-main-title,
[data-theme="dark"] .form-section-title,
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    color: var(--h2-text-primary);
}

[data-theme="dark"] .page-description,
[data-theme="dark"] .form-section-subtitle {
    color: var(--h2-text-secondary);
}

[data-theme="dark"] .form-container {
    background: var(--h2-bg-card);
    box-shadow: var(--h2-shadow-md);
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background: var(--h2-bg-input);
    border-color: var(--h2-border-input);
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder {
    color: var(--h2-text-muted);
}

[data-theme="dark"] .form-input:disabled,
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] .form-textarea:disabled {
    background: var(--h2-bg-muted);
}

[data-theme="dark"] .form-section-header,
[data-theme="dark"] .form-actions {
    border-color: var(--h2-border-default);
}

[data-theme="dark"] .btn-cancel {
    background: var(--h2-bg-muted);
    color: var(--h2-text-primary);
}

[data-theme="dark"] .btn-cancel:hover:not(:disabled) {
    background: var(--h2-bg-hover);
}