/*
 * LiveLog theming.
 *
 * The active Radzen theme stylesheet ("default" = light, "dark" = dark) is rendered by the
 * RadzenTheme component in App.razor just before this file, and MainLayout mirrors the active
 * theme onto <html data-theme="..."> so overrides here can be scoped per theme.
 *
 * Light: stock Radzen "default" theme with the LiveLog teal brand palette.
 * Dark: replicates the QuantumDecoder UI look (Syncfusion Office2019Black), values extracted
 *       from Syncfusion.Themes.Office2019Black.WPF Common/Brushes.xaml.
 */

:root {
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-primary: #598087;
    --rz-primary-light: #6d8f95;
    --rz-primary-lighter: rgba(89, 128, 135, 0.16);
    --rz-primary-dark: #52767c;
    --rz-primary-darker: #436065;
    --rz-secondary: #80a4ab;
    --rz-secondary-light: #8fafb5;
    --rz-secondary-lighter: rgba(128, 164, 171, 0.2);
    --rz-secondary-dark: #76979d;
    --rz-secondary-darker: #607b80;
    --rz-info: #2cc8c8;
    --rz-info-light: #4ed1d1;
    --rz-info-lighter: rgba(44, 200, 200, 0.2);
    --rz-info-dark: #25a8a8;
    --rz-info-darker: #219696;
    --rz-success: #5dbf74;
    --rz-success-light: #77c98a;
    --rz-success-lighter: rgba(93, 191, 116, 0.16);
    --rz-success-dark: #4ea061;
    --rz-success-darker: #468f57;
    --rz-warning: #fac152;
    --rz-warning-light: #fbcb6e;
    --rz-warning-lighter: rgba(250, 193, 82, 0.2);
    --rz-warning-dark: #d2a245;
    --rz-warning-darker: #bc913e;
    --rz-danger: #f9777f;
    --rz-danger-light: #fa8d93;
    --rz-danger-lighter: rgba(249, 119, 127, 0.2);
    --rz-danger-dark: #d1646b;
    --rz-danger-darker: #bb595f;
    --rz-on-primary: #ffffff;
    --rz-on-primary-light: #ffffff;
    --rz-on-primary-lighter: #598087;
    --rz-on-primary-dark: #ffffff;
    --rz-on-primary-darker: #ffffff;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-light: #ffffff;
    --rz-on-secondary-lighter: #80a4ab;
    --rz-on-secondary-dark: #ffffff;
    --rz-on-secondary-darker: #ffffff;
    --rz-on-info: #ffffff;
    --rz-on-info-light: #ffffff;
    --rz-on-info-lighter: #2cc8c8;
    --rz-on-info-dark: #ffffff;
    --rz-on-info-darker: #ffffff;
    --rz-on-success: #ffffff;
    --rz-on-success-light: #ffffff;
    --rz-on-success-lighter: #5dbf74;
    --rz-on-success-dark: #ffffff;
    --rz-on-success-darker: #ffffff;
    --rz-on-warning: #ffffff;
    --rz-on-warning-light: #ffffff;
    --rz-on-warning-lighter: #fac152;
    --rz-on-warning-dark: #ffffff;
    --rz-on-warning-darker: #ffffff;
    --rz-on-danger: #ffffff;
    --rz-on-danger-light: #ffffff;
    --rz-on-danger-lighter: #f9777f;
    --rz-on-danger-dark: #ffffff;
    --rz-on-danger-darker: #ffffff;
}

:root[data-theme="dark"] {
    /* Office2019Black gray scale: window #262626, content #323130, hover/selected #454545 */
    --rz-base: #5c5c5c;
    --rz-base-50: #ffffff;
    --rz-base-100: #f2f2f2;
    --rz-base-200: #e5e5e5;
    --rz-base-300: #b1b1b1;
    --rz-base-400: #989898;
    --rz-base-500: #8a8a8a;
    --rz-base-600: #787878;
    --rz-base-700: #454545;
    --rz-base-800: #323130;
    --rz-base-900: #262626;
    --rz-base-light: #b1b1b1;
    --rz-base-lighter: #f2f2f2;
    --rz-base-dark: #454545;
    --rz-base-darker: #262626;
    --rz-on-base: #ffffff;
    --rz-on-base-light: #262626;
    --rz-on-base-lighter: #262626;
    --rz-on-base-dark: #ffffff;
    --rz-on-base-darker: #ffffff;
    /* decoder accent blue (PrimaryBackground / PrimaryColorLight1 / Dark1 / Dark2) */
    --rz-primary: #265aaa;
    --rz-primary-light: #2c69c7;
    --rz-primary-lighter: rgba(38, 90, 170, 0.24);
    --rz-primary-dark: #1f4a8c;
    --rz-primary-darker: #183b6f;
    --rz-on-primary-lighter: #5b8dda;
    /* decoder link blue (LinkForeground / LinkForegroundHovered); drives links and hover accents */
    --rz-secondary: #23a6e8;
    --rz-secondary-light: #4fb7ec;
    --rz-secondary-lighter: rgba(35, 166, 232, 0.2);
    --rz-secondary-dark: #1488c3;
    --rz-secondary-darker: #1173a4;
    --rz-on-secondary-lighter: #23a6e8;
    /* decoder semantic colors (SuccessForeground / WarningForeground / ErrorForeground) */
    --rz-success: #69c77a;
    --rz-success-light: #7ed28d;
    --rz-success-lighter: rgba(105, 199, 122, 0.16);
    --rz-success-dark: #58a867;
    --rz-success-darker: #4c9159;
    --rz-on-success-lighter: #69c77a;
    --rz-warning: #fb9a69;
    --rz-warning-light: #fcae85;
    --rz-warning-lighter: rgba(251, 154, 105, 0.2);
    --rz-warning-dark: #d97f4f;
    --rz-warning-darker: #bf6f45;
    --rz-on-warning-lighter: #fb9a69;
    --rz-danger: #ff5757;
    --rz-danger-light: #ff7373;
    --rz-danger-lighter: rgba(255, 87, 87, 0.2);
    --rz-danger-dark: #d64a4a;
    --rz-danger-darker: #b84040;
    --rz-on-danger-lighter: #ff5757;
    /* decoder chart series palette (Series1-7) */
    --rz-series-1: #0078b6;
    --rz-series-2: #ba1c74;
    --rz-series-3: #fac100;
    --rz-series-4: #5550b0;
    --rz-series-5: #d8523e;
    --rz-series-6: #2eab2e;
    --rz-series-7: #ffa830;
    /* decoder tooltips are dark gray (TooltipBackground), not the Radzen info color */
    --rz-tooltip-background-color: #454545;
}

.rz-data-row {
    height: 60px;
}

/* --- Responsive overrides (added for small-screen support) --- */
@media (max-width: 768px) {
    /* The default 60px data-grid row wastes vertical space on phones/tablets. */
    .rz-data-row {
        height: 44px;
    }
}

/* --- Page header, status pills and summary banners (PageHeader, JobOverviewPanel, MotorRunDetail) --- */

/* title block on the left, live status pills and actions on the right; the two wrap into rows on a narrow screen */
.ll-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 24px;
    flex-wrap: wrap;
    padding: 4px 0 8px 0;
    border-bottom: 3px solid var(--rz-primary);
}

.ll-page-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ll-page-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rz-text-secondary-color);
}

.ll-page-subtitle {
    font-size: 0.9rem;
    color: var(--rz-text-secondary-color);
    overflow-wrap: anywhere;
}

.ll-page-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ll-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--rz-base-600);
    background: var(--rz-base-background-color);
    font-size: 0.8rem;
    white-space: nowrap;
}

.ll-pill-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex: none;
}

/* the fact a reader checks first leads a card as a banner; the tint names its state with the theme's own
   colors. The neutral tint is mixed from a mid grey because the base-NNN tints flip between the light and
   dark themes, and a light tint under white text is unreadable. */
.ll-hero {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
    padding: 10px 14px;
    border-left: 4px solid var(--rz-base-500);
    background: color-mix(in srgb, var(--rz-base-500) 22%, transparent);
    border-radius: var(--rz-border-radius);
    min-width: 0;
}

.ll-hero-primary {
    border-left-color: var(--rz-primary);
    background: var(--rz-primary-lighter);
}

.ll-hero-info {
    border-left-color: var(--rz-info);
    background: var(--rz-info-lighter);
}

.ll-hero-success {
    border-left-color: var(--rz-success);
    background: var(--rz-success-lighter);
}

.ll-hero-warning {
    border-left-color: var(--rz-warning);
    background: var(--rz-warning-lighter);
}

.ll-hero-muted {
    border-left-color: var(--rz-base-500);
    background: color-mix(in srgb, var(--rz-base-500) 22%, transparent);
}

.ll-hero-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
}

.ll-hero-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.ll-hero-meta {
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}

/* two banners side by side; stacked when the card is narrow */
.ll-hero-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ll-hero-pair .ll-hero {
    margin-bottom: 0;
}

.ll-hero-pair + .ll-rows {
    margin-top: 10px;
}

/* values read together share one banner as tiles; a tile wraps to the next line before a number breaks mid-digit */
.ll-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 8px 10px;
    margin-bottom: 6px;
}

.ll-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ll-stat .ll-hero-value {
    white-space: nowrap;
}

/* label / value rows beneath a banner */
.ll-rows {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 16px;
    row-gap: 4px;
    margin: 0;
    align-content: start;
}

.ll-rows dt {
    color: var(--rz-text-secondary-color);
    font-size: 0.85rem;
    white-space: nowrap;
}

.ll-rows dd {
    margin: 0;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

/* two row groups side by side; one column when the card is narrow */
.ll-rows-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
}

/* a card whose banners collapse by its own width (two columns at 768px leave each card ~360px) */
.ll-card-container {
    container-type: inline-size;
}

@container (max-width: 460px) {
    .ll-hero-pair,
    .ll-rows-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .ll-hero-value {
        font-size: 1.25rem;
    }
}

/* a select that stands in for a tab strip too wide for a phone; the page gives the RadzenTabs the ll-tabs class */
.ll-tab-select {
    display: none;
}

@media (max-width: 768px) {
    .ll-page-header {
        align-items: flex-start;
    }

    .ll-page-header h1 {
        font-size: 1.6rem;
    }

    .ll-pill {
        white-space: normal;
    }

    .ll-tab-select {
        display: block;
        margin-bottom: 8px;
    }

    .ll-tabs .rz-tabview-nav {
        display: none;
    }

    /* page-level destructive or heavyweight admin actions have no place on a phone-width view */
    .ll-phone-hidden {
        display: none !important;
    }
}

/* Dialogs opened on a phone/tablet-width viewport are sized to the screen by MobileAwareDialogService
   (Width/Height/Top/Left are set inline there); this only removes the window chrome and keeps the body scrolling. */
.rz-dialog.ll-dialog-fullscreen,
.rz-dialog-side.ll-dialog-fullscreen {
    border-radius: 0;
    max-width: 100vw;
    max-height: 100vh;
}

.rz-dialog.ll-dialog-fullscreen .rz-dialog-content {
    flex: 1 1 auto;
    overflow: auto;
}

/* Oil basin overlay on the home page map. attachOilBasinsLayer (scripts.js) reads these custom properties for
   the polygon style, so the legend swatch and the layer share one colour definition. */
:root {
    --oil-basins-rgb: 139, 90, 43;
    --oil-basins-fill-opacity: 0.25;
    --oil-basins-stroke-opacity: 0;
}

.oil-basins-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
}

.oil-basins-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: rgba(var(--oil-basins-rgb), var(--oil-basins-fill-opacity));
    border: 1px solid rgba(var(--oil-basins-rgb), var(--oil-basins-stroke-opacity));
}