
/* v18 operation-log surface markers: audit/settings/users pages expose data-operation-log-surface so final acceptance guards can lock visible column semantics without merging page-specific search boundaries. */
/*
  UI baseline stylesheet (single source of truth)
  =============================================

  Goals
  - Keep every page visually consistent (forms, tables, buttons, spacing).
  - Avoid duplicated / conflicting rules. If you need a global change, do it here.

  Class conventions used by PHP templates
  - <body class="page-xxx"> : page identifier, used only for SMALL page-specific fixes.
  - .wrap              : main content container (max width + page padding).
  - .card              : card container.
  - .field             : applied to controls (input/select/textarea) to standardize sizing.
  - .field-inline      : put multiple controls on one row (flex).
  - .small/.muted      : helper text.
  - .flash ok/err      : flash messages.
  - .pill              : small status chip.
  - .btnlike           : summary button style (for <details><summary>).

  IMPORTANT
  - Do NOT put <style> blocks in PHP pages.
  - Do NOT add rules to assets/pages/*.css (they are placeholders and must stay empty).
  - For small page-specific fixes, scope selectors under <body class="page-xxx"> inside THIS file.
*/

/* ---------- Theme tokens ---------- */
/* v171 AssetMax UI Foundation: current shared visual language owner. */
:root{
  /* Brand / interaction */
  --brand:#1e40af;
  --brand-strong:#17358f;
  --primary:var(--brand);
  --primary-hover:var(--brand-strong);
  --primary-soft:#edf3ff;
  --primary-soft-hover:#e2ebff;
  --primary-soft-border:#c8d7f3;
  --primary-soft-border-hover:#b7c9eb;
  --danger-hover:#681818;
  --success:#166534;
  --success-hover:#14532d;
  --btn-neutral-hover-border:#aebdcd;
  --focus:#2d6cdf; /* Keep the established accessibility focus color. */

  /* Three-level page surface model: canvas -> surface -> card. */
  --bg:#f4f7fb;
  --surface:#fff;
  --surface-muted:#f8fafc;
  --surface-subtle:#f1f5f9;
  --card:var(--surface);
  --border:#d8e1ec;
  --border-strong:#c5d0dd;
  /* Alias used by some components for separators */
  --line:var(--border);

  /* Type hierarchy */
  --text:#182230;
  --text-strong:#101828;
  --muted:#667085;
  --danger:#7f1d1d;
  --warning:#8a5a00;
  --err:var(--danger);
  --warn-bd:#f2cf84;
  --warn-bg:#fff8e8;
  --warn-fg:#734a00;

  /* v183 semantic status language: status badges/chips consume these shared
     tokens instead of legacy framework palette literals. */
  --status-success-fg:var(--success);
  --status-success-bg:#eef8f1;
  --status-success-border:#b8dcc4;
  --status-info-fg:var(--brand);
  --status-info-bg:var(--primary-soft);
  --status-info-border:var(--primary-soft-border);
  --status-danger-fg:var(--danger);
  --status-danger-bg:#fff1f2;
  --status-danger-border:#fecdd3;
  --status-muted-fg:#475569;
  --status-muted-bg:var(--surface-muted);
  --status-muted-border:#e2e8f0;

  /* Shape / elevation */
  --radius:12px;
  --radius-sm:9px;
  --shadow-card:0 1px 2px rgba(16,24,40,.04),0 5px 16px rgba(16,24,40,.045);
  --shadow-popover:0 14px 32px rgba(15,23,42,.13);

  /* Shared spacing scale. Existing geometry keeps its proven values but can now
     reference one vocabulary instead of adding page-specific spacing. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;

  /* Table row separators (single source of truth) */
  --table-row-sep:1px solid rgba(24,34,48,.08);

  /* Form controls */
  --control-h:40px;      /* single source of truth for input/select height */
  --control-pad-x:12px;
  --control-pad-y:10px;
  --control-font:14px;

  /* Buttons (single source of truth)
     Contract:
     - All buttons share the same base size & typography.
     - Do NOT create page-specific px tweaks for button sizing.
     - Use .ui-btn variants for colors only.
  */
  --btn-h:38px;
  --btn-font:14px;
  --btn-line-height:1.2;
  --btn-pad-x:14px;
  --btn-radius:10px;
/* Layout contract (single source of truth) */
--header-pad-x:24px;
--header-pad-y:18px;

/* Layout paddings: keep the same left edge across subbars/cards */
--container-pad-x:24px;
--container-pad-y:24px;
--page-pad-x:var(--container-pad-x);

--badge-gap:8px;

--field-label-font:13px;
--field-label-lh:18px;

  /* Readable free-text stack for Traditional Chinese mixed with Latin/numbers. */
  --font-readable-cjk:"Noto Sans TC","Microsoft JhengHei UI","Microsoft JhengHei","PingFang TC","Heiti TC",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --field-label-mb:6px;
  --field-row-gap:14px;

--field-font:14px;
--field-lh:20px;

/* Current shared-shell geometry. `none` deliberately preserves the existing
   full-width enterprise workspace while making the variable a valid token. */
--page-max-w:none;
--topbar-h:72px;
--card-head-h:44px;
--badge-h:26px;
}

/* ---------- Text helpers ---------- */
.text-err{ color: var(--err); font-weight: 600; }

/* Confirm modal helpers */
.cm-help{ color: var(--muted); }
.cm-help.is-err{ color: var(--err); font-weight: 600; }

/* When a flash block is shown above the main wrap, keep spacing tight */
.flash-container + .wrap{ padding-top: 12px; }

/* ---------- Guard overlay (BFCache flash mitigation) ----------
 * Shown briefly when a page is restored from back/forward cache, before forcing reload.
 */
.guard-overlay{
  position:fixed;
  inset:0;
  background:#fff;
  z-index:9999;
}
.guard-overlay.hidden{ display:none; }

/* ---------- Page base ---------- */
*{box-sizing:border-box;}

html,body{height:100%;}

body{
  /* v171 uses the shared shell itself as the page gutter owner. */
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-readable-cjk);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Common action rows ----------
   Single source of truth for spacing between content blocks and action buttons.
   Use <div class="form-actions"> or <div class="ui-actions"> to avoid ad-hoc margins.
*/
.form-actions,
.ui-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:12px;
}

/* If helper text follows actions, keep a consistent small gap. */
.form-actions + .small,
.ui-actions + .small{ margin-top:8px; }

/* Simple top header row used by a few single-purpose pages */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}

.wrap{
  padding:var(--container-pad-y) var(--container-pad-x);
}

/* Back-compat: some pages used .container for the main content wrapper */
.container{
  padding:0 var(--container-pad-x) var(--container-pad-y);
}

/*
  When `.container` is rendered inside the global `.page-wrap` (which already
  provides the horizontal padding), avoid double-left/right padding.
  This keeps subbars / tabs aligned with the main card edges.
*/
.page-wrap .container{padding-left:0;padding-right:0;}


/* Headings */
h1{margin:0 0 16px 0;font-size:32px;line-height:1.3;font-weight:800;letter-spacing:.01em;color:var(--text-strong);}
h2,h3{margin:0 0 12px 0;color:var(--text-strong);}

/* ---------- Layout blocks ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow-card);
}
.wrap > .card + .card,
.container > .card + .card{margin-top:18px;}
/*
  Card body wrapper
  - Many pages rely on `.card` providing the internal padding.
  - `.card-body` exists for structure/contract but should NOT add extra padding,
    otherwise cards that include `.card-body` would look “taller” than cards that
    place fields directly under `.card` (e.g. asset_view.php).
*/
.card-body{padding:0;}
.card.pad0{padding:0;}
.card.pad0 > .card-head{padding:18px 18px 10px 18px;margin:0;}
.card.pad0 > .card-body{padding:0 18px 18px 18px;}

/* Table-in-card contract (used by list/audit/user tables) */
.table-card .table-wrap{
  /*
   * Keep the table full-width so the header background spans the
   * entire card content area (no "white gutters" on the sides).
   * Apply horizontal padding to cells instead.
   */
  padding: 0 0 18px;
  overflow: auto;
  border-top: 1px solid var(--border);
}
.table-card .table-wrap table{margin:0;border:0;border-radius:0;}

/* Align table content with other cards (same horizontal padding as card titles) */
.table-card .table-wrap table th,
.table-card .table-wrap table td{ padding-left: 18px; padding-right: 18px; }

/* List results: keep the last column away from the right border */
.list-results .table-wrap table th:last-child,
.list-results .table-wrap table td:last-child{ padding-right: 18px !important; }
.table-card .list-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:0 18px 12px 18px;}
.table-card .list-tools.list-tools--results-pager-top{padding-top:6px;padding-bottom:10px;}
.table-card .list-tools.list-tools--results-pager-bottom{padding-top:10px;padding-bottom:12px;border-top:1px solid var(--border);}
.results-pager__meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.results-pager__chip{display:inline-flex;align-items:center;min-height:26px;padding:0 9px;border:1px solid var(--border);border-radius:999px;background:#f8fafc;color:var(--muted);font-size:12px;line-height:1.35;white-space:nowrap;}
.results-pager__chip--primary{background:#eef4ff;border-color:#d4def4;color:#1f2937;font-weight:700;}
.results-pager__chip--secondary{background:#f8fafc;border-color:var(--border);color:var(--muted);font-weight:500;}
.results-pager__controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.results-pager__jump{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.results-pager__jump-label{color:var(--muted);white-space:nowrap;font-size:12px;}
.results-pager__jump .field{height:32px;font-size:13px;}
.results-pager__jump .pager-input{width:88px;min-width:88px;}
.results-pager__nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.ui-btn--pager{min-width:72px;justify-content:center;height:32px;padding:0 12px;font-size:13px;line-height:1.2;border-radius:9px;}
.results-pager__nav .ui-btn,
.results-pager__jump .ui-btn{min-width:72px;justify-content:center;height:32px;padding:0 12px;font-size:13px;line-height:1.2;border-radius:9px;}
.results-pager__nav .ui-btn.is-disabled,
.results-pager__jump .ui-btn.is-disabled,
.results-pager__nav .ui-btn[disabled],
.results-pager__jump .ui-btn[disabled]{pointer-events:none;opacity:.42;box-shadow:none;filter:none;}
.results-pager__nav .ui-btn.is-disabled:hover,
.results-pager__jump .ui-btn.is-disabled:hover{transform:none;}


/* Generic table styling (used by tools pages) */
.table{width:100%;border-collapse:collapse;}
.table th,.table td{padding:10px 12px;border-bottom:var(--table-row-sep);vertical-align:top;}
.table thead th{font-weight:700;text-align:left;white-space:nowrap;}
.table .col-unique{width:80px;text-align:center;}
.table .col-index{width:240px;}
.table .col-cols{width:auto;}

/* System master lists (brands / locations) */
.table.system-master-table .col-id{width:70px;}
.table.system-master-table .col-count{width:90px;}
.table.system-master-table .col-status{width:90px;}
.table.system-master-table .col-sort{width:80px;}
.table.system-master-table .col-actions{width:120px;}
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  /* layout contract */
  min-height:var(--card-head-h);
  margin:0 0 10px 0;
}


/*
  Row spacing contract
  --------------------
  Keep vertical rhythm consistent across all pages.

  Card spacing
  - Stacked cards (outside grid): `.wrap > .card + .card` / `.container > .card + .card` => margin-top: 18px
  - Card internals: `.card-head` has margin-bottom: 10px; `.card` provides padding; `.card-body` adds no extra padding

  Grid spacing (Create/Edit/View two-column layout)
  - `.grid` / `.grid-2` => gap: 18px (both column gap and row gap)

  Form row spacing
  - `.field-row` => margin-top: 14px
  - First row in a card should NOT add extra spacing:
    - `.field-row:first-of-type` => margin-top: 0
    - `.card-body > .field-row:first-child` / `.card-body > .field:first-child` => margin-top: 0

  Table-in-card spacing
  - `.table-card .list-tools` => padding-bottom: 12px
  - `.table-card .table-wrap` => padding-bottom: 18px
*/

/* Field rows (used by form/view pages) */
.field-row{margin-top:var(--field-row-gap)}
.field-row:first-of-type{margin-top:0}
/* Normalize first block spacing inside cards (prevents first label from "dropping") */
.card-body > .field:first-child,
.card-body > .field-row:first-child{margin-top:0}
.field-row label{display:block;margin-bottom:var(--field-label-mb);font-size:.92rem;color:var(--muted)}
.req{color:var(--danger);font-weight:700;}
.label-inline-note{margin-left:.35em;color:var(--muted);font-weight:400;font-size:.9em;}
.label-inline-note.is-over-limit{color:var(--danger);}
.label-note{font-size:.85rem;color:var(--muted)}
.hint{font-size:.9rem;color:var(--muted)}
.help{font-size:.85rem;color:var(--muted);margin-top:6px}
.readonly-field{background:#f5f5f5;color:#666}

/* subcard: used inside forms (e.g., extra sections like disposal) */
.subcard{border:1px solid var(--border);border-radius:12px;padding:12px;background:rgba(0,0,0,.015);margin-top:12px}
.subcard-title{font-weight:700;margin:0 0 10px}

/* filter panel divider (list/audit) */
.filter-panel .fp-divider{height:1px;background:#e6e6e6;margin:12px 0;}

/* help box (users create panel etc.) */
.help-box{border:1px dashed #d0d0d0;border-radius:12px;padding:14px 16px;background:rgba(255,255,255,.55);font-size:13px;line-height:1.55}
.help-box h3{margin:0 0 8px 0;font-size:15px;line-height:1.35}
.help-box ul{margin:0;padding-left:18px}
.help-box li{margin:5px 0}
.help-box .help-sec{margin-top:10px}
.help-box .help-sec-title{margin:10px 0 6px 0;font-weight:700;font-size:13px;line-height:1.35}
.help-box .help-note{margin-top:8px;font-size:13px;line-height:1.55}

/* modal contract (used by hard delete confirm etc.) */
.modal-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.45);z-index:1000;}
.modal{width:min(520px, 100%);background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.22);padding:16px;}
.modal-title{font-weight:800;font-size:18px;margin:0 0 10px 0;}
.modal-body{color:#111;line-height:1.6;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}

/* --- preview update modal (asset_form edit only) --- */
.modal.modal-preview{display:flex;flex-direction:column;max-height:calc(100vh - 80px);padding:16px;}
.modal.modal-preview .modal-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.pv-scroll{border:1px solid rgba(0,0,0,.06);border-radius:12px;background:rgba(255,255,255,.55);padding:12px;flex:1;min-height:120px;overflow:auto;}
.pv-summary{font-weight:700;color:var(--muted);margin:0 0 10px 0;}
.pv-item{padding:10px 0;border-top:1px solid var(--line);}
.pv-item:first-child{border-top:0;padding-top:0;}
.pv-k{font-weight:700;margin:0 0 6px 0;}
.pv-row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;}
.pv-before,.pv-after{white-space:pre-wrap;word-break:break-word;}
.pv-arrow{color:var(--muted);}
.pv-after{font-weight:700;}
.pv-empty{color:var(--muted);}
/* confirm modal: asset tag correction diff */
.cm-bodytext{margin-bottom:10px;}
.cm-tagdiff{display:flex;align-items:center;gap:8px;margin-top:6px;}
.cm-taglabel{color:var(--muted);font-weight:600;}
.cm-tagold{color:var(--muted);font-weight:600;}
.cm-tagarrow{color:var(--muted);font-weight:600;}
.cm-tagnew{color:inherit;font-weight:600;}

.ro{min-height:var(--control-h);padding:var(--control-pad-y) var(--control-pad-x);border:1px solid var(--border);border-radius:12px;background:var(--bg);display:flex;align-items:center;font-size:var(--field-font);line-height:var(--field-lh);color:var(--muted);cursor:default;user-select:text;}
.ro.ro-multi{
  align-items:flex-start;
  white-space:pre-wrap;
}

/* Read-only field rendered as an input box (created/updated timestamps & hints).
   - Keep the normal "field" box appearance so alignment stays consistent.
   - Make it visually muted and non-interactive to avoid looking like a selectable control.
*/
.field.field-readonly{
  background:#f7f7f8;
  border-color:#d0d0d0;
  color:var(--muted);
  cursor:default;
  pointer-events:none;
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

/* System settings (入口) cards: do not stretch shorter cards to match the taller one. */
.system-settings-grid{align-items:start;}

@media (max-width: 960px){
  .grid-2{grid-template-columns:1fr;}
}

/* Filter panels (list/audit) */
.filter-panel label{display:block;margin-bottom:6px;font-size:var(--field-label-font);line-height:var(--field-label-lh);min-height:var(--field-label-lh);color:var(--muted);}
.filter-label-with-info{display:flex;align-items:center;gap:6px;min-height:var(--field-label-lh);margin-bottom:6px;}
.filter-label-with-info > label{margin:0;min-height:0;}
.info-popover{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;}
.info-popover__trigger{width:18px;height:18px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--bg);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1;cursor:help;user-select:none;}
.info-popover__trigger:hover,.info-popover__trigger:focus-visible,.info-popover.is-open .info-popover__trigger{border-color:var(--primary);color:var(--primary);outline:none;}
.info-popover__panel{position:fixed;display:block;width:max-content;max-width:min(340px,calc(100vw - 24px));padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);box-shadow:0 10px 28px rgba(0,0,0,.16);color:var(--text);font-size:12px;font-weight:400;line-height:1.5;white-space:normal;z-index:2200;}
.info-popover__panel[hidden]{display:none!important;}
.info-popover__title{display:block;margin:0 0 5px;font-weight:700;color:var(--text);}
.info-popover__text{display:block;}
.info-popover__list{display:grid;gap:3px;}
.info-popover__item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:start;}
.info-popover__item::before{content:"•";color:var(--muted);}
.filter-info-popover{z-index:20;}
.asset-signal-marker{display:inline-flex;align-items:center;gap:5px;max-width:100%;}
.asset-signal-popover .info-popover__trigger{width:17px;height:17px;font-size:11px;}
.filter-panel .fp-actions{display:flex;gap:10px;align-items:center;}
.filter-panel .fp-actions .ui-btn{min-width:110px;}
.fp-check{margin:0;display:flex;align-items:center;gap:8px;}


/*
  Back-compat / layout contract helper:
  Some pages use `grid` as the 2-col container class.
  Keep it consistent with `.grid-2` so Create/Edit/View share the same layout.
*/
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  /* Do not stretch shorter cards; avoid large empty areas on the right column */
  align-items:start;
}

/* Keep vertical rhythm between consecutive grid sections */
.grid + .grid{margin-top:18px;}

/* Grid helpers */
.span-2{grid-column:1 / -1;}

@media (max-width: 960px){
  .grid{grid-template-columns:1fr;}
}

/* ---------- Text helpers ---------- */
.small{font-size:12px;}
.muted{color:var(--muted);}
.muted{color:var(--muted);}

/* v190 Shared Asset Tag Link Convergence
   A clickable asset tag always means "open this asset" regardless of which
   list/dashboard surface renders it. Keep that interaction identity in one
   shared owner; plain asset-tag values remain normal body typography. */
.asset-tag-link{
  color:var(--brand);
  font-weight:600;
}

/* ---------- Flash messages ---------- */
.flash{border-radius:9px;padding:10px 12px;margin:10px 0;background:#fff;border:1px solid var(--border);}
.flash.err{border-color:#f2b8b8;background:#fff5f5;}

.flash.warn{border-color:var(--warn-bd);background:var(--warn-bg);color:var(--warn-fg)}
.flash.ok{border-color:#bfe6bf;background:#f3fff3;}
.flash.info{border-color:#c6d9ff;background:#f5f9ff;}

/* Asset edit optimistic-lock conflict: the latest DB values are reloaded into
   the form, while the alert stays compact and only explains the rejected save. */
.asset-stale-conflict{padding:12px 14px;}
.asset-stale-conflict__message{line-height:1.55;}

/* Flash container: keep alignment with cards but do not add extra vertical gaps */
.container.flash-container{padding-bottom:0;}
.container.flash-container .flash{margin:0 0 12px 0;}
.asset-loader-error{position:relative;z-index:1100;margin:12px auto;max-width:1180px;}

.container.subtabs-container{padding-bottom:0;}

/* ---------- Buttons ---------- */
button,.btnlike{
  appearance:none;
  border:1px solid #333;
  background:#fff;
  border-radius:9px;
  padding:6px 12px;
  font-size:13px;
  cursor:pointer;
}
/* Links styled as buttons should not look like underlined links */
.btnlike{ text-decoration:none; }
a.btnlike:hover{ text-decoration:none; }
button:hover,.btnlike:hover{filter:brightness(0.98);}
button:active,.btnlike:active{transform:translateY(1px);}


/* ---------- Modal (confirm dialogs etc.) ---------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.45);
  z-index:1000;
}
.modal{
  width:min(520px, 100%);
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.22);
  padding:16px;
}
.modal-title{
  font-weight:800;
  font-size:18px;
  margin:0 0 10px 0;
}
.modal-body{color:#111;line-height:1.6;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}


/* Success button (e.g., Cancel archive) */


/* Simple inline row helper (no inline styles in PHP templates) */
.inline-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* Inline form helper (replaces `style="margin:0"`) */
form.inline{margin:0;display:inline;}

/* Tiny utilities to avoid inline styles in templates */
.mt-6{margin-top:6px;}
.mt-8{margin-top:8px;}
.mt-10{margin-top:10px;}
.mb-10{margin-bottom:10px;}
.minw-240{min-width:240px;}
.minw-140{min-width:140px;}
.w-90{width:90px;}
.w-110{width:110px;}
.w-160{width:160px;}
.hidden{display:none !important;}

/* <summary> styled as a button */
/* Keep <summary> text size consistent with body text across browsers */
summary{font-size:13px;}
details > summary.btnlike{display:inline-block;list-style:none;}
details > summary::-webkit-details-marker{display:none;}

/* Audit toggle buttons inherit font size from context */
button.audit-toggle{font-size:13px; line-height:1.2;}

/* ---------- Pills ---------- */
/* Canonical pill presentation is owned with the shared Badge module below. */

/* plain semantic text (no pill) */
.txt-bad{color:#c62828;font-weight:600;}
.txt-warn{color:var(--warning);font-weight:600;}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;margin-top:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
/* Tables on this project should read slightly smaller than body text.
   This also ensures inline UI controls inside tables (e.g. "展開詳情/收合詳情") don't look oversized. */
table td{font-size:13px;}
th,td{padding:10px 12px;border-bottom:var(--table-row-sep);vertical-align:top;}
thead th{background:var(--surface-muted);color:#344054;font-size:13px;font-weight:700;text-align:left;}
tbody tr:last-child td{border-bottom:none;}

/* ---------- Audit column header consistency ----------
   audit.php uses <thead><th> for column headers, but 設備詳情（asset_view.php）
   的「設備異動紀錄（Audit）」表格為了簡化結構，第一列使用 <td class="k">。
   為了讓兩個頁面的欄位標題（例如：編號 / 時間 / 動作 / 內容）字型與大小一致，
   這裡把 asset_view 的第一列視覺樣式補齊成與 thead th 相同。
*/
.page-asset_view .card.span-2 > table tr:first-child > td{
  background:rgba(255,255,255,.55);
  font-weight:600;
  font-size:13px;
}

/* Key/Value tables used in 設備詳情（asset_view.php） */
table.kv{margin-top:0;border:none;border-radius:0;background:transparent;}
table.kv th, table.kv td{padding:10px 12px;border-bottom:var(--table-row-sep);}
table.kv tr:last-child th, table.kv tr:last-child td{border-bottom:none;}
table.kv td.k{width:140px;white-space:nowrap;color:#555;}

/* Audit list expand/collapse control (view toggle, not a primary action)
   Contract:
   - Row toggle text: 「展開詳情 / 收合詳情」
   - Rendered as blue link-like text (no button chrome)
*/
/* NOTE: .audit-toggle is rendered as <button type="button"> for both global and row controls.
   Always override the global button chrome so row-level view toggles remain link-like. */
button.audit-toggle{
  font-size:13px;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:var(--focus);
  cursor:pointer;
  text-decoration:underline;
}

button.audit-toggle.audit-toggle--row{
  font-size:13px;
  display:inline-block;
  margin-top:6px;
}



button.audit-toggle:disabled{
  opacity:0.45;
  cursor:default;
  text-decoration:none;
}

/* Row control is a view toggle. Keep it on its own line but with NO extra blank gap. */
.audit-toggle--row{ display:inline-block; }
.audit-toggle--row:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:6px; }
.audit-exp > .audit-toggle--row{ margin-top:0; }

/* ---------- Form controls (single source of truth) ---------- */
label{display:block;font-size:13px;margin:10px 0 6px;color:#475467;}

/*
  Contract:
  - Single-line controls (input/select) are vertically centered using a fixed control height.
  - Multi-line controls (textarea) MUST NOT inherit the single-line centering math.

  .field is a CONTROL CLASS (preferred):
  - Single-line: <input class="field" ...> / <select class="field" ...>
  - Multi-line:  <textarea class="field" ...>

  Note: Do NOT use `.field` as a generic wrapper for sizing.
  A broad selector like `.field` with a fixed `height:` / `line-height:` will unintentionally affect textarea.
*/
.field{width:100%;}

/*
  SINGLE-LINE CONTROL LOCK (contract)

  Allowed selectors for height/line-height lock when `.field` is involved:
  - input.field, select.field

  Rationale:
  - Keeps the "control-h" math strictly on single-line controls.
  - Prevents textarea from ever inheriting the centering math.
  - Forces pages to opt-in by using the contract classes.
*/

/* Single-line controls (input/select): alignment lock */
input.field,
select.field{
  width:100%;
  max-width:100%;
  /*
    P0: Control alignment lock
    Windows display scaling (100%/125%/150%/175%) can make native <select>
    render a different internal box model than <input>, leading to visual
    misalignment even when both have the same CSS height.

    Strategy:
    - Use border-box so height includes border.
    - Use 0 vertical padding + computed line-height for consistent vertical centering.
    - Keep enough right padding for the native select arrow.
  */
  box-sizing:border-box;
  height:var(--control-h);
  padding:0 var(--control-pad-x);
  line-height:calc(var(--control-h) - 2px);
  border:1px solid var(--border-strong);
  border-radius:9px;
  background:var(--surface);
  color:var(--text);
  font-size:var(--control-font);
  /* line-height is set above for consistent centering */
}

/* Multi-line controls (textarea): multi-line line-height must be normal (NOT control-h). */
textarea,
.field textarea,
textarea.field{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  border:1px solid var(--border-strong);
  border-radius:9px;
  background:var(--surface);
  color:var(--text);
  font-size:var(--control-font);
  font-family:var(--font-readable-cjk);
  padding:var(--control-pad-y) var(--control-pad-x);
  height:auto;
  min-height:120px;
  resize:none; /* per UI contract */
  line-height:1.4;
}

/* Compact textarea utility (used when a multi-line field should align with a 2-column card peer). */
textarea.field.field-textarea--compact{
  min-height:96px;
}


/* Native select delivery contract.
   IMPORTANT: this must target select.field, not generic select. The earlier
   single-line control rule uses the more-specific select.field selector and
   sets background/padding; a generic select rule is therefore overridden in
   real browser computed style even when it appears later in the stylesheet. */
select.field{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  color:var(--text) !important;
  background-image:url("icons/select-chevron-v10.svg?v=20260721v10");
  background-position:right 13px center;
  background-size:16px 16px;
  background-repeat:no-repeat;
  padding-right:42px;
}
select.field:invalid{color:var(--text) !important;}

/* Focus style */
input:focus,select:focus,textarea:focus{
  outline:2px solid rgba(45,108,223,0.25);
  border-color:var(--focus);
}


/* Active filter field highlight: any applied list-page filter should be visible at the field itself. */
.filter-panel .filter-item:not(.filter-area-advanced-panel):not(.filter-area-advanced-toggle).is-filter-active > label,
.filter-panel .filter-item:not(.filter-area-advanced-panel):not(.filter-area-advanced-toggle):has(.field-multiselect.is-filter-active) > label{
  color:var(--focus);
  font-weight:700;
}
.filter-panel .filter-item:not(.filter-area-advanced-panel):not(.filter-area-advanced-toggle).is-filter-active input.field:not(:disabled),
.filter-panel .filter-item:not(.filter-area-advanced-panel):not(.filter-area-advanced-toggle).is-filter-active select.field:not(:disabled),
.filter-panel .filter-item:not(.filter-area-advanced-panel):not(.filter-area-advanced-toggle).is-filter-active textarea.field:not(:disabled),
.filter-panel .field-multiselect.is-filter-active .field-multiselect__summary{
  border-color:var(--focus);
  background-color:color-mix(in srgb, var(--focus) 7%, #fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--focus) 24%, transparent);
}

/* Disabled form controls: make "not available yet" states visually obvious.
   (e.g., index filter: OS version is disabled until OS product is selected.) */
input.field:disabled,
select.field:disabled,
textarea.field:disabled{
  background-color:color-mix(in srgb, var(--muted) 8%, #fff);
  border-color:color-mix(in srgb, var(--muted) 25%, #bbb);
  color:var(--muted);
  cursor:not-allowed;
}

/* Inline fields (e.g., YYYY + MM) */
.field-inline{
  display:flex;
  gap:12px;
  align-items:center;
}
.field-inline > *{flex:1 1 0;}


/* Flex spacer helper */
.spacer{flex:1 1 auto;}
/* Compact control (avoid overly long selects/inputs in tables) */
.field-compact{width:auto !important;max-width:360px;}
.field-inline .field-compact{flex:0 0 auto;}
.field-tag{width:min(520px,100%) !important;max-width:520px;}
.inline-row .field-tag{flex:0 0 auto;}


/* Fixed-width controls (use for inline selects/inputs to avoid layout jumping) */
.field-fixed{width:240px !important;min-width:240px;max-width:240px;}
.field-inline .field-fixed{flex:0 0 240px;}
/* ---------- Topbar (header area used by many pages) ---------- */
.topbar{
  /* Contract: keep header in normal flow to avoid scroll/overlap weirdness. */
  position:static;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;

  max-width:var(--page-max-w);
  margin:0 auto 20px;
  padding:12px var(--page-pad-x) 11px;
  box-shadow:0 1px 0 rgba(16,24,40,.02);
}

/* Tools/content wrap: keep page body aligned with topbar max width */
.page-wrap{
  max-width:var(--page-max-w);
  margin:0 auto;
  padding:0 var(--page-pad-x);
}

/* Tools pages follow the global card contract; no tools-only spacing overrides. */

.topbar .left{display:flex;align-items:center;flex:0 0 auto;min-width:max-content;}
.topbar .product-brand{
  display:flex;
  align-items:center;
  min-height:18px;
  color:var(--brand);
  font-size:13px;
  line-height:18px;
  font-weight:800;
  letter-spacing:.055em;
}
.topbar .product-brand__wordmark{white-space:nowrap;}
.topbar .title-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:var(--card-head-h);
}

.topbar .title-row h1{margin:0;white-space:nowrap;}
.topbar .title-badges{
  display:flex;
  align-items:center;
  gap:var(--badge-gap);
  min-height:var(--badge-h);
  flex-wrap:nowrap;
}

.topbar .right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:1 1 auto;min-width:0;}
.topbar .nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  /* When the username wraps to next line, align it to the same bottom edge */
  align-items:flex-end;
}
.topbar .nav form.nav-logout{
  display:inline-flex;
  margin:0;
}
.topbar .nav .nav_sep{
  display:inline-flex;
  align-items:center;
  height:var(--control-h);
  box-sizing:border-box;
  padding:0 4px;
  color:#999;
  font-size:14px;
}
.topbar .nav a{
  /* Topbar links are rendered as .ui-btn. Do not override their size here. */
  text-decoration:none;
}
/* Backward-compat: in case a topbar link is not a .ui-btn, keep it readable. */
.topbar .nav a:not(.ui-btn):not(.uop-btn):not(.account-menu__item):not(.topbar-menu__item){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#111;
  border:1px solid #333;
  border-radius:9px;
  padding:0 14px;
  background:#fff;
  line-height:1;
  height:var(--control-h);
  box-sizing:border-box;
}
.topbar .nav .nav_user{
  display:inline-flex;
  align-items:center;
  height:var(--control-h);
  box-sizing:border-box;
  padding:0 0 0;
  font-size:14px;
  color:#111;
  margin-left:10px;
}

.topbar .nav .topbar-menu{
  position:relative;
  display:inline-flex;
  align-items:flex-end;
}
.topbar .nav .account-menu{ margin-left:10px; }
.topbar .nav .topbar-menu__trigger{
  gap:6px;
}
.topbar .nav .topbar-menu__chevron,
.topbar .nav .account-menu__chevron{
  display:inline-block;
  width:10px;
  height:10px;
  flex:0 0 10px;
  background-image:url("icons/action-chevron-v11.svg?v=20260722v11");
  background-position:center;
  background-size:10px 10px;
  background-repeat:no-repeat;
  transform:rotate(0deg);
}
.topbar .nav .topbar-menu__trigger[aria-expanded="true"] .topbar-menu__chevron{
  transform:rotate(180deg);
}
.topbar .nav .topbar-menu__panel,
.topbar .nav .account-menu__panel{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:70;
  min-width:148px;
  padding:6px;
  border:1px solid #d8dee8;
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow-popover);
}
.topbar .nav .topbar-menu__panel:not(.hidden),
.topbar .nav .account-menu__panel:not(.hidden){
  display:flex;
  flex-direction:column;
  gap:4px;
}
.topbar .nav .topbar-menu__item,
.topbar .nav .account-menu__item{
  display:flex;
  width:100%;
  min-height:34px;
  align-items:center;
  justify-content:flex-start;
  box-sizing:border-box;
  border:0;
  border-radius:8px;
  padding:8px 10px;
  background:transparent;
  color:#111827;
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  font-size:14px;
  line-height:1.3;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.topbar .nav .topbar-menu__item:hover,
.topbar .nav .topbar-menu__item:focus-visible,
.topbar .nav .account-menu__item:hover,
.topbar .nav .account-menu__item:focus-visible{
  background:#f3f6fb;
  outline:none;
}
.topbar .nav .topbar-menu__item.is-active{
  background:#eaf2ff;
  color:#1b4fbf;
  font-weight:700;
}
.topbar .nav .topbar-menu__item--danger,
.topbar .nav .account-menu__item--danger{
  color:#991b1b;
}
.topbar .nav .topbar-menu__item--danger:hover,
.topbar .nav .topbar-menu__item--danger:focus-visible,
.topbar .nav .account-menu__item--danger:hover,
.topbar .nav .account-menu__item--danger:focus-visible{
  background:#fef2f2;
}
.topbar .nav .account-menu__logout-form{
  display:block;
  margin:0;
}

.topbar .nav a.active{background:#eaf2ff;border-color:#2d6cdf;}

/* Secondary tabs (list management pages) */
.subtabs{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 10px 0;}
.subtabs .ui-btn--subtab.active{background:#eaf2ff;border-color:#2d6cdf;color:#1b4fbf;}

/* ---------- Page-specific micro fixes ---------- */
/* Auth/task pages: center horizontally, but keep the content slightly high on the viewport.
   This keeps single-task pages focused without making the card look like it floats too low. */
body.page-login,
body.page-change_password,
body.page-reauthenticate{
  margin:0;
}
.auth-shell,
body.page-login .login-shell{
  width:min(100%, 560px);
  margin:clamp(48px, 10vh, 88px) auto 0;
  padding:0 24px 24px;
}
.auth-shell h1,
body.page-login .login-shell h1{
  margin:0 0 12px 0;
}
body.page-login .login-brand{
  width:100%;
  margin:0 0 14px 0;
  text-align:center;
}
body.page-login .login-brand__product{
  margin:0;
  color:#1e40af;
  font-size:clamp(30px, 7vw, 36px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.02em;
}
body.page-login .login-brand h1{
  margin:6px 0 0;
  display:flex;
  justify-content:center;
  align-items:baseline;
  flex-wrap:wrap;
  font-size:clamp(20px, 4.8vw, 24px);
  line-height:1.3;
  font-weight:700;
  letter-spacing:.01em;
}
body.page-login .login-brand__system{min-width:0;}
body.page-login .login-brand__instance{
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:.04em;
  overflow-wrap:anywhere;
}
body.page-login .login-brand__instance::before{
  content:"·";
  margin:0 6px;
  color:#9ca3af;
  font-weight:400;
  letter-spacing:0;
}
.auth-shell .card,
body.page-login .login-shell .card{
  max-width:none;
}
body.page-login .login-shell .card{
  width:100%;
  max-width:480px;
  margin-left:auto;
  margin-right:auto;
  box-shadow:0 4px 16px rgba(15,23,42,.05);
}
.auth-shell .flash.warn,
body.page-login .login-shell .flash.warn{
  border-color:#d8dee8;
  background:#fbfcfe;
  color:#263243;
  padding:12px 14px;
  line-height:1.75;
}


/* Empty title badge slots must not steal title width; long page titles such as
   清單管理操作紀錄 should stay on one line when the viewport has room. */
.topbar .title-badges:empty{min-width:0;}
body.page-login .login-shell .login-actions{margin-top:16px;}

/* Users page: creation form should be visually compact
   (works regardless of the page body class used by render_page_head) */
.form-narrow input,
.form-narrow select,
.form-narrow textarea{
  max-width:320px;
}

/* --- Consistency guards (v57) --- */
/* Keep <details><summary> same size as body text (avoid browser default larger summary) */
details > summary {
  font-size: inherit;
  line-height: inherit;
}

/* Topbar nav buttons inherit canonical .ui-btn sizing (single source of truth). */

/* Keep "展開詳情/收合詳情" (details/summary) visually consistent with body text */
details > summary,
details > summary.btnlike,
.audit-toggle {
  font-size: 13px;
  line-height: 1.2;
}

/* Users page: keep the create-form left column inputs uniform */
.create-grid .field{
  max-width: 260px;
}

/* Compact selects/buttons used next to names/roles */
.field-compact{
  width: auto;
  min-width: 180px;
  max-width: 260px;
}


/* Card title contract: supports both <div class="card-head"><h3>..</h3></div> and plain <h3>..</h3> inside .card */
.card h3{
  margin:0;
  font-size:18px;
  line-height:24px;
  font-weight:800;
}
.card > h3{
  margin:0 0 10px 0;
  min-height:var(--card-head-h);
  display:flex;
  align-items:center;
}

/* Select chevron rendering is defined once in the shared select block above. */

/* ---------- Filter Grid Contract v3 (shared) ---------- */
/*
  Goals
  - Predictable: fixed column count per breakpoint (verifiable via computed style)
  - Extensible: adding/removing a field never requires nth-child or width hacks
  - Shared: index.php (asset list) and audit.php must use the SAME contract
  - Verifiable: keyword + actions must form a stable "tail row" on >=768px
  - No magic: no inline style, no % widths, no margin-as-gap, no absolute positioning
*/

/* Tokens (single source of truth) */
:root{
  --filter-col-gap: 16px;
  --filter-row-gap: 10px;   /* tighter like audit */
  --filter-min-h: 40px;     /* matches form controls contract */
}

/* Container */
.filter-grid{
  display:grid;
  column-gap: var(--filter-col-gap);
  row-gap: var(--filter-row-gap);

  /* keep rows compact & deterministic */
  align-items:start;
  align-content:start;
  grid-auto-rows:auto;
  grid-auto-flow: row;
}

/* Fixed columns by breakpoint
   - Desktop (>=1200): 5 columns (index/audit should match visually)
   - Medium (900-1199): 3 columns
   - Small (600-899): 2 columns
   - Mobile (<600): 1 column
*/
@media (min-width: 1200px){
  .filter-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 900px) and (max-width: 1199px){
  .filter-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 899px){
  .filter-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px){
  .filter-grid{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* One field wrapper (one item = one cell by default) */
.filter-item{
  min-height: var(--filter-min-h);
  min-width:0; /* prevent overflow from forcing column expansion */
}

/* Ensure controls fill the cell (override legacy fixed widths) */
.filter-grid .field,
.filter-grid .field-fixed{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box;
}


/* Page-specific allowance (shared contract): audit keyword can be wider on 3-col layout */
@media (min-width: 1200px) and (max-width: 1599px){
  .audit-keyword-field{ grid-column: 1 / span 2; }
}
/* Keyword: span 2 ONLY on wide (5-col) layout */
.filter-item--keyword{ grid-column: span 1; }
@media (min-width: 1600px){
  .filter-item--keyword{ grid-column: 1 / span 2; }
}


/* Keyword inline layout: input + optional checkbox on the same row */
.filter-keyword-inline{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0;
}
.filter-keyword-inline .field{ flex:1 1 auto; min-width:0; }
.filter-keyword-inline .filter-keyword-side{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
/* Actions: pinned to last column line (no breakpoint-specific numbers) */
.filter-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-self:end;
  align-self:end;
  min-height: var(--filter-min-h);
}
.filter-actions .ui-btn{ min-width:110px; }

/*
  IMPORTANT (Filter Grid Contract)
  - Do NOT place actions via numeric grid-column lines.
  - Actions placement MUST be controlled by grid-template-areas
    on .filter-grid (per page/breakpoint).
  Numeric placement caused "looks right on my screen" drift and
  broke predictability across pages.
*/

/* Desktop/tablet: let template areas decide, just align the content */
@media (min-width: 768px){
  .filter-actions{
    grid-column: auto;
    justify-self: end;
    align-self: end;
  }
}

/* Mobile: actions becomes full-width last row */
@media (max-width: 767px){
  .filter-actions{
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}
@media (max-width: 767px){
  .filter-actions{
    grid-column: 1 / -1;
    justify-self:stretch;
    flex-wrap:wrap;
  }
}

/* Guardrail: nested filter-grid is not allowed */
.filter-grid .filter-grid{ display:block; }

/* Contract v3 - legacy layout neutralizers (prevents old fp-grid rules from overriding contract) */
.page-asset_list .filter-grid .fp-f-keyword,
.page-audit .filter-grid .audit-date-mode-field,
.page-audit .filter-grid .audit-start-field,
.page-audit .filter-grid .audit-end-field,
.page-audit .filter-grid .audit-action-field,
.page-audit .filter-grid .audit-asset-field,
.page-audit .filter-grid .audit-assetid-field,
.page-audit .filter-grid .audit-keyword-field,
.page-audit .filter-grid .audit-actions,
.page-audit .filter-grid .fp-actions{
  grid-column:auto !important;
  grid-row:auto !important;
}

/* Index actions must follow contract even if legacy rules exist */
@media (min-width: 768px){
  .page-asset_list .filter-grid .fp-f-actions{
    grid-column: -2 / -1 !important;
    grid-row: auto !important;
    justify-self: end;
    align-self: end;
  }
}

/*
  Asset list (設備清單) - 2-col layout contract
  Goal: avoid "holes" that make the filter card look unfinished on half-width screens.
  We keep DOM order (predictable) and DO NOT use `grid-auto-flow:dense`.
  Instead, on 2-col layout we let actions take a full row (right-aligned),
  so later fields never get pushed into odd positions.
*/
@media (min-width: 600px) and (max-width: 899px){
  .page-asset_list .filter-grid .filter-actions{
    grid-column: 1 / -1;
    justify-self: end;
  }
  .page-asset_list .filter-grid .fp-f-actions{
    grid-column: 1 / -1 !important;
    justify-self: end;
    align-self: end;
  }
}

/* Index (設備清單): keyword must be left-aligned on wide layout (5 cols) */
@media (min-width: 1600px){
  .page-asset_list .filter-grid .filter-item--keyword{
    grid-column: 1 / span 2 !important;
  }
}

/*
  NOTE: Audit layout is defined ONLY by the shared Filter Grid Contract
  (grid-template-areas on .filter-grid--audit).
  Do not add page-specific numeric grid-column/grid-row rules here.
*/
/* ---------- UI Button Module (canonical) ---------- */
/* Purpose: keep buttons consistent (height/font/padding/focus/disabled) across the system.
   - Canonical class: .ui-btn
   - Backward-compatible alias: .uop-btn (legacy from Users Ops modal)
   - v171 state contract: each semantic variant owns normal/hover colors through
     custom properties. Shared hover must never wash danger/success/primary into
     the neutral surface, and disabled/aria-disabled/is-disabled states never
     enter interactive hover/active presentation.
*/
.ui-btn,
.uop-btn{
  --ui-btn-bg:var(--surface);
  --ui-btn-border:var(--border-strong);
  --ui-btn-fg:var(--text);
  --ui-btn-hover-bg:var(--surface-muted);
  --ui-btn-hover-border:var(--btn-neutral-hover-border);
  --ui-btn-hover-fg:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  height:var(--btn-h);
  padding:0 var(--btn-pad-x);
  border:1px solid var(--ui-btn-border);
  border-radius:var(--btn-radius);
  background:var(--ui-btn-bg);
  color:var(--ui-btn-fg);
  text-decoration:none;
  font:inherit;
  font-size:var(--btn-font);
  line-height:var(--btn-line-height, 1);
  cursor:pointer;
  white-space:nowrap;
}
.ui-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.is-disabled):hover,
.uop-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.is-disabled):hover{
  background:var(--ui-btn-hover-bg);
  border-color:var(--ui-btn-hover-border);
  color:var(--ui-btn-hover-fg);
  text-decoration:none;
}
.ui-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.is-disabled):active,
.uop-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.is-disabled):active{transform:translateY(1px);}
.ui-btn:focus,
.uop-btn:focus{outline:none;}

.ui-btn:focus-visible,
.uop-btn:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

/* Semantic variants set variables; the shared state rules above consume them. */
.ui-btn--primary,
.uop-btn--primary{
  --ui-btn-bg:var(--primary-soft);
  --ui-btn-border:var(--primary-soft-border);
  --ui-btn-fg:var(--brand);
  --ui-btn-hover-bg:var(--primary-soft-hover);
  --ui-btn-hover-border:var(--primary-soft-border-hover);
  --ui-btn-hover-fg:var(--brand-strong);
  font-weight:700;
}
.ui-btn--primarySolid,
.uop-btn--primarySolid{
  --ui-btn-bg:var(--brand);
  --ui-btn-border:var(--brand);
  --ui-btn-fg:#fff;
  --ui-btn-hover-bg:var(--primary-hover);
  --ui-btn-hover-border:var(--primary-hover);
  --ui-btn-hover-fg:#fff;
  font-weight:700;
}
.ui-btn--secondary,
.uop-btn--secondary{
  --ui-btn-bg:var(--surface-muted);
  --ui-btn-border:var(--border);
  --ui-btn-fg:#344054;
  --ui-btn-hover-bg:var(--surface-subtle);
  --ui-btn-hover-border:var(--border-strong);
  --ui-btn-hover-fg:var(--text-strong);
}
.ui-btn--danger,
.uop-btn--danger{
  --ui-btn-bg:var(--danger);
  --ui-btn-border:var(--danger);
  --ui-btn-fg:#fff;
  --ui-btn-hover-bg:var(--danger-hover);
  --ui-btn-hover-border:var(--danger-hover);
  --ui-btn-hover-fg:#fff;
  font-weight:700;
}
.ui-btn--success,
.uop-btn--success{
  --ui-btn-bg:var(--success);
  --ui-btn-border:var(--success);
  --ui-btn-fg:#fff;
  --ui-btn-hover-bg:var(--success-hover);
  --ui-btn-hover-border:var(--success-hover);
  --ui-btn-hover-fg:#fff;
  font-weight:700;
}
.ui-btn[disabled], .ui-btn:disabled, .ui-btn[aria-disabled="true"], .ui-btn.is-disabled, .ui-btn.disabled,
.uop-btn[disabled], .uop-btn:disabled, .uop-btn[aria-disabled="true"], .uop-btn.is-disabled, .uop-btn.disabled{
  opacity:0.55;
  cursor:not-allowed;
  transform:none;
}


/* One-line helper row for User Ops sections (keeps layout height stable between states). */
.uop-help{
  margin-top:8px;
  font-size:13px;
  line-height:18px;
  min-height:18px; /* reserve exactly one line */
  color:var(--muted);
}
.uop-help:empty{visibility:hidden;}


/* ---------- Inline helpers ---------- */
.spacer{flex:1;}

/* ============================================================
   SUPER-HARD FIX16 CONTRACT
   - No component styling is allowed in assets/pages/*.css.
   - All shared + page-scoped layout rules live in this ui.css.
   ============================================================ */

/* ---------- Layout Contract (migrated from assets/layout_contract.css) ---------- */
/* References: assets/layout_contract.md, docs/20-ui-ux-contracts/UI_BEHAVIOR_CONTRACT.md.
   v171 moved shared shell/card/badge tokens into the canonical Theme token block. */

/* Topbar contract */
.topbar{min-height:var(--topbar-h);padding-top:14px;padding-bottom:10px;align-items:flex-start;}
.topbar .title-row{display:flex;align-items:center;gap:10px;min-height:44px;}
.topbar h1{margin:0;line-height:44px;white-space:nowrap;}
.topbar .title-badges{display:flex;align-items:center;gap:8px;min-height:var(--badge-h);flex-wrap:nowrap;}
.topbar .title-badges:empty{min-width:0;}

/* Subbar: subtitle + quick page switches (system settings pages)
   Keep a clear separation from the first card.
*/
.subbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;margin-bottom:14px;padding:0;}
.subbar .left{display:flex;align-items:center;min-height:22px;gap:10px;flex-wrap:wrap;}
.subbar .right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}

/* System settings sub-pages: actions should align with the card content (left),
   not float to the far right. Keep global .subbar behavior for other pages. */
.page-system_os .subbar,
.page-system_org_units .subbar,
.page-system_brands .subbar,
.page-system_locations .subbar{justify-content:flex-start;}

.page-system_os .subbar .right,
.page-system_org_units .subbar .right,
.page-system_brands .subbar .right,
.page-system_locations .subbar .right{justify-content:flex-start;}

/* Card header contract */
.card .card-head{display:flex;align-items:center;justify-content:space-between;min-height:var(--card-head-h);margin-bottom:8px;}
.card .card-head h3{margin:0;}
.card .card-head .head-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}

/* Allow card head to have multiple rows (no pixel nudges) */
.card .card-head.card-head--stack{display:block;}
.card-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.list-view-controls-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:10px;}
.list-view-controls-grid{
  display:grid;
  width:100%;
  column-gap:var(--filter-col-gap,16px);
  row-gap:10px;
  margin-top:10px;
  align-items:start;
}
.list-view-controls-grid .list-view-item{min-width:0;}
.list-view-controls-grid .list-view-item label{display:block;margin-bottom:6px;}
.list-view-controls-grid .list-view-item select.field{width:100%;}

.head-tools--audit-results{gap:10px 12px;align-items:center;}
.audit-view-form-inline{display:inline-flex;align-items:center;gap:8px;margin:0 0 0 4px;}
.audit-view-form-inline label{margin:0;white-space:nowrap;}
.audit-view-form-inline__label{white-space:nowrap;line-height:1.4;}
.audit-view-form-inline--gcp{gap:0;margin-left:6px;align-items:center;font-size:13px;line-height:1.4;}
.inline-choice{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-width:auto;
  max-width:100%;
  color:var(--text,#111827);
  font-size:13px;
  line-height:1.4;
  vertical-align:middle;
}
.inline-choice--muted{color:var(--muted);}
.inline-choice__label,
.inline-choice__value,
.inline-choice__caret{
  display:inline-block;
  vertical-align:baseline;
  line-height:1.4;
  color:inherit;
  font-size:1em;
  font-weight:400;
}
.inline-choice__label{white-space:nowrap;}
.inline-choice__trigger{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-width:0;
  padding:2px 6px;
  border-radius:6px;
  color:var(--text,#111827);
  cursor:pointer;
  transition:background-color .15s ease;
}
.inline-choice__trigger:hover{background:rgba(17,24,39,.06);}
.inline-choice:focus-within .inline-choice__trigger{background:rgba(17,24,39,.08);}
.inline-choice__value{min-width:0; text-align:left; color:var(--text,#111827);}
.inline-choice__caret{
  width:10px;
  height:10px;
  flex:0 0 10px;
  margin-left:1px;
  background-image:url("icons/action-chevron-v11.svg?v=20260722v11");
  background-position:center;
  background-size:10px 10px;
  background-repeat:no-repeat;
}
.inline-choice__native{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  border:0;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}
.inline-choice__native:focus{outline:none;box-shadow:none;}
.pagination-view-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px 16px;
  flex-wrap:wrap;
  margin-top:8px;
  min-height:32px;
}
.pagination-view-toolbar__spacer{flex:1 1 auto;min-width:0;}
.pagination-per-page-form{display:inline-flex;align-items:center;margin:0;flex:0 0 auto;}
.pagination-per-page-choice .inline-choice__label{color:var(--muted);font-size:12px;font-weight:600;}
.pagination-per-page-choice .inline-choice__value{font-weight:600;}
@media (max-width:760px){
  .pagination-view-toolbar{align-items:flex-start;}
  .pagination-view-toolbar__spacer{display:none;}
  .pagination-per-page-form{margin-left:auto;}
}


.index-filter-summary{
  display:block;
  margin-top:8px;
  padding:7px 10px 8px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:9px;
  background:rgba(255,255,255,.55);
  font-size:13px;
  line-height:1.55;
}
.index-filter-summary__origin{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.05);color:var(--muted);font-size:13px;line-height:1.5;}
.index-filter-summary__origin-text{color:var(--muted);}
.index-filter-summary__origin-link{color:var(--primary);text-decoration:none;font-weight:600;}
.index-filter-summary__origin-link:hover,.index-filter-summary__origin-link:focus{text-decoration:underline;}
.index-filter-summary__line{display:flex;align-items:baseline;gap:4px 8px;flex-wrap:wrap;min-width:0;}
.index-filter-summary__title{display:inline-flex;font-weight:600;color:var(--muted);white-space:nowrap;}
.index-filter-summary__body{display:inline-flex;flex:1 1 240px;min-width:0;}
.index-filter-summary__items{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 14px;min-width:0;color:var(--text);line-height:1.7;}
.index-filter-summary__group{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:2px 4px;max-width:100%;min-width:0;}
.index-filter-summary__group-values{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;max-width:100%;min-width:0;}
.index-filter-summary__item{display:inline-block;max-width:100%;margin:0;vertical-align:top;word-break:break-word;color:inherit;}
.index-filter-summary__item--remove{text-decoration:none;border-radius:4px;}
.index-filter-summary__item--remove:hover,.index-filter-summary__item--remove:focus{background:rgba(37,99,235,.06);text-decoration:none;outline:none;}
.index-filter-summary__item-label{font-weight:700;white-space:nowrap;}
.index-filter-summary__item-value{min-width:0;}
.index-filter-summary__remove-mark{color:var(--muted);font-weight:700;}
.index-filter-summary__item--remove:hover .index-filter-summary__remove-mark,.index-filter-summary__item--remove:focus .index-filter-summary__remove-mark{color:var(--primary);}
.index-filter-summary__empty{display:inline;color:var(--muted);line-height:1.6;}
.list-result-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px 18px;
  flex-wrap:wrap;
  margin-top:10px;
}
.list-result-toolbar__controls{
  flex:0 1 auto;
  min-width:0;
  margin-top:0;
}
.list-result-toolbar__meta{
  flex:0 0 auto;
  align-self:flex-start;
  padding-top:9px;
  white-space:nowrap;
  text-align:right;
}
.result-count-meta{font-size:12px;line-height:1.45;}
.card-head-row--index-results{flex-wrap:wrap;}
.index-result-count{
  flex:0 0 auto;
  max-width:55%;
  text-align:right;
  line-height:1.5;
  white-space:normal;
}
.index-result-count__sep{padding:0 3px;color:var(--muted);}
.list-view-controls--inline{margin-top:8px;}
.list-inline-controls{
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px 12px;
  width:100%;
  font-size:13px;
  line-height:1.4;
}
.list-result-toolbar__controls .list-inline-controls{
  justify-content:flex-start;
}
.list-result-toolbar__group{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:40px;
  padding:6px 10px;
  border:1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius:9px;
  background:color-mix(in srgb, var(--muted) 3%, #fff);
}
.list-result-toolbar__group--display{
  padding-left:10px;
  border-left:1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.list-result-toolbar__group-items{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px 16px;
  min-width:0;
}
.list-inline-controls__item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  white-space:nowrap;
}
.list-result-toolbar__group .inline-choice__label{
  color:color-mix(in srgb, var(--muted) 92%, transparent);
  font-size:11px;
  line-height:1.2;
  font-weight:600;
  margin-right:0;
}
.list-result-toolbar__group--primary .inline-choice__trigger{
  padding:2px 4px;
}
.list-result-toolbar__group--primary .inline-choice__value{
  font-weight:600;
}
.list-inline-controls__item--status-band,
.list-inline-controls__item--anomaly-marker{margin-left:0;}
.status-band-choice{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--text,#111827);
}
.status-band-choice__btn{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  margin:0;
  padding:2px 6px;
  font:inherit;
  line-height:1.3;
  color:var(--muted);
  cursor:pointer;
  text-decoration:none;
  border-radius:999px;
}
.status-band-choice__btn:hover{
  color:var(--text,#111827);
  background:color-mix(in srgb, var(--line) 60%, transparent);
}
.status-band-choice__btn.is-active{
  color:var(--focus);
  font-weight:600;
  background:color-mix(in srgb, var(--focus) 10%, white 90%);
}
.status-band-choice__btn:focus-visible{
  outline:2px solid color-mix(in srgb, var(--focus) 25%, transparent);
  outline-offset:2px;
  border-radius:999px;
}
.status-band-choice__sep{
  color:var(--muted);
}
@media (max-width: 899px){
  .list-inline-controls{justify-content:flex-start;gap:10px;}
  .list-result-toolbar__group{width:100%;justify-content:flex-start;}
  .list-result-toolbar__group--display{padding-left:10px;border-left:1px solid color-mix(in srgb, var(--line) 72%, transparent);}
  .list-result-toolbar__group-items{width:100%;gap:7px 16px;}
  .result-count-meta{font-size:12px;}
  .list-result-toolbar{align-items:flex-start;}
  .list-result-toolbar__meta{padding-top:0;white-space:normal;text-align:left;}
  .index-result-count{max-width:none;text-align:left;}
}
@media (max-width: 899px){
  .card-head-row{align-items:flex-start;}
  .head-tools--audit-results{flex-wrap:wrap;justify-content:flex-end;}
  .audit-view-form-inline{margin-left:0;}
}

@media (min-width: 1400px){
  .list-view-controls-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-areas: "archive sort perpage . .";
  }
  .list-view-item--archive{grid-area:archive;}
  .list-view-item--sort{grid-area:sort;}
  .list-view-item--per-page{grid-area:perpage;}
}
@media (min-width: 900px) and (max-width: 1399px){
  .list-view-controls-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "archive sort perpage";
  }
  .list-view-item--archive{grid-area:archive;}
  .list-view-item--sort{grid-area:sort;}
  .list-view-item--per-page{grid-area:perpage;}
}
@media (min-width: 640px) and (max-width: 899px){
  .list-view-controls-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "archive sort"
      "perpage .";
  }
  .list-view-item--archive{grid-area:archive;}
  .list-view-item--sort{grid-area:sort;}
  .list-view-item--per-page{grid-area:perpage;}
}
@media (max-width: 639px){
  .list-view-controls-grid{grid-template-columns:1fr;}
}


/* Head-tools alignment: keep toggles and count on the same baseline */
.head-tools .small{margin-top:0;}
.head-tools .audit-toggle{display:inline-flex;align-items:center;line-height:1.4;}

/* Field row contract (read-only vs editable)
   Note: textarea is multi-line and must not be forced into control-h.
*/
.ro{min-height:var(--control-h);padding:8px 12px;line-height:1.4;}
input.field,select.field{height:var(--control-h);}

/* Badge contract */
.badge{display:inline-flex;align-items:center;height:var(--badge-h);padding:0 10px;border-radius:9px;font-size:13px;line-height:1;border:1px solid var(--status-muted-border);background:var(--status-muted-bg);color:var(--status-muted-fg);white-space:nowrap;font-weight:600;}
.badge.warn{border-color:var(--warn-bd);color:var(--warn-fg);background:var(--warn-bg);}
.badge.muted{border-color:var(--status-muted-border);color:var(--status-muted-fg);background:var(--status-muted-bg);}
.badge.ok{border-color:var(--status-success-border);color:var(--status-success-fg);background:var(--status-success-bg);}
.badge.info{border-color:var(--status-info-border);color:var(--status-info-fg);background:var(--status-info-bg);}
.badge.bad{border-color:var(--status-danger-border);color:var(--status-danger-fg);background:var(--status-danger-bg);}
.badge.role-admin{border-color:var(--warn-bd);color:var(--warn-fg);background:var(--warn-bg);}
.badge.role-editor{border-color:var(--status-info-border);color:var(--status-info-fg);background:var(--status-info-bg);}
.badge.role-viewer{border-color:var(--status-muted-border);color:var(--status-muted-fg);background:var(--status-muted-bg);}

.badges{display:flex;flex-wrap:wrap;gap:6px;}

/* Collapsible card (details/summary)
 * Users "Add User" panel: only the explicit toggle control is clickable (see app_core.js).
 */
.card-details>summary{list-style:none;cursor:default;}
.card-details>summary::-webkit-details-marker{display:none;}
.card-details .toggle-btn{background:transparent;border:0;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;}
.card-details .toggle-text{font-size:13px;line-height:1.2;text-decoration:underline;color:var(--muted);}
.toggle-text::before{content:"顯示建立表單";}
.card-details[open] .toggle-text::before{content:"隱藏建立表單";}

/* Backward compatibility: list page uses .pill / .bad / .muted */
.pill{display:inline-flex;align-items:center;height:var(--badge-h);padding:0 10px;border-radius:9px;font-size:13px;line-height:1;border:1px solid var(--status-muted-border);background:var(--status-muted-bg);color:var(--status-muted-fg);white-space:nowrap;font-weight:600;}
.pill.bad{border-color:var(--status-danger-border);color:var(--status-danger-fg);background:var(--status-danger-bg);}
.pill.muted{border-color:var(--status-muted-border);color:var(--status-muted-fg);background:var(--status-muted-bg);}


/* ---------- Page-scoped layout rules (migrated from assets/pages/*.css) ---------- */

/* asset_list (index.php) */
.page-asset_list .filter-panel .fp-top{display:block;}
.page-asset_list .filter-panel .fp-grid,
.page-asset_list .filter-panel .fg-grid{
  display:grid;
  /*
    Enterprise-stable grid
    - Default desktop uses 4 columns for readability.
    - Ultra-wide desktops use 5 fixed columns to reduce vertical height while keeping alignment.
  */
  grid-template-columns:repeat(4, minmax(0, 1fr));
  justify-content:stretch;
  column-gap:18px;
  row-gap:12px;
  align-items:end;
}

@media (min-width: 1500px){
  .page-asset_list .filter-panel .fp-grid,
  .page-asset_list .filter-panel .fg-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    column-gap:20px;
    row-gap:12px;
  }

  /* Place controls into a predictable 5-col layout */
  .page-asset_list .filter-panel .fp-f-device{grid-column:1; grid-row:1;}
  .page-asset_list .filter-panel .fp-f-acqyear{grid-column:2; grid-row:1;}
  .page-asset_list .filter-panel .fp-f-location{grid-column:3; grid-row:1;}
  .page-asset_list .filter-panel .fp-f-status{grid-column:4; grid-row:1;}
  .page-asset_list .filter-panel .fp-f-orgunit{grid-column:5; grid-row:1;}

  .page-asset_list .filter-panel .fp-f-ip{grid-column:1; grid-row:2;}
  .page-asset_list .filter-panel .fp-f-showmode{grid-column:2; grid-row:2;}
  .page-asset_list .filter-panel .fp-f-sort{grid-column:3; grid-row:2;}
  .page-asset_list .filter-panel .fp-f-perpage{grid-column:4; grid-row:2;}
  .page-asset_list .filter-panel .fp-f-anomaly{grid-column:5; grid-row:2;}

  /* Keyword spans 2 columns; actions stay at the bottom-right */
  .page-asset_list .filter-panel .fp-f-keyword{grid-column:3 / span 2; grid-row:3;}
  .page-asset_list .filter-panel .fp-f-actions{grid-column:5; grid-row:3; justify-self:end; align-self:end;}
}

.page-audit .filter-panel .fp-field label{white-space:nowrap;}

/* Prevent the long audit keyword hint from forcing the whole first row to feel "stuck together" */
.page-audit .filter-panel .audit-keyword-label{white-space:normal;}
.page-audit .filter-panel .audit-keyword-hint-inline{display:block; margin-left:0;}
.page-audit .filter-panel .audit-keyword-label{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  white-space:nowrap;
}
.page-audit .filter-panel .audit-keyword-hint-inline{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:360px;
}

/* Audit filter layout: keep "進階（內部 ID）" on the left and actions on the bottom-right (same as asset list page). */
.page-audit .filter-panel .audit-filter-row{display:flex;flex-direction:column;gap:12px;}

/*
  Bottom row rhythm (關鍵):
  - The filter grid (date/from/to/action/asset_id/keyword) is visually one band.
  - The "搜尋內部 ID" + "查詢/清除" row is the next band.
  If margin/gap is too small, the whole block looks "黏在一起".
*/
.page-audit .filter-panel .audit-filter-bottom{
  display:flex;
  align-items:flex-start; /* top-edge align: 搜尋內部 ID button top == 查詢/清除 button top */
  gap:16px;
  flex-wrap:wrap;
  /* Add clear vertical separation from the inputs above. */
  margin-top:8px;
}
.page-audit .filter-panel .audit-advanced-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0;}
.page-audit .filter-panel .audit-advanced-hint{min-width:0;}
.page-audit .filter-panel .fp-actions-bottom{display:flex;gap:12px;align-items:flex-start;justify-content:flex-end;margin-left:auto;}

/* Audit: inline internal ID field (Option A) */
.page-audit .filter-panel .audit-bottom-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(160px,200px)) minmax(260px,1fr);
  gap:16px;
  align-items:end;
}
.page-audit .filter-panel .audit-internalid-field{max-width:none;}
.page-audit .filter-panel .audit-internalid-hint{
  grid-column:2 / span 4;
  align-self:center;
  line-height:1.25;
  margin-bottom:4px;
}

/* Legacy (older markup used fp-bottom). Keep harmless defaults. */
.page-audit .filter-panel .fp-bottom{display:flex;align-items:flex-end;gap:16px;}
.page-audit .filter-panel .fp-grid{flex:1;}
.page-audit .filter-panel .fp-actions{display:flex;gap:12px;align-items:flex-end;}

.page-asset_list .filter-panel .fp-grid .field-fixed,
.page-asset_list .filter-panel .fg-grid .field-fixed,
.page-asset_list .filter-panel .fp-triple .field-fixed,
.page-asset_list .filter-panel .fg-triple .field-fixed{
  /* Override global fixed-width fields: filters should be fluid inside the grid.
     This prevents controls from visually "sticking" together and keeps columns balanced. */
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
}
.page-asset_list .filter-panel .fp-field,
.page-asset_list .filter-panel .fg-field{min-width:0;}
.page-asset_list .filter-panel .fp-grid .fp-w-180,
.page-asset_list .filter-panel .fg-grid .fp-w-180,
.page-asset_list .filter-panel .fp-grid .fp-w-240,
.page-asset_list .filter-panel .fg-grid .fp-w-240{
  /* Ensure all controls follow the grid column width (no per-field max-width drift). */
  max-width:none !important;
}
.page-asset_list .filter-panel .fp-row{display:flex;align-items:end;gap:12px;flex-wrap:wrap;}
.page-asset_list .filter-panel .fp-bottom,
.page-asset_list .filter-panel .fg-bottom{
  /* Bottom row: triple controls (left) + actions (right). */
  display:flex;
  align-items:flex-end;
  gap:16px;
}
.page-asset_list .filter-panel .fp-triple,
.page-asset_list .filter-panel .fg-triple{
  display:grid;
  /* Bottom controls (archive/sort/per-page + abnormal checkbox).
     Keep spacing consistent with the top filter grid to avoid controls looking "黏在一起". */
  /*
    Row 2 (desktop): follow the same 6-column rhythm as Row 1.
    - display/sort/per-page align under columns 1~3
    - abnormal checkbox aligns under column 4 (status)
    - keyword aligns under columns 5~6 (org + ip) and spans them
  */
  grid-template-columns:repeat(6, minmax(0, 1fr));
  justify-content:stretch;
  gap:16px;
  align-items:end;
}

/* Row 2 placement: keyword should start where "使用單位" starts, and end where "IP" ends */
.page-asset_list .filter-panel .fp-triple .fp-keyword,
.page-asset_list .filter-panel .fg-triple .fg-keyword{grid-column:5 / 7;}
.page-asset_list .fp-check{margin:0;display:flex;align-items:center;gap:8px;}
/* Legacy helpers (kept for compatibility). Do not cap widths in the filter grids. */
.page-asset_list .fp-w-220,
.page-asset_list .fp-w-240,
.page-asset_list .fp-w-260,
.page-asset_list .fp-w-180{max-width:none;}

/* Keyword field inside the bottom control grid (row 2) */
.page-asset_list .filter-panel .fp-triple .fp-keyword{min-width:0;}
.page-asset_list .filter-panel .fp-triple .fp-keyword .field{width:100%;}
.page-asset_list .filter-panel .fg-triple .fg-keyword{min-width:0;}
.page-asset_list .filter-panel .fg-triple .fg-keyword .field{width:100%;}
.page-asset_list .filter-panel .fp-triple .fp-anomaly label,
.page-asset_list .filter-panel .fg-triple .fg-anomaly label{display:flex; align-items:center; gap:8px;}

/* Actions (bottom right) */
.page-asset_list .filter-panel .fp-actions{display:flex;gap:12px;align-items:flex-end;}
.page-asset_list .filter-panel .fp-actions-bottom{margin-left:auto;}

/* Align main filter grid width.
   NOTE: fp-bottom must span the whole card so action buttons can sit on the card edge. */
.page-asset_list .filter-panel .fp-grid,
.page-asset_list .filter-panel .fp-triple,
.page-asset_list .filter-panel .fg-grid,
.page-asset_list .filter-panel .fg-triple{max-width:1280px;}

.page-asset_list .filter-panel .fp-bottom,
.page-asset_list .filter-panel .fg-bottom{max-width:none;}

/* inline checkbox block in the bottom row */
.page-asset_list .fp-inline-check > label{display:block;}
.page-asset_list .fp-check.fp-check-inline{height:38px;align-items:center;margin-top:2px;}
@media (max-width:1400px){
  .page-asset_list .filter-panel .fp-grid,
  .page-asset_list .filter-panel .fg-grid{grid-template-columns:repeat(3,minmax(220px,1fr));}
  .page-asset_list .filter-panel .fp-topline,
  .page-asset_list .filter-panel .fp-grid,
  .page-asset_list .filter-panel .fp-triple,
  .page-asset_list .filter-panel .fg-grid,
  .page-asset_list .filter-panel .fg-triple{max-width:none;}
}
@media (max-width:980px){
  .page-asset_list .filter-panel .fp-grid,
  .page-asset_list .filter-panel .fg-grid{grid-template-columns:repeat(2,minmax(220px,1fr));}
}
@media (max-width:960px){
  .page-asset_list .filter-panel .fp-bottom,
  .page-asset_list .filter-panel .fg-bottom{flex-direction:column;align-items:stretch;}
  .page-asset_list .filter-panel .fp-triple,
  .page-asset_list .filter-panel .fg-triple{grid-template-columns:repeat(2, minmax(220px,1fr));}
  .page-asset_list .filter-panel .fp-triple .fp-keyword,
  .page-asset_list .filter-panel .fg-triple .fg-keyword{grid-column:1 / -1;}
  .page-asset_list .filter-panel .fp-actions{justify-content:flex-end;}
  .page-asset_list .filter-panel .fp-actions-bottom{margin-left:0;}
}
@media (max-width:720px){
  .page-asset_list .filter-panel .fp-grid,
  .page-asset_list .filter-panel .fg-grid{grid-template-columns:1fr;}
  .page-asset_list .filter-panel .fp-bottom,
  .page-asset_list .filter-panel .fg-bottom{flex-direction:column;align-items:stretch;}
  .page-asset_list .filter-panel .fp-triple,
  .page-asset_list .filter-panel .fg-triple{grid-template-columns:1fr;}
  .page-asset_list .filter-panel .fp-triple .fp-keyword,
  .page-asset_list .filter-panel .fg-triple .fg-keyword{grid-column:1 / -1;}
  .page-asset_list .filter-panel .fp-actions{justify-content:flex-end;}
}
.page-asset_list .list-summary{margin:8px 0 10px 0;}
.page-asset_list .pager{margin:6px 0 12px 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.page-asset_list .pager-jump{display:flex;gap:8px;align-items:center;}
.page-asset_list .pager-input{width:88px;}
.page-asset_list .pager-nav{display:flex;gap:8px;align-items:center;}
@media (max-width:960px){
  .results-pager__controls{width:100%;justify-content:flex-start;}
}
@media (max-width:720px){
  .results-pager__chip{min-height:24px;padding:0 8px;font-size:12px;}
  .results-pager__controls{gap:8px;}
  .results-pager__nav .ui-btn,
  .results-pager__jump .ui-btn{min-width:0;}
}
.page-asset_list table.asset-list,
.page-index table.asset-list{table-layout:fixed; width:100%;}
/* Asset list columns use semantic multi-line cells.
 * v135 introduces a dedicated disk column. These are the implementation
 * starting ratios; final acceptance remains Browser-Runtime evidence based.
 *   - Asset: 12%
 *   - Owner: 13%
 *   - Brand: 17%
 *   - CPU / RAM: 16%
 *   - Disk: 9%
 *   - Network: 22%
 *   - Updated: 11%
 */
.page-asset_list table.asset-list col.col-asset{width:12%;}
.page-asset_list table.asset-list col.col-owner{width:13%;}
.page-asset_list table.asset-list col.col-brand{width:17%;}
.page-asset_list table.asset-list col.col-hw{width:16%;}
.page-asset_list table.asset-list col.col-disk{width:9%;}
.page-asset_list table.asset-list col.col-ip{width:22%;}
.page-asset_list table.asset-list col.col-updated{width:11%;}
.page-index table.asset-list col.col-asset{width:12%;}
.page-index table.asset-list col.col-owner{width:13%;}
.page-index table.asset-list col.col-brand{width:17%;}
.page-index table.asset-list col.col-hw{width:16%;}
.page-index table.asset-list col.col-disk{width:9%;}
.page-index table.asset-list col.col-ip{width:22%;}
.page-index table.asset-list col.col-updated{width:11%;}

/* v141: the seven-column equipment list remains a table from 640px upward,
 * but medium/narrow viewports must not squeeze the fixed network summary into
 * the updated column. Rebalance the medium tier toward network readability and
 * give the table one intrinsic readable floor. The result-body scroller owns
 * any horizontal overflow; phone card mode at <=639px still overrides the
 * minimum width below. */
@media (min-width:640px) and (max-width:1679px){
  .page-asset_list table.asset-list col.col-asset,
  .page-index table.asset-list col.col-asset{width:11%;}
  .page-asset_list table.asset-list col.col-owner,
  .page-index table.asset-list col.col-owner{width:11%;}
  .page-asset_list table.asset-list col.col-brand,
  .page-index table.asset-list col.col-brand{width:15%;}
  .page-asset_list table.asset-list col.col-hw,
  .page-index table.asset-list col.col-hw{width:14%;}
  .page-asset_list table.asset-list col.col-disk,
  .page-index table.asset-list col.col-disk{width:9%;}
  .page-asset_list table.asset-list col.col-ip,
  .page-index table.asset-list col.col-ip{width:29%;}
  .page-asset_list table.asset-list col.col-updated,
  .page-index table.asset-list col.col-updated{width:11%;}
}
@media (min-width:640px){
  .page-asset_list table.asset-list.long-list-table,
  .page-index table.asset-list.long-list-table{min-width:1230px;}
}
@media (min-width:640px) and (max-width:1359px){
  .page-asset_list .table-card .table-wrap--sticky-head,
  .page-index .table-card .table-wrap--sticky-head{
    overflow-x:auto;
    overflow-y:visible;
    max-width:100%;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
}

.page-asset_list table.asset-list th,
.page-asset_list table.asset-list td,
.page-index table.asset-list th,
.page-index table.asset-list td{text-align:left; vertical-align:top;}
.page-asset_list table.asset-list thead th,
.page-index table.asset-list thead th{line-height:1.35;}
.page-asset_list table.asset-list tbody td,
.page-index table.asset-list tbody td{word-break:break-word;}
.page-asset_list table.asset-list tbody td:first-child,
.page-index table.asset-list tbody td:first-child{position:relative;}
html.status-band-off-pref .page-asset_list table.asset-list tbody tr.asset-row-status > td:first-child::before,
html.status-band-off-pref .page-index table.asset-list tbody tr.asset-row-status > td:first-child::before,
.page-asset_list.status-band-off table.asset-list tbody tr.asset-row-status > td:first-child::before,
.page-index.status-band-off table.asset-list tbody tr.asset-row-status > td:first-child::before{display:none;}
html.anomaly-marker-off-pref .page-asset_list table.asset-list tbody .asset-anomaly-marker,
html.anomaly-marker-off-pref .page-index table.asset-list tbody .asset-anomaly-marker,
.page-asset_list.anomaly-marker-off table.asset-list tbody .asset-anomaly-marker,
.page-index.anomaly-marker-off table.asset-list tbody .asset-anomaly-marker,
html.anomaly-marker-off-pref .page-asset_list table.asset-list tbody .asset-flags--anomaly-only,
html.anomaly-marker-off-pref .page-index table.asset-list tbody .asset-flags--anomaly-only,
.page-asset_list.anomaly-marker-off table.asset-list tbody .asset-flags--anomaly-only,
.page-index.anomaly-marker-off table.asset-list tbody .asset-flags--anomaly-only{display:none;}
.page-asset_list table.asset-list tbody tr.asset-row-status > td:first-child::before,
.page-index table.asset-list tbody tr.asset-row-status > td:first-child::before{
  content:"";
  position:absolute;
  left:8px;
  top:8px;
  bottom:8px;
  width:6px;
  border-radius:999px;
  background:var(--asset-row-status-accent, transparent);
  pointer-events:none;
}
.page-asset_list table.asset-list tbody tr.asset-row-status--in_use,
.page-index table.asset-list tbody tr.asset-row-status--in_use{--asset-row-status-accent:#10B981;}
.page-asset_list table.asset-list tbody tr.asset-row-status--loaned,
.page-index table.asset-list tbody tr.asset-row-status--loaned{--asset-row-status-accent:#60A5FA;}
.page-asset_list table.asset-list tbody tr.asset-row-status--idle,
.page-index table.asset-list tbody tr.asset-row-status--idle{--asset-row-status-accent:#9CA3AF;}
.page-asset_list table.asset-list tbody tr.asset-row-status--maintenance,
.page-index table.asset-list tbody tr.asset-row-status--maintenance{--asset-row-status-accent:#F59E0B;}
.page-asset_list table.asset-list tbody tr.asset-row-status--fault,
.page-index table.asset-list tbody tr.asset-row-status--fault{--asset-row-status-accent:#A855F7;}
.page-asset_list table.asset-list tbody tr.asset-row-status--pending_disposal,
.page-index table.asset-list tbody tr.asset-row-status--pending_disposal{--asset-row-status-accent:#FB923C;}
.page-asset_list table.asset-list tbody tr.asset-row-status--disposed,
.page-index table.asset-list tbody tr.asset-row-status--disposed,
.page-asset_list table.asset-list tbody tr.asset-row-status--retired,
.page-index table.asset-list tbody tr.asset-row-status--retired{--asset-row-status-accent:#F87171;}

.page-asset_list table.asset-list td .asset-cell,
.page-index table.asset-list td .asset-cell{
  --asset-cell-line-h:1.35em;
  --asset-cell-row-gap:4px;
  display:grid;
  align-content:start;
  row-gap:var(--asset-cell-row-gap);
}
.page-asset_list table.asset-list td .asset-cell--2,
.page-index table.asset-list td .asset-cell--2{
  grid-template-rows:repeat(2, minmax(var(--asset-cell-line-h), auto));
  min-height:calc((var(--asset-cell-line-h) * 2) + var(--asset-cell-row-gap));
}
.page-asset_list table.asset-list td .asset-cell--3,
.page-index table.asset-list td .asset-cell--3{
  grid-template-rows:repeat(3, minmax(var(--asset-cell-line-h), auto));
  min-height:calc((var(--asset-cell-line-h) * 3) + (var(--asset-cell-row-gap) * 2));
}
.page-asset_list table.asset-list td .asset-cell--4,
.page-index table.asset-list td .asset-cell--4{
  grid-template-rows:repeat(4, minmax(var(--asset-cell-line-h), auto));
  min-height:calc((var(--asset-cell-line-h) * 4) + (var(--asset-cell-row-gap) * 3));
}
.page-asset_list table.asset-list td .asset-line,
.page-index table.asset-list td .asset-line{
  display:block;
  min-height:var(--asset-cell-line-h);
  line-height:1.35;
}
.page-asset_list table.asset-list td .asset-tagline,
.page-index table.asset-list td .asset-tagline{display:block; min-height:var(--asset-cell-line-h);}
.page-asset_list table.asset-list td .asset-flags,
.page-index table.asset-list td .asset-flags{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; line-height:1.2;}
.page-asset_list table.asset-list td .asset-flags .pill,
.page-index table.asset-list td .asset-flags .pill{margin:0;}

.page-asset_list table.asset-list td.cell-asset .asset-line,
.page-asset_list table.asset-list td.cell-owner .asset-line,
.page-asset_list table.asset-list td.cell-brand .asset-line,
.page-asset_list table.asset-list td.cell-hw .asset-line,
.page-asset_list table.asset-list td.cell-disk .asset-line,
.page-asset_list table.asset-list td.cell-updated .asset-line,
.page-index table.asset-list td.cell-asset .asset-line,
.page-index table.asset-list td.cell-owner .asset-line,
.page-index table.asset-list td.cell-brand .asset-line,
.page-index table.asset-list td.cell-hw .asset-line,
.page-index table.asset-list td.cell-disk .asset-line,
.page-index table.asset-list td.cell-updated .asset-line{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.page-asset_list table.asset-list td.cell-owner .org-unit,
.page-index table.asset-list td.cell-owner .org-unit{display:block; max-width:100%;}
.page-asset_list table.asset-list td.cell-owner,
.page-asset_list table.asset-list td.cell-brand,
.page-asset_list table.asset-list td.cell-hw,
.page-asset_list table.asset-list td.cell-disk,
.page-asset_list table.asset-list td.cell-ip,
.page-asset_list table.asset-list td.cell-updated,
.page-index table.asset-list td.cell-owner,
.page-index table.asset-list td.cell-brand,
.page-index table.asset-list td.cell-hw,
.page-index table.asset-list td.cell-disk,
.page-index table.asset-list td.cell-ip,
.page-index table.asset-list td.cell-updated{word-break:break-word;}

.page-asset_list table.asset-list td.cell-ip,
.page-index table.asset-list td.cell-ip{word-break:normal;}
.page-asset_list table.asset-list td.cell-ip .asset-line,
.page-index table.asset-list td.cell-ip .asset-line{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
.page-asset_list table.asset-list td.cell-ip .iplabel,
.page-index table.asset-list td.cell-ip .iplabel{color:inherit;}
.page-asset_list table.asset-list td.cell-ip .ipval,
.page-index table.asset-list td.cell-ip .ipval{color:inherit;}

/* Full-width: keep IP/MAC lines on one line. */
@media (min-width: 1200px){
  .page-asset_list table.asset-list td.cell-ip .asset-line,
  .page-index table.asset-list td.cell-ip .asset-line{white-space:nowrap;}
}

.page-asset_list table.asset-list td.cell-updated .updated-ts,
.page-index table.asset-list td.cell-updated .updated-ts{white-space:nowrap;}
.page-asset_list table.asset-list td.cell-updated .updated-user,
.page-index table.asset-list td.cell-updated .updated-user{
  color:inherit;
  font-size:inherit;
  font-weight:inherit;
  word-break:normal;
}

/* Asset list: keep the last column from touching the right border */
.page-asset_list .table-card .table-wrap table.asset-list th:last-child,
.page-asset_list .table-card .table-wrap table.asset-list td:last-child,
.page-index .table-card .table-wrap table.asset-list th:last-child,
.page-index .table-card .table-wrap table.asset-list td:last-child{
  padding-right:24px;
}

/* v109: give the dense network summary a little more breathing room before
 * the updated-time column on full-width equipment lists. Keep the v108
 * network Grid columns untouched; spacing belongs to the adjacent column.
 */
@media (min-width:1200px){
  .page-asset_list table.asset-list thead th:nth-child(7),
  .page-asset_list table.asset-list td.cell-updated,
  .page-index table.asset-list thead th:nth-child(7),
  .page-index table.asset-list td.cell-updated{
    padding-left:30px;
  }
}

/* asset_form */
.page-asset_form .ym-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* 3-part date picker (YYYY-MM-DD) */
.page-asset_form .ym-row.ymd{grid-template-columns:1fr 1fr 1fr;}
/*
  For date Y/M/D grouped inputs, avoid drawing a wrapper border.
  A wrapper border makes the three fields look like a single huge input and
  creates "connecting lines" between sub-fields in some browsers.
  We rely on per-field `.input-error` highlight instead.
*/
.page-asset_form .ym-row.group-error{border:none;padding:0;}

@media (max-width:720px){.page-asset_form .ym-row{grid-template-columns:1fr;}.page-asset_form .ym-row.ymd{grid-template-columns:1fr;}}


/* hardware group rows */
.hw-row{display:grid;grid-template-columns:1fr 160px;gap:12px;align-items:center;}
.hw-row.hw-row-cpu{grid-template-columns:160px 1fr;}
.hw-row.hw-row-3{grid-template-columns:140px 1fr 160px;}
/* asset_form: OS 3-part inputs should be equal width like Y/M/D */
.page-asset_form .os-row{grid-template-columns:1fr 1fr 1fr;}

@media (max-width:720px){
  .hw-row{grid-template-columns:1fr;}
  .hw-row.hw-row-cpu{grid-template-columns:1fr;}
  .hw-row.hw-row-3{grid-template-columns:1fr;}
  .page-asset_form .os-row{grid-template-columns:1fr;}

}

.page-asset_form .form-actions{grid-column:1 / -1;display:flex;gap:12px;align-items:center;margin:8px 0 20px;}

/* audit */


/* Audit head-tools count text should match audit table (td) font size */
/* Reference: docs/20-ui-ux-contracts/AUDIT_UI_CONTRACT.md */
.page-audit .card-head .head-tools .small.muted,
.page-asset_view .card-head .head-tools .small.muted{
  font-size:13px;
}
.page-audit table th{text-align:left;}
.page-audit .table-wrap th:last-child{
  text-align:left;
}
/* Ensure first column content aligns with its header inset */
.page-audit .audit-table th:first-child,
.page-audit .audit-table td:first-child{
  padding-left:16px;
  text-align:left;
}
.page-audit .audit-exp,
.audit-surface .audit-exp{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.page-audit .audit-preview,.page-audit .audit-full,
.audit-surface .audit-preview,.audit-surface .audit-full{margin:0;padding:0;}
.page-audit .audit-lines,
.audit-surface .audit-lines{margin:0;}
.page-audit .audit-lines>div,
.audit-surface .audit-lines>div{margin:0;padding:0;}

/*
  Audit content readability contract:
  - Audit list prioritizes human scanning over code-like alignment.
  - Use the same sans stack as the rest of the UI; keep numeric alignment only.
  - Old/new values and status suffixes get separate visual weights.
*/
.page-audit .audit-lines,
.audit-surface .audit-lines,
.modal-preview .pv-scroll .audit-lines{
  font-family:inherit;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  line-height:1.62;
  color:var(--text);
}
.page-audit .audit-toggle--row,
.audit-surface .audit-toggle--row{
  align-self:flex-start;
  margin-top:2px;
}
.head-tools--audit-results .audit-toggle,
.head-tools--audit-results .inline-choice,
.head-tools--audit-results .audit-view-form-inline{
  align-self:center;
}

.head-tools--users-logs-results .audit-toggle,
.head-tools--users-logs-results .inline-choice,
.head-tools--users-logs-results .audit-view-form-inline{
  align-self:center;
}
.operation-log-detail-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.page-audit .audit-k,
.audit-surface .audit-k,
.modal-preview .pv-scroll .audit-k{color:#374151; font-weight:600;}
.page-audit .audit-v,
.audit-surface .audit-v,
.modal-preview .pv-scroll .audit-v{color:#111827;}
.page-audit .audit-meta,
.audit-surface .audit-meta,
.modal-preview .pv-scroll .audit-meta{color:#6b7280; font-size:.94em; font-weight:500;}
.page-audit .audit-line.audit-kv,
.page-audit .audit-line.audit-diff,
.audit-surface .audit-line.audit-kv,
.audit-surface .audit-line.audit-diff,
.modal-preview .pv-scroll .audit-line.audit-kv,
.modal-preview .pv-scroll .audit-line.audit-diff{gap:6px;}
.page-audit .audit-line.audit-kv .audit-k,
.page-audit .audit-line.audit-diff .audit-k,
.audit-surface .audit-line.audit-kv .audit-k,
.audit-surface .audit-line.audit-diff .audit-k,
.modal-preview .pv-scroll .audit-line.audit-kv .audit-k,
.modal-preview .pv-scroll .audit-line.audit-diff .audit-k{flex:0 0 auto;}
.page-audit .audit-line.audit-kv .audit-v,
.page-audit .audit-line.audit-diff .audit-v,
.audit-surface .audit-line.audit-kv .audit-v,
.audit-surface .audit-line.audit-diff .audit-v,
.modal-preview .pv-scroll .audit-line.audit-kv .audit-v,
.modal-preview .pv-scroll .audit-line.audit-diff .audit-v{min-width:0;}
.page-audit .audit-line.audit-diff .audit-arrow,
.audit-surface .audit-line.audit-diff .audit-arrow,
.modal-preview .pv-scroll .audit-line.audit-diff .audit-arrow{padding:0; color:#9ca3af; font-weight:600;}
.page-audit .audit-before,
.audit-surface .audit-before,
.modal-preview .pv-scroll .audit-before{color:#7b8794; text-decoration:line-through; text-decoration-thickness:1px;}
.page-audit .audit-after,
.audit-surface .audit-after,
.modal-preview .pv-scroll .audit-after{color:#111827; font-weight:700;}
.page-audit .audit-before .audit-meta,
.audit-surface .audit-before .audit-meta{color:#8b95a1;}
.page-audit .audit-after .audit-meta,
.audit-surface .audit-after .audit-meta{color:#4b5563;}
.page-audit .audit-preview .audit-lines,
.audit-surface .audit-preview .audit-lines{font-size:13px;}
.modal-preview .pv-scroll .audit-lines{font-size:13px;}
.page-audit .audit-full .audit-lines,
.audit-surface .audit-full .audit-lines{font-size:13px;}
.page-audit .audit-full,
.audit-surface .audit-full{
  margin-top:2px;
  padding:0;
  border:0;
  border-left:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.page-audit .audit-full .audit-lines,
.audit-surface .audit-full .audit-lines{
  max-width:100%;
}

/* v186 Audit Detail Presentation Convergence
   The full audit list and the embedded asset-detail audit intentionally keep
   different table columns, but the canonical details payload must look like
   the same component on both surfaces. The payload panel owns the visual
   boundary; the row-level 展開詳情 / 收合詳情 control remains outside it. */
.audit-details > .audit-lines,
.audit-details .audit-preview,
.audit-details .audit-full{
  box-sizing:border-box;
  width:fit-content;
  min-width:min(320px,100%);
  max-width:min(100%,760px);
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--brand) 10%,var(--border) 90%);
  border-radius:10px;
  background:color-mix(in srgb,var(--surface) 96%,var(--brand) 4%);
  box-shadow:0 1px 2px rgba(15,23,42,.035);
}
.audit-details .audit-preview > .audit-lines,
.audit-details .audit-full > .audit-lines{
  width:auto;
  min-width:0;
  max-width:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
@media (max-width:639px), (max-height:520px) and (pointer:coarse){
  .audit-details > .audit-lines,
  .audit-details .audit-preview,
  .audit-details .audit-full{
    width:100%;
    min-width:0;
    max-width:100%;
  }
}

.page-audit .audit-filter-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.page-audit .audit-filter-grid > div{min-width:240px;}

/* Audit filter panel: match 設備清單頁 (index.php) one-row layout */
.page-audit .filter-panel .fp-grid{
  display:grid;
  /*
    Keep a comfortable minimum width per control so inputs never feel
    "黏在一起" on common desktop viewports.
  */
  /* Desktop: stable 5-column grid (avoid extra 6th column that makes fields look stuck together) */
  grid-template-columns:repeat(5, minmax(200px, 1fr));
  justify-content:start;
  /* Keep columns spaced like asset list, but tighten row gap so keyword hint doesn't create an ugly tall gap. */
  gap:10px 18px;
  align-items:end;
}
.page-audit .filter-panel .fp-grid > .fp-field{min-width:0;}
.page-audit .filter-panel .audit-internalid-field{
  grid-column:1;
  grid-row:2;
  min-width:0;
  /* Stretch to match the first-row column width (align with 日期欄位). */
  justify-self:stretch;
}
.page-audit .filter-panel .audit-internalid-field .field{width:100%;}
.page-audit .filter-panel .audit-keyword-field{grid-column:2 / span 2; grid-row:2; min-width:0;}
.page-audit .filter-panel .audit-keyword-field .field{width:100%;}
.page-audit .filter-panel .audit-qmode{margin-top:6px;}
.page-audit .filter-panel .audit-qmode-label{display:inline-flex;align-items:center;gap:6px;}

.page-audit .filter-panel .fp-field label{white-space:nowrap;}
.page-audit .filter-panel .audit-keyword-label{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.page-audit .filter-panel .fp-grid .field-fixed{width:100% !important;}
.page-audit .filter-panel .filter-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:12px;
}
.page-audit .filter-panel .audit-keyword-hint{margin-top:8px;}
.page-audit .filter-panel .hint-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:6px;
  border:1px solid #cfcfcf;
  border-radius:999px;
  font-size:12px;
  line-height:18px;
  color:#555;
  user-select:none;
}

.page-audit .audit-advanced .audit-id-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.page-audit .audit-advanced{margin-top:10px; min-width:0;}
/*
  Keep the "進階" hint visually anchored to the right of the button.
  - Do not let <details> expanded content push the hint to the next line.
  - Allow the hint itself to wrap if needed (stays on the right side).
*/
.page-audit .audit-advanced-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:0;}
.page-audit .audit-advanced-head .audit-advanced-hint{min-width:220px;flex:1 1 320px;white-space:normal;}
.page-audit .audit-advanced .row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:10px;}
.page-audit .audit-advanced .small{padding-bottom:6px;}

/* Audit single-truth surface: audit.php list and asset_view embedded audit must share the same detail typography and diff hierarchy. */
/* ---------- Audit responsive: avoid page-level horizontal scroll on narrow viewports ---------- */
@media (max-width: 1200px){
  /* Reduce the first row grid columns and move Keyword to a new row (full width). */
  .page-audit .filter-panel .fp-grid{
    grid-template-columns:repeat(3, minmax(180px, 1fr));
  }
  .page-audit .filter-panel .fp-grid > div.audit-keyword-field{
    grid-column:1 / -1;
  }

  /* Bottom row: avoid forcing a ~1100px minimum width on smaller screens.
     Switch to a 3-column layout so the page doesn't require horizontal scroll. */
  .page-audit .audit-bottom-grid{
    grid-template-columns:repeat(3, minmax(180px, 1fr));
    align-items:end;
  }
  .page-audit .audit-bottom-grid .audit-bottom-actions{
    grid-column:1 / -1;
    justify-content:flex-end;
  }
  .page-audit .audit-bottom-grid .audit-bottom-hint{
    grid-column:1 / -1;
  }
}

@media (max-width: 980px){
  .page-audit .audit-bottom-grid{
    grid-template-columns:repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 760px){
  .page-audit .filter-panel .fp-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .page-audit .filter-panel .fp-grid > div.audit-keyword-field{
    grid-column:auto;
  }
  .page-audit .filter-panel .audit-keyword-label{white-space:normal;}
  .page-audit .audit-filter-bottom{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .page-audit .filter-panel .filter-actions{
    justify-content:flex-start;
  }

  .page-audit .filter-panel .audit-bottom-grid{
    grid-template-columns:1fr;
    gap:8px;
  }
  .page-audit .filter-panel .audit-internalid-hint{
    grid-column:auto;
    margin-top:-4px;
  }
}

/* users */
.page-users .users-create-card{padding:16px 18px;}
.page-users .users-create-toolbar{display:flex;align-items:flex-start;justify-content:flex-start;gap:16px;}
.page-users .users-create-titleblock{min-width:0;}
.page-users .users-create-summary{margin:8px 0 0 0;font-size:13px;line-height:1.45;}
.page-users .users-create-toggle{flex:0 0 auto;}
.page-users .users-create-panel{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}
.page-users .users-create-panel[hidden]{display:none !important;}
@media (max-width:720px){.page-users .users-create-toolbar{align-items:stretch;flex-direction:column;}.page-users .users-create-toggle{width:100%;justify-content:center;}}

/* users: create form */
.page-users .user-create-form{max-width:760px;}
.page-users .user-create-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;align-items:start;}
@media (max-width:720px){.page-users .user-create-grid{grid-template-columns:1fr;}}
.page-users .uc-field .hint{margin-top:6px;font-size:12px;color:var(--muted);line-height:1.25;}
.page-users .user-create-help{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.45;}
.page-users .user-create-actions{margin-top:14px;display:flex;gap:10px;align-items:center;}

/* users: compact list */
.page-users .users-table th,
.page-users .users-table td{padding:10px 12px; vertical-align:middle;}
.page-users .users-table th.th-actions{width:180px;}
.page-users .users-table .user-line{display:flex; flex-direction:column; align-items:flex-start; gap:3px;}
.page-users .users-table .user-account-main{display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:6px;}
.page-users .users-table .user-username{font-weight:700;}
.page-users .users-table .user-name{color:var(--muted);font-size:12px;line-height:1.35;}
.page-users .users-table .user-id{color:var(--muted);font-size:12px;}
.page-users .badge.tiny{font-size:12px; padding:2px 6px; border-radius:9px;}
.page-users .users-table .actions-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.page-users .users-table .perm-line{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.page-users .users-table .time-line{white-space:nowrap;}
.page-users .users-table .user-ident{white-space:normal;}
.page-users .users-table .user-role{white-space:normal;}
.page-users .users-table .role-status-line{display:inline-flex;align-items:center;column-gap:6px;row-gap:4px;flex-wrap:wrap;min-height:var(--badge-h);}
.page-users .users-table .role-status-line .badge{flex:0 0 auto;}
 .page-users .users-table .user-permission-summary{white-space:normal;display:table-cell;}
.page-users .users-table .user-perm-summary{max-width:100%;line-height:1.65;color:var(--text);font-size:13px;}
.page-users .users-table .user-perm-summary--full{font-weight:700;color:var(--text);}
.page-users .users-table .user-perm-summary--none{color:var(--muted);}
.page-users .users-table .user-perm-summary-line{display:block;margin:0 0 5px 0;}
.page-users .users-table .user-perm-summary-line:last-child{margin-bottom:0;}
.page-users .users-table .user-perm-summary-title{font-weight:700;color:var(--muted);}
.page-users .users-table .user-perm-summary-value{color:var(--text);}
.page-users .users-table{table-layout:fixed;min-width:1120px;}
/* Production visual acceptance: keep account list compact while preserving timestamp/action separation. */
.page-users .users-table-col--account{width:14%;}
.page-users .users-table-col--role{width:12%;}
.page-users .users-table-col--permission-summary{width:46%;}
.page-users .users-table-col--time{width:18%;}
.page-users .users-table-col--actions{width:10%;}
.page-users .users-table th:nth-child(1),
.page-users .users-table td.user-ident{width:14%;}
.page-users .users-table th:nth-child(2),
.page-users .users-table td.user-role{width:12%;}
.page-users .users-table th:nth-child(3),
.page-users .users-table td.user-permission-summary{width:46%;}
.page-users .users-table th:nth-child(4),
.page-users .users-table td.user-time{width:18%;}
.page-users .users-table th:nth-child(5),
.page-users .users-table td.user-actions{width:10%;}

.page-users .users-table tbody tr{border-bottom:var(--table-row-sep);} /* full-row separator */
.page-users .users-table tbody tr:last-child{border-bottom:none;}
.page-users .users-table tbody td{border-bottom:none;}
.page-users .users-table th:nth-child(5),
.page-users .users-table td.user-actions{text-align:center;}
.page-users .users-table .user-time{white-space:nowrap;min-width:190px;padding-right:18px;}
.page-users .users-table .user-time .time-item{display:flex;gap:6px;line-height:1.25;white-space:nowrap;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.page-users .users-table .user-time .time-item + .time-item{margin-top:4px;}
.page-users .users-table .user-time .time-label{flex:0 0 64px;color:var(--muted);text-align:right;}
.page-users .users-table .user-time .time-val{flex:0 0 auto;white-space:nowrap;}
.page-users .users-table .user-actions{white-space:nowrap;text-align:center;min-width:88px;padding-left:20px;}
.page-users .users-table .user-actions .ui-btn{display:inline-flex;justify-content:center;}
.page-users .users-table .sm{font-size:12px;}
.page-users .opmenu-group{margin-top:8px;}
.page-users .opmenu-sub{display:block;}
.page-users details.opmenu{position:relative;}
.page-users details.opmenu > summary{list-style:none;}
.page-users details.opmenu > summary::-webkit-details-marker{display:none;}
.page-users details.opmenu .opmenu-pop{min-width:320px;}
@media (max-width:720px){
  .page-users .users-table .time-line{white-space:normal;}
  .page-users .users-table th.th-actions{width:auto;}
}



/* Users ops modal (centered, compact) */
.modal.modal-lg{ width:min(760px, calc(100vw - 48px)); }
.userops-body{ white-space: normal; }
.userops-muted{ color: var(--muted); font-size: 13px; margin: 6px 0 2px; }
/* Token stubs (for contract allowlist; no visual effect) */
.userops-form{}
.userops-user-id{}

 .userops-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:10px; }
.userops-grid--account.userops-paired-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:16px;
  row-gap:0;
  align-items:stretch;
  min-width:0;
}
.userops-paired-cell{ min-width:0; padding:10px 0; border-top:1px solid var(--line); }
.userops-main-slot{ grid-column:1; }
.userops-record-slot{ grid-column:2; }
.userops-main-slot--role,
.userops-record-perm--audit,
.userops-readonly-item--audit{ grid-row:1; border-top:0; padding-top:0; }
.userops-main-slot--feature,
.userops-record-perm--settings-log,
.userops-readonly-item--settings-log{ grid-row:2; }
.userops-main-slot--password,
.userops-record-perm--users-log,
.userops-readonly-item--users-log{ grid-row:3; }
.userops-main-slot--account,
.userops-record-perm--asset-anomaly,
.userops-readonly-item--asset-anomaly{ grid-row:4; }
.userops-main-col,
.userops-record-col{ min-width:0; }
.userops-record-title{ font-weight:700; margin-bottom:10px; line-height:1.2; }
.userops-record-controls,
.userops-record-readonly{ display:contents; }
.userops-record-controls.hidden,
.userops-record-readonly.hidden{ display:none!important; }
.userops-readonly-control{ display:flex; align-items:center; min-height:36px; }
.userops-fixed-value{
  display:flex;
  align-items:center;
  width:100%;
  min-height:36px;
  box-sizing:border-box;
  border:1px solid #a7d7bd;
  border-radius:8px;
  background:#ecfdf3;
  color:#047857;
  padding:0 12px;
  font-size:13px;
  font-weight:600;
}
.userops-note--record-fixed{ margin-top:8px; }
@media (max-width:860px){
  .userops-grid{ grid-template-columns: 1fr; }
  .userops-grid--account.userops-paired-grid{ grid-template-columns:1fr; }
  .userops-main-slot,
  .userops-record-slot{ grid-column:1; }
  .userops-main-slot--role{ grid-row:1; }
  .userops-main-slot--feature{ grid-row:2; }
  .userops-main-slot--password{ grid-row:3; }
  .userops-main-slot--account{ grid-row:4; }
  .userops-record-perm--audit,
  .userops-readonly-item--audit{ grid-row:5; border-top:1px solid var(--line); padding-top:10px; }
  .userops-record-perm--settings-log,
  .userops-readonly-item--settings-log{ grid-row:6; }
  .userops-record-perm--users-log,
  .userops-readonly-item--users-log{ grid-row:7; }
  .userops-record-perm--asset-anomaly,
  .userops-readonly-item--asset-anomaly{ grid-row:8; }
}

/* Manage-settings permission uses the same plain section layout as role. */
.userops-sec--backend-feature{}

.userops-sec{ padding:8px 0; border-top:1px solid var(--line); }
.userops-paired-cell.userops-sec{ padding:10px 0; }
.userops-paired-cell.userops-sec.userops-main-slot--role,
.userops-paired-cell.userops-sec.userops-record-perm--audit,
.userops-paired-cell.userops-sec.userops-readonly-item--audit{ padding-top:0; border-top:0; }
/* users.php uses .userops-sec-title (keep legacy .sec-title too) */
.userops-sec-title,
.userops-sec .sec-title{
  font-weight:700;
  margin-bottom:6px;
  /* Keep titles visually aligned across the 2-column grid */
  display:flex;
  align-items:flex-end;
  line-height:1.2;
  /* Ensure the two titles in the first row stay on the same baseline */
  min-height:24px;
  white-space:nowrap;
}
.userops-row{ display:flex; align-items:center; gap:10px; font-size:14px; }
/* userops-row: do NOT override control heights here.
   Single-line controls must opt-in via input.field / select.field.
   Buttons must use .ui-btn tokens. This keeps one source of truth for control sizing. */
.userops-row .ui-btn{ display:inline-flex; align-items:center; justify-content:center; }
.userops-row select.field, .userops-row input.field{ flex:1; box-sizing:border-box; }

/* Users modal: password action buttons can be long; allow two-row layout without overflow  */
.userops-row.userops-pw-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  /* Keep horizontal spacing between the two buttons, but do NOT add extra vertical
     spacing when the note line wraps to the next grid row. Vertical spacing is
     controlled by .userops-note margin-top for consistency across sections. */
  column-gap:10px;
  row-gap:0;
  align-items:stretch;
}
.userops-row.userops-pw-row .ui-btn,
.userops-row.userops-pw-row .uop-btn{
  /* keep same visual size as other userops buttons */
  min-width:0;
  padding: 6px 12px;
  line-height: normal;
  white-space:normal;
}

/* User Ops: unified note/help line (one module)
   - Use .userops-note everywhere under User Ops sections
   - .userops-note--reserve keeps a stable one-line height (even when empty)
*/
.userops-note{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}
.userops-actions .userops-note,
.userops-pw-actions .userops-note{
  /* ensure notes always start on a new line under buttons */
  width:100%;
  flex-basis:100%;
}
.userops-note--pw{
  /* Password section note: full width under the two password buttons */
  margin-top:8px;
  grid-column:1 / -1;
  width:100%;
  max-width:none;
}

.userops-password-impact{
  grid-column:1 / -1;
  display:grid;
  box-sizing:border-box;
  min-width:0;
  gap:5px;
  margin-top:8px;
  padding:9px 10px;
  border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius:9px;
  background:color-mix(in srgb, var(--muted) 3%, #fff);
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.userops-password-impact__item{
  display:grid;
  grid-template-columns:74px minmax(0, 1fr);
  gap:8px;
  align-items:start;
  min-width:0;
}
.userops-password-impact__label{
  color:var(--text);
  font-weight:700;
  white-space:nowrap;
}
.userops-password-impact__text{
  min-width:0;
  overflow-wrap:anywhere;
}
.userops-note--reserve{
  min-height:1.4em; /* reserve exactly one line */
}
.userops-note--reserve:empty{
  visibility:hidden; /* keep height but hide */
}

.userops-pw-note{
  grid-column:1 / -1;
  margin-top:0px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  max-width: none;
}

/* users.php: password actions are wrapped in <form class="inline">.
   The global .inline uses display:inline, which makes this grid item shrink to
   min-content, causing the button text to break per-character. Force the form
   to stretch to the grid column width here. */
.userops-row.userops-pw-row form.inline{
  display:block;
  width:100%;
  min-width:0;
}
.userops-row.userops-pw-row form.inline .ui-btn,
.userops-row.userops-pw-row form.inline .uop-btn{
  width:100%;
}
.userops-row.userops-pw-row > .ui-btn,
.userops-row.userops-pw-row > .uop-btn{
  width:100%;
}
@media (max-width: 560px){
  .userops-row.userops-pw-row{ grid-template-columns: 1fr; }
  .userops-row.userops-pw-row .userops-pw-note{ margin-top:0; }
  .userops-password-impact__item{ grid-template-columns:1fr; gap:1px; }
}

.userops-actions{ display:flex; align-items:center; column-gap:10px; row-gap:0; flex-wrap:wrap; }
.userops-actions form{ margin:0; }

/* user ops modal: notes under a section without breaking the flex row */
.userops-action-note{ flex-basis:100%; width:100%; margin-top:0px; }
.userops-sec-note{ margin-top:0; }


/* char counter */
.char-counter{ font-size:12px; color:var(--muted); margin-top:6px; text-align:right; }


/* modal title row */
.modal-title-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ui-btn.icon{ width:var(--btn-h); height:var(--btn-h); padding:0; display:inline-flex; align-items:center; justify-content:center; line-height:1; font-size:18px; }


/* confirm input row */
.confirm-input-row{ margin-top:10px; }
.confirm-input-row .label{ display:block; margin-bottom:6px; }


/* Modal body: default should behave like normal text.
 * If you need to preserve newlines (e.g. confirm dialogs), add class .preline.
 */
.modal-body{ white-space: normal; }
.modal-body.preline{ white-space: pre-line; }


/* unify placeholder font size */
.field::placeholder{ font-size:14px; }


/* preserve line breaks for readonly notes */
.ro.prewrap{
  white-space: pre-wrap;
  /* Notes should render exactly as typed (including leading spaces + newlines).
     Use a monospace stack so indentation is visually stable. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}


/* vertical spacing (global, consistent) */
.wrap > .card + .card,
.container > .card + .card{margin-top:18px;}

/* preferred wrapper: use gap (prevents per-page mt hacks) */
.stack{margin-top:0;display:flex;flex-direction:column;gap:18px;}
/* When a stacked section follows a grid (e.g. asset_view page), keep consistent spacing */
.grid + .stack{margin-top:18px;}
.stack > .card{margin-top:0;}
.stack > .card + .card{margin-top:0;}

/* ---------- Audit diff formatting ---------- */
/* Preserve whitespace (newlines and spaces) inside quoted values, and apply a
   hanging indent to lines after the first without modifying stored text. */
.audit-lines > div { white-space: pre-wrap; }
.audit-line.audit-kv{display:flex; align-items:flex-start; gap:2px; white-space:normal;}
.audit-line.audit-kv .audit-k{white-space:nowrap;}
.audit-line.audit-kv .audit-v{white-space:pre-wrap; word-break:break-word; min-width:0;}

/* Diff lines (「old」→「new」). Use flex-start so multi-line blocks align nicely. */
.audit-line.audit-diff{display:flex; align-items:flex-start; gap:2px; white-space:normal; flex-wrap:wrap;}
.audit-line.audit-diff .audit-k{white-space:nowrap;}
.audit-line.audit-diff .audit-arrow{padding:0 4px; white-space:nowrap;}

/* Quoted value blocks.
   We render the opening quote as its own element at column 0, and the text as
   a separate inline-block so wrapped/new lines align under the first character
   after the opening quote (no fake spaces injected into stored content).
   Monospace font makes leading-space indentation visually stable. */
.audit-qwrap{
  display: inline-flex;
  align-items: flex-start;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.45;
}
.audit-quote{flex:0 0 auto; color:#666;}
.audit-qtext{
  display: inline-block;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Block quoted value (for multi-line notes): first line "「", last line "」" */
.audit-qblock{
  display:block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height:1.45;
}
.audit-qline{
  display:block;
  white-space:pre-wrap;
  word-break:break-word;
}
.audit-qcontent{ /* content lines inside audit-qblock */ }
.audit-meta{display:inline; white-space:inherit;}

/* Diff roles: before/after values (works for any field diff, including notes blocks) */
.audit-before{
  color:#666;
  text-decoration: line-through;
}
.audit-after{
  color:#111;
  font-weight:600;
}

/* Placeholder dash: keep a consistent look regardless of before/after role */
.audit-null{
  color:#666;
  font-weight:600;
}

/* Note empty-state is semantic presentation, not literal user text.
   Keep visible text as 無內容 and preserve the exact value-column glyph start.
   A dotted underline supplies the non-color-only distinction without badge/pill
   padding, border, background, symbols, or other horizontal displacement. */
.audit-empty-value{
  display:inline-block;
  color:#64748b;
  font-weight:500;
  line-height:1.45;
  white-space:nowrap;
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

/* Notes readability: do NOT strike through multi-line notes (too noisy). */
.audit-line.audit-diff-notes .audit-notes-before .audit-before{
  text-decoration:none;
}
/* Keep quote glyphs aligned with the value role */
.audit-quote-before{ color:#666; }
.audit-quote-after{ color:#666; }
.audit-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.audit-mono-wrap{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;tab-size:4;white-space:pre-wrap;}
/* Closing quote is rendered as a real character in HTML for consistent appearance. */

/* Standalone quote lines (notes block spec). Keep the quote glyphs readable. */
.audit-quote-only{
  color:#666;
  font-family: inherit;
}

/* Notes typography is a shared Preview/Audit owner. render_audit_lines_html()
   intentionally carries the historical audit-mono-wrap class, so Preview modal
   must not inherit that monospace/16px shell while Audit Detail gets 13px sans
   from .audit-surface. Keep CREATE/UPDATE note text on one readable CJK scale
   across both surfaces without transform/letter-spacing hacks. */
.audit-line.audit-notes,
.audit-line.audit-diff-notes{
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  font-variant-numeric:inherit;
  font-feature-settings:inherit;
  letter-spacing:inherit;
  color:inherit;
}
.audit-line.audit-notes .audit-k,
.audit-line.audit-diff-notes .audit-k{color:#374151; font-weight:600;}
.audit-line.audit-diff-notes .audit-before{color:#7b8794;}
.audit-line.audit-diff-notes .audit-after{color:#111827;}

/* Notes diff: fixed label/value columns keep 變更前 / 變更後 and wrapped
   free-text aligned. The label column is presentation-only; stored Audit text
   remains unchanged. */
.audit-line.audit-diff-notes{display:block;}
.audit-line.audit-diff-notes .audit-k{display:block; margin-bottom:6px;}
.audit-line.audit-diff-notes .audit-notes-diff{display:grid; gap:6px; min-width:0;}
.audit-line.audit-diff-notes .audit-arrow-line{margin:6px 0; padding-left:0; color:#666;}
.audit-notes-block{
  display:grid;
  grid-template-columns:4.5em minmax(0,1fr);
  column-gap:10px;
  align-items:start;
  min-width:0;
}
.audit-notes-tag{
  display:block;
  min-width:0;
  padding:0;
  margin:0;
  border-radius:0;
  background:transparent;
  color:#4b5563;
  font-size:inherit;
  line-height:inherit;
  font-weight:600;
  white-space:nowrap;
}
.audit-notes-val{display:block; min-width:0;}
.audit-notes-before .audit-notes-tag,
.audit-notes-after .audit-notes-tag{background:transparent; color:#4b5563;}

/* Notes "after" block shares the canonical Audit after-value emphasis.
   Long-note before values may remain line-through-free for readability, but
   the after value must not use a weaker semantic weight than generic diffs. */
.audit-line.audit-diff-notes .audit-notes-after .audit-qcontent,
.audit-line.audit-diff-notes .audit-notes-after .audit-qtext{
  font-weight:700;
}

/* Free-text notes in audit should use the readable CJK stack, not monospace. */
.audit-line.audit-notes .audit-qwrap,
.audit-line.audit-notes .audit-qblock,
.audit-line.audit-notes .audit-qtext,
.audit-line.audit-notes .audit-qline,
.audit-notes-val .audit-qwrap,
.audit-notes-val .audit-qblock,
.audit-notes-val .audit-qtext,
.audit-notes-val .audit-qline{
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  font-variant-numeric:inherit;
  font-feature-settings:inherit;
}

/* Notes (CREATE/kv): show label on its own line and value below. */
.audit-line.audit-notes{display:block;}
.audit-line.audit-notes .audit-k{display:block; margin-bottom:2px;}
.audit-line.audit-notes .audit-notes-single{display:block;}

/* inline field errors (used by MAC validation and others) */

/*
  NOTE (2026-02):
  Preview validation may (temporarily) add the error class to a wrapper element
  (e.g. the YYYY/MM/DD row container) to drive scrolling or focus.
  If we style `.input-error` on *any* element, some browsers will render a single
  big red rectangle around the whole row and show thin "bridge" lines between
  adjacent fields. To avoid this, only style the actual form controls.
*/
input.input-error,
select.input-error,
textarea.input-error{
  /*
    Use inset box-shadow as the visual error border so thickness is consistent
    across browsers and control types (input/select/textarea).
    Keep the real border transparent to avoid double-border rendering.
  */
  border-color: transparent !important;
  border-width: 1px !important;
  box-shadow: inset 0 0 0 2px var(--danger) !important;
  outline: none !important;
}

/* Keep error style on focus (override the normal blue focus ring) */
input.input-error:focus,
select.input-error:focus,
textarea.input-error:focus{
  border-color: transparent !important;
  border-width: 1px !important;
  box-shadow: inset 0 0 0 2px var(--danger) !important;
  outline: none !important;
}

.field-error{
  margin-top:6px;
  font-size:12px;
  line-height:1.4;
  color:#b42318;
}

/* Generic form-control wrapper for controls that own an inline error slot. */
.field-control{min-width:0;display:flex;flex-direction:column;gap:4px;}
.field-control>.field{width:100%;min-width:0;flex:0 0 auto!important;}
.field-control>.field-error{margin-top:0;}
.field-control--grow{flex:1 1 260px;}
.field-control--compact{flex:0 0 110px;max-width:140px;}
.field-row--error-aware{align-items:flex-start!important;}


/* Operation-log custom date validation: reserve inline error slot only when an
   actual date validation message is visible. Selecting 自訂區間 alone must not
   pre-expand the filter grid; submit invalid custom dates first, then show the
   system inline errors with stable start/end date height. */
.filter-grid.log-date-error-slots{
  align-items:start;
}
.filter-grid .field-error[data-js="log-date-error"]{
  display:none;
}
.filter-grid.log-date-error-slots .field-error[data-js="log-date-error"]{
  display:block;
  min-height:17px;
  margin-top:6px;
  visibility:hidden;
}
.filter-grid.log-date-error-slots .field-error[data-js="log-date-error"]:not(:empty){
  visibility:visible;
}
/* Operation-log checkbox filters in the second row should align with peer
   controls even when date errors expand the row above. */
.page-audit .filter-area-hit,
.system-logs-page .filter-area-hit,
.users-logs-page .filter-area-hit{
  display:flex;
  align-items:center;
  align-self:end;
  min-height:var(--filter-min-h);
}
.page-audit .filter-area-hit > .checkbox,
.system-logs-page .filter-area-hit > .checkbox,
.users-logs-page .filter-area-hit > .checkbox{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:var(--control-h);
  margin:0;
}

/* Audit: asset tag cell (tag + sub lines) */
.page-audit .asset-tag{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.2;
}
.page-audit .asset-tag-link{
  text-decoration:none;
}
.page-audit .asset-tag-link:hover{
  text-decoration:underline;
}
.page-audit .tag-sub{
  font-size:12px;
  color:#666;
  white-space:nowrap;
}
.page-audit .tag-sub-muted{
  color:#999;
}


/* --- audit.php helpers (STRICT allowlist) --- */
.nowrap{ white-space: nowrap; }
.w-140{ width: 140px; }
.audit-details{ white-space: pre-wrap; line-height: 1.45; }
.audit-subline{ display:block; margin-top:2px; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.audit-status{ font-size:12px; color:var(--muted); font-weight:500; }
.audit-status-deleted{ color:#64748b; } /* slightly stronger muted for audit semantics */
.pill.archived{border-color:var(--status-muted-border);background:var(--status-muted-bg);color:var(--status-muted-fg);}

.audit-tag-main{ font-weight:inherit; white-space:nowrap; }
.audit-badge-deleted{ margin-left: 6px; }



/* divider for grouping actions inside cards */
.ui-divider{height:1px;background:var(--border,#e5e7eb);}

/* admin operations card (asset_view.php) */
.adminops-banner{background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:12px 14px;margin-bottom:10px;}
.adminops-banner .small{margin-top:6px;}
.adminops-subtitle{font-weight:800;font-size:14px;margin:0 0 2px 0;}
.adminops-note{margin:0;}
.adminops-help{margin-top:8px;}
.adminops-danger{background:#fff1f2;border:1px solid #fecdd3;border-radius:12px;padding:12px 14px;}
.adminops-danger-title{font-weight:800;font-size:14px;margin:0 0 2px 0;}

/* Admin ops: keep the tag-correct input and button perfectly aligned */
.adminops-inline-row{align-items:stretch;}
.adminops-inline-row .field{min-width:0;}
.adminops-inline-row .field-tag{max-width:none; flex:1 1 auto; width:100%;}
.adminops-inline-row .field{height:var(--control-h);}
.adminops-inline-row .ui-btn{height:var(--btn-h); padding-top:0; padding-bottom:0; display:inline-flex; align-items:center; justify-content:center;}

/* Admin ops: asset tag correct field (input + inline error below) */
.tag-correct-fieldwrap{flex:1 1 auto; min-width:0;}
.tag-correct-fieldwrap .field{width:100%;}

/* Admin ops: match danger button typography with primary button */

/* asset_view: keep spacing between status and retired block consistent with asset_form */
.page-asset_view .field-row-status{margin-bottom:0;}

/* Token allowlist helpers (STRICT=1 guard) */
.page-asset_view .retired-wrap-view{display:block;}
.page-asset_view .admin-ops-card{display:block;}

/* ---------------- audit.php search UI ---------------- */
.audit-keyword-row,
.page-audit .audit-keyword-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.audit-keyword-row input,
.page-audit .audit-keyword-row input{
  flex:1 1 auto;
  min-width:0;
}
.audit-keyword-hint,
.page-audit .audit-keyword-hint{
  display:flex;
  align-items:flex-start;
  gap:6px;
  font-size:12px;
  color:#6b7280;
  margin-top:0;
  max-width:none;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.35;
}

/* Keyword hint cell: place hint on next line under keyword input, without affecting the first row alignment. */
.page-audit .filter-panel .audit-keyword-hint-cell{
  grid-column:6;
  grid-row:2;
  /* Tight spacing below the keyword input (match label-to-input spacing). */
  margin-top:0;
}

.page-audit .filter-panel .audit-keyword-field{
  grid-column:6;
  grid-row:1;
}
.audit-keyword-hint .hint-dot,
.page-audit .audit-keyword-hint .hint-dot{
  width:14px;
  height:14px;
  border:1px solid #cbd5e1;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  line-height:1;
  color:var(--muted);
}
.audit-advanced,
.page-audit .audit-advanced{
  margin-top:12px;
}
.audit-assetid-row,
.page-audit .audit-assetid-row{
  display:flex;
  align-items:flex-end;
  gap:10px;
  /* Keep the advanced panel compact; vertical rhythm is controlled by .audit-filter-row gap. */
  margin-top:0;
  justify-content:flex-start;
}

/*
  Internal ID search (advanced panel)
  Goal:
  - 內部ID輸入框「右側」要跟上方「日期」輸入框右側對齊 (same column width)
  - 內部ID的查詢按鈕「左側」要跟上方「開始日期」輸入框左側對齊 (start at column 2)
  Implementation:
  - Reuse the same grid template as .filter-panel .fp-grid.
*/
.page-audit .audit-assetid-row{
  display:grid;
  grid-template-columns:repeat(5, minmax(160px, 200px)) minmax(260px, 1fr);
  column-gap:16px;
  row-gap:8px;
  align-items:end;
}
.page-audit .audit-assetid-input{
  grid-column:1;
  width:auto;
  min-width:0;
}
.page-audit .audit-assetid-action{
  grid-column:2;
  justify-self:start;
  margin-left:0;
}
.page-audit .audit-assetid-action .ui-btn{min-width:96px; height:var(--btn-h);}

/* Advanced panel spacing: keep the same rhythm as the band above (inputs -> 搜尋內部ID/查詢清除 -> advanced panel). */
.page-audit .audit-advanced-panel{margin-top:16px;}

/* audit filter actions align like asset list (bottom-right) */
.page-audit .filter-panel .fp-bottom{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
}
.page-audit .filter-panel .fp-bottom .fp-grid{
  flex:1 1 720px;
  min-width:600px;
}
.page-audit .filter-panel .fp-actions{
  display:flex;
  gap:10px;
  margin-left:auto;
}
.page-audit .filter-panel .fp-actions .ui-btn{
  min-width:96px;
  height:38px;
}


/* --- users ops modal --- */
.modal-section{padding:12px 0;border-top:1px solid var(--line);}
.modal-section:first-child{border-top:0;padding-top:0;}
.modal-section-title{font-weight:700;margin:0 0 8px 0;}
.modal-row{display:flex;gap:12px;align-items:center;}
.modal-row .input{flex:1;}
.modal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
@media (max-width: 720px){
  .modal-grid{grid-template-columns:1fr;}
  .modal-row{flex-direction:column;align-items:stretch;}
}


/* confirm modal head helpers */
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.modal-close{min-width:auto;padding:6px 10px;line-height:1;}




/*
  Keep error focus styling centralized in the form-control specific rules
  (input/select/textarea). Avoid generic `.input-error:focus` outlines because
  they can override the intended inset error border and create uneven thickness
  (e.g., select bottom border appearing thicker) or a "row wrapper" rectangle.
*/



/* Utility */
.prewrap{white-space:pre-wrap; word-break:break-word;}



/* Dense-table family contract
   - 設備清單 / 設備異動紀錄 / 清單管理操作紀錄 / 帳號管理操作紀錄 all share the same
     subtle zebra striping + hover highlight rhythm.
   - Keep jump-highlight as the highest priority visual state.
   - Use the audit-strength palette for all three so switching pages does
     not reset the user's scanning rhythm. */
.page-asset_list .asset-list tbody tr:not(.jump-highlight) > td,
.page-index .asset-list tbody tr:not(.jump-highlight) > td,
.page-audit .audit-table tbody tr:not(.jump-highlight) > td,
.page-asset_view .audit-table tbody tr:not(.jump-highlight) > td,
.page-ip_usage .ip-usage-table tbody tr:not(.jump-highlight) > td,
.system-log-table tbody tr > td,
.users-log-table tbody tr > td{
  transition: background-color .12s ease;
}
.page-asset_list .asset-list tbody tr:nth-child(even):not(.jump-highlight) > td,
.page-index .asset-list tbody tr:nth-child(even):not(.jump-highlight) > td,
.page-audit .audit-table tbody tr:nth-child(even):not(.jump-highlight) > td,
.page-asset_view .audit-table tbody tr:nth-child(even):not(.jump-highlight) > td,
.page-ip_usage .ip-usage-table tbody tr:nth-child(even):not(.jump-highlight) > td,
.system-log-table tbody tr:nth-child(even) > td,
.users-log-table tbody tr:nth-child(even) > td{
  background: rgba(17,17,17,.022);
}
.page-asset_list .asset-list tbody tr:hover:not(.jump-highlight) > td,
.page-index .asset-list tbody tr:hover:not(.jump-highlight) > td,
.page-audit .audit-table tbody tr:hover:not(.jump-highlight) > td,
.page-asset_view .audit-table tbody tr:hover:not(.jump-highlight) > td,
.page-ip_usage .ip-usage-table tbody tr:hover:not(.jump-highlight) > td,
.system-log-table tbody tr:hover > td,
.users-log-table tbody tr:hover > td{
  background: rgba(45,108,223,.050);
}
@media (prefers-reduced-motion: reduce){
  .page-asset_list .asset-list tbody tr:not(.jump-highlight) > td,
  .page-index .asset-list tbody tr:not(.jump-highlight) > td,
  .page-audit .audit-table tbody tr:not(.jump-highlight) > td,
  .page-asset_view .audit-table tbody tr:not(.jump-highlight) > td,
  .page-ip_usage .ip-usage-table tbody tr:not(.jump-highlight) > td,
  .system-log-table tbody tr > td,
  .users-log-table tbody tr > td{
    transition: none;
  }
}

/* Jump-to-row highlight (used after returning to list/audit with ?jump=... or #hash) */
.jump-highlight{
  background: rgba(45, 108, 223, 0.10);
  transition: background-color 0.9s ease-out;
}
tr.jump-highlight > td{
  background: rgba(45, 108, 223, 0.10);
  transition: background-color 0.9s ease-out;
}
@media (prefers-reduced-motion: reduce){
  .jump-highlight,
  tr.jump-highlight > td{ transition: none; }
}

/* v33: action-level reason lines as indented sub-items
   - align to the 2nd character of the parent line (≈ 1 CJK char indent)
   - add a subtle marker (no icon/emoji) to indicate "belongs to" the line above
*/
.audit-lines .audit-line.audit-kv.audit-subitem{
  position: relative;
  margin-top: 2px;
  padding-left: 1em;
}
.audit-lines .audit-line.audit-kv.audit-subitem::before{
  content: "";
  position: absolute;
  left: 0.45em;
  top: 0.25em;
  bottom: 0.25em;
  width: 2px;
  border-radius: 2px;
  background: rgba(0,0,0,0.10);
}
.audit-lines .audit-line.audit-kv.audit-subitem .audit-k{
  white-space: nowrap;
}
.audit-lines .audit-line.audit-kv.audit-subitem .audit-v{
  font-size: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}


/* v35: Null placeholder (—) should be visually secondary */
.audit-lines .audit-v.audit-null{
  opacity: 0.65;
}


/* Audit scope banner (from asset view) */
.audit-scopebar{margin-top:12px;}
.audit-scopebar .link{margin-left:8px;}


/* Head-tools baseline fix (override global .small variants) */
.head-tools .small{
  margin:0 !important;
  padding:0 !important;
  line-height:1.4;
}
.head-tools .audit-toggle{
  line-height:1.4;
}

/*
  ===================== Filter Grid Layout Contract (Single Source of Truth) =====================

  Goals
  - Contract-first: define stable layout rules, then pages only map fields to named areas.
  - Predictable: columns are ALWAYS equal-width within a breakpoint (no auto / fixed columns).
  - Extensible: adding/removing a field is done by adding/removing ONE area mapping class.
  - Shared: index.php + audit.php use the SAME .filter-grid rules.
  - Verifiable: you can inspect gridTemplateColumns / gridTemplateAreas in DevTools.

  Forbidden
  - No inline style, no width:48%, no nth-child hacks, no margin-left micro-adjust.
  - No second grid system.
*/

/* Base grid */
.filter-grid{
  display:grid;
  width:100%;
  grid-auto-flow:row;
  align-items:end;
  column-gap:16px;
  row-gap:12px;
}
.filter-grid > *{ min-width:0; }

/* Inputs inside grid must fill their track (override legacy .field-fixed / .field-compact) */
.filter-grid input[type="text"],
.filter-grid input[type="search"],
.filter-grid input[type="number"],
.filter-grid input[type="date"],
.filter-grid select,
.filter-grid .field-fixed,
.filter-grid .field-compact{
  width:100% !important;
  max-width:none !important;
  min-width:0;
}

/* Operation-log date controls: keep the native WebKit date editor inside its
   equal-width grid track. iPadOS Safari may otherwise preserve an intrinsic
   date-editor width that visually consumes the column gap. */
.filter-grid--audit,
.filter-grid--system-logs,
.filter-grid--users-logs{
  column-gap:20px;
}
.filter-grid > .filter-area-start,
.filter-grid > .filter-area-end{
  min-inline-size:0;
}
.filter-grid input[type="date"]{
  display:block;
  inline-size:100% !important;
  min-inline-size:0 !important;
  max-inline-size:100% !important;
  max-width:100% !important;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:inherit;
}
.filter-grid input[type="date"]::-webkit-date-and-time-value{
  inline-size:100%;
  min-inline-size:0;
  text-align:start;
}

.filter-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
}

/* Named area helpers (shared)
   NOTE: we keep aliases to support older class names used by different pages.
*/
/* Index (current) */
.filter-area-devtype{ grid-area:devtype; }
.filter-area-acqyear{ grid-area:acqyear; }
.filter-area-orgunit{ grid-area:orgunit; }
.filter-area-os{ grid-area:os; }
.filter-area-version{ grid-area:ver; }
.filter-area-q{ grid-area:q; }

/* Generic / legacy aliases */
.filter-area-type{ grid-area:devtype; }
.filter-area-year{ grid-area:acqyear; }
.filter-area-org{ grid-area:orgunit; }
.filter-area-osprod{ grid-area:os; }
.filter-area-osver{ grid-area:ver; }

.filter-area-location{ grid-area:location; }
.filter-area-status{ grid-area:status; }
.filter-area-advanced-toggle{ grid-area:advtoggle; }
.filter-area-advanced-panel{ grid-area:advanced; }
.filter-area-brand{ grid-area:brand; }
.filter-area-showmode{ grid-area:showmode; }
.filter-area-sort{ grid-area:sort; }
.filter-area-perpage{ grid-area:perpage; }
.filter-area-anomaly{ grid-area:anomaly; }
.filter-area-custodian{ grid-area:custodian; }
.filter-area-asset-tag{ grid-area:assettag; }
.filter-area-keyword{ grid-area:keyword; }
.filter-area-actions{ grid-area:actions; }

.filter-area-date{ grid-area:date; }
.filter-area-start{ grid-area:start; }
.filter-area-end{ grid-area:end; }
.filter-area-list-item{ grid-area:listitem; }
.filter-area-setting-scope{ grid-area:settingscope; }
.filter-area-setting-item{ grid-area:settingitem; }
.filter-area-action{ grid-area:action; }
.filter-area-asset{ grid-area:asset; }
.filter-area-id{ grid-area:id; }
.filter-area-hit{ grid-area:hit; }
.filter-area-anomaly{ grid-area:anomaly; }
.filter-grid--index[data-advanced-open="0"] > .filter-area-anomaly{ display:none; }

/* ---------------------------------------------------------
   Breakpoints + equal-width columns
   - >=1400px : 5 columns
   - 900-1399 : 3 columns
   - 640-899  : 2 columns
   - <640     : 1 column
   --------------------------------------------------------- */

/* 5 cols */
@media (min-width: 1400px){
  .filter-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .filter-grid--index[data-advanced-open="0"]{
    /* Index layout contract (5 cols, advanced collapsed) */
    grid-template-areas:
      "devtype status  orgunit location acqyear"
      "advtoggle advtoggle advtoggle advtoggle advtoggle"
      "custodian assettag keyword keyword actions";
  }

  .filter-grid--index[data-advanced-open="1"]{
    /* Index layout contract (5 cols, advanced expanded) */
    grid-template-areas:
      "devtype status  orgunit location acqyear"
      "advtoggle advtoggle advtoggle advtoggle advtoggle"
      "advanced advanced advanced advanced advanced"
      "custodian assettag keyword keyword actions";
  }
  .filter-grid--index.filter-grid--index-has-anomaly[data-advanced-open="1"]{
    grid-template-areas:
      "devtype status  orgunit location acqyear"
      "advtoggle advtoggle advtoggle advtoggle advtoggle"
      "advanced advanced advanced advanced advanced"
      "anomaly custodian assettag keyword actions";
  }

  .filter-grid--audit{
    grid-template-areas:
      /* Audit wide layout contract (5 cols):
         Row1: date, start, end, action, asset tag
         Row2: internal device id, keyword (span 2 cols), hit-only, actions */
      "date start end action asset"
      "id keyword keyword hit actions";
  }

  .filter-grid--system-logs{
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "date start end settingscope settingitem action"
      "keyword keyword keyword hit actions actions";
  }

  .filter-grid--users-logs{
    grid-template-areas:
      "date start end action ."
      "keyword keyword keyword hit actions";
  }
}

/* 3 cols */
@media (min-width: 900px) and (max-width: 1399px){
  .filter-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .filter-grid--index[data-advanced-open="0"]{
    grid-template-areas:
      "devtype status  orgunit"
      "location acqyear acqyear"
      "advtoggle advtoggle advtoggle"
      "custodian assettag assettag"
      "keyword keyword actions";
  }

  .filter-grid--index[data-advanced-open="1"]{
    grid-template-areas:
      "devtype status  orgunit"
      "location acqyear acqyear"
      "advtoggle advtoggle advtoggle"
      "advanced advanced advanced"
      "custodian assettag assettag"
      "keyword keyword actions";
  }
  .filter-grid--index.filter-grid--index-has-anomaly[data-advanced-open="1"]{
    grid-template-areas:
      "devtype status  orgunit"
      "location acqyear acqyear"
      "advtoggle advtoggle advtoggle"
      "advanced advanced advanced"
      "anomaly custodian assettag"
      "keyword keyword actions";
  }

  .filter-grid--audit{
    grid-template-areas:
      "date start end"
      "action asset id"
      "keyword keyword hit"
      ". actions actions";
  }

  .filter-grid--system-logs{
    grid-template-areas:
      "date start end"
      "settingscope settingitem action"
      "keyword keyword hit"
      ". actions actions";
  }

  .filter-grid--users-logs{
    grid-template-areas:
      "date start end"
      "action action ."
      "keyword keyword hit"
      ". actions actions";
  }
}

/* Audit: allow 5-column layout on common desktop widths (keep index 3-col).
   This prevents the audit filter bar from looking "too narrow" on 1200px+ viewports
   (e.g. when DevTools is open). */
@media (min-width: 1200px) and (max-width: 1399px){
  .filter-grid--audit{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-areas:
      "date start end action asset"
      "id keyword keyword hit actions";
  }
}

/* 2 cols */
@media (min-width: 640px) and (max-width: 899px){
  .filter-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .filter-grid--index[data-advanced-open="0"]{
    grid-template-areas:
      "devtype status"
      "orgunit location"
      "acqyear acqyear"
      "advtoggle advtoggle"
      "custodian assettag"
      "keyword keyword"
      "actions actions";
  }

  .filter-grid--index[data-advanced-open="1"]{
    grid-template-areas:
      "devtype status"
      "orgunit location"
      "acqyear acqyear"
      "advtoggle advtoggle"
      "advanced advanced"
      "custodian assettag"
      "keyword keyword"
      "actions actions";
  }
  .filter-grid--index.filter-grid--index-has-anomaly[data-advanced-open="1"]{
    grid-template-areas:
      "devtype status"
      "orgunit location"
      "acqyear acqyear"
      "advtoggle advtoggle"
      "advanced advanced"
      "anomaly anomaly"
      "custodian assettag"
      "keyword keyword"
      "actions actions";
  }

  .filter-grid--audit{
    grid-template-areas:
      "date start"
      "end action"
      "asset id"
      "keyword keyword"
      "hit actions";
  }

  .filter-grid--system-logs{
    grid-template-areas:
      "date start"
      "end action"
      "settingscope settingitem"
      "keyword keyword"
      "hit actions";
  }

  .filter-grid--users-logs{
    grid-template-areas:
      "date start"
      "end action"
      "keyword keyword"
      "hit actions";
  }
}

/* 1 col */
@media (max-width: 639px){
  .filter-grid{ grid-template-columns: 1fr; }

  .filter-grid--index[data-advanced-open="0"]{
    grid-template-areas:
      "devtype"
      "status"
      "orgunit"
      "location"
      "acqyear"
      "advtoggle"
      "custodian"
      "assettag"
      "keyword"
      "actions";
  }

  .filter-grid--index[data-advanced-open="1"]{
    grid-template-areas:
      "devtype"
      "status"
      "orgunit"
      "location"
      "acqyear"
      "advtoggle"
      "advanced"
      "custodian"
      "assettag"
      "keyword"
      "actions";
  }
  .filter-grid--index.filter-grid--index-has-anomaly[data-advanced-open="1"]{
    grid-template-areas:
      "devtype"
      "status"
      "orgunit"
      "location"
      "acqyear"
      "advtoggle"
      "advanced"
      "anomaly"
      "custodian"
      "assettag"
      "keyword"
      "actions";
  }

  .filter-grid--audit{
    grid-template-areas:
      "date"
      "start"
      "end"
      "action"
      "asset"
      "id"
      "keyword"
      "hit"
      "actions";
  }

  .filter-grid--system-logs{
    grid-template-areas:
      "date"
      "start"
      "end"
      "settingscope"
      "settingitem"
      "action"
      "keyword"
      "hit"
      "actions";
  }

  .filter-grid--users-logs{
    grid-template-areas:
      "date"
      "start"
      "end"
      "action"
      "keyword"
      "hit"
      "actions";
  }

  .filter-actions{ justify-content:stretch; }
  .filter-actions .ui-btn{ flex:1 1 auto; }
}

/* ---- v270 UI-only tweaks ---- */
/* Notes textarea: fixed size to keep layout stable (no user resize handle) */
#notes.field{resize:none;overflow:auto;}

/* Asset view notes: cap height so left column blocks do not get pushed down by very long notes */

/* Read-only notes box (match asset_form notes textarea; internal scroll; no resize) */
textarea.field.notes-ro{
  resize:none;
  overflow:auto;
  white-space:pre-wrap;
  font-family:var(--font-readable-cjk);
}



/* System settings: OS dictionary create form alignment */
.field-row--span2{grid-column:1 / -1;}
.field-row--actions{display:grid;grid-template-columns:minmax(0,1fr) var(--dict-action-rail, auto);align-items:center;column-gap:12px;row-gap:8px;min-height:var(--card-head-h);}
.field-row-action-note{min-width:0;display:flex;align-items:center;min-height:40px;line-height:1.5;font-size:13px;color:color-mix(in srgb, var(--text) 64%, var(--muted) 36%);}
.field-row-action-buttons{display:grid;grid-auto-flow:column;grid-auto-columns:72px;justify-content:end;align-items:center;align-self:center;column-gap:10px;row-gap:8px;width:100%;min-height:40px;}
.field-row-action-buttons .ui-btn{width:100%;}
.page-system_os .system-os-create .field-stack{display:flex;flex-direction:column;gap:18px;}
.page-system_os .system-os-create .field-stack .field-row{margin-top:0;}

/* System settings: OS dictionary (A) Left products / (B) Right versions */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.page-system_os .card-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1 1 auto;width:100%;}
.page-system_os .card-head-row h3{margin:0;}
.page-system_os .card-head-row .ui-btn{flex:0 0 auto;}


.dict-policy-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:12px 14px;background:color-mix(in srgb, var(--card) 94%, var(--focus) 6%);margin:0 0 14px 0;}
.dict-policy-copy{min-width:0;display:flex;flex-direction:column;gap:2px;}
.dict-policy-kicker{font-size:12px;line-height:1.35;color:var(--muted);font-weight:700;letter-spacing:.02em;}
.dict-policy-title{font-size:14px;line-height:1.4;font-weight:700;color:var(--text);}
.dict-policy-note{font-size:12px;line-height:1.5;color:var(--muted);max-width:74ch;}
.dict-policy-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;flex:0 0 auto;}
.dict-policy-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;color:var(--text);font-size:13px;}
.dict-policy-switch input{position:absolute;opacity:0;pointer-events:none;}
.dict-policy-switch-ui{position:relative;width:42px;height:24px;border-radius:999px;border:1px solid rgba(0,0,0,.06);background:color-mix(in srgb, var(--muted) 10%, var(--card));transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;}
.dict-policy-switch-ui::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.18);transition:transform .18s ease;}
.dict-policy-switch input:checked + .dict-policy-switch-ui{background:color-mix(in srgb, var(--focus) 18%, var(--card));border-color:color-mix(in srgb, var(--focus) 35%, var(--line));}
.dict-policy-switch input:checked + .dict-policy-switch-ui::after{transform:translateX(18px);background:var(--focus);}
.dict-policy-switch input:focus-visible + .dict-policy-switch-ui{outline:0;box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent);}
.dict-policy-switch-text{font-weight:600;color:var(--text);}
.dict-policy-bar--compact{max-width:min(760px,100%);align-items:flex-start;justify-content:flex-start;flex-direction:column;gap:10px;}
.dict-policy-bar--compact .dict-policy-actions{justify-content:flex-start;}
.dict-policy-bar--global{display:grid;grid-template-columns:minmax(0,760px) auto;justify-content:flex-start;align-items:center;column-gap:14px;}
.dict-policy-bar--global .dict-policy-copy{max-width:760px;}
.dict-policy-bar--global .dict-policy-actions{justify-content:flex-start;}
.page-system_os .dict-policy-bar--os{margin-bottom:16px;}

@media (max-width: 980px){
  .dict-policy-bar{align-items:flex-start;flex-direction:column;}
  .dict-policy-actions{width:100%;justify-content:flex-start;}
  .dict-policy-bar--global{display:flex;}
}

.system-rules-form-actions{
  justify-content:flex-end;
  margin-top:18px;
  padding-top:4px;
}
@media (max-width:639px){
  .system-rules-form-actions{justify-content:stretch;}
  .system-rules-form-actions .ui-btn{width:100%;}
}

.page-system_os .system-os-split{display:grid;grid-template-columns: 1fr 1fr;gap:18px;align-items:start;}
.page-system_os .system-os-pane{border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:14px;}
.page-system_os .system-os-pane .pane-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;}
.page-system_os .system-os-pane .pane-title{font-weight:700;}
.page-system_os .system-os-pane .pane-sub{color:var(--muted);font-size:0.95em;}

.page-system_os .system-os-mini{margin:0 0 12px 0;}
.page-system_os .system-os-mini .field-row{margin-top:0;display:flex;gap:10px;align-items:flex-end;}
.page-system_os .system-os-mini .field{flex:1 1 auto;}

/* Create row: name/version + sort + submit in one line (wrap on narrow screens) */
.page-system_os .system-os-mini-row{margin-top:0;display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.page-system_os .system-os-mini-row .field{flex:1 1 260px;}
.page-system_os .system-os-mini-row .field--sort{flex:0 0 110px;max-width:140px;}
.page-system_os .system-os-mini-row .ui-btn{flex:0 0 auto;}
.page-system_os .system-os-mini-row>.field-control--grow{flex:1 1 260px;min-width:0;}
.page-system_os .system-os-mini-row>.field-control--compact{flex:0 0 110px;max-width:140px;min-width:0;}

.page-system_os .system-os-adv{margin-top:10px;}
.page-system_os .system-os-adv summary{cursor:pointer;color:var(--muted);}
.page-system_os .system-os-adv .field-row{margin-top:10px;display:flex;gap:10px;align-items:center;}
.page-system_os .system-os-adv label{min-width:3em;}
.page-system_os .system-os-adv-inline{flex:1;display:flex;gap:12px;align-items:center;flex-wrap:wrap;}

.page-system_os .system-os-list{display:flex;flex-direction:column;gap:10px;}
.page-system_os .system-os-item{scroll-margin-top:20px;--dict-action-rail:236px;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:10px;
  display:grid;grid-template-columns:1fr var(--dict-action-rail);grid-template-rows:auto auto;column-gap:12px;row-gap:8px;align-items:center;}
.page-system_os .system-os-item.is-selected{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);}

.page-system_os .system-os-pick{display:flex;justify-content:flex-start;gap:10px;text-decoration:none;color:inherit;}
.page-system_os .system-os-pick.no-link{cursor:default;}
.page-system_os .system-os-pick .title{display:inline-flex;align-items:baseline;gap:8px;}
.page-system_os .system-os-pick .sort{color:var(--muted);font-weight:600;min-width:2.5em;display:inline-block;}
.page-system_os .system-os-pick .name{font-weight:700;}
.page-system_os .system-os-pick .meta{color:var(--muted);font-size:0.95em;}

/* System OS dictionary: status tag + disabled visual */
.page-system_os .system-os-status{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:9px;border:1px solid rgba(0,0,0,.06);font-size:0.92em;line-height:1.6;}
.page-system_os .system-os-status.is-on{color:var(--focus);background:color-mix(in srgb, var(--focus) 10%, transparent);border-color:color-mix(in srgb, var(--focus) 25%, var(--line));}
.page-system_os .system-os-status.is-off{color:var(--muted);background:color-mix(in srgb, var(--muted) 10%, transparent);border-color:color-mix(in srgb, var(--muted) 25%, var(--line));}
.page-system_os .system-os-item.is-disabled{opacity:0.78;}
.page-system_os .system-os-item.is-disabled .system-os-pick .name{color:var(--muted);}
.page-system_os .system-os-item.is-disabled{background:color-mix(in srgb, var(--muted) 5%, transparent);}


.page-system_os .system-os-pick{grid-column:1;grid-row:1;}
.page-system_os .system-os-actions{grid-column:2;grid-row:1;margin-top:0;display:grid;grid-template-columns:repeat(2,72px);column-gap:10px;align-items:center;justify-content:end;justify-self:end;width:max-content;}
.page-system_os .system-os-actions > .ui-btn{width:100%;}
.page-system_os .system-os-actions .system-os-toggle{display:block;width:72px;margin:0;}
.page-system_os .system-os-actions .system-os-toggle .ui-btn{width:100%;min-width:0;}
.page-system_os .system-os-actions--placeholder{visibility:hidden;width:154px;height:var(--btn-h);}

/* System settings action buttons: keep consistent size/weight across states */
.page-system_os .system-os-actions .ui-btn,
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-actions .ui-btn{
  min-width:72px;
  justify-content:center;
}
.page-system_os .system-os-actions .ui-btn--primary,
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-actions .ui-btn--primary{
  font-weight:inherit;
}

.page-system_os .system-os-item.is-editing .system-os-actions .js-os-edit-toggle,
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-item.is-editing .system-os-actions .js-os-edit-toggle{
  visibility:hidden;
  pointer-events:none;
}


/* System OS dictionary: compact edit/collapse button (align with toggle button density) */
.page-system_os .system-os-actions .js-os-edit-toggle{min-width:72px;padding:4px 12px;font-size:0.92em;line-height:1.6;}

/* System OS dictionary: compact single toggle button */
.page-system_os .system-os-toggle{display:inline-flex;gap:8px;align-items:center;}
.page-system_os .system-os-toggle .ui-btn{min-width:auto;}

.page-system_os .system-os-inline-adv{grid-column:1 / -1;grid-row:2;margin-top:0;}
.page-system_os .system-os-inline-adv summary{cursor:pointer;color:var(--muted);}
.page-system_os .system-os-adv-form{margin-top:10px;}
.page-system_os .system-os-adv-form .field-row{margin-top:10px;display:grid;grid-template-columns:48px minmax(0,1fr) var(--dict-action-rail);column-gap:10px;align-items:center;}
.page-system_os .system-os-adv-form label{min-width:0;grid-column:1;}
.page-system_os .system-os-adv-form .field{grid-column:2;min-width:0;width:100%;}
.page-system_os .system-os-adv-form .field-control{grid-column:2;min-width:0;}
/* Keep edit-form inputs inside the content column; reserve the right rail for actions. */
.page-system_os .system-os-adv-form .field-row--actions{grid-template-columns:minmax(0,1fr) var(--dict-action-rail);}
.page-system_os .system-os-adv-form .field-row--actions .field-row-action-note{grid-column:1;}
.page-system_os .system-os-adv-form .field-row--actions .field-row-action-buttons{grid-column:2;}
/* OS page keeps top-row action group right-aligned to the same rail edge without stretching the whole group. */
.page-system_os .system-os-actions{justify-self:end;}

@media (max-width: 980px){
  .page-system_os .system-os-split{grid-template-columns:1fr;}
  .page-system_os .system-os-item{grid-template-columns:1fr;grid-template-rows:auto auto auto;}
  .page-system_os .system-os-actions{grid-column:1;grid-row:2;justify-content:start;justify-self:start;}
  .page-system_os .system-os-inline-adv{grid-column:1;grid-row:3;}
  .page-system_os .system-os-adv-form .field-row{grid-template-columns:1fr;}
  .page-system_os .system-os-adv-form .field,
  .page-system_os .system-os-adv-form .field-control,
  .page-system_os .system-os-adv-form .field-row-action-note,
  .page-system_os .system-os-adv-form .field-row-action-buttons{grid-column:1;}
  .page-system_os .system-os-adv-form .field-row-action-buttons{justify-content:flex-start;}
}

/* System settings (入口): compact two-column cards */
.page-system_settings .card--sub{padding:14px;}
.page-system_settings .card--sub .card-head{
  min-height:auto;
  margin:0 0 8px 0;
}
.page-system_settings .card--sub .card-head h4{margin:0;}

/* ------------------------------------------------------------
 * System list pages (Org Units / Brands / Locations)
 * Share the same visual contract as "system_os" list pages.
 * ------------------------------------------------------------ */

:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .card-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1 1 auto;width:100%;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .card-head-row h3{margin:0;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .card-head-row .ui-btn{flex:0 0 auto;}

:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-mini{margin:0 0 12px 0;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-mini .field-row{margin-top:0;display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;max-width:760px;margin-right:auto;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-mini .field{flex:1 1 260px;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-mini .field--sort{flex:0 0 90px;max-width:110px;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-mini .ui-btn{flex:0 0 auto;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-mini-row>.field-control--grow{flex:1 1 260px;min-width:0;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-mini-row>.field-control--compact{flex:0 0 90px;max-width:110px;min-width:0;}

:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv{margin-top:10px;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv summary{cursor:pointer;color:var(--muted);}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv .field-row{margin-top:10px;display:flex;gap:10px;align-items:center;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv label{min-width:3em;}

:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-list{display:flex;flex-direction:column;gap:10px;max-width:760px;margin-right:auto;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-item{--dict-action-rail:236px;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:10px;scroll-margin-top:20px;
  display:grid;grid-template-columns:1fr var(--dict-action-rail);grid-template-rows:auto auto;column-gap:12px;row-gap:8px;align-items:center;}

:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick{display:flex;justify-content:flex-start;gap:10px;text-decoration:none;color:inherit;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick.no-link{cursor:default;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick .title{display:inline-flex;align-items:baseline;gap:8px;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick .sort{color:var(--muted);font-weight:600;min-width:2.5em;display:inline-block;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick .name{font-weight:700;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-item.is-disabled{opacity:0.78;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-item.is-disabled .system-os-pick .name{color:var(--muted);}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-item.is-disabled{background:color-mix(in srgb, var(--muted) 5%, transparent);}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-item.is-selected{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);}

:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick{grid-column:1;grid-row:1;}
 :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-actions{grid-column:2;grid-row:1;margin-top:0;display:grid;grid-template-columns:repeat(2,72px);column-gap:10px;align-items:center;justify-content:end;justify-self:end;width:max-content;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-actions > .ui-btn{width:100%;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-actions .system-os-toggle{display:block;width:72px;margin:0;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-actions .system-os-toggle .ui-btn{width:100%;min-width:0;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-actions .js-os-edit-toggle{min-width:auto;padding:4px 12px;font-size:0.92em;line-height:1.6;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-actions--placeholder{visibility:hidden;width:154px;height:var(--btn-h);}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-toggle{display:inline-flex;gap:8px;align-items:center;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-toggle .ui-btn{min-width:auto;}

:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-inline-adv{grid-column:1 / -1;grid-row:2;margin-top:0;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-inline-adv summary{cursor:pointer;color:var(--muted);}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv-form{margin-top:10px;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv-form .field-row{margin-top:10px;display:grid;grid-template-columns:48px minmax(0,1fr) var(--dict-action-rail);column-gap:10px;align-items:center;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv-form label{min-width:0;grid-column:1;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv-form .field{grid-column:2;min-width:0;width:100%;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv-form .field-control{grid-column:2;min-width:0;}
/* Keep edit-form inputs inside the content column; reserve the right rail for actions. */
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv-form .field-row--actions{grid-template-columns:minmax(0,1fr) var(--dict-action-rail);}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv-form .field-row--actions .field-row-action-note{grid-column:1;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv-form .field-row--actions .field-row-action-buttons{grid-column:2;}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-actions{justify-self:end;}

@media (max-width: 980px){
  :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-item{grid-template-columns:1fr;grid-template-rows:auto auto auto;}
  :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-actions{grid-column:1;grid-row:2;justify-content:start;justify-self:start;}
  :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-inline-adv{grid-column:1;grid-row:3;}
  :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv-form .field-row{grid-template-columns:1fr;}
  :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv-form .field,
  :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv-form .field-control,
  :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv-form .field-row-action-note,
  :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv-form .field-row-action-buttons{grid-column:1;}
  :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-adv-form .field-row-action-buttons{justify-content:flex-start;}
}


/* Asset form: show OS rename hint under the OS selects without using inline styles */
.page-asset_form .os-rename-hint{margin-top:6px;line-height:1.35;}


/* System/list management operation log readability
   - Human-readable summary first
   - Raw JSON collapsed behind 展開細節 / 收合細節
   - Users permission details stay compact, grouped and visually stable inside the summary column
   - Users summary text and disclosure details are separate visual layers; summaries must stay scan-friendly
   - v13 cross-surface rule: device audit and users operation logs share 展開詳情 / 收合詳情 and 全部展開 / 全部收合 wording, while preserving their own content column semantics.
*/
.system-log-table td,
.system-log-table th,
.users-log-table td,
.users-log-table th{vertical-align:top;}
.users-log-summary-cell{line-height:1.45;}
.users-log-summary-text{display:block;max-width:min(58vw,760px);overflow-wrap:anywhere;word-break:normal;line-height:1.5;color:var(--text);}
.system-log-detail,
.users-log-detail{display:inline-block;max-width:100%;}
.users-log-detail{display:block;margin-top:6px;}
.system-log-detail > summary,
.users-log-detail > summary{list-style:none;cursor:pointer;color:var(--focus);text-decoration:underline;font-size:13px;line-height:1.2;}
.system-log-detail > summary::-webkit-details-marker,
.users-log-detail > summary::-webkit-details-marker{display:none;}
.system-log-detail .when-open,
.users-log-detail .when-open{display:none;}
.system-log-detail[open] .when-closed,
.users-log-detail[open] .when-closed{display:none;}
.system-log-detail[open] .when-open,
.users-log-detail[open] .when-open{display:inline;}
.system-log-detail-body{margin-top:8px;padding:10px 12px;border:1px solid rgba(0,0,0,.06);border-radius:9px;background:color-mix(in srgb, var(--card) 96%, var(--focus) 4%);max-width:min(72vw,760px);}
.users-log-detail-summary{display:inline-flex;align-items:center;gap:4px;font-weight:600;text-underline-offset:2px;}
.users-log-detail-summary::before{content:"▸";font-size:11px;line-height:1;color:var(--muted);}
.users-log-detail[open] > .users-log-detail-summary::before{content:"▾";}
.users-log-detail-body{margin-top:6px;padding:10px 12px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:color-mix(in srgb, var(--card) 94%, var(--focus) 6%);width:fit-content;min-width:320px;max-width:min(50vw,560px);box-shadow:0 1px 2px rgba(15,23,42,.04);}
.users-log-detail-group + .users-log-detail-group{margin-top:8px;padding-top:8px;border-top:1px solid rgba(15,23,42,.06);}
.users-log-detail-title{font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.35;font-size:13px;}
.users-log-detail-list{margin:0;padding-left:18px;color:var(--muted);line-height:1.5;}
.users-log-detail-line{overflow-wrap:anywhere;}
.users-log-detail-line + .users-log-detail-line{margin-top:2px;}
.system-log-json{margin:0;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}


/* Index advanced filters */
.advanced-filter-toggle-line{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  min-height:40px;
}
.advanced-filter-toggle-title{
  margin:0;
  color:var(--text);
}
.advanced-filter-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--primary);
  font:inherit;
  font-weight:700;
  line-height:1.4;
  cursor:pointer;
  text-decoration:none;
}
.advanced-filter-toggle:hover{ text-decoration:underline; }
.advanced-filter-toggle:focus-visible{
  outline:2px solid color-mix(in srgb, var(--primary) 55%, white 45%);
  outline-offset:2px;
  border-radius:6px;
}
.advanced-filter-toggle::after{
  content:"";
  width:12px;
  height:12px;
  flex:0 0 12px;
  background-image:url("icons/action-chevron-v11.svg?v=20260722v11");
  background-position:center;
  background-size:12px 12px;
  background-repeat:no-repeat;
  transform:rotate(0deg);
}
.filter-area-advanced-toggle[data-advanced-open="1"] .advanced-filter-toggle::after{
  transform:rotate(180deg);
}
.advanced-filter-panel{
  border:0;
  border-radius:0;
  background:transparent;
  padding:0;
}
.advanced-filter-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:14px 16px;
  align-items:end;
}
.advanced-filter-grid > *{ min-width:0; }

@media (min-width: 900px) and (max-width: 1399px){
  .advanced-filter-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (min-width: 640px) and (max-width: 899px){
  .advanced-filter-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 639px){
  .advanced-filter-grid{ grid-template-columns:1fr; }
}

.custodian-filter-fields{display:grid;grid-template-columns:minmax(0, 118px) minmax(0,1fr);gap:10px;align-items:end;}
.custodian-filter-fields > *{min-width:0;}
.custodian-filter-fields [data-js="custodian-input"]:disabled{opacity:.65;cursor:not-allowed;background:#f7f7f7;}
@media (max-width: 899px){
  .custodian-filter-fields{grid-template-columns:1fr;}
}

/* Report statistics page (read-only cards) */
.reports-page{padding-top:18px;}
.reports-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;padding:16px 18px;}
.reports-toolbar__summary{min-width:0;}
.reports-option-form{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
.reports-checkline{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--text);white-space:nowrap;}
.reports-checkline input{width:16px;height:16px;margin:0;}
.reports-board{display:grid;gap:26px;min-width:0;}
.reports-section{min-width:0;}
.reports-section-head{display:flex;align-items:center;gap:11px;min-width:0;margin:0 2px 12px;}
.reports-section-title{flex:0 0 auto;margin:0;color:var(--text);font-size:17px;font-weight:800;line-height:1.35;letter-spacing:.02em;}
.reports-section-description{flex:0 1 auto;min-width:0;margin:0;color:color-mix(in srgb,var(--text) 60%,var(--muted) 40%);font-size:13px;font-weight:500;line-height:1.45;}
.reports-section-rule{flex:1 1 80px;min-width:24px;height:1px;background:color-mix(in srgb,var(--border) 92%,var(--text) 8%);}
.reports-section-grid{display:grid;gap:18px;align-items:start;min-width:0;}
.reports-section-grid--three{grid-template-columns:repeat(3,minmax(0,1fr));}
.reports-section-grid--two{grid-template-columns:repeat(2,minmax(0,1fr));}
.reports-section-grid--lifecycle{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.reports-section-grid--one{grid-template-columns:minmax(0,1fr);}
.reports-section-grid > .report-card{grid-column:auto;}
.reports-lifecycle-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-content:start;min-width:0;}
.reports-lifecycle-stack > .report-card{min-width:0;}
.report-card{min-height:0;min-width:0;}
.report-card--third{grid-column:span 2;}
.report-card--half{grid-column:span 3;}
.report-card--full{grid-column:1 / -1;}
.report-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.report-card .card-head h3{display:flex;align-items:center;gap:8px;min-width:0;}
.report-card .card-head h3::before{content:"";display:inline-block;width:4px;height:18px;border-radius:999px;background:var(--brand);flex:0 0 auto;}
.report-card-total{flex:0 0 auto;font-size:13px;color:color-mix(in srgb,var(--text) 72%,var(--muted) 28%);font-weight:600;white-space:nowrap;}
.report-card-note{margin:0 18px 10px;color:var(--muted);font-size:12px;line-height:1.5;}
.report-table{width:100%;table-layout:fixed;margin-top:0;}
.report-table th,.report-table td{font-size:13px;}
.report-table th:first-child,.report-table td:first-child{width:auto;}
.report-table col.report-count-col-layout{width:72px;}
.report-table .report-count-col{width:72px;text-align:right;white-space:nowrap;padding-left:8px;padding-right:10px;}
.report-row-label{display:block;min-width:0;overflow-wrap:anywhere;}
.report-share-bar,.dashboard-dist-progress{display:block;width:100%;height:4px;margin-top:6px;border:0;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--brand) 8%,white 92%);}
.report-share-bar::-webkit-progress-bar,.dashboard-dist-progress::-webkit-progress-bar{background:color-mix(in srgb,var(--brand) 8%,white 92%);border-radius:999px;}
.report-share-bar::-webkit-progress-value,.dashboard-dist-progress::-webkit-progress-value{background:color-mix(in srgb,var(--brand) 38%,white 62%);border-radius:999px;}
.report-share-bar::-moz-progress-bar,.dashboard-dist-progress::-moz-progress-bar{background:color-mix(in srgb,var(--brand) 38%,white 62%);border-radius:999px;}
.report-count-link{display:inline-block;max-width:100%;min-width:0;color:var(--brand);font-weight:600;text-align:right;text-decoration:none;border-bottom:1px solid transparent;}
.report-count-link:hover,.report-count-link:focus{border-bottom-color:currentColor;text-decoration:none;}
.report-sort-status{display:flex;align-items:center;column-gap:18px;row-gap:6px;flex-wrap:wrap;margin-top:6px;font-size:12px;color:var(--muted);line-height:1.5;}
.report-sort-mode-inline{gap:0;}
.report-sort-mode-controls{display:inline-flex;align-items:center;gap:0;flex-wrap:wrap;}
.report-sort-mode-choice{gap:4px;}
.report-sort-mode-label{color:var(--muted);}
.report-sort-mode-option{text-decoration:none;}
.report-sort-mode-option:hover,.report-sort-mode-option:focus{text-decoration:none;}
.report-sort-mode-option.is-active{color:var(--brand);font-weight:600;background:color-mix(in srgb,var(--brand) 9%,white 91%);}
.report-reading-order-inline{gap:0;}
.report-reading-order-info{margin-left:5px;}
.report-reading-order-info .info-popover__trigger{width:17px;height:17px;font-size:11px;}
.report-sort-link{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;color:inherit;text-decoration:none;border-bottom:1px solid transparent;}
.report-sort-link:hover,.report-sort-link:focus{color:var(--brand);border-bottom-color:currentColor;text-decoration:none;}
.report-sort-link.is-active{color:var(--brand);font-weight:700;}
.report-sort-indicator{font-size:10px;line-height:1;}

/* v60-v61 compact sub-layouts keep high-volume cards useful without forcing the
   whole dashboard to inherit the tallest card's row height. */
.report-memory-columns{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;margin-top:0;padding:9px 10px;border:1px solid var(--border);border-bottom:0;border-radius:12px 12px 0 0;background:#fff;font-size:13px;font-weight:700;}
.report-memory-column-count{text-align:right;white-space:nowrap;}
.report-memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:12px;border:1px solid var(--border);border-radius:0 0 12px 12px;background:color-mix(in srgb,var(--brand) 2%,white 98%);}
.report-memory-section{min-width:0;border:1px solid var(--border);border-radius:9px;background:#fff;overflow:hidden;}
.report-table--memory-section{min-width:0;margin:0;border:0;border-radius:0;background:#fff;}
.report-table--memory-section tbody tr:first-child td{padding-top:12px;}
.report-table--memory-section tr:last-child td{border-bottom:0;}
.report-table--os thead,.report-table--acquired-year thead,.report-table--usage-age thead{display:none;}
.report-table--os tbody,.report-table--acquired-year tbody,.report-table--usage-age tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;}
.report-table--os tbody tr[data-report-row],.report-table--acquired-year tbody tr[data-report-row],.report-table--usage-age tbody tr[data-report-row]{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;border-bottom:var(--table-row-sep);}
.report-table--os tbody tr[data-report-row] td,.report-table--acquired-year tbody tr[data-report-row] td,.report-table--usage-age tbody tr[data-report-row] td{display:block;border-bottom:0;min-width:0;}
.report-table--os tbody tr:not([data-report-row]),.report-table--acquired-year tbody tr:not([data-report-row]),.report-table--usage-age tbody tr:not([data-report-row]){grid-column:1 / -1;}
.report-table--org-units thead{display:none;}
.report-table--org-units tbody{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px;}
.report-table--org-units tbody tr[data-report-row]{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;border-bottom:var(--table-row-sep);}
.report-table--org-units tbody tr[data-report-row] td{display:block;border-bottom:0;min-width:0;}
.report-table--org-units tbody tr:not([data-report-row]){grid-column:1 / -1;}
tbody[data-report-reading-grid].is-report-column-reading{grid-auto-flow:column;grid-template-rows:repeat(var(--report-reading-row-count,1),auto);}

@media (max-width:1180px){
  .reports-board{gap:24px;}
  .reports-section-grid--two,.reports-section-grid--lifecycle{grid-template-columns:minmax(0,1fr);}
  .reports-lifecycle-stack{grid-template-columns:minmax(0,1fr);}
  .report-table--acquired-year tbody,.report-table--usage-age tbody{grid-template-columns:repeat(2,minmax(0,1fr));}
  .report-table--org-units tbody{grid-template-columns:repeat(2,minmax(0,1fr));}
  .report-memory-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .reports-section-grid--three{grid-template-columns:minmax(0,1fr);}
  .reports-section-description{display:none;}
}
@media (max-width:760px){
  .reports-board{gap:22px;}
  .reports-section-head{align-items:flex-start;}
  .reports-section-title{font-size:16px;}
  .reports-section-rule{margin-top:10px;}
  .reports-section-grid--three,.reports-section-grid--two,.reports-section-grid--lifecycle,.reports-section-grid--one{grid-template-columns:1fr;}
  .reports-toolbar{align-items:flex-start;flex-direction:column;}
  .reports-option-form{justify-content:flex-start;}
  .report-reading-order-inline{display:none;}
  .report-memory-grid{grid-template-columns:1fr;}
  .report-table--os thead,.report-table--acquired-year thead,.report-table--usage-age thead,.report-table--org-units thead{display:table-header-group;}
  .report-table--os tbody,.report-table--acquired-year tbody,.report-table--usage-age tbody,.report-table--org-units tbody{display:table-row-group;}
  .report-table--os tbody tr[data-report-row],.report-table--acquired-year tbody tr[data-report-row],.report-table--usage-age tbody tr[data-report-row],.report-table--org-units tbody tr[data-report-row]{display:table-row;}
  .report-table--os tbody tr[data-report-row] td,.report-table--acquired-year tbody tr[data-report-row] td,.report-table--usage-age tbody tr[data-report-row] td,.report-table--org-units tbody tr[data-report-row] td{display:table-cell;border-bottom:var(--table-row-sep);}
}

/* IP usage list */
.card .ip-usage-card-head{
  display:block;
  min-height:0;
}
.ip-usage-card-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-width:0;
}
.ip-usage-card-title-row h3{
  flex:1 1 auto;
  min-width:0;
}
.ip-usage-card-description{
  margin-top:4px;
  line-height:1.45;
}
.ip-usage-table th,
.ip-usage-table td {
  vertical-align: top;
}
.ip-usage-table thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:var(--surface,#fff);
  box-shadow:0 1px 0 var(--line);
}
.ip-usage-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.ip-usage-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.ip-usage-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ip-usage-sort-link:hover,
.ip-usage-sort-link:focus {
  color: var(--focus);
  border-bottom-color: currentColor;
  text-decoration: none;
}
.ip-usage-sort-link.is-active {
  color: var(--focus);
  font-weight: 700;
}
.ip-usage-sort-indicator {
  font-size: 10px;
  line-height: 1;
}
.ip-usage-filter-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-areas: "orgunit subnet connection keyword actions";
  align-items: end;
}
.ip-usage-filter-org-unit { grid-area: orgunit; }
.ip-usage-filter-subnet { grid-area: subnet; }
.ip-usage-filter-connection-type { grid-area: connection; }
.ip-usage-filter-keyword { grid-area: keyword; }
.ip-usage-filter-actions {
  grid-area: actions;
  justify-self: end;
}
@media (min-width: 900px) and (max-width: 1399px) {
  .ip-usage-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "orgunit subnet connection"
      "keyword keyword actions";
  }
}
@media (min-width: 640px) and (max-width: 899px) {
  .ip-usage-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "orgunit subnet"
      "connection keyword"
      "actions actions";
  }
}
@media (max-width: 639px) {
  .ip-usage-filter-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "orgunit"
      "subnet"
      "connection"
      "keyword"
      "actions";
  }
  .ip-usage-filter-actions {
    justify-self: stretch;
  }
}

/* Dashboard home page */
.dashboard-page{padding-top:18px;}
.dashboard-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:18px;}
.dashboard-summary-card{padding:18px 20px;min-height:118px;display:flex;flex-direction:column;justify-content:center;gap:6px;text-decoration:none;color:inherit;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;}
a.dashboard-summary-card:hover,a.dashboard-summary-card:focus-visible{color:inherit;text-decoration:none;border-color:color-mix(in srgb,var(--brand) 42%,var(--border) 58%);box-shadow:0 5px 18px rgba(17,24,39,.08);transform:translateY(-1px);}
a.dashboard-summary-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.dashboard-summary-value{font-size:32px;line-height:1.1;font-weight:800;color:var(--text);letter-spacing:.2px;}
.dashboard-summary-label{font-size:14px;font-weight:700;color:var(--text);}
.dashboard-summary-sub{font-size:12px;color:var(--muted);}
.dashboard-main-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:18px;align-items:start;}
.dashboard-side-stack{display:flex;flex-direction:column;gap:18px;min-width:0;}
.dashboard-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.dashboard-card-head h3{display:flex;align-items:center;gap:8px;min-width:0;}
.dashboard-card-head h3::before{content:"";display:inline-block;width:4px;height:18px;border-radius:999px;background:var(--brand);flex:0 0 auto;}
.dashboard-latest-table{width:100%;table-layout:fixed;margin-top:0;}
.dashboard-latest-table th,.dashboard-latest-table td{font-size:13px;}
.dashboard-latest-table th:nth-child(1),.dashboard-latest-table td:nth-child(1){width:18%;}
.dashboard-latest-table th:nth-child(2),.dashboard-latest-table td:nth-child(2){width:20%;}
.dashboard-latest-table th:nth-child(3),.dashboard-latest-table td:nth-child(3){width:16%;}
.dashboard-latest-table th:nth-child(4),.dashboard-latest-table td:nth-child(4){width:26%;}
.dashboard-latest-table th:nth-child(5),.dashboard-latest-table td:nth-child(5){width:20%;}
.dashboard-dist-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;}
.dashboard-dist-item{padding:10px 0;border-bottom:var(--table-row-sep);}
.dashboard-dist-item:last-child{border-bottom:none;}
.dashboard-dist-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.dashboard-dist-label{min-width:0;word-break:break-word;font-weight:600;}
.dashboard-dist-count{flex:0 0 auto;font-weight:800;color:var(--brand);}
.dashboard-dist-link{display:inline-block;color:var(--brand);font-weight:800;text-decoration:none;border-bottom:1px solid transparent;}
.dashboard-dist-link:hover,.dashboard-dist-link:focus{border-bottom-color:currentColor;text-decoration:none;}
.dashboard-dist-progress{height:5px;margin-top:7px;}
.dashboard-data-check-card{min-width:0;}
.dashboard-data-check-body{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:2px 12px;padding-top:12px;padding-bottom:16px;}
.dashboard-data-check-count{grid-row:1 / span 2;font-size:36px;line-height:1;font-weight:800;color:var(--text);}
.dashboard-data-check-copy{font-size:13px;color:var(--muted);}
.dashboard-data-check-link{font-size:13px;font-weight:700;color:var(--brand);text-decoration:none;justify-self:start;border-bottom:1px solid transparent;}
.dashboard-data-check-link:hover,.dashboard-data-check-link:focus{border-bottom-color:currentColor;text-decoration:none;}
.page-dashboard .dashboard-latest-table tbody tr:not(.jump-highlight) > td{transition:background-color .12s ease;}
.page-dashboard .dashboard-latest-table tbody tr:nth-child(even):not(.jump-highlight) > td{background:rgba(17,17,17,.022);}
.page-dashboard .dashboard-latest-table tbody tr:hover:not(.jump-highlight) > td{background:color-mix(in srgb,var(--brand) 5%,transparent);}
@media (max-width: 1180px){
  .dashboard-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .dashboard-main-grid{grid-template-columns:1fr;}
  .dashboard-side-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}
}
@media (max-width: 760px){
  .dashboard-summary-grid{grid-template-columns:1fr;}
  .dashboard-summary-card{min-height:96px;}
  .dashboard-card-head{align-items:flex-start;flex-direction:column;}
  .dashboard-side-stack{grid-template-columns:1fr;}
}

/* Self-service password change: local visibility toggles.
   Keep the eye toggle inside the input's right edge, matching common SaaS password fields. */
.password-field{
  position:relative;
  display:block;
  max-width:100%;
}
.password-field__input{
  width:100%;
  padding-right:calc(var(--control-h) + 18px);
}
.cm-input-field{
  position:relative;
  display:block;
  max-width:100%;
}
.cm-input-field.is-password .field{
  padding-right:calc(var(--control-h) + 18px);
}
.cm-input-field:not(.is-password) .password-toggle{display:none;}
.password-toggle{
  position:absolute;
  top:0;
  right:0;
  transform:none;
  z-index:2;
  width:calc(var(--control-h) + 8px);
  min-width:calc(var(--control-h) + 8px);
  height:100%;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:0 10px 10px 0;
  background:transparent;
  color:#334155;
  cursor:pointer;
  touch-action:manipulation;
}
.password-toggle:hover{background:transparent;filter:none;}
.password-toggle:focus{outline:none;}
.password-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:-3px;}
.password-toggle__icon{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.password-toggle [data-js="password-toggle-text"]{pointer-events:none;}
.password-toggle__icon--hide{display:none;}
.password-toggle.is-visible .password-toggle__icon--show{display:none;}
.password-toggle.is-visible .password-toggle__icon--hide{display:block;}

/* 帳號管理操作紀錄入口 */
.users-page-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}
/* v59 report information hierarchy: grouped memory/storage headings.
   Group separation must never use a thick cell border: under collapsed table
   borders that can visually erase the table's outer vertical frame. */
.report-table .report-section-row th,
.report-memory-section-title{
  padding:10px 12px;
  color:var(--text);
  font-size:13px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:.01em;
  background:color-mix(in srgb,var(--focus) 6%,white 94%);
  text-align:left;
  border-top:0;
  border-left:0;
  border-right:0;
  border-bottom:1px solid color-mix(in srgb,var(--focus) 14%,var(--border) 86%);
}
/* v63 keeps the v61 typography exactly, but moves the visual group title out
   of the table so unequal row counts cannot redistribute height into HDD. */
.report-memory-section-title{
  box-sizing:border-box;
  min-height:37px;
  padding-top:9px;
  padding-bottom:9px;
  display:flex;
  align-items:center;
}
.report-table .report-section-row + tr[data-report-row] td{
  padding-top:12px;
}

/* Shared checkbox multiselect used by asset list filters. */
.field-multiselect {
  position: relative;
  width: 100%;
  min-width: 0;
}
.filter-grid .field-multiselect {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
.field-multiselect__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box;
  height: var(--control-h);
  padding: 0 13px 0 var(--control-pad-x);
  line-height: calc(var(--control-h) - 2px);
  border: 1px solid #bbb;
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  font-size: var(--control-font);
}
.field-multiselect__summary::-webkit-details-marker { display: none; }
.field-multiselect__summary::after {
  content: '';
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-left: 10px;
  background-image: url("icons/select-chevron-v10.svg?v=20260721v10");
  background-position: center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  transform: rotate(0deg);
  transform-origin: center;
}
.field-multiselect__summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.field-multiselect[open] .field-multiselect__summary::after { transform: rotate(180deg); }
.field-multiselect__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 280px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 9px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, .12);
  padding: 4px;
}
.field-multiselect__option,
.filter-panel .field-multiselect__option {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  margin: 0;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: var(--control-font);
  line-height: 1.35;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.field-multiselect__option span,
.filter-panel .field-multiselect__option span {
  font-size: inherit;
  line-height: inherit;
}
.field-multiselect__option input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  flex: 0 0 auto;
}
.field-multiselect__option:hover { background: #f8fafc; }
.field-multiselect__separator {
  padding: 7px 8px 3px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted, #6b7280);
}
.field-multiselect.is-disabled .field-multiselect__summary {
  cursor: not-allowed;
  background: #f8fafc;
  color: var(--muted, #6b7280);
}
.field-multiselect.is-disabled .field-multiselect__summary::after {
  opacity: .45;
}
.field-multiselect.is-disabled .field-multiselect__menu {
  display: none;
}

/* FILTER_INPUT_VALIDATION_CONTRACT_20260521
   Row-level validation layout:
   - normal filter rows remain compact (no reserved empty error height)
   - when any field in a visual row has an inline validation message, JS marks
     that visual row with .filter-validation-row-active so all peer controls in
     the same row reserve the same message slot height. */
.filter-grid .field-error[data-js="filter-input-error"]{
  display:none;
}
.filter-grid.filter-validation-active,
.filter-grid.filter-validation-error-slots{
  align-items:start !important;
}
.filter-grid .filter-validation-row-active .field-error[data-js="filter-input-error"],
.filter-grid .filter-validation-row-active .field-error[data-js="log-date-error"],
.filter-grid.filter-validation-error-slots .field-error[data-js="filter-input-error"],
.filter-grid.filter-validation-error-slots .field-error[data-js="log-date-error"]{
  display:block;
  min-height:17px;
  margin-top:6px;
  visibility:hidden;
}
.filter-grid .filter-validation-row-active .field-error[data-js="filter-input-error"]:not(:empty),
.filter-grid .filter-validation-row-active .field-error[data-js="log-date-error"]:not(:empty),
.filter-grid.filter-validation-error-slots .field-error[data-js="filter-input-error"]:not(:empty),
.filter-grid.filter-validation-error-slots .field-error[data-js="log-date-error"]:not(:empty){
  visibility:visible;
}
.filter-grid .filter-validation-row-active.filter-item:not(:has(.field-error[data-js="filter-input-error"], .field-error[data-js="log-date-error"]))::after,
.filter-grid.filter-validation-error-slots > .filter-item:not(:has(.field-error[data-js="filter-input-error"], .field-error[data-js="log-date-error"]))::after{
  content:"";
  display:block;
  min-height:17px;
  margin-top:6px;
  visibility:hidden;
}
.filter-grid .filter-actions.filter-validation-row-active,
.filter-grid .filter-area-hit.filter-validation-row-active{
  align-self:start !important;
  padding-top:calc(var(--field-label-lh) + 6px);
}
.filter-grid .filter-actions.filter-validation-row-active,
.filter-grid .filter-area-hit.filter-validation-row-active > .checkbox{
  min-height:var(--filter-min-h);
}
/* Contract stub: backend feature permission must remain plain, not a highlighted card. */
.userops-paired-cell.userops-sec.userops-sec--backend-feature{
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
  padding:10px 0;
}

/* User Ops spacing contract: permission helper notes are minimal.
   Empty helper text must not reserve an extra line under the section. */
#userops-help-role:empty,
#userops-help-manage-settings-perm:empty,
#userops-help-advanced-asset-perm:empty,
#userops-help-record-perm:empty{display:none;}

/* v16 User Ops: account-access modal uses full-width dividers and compact checkbox rhythm. */
.userops-sec--backend-feature{ grid-column:1; }
.userops-modal{ width:min(820px, calc(100vw - 48px)); }
.userops-access-form{ margin-top:8px; }
.userops-access-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "role role"
    "asset_edit advanced"
    "backend record_view"
    "network network";
  column-gap:16px;
  row-gap:0;
  align-items:start;
}
.userops-access-grid .userops-sec,
.userops-footer-grid .userops-sec{
  border-top:0;
  padding:0;
}
.userops-sec--full,
.userops-sec--role{
  grid-area:role;
  grid-column:1 / -1;
  border-bottom:1px solid var(--line);
  padding-bottom:6px !important;
}
.userops-sec--asset-edit{
  grid-area:asset_edit;
  grid-column:1;
  padding:8px 0 6px !important;
}
.userops-sec--backend-feature{
  grid-area:backend;
  grid-column:1;
  border-top:1px solid var(--line) !important;
  padding:8px 0 6px !important;
}
.userops-sec--advanced-asset{
  grid-area:advanced;
  grid-column:2;
  padding:8px 0 6px !important;
}
.userops-sec--record-view{
  grid-area:record_view;
  grid-column:2;
  border-top:1px solid var(--line) !important;
  padding:8px 0 6px !important;
}
.userops-sec--network-management{
  grid-area:network;
  grid-column:1 / -1;
  border-top:1px solid var(--line) !important;
  padding:8px 0 6px !important;
}
.userops-sec--network-management .userops-check-grid{ max-width:calc(50% - 8px); }
.userops-footer-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  column-gap:16px;
  row-gap:0;
  align-items:start;
  margin-top:0;
  border-top:1px solid var(--line);
  padding-top:8px;
}
.userops-check-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0 12px; }
.userops-sec--record-view .userops-check-grid{ width:100%; max-width:100%; }
.userops-check{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:22px;
  line-height:1.2;
  font-size:14px;
  color:var(--text);
}
.userops-check input[type="checkbox"]{ width:16px; height:16px; flex:0 0 auto; }
.userops-check input[type="checkbox"]:disabled + span{ color:var(--muted); }
/* v24 UserOps modal spacing contract: keep section title -> control -> note rhythm consistent. */
.userops-access-grid .userops-note{ margin-top:8px; line-height:1.4; }
.userops-access-grid .userops-sec-title{ margin-bottom:4px; min-height:20px; }
.userops-access-grid .userops-sec--role .userops-sec-title{ margin-bottom:8px; }
.userops-footer-grid .userops-sec-title{ margin-bottom:8px; min-height:20px; }
.userops-footer-grid .userops-note{ margin-top:8px; line-height:1.4; }
.userops-footer-grid.is-self-target{ grid-template-columns:minmax(0, 1fr); }
.userops-sec--self-boundary{ grid-column:1 / -1; padding:0 !important; }
.userops-self-boundary-card{
  border:1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius:12px;
  background:color-mix(in srgb, var(--muted) 4%, #fff);
  padding:14px 16px;
}
.userops-self-boundary-card__title{ font-weight:700; line-height:1.45; color:var(--text); }
.userops-self-boundary-card__text{ margin-top:4px; color:var(--muted); font-size:13px; line-height:1.65; }
.modal-actions #userops-account-access-update-btn,
.modal-actions [data-js="userops-cancel"]{ min-width:88px; justify-content:center; }
/* Account-list permission columns must remain table cells; badge stacking is handled by scoped badge rules above. */
@media (max-width:860px){
  .userops-access-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "role"
      "asset_edit"
      "advanced"
      "backend"
      "record_view"
      "network";
  }
  .userops-footer-grid{ grid-template-columns:1fr; }
  .userops-sec--asset-edit,
  .userops-sec--backend-feature,
  .userops-sec--advanced-asset,
  .userops-sec--record-view,
  .userops-sec--network-management,
  .userops-sec--full,
  .userops-sec--role{ grid-column:1; }
  .userops-check-grid{ grid-template-columns:1fr; }
  .userops-sec--record-view .userops-check-grid,
  .userops-sec--network-management .userops-check-grid{ width:100%; max-width:100%; }
}

/* users: deleted-account rows are read-only historical rows */
.page-users .users-table tbody tr.user-row.is-deleted{
  background:rgba(148,163,184,.08);
}
.page-users .users-table tbody tr.user-row.is-deleted td{
  color:#64748b;
}
.page-users .users-table tbody tr.user-row.is-deleted .user-username{
  color:#334155;
}
.page-users .users-table tbody tr.user-row.is-deleted .user-deleted-state{
  background:#f1f5f9;
  border-color:#cbd5e1;
  color:#64748b;
  cursor:default;
  pointer-events:none;
}
.page-users .users-table tbody tr.user-row.is-deleted .user-permission-summary .muted{
  color:#94a3b8;
}
.page-users .users-table .time-item--deleted .time-label,
.page-users .users-table .time-item--deleted .time-val{
  font-weight:500;
}

/*
2026-05-27 v25 compatibility markers for pre-v25 account-list permission-column guards.
Actual visible table uses the single 權限摘要 column and .user-permission-summary styles above.
.page-users .users-table{table-layout:fixed;min-width:1280px;}
Production visual acceptance: keep the last two columns independent
.page-users .users-table-col--time{width:16%;}
.page-users .users-table-col--actions{width:8%;}
.page-users .users-table th:nth-child(3),
.page-users .users-table td.user-device-perm{width:20%;}
.page-users .users-table th:nth-child(4),
.page-users .users-table td.user-backend-perm{width:17%;}
.page-users .users-table th:nth-child(5),
.page-users .users-table td.user-perm{width:17%;}
.page-users .users-table th:nth-child(6),
.page-users .users-table td.user-time{width:16%;}
.page-users .users-table th:nth-child(7),
.page-users .users-table td.user-actions{width:8%;}
.page-users .users-table .user-device-perm,
.page-users .users-table .user-backend-perm,
.page-users .users-table .user-perm{white-space:normal; display:table-cell;}
.page-users .users-table .user-device-perm .badge,
.page-users .users-table .user-backend-perm .badge,
.page-users .users-table .user-perm .badge{display:flex; width:max-content; max-width:100%; margin:0 0 6px 0;}
.page-users .users-table .user-perm-group + .user-perm-group{margin-top:10px;padding-top:2px;}
*/

/* v25 compact sticky long-list pagination footer contract
 * - Per-page controls live in the result heading/tool area.
 * - Count, page, jump, and navigation render once below the table.
 * - Long-list headers stay visible on desktop page scroll.
 */
.result-pagination-footer{
  position:sticky;
  bottom:0;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px 16px;
  flex-wrap:wrap;
  margin:0;
  padding:10px 16px 12px;
  border-top:1px solid var(--border);
  background:var(--surface,#fff);
  border-radius:0 0 10px 10px;
  box-shadow:0 -6px 14px rgba(15,23,42,.06);
  isolation:isolate;
}
.table-card .list-tools.result-pagination-footer,
.ip-usage-card .list-tools.result-pagination-footer{
  padding:10px 16px 12px;
}
.result-pagination-footer .spacer{display:none;}
.result-pagination-footer .results-pager__controls{
  margin-left:auto;
}
.result-pagination-footer .results-pager__chip{
  min-height:24px;
  padding:0 8px;
}
.result-pagination-footer .results-pager__jump .pager-input{
  width:72px;
  min-width:72px;
}
.result-pagination-footer .results-pager__nav .ui-btn,
.result-pagination-footer .results-pager__jump .ui-btn{
  min-width:64px;
  height:30px;
  padding:0 10px;
  font-size:12px;
}
.table-card .table-wrap--sticky-head{
  padding-bottom:0;
  overflow:visible;
}
/* Chrome treats overflow:hidden on the table itself as a sticky containing
 * block and lets the header scroll away. Keep rounded-edge clipping without
 * creating that scrolling ancestor for the five shared long-list tables. */
.long-list-table{
  overflow:clip;
}
.long-list-table thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:var(--surface,#fff);
  box-shadow:0 1px 0 var(--line);
}
.ip-usage-table-scroll{
  overflow:visible;
  padding-bottom:0;
}
.ip-usage-card-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px 14px;
  flex:0 0 auto;
  flex-wrap:wrap;
}
.ip-usage-card-actions .pagination-per-page-form{
  flex:0 0 auto;
}
.head-tools .pagination-per-page-form{
  margin-left:4px;
}
.result-header-count{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  white-space:nowrap;
}
.head-tools .result-header-count{
  margin-right:2px;
}
@media (max-width:900px){
  .table-card .table-wrap--sticky-head,
  .ip-usage-table-scroll{
    overflow-x:auto;
    overflow-y:visible;
  }
  .result-pagination-footer{
    align-items:flex-start;
    bottom:0;
    padding-bottom:max(12px, env(safe-area-inset-bottom));
  }
  .result-pagination-footer .results-pager__controls{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
  }
  .ip-usage-card-title-row{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .ip-usage-card-actions{
    width:100%;
    justify-content:space-between;
    align-items:center;
  }
}

/* v26 long-list right-edge alignment contract
 * Result-header tools and the final sticky-footer control share one desktop
 * right baseline. The padded IP card lets its footer bleed to the card edge,
 * while pad0 table cards use the same 18px inner inset as their headers.
 */
:where(.table-card,.ip-usage-card){
  --long-list-inline-edge:18px;
}
.result-pagination-footer{
  padding-inline:var(--long-list-inline-edge,18px);
}
.table-card .list-tools.result-pagination-footer,
.ip-usage-card .list-tools.result-pagination-footer{
  padding-inline:var(--long-list-inline-edge,18px);
}
.ip-usage-card > .result-pagination-footer{
  margin-inline:calc(-1 * var(--long-list-inline-edge,18px));
  margin-bottom:calc(-1 * var(--long-list-inline-edge,18px));
}
[data-result-header-tools]{
  justify-content:flex-end;
}
[data-pagination-end-anchor]{
  margin-left:auto;
  justify-content:flex-end;
}
@media (max-width:900px){
  .ip-usage-card > .result-pagination-footer{
    margin-inline:calc(-1 * var(--long-list-inline-edge,18px));
  }
  [data-pagination-end-anchor]{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
  }
}

/* v27 shared long-list skeleton contract
 * The five long-list templates use the same filter/result shell helpers.
 * Page-specific controls remain in their slots; ownership, spacing, and
 * responsive behavior are shared here.
 */
.long-list-filter-head,
.long-list-result-head{
  box-sizing:border-box;
}
.long-list-filter-body,
.long-list-result-body{
  min-width:0;
}
.long-list-result-head__row{
  align-items:center;
}
.long-list-result-head__copy{
  min-width:0;
  flex:1 1 auto;
}
.long-list-result-head__tools{
  flex:0 1 auto;
  min-width:0;
  margin-left:auto;
  justify-content:flex-end;
}
.long-list-result-head__description{
  margin-top:2px;
  line-height:1.55;
}
[data-long-list-result-footer]{
  box-sizing:border-box;
}
@media (max-width:900px){
  .long-list-result-head__row{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .long-list-result-head__tools{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
  }
}

/* ---------- Asset restore network conflict modal (2026-07-27 v29) ---------- */
body.modal-open{overflow:hidden;}
.restore-conflict-inline-alert{color:#9a3412;font-weight:600;}
.restore-conflict-modal{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;}
.restore-conflict-modal form{display:flex;min-height:0;flex:1;flex-direction:column;}
.restore-conflict-modal__body{min-height:0;overflow:auto;padding-right:4px;}
.restore-conflict-summary{margin:0 0 14px;line-height:1.7;}
.restore-conflict-list{display:grid;gap:12px;}
.restore-conflict-item{min-width:0;margin:0;padding:14px;border:1px solid #f0b4b4;border-radius:12px;background:#fffafa;}
.restore-conflict-item legend{padding:0 6px;font-weight:800;color:#991b1b;}
.restore-conflict-facts-title{margin:0 0 6px;color:var(--muted);font-size:13px;font-weight:700;line-height:1.5;}
.restore-conflict-facts{display:grid;gap:6px;margin:0 0 12px;}
.restore-conflict-facts > div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;align-items:start;}
.restore-conflict-facts dt{color:var(--muted);}
.restore-conflict-facts dd{min-width:0;margin:0;overflow-wrap:anywhere;}
.restore-conflict-fact-list{display:flex;flex-wrap:wrap;gap:5px 14px;}
.restore-conflict-fact-item{display:inline-flex;min-width:0;align-items:baseline;gap:8px;}
.restore-conflict-identifier{font-family:inherit;font-size:14px;font-weight:700;line-height:1.5;letter-spacing:.01em;}
.restore-conflict-facts code.restore-conflict-identifier{padding:0;background:transparent;color:inherit;}
.restore-conflict-view-link{display:inline-block;color:#475569;font-size:13px;font-weight:500;line-height:1.5;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;white-space:nowrap;}
.restore-conflict-view-link:hover{color:#1d4ed8;}
.restore-conflict-submit-error{margin:0 0 12px;line-height:1.6;}
.restore-conflict-field-error{line-height:1.6;}
.restore-conflict-error-value{padding:0;background:transparent;color:inherit;font-family:inherit;font-size:inherit;font-weight:800;}
.restore-conflict-error-use{font-weight:700;}
.restore-conflict-error-actions{display:inline-flex;flex-wrap:wrap;gap:4px 10px;margin-left:8px;}
.restore-conflict-field-error .restore-conflict-view-link{color:inherit;font-size:inherit;font-weight:600;}
.restore-conflict-option{display:flex;align-items:flex-start;gap:9px;margin:10px 0 7px;cursor:pointer;}
.restore-conflict-option input{margin-top:4px;flex:0 0 auto;}
.restore-conflict-option span{display:block;min-width:0;}
.restore-conflict-option .small{margin-top:2px;line-height:1.5;}
.restore-conflict-value{width:100%;margin:0 0 2px;}
.restore-conflict-value:disabled{background:#f3f4f6;color:#9ca3af;cursor:not-allowed;}
.restore-conflict-reason-block{margin-top:16px;}
.restore-conflict-reason-block label{display:block;margin-bottom:6px;font-weight:700;}
.restore-conflict-reason-block textarea{width:100%;resize:vertical;}
.restore-conflict-warning{margin:14px 0 0;line-height:1.65;}
.restore-conflict-modal__actions{flex:0 0 auto;padding-top:12px;border-top:1px solid var(--line);}
.field-error[hidden]{display:none!important;}
@media (max-width:640px){
  .restore-conflict-modal{width:min(100%,calc(100vw - 20px));max-height:calc(100vh - 20px);padding:14px;}
  .restore-conflict-facts > div{grid-template-columns:1fr;gap:2px;}
  .restore-conflict-modal__actions{flex-wrap:wrap;}
  .restore-conflict-modal__actions .ui-btn{flex:1 1 140px;}
}

/* v48 authenticated session lifecycle reminders */
.session-warning-copy{margin:0;line-height:1.65;}
.session-warning-note{margin:8px 0 0;}
.session-countdown{
  display:inline-block;
  min-width:5ch;
  text-align:center;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* 2026-07-30 v57 full-site responsive hardening
 * Scope: shared page shell, fixed-width controls, dictionary rows, long-list
 * containment, and viewport-bounded modals. Functional/data contracts remain
 * unchanged; this block only constrains layout at wide/narrow breakpoints.
 */
:where(.page-wrap,.wrap,.container,.card,.card-body,.grid,.grid-2,.filter-grid,.long-list-filter-body,.long-list-result-body){
  min-width:0;
}
:where(img,svg,canvas,video){max-width:100%;}

/* Tall dialogs must never be vertically clipped by a fixed backdrop. The body
 * becomes the scroll owner while title/actions remain reachable. */
.modal-backdrop{
  overflow:auto;
  overscroll-behavior:contain;
}
.modal{
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.modal-title,
.modal-title-row{min-width:0;}
.modal-title{overflow-wrap:anywhere;}
.modal-body{
  min-height:0;
  overflow:auto;
}
.modal-actions{
  flex:0 0 auto;
  flex-wrap:wrap;
}

/* Dictionary/list item names may contain imported or historical values without
 * natural spaces. Keep those values inside their content rail. */
.page-system_os .system-os-pick,
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick,
.page-system_os .system-os-pick .title,
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick .title{
  min-width:0;
}
.page-system_os .system-os-pick .title,
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick .title{
  flex-wrap:wrap;
}
.page-system_os .system-os-pick .name,
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick .name{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Tablet widths are wide enough for page use but not always for dense tables.
 * Keep any intrinsic table width inside the table scroller instead of turning
 * the whole document into a horizontal scrolling surface. */
@media (max-width:1180px){
  .table-card .table-wrap--sticky-head,
  .ip-usage-table-scroll{
    overflow-x:auto;
    overflow-y:visible;
    max-width:100%;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width:760px){
  :root{
    --page-pad-x:14px;
    --container-pad-x:14px;
    --container-pad-y:16px;
  }
  body{margin:0;}

  /* Header title and function navigation become two explicit rows before the
   * flex items can overlap. This covers long Traditional-Chinese page titles,
   * badges, and the full authenticated navigation set. */
  .topbar{
    min-height:0;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin-bottom:12px;
    padding-top:12px;
    padding-bottom:8px;
  }
  .topbar .left,
  .topbar .right{
    width:100%;
    min-width:0;
    align-items:stretch;
  }
  .topbar .title-row{
    min-width:0;
    min-height:0;
    flex-wrap:wrap;
    align-items:center;
  }
  .topbar h1,
  .topbar .title-row h1{
    min-width:0;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    font-size:clamp(26px,7.6vw,34px);
    line-height:1.3;
  }
  .topbar .title-badges{
    min-width:0;
    flex-wrap:wrap;
  }
  .topbar .nav{
    width:100%;
    min-width:0;
    justify-content:flex-start;
    align-items:center;
  }
  .topbar .nav .account-menu{margin-left:0;}

  .subbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .subbar .left,
  .subbar .right{
    width:100%;
    min-width:0;
    justify-content:flex-start;
  }

  .auth-shell,
  body.page-login .login-shell{
    padding-inline:14px;
  }

  /* Long operation details should shrink with the card instead of enforcing a
   * desktop minimum width on phones or split-screen tablet panes. */
  .users-log-detail-body{
    width:min(100%,560px);
    min-width:0;
    max-width:100%;
  }
}

@media (max-width:640px){
  .card .card-head,
  .card-head-row{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .card .card-head .head-tools,
  .card-head-row .head-tools{
    width:100%;
    min-width:0;
    justify-content:flex-start;
  }

  .field-inline{
    align-items:stretch;
    flex-wrap:wrap;
  }
  .field-inline > *{flex:1 1 100%;min-width:0;}
  .card .field-fixed,
  .inline-row > .field-fixed,
  .field-inline > .field-fixed{
    width:100% !important;
    min-width:0;
    max-width:100%;
    flex-basis:100%;
  }

  .page-system_os .card-head-row,
  :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .card-head-row{
    align-items:flex-start;
  }

  .modal-backdrop{padding:10px;}
  .modal,
  .modal.modal-lg,
  .userops-modal{
    width:100%;
    max-height:calc(100vh - 20px);
    max-height:calc(100dvh - 20px);
  }
  .modal-title-row{align-items:flex-start;}
  .modal-actions .ui-btn{
    flex:1 1 120px;
    justify-content:center;
  }
}
.long-list-table th,
.long-list-table td{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* v70 iPadOS date containment and long-list sticky fallback. */
.date-field-shell{
  position:relative;
  width:100%;
  max-width:100%;
  min-width:0;
  height:var(--control-h);
  overflow:hidden;
  box-sizing:border-box;
  border:1px solid #bbb;
  border-radius:9px;
  background:#fff;
}
.date-field-shell.input-error{border-color:var(--danger,#b42318);}
.date-field-shell > input.field[type="date"]{
  position:absolute;
  inset:0;
  display:block;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:100%;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
  -webkit-appearance:none;
  appearance:none;
}
.date-field-shell > input.field[type="date"]:focus{
  outline:0;
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--primary) 72%, transparent);
}
.date-field-shell:has(> input.field[type="date"]:disabled){background:#f5f5f5;}

@media (min-width:640px) and (max-width:1199px){
  .filter-grid--audit,
  .filter-grid--system-logs,
  .filter-grid--users-logs{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .filter-grid--audit{
    grid-template-areas:
      "date action"
      "start start"
      "end end"
      "asset id"
      "keyword keyword"
      "hit actions";
  }
  .filter-grid--system-logs{
    grid-template-areas:
      "date action"
      "start start"
      "end end"
      "settingscope settingitem"
      "keyword keyword"
      "hit actions";
  }
  .filter-grid--users-logs{
    grid-template-areas:
      "date action"
      "start start"
      "end end"
      "keyword keyword"
      "hit actions";
  }
}

.long-list-sticky-proxy{
  position:fixed;
  top:0;
  z-index:1000;
  overflow:hidden;
  pointer-events:none;
  background:var(--surface,#fff);
  box-shadow:0 2px 8px rgba(15,23,42,.15);
}
.long-list-sticky-proxy[hidden]{display:none !important;}
.long-list-sticky-proxy__table{
  margin:0;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  transform-origin:left top;
}
.long-list-sticky-proxy__table thead th{
  position:static !important;
  background:var(--surface,#fff);
}


/* 2026-07-31 v78 phone long-list card mode and support-tier contract.
 * Full table/sticky behavior remains for tablet and desktop. Handheld portrait
 * widths and coarse-pointer short landscape viewports use the same server data
 * and pagination rendered as labeled cards, without sticky table chrome. */
.mobile-long-list-note{display:none;}

@media (max-width:639px), (max-height:520px) and (pointer:coarse){
  .mobile-long-list-note{
    display:block;
    margin:12px 12px 0;
    padding:10px 12px;
    border:1px solid color-mix(in srgb,var(--focus) 22%,var(--border) 78%);
    border-radius:10px;
    background:color-mix(in srgb,var(--focus) 5%,white 95%);
    color:var(--muted);
    font-size:12px;
    line-height:1.6;
  }

  [data-long-list-result-body]{
    overflow:visible !important;
    max-width:100%;
    padding:12px;
  }
  [data-long-list-result-body] > .mobile-long-list-note:first-child{
    margin:0 0 12px;
  }
  .table-card .table-wrap--sticky-head,
  .ip-usage-table-scroll{
    overflow:visible !important;
    -webkit-overflow-scrolling:auto;
  }

  .long-list-table{
    display:block;
    width:100%;
    min-width:0 !important;
    max-width:100%;
    margin:0;
    border:0;
    border-radius:0;
    background:transparent;
    overflow:visible;
    table-layout:auto;
  }
  .long-list-table colgroup{display:none;}
  .long-list-table thead{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }
  .long-list-table thead th{
    position:static !important;
  }
  .long-list-table tbody{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    width:100%;
  }
  .long-list-table tbody > tr{
    display:block;
    min-width:0;
    width:100%;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface,#fff);
    overflow:hidden;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
  }
  .long-list-table tbody > tr > td{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    padding:10px 12px 12px;
    border:0;
    border-bottom:var(--table-row-sep);
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
    box-sizing:border-box;
  }
  .long-list-table tbody > tr > td:last-child{border-bottom:0;}
  .long-list-table tbody > tr > td[data-label]::before{
    content:attr(data-label);
    display:block;
    margin:0 0 5px;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    line-height:1.35;
    letter-spacing:.02em;
  }
  .long-list-table tbody > tr > td.mobile-card-empty{
    display:block;
    padding:16px 14px;
    border-bottom:0;
  }
  .long-list-table tbody > tr > td.mobile-card-empty::before{display:none;}
  .long-list-table tbody > tr.mobile-card-empty-row{box-shadow:none;}
  .long-list-table .nowrap{white-space:normal;}
  .long-list-table .audit-details,
  .long-list-table .users-log-summary-cell{font-size:13px;}
  .long-list-table .audit-details details,
  .long-list-table .users-log-detail{max-width:100%;}
  .asset-list tbody > tr[class*="asset-row-status"]{border-left-width:4px;}

  .long-list-sticky-proxy{display:none !important;}
  .result-pagination-footer,
  .result-pagination-footer[data-ipados-chrome-portrait-sticky]{
    position:static !important;
    inset:auto !important;
    bottom:auto !important;
    top:auto !important;
    transform:none !important;
    z-index:auto !important;
    will-change:auto !important;
    margin:0;
    padding:12px;
    box-shadow:none;
  }
  .result-pagination-footer .results-pager__meta{
    width:100%;
    flex-wrap:wrap;
  }
  .result-pagination-footer .results-pager__controls{
    width:100%;
    margin:0;
    align-items:stretch;
    flex-direction:column;
    gap:10px;
  }
  .result-pagination-footer .results-pager__jump{display:none;}
  .result-pagination-footer .results-pager__nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:100%;
  }
  .result-pagination-footer .results-pager__nav .ui-btn{
    width:100%;
    min-width:0;
    height:36px;
    justify-content:center;
  }
}

/* v104-v107 fixed four-slot network information visual convergence; v112 form rows now follow the same label-over-controls pattern as hardware fields. */
.page-asset_form #card-net{align-self:start;}
.page-asset_form .network-slot-table{
  display:grid;
  gap:var(--field-row-gap);
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text);
  font-family:inherit;
}
.page-asset_form .network-slot-block{display:grid;min-width:0;}
.page-asset_form .network-slot-name{
  display:block;
  margin:0 0 var(--field-label-mb);
  padding:0;
  color:var(--muted);
  font-family:inherit;
  font-size:.92rem;
  font-weight:400;
  line-height:var(--field-label-lh);
  white-space:nowrap;
}
.page-asset_form .network-slot-row,
.page-asset_form .network-slot-group-error-host{
  display:grid;
  grid-template-columns:128px minmax(0,1fr) minmax(0,1fr);
  gap:12px;
}
.page-asset_form .network-slot-row{align-items:start;}
.page-asset_form .network-slot-control{display:grid;gap:4px;min-width:0;}
.page-asset_form .network-slot-control .field{width:100%;min-width:0;font-family:inherit;font-size:var(--control-font);}
.page-asset_form .network-slot-control .field-error{margin:0;}
.page-asset_form .network-slot-group-error-host{row-gap:2px;min-width:0;margin-top:4px;}
.page-asset_form .network-slot-group-error-host:empty{display:none;}
.page-asset_form .network-slot-group-error-host .field-error{grid-column:1 / 4;margin:0;min-width:0;}
@media (max-width:900px){
  .page-asset_form .network-slot-row{grid-template-columns:1fr;gap:8px;}
  .page-asset_form .network-slot-group-error-host{display:block;}
  .page-asset_form .network-slot-group-error-host:empty{display:none;}
  .page-asset_form .network-slot-group-error-host .field-error{margin:0;}
}

/* v111: restore equal-height pairing for the network and notes cards only while
 * the asset form is in its two-column desktop Grid. The shared .grid contract
 * intentionally keeps align-items:start for other card pairs, so this must stay
 * a targeted align-self override rather than a fixed pixel height.
 */
@media (min-width:961px){
  .page-asset_form #card-net{align-self:stretch;}
}
/* v112: the network card now uses label-over-controls rows and can become the
 * taller peer. Stretch the notes/system card too so whichever card owns the Grid
 * row height, both outer card boundaries remain equal without fixed heights.
 */
@media (min-width:961px){
  .page-asset_form #card-notes{align-self:stretch;}
}
/* v139: asset-detail network rows use the same compact visual grammar as the
 * equipment-list network summary without stretching IP/MAC across the card.
 * Desktop/tablet keep fixed aligned tracks; narrow phones switch to stacked
 * labeled values so the fixed MAC width never creates horizontal overflow. */
.page-asset_view .asset-network-detail-value{
  display:grid;
  grid-template-columns:4em 13.5ch 1em 17ch;
  column-gap:3px;
  align-items:center;
  justify-content:start;
  max-width:100%;
  white-space:nowrap;
}
.page-asset_view .asset-network-detail-value--empty{display:flex;}
/* v145: asset-workflow IP/MAC values use the common UI typeface.
 * Monospace is reserved for IP Usage, where scanning/comparing address columns is the primary task. */
.page-asset_view .asset-network-detail-type,
.page-asset_view .asset-network-detail-ip,
.page-asset_view .asset-network-detail-mac{min-width:0;white-space:nowrap;font-family:inherit;}
.page-asset_view .asset-network-detail-separator{color:var(--muted);text-align:center;}
@media (max-width:720px){
  .page-asset_view .asset-network-detail-value:not(.asset-network-detail-value--empty){
    grid-template-columns:1fr;
    gap:4px;
    white-space:normal;
  }
  .page-asset_view .asset-network-detail-separator{display:none;}
  .page-asset_view .asset-network-detail-ip::before{content:"IP：";}
  .page-asset_view .asset-network-detail-mac::before{content:"MAC：";}
}
.page-index .asset-network-list-cell{row-gap:var(--asset-cell-row-gap);}
.page-index .asset-network-list-cell .networkline{
  display:grid;
  grid-template-columns:3.5em 13.5ch 1em 17ch;
  align-items:center;
  column-gap:3px;
  min-width:0;
  max-width:100%;
  white-space:nowrap;
}
/* v110: network type is ordinary row data, not a heading or badge.
 * Inherit the equipment-list text weight while keeping the v107-v109 Grid intact.
 */
.page-index .asset-network-list-cell .network-summary-type{
  min-width:0;
  font-weight:inherit;
  white-space:nowrap;
}
.page-index .asset-network-list-cell .network-summary-ip,
.page-index .asset-network-list-cell .network-summary-mac{
  min-width:0;
  white-space:nowrap;
  font-family:inherit;
}
.page-index .asset-network-list-cell .network-summary-separator{
  color:var(--muted);
  text-align:center;
}
/* v162: keep the equipment-list network summary compact throughout the 640px+
 * table tier. The previous 721-1199 fr tracks stretched IP/MAC spacing with the
 * available cell width; current fixed tracks keep separator/MAC alignment stable. */
@media (max-width:639px){
  .page-index .asset-network-list-cell .networkline{
    grid-template-columns:3.5em minmax(8ch,13.5ch) 1em minmax(12ch,17ch);
    align-items:center;
  }
}

/* v108: enforce the network summary Grid on the real equipment-list shell.
 * The actual list renders with body.page-asset_list and table.asset-list.
 * Specificity must stay above the shared asset-line display:block rule so
 * production computed style is truly display:grid.
 */
.page-asset_list table.asset-list td.cell-ip .asset-network-list-cell{row-gap:var(--asset-cell-row-gap);}
.page-asset_list table.asset-list td.cell-ip .asset-network-list-cell .networkline{
  display:grid;
  grid-template-columns:3.5em 13.5ch 1em 17ch;
  align-items:center;
  column-gap:3px;
  min-width:0;
  max-width:100%;
  white-space:nowrap;
}
.page-asset_list table.asset-list td.cell-ip .asset-network-list-cell .network-summary-type{
  min-width:0;
  font-weight:inherit;
  white-space:nowrap;
}
.page-asset_list table.asset-list td.cell-ip .asset-network-list-cell .network-summary-ip,
.page-asset_list table.asset-list td.cell-ip .asset-network-list-cell .network-summary-mac{
  min-width:0;
  white-space:nowrap;
  font-family:inherit;
}
.page-asset_list table.asset-list td.cell-ip .asset-network-list-cell .network-summary-separator{
  color:var(--muted);
  text-align:center;
}
@media (max-width:639px){
  .page-asset_list table.asset-list td.cell-ip .asset-network-list-cell .networkline{
    grid-template-columns:3.5em minmax(8ch,13.5ch) 1em minmax(12ch,17ch);
    align-items:center;
  }
}

/* 2026-08-14 v142 equipment-list medium-width horizontal-scroll affordance.
 * v141 already gives the table an intrinsic readable width; this final cascade
 * layer makes the result scroller itself visibly operable in Firefox/Windows
 * split-window use instead of leaving the off-screen columns undiscoverable.
 * Phone card mode (<=639px) remains owned by the earlier !important override. */
@media (min-width:640px) and (max-width:1359px){
  .page-asset_list [data-long-list-result-body].table-wrap--sticky-head,
  .page-index [data-long-list-result-body].table-wrap--sticky-head{
    overflow-x:scroll !important;
    overflow-y:visible !important;
    max-width:100%;
    padding-bottom:12px;
    scrollbar-width:auto;
    scrollbar-color:#94a3b8 #eef2f7;
    scrollbar-gutter:stable;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .page-asset_list [data-long-list-result-body].table-wrap--sticky-head::-webkit-scrollbar,
  .page-index [data-long-list-result-body].table-wrap--sticky-head::-webkit-scrollbar{
    height:12px;
  }
  .page-asset_list [data-long-list-result-body].table-wrap--sticky-head::-webkit-scrollbar-track,
  .page-index [data-long-list-result-body].table-wrap--sticky-head::-webkit-scrollbar-track{
    background:#eef2f7;
    border-radius:999px;
  }
  .page-asset_list [data-long-list-result-body].table-wrap--sticky-head::-webkit-scrollbar-thumb,
  .page-index [data-long-list-result-body].table-wrap--sticky-head::-webkit-scrollbar-thumb{
    background:#94a3b8;
    border:2px solid #eef2f7;
    border-radius:999px;
  }
}

/* 2026-08-14 v143 equipment-list medium-width completion.
 * Preserve the 640px+ table tier while reserving enough intrinsic width for
 * complete updated timestamp / actor text. A viewport-floating horizontal
 * rail is owned by app_long_list_sticky.js so users can pan the result table
 * while reading its middle rows instead of travelling to the table bottom. */
@media (min-width:640px) and (max-width:1679px){
  .page-asset_list table.asset-list col.col-asset,
  .page-index table.asset-list col.col-asset{width:11%;}
  .page-asset_list table.asset-list col.col-owner,
  .page-index table.asset-list col.col-owner{width:11%;}
  .page-asset_list table.asset-list col.col-brand,
  .page-index table.asset-list col.col-brand{width:14%;}
  .page-asset_list table.asset-list col.col-hw,
  .page-index table.asset-list col.col-hw{width:13%;}
  .page-asset_list table.asset-list col.col-disk,
  .page-index table.asset-list col.col-disk{width:8%;}
  .page-asset_list table.asset-list col.col-ip,
  .page-index table.asset-list col.col-ip{width:27%;}
  .page-asset_list table.asset-list col.col-updated,
  .page-index table.asset-list col.col-updated{width:16%;}
}
@media (min-width:640px){
  .page-asset_list table.asset-list.long-list-table,
  .page-index table.asset-list.long-list-table{min-width:1300px;}
  .page-asset_list table.asset-list td.cell-updated .asset-line,
  .page-index table.asset-list td.cell-updated .asset-line{
    overflow:visible;
    text-overflow:clip;
  }
  .page-asset_list table.asset-list td.cell-updated .updated-ts,
  .page-index table.asset-list td.cell-updated .updated-ts{
    white-space:nowrap;
  }
  .page-asset_list table.asset-list td.cell-updated .updated-user,
  .page-index table.asset-list td.cell-updated .updated-user{
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

.long-list-horizontal-scroll-proxy{
  position:fixed;
  z-index:1002;
  height:18px;
  overflow-x:scroll;
  overflow-y:hidden;
  pointer-events:auto;
  background:var(--surface,#fff);
  border:1px solid var(--border,#d7dce3);
  border-radius:7px 7px 0 0;
  box-shadow:0 -2px 8px rgba(15,23,42,.12);
  scrollbar-width:auto;
  scrollbar-color:#64748b #e9eef5;
  scrollbar-gutter:stable;
  overscroll-behavior-inline:contain;
}
.long-list-horizontal-scroll-proxy[hidden]{display:none !important;}
.long-list-horizontal-scroll-proxy__track{height:1px;pointer-events:none;}
.long-list-horizontal-scroll-proxy::-webkit-scrollbar{height:12px;}
.long-list-horizontal-scroll-proxy::-webkit-scrollbar-track{background:#e9eef5;border-radius:999px;}
.long-list-horizontal-scroll-proxy::-webkit-scrollbar-thumb{background:#64748b;border:2px solid #e9eef5;border-radius:999px;}
@media (max-width:639px), (max-height:520px) and (pointer:coarse){
  .long-list-horizontal-scroll-proxy{display:none !important;}
}

/* ============================================================
   2026-08-28 v171 AssetMax UI Foundation / Shared Shell
   Presentation-only convergence. Route/query/filter/permission/DOM interaction
   semantics remain owned by their existing contracts.
   ============================================================ */

/* Give authenticated navigation its own product-shell grammar instead of making
   every route look like a form action. Existing classes/active keys stay intact. */
.topbar .left{flex-direction:column;align-items:flex-start;gap:2px;}
.topbar .nav > .ui-btn,
.topbar .nav > .topbar-menu > .topbar-menu__trigger{
  background:transparent;
  border-color:transparent;
  color:#475467;
  box-shadow:none;
}
.topbar .nav > .ui-btn:hover,
.topbar .nav > .topbar-menu > .topbar-menu__trigger:hover{
  background:var(--surface-muted);
  border-color:var(--surface-muted);
  color:var(--text-strong);
}
.topbar .nav > .ui-btn.ui-btn--primary,
.topbar .nav > .topbar-menu > .topbar-menu__trigger.ui-btn--primary{
  background:var(--primary-soft);
  border-color:var(--primary-soft-border);
  color:var(--brand);
}
.topbar .nav .account-menu{
  padding-left:10px;
  border-left:1px solid var(--border);
}
.topbar .nav .account-menu__trigger{
  background:var(--surface) !important;
  border-color:var(--border) !important;
  color:#344054 !important;
}
.topbar .nav .account-menu__trigger:hover{
  background:var(--surface-muted) !important;
  border-color:var(--border-strong) !important;
}

/* Page title is the primary page-context label; AssetMax remains a smaller,
   persistent product identity above it. */
.topbar .title-row h1{
  font-size:30px;
  font-weight:800;
  letter-spacing:.005em;
  color:var(--text-strong);
}

/* Shared surfaces: subtle depth, no heavy SaaS shadow treatment. */
.card{
  border-color:var(--border);
  box-shadow:var(--shadow-card);
}
.card .card-head,
.card-head-row{color:var(--text-strong);}
.filter-panel{background:var(--surface);}
.table-card .table-wrap{border-top-color:var(--border);}

/* Form controls get a restrained product-grade focus/hover language while
   retaining the existing 40px geometry and native/select contracts. */
input.field:hover,
select.field:hover,
textarea.field:hover{border-color:#aebdcd;}
input.field:focus,
select.field:focus,
textarea.field:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 13%,transparent);
}

/* Result/table headers are a true secondary surface instead of near-white text
   floating in the same plane as the rows. */
.table thead th,
table thead th{background:var(--surface-muted);color:#344054;}

/* Shared feedback surfaces use the same border/surface vocabulary. */
.flash{background:var(--surface);border-color:var(--border);box-shadow:0 1px 2px rgba(16,24,40,.03);}
.help-box{border-color:var(--border);background:var(--surface-muted);}
.subcard{border-color:var(--border);background:var(--surface-muted);}

@media (max-width:760px){
  .topbar .left{gap:1px;}
  .topbar .product-brand{font-size:12px;line-height:16px;min-height:16px;}
  .topbar h1,
  .topbar .title-row h1{
    font-size:clamp(26px,7.6vw,34px);
  }
  .topbar .nav .account-menu{
    margin-left:0;
    padding-left:0;
    border-left:0;
  }
}


/* ============================================================
   2026-08-28 v172 Equipment List / Filter / Table Visual Refinement
   Page-scoped presentation only. Existing query/filter/sort/pagination and
   responsive ownership remain unchanged.
   ============================================================ */
.page-asset_list [data-long-list-filter-card="asset-list"] .long-list-filter-head{
  padding-bottom:12px;
  margin-bottom:2px;
  border-bottom:1px solid var(--border);
}
.page-asset_list .filter-panel label{
  color:#344054;
  font-weight:600;
}
.page-asset_list .filter-panel .filter-area-advanced-toggle{
  padding-top:2px;
}
.page-asset_list .filter-panel .advanced-filter-toggle-title{
  font-size:13px;
  line-height:1.4;
  font-weight:700;
  color:#475467;
}
.page-asset_list .filter-panel .advanced-filter-panel{
  padding:14px 16px 15px;
  border:1px solid var(--border);
  border-radius:10px;
  background:color-mix(in srgb,var(--surface-muted) 82%,#fff 18%);
}
.page-asset_list .filter-panel .filter-actions .ui-btn--primary{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.page-asset_list .filter-panel .filter-actions .ui-btn--primary:hover{
  background:#17358f;
  border-color:#17358f;
  color:#fff;
}
.page-asset_list .index-filter-summary{
  border-color:var(--border);
  background:color-mix(in srgb,var(--surface-muted) 70%,#fff 30%);
}
.page-asset_list .index-filter-summary:has(.index-filter-summary__items){
  border-left:3px solid var(--brand);
  background:var(--primary-soft);
}
.page-asset_list .list-result-toolbar__group{
  border-color:var(--border);
  background:var(--surface-muted);
  box-shadow:0 1px 1px rgba(16,24,40,.025);
}
.page-asset_list .list-result-toolbar__group .inline-choice__label{
  color:#667085;
  font-weight:700;
}
.page-asset_list table.asset-list thead th{
  background:#f1f5f9;
  color:#344054;
  border-bottom-color:#cfd9e6;
  font-weight:700;
}
.page-asset_list table.asset-list tbody td{
  padding-top:9px;
  padding-bottom:9px;
  border-bottom-color:#e7edf4;
}
.page-asset_list table.asset-list tbody tr:nth-child(even):not(.jump-highlight) > td{
  background:color-mix(in srgb,var(--surface-muted) 42%,#fff 58%);
}
.page-asset_list table.asset-list tbody tr:hover:not(.jump-highlight) > td{
  background:#eef4ff;
}
.page-asset_list table.asset-list td.cell-updated .updated-user{
  color:#667085;
  font-size:12px;
  line-height:1.45;
}
.page-asset_list .result-pagination-footer{
  border-top:1px solid var(--border-strong);
  background:var(--surface-muted);
  box-shadow:0 -5px 14px rgba(16,24,40,.045);
}
.page-asset_list .result-pagination-footer .results-pager__chip--primary{
  background:var(--primary-soft);
  border-color:var(--primary-soft-border);
  color:var(--brand);
}
@media (max-width:639px){
  .page-asset_list .filter-panel .filter-actions{
    display:flex;
    gap:8px;
  }
  .page-asset_list .filter-panel .filter-actions .ui-btn{
    flex:1 1 0;
    min-width:0;
  }
}


/* ============================================================
   2026-08-28 v173 Asset Detail / Form Visual Refinement
   Page-scoped presentation only. Existing field order, validation, network/disk
   geometry, preview/save, permissions and audit semantics remain unchanged.
   ============================================================ */

/* Asset workflow cards now read as product sections instead of undifferentiated
   white boxes. The divider is presentation-only and does not alter DOM order. */
.page-asset_view [data-asset-detail-section] > .card-head,
.page-asset_form > .card > .card-head{
  padding-bottom:10px;
  margin-bottom:14px;
  border-bottom:1px solid var(--border);
}
.page-asset_view [data-asset-detail-section] > .card-head h3,
.page-asset_form > .card > .card-head h3{
  color:var(--text-strong);
  font-weight:800;
  letter-spacing:.005em;
}

/* Detail values are information, not disabled controls. Keep the historical
   control-height rhythm so card pairing/responsive geometry does not drift, but
   remove input chrome and use a quiet row separator. */
.page-asset_view .field-row > label{
  color:#667085;
  font-weight:600;
  line-height:1.45;
  margin-bottom:3px;
}
.page-asset_view .field-row > .ro{
  min-height:var(--control-h);
  padding:5px 0 7px;
  border:0;
  border-bottom:1px solid #e7edf4;
  border-radius:0;
  background:transparent;
  color:var(--text-strong);
  font-weight:500;
}
.page-asset_view .field-row > .ro.asset-network-detail-value{
  padding-left:0;
  padding-right:0;
}
.page-asset_view .subcard .field-row > .ro{
  border-bottom-color:#dde5ef;
}

/* Notes remain a real read-only textarea because multiline selection/scroll is
   useful, but align it with the lighter detail presentation. */
.page-asset_view textarea.field.notes-ro{
  background:var(--surface-muted);
  border-color:var(--border);
  color:var(--text-strong);
}

/* Management operations are an action section, not another information card.
   Use a neutral slate accent; destructive semantics remain owned by the existing
   danger sub-surface/button. */
.page-asset_view [data-asset-detail-section="admin-ops"]{
  border-top:3px solid #94a3b8;
}

/* Recent audit belongs to the current AssetMax table language. */
.page-asset_view [data-asset-detail-section="recent-audit"] > .card-head{
  background:var(--surface-muted);
  border-bottom:1px solid var(--border);
  padding-bottom:14px;
}
.page-asset_view [data-asset-detail-section="recent-audit"] .audit-table thead th{
  background:#f1f5f9;
  color:#344054;
  font-weight:700;
}

/* Long forms need readable labels without turning every field into a heading. */
.page-asset_form .field-row > label,
.page-asset_form .network-slot-name{
  color:#475467;
  font-weight:600;
}
.page-asset_form .field-row > label .label-inline-note{
  font-weight:400;
  color:var(--muted);
}

/* Preview is the authoritative next step of create/edit. Make only the form
   action rail solid-primary; hidden real-submit and all other page semantics are
   unchanged. */
.page-asset_form .form-actions .ui-btn--primary{
  --ui-btn-bg:var(--brand);
  --ui-btn-border:var(--brand);
  --ui-btn-fg:#fff;
  --ui-btn-hover-bg:#17358f;
  --ui-btn-hover-border:#17358f;
  --ui-btn-hover-fg:#fff;
}

@media (max-width:720px){
  .page-asset_view [data-asset-detail-section] > .card-head,
  .page-asset_form > .card > .card-head{
    margin-bottom:12px;
  }
  .page-asset_view .field-row > .ro{
    padding-top:4px;
    padding-bottom:6px;
  }
  .page-asset_form .form-actions{
    align-items:stretch;
  }
}


/* ============================================================
   2026-08-29 v174 Operation Log / Long-list Visual Refinement
   Shared presentation-only convergence for audit / system logs / users logs.
   Query, filter wire format, pagination, disclosure semantics and page DOM
   ownership remain unchanged.
   ============================================================ */

/* The three operation-log filter surfaces should read as one product family.
   Keep the existing Filter Grid geometry/breakpoints; only strengthen hierarchy. */
:is(
  [data-long-list-filter-card="audit"],
  [data-long-list-filter-card="system-logs"],
  [data-long-list-filter-card="users-logs"]
) .long-list-filter-head{
  padding-bottom:12px;
  margin-bottom:2px;
  border-bottom:1px solid var(--border);
}
:is(
  [data-long-list-filter-card="audit"],
  [data-long-list-filter-card="system-logs"],
  [data-long-list-filter-card="users-logs"]
) .filter-item > label,
:is(
  [data-long-list-filter-card="audit"],
  [data-long-list-filter-card="system-logs"],
  [data-long-list-filter-card="users-logs"]
) .filter-label-with-info > label{
  color:#344054;
  font-weight:600;
}
:is(
  [data-long-list-filter-card="audit"],
  [data-long-list-filter-card="system-logs"],
  [data-long-list-filter-card="users-logs"]
) .filter-actions .ui-btn--primary{
  --ui-btn-bg:var(--brand);
  --ui-btn-border:var(--brand);
  --ui-btn-fg:#fff;
  --ui-btn-hover-bg:#17358f;
  --ui-btn-hover-border:#17358f;
  --ui-btn-hover-fg:#fff;
}

/* Active Filter keeps v168 grouped semantics; only the surface is aligned with
   the equipment-list generation of the AssetMax visual language. */
:is(
  [data-long-list-results-card="audit"],
  [data-long-list-results-card="system-logs"],
  [data-long-list-results-card="users-logs"]
) .index-filter-summary{
  border-color:var(--border);
  background:color-mix(in srgb,var(--surface-muted) 70%,#fff 30%);
}
:is(
  [data-long-list-results-card="audit"],
  [data-long-list-results-card="system-logs"],
  [data-long-list-results-card="users-logs"]
) .index-filter-summary:has(.index-filter-summary__items){
  border-left:3px solid var(--brand);
  background:var(--primary-soft);
}

/* Result title, metadata and auxiliary controls occupy different visual layers
   without changing their DOM/order or per-page pagination ownership. */
:is(
  [data-long-list-results-card="audit"],
  [data-long-list-results-card="system-logs"],
  [data-long-list-results-card="users-logs"]
) .long-list-result-head{
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
:is(
  [data-long-list-results-card="audit"],
  [data-long-list-results-card="system-logs"],
  [data-long-list-results-card="users-logs"]
) .long-list-result-head__copy h3{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-strong);
  font-weight:800;
}
:is(
  [data-long-list-results-card="audit"],
  [data-long-list-results-card="system-logs"],
  [data-long-list-results-card="users-logs"]
) .long-list-result-head__copy h3::before{
  content:"";
  width:4px;
  height:18px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--brand);
}
:is(
  [data-long-list-results-card="audit"],
  [data-long-list-results-card="system-logs"],
  [data-long-list-results-card="users-logs"]
) .result-header-count{
  color:#667085;
  font-weight:700;
}
:is(
  [data-long-list-results-card="audit"],
  [data-long-list-results-card="system-logs"],
  [data-long-list-results-card="users-logs"]
) .long-list-result-head__description{
  color:#667085;
}

/* Global expand/collapse controls stay quiet actions. Row-level disclosures
   keep their current wording/behavior but gain a shared chevron grammar. */
:is(
  [data-long-list-results-card="audit"],
  [data-long-list-results-card="users-logs"]
) .long-list-result-head__tools > .audit-toggle{
  color:#475467;
  font-weight:600;
  text-decoration:none;
  text-underline-offset:2px;
}
:is(
  [data-long-list-results-card="audit"],
  [data-long-list-results-card="users-logs"]
) .long-list-result-head__tools > .audit-toggle:not(:disabled):hover{
  color:var(--brand);
  text-decoration:underline;
}
[data-operation-log-surface="audit"] .audit-toggle--row,
[data-operation-log-surface="settings"] .system-log-detail > summary,
[data-operation-log-surface="users"] .users-log-detail > summary{
  color:var(--brand);
  font-weight:600;
  text-underline-offset:2px;
}
[data-operation-log-surface="audit"] .audit-toggle--row::before,
[data-operation-log-surface="settings"] .system-log-detail > summary::before{
  content:"▸";
  display:inline-block;
  margin-right:5px;
  color:#667085;
  font-size:11px;
  line-height:1;
  text-decoration:none;
}
[data-operation-log-surface="audit"] .audit-exp:has(.audit-full:not(.hidden)) > .audit-toggle--row::before,
[data-operation-log-surface="settings"] .system-log-detail[open] > summary::before{
  content:"▾";
}
[data-operation-log-surface="settings"] .system-log-detail-body,
[data-operation-log-surface="users"] .users-log-detail-body{
  border-color:#dbe4ef;
  background:color-mix(in srgb,var(--primary-soft) 38%,var(--surface) 62%);
  box-shadow:0 1px 2px rgba(16,24,40,.035);
}
[data-operation-log-surface="audit"] .audit-full{
  padding:9px 11px;
  border:1px solid #dbe4ef;
  border-radius:9px;
  background:color-mix(in srgb,var(--primary-soft) 32%,var(--surface) 68%);
}

/* Dense operation-log tables inherit the equipment-list generation's stronger
   scan rhythm while preserving column widths, sticky ownership and phone cards. */
:is(
  [data-operation-log-surface="audit"],
  [data-operation-log-surface="settings"],
  [data-operation-log-surface="users"]
) .long-list-table thead th{
  background:#f1f5f9;
  color:#344054;
  border-bottom-color:#cfd9e6;
  font-weight:700;
}
:is(
  [data-operation-log-surface="audit"],
  [data-operation-log-surface="settings"],
  [data-operation-log-surface="users"]
) .long-list-table tbody > tr > td{
  border-bottom-color:#e7edf4;
}
:is(
  [data-operation-log-surface="audit"],
  [data-operation-log-surface="settings"],
  [data-operation-log-surface="users"]
) .long-list-table tbody > tr:nth-child(even) > td{
  background:color-mix(in srgb,var(--surface-muted) 42%,#fff 58%);
}
:is(
  [data-operation-log-surface="audit"],
  [data-operation-log-surface="settings"],
  [data-operation-log-surface="users"]
) .long-list-table tbody > tr:hover > td{
  background:#eef4ff;
}

:is(
  [data-long-list-results-card="audit"],
  [data-long-list-results-card="system-logs"],
  [data-long-list-results-card="users-logs"]
) .result-pagination-footer{
  border-top-color:var(--border-strong);
  background:var(--surface-muted);
  box-shadow:0 -5px 14px rgba(16,24,40,.045);
}
:is(
  [data-long-list-results-card="audit"],
  [data-long-list-results-card="system-logs"],
  [data-long-list-results-card="users-logs"]
) .result-pagination-footer .results-pager__chip--primary{
  background:var(--primary-soft);
  border-color:var(--primary-soft-border);
  color:var(--brand);
}

@media (max-width:639px){
  :is(
    [data-long-list-filter-card="audit"],
    [data-long-list-filter-card="system-logs"],
    [data-long-list-filter-card="users-logs"]
  ) .filter-actions{
    display:flex;
    gap:8px;
  }
  :is(
    [data-long-list-filter-card="audit"],
    [data-long-list-filter-card="system-logs"],
    [data-long-list-filter-card="users-logs"]
  ) .filter-actions .ui-btn{
    flex:1 1 0;
    min-width:0;
  }
  :is(
    [data-long-list-results-card="audit"],
    [data-long-list-results-card="system-logs"],
    [data-long-list-results-card="users-logs"]
  ) .long-list-result-head{
    padding-bottom:10px;
  }
}

/* ============================================================
   2026-08-29 v175 Account Management Visual Refinement
   Presentation-only convergence for the Users account-management surface.
   Account lifecycle, permission semantics, UserOps modal DOM/runtime,
   re-auth, audit and persistence ownership remain unchanged.
   ============================================================ */

/* The create-account entry is the page's primary setup action.  Keep the
   existing collapse/expand DOM and server validation flow while giving the
   shell a clearer product hierarchy. */
.page-users .users-create-card{
  border-color:#dbe4ef;
  box-shadow:0 1px 2px rgba(16,24,40,.035);
}
.page-users .users-create-titleblock{
  display:flex;
  align-items:center;
  gap:10px 14px;
  flex-wrap:wrap;
}
.page-users .users-create-summary{
  margin:0;
  color:#667085;
  font-weight:500;
}
.page-users .users-create-toggle{
  --ui-btn-bg:var(--brand);
  --ui-btn-border:var(--brand);
  --ui-btn-fg:#fff;
  --ui-btn-hover-bg:var(--brand-strong);
  --ui-btn-hover-border:var(--brand-strong);
  --ui-btn-hover-fg:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.08);
}
.page-users .users-create-panel{
  margin-top:16px;
  padding:16px;
  border:1px solid #dbe4ef;
  border-radius:12px;
  background:color-mix(in srgb,var(--surface-muted) 72%,#fff 28%);
}
.page-users .users-create-card .uc-field > label{
  display:block;
  margin-bottom:6px;
  color:#344054;
  font-size:var(--field-label-font);
  line-height:var(--field-label-lh);
  font-weight:600;
}
.page-users .users-create-card .uc-field .hint,
.page-users .users-create-card .user-create-help{
  color:#667085;
}
.page-users .users-create-card .user-create-actions{
  padding-top:4px;
}
.page-users .users-create-card .user-create-actions .ui-btn--primary[type="submit"]{
  --ui-btn-bg:var(--brand);
  --ui-btn-border:var(--brand);
  --ui-btn-fg:#fff;
  --ui-btn-hover-bg:var(--brand-strong);
  --ui-btn-hover-border:var(--brand-strong);
  --ui-btn-hover-fg:#fff;
}

/* Account-list title and controls follow the same current-generation card/table
   language as the equipment list and operation logs without changing columns. */
.page-users .table-card > .card-head{
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.page-users .table-card > .card-head h3{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-strong);
  font-weight:800;
}
.page-users .table-card > .card-head h3::before{
  content:"";
  width:4px;
  height:18px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--brand);
}
.page-users .table-card > .card-head .get-toggle,
.page-users .table-card > .card-head label{
  color:#475467;
  font-weight:600;
}
.page-users .users-table thead th{
  background:#f1f5f9;
  color:#344054;
  border-bottom-color:#cfd9e6;
  font-weight:700;
}
.page-users .users-table tbody > tr > td{
  border-bottom-color:#e7edf4;
}
.page-users .users-table tbody > tr:nth-child(even):not(.is-deleted) > td{
  background:color-mix(in srgb,var(--surface-muted) 42%,#fff 58%);
}
.page-users .users-table tbody > tr:not(.is-deleted):hover > td{
  background:#eef4ff;
}
.page-users .users-table .user-username{
  color:var(--text-strong);
  font-weight:800;
  letter-spacing:.005em;
}
.page-users .users-table .user-name{
  color:#667085;
  font-size:12px;
  font-weight:500;
}
.page-users .users-table .user-id{
  color:#98a2b3;
  font-size:11px;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.page-users .users-table .role-status-line{
  gap:5px 6px;
}
.page-users .users-table .user-perm-summary{
  line-height:1.55;
}
.page-users .users-table .user-perm-summary-line{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  column-gap:6px;
  align-items:baseline;
  margin:0 0 4px 0;
}
.page-users .users-table .user-perm-summary-title{
  color:#667085;
  font-weight:600;
}
.page-users .users-table .user-perm-summary-value{
  min-width:0;
  color:#344054;
}
.page-users .users-table .user-perm-summary--full{
  color:var(--brand);
  font-weight:700;
}
.page-users .users-table .user-perm-summary--none{
  color:#98a2b3;
}
.page-users .users-table .user-time .time-label{
  color:#98a2b3;
  font-size:12px;
  font-weight:500;
}
.page-users .users-table .user-time .time-val{
  color:#475467;
  font-size:12px;
}
.page-users .users-table .user-actions .ui-btn{
  --ui-btn-bg:var(--surface-muted);
  --ui-btn-border:#d0d9e6;
  --ui-btn-fg:#344054;
  --ui-btn-hover-bg:var(--primary-soft);
  --ui-btn-hover-border:var(--primary-soft-border);
  --ui-btn-hover-fg:var(--brand);
  font-weight:600;
}
/* Deleted rows remain historical/read-only and must not acquire the active-row
   blue hover used by live accounts. */
.page-users .users-table tbody tr.user-row.is-deleted,
.page-users .users-table tbody tr.user-row.is-deleted:hover{
  background:rgba(148,163,184,.08);
}
.page-users .users-table tbody tr.user-row.is-deleted > td,
.page-users .users-table tbody tr.user-row.is-deleted:hover > td{
  background:rgba(148,163,184,.045);
  color:#64748b;
}

@media (max-width:720px){
  .page-users .users-create-titleblock{
    display:flex;
    align-items:stretch;
    flex-direction:column;
    gap:8px;
  }
  .page-users .users-create-panel{
    padding:14px;
  }
  .page-users .users-create-card .user-create-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .page-users .users-create-card .user-create-actions .ui-btn{
    width:100%;
    justify-content:center;
  }
}


/* ============================================================
   2026-08-29 v176 Settings Hub / Shared Dictionary Visual Refinement
   Presentation-only convergence for the list-management hub and the five
   shared single-dictionary pages. Dictionary CRUD, policy, validation,
   permissions, audit and OS product/version semantics remain unchanged.
   ============================================================ */

/* Settings hub: preserve the six-card information architecture while making
   each destination easier to scan. All destinations stay equal peers, so the
   repeated management links remain restrained rather than six solid primaries. */
.page-system_settings > .page-wrap .card > .card-head,
.page-system_settings .container > .stack > .card > .card-head{
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.page-system_settings .system-settings-grid{
  gap:16px 18px;
}
.page-system_settings .system-settings-grid .card--sub{
  border-color:#dbe4ef;
  background:color-mix(in srgb,var(--surface) 96%,var(--primary-soft) 4%);
  box-shadow:0 1px 2px rgba(16,24,40,.035);
}
.page-system_settings .system-settings-grid .card--sub .card-head{
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px solid #e7edf4;
}
.page-system_settings .system-settings-grid .card--sub .card-head h4{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-strong);
  font-weight:800;
  line-height:1.35;
}
.page-system_settings .system-settings-grid .card--sub .card-head h4::before{
  content:"";
  width:4px;
  height:16px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--brand);
}
.page-system_settings .system-settings-grid .card--sub .card-body .stack{
  gap:12px;
}
.page-system_settings .system-settings-grid .card--sub .card-body .muted{
  color:#667085;
  line-height:1.6;
}
.page-system_settings .system-settings-grid .card--sub .ui-btn--primary{
  --ui-btn-bg:var(--primary-soft);
  --ui-btn-border:var(--primary-soft-border);
  --ui-btn-fg:var(--brand);
  --ui-btn-hover-bg:#e3ecfb;
  --ui-btn-hover-border:#b8cae6;
  --ui-btn-hover-fg:var(--brand-strong);
  min-width:104px;
  font-weight:700;
}

/* Shared single-dictionary owner. Keep OS out of this selector intentionally:
   v176 does not change the product/version master-detail workspace. */
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) > .page-wrap .card > .card-head{
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-mini{
  max-width:760px;
  margin:0 0 16px 0;
  padding:14px;
  border:1px solid #dbe4ef;
  border-radius:12px;
  background:color-mix(in srgb,var(--surface-muted) 70%,#fff 30%);
}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-mini .ui-btn--primary[type="submit"]{
  --ui-btn-bg:var(--brand);
  --ui-btn-border:var(--brand);
  --ui-btn-fg:#fff;
  --ui-btn-hover-bg:var(--brand-strong);
  --ui-btn-hover-border:var(--brand-strong);
  --ui-btn-hover-fg:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.08);
  font-weight:700;
}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-list{
  gap:9px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-item{
  border-color:#dbe4ef;
  background:var(--surface);
  box-shadow:0 1px 1px rgba(16,24,40,.02);
  transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;
}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-item:not(.is-selected):not(.is-disabled):hover{
  border-color:#c8d5e5;
  background:#f8fbff;
}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick{
  min-width:0;
  border-radius:8px;
  outline:0;
}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick:focus-visible{
  outline:3px solid color-mix(in srgb,var(--focus) 30%,transparent);
  outline-offset:3px;
}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick .title{
  display:grid;
  grid-template-columns:3.5em minmax(0,1fr) max-content;
  gap:6px 10px;
  align-items:baseline;
  width:100%;
}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick .sort{
  min-width:0;
  color:#98a2b3;
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick .name{
  min-width:0;
  color:var(--text-strong);
  font-weight:750;
  line-height:1.45;
}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick .title > .muted{
  color:#98a2b3;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}
/* Selected is data state, not keyboard focus: use a surface/accent instead of
   the old outer focus-like ring. Real keyboard focus stays on .system-os-pick. */
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-item.is-selected{
  border-color:#b8cae6;
  background:#eef4ff;
  box-shadow:inset 3px 0 0 var(--brand),0 1px 2px rgba(16,24,40,.04);
}
/* Disabled dictionary data stays readable and actionable for re-enable/edit;
   it must not look like a disabled HTML control. */
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-item.is-disabled{
  opacity:1;
  border-color:#e2e8f0;
  background:#f8fafc;
}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-item.is-disabled .system-os-pick .name{
  color:#667085;
}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-item.is-disabled .system-os-pick .sort,
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-item.is-disabled .system-os-pick .title > .muted{
  color:#98a2b3;
}
:is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-inline-adv{
  padding-top:4px;
  border-top:1px solid color-mix(in srgb,var(--border) 72%,transparent 28%);
}

@media (max-width:640px){
  .page-system_settings .system-settings-grid .card--sub{
    padding:13px;
  }
  .page-system_settings .system-settings-grid .card--sub .ui-btn--primary{
    width:100%;
    justify-content:center;
  }
  :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-mini{
    padding:12px;
  }
  :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-mini-row > .field-control--grow,
  :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-mini-row > .field-control--compact{
    flex:1 1 100%;
    width:100%;
    max-width:100%;
  }
  :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-mini-row > .ui-btn{
    width:100%;
    justify-content:center;
  }
  :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick .title{
    grid-template-columns:3em minmax(0,1fr);
  }
  :is(.page-system_org_units,.page-system_brands,.page-system_locations,.page-system_device_types,.page-system_processor_brands,.page-system_gpu_brands) .system-os-pick .title > .muted{
    grid-column:2;
    white-space:normal;
  }
}


/* ============================================================
   2026-08-29 v177 OS Master / Detail Visual Refinement
   Presentation-only convergence for system_os.php. Product/version CRUD,
   selection, validation, policy, audit, permissions and the <=980px layout
   contract remain unchanged.
   ============================================================ */

.page-system_os .container > .stack > .card > .card-head{
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.page-system_os .dict-policy-bar--os{
  margin-bottom:20px;
}

/* Product and version stay independent master/detail regions. Strengthen the
   relationship with shared pane surfaces and headers instead of changing DOM,
   route or selection semantics. */
.page-system_os .system-os-split{
  gap:20px;
}
.page-system_os .system-os-pane{
  border-color:#dbe4ef;
  background:color-mix(in srgb,var(--surface) 97%,var(--primary-soft) 3%);
  box-shadow:0 1px 2px rgba(16,24,40,.035);
  padding:16px;
}
.page-system_os .system-os-pane .pane-head{
  min-height:28px;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid #e7edf4;
}
.page-system_os .system-os-pane .pane-title{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-strong);
  font-weight:800;
  line-height:1.35;
}
.page-system_os .system-os-pane .pane-title::before{
  content:"";
  width:4px;
  height:16px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--brand);
}
.page-system_os .system-os-pane .pane-sub{
  color:#667085;
  font-size:13px;
  font-weight:700;
}

/* Each pane owns one create action. The create area is a secondary workspace;
   product and version create buttons are pane-scoped solid primaries. */
.page-system_os .system-os-mini{
  margin:0 0 16px 0;
  padding:12px;
  border:1px solid #dbe4ef;
  border-radius:12px;
  background:color-mix(in srgb,var(--surface-muted) 70%,#fff 30%);
}
.page-system_os .system-os-mini .ui-btn--primary[type="submit"]{
  --ui-btn-bg:var(--brand);
  --ui-btn-border:var(--brand);
  --ui-btn-fg:#fff;
  --ui-btn-hover-bg:var(--brand-strong);
  --ui-btn-hover-border:var(--brand-strong);
  --ui-btn-hover-fg:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.08);
  font-weight:700;
}
.page-system_os .system-os-list{
  gap:9px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.page-system_os .system-os-item{
  border-color:#dbe4ef;
  background:var(--surface);
  box-shadow:0 1px 1px rgba(16,24,40,.02);
  transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.page-system_os .system-os-item:not(.is-selected):not(.is-disabled):hover{
  border-color:#c8d5e5;
  background:#f8fbff;
}
.page-system_os .system-os-pick{
  min-width:0;
  border-radius:8px;
  outline:0;
}
.page-system_os .system-os-pick:focus-visible{
  outline:3px solid color-mix(in srgb,var(--focus) 30%,transparent);
  outline-offset:3px;
}
.page-system_os .system-os-pick .title{
  display:grid;
  grid-template-columns:3.5em minmax(0,1fr) max-content;
  gap:6px 10px;
  align-items:baseline;
  width:100%;
}
.page-system_os .system-os-pick .sort{
  min-width:0;
  color:#98a2b3;
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.page-system_os .system-os-pick .name{
  min-width:0;
  color:var(--text-strong);
  font-weight:750;
  line-height:1.45;
}
.page-system_os .system-os-pick .title > .muted{
  color:#98a2b3;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}

/* Selection is authoritative data state, not keyboard focus. */
.page-system_os .system-os-item.is-selected{
  border-color:#b8cae6;
  background:#eef4ff;
  box-shadow:inset 3px 0 0 var(--brand),0 1px 2px rgba(16,24,40,.04);
}
/* Disabled OS data remains readable/selectable and can still be re-enabled. */
.page-system_os .system-os-item.is-disabled{
  opacity:1;
  border-color:#e2e8f0;
  background:#f8fafc;
}
.page-system_os .system-os-item.is-disabled .system-os-pick .name{
  color:#667085;
}
.page-system_os .system-os-item.is-disabled .system-os-pick .sort,
.page-system_os .system-os-item.is-disabled .system-os-pick .title > .muted{
  color:#98a2b3;
}

/* Keep edit semantics and DOM intact; only make the selected row's inline edit
   region read as a contained work surface with clear action separation. */
.page-system_os .system-os-inline-adv{
  padding-top:4px;
  border-top:1px solid color-mix(in srgb,var(--border) 72%,transparent 28%);
}
.page-system_os .system-os-inline-adv[open]{
  margin-top:2px;
  padding:12px;
  border:1px solid #dbe4ef;
  border-radius:10px;
  background:#f8fafc;
}
.page-system_os .system-os-inline-adv[open] .system-os-adv-form{
  margin-top:0;
}
.page-system_os .system-os-adv-form label{
  color:#667085;
  font-size:13px;
  font-weight:700;
}
.page-system_os .system-os-adv-form .field-readonly{
  background:#f1f5f9;
  color:#667085;
}
.page-system_os .system-os-adv-form .field-row--actions{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #e2e8f0;
}
.page-system_os .system-os-adv-form .field-row-action-buttons{
  gap:8px;
}

@media (max-width:980px){
  .page-system_os .system-os-split{
    gap:18px;
  }
  .page-system_os .system-os-pane{
    padding:14px;
  }
}

@media (max-width:640px){
  .page-system_os .system-os-pane{
    padding:13px;
  }
  .page-system_os .system-os-mini{
    padding:12px;
  }
  .page-system_os .system-os-mini-row > .field-control--grow,
  .page-system_os .system-os-mini-row > .field-control--compact{
    flex:1 1 100%;
    width:100%;
    max-width:100%;
  }
  .page-system_os .system-os-mini-row > .ui-btn{
    width:100%;
    justify-content:center;
  }
  .page-system_os .system-os-pick .title{
    grid-template-columns:3em minmax(0,1fr);
  }
  .page-system_os .system-os-pick .title > .muted{
    grid-column:2;
    white-space:normal;
  }
  .page-system_os .system-os-inline-adv[open]{
    padding:11px;
  }
  .page-system_os .system-os-adv-form .field-row-action-buttons{
    width:100%;
    justify-content:flex-start;
  }
}

/* ============================================================
   2026-08-29 v178 IP Subnet UI Contract Recovery / Visual Refinement
   IP subnet management historically shares low-level dictionary primitives,
   but its status/sort/name/CIDR/conflict/impact row is not a single-dictionary
   3-column title. Restore a subnet-owned presentation without changing the
   v119+ body-class, CRUD, validation, impact-preview or responsive semantics.
   ============================================================ */

.page-system_ip_subnets > .page-wrap .card > .card-head{
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}

/* Create and list are peer work surfaces. Keep the v176 create-workspace
   treatment, but make the authoritative outer surfaces share one width. */
.page-system_ip_subnets .system-os-mini,
.page-system_ip_subnets .system-os-list{
  width:100%;
  max-width:760px;
  box-sizing:border-box;
  margin-right:auto;
}
.page-system_ip_subnets .system-os-mini{
  margin-bottom:16px;
  padding:14px;
  border:1px solid #dbe4ef;
  border-radius:12px;
  background:color-mix(in srgb,var(--surface-muted) 70%,#fff 30%);
}
.page-system_ip_subnets .system-os-mini .ui-btn--primary[type="submit"]{
  --ui-btn-bg:var(--brand);
  --ui-btn-border:var(--brand);
  --ui-btn-fg:#fff;
  --ui-btn-hover-bg:var(--brand-strong);
  --ui-btn-hover-border:var(--brand-strong);
  --ui-btn-hover-fg:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.08);
  font-weight:700;
}
.page-system_ip_subnets .system-os-list{
  gap:9px;
  padding-top:16px;
  border-top:1px solid var(--border);
}

/* Subnet rows have richer semantics than a single dictionary row. The shared
   row/action grid remains, while the title becomes an explicit wrapping
   status + identity + network + metadata reading surface. */
.page-system_ip_subnets .system-os-item{
  border-color:#dbe4ef;
  background:var(--surface);
  box-shadow:0 1px 1px rgba(16,24,40,.02);
  transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.page-system_ip_subnets .system-os-item:not(.is-selected):not(.is-disabled):hover{
  border-color:#c8d5e5;
  background:#f8fbff;
}
.page-system_ip_subnets .system-os-pick{
  min-width:0;
  border-radius:8px;
  outline:0;
}
.page-system_ip_subnets .system-os-pick:focus-visible{
  outline:3px solid color-mix(in srgb,var(--focus) 30%,transparent);
  outline-offset:3px;
}
.page-system_ip_subnets .system-os-pick .title{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 9px;
  width:100%;
  min-width:0;
}
.page-system_ip_subnets .system-os-pick .sort{
  min-width:0;
  color:#98a2b3;
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  white-space:nowrap;
}
.page-system_ip_subnets .system-os-pick .name{
  min-width:0;
  color:var(--text-strong);
  font-weight:750;
  line-height:1.45;
  overflow-wrap:anywhere;
}
/* Note, conflict detail and impact are supporting lines, not peer columns. */
.page-system_ip_subnets .system-os-pick .title > .muted:not(.badge){
  flex:1 0 100%;
  color:#667085;
  font-size:12px;
  font-weight:500;
  line-height:1.5;
  white-space:normal;
}
/* The muted token immediately following the name is the authoritative CIDR. */
.page-system_ip_subnets .system-os-pick .name + .muted:not(.badge){
  flex:0 1 auto;
  color:#475467;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12.5px;
  font-weight:650;
  line-height:1.45;
  white-space:nowrap;
}
.page-system_ip_subnets .system-os-pick [data-ip-subnet-conflict-detail]{
  color:#8a3a3a;
}
.page-system_ip_subnets .system-os-pick .badge.bad{
  flex:0 0 auto;
}

/* Selected is data state; keyboard focus remains on the link itself. */
.page-system_ip_subnets .system-os-item.is-selected{
  border-color:#b8cae6;
  background:#eef4ff;
  box-shadow:inset 3px 0 0 var(--brand),0 1px 2px rgba(16,24,40,.04);
}
/* Disabled subnet data remains readable/actionable and must not resemble a
   disabled HTML control. Conflict is a separate semantic signal. */
.page-system_ip_subnets .system-os-item.is-disabled{
  opacity:1;
  border-color:#e2e8f0;
  background:#f8fafc;
}
.page-system_ip_subnets .system-os-item.is-disabled .system-os-pick .name{
  color:#667085;
}
.page-system_ip_subnets .system-os-item.is-disabled .system-os-pick .sort{
  color:#98a2b3;
}

/* Keep the historical edit DOM/flow, but let the selected subnet's edit
   region read as a contained secondary work surface. */
.page-system_ip_subnets .system-os-inline-adv{
  padding-top:4px;
  border-top:1px solid color-mix(in srgb,var(--border) 72%,transparent 28%);
}
.page-system_ip_subnets .system-os-inline-adv[open]{
  margin-top:2px;
  padding:12px;
  border:1px solid #dbe4ef;
  border-radius:10px;
  background:#f8fafc;
}
.page-system_ip_subnets .system-os-inline-adv[open] .system-os-adv-form{
  margin-top:0;
}
.page-system_ip_subnets .system-os-adv-form label{
  color:#667085;
  font-size:13px;
  font-weight:700;
}
.page-system_ip_subnets .system-os-adv-form .field-row--actions{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #e2e8f0;
}
.page-system_ip_subnets .system-os-adv-form .field-row-action-buttons{
  gap:8px;
}

@media (max-width:640px){
  .page-system_ip_subnets .system-os-mini{
    padding:12px;
  }
  .page-system_ip_subnets .system-os-mini-row > .field-control--grow,
  .page-system_ip_subnets .system-os-mini-row > .field-control--compact{
    flex:1 1 100%;
    width:100%;
    max-width:100%;
  }
  .page-system_ip_subnets .system-os-mini-row > .ui-btn{
    width:100%;
    justify-content:center;
  }
  .page-system_ip_subnets .system-os-pick .title{
    gap:5px 8px;
  }
  .page-system_ip_subnets .system-os-pick .name{
    flex:1 0 calc(100% - 76px);
  }
  .page-system_ip_subnets .system-os-pick .name + .muted:not(.badge){
    flex:1 0 100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .page-system_ip_subnets .system-os-pick .badge.bad{
    margin-top:1px;
  }
  .page-system_ip_subnets .system-os-inline-adv[open]{
    padding:11px;
  }
  .page-system_ip_subnets .system-os-adv-form .field-row-action-buttons{
    width:100%;
    justify-content:flex-start;
  }
}

/* ============================================================
   2026-08-29 v179 System Rules Visual Refinement
   Presentation-only policy settings list. Rule registry, POST semantics,
   persistence, permissions and policy evaluation remain unchanged.
   ============================================================ */
.system-rules-page .system-rules-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.system-rules-page .system-rules-group > .card-head{
  padding-bottom:12px;
  margin-bottom:0;
  border-bottom:1px solid var(--border);
}
.system-rules-page .system-rules-group > .card-head h3{
  color:var(--text-strong);
  font-weight:800;
}
.system-rules-page .system-rules-group > .card-body{
  padding-top:14px;
}
.system-rules-page .system-rules-group-note{
  max-width:86ch;
  margin:0;
  color:#667085;
  line-height:1.65;
}
.system-rules-page .system-rules-list{
  margin-top:14px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.system-rules-page .system-rules-item.dict-policy-bar{
  margin:0;
  padding:15px 2px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transition:background-color .14s ease;
}
.system-rules-page .system-rules-item + .system-rules-item{
  border-top:1px solid #e7edf4;
}
.system-rules-page .system-rules-item:hover{
  background:color-mix(in srgb,var(--primary-soft) 34%,transparent);
}
.system-rules-page .system-rules-item .dict-policy-copy{
  gap:4px;
  padding-right:18px;
}
.system-rules-page .system-rules-item .dict-policy-title{
  color:var(--text-strong);
  font-size:14px;
  line-height:1.45;
  font-weight:750;
}
.system-rules-page .system-rules-item .dict-policy-note{
  max-width:82ch;
  color:#667085;
  font-size:13px;
  line-height:1.6;
}
.system-rules-page .system-rules-item .dict-policy-actions{
  min-width:108px;
  justify-content:flex-end;
}
.system-rules-page .system-rules-item .dict-policy-switch{
  border-radius:10px;
  padding:5px 6px;
}
.system-rules-page .system-rules-item .dict-policy-switch:has(input:focus-visible){
  background:var(--primary-soft);
}
.system-rules-page .system-rules-form-actions{
  margin-top:0;
  padding-top:0;
}
.system-rules-page .system-rules-form-actions .ui-btn--primarySolid{
  min-width:112px;
}

@media (max-width:980px){
  .system-rules-page .system-rules-item.dict-policy-bar{
    gap:10px;
    padding:14px 2px;
  }
  .system-rules-page .system-rules-item .dict-policy-copy{
    width:100%;
    padding-right:0;
  }
  .system-rules-page .system-rules-item .dict-policy-actions{
    width:100%;
    min-width:0;
    justify-content:flex-start;
  }
}

@media (max-width:639px){
  .system-rules-page .system-rules-form{
    gap:14px;
  }
  .system-rules-page .system-rules-group > .card-body{
    padding-top:12px;
  }
  .system-rules-page .system-rules-list{
    margin-top:12px;
  }
  .system-rules-page .system-rules-item.dict-policy-bar{
    padding-top:13px;
    padding-bottom:13px;
  }
  .system-rules-page .system-rules-form-actions .ui-btn--primarySolid{
    width:100%;
  }
}


/* ============================================================
   2026-09-02 v208 Re-auth UX Intent & Freshness Expiry Convergence
   System Rules stale controls are real Re-auth intent links, not inert switches.
   ============================================================ */
.system-rules-page .system-rule-locked-control{
  cursor:pointer;
  text-decoration:none;
  color:var(--text);
  border:1px solid color-mix(in srgb,var(--line) 88%,transparent);
  background:color-mix(in srgb,var(--muted) 5%,var(--card));
}
.system-rules-page .system-rule-locked-control:hover{
  background:color-mix(in srgb,var(--primary-soft) 38%,var(--card));
  border-color:color-mix(in srgb,var(--focus) 22%,var(--line));
}
.system-rules-page .system-rule-locked-control:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent);
}
.system-rules-page .system-rule-locked-control .dict-policy-switch-ui{
  background:color-mix(in srgb,var(--muted) 13%,var(--card));
  border-color:color-mix(in srgb,var(--muted) 28%,var(--line));
}
.system-rules-page .system-rule-locked-control[data-rule-state="1"] .dict-policy-switch-ui::after{
  transform:translateX(18px);
  background:color-mix(in srgb,var(--text) 58%,var(--card));
}
.system-rules-page .system-rule-lock-badge{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:1px 7px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--warning,#b7791f) 24%,var(--line));
  background:color-mix(in srgb,var(--warning,#b7791f) 8%,var(--card));
  color:var(--text-muted,#667085);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.system-rules-page .system-rules-item.is-reauth-focus{
  background:color-mix(in srgb,var(--primary-soft) 62%,transparent);
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--focus) 78%,transparent);
}
#system-rules-resume-status{margin:0;}
@media (max-width:639px){
  .system-rules-page .system-rule-locked-control{max-width:100%;}
  .system-rules-page .system-rule-lock-badge{font-size:10px;}
}

/* ============================================================
   2026-08-29 v180 IP Usage Visual Refinement
   Presentation-only convergence for the IP usage long-list surface. Query,
   subnet classification, sorting, pagination, mobile-card ownership and filter
   wire-format semantics remain unchanged.
   ============================================================ */
.page-ip_usage [data-long-list-filter-card="ip-usage"] .long-list-filter-head{
  padding-bottom:12px;
  margin-bottom:2px;
  border-bottom:1px solid var(--border);
}
.page-ip_usage [data-long-list-filter-card="ip-usage"] .filter-item > label{
  color:#344054;
  font-weight:600;
}
.page-ip_usage .ip-usage-filter-actions .ui-btn--primary{
  --ui-btn-bg:var(--brand);
  --ui-btn-border:var(--brand);
  --ui-btn-fg:#fff;
  --ui-btn-hover-bg:var(--brand-strong);
  --ui-btn-hover-border:var(--brand-strong);
  --ui-btn-hover-fg:#fff;
}

/* Active Filter keeps the v168 grouped, value-removal interaction. Only the
   current-condition surface converges with equipment list / operation logs. */
.page-ip_usage [data-long-list-results-card="ip-usage"] .index-filter-summary{
  border-color:var(--border);
  background:color-mix(in srgb,var(--surface-muted) 70%,#fff 30%);
}
.page-ip_usage [data-long-list-results-card="ip-usage"] .index-filter-summary:has(.index-filter-summary__items){
  border-left:3px solid var(--brand);
  background:var(--primary-soft);
}

/* Result title, metadata and tools use the current AssetMax long-list hierarchy
   without changing the header DOM or per-page control ownership. */
.page-ip_usage [data-long-list-results-card="ip-usage"] .long-list-result-head{
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.page-ip_usage [data-long-list-results-card="ip-usage"] .long-list-result-head__copy h3{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-strong);
  font-weight:800;
}
.page-ip_usage [data-long-list-results-card="ip-usage"] .long-list-result-head__copy h3::before{
  content:"";
  width:4px;
  height:18px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--brand);
}
.page-ip_usage [data-long-list-results-card="ip-usage"] .result-header-count{
  color:#667085;
  font-weight:700;
}
.page-ip_usage [data-long-list-results-card="ip-usage"] .long-list-result-head__description{
  color:#667085;
}
.page-ip_usage [data-long-list-results-card="ip-usage"] .pagination-per-page-choice .inline-choice__label{
  color:#667085;
  font-weight:700;
}

/* Dense table presentation follows the current equipment/operation-log scan
   rhythm. Column order, intrinsic width, sticky ownership and server sorting
   remain unchanged. */
.page-ip_usage .ip-usage-table thead th{
  background:#f1f5f9;
  color:#344054;
  border-bottom-color:#cfd9e6;
  font-weight:700;
}
.page-ip_usage .ip-usage-table tbody > tr > td{
  border-bottom-color:#e7edf4;
}
.page-ip_usage .ip-usage-table tbody > tr:nth-child(even):not(.jump-highlight) > td{
  background:color-mix(in srgb,var(--surface-muted) 42%,#fff 58%);
}
.page-ip_usage .ip-usage-table tbody > tr:hover:not(.jump-highlight) > td{
  background:#eef4ff;
}
/* v188/v189: IP and MAC are peer network identifiers. Keep both on the same
   normal-weight monospace data tier; sort emphasis belongs to the table header,
   not every IP/MAC cell. */
.page-ip_usage .ip-usage-table td[data-label="IP"],
.page-ip_usage .ip-usage-table td[data-label="MAC 位址"]{
  color:var(--text-strong);
  font-weight:400;
}
.page-ip_usage .ip-usage-sort-link{
  border-radius:6px;
  padding:2px 3px;
  margin:-2px -3px;
}
.page-ip_usage .ip-usage-sort-link:hover{
  color:var(--brand);
  background:var(--primary-soft);
  border-bottom-color:transparent;
}
.page-ip_usage .ip-usage-sort-link:focus-visible{
  color:var(--brand);
  background:var(--primary-soft);
  border-bottom-color:transparent;
  outline:2px solid var(--focus);
  outline-offset:2px;
}
.page-ip_usage .ip-usage-sort-link.is-active{
  color:var(--brand);
  font-weight:800;
}
.page-ip_usage [data-long-list-results-card="ip-usage"] .result-pagination-footer{
  border-top:1px solid var(--border-strong);
  background:var(--surface-muted);
  box-shadow:0 -5px 14px rgba(16,24,40,.045);
}
.page-ip_usage [data-long-list-results-card="ip-usage"] .result-pagination-footer .results-pager__chip--primary{
  background:var(--primary-soft);
  border-color:var(--primary-soft-border);
  color:var(--brand);
}

@media (max-width:639px){
  .page-ip_usage .ip-usage-filter-actions{
    display:flex;
    gap:8px;
  }
  .page-ip_usage .ip-usage-filter-actions .ui-btn{
    flex:1 1 0;
    min-width:0;
  }
  .page-ip_usage .ip-usage-table tbody > tr > td[data-label]::before{
    color:#667085;
  }
}


/* ============================================================
   2026-08-29 v181 Authenticated Security Task Shell
   Minimal authenticated shell for self password change and re-authentication.
   Security/session semantics remain server-owned; this section only converges
   product identity, task context and action hierarchy.
   ============================================================ */
.page-change_password .security-task-shell,
.page-reauthenticate .security-task-shell{
  margin-top:clamp(24px,4vh,40px);
}
.page-change_password .security-task-card,
.page-reauthenticate .security-task-card{
  box-shadow:0 8px 24px rgba(15,23,42,.055);
}
.page-change_password .security-task-context,
.page-reauthenticate .security-task-context{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:0 0 16px;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-muted);
}
.page-change_password .security-task-context__label,
.page-reauthenticate .security-task-context__label{
  color:#667085;
  font-size:12px;
  font-weight:700;
}
.page-change_password .security-task-context__value,
.page-reauthenticate .security-task-context__value{
  color:var(--text-strong);
  font-size:14px;
  font-weight:750;
  overflow-wrap:anywhere;
}
.page-reauthenticate .security-task-context--stacked{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:12px;
}
.page-reauthenticate .security-task-context--stacked > div{
  display:grid;
  gap:3px;
  min-width:0;
}
.page-reauthenticate .security-task-note{
  margin:0 0 8px;
  line-height:1.65;
}
.page-change_password .security-task-card > form,
.page-reauthenticate .security-task-card > form{
  margin-top:16px;
}
.page-change_password .security-task-card > form > label,
.page-reauthenticate .security-task-card > form > label{
  color:#344054;
  font-weight:600;
}
.page-change_password .security-task-card .form-actions,
.page-reauthenticate .security-task-card .form-actions{
  padding-top:16px;
  margin-top:18px;
  border-top:1px solid var(--border);
}
@media (max-width:640px){
  .page-reauthenticate .security-task-context--stacked{
    grid-template-columns:1fr;
    gap:9px;
  }
  .page-change_password .security-task-card .form-actions,
  .page-reauthenticate .security-task-card .form-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .page-change_password .security-task-card .form-actions .ui-btn:only-child,
  .page-reauthenticate .security-task-card .form-actions .ui-btn:only-child{
    grid-column:1 / -1;
  }
}


/* ============================================================
   2026-08-29 v183 AssetMax UI Refresh Final Convergence
   Final shared-shell/status/dashboard convergence. Production runtime scope is
   CSS-only; route/query/filter/permission/security/DOM/JavaScript semantics stay
   owned by their existing contracts.
   ============================================================ */
@media (max-width:760px){
  /* Keep the complete authenticated navigation visible, but reduce mobile shell
     chrome so content remains the primary first-screen surface. */
  .topbar{gap:8px;padding-top:10px;padding-bottom:7px;}
  .topbar .title-row{gap:8px;}
  .topbar h1,
  .topbar .title-row h1{font-size:clamp(24px,7vw,28px);line-height:1.2;}
  .topbar .nav{column-gap:4px;row-gap:4px;}
  .topbar .nav > .ui-btn,
  .topbar .nav > .topbar-menu > .topbar-menu__trigger{height:34px;padding-left:9px;padding-right:9px;border-radius:9px;font-size:13px;}

  /* Five dashboard summaries remain visible without a 5-row mobile wall. */
  .dashboard-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px;}
  .dashboard-summary-card{min-height:86px;padding:13px 14px;gap:4px;}
  .dashboard-summary-value{font-size:28px;}
}

/* ============================================================
   2026-08-29 v184 UI Consistency & Interaction Polish
   Final post-refresh consistency pass for filter actions, select/dropdown
   typography, System Rules reading density and shared dictionary interaction.
   Query/filter/persistence/permission/security semantics remain unchanged.
   ============================================================ */

/* Filter query actions are one solid-primary family. Keep hover inside the
   same semantic color family instead of visually collapsing toward a soft or
   disabled-looking button. */
:is(
  body.page-asset_list,
  body.page-audit,
  body.page-system_logs,
  body.page-users_logs,
  body.page-ip_usage
) .filter-panel .filter-actions .ui-btn--primary{
  --ui-btn-bg:var(--brand);
  --ui-btn-border:var(--brand);
  --ui-btn-fg:#fff;
  --ui-btn-hover-bg:var(--brand-strong);
  --ui-btn-hover-border:var(--brand-strong);
  --ui-btn-hover-fg:#fff;
  background:var(--ui-btn-bg);
  border-color:var(--ui-btn-border);
  color:var(--ui-btn-fg);
}
:is(
  body.page-asset_list,
  body.page-audit,
  body.page-system_logs,
  body.page-users_logs,
  body.page-ip_usage
) .filter-panel .filter-actions .ui-btn--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.is-disabled):hover{
  background:var(--ui-btn-hover-bg);
  border-color:var(--ui-btn-hover-border);
  color:var(--ui-btn-hover-fg);
}

/* Native selects and the checkbox multiselect must use one text-weight
   contract. Selection is communicated by check/highlight/focus, not by a
   second bold typography system inside the menu. */
select.field,
select.field option,
.field-multiselect__summary,
.field-multiselect__option,
.filter-panel .field-multiselect__option,
.field-multiselect__option span,
.filter-panel .field-multiselect__option span{
  font-weight:400;
}

/* System Rules keeps its policy-settings semantics, but desktop reading is a
   compact two-column settings grid instead of ten full-width scan lines.
   v179's no-nested-card rule is preserved: items remain square list rows and
   use shared dividers rather than becoming a second card system. */
@media (min-width:1181px){
  .system-rules-page .system-rules-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:0;
    align-items:stretch;
  }
  .system-rules-page .system-rules-item.dict-policy-bar{
    min-width:0;
    height:100%;
    padding:14px 18px;
    border-bottom:1px solid #e7edf4;
  }
  .system-rules-page .system-rules-item + .system-rules-item{
    border-top:0;
  }
  .system-rules-page .system-rules-item:nth-child(odd){
    padding-left:2px;
    border-right:1px solid #e7edf4;
  }
  .system-rules-page .system-rules-item:nth-child(even){
    padding-right:2px;
  }
  .system-rules-page .system-rules-item .dict-policy-copy{
    padding-right:12px;
  }
  .system-rules-page .system-rules-item .dict-policy-note{
    max-width:58ch;
  }
}
/* v184 specificity lock: page-level filter label hierarchy must not make
   checkbox-menu option text bold. */
.filter-panel .field-multiselect__menu .field-multiselect__option,
.filter-panel .field-multiselect__menu .field-multiselect__option span{
  font-weight:400;
}


/* ============================================================
   2026-08-30 v187 Backend Administration UI Convergence
   Shared administration typography / section hierarchy across list masters,
   policy rules, IP subnet management and account administration. The retired
   settings overview is navigation-only; CRUD, permission and persistence
   semantics remain server-owned.
   ============================================================ */
:root{
  --admin-section-title-font:18px;
  --admin-item-title-font:14px;
  --admin-item-title-weight:750;
  --admin-description-font:13px;
  --admin-description-line:1.6;
}

/* One backend section-heading language. Page layouts stay contextual, but
   section titles use the same scale and brand marker. */
:is(
  .page-system_device_types,.page-system_org_units,.page-system_locations,
  .page-system_brands,.page-system_processor_brands,.page-system_gpu_brands,.page-system_os,
  .page-system_ip_subnets,.page-users
) .card-head > h3,
.system-rules-page .system-rules-group > .card-head h3{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-strong);
  font-size:var(--admin-section-title-font);
  line-height:1.4;
  font-weight:800;
}
:is(
  .page-system_device_types,.page-system_org_units,.page-system_locations,
  .page-system_brands,.page-system_processor_brands,.page-system_gpu_brands,.page-system_os,
  .page-system_ip_subnets,.page-users
) .card-head > h3::before,
.system-rules-page .system-rules-group > .card-head h3::before{
  content:"";
  width:4px;
  height:18px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--brand);
}

/* Master-list identity and policy-rule identity are peer admin item titles. */
:is(
  .page-system_device_types,.page-system_org_units,.page-system_locations,
  .page-system_brands,.page-system_processor_brands,.page-system_gpu_brands,.page-system_os,
  .page-system_ip_subnets
) .system-os-pick .name,
.system-rules-page .system-rules-item .dict-policy-title,
.page-users .users-table .user-username{
  font-size:var(--admin-item-title-font);
  line-height:1.45;
  font-weight:var(--admin-item-title-weight);
}

/* Supporting explanation uses one readable administration scale. */
.system-rules-page .system-rules-group-note,
.system-rules-page .system-rules-item .dict-policy-note,
.page-system_ip_subnets .card-body > p.muted,
.page-users .users-create-summary{
  color:var(--muted);
  font-size:var(--admin-description-font);
  line-height:var(--admin-description-line);
  font-weight:500;
}

/* Neutral row actions share the same restrained backend control language. */
:is(
  .page-system_device_types,.page-system_org_units,.page-system_locations,
  .page-system_brands,.page-system_processor_brands,.page-system_gpu_brands,.page-system_os,
  .page-system_ip_subnets,.page-users
) .system-os-actions .ui-btn--secondary,
.page-users .users-table .user-actions .ui-btn{
  --ui-btn-bg:var(--surface-muted);
  --ui-btn-border:#d0d9e6;
  --ui-btn-fg:#344054;
  --ui-btn-hover-bg:var(--primary-soft);
  --ui-btn-hover-border:var(--primary-soft-border);
  --ui-btn-hover-fg:var(--brand);
}

/* ============================================================
   2026-08-31 v194 Mobile Dense Surface Convergence
   The two remaining desktop-table surfaces that became unreadable on phones
   switch to compact, semantic card layouts below 640px. Desktop/tablet table
   structure and all data/query/audit behavior remain unchanged.
   ============================================================ */
.dashboard-latest-created-mobile{display:none;}

@media (max-width:639px){
  /* Dashboard latest assets: preserve one semantic table in the DOM, but render
     each row as a compact asset summary instead of squeezing five fixed columns. */
  .page-dashboard .dashboard-latest-card .card-body{min-width:0;}
  .page-dashboard .dashboard-latest-table{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    table-layout:auto;
    border:0;
    background:transparent;
    overflow:visible;
  }
  .page-dashboard .dashboard-latest-table thead{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }
  .page-dashboard .dashboard-latest-table tbody{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    width:100%;
  }
  .page-dashboard .dashboard-latest-table tbody > tr{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
      "tag tag created"
      "type type type"
      "brand model model";
    gap:4px 8px;
    width:100%;
    min-width:0;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface,#fff);
    box-shadow:0 1px 2px rgba(15,23,42,.04);
    box-sizing:border-box;
  }
  .page-dashboard .dashboard-latest-table tbody > tr > td{
    display:block;
    width:auto !important;
    min-width:0;
    max-width:100%;
    padding:0;
    border:0;
    background:transparent !important;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .page-dashboard .dashboard-latest-cell--tag{grid-area:tag;align-self:center;}
  .page-dashboard .dashboard-latest-cell--created{grid-area:created;align-self:center;justify-self:end;color:var(--muted);font-size:11px;white-space:nowrap;}
  .page-dashboard .dashboard-latest-cell--type{grid-area:type;color:var(--text-strong);font-weight:600;}
  .page-dashboard .dashboard-latest-cell--brand{grid-area:brand;color:var(--muted);}
  .page-dashboard .dashboard-latest-cell--model{grid-area:model;color:var(--text);}
  .dashboard-latest-created-full{display:none;}
  .dashboard-latest-created-mobile{display:inline;}
  .page-dashboard .dashboard-latest-table tbody > tr > td[colspan]{grid-column:1 / -1;}

  /* Asset-detail embedded audit: keep the desktop four-column table above phone
     width, but on phones expose metadata first and give the audit payload the
     entire row width. This mirrors the full audit page's mobile reading model. */
  .page-asset_view [data-asset-detail-section="recent-audit"] .table-wrap{
    overflow:visible;
    padding:0 12px 18px;
  }
  .page-asset_view .asset-detail-audit-table{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    table-layout:auto;
    border:0;
    background:transparent;
    overflow:visible;
  }
  .page-asset_view .asset-detail-audit-table thead{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }
  .page-asset_view .asset-detail-audit-table tbody{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    width:100%;
  }
  .page-asset_view .asset-detail-audit-table tbody > tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    min-width:0;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface,#fff);
    overflow:hidden;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
  }
  .page-asset_view .asset-detail-audit-table tbody > tr > td{
    display:block;
    width:100% !important;
    min-width:0;
    max-width:100%;
    padding:10px 12px;
    border:0;
    border-bottom:var(--table-row-sep);
    background:transparent !important;
    white-space:normal;
    overflow-wrap:anywhere;
    box-sizing:border-box;
  }
  .page-asset_view .asset-detail-audit-table tbody > tr > td:nth-child(3),
  .page-asset_view .asset-detail-audit-table tbody > tr > td:nth-child(4),
  .page-asset_view .asset-detail-audit-table tbody > tr > td[colspan]{grid-column:1 / -1;}
  .page-asset_view .asset-detail-audit-table tbody > tr > td:nth-child(4),
  .page-asset_view .asset-detail-audit-table tbody > tr > td[colspan]{border-bottom:0;}
  .page-asset_view .asset-detail-audit-table tbody > tr > td[data-label]::before{
    content:attr(data-label);
    display:block;
    margin:0 0 5px;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    line-height:1.35;
    letter-spacing:.02em;
  }
  .page-asset_view .asset-detail-audit-table .audit-details > .audit-lines,
  .page-asset_view .asset-detail-audit-table .audit-details .audit-preview,
  .page-asset_view .asset-detail-audit-table .audit-details .audit-full{
    width:100%;
    min-width:0;
    max-width:100%;
  }
}

/* ============================================================
   2026-09-02 v208 System Rules dirty-state / cancel closure
   Draft changes remain Browser-only until explicit save. Cancel restores the
   current Server baseline; navigation uses the shared unsaved-page guard.
   ============================================================ */
.system-rules-page .system-rules-form-actions{
  justify-content:flex-end;
}
.system-rules-page .system-rules-dirty-status{
  margin-right:auto;
  font-size:13px;
  font-weight:600;
}
.system-rules-page .system-rules-dirty-status.is-dirty{
  color:var(--text);
}
.system-rules-page #system-rules-cancel-changes,
.system-rules-page #system-rules-save{
  min-width:112px;
}
@media (max-width:639px){
  .system-rules-page .system-rules-form-actions{
    align-items:stretch;
  }
  .system-rules-page .system-rules-dirty-status{
    width:100%;
    margin-right:0;
  }
  .system-rules-page #system-rules-cancel-changes,
  .system-rules-page #system-rules-save{
    flex:1 1 100%;
    width:100%;
  }
}

/* ============================================================
   2026-09-08 v225 System Rules Re-auth Notice Typography Hierarchy Closure
   Presentation-only: bind the stale/re-auth notice to the v187 backend-admin
   title/description scale without changing global .muted or Re-auth semantics.
   ============================================================ */
.system-rules-page .system-rules-reauth__title{
  color:var(--text-strong);
  font-size:var(--admin-item-title-font);
  line-height:1.45;
  font-weight:var(--admin-item-title-weight);
}
.system-rules-page .system-rules-reauth__note{
  margin:6px 0 12px;
  color:var(--muted);
  font-size:var(--admin-description-font);
  line-height:var(--admin-description-line);
  font-weight:500;
}

