/* ---------------------------------------------------------------------------
   irfourworks theme — matches the platform mockup's palette and type system
   (ink/paper, IBM Plex Sans/Mono, Fraunces serif headings). Radzen variables
   are overridden the same way as before; class rules below target the real
   rendered DOM (.rz-header/.rz-sidebar/.rz-navigation-item-*), confirmed by
   inspecting a live page — not guessed selector names. Loaded AFTER the
   Radzen theme, so equal-specificity rules here win.
   --------------------------------------------------------------------------- */
/* FocusOnNavigate (Routes.razor) moves focus to the page h1 for screen
   readers; suppress the visible outline it draws. */
h1:focus {
    outline: none;
}

:root {
    --ink: #1B2733;
    --ink-soft: #3D4C5C;
    --paper: #F5F6F2;
    --card: #FFFFFF;
    --line: #E2E4DC;
    --mut: #6B7684;

    /* Per-module accents, matching the brochure/mockup exactly. */
    --accent: #2F7D6D;       /* Accounting OS */
    --accent-soft: #E4F0EC;
    --legal: #4A5899;        /* Legal OS */
    --legal-soft: #E8EAF5;
    --factory: #5B7C8A;      /* Factory OS */
    --factory-soft: #E7ECEE;
    --risk: #A8574E;         /* CRM OS / debit */
    --risk-soft: #F6E9E7;
    --dms: #8A6D2F;          /* Procurement OS */
    --dms-soft: #F4EDDC;
    --home: #7FB8A8;

    /* Radzen theme hooks. */
    --rz-primary: var(--accent);
    --rz-primary-light: #4E9784;
    --rz-primary-dark: #245F52;
    --rz-on-primary: #ffffff;

    --rz-info: var(--legal);
    --rz-info-light: #6673A8;
    --rz-info-dark: #38436F;
    --rz-info-lighter: var(--legal-soft);
    --rz-on-info: #ffffff;
    --rz-on-info-lighter: var(--legal);

    --rz-danger: var(--risk);
    --rz-danger-light: #BD756D;
    --rz-danger-dark: #82443C;
    --rz-danger-lighter: var(--risk-soft);
    --rz-on-danger-lighter: var(--risk);

    --rz-warning: var(--dms);
    --rz-warning-light: #A6893F;
    --rz-warning-dark: #6C5623;
    --rz-warning-lighter: var(--dms-soft);
    --rz-on-warning-lighter: var(--dms);

    --rz-secondary: var(--ink-soft);
    --rz-secondary-light: var(--mut);
    --rz-secondary-dark: var(--ink);

    --rz-body-background-color: var(--paper);
    --rz-header-background-color: var(--ink);
    --rz-text-color: var(--ink);
    --rz-text-secondary-color: var(--mut);
    --rz-base-background-color: var(--card);
    --rz-border-radius: 10px;
}

/* !important: RadzenTheme injects its own stylesheet at runtime, after this
   file in the cascade, and its `body` rule otherwise wins the tie. */
body {
    font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
}

.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--ink);
}

/* ===== header: dark navy, serif wordmark, OS tab bar ===== */
.rz-header {
    background: var(--ink);
    box-shadow: none;
    border-bottom: 1px solid #2C3A48;
}

.iw-logo {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: 0.2px;
}
.iw-logo em { font-style: normal; color: var(--home); }

.iw-tabs { border-top: 0px solid rgba(255, 255, 255, .1); }
.iw-tab {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13.5px;
    padding: 10px 14px 8px;
}

.rz-sidebar-toggle { color: #C7D0D9; }
.rz-sidebar-toggle:hover { color: #fff; }

/* ===== sidebar: dark navy, active item tinted by the current module ===== */
.rz-sidebar {
    background: #232F3B;
    color: #C7D0D9;
    border-right: none;

    /* Theme the panel menu through Radzen's OWN VARIABLES rather than by
       overriding its rules one at a time.

       The rule-by-rule overrides below predate the menu having any nesting, and
       they only ever reached the top level: Radzen builds a nested group as
       another .rz-panel-menu inside .rz-expander, which then repainted itself
       with the stock light palette — white rows and grey text sitting inside a
       dark sidebar. Setting the variables here fixes every level at once,
       including groups added later, and needs no !important because the
       variables are read at the point Radzen applies its own rules.

       Names verified against radzen.blazor 11.1.5 default-base.css. */
    --rz-panel-menu-item-background-color: transparent;
    --rz-panel-menu-item-color: #C7D0D9;
    --rz-panel-menu-item-border: none;
    --rz-panel-menu-item-hover-background-color: #2C3A48;
    --rz-panel-menu-item-hover-color: #fff;
    --rz-panel-menu-item-active-background-color: var(--iw-section, #5B7C8A);
    --rz-panel-menu-item-active-color: #fff;
    /* Radzen paints a 4px bar down the active item in --rz-secondary, which is
       an off-palette accent against the module tint. The tint is the indicator. */
    --rz-panel-menu-item-active-indicator: transparent;
    --rz-panel-menu-icon-color: inherit;
}

/* DELIBERATELY BLUNT, and here is why.

   The variable overrides above are the right way to theme Radzen and they fix
   the top level, but nested groups stayed white through two attempts. Radzen's
   nested panel-menu markup is not the shape its stylesheet implies, and the
   sidebar only renders behind sign-in, so the real DOM could not be inspected
   to find which element carries the paint.

   So: clear the background on EVERY element inside the sidebar's menu, then put
   back the two states that need one. The blanket rule is (0,2,0)+!important;
   both state rules below are (0,3,0)+!important and therefore win the cascade
   over it, whichever element Radzen actually marks.

   Scoped to .rz-panel-menu — not the whole sidebar — so nothing else that
   legitimately paints itself in there is affected. If someone later confirms
   the real nested DOM, this can collapse back to a targeted rule. */
.rz-sidebar .rz-panel-menu,
.rz-sidebar .rz-panel-menu * {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Selected item: the module tint, on whichever node carries the state. */
.rz-sidebar .rz-panel-menu .rz-navigation-item-wrapper-active,
.rz-sidebar .rz-panel-menu .rz-navigation-item-link-active,
.rz-sidebar .rz-panel-menu .rz-navigation-item-link.active {
    background-color: var(--iw-section, #5B7C8A) !important;
    color: #fff !important;
}
.rz-sidebar .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-text,
.rz-sidebar .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon,
.rz-sidebar .rz-panel-menu .rz-navigation-item-link.active .rz-navigation-item-text,
.rz-sidebar .rz-panel-menu .rz-navigation-item-link.active .rz-navigation-item-icon {
    color: #fff !important;
}

/* Hover. */
.rz-sidebar .rz-panel-menu .rz-navigation-item-wrapper:hover,
.rz-sidebar .rz-panel-menu .rz-navigation-item-link:hover {
    background-color: #2C3A48 !important;
}

/* Text and icons default to the sidebar's own palette at every depth. */
.rz-sidebar .rz-panel-menu .rz-navigation-item-link,
.rz-sidebar .rz-panel-menu .rz-navigation-item-text,
.rz-sidebar .rz-panel-menu .rz-navigation-item-icon {
    color: #C7D0D9;
}

/* Nested items: indented and a shade dimmer, so a group reads as a parent
   rather than as seven equal siblings. Both .rz-expander (panel-menu nesting)
   and .rz-navigation-menu (the other shape Radzen uses) are covered, since
   which one applies here is exactly what could not be confirmed. */
.rz-sidebar .rz-expander .rz-navigation-item-link,
.rz-sidebar .rz-navigation-menu .rz-navigation-item-link {
    padding-inline-start: 2.5rem;
    font-weight: 500;
}
.rz-sidebar .rz-expander .rz-navigation-item-link:not(.active),
.rz-sidebar .rz-expander .rz-navigation-item-link:not(.active) .rz-navigation-item-text,
.rz-sidebar .rz-navigation-menu .rz-navigation-item-link:not(.active),
.rz-sidebar .rz-navigation-menu .rz-navigation-item-link:not(.active) .rz-navigation-item-text {
    color: #A9B6C2;
}
/* RadzenPanelMenu paints its own opaque white background by default, which
   otherwise sits on top of and completely hides the dark sidebar behind it. */
.rz-sidebar .rz-panel-menu {
    background: transparent;
}
/* Radzen draws a light divider under each <li> by default (~#eee) — reads as
   a stray white line against the dark sidebar. Drop it; items get spacing
   from the link's own margin instead. */
.rz-sidebar .rz-navigation-item {
    border-bottom: none;
    background: transparent;
}
.rz-sidebar .rz-navigation-item-wrapper {
    background: transparent;
}
.rz-sidebar .rz-navigation-item-link {
    color: #C7D0D9;
    background: transparent;
    border-radius: 6px;
    margin: 2px 10px;
}
.rz-sidebar .rz-navigation-item-link:hover {
    background: #2C3A48;
    color: #fff;
}
/* !important: Radzen's runtime-injected stylesheet carries its own
   equal-specificity active-state color (a hardcoded indigo, not derived from
   --rz-primary) that otherwise wins the cascade tie — same issue as the body
   font-family override above. */
.rz-sidebar .rz-navigation-item-link-active,
.rz-sidebar .rz-navigation-item-link.active {
    background: var(--iw-section, #5B7C8A) !important;
    color: #fff !important;
}
.rz-sidebar .rz-navigation-item-icon { opacity: .9; }
.rz-sidebar .rz-navigation-item-link-active .rz-navigation-item-icon,
.rz-sidebar .rz-navigation-item-link.active .rz-navigation-item-icon {
    color: #fff !important;
    opacity: 1;
}

/* ===== body / cards: paper background, soft-bordered white cards ===== */
.rz-body { background: var(--paper); }
.rz-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: none;
}

code {
    font-family: 'IBM Plex Mono', monospace;
    background: var(--accent-soft);
    color: var(--accent);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* ---------------------------------------------------------------------------
   JsonDataView — extracted document data as labelled rows and item tables.
   Here rather than in the component because it renders once per nested node, so
   a scoped <style> block would be emitted many times on a single page. Child
   selectors (>) throughout: these tables nest inside each other, and a
   descendant selector would restyle the inner one from the outer's rules.
   --------------------------------------------------------------------------- */
/* table-layout: fixed is load-bearing, not cosmetic. With auto layout the label
   column is a hint the browser ignores once a cell holds a wide items table: the
   labels collapse to one letter per line, and the cell never gets a definite
   width, so the .jdv-scroll below can't become a scrollport and the table gets
   squeezed instead of scrolled. Fixed layout gives every cell a width up front. */
.jdv-fields { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.86rem; }
/* Percentage, and on the <col> rather than the cell: see the matching note in
   DmsDocumentDetail.razor — a fixed rem width starves the value column on a
   narrow panel, and a width set on the first row's cell is not applied at all
   when that row happens to be a full-width block. */
.jdv-c-key { width: 30%; }
.jdv-fields > tbody > tr > td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.jdv-fields > tbody > tr:last-child > td { border-bottom: none; }
/* Bold to match .dms-key on the document detail page — the key is what the eye
   scans by, and a nested payload's keys should not read lighter than its parent's. */
.jdv-key { color: var(--mut); overflow-wrap: break-word; font-weight: 600; }
.jdv-val { overflow-wrap: break-word; }
/* A row set spanning both columns: label above, table below, full width. */
.jdv-block-key { color: var(--mut); margin-bottom: 4px; font-weight: 600; }

/* JsonFieldsEditor — the editable twin. Same tables, inputs in the leaves. */
.jfe-row { display: flex; align-items: center; gap: 0.4rem; }
.jfe-head { margin-bottom: 4px; }
/* Inputs need room to breathe, and a cell that cannot shrink below its input is
   what makes the table scroll instead of crushing every column. */
.jfe-table > tbody > tr > td { padding: 3px 6px; min-width: 8rem; }
/* Column header with its remove control beside the label. */
.jfe-col-head { display: inline-flex; align-items: center; gap: 0.15rem; }
/* Add row / add column, outside the table's scroll box. */
.jfe-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }
/* The column controls sit above the table, pushed to its right edge. */
.jfe-actions-top { justify-content: flex-end; margin-top: 0; margin-bottom: 0.4rem; }

/* Export-format rows: full width and left-aligned, so several layout names read as
   a list of choices rather than a row of centred buttons. */
.iw-export-format { width: 100%; justify-content: flex-start; }

/* An items table reads as a proper grid: a dark rule on top, a bold header row,
   zebra striping so the eye can follow a line item across.

   width: 100% + min-width: max-content — it fills its container when there is
   room (no void trailing the last column on a wide screen), and when the pane
   is narrower than the columns' natural width, min-width holds them at full
   size and the .jdv-scroll wrapper scrolls sideways instead of compressing. */
.jdv-scroll { max-width: 100%; overflow-x: auto; }
.jdv-table { width: 100%; min-width: max-content; border-collapse: collapse; font-size: 0.84rem;
             border: 1px solid var(--line); }
.jdv-table > thead > tr > th {
    text-align: left; font-weight: 700; color: var(--ink); padding: 8px 12px;
    background: #fff; border-bottom: 2px solid var(--line);
}
.jdv-table > tbody > tr > td { padding: 7px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.jdv-table > tbody > tr:nth-child(even) > td { background: rgba(27, 39, 51, 0.03); }
.jdv-table > tbody > tr:last-child > td { border-bottom: none; }
.jdv-table > thead > tr > th, .jdv-table > tbody > tr > td { white-space: nowrap; }
/* Nested inside a cell, the key/value table drops its own padding so the two
   grids don't read as two levels of indentation. */
.jdv-table .jdv-fields { width: auto; table-layout: auto; }
.jdv-table .jdv-fields > tbody > tr > td { padding: 2px 0; border-bottom: none; }

/* ---------------------------------------------------------------------------
   Wide list grids (.iw-grid-scroll) — every column at full width, scroll for the
   rest.

   Radzen's data area is overflow:auto and .rz-grid-table is table-layout:fixed,
   so a grid whose Width-ed columns already exceed the pane does overflow it and
   does scroll. What fixed layout will not do is protect the columns with NO
   Width: the specified widths are honoured first and the flexible column is left
   with whatever remains — on a narrow pane, nothing. min-width reserves that room
   instead: narrower than it the wrapper scrolls with every column at full size,
   wider and the table still fills the pane. Set --iw-grid-min per grid to the sum
   of its fixed widths plus a workable minimum for the flexible ones.

   (Cells are overflow:hidden + nowrap, so a column narrower than its content is
   silently clipped rather than pushed out — an action column must be Width-ed to
   fit its widest button row, or the last button just disappears.)
   --------------------------------------------------------------------------- */
.iw-grid-scroll .rz-grid-table { min-width: var(--iw-grid-min, 1200px); }

/* ---------------------------------------------------------------------------
   Default Blazor error UI (Radzen's theme doesn't style this element).
   --------------------------------------------------------------------------- */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffe69c;
    padding: 0.6rem 1.25rem;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

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


/*:root {*/
/* Brand */
/*--primary: #232F3B;
--primary-hover: #1A242E;
--secondary: #3F6C6F;
--secondary-hover: #345B5D;
--accent: #4DB6AC;
--accent-hover: #3DA396;
--accent-light: #E0F2F0;*/ /* tint for hover bg, selected states */
/* Surfaces */
/*--background: #F7F9FA;
--surface: #FFFFFF;
--surface-alt: #EEF4F3;*/ /* teal-tinted section bg */
/* Text */
/*--text-primary: #1E293B;
--text-secondary: #64748B;
--text-muted: #94A3B8;
--text-on-primary: #FFFFFF;
--text-on-accent: #0B3A34;*/ /* dark teal — accent is too light for white text */
/* Borders */
/*--border: #D8E2E1;*/ /* cooled toward teal to match */
/*--border-strong: #B9C9C8;*/
/* Status */
/*--success: #22C55E;
--success-bg: #DCFCE7;
--warning: #F59E0B;
--warning-bg: #FEF3C7;
--danger: #EF4444;
--danger-bg: #FEE2E2;
}*/

/* Run-in-dialog (My work → Resume / Continue run): near-full-screen by default
   but never smaller than a workable stepper when the user resizes it. The min
   values are themselves capped to the viewport so small screens still fit. */
.iw-run-dialog {
    min-width: min(960px, 96vw);
    min-height: min(640px, 88vh);
    max-width: 98vw;
    max-height: 96vh;
}
.iw-run-dialog .rz-dialog-content {
    /* title bar + padding ≈ 90px; keeps the stepper scrolling inside the dialog */
    max-height: calc(96vh - 90px);
    overflow: auto;
}

/* CopyableId — click-to-copy inline value (e.g. "run #<guid>" in a lock notice). */
.iw-copyable { cursor: pointer; white-space: nowrap; }
.iw-copyable .rzi { font-size: 14px; vertical-align: -2px; margin-left: 3px; opacity: 0.55; }
.iw-copyable:hover .rzi { opacity: 1; }

/* ---------------------------------------------------------------------------
   Toast close button — keep the X inside the box.

   .rz-notification-item-wrapper is a fixed 320px (width:250px;min-width:20rem)
   and the item inside it is a flex ROW: [icon + message] then the close button.
   The message column is flex:auto with the default min-width:auto, so it refuses
   to shrink below its longest unbreakable word. One long token — a file name
   such as 'locationlabel_203dpi_60x40mm.prn', a URL, a guid — therefore widens
   the row past the box, and the close button, being the last child, is pushed
   out of the panel entirely. The stack is pinned to the right of the window
   (inset-inline-end:1rem), so "out of the panel" means off-screen: the toast
   becomes undismissable until it times out, which for errors is the 60s set in
   MainLayout.OnNotificationAdded.

   min-width:0 lets the column shrink, overflow-wrap breaks the long token, and
   flex:0 0 auto stops the button itself being squeezed to nothing.
   --------------------------------------------------------------------------- */
.rz-notification-message { min-width: 0; }
.rz-notification-title, .rz-notification-content { overflow-wrap: anywhere; }
.rz-notification-close { flex: 0 0 auto; }

/* Field label with an optional <InfoTip> (ⓘ) beside it, and a small section
   divider for long forms. Help notes go behind the ⓘ, not as grey text. */
.iw-lbl { display:flex; align-items:center; gap:0.25rem; font-size:0.8rem; color:var(--rz-text-secondary-color); margin-bottom:0.25rem; }
.iw-sec { font-size:0.75rem; color:var(--rz-text-tertiary-color); border-top:1px solid var(--rz-base-200); padding-top:0.75rem; margin-top:0.25rem; }
.iw-info { display:inline-flex; align-items:center; cursor:pointer; color:var(--rz-text-tertiary-color); vertical-align:middle; }
.iw-info:hover, .iw-info:focus-visible { color:var(--rz-primary); outline:none; }
.iw-info .rzi { font-size:1rem; }
.iw-info-tip { max-width:320px; white-space:normal; line-height:1.45; font-size:0.8rem; }