/* NovaDome shared shell skin — dark charcoal sidebar, light top bar with
   "+", bell and avatar. Loaded LAST in <head> on every page so it wins over
   each page's own copy of the old shell CSS. Layout/colour only: page
   content, ids and scripts are untouched. The markup it relies on is built
   by nd-sidebar.js (brand block, avatar menu, "+" menu). */
:root {
  --nd-side: #2C2C2A;
  --nd-side-ink: #CFC4AE;
  --nd-side-act: #3B3B38;
  --nd-panel: #FCFAF6;
  --nd-line2: #EFE9DD;
  --nd-link: #8A5A17;
  --nd-top-h: 60px;
  --nd-side-w: 224px;
  --nd-bad: #AB3D2E;
}

/* ---------- top bar ---------- */
header.topbar, header.nd-shell-topbar {
  background: var(--nd-panel) !important;
  color: var(--nd-text) !important;
  border-bottom: 1px solid var(--nd-border);
  height: var(--nd-top-h); min-height: var(--nd-top-h);
  padding: 0 28px !important;
  justify-content: flex-end !important;
  position: relative; z-index: 35;
  transition: margin-left .18s ease;
}
@media (min-width: 901px) {
  header.topbar, header.nd-shell-topbar { margin-left: var(--nd-side-w); }
  body.nd-sidebar-collapsed header.topbar, body.nd-sidebar-collapsed header.nd-shell-topbar { margin-left: 68px; }
  .nd-brand-area { display: none !important; }
}
header .nd-brand-area .nd-wordmark, header .nd-brand-area .org-logo { display: none !important; }
header .nd-hamburger-btn { color: var(--nd-text); margin: 0 4px 0 -8px; }
header .nd-hamburger-btn:hover { background: var(--nd-line2); }
header .nd-brand-area { margin-right: auto; }
header .who, header .nd-shell-who { gap: 6px !important; flex-wrap: nowrap !important; align-items: center; }

/* the old name / account / sign-out icons are replaced by the avatar menu
   (the elements stay in the page — the menu presses them) */
header #who-name, header #shell-who-name,
header #account-tab-btn, header #shell-account-link,
header #logout-btn, header #shell-logout-btn { display: none !important; }

/* round icon buttons: bell, "+" */
header .who .link, header .nd-shell-who .link,
header .nd-ibtn {
  position: relative;
  display: inline-grid !important; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  color: var(--nd-text) !important; text-decoration: none;
}
header .who .link:hover, header .nd-shell-who .link:hover, header .nd-ibtn:hover { background: var(--nd-line2); color: var(--nd-text) !important; }
header .nd-ibtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
header .nd-ibtn.plus { background: var(--nd-accent); color: var(--nd-charcoal) !important; width: 30px; height: 30px; }
header .nd-ibtn.plus:hover { background: var(--nd-accent); filter: brightness(.94); color: var(--nd-charcoal) !important; }
header .nd-ibtn.plus svg { width: 18px; height: 18px; stroke-width: 2.4; }
header .nd-bell-count { background: var(--nd-bad) !important; color: #fff !important; top: 0 !important; right: -2px !important; min-width: 18px !important; height: 18px !important; line-height: 18px !important; font-size: 11px !important; }

/* avatar */
header .nd-avatar {
  display: inline-grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: #F6E2C4; color: var(--nd-link); font: 700 13px 'Urbanist', sans-serif;
}
header .nd-avatar:hover, header .nd-avatar[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--nd-accent); }
.nd-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; min-width: 220px;
  background: var(--nd-panel); color: var(--nd-text);
  border: 1px solid var(--nd-border); border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 30px rgba(44,44,42,.22); font-family: 'Urbanist', sans-serif; text-align: left;
}
.nd-pop.hidden { display: none !important; }
.nd-pop-who { padding: 8px 12px 6px; border-bottom: 1px solid var(--nd-line2); margin-bottom: 4px; }
.nd-pop-who b { display: block; font-size: 14px; }
.nd-pop-who small { color: #6b6558; font-size: 12px; text-transform: capitalize; }
.nd-pop a, .nd-pop button.nd-pmi {
  display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 8px 12px; border-radius: 8px; font: 600 13px 'Urbanist', sans-serif; color: var(--nd-text); text-decoration: none;
}
.nd-pop a:hover, .nd-pop button.nd-pmi:hover { background: var(--nd-line2); }
.nd-pop .nd-pmi-head { padding: 6px 12px 2px; font: 700 11px 'Urbanist', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6b6558; }
.nd-pop-wrap { position: relative; display: inline-flex; }

/* bell popup matches the new panel colour */
.nd-bell-menu { background: var(--nd-panel) !important; border: 1px solid var(--nd-border); border-radius: 12px !important; }

/* ---------- sidebar ---------- */
body #nd-sidebar {
  background: var(--nd-side); color: var(--nd-side-ink);
  border-right: 0; width: var(--nd-side-w);
  padding: 18px 12px; gap: 14px;
  scrollbar-width: thin; scrollbar-color: #4a4a46 transparent;
}
body.nd-sidebar-collapsed #nd-sidebar { width: 68px; padding: 14px 8px; }
@media (min-width: 901px) {
  body #nd-sidebar { margin-top: calc(var(--nd-top-h) * -1); }
}
/* A sticky sidebar is its own stacking layer, and its pop-out menus live inside it — so with no z-index of their
   own they ranked below any page content that has one (the task grid's sticky columns and drag handles showed
   straight through the menu). Above page content (up to ~6), below dialogs (60+). */
body #nd-sidebar { z-index: 45; }
body #nd-sidebar .nd-sidebar-section-label { color: #C4996A; letter-spacing: .12em; font-size: 11px; }
body #nd-sidebar .nd-sidebar-sublabel { color: #C4996A; }
body #nd-sidebar .nd-sidebar-item {
  color: var(--nd-side-ink); font-weight: 600; font-size: 13.5px; position: relative;
}
body #nd-sidebar .nd-sidebar-item:hover { background: var(--nd-side-act); color: #F5F0E8; }
body #nd-sidebar .nd-sidebar-item.active,
body #nd-sidebar .nd-sidebar-item.nd-bm-item.active {
  background: var(--nd-side-act); color: #F5F0E8; box-shadow: inset 3px 0 0 var(--nd-accent);
}
body #nd-sidebar .nd-sidebar-divider { border-top-color: #ffffff1f; }
body #nd-sidebar .nd-bm-hint { color: #9c9484; }
body #nd-sidebar .nd-sidebar-item .nd-pin.on, body #nd-sidebar .nd-star.on { color: var(--nd-accent); }
body #nd-sidebar .nd-sidebar-item.active .nd-pin.on { color: var(--nd-accent); }
body #nd-sidebar .nd-bm-star svg { fill: var(--nd-accent); }
body #nd-sidebar .nd-bm-star.active svg { fill: var(--nd-accent); }
body #nd-sidebar .nd-star { color: #9c9484; }

/* sub-lists (Settings tabs, Production views) */
body #nd-sidebar .nd-settings-sub, body #nd-sidebar .nd-prod-sub, body #nd-sidebar .nd-sidebar-sub { border-left-color: #ffffff22; }
body #nd-sidebar .nd-sub-row:hover { background: var(--nd-side-act); }
body #nd-sidebar .nd-sub-row a { color: var(--nd-side-ink); }
body #nd-sidebar .nd-sub-row:hover a { color: #F5F0E8; }
body #nd-sidebar .nd-sub-row.active a { color: var(--nd-accent); }
body #nd-sidebar .nd-prod-sub .nd-sidebar-subitem, body #nd-sidebar .nd-sidebar-subitem { color: var(--nd-side-ink); }
body #nd-sidebar .nd-prod-sub .nd-sidebar-subitem:hover, body #nd-sidebar .nd-sidebar-subitem:hover { background: var(--nd-side-act); color: #F5F0E8; }
body #nd-sidebar .nd-prod-sub .nd-sidebar-subitem.active, body #nd-sidebar .nd-sidebar-subitem.active { background: var(--nd-side-act); color: #F5F0E8; box-shadow: inset 3px 0 0 var(--nd-accent); }

/* brand block + collapse button at the top of the sidebar */
body #nd-sidebar .nd-sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 6px; padding: 2px 0 8px; }
body #nd-sidebar .nd-brand-link { display: block; line-height: 0; padding: 4px 4px 0 6px; min-width: 0; }
body #nd-sidebar .nd-brand-link img { display: block; height: auto; }
body #nd-sidebar .nd-brand-full { width: 150px; max-width: 100%; }
/* img.nd-brand-mark: the rule above (.nd-brand-link img) is more specific than a bare class, which let the small circle show under the wordmark when the sidebar was open */
body #nd-sidebar .nd-brand-link img.nd-brand-mark { display: none; width: 30px; height: 30px; }
body #nd-sidebar .nd-sidebar-collapse-btn { color: var(--nd-side-ink); width: 34px; min-height: 34px; height: 34px; flex: none; }
body #nd-sidebar .nd-sidebar-collapse-btn:hover { background: #ffffff22; color: #fff; }
body.nd-sidebar-collapsed #nd-sidebar .nd-sidebar-top { flex-direction: column; gap: 10px; }
body.nd-sidebar-collapsed #nd-sidebar .nd-brand-link img.nd-brand-full { display: none; }
body.nd-sidebar-collapsed #nd-sidebar .nd-brand-link img.nd-brand-mark { display: block; }
body.nd-sidebar-collapsed #nd-sidebar .nd-brand-link { padding: 4px 0 0; }

.nd-sidebar-tip { background: #3B3B38 !important; color: #F5F0E8 !important; border: 1px solid #ffffff1a; }
.nd-sidebar-tip::before { border-right-color: #3B3B38 !important; }

/* sign-out now lives in the avatar menu on phones too */
body #nd-sidebar .nd-sidebar-signout { display: none !important; }

@media (max-width: 900px) {
  header.topbar, header.nd-shell-topbar { padding: 0 12px !important; }
  body #nd-sidebar { padding-top: 14px; margin-top: 0; width: min(310px, 88vw); box-shadow: 14px 0 40px rgba(0,0,0,.45); }
  body.nd-sidebar-collapsed #nd-sidebar { width: min(310px, 88vw); }
  body #nd-sidebar .nd-sidebar-top { display: flex; }
  body #nd-sidebar .nd-sidebar-collapse-btn { display: none; }
  body.nd-sidebar-collapsed #nd-sidebar .nd-brand-link img.nd-brand-full { display: block; }
  body.nd-sidebar-collapsed #nd-sidebar .nd-brand-link img.nd-brand-mark { display: none; }
  body.nd-sidebar-collapsed #nd-sidebar .nd-sidebar-top { flex-direction: row; }
  .nd-pop { position: fixed; top: calc(var(--nd-top-h) - 4px); right: 8px; }
}

/* =====================================================================
   Controls: dropdowns, inputs, checkboxes, buttons, tabs, toggles.
   One look for every page (CRM design system). Only the skin is set here —
   each page keeps its own widths, font sizes and layout. Inline table-cell
   editors (.cell), status pills and switches keep their own styling.
   ===================================================================== */
:root { --surface: #FCFAF6; --card: #FCFAF6; --nd-focus: 0 0 0 3px rgba(212,137,42,.22); }

/* ---- dropdowns ---- */
body select:not(.cell):not(.status-select):not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none;
  background-color: var(--nd-panel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B6558' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px 7px;
  border: 1px solid var(--nd-border); border-radius: 10px;
  padding-right: 32px; color: var(--nd-text);
  font-family: 'Urbanist', sans-serif; font-weight: 600; cursor: pointer;
  text-overflow: ellipsis;
}
body table select:not(.cell):not(.status-select):not([multiple]):not([size]) { padding-right: 22px; padding-left: 8px; background-position: right 7px center; background-size: 10px 6px; text-overflow: clip; }
body .team-pick summary { border-radius: 10px; border-color: var(--nd-border); background: var(--nd-panel); font-family: 'Urbanist', sans-serif; }
body select.inline-edit:disabled { background-image: none; border-color: transparent; background-color: transparent; padding-right: 0; }
body select:disabled { opacity: .6; cursor: not-allowed; }
body select:not(.cell):not(.status-select):hover:not(:disabled) { border-color: var(--nd-accent); }
body select option { font-weight: 500; color: var(--nd-text); background: #fff; }
/* the pill-shaped status dropdowns: same chevron, keep their colours */
body select.status-select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 10px 6px;
}
/* table-cell dropdowns: plain until hovered, but with a chevron so they read as dropdowns */
body select.cell {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239c9485' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; background-size: 10px 6px;
}

/* ---- text inputs & text areas ---- */
body input:not([type]):not(.cell), body textarea:not(.cell),
body input:is([type=text],[type=search],[type=email],[type=tel],[type=url],[type=number],[type=password],[type=date],[type=time],[type=datetime-local],[type=month]):not(.cell) {
  border: 1px solid var(--nd-border); border-radius: 10px;
  background-color: var(--nd-panel); color: var(--nd-text);
  font-family: 'Urbanist', sans-serif;
}
body input[type=search]:not(.cell) { border-radius: 999px; padding-left: 14px; padding-right: 14px; }
body input::placeholder, body textarea::placeholder { color: #9c9485; opacity: 1; font-weight: 400; }
body input:is([type=text],[type=search],[type=email],[type=tel],[type=url],[type=number],[type=password],[type=date],[type=time],[type=datetime-local],[type=month],:not([type])):not(.cell):hover:not(:disabled):not(:focus),
body textarea:not(.cell):hover:not(:disabled):not(:focus) { border-color: #d6cdb9; }
body input:is([type=text],[type=search],[type=email],[type=tel],[type=url],[type=number],[type=password],[type=date],[type=time],[type=datetime-local],[type=month],:not([type])):not(.cell):focus,
body textarea:not(.cell):focus, body select:not(.cell):focus {
  outline: none; border-color: var(--nd-accent); box-shadow: var(--nd-focus);
}
body input:disabled:not(.cell), body textarea:disabled:not(.cell) { opacity: .6; cursor: not-allowed; }
/* inputs that sit inside a styled wrapper (search boxes) stay borderless inside it */
/* !important: the generic text-input rules above out-rank this selector, which drew a second rounded box (a circle inside the circle) inside the pill */
body .search-box input, body .sbox input, body .rcp input,
body .search-box input:hover, body .search-box input:focus, body .sbox input:hover, body .sbox input:focus, body .rcp input:hover, body .rcp input:focus { border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
.search-box { border-radius: 999px !important; background: var(--nd-panel) !important; }
.search-box:focus-within { border-color: var(--nd-accent) !important; box-shadow: var(--nd-focus); }
body .dpick input { border-radius: 0; }

/* ---- checkboxes, radios, sliders, file picker ---- */
body input[type=checkbox], body input[type=radio], body input[type=range] { accent-color: var(--nd-accent); }
body input[type=checkbox], body input[type=radio] { width: 16px; height: 16px; cursor: pointer; }
body input[type=file]::file-selector-button {
  border: 1.5px solid var(--nd-border); background: var(--nd-panel); color: var(--nd-text); border-radius: 999px;
  padding: 6px 14px; margin-right: 10px; font: 600 13px 'Urbanist', sans-serif; cursor: pointer;
}
body input[type=file]::file-selector-button:hover { border-color: var(--nd-accent); }
body label:has(> input[type=checkbox]), body label:has(> input[type=radio]) { cursor: pointer; }

/* ---- buttons: pill shape, amber primary with charcoal text ---- */
body .btn { border-radius: 999px; font-family: 'Urbanist', sans-serif; font-weight: 600; }
body .btn:not(.btn-primary):not(.btn-danger):not(.danger):not(.btn-ghost) { border-color: var(--nd-border); }
body .btn:not(.btn-primary):not(.btn-danger):not(.danger):not(.btn-ghost):hover { border-color: var(--nd-accent); }
body .btn-primary { background: var(--nd-accent); border-color: var(--nd-accent); color: var(--nd-charcoal); font-weight: 700; }
body .btn-primary:hover:not(:disabled) { background: var(--nd-accent); filter: brightness(1.06); }
body .btn-danger { background: transparent; color: #AB3D2E; border-color: #AB3D2E; }
body .btn-danger:hover:not(:disabled) { background: #F6DCD4; }
/* main page (index) uses .btn as its primary button */
body #app-screen .btn:not(.secondary):not(.danger):not(.btn-primary) { color: var(--nd-charcoal); font-weight: 700; }
body #app-screen .btn:not(.secondary):not(.danger):not(.btn-primary):hover { background: var(--nd-accent); filter: brightness(1.06); }
body #app-screen .btn.secondary { color: var(--nd-text); border-color: var(--nd-border); background: var(--nd-panel); }
body #app-screen .btn.secondary:hover { border-color: var(--nd-accent); background: var(--nd-panel); }
body #app-screen .btn.danger { background: transparent; color: #AB3D2E; border: 1.5px solid #AB3D2E; }
body #app-screen .btn.danger:hover { background: #F6DCD4; filter: none; }
body .login-card button { color: var(--nd-charcoal); font-weight: 700; }
body .login-card button.secondary { color: var(--nd-text); }

/* ---- tabs & segmented controls: soft-amber / amber active state ---- */
body .tab.active, body .line-tab.active, body .view-tab.active, body .filter-chip.active { background: #F6E2C4; color: #8A5A17; border-color: transparent; font-weight: 700; }
body .kind-btn.active { color: var(--nd-charcoal); font-weight: 700; }
body .mode-toggle button.active { background: #F6E2C4; color: #8A5A17; border-color: var(--nd-accent); font-weight: 700; }
body .subtabs button { font-family: 'Urbanist', sans-serif; font-weight: 600; }
body .subtabs button.active { background: #F6E2C4; color: #8A5A17; border-color: transparent; font-weight: 700; }
body .seg button.on, body .segmented button.active { background: var(--nd-accent); color: var(--nd-charcoal); box-shadow: none; font-weight: 700; }
body nav.tabs button { font-family: 'Urbanist', sans-serif; font-weight: 600; }
body nav.tabs button.active { color: var(--nd-text); font-weight: 700; }

/* ---- Payables Desk scopes its own control styles under #payables-app, so match them here ---- */
body #payables-app .segmented button.active { background: var(--nd-accent); color: var(--nd-charcoal); box-shadow: none; font-weight: 700; }
body #payables-app .segmented { background: var(--nd-panel); border-color: var(--nd-border); }
body #payables-app .pay-input, body #payables-app .note-input { border-color: var(--nd-border); border-radius: 10px; background: var(--nd-panel); }
body #payables-app .pay-input:focus, body #payables-app .note-input:focus { outline: none; border-color: var(--nd-accent); box-shadow: var(--nd-focus); }

/* ---- compact page tops: no descriptive text under the title, controls beside it ---- */
body .main { padding-top: 14px; }
body .page-head, body .head-row, body .rd-head { margin-bottom: 10px; align-items: center; }
body .page-head .page-sub, body .head-row .page-sub, body .rd-head .page-sub { display: none; }
body .page-title { font-size: 20px; }
.ps-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.ps-title .project-select { min-width: 240px; max-width: 100%; }
/* Payables Desk header: one line, title with the week beside it */
body #payables-app .brand-row, body #payables-app .sync-status { display: none; }
body #payables-app .topbar { align-items: center; padding-bottom: 10px; }
body #payables-app .topbar-left { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
body #payables-app h1 { font-size: 20px; text-transform: none; letter-spacing: 0; font-weight: 700; }

/* ---- slim, themed scrollbars everywhere (tables, chip rows, panels) ---- */
html { scrollbar-color: #cdc3ae transparent; }
body * { scrollbar-width: thin; }
body ::-webkit-scrollbar { width: 10px; height: 10px; }
body ::-webkit-scrollbar-thumb { background: #cdc3ae; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
body ::-webkit-scrollbar-thumb:hover { background: #b9ad94; background-clip: content-box; }
body ::-webkit-scrollbar-track { background: transparent; }
body ::-webkit-scrollbar-button { display: none; }
body #nd-sidebar::-webkit-scrollbar-thumb { background: #4a4a46; background-clip: content-box; }

/* ---- Settings tabs in the menu ---- */
body #nd-sidebar .nd-settings-sub { margin: 4px 0 8px 18px; padding-left: 8px; gap: 2px; }
body #nd-sidebar .nd-sub-row { border-radius: 999px; min-height: 32px; }
body #nd-sidebar .nd-sub-row a { padding: 7px 12px; font-size: 13px; font-weight: 600; }
body #nd-sidebar .nd-sub-row.active { background: var(--nd-side-act); box-shadow: inset 3px 0 0 var(--nd-accent); }
body #nd-sidebar .nd-sub-row.active a { color: #F5F0E8; }

/* ---- Teams picker (Settings > Users) and the add-team row ---- */
body .team-pick summary {
  display: block; min-width: 118px; padding: 6px 28px 6px 10px; border: 1px solid var(--nd-border); border-radius: 10px;
  background-color: var(--nd-panel); color: var(--nd-text); font: 600 13px 'Urbanist', sans-serif; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B6558' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px;
}
body .team-pick summary::after { content: none !important; }
body .team-pick summary:hover { border-color: var(--nd-accent); }
body .team-pick[open] summary { border-color: var(--nd-accent); box-shadow: var(--nd-focus); }
body .team-pick .team-checks {
  min-width: 210px; padding: 8px; gap: 2px; border: 1px solid var(--nd-border); border-radius: 14px;
  background: var(--nd-panel); box-shadow: 0 14px 36px rgba(44,44,42,.2);
}
body .team-pick .team-checks label { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font: 600 13px 'Urbanist', sans-serif; }
body .team-pick .team-checks label:hover { background: var(--nd-line2); }
body #new-team-name { width: 220px; padding: 8px 12px; }
body #add-team-btn { min-height: 38px; padding: 8px 18px; }

/* ---- top-bar search ---- */
.nd-gsearch {
  position: relative; display: flex; align-items: center; gap: 8px;
  flex: 0 1 400px; min-width: 0; margin-right: auto; height: 36px; padding: 0 14px;
  background: var(--nd-panel); border: 1px solid var(--nd-border); border-radius: 999px;
}
.nd-gsearch:focus-within { border-color: var(--nd-accent); box-shadow: var(--nd-focus); }
.nd-gsearch > svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #8a8378; stroke-width: 2; stroke-linecap: round; }
body .nd-gsearch #nd-gsearch-input, body .nd-gsearch #nd-gsearch-input:focus, body .nd-gsearch #nd-gsearch-input:hover { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; padding: 0; font: 500 14px 'Urbanist', sans-serif; color: var(--nd-text); outline: none; }
.nd-gs-res {
  position: absolute; top: calc(100% + 8px); left: 0; width: max(100%, 380px); max-height: 70vh; overflow: auto; z-index: 90;
  background: var(--nd-panel); border: 1px solid var(--nd-border); border-radius: 14px; padding: 6px;
  box-shadow: 0 14px 36px rgba(44,44,42,.22); font-family: 'Urbanist', sans-serif;
}
.nd-gs-res.hidden { display: none !important; }
.nd-gs-h { padding: 8px 10px 3px; font: 700 11px 'Urbanist', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6B6558; }
.nd-gs-i { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 9px; color: var(--nd-text); text-decoration: none; }
.nd-gs-i b { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-gs-i small { color: #6B6558; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-gs-i:hover, .nd-gs-i.on { background: var(--nd-line2); }
.nd-gs-empty { padding: 14px 12px; color: #6B6558; font-size: 13px; }
@media (max-width: 900px) {
  /* Phones: menu button stays on the left, a slimmer search (no magnifier)
     fills the gap beside it, then "+", bell and avatar on the right. */
  header .nd-brand-area { margin-right: 0; }
  .nd-gsearch { flex: 1 1 auto; margin: 0 8px 0 2px; height: 30px; padding: 0 11px; gap: 0; }
  .nd-gsearch > svg { display: none; }
  body .nd-gsearch #nd-gsearch-input { font-size: 13px; }
  .nd-gs-res { position: fixed; left: 8px; right: 8px; top: calc(var(--nd-top-h) - 2px); width: auto; }
}

/* ---- avatar photo, phone logo mark ---- */
header .nd-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
header .nd-avatar { font-size: 12px; }
.nd-top-mark { display: none; }

/* ---- minimized menu: one icon per section, hover opens a card with its links ---- */
.nd-sec-ico { display: none; }
@media (min-width: 901px) {
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] > .nd-sidebar-section-label {
    opacity: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: 4px auto; padding: 0;
    border-radius: 14px; color: var(--nd-side-ink); cursor: pointer; justify-content: center;
  }
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] > .nd-sidebar-section-label::after { display: none; }
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] .nd-sec-ico { display: grid; place-items: center; }
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] .nd-sec-text { display: none; }
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout]:hover > .nd-sidebar-section-label,
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout]:focus-within > .nd-sidebar-section-label { background: var(--nd-side-act); color: #F5F0E8; }
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout]:has(.nd-sidebar-item.active) > .nd-sidebar-section-label { background: var(--nd-side-act); color: #F5F0E8; box-shadow: inset 3px 0 0 var(--nd-accent); }

  /* the card */
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] > .nd-sidebar-nav { display: none; }
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout]:hover > .nd-sidebar-nav,
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout]:focus-within > .nd-sidebar-nav {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; left: 62px; top: 0; z-index: 90; min-width: 232px; max-height: calc(100vh - 16px); overflow-y: auto;
    padding: 12px 10px 10px; background: #3B3B38; border: 1px solid #ffffff1a; border-radius: 16px;
    box-shadow: 0 18px 44px rgba(0,0,0,.45);
  }
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] > .nd-sidebar-nav::before {
    content: attr(data-fly-title); display: block; padding: 2px 12px 8px; color: #F5F0E8; font-weight: 800; font-size: 15px;
  }
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] .nd-sidebar-item { justify-content: flex-start; padding: 8px 12px; min-height: 36px; }
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] .nd-sidebar-item span:not(.nd-sidebar-collapse-label) { display: inline; }
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] .nd-sidebar-item:hover,
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] .nd-sidebar-item.active { background: #4a4a46; }
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] .nd-sidebar-sublabel:not(.hidden) { display: block; }
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] .nd-prod-sub,
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] .nd-sidebar-sub { display: flex; }
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] .nd-sidebar-subitem { display: block; }
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] .nd-sidebar-subitem.hidden { display: none; }
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] .nd-sidebar-sub { margin: 2px 0 6px 14px; }

  /* Settings: its icon opens a card with every Settings tab */
  body.nd-sidebar-collapsed #nd-sidebar .nd-fly-single > .nd-settings-sub { display: none; }
  body.nd-sidebar-collapsed #nd-sidebar .nd-fly-single:hover > .nd-sidebar-item:not(.hidden) + .nd-settings-sub,
  body.nd-sidebar-collapsed #nd-sidebar .nd-fly-single:focus-within > .nd-sidebar-item:not(.hidden) + .nd-settings-sub {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; left: 62px; top: 0; z-index: 90; min-width: 232px; max-height: calc(100vh - 16px); overflow-y: auto;
    margin: 0; padding: 12px 10px 10px; background: #3B3B38; border: 1px solid #ffffff1a; border-radius: 16px;
    box-shadow: 0 18px 44px rgba(0,0,0,.45);
  }
  body.nd-sidebar-collapsed #nd-sidebar .nd-settings-sub::before {
    content: attr(data-fly-title); display: block; padding: 2px 12px 8px; color: #F5F0E8; font-weight: 800; font-size: 15px;
  }
  body:not(.nd-sidebar-collapsed) #nd-sidebar .nd-settings-sub::before { content: none; }
  body.nd-sidebar-collapsed #nd-sidebar .nd-fly-single .nd-sub-row { min-height: 34px; }
  body.nd-sidebar-collapsed #nd-sidebar [data-nd-flyout] .nd-bm-hint { display: block; max-width: 220px; }
}

/* ---- shared form labels ---- */
body .field label, body .f label { font-family: 'Urbanist', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; color: #6B6558; }