/* ============================================
   GLOBAL THEME CONFIGURATION
   ============================================ */

:root {
    --header-height: 60px;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

body {
    height: 100%;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    overflow: hidden;  /* Prevents double scrollbars */
    font-family: var(--body-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

/* Main app container - adjust selector to match your layout */
#app,
.app-container,
main {
    /*height: 100% !important;*/
    /*overflow: hidden !important;*/
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* If you're using FluentUI layout components */
fluent-design-system-provider,
fluent-layout,
fluent-main-layout {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

body[data-theme="light"],
body:not([data-theme]) {
    background-color: #f5f5f5 !important;
    color: #1a1a1a !important;

    /* Card-specific variables for light mode */
    --theme-content-bg: #ffffff !important;
    --theme-card-header-bg: #fafafa !important;
    --theme-card-body-bg: #ffffff !important;
    --theme-card-footer-bg: #fafafa !important;
    --neutral-layer-floating: #ffffff;
    --neutral-stroke-color: #e0e0e0 !important;
}

body[data-theme="dark"],
body[data-theme="system-dark"] {
    background-color: #2a2a3e !important;
    color: #f0f0f0 !important;

    /* Card-specific variables for dark mode - MORE DISTINCT */
    --theme-content-bg: #404060 !important;  /* Card outer background */
    --theme-card-header-bg: #353550 !important;  /* Header - darker */
    --theme-card-body-bg: #404060 !important;  /* Body - main card color */
    --theme-card-footer-bg: #353550 !important;  /* Footer - darker like header */
    --neutral-layer-floating: #404060;
    --neutral-stroke-color: #5a5a80 !important;  /* Visible borders */

    /* Layer hierarchy - lighter and more visible */
    --neutral-layer-1: #353550 !important;
    --neutral-layer-2: #404060 !important;
    --neutral-layer-3: #4a4a70 !important;
    --neutral-layer-4: #555580 !important;

    /* Fill colors - more visible */
    --neutral-fill-rest: #454560 !important;
    --neutral-fill-hover: #505070 !important;
    --neutral-fill-active: #5a5a80 !important;

    /* Stealth fills - subtle but visible */
    --neutral-fill-stealth-rest: transparent !important;
    --neutral-fill-stealth-hover: rgba(255, 255, 255, 0.08) !important;
    --neutral-fill-stealth-active: rgba(255, 255, 255, 0.12) !important;

    /* Input fields - clearly distinguishable */
    --neutral-fill-input-rest: #404060 !important;
    --neutral-fill-input-hover: #454570 !important;
    --neutral-fill-input-active: #4a4a70 !important;
    --neutral-fill-input-focus: #4a4a70 !important;

    /* Text colors - bright and readable */
    --neutral-foreground-rest: #f0f0f0 !important;
    --neutral-foreground-hint: #b8b8c8 !important;

    /* Card/component backgrounds */
    --fill-color: #404060 !important;

    /* Borders - clearly visible */
    --neutral-stroke-rest: #5a5a80 !important;
    --neutral-stroke-divider: #4a4a70 !important;

    /* Accent color - vibrant and visible */
    --accent-fill-rest: #60a5fa !important;
    --accent-fill-hover: #7cb8fc !important;
    --accent-fill-active: #3b82f6 !important;
}

body[data-theme="light"],
body:not([data-theme]) {
    --neutral-layer-1: #ffffff !important;
    --neutral-layer-2: #fafafa !important;
    --neutral-layer-3: #f0f0f0 !important;
    --neutral-fill-input-rest: #ffffff !important;
    --neutral-fill-input-hover: #f3f3f3 !important;
    --neutral-fill-stealth-hover: rgba(0, 0, 0, 0.06) !important;
    --neutral-fill-stealth-active: rgba(0, 0, 0, 0.10) !important;
}

/* FluentUI Components */
fluent-design-system-provider,
fluent-layout,
fluent-main-layout {
    background-color: #2a2a3e !important;
}

body[data-theme="light"] fluent-design-system-provider,
body[data-theme="light"] fluent-layout,
body[data-theme="light"] fluent-main-layout {
    background-color: #f5f5f5 !important;
}

/* ============================================
   DARK MODE COMPONENTS - Better Visibility
   ============================================ */

/* DataGrid - Clear separation */
body[data-theme="dark"] fluent-data-grid {
    background-color: #353550 !important;
    border: 1px solid #5a5a80 !important;
}

body[data-theme="dark"] fluent-data-grid-row {
    background-color: #353550 !important;
    border-bottom: 1px solid #4a4a70 !important;
}

body[data-theme="dark"] fluent-data-grid-cell {
    background-color: #353550 !important;
    color: #f0f0f0 !important;
}

body[data-theme="dark"] fluent-data-grid::part(header) {
    background-color: #404060 !important;
    border-bottom: 2px solid #5a5a80 !important;
    font-weight: 600 !important;
    color: #f0f0f0 !important;
}

body[data-theme="dark"] fluent-data-grid::part(row):hover {
    background-color: #404060 !important;
}

body[data-theme="dark"] fluent-data-grid::part(header):hover {
    background-color: #454570 !important;
}

/* Navigation - Better contrast */
body[data-theme="dark"] fluent-nav-menu {
    background-color: #353550 !important;
    color: #f0f0f0 !important;
    border-right: 1px solid #4a4a70 !important;
}

body[data-theme="dark"] fluent-nav-link {
    background-color: transparent !important;
    color: #f0f0f0 !important;
}

body[data-theme="dark"] fluent-nav-link::part(control),
body[data-theme="dark"] fluent-nav-link::part(content),
body[data-theme="dark"] fluent-nav-link::part(start),
body[data-theme="dark"] fluent-nav-link::part(end) {
    background-color: transparent !important;
    color: #f0f0f0 !important;
}

body[data-theme="dark"] fluent-nav-link:hover::part(control) {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

body[data-theme="dark"] fluent-nav-link:active::part(control) {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

body[data-theme="dark"] fluent-nav-link[aria-current="page"]::part(control),
body[data-theme="dark"] fluent-nav-link[selected]::part(control) {
    background-color: rgba(96, 165, 250, 0.2) !important;
    border-left: 3px solid #60a5fa !important;
}

/* Dividers - More visible */
body[data-theme="dark"] fluent-divider {
    border-color: #5a5a80 !important;
}

/* Text Fields - Clear boundaries */
body[data-theme="dark"] fluent-text-field,
body[data-theme="dark"] fluent-text-area {
    border: 1px solid #5a5a80 !important;
    border-radius: 4px !important;
}

body[data-theme="dark"] fluent-text-field::part(control),
body[data-theme="dark"] fluent-text-area::part(control) {
    background-color: #404060 !important;
    color: #f0f0f0 !important;
    border: none !important;
}

body[data-theme="dark"] fluent-text-field:hover::part(control),
body[data-theme="dark"] fluent-text-area:hover::part(control) {
    background-color: #454570 !important;
}

body[data-theme="dark"] fluent-text-field:focus-within,
body[data-theme="dark"] fluent-text-area:focus-within {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2) !important;
}

/* Buttons - Better visibility */
body[data-theme="dark"] fluent-button[appearance="accent"]::part(control) {
    background-color: #60a5fa !important;
    color: #000000 !important;
    font-weight: 600 !important;
}

body[data-theme="dark"] fluent-button[appearance="accent"]:hover::part(control) {
    background-color: #7cb8fc !important;
}

body[data-theme="dark"] fluent-button[appearance="neutral"]::part(control) {
    background-color: #454560 !important;
    color: #f0f0f0 !important;
    border: 1px solid #5a5a80 !important;
}

body[data-theme="dark"] fluent-button[appearance="neutral"]:hover::part(control) {
    background-color: #505070 !important;
}

body[data-theme="dark"] fluent-button[appearance="outline"]::part(control) {
    background-color: transparent !important;
    border: 1px solid #f0f0f0 !important;
    color: #f0f0f0 !important;
}

body[data-theme="dark"] fluent-button[appearance="outline"]:hover::part(control) {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Cards - Elevated appearance */
body[data-theme="dark"] fluent-card {
    background-color: #404060 !important;
    border: 1px solid #5a5a80 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    color: #f0f0f0 !important;
}

/* Dialogs - Clear separation from background */
body[data-theme="dark"] fluent-dialog {
    background-color: #404060 !important;
    border: 1px solid #5a5a80 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

body[data-theme="dark"] fluent-dialog::part(control) {
    background-color: #404060 !important;
}

/* ============================================
   FIX: FluentUI popup cut-off in scroll containers
   The fluent-anchored-region used by date pickers
   and selects gets clipped by overflow:auto/hidden
   on parent containers. We set fixed-placement via
   JS (see fluentui-popup-fix.js) and ensure high
   z-index here so popups render above all content.
   ============================================ */
fluent-anchored-region[fixed-placement] {
    z-index: 10000 !important;
}

/* ============================================
   Cap long FluentSelect listbox popups so they scroll
   internally instead of blowing out the page height
   (issue #189). Covers both possible rendering paths:
   - Shadow DOM part on <fluent-select>
   - Light-DOM listbox inside a teleported anchored-region
   FluentAutocomplete already caps its own options panel
   in library CSS, so no rule needed there.
   ============================================ */
fluent-select::part(listbox) {
    max-height: 320px;
    overflow-y: auto;
}

fluent-anchored-region fluent-listbox,
fluent-anchored-region [role="listbox"] {
    max-height: 320px;
    overflow-y: auto;
}


@media (max-width: 768px) {
    #main-menu-expander{
        display: none !important;
    }
    .header-center-text {
        display: none!important;
    }
    .header-left{
        margin-left: 70px !important;
    }
    .app-header{
        height: 75px !important;
    }
}
/* GAG timeline cursor-following tooltip (rendered into document.body by
   js/gag-timeline.js, so it lives outside component-scoped CSS). */
.gag-tip {
    position: fixed;
    z-index: 50;
    pointer-events: none;
    background: #0f172a;
    color: #fff;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.45;
    max-width: 260px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.gag-tip b {
    color: #fff;
}

.gag-tip .t-muted {
    color: #94a3b8;
}

.gag-tip .t-done {
    color: #34d399;
}

.gag-tip .t-missed {
    color: #fb7185;
}

.gag-tip .t-upcoming {
    color: #7dd3fc;
}