/* Razrobka BY is the primary brand reference, per the owner's instruction.
   Manrope / #c9e651 / #bcd748 / #0d0b13 / white and neutral gray.
   Warning and error colors retain their operational meaning. */
:root {
  --brand-lime: #c9e651;
  --brand-lime-soft: #bcd748;
  --brand-accent: #536516;
  --canvas: #f8f8f8;
  --surface: #ffffff;
  --surface-raised: #f5f5f5;
  --line: #dedede;
  --text: #111111;
  --muted: #666666;
  font-family: Manrope, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--canvas);
  color-scheme: light;
}
body { background: var(--canvas); }
aside {
  background: #0d0b13;
  border-right: 1px solid #29262f;
}
a.brand { display: block; letter-spacing: 0; }
.brand img { display: block; width: 185px; height: auto; max-width: 100%; }
.brand span {
  color: #aaaaaa;
  font: 500 12px/1.6 Manrope, sans-serif;
  letter-spacing: .04em;
  margin-top: 15px;
}
.side-note { color: #aaaaaa; }
#identity { color: #ffffff; }
aside button { border-color: #666666; color: #ffffff; background: transparent; }
aside button:hover { background: #232323; border-color: var(--brand-lime); }
small { color: var(--brand-accent); }
h1, h2, h3 { font-family: Manrope, "Segoe UI", sans-serif; color: var(--text); }
h1 { font-weight: 800; font-size: 36px; line-height: 1.25; }
h2 { font-weight: 750; }
h3 { font-weight: 700; line-height: 1.5; margin-top: 15px; }
p, .muted, .task-meta, .empty { color: var(--muted); }
.panel {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 5px 18px rgb(0 0 0 / 3%);
}
.badge {
  color: var(--brand-accent);
  background: rgb(201 230 81 / 18%);
  border: 1px solid rgb(188 215 72 / 45%);
  font-weight: 600;
}
header > .badge { color: var(--brand-accent); background: rgb(201 230 81 / 18%); border-color: rgb(188 215 72 / 45%); }
.metric { color: #444444; font-weight: 750; font-variant-numeric: tabular-nums; }
.danger { color: #a44132; }
label { color: #444444; }
input, select, textarea {
  color: var(--text);
  background: #ffffff;
  border-color: #c9c9c9;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
  border-color: var(--brand-accent);
}
button {
  background: var(--surface-raised);
  border-color: #cccccc;
  color: var(--text);
  font-weight: 600;
  transition: background .15s, border-color .15s;
}
button:hover { background: #eeeeee; border-color: var(--brand-accent); }
button.primary, nav button.active {
  color: #101400;
  background: var(--brand-lime);
  border-color: var(--brand-lime);
}
button.primary:hover, nav button.active:hover { background: var(--brand-lime-soft); border-color: var(--brand-lime-soft); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
button:disabled { opacity: .45; }
summary { color: var(--brand-accent); }
th { color: #444444; background: #f8f8f8; }
td, th { border-bottom-color: var(--line); }
.warning, #notice:not(:empty) { color: #805518; background: #fff4df; border: 1px solid #ead9b8; line-height: 1.6; }
.task-actions { padding-top: 12px; border-top: 1px solid var(--line); }
.task-head .muted { padding-top: 5px; }
.narrow { border-top: 3px solid var(--brand-lime); }
@media(max-width:850px) {
  aside { border-right: 0; border-bottom: 1px solid var(--line); }
  .brand img { width: 155px; }
  .brand span { margin-top: 8px; font-size: 11px; }
  h1 { font-size: 28px; }
}
@media(prefers-reduced-motion:reduce) { button { transition: none; } }

/* Application sections live in the dark sidebar; refresh belongs to content. */
aside { display: flex; flex-direction: column; overflow-y: auto; }
#tabs { display: flex; flex-direction: column; gap: 8px; margin: 32px 0; }
#tabs button { width: 100%; margin: 0; padding: 13px 12px; text-align: left; background: transparent; color: #eeeeee; border-color: #39363f; }
#tabs button:hover { background: #25222c; border-color: #aaaaaa; }
#tabs button.active, #tabs button.active:hover { background: var(--brand-lime); color: #101400; border-color: var(--brand-lime); }
#identity { margin-top: auto; padding-top: 20px; }
#logout { align-self: flex-start; }
main { padding: 24px 32px; }
.topbar { display: flex; align-items: center; justify-content: flex-end; min-height: 56px; padding: 10px 32px; margin: -24px -32px 24px; background: #ffffff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.topbar .refresh { padding: 8px 14px; }
.topbar { align-items: center; gap: 14px; flex-wrap: wrap; }
.task-controls { flex: 1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; min-width: 0; }
.task-filter { font-size: 11px; margin: 0; flex: 1 1 135px; min-width: 0; max-width: 220px; }
.task-filter select, .task-filter input { padding: 8px 9px; margin-top: 4px; height: 36px; font-size: 12px; min-width: 0; }
.view-switch { display: flex; align-self: flex-end; }
.view-switch button { display: flex; align-items: center; justify-content: center; padding: 7px; border-radius: 0; width: 38px; height: 36px; }
.view-switch svg { flex-shrink: 0; pointer-events: none; }
.task-actions .task-action-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 7px; flex-shrink: 0; }
.task-action-icon svg { pointer-events: none; }
.task-editor { width: min(480px, calc(100vw - 36px)); max-height: calc(100vh - 36px); overflow: auto; padding: 24px; border: 1px solid var(--border, #ddd); border-radius: 16px; color: #101010; background: white; }
.task-editor::backdrop { background: rgb(13 11 19 / 45%); }
.task-editor h2 { margin-top: 0; }
.editor-actions { display: flex; gap: 8px; }
.view-switch button:first-child { border-radius: 7px 0 0 7px; }
.view-switch button:last-child { border-radius: 0 7px 7px 0; }
.view-switch button[aria-pressed="true"] { background: var(--brand-lime); border-color: var(--brand-lime); color: #101400; }
.reset-filters { height: 36px; padding: 8px 10px; font-size: 12px; }
.task-results { margin-bottom: 12px; }
.task-list-panel { padding: 0; overflow: hidden; }
.task-list { min-width: 820px; }
.task-list td { vertical-align: top; }
.task-list td:first-child { min-width: 190px; }
.task-list .task-actions { padding: 0; margin: 0; border: 0; }
.task-list .task-actions button { padding: 7px 9px; white-space: nowrap; }
.task-list .time-entry { min-width: 190px; }
.task-due { white-space: nowrap; }
.client-heading h2 { margin-bottom: 16px; }
.client-filters { display: flex; flex-wrap: wrap; gap: 14px; }
.client-filters label { flex: 1 1 180px; max-width: 320px; margin: 0; }
.client-card .task-head { align-items: flex-start; }
.client-card h3 { margin: 0; }
.client-card .badge { margin-top: 0; }
.client-packages { display: grid; gap: 8px; margin-bottom: 18px; }
.client-controls { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; min-width: 0; }
.client-toolbar-title { font-size: 18px; margin: 0; }
.client-controls .client-filters { flex: 1; align-items: flex-end; }
.client-controls .view-switch { align-self: center; }
.client-list-panel { padding: 0; overflow: hidden; }
.client-list { min-width: 620px; }
.client-list td { vertical-align: middle; }
.client-list .client-packages { margin-bottom: 0; }
.task-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.task-metrics .panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 180px; padding: 10px 14px; margin-bottom: 0; border-radius: 9px; box-shadow: none; }
.task-metrics .muted { font-size: 12px; line-height: 1.4; }
.task-metrics .metric { font-size: 22px; line-height: 1.3; }
@media(max-width:850px) {
  main { padding: 18px; }
  .topbar { padding: 10px 18px; margin: -18px -18px 18px; }
  .task-controls { flex-basis: 100%; }
  .task-filter { max-width: none; }
  aside { flex-direction: row; overflow-y: visible; }
  #tabs { flex-basis: 100%; margin: 8px 0; }
  #identity { margin-top: 0; padding-top: 0; }
}