/* ========================================
   Daygle Mail Archiver - Modern UI
   Inspired by Open WebUI Design System
   ======================================== */

/* CSS Variables for Theme */
:root {
    /* Light Theme Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f0f2f5;
    --bg-sidebar: #111827;
    --bg-hover: #f3f4f6;
    --bg-active: #e5e7eb;
    
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --text-inverse: #ffffff;
    
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;
    --border-hover: #d1d5db;
    
    --accent-primary: #3b82f6;
    --accent-hover: #2563eb;
    --accent-light: #dbeafe;
    
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 80px;
    --topbar-height: 60px;
    
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Table striping - subtle row backgrounds */
    --table-row-odd: rgba(0, 0, 0, 0.02);
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --bg-sidebar: #0f172a;
    --bg-hover: #1f2937;
    --bg-active: #374151;
    
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-inverse: #111827;
    
    --border-color: #374151;
    --border-light: #1f2937;
    --border-hover: #4b5563;
    
    --accent-primary: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-light: #1e3a8a;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);

    /* Table striping - subtle row backgrounds (dark theme) */
    --table-row-odd: rgba(255, 255, 255, 0.02);
}

/* ========================================
   Base Styles
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.6;
    transition: background-color var(--transition-base), color var(--transition-base);
}

input, select, textarea, button {
    font-family: inherit;
}

/* Enhanced focus styles for accessibility */
*:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ========================================
   Layout Structure
   ======================================== */

.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    color: var(--text-inverse);
    display: flex;
    flex-direction: column;
    transition: width var(--transition-base), transform var(--transition-base);
    z-index: 1000;
    overflow: hidden;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    min-height: var(--topbar-height);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-inverse);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.sidebar-brand:hover {
    opacity: 0.9;
}

.sidebar-brand img {
    height: 32px;
    width: auto;
}

/* Show/hide logos based on theme */
/* daygle.png = black/dark logo, show in light theme */
/* daygle-light.png = white/light logo, show in dark theme */

.brand-text {
    font-size: 1.125rem;
    font-weight: 400;
    white-space: nowrap;
    opacity: 1;
    transition: opacity var(--transition-fast);
    color: rgba(255, 255, 255, 0.95);
}

.sidebar.collapsed .brand-text {
    opacity: 0;
    width: 0;
}


/* sidebar-toggle removed - unused */

/* Navigation Menu */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 12px;
}

.nav-section {
    margin-bottom: 24px;
}

.nav-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 12px 8px;
    white-space: nowrap;
    opacity: 1;
    transition: opacity var(--transition-fast);
}

.sidebar.collapsed .nav-section-title {
    opacity: 0;
}

.nav-item {
    margin-bottom: 4px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    position: relative;
    white-space: nowrap;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-inverse);
}

.nav-link.active {
    background: rgba(59, 130, 246, 0.2);
    color: var(--text-inverse);
}

/* Dark theme: ensure sidebar active/hover link text stays light for contrast */
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
    color: var(--text-primary);
}

.nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--accent-primary);
    border-radius: 0 4px 4px 0;
}

.nav-link i {
    min-width: 20px;
    font-size: 1.125rem;
    text-align: center;
}

.nav-link span {
    flex: 1;
    opacity: 1;
    transition: opacity var(--transition-fast);
}

.sidebar.collapsed .nav-link span {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar.collapsed .nav-section-title {
    display: none;
}

.nav-arrow {
    font-size: 0.75rem;
    transition: transform var(--transition-fast);
    margin-left: auto;
}

.sidebar.collapsed .nav-arrow {
    display: none;
}

/* Help page layout improvements */
.help-grid {
    /* Use single column layout for help content to improve readability */
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}
.help-grid > .card {
    margin-bottom: 0; /* grid gap controls spacing */
}
.card-header .card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}
/* Code block improvements: preserve whitespace, allow horizontal scroll, and ensure line-height prevents overlapping */
pre.code-block,
pre.code-block code {
    background: var(--bg-secondary);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1rem;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    white-space: pre;
    line-height: 1.6;
}
.card .card-body p, .card .card-body ul, .card .card-body ol {
    margin-bottom: 0.75rem;
}
.help-grid .alert { margin-bottom: 0; }

/* Help/About/Donate docs-style layout */
.help-docs-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    align-items: start;
}

.help-toc-card {
    position: sticky;
    top: 16px;
    height: fit-content;
}

.help-toc-nav {
    display: flex;
    flex-direction: column;
}

.help-toc-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--text-primary);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all var(--transition-fast);
}

.help-toc-link:hover {
    background: var(--bg-hover);
    border-left-color: var(--accent-primary);
    color: var(--accent-primary);
}

.help-toc-link i {
    width: 1rem;
    text-align: center;
}

.help-content {
    min-width: 0;
}

.help-content > .card {
    margin-bottom: 24px;
}

.help-content > .card:last-child {
    margin-bottom: 0;
}

.help-body {
    padding: 24px;
}

.help-section {
    margin-bottom: 32px;
}

.help-section:last-child {
    margin-bottom: 0;
}

.help-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.help-icon {
    color: var(--accent-primary);
}

.help-intro {
    color: var(--text-secondary);
    font-weight: 500;
}

.help-body p {
    color: var(--text-secondary);
}

.help-body ul,
.help-body ol {
    margin-left: 20px;
}

@media (max-width: 1100px) {
    .help-docs-layout {
        grid-template-columns: 1fr;
    }

    .help-toc-card {
        position: static;
    }

    .help-toc-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .help-toc-link {
        flex: 1 1 calc(50% - 8px);
        border-left: none;
        border-bottom: 2px solid transparent;
    }

    .help-toc-link:hover {
        border-left: none;
        border-bottom-color: var(--accent-primary);
    }
}

@media (max-width: 768px) {
    .help-toc-nav {
        flex-direction: column;
    }

    .help-toc-link {
        flex: 1 1 auto;
        border-bottom: none;
        border-left: 3px solid transparent;
    }

    .help-toc-link:hover {
        border-bottom: none;
        border-left-color: var(--accent-primary);
    }

    .help-body {
        padding: 16px;
    }
}

.nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.nav-submenu.open,
.nav-submenu.expanded {
    max-height: 500px;
}

.nav-submenu .nav-link {
    padding-left: 44px;
    font-size: 0.9375rem;
}

.sidebar-mobile-toggle {
    display: none;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 16px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Main Content Area */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition-base);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sidebar.collapsed ~ .main-content {
    margin-left: var(--sidebar-collapsed-width);
}

/* Top Bar */
.topbar {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 0 24px;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

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

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Content Container */
.content-container {
    flex: 1;
    padding: 24px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* ========================================
   Components
   ======================================== */

/* Cards */
.card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all var(--transition-base);
    margin-bottom: 24px;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body {
    padding: 20px;
}

.card-body-flex {
    display: flex;
    flex-direction: column;
}

.card-body-flex iframe {
    flex: 1;
    min-height: 400px;
}

.card-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

/* Dashboard widget & modal styles moved from dashboard template */
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}
.widget-card { position: relative; contain: layout style paint; }
.widget-header { flex-shrink: 0; }
.widget-body { min-height: 0; }
.stat-display { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 0.5rem; min-height: 80px; flex: 1; }
.stat-value { font-size: clamp(1.2rem, 4vw, 2.5rem); font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; line-height: 1.2; word-break: break-word; }
.stat-label { font-size: clamp(0.75rem, 2vw, 0.9rem); color: var(--text-secondary); font-weight: 500; line-height: 1.3; word-break: break-word; }
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.modal-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); }
.modal-content { position: relative; background: var(--bg-primary); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.3); max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; z-index: 1; max-width: 600px; }
.modal-header { padding: 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; }
.modal-body { padding: 1.5rem; overflow-y: auto; }
.widget-actions { position: absolute; top: 8px; right: 8px; display: none; gap: 4px; z-index: 100; }
.grid-stack.edit-mode .widget-actions { display: flex; }
.widget-action-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-primary); font-size: 0.85rem; transition: all 0.2s; }
.widget-action-btn:hover { background: var(--accent-primary); color: white; border-color: var(--accent-primary); }
.widget-action-btn.danger:hover { background: #ef4444; border-color: #ef4444; }
.widget-settings-btn:hover { background: #f59e0b; border-color: #f59e0b; }
.widget-selector-item { padding: 0.75rem 1rem; background: var(--bg-secondary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: all 0.2s; }
.widget-selector-item:hover { background: var(--accent-primary); color: white; }
.widget-selector-item.disabled { opacity: 0.5; cursor: not-allowed; }
.widget-selector-item.disabled:hover { background: var(--bg-secondary); color: var(--text-primary); }

#api-unreachable-banner { margin: 0.5rem 1rem; }

/* stats-grid removed - unused */

.stat-card {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
    color: white;
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    position: relative;
}

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

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.875rem;
    opacity: 0.9;
}

.stat-icon {
    font-size: 2.5rem;
    opacity: 0.3;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    min-height: 38px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--accent-primary);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

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

.btn-success {
    background: var(--success);
    color: white;
}

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

.btn-danger {
    background: var(--danger);
    color: white;
}

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

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

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

.btn-sm {
    padding: 6px 12px;
    font-size: 0.875rem;
    min-height: 38px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 1rem;
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-text {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.9375rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: all var(--transition-fast);
    min-height: 38px;
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.form-control::placeholder {
    color: var(--text-tertiary);
}

.form-select {
    width: 100%;
    padding: 10px 40px 10px 14px;
    font-size: 0.9375rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 20px;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    min-height: 38px;
    box-sizing: border-box;
}

.form-select:hover {
    border-color: var(--border-hover);
}

.form-select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.form-check-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-check-label {
    font-size: 0.9375rem;
    color: var(--text-primary);
    cursor: pointer;
}

.form-hint {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* Muted text helper - theme aware */
.text-muted {
    color: var(--text-secondary) !important;
}

/* Tables */
.table-container {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    border: 1px solid var(--border-color);
    /* Smooth scrolling for better mobile experience */
    -webkit-overflow-scrolling: touch;
    /* Add scroll snap for better table navigation on mobile */
    scroll-behavior: smooth;
}

/* Visual indicator for horizontal scrolling on mobile */
@media (max-width: 768px) {
    .table-container {
        position: relative;
    }
    
    /* Gradient overlay with shadow to indicate more content on the right */
    /* Creates subtle inset shadow effect for better visibility across themes */
    .table-container::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to left, var(--bg-secondary), transparent);
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.3s;
        /* Inset shadow: horizontal offset, blur, spread, color */
        box-shadow: inset -10px 0 10px -10px var(--text-secondary);
    }
    
    /* Hide the shadow when scrolled to the end */
    .table-container.scrolled-end::after {
        opacity: 0;
    }
}

/* Roles & Permissions UI styles moved from templates to central CSS */
.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 1rem;
    background-color: var(--bg-secondary);
}

.role-permissions {
    /* Keep normal table-cell behavior so table sizing is calculated correctly */
    display: table-cell;
    vertical-align: middle;
    /* Remove extra vertical padding so it aligns with other cells */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: 300px;
    /* Allow long permission names/badges to wrap within the cell */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Badges rendered inline so they don't affect table intrinsic sizing */
.role-permissions .badge {
    display: inline;
    /* Margin removed since flex gap handles spacing */
    /* Ensure badges themselves can break/wrap on narrow cells */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Wrapper for permissions badges to enable wrapping */
.permissions-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

/* Defensive: if a permissions-grid accidentally appears inside a table, reset its visual background */
.table .permissions-grid {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Tooltip wrapper for disabled buttons to allow hover/focus tooltips */
.disabled-tooltip-wrapper {
    display: inline-block;
    line-height: 0;
}
.disabled-tooltip-wrapper:focus {
    outline: none;
}

.permission-item {
    margin: 0;
}

.permission-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
}

.permission-checkbox:hover {
    background-color: var(--bg-hover);
}

.permission-checkbox input[type="checkbox"] {
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.checkmark {
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--border);
    border-radius: 0.25rem;
    background-color: var(--bg);
    position: relative;
    flex-shrink: 0;
}

.permission-checkbox input[type="checkbox"]:checked + .checkmark {
    background-color: var(--primary);
    border-color: var(--primary);
}

.permission-checkbox input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
}

.permission-details {
    flex: 1;
    line-height: 1.4;
}

.permission-details strong {
    color: var(--text);
}

.permission-details small {
    color: var(--text-secondary);
}

.table {
    width: 100%;
    border-collapse: collapse;
    /* Ensure table itself doesn't force a light background so it inherits the card/theme */
    background: transparent;
}

.table thead {
    background: var(--bg-secondary);
}

.table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    background: transparent; /* Prevent cell background from staying white in some browsers */
    vertical-align: middle;
} 

.table tbody tr {
    transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
    background: var(--bg-hover);
}

/* Striped rows for better readability */
.table.table-striped tbody tr {
    background: transparent; /* baseline transparent to avoid white fallback */
}
.table.table-striped tbody tr:nth-child(odd) {
    background: var(--table-row-odd);
}

/* Ensure hover/focus highlights remain visible */
.table tbody tr:focus-within,
.table tbody tr:hover {
    background: var(--bg-hover);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Tweak status indicator for better contrast on darker backgrounds */
.status-indicator {
    box-shadow: 0 0 0 4px var(--bg-primary) inset;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.badge-primary {
    background: rgba(139, 92, 246, 0.1);
    color: var(--accent-primary);
}

.badge-secondary {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-secondary);
} 

.badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.badge-info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
}

/* Alerts */
.alert {
    padding: 16px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--success);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--warning);
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--danger);
}

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--info);
}

/* Alert Items - Legacy styles for custom alert items */
.alert-item {
    border-left: 4px solid;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.alert-item.error { border-left-color: var(--danger); }
.alert-item.warning { border-left-color: var(--warning); }
.alert-item.info { border-left-color: var(--info); }
.alert-item.success { border-left-color: var(--success); }

.alert-item.acknowledged {
    opacity: 0.6;
    background-color: var(--bg-secondary);
}

/* Bootstrap alert acknowledged state */
.alert.acknowledged {
    opacity: 0.6;
}

.alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.alert-title {
    font-weight: 600;
    margin: 0;
}

.alert-meta {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.alert-actions {
    display: flex;
    gap: 0.5rem;
}

.alert-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
}

.alert-badge.error { background: #dc3545; color: white; }
.alert-badge.warning { background: #ffc107; color: var(--text-secondary); }
.alert-badge.info { background: #17a2b8; color: white; }
.alert-badge.success { background: #28a745; color: white; }

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.page-link {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.page-link:hover, .page-link.active {
    background: var(--accent-color);
    color: white;
}

/* Theme Toggle */
.theme-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 1rem;
    margin-right: 12px;
}

.theme-toggle:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Alerts Menu */
.alerts-menu {
    position: relative;
    margin-right: 12px;
}

.alerts-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 1rem;
}

.alerts-button:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.alerts-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--danger);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    border: 2px solid var(--bg-primary);
    min-width: 20px;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.user-menu-button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px 6px 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 50px;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.user-menu-button:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-menu:hover .user-menu-button i {
    transform: rotate(180deg);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #8b5cf6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}

.user-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    min-width: 220px;
    padding: 8px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-base);
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
    font-size: 0.9375rem;
}

.dropdown-item:hover {
    background: var(--bg-hover);
}

/* Theme toggle placed inside user dropdown should match dropdown items */
.theme-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px; /* match .dropdown-item spacing */
    padding: 12px 16px; /* match .dropdown-item padding */
    color: var(--text-primary);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 0.875rem; /* match .dropdown-item font-size */
}
.theme-toggle-item i {
    width: 16px;
    text-align: center;
    /* inherit color/font-size from parent to match other items */
}
.theme-toggle-item:hover {
    background: var(--bg-hover);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 0;
}

/* Loading Spinner */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.spinner-lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

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

/* Modal/Dialog */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.modal-backdrop.show {
    opacity: 1;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.modal.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform var(--transition-base);
}

.modal.show .modal-content {
    transform: scale(1);
}

.modal-header {
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    margin-left: auto;
}

.modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Modals whose body + footer live inside a <form> (the account/user/role
   editors) need the form to join the modal's flex column. Without this the
   form keeps its full content height, overflows the capped .modal-content
   and gets clipped: the footer and the bottom of the form become
   unreachable and the body never scrolls. Making the form a shrinking flex
   column lets .modal-body (flex: 1 1 auto; overflow-y: auto) scroll
   instead, keeping the header and footer pinned. */
.modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Responsive */

/* Tablet Styles (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    /* stats-grid rules removed - unused */
    
    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .content-container {
        padding: 20px;
    }
}

/* Mobile Styles (max-width: 768px) */
@media (max-width: 768px) {
    /* Root variables for mobile */
    :root {
        --topbar-height: 56px;
        --sidebar-width: 280px;
    }
    
    /* Sidebar mobile behavior */
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
        box-shadow: var(--shadow-xl);
        z-index: 1000;
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
        z-index: 1002;
    }
    
    /* Add overlay when sidebar is open on mobile */
    .sidebar.mobile-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
        backdrop-filter: blur(2px);
    }
    
    /* Main content - no margin on mobile */
    .main-content {
        margin-left: 0 !important;
    }
    
    /* Topbar adjustments */
    .topbar {
        padding: 0 12px;
        height: var(--topbar-height);
    }
    
    .topbar-left {
        gap: 8px;
        flex: 1;
    }
    
    .topbar-right {
        gap: 8px;
    }
    
    .page-title {
        font-size: 1.125rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }
    
    /* Show mobile toggle button */
    .sidebar-mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 48px !important;
        height: 48px !important;
        padding: 0 !important;
        font-size: 1.25rem;
        margin-right: 8px;
        border-radius: var(--radius-md) !important;
        background: var(--bg-primary) !important;
        border: 1px solid var(--border-color) !important;
        color: var(--text-secondary) !important;
        cursor: pointer !important;
        transition: all var(--transition-fast) !important;
        position: relative !important;
        z-index: 1001 !important;
        flex-shrink: 0 !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
    
    .sidebar-mobile-toggle:hover {
        background: var(--bg-hover) !important;
        border-color: var(--border-hover) !important;
        color: var(--text-primary) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    .sidebar-mobile-toggle:active {
        transform: scale(0.95) !important;
        background: var(--bg-active) !important;
    }
    
    /* Content container */
    .content-container {
        padding: 12px;
    }
    
    /* Grid layouts - stack on mobile */
    /* stats-grid removed - unused */
    
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }
    
    /* Stat cards - smaller on mobile */
    .stat-card {
        padding: 16px;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .stat-icon {
        font-size: 2rem;
        right: 16px;
    }
    
    /* Cards */
    .card {
        border-radius: var(--radius-md);
    }
    
    .card-header {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    /* Make button groups in card headers wrap and stack nicely on mobile */
    .card-header .flex.gap-2,
    .card-header .flex {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
    }
    
    .card-header .btn-sm {
        flex: 0 1 auto;
        white-space: nowrap;
    }
    
    .card-title {
        font-size: 1rem;
    }
    
    .card-body {
        padding: 16px;
    }
    
    .card-footer {
        padding: 12px 16px;
    }
    
    /* Buttons - larger touch targets */
    .btn {
        padding: 12px 16px;
        font-size: 0.875rem;
        min-height: 44px;
        width: 100%;
    }
    
    .btn-sm {
        padding: 8px 12px;
        font-size: 0.8125rem;
        min-height: 36px;
    }
    
    /* Button groups - stack on mobile */
    .flex.gap-2 .btn,
    .flex.gap-3 .btn {
        flex: 1;
    }
    
    /* Forms */
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-label {
        font-size: 0.875rem;
        margin-bottom: 6px;
    }
    
    .form-control,
    .form-select {
        padding: 12px;
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 44px;
    }
    
    .form-control::placeholder {
        font-size: 14px;
    }
    
    /* Tables - enable horizontal scroll */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        min-width: 600px;
    }
    
    .table th,
    .table td {
        padding: 10px 12px;
        font-size: 0.875rem;
        white-space: nowrap;
    }
    
    .table th {
        font-size: 0.8125rem;
    }
    
    /* Modals - full screen on mobile */
    .modal-content {
        width: 95%;
        max-width: 95%;
        max-height: 95vh;
        margin: 0 auto;
    }
    
    .modal-header {
        padding: 16px;
    }
    
    .modal-body {
        padding: 16px;
    }
    
    .modal-footer {
        padding: 16px;
        flex-direction: column-reverse;
    }
    
    .modal-footer .btn {
        width: 100%;
    }
    
    /* User menu */
    .user-menu-button {
        padding: 4px 8px 4px 4px;
        gap: 8px;
    }
    
    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.8125rem;
    }
    
    .user-name {
        display: none; /* Hide username text on mobile */
    }
    
    .alerts-menu {
        margin-right: 8px;
    }
    
    .alerts-button {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }
    
    /* Dropdown menus */
    .dropdown-menu {
        right: 0;
        left: auto;
        min-width: 200px;
    }
    
    /* Alerts */
    .alert {
        padding: 12px 16px;
        font-size: 0.875rem;
    }
    
    /* Badges */
    .badge {
        padding: 3px 8px;
        font-size: 0.6875rem;
    }
    
    /* Spacing utilities - reduce on mobile */
    .mt-4 { margin-top: 1rem; }
    .mb-4 { margin-bottom: 1rem; }
    .gap-4 { gap: 1rem; }
    
    /* Hide certain elements on mobile if needed */
    .hide-mobile {
        display: none !important;
    }
    
    /* Pagination */
    .card-footer .flex {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .card-footer .btn {
        width: 100%;
    }
}

/* Extra small devices (max-width: 480px) */
@media (max-width: 480px) {
    .page-title {
        font-size: 1rem;
        max-width: 150px;
    }
    
    .stat-value {
        font-size: 1.25rem;
    }
    
    .stat-label {
        font-size: 0.8125rem;
    }
    
    .card-title {
        font-size: 0.9375rem;
    }
    
    .table {
        min-width: 500px;
    }
    
    .content-container {
        padding: 8px;
    }
}

/* Auth initial hidden state to prevent FOUC */
.auth-card, .auth-container { visibility: hidden; }

/* Auth reveal animation (applied after styles load) */
.auth-card.visible, .auth-container.visible { visibility: visible; animation: fadeIn 0.25s ease-out; }

/* Auth page theme toggle (top-right of page) */
.auth-page-theme-toggle {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 12000;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 50%; /* make circular */
    width: 40px;
    height: 40px;
    padding: 0; /* use width/height for sizing */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.auth-page-theme-toggle i { font-size: 1rem; color: var(--text-primary); }
.auth-page-theme-toggle:hover { background: var(--bg-secondary); transform: translateY(-1px); }
.auth-page-theme-toggle:focus { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent-focus); }
/* remove accidental label styling; keep markup simple for circular button */

/* Auth language picker */
.auth-lang-picker {
    position: fixed;
    right: 60px;
    top: 12px;
    z-index: 12001;
}

.auth-lang-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.auth-lang-toggle:hover {
    background: var(--bg-hover);
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.auth-lang-toggle:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Auth language picker popup */
.auth-lang-popup {
    position: absolute;
    left: 0;
    top: 44px;
    background: var(--bg-elevated);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 12001;
}

.auth-lang-popup.open {
    opacity: 1;
    transform: translateY(0);
}

.auth-lang-popup.open {
    display: flex;
}

#language {
    display: none !important;
}



@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn var(--transition-base) ease-out;
}

.slide-in {
    animation: slideIn var(--transition-base) ease-out;
}

/* Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 2rem; }

/* Responsive table column helpers
   - Use `.hide-mobile` on `th`/`td` to hide on small screens (<= 768px)
   - Use `.hide-sm` to hide on small and below (<= 575px)
*/
th.hide-mobile, td.hide-mobile, .hide-mobile {
    display: table-cell;
    white-space: nowrap;
}

.hide-sm { 
    display: table-cell; 
    white-space: nowrap;
}

@media (max-width: 768px) {
    th.hide-mobile, td.hide-mobile, .hide-mobile {
        display: none !important;
    }
    /* Ensure button/link text hidden as well (higher specificity) */
    button .hide-mobile, a .hide-mobile, .btn .hide-mobile {
        display: none !important;
    }
}

@media (max-width: 575px) {
    th.hide-sm, td.hide-sm, .hide-sm { 
        display: none !important; 
    }
}

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.hidden { display: none; }

.w-100 { width: 100%; }

/* Layout utilities */
.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Utility to span a two-col grid */
.col-span-2 { grid-column: 1 / -1; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.form-actions { display: flex; gap: 12px; margin-top: 1.5rem; justify-content: flex-end; }
.flex-gap-8 { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.responsive-input { max-width: 200px; width: 100%; }
.responsive-fixed { max-width: 220px; width: 100%; }
.col-small { width: 40px; }
.col-center { width: 60px; text-align: center; }
.col-left { width: 120px; min-width: 80px; }
.col-wrap { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty-state { padding: 48px 0; text-align: center; color: var(--text-secondary); }
.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.p-0 { padding: 0; }

/* Code block styling (theme aware) */
pre.code-block, pre.code-block code {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 12px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: 1rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ========================================
   Print Styles
   ======================================== */

/* Mobile styles (up to 576px) */
@media (max-width: 576px) {
    /* Compact card spacing */
    .report-card {
        padding: 1rem;
    }

    /* Smaller charts on small screens */
    .chart-container {
        height: 200px;
    }

    /* Stack date controls and make inputs full width */
    .date-range-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .date-range-controls input[type="date"],
    .date-range-controls .btn {
        width: 100%;
    }

    /* Make tables wrap and avoid forcing horizontal min-widths */
    .table {
        min-width: auto !important;
        width: 100% !important;
    }

    .table th,
    .table td {
        white-space: normal;
        word-break: break-word;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack footer buttons */
    .card-footer {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .card-footer .btn {
        width: 100%;
    }

    /* Metrics stack vertically */
    .metric-grid {
        grid-template-columns: 1fr;
    }

    /* Slightly tighter table container border radius */
    .table-container {
        border-radius: var(--radius-md);
    }

    /* Grid helpers: collapse 4-column grids to single column */
    .grid-cols-4 { grid-template-columns: 1fr; }
    
    /* Stack two-column grids on small screens */
    .two-col-grid { 
        grid-template-columns: 1fr;
    }
    
    /* Stack form actions on small screens */
    .form-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .form-actions .btn {
        width: 100%;
    }

    /* Empty state smaller padding and icon sizes on small screens */
    .empty-state { padding: 24px 0; }
    .empty-icon { font-size: 36px; }
}

@media print {
    body {
        background: white;
        color: black;
    }
    
    .sidebar,
    .topbar,
    .btn,
    .nav-section,
    .theme-toggle,
    .user-menu,
    .sidebar-mobile-toggle {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
    }
    
    .content-container {
        max-width: 100%;
        padding: 0;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }
    
    .table {
        border-collapse: collapse;
    }
    
    .table th,
    .table td {
        border: 1px solid #ddd;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
    
    .no-print {
        display: none !important;
    }
}

/* Links */
a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-hover);
}

.link {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Additional spinner variants */
.spinner-light {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
}

/* ========================================
   Enhanced Dashboard Styles
   ======================================== */

/* Dashboard hero (mirrors page-hero tokens from the page redesigns) */
.dsh-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; padding: 28px 32px; border: 1px solid var(--border-color); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--bg-primary), var(--accent-light)); box-shadow: var(--shadow-sm); }
.dsh-hero-copy { max-width: 720px; }
.dsh-eyebrow { color: var(--accent-primary); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.dsh-eyebrow i { margin-right: 6px; }
.dsh-hero h2 { margin: 0 0 6px; color: var(--text-primary); font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -.03em; }
.dsh-hero p { margin: 0; color: var(--text-secondary); max-width: 650px; }
@media (max-width: 800px) { .dsh-hero { align-items: stretch; flex-direction: column; } }
@media (max-width: 500px) { .dsh-hero { padding: 22px 20px; } }

/* Dashboard Toolbar */
.dashboard-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin-bottom: 1rem;
}

.toolbar-left h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
}

.toolbar-right {
    display: flex;
    gap: 0.5rem;
}

/* Toolbar edit-mode button visibility: by default only customise button shows; in editing mode show other controls */
.dashboard-toolbar .toolbar-right .btn { display: none; }
.dashboard-toolbar .toolbar-right #btn-customize { display: inline-flex; }
/* Show only elements explicitly marked for edit mode; use !important to avoid conflicts */
.dashboard-toolbar.editing .toolbar-right .show-on-edit { display: inline-flex !important; }
.dashboard-toolbar.editing .toolbar-right #btn-customize { display: none !important; }

/* customization-panel removed - unused */

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.panel-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-icon {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.btn-icon:hover {
    color: var(--text-primary);
}

.panel-body {
    padding: 1.5rem;
}

/* Widget Toggles */
.widget-toggle {
    margin-bottom: 0.75rem;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.toggle-label:hover {
    background: var(--bg-hover);
}

.toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.toggle-label span {
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* GridStack Dashboard */
.grid-stack {
    background: transparent;
}

.grid-stack.edit-mode .grid-stack-item {
    cursor: move;
}

.grid-stack-item {
    overflow: visible !important;
}

.grid-stack-item-content {
    overflow: visible !important;
    inset: 0 !important;
}

/* Widget Cards */
.widget-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

.widget-card:hover {
    box-shadow: var(--shadow-md);
}

.grid-stack.edit-mode .widget-card {
    cursor: move;
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.widget-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 0;
    flex: 1;
}

.widget-title i {
    color: var(--accent-primary);
    flex-shrink: 0;
}

.widget-title span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.widget-menu-btn {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: var(--text-tertiary);
    opacity: 0;
    transition: all var(--transition-fast);
}

.widget-card:hover .widget-menu-btn {
    opacity: 1;
}

.widget-menu-btn:hover {
    color: var(--text-primary);
}

.widget-body {
    flex: 1;
    padding: 0.75rem;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Dashboard stat display: coloured icon tile + value, with optional sparkline */
.widget-body .stat-display {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    text-align: left;
    padding: 0.25rem 0.5rem;
}

.dsh-stat-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 1.15rem;
}

.dsh-stat-icon-blue { color: var(--accent-primary); background: var(--accent-light); }
.dsh-stat-icon-green { color: var(--success); background: rgba(16, 185, 129, .12); }
.dsh-stat-icon-red { color: var(--danger); background: rgba(239, 68, 68, .12); }
.dsh-stat-icon-orange { color: #f59e0b; background: rgba(245, 158, 11, .12); }
.dsh-stat-icon-purple { color: #8b5cf6; background: rgba(139, 92, 246, .12); }
.dsh-stat-icon-cyan { color: #06b6d4; background: rgba(6, 182, 212, .12); }

.dsh-stat-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.widget-body .stat-value {
    margin-bottom: 0;
    text-align: left;
}

.widget-body .stat-label {
    text-align: left;
}

.dsh-sparkline {
    display: block;
    width: 100%;
    height: 26px;
    margin-top: auto;
    color: var(--accent-primary);
}

/* Mini Stats Grid */
.stats-grid-mini {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.stat-mini {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent-primary);
}

.stat-mini.stat-primary {
    border-left-color: var(--accent-primary);
}

.stat-mini.stat-success {
    border-left-color: #10b981;
}

.stat-mini.stat-info {
    border-left-color: #06b6d4;
}

.stat-mini.stat-warning {
    border-left-color: #f59e0b;
}

.stat-mini .stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--accent-primary);
    font-size: 1.25rem;
}

.stat-mini .stat-content {
    flex: 1;
}

.stat-mini .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.stat-mini .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Activity List */
.activity-list {
    max-height: 100%;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item:hover {
    background: var(--bg-hover);
}

.activity-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-light);
    color: var(--accent-primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.activity-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Health List */
.health-list {
    max-height: 100%;
    overflow-y: auto;
}

.health-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.health-item:last-child {
    border-bottom: none;
}

.health-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

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

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

.health-icon.health-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.health-icon.health-secondary {
    background: var(--bg-secondary);
    color: var(--text-tertiary);
}

.health-content {
    flex: 1;
    min-width: 0;
}

.health-email {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.health-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.health-error {
    font-size: 0.75rem;
    color: var(--danger);
    margin-top: 0.25rem;
}

/* Status Grid */
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.status-item {
    text-align: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.status-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    font-size: 1.5rem;
}

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

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

.status-icon.status-info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
}

.status-icon.status-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.status-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.status-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Quick Actions Grid */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.quick-action-btn:hover {
    background: var(--accent-light);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.quick-action-btn i {
    font-size: 1.5rem;
}

.quick-action-btn span {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Spinner Center */
.spinner-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

/* Chart Containers */
.widget-body canvas {
    max-height: 100%;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    /* customization-panel removed - unused */
    
    .stats-grid-mini {
        grid-template-columns: 1fr;
    }
    
    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* GridStack Resize Handle Styling */
.grid-stack-item > .ui-resizable-handle {
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.grid-stack.edit-mode .grid-stack-item > .ui-resizable-handle {
    opacity: 1;
}

.grid-stack-item:hover > .ui-resizable-handle {
    opacity: 1;
}

/* ========================================
   Authentication Pages (Login, Setup)
   ======================================== */

.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Soft glow behind the card echoes the page-hero gradient used across the app */
    background: radial-gradient(1100px 520px at 50% -8%, var(--accent-light), transparent 65%), var(--bg-secondary);
    padding: 20px;
}

.auth-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 48px;
    width: 100%;
    max-width: 420px;
    animation: fadeIn 0.3s ease-out;
}

.auth-card.wide {
    max-width: 600px;
}

.auth-header {
    text-align: center;
    position: relative;
    /* Hero band: bleeds to the card edges (card padding is 48px) and carries the
       same gradient treatment as the page heroes across the app */
    margin: -48px -48px 32px;
    padding: 34px 48px 26px;
    background: linear-gradient(135deg, var(--bg-primary), var(--accent-light));
    border-bottom: 1px solid var(--border-light);
    border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0;
}

.auth-logo {
    height: 48px;
    width: auto;
    margin-bottom: 16px;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.auth-title.large {
    font-size: 1.75rem;
}

.auth-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 8px;
}

.auth-subtitle.large {
    font-size: 0.9375rem;
    line-height: 1.5;
}

.auth-theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-theme-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

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

.auth-form .form-label {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 0.9375rem;
}

.auth-form .form-control {
    width: 100%;
}

.auth-form .btn {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-weight: 500;
}

.auth-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--danger);
    padding: 12px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--success);
    padding: 12px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--primary);
    padding: 16px;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    font-size: 0.9375rem;
}

.auth-info i {
    margin-right: 8px;
}

.auth-links {
    margin-top: 24px;
    text-align: center;
}

.auth-divider {
    border: none;
    height: 1px;
    background: var(--border);
    margin: 24px 0;
    opacity: 0.5;
}

.auth-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s ease;
}

.auth-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.auth-link i {
    margin-right: 6px;
}

.password-requirements {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 8px;
    padding-left: 20px;
}

.password-requirements li {
    margin-bottom: 4px;
}

/* ========================================
   Alerts Menu (Bell Icon)
   ======================================== */

.alerts-menu {
    position: relative;
    margin-right: 16px;
}

.alerts-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
    position: relative;
}

.alerts-button:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.alerts-button i {
    font-size: 1.125rem;
}

.alerts-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: var(--danger);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    border: 2px solid var(--bg-primary);
    min-width: 18px;
}

/* ========================================
   User Menu Dropdown
   ======================================== */

.user-menu {
    position: relative;
    margin-left: 16px;
}

.user-menu-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 50px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    cursor: pointer;
}

.user-menu-button:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-menu-button:hover .fa-chevron-down {
    color: var(--text-primary);
}

.user-menu-button .fa-chevron-down {
    transition: transform var(--transition-fast);
}

.user-menu.show .user-menu-button .fa-chevron-down {
    transform: rotate(180deg);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /* background-color: var(--accent-primary); */ /* Removed to allow inline styles */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.user-name {
    font-size: 0.875rem;
    font-weight: 500;
}

.user-menu .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: none; /* Hidden by default */
    transform: translateY(0);
    transition: all var(--transition-fast);
    z-index: 10000; /* Increased z-index to be above modals */
    margin-top: 8px;
}

#userMenuDropdown.show {
    display: block !important; /* Show when has show class */
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color var(--transition-fast);
    font-size: 0.875rem;
}

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

/* Ensure hover preserves readable text color in both themes */
.dropdown-item,
.theme-toggle-item {
    color: var(--text-primary);
}
.dropdown-item:hover,
.theme-toggle-item:hover {
    color: var(--text-primary);
}
.dropdown-item:hover i,
.theme-toggle-item:hover i {
    color: var(--text-primary);
}

.dropdown-item i {
    width: 16px;
    text-align: center;
}

/* Small highlight animation when settings are updated live */
.theme-updated {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12) inset;
    transition: box-shadow 220ms ease-in-out;
}

.dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 4px 0;
}

/* ========================================
   Reports Page Styles
   ======================================== */

.report-section {
    margin-bottom: 2rem;
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.report-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.date-range-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.report-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

/* Account Activity table - ensure dark theme background and grey text */
[data-theme="dark"] .account-activity-table,
[data-theme="dark"] .account-activity-table th,
[data-theme="dark"] .account-activity-table td {
    background: var(--bg-primary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .account-activity-table.table-striped tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.03);
}

.account-activity-table th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

/* Site-wide: ensure table headers are readable in dark theme */
[data-theme="dark"] .table thead,
[data-theme="dark"] .table th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.report-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.chart-container {
    position: relative;
    width: 100%;
    height: 300px;
    margin-bottom: 1rem;
}

/* Chart.js fills its parent when maintainAspectRatio is disabled. Without an
   explicit canvas width, browsers can retain the canvas' intrinsic 300px
   width, making report charts appear only half as wide as their card. */
.chart-container > canvas {
    display: block;
    width: 100% !important;
    max-width: 100%;
}

/* Keep the storage trend canvas anchored to the complete report-card width.
   The explicit wrapper also prevents Chart.js from sizing it from its intrinsic
   canvas width when the report is refreshed with a new dataset. */
.storage-chart-container {
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
}

.storage-chart-container canvas {
    inline-size: 100% !important;
    max-inline-size: 100%;
}

.table-responsive {
    max-height: 400px;
    overflow-y: auto;
}

.status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.5rem;
    box-shadow: none; /* remove inset ring so dot is solid */
    border: 1px solid rgba(0,0,0,0.06); /* subtle border for contrast on light theme */
}

/* Dark theme: subtle light border so the dot stands out */
[data-theme="dark"] .status-indicator {
    border: 1px solid rgba(255,255,255,0.06);
}

.status-online { background-color: var(--success); }
.status-warning { background-color: var(--warning); }
.status-error { background-color: var(--danger); }
.status-offline { background-color: var(--text-secondary); }

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.metric-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
}

/* System Status - legend styling */
.fetch-status-legend .legend-title {
    font-size: 0.9375rem;
    display: block;
    color: var(--text-primary);
}

.fetch-status-legend .legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.fetch-status-legend .legend-grid div {
    color: var(--text-secondary);
}

/* Card body text - ensure theme friendly colors for paragraphs, small text, and helper descriptions */
.card-body,
.card-body p,
.card-body ul,
.card-body ol,
.card-body li {
    color: var(--text-primary);
}

.card-body .section-description,
.card-body .form-text,
.card-body small,
.card-body .text-muted {
    color: var(--text-secondary);
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.metric-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Help page responsive grid */
/* Help grid layout is defined earlier to keep a single source of truth */
.help-grid .card {
    display: flex;
    flex-direction: column;
}
.help-grid .card .card-body {
    flex: 1 1 auto;
}

/* Utility helpers to replace inline styles in templates */
.d-none { display: none; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-grid { display: grid; }
.d-flex { display: flex; }
.gap-12 { gap: 12px; }
.gap-8 { gap: 8px; }
.mb-24 { margin-bottom: 24px; }
.mb-20 { margin-bottom: 20px; }
.mb-16 { margin-bottom: 16px; }
.mb-12 { margin-bottom: 12px; }
.mb-8 { margin-bottom: 8px; }
.mb-0 { margin-bottom: 0; }
.mt-24 { margin-top: 24px; }
.mt-20 { margin-top: 20px; }
.ml-1rem { margin-left: 1rem; }
.p-0 { padding: 0 !important; }
.py-48 { padding-top: 48px; padding-bottom: 48px; }
.pl-24 { padding-left: 24px; }
.text-danger { color: var(--danger); }
.text-secondary { color: var(--text-secondary); }
.code-block { background: var(--bg-secondary); padding: 12px; border-radius: 6px; }

/* Email Detail Layout */
.email-detail-item {
    margin-bottom: 8px;
}

.email-detail-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.email-detail-value {
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.3;
}

.email-detail-value strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Responsive adjustments for email details */
@media (max-width: 768px) {
    .email-detail-item {
        margin-bottom: 12px;
    }

    .email-detail-label {
        font-size: 0.8rem;
    }

    .email-detail-value {
        font-size: 0.95rem;
    }
}

/* Sortable table headers */
.sort-header {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sort-header:hover {
    color: var(--accent-primary);
}

.sort-icon {
    font-size: 0.75em;
    opacity: 0.4;
}

.sort-header.active .sort-icon {
    opacity: 1;
    color: var(--accent-primary);
}

/* Scroll to top button */
.scroll-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    font-size: 1rem;
}

.scroll-to-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.scroll-to-top.visible {
    display: flex;
}

/* Improved pagination bar */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.page-link.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
    pointer-events: none;
}

.page-link.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.page-link.ellipsis {
    border-color: transparent;
    background: transparent;
    pointer-events: none;
    color: var(--text-secondary);
}

/* Page jump form */
.page-jump {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.page-jump input[type="number"] {
    width: 58px;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    text-align: center;
}

.page-jump input[type="number"]:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.pagination-info {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: 6px;
}

@media (max-width: 768px) {
    .page-jump {
        width: 100%;
        justify-content: center;
    }

    .scroll-to-top {
        bottom: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
}