/* Shared screen theme. Page layouts, action hooks, canvases and print styles stay local. */
@media screen {
  html:has(body.metrix-app) { background: #07111e; }
  body.metrix-app {
    --theme-ink: #edf7fc;
    --theme-muted: #bfd4e2;
    --theme-edge: rgba(158, 215, 238, .34);
    --theme-dark: linear-gradient(120deg, rgba(42, 85, 111, .76), rgba(10, 30, 47, .86));
    --theme-light: radial-gradient(ellipse at 5% 0, rgba(255,255,255,.5), transparent 60%), linear-gradient(120deg, rgba(220,237,248,.96), rgba(164,195,215,.94));
    --accent: #6ddbea;
    --accent-2: #45bed7;
    --accent-strong: #45bed7;
    min-height: 100vh;
    color: var(--theme-ink);
    background: radial-gradient(ellipse at 72% 10%, #17415a, transparent 39%), radial-gradient(ellipse at 8% 58%, #163a52, transparent 44%), radial-gradient(ellipse at 80% 95%, #18465c, transparent 48%), linear-gradient(125deg, #091522 17%, #0d2334 53%, #06111d 100%) !important;
    background-attachment: scroll !important;
  }
  body.metrix-app::before {
    content: ""; position: fixed; inset: 0; pointer-events: none;
    display: block !important;
    background: linear-gradient(#9dd4ee0c 1px, transparent 1px), linear-gradient(90deg, #9dd4ee0c 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(90deg, transparent, #000);
    z-index: 0;
  }
  body.metrix-app::after {
    content: ""; position: fixed; right: -260px; bottom: -360px;
    width: 700px; height: 700px; border: 1px solid #89d8e52a;
    border-radius: 50%; box-shadow: 0 0 0 90px #89d8e50b, 0 0 0 180px #89d8e508;
    pointer-events: none; z-index: 0;
  }
  .metrix-app > :is(.wrap, .shell, main, .container, .header-shell, .topbar, .hero, .panel, .card, form) { position: relative; }
  /* The approved rep/foreman designs already supply their own component surfaces. */
  .metrix-app:not(.metrix-custom) :is(.wrap, .shell, .content-shell, .owner-shell) {
    background: transparent !important; box-shadow: none !important; border-color: transparent !important;
    backdrop-filter: none !important;
  }
  .metrix-app:not(.metrix-custom) :is(.hero, .header-card, .header-shell, .hero-card, .hero-wrap, .nde-project-hero, .header, .appbar, .library-header, .topbar-box, .topbar, .toolbar, .filter-bar, .section-toolbar, .tracker-nav-panel) {
    --theme-ink: #edf7fc; --theme-muted: #bfd4e2;
    --ink: #edf7fc; --text: #edf7fc; --muted: #bfd4e2; --sub: #bfd4e2;
    background: var(--theme-dark) !important; color: var(--theme-ink) !important;
    border-color: var(--theme-edge) !important;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(218,244,255,.19), 0 12px 32px rgba(0,0,0,.18) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  .metrix-app:not(.metrix-custom) .hero-header { background: transparent !important; box-shadow: none !important; }
  .metrix-app:not(.metrix-custom) :is(.card, .panel, .section, .band, .content-card, .glass-card, .glass-panel, .requests-panel, .stats-shell, .stats-section, .stat-card, .stat-box, .stat, .completion-card, .system-completion-item, .hydro-summary, .pneumatic-summary, .turnover-summary, .nde-stat-card, .request-card, .request-group, .report-card, .rod-card, .fmr-card, .dialog-card, .dialog-box, .modal-card, .modal-content, .modal-panel, .qc-clip-panel, .qc-approval-card, .approval-card) {
    --theme-ink: #163348; --theme-muted: #426478;
    --ink: #163348; --ink-dark: #163348; --text: #163348; --muted: #426478; --sub: #426478;
    --line: rgba(48,100,133,.25);
    background: var(--theme-light) !important;
    color: var(--theme-ink) !important;
    border-color: rgba(223,246,255,.66) !important;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 9px 24px rgba(1,16,29,.17) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  /* Some headers also carry .card; retain the darker header tier. */
  .metrix-app:not(.metrix-custom) :is(.hero.card,.header-card,.header-shell,.hero-wrap) {
    --theme-ink:#edf7fc; --theme-muted:#bfd4e2; --ink:#edf7fc; --text:#edf7fc; --muted:#bfd4e2;
    background:var(--theme-dark) !important; color:var(--theme-ink) !important;
    border-color:var(--theme-edge) !important;
  }
  .metrix-app:not(.metrix-custom) :is(h1,h2,h3,h4,h5,h6,label,.title,.section-title,.project-title,.stat-value,.value,.k,.label) { color: var(--theme-ink) !important; }
  .metrix-app:not(.metrix-custom) :is(.muted,.sub,.note,.hint,.card-note,.section-note,.dialog-note,.meta,.hero-meta,.stat-label,.stat-sub,.branding-sub,.section-sub,.detail,.project-line,.library-status,.report-muted,.report-author,.report-date,.group-meta,.request-meta) { color: var(--theme-muted) !important; text-shadow: none !important; }
  .metrix-app:not(.metrix-custom) :is(.card,.panel,.section,.band,.content-card,.requests-panel,.modal-card,.modal-content,.dialog-card) > p:not(.error):not(.status):not(.danger):not(.warn) { color: var(--theme-muted) !important; }
  .metrix-app:not(.metrix-custom) :is(.eyebrow,.section-kicker) { color: #6edce9 !important; text-shadow: none; }
  .metrix-app:not(.metrix-custom) :is(.card,.panel,.section,.band,.content-card,.modal-card,.dialog-card) :is(.eyebrow,.section-kicker) { color: #2e7185 !important; }
  .metrix-app:not(.metrix-custom) :is(.table-card,.table-wrap,.table-panel,.tableish,.nde-project-table-wrap,.nde-overview-table-wrap,.requests-scroll,.requests-table-wrap) {
    background: rgba(228,242,251,.92) !important;
    color: #163348 !important; border-color: rgba(170,214,234,.6) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65) !important;
    border-radius: 9px;
  }
  .metrix-app:not(.metrix-custom) table {
    --theme-ink: #163348; --theme-muted: #426478;
    --ink: #163348; --muted: #426478;
    color: #163348 !important; background: rgba(225,240,250,.92) !important;
    border-color: rgba(50,105,138,.25) !important;
  }
  .metrix-app:not(.metrix-custom) :is(thead,th) {
    background: #183b51 !important; color: #eff9ff !important;
    border-color: rgba(160,211,234,.23) !important; text-shadow: none !important;
  }
  .metrix-app:not(.metrix-custom) :is(tbody,tr,td) {
    background: transparent !important; color: #163348 !important;
    border-color: rgba(49,102,133,.22) !important; text-shadow: none !important;
  }
  .metrix-app:not(.metrix-custom) tbody tr:nth-child(even) { background: rgba(121,170,197,.13) !important; }
  .metrix-app:not(.metrix-custom) tbody tr:hover { background: rgba(75,158,185,.16) !important; }
  .metrix-app:not(.metrix-custom) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),select,textarea) {
    background: rgba(248,253,255,.94) !important; color: #163348 !important;
    border-color: rgba(64,114,146,.43) !important;
    box-shadow: inset 0 1px 2px rgba(14,51,74,.06) !important;
    border-radius: 7px; text-shadow: none;
  }
  .metrix-app:not(.metrix-custom) input::placeholder,
  .metrix-app:not(.metrix-custom) textarea::placeholder { color: #557287 !important; opacity: 1; }
  .metrix-app:not(.metrix-custom) :is(input[type="checkbox"],input[type="radio"]) { accent-color: #197b95; }
  .metrix-app:not(.metrix-custom) :is(button,.btn,.btnlink,.btn-action,.primary-btn,.ghost-btn,.button,.nde-open,.logout-pill,.modal-btn,.tab-btn,.pill-control,.nav a):not(.card) {
    background: linear-gradient(120deg,#244d64,#153448) !important; color: #f2faff !important;
    border-color: rgba(123,189,216,.58) !important;
    border-radius: 8px; text-shadow: none !important;
    box-shadow: inset 0 1px 0 rgba(217,246,255,.13),0 3px 8px rgba(4,26,42,.16) !important;
  }
  .metrix-app:not(.metrix-custom) :is(button,.btn,.btnlink,.btn-action,.button):hover:not(:disabled):not(.card) { background: #26647c !important; border-color: #62d2e5 !important; }
  .metrix-app:not(.metrix-custom) :is(.primary,.primary-btn,.btn-primary,.upload-btn,.button-primary) { background: linear-gradient(120deg,#147d98,#185871) !important; border-color: #369db3 !important; }
  .metrix-app:not(.metrix-custom) :is(.tabs,.nde-tabs,.queue-tabs,.filters) :is(button,.filter-chip).active,
  .metrix-app:not(.metrix-custom) :is(.tab-btn.active,.mode-btn.active,.filter-chip.active,.stage-btn.active):not(.card) { background: linear-gradient(120deg,#92e8f1,#4ac8e1) !important; color:#092e3f !important; border-color:#8de5f1 !important; }
  .metrix-app:not(.metrix-custom) :is(.tab-btn.active,.mode-btn.active,.filter-chip.active,.stage-btn.active):not(.card):is(:hover,:focus-visible) { background:#81dfea !important; color:#092e3f !important; border-color:#b2f3f8 !important; }
  .metrix-app:not(.metrix-custom) :is(button,.btn,.btnlink):is(.danger,.bad,.reject,.btn-danger) { background: #753449 !important; color: #fff3f6 !important; border-color: #bd7085 !important; }
  .metrix-app:not(.metrix-custom) :is(button,.btn):is(.ok,.good,.success,.done,.signed) { background:#225c50 !important; color:#edfff7 !important; border-color:#5aab92 !important; }
  .metrix-app:not(.metrix-custom) :is(.pill,.chip,.tag,.status-chip,.status-pill) { background: rgba(83,157,182,.15) !important; color: var(--theme-ink) !important; border-color: rgba(81,150,179,.45) !important; text-shadow: none !important; box-shadow: none !important; }
  .metrix-app:not(.metrix-custom) :is(.pill,.chip,.status,.status-chip,.status-pill):is(.good,.ok,.completed,.complete,.status-completed,.status-complete,.status-active,.success) { background: #c7e7db !important; color:#165646 !important; border-color:#7caf9b !important; }
  .metrix-app:not(.metrix-custom) :is(.pill,.chip,.status,.status-chip,.status-pill):is(.warn,.pending,.waiting,.status-pending,.status-waiting,.status-in_progress) { background:#f5dfaa !important; color:#684700 !important; border-color:#c9a45a !important; }
  .metrix-app:not(.metrix-custom) :is(.pill,.chip,.status,.status-chip,.status-pill):is(.bad,.danger,.failed,.rejected,.status-failed,.status-rejected) { background:#f5ccd5 !important; color:#812d43 !important; border-color:#c78293 !important; }
  /* Unread counts remain red, including the NDE/PWHT Requests badges. */
  .metrix-app:not(.metrix-custom) :is(.tab-badge,.badge.danger,.notification-badge,.unread-badge) { background:#d9425d !important; color:#fff !important; border-color:#f48598 !important; }
  .metrix-app:not(.metrix-custom) :is(.modal,.modal-overlay,.modal-backdrop,.dialog-overlay,.dialog-backdrop,.sheet-overlay) { background:rgba(3,13,24,.72) !important; border:0; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  .metrix-app:not(.metrix-custom) :is(.modal-head,.modal-header,.modal-foot,.modal-footer,.dialog-title,.qc-clip-head) { background:rgba(164,199,220,.24) !important; color:#163348 !important; border-color:rgba(45,102,137,.2) !important; }
  .metrix-app:not(.metrix-custom) :is(.modal-body,.dialog-body,.qc-clip-title,.qc-clip-meta) { color:#163348 !important; }
  .metrix-app:not(.metrix-custom) :is(.modal-card,.modal-content,.dialog-card,.dialog-box) { max-height:calc(100dvh - 32px); overflow-y:auto; }
  .metrix-app:not(.metrix-custom) a:not(.btn):not(.btnlink):not(.button):not(.pill):not(.primary-btn):not(.ghost-btn):not(.nde-open):not(.pill-control) { color:#72deeb; }
  .metrix-app:not(.metrix-custom) :is(.card,.panel,.section,.band,.content-card,.requests-panel,.modal-card,.modal-content,.dialog-card,table) a:not(.btn):not(.btnlink):not(.button):not(.primary-btn):not(.ghost-btn):not(.nde-open):not(.pill-control) { color:#145c7a !important; }
  .metrix-app:not(.metrix-custom) :is(.draw-item,.card-item,.request-item,.weld-card,.flange-card) {
    background: var(--theme-light) !important; color:#163348 !important; border-color:rgba(178,218,237,.75) !important;
    --theme-ink:#163348; --theme-muted:#426478; --ink:#163348; --muted:#426478;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 4px 12px rgba(0,22,38,.12) !important;
  }
  .metrix-app:not(.metrix-custom) :is(.draw-item,.card-item,.request-item,.weld-card,.flange-card):is(.active,.selected) { border-color:#248ca8 !important; outline:2px solid rgba(45,159,188,.38); }
  /* Existing workflow classes retain distinct signals on the frosted weld cards. */
  .metrix-app:not(.metrix-custom) .weld-card:is(.is-prod,.k-nde-due) { border-color:#d6a144 !important; box-shadow:inset 0 0 0 1px #edc674,0 0 15px rgba(238,186,67,.22) !important; }
  .metrix-app:not(.metrix-custom) .weld-card:is(.weld-awaiting-pwht,.weld-pwht-approval) { border-color:#a677d5 !important; box-shadow:inset 0 0 0 1px #c6a0eb,0 0 15px rgba(168,114,220,.22) !important; }
  .metrix-app:not(.metrix-custom) .weld-card:is(.weld-in-progress,.weld-vt-ready,.weld-vt-checked) { border-color:#479bbd !important; box-shadow:inset 0 0 0 1px #78c4dc,0 0 15px rgba(82,163,206,.2) !important; }
  .metrix-app:not(.metrix-custom) .weld-card.weld-complete { border-color:#519c7b !important; box-shadow:inset 0 0 0 1px #89c6a9,0 0 15px rgba(56,169,115,.2) !important; }
  .metrix-app:not(.metrix-custom) .weld-card.weld-failed { border-color:#c5687f !important; box-shadow:inset 0 0 0 1px #e597a7,0 0 15px rgba(206,66,99,.2) !important; }
  .metrix-app:not(.metrix-custom) .weld-card.active-weld { outline:2px solid #2b91b0; outline-offset:2px; }
  .metrix-app:not(.metrix-custom) .tag.issued { background:#c7e7db !important; color:#165646 !important; border-color:#7caf9b !important; }
  /* Authentication and profile forms use the same frosted surface. */
  .metrix-app.metrix-form :is(.wrap,main,.form-inner) {
    --theme-ink:#163348; --theme-muted:#426478; --ink:#163348; --muted:#426478;
    background:var(--theme-light) !important; color:#163348 !important;
    border-color:rgba(219,246,255,.7) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 18px 48px rgba(0,0,0,.2) !important;
    backdrop-filter:blur(20px) !important;
  }
  .metrix-app.metrix-form p:not(.error):not(.danger):not(.warning) { color:var(--theme-muted) !important; }
  .metrix-app:not(.metrix-custom) :is(.system-completion-name,.system-completion-pct) { color:var(--theme-ink) !important; }
  .metrix-app:not(.metrix-custom) .system-completion-sub { color:var(--theme-muted) !important; }
  /* Keep document pages, PDF viewports and drawing/signature canvases untouched. */
  .metrix-app.metrix-editor :is(.toolbar,.bar) { --theme-ink:#edf7fc; --theme-muted:#bfd4e2; }
  .metrix-app.metrix-editor .bar { background:var(--theme-dark) !important; border-color:var(--theme-edge) !important; }
  .metrix-app:not(.metrix-custom) .bridge span { color:var(--theme-muted) !important; }
  .metrix-app:not(.metrix-custom) :is(.fact,.flag,.workflow-flag,.history-item,.method-list,.empty,.empty-state,.doc-link,.system-completion-item,.nde-row,.pwht-row) {
    color:var(--theme-ink) !important;
  }
  .metrix-app:not(.metrix-custom) :is(.fact,.flag,.history-item,.method-list,.doc-link) { background:rgba(239,249,255,.56) !important; border-color:rgba(67,121,153,.27) !important; }
  .metrix-app:not(.metrix-custom) :is(.fact small,.flag small,.history-item small,.method-list small,.fact .key,.fact .value) { color:var(--theme-muted) !important; }
  .metrix-app:not(.metrix-custom) .hero .eyebrow { color:#74dce9 !important; }
  .metrix-app #metrix-approvals-widget .maw-panel { background:var(--theme-dark) !important; border-color:var(--theme-edge) !important; }
  .metrix-app #metrix-approvals-widget .maw-item { background:var(--theme-light) !important; color:#163348 !important; }
  .metrix-app #metrix-approvals-widget :is(.maw-line,.maw-sub,.maw-meta-row) { color:#244b62 !important; }
  .metrix-app #metrix-approvals-widget .maw-link { color:#145c7a !important; }
  .metrix-app:not(.metrix-custom) :is(button,a,input,select,textarea):focus-visible { outline:2px solid #38a2bd !important; outline-offset:3px; }
  .metrix-app:not(.metrix-custom) :is(button,input,select,textarea):disabled { opacity:.6; }
  /* Login typography across app screens, including custom rep/foreman layouts.
     Keep local font sizes, colors and document/print typography intact. */
  body.metrix-app { font-family:system-ui,-apple-system,"Segoe UI",sans-serif !important; }
  body.metrix-app.metrix-fixed-background { background-attachment:fixed !important; }
  .metrix-app :is(h1,h2,h3,h4,h5,h6,.section-title,.project-title,.dialog-title) {
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif !important;
    font-weight:800 !important; letter-spacing:-.04em !important;
    line-height:1.15;
  }
  .metrix-app :is(button,input,select,textarea,.btn,.btnlink,.button,.primary-btn,.ghost-btn) {
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif !important;
  }
  .metrix-app :is(button,.btn,.btnlink,.button,.primary-btn,.ghost-btn) { font-weight:800 !important; }
  .metrix-app :is(label,.label-text) { font-weight:800; }
  .metrix-app :is(.eyebrow,.section-kicker,.workspace-kicker,.branding-kicker) {
    font-weight:800 !important; letter-spacing:.22em !important; text-transform:uppercase;
  }
  .metrix-app th { font-weight:800; letter-spacing:.06em; }
  /* Stationary blue environment and smoked work surfaces across app screens. */
  body.metrix-app { background:#07111e !important; --app-smoke:radial-gradient(ellipse at 0 0,#fff5e82b,transparent 65%),linear-gradient(130deg,#c9c3c342,#69636e70 46%,#2426328f); }
  body.metrix-app::before {
    background:linear-gradient(#9dd4ee0c 1px,transparent 1px),linear-gradient(90deg,#9dd4ee0c 1px,transparent 1px),radial-gradient(ellipse at 72% 10%,#17415a,transparent 39%),radial-gradient(ellipse at 8% 58%,#163a52,transparent 44%),radial-gradient(ellipse at 80% 95%,#18465c,transparent 48%),linear-gradient(125deg,#091522 17%,#0d2334 53%,#06111d 100%);
    background-size:56px 56px,56px 56px,100% 100%,100% 100%,100% 100%,100% 100%; mask-image:none;
  }
  body.metrix-app:not(.metrix-custom):not(.metrix-form):not(.metrix-editor) > :is(.wrap,.shell,main,.container) > :is(.card,.panel,.section,.content-card,.requests-panel),
  body.metrix-app.workspace:not(.metrix-form):not(.metrix-editor) :is(.requests-panel,.content-card,.cards > .card),
  body.metrix-app.workspace:not(.metrix-form):not(.metrix-editor) :is(.requests-panel,.content-card,.cards > .card),
  body.metrix-app.metrix-custom :is(.projects-shell,.branding-band,#workArea > .section:not(:first-child)) {
    --theme-ink:#f0f8ff; --theme-muted:#c0d7e5; --ink:#f0f8ff; --muted:#c0d7e5; --text:#f0f8ff;
    color:#f0f8ff !important; background:var(--app-smoke) !important;
    border-color:#cceaf244 !important;
    box-shadow:inset 0 1px 0 #effaff50,0 18px 30px -12px #01081399,0 42px 75px -20px #020914b3 !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  body.metrix-app:not(.metrix-custom) :is(.hero,.header-card,.header-shell,.hero-wrap,.topbar-box,.library-header) {
    background:radial-gradient(ellipse at 10% 0%,#81d5ec2e,transparent 42%),linear-gradient(115deg,#24516ebd,#1a3852cc 42%,#0c2034dd) !important;
  }
  body.metrix-app:not(.metrix-custom) > :is(.wrap,.shell,main,.container) > :is(.card,.panel,.section,.content-card,.requests-panel) > a:not(.btn):not(.btnlink) { color:#91d9ed !important; }
  body.metrix-app :is(button,.btn,.btnlink,.button,.btn-sm,.a-btn,.ghost-btn):not(.danger):not(.reject):not(.btn-danger):not(.ok):not(.primary):not(.card) {
    background:linear-gradient(125deg,#afcfda24,#3d78912e 55%,#12334845) !important;
    color:var(--theme-ink,#f0f8ff) !important; border:1px solid #95d5ef55 !important;
    box-shadow:inset 0 1px 0 #efffff30,0 6px 14px #0002 !important; text-shadow:none !important;
  }
  body.metrix-app :is(button,.btn,.btnlink,.button,.a-btn):not(.danger):not(.reject):not(.ok):not(.primary):hover { border-color:#7be0f5 !important; }
  body.metrix-app.metrix-custom :is(.band,.weld-card,.torque-card) { --theme-ink:#17384a; }
  body.metrix-app.workspace-library input[type=file] { min-width:0; width:100%; box-sizing:border-box; }
  @media (max-width:640px) {
    body.metrix-app.workspace-library table:not(.workspace-record-list) { display:block; max-width:100%; overflow-x:auto; }
    body.metrix-app.workspace-tracker .topbar-box h1 { font-size:26px; }
    body.metrix-app.workspace-tracker .topbar-box img { width:66px; }
  }
  @media (prefers-reduced-motion: reduce) { .metrix-app:not(.metrix-custom) :is(button,.btn,.card) { transition:none !important; } }
}