/* ===========================
   DESIGN TOKENS
   =========================== */
:root {
    /* Surfaces — from the Claude "MERIDIAN DEALER TERMINAL" design */
    --bg-base: #080b14;          /* app / page background */
    --bg-sidebar: #0b0f1a;       /* sidebar + header */
    --bg-surface: #0f1422;       /* cards / panels / tables / modals */
    --bg-recessed: #0b101c;      /* inner tiles, table row hover, list rows */
    --bg-elevated: #121829;      /* secondary buttons / icon buttons / chips */

    /* Accent (brand purple) */
    --accent-primary: #7c6cff;
    --accent-primary-hover: #8b7bff;
    --accent-primary-light: #9d8cff;
    --accent-primary-subtle: rgba(124, 108, 255, 0.13);

    /* Semantic */
    --color-success: #34d399;
    --color-success-subtle: rgba(52, 211, 153, 0.12);
    --color-warning: #f5a524;
    --color-warning-subtle: rgba(245, 165, 36, 0.16);
    --color-danger: #f87171;
    --color-danger-solid: #d9434f;    /* destructive button fill (SELL / Square-off) */
    --color-danger-subtle: rgba(248, 113, 113, 0.13);
    --color-info: #5b8def;            /* group-scope accents */
    --color-buy: #1f9d5e;             /* BUY button fill */

    /* Text */
    --color-text-primary: #e6eaf3;
    --color-text-secondary: #8b93a7;
    --color-text-muted: #5a6178;
    --color-text-faint: #4d556b;      /* sidebar section headers */

    /* Borders / dividers (white alpha, per design) */
    --color-border: rgba(255, 255, 255, 0.06);
    --color-border-subtle: rgba(255, 255, 255, 0.04);
    --color-border-strong: rgba(255, 255, 255, 0.10);

    /* Fonts: Plus Jakarta Sans (body) · Space Grotesk (display) · JetBrains Mono (numbers) */
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    --radius-sm: 4px;
    --radius-md: 9px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --sidebar-width: 248px;
    --sidebar-collapsed-width: 56px;
    --topbar-height: 62px;
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
}

/* ===========================
   MUDBLAZOR THEME OVERRIDES
   =========================== */
:root {
    --mud-palette-background: var(--bg-base);
    --mud-palette-background-grey: var(--bg-recessed);
    --mud-palette-surface: var(--bg-surface);
    --mud-palette-drawer-background: var(--bg-sidebar);
    --mud-palette-appbar-background: var(--bg-sidebar);
    --mud-palette-primary: var(--accent-primary);
    --mud-palette-primary-hover: var(--accent-primary-hover);
    --mud-palette-secondary: var(--accent-primary-light);
    --mud-palette-info: var(--color-info);
    --mud-palette-success: var(--color-success);
    --mud-palette-warning: var(--color-warning);
    --mud-palette-error: var(--color-danger);
    --mud-palette-text-primary: var(--color-text-primary);
    --mud-palette-text-secondary: var(--color-text-secondary);
    --mud-palette-text-disabled: var(--color-text-faint);
    --mud-palette-action-default: var(--color-text-secondary);
    --mud-palette-lines-default: var(--color-border);
    --mud-palette-lines-inputs: var(--color-border-strong);
    --mud-palette-divider: var(--color-border);
    --mud-default-borderradius: var(--radius-md);
    --mud-typography-default-family: var(--font-sans);
}

/* ===========================
   BASE RESET
   =========================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg-base);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app {
    height: 100%;
}

a {
    color: var(--accent-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ===========================
   TYPOGRAPHY UTILITIES
   =========================== */
.font-mono { font-family: var(--font-mono) !important; }
.text-primary { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-accent { color: var(--accent-primary) !important; }
.text-sm { font-size: 12px !important; }
.text-xs { font-size: 11px !important; }
.text-lg { font-size: 16px !important; }
.font-semibold { font-weight: 600 !important; }
.font-medium { font-weight: 500 !important; }
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===========================
   LAYOUT UTILITIES
   =========================== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.flex-1 { flex: 1; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.p-4 { padding: 16px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }

/* ===========================
   SURFACE CARDS
   =========================== */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

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

/* ===========================
   SKELETON LOADING
   =========================== */
@keyframes skeleton-shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 25%,
        #232c3d 50%,
        var(--bg-elevated) 75%
    );
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s infinite linear;
    border-radius: var(--radius-sm);
    display: inline-block;
}

.skeleton-text {
    height: 14px;
    width: 100%;
    margin-bottom: 6px;
}

.skeleton-text-sm {
    height: 12px;
    width: 60%;
}

/* ===========================
   DATA TABLE
   =========================== */
.meridian-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.meridian-table th {
    background: var(--bg-elevated);
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.meridian-table th:hover {
    color: var(--color-text-primary);
}

.meridian-table th.sorted {
    color: var(--accent-primary);
}

.meridian-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
    vertical-align: middle;
}

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

.meridian-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.table-container {
    background: var(--bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--bg-elevated);
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* DataGrid header layout — label + sort icon vertically centered */
.grid-th-inner {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* DataGrid sort indicator */
.grid-sort-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    font-size: 16px;
    line-height: 1;
    color: #9d8cff;
    opacity: 1;
}

.meridian-table th:hover .grid-sort-icon {
    color: #b9acff;
}

.grid-sort-icon.grid-sort-active {
    color: var(--accent-primary, #7c6cff);
    font-weight: 700;
}

/* DataGrid per-column filter row */
.meridian-table tr.grid-filter-row td {
    padding: 6px 12px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--color-border);
}

.meridian-table tr.grid-filter-row:hover td {
    background: var(--bg-elevated);
}

.grid-filter-input {
    width: 100%;
    min-width: 60px;
    background: var(--bg-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    color: var(--color-text-primary);
    font-size: 11.5px;
    outline: none;
}

.grid-filter-input:focus {
    border-color: var(--accent-primary);
}

.grid-page-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--bg-base);
    border: 1px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-secondary);
}

.grid-page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Date inputs, app-wide: NO visible calendar icon. Clicking anywhere in the box
   opens the native date picker (the picker indicator is stretched invisibly over
   the whole field), while manual typing in the field still works. */
input[type="date"] {
    position: relative;
    cursor: pointer;
    text-transform: uppercase;
    color-scheme: dark;   /* native picker chrome; flipped to light under [data-theme="light"] */
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    color: transparent;
    cursor: pointer;
    opacity: 0;
}

/* ===========================
   STATUS CHIPS
   =========================== */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chip-success { background: var(--color-success-subtle); color: var(--color-success); }
.chip-danger  { background: var(--color-danger-subtle);  color: var(--color-danger); }
.chip-warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.chip-info    { background: var(--accent-primary-subtle); color: var(--accent-primary); }
.chip-neutral { background: rgba(255,255,255,0.06); color: var(--color-text-secondary); }

/* ===========================
   FORM INPUTS (MudBlazor overrides)
   =========================== */
.mud-input-root {
    color: var(--color-text-primary) !important;
}

.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--color-border) !important;
}

/* ===========================
   SCROLLBAR (WebKit)
   =========================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: #222a3d;
    border-radius: 8px;
    border: 2px solid var(--bg-base);
}

::-webkit-scrollbar-thumb:hover {
    background: #2e3650;
}

::selection {
    background: rgba(124, 108, 255, 0.35);
}

/* ===========================
   CONNECTIVITY BANNER
   =========================== */
.connectivity-banner {
    background: var(--color-warning-subtle);
    border-bottom: 1px solid var(--color-warning);
    color: var(--color-warning);
    padding: 8px 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1000;
}

/* ===========================
   TOAST NOTIFICATIONS
   =========================== */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
    pointer-events: none;
}

.toast {
    background: var(--bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    pointer-events: all;
    box-shadow: var(--shadow-md);
    animation: toast-in 200ms ease;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.toast-success { border-left: 3px solid var(--color-success); }
.toast-error   { border-left: 3px solid var(--color-danger); }
.toast-warning { border-left: 3px solid var(--color-warning); }
.toast-info    { border-left: 3px solid var(--accent-primary); }

/* ===========================
   LOADING PROGRESS (Blazor default)
   =========================== */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem;
}

.loading-progress circle {
    fill: none;
    stroke: var(--accent-primary);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--bg-elevated);
    animation: loading-progress-spin 1.6s linear infinite;
}

@keyframes loading-progress-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 600;
    inset: calc(20vh + 9rem) 0 auto;
    color: var(--color-text-secondary);
}

/* ===========================
   PAGE LAYOUT
   =========================== */
.page-header {
    display: flex;
    align-items: center;
    /* Screen title now lives in the top header bar (AppHeader); the page-header
       keeps only the action buttons, right-aligned. */
    justify-content: flex-end;
    margin-bottom: 18px;
}

/* Title is rendered by the header bar — suppress the duplicate per-page title. */
.page-content .page-title {
    display: none;
}

.page-content {
    padding: 26px;
    overflow-y: auto;
}

/* ===========================
   STAT CARDS (Dashboard)
   =========================== */
.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-card-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.stat-card-value {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
}

.stat-card-sublabel {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* ===========================
   DESIGN MODAL FORM CONTROLS
   =========================== */
.dm-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 14px 0 6px;
}
.dm-label:first-child { margin-top: 0; }

.dm-input, .dm-select {
    width: 100%;
    background: var(--bg-recessed);
    border: 1px solid var(--color-border-strong);
    border-radius: 10px;
    padding: 11px 13px;
    color: var(--color-text-primary);
    font-size: 13.5px;
    outline: none;
    box-sizing: border-box;
}
.dm-input:focus, .dm-select:focus { border-color: var(--accent-primary); }
.dm-select { appearance: none; cursor: pointer; }

.dm-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.dm-btn-cancel {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 13.5px;
    padding: 11px;
    border-radius: 10px;
    cursor: pointer;
}

.dm-btn-primary {
    flex: 1;
    background: var(--accent-primary);
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 13.5px;
    padding: 11px;
    border-radius: 10px;
    cursor: pointer;
}
.dm-btn-primary:hover:not(:disabled) { background: var(--accent-primary-hover); }
.dm-btn-primary:disabled { opacity: .7; cursor: default; }

.dm-btn-danger {
    flex: 1;
    background: var(--color-danger-solid);
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 13.5px;
    padding: 11px;
    border-radius: 10px;
    cursor: pointer;
}

.dm-error {
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 9px;
    background: var(--color-danger-subtle);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: var(--color-danger);
    font-size: 13px;
}

/* ===========================
   AUTH / LOGIN
   =========================== */
.auth-shell {
    min-height: 100vh;
    background: var(--bg-base);
}

.login-page {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 100vh;
}

/* Brand panel (left) */
.login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 48px;
    background:
        radial-gradient(1200px 500px at -10% -10%, rgba(124, 108, 255, 0.22), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(91, 70, 230, 0.18), transparent 55%),
        var(--bg-sidebar);
    border-right: 1px solid var(--color-border);
    overflow: hidden;
}

.login-brand-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-logo-mark {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, #7c6cff, #5b46e6);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(124, 108, 255, 0.45);
    flex: none;
}

.login-logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.05em;
    color: #fff;
}

.login-logo-sub {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-top: 3px;
}

.login-headline {
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
}

.login-sub {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 460px;
    margin: 0 0 26px;
}

.login-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-features li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13.5px;
    color: var(--color-text-primary);
}

.login-tick {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--accent-primary-subtle);
    color: var(--accent-primary-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex: none;
}

.login-brand-foot {
    font-size: 12px;
    color: var(--color-text-faint);
}

/* Form panel (right) */
.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: var(--bg-base);
}

.login-card {
    width: 100%;
    max-width: 380px;
}

.login-card-head {
    margin-bottom: 24px;
}

.login-card-head h2 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}

.login-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 16px 0 6px;
}

.login-input {
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--color-text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.login-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-subtle);
}

.login-error {
    margin-top: 14px;
    padding: 9px 12px;
    border-radius: 9px;
    background: var(--color-danger-subtle);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: var(--color-danger);
    font-size: 13px;
}

.login-submit {
    width: 100%;
    margin-top: 22px;
    background: var(--accent-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 14.5px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background var(--transition-fast), filter var(--transition-fast);
}

.login-submit:hover:not(:disabled) {
    background: var(--accent-primary-hover);
}

.login-submit:disabled {
    opacity: 0.7;
    cursor: default;
}

.login-hint {
    margin-top: 22px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--bg-recessed);
    border: 1px dashed var(--color-border-strong);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-secondary);
}

.login-hint-label {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--accent-primary-subtle);
    color: var(--accent-primary-light);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Stack on narrow screens; hide the brand panel on small viewports. */
@media (max-width: 860px) {
    .login-page { grid-template-columns: 1fr; }
    .login-brand { display: none; }
}

/* ===========================
   GROUPS PAGE
   =========================== */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.group-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent-primary-subtle);
    color: var(--accent-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.group-tile {
    background: var(--bg-recessed);
    border-radius: 9px;
    padding: 9px 11px;
}

/* ===========================
   SETTINGS PAGE
   =========================== */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
    max-width: 860px;
}

.settings-card-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
}

.settings-avatar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.settings-avatar {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2a3350, #1a2138);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: #b9c2da;
    flex: none;
}

.settings-field {
    margin-bottom: 14px;
}

.settings-field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: 5px;
}

.settings-value {
    background: var(--bg-recessed);
    border: 1px solid var(--color-border);
    border-radius: 9px;
    padding: 9px 12px;
    color: var(--color-text-primary);
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

/* ===========================
   SIDEBAR (MERIDIAN DEALER TERMINAL)
   =========================== */
.sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--bg-sidebar);
}

/* Brand / logo block */
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 22px 22px 18px;
}

.sidebar-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, #7c6cff, #5b46e6);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(124, 108, 255, 0.4);
    flex: none;
    color: #fff;
}

.sidebar-brand {
    line-height: 1;
}

.sidebar-brand .logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.04em;
    color: #fff;
}

.sidebar-brand .logo-sub {
    display: block;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    color: #5a6178;
    font-weight: 600;
    margin-top: 3px;
}

.sidebar-logo .logo-icon {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 16px;
}

/* Nav */
.sidebar-nav {
    padding: 0 14px;
    flex: 1;
    overflow-y: auto;
}

.sidebar-section {
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--color-text-faint);
    font-weight: 700;
    padding: 16px 10px 8px;
    text-transform: uppercase;
}

.sidebar-section:first-child {
    padding-top: 6px;
}

/* Links */
.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;
    color: #9aa3b8;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 1px;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-primary);
    text-decoration: none;
}

.sidebar-link .mud-icon-root {
    position: relative;
    font-size: 18px;
    flex: none;
}

.sidebar-link-label {
    position: relative;
    flex: 1;
}

.sidebar-link-active {
    color: var(--color-text-primary);
    background: var(--accent-primary-subtle);
}

.sidebar-link-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: var(--accent-primary);
}

.sidebar-link-badge {
    position: relative;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    background: var(--color-warning-subtle);
    color: var(--color-warning);
    padding: 1px 6px;
    border-radius: 6px;
}

/* Collapsed */
.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding: 9px 0;
}

/* Footer / user card */
.sidebar-footer {
    padding: 14px;
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar-user {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.sidebar-user .user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.sidebar-user .user-role {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* ===========================
   HEADER BAR (screen title + notifications)
   =========================== */
.app-header {
    height: var(--topbar-height);
    flex: none;
    background: rgba(11, 15, 26, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 26px;
    gap: 18px;
    position: sticky;
    top: 0;
    z-index: 30;
}

.app-header-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.app-header-sub {
    font-size: 12.5px;
    color: var(--color-text-muted);
}

.app-header-spacer {
    flex: 1;
}

.app-header-bell {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.app-header-bell:hover {
    color: var(--color-text-primary);
    border-color: rgba(255, 255, 255, 0.16);
}

.app-header-bell-dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-warning);
    border: 2px solid var(--bg-sidebar);
}

/* =====================================================================
   COLOURFUL THEME ENHANCEMENTS  (design-only; additive, appended last)
   ===================================================================== */

/* Ambient depth behind the whole app */
body {
    background-color: var(--bg-base);
    background-image:
        radial-gradient(900px 480px at 8% -6%, rgba(124, 108, 255, 0.12), transparent 60%),
        radial-gradient(760px 460px at 102% 4%, rgba(34, 211, 238, 0.08), transparent 55%),
        radial-gradient(820px 520px at 60% 108%, rgba(52, 211, 153, 0.07), transparent 55%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Sidebar: subtle vertical depth + brighter brand glow */
.sidebar-inner {
    background:
        linear-gradient(180deg, rgba(124, 108, 255, 0.06), transparent 220px),
        var(--bg-sidebar);
}

.sidebar-logo-mark {
    background: linear-gradient(135deg, #8b7bff, #5b46e6 70%, #22d3ee);
    box-shadow: 0 6px 18px rgba(124, 108, 255, 0.45);
}

/* Colourful nav icons — each item gets its own accent (CSS only, by order).
   Links are <a>; section headings are <div>, so :nth-of-type counts anchors. */
.sidebar-nav a.sidebar-link .mud-icon-root { transition: transform var(--transition-fast); }
.sidebar-nav a.sidebar-link:hover .mud-icon-root { transform: scale(1.12); }

.sidebar-nav a.sidebar-link:nth-of-type(1)  .mud-icon-root { color: #5b8def; } /* Dashboard */
.sidebar-nav a.sidebar-link:nth-of-type(2)  .mud-icon-root { color: #22d3ee; } /* Static IP */
.sidebar-nav a.sidebar-link:nth-of-type(3)  .mud-icon-root { color: #34d399; } /* Demat Accounts */
.sidebar-nav a.sidebar-link:nth-of-type(4)  .mud-icon-root { color: #9d8cff; } /* Groups */
.sidebar-nav a.sidebar-link:nth-of-type(5)  .mud-icon-root { color: #f5a524; } /* Positions */
.sidebar-nav a.sidebar-link:nth-of-type(6)  .mud-icon-root { color: #f472b6; } /* Watchlist */
.sidebar-nav a.sidebar-link:nth-of-type(7)  .mud-icon-root { color: #2dd4bf; } /* Order Manager */
.sidebar-nav a.sidebar-link:nth-of-type(8)  .mud-icon-root { color: #fb923c; } /* Order History */
.sidebar-nav a.sidebar-link:nth-of-type(9)  .mud-icon-root { color: #a78bfa; } /* Activity Log */
.sidebar-nav a.sidebar-link:nth-of-type(10) .mud-icon-root { color: #94a3b8; } /* Settings */
.sidebar-nav a.sidebar-link:nth-of-type(11) .mud-icon-root { color: #f87171; } /* Dealers */

/* Active nav item — glowing gradient pill + gradient accent bar */
.sidebar-link-active {
    background: linear-gradient(90deg, rgba(124, 108, 255, 0.20), rgba(124, 108, 255, 0.06));
    box-shadow: inset 0 0 0 1px rgba(124, 108, 255, 0.22);
}

.sidebar-link-active::before {
    background: linear-gradient(180deg, #9d8cff, #7c6cff);
    box-shadow: 0 0 10px rgba(124, 108, 255, 0.8);
}

/* Table header — subtle gradient sheen */
.meridian-table th {
    background: linear-gradient(180deg, #161e33, var(--bg-elevated));
}

/* Status chips — add a hairline border so colours pop */
.chip { border: 1px solid currentColor; }
.chip-success { border-color: rgba(52, 211, 153, 0.35); }
.chip-danger  { border-color: rgba(248, 113, 113, 0.35); }
.chip-warning { border-color: rgba(245, 165, 36, 0.35); }
.chip-info    { border-color: rgba(124, 108, 255, 0.35); }
.chip-neutral { border-color: rgba(255, 255, 255, 0.10); }

/* Primary / danger buttons — gradient fill + soft glow + hover lift */
.dm-btn-primary {
    background: linear-gradient(135deg, #8b7bff, #6a58f0);
    box-shadow: 0 4px 14px rgba(124, 108, 255, 0.35);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}
.dm-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #9d8cff, #7c6cff);
    box-shadow: 0 6px 20px rgba(124, 108, 255, 0.5);
    transform: translateY(-1px);
}
.dm-btn-danger {
    background: linear-gradient(135deg, #f2545f, #d9434f);
    box-shadow: 0 4px 14px rgba(217, 67, 79, 0.32);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.dm-btn-danger:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(217, 67, 79, 0.45);
}

/* Stat / KPI cards — gradient surface, colour accent strip, hover lift */
.stat-card, .card {
    background: linear-gradient(180deg, #131a2b, var(--bg-surface));
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.stat-card {
    position: relative;
    overflow: hidden;
}
.stat-card::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #9d8cff, #22d3ee);
}
.stat-card:hover, .card:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 108, 255, 0.28);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

/* Inputs — accent focus glow */
.dm-input:focus, .dm-select:focus, .grid-filter-input:focus {
    box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.22);
}

/* Scrollbar thumb — brand-tinted */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3a3570, #2a2f52);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #4a43a0, #363c6b);
}

/* Top header — faint gradient underlay */
.app-header {
    background:
        linear-gradient(90deg, rgba(124, 108, 255, 0.06), transparent 40%),
        rgba(11, 15, 26, 0.85);
}

/* =====================================================================
   GRID VISIBILITY / HIGHLIGHT  (design-only)
   ===================================================================== */

/* Framed, elevated table with an accent hairline */
.table-container {
    border: 1px solid rgba(124, 108, 255, 0.16);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    background:
        linear-gradient(180deg, rgba(124, 108, 255, 0.05), transparent 90px),
        var(--bg-surface);
}

/* Louder, accent-tinted header row */
.meridian-table thead th {
    color: #c7ccff;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.07em;
    background: linear-gradient(180deg, #1a2440, #131a2e);
    border-bottom: 2px solid rgba(124, 108, 255, 0.38);
}

/* Zebra striping so rows are easy to scan */
.meridian-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.018);
}

/* Clear, colourful row hover with a left accent edge */
.meridian-table tbody tr:hover td {
    background: rgba(124, 108, 255, 0.12);
}
.meridian-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--accent-primary);
}

/* Slightly stronger row separators */
.meridian-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Sorted column: tint the whole column header cell for visibility */
.meridian-table th.sorted {
    background: linear-gradient(180deg, rgba(124, 108, 255, 0.22), rgba(124, 108, 255, 0.10));
    color: #fff;
}

/* Pagination footer picks up the accent frame */
.table-pagination {
    border-top: 1px solid rgba(124, 108, 255, 0.16);
}

/* KPI value numbers in a lively accent-gradient (dashboard/detail tiles use .stat-card-value) */
.stat-card-value {
    background: linear-gradient(135deg, #c7ccff, #8b7bff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Unhandled-error banner ───────────────────────────────────────────────────
   Blazor toggles #blazor-error-ui to visible when an exception escapes a
   component. Hidden by default; styled dark to match the app rather than the
   default template's lightyellow strip. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    padding: 12px 20px;
    background: #2a1216;
    border-top: 1px solid #f87171;
    color: #ffd9dd;
    font-size: 13.5px;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .45);
}

#blazor-error-ui .reload {
    margin-left: 14px;
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

#blazor-error-ui .dismiss {
    float: right;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #ffd9dd;
}

/* =====================================================================
   SIDEBAR — COLLAPSED (icon-rail) FIXES
   In the 56px collapsed rail the logo block (padding 22px + 34px mark)
   and the two footer icon buttons in a row were both wider than the rail
   — which forced a horizontal scrollbar and shoved content off-centre.
   Contain the overflow, and centre / stack instead of overflowing.
   ===================================================================== */
.sidebar-inner,
.sidebar-nav {
    overflow-x: hidden;
}

.sidebar-collapsed .sidebar-logo {
    justify-content: center;
    padding: 20px 0 16px;
}

.sidebar-collapsed .sidebar-nav {
    padding: 0 8px;
}

.sidebar-collapsed .sidebar-footer {
    flex-direction: column;
    gap: 8px;
    padding: 12px 6px;
}

/* =====================================================================
   HEADER NOTIFICATIONS PANEL (bell dropdown)
   ===================================================================== */
.notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-width: 86vw;
    background: var(--bg-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    z-index: 50;
    overflow: hidden;
}

.notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary);
}

.notif-clear {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 6px;
}

.notif-clear:hover {
    color: var(--color-text-primary);
    background: var(--bg-elevated);
}

.notif-list {
    max-height: 360px;
    overflow-y: auto;
}

.notif-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.notif-item {
    display: flex;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--color-border-subtle);
}

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

.notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex: none;
}

.notif-msg {
    font-size: 13px;
    color: var(--color-text-primary);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.notif-time {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 3px;
}

/* =====================================================================
   LIGHT THEME
   The whole UI is driven by the design tokens at the top of this file, so
   flipping their values under :root[data-theme="light"] re-themes every
   class-based surface (sidebar, header, cards, tables, modals, inputs…).
   The override block that follows fixes the handful of rules that hardcode
   dark hex/gradients (mostly the "colourful enhancements") which a token
   swap alone can't reach. The data-theme attribute is set on <html> in
   index.html before first paint.
   ===================================================================== */
:root[data-theme="light"] {
    --bg-base: #eef1f7;
    --bg-sidebar: #ffffff;
    --bg-surface: #ffffff;
    --bg-recessed: #f2f4f9;
    --bg-elevated: #e8ecf4;

    --accent-primary: #6d5cf0;
    --accent-primary-hover: #5b46e6;
    --accent-primary-light: #6d5cf0;
    --accent-primary-subtle: rgba(109, 92, 240, 0.10);

    --color-success: #0f9463;
    --color-success-subtle: rgba(15, 148, 99, 0.12);
    --color-warning: #b7791f;
    --color-warning-subtle: rgba(183, 121, 31, 0.14);
    --color-danger: #dc2626;
    --color-danger-solid: #dc2626;
    --color-danger-subtle: rgba(220, 38, 38, 0.10);
    --color-info: #2563eb;
    --color-buy: #128a4e;

    --color-text-primary: #1a2033;
    --color-text-secondary: #566079;
    --color-text-muted: #7b8499;
    --color-text-faint: #98a1b5;

    --color-border: rgba(15, 23, 42, 0.10);
    --color-border-subtle: rgba(15, 23, 42, 0.06);
    --color-border-strong: rgba(15, 23, 42, 0.16);

    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.12);

    color-scheme: light;
}

/* ---- Overrides for rules that hardcode dark values ---- */

/* Ambient page wash — soft coloured tints over a light base instead of the dark version. */
:root[data-theme="light"] body {
    background-image:
        radial-gradient(900px 480px at 8% -6%, rgba(124, 108, 255, 0.10), transparent 60%),
        radial-gradient(760px 460px at 102% 4%, rgba(34, 211, 238, 0.08), transparent 55%),
        radial-gradient(820px 520px at 60% 108%, rgba(52, 211, 153, 0.07), transparent 55%);
}

/* Sidebar links + brand text (were tuned for a dark rail) */
:root[data-theme="light"] .sidebar-link { color: var(--color-text-secondary); }
:root[data-theme="light"] .sidebar-brand .logo-text,
:root[data-theme="light"] .sidebar-logo .logo-icon { color: var(--color-text-primary); }

/* Header bar — was a translucent near-black; make it translucent white */
:root[data-theme="light"] .app-header {
    background:
        linear-gradient(90deg, rgba(124, 108, 255, 0.06), transparent 40%),
        rgba(255, 255, 255, 0.85);
}
:root[data-theme="light"] .app-header-title { color: var(--color-text-primary); }

/* Cards / stat tiles — kill the dark-topped gradient, use a flat surface */
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .card {
    background: var(--bg-surface);
}

/* KPI numbers used a very light gradient clipped to text — invisible on white */
:root[data-theme="light"] .stat-card-value {
    background: none;
    -webkit-text-fill-color: var(--color-text-primary);
    color: var(--color-text-primary);
}

/* Tables — dark gradient header + frame → light surface */
:root[data-theme="light"] .table-container {
    background: var(--bg-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}
:root[data-theme="light"] .meridian-table th,
:root[data-theme="light"] .meridian-table thead th {
    background: var(--bg-elevated);
    color: var(--color-text-secondary);
    border-bottom: 2px solid var(--color-border-strong);
}
:root[data-theme="light"] .meridian-table th.sorted {
    background: linear-gradient(180deg, rgba(109, 92, 240, 0.16), rgba(109, 92, 240, 0.08));
    color: var(--accent-primary);
}
:root[data-theme="light"] .meridian-table td {
    border-bottom: 1px solid var(--color-border-subtle);
}
:root[data-theme="light"] .meridian-table tbody tr:nth-child(even) td {
    background: rgba(15, 23, 42, 0.025);
}
:root[data-theme="light"] .meridian-table tbody tr:hover td {
    background: rgba(109, 92, 240, 0.10);
}

/* Skeleton shimmer + scrollbar were dark-on-dark */
:root[data-theme="light"] .skeleton {
    background: linear-gradient(90deg, var(--bg-elevated) 25%, #d8deea 50%, var(--bg-elevated) 75%);
    background-size: 800px 100%;
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #c4cbdb;
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #aeb7cb;
}

/* Login — the form/brand panels flip to light, so their white text needs darkening */
:root[data-theme="light"] .login-headline,
:root[data-theme="light"] .login-logo-text,
:root[data-theme="light"] .login-card-head h2 {
    color: var(--color-text-primary);
}

/* Settings avatar tile was a dark gradient */
:root[data-theme="light"] .settings-avatar {
    background: linear-gradient(135deg, #e6e9f5, #d3d9ec);
    color: var(--accent-primary);
}

/* Native date picker chrome should match the theme (was forced dark inline) */
:root[data-theme="light"] input[type="date"] {
    color-scheme: light;
}

/* =====================================================================
   MARKET INDEX RIBBON (top of shell — Nifty, Sensex, sectoral, …)
   ===================================================================== */
.indices-bar {
    display: flex;
    align-items: center;
    height: 40px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
    white-space: nowrap;
}

/* Continuously scrolling ticker tape. The track holds two identical copies, so animating it
   from 0 to -50% moves exactly one copy width and loops with no visible seam. */
.indices-track {
    display: inline-flex;
    align-items: center;
    flex: none;
    animation: indices-scroll 35s linear infinite;
    will-change: transform;
}

.indices-bar:hover .indices-track {
    animation-play-state: paused;   /* pause so a dealer can read a value */
}

.indices-copy {
    display: inline-flex;
    align-items: center;
}

@keyframes indices-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .indices-track { animation: none; }
    .indices-bar { overflow-x: auto; }   /* let it be scrolled by hand instead */
}

.index-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    margin-right: 24px;             /* spacing lives on the chip so the two copies tile seamlessly */
    flex: none;
}

.index-name {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
}

.index-ltp {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.index-chg {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
}