/* ========================================
   UI Design — Dark Glass Theme
   Based on UI_DESIGN.md
   ======================================== */

:root {
  --bg:      #0b0f14;
  --text:    #e5e7eb;
  --muted:   #9ca3af;
  --border:  rgba(255,255,255,0.10);
  --border2: rgba(255,255,255,0.14);
  --accent:  #22c55e;
  --accent2: #38bdf8;
  --danger:  #fb7185;
  --warn:    #fbbf24;
  --shadow:  0 12px 30px rgba(0,0,0,0.35);
  --radius:  14px;

  /* Surface/overlay tokens — factored out of the rules below so the light theme
     (html[data-theme="light"], near the end of this file) can flip them without
     touching the dark values here. */
  --panel:          linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  --panel-2:        rgba(255,255,255,0.02);
  --input-bg:       rgba(17,24,39,0.55);
  --btn-bg:         rgba(255,255,255,0.04);
  --btn-hover:      rgba(255,255,255,0.07);
  --btn-hover-brd:  rgba(255,255,255,0.20);
  --surface-strong: rgba(15,23,42,0.92);
  --surface-soft:   rgba(15,23,42,0.55);
  --modal-bg:       linear-gradient(180deg, rgba(30,35,50,0.98), rgba(20,25,35,0.98));
  --overlay:        rgba(0,0,0,0.65);
  --divider:        rgba(255,255,255,0.06);
  --row-hover:      rgba(56,189,248,0.06);
  --thead-text:     #dbeafe;
  --chip-bg:        rgba(255,255,255,0.03);
  --spinner-track:  rgba(255,255,255,0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(56,189,248,0.10), transparent 55%),
    radial-gradient(900px  600px at 85% 20%, rgba(34,197,94,0.10),  transparent 55%),
    var(--bg);
}

a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ========== Layouts ========== */

/* Full-viewport (dashboard/table pages) */
.layout-full {
  height: 100vh;
  overflow: hidden;
}
.layout-full .wrap {
  max-width: 1900px;
  margin: 0 auto;
  padding: 22px 18px 14px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Scrollable (forms, stats, settings) */
.layout-scroll .wrap {
  max-width: 1900px;
  margin: 0 auto;
  padding: 22px 18px 40px;
}

/* Centered (login) */
.layout-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== Header / Nav ========== */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.nav-links a {
  color: var(--accent2);
  font-size: 12px;
  text-decoration: none;
}
.nav-links a:hover { text-decoration: underline; }
.nav-links .nav-user {
  color: var(--muted);
  font-size: 12px;
}

/* ========== Card (Glass Panel) ========== */

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}

.card-body { padding: 18px 20px; }

/* Full-height card for table pages */
.card-full {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Login card override */
.card-login {
  width: 100%;
  max-width: 400px;
  margin: 24px;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  padding: 32px;
}

/* ========== Typography ========== */

h1 { font-size: 20px; font-weight: 650; color: var(--text); }
h2 { font-size: 15px; font-weight: 650; color: var(--text); }
.small, .muted { font-size: 12px; color: var(--muted); }

/* ========== Forms ========== */

label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

label.inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

input, select, textarea {
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border2);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
}

textarea {
  min-height: 80px;
  resize: vertical;
}

input:focus, select:focus, textarea:focus {
  border-color: rgba(56,189,248,0.55);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.18);
}

input[type="checkbox"] {
  accent-color: var(--accent2);
  width: 18px;
  height: 18px;
}

select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.form-row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 640px) {
  .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
}

/* ========== Buttons ========== */

button, .btn {
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: var(--btn-bg);
  color: var(--text);
  cursor: pointer;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
button:hover, .btn:hover { background: var(--btn-hover); border-color: var(--btn-hover-brd); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled, .btn:disabled { opacity: .6; cursor: not-allowed; }

.btn-primary {
  border-color: rgba(34,197,94,0.40);
  background: rgba(34,197,94,0.12);
}
.btn-primary:hover { background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.55); }

.btn-danger {
  border-color: rgba(251,113,133,0.40);
  background: rgba(251,113,133,0.10);
  color: var(--danger);
}
.btn-danger:hover { background: rgba(251,113,133,0.18); border-color: rgba(251,113,133,0.55); }

.btn-warn {
  border-color: rgba(251,191,36,0.40);
  background: rgba(251,191,36,0.10);
  color: var(--warn);
}
.btn-warn:hover { background: rgba(251,191,36,0.18); border-color: rgba(251,191,36,0.55); }

.btn-mini {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px;
}

/* ========== Tables ========== */

.tablewrap {
  margin-top: 14px;
  overflow: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel-2);
  flex: 1;
  min-height: 0;
}

/* Let the table flow with the page instead of scrolling inside its own box:
   the whole page scrolls, the table stretches as far as its rows need, and the
   sticky header sticks to the viewport (no inner overflow ancestor to clip it).
   Used on the dashboard and statistics tables. */
.tablewrap-flow {
  overflow: visible;
  flex: none;
  min-height: 0;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-strong);
  backdrop-filter: blur(8px);
  color: var(--thead-text);
  font-weight: 650;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: left;
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { background: rgba(56,189,248,0.12); }

tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--divider);
  font-size: 14px;
  vertical-align: middle;
}
tbody tr:nth-child(even) { background: var(--panel-2); }
tbody tr:hover { background: var(--row-hover); }
tbody tr { cursor: pointer; }

@keyframes new-row-flash {
  from { background: rgba(34,197,94,0.22); }
  to   { background: transparent; }
}
tbody tr.new-row { animation: new-row-flash 3s ease-out; }

/* ========== Pills / Badges ========== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  background: var(--chip-bg);
}
.pill.good { border-color: rgba(34,197,94,0.40); background: rgba(34,197,94,0.12); color: #bbf7d0; }
.pill.mid  { border-color: rgba(251,191,36,0.45); background: rgba(251,191,36,0.10); color: #fde68a; }
.pill.bad  { border-color: rgba(251,113,133,0.45); background: rgba(251,113,133,0.10); color: #fecdd3; }
.pill.na   { border-color: rgba(148,163,184,0.35); background: rgba(148,163,184,0.08); color: #cbd5e1; }
.pill.info { border-color: rgba(56,189,248,0.40); background: rgba(56,189,248,0.10); color: #bae6fd; }

/* ========== Flash / Error Messages ========== */

.flash {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  margin-bottom: 14px;
}
.flash-error {
  color: var(--danger);
  background: rgba(251,113,133,0.10);
  border: 1px solid rgba(251,113,133,0.30);
}
.flash-success {
  color: var(--accent);
  background: rgba(34,197,94,0.10);
  border: 1px solid rgba(34,197,94,0.30);
}

/* ========== Stat Cards ========== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 8px;
}
.stat-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1;
}
.stat-value.accent  { color: var(--accent); }
.stat-value.accent2 { color: var(--accent2); }
.stat-value.warn    { color: var(--warn); }
.stat-value.danger  { color: var(--danger); }
.stat-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

/* ========== Spinner ========== */

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--spinner-track);
  border-top-color: var(--accent2);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
}

/* ========== Pager ========== */

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}
.pager .group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ========== Tabs ========== */

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.tab {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--muted);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--accent2);
  border-bottom-color: var(--accent2);
}

/* ========== Toolbar (filter row above table) ========== */

.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.toolbar input, .toolbar select {
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 10px;
}

.toolbar select {
  min-width: 120px;
}

.toolbar .search-input {
  min-width: 180px;
}

/* Toggle button group */
.btn-group {
  display: inline-flex;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border2);
}
.btn-group button {
  border: none;
  border-radius: 0;
  padding: 7px 12px;
  font-size: 12px;
  background: var(--btn-bg);
}
.btn-group button:not(:last-child) {
  border-right: 1px solid var(--border2);
}
.btn-group button.active {
  background: rgba(56,189,248,0.15);
  color: var(--accent2);
}
.btn-group button:hover:not(.active) {
  background: var(--btn-hover);
}

/* ========== Timeline ========== */

.timeline { margin-top: 14px; }
.timeline-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--divider);
}
.timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent2);
  margin-top: 6px;
  flex-shrink: 0;
}
.timeline-content { flex: 1; }
.timeline-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

/* ========== File upload zone ========== */

.upload-zone {
  border: 2px dashed var(--border2);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--accent2);
  background: var(--row-hover);
}

.file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.file-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  font-size: 12px;
}
.file-item .remove {
  color: var(--danger);
  cursor: pointer;
  font-weight: bold;
}

/* ========== Modal ========== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: var(--modal-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  padding: 24px;
  min-width: 360px;
  max-width: 500px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}
.modal h2 { margin-bottom: 16px; }

/* Profile modal: let the whole modal grow to its full height and scroll with the
   overlay (scrollbar at the viewport edge) instead of an inner scrollbar on the box. */
#profile-modal {
  align-items: flex-start;
  overflow-y: auto;
  padding: 24px 12px;
}
#profile-modal .modal {
  max-height: none;
  overflow: visible;
}

/* ========== Detail layout ========== */

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* Two detail rows side by side on desktop, stacked on mobile. */
.detail-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

@media (max-width: 768px) {
  .detail-pair { grid-template-columns: 1fr; }
}

.detail-row {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--divider);
}
.detail-label {
  font-size: 12px;
  color: var(--muted);
  min-width: 120px;
  flex-shrink: 0;
}
.detail-value {
  font-size: 14px;
}

/* ========== Responsive ========== */

@media (max-width: 640px) {
  .header { gap: 8px; }
  .nav-links { gap: 6px; }
  .card { padding: 10px; }
  .toolbar { gap: 6px; }
  .detail-grid { grid-template-columns: 1fr; }
  .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
}

/* ========== Mobile: task tables become stacked cards ========== */
/* A dense multi-column table can't fit a phone as a grid, so below 768px each
   row of the dashboard/statistics tables (.tablewrap-flow) is rendered as a
   self-contained card: the header is hidden and every cell shows its column
   name (from data-label) beside its value. Nothing scrolls sideways. The
   desktop table markup is untouched — this is pure CSS driven by data-label. */
@media (max-width: 768px) {
  .tablewrap-flow {
    border: none;
    background: none;
    margin-top: 10px;
    overflow: visible;
  }
  /* !important: the desktop table carries an inline min-width (900/1000px) that
     otherwise beats this rule and makes the card overflow the phone viewport. */
  .tablewrap-flow table { min-width: 0 !important; display: block; width: 100%; }
  .tablewrap-flow thead { display: none; }
  .tablewrap-flow tbody { display: block; }
  .tablewrap-flow tbody tr {
    display: block;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px 14px;
    margin-bottom: 10px;
  }
  /* Cancel the desktop zebra striping / row hover inside cards. */
  .tablewrap-flow tbody tr:nth-child(even),
  .tablewrap-flow tbody tr:hover { background: var(--panel); }
  .tablewrap-flow tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 3px 0;
    border: none;
    text-align: right;
    /* Beat the inline maxWidth/ellipsis truncation used for the desktop grid. */
    max-width: none !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }
  .tablewrap-flow tbody td::before {
    content: attr(data-label);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    font-weight: 650;
    text-align: left;
    flex-shrink: 0;
    white-space: nowrap;
  }
  /* Title cell: a full-width heading with no label prefix. */
  .tablewrap-flow tbody td.cell-title {
    display: block;
    text-align: left;
    font-size: 15px;
    font-weight: 650;
    padding-bottom: 6px;
  }
  .tablewrap-flow tbody td.cell-title::before { display: none; }
  /* Trim the card to the essentials on mobile — hide the noisier columns
     (description, department, type, status) so the card shows just title +
     assignee/client/priority/created. Driven by the desktop data-label attrs. */
  .tablewrap-flow tbody td[data-label="Apraksts"],
  .tablewrap-flow tbody td[data-label="Nodaļa"],
  .tablewrap-flow tbody td[data-label="Veids"],
  .tablewrap-flow tbody td[data-label="Statuss"] { display: none; }
  /* Loading / empty spanned cells stay centered and label-less. */
  .tablewrap-flow tbody td[colspan] { display: block; text-align: center; }
  .tablewrap-flow tbody td[colspan]::before { display: none; }

  /* Toolbar: let filters fill the width and wrap cleanly. */
  .toolbar select, .toolbar .search-input { flex: 1 1 140px; min-width: 0; }
  .toolbar .btn-group { width: 100%; }
  .toolbar .btn-group button { flex: 1; }
  .toolbar > a { margin-left: 0 !important; width: 100%; }
  .toolbar > a > button { width: 100%; justify-content: center; }

  /* Modals fit narrow screens (drop the desktop min-width). */
  .modal { min-width: 0; padding: 18px; }
}

/* ========== Toggle Switch (profile theme selector) ========== */

.switch { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.switch .slider {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--border2);
  border: 1px solid var(--border2);
  transition: background .2s ease, border-color .2s ease;
  cursor: pointer;
  display: block;
}
.switch .slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  transition: transform .2s ease;
}
.switch input:checked + .slider { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(56,189,248,0.35); }

/* ========================================
   Light Theme — html[data-theme="light"]
   Overrides the surface/overlay tokens (and a few text colors that can't be
   expressed as tokens) defined above. The dark theme values remain untouched.
   ======================================== */

html[data-theme="light"] {
  --bg:      #eef1f6;
  --text:    #1f2933;
  --muted:   #5b6675;
  --border:  rgba(15,23,42,0.12);
  --border2: rgba(15,23,42,0.18);
  --accent:  #16a34a;
  --accent2: #0284c7;
  --danger:  #dc2626;
  --warn:    #b45309;
  --shadow:  0 10px 28px rgba(15,23,42,0.10);

  --panel:          linear-gradient(180deg, #ffffff, #f6f8fb);
  --panel-2:        rgba(15,23,42,0.02);
  --input-bg:       #ffffff;
  --btn-bg:         rgba(15,23,42,0.03);
  --btn-hover:      rgba(15,23,42,0.06);
  --btn-hover-brd:  rgba(15,23,42,0.22);
  --surface-strong: rgba(241,245,249,0.96);
  --surface-soft:   #f6f8fb;
  --modal-bg:       linear-gradient(180deg, #ffffff, #f6f8fb);
  --overlay:        rgba(15,23,42,0.38);
  --divider:        rgba(15,23,42,0.08);
  --row-hover:      rgba(2,132,199,0.08);
  --thead-text:     #0f172a;
  --chip-bg:        rgba(15,23,42,0.03);
  --spinner-track:  rgba(15,23,42,0.15);
}

html[data-theme="light"] body {
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(2,132,199,0.07), transparent 55%),
    radial-gradient(900px  600px at 85% 20%, rgba(22,163,74,0.07),  transparent 55%),
    var(--bg);
}

/* Elevated boxes carry their own (non-token) shadows — soften them for light. */
html[data-theme="light"] .card-login { box-shadow: 0 12px 40px rgba(15,23,42,0.15); }
html[data-theme="light"] .modal { box-shadow: 0 20px 60px rgba(15,23,42,0.22); }

/* Pill text colors are pale pastels tuned for a dark background; darken for light. */
html[data-theme="light"] .pill.good { color: #15803d; }
html[data-theme="light"] .pill.mid  { color: #b45309; }
html[data-theme="light"] .pill.bad  { color: #be123c; }
html[data-theme="light"] .pill.na   { color: #475569; }
html[data-theme="light"] .pill.info { color: #0369a1; }