/* Estimus colours: yellow selection and logo stroke, steel-blue panel heads, grey-blue filter
   panel and dark list headers from the Clarion windows, in a lighter modern form. */
:root {
  --bg: #ecebe7;
  --surface: #ffffff;
  --surface-2: #f8f7f3;
  --line: #e1dfd8;
  --line-strong: #c9c6bc;
  --text: #22252a;
  --muted: #6d7078;
  --top: #3f4551;
  --top-2: #4a5160;
  --accent: #f2c618;
  --accent-2: #f7d84a;
  --accent-ink: #2a2512;
  --accent-line: #d9ab00;
  --sel: #ffe766;
  --sel-soft: #fff7c7;
  --hover: #fffbe6;
  --steel: #7f9ab4;
  --steel-2: #6c879f;
  --steel-soft: #e6edf3;
  --filter-bg: #dfe6ea;
  --filter-line: #c7d2d9;
  --head: #575c66;
  --head-2: #4c5059;
  --danger: #d0261d;
  --danger-soft: #fdecea;
  --warn: #8a6100;
  --warn-soft: #fff1c2;
  --ok: #2f8f46;
  --ok-soft: #e5f4e9;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(30, 30, 20, .06), 0 1px 3px rgba(30, 30, 20, .08);
  --shadow-lg: 0 14px 36px rgba(30, 30, 20, .22);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nav-w: 260px;
  --rail-w: 50px;
  --strip-w: 30px;
  --top-h: 48px;
  --edge-shadow: rgba(40, 38, 28, .26);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }
/* No scroll bars: a shadow on the side with more content shows that an area scrolls (ui.js
   watchScrollEdges). The wheel scrolls up and down, Shift+wheel sideways. */
* { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
[hidden] { display: none !important; }
html, body, #app { margin: 0; height: 100%; }
body { font: 13px/1.4 var(--font); color: var(--text); background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
/* Everything clickable shows the hand pointer, as buttons do. */
select, input[type=checkbox], input[type=radio], label:has(> input[type=checkbox]), label:has(> input[type=radio]) { cursor: pointer; }
input::-webkit-calendar-picker-indicator { cursor: pointer; }
select:disabled, input:disabled, label:has(> input:disabled) { cursor: not-allowed; }
h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
.bi { line-height: 1; vertical-align: -.125em; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.pad { padding: 10px; }
.spacer { flex: 1; }
.loading { display: grid; place-items: center; padding: 28px; }
.loading-page { display: grid; place-items: center; height: 100%; }

/* Spinner */
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(0, 0, 0, .15); border-top-color: var(--accent-line); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
.spinner.big { width: 28px; height: 28px; border-width: 3px; }
.spinner.sm { width: 12px; height: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Brand */
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 19px; letter-spacing: -.02em; color: #eef0f2; }
.brand-mark { width: 34px; height: 20px; }
.brand.big { font-size: 34px; justify-content: center; color: #4a4f59; }
.brand.big .brand-mark { width: 62px; height: 36px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); cursor: pointer; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--accent-line); background: var(--hover); }
.btn.primary { background: var(--accent); border-color: var(--accent-line); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: var(--accent-2); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover:not(:disabled) { background: rgba(0, 0, 0, .05); border-color: transparent; }
.btn.small { height: 26px; padding: 0 8px; font-size: 12px; gap: 5px; }
.btn.icon { height: 26px; width: 28px; padding: 0; justify-content: center; }
.btn.wide { width: 100%; justify-content: center; height: 38px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn .bi { font-size: 14px; }
.icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 5px; background: transparent; cursor: pointer; font-size: 17px; line-height: 1; }
.icon-btn:hover { background: rgba(0, 0, 0, .07); }

/* Login */
.login-page { min-height: 100%; display: grid; place-items: center; background: radial-gradient(1100px 600px at 15% 0%, #fbf3cf 0%, var(--bg) 55%); }
.login-card { width: 360px; padding: 30px 32px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 13px; border-top: 4px solid var(--accent); }
.login-card p { margin: 0; text-align: center; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.login-card input, .login-card select { height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; color: var(--text); }
.login-card input:focus, .login-card select:focus { outline: 2px solid var(--sel-soft); border-color: var(--accent-line); }
.hint { font-size: 12px; color: var(--warn); }

/* Shell */
.shell { display: grid; grid-template-columns: var(--nav-w) 1fr; grid-template-rows: var(--top-h) 1fr; height: 100vh; transition: grid-template-columns .22s var(--ease); }
/* Menu as a strip of icons until used (main.js useNavigation); open, it lies over the workspace. */
.shell.nav-rail { grid-template-columns: var(--rail-w) 1fr; }
.shell.nav-rail .sidenav { z-index: 30; width: var(--rail-w); transition: width .2s var(--ease), box-shadow .2s ease; }
.shell.nav-rail .sidenav-scroll { overflow-x: hidden; padding-left: 6px; padding-right: 6px; }
.shell.nav-rail.nav-open .sidenav { width: var(--nav-w); box-shadow: 6px 0 24px rgba(30, 30, 20, .18); }
.shell.nav-rail .menu-item, .shell.nav-rail .menu-head { white-space: nowrap; }
.shell.nav-rail .menu-item > span, .shell.nav-rail .menu-head > span:not(.chev) { overflow: hidden; text-overflow: ellipsis; }
.shell.nav-rail:not(.nav-open) .menu.sub, .shell.nav-rail:not(.nav-open) .menu-head .chev,
.shell.nav-rail:not(.nav-open) .menu.results { display: none; }
.shell.nav-rail:not(.nav-open) .sidenav .search-box { padding: 0 9px; border-color: transparent; background: transparent; }
.shell.nav-rail:not(.nav-open) .sidenav .search-box input { opacity: 0; }
.topbar .icon-btn.on { background: rgba(255, 255, 255, .14); }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: linear-gradient(180deg, var(--top-2), var(--top)); color: #fff; border-bottom: 3px solid var(--accent); }
.topbar .icon-btn { color: #fff; }
.topbar .icon-btn:hover { background: rgba(255, 255, 255, .12); }
.topbar-title { color: #d5d8dd; font-size: 14px; font-weight: 500; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .2); }
.topbar .btn.ghost { color: #fff; }
.topbar .btn.ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.user-chip { display: flex; flex-direction: column; line-height: 1.15; text-align: right; font-weight: 600; font-size: 13px; }
.user-chip small { font-weight: 400; color: #c3c7cd; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.warn { background: var(--warn-soft); color: var(--warn); }

.sidenav { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--surface-2); border-right: 1px solid var(--line); }
.sidenav-scroll { flex: 1; min-height: 0; overflow: auto; padding: 8px 8px 16px; }
.sidenav .splitter { right: -4px; }
.nav-search { position: sticky; top: -8px; z-index: 2; background: var(--surface-2); padding: 0 0 8px; }
.search-box { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; color: var(--muted); }
.search-box:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 2px var(--sel-soft); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
.menu { list-style: none; margin: 0; padding: 0; }
.menu.sub { padding-left: 8px; border-left: 1px solid var(--line); margin-left: 16px; }
.menu-item, .menu-head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 9px; border: 0; border-left: 3px solid transparent; border-radius: 5px; background: transparent; text-align: left; cursor: pointer; }
.menu-item .bi, .menu-head .bi { color: #6e7480; font-size: 15px; width: 16px; text-align: center; }
.menu-item:hover, .menu-head:hover, .menu-item.hi { background: var(--hover); }
.menu-item.active { background: var(--sel-soft); border-left-color: var(--accent-line); font-weight: 600; }
.menu-head { font-weight: 600; }
.menu-head .chev { margin-left: auto; }
.menu-head .chev .bi { font-size: 11px; transition: transform .15s; }
.menu-group.open > .menu-head .chev .bi { transform: rotate(90deg); }
.menu-item.missing { color: var(--muted); font-style: italic; }
.menu-item small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.mi-sp { width: 16px; flex: none; }

.workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.tabstrip-frame { position: relative; flex: none; border-bottom: 1px solid var(--line-strong); background: var(--bg); }
.tabstrip { display: flex; gap: 2px; padding: 6px 8px 0; overflow-x: auto; }
.tab { display: flex; align-items: center; gap: 4px; padding: 5px 6px 5px 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; background: #e2e0d9; cursor: pointer; white-space: nowrap; max-width: 260px; flex: none; overflow: hidden;
  animation: tab-in .2s var(--ease); }
.tab.closing { animation: tab-out .16s ease-in forwards; pointer-events: none; }
@keyframes tab-in { from { max-width: 0; opacity: 0; padding-left: 0; padding-right: 0; } }
@keyframes tab-out { to { max-width: 0; opacity: 0; padding-left: 0; padding-right: 0; border-width: 0; } }
.tab span { overflow: hidden; text-overflow: ellipsis; }
.tab.active { background: var(--surface); font-weight: 600; box-shadow: inset 0 3px 0 var(--accent); }
.tab-x { display: inline-grid; place-items: center; border: 0; background: transparent; cursor: pointer; font-size: 15px; color: var(--muted); border-radius: 4px; width: 20px; height: 20px; padding: 0; }
.tab-x:hover { background: rgba(0, 0, 0, .08); color: var(--text); }
.tabpane { display: none; flex: 1; min-height: 0; overflow: auto; }
.tabpane.active { display: flex; flex-direction: column; animation: fade-in .18s ease; }
.empty-state { margin: auto; text-align: center; padding: 60px; color: var(--muted); }
.empty-state img { width: 140px; opacity: .55; }
.empty-state h2 { font-weight: 500; margin-top: 10px; }

/* Screens */
.screen { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; flex: none; }
.screen.browse, .screen.tree, .screen.composite { flex: 1; min-height: 0; }
.screen.compact { padding: 0; gap: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.param-form { max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
.subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-strong); flex: none; }
.subtab { padding: 6px 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer; color: var(--muted); font-weight: 500; }
.subtab:hover { color: var(--text); }
.subtab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

/* Fields */
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.grid-field { align-items: flex-start; }
.grid-edit { border-collapse: collapse; width: 100%; max-width: 560px; }
.grid-edit th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 2px 6px 2px 0; }
.grid-edit td { padding: 2px 6px 2px 0; }
.grid-edit td .field { width: 100%; }
.field .lbl { font-size: 12px; color: var(--muted); font-weight: 500; }
.field .req { color: var(--danger); margin-left: 2px; }
.field input, .field select, .field textarea { height: 30px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; min-width: 0; }
.field textarea { height: auto; padding: 7px 9px; resize: vertical; }
.field input[readonly], .field textarea[readonly] { background: var(--surface-2); color: #3b3f46; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--sel-soft); border-color: var(--accent-line); }
.field.check { flex-direction: row; align-items: center; gap: 7px; height: 30px; align-self: end; }
.field.check .lbl { font-size: 13px; color: var(--text); }
.field input[type=checkbox], .field.inline input[type=checkbox] { accent-color: var(--accent-line); width: 15px; height: 15px; min-width: 0; padding: 0; margin: 0; }
/* Inline fields: label beside the input, as in the Clarion filter groups */
.field.inline { flex-direction: row; align-items: center; gap: 6px; }
.field.inline .lbl { font-size: 12px; color: #39404a; font-weight: 500; white-space: nowrap; }
.field.inline input, .field.inline select { height: 26px; padding: 0 6px; font-size: 12px; min-width: 40px; }
.field.inline.check { height: 26px; align-self: center; gap: 5px; }
.field.inline.check .lbl { font-size: 12px; }
.field.inline.search input { width: 220px; }
/* Date typed as dd.mm.gggg. (DateField in screen.js); the button opens the browser's calendar,
   which sits invisible under it. */
.date-field { position: relative; display: inline-flex; align-items: center; min-width: 118px; }
.field .date-field input:not(.date-native) { flex: 1; width: 100%; padding-right: 26px; }
.field .date-field input.invalid { border-color: var(--danger); background: var(--danger-soft); }
.date-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.date-btn:hover { background: var(--hover); color: var(--text); }
.field .date-field input.date-native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; min-width: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* Lists */
.browse-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 10px; flex: 1 1 auto; min-height: 220px; transition: grid-template-columns .22s var(--ease); }
.browse-body.with-side { grid-template-columns: minmax(0, 1fr) var(--side-w, 320px); }
.browse-body > .splitter { right: calc(var(--side-w, 320px) + 2px); }
.browse-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; container-type: inline-size; }
.browse-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; }
.browse-side > .panel { flex: none; }
.browse-side .panel .grid-frame { max-height: 300px; }
/* A list in a side panel that has side panels of its own (Ugovori › Količina usluge › Za vrste posla)
   has no room beside it: its panels go under the list, inside the same frame. */
.browse-side .browse-body.with-side { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 6px; }
.browse-side .browse-body > .splitter { display: none; }
.browse-side .browse-side { overflow: visible; }
.browse-side .browse-side > .panel { border-color: var(--line-strong); }
.grid-frame { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 90px; }
.grid-wrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius) var(--radius) 0 0; outline: none; }
.grid-wrap:focus-visible { border-color: var(--accent-line); }
.grid-wrap.disabled { opacity: .5; pointer-events: none; }
.screen.compact:not(.embedded) .grid-frame, .modal .grid-frame { max-height: 55vh; }
.children .grid-frame { max-height: 260px; }
.grid-loading { position: sticky; top: 0; left: 0; height: 0; z-index: 3; display: flex; justify-content: center; }
.grid-loading .spinner { margin-top: 44px; background: rgba(255, 255, 255, .85); border-radius: 50%; box-shadow: 0 0 0 6px rgba(255, 255, 255, .85); }
.grid-wrap.busy tbody { opacity: .55; transition: opacity .15s; }
/* Widths come from <colgroup> (columnWidths in screen.js); the fixed layout keeps them. */
.grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 100%; font-size: 12.5px; }
.grid th { position: sticky; top: 0; z-index: 1; background: var(--head); color: #fff; text-align: left; font-weight: 600; padding: 5px 8px; border-right: 1px solid var(--head-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
.grid th { height: 28px; }
/* Two header rows when columns are grouped (headerRows in screen.js): the second sticks under the first. */
.grid thead tr + tr th { top: 28px; }
.grid th.grp { text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.grid th.sortable { cursor: pointer; }
.grid th.sortable:hover { background: var(--head-2); }
.grid th.sorted.asc::after { content: " ▲"; font-size: 9px; color: var(--accent); }
.grid th.sorted.desc::after { content: " ▼"; font-size: 9px; color: var(--accent); }
.grid td { padding: 3px 8px; height: 23px; border-bottom: 1px solid #efede7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid td.memo { white-space: normal; overflow-wrap: anywhere; }
.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.grid .ic { text-align: center; padding-left: 4px; padding-right: 4px; width: 1%; }
.grid tbody tr { cursor: default; }
.grid tbody tr:nth-child(even) td { background: #fbfaf7; }
.grid tbody tr:hover td { background: var(--hover); }
.grid tbody tr.sel td { background: var(--sel); color: #1d1a0c; }
.grid tbody tr.muted td { color: #8a8d93; }
.grid tbody tr.danger td { color: var(--danger); }
.grid tbody tr.warning td { color: var(--warn); }
.grid tbody tr.success td { color: var(--ok); }
.grid tbody tr.bold td { font-weight: 600; }
.grid tbody tr.accent td { font-weight: 600; color: #8a5a00; }
.grid tbody tr.accent td:first-child { box-shadow: inset 3px 0 0 var(--accent-line); }
.grid tbody tr.empty td { color: var(--muted); padding: 22px 0; background: transparent; }
/* The message stays in the visible part of a list wider than its frame. */
.grid .empty-msg { position: sticky; left: 0; text-align: center; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.dot.dot-done { background: #3aa655; }
.dot.dot-old { background: #9aa4ae; }
.dot.dot-open { background: #f2c618; }
.dot.dot-late { background: #d0261d; }
.dot.dot-closed { background: #7d8590; }
.cell-icon { color: #5f6670; }
.cell-icon .bi-folder-fill { color: #e0b100; }
.grid td.cell-danger { background: #c62828; color: #fff; font-weight: 600; }
.grid td.cell-ok { background: #2e7d32; color: #fff; font-weight: 600; }
.grid tbody tr.sel td.cell-danger { background: #ad1f1f; }
.grid tbody tr.sel td.cell-ok { background: #256b29; }
.tree-indent { display: inline-block; }
.tree-find { display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: var(--surface-2); border-bottom: 1px solid var(--line); flex: none; }
.tree-find .search-box { flex: 1; height: 26px; max-width: 360px; }
.screen.tree:not(.compact) .tree-find { border: 1px solid var(--line-strong); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.twisty, .twisty-sp { display: inline-block; width: 18px; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--muted); transition: transform .12s; font-size: 10px; }
.twisty.open { transform: rotate(90deg); }

/* Action bar under a list (Clarion buttons sit right under the list) */
.actionbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 4px 6px; background: #f1efe9; border: 1px solid var(--line-strong); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); flex: none; min-height: 36px; }
.actionbar.slim { min-height: 0; padding: 3px 8px; justify-content: flex-end; }
.actionbar .total { font-size: 12px; color: #444; padding: 0 4px; }
.actionbar .total b { color: #111; }
.actionbar .tree-summary b.within { color: var(--ok); }
.actionbar .tree-summary b.over { color: var(--danger); }
.actionbar .count { font-size: 12px; color: var(--muted); padding: 0 4px; min-width: 24px; text-align: right; }
.actionbar label.inline { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.actionbar select { height: 26px; border: 1px solid var(--line-strong); border-radius: 5px; padding: 0 6px; background: #fff; font-size: 12px; }
@container (max-width: 520px) {
  .actionbar .btn span { display: none; }
  .actionbar .btn.small { padding: 0 6px; }
  .actionbar .sortsel select { max-width: 110px; }
}

/* Filter panel (Clarion Group8 style: grey-blue band at the bottom of the window) */
.filterbar { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; background: var(--filter-bg); border: 1px solid var(--filter-line); border-radius: var(--radius); flex: none; }
.filter-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; flex: 1; min-width: 0; }
.filter-fields .row-break { flex-basis: 100%; height: 0; }
.filter-actions { display: flex; gap: 6px; align-items: center; }
.filterbar .field.inline input, .filterbar .field.inline select { border-color: #b9c5cd; }

/* Panels */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.panel-head, .pane-head { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; min-height: 30px; background: linear-gradient(180deg, var(--steel), var(--steel-2)); color: #fff; font-size: 12.5px; font-weight: 600; flex: none; }
.pane-head .btn.icon { background: transparent; border-color: transparent; color: #fff; }
.pane-head .btn.icon:hover:not(:disabled) { background: rgba(255, 255, 255, .18); border-color: transparent; }
.pane-head .btn.icon:disabled { opacity: .45; }
.panel .screen.compact { padding: 0 8px 8px; }
.detail { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; padding: 10px 12px; }
.detail dt { color: var(--muted); font-size: 12px; }
.detail dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
.children { display: flex; flex-direction: column; gap: 6px; flex: none; min-width: 0; }
.children-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; flex: none; align-items: stretch; }
.children-row > .panel { display: flex; flex-direction: column; max-height: 300px; overflow: auto; }
.pane-empty { min-height: 60px; flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.pane-empty .pane-head { border-radius: var(--radius) var(--radius) 0 0; }

/* Composite window: columns of linked panes, filters at the bottom */
.screen.composite { gap: 6px; }
.subtabs.sheet { margin-bottom: 2px; }
.cmp-page { display: none; flex: 1 1 auto; min-height: 300px; gap: 8px; grid-template-rows: minmax(0, 1fr); }
.cmp-page.active { display: grid; }
.cmp-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; overflow-y: auto; }
.pane { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
/* Pane heights are shares of the column (fill 2, md 1.5, sm 1), so a column never runs past the window. */
.pane.h-fill { flex: 2 1 0; min-height: 120px; }
.pane.h-md { flex: 1.5 1 0; min-height: 120px; }
.pane.h-sm { flex: 1 1 0; min-height: 100px; }
.pane.h-xs { flex: 0 0 auto; }
.pane .subtabs { overflow-x: auto; scrollbar-width: thin; }
.pane .subtab { padding: 6px 9px; white-space: nowrap; }
.pane-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pane .screen.compact { flex: 1; min-height: 0; }
.pane .browse-body { min-height: 0; }
.pane .grid-wrap { border: 0; border-radius: 0; }
.pane .actionbar { border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; }
.pane .pane-empty { border: 0; border-radius: 0; }
.pane-tabs { display: flex; gap: 2px; padding: 3px 4px 0; background: var(--steel-soft); border-bottom: 1px solid var(--line-strong); flex: none; }
.pane-tab { padding: 4px 10px; border: 1px solid transparent; border-bottom: 0; border-radius: 5px 5px 0 0; background: transparent; cursor: pointer; font-size: 12px; color: #4b5563; }
.pane-tab.active { background: var(--surface); border-color: var(--line-strong); font-weight: 600; color: var(--text); box-shadow: inset 0 2px 0 var(--accent); }
/* Folding side panels (useFolded in screen.js): a folded panel keeps only its head; a side column
   whose panels are all folded is a strip of vertical cards. */
.fold-btn { display: inline-grid; place-items: center; width: 24px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; flex: none; }
.fold-btn:hover { background: rgba(255, 255, 255, .2); }
.pane-tabs .fold-btn { color: #4b5563; align-self: center; }
.pane-tabs .fold-btn:hover { background: rgba(0, 0, 0, .07); }
.pane-head.folded, .panel.folded > .panel-head { cursor: pointer; }
.pane.folded { flex: none; height: auto; min-height: 0; }
.panel.folded { flex: none; }
.browse-body.with-side.side-folded { grid-template-columns: minmax(0, 1fr) var(--strip-w); }
.browse-side.folded > .panel, .cmp-col.folded > .pane { display: none; }
.fold-strip { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: auto; }
.fold-card { writing-mode: vertical-rl; display: block; width: 100%; max-height: 240px; padding: 10px 0; border: 0; border-radius: var(--radius); background: linear-gradient(90deg, var(--steel), var(--steel-2)); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold-card:hover { background: var(--steel-2); }
.text-pane { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.text-pane textarea { flex: 1; min-height: 40px; border: 0; padding: 7px 9px; resize: none; background: var(--surface-2); outline: none; font-size: 12.5px; }
.text-pane textarea:not([readonly]) { background: #fff; }
.text-pane textarea:not([readonly]):focus { box-shadow: inset 0 0 0 2px var(--sel-soft); }
.pane.h-xs .text-pane textarea { flex: none; height: 30px; font-weight: 600; }
.text-pane.busy textarea { opacity: .5; }

/* Calendar */
.calendar { padding: 10px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dow { text-align: center; font-size: 11px; color: var(--muted); font-weight: 600; }
.dow.we, .day.we { color: var(--danger); }
.day { height: 28px; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; }
.day:hover { border-color: var(--accent-line); background: var(--hover); }
.day.today { border-color: var(--accent-line); font-weight: 700; }
.day.picked { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-line); font-weight: 700; }

/* Alerts */
.alert { padding: 8px 12px; border-radius: 5px; font-size: 13px; }
.alert.error { background: var(--danger-soft); color: var(--danger); }
.alert.info { background: var(--warn-soft); color: var(--warn); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }

/* Context menu */
.ctx-menu { position: fixed; z-index: 80; min-width: 190px; max-width: 320px; padding: 4px; background: #fff; border: 1px solid var(--line-strong); border-radius: 7px; box-shadow: var(--shadow-lg); }
.ctx-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 10px; border: 0; border-radius: 5px; background: transparent; text-align: left; cursor: pointer; }
.ctx-item .bi { width: 16px; color: #5f6670; }
.ctx-item:hover:not(:disabled) { background: var(--sel-soft); }
.ctx-item:disabled { opacity: .4; cursor: default; }
.ctx-item small { margin-left: auto; color: var(--muted); }
.ctx-sep { height: 1px; margin: 4px 6px; background: var(--line); }

/* Modal */
.modal-back { position: fixed; inset: 0; background: rgba(25, 25, 18, .38); display: grid; place-items: center; z-index: 50; padding: 24px; }
.modal { width: min(980px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 16px 18px; border-top: 4px solid var(--accent); }
.modal .screen { padding: 0; }
.record { display: flex; flex-direction: column; gap: 12px; }
.record-head { display: flex; align-items: center; gap: 10px; }
.row-actions { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.modal.wide { width: min(1200px, 100%); }
.picker { display: flex; gap: 4px; align-items: center; }
.picker input { flex: 1; height: 30px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface-2); min-width: 0; }
.field.inline .picker input { height: 26px; }
.form-page .record { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }

/* Drag handle on the edge of a side column (ui.js Splitter) */
.splitter { position: absolute; top: 0; bottom: 0; z-index: 6; width: 6px; cursor: col-resize; touch-action: none; outline: none; }
.splitter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 2px; border-radius: 2px; background: transparent; transition: background .15s; }
.splitter:hover::after, .splitter:focus-visible::after, body.resizing .splitter::after { background: var(--accent-line); }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing * { transition: none !important; }
.cmp-page { position: relative; }

/* Scroll edges: shadows on the sides of an area that has more content that way (ui.js) */
:where(.sidenav-scroll, .tabpane, .cmp-col, .browse-side, .fold-strip, .modal, .pane-tabs, .pane .subtabs, .menu.results, textarea) {
  --sh-t: 0 0 #0000; --sh-b: 0 0 #0000; --sh-l: 0 0 #0000; --sh-r: 0 0 #0000;
}
[data-edges~="t"] { --sh-t: inset 0 11px 9px -9px var(--edge-shadow); }
[data-edges~="b"] { --sh-b: inset 0 -11px 9px -9px var(--edge-shadow); }
[data-edges~="l"] { --sh-l: inset 11px 0 9px -9px var(--edge-shadow); }
[data-edges~="r"] { --sh-r: inset -11px 0 9px -9px var(--edge-shadow); }
.sidenav-scroll, .tabpane, .cmp-col, .browse-side, .fold-strip, .pane-tabs, .pane .subtabs, .menu.results, .field textarea, .text-pane textarea {
  box-shadow: var(--sh-t), var(--sh-b), var(--sh-l), var(--sh-r);
}
.modal { box-shadow: var(--shadow-lg), var(--sh-t), var(--sh-b), var(--sh-l), var(--sh-r); }
/* Lists and the tab strip: their rows and tabs would cover an inset shadow, so it lies over them. */
.edge { position: absolute; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.edge.t { top: var(--head-h, 0px); left: 0; right: 0; height: 12px; background: linear-gradient(to bottom, var(--edge-shadow), transparent); }
.edge.b { bottom: 0; left: 0; right: 0; height: 12px; background: linear-gradient(to top, var(--edge-shadow), transparent); }
.edge.l { top: 0; bottom: 0; left: 0; width: 12px; background: linear-gradient(to right, var(--edge-shadow), transparent); }
.edge.r { top: 0; bottom: 0; right: 0; width: 12px; background: linear-gradient(to left, var(--edge-shadow), transparent); }
.grid-wrap[data-edges~="t"] ~ .edge.t, .grid-wrap[data-edges~="b"] ~ .edge.b, .grid-wrap[data-edges~="l"] ~ .edge.l, .grid-wrap[data-edges~="r"] ~ .edge.r,
.tabstrip[data-edges~="l"] ~ .edge.l, .tabstrip[data-edges~="r"] ~ .edge.r { opacity: 1; }
.grid-frame > .edge.b { border-radius: 0 0 2px 2px; }

/* Opening and closing: short and soft, never instant. Panels fold after their content fades
   (useFolded in screen.js), tabs slide away before they go (main.js). */
@keyframes fade-in { from { opacity: 0; } }
@keyframes reveal { from { opacity: 0; transform: translateY(-5px); } }
@keyframes conceal { to { opacity: 0; transform: translateY(-5px); } }
@keyframes strip-in { from { opacity: 0; transform: translateX(8px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.panel.opening > :not(.panel-head), .pane.opening > .pane-body, .pane.folded > .pane-head { animation: reveal .2s var(--ease); }
.panel.closing > :not(.panel-head), .pane.closing > .pane-body { animation: conceal .17s ease-in forwards; }
.fold-strip { animation: strip-in .2s var(--ease); }
.menu.sub { animation: reveal .18s var(--ease); }
.cmp-page { transition: grid-template-columns .22s var(--ease); }
.modal-back { animation: fade-in .16s ease; }
.modal { animation: pop-in .18s var(--ease); }
.ctx-menu { animation: fade-in .12s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 900px) {
  /* narrow window: a pinned menu also lies over the workspace */
  .shell.nav-pinned { grid-template-columns: var(--rail-w) 1fr; }
  .shell.nav-pinned .sidenav { position: relative; z-index: 30; width: var(--nav-w); box-shadow: var(--shadow-lg); }
  .browse-body.with-side { grid-template-columns: 1fr; }
  .topbar-title { display: none; }
  .cmp-page.active { display: flex; flex-direction: column; }
}

/* Replay of a session log (replay.js): the bar lies under the shell, the log panel over the right edge. */
body.replaying { --replay-h: 46px; }
body.replaying .shell { height: calc(100vh - var(--replay-h)); }
.replay-bar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--replay-h); z-index: 200; display: flex; align-items: center; gap: 12px; padding: 0 12px;
  background: #2a2512; color: #f4f1e6; font-size: 12px; box-shadow: 0 -4px 16px rgba(0, 0, 0, .18); }
.replay-bar .icon-btn, .replay-bar .btn.ghost { color: #f4f1e6; border-color: transparent; background: transparent; }
.replay-bar .icon-btn:hover:not(:disabled), .replay-bar .btn.ghost:hover:not(:disabled), .replay-bar .on { background: rgba(255, 255, 255, .12); color: var(--accent); }
.replay-bar .icon-btn:disabled { opacity: .4; }
.replay-bar select { height: 26px; background: #3a3420; color: #f4f1e6; border: 1px solid #5a5236; border-radius: 4px; }
.replay-bar small { display: block; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replay-bar .muted { color: #c9c3ad; }
.replay-who { white-space: nowrap; }
.replay-who .bi { color: var(--accent); }
.replay-controls { display: flex; align-items: center; gap: 2px; }
.replay-step { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replay-note { max-width: 30%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replay-panel { position: fixed; top: var(--top-h); right: 0; bottom: var(--replay-h); width: min(560px, 45vw); z-index: 190; display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); }
.replay-panel > header { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.replay-panel > header label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.replay-panel .spacer { flex: 1; }
.replay-list { flex: 1; margin: 0; padding: 0; list-style: none; overflow: auto; font-size: 12px; }
.replay-list li { display: flex; align-items: center; gap: 8px; padding: 3px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.replay-list li:hover { background: var(--hover); }
.replay-list .time { color: var(--muted); font-variant-numeric: tabular-nums; }
.replay-list .what { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replay-list .t-api .what { color: #1d5fa8; }
.replay-list .t-sql .what { color: #6d7078; font-family: Consolas, monospace; }
.replay-list .t-session, .replay-list .t-end { font-weight: 600; background: #faf7ea; }
.replay-list .done { opacity: .55; }
.replay-list .cur { background: #fff3bf; opacity: 1; }
.replay-list .picked { outline: 1px solid var(--accent-line); outline-offset: -1px; }
.replay-list .bad .what { color: #b42318; }
.replay-list .icon-btn { width: 22px; height: 22px; }
.replay-detail { max-height: 40%; overflow: auto; border-top: 1px solid var(--line-strong); padding: 6px 10px; }
.replay-detail pre { margin: 0 0 8px; font: 11px/1.4 Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.replay-detail pre.sql { padding: 6px; background: #f6f5f0; border-radius: 4px; }
.replay-detail h4 { margin: 6px 0; font-size: 12px; }
.replay-hit { outline: 2px solid #e8590c !important; outline-offset: 1px; }
.replay-tap { position: fixed; z-index: 180; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; pointer-events: none;
  background: rgba(40, 40, 30, .26); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); animation: tap .65s ease-out forwards; }
.replay-tap.double { animation: tap .65s ease-out forwards, tap-again .65s ease-out .14s; }
.replay-tap.aux { background: rgba(242, 198, 24, .32); box-shadow: 0 0 0 2px rgba(217, 171, 0, .8); }
@keyframes tap { from { opacity: .9; transform: scale(.45); } to { opacity: 0; transform: scale(1.5); } }
@keyframes tap-again { from { opacity: .9; transform: scale(.45); } to { opacity: 0; transform: scale(1.5); } }
.replay-rewind { position: fixed; left: 0; right: 0; top: 0; bottom: var(--replay-h); z-index: 150; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--bg); color: var(--muted); font-size: 15px; }
.replay-load .login-card.over { outline: 2px dashed var(--accent-line); }
.replay-pick { position: relative; overflow: hidden; flex-direction: row !important; justify-content: center; }
.replay-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.replay-load h3 { margin: 4px 0 0; display: flex; gap: 8px; align-items: center; }

/* Attachments: marks for delete / pdf, picture of the selected attachment. */
.mark-dialog { width: min(560px, 92vw); }
.mark-tools { display: flex; gap: 6px; margin: 8px 0 4px; }
.mark-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.mark-list li { border-bottom: 1px solid var(--line); }
.mark-list li:last-child { border-bottom: 0; }
.mark-list label { display: flex; align-items: center; gap: 10px; padding: 6px 10px; cursor: pointer; }
.mark-list label:hover { background: var(--hover); }
.mark-list span:nth-of-type(2) { flex: 1; }
.btn.danger { background: #b42318; border-color: #8f1c13; color: #fff; font-weight: 600; }
.btn.danger:hover:not(:disabled) { background: #c8321f; }
.image-pane { padding: 8px; display: grid; place-items: center; }
.image-pane img { max-width: 100%; max-height: 60vh; object-fit: contain; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
/* Faros report parameters beside the report tree (IZVJESTAJI_W). */
.faros-report { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.faros-report .field { display: grid; grid-template-columns: 1fr; gap: 3px; }
.faros-report .field input, .faros-report .field select { width: 100%; }
.faros-title { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }

/* A form field's wrapper for Ctrl+H (ditto): no box of its own, the field stays in the form's grid. */
.field-slot { display: contents; }

/* A required field left empty on Spremi (RecordEditor): red until it gets a value; its tab too. */
.field-slot.invalid .lbl { color: var(--danger); }
.field-slot.invalid input:not(.date-native), .field-slot.invalid select, .field-slot.invalid textarea { border-color: var(--danger); background: var(--danger-soft); }
.field-slot.invalid input:focus, .field-slot.invalid select:focus, .field-slot.invalid textarea:focus { outline-color: rgba(208, 38, 29, .18); }
.subtab.invalid { color: var(--danger); }
.subtab.invalid::after { content: " •"; }

/* Drop list with "x" inside it: empties the value (no empty first item in the list). */
.select-wrap { position: relative; display: flex; min-width: 0; }
.select-wrap select { flex: 1; width: 100%; }
.select-wrap.clearable select { padding-right: 24px; }
.select-clear { position: absolute; right: 21px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: -6px 0 6px #fff; color: var(--muted); cursor: pointer; font-size: 10px; opacity: 0; pointer-events: none; transition: opacity .12s; }
/* The x shows while the pointer is over the field or it has the focus, so a narrow list keeps its text. */
.select-wrap.clearable:hover .select-clear, .select-wrap.clearable:focus-within .select-clear { opacity: 1; pointer-events: auto; }
.select-clear:hover { background: var(--line); color: var(--text); }
.picker .select-wrap { flex: 1; }
.field.inline .select-wrap select { height: 26px; }

/* Messages inside the application (ui.js DialogHost, Clarion MESSAGE): above every modal. */
.modal-back.msg-back { z-index: 90; }
.modal.msg-box { width: min(460px, 100%); padding: 18px 20px 14px; }
.msg-body { display: flex; gap: 14px; align-items: flex-start; }
.msg-body h3 { margin: 0 0 6px; font-size: 15px; }
.msg-body p { margin: 0; white-space: pre-line; line-height: 1.45; }
.msg-icon { font-size: 26px; line-height: 1; color: var(--steel-2); }
.msg-box.warning .msg-icon { color: var(--warn); }
.msg-box.error .msg-icon { color: var(--danger); }
.msg-box .row-actions { justify-content: flex-end; padding-top: 16px; }

/* Form with its general fields above the tabs of long texts (RecordEditor topLayout). */
.record > .subtabs.sheet { margin-top: 4px; }
.record .field.wide textarea { min-height: 120px; }
/* Height of a side panel (ui.js HeightSplitter): the handle lies in the gap between two panels. */
.hsplitter { position: relative; z-index: 5; flex: none; height: 8px; margin: -8px 0; cursor: row-resize; touch-action: none; outline: none; }
.browse-side > .hsplitter { margin: -9px 0; }
.hsplitter::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; border-radius: 2px; background: transparent; transition: background .15s; }
.hsplitter:hover::after, .hsplitter:focus-visible::after, body.resizing-v .hsplitter::after { background: var(--accent-line); }
body.resizing-v { cursor: row-resize; user-select: none; }
body.resizing-v * { transition: none !important; }
.browse-side > .panel.sized { display: flex; flex-direction: column; }
.browse-side > .panel.sized > :not(.panel-head) { flex: 1 1 auto; min-height: 0; overflow: auto; }
.browse-side .panel.sized .grid-frame { max-height: none; }
/* Conversation of comments (screen.js ChatView) in a small window; the messages scroll. */
.modal.chat-dialog { width: min(560px, 100%); display: flex; flex-direction: column; gap: 10px; }
.modal.action-dialog { width: min(560px, 100%); }
.chat { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.chat-list { display: flex; flex-direction: column; gap: 8px; max-height: min(55vh, 520px); min-height: 120px; overflow-y: auto; padding: 4px 2px; }
.chat-msg { align-self: flex-start; max-width: 82%; padding: 7px 10px; border-radius: 10px 10px 10px 3px; background: var(--steel-soft); border: 1px solid var(--filter-line); }
.chat-msg.mine { align-self: flex-end; border-radius: 10px 10px 3px 10px; background: var(--sel-soft); border-color: var(--accent-2); }
.chat-meta { display: flex; gap: 8px; align-items: baseline; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.chat-meta b { color: var(--text); font-weight: 600; }
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.chat-new { display: flex; gap: 6px; align-items: flex-end; }
.chat-new textarea { flex: 1; resize: vertical; min-height: 40px; max-height: 160px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; }
.chat-new textarea:focus { outline: 2px solid var(--sel-soft); border-color: var(--accent-line); }
.chat-new .btn { height: 38px; }
/* An icon in a list cell that opens something (column.iconAction): a link, not decoration. */
.cell-icon.link { cursor: pointer; border: 0; background: transparent; padding: 0 2px; color: var(--steel-2); }
.cell-icon.link:hover { color: var(--accent-line); }