/* ==========================================================================
   ITAMFY Professional SaaS Design System
   ========================================================================== */

/* CSS Variables - Design Tokens */
@media (min-width: 769px) {
    /* The desktop shell scrolls its content pane, not the document. */
    html:has(.dashboard-layout) { scrollbar-gutter: auto; }
}
:root {
    scrollbar-gutter: stable;
    /* Brand Colors */
    --itamfy-primary: #2563eb;
    --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --surface-subtle: #f5f5f7;
    --control-border: #c7c7cc;
    --link-color: #1d4ed8;
    --itamfy-primary-light: #60a5fa;
    --itamfy-primary-dark: #1d4ed8;
    --itamfy-accent: #8b5cf6;

    /* Semantic Colors */
    --itamfy-success: #10b981;
    --itamfy-success-light: #34d399;
    --itamfy-warning: #f59e0b;
    --itamfy-warning-light: #fbbf24;
    --itamfy-danger: #ef4444;
    --itamfy-danger-light: #f87171;
    --itamfy-info: #6366f1;
    --itamfy-info-light: #818cf8;

    /* Semantic surfaces - the single source of truth for callouts, status tints
       and any other "this block means success/warning/danger/info" surface.
       Defined as flat colours rather than alpha so a callout keeps its intended
       contrast wherever it sits (inside a card, on the page, inside a modal)
       instead of picking up whatever is behind it.
       -accent is the icon/rule colour, -fg the readable body text on -bg. */
    --tone-info-bg: #eff6ff;
    --tone-info-border: #cfe2f9;
    --tone-info-accent: #2563eb;
    --tone-info-fg: #1c3d6e;

    --tone-success-bg: #ecfdf5;
    --tone-success-border: #c3ecda;
    --tone-success-accent: #059669;
    --tone-success-fg: #14513a;

    --tone-warning-bg: #fffbeb;
    --tone-warning-border: #f5e3b4;
    --tone-warning-accent: #b45309;
    --tone-warning-fg: #603c10;

    --tone-danger-bg: #fef2f2;
    --tone-danger-border: #f6cfcf;
    --tone-danger-accent: #dc2626;
    --tone-danger-fg: #6b1f1f;

    --tone-neutral-bg: var(--gray-50);
    --tone-neutral-border: var(--border-color);
    --tone-neutral-accent: var(--gray-500);
    --tone-neutral-fg: var(--text-secondary);

    /* Neutral Colors */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #dfe3e9;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Text Colors */
    --text-primary: #1d1d1f;
    --text-secondary: #626268;
    --text-muted: #6e6e73;
    --text-light: #f1f1f1;

    /* Background Colors */
    --bg-body: #f5f5f7;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: rgba(0, 0, 0, 0.04);
    --bg-row-hover: rgba(0, 0, 0, 0.02);

    /* Sidebar
       The sidebar follows the theme like every other surface. It used to be hard-coded dark in
       both, which left a black column against a light page - the one part of the UI that never
       got the light treatment. Every colour it uses is a token here, so the two themes are
       decided in one place instead of restated in MainLayout.razor.css.
       Light: a white panel separated from the grey page by a border, matching the card surface. */
    --sidebar-bg: #efeff2;
    --sidebar-brand-fg: var(--text-primary);
    --sidebar-border: #dddde3;
    --sidebar-fg: #4b5563;
    --sidebar-fg-strong: var(--text-primary);
    --sidebar-fg-muted: #6b7280;
    --sidebar-fg-faint: #6b7280;
    --sidebar-hover-bg: rgba(0, 0, 0, 0.04);
    --sidebar-active-bg: rgba(37, 99, 235, 0.10);
    --sidebar-active-fg: #1d4ed8;
    --sidebar-active-border: #2563eb;
    --sidebar-child-bg: rgba(0, 0, 0, 0.02);
    --sidebar-rule: rgba(0, 0, 0, 0.18);
    --sidebar-scroll-track: rgba(0, 0, 0, 0.02);
    --sidebar-scroll-thumb: rgba(0, 0, 0, 0.15);
    --sidebar-scroll-thumb-hover: rgba(0, 0, 0, 0.28);

    /* Border Colors */
    --border-color: #e2e2e7;
    --border-light: rgba(255, 255, 255, 0.1);

    /* Gradients */
    --gradient-card: transparent;
    --gradient-glow: none;

    /* Shadows
       Structure comes from borders, spacing and background contrast; shadow is
       reserved for surfaces that genuinely float ABOVE the page - dropdowns,
       popovers, modals. Resting cards and panels carry no shadow at all, which is
       what stops the UI reading as a pile of floating tiles.
       xl/2xl are aliases of lg; --shadow-glow* stay defined-as-none so any
       leftover reference is inert rather than a build break. */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 6px -1px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px -6px rgba(0, 0, 0, 0.14);
    --shadow-xl: var(--shadow-lg);
    --shadow-2xl: var(--shadow-lg);
    --shadow-glow: none;
    --shadow-glow-strong: none;
    --shadow-card: none;
    --shadow-card-hover: none;

    /* Type Scale
       There was no type scale before this: pages picked font sizes ad hoc, which produced
       25 distinct values including four near-duplicates crowded between 12px and 15px
       (0.75 / 0.8125 / 0.85 / 0.875 / 0.9 / 0.9375rem) that no reader can tell apart but
       that make every panel sit at a slightly different rhythm. These ten steps are the
       sizes the app already used most; the off-scale one-offs were folded onto the nearest.
       AssetLabel.razor.css is deliberately exempt - a printed sticker needs absolute px. */
    --text-xs: 0.75rem;      /* 12px - table meta, badges, captions */
    --text-sm: 0.8125rem;    /* 13px - secondary/supporting text  */
    --text-base: 0.875rem;   /* 14px - default body text          */
    --text-md: 0.9375rem;    /* 15px - emphasised body            */
    --text-lg: 1rem;         /* 16px                              */
    --text-xl: 1.125rem;     /* 18px - card/section titles        */
    --text-2xl: 1.25rem;     /* 20px                              */
    --text-3xl: 1.5rem;      /* 24px - KPI figures                */
    --text-4xl: 1.75rem;     /* 28px                              */
    --text-5xl: 2rem;        /* 32px - page display figures       */

    /* Soft, consistent corners: nested controls, standard controls, and surfaces.
       Legacy large-radius names remain aliases so existing pages inherit the same scale. */
    --radius-sm: 0.25rem;    /*  4px */
    --radius-md: 0.625rem;   /* 10px - controls */
    --radius-lg: 1rem;       /* 16px - surfaces */
    --radius-xl: var(--radius-lg);   /* deprecated alias */
    --radius-2xl: var(--radius-lg);  /* deprecated alias */
    --radius-full: 9999px;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* Layout */
    --sidebar-width: 256px;
    --sidebar-collapsed-width: 64px;
    --toolbar-height: 64px;

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
}

/* Dark mode: deep charcoal with a subtle blue undertone. */
body[data-theme="dark"] {
    --surface-subtle: #27292d;
    --control-border: #5d6065;
    --link-color: #9ac2ff;
    --text-primary: #ededed;
    --text-secondary: #bdbdbd;
    --text-muted: #aaaaaa;

    --bg-body: #141619;
    --bg-card: #1e2023;
    --bg-input: #1e2023;

    /* Keep text neutral; carry the cool undertone through darker controls. */
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #3a3c40;
    --gray-800: #212326;
    --gray-900: #121417;

    /* Sidebar - dark. Flat rather than the old gradient: it sits between the body and the
       card surface, which is what separates it without needing a wash. */
    --sidebar-bg: #191b1e;
    --sidebar-brand-fg: #ffffff;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-fg: rgba(255, 255, 255, 0.70);
    --sidebar-fg-strong: #ffffff;
    --sidebar-fg-muted: #aaaaaa;
    --sidebar-fg-faint: #aaaaaa;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: rgba(96, 165, 250, 0.16);
    --sidebar-active-fg: #b8d6ff;
    --sidebar-active-border: #ffffff;
    --sidebar-child-bg: rgba(255, 255, 255, 0.03);
    --sidebar-rule: rgba(255, 255, 255, 0.20);
    --sidebar-scroll-track: rgba(255, 255, 255, 0.02);
    --sidebar-scroll-thumb: rgba(255, 255, 255, 0.15);
    --sidebar-scroll-thumb-hover: rgba(255, 255, 255, 0.25);
    --bg-hover: rgba(255, 255, 255, 0.04);
    --bg-row-hover: rgba(255, 255, 255, 0.025);

    --border-color: #373a3e;

    /* Semantic surfaces - dark. Deep, desaturated grounds so a callout reads as a
       tinted panel rather than a glowing block, with light accents/text above it. */
    --tone-info-bg: #111c2e;
    --tone-info-border: #1e3a5f;
    --tone-info-accent: #60a5fa;
    --tone-info-fg: #bfd8f7;

    --tone-success-bg: #0e1f19;
    --tone-success-border: #1c4536;
    --tone-success-accent: #34d399;
    --tone-success-fg: #a7dcc5;

    --tone-warning-bg: #241c0c;
    --tone-warning-border: #4d3a12;
    --tone-warning-accent: #fbbf24;
    --tone-warning-fg: #e6cf9a;

    --tone-danger-bg: #251314;
    --tone-danger-border: #552427;
    --tone-danger-accent: #f87171;
    --tone-danger-fg: #edb9b9;

    --tone-neutral-bg: #232529;
    --tone-neutral-border: var(--border-color);
    --tone-neutral-accent: var(--gray-400);
    --tone-neutral-fg: var(--text-secondary);

    --shadow-card: none;
    --shadow-card-hover: none;

    --gradient-card: transparent;

    /* Bootstrap overrides */
    --bs-body-bg: var(--bg-body);
    --bs-body-color: var(--text-primary);
    --bs-border-color: var(--border-color);
}

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

html {
    font-size: 16px;
}

body {
    font-family: var(--font-ui);
    font-size: var(--text-md);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

/* Typography */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-ui);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

h1, .h1 { font-size: var(--text-4xl); font-weight: 700; }
h2, .h2 { font-size: var(--text-2xl); font-weight: 600; }
h3, .h3 { font-size: var(--text-xl); font-weight: 600; }
h4, .h4 { font-size: var(--text-lg); font-weight: 600; }
h5, .h5 { font-size: var(--text-md); font-weight: 600; }
h6, .h6 { font-size: var(--text-base); font-weight: 600; }

p {
    color: var(--text-secondary);
    line-height: 1.6;
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--itamfy-primary-light);
}

/* Selection */
::selection {
    background: rgba(37, 99, 235, 0.2);
    color: inherit;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.5rem var(--space-4);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Primary Button - Clean Professional Style */
.btn-primary {
    background: var(--itamfy-primary);
    color: #ffffff;
    box-shadow: none;
}

.btn-primary:hover {
    background: var(--itamfy-primary-dark);
    color: #ffffff;
    box-shadow: none;
}

.btn-primary:active {
    background: var(--itamfy-primary-dark);
    color: #ffffff;
}

/* Secondary Button */
.btn-secondary {
    background: var(--gray-100);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--gray-200);
    color: var(--text-primary);
    border-color: var(--gray-300);
}

body[data-theme="dark"] .btn-secondary {
    background: var(--gray-800);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body[data-theme="dark"] .btn-secondary:hover {
    background: var(--gray-700);
    border-color: var(--gray-600);
}

/* Outline Primary */
.btn-outline-primary {
    background: transparent;
    color: var(--itamfy-primary);
    border: 1px solid var(--itamfy-primary);
}

.btn-outline-primary:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--itamfy-primary);
    border-color: var(--itamfy-primary-light);
}

/* Outline Secondary - neutral border, quiet text (matches the marketing mock) */
.btn-outline-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-outline-secondary:hover,
.btn-outline-secondary.show,
.btn-outline-secondary:first-child:active {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--gray-400);
}

/* Success Button */
.btn-success {
    background: var(--itamfy-success);
    color: #ffffff;
    box-shadow: none;
}

.btn-success:hover {
    color: #ffffff;
    background: var(--itamfy-success-light);
}

/* Danger Button */
.btn-danger {
    background: var(--itamfy-danger);
    color: #ffffff;
    box-shadow: none;
}

.btn-danger:hover {
    color: #ffffff;
    background: var(--itamfy-danger-light);
}

/* Warning Button */
.btn-warning {
    background: var(--itamfy-warning);
    color: #ffffff;
    box-shadow: none;
}

.btn-warning:hover {
    color: #ffffff;
    background: var(--itamfy-warning-light);
}

/* Info Button */
.btn-info {
    background: var(--itamfy-info);
    color: #ffffff;
    box-shadow: none;
}

.btn-info:hover {
    color: #ffffff;
    background: var(--itamfy-info-light);
}

/* Light Button */
.btn-light {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xs);
}

.btn-light:hover {
    background: var(--gray-50);
    color: var(--text-primary);
    border-color: var(--gray-300);
}

body[data-theme="dark"] .btn-light {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body[data-theme="dark"] .btn-light:hover {
    background: var(--gray-800);
}

/* Link Button */
.btn-link {
    background: transparent;
    color: var(--text-secondary);
    padding: var(--space-1) var(--space-2);
    border: none;
    box-shadow: none;
    text-decoration: none !important;
}

.btn-link:hover {
    color: var(--itamfy-primary);
    background: var(--bg-hover);
    text-decoration: none !important;
}

.btn-link:focus {
    box-shadow: none;
    text-decoration: none !important;
}

/* Override Bootstrap's default blue link color */
a.btn-link,
button.btn-link {
    color: var(--text-secondary);
    text-decoration: none !important;
}

a.btn-link:hover,
button.btn-link:hover {
    color: var(--itamfy-primary);
    text-decoration: none !important;
}

/* Button Sizes */
.btn-sm {
    padding: var(--space-1) var(--space-2);
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: var(--space-2) var(--space-5);
    font-size: 0.9375rem;
    border-radius: var(--radius-md);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: border-color 120ms ease;
    overflow: visible;
}

.card-header {
    background: var(--gradient-card);
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-3) var(--space-4);
    font-weight: 600;
}

.card-body {
    padding: var(--space-4);
    background: var(--bg-card);
}

.card-footer {
    background: var(--gradient-card);
    border-top: 1px solid var(--border-color);
    padding: var(--space-3) var(--space-4);
}

.card-title {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0;
}

/* Stat Cards - Dashboard */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-card);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--itamfy-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), var(--shadow-sm);
    background-color: var(--bg-card);
}

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

.form-control:disabled {
    background-color: var(--gray-100);
    cursor: not-allowed;
    opacity: 0.7;
}

body[data-theme="dark"] .form-control {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Help / description text is too dark against the dark background by default: lighten it. */
body[data-theme="dark"] .form-text {
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Password field + show/hide toggle

   Global, not scoped, on purpose. These rules used to be duplicated verbatim in
   Login.razor.css and Register.razor.css, which meant ResetPassword.razor: same markup,
   no .razor.css of its own: rendered a bare native <button>: light grey, unreadable in
   dark mode. Blazor scoped CSS only matches markup the owning component emits, so every
   new page using .password-toggle-btn would have had to copy the block again.
   -------------------------------------------------------------------------- */

.password-group > .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.password-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    padding: 0;
    border: 1.5px solid var(--border-color);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    color: var(--text-muted);
    background: var(--bg-input);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.password-toggle-btn:focus {
    outline: none;
    border-color: var(--itamfy-primary);
    color: var(--text-primary);
}

/* Native file input ("Choose file") is unreadable in dark mode by default: theme it. */
body[data-theme="dark"] input[type="file"] {
    color: var(--text-primary);
}

body[data-theme="dark"] input[type="file"]::file-selector-button {
    background-color: var(--gray-700);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

/* Bootstrap changes the button background when the *input* is hovered (its selector has higher
   specificity via :not():not()), and uses a light colour: override both hover triggers. */
body[data-theme="dark"] input[type="file"]:hover::file-selector-button,
body[data-theme="dark"] input[type="file"]::file-selector-button:hover {
    background-color: var(--gray-600) !important;
    color: var(--text-primary) !important;
}

body[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-card);
    border-color: var(--itamfy-primary-light);
    box-shadow: 0 0 0 3px rgba(74, 163, 255, 0.15), var(--shadow-sm);
}

body[data-theme="dark"] .form-control:disabled {
    background-color: var(--gray-800);
}

/* Form Labels */
.form-label,
label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--text-primary);
}

/* Form Select */
.form-select {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-input);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    appearance: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.form-select:focus {
    outline: none;
    border-color: var(--itamfy-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

body[data-theme="dark"] .form-select {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Checkboxes and Radios */
.form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    margin-right: var(--space-2);
    background-color: var(--bg-input);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    border-color: var(--itamfy-primary);
}

.form-check-input[type="radio"] {
    border-radius: var(--radius-full);
}

/* Lay the checkbox and its label out as a flex row instead of relying on Bootstrap's
   floated input. Two problems that fixes:
     - the global `label { display: block }` rule above pushed the label onto its own line;
     - a label long enough to wrap cannot sit beside a float at all, so multi-line labels
       (e.g. the marketing opt-in on the register page) dropped underneath the checkbox.
   Excludes .form-switch, which needs Bootstrap's own padding/float geometry. */
.form-check:not(.form-switch) {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding-left: 0;
}

.form-check:not(.form-switch) .form-check-input {
    float: none;
    margin-left: 0;
    margin-right: 0;
    flex: 0 0 auto;
}

.form-check-label {
    display: inline-block;
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
}

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

.input-group > .form-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    background-color: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

body[data-theme="dark"] .input-group-text {
    background-color: var(--gray-800);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

/* Floating Labels */
.form-floating > .form-control {
    height: calc(3.5rem + 2px);
    padding: 1rem var(--space-4);
}

.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1rem var(--space-4);
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table {
    width: 100%;
    margin-bottom: var(--space-4);
    color: var(--text-primary);
    border-collapse: separate;
    border-spacing: 0;
}

.table {
    font-size: 0.9375rem;
}

.table > :not(caption) > * > * {
    padding: 0.625rem var(--space-3);
    color: var(--text-primary);
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
}

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

.table > thead > tr > th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

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

/* Hover highlight ONLY on rows that actually do something.
   Every table row used to light up on hover whether or not it was clickable, so the audit
   log, the members list and the import-error tables all advertised an interaction that did
   not exist. Rows carrying .clickable-row already get cursor: pointer (see below), so the
   two cues now agree: highlight + pointer means clickable, no highlight means static.
   The tint is also halved - at 4% it read as a selection, not a hover. */
.table > tbody > tr.clickable-row:hover {
    background-color: var(--bg-row-hover);
}

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

/* Striped Table */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0, 0, 0, 0.02);
}

body[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Responsive Table */
/* --------------------------------------------------------------------------
   <small> and .form-text are pinned to the scale.

   Bootstrap sizes <small> as 0.875em - RELATIVE to its parent - so the same tag
   rendered 12.25px inside a 14px block and would render 13.1px inside a 15px one.
   A caption should be one size wherever it appears, not a function of where it
   was nested, so both are pinned to the smallest scale step.
   -------------------------------------------------------------------------- */
small,
.form-text {
    font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   Full-width toggle

   Global, not scoped: this button is rendered by 27 different page components, so a rule in
   MainLayout.razor.css can never reach it.

   Hidden below the sidebar breakpoint because it has nothing to do there - the sidebar is
   already off-canvas and the content already spans the viewport, so "expand" is a no-op
   occupying space in the tightest header in the app.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .fullwidth-toggle {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   Data table row rhythm

   Rows were free to grow to whatever the longest cell needed, so a list mixed
   one-line, two-line and three-line rows depending on how long an asset name
   happened to be. That reads as a broken grid rather than a table. Fix the row
   height and clip overlong text to a single line - the full value is still on the
   detail page, and the title attribute keeps it reachable on hover.
   -------------------------------------------------------------------------- */
.table > tbody > tr > td {
    height: 52px;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Columns that must stay legible in full. */
.table > tbody > tr > td.cell-wide {
    max-width: 34ch;
}

.table > tbody > tr > td.cell-auto {
    max-width: none;
    white-space: normal;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}

.table-responsive > .table {
    margin-bottom: 0;
}

/* Inside a card the wrapper drops its own frame. One clean border, like the
   marketing mock's table card (pair with card-body p-0 for a flush table). */
.card .table-responsive {
    border: none;
    border-radius: 0;
    background: transparent;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem var(--space-2);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

/* Generic .bg-* utilities keep their solid colors (progress bars, etc.) */
.bg-primary { background: var(--itamfy-primary) !important; color: #ffffff !important; }
.bg-success { background: var(--itamfy-success) !important; color: #ffffff !important; }
.bg-danger { background: var(--itamfy-danger) !important; color: #ffffff !important; }
.bg-warning { background: var(--itamfy-warning) !important; color: #ffffff !important; }
.bg-info { background: var(--itamfy-info) !important; color: #ffffff !important; }
.bg-secondary { background: var(--gray-500) !important; color: #ffffff !important; }
.bg-light { background: var(--gray-100) !important; color: var(--text-primary) !important; }

body[data-theme="dark"] .bg-light {
    background: var(--gray-700) !important;
    color: var(--text-primary) !important;
}

/* Badges use soft tinted pills (colored text on a translucent tint): same
   look as the marketing-site mock, much calmer than solid color blocks. */
.badge.bg-primary {
    background: rgba(37, 99, 235, 0.14) !important;
    color: var(--itamfy-primary) !important;
}

.badge.bg-success {
    background: rgba(16, 185, 129, 0.14) !important;
    color: #059669 !important;
}

.badge.bg-danger {
    background: rgba(239, 68, 68, 0.14) !important;
    color: #dc2626 !important;
}

.badge.bg-warning {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #b45309 !important;
}

.badge.bg-info {
    background: rgba(99, 102, 241, 0.14) !important;
    color: var(--itamfy-info) !important;
}

.badge.bg-secondary {
    background: rgba(107, 114, 128, 0.16) !important;
    color: var(--gray-600) !important;
}

.badge.bg-light {
    background: var(--gray-100) !important;
    color: var(--text-secondary) !important;
}

body[data-theme="dark"] .badge.bg-primary { color: var(--itamfy-primary-light) !important; }
body[data-theme="dark"] .badge.bg-success { color: var(--itamfy-success-light) !important; }
body[data-theme="dark"] .badge.bg-danger { color: var(--itamfy-danger-light) !important; }
body[data-theme="dark"] .badge.bg-warning { color: var(--itamfy-warning-light) !important; }
body[data-theme="dark"] .badge.bg-info { color: var(--itamfy-info-light) !important; }
body[data-theme="dark"] .badge.bg-secondary { color: var(--text-secondary) !important; }

body[data-theme="dark"] .badge.bg-light {
    background: var(--gray-700) !important;
    color: var(--text-primary) !important;
}

/* ==========================================================================
   Alerts / Callouts

   ONE alert system for the whole application. Before this there were ~160
   hand-written alert divs across 36 files in 27 different class combinations
   (`alert alert-danger d-flex align-items-center gap-2`, `alert mb-3 alert-danger`,
   `alert alert-warning m-3`, ...), each picking its own icon, spacing and margin,
   and all of them inheriting stock Bootstrap's hardcoded hex palette rather than
   the app's tokens - which is why they were the one component that never matched
   the surface it sat on in dark mode.

   Markup is emitted by Components/Shared/Alert.razor; the classes below are the
   contract. `.alert` keeps its Bootstrap name so third-party markup and any
   not-yet-migrated page still lands on the same design.

   Shape: soft tonal ground, hairline border in the same tone, icon in the accent colour,
   title in full-strength text, body one step quieter. Compact by design - a callout is a
   note, not a hero panel.

   Deliberately NO accent bar down the leading edge. A 3px border-left has to round with
   the box's own radius, which turns it into a tapering stripe that reads as decoration
   rather than structure. The tint and the icon already carry the tone twice over.
   ========================================================================== */

.alert {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--text-base);
    line-height: 1.55;
    background-color: var(--tone-neutral-bg);
    color: var(--tone-neutral-fg);
    border: 1px solid var(--tone-neutral-border);
    border-radius: var(--radius-md);
}

/* A callout carries only a bottom margin, which is right when it opens a container --
   it lines up with whatever heading or rule sits above it. When it FOLLOWS content it
   needs room above too, or it collides with the element before it (the loyalty meter on
   the account page sat flush against the notice under it).

   The adjacent-sibling reset keeps a run of consecutive callouts at one gap rather than
   two stacked margins. */
.alert:not(:first-child) {
    margin-top: var(--space-4);
}

.alert + .alert {
    margin-top: 0;
}

/* The icon column. Sized to the cap-height of the first line so it optically
   aligns with the title instead of floating above or below it. */
.alert > .alert-icon {
    grid-column: 1;
    display: flex;
    align-items: center;
    height: 1.55em;
    font-size: var(--text-base);
    color: var(--tone-neutral-accent);
}

.alert > .alert-content {
    grid-column: 2;
    min-width: 0;
}

.alert-title {
    display: block;
    margin: 0 0 var(--space-1) 0;
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-primary);
}

/* Title-only callouts must not carry the title's bottom margin. */
.alert-title:last-child {
    margin-bottom: 0;
}

.alert-body {
    display: block;
    margin: 0;
    color: inherit;
}

.alert-body > p {
    margin: 0;
    color: inherit;
}

.alert-body > p + p {
    margin-top: var(--space-2);
}

/* Actions sit under the body, left-aligned with it. */
.alert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* Dismiss control - a quiet target in the callout's own tone, not Bootstrap's
   black-on-transparent × which is invisible on a tinted dark ground. */
.alert-dismiss {
    grid-column: 3;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.125rem -0.375rem 0 var(--space-2);
    padding: 0;
    font-size: var(--text-xs);
    color: inherit;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity var(--transition-fast), background-color var(--transition-fast);
}

.alert-dismiss:hover,
.alert-dismiss:focus-visible {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.06);
}

body[data-theme="dark"] .alert-dismiss:hover,
body[data-theme="dark"] .alert-dismiss:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
}

.alert:has(> .alert-dismiss) {
    grid-template-columns: auto 1fr auto;
}

/* --- Tones ---------------------------------------------------------------
   Each maps onto the --tone-* tokens, so light and dark are decided once in the
   token block rather than restated per component. */

.alert-info,
.alert-primary {
    background-color: var(--tone-info-bg);
    border-color: var(--tone-info-border);
    color: var(--tone-info-fg);
}

.alert-info > .alert-icon,
.alert-primary > .alert-icon { color: var(--tone-info-accent); }

.alert-success {
    background-color: var(--tone-success-bg);
    border-color: var(--tone-success-border);
    color: var(--tone-success-fg);
}

.alert-success > .alert-icon { color: var(--tone-success-accent); }

.alert-warning {
    background-color: var(--tone-warning-bg);
    border-color: var(--tone-warning-border);
    color: var(--tone-warning-fg);
}

.alert-warning > .alert-icon { color: var(--tone-warning-accent); }

.alert-danger {
    background-color: var(--tone-danger-bg);
    border-color: var(--tone-danger-border);
    color: var(--tone-danger-fg);
}

.alert-danger > .alert-icon { color: var(--tone-danger-accent); }

.alert-secondary,
.alert-light,
.alert-neutral {
    background-color: var(--tone-neutral-bg);
    border-color: var(--tone-neutral-border);
    color: var(--tone-neutral-fg);
}

/* Links inside a callout inherit the tone so they stay readable on the tint.
   Buttons are excluded: an <a class="btn"> in the actions row is a button, and
   inheriting the link treatment gave it an underline and the callout's text colour. */
.alert a:not(.btn),
.alert .alert-link:not(.btn) {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.alert a:not(.btn):hover {
    color: inherit;
    opacity: 0.8;
}

/* Page-level banner variant: full-bleed strip with no outer radius, used by the
   announcement / read-only / maintenance banners that span the content area. */
.alert-banner {
    margin-bottom: 0;
    border-inline: none;
    border-radius: 0;
}

/* ==========================================================================
   Scrollbars

   Deliberately NOT hidden outright. `scrollbar-width: none` does keep wheel and
   touch scrolling working, but it also removes the only cue that there is more
   content, removes the drag target, and removes the position indicator - which in
   a tool with wide tables and long lists costs more than the visual quiet buys.
   It is also an accessibility regression: a mouse-only user on a desktop loses a
   control with no substitute.

   What Linear, GitHub, Jira, Notion and the Azure portal actually do is not hide
   them but shrink and mute them - a thin, low-contrast thumb, no track, no
   stepper arrows, darkening on hover. That reads as quiet rather than absent, so
   that is what this does. The thumb is translucent rather than a solid grey so it
   recedes into whatever surface it overlays instead of drawing a hard grey bar.
   ========================================================================== */

:root {
    --scrollbar-thumb: rgba(0, 0, 0, 0.16);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] {
    --scrollbar-thumb: rgba(255, 255, 255, 0.14);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);
}

/* Firefox / spec */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* WebKit / Blink */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: var(--radius-full);
    /* Inset the thumb so it reads as a floating pill, not a full-width bar. */
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-button {
    display: none;
}

/* Number inputs: hide the unstylable native spin buttons (typing and
   arrow-key stepping still work) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ==========================================================================
   Dropdowns
   ========================================================================== */

.dropdown-menu {
    position: absolute;
    z-index: var(--z-dropdown);
    min-width: 11rem;
    padding: var(--space-1) 0;
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-primary);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-weight: 400;
    color: var(--text-primary);
    background-color: transparent;
    border: 0;
    transition: all var(--transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--itamfy-primary);
    background-color: var(--bg-hover);
}

.dropdown-divider {
    height: 0;
    margin: var(--space-2) 0;
    overflow: hidden;
    border-top: 1px solid var(--border-color);
}

/* ==========================================================================
   Table row actions (3-dot menu) + clickable rows
   ========================================================================== */

.clickable-row {
    cursor: pointer;
}

.row-actions-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.row-actions-btn:hover,
.row-actions-btn:focus,
.row-actions-btn[aria-expanded="true"] {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* Hide Bootstrap's caret on the 3-dot toggle */
.row-actions-btn.dropdown-toggle::after {
    display: none;
}

.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
    color: var(--itamfy-danger) !important;
    background-color: rgba(239, 68, 68, 0.08);
}

/* The open row-actions menu is re-positioned as position:fixed by
   js/row-actions-menu.js so it escapes the table/card overflow clipping
   (relaxing the ancestors' overflow instead would reset horizontal scroll). */

/* ==========================================================================
   Modals
   ========================================================================== */

.modal-content {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2xl);
}

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

.modal-title {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.modal-body {
    padding: var(--space-5);
    background: var(--bg-card);
}

/* Field rows in dialogs.
   Standalone fields are wrapped in .mb-3, but fields laid out in a <div class="row"> are not:
   Bootstrap's .row carries no vertical rhythm, so the next row's <label> sits flush against the
   previous row's input, and on narrow screens the stacked columns touch each other. Spacing the
   columns rather than the row fixes both at once. */
.modal-body .row > [class*="col-"] {
    margin-bottom: var(--space-4);
}

/* ...but not the final row, which would push the content away from the footer. */
.modal-body .row:last-child > [class*="col-"] {
    margin-bottom: 0;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-color);
    background: var(--gradient-card);
}

.modal-backdrop {
    background-color: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(4px);
}

/* ==========================================================================
   Progress Bars
   ========================================================================== */

.progress {
    height: 0.5rem;
    background-color: var(--gray-100);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar {
    background: var(--itamfy-primary);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

body[data-theme="dark"] .progress {
    background-color: var(--gray-800);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
    display: flex;
    gap: var(--space-1);
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--space-3);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.page-link:hover {
    color: var(--itamfy-primary);
    background-color: var(--bg-hover);
    border-color: var(--itamfy-primary);
}

.page-item.active .page-link {
    background: var(--itamfy-primary);
    border-color: var(--itamfy-primary);
    color: #ffffff;
}

.page-item.disabled .page-link {
    color: var(--text-muted);
    background-color: var(--gray-50);
    border-color: var(--border-color);
    cursor: not-allowed;
}

body[data-theme="dark"] .page-link {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--gray-800);
}

/* ==========================================================================
   Tabs / Nav Pills
   ========================================================================== */

.nav-tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 2px solid var(--border-color);
    margin-bottom: var(--space-4);
}

.nav-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 0;
    transition: all var(--transition-fast);
}

.nav-tabs .nav-link:hover {
    color: var(--itamfy-primary);
    border-bottom-color: rgba(37, 99, 235, 0.3);
}

.nav-tabs .nav-link.active {
    color: var(--itamfy-primary);
    border-bottom-color: var(--itamfy-primary);
}

.nav-pills {
    display: flex;
    gap: var(--space-2);
}

.nav-pills .nav-link {
    padding: var(--space-2) var(--space-4);
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.nav-pills .nav-link:hover {
    color: var(--itamfy-primary);
    background: var(--bg-hover);
}

.nav-pills .nav-link.active {
    color: #ffffff;
    background: var(--itamfy-primary);
}

/* ==========================================================================
   Tooltips
   ========================================================================== */

.tooltip {
    z-index: var(--z-tooltip);
}

.tooltip-inner {
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
    background-color: var(--gray-900);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.tooltip-arrow::before {
    border-top-color: var(--gray-900);
}

/* ==========================================================================
   List Groups
   ========================================================================== */

.list-group {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.list-group-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    color: var(--text-primary);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-width: 0 1px 1px 1px;
    transition: all var(--transition-fast);
}

.list-group-item:first-child {
    border-top-width: 1px;
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

.list-group-item:last-child {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

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

.list-group-item.active {
    color: #ffffff;
    background: var(--itamfy-primary);
    border-color: var(--itamfy-primary);
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background-color: var(--gray-50);
    border-radius: var(--radius-lg);
}

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

.breadcrumb-item + .breadcrumb-item::before {
    padding-right: var(--space-2);
    padding-left: var(--space-2);
    color: var(--text-muted);
    content: "/";
}

.breadcrumb-item a {
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
    color: var(--itamfy-primary);
}

.breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: 500;
}

body[data-theme="dark"] .breadcrumb {
    background-color: var(--gray-800);
}

/* ==========================================================================
   Dividers
   ========================================================================== */

hr,
.divider {
    border: none;
    height: 1px;
    background: var(--border-color);
    margin: var(--space-6) 0;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Text Colors */
.text-primary { color: var(--itamfy-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-success { color: var(--itamfy-success) !important; }
.text-danger { color: var(--itamfy-danger) !important; }
.text-warning { color: var(--itamfy-warning) !important; }
.text-info { color: var(--itamfy-info) !important; }

body[data-theme="dark"] .text-primary { color: var(--itamfy-primary-light) !important; }
body[data-theme="dark"] .text-secondary { color: var(--text-secondary) !important; }
body[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }

/* Background Classes */
.bg-body { background-color: var(--bg-body) !important; }
.bg-card { background-color: var(--bg-card) !important; }

/* Border Classes */
.border { border: 1px solid var(--border-color) !important; }
.border-primary { border-color: var(--itamfy-primary) !important; }
.border-radius-lg { border-radius: var(--radius-lg) !important; }
.border-radius-xl { border-radius: var(--radius-xl) !important; }
.border-radius-2xl { border-radius: var(--radius-2xl) !important; }

/* Shadow Classes */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-glow { box-shadow: var(--shadow-glow) !important; }

/* Text highlight - use primary color instead of gradient */

/* ==========================================================================
   Blazor/Blazorise Specific Overrides
   ========================================================================== */

/* Blazor Error Boundary */
.blazor-error-boundary {
    background: var(--itamfy-danger);
    padding: var(--space-4);
    color: white;
    border-radius: var(--radius-lg);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Form Validation */
.valid.modified:not([type=checkbox]) {
    border-color: var(--itamfy-success);
}

.invalid {
    border-color: var(--itamfy-danger);
}

.validation-message {
    color: var(--itamfy-danger);
    font-size: 0.8125rem;
    margin-top: var(--space-1);
}

/* Blazorise Field */
.field,
.fields {
    background-color: transparent !important;
}

.field-label,
.field-help {
    background-color: transparent !important;
}

/* Focus Styles */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

h1:focus {
    outline: none;
}

/* Floating Label Fix */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--text-muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Content spacing */
.content {
    padding-top: var(--space-4);
}

/* Container utilities */
.container,
.container-fluid {
    background-color: transparent !important;
}

/* Semantic surfaces retain their own backgrounds in both themes. */
body[data-theme="dark"] .user-avatar-initials {
    background-color: var(--itamfy-primary) !important;
    color: #ffffff !important;
}

/* License seat meters use brighter fills on dark surfaces. */
body[data-theme="dark"] .seats-meter {
    background-color: rgba(255, 255, 255, 0.18) !important;
}

body[data-theme="dark"] .seats-meter > span {
    background-color: var(--itamfy-primary-light, #4da6ff) !important;
}

body[data-theme="dark"] .seats-meter > span.meter-warning {
    background-color: var(--itamfy-warning-light, #fbbf24) !important;
}

body[data-theme="dark"] .seats-meter > span.meter-danger {
    background-color: var(--itamfy-danger-light, #f87171) !important;
}

/* Usage-page resource meters: brighter track in dark mode */
body[data-theme="dark"] .usage-row-meter .progress {
    background-color: rgba(255, 255, 255, 0.12);
}

/* CardTitle consistent styling */
.card-header .card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    html {
        font-size: 16px;
    }

    .btn {
        padding: var(--space-2) var(--space-3);
    }

    .card-body {
        padding: var(--space-4);
    }

    .modal-body {
        padding: var(--space-4);
    }
}

@media (max-width: 576px) {
    .btn-lg {
        padding: var(--space-2) var(--space-4);
        font-size: 0.9375rem;
    }
}

/* ==========================================================================
   Mobile Responsive (480px and below)
   ========================================================================== */

@media (max-width: 480px) {
    html {
        font-size: 16px;
    }

    .btn {
        padding: var(--space-2) var(--space-3);
        font-size: 0.875rem;
    }

    .btn-lg {
        padding: var(--space-2) var(--space-3);
        font-size: 0.875rem;
    }

    .card-body {
        padding: var(--space-3);
    }

    .modal-body {
        padding: var(--space-3);
    }

    .modal-header {
        padding: var(--space-3) var(--space-4);
    }

    .modal-footer {
        padding: var(--space-3) var(--space-4);
        flex-wrap: wrap;
    }
}

/* Auth "or" divider: separates local login from Microsoft login on the auth pages */
.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-secondary, #6c757d);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 1rem 0;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--border-color, #dee2e6);
}

.auth-divider span {
    padding: 0 0.75rem;
}

/* Application controls share one quiet, compact visual rhythm. */
.btn { min-height: 38px; font-weight: 500; transition: background-color var(--transition-fast), border-color var(--transition-fast); }
.btn-sm { min-height: 32px; border-radius: var(--radius-md); }
.btn-primary { --bs-btn-bg: #2563eb; --bs-btn-border-color: #2563eb; --bs-btn-hover-bg: #1d4ed8; --bs-btn-active-bg: #1d4ed8; }
.btn-outline-secondary { background: var(--bg-card); border-color: var(--control-border); }
.btn-light { background: transparent; border: 1px solid var(--border-color); }
.form-control, .form-select { border-color: var(--control-border); }
.card-header { padding: 20px 24px; }
.card-body { padding: 24px; }
.card-title, .modal-title { letter-spacing: -0.015em; }
.card-footer { background: var(--surface-subtle); }
.dropdown-menu { padding: 6px; }
.dropdown-item { border-radius: var(--radius-sm); }
.dropdown-item.active, .dropdown-item:active { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); }
.btn-link { color: var(--link-color); }

/* System typography and quiet surfaces keep the interface close to native desktop controls. */
.btn-secondary { background: var(--bg-card); }
.btn-light { box-shadow: none; }
.form-control, .form-select { min-height: 40px; }
.form-control-sm, .form-select-sm { min-height: 32px; }
.card-header:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card-body:last-child, .card-footer:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.card-body:only-child { border-radius: var(--radius-lg); }
@media (pointer: coarse) {
    .btn, .form-control, .form-select { min-height: 44px; }
}