/* Planner — calm workspace theme inspired by the appraisal interface.
   This layer follows style.css and the legacy inline rules in index.html. */

@font-face {
  font-family: 'Planner Plex';
  src: url('/static/fonts/ibm-plex-sans-400-cyrillic.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+2116;
}
@font-face {
  font-family: 'Planner Plex';
  src: url('/static/fonts/ibm-plex-sans-400-cyrillic-ext.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
@font-face {
  font-family: 'Planner Plex';
  src: url('/static/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191-2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Planner Plex';
  src: url('/static/fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F;
}
@font-face {
  font-family: 'Planner Fraunces';
  src: url('/static/fonts/fraunces-500-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191-2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Planner Fraunces';
  src: url('/static/fonts/fraunces-500-latin-ext.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F;
}

:root {
  --color-primary: #1f6f63;
  --color-primary-hover: #18594f;
  --color-bg: #f5f2ea;
  --color-surface: #fff;
  --color-text: #17242e;
  --color-text-muted: #68727c;
  --color-text-hint: #53616a;
  --color-border: #e7e2d5;
  --color-border-input: #d9d2c3;
  --color-border-blue: #bacfc8;
  --color-success: #1f6f63;
  --color-success-hover: #18594f;
  --color-success-bg: #e9f3ee;
  --color-success-border: #c7ded2;
  --color-danger: #b3492f;
  --color-danger-hover: #963b27;
  --color-danger-bg: #fbede8;
  --color-warning-bg: #fbf0de;
  --color-warning-text: #8a5a16;
  --color-info-bg: #eaf2ef;
  --color-info-text: #1f6f63;
  --color-neutral: #f1eee7;
  --color-neutral-dark: #ddd7c8;
  --font-sans: 'Planner Plex', 'Segoe UI', Arial, sans-serif;
  --radius-md: 7px;
  --radius-lg: 9px;
  --radius-xl: 10px;
  --shadow-card: none;
  --shadow-elevated: 0 12px 32px rgba(23, 36, 46, .12);
  --shadow-header: none;
  --color-hover-row: #f7f4ec;
  --planner-sidebar-width: 248px;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.45;
}

/* The utility bar stays in view; the persistent module list moves left. */
body > header {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 64px;
  margin-left: var(--planner-sidebar-width);
  padding: 13px 30px;
  background: var(--color-bg);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}
body > header .logo,
body > header .subtitle { display: none; }
body > header .header-inner { align-items: center; }
body > header .global-cc-indicator,
body > header .account-button,
body > header .header-feedback-btn,
body > header .header-icon-btn.is-muted {
  background: #fff;
  border: 1px solid var(--color-border-input);
  color: var(--color-text);
  border-radius: 8px;
}
body > header .global-cc-indicator:hover,
body > header .account-button:hover,
body > header .header-feedback-btn:hover,
body > header .header-icon-btn.is-muted:hover {
  background: #f7f4ec;
  border-color: #c8bfae;
  transform: none;
}
body > header .global-cc-indicator.has-warning { border-color: #d8b46d; }
body > header .global-cc-indicator.has-error,
body > header #header-inbox-btn.has-critical { border-color: var(--color-danger); }
body > header .account-menu { margin-left: -8px; }

main {
  width: auto;
  margin: 0 0 0 var(--planner-sidebar-width);
  padding: 26px 30px 48px;
  gap: 0;
}
.stage-card {
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.nav-tabs {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 70;
  width: var(--planner-sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 30px 15px;
  overflow-y: auto;
  border: 0;
  background: #17242e;
}
.nav-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 9px 26px;
  color: #f5f2ea;
}
.nav-brand-name {
  font-family: 'Planner Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.nav-brand-caption {
  color: #aeb9be;
  font-size: 12px;
}
.nav-tab {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 43px;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #d9dfdc;
  font: 400 14px/1.4 var(--font-sans);
  text-align: left;
  white-space: nowrap;
}
.nav-tab:hover,
.nav-tab.active {
  border: 0;
  color: #fff;
  background: rgba(255, 255, 255, .11);
}
.nav-tab.active { font-weight: 600; }
.nav-tab:focus-visible {
  outline: 2px solid #a7d2c1;
  outline-offset: -2px;
}

.nav-group-label {
  display: block;
  margin: 4px 14px 8px;
  color: #94a8ac;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav-group-label-secondary { margin-top: 23px; }

.workspace-heading { margin: 0 0 24px; }
.workspace-eyebrow {
  margin-bottom: 5px;
  color: #73817e;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.workspace-heading h1 {
  font-family: 'Planner Fraunces', Georgia, serif;
  font-size: clamp(26px, 2.3vw, 34px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.025em;
}

/* Keep the dense work surfaces; quiet their chrome. */
.dash-widget,
.dash-info-panel,
.cal-sidebar-card,
.emp-sidebar,
.tasks-sidebar,
.deadlines-sidebar,
.vacations-sidebar,
.eco-sidebar {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  box-shadow: none;
}
.dash-widget { padding: 19px 20px; }
.dash-container { gap: 14px; margin-top: 0; }
.dash-widget-title {
  font-family: 'Planner Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 14px;
}
.dash-right-col,
.emp-sidebar,
.tasks-sidebar,
.deadlines-sidebar,
.vacations-sidebar,
.eco-sidebar,
.cal-sidebar-pane {
  position: static;
  max-height: none;
  overflow-y: visible;
}
.sidebar-widget-title,
.dash-info-title {
  color: var(--color-text-hint);
  font-size: 11px;
  letter-spacing: .07em;
}
.attn-pill { border-radius: 7px; box-shadow: none; }

.data-table th {
  background: #f7f5ef;
  color: #617078;
  border-bottom: 1px solid var(--color-border);
}
.data-table td { border-bottom-color: #eeeae1; }
.data-table tbody tr:hover td { background: #f7f4ec; }
.data-table tbody tr.row-selected td,
.data-table tbody tr.row-selected:hover td { background: #e9f3ee; }
#employees-container .data-table thead th:first-child { background: #f7f5ef; }

.btn-primary,
.btn-confirm { background: var(--color-primary); color: #fff; }
.btn-primary:hover:not(:disabled),
.btn-confirm:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-secondary {
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-border-input);
}
.btn-secondary:hover:not(:disabled) { background: #f7f4ec; }

input[type='text'], input[type='search'], input[type='email'],
input[type='password'], input[type='number'], input[type='date'],
select, textarea, .search-input, .form-select {
  background: #fff;
  border-color: var(--color-border-input);
  color: var(--color-text);
  border-radius: 7px;
}
:is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

body > footer {
  margin-left: var(--planner-sidebar-width);
  background: transparent;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* The module summaries stay beside their data. Each card keeps its existing
   data source and DOM ids; the theme only changes placement and visual weight. */
.dash-layout, .emp-layout, .tasks-layout, .deadlines-layout,
.vacations-layout, .cal-layout, .wl-layout, .eco-layout {
  gap: 16px;
}
.dash-right-col, .emp-right-col, .tasks-right-col,
.deadlines-right-col, .vacations-right-col,
.wl-right-col-persistent, .eco-right-col, .cal-sidebar-pane {
  width: 282px;
  flex: 0 0 282px;
  position: sticky;
  top: 82px;
  align-self: flex-start;
  max-height: calc(100vh - 98px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.dash-right-col { width: 300px; flex-basis: 300px; }
.cal-sidebar-pane { width: 265px; flex-basis: 265px; }
.emp-sidebar, .tasks-sidebar, .deadlines-sidebar, .eco-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  overflow: visible;
}
.vacations-sidebar {
  width: 100%;
  padding: 17px 18px;
  max-height: none;
  overflow: visible;
}
.sidebar-widget, .eco-sidebar .sidebar-widget,
.wl-info-panel, .dash-info-panel, .cal-sidebar-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  box-shadow: none;
}
.emp-sidebar .sidebar-widget, .tasks-sidebar .sidebar-widget,
.deadlines-sidebar .sidebar-widget, .eco-sidebar .sidebar-widget {
  padding: 16px;
  margin: 0;
}
.emp-sidebar .sidebar-widget:last-child,
.tasks-sidebar .sidebar-widget:last-child,
.deadlines-sidebar .sidebar-widget:last-child,
.eco-sidebar .sidebar-widget:last-child { border: 1px solid var(--color-border); }
.sidebar-widget-title, .eco-sidebar .sidebar-widget-title,
.cal-sidebar-title, .wl-card-title, .dash-info-title {
  color: var(--color-text);
  font-family: 'Planner Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
  line-height: 1.3;
}
.sidebar-widget-body { line-height: 1.5; }
.sidebar-widget .sidebar-widget-body > :last-child { margin-bottom: 0; }
.dash-info-panel { padding: 16px 18px; }
.dash-info-title { margin: 0 0 12px; }
.dash-settings-disclosure { margin-top: 10px; }
.dash-settings-disclosure > summary {
  cursor: pointer;
  list-style: none;
  color: var(--color-text);
  font: 500 16px/1.3 'Planner Fraunces', Georgia, serif;
}
.dash-settings-disclosure > summary::-webkit-details-marker { display: none; }
.dash-settings-disclosure > summary::before {
  content: '›';
  display: inline-block;
  margin-right: 9px;
  color: var(--color-primary);
  font: 600 18px/1 var(--font-sans);
  transform-origin: center;
  transition: transform .15s;
}
.dash-settings-disclosure[open] > summary::before { transform: rotate(90deg); }
.dash-settings-content { margin-top: 17px; }

/* Overview cards and dense data surfaces use the same quiet hierarchy. */
.dash-container { gap: 14px; }
.dash-widget { padding: 20px; }
.dash-widget-title {
  color: var(--color-text);
  font: 500 18px/1.3 'Planner Fraunces', Georgia, serif;
  margin-bottom: 16px;
}
#dash-attention-widget { padding: 18px 20px; }
#dash-attention-widget .dash-widget-title { font-size: 18px; margin-bottom: 13px; }
.dash-card {
  padding: 13px 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-border);
  border-radius: 7px;
}
.dash-card:hover, .attn-pill:hover { background: #faf8f3; }
.dash-card-blue, .dash-card-green { border-left-color: var(--color-primary); }
.dash-card-purple { border-left-color: #9378aa; }
.dash-card-orange { border-left-color: #c28640; }
.dash-card-red { border-left-color: var(--color-danger); }
.dash-label { color: var(--color-text-muted); font-size: 12px; font-weight: 500; }
.dash-value { font: 500 25px/1.15 'Planner Fraunces', Georgia, serif; }
.dash-card-blue .dash-value, .dash-card-green .dash-value { color: var(--color-primary); }
.dash-card-purple .dash-value { color: #82629d; }
.dash-card-orange .dash-value { color: #a76c2b; }
.attn-grid { gap: 8px; }
.attn-pill { min-height: 39px; border-radius: 6px; box-shadow: none; }
.attn-pill.has-ok { border-left-color: var(--color-primary); }
.attn-pill.has-ok .attn-value { color: var(--color-primary); }
.attn-pill.has-warning { border-left-color: #c28640; }
.attn-pill.has-error { border-left-color: var(--color-danger); }
.attn-label { color: var(--color-text-muted); }

.toolbar-flex, .deadlines-toolbar, .eco-toolbar,
.wl-global-toolbar, .wl-toolbar-unified, .wl-kpi-toolbar {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.dl-subtabs { border-bottom-color: var(--color-border); }
.dl-subtab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.data-table th {
  background: #f8f6f0;
  color: #65757a;
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
  letter-spacing: .05em;
}
.data-table td { border-bottom: 1px solid #eeeae1; }
.data-table tbody tr:hover td { background: #faf8f3; }
#employees-container .data-table thead th,
#employees-container .data-table thead th:first-child { background: #f8f6f0; }
.status-chip, .priority-high, .priority-medium, .priority-low {
  border-radius: 999px;
}
.btn-primary, .btn-confirm { border-radius: 6px; }
.btn-secondary, .dl-icon-btn, .btn-icon-circle {
  border-color: var(--color-border-input);
  border-radius: 6px;
}
.eco-kpi-card, .eco-panel, .wl-chart-card { box-shadow: none; }
.wl-info-panel, .wl-global-toolbar, .wl-toolbar-unified { background: #fff; }
.eco-sidebar .sidebar-widget { padding: 16px; }
.eco-sb-row { border-bottom: 1px solid var(--color-border); }
.panel-actions, .wl-right-col-persistent .panel-actions,
.eco-right-col .panel-actions { flex-wrap: wrap; }
.eco-toolbar-left { min-width: 0; max-width: 100%; flex-wrap: wrap; }

/* Quiet pictograms and badges shared by the approved Home and Tasks layouts. */
.nav-tab::before {
  content: '□';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  margin-right: 10px;
  color: #aeb9be;
  font: 400 18px/1 var(--font-sans);
}
.nav-tab.active::before,
.nav-tab:hover::before { color: #e5f0eb; }
.nav-tab[data-tab='dashboard']::before { content: '⌂'; font-size: 22px; }
.nav-tab[data-tab='tasks']::before { content: '☷'; }
.nav-tab[data-tab='deadlines']::before { content: '◷'; }
.nav-tab[data-tab='employees']::before { content: '♙'; }
.nav-tab[data-tab='calendar']::before { content: '▦'; }
.nav-tab[data-tab='documents']::before { content: '▤'; }
.nav-tab[data-tab='vacations']::before { content: '◇'; }
.nav-tab[data-tab='workload']::before { content: '▥'; }
.nav-tab[data-tab='kpi']::before { content: '◫'; }
.nav-tab[data-tab='economics']::before { content: '◌'; }

.attn-emoji {
  width: 18px;
  color: #72817d;
  font: 600 16px/1 var(--font-sans);
  text-align: center;
}
.attn-pill.has-error .attn-emoji { color: var(--color-danger); }
.attn-pill.has-warning .attn-emoji { color: var(--color-warning-text); }
.attn-pill.has-warning { border-left-color: #c28640; }
.attn-pill.has-error { border-left-color: var(--color-danger); }
.attn-pill.has-ok { border-left-color: var(--color-primary); }
#dash-attention-widget.attn-all-clear .dash-widget-title { color: var(--color-text); }

.status-chip,
.priority-high, .priority-medium, .priority-low,
.cc-badge, .g-cc-b,
.task-chain-badge, .dl-badge,
.badge-temp, .badge-reso, .badge-manager, .badge-fired {
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: none;
}
.status-chip, .priority-high, .priority-medium, .priority-low {
  padding: 3px 9px;
  border: 1px solid transparent;
}
.status-chip.running,
.status-chip.done, .priority-low {
  background: #e7f1ec;
  color: #26756c;
  border-color: #d2e5db;
}
.status-chip.pending, .status-chip.stopped,
.priority-medium {
  background: #fcf0e4;
  color: #9d632d;
  border-color: #f2dfc8;
}
.status-chip.error, .priority-high {
  background: #f9ebe8;
  color: #ad4c45;
  border-color: #efd7d1;
}
.cc-badge, .g-cc-b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid transparent;
}
.cc-badge::before, .g-cc-b::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cc-badge-error, .g-cc-b-error { background: #f9ebe8; color: #ad4c45; border-color: #efd7d1; }
.cc-badge-warning, .g-cc-b-warning { background: #fcf0e4; color: #9d632d; border-color: #f2dfc8; }
.cc-badge-ok, .g-cc-b-ok { background: #e7f1ec; color: #26756c; border-color: #d2e5db; }
.cc-badge-info { background: #f0f2f0; color: #607077; border-color: #e4e8e5; }
.badge-temp, .badge-manager { background: #fcf0e4; color: #9d632d; border-color: #f2dfc8; }
.badge-reso { background: #e7f1ec; color: #26756c; border-color: #d2e5db; }
.badge-fired { background: #f9ebe8; color: #ad4c45; border: 1px solid #efd7d1; }
.tasks-st-value {
  min-width: 27px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f0f2f0;
  color: #53616a;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
body > header .header-icon-btn [aria-hidden='true'],
body > header .g-cc-label {
  font: 500 19px/1 var(--font-sans);
  color: var(--color-text-hint);
}
body > header .header-inbox-badge {
  background: #fcf0e4;
  color: #9d632d;
  border: 1px solid #f2dfc8;
}
body > header .header-inbox-badge.sev-critical {
  background: #f9ebe8;
  color: #ad4c45;
  border-color: #efd7d1;
}
.dl-icon-btn,
.btn-excel-upload.dl-icon-btn,
.btn-master-send.dl-icon-btn,
.btn-icon-circle.dl-icon-btn {
  width: 42px;
  height: 42px;
  background: #fff;
  border: 1px solid var(--color-border-input);
  border-radius: 7px;
  color: var(--color-text-hint);
  box-shadow: none;
}
.dl-icon-btn svg { width: 18px; height: 18px; }
.dl-icon-btn:hover:not(:disabled),
.btn-excel-upload.dl-icon-btn:hover:not(:disabled),
.btn-master-send.dl-icon-btn:hover:not(:disabled),
.btn-icon-circle.dl-icon-btn:hover:not(:disabled) {
  background: #f7f4ec;
  border-color: #b9c9c1;
  color: var(--color-primary);
}

/* A data column may be narrower than the window because its summary remains
   visible beside it. Wrap controls inside that column; scroll only wide data. */
.deadlines-content { overflow-x: visible; }
#deadlines-container, #dl-unassigned-container, #dl-stats-container {
  max-width: 100%;
  overflow-x: auto;
}
.deadlines-toolbar {
  flex-wrap: wrap;
  overflow: visible;
  gap: 8px;
}
.deadlines-toolbar .search-input {
  flex: 1 1 270px;
  width: auto;
  min-width: min(270px, 100%);
}
.deadlines-toolbar .dl-actions-group {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
  margin-left: auto;
}
.deadlines-toolbar .dl-actions-group button { height: 35px; }
.dl-subtabs, .eco-subnav { flex-wrap: wrap; }
.dl-subtab, .eco-subnav-btn { white-space: nowrap; }

.vac-period-controls, .eco-period-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.vacation-toolbar .search-input { flex: 1 1 180px; min-width: 180px; }
.vacation-toolbar #btn-vac-settings { margin-left: auto; }
.eco-toolbar-left { flex-wrap: wrap; max-width: 100%; }
.eco-toolbar-sep { display: none; }

/* Tool actions stay in one line inside a 282px context column. */
.panel-actions { gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.panel-actions .dl-icon-btn,
.panel-actions .btn-icon-circle.dl-icon-btn {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}
.panel-actions .dl-icon-btn svg { width: 17px; height: 17px; }
#kpi-export-pdf { margin-right: 0; }

/* Plain action hierarchy and small semantic markers. */
.btn-success { background: var(--color-primary); border-color: var(--color-primary); }
.btn-success:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-warning {
  background: #fcf0e4;
  border-color: #efd8bc;
  color: #885729;
}
.btn-warning:hover:not(:disabled) {
  background: #f6e5d3;
  border-color: #dabf9c;
  color: #6d4521;
}
.btn-danger.btn-icon-sq {
  background: #fff;
  border-color: #e5c9c4;
  color: var(--color-danger);
}
.btn-danger.btn-icon-sq:hover:not(:disabled) { background: var(--color-danger-bg); }
.btn-icon-sq { width: 36px; height: 36px; font-size: 20px; }
.btn-icon-sq:disabled { opacity: .45; }
.dl-stat-val, .eco-count-badge {
  padding: 2px 8px;
  border: 1px solid #d2e5db;
  border-radius: 999px;
  background: #e7f1ec;
  color: #26756c;
  font: 600 11px/1.35 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.eco-src-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: normal;
}
.eco-src-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: currentColor;
}
.eco-src-monthly { background: #e7f1ec; color: #26756c; border-color: #d2e5db; }
.eco-src-daily { background: #fcf0e4; color: #9d632d; border-color: #f2dfc8; }
.eco-src-none { background: #f0f2f0; color: #607077; border-color: #e4e8e5; }

/* Vacation legend uses the same subdued accents as status pills. */
.vac-legend-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 11px/1.3 var(--font-sans);
  cursor: help;
}
.vac-legend-summer { color: #9d632d; background: #fcf0e4; border-color: #f2dfc8; }
.vac-legend-winter { color: #42697c; background: #eaf2f4; border-color: #d2e3e8; }
.vac-legend-overlap { color: #ad4c45; background: #f9ebe8; border-color: #efd7d1; }
.vacations-sidebar .sidebar-widget {
  padding: 11px 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
}
.vacations-sidebar .sidebar-widget:last-child { padding-bottom: 0; border-bottom: 0; }
.vacations-sidebar .vac-sb-divider { margin: 8px 0 0; }

/* Keep edge tooltips inside the viewport even while hidden. */
#btn-cal-export-schedule[data-tooltip]::before,
#btn-cal-export-schedule[data-tooltip]::after,
#btn-vac-settings[data-tooltip]::before,
#btn-vac-settings[data-tooltip]::after {
  left: auto;
  right: 0;
  transform: translateY(4px);
}
#btn-cal-export-schedule[data-tooltip]:hover::before,
#btn-cal-export-schedule[data-tooltip]:hover::after,
#btn-vac-settings[data-tooltip]:hover::before,
#btn-vac-settings[data-tooltip]:hover::after { transform: translateY(0); }

.panel-actions .dl-icon-btn[data-tooltip]::before,
.panel-actions .dl-icon-btn[data-tooltip]::after {
  left: auto;
  right: 0;
  transform: translateY(4px);
}
.panel-actions .dl-icon-btn[data-tooltip]:hover::before,
.panel-actions .dl-icon-btn[data-tooltip]:hover::after { transform: translateY(0); }

.dl-cov-day--missing { color: #ad4c45; background: #f9ebe8; border-color: #e9c8c3; }

@media (max-width: 900px) {
  .calendar-toolbar { flex-wrap: wrap; }
  .calendar-toolbar .toolbar-right { margin-left: auto; }
}

@media (max-width: 640px) {
  .calendar-toolbar .toolbar-left,
  .calendar-toolbar .toolbar-right {
    flex: 1 1 100%;
    flex-wrap: wrap;
    min-width: 0;
  }
  .calendar-toolbar .toolbar-right { justify-content: flex-end; }
  .wl-toolbar-unified .wl-filters-group {
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    padding-left: 0;
    border-left: 0;
  }
  .wl-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .wl-dashboard-grid > * { min-width: 0; }
  .wl-dashboard-grid .wl-chart-wrap { overflow-x: auto; }
  .vac-period-controls, .eco-period-controls { max-width: 100%; gap: 4px; }
  .vac-period-controls select, .eco-period-controls select { min-width: 0 !important; }
  .vac-period-controls select:first-of-type, .eco-period-controls select:first-of-type { width: 112px; }
  .vac-period-controls select:nth-of-type(2), .eco-period-controls select:nth-of-type(2) { width: 75px; }
}

@media (max-width: 1080px) {
  .nav-tab::before { margin-right: 6px; }
  .nav-tab.active::before, .nav-tab:hover::before { color: var(--color-primary); }
}

@media (max-width: 1500px) {
  .deadlines-toolbar { flex-wrap: wrap; overflow-x: visible; }
  .deadlines-toolbar .search-input { flex: 1 1 220px; min-width: 200px; }
  .dl-actions-group, .dl-primary-actions { flex-wrap: wrap; margin-left: 0; }
}

@media (min-width: 751px) and (max-width: 1200px) {
  .dash-layout, .emp-layout, .tasks-layout, .deadlines-layout,
  .vacations-layout, .cal-layout, .wl-layout, .eco-layout {
    flex-direction: row;
    align-items: flex-start;
  }
  .dash-right-col, .emp-right-col, .tasks-right-col,
  .deadlines-right-col, .vacations-right-col,
  .wl-right-col-persistent, .eco-right-col, .cal-sidebar-pane {
    width: 252px;
    flex-basis: 252px;
    position: sticky;
    top: 82px;
  }
  .dash-right-col { width: 270px; flex-basis: 270px; }
  .cal-sidebar-pane { width: 230px; flex-basis: 230px; }
  .vacations-sidebar { width: 100%; }
}

@media (max-width: 1080px) {
  body > header {
    margin-left: 0;
    padding-inline: 20px;
  }
  body > header .logo,
  body > header .subtitle { display: inline; color: var(--color-text); }
  body > header .subtitle { color: var(--color-text-muted); }
  main { margin-left: 0; padding: 20px; }
  .nav-tabs {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    flex-direction: row;
    gap: 2px;
    margin-bottom: 22px;
    padding: 5px;
    flex-wrap: wrap;
    overflow: visible;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
  }
  .nav-brand { display: none; }
  .nav-group-label { display: none; }
  .nav-tab {
    width: auto;
    flex: 0 0 auto;
    min-height: 39px;
    padding: 8px 12px;
    color: var(--color-text-hint);
  }
  .nav-tab:hover,
  .nav-tab.active { color: var(--color-primary); background: #e9f3ee; }
  body > footer { margin-left: 0; }
}

@media (max-width: 750px) {
  .dash-layout, .emp-layout, .tasks-layout, .deadlines-layout,
  .vacations-layout, .cal-layout, .wl-layout, .eco-layout {
    flex-direction: column;
  }
  .dash-right-col, .emp-right-col, .tasks-right-col,
  .deadlines-right-col, .vacations-right-col,
  .wl-right-col-persistent, .eco-right-col, .cal-sidebar-pane {
    order: -1;
    width: 100%;
    flex: 0 0 auto;
    position: static;
    max-height: none;
    overflow: visible;
  }
  .dash-content, .emp-content, .tasks-content, .deadlines-content,
  .vacations-table-wrap, .cal-layout #calendar-container,
  .wl-content, .eco-content { width: 100%; }
  .emp-sidebar, .tasks-sidebar, .deadlines-sidebar, .eco-sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
  }
}

@media (max-width: 640px) {
  body > header .subtitle { display: none; }
  body > header .header-inner { gap: 7px; }
  body > header .account-name { max-width: 92px; }
  .workspace-heading { margin-bottom: 18px; }
  .workspace-heading h1 { font-size: 27px; }
  main { padding: 16px 12px 28px; }
  .dash-widget { padding: 16px; }
}

@media print {
  body > header,
  .nav-tabs,
  .workspace-heading { display: none !important; }
  main, body > footer { margin-left: 0 !important; }
  main { padding: 0 !important; }
}

/* Feedback controls follow the appraisal project's contour icon rail. */
body > header .header-icon-btn {
  position: relative;
  right: auto;
  bottom: auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border-input);
  border-radius: 50%;
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 1px 4px rgba(23, 36, 46, .10);
}
body > header .header-icon-btn.hidden { display: none; }
body > header .header-icon-btn:hover,
body > header .header-icon-btn.is-muted:hover {
  color: var(--color-primary);
  background: #fff;
  border-color: var(--color-primary);
  transform: none;
}
body > header #header-inbox-btn.has-critical {
  background: #fff;
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.feedback-rail-icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body > header .header-icon-btn .header-inbox-badge,
body > header .header-icon-btn .header-inbox-badge.sev-critical,
body > header .header-icon-btn .header-inbox-badge.sev-normal {
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border: 2px solid var(--color-bg);
  border-radius: 999px;
  background: var(--color-danger);
  color: #fff;
  font: 600 11px/16px var(--font-sans);
}
body > header .header-icon-btn .header-inbox-badge.hidden { display: none; }

/* Employee contacts use the same single-stroke icon language. */
.emp-contact-link,
.emp-contact-item { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.emp-contact-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.emp-contact-link span,
.emp-contact-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-manager,
.badge-fired {
  width: auto;
  height: auto;
  max-width: 100%;
  padding: 2px 8px;
  white-space: nowrap;
}

/* The name is part of the same table surface as every other employee cell. */
#employees-container .data-table tbody tr { background: #fff; }
#employees-container .data-table tbody tr:hover { background: #faf8f3; }
#employees-container .data-table tbody tr.row-selected { background: #e9f3ee; }
#employees-container .data-table tbody td,
#employees-container .data-table tbody td:first-child,
#employees-container .data-table tbody tr:hover td,
#employees-container .data-table tbody tr.row-selected td,
#employees-container .data-table tbody tr.row-selected:hover td {
  background: transparent;
}
#employees-container .data-table th:first-child,
#employees-container .data-table td:first-child {
  position: static;
  left: auto;
  z-index: auto;
  box-shadow: none;
}
#employees-container .data-table thead th:first-child {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f8f6f0;
}
#employees-container .data-table td.col-name { white-space: normal; }
.emp-full-name { font-weight: 600; overflow-wrap: anywhere; }

/* The employee table has six columns; the old five-column widths collapsed Position. */
@media (min-width: 1401px) {
  #employees-container .data-table .col-name { width: 26%; }
  #employees-container .data-table .col-dept { width: 12%; }
  #employees-container .data-table .col-position { width: 17%; }
  #employees-container .data-table .col-cat { width: 9%; }
  #employees-container .data-table .col-contacts { width: 22%; }
  #employees-container .data-table .col-status { width: 14%; }
  #employees-container .data-table td.col-position { white-space: normal; overflow: visible; }
}

/* Populated employee rows become readable cards before six columns get cramped. */
@media (max-width: 1400px) {
  #tab-employees .toolbar-actions { margin-left: auto; }
  #employees-container { max-height: none; overflow: visible; }
  #employees-container .data-table { display: block; width: 100%; }
  #employees-container .data-table thead { display: none; }
  #employees-container .data-table tbody { display: grid; gap: 8px; }
  #employees-container .data-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 4px 16px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
  }
  #employees-container .data-table tbody tr:hover { background: #faf8f3; }
  #employees-container .data-table tbody tr.row-selected { background: #e9f3ee; }
  #employees-container .data-table tbody tr:hover td,
  #employees-container .data-table tbody tr.row-selected td { background: transparent; }
  #employees-container .data-table td,
  #employees-container .data-table td:first-child {
    display: block;
    position: static;
    width: auto;
    min-width: 0;
    padding: 0 !important;
    border: 0;
    background: transparent;
    box-shadow: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  #employees-container .data-table .col-name { grid-column: 1; grid-row: 1; }
  #employees-container .data-table .col-status { grid-column: 2; grid-row: 1; text-align: right; }
  #employees-container .data-table .col-dept { grid-column: 1; grid-row: 2; }
  #employees-container .data-table .col-position { grid-column: 2; grid-row: 2; text-align: right; color: var(--color-text-muted); }
  #employees-container .data-table .col-cat { grid-column: 1; grid-row: 3; color: var(--color-text-muted); }
  #employees-container .data-table .col-cat::before { content: 'Категория: '; }
  #employees-container .data-table .col-contacts { grid-column: 2; grid-row: 3; justify-self: end; max-width: 100%; }
  #employees-container .data-table .emp-contacts { align-items: flex-end; }
  #employees-container .data-table .emp-contacts > * { max-width: 100%; }
}

@media (max-width: 560px) {
  #employees-container .data-table tbody tr { grid-template-columns: minmax(0, 1fr); }
  #employees-container .data-table td { grid-column: 1 !important; grid-row: auto !important; text-align: left !important; justify-self: start !important; }
  #employees-container .data-table .emp-contacts { align-items: flex-start; }
}

@media (max-width: 640px) {
  body > header .header-icon-btn { width: 34px; height: 34px; }
  body > header .feedback-rail-icon { width: 17px; height: 17px; }
}