/* =====================================================
   Fysprofilen - shared styles
   SOK visual identity (GrafiskProfil) + layout helpers for the MudBlazor UI.
   Page-specific CSS lives in the page with page-unique class names.
   ===================================================== */

/* CSS Custom Properties - SOK Color Palette */
:root {
    /* Blue Scale */
    --sok-blue-50: #DEE9FF;
    --sok-blue-100: #C0D5FF;
    --sok-blue-200: #C0D5FF;
    --sok-blue-300: #6A97F7;
    --sok-blue-400: #3D76FF;
    --sok-blue-500: #0153EF;
    --sok-blue-600: #052EEC;
    --sok-blue-700: #1520AA;
    --sok-blue-800: #040E5E;
    --sok-blue-900: #040727;
    
    /* Gold Scale (Accent) */
    --sok-gold-50: #FFF9ED;
    --sok-gold-100: #FFF3D3;
    --sok-gold-200: #FFEEAE;
    --sok-gold-300: #FFE570;
    --sok-gold-400: #F9DA09;
    --sok-gold-500: #E2C600;
    --sok-gold-600: #C8B100;
    --sok-gold-700: #B4A134;
    --sok-gold-800: #918536;
    --sok-gold-900: #746B3C;
    
    /* Silver Scale */
    --sok-silver-50: #F1F1F1;
    --sok-silver-100: #D4D4D4;
    --sok-silver-200: #B8B8B8;
    --sok-silver-300: #9D9D9D;
    --sok-silver-400: #838383;
    --sok-silver-500: #6A6A6A;
    --sok-silver-600: #545252;
    --sok-silver-700: #3C3B3B;
    --sok-silver-800: #252525;
    --sok-silver-900: #111111;
    
    /* Medal Colors */
    --sok-bronze: #A47E24;
    
    /* Semantic Colors */
    --sok-primary: var(--sok-blue-900);
    --sok-secondary: var(--sok-blue-600);
    --sok-accent: var(--sok-gold-400);
    --sok-background: var(--sok-blue-50);
    --sok-surface: #FFFFFF;
    --sok-text-light: #FFFFFF;
    --sok-text-dark: var(--sok-blue-900);
}

/* Base styles. MudBlazor.min.css (loaded first) resets margin/padding/border on every element,
   so plain HTML elements have no default spacing: use MudBlazor components or explicit CSS. */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sok-text-dark);
    background-color: var(--sok-background);
}


/* =====================================================
   App shell (MudLayout) - see Components/Layout/MainLayout.razor
   ===================================================== */
.sok-appbar {
    border-bottom: 3px solid var(--sok-accent);
}

.sok-user-button .sok-user-name {
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sok-user-menu-header {
    padding: 8px 16px 12px;
}

.sok-drawer {
    background: linear-gradient(180deg, var(--sok-blue-900) 0%, var(--sok-blue-800) 100%) !important;
}

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

.sok-nav-logo {
    width: 40px;
    height: auto;
    border-radius: 6px;
}

.sok-nav-title {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sok-nav {
    padding: 8px 0 24px;
}

.sok-nav-section {
    padding: 20px 20px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.sok-nav .mud-nav-link {
    min-height: 44px; /* comfortable touch target */
}

.sok-nav .mud-nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sok-nav .mud-nav-link.active {
    background: rgba(249, 218, 9, 0.12);
    box-shadow: inset 3px 0 0 var(--sok-accent);
}

.sok-content {
    padding: 24px 32px 48px;
    max-width: 1600px;
    /* Safety net: a too-wide element (e.g. a table on a page not yet converted) scrolls inside the
       content area instead of widening the whole page and pushing the app bar off screen. */
    overflow-x: auto;
}

.sok-form-dialog .mud-dialog-actions {
    padding: 8px 24px 16px;
}

@media (max-width: 960px) {
    .sok-content {
        padding: 16px 16px 40px;
    }
}

/* =====================================================
   Shared page components - see Components/Shared
   ===================================================== */
.sok-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 20px;
}

.sok-page-header-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.sok-page-header-text {
    min-width: 0;
}

.sok-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sok-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.sok-filter-bar .sok-filter-grow {
    flex: 1 1 280px;
}

.sok-filter-bar .sok-filter-fixed {
    flex: 0 1 200px;
}

.sok-table {
    overflow: hidden; /* keep rounded corners */
}

.sok-table .mud-table-head .mud-table-cell {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.sok-row-actions {
    white-space: nowrap;
    text-align: right;
}

.sok-chip {
    font-weight: 600;
    margin: 0;
}

/* FocusOnNavigate moves focus to the h1 for screen readers; no visible ring needed on a heading */
.sok-content h1:focus {
    outline: none;
}

/* Lists with a hairline between items */
.sok-divided-list {
    padding: 0;
}

.sok-divided-list .mud-list-item + .mud-list-item {
    border-top: 1px solid var(--mud-palette-divider);
}

.sok-divided-list .mud-list-item {
    padding-left: 8px;
    padding-right: 4px;
}

.sok-min0 {
    min-width: 0;
}

.sok-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sok-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 16px;
    text-align: center;
}

/* Phones: filters full width, stacked table rows become cards, form dialogs full screen */
@media (max-width: 599.95px) {
    .sok-page-header-actions,
    .sok-filter-bar .sok-filter-grow {
        flex: 1 1 100%;
    }

    .sok-page-header-actions .mud-button-root {
        flex: 1 1 auto; /* share a row when they fit, otherwise wrap to full width */
    }

    .sok-filter-bar .sok-filter-fixed {
        flex: 1 1 calc(50% - 6px); /* two per row */
        min-width: 0;
    }

    .sok-hide-xs {
        display: none !important;
    }

    .sok-break {
        overflow-wrap: anywhere;
    }

    .sok-table.mud-table {
        background: transparent;
    }

    /* A <table> grows to its widest unbreakable content; block layout keeps the cards inside the viewport */
    .sok-table .mud-table-root,
    .sok-table .mud-table-body,
    .sok-table .mud-table-body .mud-table-row {
        display: block;
        width: 100%;
    }

    .sok-table .mud-table-body .mud-table-row,
    .sok-table .mud-table-body tr {
        display: block;
        width: 100%;
    }

    .sok-table .mud-table-empty-row {
        display: block;
        width: 100%;
        background: var(--mud-palette-surface);
        border-radius: var(--mud-default-borderradius);
    }

    .sok-table .mud-table-body .mud-table-cell::before {
        font-size: 0.8125rem;
        font-weight: 400;
        color: var(--mud-palette-text-secondary);
    }

    .sok-table .mud-table-body .mud-table-row {
        background: var(--mud-palette-surface);
        border-radius: var(--mud-default-borderradius);
        margin-bottom: 8px;
        padding: 8px 4px;
    }

    .sok-table .mud-table-body .mud-table-cell {
        border-bottom: none !important;
        padding: 4px 12px;
    }

    .sok-table .mud-table-body .mud-table-cell.sok-row-actions {
        justify-content: flex-end;
    }

    .mud-dialog.sok-form-dialog {
        width: 100%;
        max-width: 100% !important;
        height: 100%;
        max-height: 100% !important;
        margin: 0;
        border-radius: 0;
    }

    .mud-dialog.sok-form-dialog .mud-dialog-content {
        flex: 1 1 auto;
        overflow-y: auto;
    }
}

/* Muted text. In this app <MudText Color="Color.Secondary"> means "secondary text" (subtitles, captions,
   helper lines). MudBlazor would colour it with the secondary BRAND colour, which in the SOK theme is the
   same navy as normal text, so nothing looked muted. Scoped to typography: chips, icons and buttons with
   Color.Secondary keep the navy brand colour. */
.mud-typography.mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
}

/* Prevent sideways page scroll and iOS text inflation */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* Shown by Routes.razor while authorization is being checked (outside any layout) */
.sok-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    color: var(--sok-blue-600);
}

.sok-surface {
    background: var(--mud-palette-surface);
}

.mud-tabs .mud-tab {
    text-transform: none;
    font-size: 0.9375rem;
    font-weight: 600;
    min-width: 0;
}

.sok-stat-link {
    transition: box-shadow 0.15s;
}

.sok-stat-link:hover {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

/* Scrollable list inside a panel */
.sok-scroll-list {
    max-height: 400px;
    overflow-y: auto;
}

/* Numeric table cells */
.sok-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* sok-table placed inside a white MudPaper: phone cards need an outline to separate */
@media (max-width: 599.95px) {
    .mud-paper .sok-table .mud-table-body .mud-table-row {
        border: 1px solid var(--mud-palette-divider);
    }
}

/* Monospace editor fields (formulas) */
.sok-code textarea,
.sok-code input {
    font-family: Consolas, 'Cascadia Mono', 'Courier New', monospace;
    font-size: 0.875rem;
}

/* Master list rows where the page decides what is selected (MudList ReadOnly="true" + OnClick on the item).
   MudList's own selection highlights the clicked row immediately and cannot be vetoed (e.g. by an
   "unsaved changes" confirm), so master–detail lists use these classes instead. */
.sok-pick-item {
    cursor: pointer;
}

.sok-pick-item:hover {
    background: var(--mud-palette-action-default-hover);
}

.sok-pick-item-selected,
.sok-pick-item-selected:hover {
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}

/* Charts: the zoom/pan toolbar overlaps the chart title on phones and is not usable by touch anyway */
@media (max-width: 599.95px) {
    .apexcharts-toolbar {
        display: none !important;
    }
}