/* wwwroot/css/site-modern.css */
/*
   Table of contents:
     1.  Design Tokens
     2.  Typography / Base
     3.  Layout
     4.  Cards
     5.  Tables
     6.  Buttons
     7.  Badges
     8.  Form Fields
     9.  Tabs
     10. Pagination
     11. Bootstrap Color Overrides
     12. Navigation Sidebar (incl. collapsed slim mode)
     13. Images / Spinner
*/

/* ======================================================== */
/* 1. DESIGN TOKENS                                         */
/* ======================================================== */
:root {
    /* Neutral palette: zinc scale */
    --zinc-950: #09090b; /* Darkest surface: sidebar / nav background */
    --zinc-900: #18181b; /* Primary: body text, primary buttons, spinner accent */
    --zinc-800: #27272a; /* Primary hover, sidebar divider */
    --zinc-600: #52525b; /* Secondary */
    --zinc-500: #71717a; /* Muted / secondary text */
    --zinc-400: #a1a1aa; /* Data on charts */
    --zinc-300: #d4d4d8; /* Secondary button borders */
    --zinc-200: #e4e4e7; /* Default border, spinner track, chart gridlines */
    --zinc-100: #f4f4f5; /* App background, image placeholder fill */
    /* Slate (sidebar pop-out surfaces only) */
    --slate-900: #0f172a;
    --slate-800: #1e293b;

    /* Semantic status colors */
    --success: #198754; /* Positive outcome, valid input, saved successfully */
    --warning: #ffc107; /* Caution, non-blocking issue, needs attention */
    --danger: #dc3545; /* Error, destructive action, invalid input */
    --info: #0dcaf0;

    /* Chart colors (thresholds use the semantic colors above) */
    --chart-fit-line: #ef4444; /* Fit lines and points excluded from the fit */

    /* Semantic aliases used throughout this file */
    --primary: var(--zinc-900);
    --primary-hover: var(--zinc-800);
    --secondary: var(--zinc-600);
    --bg-app: var(--zinc-100);
    --surface: #ffffff;
    --text-dark: var(--zinc-900);
    --text-muted: var(--zinc-500);
    --border-color: var(--zinc-200);
    --radius-sm: 4px;
    --radius-md: 8px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* ======================================================== */
/* 2. TYPOGRAPHY / BASE                                      */
/* ======================================================== */
body {
    background-color: var(--bg-app);
    color: var(--text-dark);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ======================================================== */
/* 3. LAYOUT                                                */
/* ======================================================== */
#mainContentContainer {
    background-color: var(--bg-app);
    min-height: 100vh;
}

.container, .container-fluid {
    padding-bottom: 2rem;
}

/* ======================================================== */
/* 4. CARDS (guide: Cards)                                   */
/* ======================================================== */
.card-modern {
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    transition: box-shadow 0.2s;
}

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

/* Card header */
.card-modern-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

    .card-modern-header h5 {
        font-weight: 600;
    }

    .card-modern-header i {
        color: var(--text-muted); /* neutral/navigational icon, not decorative */
    }

/* ======================================================== */
/* 5. TABLES                                                */
/* ======================================================== */
.table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

    .table thead th {
        background-color: var(--zinc-100);
        color: var(--secondary);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.7rem !important; /* Smaller headers */
        letter-spacing: 0.05em;
        border-bottom: 2px solid var(--border-color);
        padding: 0.6rem 0.5rem !important;
    }

    .table tbody td {
        vertical-align: middle;
        padding: 0.4rem 0.5rem !important; /* Tighter padding */
        border-bottom: 1px solid var(--border-color);
        color: var(--text-dark) !important;
        font-size: 0.8rem !important; /* Smaller data text to fit more */
    }

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

    .table tbody tr:hover {
        background-color: var(--zinc-100);
    }

/* ======================================================== */
/* 6. BUTTONS (guide: Buttons)                              */
/* All button classes live here: base, sizing, the solid    */
/* Primary/Secondary variants, and the outline variants     */
/* (Secondary/Update/Delete/Disable) that fill on hover.    */
/* ======================================================== */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    transition: all 0.2s ease-in-out;
}

.btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
}

a.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

/* Primary Button (Black/Zinc) */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: var(--shadow-sm);
}

    .btn-primary:hover {
        background-color: var(--primary-hover) !important;
        border-color: var(--primary-hover) !important;
        transform: translateY(-1px);
    }

/* Secondary Button (cancel / back) */
.btn-secondary, .btn-light {
    background-color: var(--zinc-100) !important;
    color: var(--text-dark) !important;
    border-color: var(--zinc-300) !important;
}

    .btn-secondary:hover, .btn-light:hover {
        background-color: var(--zinc-200) !important;
        border-color: var(--zinc-400) !important;
    }

/* Outline: table actions and most secondary buttons */
.btn-outline-secondary {
    color: var(--secondary) !important;
    border-color: var(--zinc-300) !important;
}

    .btn-outline-secondary:hover {
        background-color: var(--zinc-100) !important;
        color: var(--text-dark) !important;
    }

/* Outline action buttons (Update / Delete / Disable). Outline at rest, fill on hover.
   Tied to the semantic tokens so the buttons and the matching badges can never drift apart. */
.btn-outline-success {
    color: var(--success) !important;
    border-color: var(--success) !important;
    background-color: transparent !important;
}

    .btn-outline-success:hover {
        background-color: var(--success) !important;
        border-color: var(--success) !important;
        color: #fff !important;
    }

.btn-outline-danger {
    color: var(--danger) !important;
    border-color: var(--danger) !important;
    background-color: transparent !important;
}

    .btn-outline-danger:hover {
        background-color: var(--danger) !important;
        border-color: var(--danger) !important;
        color: #fff !important;
    }

.btn-outline-warning {
    color: var(--warning) !important;
    border-color: var(--warning) !important;
    background-color: transparent !important;
}

    .btn-outline-warning:hover {
        background-color: var(--warning) !important;
        border-color: var(--warning) !important;
        color: var(--zinc-900) !important;
    }

/* Groups buttons even if they're inside a span */
.btn-group > span {
    display: inline-flex;
}

    .btn-group > span:not(:first-child) {
        margin-left: -1px;
    }

    .btn-group > span:not(:last-child) > .btn {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .btn-group > span:not(:first-child) > .btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    /* Lift a hovered/focused wrapped button's border above its neighbours, the
       same way Bootstrap raises grouped .btn siblings. */
    .btn-group > span > .btn:hover,
    .btn-group > span > .btn:focus {
        position: relative;
        z-index: 1;
    }

/* ======================================================== */
/* 7. BADGES                                                */
/* Semantic chips. Color is always paired with the label    */
/* text; status badges should also carry an icon so meaning */
/* never rests on color alone.                              */
/* ======================================================== */
.badge.badge-success,
.badge.badge-warning,
.badge.badge-danger {
    background-color: color-mix(in srgb, var(--badge-color) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--badge-color) 45%, #fff);
    color: color-mix(in srgb, var(--badge-color) 60%, #000);
    font-weight: 500;
}

.badge.badge-success { --badge-color: var(--success); }
.badge.badge-warning { --badge-color: var(--warning); }
.badge.badge-danger { --badge-color: var(--danger); }

.badge.badge-processing {
    background-color: var(--zinc-900);
    border: 1px solid var(--zinc-900);
    color: #fff;
    font-weight: 500;
}

.badge.badge-biomarker,
.badge.badge-neutral {
    background-color: var(--zinc-100);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    font-weight: 500;
}

/* ======================================================== */
/* 8. FORM FIELDS                                           */
/* ======================================================== */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    box-shadow: none;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.1);
    }

    .form-select {
        padding-right: 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* metric-field error visualization (owned by MetricFieldTagHelper): a clean danger border
   on the control (.is-invalid) plus a "<label> is required." */
.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--danger);
}

    /* Text inputs: drop Bootstrap's in-field "!" icon for a border-only look. */
    .form-control.is-invalid {
        background-image: none;
    }

    /* Selects: drop the "!" icon but keep the dropdown chevron (Bootstrap's default). */
    .form-select.is-invalid {
        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='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

    .form-control.is-invalid:focus, .form-select.is-invalid:focus {
        border-color: var(--danger);
        box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
    }

.metric-field-error {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--danger);
}

    /* Empty slot (no active error) collapses so it takes no space. */
    .metric-field-error:empty {
        display: none;
    }

/* ======================================================== */
/* 9. TABS                                                  */
/* ======================================================== */
.nav-pills .nav-link {
    border-radius: var(--radius-sm);
    color: var(--secondary);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
}

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

/* ======================================================== */
/* 10. PAGINATION                                           */
/* ======================================================== */
.pagination {
    margin-bottom: 0;
}

.page-link {
    color: var(--text-dark);
    border-color: var(--border-color);
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

    .page-link:hover, .page-link:focus {
        color: var(--primary);
        background-color: var(--zinc-100);
        border-color: var(--zinc-300);
        box-shadow: none; /* Removes the blue focus ring */
    }

/* The active selected page */
.page-item.active .page-link {
    z-index: 3;
    color: #ffffff;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Disabled pages (e.g., the ellipsis ...) */
.page-item.disabled .page-link {
    color: var(--text-muted);
    pointer-events: none;
    background-color: transparent;
    border-color: transparent;
}

/* ======================================================== */
/* 11. BOOTSTRAP COLOR OVERRIDES                            */
/* ======================================================== */
.text-primary {
    color: var(--primary) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
    color: #fff !important;
}

.border-primary {
    border-color: var(--border-color) !important;
}

/* ======================================================== */
/* 12. NAVIGATION SIDEBAR                                   */
/* ======================================================== */
#sideMenuContainer {
    background: var(--zinc-950) !important;
    border-right: 1px solid var(--zinc-800) !important;
}

/* --- COLLAPSED SIDEBAR (SLIM MODE + POP-OUT MENUS) --- */

/* Force containers to let absolute pop-ups break out of bounds */
html.sidebar-collapsed #sideMenuContainer,
html.sidebar-collapsed #sideMenu,
html.sidebar-collapsed .sidebar-scroll-area {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    overflow: visible !important;
}

html.sidebar-collapsed #mainContentContainer {
    margin-left: 70px !important;
}

/* Hide all text and chevrons completely */
html.sidebar-collapsed .sidebar-header-container .sidebar-text, /* <--- Hides "Metric" */
html.sidebar-collapsed .menu-header-row .sidebar-text,
html.sidebar-collapsed .menu-header-row .arrow,
html.sidebar-collapsed .account-btn-content .sidebar-text,
html.sidebar-collapsed .menu-sub-item a {
    display: none !important;
}

/* Hide the logo image when collapsed */
html.sidebar-collapsed .sidebar-header-container img {
    display: none !important;
}

/* Restructure the header to stack logo and toggle button */
html.sidebar-collapsed .sidebar-header-container {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 15px 0 !important;
}

html.sidebar-collapsed .sidebar-logo-dots {
    margin-right: 0 !important;
}

html.sidebar-collapsed #sidebarToggleBtn {
    margin-top: 15px;
}

/* --- Centering Icons --- */
html.sidebar-collapsed .menu-header-content,
html.sidebar-collapsed .account-btn-content {
    justify-content: center !important;
    width: 100%;
}

html.sidebar-collapsed .sidebar-icon-margin {
    margin: 0 !important;
    font-size: 1.35rem !important; /* Emphasize icon since it's the only UI */
}

/* --- Sidebar Sub-Menu Pop-outs --- */
html.sidebar-collapsed .nav-item-container {
    position: relative; /* Anchor for absolute menu */
}

html.sidebar-collapsed .menu-collapse {
    display: none !important; /* Force hide normal accordion behavior */
}

    html.sidebar-collapsed .menu-collapse.show {
        display: block !important;
        position: absolute;
        top: 0;
        left: 70px;
        width: 260px;
        background-color: var(--slate-900);
        border: 1px solid var(--slate-800);
        border-left: none;
        border-radius: 0 8px 8px 0;
        box-shadow: 4px 4px 15px rgba(0,0,0,0.5);
        z-index: 1060; /* Layer on top of main data tables */
        padding: 0.5rem 0;
    }

        /* Bring back the text specifically inside the pop-out */
        html.sidebar-collapsed .menu-collapse.show .menu-sub-item a {
            display: inline-block !important;
        }

        html.sidebar-collapsed .menu-collapse.show .sidebar-icon-margin {
            margin-right: 0.5rem !important;
            font-size: 1.05rem !important;
        }

        html.sidebar-collapsed .menu-collapse.show .sub-item-content {
            justify-content: flex-start !important;
            padding: 8px 16px !important;
        }

/* --- Account Menu Pop-out --- */
/* Remove default Bootstrap dropdown chevron */
html.sidebar-collapsed .account-btn::after {
    display: none !important;
}

html.sidebar-collapsed .account-btn {
    padding: 0.75rem 0 !important;
}

html.sidebar-collapsed .sidebar-account-container {
    padding: 10px !important;
}

    /* Override Popper.js positioning to snap exactly to the right edge */
    html.sidebar-collapsed .sidebar-account-container .dropup .dropdown-menu {
        top: auto !important;
        bottom: 0 !important;
        left: 70px !important;
        transform: none !important;
        margin-bottom: 0 !important;
        border-radius: 0 8px 8px 0;
        box-shadow: 4px 4px 15px rgba(0,0,0,0.5);
        min-width: 220px;
    }

    /* Bring text back for account dropdown items */
    html.sidebar-collapsed .sidebar-account-container .dropdown-menu .sidebar-text,
    html.sidebar-collapsed .sidebar-account-container .dropdown-menu a {
        display: inline-block !important;
    }

    html.sidebar-collapsed .sidebar-account-container .dropdown-menu i {
        margin-right: 0.5rem !important;
    }

/* ======================================================== */
/* 13. IMAGES / SPINNER                                     */
/* ======================================================== */

/* Makes the white background of the JPG logo invisible against light surfaces */
img[src*="metric-main-logo.png"] {
    mix-blend-mode: multiply;
}

/* Container for the image + spinner */
.img-loading-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--zinc-100);
    min-height: 60px; /* Placeholder height */
    border-radius: 4px;
    overflow: hidden;
}

    /* The actual spinner */
    .img-loading-wrapper::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        border: 2px solid var(--zinc-200); /* spinner track */
        border-top: 2px solid var(--zinc-900); /* spinner accent */
        border-radius: 50%;
        animation: img-spin 0.8s linear infinite;
        z-index: 1;
    }

    .img-loading-wrapper.error {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Hide spinner once loaded */
.img-loading-wrapper.loaded::before {
    display: none;
}

    /* Smooth fade-in for the image */
    .img-loading-wrapper img {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        z-index: 2;
    }

    .img-loading-wrapper.loaded img {
        opacity: 1;
    }

@keyframes img-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}