/* ========================================
CRITICAL CSS - Prevents Layout Shift & FOUC
======================================== */

/* Using the basis of Eric Mey's quick & dirty cross-browser reset tool for a clean slate
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
* {margin: 0;padding: 0;box-sizing: border-box}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block}
blockquote, q {quotes: none}/* remove now, customize later */
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none}/* remove now, customize later */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    table-layout: fixed
}
table.scrolling-table,
table.simple-preview-table {/* table-layout: fixed this is causing issues on smaller scrolling tables so we need to remove it from them*/
    table-layout:auto 
}

/* begin our customizations at the root */
:root {
    font-size: 100%;
    scroll-behavior: auto;
    color-scheme: light dark;
                                                                                    /*  LIGHT | DARK - HEX              LIGHT | DARK - RGB */
    --color-none: light-dark(oklch(100% 0 0), oklch(0.19 0.01 254));            /* FFFFFF | 111418          255, 255, 255 | 17, 20, 24 */
    --color-faded-teal: light-dark(oklch(0.97 0.01 202), oklch(0.22 0.02 203)); /* eef7f8 | #0f1d1f         234, 247, 248 | 15, 29, 31 */
    --color-DB-fifteen: light-dark(oklch(88% 0.01 240), oklch(25% 0.01 240));   /* #d2d8dd | #1d2226        210, 216, 221 | 29, 34, 38 */
    --color-faded-blue: light-dark(oklch(75% 0.05 230), oklch(40% 0.05 230));   /* #8eb4c8 | #294d5e        142, 180, 200 | 41, 77, 94 */
    --color-orange: light-dark(oklch(0.64 0.14 64), oklch(0.67 0.14 64));       /* #c67712 | #d08022        198, 119, 18 | 208, 128, 34 */
    --color-khaki: light-dark(oklch(0.66 0.03 94), oklch(0.64 0.03 94));        /* #98927e | #928c78        152, 146, 126 | 146, 140, 120 */
    --color-blue: light-dark(oklch(0.46 0.07 256), oklch(0.7 0.06 251));        /* #3d597f | #83a2c3        61, 89, 127 | 131, 162, 195 */
    --color-teal: light-dark(oklch(45% 0.07 195), oklch(70% 0.07 195));         /* #156161 | #67acac        21, 97, 97 | 103, 172, 172 */
    --color-green: light-dark(oklch(0.47 0.08 137), oklch(0.69 0.16 139));      /* #456537 | #63b24b        69, 101, 55 | 99, 178, 75 */
    --color-red: light-dark(oklch(0.49 0.15 19), oklch(0.62 0.14 17));          /* #a4313d | #cc5e67        164, 49, 61 | 204, 94, 103 */
    --color-chocolate: light-dark(oklch(0.42 0.06 29), oklch(0.74 0.06 74));    /* #6a403a | #c2a681        106, 64, 58 | 194, 166, 129 */
    --color-purple:light-dark(oklch(0.47 0.10 310), oklch(0.70 0.09 310));      /* #7E4F8E | #B590C4        126, 79, 142 | 181, 144, 196 */
    --color-fuchsia:light-dark(oklch(0.46 0.15 350), oklch(0.70 0.12 350));     /* #A4305F | #D67BA3        164, 48, 95 | 214, 123, 163 */
    --color-dark-blue: light-dark(oklch(28% 0.03 245), oklch(88% 0.02 245));    /* #1c2b37 | #cdd9e4        28, 43, 55 | 205, 217, 228 */
    --color-full: light-dark(oklch(0% 0 0), oklch(88% 0.01 240));               /* #000000 | #d2d8dd        0, 0, 0 | 210, 216, 221 */
    --color-inverse-teal: oklch(70% 0.07 195);
    --color-white: #FFFFFF;
    --color-black: #000000;

    --color-yellow: light-dark(oklch(from var(--color-orange) calc(l - .15) c h), oklch(from var(--color-orange) calc(l + .15) c h)); /* 924c00 | f8a650          146, 76, 0 | 248, 166, 80 */

    --color-row-headers: oklch(from var(--color-dark-blue) l c h / 65%);

    --primary-radius-and-padding: 1.75rem;
    --primary-radius-and-padding-half: calc(var(--primary-radius-and-padding) / 2);
    --radius-secondary: 0.5rem;
    --radius-rounded: 50%;

    --font-size-smallest: 0.7rem;
    --font-size-small: 0.85rem;
    --font-size-primary: 1rem;
    --font-size-large: 1.2rem;
    --font-size-larger: 1.4rem;
    --font-size-largest: 1.6rem;
    
    --shadow-small-base: 0 1px 3px;
    --shadow-med-base: 0 1px 5px;
    --shadow-large-base: 0 0 1rem;
    --shadows-multi: var(--shadow-small-base) var(--color-shadows), 
                     var(--shadow-large-base) var(--color-shadows);

    --border-divider: 1px solid oklch(from var(--color-khaki) l c h / 35%);
    --border-inputs-base: 2px solid var(--color-khaki);
    --border-inputs-compact: 1px solid var(--color-khaki);

    --color-shadows: light-dark(oklch(from var(--color-dark-blue) l c h / 15%), var(--color-black));

    --gradient-animated-link-underline: linear-gradient(to right, var(--color-red), var(--color-faded-blue), var(--color-orange));

    /* Layout-critical widths */
    --table-checkbox-col-width: 2.5rem; 
    --table-sticky-table-col-far-right-width: 12rem; 

    --sidebar-width: 14rem;
    --sidebar-width-collapsed: 4rem;

    --right-panel-width: 32rem;
}

html {
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    font-variation-settings: "wdth" 100;
    font-style: normal;
    font-optical-sizing: auto;
    font-size: 1rem;
    font-weight: 400;
    background: 
        radial-gradient(circle farthest-corner at top left, oklch(from var(--color-faded-blue) l 0.12 h) 0%, oklch(from var(--color-orange) l c h / 15%) 50%),
        radial-gradient(circle farthest-side at top right, oklch(from var(--color-faded-blue) calc(l + 0.2) c h) 0%, oklch(from var(--color-khaki) l c h / 0%) 10%),
        radial-gradient(circle farthest-corner at bottom right, oklch(from var(--color-khaki) calc(l + 0.2) c h) 0%, oklch(from var(--color-khaki) l c h / 0%) 33%),
        radial-gradient(circle farthest-corner at top right, oklch(from var(--color-faded-blue) l 0.14 h) 0%, oklch(from var(--color-blue) l c h / 10%) 50%),
        radial-gradient(ellipse at bottom center, oklch(from var(--color-khaki) l c h) 0%, oklch(from var(--color-faded-blue) l c h / 60%) 80%);
    background-attachment: fixed;
    height: 100%
}

body {
    color: var(--color-dark-blue);
    min-height: 100vh;
    line-height: 1.7;
    font-size: var(--font-size-primary);
    overscroll-behavior: none;
    background-color: oklch(from var(--color-DB-fifteen) l c h / 88%);
    display: flex;
    flex-direction: column;
}

/* ========================================
        Critical Layout Containers / Main Layout
        ======================================== */
#limit-warning {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    margin-left: 0;
    text-align: center;
    padding: 0.5rem var(--primary-radius-and-padding);
    z-index: 997;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

#limit-warning p {
    margin: 0;
}
.main-container {
    display: flex;
    background-color: var(--glass-BG-overlay);
    flex: 1;
}

/* Sidebar Layout - Prevents shift */
.sidebar {
    width: var(--sidebar-width);
    background-color: oklch(from var(--color-none) l c h / 50%);
    height: 100vh;
    box-shadow: 1px 0 3px var(--color-shadows);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 51
}

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

/* Header & Footer Layout - Prevents shift */
        .header {
            background-color: var(--glass-BG-overlay);
            top: 0;
            right: 0;
            width: calc(100vw - var(--sidebar-width));
           /* transition: margin-left 0.3s ease, width 0.3s ease; adding transition by default was causing FOUC for a persistently collapsed sidebar–now added via JS using the rule, below */
        }
        header, 
        #limit-warning {box-shadow: var(--shadow-small-base) var(--color-shadows)}

        .header,
        footer,
        #limit-warning {
            margin-left: var(--sidebar-width);
            width: calc(100vw - var(--sidebar-width));}

        header:not(:has(.tertiary-nav)) {padding-bottom: calc(var(--primary-radius-and-padding) / 2);}

        .beta-flag::after {content: 'beta';
            text-transform: uppercase;
            font-weight: 600 !important;
            font-size: var(--font-size-smallest);
            color: var(--color-none);border-radius: .25rem;padding: 0 .25rem;margin-left: .5rem;font-weight: 500;
            background-color: var(--color-full);
            background-color: light-dark(var(--color-blue), var(--color-full));}

        body:has(.sidebar.collapsed) .header,
        body:has(.sidebar.collapsed) footer,
        body:has(.sidebar.collapsed) #limit-warning {
            margin-left: var(--sidebar-width-collapsed);
            width: calc(100vw - var(--sidebar-width-collapsed));
        }

        /* footer */
        footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--primary-radius-and-padding);
            border-top: var(--border-divider);
            margin-top: auto;
            font-size: var(--font-size-small);
            margin-right: 0;
        }

        footer small {color: oklch(from var(--color-full) l c h / 65%);}

        footer nav {
            display: flex;
            gap: calc(var(--primary-radius-and-padding) / 2);
            padding-right: calc(var(--primary-radius-and-padding) * 2.5);
        }


/* Main Content Layout - Prevents shift - Container Query Setup */
main {
            flex: 1;
            padding: var(--primary-radius-and-padding);
            margin-left: var(--sidebar-width);
            margin-top: 0.6rem;
            /* transition: margin-left 0.3s ease; adding transition by default was causing FOUC for a persistently collapsed sidebar–now added via JS using the rule, below */
            display: flex;
            flex-direction: column;
            
            /* Enable container queries */
            container-type: inline-size;
            container-name: main-content
        }

        .sidebar.collapsed ~ .header ~ .main-container main {
            margin-left: var(--sidebar-width-collapsed)
        }
        main:has(.scrolling-table, .simple-preview-table) {padding-right: 0;}


/* Content Container */
.content {
    max-width: 2600px;
    justify-self: center;
    flex: 1;
}
.content:has(.floating-actions) {
            margin-right: 7rem
        }

/* Transition Control - Prevents initial animations */
.transitions-enabled .sidebar {
    transition: width 0.3s ease;
}

.transitions-enabled .header {
    transition: margin-left 0.3s ease, width 0.3s ease;
}

.transitions-enabled main {
    transition: margin-left 0.3s ease;
}

/* ========================================
Critical ALERTS PANEL STYLES
======================================== */
.right-panel[inert] {
    visibility: hidden !important;
}


/* Screen Reader Only - Critical for accessibility */
.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Critical Reduced Motion Support */
@media (prefers-reduced-motion: no-preference) {/* be a good human and add fancy motion stuff to a query */
    :root {scroll-behavior: smooth}
}

/* High contrast mode; be good humans for ADA */
        @media (prefers-contrast: high) {
            body {color: light-dark(var(--color-black), var(--color-white));}
            .sidebar,
            html,
            body,
            .card,
            .actions-expand-menu {background-color: light-dark(var(--color-white), var(--color-black));}
            .card {border: 1px solid var(--color-DB-fifteen);}
            .filter-select,
            .action-btn,
            .btn {
                border-width: 2px;
            }
        }