/* RusLink CRM: light workspace theme */
:root {
  --ink: #20312c;
  --muted: #5e706b;
  --line: #e5eae6;
  --paper: #fff;
  --canvas: #123b40;
  --canvas-edge: #0c2d32;
  --nav: #fff;
  --nav2: #e8f1eb;
  --accent: #216c50;
  --accent2: #19563f;
  --danger: #d95b5b;
  --warning: #d79327;
  --calm: #4781a5;
  --radius: 10px;
  --shadow: 0 3px 14px rgba(35, 59, 47, .045);
}

html { background: var(--canvas-edge); }
body { background: var(--canvas-edge); color: var(--ink); }
[hidden] { display: none !important; }
button, input, select, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #0c2d32;
  outline-offset: 2px;
}

.app-shell {
  max-width: 1780px;
  min-height: calc(100vh - 48px);
  margin: 24px auto;
  grid-template-columns: 238px minmax(0, 1fr);
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 24px 64px rgba(35, 59, 47, .10);
}
body[data-ui-compact="true"] .app-shell { max-width: none; }
.sidebar {
  position: sticky;
  inset: auto;
  top: 0;
  align-self: start;
  width: auto;
  height: calc(100vh - 48px);
  min-height: 680px;
  padding: 25px 14px 20px;
  background: #fff;
  color: var(--ink);
  border-right: 1px solid var(--line);
  z-index: 5;
}
.brand { gap: 10px; margin: 0 10px 44px; }
.brand b { color: #173b38; font-size: 19px; letter-spacing: -.045em; }
.brand span:not(.brand-mark) { color: #71827d; letter-spacing: .03em; font-size: 11px; }
.brand-mark, .brand-mark.small {
  width: 43px;
  height: 43px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 5px 12px rgba(24, 105, 91, .18);
}
.brand-mark svg { width: 24px; height: 24px; }
.sidebar nav { gap: 7px; }
.nav-item {
  width: 100%;
  min-height: 44px;
  gap: 13px;
  padding: 10px 13px;
  border-radius: 9px;
  color: #657873;
  font-size: 13px;
  font-weight: 650;
  transition: background .18s, color .18s, transform .18s;
}
.nav-item:hover { background: #f0f6f3; color: #1e6258; transform: translateX(2px); }
.nav-item.active, .nav-item.active:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 5px 13px rgba(24, 105, 91, .18);
  transform: none;
}
.nav-item.active { box-shadow: 0 5px 13px rgba(24, 105, 91, .18); }
.nav-icon { width: 18px; height: 18px; flex-basis: 18px; stroke-width: 1.8; }
.sidebar-foot {
  gap: 10px;
  margin-top: auto;
  padding: 17px 9px 0;
  border-color: var(--line);
  color: var(--ink);
}
.sidebar-foot b { font-size: 12px; }
.sidebar-foot small { margin-top: 3px; color: #5e706b; font-size: 12px; }
.sidebar-avatar, .header-avatar, .owner-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e3efeb;
  color: #1c7067;
  font-weight: 800;
  font-style: normal;
}

.workspace {
  grid-column: 2;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0 30px 50px;
  background: var(--canvas);
}
.topbar {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(145px, .7fr) minmax(200px, 330px) minmax(0, 1.4fr);
  gap: 20px;
  min-height: 80px;
  margin: 0 -30px 30px;
  padding: 14px 30px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  z-index: 4;
}
.topbar-context { min-width: 0; }
.topbar .eyebrow { color: #52665e; font-size: 11px; letter-spacing: .10em; }
.topbar h1 { margin: 3px 0 0; font-size: 20px; line-height: 1.2; letter-spacing: -.035em; }
.global-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid #dfe8e3;
  border-radius: 9px;
  background: #fff;
  color: #96a2b5;
}
.global-search:focus-within { border-color: #8cb9a9; box-shadow: 0 0 0 3px #18776d19; }
.global-search svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.global-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.top-actions { gap: 9px; justify-content: flex-end; min-width: 0; }
.top-actions select, .filters input, .filters select {
  border: 1px solid #dfe8e3;
  border-radius: 8px;
  background: #fff;
  color: #52645f;
  font-size: 12px;
}
.top-actions select { min-width: 62px; padding: 9px 8px; }
.header-user { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 6px 0 11px; border-left: 1px solid var(--line); }
.header-user b { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.header-avatar { width: 32px; height: 32px; background: #dcece7; }
.primary, .secondary, .mini-button, .open-process-button {
  border-radius: 8px;
  font-size: 12px;
  transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.primary { background: var(--accent); box-shadow: 0 3px 9px rgba(49,105,245,.14); }
.primary:hover { background: var(--accent2); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(49,105,245,.22); }
.secondary { border-color: #e2e7f0; color: #66738a; }
.secondary:hover, .mini-button:hover { border-color: #b6c9f8; background: #f1f7f3; color: var(--accent2); }

.view { animation: view-enter .28s ease-out; }
.eyebrow { color: #72827c; font-size: 10px; letter-spacing: .12em; }
.section-tools { align-items: flex-end; gap: 18px; margin: 3px 0 22px; }
.section-tools h2, .panel h2 { color: #173b38; font-size: 24px; line-height: 1.2; letter-spacing: -.04em; }
.section-tools h2 { margin-top: 5px; }
.section-note { margin-top: 7px; }
.filters { flex-wrap: wrap; justify-content: flex-end; }
.filters input, .filters select { min-height: 38px; }
.filters input { min-width: 190px; }
.view-switch { border-color: #e4e9f2; background: #edf3f0; }
.view-mode { color: #70817b; }
.view-mode.active { color: var(--accent); }

.metric, .panel, .process-card, .company-card {
  border: 1px solid #e8edf5;
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--shadow);
}
.metric { position: relative; overflow: hidden; min-height: 130px; padding: 20px; border-top: 0; }
.metric::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--accent); }
.metric.danger, .metric.warning, .metric.calm { border-top: 0; }
.metric.danger::before { background: #f4767c; }
.metric.warning::before { background: #ffbd3f; }
.metric.calm::before { background: #31c3df; }
.metric span { color: #77869b; font-size: 12px; font-weight: 650; }
.metric strong { color: #173b38; font-size: 35px; letter-spacing: -.05em; }
.metric small { color: #52665e; font-size: 12px; line-height: 1.35; }
.panel { padding: 23px; }
.panel-head h2 { margin-top: 4px; font-size: 18px; }
.process-table { margin-top: 17px; }
.process-row { padding: 14px 8px; transition: background .18s; }
.process-row:hover { background: #f5f8f6; }
.process-title b { font-size: 13px; }
.process-title small { margin-top: 4px; }
.bar-track { background: #edf1f8; }
.bar-track i { background: var(--accent); }
.person-row { border-color: #edf0f5; }
.avatar { border-radius: 50%; background: #e7f0ec; color: #20776c; }

.process-grid, .company-grid { gap: 15px; }
.process-card, .company-card { min-width: 0; padding: 18px; transition: transform .18s, box-shadow .18s, border-color .18s; }
.process-card:hover, .company-card:hover { transform: translateY(-2px); border-color: #d4e6dc; box-shadow: 0 12px 25px rgba(28,75,59,.08); }
.process-card h3, .company-card h3 { margin: 15px 0 7px; color: #1d2943; font-size: 15px; line-height: 1.35; }
.process-card h3 .text-button { color: inherit; font-weight: 750; }
.process-card .meta { min-height: 16px; }
.tag { background: #f0f4fb; color: #708099; }
.priority-pill { background: #edf4ff; color: #426fbd; }
.priority-high { background: #fff3df; color: #ac731a; }
.priority-critical { background: #ffe9e9; color: #b94950; }
.card-top { min-width: 0; }
.card-tools { display: inline-flex; align-items: center; gap: 4px; }
.board-owner { justify-content: flex-start; align-items: center; margin-top: 17px; }
.owner-avatar { width: 25px; height: 25px; font-size: 10px; }
.owner-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64748b; font-weight: 650; }
.board-owner .due-date { flex: 0 0 auto; margin-left: auto; color: #9ca8b8; }
.card-bottom { padding-top: 12px; margin-top: 13px; border-color: #edf1f6; }
.status-caption { color: #7788a1; font-weight: 650; }
.process-card select { max-width: 145px; background: #f1f5f2; color: #54647e; font-size: 11px; }
.open-process-button { margin-top: 13px; border-color: #dfe9e3; background: #f5f8f6; color: var(--accent); }
.open-process-button:hover, .open-process-button:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; }
.company-card .stat { color: var(--accent); }
.company-actions { border-color: #edf1f6; flex-wrap: wrap; justify-content: flex-end; }
.company-actions small { margin-right: auto; }
.company-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 9px; border-radius: 9px; background: #edf4f0; vertical-align: middle; font-size: 18px; }
.company-description, .task-description { margin: 8px 0; color: #60708b; font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.company-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.company-profile { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e9eef8; }
.company-profile > b { display: block; margin-bottom: 9px; color: #263955; font-size: 12px; }
.company-profile dl { display: grid; gap: 7px; margin: 0; }
.company-profile dl > div { display: grid; grid-template-columns: minmax(86px, 34%) minmax(0, 1fr); gap: 9px; font-size: 12px; line-height: 1.35; }
.company-profile dt { color: #71809a; }
.company-profile dd { margin: 0; color: #263955; overflow-wrap: anywhere; white-space: pre-wrap; }
.company-profile dd.missing { color: #a4afc0; }
#companyDialog, #editCompanyDialog { max-height: min(90vh, 900px); overflow: auto; }
.nav-custom-icon { flex: 0 0 19px; width: 19px; text-align: center; font-size: 18px; line-height: 1; }
.appearance-panel { margin-top: 24px; }
.appearance-panel h3 { margin: 20px 0 10px; font-size: 15px; }
.appearance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 9px; }
.appearance-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid #dfe9e3; border-radius: 10px; background: #fff; }
.appearance-icon { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 8px; background: #edf4f0; }
.appearance-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; font-size: 13px; }
.task-item > div { min-width: 0; flex: 1; }
.task-item { flex-wrap: wrap; }
.task-item .mini-button { flex: 0 0 auto; }
.user-card .card-top .meta { font-weight: 700; }
.user-card.inactive { opacity: .63; }

.kanban-board { grid-auto-columns: minmax(255px, 275px); gap: 12px; }
.kanban-lane { border-color: var(--line); background: #f1f6f2; }
.kanban-head { color: var(--muted); }
.lane-count { background: #e4eee7; color: #587261; }
.board-card { background: #fff; }
.board-card h3 { font-size: 13px; }
.board-card .board-owner { margin-top: 13px; }
.status-dot { animation: breathe 3s ease-in-out infinite; }

dialog { border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 90px rgba(35,59,47,.22); }
dialog::backdrop { background: rgba(27,39,34,.45); backdrop-filter: blur(3px); }
dialog form, .detail-shell { padding: 25px; }
.dialog-head { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 4px 0; font-size: 21px; letter-spacing: -.03em; }
dialog label { color: var(--muted); }
dialog input, dialog select, dialog textarea, .login-card input {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
.detail-shell form { padding: 0; }
.detail-shell textarea { border-color: #e1e8e3; }
.detail-columns > section { border-color: #e5ebf4; background: #f8faf8; }
.task-item, .feed-item, .history-item { border-color: #e9edf5; }
.attachment-picker { border-color: #c7dfd3; background: #f5f8f6; color: var(--accent); }
.permissions { border-color: #e0e7f2; background: #f8faff; }
.icon-button { color: #7f8ca3; transition: transform .18s, color .18s; }
.icon-button:hover { transform: rotate(90deg); color: var(--accent); }
.icon-action:hover { transform: scale(1.09); }
#toast { background: #173b38; border-radius: 9px; box-shadow: 0 10px 25px rgba(22,64,53,.16); }

.login-page { background: #e5eeea; }
.login-shell { border: 1px solid #dfe8e3; background: #fff; box-shadow: 0 30px 80px rgba(22,64,53,.12); }
.login-brand { background: linear-gradient(150deg, #18776d, #14584f); }
.login-card { background: #fff; }

@keyframes view-enter { from { opacity: .55; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes breathe { 0%,100% { box-shadow: 0 0 0 3px #2776651a; } 50% { box-shadow: 0 0 0 5px #2776650c; } }

@media (max-width: 1200px) {
  .app-shell { margin: 0; min-height: 100vh; border: 0; border-radius: 0; }
  .sidebar { height: 100vh; }
  .topbar { grid-template-columns: minmax(120px, .6fr) minmax(170px, 1fr) auto; gap: 12px; }
  .header-user b { display: none; }
}
@media (max-width: 950px) {
  .app-shell { grid-template-columns: 74px minmax(0,1fr); }
  .sidebar { padding: 20px 9px; }
  .brand { justify-content: center; margin: 0 0 35px; }
  .brand > div, .sidebar-foot > div, .nav-item span { display: none; }
  .sidebar nav { justify-items: center; }
  .nav-item { width: 48px; justify-content: center; padding: 11px; }
  .sidebar-foot { justify-content: center; padding: 14px 0 0; }
  .topbar { grid-template-columns: auto minmax(120px, 1fr) auto; }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: sticky; top: 0; width: 100%; height: auto; min-height: 0; padding: 11px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar .brand { display: none; }
  .sidebar nav { display: flex; justify-content: space-around; gap: 4px; }
  .nav-item { width: auto; min-height: 36px; padding: 8px 10px; }
  .nav-item span { display: inline; }
  .nav-icon { width: 16px; height: 16px; flex-basis: 16px; }
  .sidebar-foot { display: none; }
  .workspace { padding: 0 16px 30px; }
  .topbar { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 11px; min-height: 0; margin: 0 -16px 22px; padding: 14px 16px; }
  .topbar-context { flex: 1 1 130px; }
  .topbar h1 { font-size: 18px; }
  .global-search { order: 3; flex: 1 0 100%; height: 38px; }
  .top-actions { flex-wrap: nowrap; }
  .top-actions .header-user { display: none; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .section-tools { align-items: flex-start; }
  .filters { justify-content: flex-start; }
  .process-grid, .company-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .kanban-board { grid-auto-columns: minmax(245px,82vw); }
}
@media (max-width: 540px) {
  .nav-item { gap: 5px; padding: 8px 5px; font-size: 10px; }
  .nav-icon { width: 14px; height: 14px; flex-basis: 14px; }
  .section-tools { display: block; }
  .filters { margin-top: 14px; }
  .filters input { flex: 1 1 100%; }
  .process-grid, .company-grid, .split-grid { grid-template-columns: 1fr; }
  .metrics { gap: 9px; }
  .metric { padding: 15px; min-height: 110px; }
  .metric strong { font-size: 28px; }
  .panel { padding: 16px; }
  .process-row { grid-template-columns: 1fr 1fr; }
  .bar-row { grid-template-columns: 92px 1fr 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .view, .status-dot { animation: none; }
}

/* Global card sizing and quiet, reference-aligned outlines. */
body[data-card-size="0"] { --card-min: 260px; --board-min: 235px; --card-pad: 14px; --card-title-size: 13px; }
body[data-card-size="1"] { --card-min: 360px; --board-min: 275px; --card-pad: 18px; --card-title-size: 15px; }
body[data-card-size="2"] { --card-min: 470px; --board-min: 340px; --card-pad: 24px; --card-title-size: 17px; }
body[data-card-size="-1"] { --card-min: 225px; --board-min: 215px; --card-pad: 11px; --card-title-size: 12px; }
body[data-card-size="-2"] { --card-min: 190px; --board-min: 190px; --card-pad: 9px; --card-title-size: 11px; }
.card-size-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  margin: 32px 9px 0;
  padding: 18px 2px 0;
  border-top: 1px solid var(--line);
  color: #687b74;
}
.card-size-control label { color: #52665e; font-size: 11px; font-weight: 750; }
.card-size-control output { font-size: 11px; white-space: nowrap; }
.card-size-control input {
  grid-column: 1 / -1;
  width: 100%;
  height: 5px;
  margin: 5px 0;
  appearance: none;
  border-radius: 99px;
  background: linear-gradient(90deg, #c6ded1, var(--accent));
  cursor: pointer;
}
.card-size-control input::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  appearance: none;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 6px rgba(33,108,80,.18);
}
.card-size-control input::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 6px rgba(33,108,80,.18);
}
.process-grid, .company-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min, 360px)), 1fr)); }
.process-card, .company-card { padding: var(--card-pad, 18px); }
.process-card h3, .company-card h3 { font-size: var(--card-title-size, 15px); }
.kanban-board { grid-auto-columns: var(--board-min, 275px); }
.board-card { padding: var(--card-pad, 18px); }
.board-card h3 { font-size: var(--card-title-size, 15px); }
.metric, .panel, .process-card, .company-card, .kanban-lane, .detail-columns > section {
  border: 1px solid var(--line);
}
.metric, .panel { padding: var(--card-pad, 18px); }
.metric:hover, .panel:hover, .process-card:hover, .company-card:hover, .kanban-lane:hover {
  border-color: var(--accent);
}
@media (max-width: 950px) {
  .card-size-control { margin: 26px 0 0; padding: 13px 0 0; }
  .card-size-control label, .card-size-control output { display: none; }
  .card-size-control input { height: 42px; margin: 0; background: transparent; transform: rotate(-90deg); }
}
@media (max-width: 760px) {
  .card-size-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 9px 0 0;
    padding: 8px 4px 0;
  }
  .card-size-control label, .card-size-control output { display: inline; }
  .card-size-control input { flex: 1; height: 5px; margin: 0; transform: none; background: linear-gradient(90deg, #c6ded1, var(--accent)); }
  .process-grid, .company-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min, 360px)), 1fr)); }
  .kanban-board { grid-auto-columns: minmax(min(82vw, var(--board-min, 275px)), 1fr); }
}

/* Density controls scale the whole workspace and keep every card field reachable. */
.interface-scale-control { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; margin: 14px 9px 0; color: #687b74; }
.interface-scale-control label { color: #52665e; font-size: 11px; font-weight: 750; }
.interface-scale-control output { font-size: 11px; white-space: nowrap; }
.interface-scale-control input { grid-column: 1 / -1; width: 100%; height: 5px; margin: 5px 0; appearance: none; border-radius: 99px; background: linear-gradient(90deg, #c6ded1, var(--accent)); cursor: pointer; }
.interface-scale-control input::-webkit-slider-thumb { width: 16px; height: 16px; appearance: none; border: 3px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 6px rgba(33,108,80,.18); }
.interface-scale-control input::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 6px rgba(33,108,80,.18); }
.process-card { --status-accent: #82958d; box-shadow: inset 3px 0 var(--status-accent), var(--shadow); }
.status-card-new { --status-accent: #ed9b27; }
.status-card-assigned { --status-accent: #1fb1d8; }
.status-card-in_progress { --status-accent: #148c94; }
.status-card-waiting_client, .status-card-waiting_contractor { --status-accent: #d49515; }
.status-card-review { --status-accent: #5e8b82; }
.status-card-done, .status-card-closed { --status-accent: #3ca873; }
.process-card.is-overdue { --status-accent: #df5260; }
.process-card .card-top { align-items: flex-start; flex-wrap: wrap; }
.process-card .card-tools { margin-left: auto; flex-wrap: nowrap; }
.process-card .tag { max-width: 100%; gap: 5px; align-items: center; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.board-card .card-top .tag { max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; }
.process-card .category-icon { display: inline-grid; place-items: center; flex: 0 0 16px; width: 16px; height: 16px; border-radius: 5px; background: #fff9; font-size: 12px; }
.process-card .category-name { min-width: 0; }
.process-card .category-accounting { background: #e7f4ec; color: #267350; }
.process-card .category-banking { background: #e8f1ec; color: #356d5b; }
.process-card .category-registration { background: #f1eaff; color: #7955af; }
.process-card .category-documents { background: #eaf2ff; color: #356d5b; }
.process-card .category-certification { background: #e6f5f3; color: #25877b; }
.process-card .category-logistics { background: #fff1e5; color: #b56b24; }
.process-card .category-marketplaces { background: #eaf3fd; color: #367b70; }
.process-card .category-legal { background: #f4eaf6; color: #9156a3; }
.process-card .category-other { background: #edf0f5; color: #677995; }
.priority-pill { gap: 4px; align-items: center; white-space: nowrap; }
.priority-symbol { display: inline-grid; place-items: center; min-width: 12px; font-size: 12px; line-height: 1; }
.company-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.company-meta > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-icon { color: #8b9ec0; font-size: 14px; }
.process-card .board-owner { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; gap: 5px 7px; min-width: 0; }
.process-card .owner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.process-card .due-date { display: inline-flex; align-items: center; gap: 3px; margin-left: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.process-card .due-date.overdue { color: #c94855; font-weight: 750; }
.process-card .card-bottom { display: grid; grid-template-columns: minmax(0,1fr) minmax(88px,52%); gap: 6px; align-items: center; }
.process-card .status-caption { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
.process-card .card-bottom select { min-width: 0; max-width: none; width: 100%; }
.card-signal { display: inline-block; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--status-accent); }
.attention-indicator { display: inline-block; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: #d49515; box-shadow: 0 0 0 3px #d4951525; animation: attention-pulse 1.6s ease-in-out infinite; }
.attention-overdue, .attention-critical { background: #df5260; box-shadow: 0 0 0 3px #df526029; }
.card-signal.pulse, .lane-in_progress .status-dot, .lane-waiting_client .status-dot, .lane-waiting_contractor .status-dot { animation: attention-pulse 2.3s ease-in-out infinite; }
@keyframes attention-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .42; transform: scale(.76); } }
.company-profile dl > div:nth-child(1) dt::before { content: '▣'; }
.company-profile dl > div:nth-child(2) dt::before { content: '№'; }
.company-profile dl > div:nth-child(3) dt::before { content: '◈'; }
.company-profile dl > div:nth-child(4) dt::before { content: '⌂'; }
.company-profile dl > div:nth-child(5) dt::before { content: '♙'; }
.company-profile dl > div:nth-child(6) dt::before { content: '◆'; }
.company-profile dt::before { display: inline-block; width: 16px; color: #7b95c9; }
body[data-card-size="-1"] .process-card, body[data-card-size="-2"] .process-card { border-radius: 10px; }
body[data-card-size="-1"] .board-card, body[data-card-size="-2"] .board-card { box-shadow: inset 3px 0 var(--status-accent), 0 2px 7px #1720330a; }
body[data-card-size="-1"] .process-card .card-top, body[data-card-size="-2"] .process-card .card-top { gap: 5px; }
body[data-card-size="-1"] .process-card .tag, body[data-card-size="-2"] .process-card .tag { padding: 4px 6px; font-size: 10px; }
body[data-card-size="-1"] .process-card .priority-pill, body[data-card-size="-2"] .process-card .priority-pill { padding: 4px 6px; font-size: 10px; }
body[data-card-size="-1"] .process-card .icon-action, body[data-card-size="-2"] .process-card .icon-action { width: 25px; height: 25px; padding: 4px; }
body[data-card-size="-1"] .process-card .icon-action svg, body[data-card-size="-2"] .process-card .icon-action svg { width: 15px; height: 15px; }
body[data-card-size="-2"] .process-card .card-tools { gap: 1px; }
body[data-card-size="-1"] .process-card .card-tools, body[data-card-size="-2"] .process-card .card-tools { max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
body[data-card-size="-2"] .process-card .icon-action { width: 18px; height: 18px; padding: 2px; }
body[data-card-size="-2"] .process-card .icon-action svg { width: 13px; height: 13px; }
body[data-card-size="-2"] .process-card .priority-pill { padding: 2px 3px; font-size: 8px; }
body[data-card-size="-2"] .process-card .attention-indicator { flex-basis: 7px; width: 7px; height: 7px; }
body[data-card-size="-1"] .process-card h3, body[data-card-size="-2"] .process-card h3 { margin: 8px 0 5px; line-height: 1.25; }
body[data-card-size="-1"] .process-card .company-meta, body[data-card-size="-2"] .process-card .company-meta { font-size: 11px; }
body[data-card-size="-1"] .process-card .board-owner, body[data-card-size="-2"] .process-card .board-owner { margin-top: 9px; font-size: 10px; grid-template-columns: 20px minmax(0,1fr); }
body[data-card-size="-1"] .process-card .owner-avatar, body[data-card-size="-2"] .process-card .owner-avatar { width: 20px; height: 20px; font-size: 9px; }
body[data-card-size="-1"] .process-card .due-date, body[data-card-size="-2"] .process-card .due-date { grid-column: 1 / -1; justify-self: end; }
body[data-card-size="-1"] .process-card .card-bottom, body[data-card-size="-2"] .process-card .card-bottom { margin-top: 8px; padding-top: 7px; grid-template-columns: 1fr; }
body[data-card-size="-1"] .process-card .status-caption, body[data-card-size="-2"] .process-card .status-caption { font-size: 10px; }
body[data-card-size="-1"] .process-card .card-bottom select, body[data-card-size="-2"] .process-card .card-bottom select { padding: 5px 6px; font-size: 10px; }
body[data-card-size="-2"] .company-card { font-size: 11px; }
body[data-card-size="-2"] .company-card .company-profile dl { gap: 3px; }
body[data-card-size="-2"] .company-card .company-profile dl > div { grid-template-columns: 66px minmax(0,1fr); gap: 4px; font-size: 10px; }
body[data-card-size="-2"] .company-card .company-profile dt::before { display: none; }
body[data-card-size="-2"] .company-card .company-actions { gap: 4px; }
body[data-card-size="-2"] .company-card .mini-button { padding: 5px 6px; font-size: 10px; }
@media (max-width: 950px) { .interface-scale-control { margin: 8px 0 0; } .interface-scale-control label, .interface-scale-control output { display: none; } .interface-scale-control input { height: 42px; margin: 0; background: transparent; transform: rotate(-90deg); } }
@media (max-width: 760px) { .interface-scale-control { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; } .interface-scale-control label, .interface-scale-control output { display: inline; } .interface-scale-control input { flex: 1; height: 5px; margin: 0; transform: none; background: linear-gradient(90deg, #c6ded1, var(--accent)); } }
@media (prefers-reduced-motion: reduce) { .attention-indicator, .card-signal.pulse, .lane-in_progress .status-dot, .lane-waiting_client .status-dot, .lane-waiting_contractor .status-dot { animation: none !important; } }

/* Kanban controls and editable status headings. */
.board-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -7px 0 14px;
  padding: 10px 13px;
  border: 1px solid #c4d5ff;
  border-radius: 10px;
  background: #fff;
}
.board-size, .board-scroll { display: flex; align-items: center; gap: 10px; }
.board-size label, .board-scroll span { color: #657795; font-size: 12px; font-weight: 700; white-space: nowrap; }
.board-size input { width: 155px; accent-color: var(--accent); cursor: pointer; }
.board-size output { min-width: 75px; color: var(--accent); font-size: 12px; font-weight: 750; }
.board-arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #9bbaff;
  border-radius: 8px;
  background: #f3f7ff;
  color: #2962e8;
  font-size: 20px;
  line-height: 1;
  transition: background .18s, transform .18s, border-color .18s;
}
.board-arrow:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--accent); background: #e6efff; }
.board-arrow:disabled { opacity: .4; cursor: default; }
.kanban-board {
  overflow-x: auto;
  padding-bottom: 19px;
  scrollbar-width: auto;
  scrollbar-color: #6f9bfa #e5edff;
}
.kanban-board::-webkit-scrollbar { height: 12px; }
.kanban-board::-webkit-scrollbar-track { border-radius: 99px; background: #e5edff; }
.kanban-board::-webkit-scrollbar-thumb { border: 2px solid #e5edff; border-radius: 99px; background: #6f9bfa; }
.kanban-lane { border-color: #91b2ff; }
.board-card, .board-card:hover {
  border: 2px solid #4d83ff;
}
.board-card:hover { border-color: #245ae3; }
.board-card { cursor: pointer; }
.board-card:focus-visible { outline: 3px solid #2d63e8; outline-offset: 2px; }
.board-card .card-edit-action { color: #3068e9; background: #eaf1ff; font-size: 15px; font-weight: 800; }
.board-card .card-edit-action:hover, .board-card .card-edit-action:focus-visible { color: #fff; background: #3068e9; }
.process-card .card-duplicate-action { color: #2b6e9a; background: #e7f5ff; }
.process-card .card-duplicate-action:hover, .process-card .card-duplicate-action:focus-visible { color: #fff; background: #2b80b8; }
.process-card .card-duplicate-action svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kanban-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-head .lane-count { margin-left: auto; }
.edit-status-button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #6681bd;
  font-size: 16px;
  transition: color .18s, background .18s, transform .18s;
}
.edit-status-button:hover { color: #245ae3; background: #dbe7ff; transform: scale(1.08); }
.status-name-dialog { width: min(500px, calc(100vw - 30px)); }
.status-name-current { margin: 18px 0 5px; color: var(--accent); font-size: 17px; font-weight: 800; }
.status-name-hint { margin: 0 0 17px; color: #75849e; font-size: 12px; line-height: 1.5; }
@media (max-width: 760px) {
  .board-tools { flex-wrap: wrap; }
  .board-size { width: 100%; }
  .board-size input { flex: 1; min-width: 70px; }
  .board-scroll { margin-left: auto; }
  .board-scroll span { display: none; }
}

/* Process cards are split into readable information modules. */
.process-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.process-card .card-module {
  min-width: 0;
  padding: 9px;
  border: 1px solid #e3eaf6;
  border-radius: 9px;
  background: #fff;
}
.process-card .card-head-module {
  background: linear-gradient(145deg, #f5f8f6, #eef4ff);
  border-color: #d7e3fb;
}
.process-card .card-top {
  display: block;
  align-items: start;
}
.process-card .card-top .tag { width: fit-content; min-width: 0; overflow-wrap: normal; word-break: normal; }
.process-card .card-tools { align-self: start; margin-left: 0; }
.process-card .priority-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid #dfe8f9;
}
.process-card .priority-info { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.process-card .card-main-module {
  padding-left: 11px;
  border-left: 3px solid var(--status-accent);
  background: #fff;
}
.process-card .card-main-module h3 {
  margin: 0 0 8px;
}
.process-card .card-main-module .text-button {
  width: 100%;
  padding: 0;
  text-align: left;
  line-height: 1.35;
}
.process-card .card-main-module .company-meta {
  padding-top: 7px;
  border-top: 1px solid #edf3f0;
}
.process-card .card-meta-module {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 6px;
  margin-top: 0;
  background: #f8faff;
}
.process-card .card-field {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 7px;
  border: 1px solid #e5ebf5;
  border-radius: 7px;
  background: #fff;
}
.process-card .field-label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #8a98ae;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.1;
  text-transform: uppercase;
}
.process-card .field-label > span { color: var(--status-accent); font-size: 7px; }
.process-card .field-value {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #53647f;
  font-size: 11px;
  font-weight: 700;
}
.process-card .card-meta-module .owner-avatar { flex: 0 0 auto; }
.process-card .card-meta-module .due-date {
  justify-self: start;
  margin: 0;
  color: #657590;
  font-variant-numeric: tabular-nums;
}
.process-card .card-status-module {
  margin-top: 0;
  padding: 8px;
  border-color: #dbe5f8;
  background: #f3f7ff;
}
.process-card .card-status-module .status-caption { font-size: 10px; }
.process-card .card-status-module select { border-color: #dce4f2; background: #fff; }
body[data-card-size="-1"] .process-card,
body[data-card-size="-2"] .process-card { gap: 5px; }
body[data-card-size="-1"] .process-card .card-module,
body[data-card-size="-2"] .process-card .card-module { padding: 6px; border-radius: 7px; }
body[data-card-size="-1"] .process-card .card-main-module,
body[data-card-size="-2"] .process-card .card-main-module { padding-left: 8px; }
body[data-card-size="-1"] .process-card .priority-row,
body[data-card-size="-2"] .process-card .priority-row { margin-top: 5px; padding-top: 5px; }
body[data-card-size="-1"] .process-card .card-main-module h3,
body[data-card-size="-2"] .process-card .card-main-module h3 { margin: 0 0 6px; }
body[data-card-size="-1"] .process-card .card-meta-module,
body[data-card-size="-2"] .process-card .card-meta-module { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 4px; margin-top: 0; }
body[data-card-size="-2"] .process-card .card-meta-module { grid-template-columns: 1fr; }
body[data-card-size="-1"] .process-card .card-field,
body[data-card-size="-2"] .process-card .card-field { gap: 4px; padding: 5px; }
body[data-card-size="-1"] .process-card .field-label,
body[data-card-size="-2"] .process-card .field-label { gap: 3px; font-size: 7px; letter-spacing: .03em; }
body[data-card-size="-2"] .process-card .field-label { font-size: 8px; }
body[data-card-size="-1"] .process-card .field-value,
body[data-card-size="-2"] .process-card .field-value { gap: 4px; font-size: 9px; }
body[data-card-size="-1"] .process-card .due-date,
body[data-card-size="-2"] .process-card .due-date { grid-column: auto; justify-self: start; }
body[data-card-size="-1"] .process-card .card-bottom,
body[data-card-size="-2"] .process-card .card-bottom { margin-top: 0; padding: 6px; }

/* The process dialog has one scroll owner: its content shell. */
#processDetailDialog.wide-dialog {
  max-height: calc(100dvh - 30px);
  overflow: hidden;
}
#processDetailDialog .detail-shell {
  max-height: calc(100dvh - 30px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Align the production workspace with the approved warm, compact RusLink UI kit. */
html, body { background: var(--canvas); color: var(--ink); }
.app-shell { max-width: none; min-height: 100vh; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.sidebar { height: 100vh; padding-top: 18px; }
.brand { margin-bottom: 26px; }
.brand b, .section-tools h2, .panel h2, .metric strong { color: var(--ink); }
.brand-mark, .brand-mark.small { box-shadow: 0 4px 10px rgba(33,108,80,.18); }
.nav-item:hover { background: #f2f6f2; color: var(--accent); }
.nav-item.active, .nav-item.active:hover { background: #e6f0e9; color: var(--accent); box-shadow: inset 3px 0 var(--accent); }
.sidebar-avatar, .header-avatar, .owner-avatar { background: #e5eee8; color: var(--accent); }
.topbar { min-height: 68px; margin-bottom: 22px; }
.section-tools h2 { font-size: 24px; }
.metric, .panel, .process-card, .company-card { border-color: var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.metric { min-height: 108px; padding: 16px; }
dialog { border-radius: 10px; }
.view-switch { background: #eef2ee; }
.view-mode.active { color: var(--accent); }
.global-search:focus-within { border-color: #9bc2ac; box-shadow: 0 0 0 3px #216c5019; }
.primary { box-shadow: 0 3px 9px rgba(33,108,80,.12); }
.primary:hover { box-shadow: 0 6px 16px rgba(33,108,80,.18); }
.secondary:hover, .mini-button:hover { border-color: #b6cfbe; background: #f1f7f2; color: var(--accent2); }
.login-brand { background: linear-gradient(150deg, #216c50, #174b39); }
@media(max-width:760px){.app-shell{min-height:100vh}.sidebar{height:auto}.topbar{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}}

/* Final visual pass: align the whole workspace with the green RusLink reference palette. */
html, body { background: var(--canvas); }
.app-shell { border-color: var(--line); box-shadow: 0 24px 64px rgba(35,59,47,.10); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline-color: #0c2d32; }
.brand-mark, .brand-mark.small { box-shadow: 0 5px 12px rgba(33,108,80,.16); }
.nav-item:hover { background: #f3f7f4; color: var(--accent); }
.nav-item.active, .nav-item.active:hover, .nav-item.active { box-shadow: 0 5px 13px rgba(33,108,80,.18); }
.sidebar .nav-item.active { box-shadow: inset 3px 0 #8fbea1, 0 4px 12px rgba(33,108,80,.12); }
.sidebar-avatar, .header-avatar, .owner-avatar { background: #e7f0ea; color: var(--accent); }
.global-search:focus-within { border-color: #a9cbb8; box-shadow: 0 0 0 3px rgba(33,108,80,.10); }
.open-process-button { border-color: #dce9df; background: #f4f8f4; }
.company-icon, .appearance-icon { background: #edf4ef; }
.appearance-item { border-color: var(--line); }
.attachment-picker { border-color: #c8ddce; background: #f4f8f4; }
.permissions { border-color: var(--line); background: #f7faf7; }
.card-size-control input, .interface-scale-control input { background: linear-gradient(90deg, #b7d5c3, var(--accent)); }
.board-arrow { border-color: #c9ddce; background: #f4f8f4; color: var(--accent); }
.board-arrow:hover:not(:disabled) { background: #e8f2eb; }
.kanban-board { scrollbar-color: #86b39a #e7efe9; }
.kanban-board::-webkit-scrollbar-track { background: #e7efe9; }
.kanban-board::-webkit-scrollbar-thumb { border-color: #e7efe9; background: #86b39a; }
.kanban-lane { border-color: var(--line); background: #f1f6f2; }
.board-card, .board-card:hover { border: 1px solid var(--line); box-shadow: var(--shadow); }
.board-card:hover { border-color: var(--accent); }
.board-card:focus-visible { outline-color: #0c2d32; }
.board-card .card-edit-action { color: var(--accent); background: #eaf3ed; }
.board-card .card-edit-action:hover, .board-card .card-edit-action:focus-visible { color: #fff; background: var(--accent); }
.edit-status-button { color: #668271; }
.edit-status-button:hover { color: var(--accent); background: #e7f0ea; }
.process-card .card-module { border-color: var(--line); }
.process-card .card-head-module { background: linear-gradient(145deg, #f6f9f6, #eef5ef); border-color: #dce9df; }
.process-card .priority-row, .process-card .card-main-module .company-meta { border-color: var(--line); }
.process-card .card-meta-module { background: #f7faf7; }
.process-card .card-field { border-color: var(--line); }
.process-card .field-label { color: var(--muted); }
.process-card .field-value, .process-card .card-meta-module .due-date { color: #52635a; }
.process-card .card-status-module { border-color: #dce9df; background: #f4f8f4; }
.process-card .card-status-module select { border-color: var(--line); }
dialog { border-color: var(--line); box-shadow: 0 30px 90px rgba(35,59,47,.22); }
dialog::backdrop { background: rgba(27,39,34,.45); }
dialog label { color: var(--muted); }
dialog input, dialog select, dialog textarea, .login-card input { border-color: var(--line); }
#toast { background: #183f32; box-shadow: 0 10px 25px rgba(24,63,50,.18); }

/* Consolidated palette pass: keep controls, navigation, avatars and feedback on RusLink's forest/sage system. */
.nav-item:hover { background: #f1f6f2; color: var(--accent2); }
.nav-item.active, .nav-item.active:hover { box-shadow: 0 5px 13px rgba(33,108,80,.16); }
.nav-item.active { box-shadow: 0 5px 13px rgba(33,108,80,.16); }
.sidebar-avatar, .header-avatar, .owner-avatar { background: #e6f0e9; color: var(--accent); }
.header-avatar { background: #e6f0e9; }
.global-search:focus-within { border-color: #a8c9b2; box-shadow: 0 0 0 3px rgba(33,108,80,.10); }
.primary { box-shadow: 0 3px 9px rgba(33,108,80,.13); }
.primary:hover { box-shadow: 0 6px 16px rgba(33,108,80,.18); }
.secondary:hover, .mini-button:hover { border-color: #b8d2bf; background: #f4f8f4; }
.open-process-button { border-color: #dce9df; background: #f4f8f4; }
.open-process-button:hover, .open-process-button:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; }
.appearance-item { border-color: var(--line); }
.appearance-icon { background: #edf4ef; color: var(--accent); }
.attachment-picker { border-color: #d4e4d8; background: #f4f8f4; }
.permissions { border-color: #dce7df; background: #f7faf7; }
#toast { background: #1f4938; box-shadow: 0 10px 25px rgba(31,73,56,.18); }
.login-page { background: #f3f6f2; }
.login-shell { border-color: var(--line); box-shadow: 0 30px 80px rgba(35,59,47,.12); }
.login-brand { background: linear-gradient(150deg, var(--accent), var(--accent2)); }
.task-list-row.global-search-task-focus { border-radius: 9px; background: #fff4df; outline: 2px solid #ef9f27; outline-offset: 3px; transition: background .25s ease, outline-color .25s ease; }

/* Task navigation groups aligned to the approved RusLink information architecture. */
.sidebar nav { display:flex; flex-direction:column; align-items:stretch; gap:14px; }
.sidebar .nav-section { display:flex; flex-direction:column; gap:3px; }
.sidebar .nav-section-label { padding:0 13px 4px; color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.11em; text-transform:uppercase; }
@media (max-width: 950px) and (min-width: 761px) {
  .sidebar nav { align-items:center; gap:10px; }
  .sidebar .nav-section { align-items:center; }
  .sidebar .nav-section-label { display:none; }
}

/* Director portfolio: readable company-to-stage overview. */
.dashboard-key-projects-panel .dashboard-key-table { min-width: 900px; }
.dashboard-process-link { display:grid; gap:3px; border:0; padding:0; background:transparent; color:var(--ink); text-align:left; }
.dashboard-process-link:hover b { color:var(--accent); text-decoration:underline; }
.dashboard-process-link small { color:var(--muted); font-size:11px; }
.dashboard-project-progress { display:flex; align-items:center; gap:8px; min-width:90px; }
.dashboard-project-progress .bar-track { width:60px; height:7px; }
.dashboard-project-progress .bar-track i { display:block; height:100%; border-radius:inherit; background:var(--accent); }
@media(max-width:760px) { .dashboard-key-projects-panel .panel-head { align-items:flex-start; } }

/* Framed, high-contrast workspace: dark teal stays outside the readable work surface. */
html, body { background: var(--canvas-edge); }
.app-shell {
  max-width: 1780px;
  min-height: calc(100vh - 36px);
  margin: 18px auto;
  grid-template-columns: 238px minmax(0, 1fr);
  overflow: clip;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 20px 56px rgba(4,25,27,.28);
}
.sidebar { height: calc(100vh - 36px); }
.workspace {
  min-width: 0;
  background: #f3f6f3;
  color: var(--ink);
}
.section-tools h2, .panel h2 { color: #173b38; }
.eyebrow { color: #42695f; }
.metric, .panel, .process-card, .company-card, .kanban-lane {
  border-color: #dce6df;
  box-shadow: 0 2px 10px rgba(20,55,43,.045);
}
.metric:hover, .panel:hover, .process-card:hover, .company-card:hover, .kanban-lane:hover {
  border-color: #a7c5b3;
}
.metric span, .owner-name, .company-description, .task-description { color: #52665e; }
.sidebar .nav-section-label, .sidebar-foot small, .topbar .eyebrow { color: #627770; }
@media (max-width: 1200px) {
  .app-shell { max-width: none; margin: 0; min-height: 100vh; border: 0; border-radius: 0; }
  .sidebar { height: 100vh; }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { height: auto; }
  .workspace { background: #f3f6f3; }
}

/* Mobile navigation: keep every destination reachable without squeezing labels. */
@media (max-width: 760px) {
  .sidebar nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 7px;
    scrollbar-width: thin;
    scrollbar-color: #91b5a0 transparent;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar .nav-section {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }
  .sidebar .nav-section-label { display: none; }
  .sidebar .nav-item {
    flex: 0 0 auto;
    width: max-content;
    min-height: 40px;
    white-space: nowrap;
    gap: 7px;
    padding: 8px 11px;
    font-size: 12px;
  }
  .sidebar .nav-icon { width: 16px; height: 16px; flex-basis: 16px; }
}

/* Brand copy on the login gradient meets readable contrast. */
.login-brand .eyebrow { color: #cfe8d8; }
.login-brand > p:last-child { color: #d7e6dc; }

/* Four-column topbar keeps page title, search, office scope, and actions aligned. */
@media (min-width: 761px) {
  .topbar {
    grid-template-columns: minmax(150px, .75fr) minmax(200px, 1.15fr) minmax(220px, .95fr) max-content;
    align-items: center;
    gap: 12px;
  }
  .global-office { min-width: 0; }
  .top-actions { flex-wrap: nowrap; gap: 8px; }
  .top-actions .primary, .top-actions .secondary { white-space: nowrap; }
}
@media (min-width: 761px) and (max-width: 1200px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    grid-template-rows: auto auto;
    gap: 10px 14px;
  }
  .topbar-context { grid-column: 1; grid-row: 1; }
  .global-search-wrap { grid-column: 2; grid-row: 1; }
  .global-office { grid-column: 1; grid-row: 2; }
  .top-actions { grid-column: 2; grid-row: 2; justify-content: flex-end; }
}

/* Final dashboard readability and office-selector fit. */
@media (min-width: 761px) {
  .global-office select { flex: 1 1 0; width: auto; min-width: 0; }
}
.metric small { color: #52665e; font-size: 12px; }
.metric #dashboardReimbursementAmount {
  font-size: 23px;
  letter-spacing: -.035em;
  white-space: nowrap;
}

/* Task workspace: keep page hierarchy readable and separate from dense controls. */
#tasksView .section-tools{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:14px;margin:2px 0 18px}
#tasksView .section-tools>div:first-child{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;column-gap:14px;row-gap:4px;min-width:0}
#tasksView .section-tools>div:first-child>.eyebrow{grid-column:1/-1;margin:0}
#tasksView .section-tools h2{margin:0;white-space:nowrap}
#tasksView .section-note{margin:0;color:#52665e;font-size:13px;line-height:1.45}
#tasksView .section-tools .filters{display:grid;grid-template-columns:minmax(180px,1.25fr) repeat(5,minmax(112px,1fr));justify-content:stretch;align-items:center;gap:8px;padding:12px;border:1px solid #dce6df;border-radius:12px;background:#fff;box-shadow:0 3px 12px rgba(18,59,64,.045)}
#tasksView .section-tools .filters>input,#tasksView .section-tools .filters>select{width:100%;min-width:0;height:38px;color:#243a36}
#tasksView .task-deadline-filter{grid-column:span 2;min-width:0}
#tasksView .task-deadline-filter label{flex:1;min-width:0;white-space:nowrap;color:#52665e}
#tasksView .task-deadline-filter input{width:100%;min-width:0}
#tasksView .task-saved-view-tools{grid-column:span 4;min-width:0}
#tasksView .task-saved-view-tools select,#tasksView .task-saved-view-tools input{max-width:none;min-width:0}
#tasksView .section-tools .view-switch{grid-column:1/-1;justify-content:flex-start;width:max-content;max-width:100%;overflow-x:auto;padding:3px}
#tasksView .section-tools .view-mode{min-height:34px;padding-inline:14px;white-space:nowrap}
#tasksView .internal-task-actions{display:flex;justify-content:flex-end;margin:-4px 0 10px}
#tasksView .task-list-panel{min-height:180px;padding:16px}
@media(max-width:1050px){
 #tasksView .section-tools .filters{grid-template-columns:repeat(3,minmax(0,1fr))}
 #tasksView .task-deadline-filter{grid-column:span 2}
 #tasksView .task-saved-view-tools{grid-column:span 3}
 #tasksView .section-tools .view-switch{grid-column:1/-1}
}
@media(max-width:680px){
 #tasksView .section-tools>div:first-child{grid-template-columns:1fr;gap:5px}
 #tasksView .section-tools h2{white-space:normal}
 #tasksView .section-tools .filters{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px}
 #tasksView .section-tools .filters>input,#tasksView .section-tools .filters>select{grid-column:1/-1}
 #tasksView .task-deadline-filter,#tasksView .task-saved-view-tools{grid-column:1/-1;flex-wrap:wrap}
 #tasksView .section-tools .view-switch{grid-column:1/-1;width:100%}
 #tasksView .section-tools .view-mode{flex:1;padding-inline:10px}
}

/* Finance registry and attendance integrations: preserve hierarchy and form consistency. */
#expensesView .expense-panel>.panel-head{display:grid;grid-template-columns:minmax(0,1fr);justify-items:stretch;gap:10px;margin-bottom:12px}
#expensesView .expense-panel>.panel-head h2{min-width:0;margin:0;white-space:normal}
#expensesView .expense-panel>.panel-head .filters{justify-content:flex-start;width:100%;gap:8px}
#expensesView .expense-panel>.panel-head .filters>*{min-height:38px}
#expensesView .expense-panel>.panel-head .filters input[type=search]{flex:1 1 280px;min-width:min(100%,220px)}
#attendanceView .attendance-api-integration #attendanceApiTokenForm label{display:grid;gap:5px;min-width:min(100%,210px);color:#52665e;font-size:12px;font-weight:650}
#attendanceView .attendance-api-integration #attendanceApiTokenForm input,
#attendanceView .attendance-api-integration #attendanceApiTokenForm select{width:100%;min-width:0;min-height:38px;padding:8px 10px;border:1px solid #d7e1da;border-radius:8px;background:#fff;color:#203b36;font:inherit;font-size:13px}
#attendanceView .attendance-api-integration #attendanceApiTokenForm button{min-height:38px;align-self:end}
@media(max-width:680px){
 #expensesView .expense-panel>.panel-head .filters input[type=search]{flex-basis:100%}
 #attendanceView .attendance-api-integration #attendanceApiTokenForm{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch}
 #attendanceView .attendance-api-integration #attendanceApiTokenForm label{min-width:0}
}

/* Readable metadata labels even in compact process cards */
.process-card .field-label,
body[data-card-size="-1"] .process-card .field-label,
body[data-card-size="-2"] .process-card .field-label {
  color: #52665e;
  font-size: 10px;
  letter-spacing: .035em;
  line-height: 1.25;
}
.process-card .field-label > span {
  color: #a53f34;
  font-size: 10px;
}

/* Accessible text contrast for labels, metadata, and semantic chips */
.brand span:not(.brand-mark), .eyebrow, .view-mode, .metric span,
.board-owner .due-date, .status-caption, .company-profile dt,
.company-profile dd.missing, .status-name-hint, .icon-button {
  color: #52665e;
}
.global-search { color: #52635a; }
.tag { color: #52666b; }
.priority-high { color: #8b5a12; }
.priority-critical { color: #a53f46; }
.lane-count { color: #426050; }
.process-card .category-certification { color: #17675f; }
.process-card .category-logistics { color: #98500d; }
.process-card .category-marketplaces { color: #2c665d; }
.process-card .category-legal { color: #784487; }
.process-card .category-other { color: #4d5d76; }

/* Explicit reviewer decision area */
.process-review-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0;padding:15px 17px;border:1px solid #cbdedc;border-radius:12px;background:#f1f7f6}
.process-review-actions[hidden]{display:none}
.process-review-actions>div{display:grid;gap:4px;min-width:0}
.process-review-actions>div b{color:#244c45;font-size:14px}
.process-review-actions>div span{overflow:hidden;color:#52665e;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.process-review-accept{min-height:40px;flex:0 0 auto;padding:9px 15px;border:1px solid #216c50;border-radius:9px;background:#216c50;color:#fff;font:inherit;font-size:13px;font-weight:750}
.process-review-accept:hover{background:#19563f}
.review-return-button{display:block;width:max-content;max-width:100%;margin-top:7px;padding:6px 9px;border:1px solid #cbdedc;border-radius:7px;background:#f5f9f7;color:#315e5c;font:inherit;font-size:11px;font-weight:700;text-align:left}
.review-return-button:hover{background:#e9f3ee}
@media(max-width:620px){.process-review-actions{align-items:stretch;flex-direction:column}.process-review-accept{width:100%}}


/* Comfortable compact cards: preserve useful density without shrinking reading text. */
body[data-card-size="-2"] .process-card,
body[data-card-size="-2"] .company-card { font-size: 12px; }
body[data-card-size="-2"] .process-card .field-label,
body[data-card-size="-2"] .process-card .company-meta,
body[data-card-size="-2"] .process-card .board-owner,
body[data-card-size="-2"] .process-card .status-caption,
body[data-card-size="-2"] .process-card .tag,
body[data-card-size="-2"] .process-card .priority-pill,
body[data-card-size="-2"] .company-card .company-profile dl > div { font-size: 11px; }
body[data-card-size="-2"] .process-card .field-value { font-size: 12px; }
body[data-card-size="-2"] .process-card .owner-avatar { font-size: 10px; }
body[data-card-size="-2"] .company-card .company-profile dt { color: #52665e; }


/* Readable field hints and stable neutral text contrast. */
.global-search input::placeholder, input::placeholder, textarea::placeholder { color: #5e706b; opacity: 1; }

.company-drawer-tabs{position:sticky;top:0;z-index:2;display:flex;gap:4px;overflow-x:auto;padding:10px 0 0;border-bottom:1px solid #dce6df;background:#fff;scrollbar-width:thin}.company-drawer-tabs [role="tab"]{flex:0 0 auto;min-height:40px;padding:9px 12px;border:0;border-bottom:2px solid transparent;border-radius:8px 8px 0 0;background:transparent;color:#52665e;font:inherit;font-size:13px;font-weight:650;white-space:nowrap;cursor:pointer}.company-drawer-tabs [role="tab"]:hover{background:#f3f7f4;color:#244f42}.company-drawer-tabs [role="tab"][aria-selected="true"]{border-bottom-color:#216c50;background:#f1f6f2;color:#19563f}.company-drawer-panel{padding:18px 0 8px}.company-drawer-panel[hidden]{display:none}.company-drawer-panel>h3{margin:0 0 12px;color:#173b38;font-size:16px}.company-drawer-panel>dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin:0}.company-drawer-panel>dl>div{min-width:0}.company-drawer-panel>dl dt{color:#52665e;font-size:11px}.company-drawer-panel>dl dd{margin:4px 0 0;color:#20312c;font-size:13px;overflow-wrap:anywhere}@media(max-width:600px){.company-drawer-tabs{margin:0 -18px;padding:10px 18px 0}.company-drawer-panel>dl{grid-template-columns:1fr}}


/* Calm reading rhythm and consistent contrast across CRM modules. */
body { font-size: 14px; line-height: 1.48; -webkit-font-smoothing: antialiased; }
.workspace { line-height: 1.48; }
.workspace :is(p, .section-note, .meta, .empty, small) { line-height: 1.5; }
.workspace :is(h1, h2, h3, h4) { line-height: 1.22; letter-spacing: -.018em; }
.workspace :is(.section-note, .meta, .empty, .metric span, .metric small) { color: #52645e; }
.workspace :is(input, select, textarea, button) { line-height: 1.35; }
.workspace :is(.panel, .metric, .process-card, .company-card) { box-shadow: 0 2px 9px rgba(20,55,43,.04); }
.workspace :is(.panel-head, .section-tools) { gap: 16px; }
.workspace :is(.panel-head > div, .section-tools > div) { min-width: 0; }
.my-workday-panel { padding: 22px 24px; }
.my-workday-summary { gap: 12px; margin: 14px 0 8px; }
.my-workday-stat { min-height: 54px; background: #f7f9f7; border-color: #dce5df; }
.my-workday-stat b { color: #176344; }
.my-task-row { min-height: 58px; gap: 16px; }
.my-task-main b { line-height: 1.35; }
@media (max-width: 760px) {
  .my-workday-panel { padding: 18px 16px; }
  .workspace :is(.panel-head, .section-tools) { gap: 10px; }
}

.workday-personal-context { display:flex; flex-wrap:wrap; gap:10px 24px; margin:8px 0 10px; padding:10px 13px; border:1px solid #dce5df; border-radius:10px; background:#f8faf8; }
.workday-context-link { display:flex; flex:1 1 210px; justify-content:space-between; align-items:center; gap:12px; min-width:0; padding:3px 0; border:0; background:transparent; color:#52645e; text-align:left; }
.workday-context-link span { font-size:12px; }
.workday-context-link b { color:#176344; font-size:13px; font-weight:650; }
.workday-context-link:hover b { color:#0c4e35; text-decoration:underline; }
@media(max-width:640px) { .workday-personal-context { display:grid; gap:8px; } .workday-context-link { width:100%; } }


/* Final readability pass: dense card metadata stays legible without adding visual noise. */
.process-card .field-label,
body[data-card-size="-1"] .process-card .field-label,
body[data-card-size="-2"] .process-card .field-label,
.process-card .field-label > span,
.process-card .company-meta,
.process-card .board-owner,
.process-card .status-caption,
.process-card .tag,
.process-card .priority-pill,
.company-card .company-profile dt {
  color: #465851;
  font-size: 11px;
  line-height: 1.35;
}
.process-card .field-label > span { color: #963b33; }
@media (max-width: 760px) {
  .process-card .field-label,
  .process-card .company-meta,
  .process-card .board-owner,
  .process-card .status-caption,
  .process-card .tag,
  .process-card .priority-pill { font-size: 12px; }
}


/* Compact density must never reduce essential process information to microtype. */
.process-card .field-value { color: #20312c; font-size: 11px; line-height: 1.35; }
.company-card .company-profile dd { color: #20312c; font-size: 11px; }
.process-card .tag { color: #52666b; }
.process-card .priority-pill { color: #355b9c; }
.process-card .priority-pill.priority-high { color: #8b5a12; }
.process-card .priority-pill.priority-critical { color: #a53f46; }


/* Director dashboard follows the business overview; personal queues belong to employee views. */
body[data-role="director"] #dashboardView .my-workday-panel { display: none; }

.role-matrix-cell { color: #52645e; }


/* Keep headings and helper text readable on the light workspace surface. */
.workspace .section-tools h2{color:#173b38}
.workspace .section-tools .eyebrow{color:#42695f}
.workspace .section-tools .section-note{color:#52665e}

.process-stage-missing{display:inline-flex;width:max-content;max-width:100%;margin-top:4px;padding:3px 7px;border:1px solid #efd9aa;border-radius:999px;background:#fff6e6;color:#86550c;font-size:11px;font-weight:700;line-height:1.3;white-space:normal}


/* Designer pass: calm hierarchy, readable density, clear surface separation. */
:root { --ink:#20312c; --muted:#52665e; --line:#dce5df; --canvas:#123b40; --canvas-edge:#0c2d32; --paper:#fff; }
body { font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.workspace { color:#20312c; background:#f2f5f2; }
.workspace :is(.panel,.metric,.process-card,.company-card,.kanban-lane) { border-color:#dce5df; box-shadow:0 2px 8px rgba(22,52,40,.045); }
.workspace :is(.panel,.metric,.process-card,.company-card) { border-radius:12px; background-color:#fff; }
.workspace :is(.section-note,.meta,.empty,small,.metric span,.metric small) { color:#52665e; }
.workspace :is(.section-tools h2,.panel h2,.panel h3,.process-card h3,.company-card h3) { color:#1c302b; }
.workspace .section-tools { margin-bottom:20px; }
.workspace .section-note { font-size:13px; line-height:1.5; }
.workspace :is(input,select,textarea) { color:#20312c; }
.workspace :is(input,select,textarea)::placeholder { color:#63746d; opacity:1; }
.workspace table { font-size:12px; }
.workspace table thead th { color:#40554d; background:#f2f6f3; font-weight:700; line-height:1.4; }
.workspace table tbody td { color:#273a34; line-height:1.45; }
.workspace table tbody tr:hover > td { background-color:#f7faf8; }
.metric span,.metric small,.section-note { color:#52665e; }
.metric strong { color:#183b32; }
.panel-head { align-items:center; }
.process-card h3,.company-card h3 { overflow-wrap:anywhere; }
.process-card .field-label,.process-card .company-meta,.process-card .board-owner,.process-card .status-caption { color:#465851; line-height:1.4; }
.process-card .field-value,.company-card .company-profile dd { color:#263a33; font-size:12px; line-height:1.45; }
.company-card .company-profile dt { color:#52665e; }
.owner-name { color:#40564e; }
.process-card .due-date { color:#52665e; }
.attention-indicator,.status-dot,.card-signal.pulse { animation:none !important; }
.process-card:hover,.company-card:hover { transform:translateY(-1px); }
.process-card:focus-within,.company-card:focus-within { border-color:#7fa895; box-shadow:0 0 0 2px rgba(33,108,80,.12),0 4px 12px rgba(22,52,40,.06); }
@media (min-width:761px) {
  body[data-card-size="-2"] { --card-min:250px; --board-min:245px; --card-pad:13px; --card-title-size:14px; }
  body[data-card-size="-1"] { --card-min:250px; --board-min:245px; --card-pad:14px; --card-title-size:14px; }
  body[data-card-size="-2"] .process-card .field-label,
  body[data-card-size="-1"] .process-card .field-label,
  body[data-card-size="-2"] .process-card .field-value,
  body[data-card-size="-1"] .process-card .field-value,
  body[data-card-size="-2"] .process-card .company-meta,
  body[data-card-size="-1"] .process-card .company-meta,
  body[data-card-size="-2"] .process-card .status-caption,
  body[data-card-size="-1"] .process-card .status-caption,
  body[data-card-size="-2"] .process-card .board-owner,
  body[data-card-size="-1"] .process-card .board-owner,
  body[data-card-size="-2"] .company-card .company-profile dl > div,
  body[data-card-size="-1"] .company-card .company-profile dl > div { font-size:12px; line-height:1.4; }
  body[data-card-size="-2"] .process-card .tag,
  body[data-card-size="-1"] .process-card .tag,
  body[data-card-size="-2"] .process-card .priority-pill,
  body[data-card-size="-1"] .process-card .priority-pill { padding:4px 7px; font-size:11px; }
  body[data-card-size="-2"] .process-card .icon-action,
  body[data-card-size="-1"] .process-card .icon-action { width:32px; height:32px; padding:6px; }
  body[data-card-size="-2"] .process-card .card-module,
  body[data-card-size="-1"] .process-card .card-module { padding:9px; }
}
@media (max-width:760px) {
  .workspace { background:#f2f5f2; }
  .workspace .section-tools { margin-bottom:16px; }
  .workspace table { font-size:12px; }
  .process-card .field-value,.company-card .company-profile dd { font-size:13px; }
}


/* Responsive designer correction: keep the dark frame and readable card contrast at tablet widths. */
@media (min-width:761px) {
  html,body { min-height:100%; background:#0c2d32 !important; }
  body { padding:16px !important; box-sizing:border-box; }
  .app-shell { width:100%; max-width:1780px !important; min-height:calc(100vh - 32px) !important; margin:0 auto !important; border:1px solid rgba(255,255,255,.24) !important; border-radius:18px !important; background:#fff !important; box-shadow:0 20px 56px rgba(4,25,27,.28) !important; }
  .sidebar { height:calc(100vh - 32px) !important; }
  .workspace { background:#e9efeb !important; }
  .workspace :is(.panel,.metric,.process-card,.company-card,.kanban-lane) { border-color:#cbd8d0; }
}
@media (max-width:760px) {
  body { padding:0 !important; background:#0c2d32 !important; }
  .app-shell { margin:0 !important; border:0 !important; border-radius:0 !important; }
  .workspace { background:#e9efeb; }
  .workspace :is(.panel,.metric,.process-card,.company-card,.kanban-lane) { border-color:#cbd8d0; }
}

/* hard override: dark teal page surround */ @media (min-width:761px){html,body{background:#0c2d32!important}body{padding:16px!important;box-sizing:border-box}.app-shell{width:100%;max-width:1780px!important;min-height:calc(100vh - 32px)!important;margin:0 auto!important;border:1px solid rgba(255,255,255,.24)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 20px 56px rgba(4,25,27,.28)!important}.sidebar{height:calc(100vh - 32px)!important}.workspace{background:#e9efeb!important}} @media (max-width:760px){body{padding:0!important;background:#0c2d32!important}.app-shell{margin:0!important;border:0!important;border-radius:0!important}.workspace{background:#e9efeb!important}}
/* Universal dark teal outer frame at every viewport width */ html,body{min-height:100vh;background:#0c2d32!important}body{padding:12px!important;box-sizing:border-box}.app-shell{width:100%;max-width:1780px!important;min-height:calc(100vh - 24px)!important;margin:0 auto!important;border:1px solid rgba(255,255,255,.24)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 20px 56px rgba(4,25,27,.28)!important}.sidebar{height:calc(100vh - 24px)!important}.workspace{background:#e9efeb!important}@media(max-width:760px){body{padding:8px!important}.app-shell{min-height:calc(100vh - 16px)!important;border-radius:14px!important}.sidebar{height:auto!important}}
/* User-priority canvas: dark teal workspace, bright headings, light readable cards */ .workspace{background:#0c2d32!important;color:#eef6f3!important}.workspace .section-tools h2{color:#f4faf7!important}.workspace .section-tools .eyebrow{color:#b8ddd2!important}.workspace .section-tools .section-note{color:#d0dfdc!important}.workspace :is(.panel,.metric,.process-card,.company-card,.kanban-lane){color:#20312c}.workspace :is(.panel,.metric,.process-card,.company-card,.kanban-lane) :is(h1,h2,h3,h4){color:#1c302b}.workspace :is(.panel,.metric,.process-card,.company-card,.kanban-lane) :is(.section-note,.meta,.empty,small,.metric span,.metric small){color:#52665e}
/* Visible user-priority canvas: dark teal behind distinct light work cards. */
html,body { min-height:100vh; background:#0b3034 !important; }
.workspace { background:#0b3034 !important; color:#eef6f3 !important; }
.workspace .section-tools h2 { color:#f4faf7 !important; }
/* Keep the long desktop navigation usable without moving the fixed account footer. */
@media (min-width: 761px) {
  .sidebar nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #718c88 transparent; }
  .sidebar .sidebar-foot { flex: 0 0 auto; }
}
/* Make dashboard startup state explicit instead of leaving placeholder dashes. */
.dashboard-load-notice { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 16px; padding:12px 16px; border:1px solid #7da5a1; border-radius:10px; background:#153f43; color:#f2f8f7; font-size:14px; }
.dashboard-load-notice[hidden] { display:none !important; }
.dashboard-load-notice button { flex:0 0 auto; }
@media (max-width: 600px) { .dashboard-load-notice { align-items:flex-start; flex-direction:column; } }


/* Company directory: compact client groups with readable legal-entity cards. */
#companyGrid.company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  align-items: start;
  gap: 18px;
}
#companyGrid > .client-group {
  grid-column: auto;
  min-width: 0;
  margin: 0;
  padding: 16px;
  background: #f3f7f5;
  border: 1px solid #c8d9d1;
  box-shadow: 0 3px 12px rgba(3, 33, 29, .1);
}
#companyGrid .client-group-head {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 14px;
}
#companyGrid .client-group-head > div:first-child { min-width: 0; }
#companyGrid .client-group-head h3 {
  color: #173e38;
  font-size: 18px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
#companyGrid .client-group-head .eyebrow { color: #4d6b62; }
#companyGrid .client-group-head small,
#companyGrid .client-group-head .meta { color: #526b62; }
#companyGrid .client-group-head .team-actions {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
#companyGrid .client-group > .company-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
#companyGrid .company-card {
  width: 100%;
  min-width: 0;
}
#companyGrid .company-actions { flex-wrap: wrap; gap: 7px; }
@media (max-width: 760px) {
  #companyGrid.company-grid { gap: 12px; }
  #companyGrid > .client-group { padding: 12px; }
}


/* Full-height navigation in the page scroll */
@media (min-width: 761px) {
  .app-shell { grid-template-columns: 238px minmax(0, 1fr) !important; }
  .sidebar {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100%;
    align-self: stretch;
    overflow: visible !important;
  }
  .sidebar nav {
    flex: 0 0 auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto;
  }
  .sidebar .nav-section { align-items: stretch; }
  .sidebar .nav-section-label { display: block !important; }
  .sidebar .nav-item { width: 100%; justify-content: flex-start; }
  .sidebar .nav-item span { display: inline !important; }
  .sidebar .brand > div, .sidebar .sidebar-foot > div { display: block !important; }
  .sidebar .sidebar-foot { justify-content: flex-start; }
}


/* Inline company details and one-click copying */
#companyGrid.company-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,410px),1fr)); }
#companyGrid .company-card .company-description { display:none; }
#companyGrid .company-card .company-profile { display:block; margin-top:14px; padding-top:12px; }
#companyGrid .company-card .company-profile > b { color:#173c31; font-size:13px; }
#companyGrid .company-card .company-profile dl { display:grid; gap:0; }
#companyGrid .company-card .company-profile dl > div {
  display:grid;
  grid-template-columns:minmax(95px,32%) minmax(0,1fr);
  gap:8px;
  align-items:start;
  padding:7px 0;
  border-bottom:1px solid #e8eeea;
  font-size:12px;
  line-height:1.4;
}
#companyGrid .company-card .company-profile dt { color:#51665d; font-size:12px; overflow-wrap:anywhere; }
#companyGrid .company-card .company-profile dt::before { display:none; }
#companyGrid .company-card .company-profile dd {
  display:flex;
  align-items:flex-start;
  gap:6px;
  min-width:0;
  margin:0;
  color:#1e382e;
  font-size:12px;
  line-height:1.45;
}
#companyGrid .company-card .company-profile dd.missing { color:#718078; }
#companyGrid .company-profile-value { flex:1; min-width:0; overflow-wrap:anywhere; white-space:pre-wrap; }
#companyGrid .company-copy-button {
  display:inline-grid;
  flex:0 0 28px;
  place-items:center;
  width:28px;
  height:28px;
  margin-top:-5px;
  padding:5px;
  border:1px solid #bfd8ca;
  border-radius:7px;
  background:#f0f8f3;
  color:#17664b;
}
#companyGrid .company-copy-button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
#companyGrid .company-copy-button:hover,
#companyGrid .company-copy-button:focus-visible { background:#dceee3; border-color:#70a487; outline:2px solid #7eaf95; outline-offset:1px; }
#companyGrid .company-card .company-services { display:grid; }
@media(max-width:480px){
  #companyGrid .company-card .company-profile dl > div { grid-template-columns:minmax(0,1fr); gap:3px; }
}