/* ============================================================
   ClauseLab — Refined Scandinavian design system
   theme.css — design tokens + base resets + reusable components
   ============================================================ */

@import url('./fonts.css');

/* ── Design tokens ── */
:root {
  /* Base surfaces */
  --bg:         #f7f6f3;
  --surface:    #ffffff;
  --surface2:   #f2f0ec;

  /* Borders */
  --border:     #e3dfd8;
  --border-mid: #cdc8bf;

  /* Text */
  --text:       #1c1a17;
  --text-2:     #4a4640;
  --text-3:     #8c867e;
  --text-4:     #b8b2ab;

  /* Sage green — primary */
  --sage:       #5a7a62;
  --sage-mid:   #7a9e82;
  --sage-light: #eaf1eb;
  --sage-pale:  #f3f7f4;

  /* Slate blue — structure */
  --slate:      #4a6278;
  --slate-mid:  #6b8499;
  --slate-light:#e8eff5;
  --slate-pale: #f2f6f9;

  /* Dusty rose — accent */
  --rose:       #b56b72;
  --rose-mid:   #cc8d93;
  --rose-light: #f9eced;
  --rose-pale:  #fdf5f5;

  /* Warm amber */
  --warm:       #c4a882;

  /* Sidebar */
  --sidebar-bg:        #242820;
  --sidebar-border:    #32362e;
  --sidebar-text:      #c8c4bc;
  --sidebar-muted:     #6b6860;
  --sidebar-active-bg: #2e3329;

  /* Layout */
  --sidebar-width: 228px;
  --topbar-height: 56px;
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }


/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; z-index: 100;
}

.sidebar-logo {
  padding: 26px 22px 22px;
  border-bottom: 1px solid var(--sidebar-border);
}

.logo-lockup { display: flex; align-items: center; gap: 11px; }

.logo-emblem {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, var(--sage) 0%, var(--slate) 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.logo-name {
  font-family: 'Lora', serif;
  font-size: 15px; color: #f0ece6;
  letter-spacing: 0.01em; line-height: 1.2;
}

.logo-tag {
  font-size: 10px; color: var(--sidebar-muted);
  letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1px;
}

.sidebar nav { padding: 14px 0; flex: 1; overflow-y: auto; }

.nav-section {
  padding: 12px 22px 5px;
  font-size: 10px; color: var(--sidebar-muted);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 22px; font-size: 13.5px;
  color: var(--sidebar-text); cursor: pointer;
  transition: all 0.13s; text-decoration: none;
  border-left: 2px solid transparent; position: relative;
}

.nav-item:hover { color: #f0ece6; background: var(--sidebar-active-bg); }

.nav-item.active {
  color: #f0ece6; background: var(--sidebar-active-bg);
  border-left-color: var(--sage-mid);
}

.nav-item svg { opacity: 0.55; flex-shrink: 0; transition: opacity 0.13s; }
.nav-item:hover svg, .nav-item.active svg { opacity: 1; }

.nav-count {
  margin-left: auto; font-size: 11px;
  background: var(--sidebar-border); color: var(--sidebar-muted);
  padding: 1px 7px; border-radius: 10px; font-weight: 500;
}

.nav-item.active .nav-count { background: rgba(90,122,98,0.3); color: var(--sage-mid); }

.sidebar-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--sidebar-border);
  display: flex; align-items: center; gap: 10px;
}

.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sage) 0%, var(--slate) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: white; flex-shrink: 0;
  text-transform: uppercase;
}

.footer-name { font-size: 12.5px; color: var(--sidebar-text); font-weight: 500; }
.footer-role { font-size: 11px; color: var(--sidebar-muted); }

.footer-actions { margin-left: auto; display: flex; gap: 6px; }
.footer-link {
  font-size: 11px; color: var(--sidebar-muted);
  background: none; border: none; cursor: pointer;
  padding: 2px 4px; border-radius: 4px;
  transition: color 0.13s;
}
.footer-link:hover { color: var(--sidebar-text); }
.footer-link.danger:hover { color: #e07070; }


/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.main {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Progress banner ── */
.progress-banner {
  background: var(--sage-light);
  border-bottom: 1px solid #cddacf;
  padding: 9px 36px;
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--sage);
}

.progress-banner.d-none { display: none !important; }

.pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sage); flex-shrink: 0;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.75); }
}

.progress-msg { font-weight: 500; }
.progress-msg strong { font-weight: 600; }
.progress-msg span { font-weight: 400; color: var(--sage-mid); }

.progress-track {
  flex: 1; max-width: 260px; height: 4px;
  background: #cddacf; border-radius: 2px; overflow: hidden;
}

.progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--sage) 0%, var(--sage-mid) 100%);
  border-radius: 2px; transition: width 0.6s ease;
}

.progress-pct { font-size: 12px; color: var(--sage-mid); font-weight: 600; }

.banner-close {
  margin-left: auto; background: none; border: none;
  color: var(--sage-mid); cursor: pointer; font-size: 18px; line-height: 1;
  opacity: 0.6; transition: opacity 0.1s; padding: 0 2px;
}
.banner-close:hover { opacity: 1; }

/* ── Topbar ── */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 36px;
  height: var(--topbar-height);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 50;
  flex-shrink: 0;
}

.page-heading {
  font-family: 'Lora', serif;
  font-size: 17px; font-weight: 400;
  color: var(--text); letter-spacing: -0.01em;
}

.page-heading .sub {
  font-size: 13px; color: var(--text-3);
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin-left: 8px; font-weight: 400;
}

.topbar-actions { display: flex; gap: 8px; align-items: center; }

/* ── Content ── */
.content { padding: 32px 36px; }

/* Flash messages inside content */
.flash-messages { margin-bottom: 20px; }

.flash-msg {
  padding: 11px 16px; border-radius: 8px;
  font-size: 13.5px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.flash-msg.success { background: var(--sage-light); color: var(--sage); border: 1px solid #cddacf; }
.flash-msg.danger  { background: var(--rose-light); color: var(--rose); border: 1px solid #f0cdd0; }
.flash-msg.warning { background: #fdf4e3; color: #8a6320; border: 1px solid #f0dfa8; }
.flash-msg.info    { background: var(--slate-light); color: var(--slate); border: 1px solid #c5d6e4; }
.flash-close {
  background: none; border: none; cursor: pointer;
  opacity: 0.5; font-size: 16px; line-height: 1;
  transition: opacity 0.1s; flex-shrink: 0;
}
.flash-close:hover { opacity: 1; }


/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  padding: 7px 16px; border-radius: 7px; font-size: 13px;
  font-family: inherit; cursor: pointer; border: none;
  font-weight: 500; transition: all 0.13s; line-height: 1.4;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}

.btn:focus-visible { outline: 2px solid var(--sage-mid); outline-offset: 2px; }

.btn-primary { background: var(--sage); color: white; }
.btn-primary:hover { background: var(--sage-mid); color: white; }

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--text-2);
}
.btn-outline:hover {
  border-color: var(--sage-mid);
  color: var(--sage);
  background: var(--sage-pale);
}

.btn-danger-outline {
  background: transparent;
  border: 1px solid var(--rose-mid);
  color: var(--rose);
}
.btn-danger-outline:hover { background: var(--rose-pale); }

.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 6px; }

/* Bootstrap danger override — keep red delete buttons working */
.btn.btn-danger {
  background: var(--rose); border: none; color: white;
}
.btn.btn-danger:hover { background: var(--rose-mid); color: white; }

/* Bootstrap success override */
.btn.btn-success {
  background: var(--sage); border: none; color: white;
}
.btn.btn-success:hover { background: var(--sage-mid); color: white; }


/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 5px;
  font-size: 11.5px; font-weight: 600;
}

.badge-done    { background: var(--sage-light);  color: var(--sage); }
.badge-queued  { background: #fdf4e3;             color: #8a6320; }
.badge-failed  { background: var(--rose-light);   color: var(--rose); }
.badge-lang    { background: var(--slate-light);  color: var(--slate); }
.badge-relevant { background: var(--sage-light);  color: var(--sage); }
.badge-not-relevant { background: var(--rose-light); color: var(--rose); }
.badge-pending { background: var(--surface2);     color: var(--text-3); }


/* ============================================================
   STAT CARDS
   ============================================================ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; margin-bottom: 28px;
}

.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 18px 20px;
  transition: box-shadow 0.15s;
}
.stat-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

.stat-card .val {
  font-family: 'Lora', serif; font-size: 28px; font-weight: 400;
  color: var(--text); letter-spacing: -0.02em; line-height: 1;
}
.stat-card .lbl {
  font-size: 11.5px; color: var(--text-3); margin-top: 5px;
  text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500;
}

.stat-card.accent-sage  { border-top: 3px solid var(--sage); }
.stat-card.accent-slate { border-top: 3px solid var(--slate-mid); }
.stat-card.accent-rose  { border-top: 3px solid var(--rose-mid); }
.stat-card.accent-warm  { border-top: 3px solid var(--warm); }


/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 13px 18px;
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 20px; flex-wrap: wrap;
}

.filter-group { display: flex; align-items: center; gap: 8px; }

.filter-label {
  font-size: 12px; color: var(--text-3); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}

.filter-select {
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text-2); padding: 5px 10px; border-radius: 6px;
  font-size: 13px; font-family: inherit; appearance: none;
  cursor: pointer;
}
.filter-select:focus {
  outline: none;
  border-color: var(--sage-mid);
  box-shadow: 0 0 0 3px var(--sage-light);
}

.search-input {
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); padding: 5px 12px; border-radius: 6px;
  font-size: 13px; font-family: inherit;
}
.search-input:focus {
  outline: none;
  border-color: var(--sage-mid);
  box-shadow: 0 0 0 3px var(--sage-light);
}
.search-input::placeholder { color: var(--text-4); }

.filter-divider { width: 1px; height: 22px; background: var(--border); }

.result-meta { font-size: 12.5px; color: var(--text-3); margin-bottom: 14px; }


/* ============================================================
   TABLES
   ============================================================ */
.table-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}

/* Override Bootstrap table styles */
.table-wrap table,
table.theme-table {
  width: 100%; border-collapse: collapse;
}

.table-wrap thead th,
table.theme-table thead th {
  background: var(--surface2); padding: 11px 18px; text-align: left;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-3);
  border-bottom: 1px solid var(--border);
  /* preserve resizer positioning */
  position: relative; user-select: none;
}

.table-wrap tbody tr,
table.theme-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}

.table-wrap tbody tr:last-child,
table.theme-table tbody tr:last-child { border-bottom: none; }

.table-wrap tbody tr:hover,
table.theme-table tbody tr:hover { background: var(--sage-pale); }

.table-wrap td,
table.theme-table td { padding: 13px 18px; vertical-align: middle; }

/* Tid / authority display helpers */
.tid {
  font-size: 13.5px; font-weight: 600; color: var(--slate);
  font-family: 'Lora', serif; letter-spacing: 0.01em;
}
.pub-date { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.authority-name { font-size: 13.5px; color: var(--text); font-weight: 500; }
.authority-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }

.ctx-num { font-size: 14px; font-weight: 600; color: var(--text); }
.ctx-sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }

/* Row action button — visible on hover */
.row-btn {
  padding: 5px 12px; border-radius: 6px; font-size: 12px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-3); cursor: pointer; font-family: inherit;
  font-weight: 500; opacity: 0; transition: all 0.1s;
}
tbody tr:hover .row-btn { opacity: 1; }
.row-btn:hover { border-color: var(--rose-mid); color: var(--rose); background: var(--rose-pale); }

/* Bookmark / share icons */
.bookmark { color: var(--text-4); cursor: pointer; transition: color 0.12s, background 0.12s; background: none; border: none; border-radius: 4px; padding: 2px 3px; }
.bookmark:hover { color: var(--rose); }
.bookmark.saved { color: var(--rose); }
.bookmark.share-context-btn:hover { color: var(--sage); }
/* Shared state: filled green pill so it's immediately obvious */
.bookmark.share-context-btn.shared { background: var(--sage); color: white; padding: 2px 5px; }
.bookmark.share-context-btn.shared:hover { background: var(--sage-mid); color: white; }


/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex; gap: 6px; align-items: center; justify-content: center;
  margin-top: 24px;
  /* override Bootstrap .pagination */
  list-style: none; padding: 0;
}

.pg {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 7px; font-size: 15px;
  cursor: pointer; background: var(--surface); color: var(--text-3);
  transition: all 0.12s; text-decoration: none; flex-shrink: 0;
}
.pg:hover { border-color: var(--sage-mid); color: var(--sage); }
.pg.active { background: var(--sage); border-color: var(--sage); color: white; }
.pg.disabled { opacity: 0.4; cursor: default; pointer-events: none; }

.pg-info {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-3); white-space: nowrap;
}

.pg-jump {
  width: 46px; height: 34px;
  border: 1px solid var(--border); border-radius: 7px;
  text-align: center; font-size: 13px; color: var(--text);
  background: var(--surface); padding: 0 4px; font-family: inherit;
  -moz-appearance: textfield;
}
.pg-jump::-webkit-outer-spin-button,
.pg-jump::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pg-jump:focus { outline: none; border-color: var(--sage-mid); box-shadow: 0 0 0 3px rgba(106,142,112,.12); }


/* ============================================================
   SECTION CARDS (for forms, panels)
   ============================================================ */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 24px 28px;
}

.panel-title {
  font-family: 'Lora', serif; font-size: 15px; font-weight: 400;
  color: var(--text); margin-bottom: 18px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}


/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.form-field { margin-bottom: 16px; }

.form-label {
  display: block; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3); margin-bottom: 6px;
}

.form-input,
.form-textarea,
.form-select-full {
  width: 100%; border: 1px solid var(--border);
  background: var(--bg); color: var(--text);
  padding: 8px 12px; border-radius: 7px;
  font-size: 13.5px; font-family: inherit;
}

.form-input:focus,
.form-textarea:focus,
.form-select-full:focus {
  outline: none;
  border-color: var(--sage-mid);
  box-shadow: 0 0 0 3px var(--sage-light);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-4); }

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


/* ============================================================
   DROP ZONE (upload page)
   ============================================================ */
.drop-zone {
  border: 2px dashed var(--border-mid);
  border-radius: 10px; padding: 48px 32px;
  text-align: center; transition: all 0.2s ease;
  cursor: pointer; background: var(--surface);
  color: var(--text-3);
}
.drop-zone:hover {
  border-color: var(--sage-mid);
  background: var(--sage-pale);
  color: var(--sage);
}
.drop-zone.dragover {
  border-color: var(--sage); border-style: solid;
  background: var(--sage-pale); color: var(--sage);
}
.drop-zone-content { pointer-events: none; }
.drop-zone svg { color: inherit; }


/* ============================================================
   TABS (my_page)
   ============================================================ */
.tab-nav {
  display: flex; gap: 2px; margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.tab-btn {
  padding: 9px 16px; font-size: 13px; font-weight: 500;
  font-family: inherit; background: none; border: none;
  color: var(--text-3); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: all 0.13s;
  border-radius: 0;
}
.tab-btn:hover { color: var(--text-2); }
.tab-btn.active { color: var(--sage); border-bottom-color: var(--sage); }


/* ============================================================
   CONTEXT CARD (evaluation / my_page)
   ============================================================ */
.context-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px 20px; margin-bottom: 12px;
}

/* Keyword highlight — override Bootstrap's mark padding and any stored inline colour */
mark {
  background-color: var(--slate-light) !important;
  padding: 0 !important;
  border-radius: 2px;
}

.context-card mark {
  background-color: var(--slate-light) !important;
  padding: 0 !important;
  border-radius: 2px;
}

.keyword-chip {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11.5px; font-weight: 600;
  background: var(--sage-light); color: var(--sage); margin-right: 4px;
}

/* Inline auto-save note textarea — looks like plain text until focused */
.note-inline {
  width: 100%; min-height: 38px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; resize: none; overflow: hidden;
  font-size: 13px; color: var(--text-2); line-height: 1.5;
  padding: 4px 6px; font-family: inherit;
  transition: border-color 0.13s, background 0.13s;
}
.note-inline:hover { border-color: var(--border); }
.note-inline:focus {
  border-color: var(--sage-mid); background: var(--surface);
  outline: none; overflow: auto;
}


/* ============================================================
   RELEVANCE CELL (evaluation table)
   ============================================================ */
.relevance-cell {
  text-align: center; font-size: 1.1em; vertical-align: middle;
  cursor: pointer;
}
.relevance-cell.not_evaluated { background: transparent; }
.relevance-cell.not_relevant  { background: var(--rose-light); }
.relevance-cell.relevant      { background: var(--sage-light); }


/* ============================================================
   RESIZABLE TABLE COLUMNS
   ============================================================ */
#evaluation-table {
  table-layout: fixed; width: 100%;
}
#evaluation-table th {
  position: relative; user-select: none;
}
#evaluation-table th .resizer {
  position: absolute; top: 0; right: 0; width: 5px;
  cursor: col-resize; user-select: none; height: 100%;
  background: transparent;
}
#evaluation-table th .resizer:hover { background: var(--sage-mid); }
#evaluation-table th.resizing { border-right: 2px solid var(--sage-mid); }


/* ============================================================
   CONTEXT TEXT COLUMN
   ============================================================ */
.context-column {
  max-width: 50ch; white-space: normal; word-break: break-word;
}
@media (min-width: 1400px) { .context-column { max-width: 80ch; } }
@media (min-width: 1920px) { .context-column { max-width: 100ch; } }

.context-column strong { display: block; margin-bottom: 4px; }


/* ============================================================
   MISC UTILITIES
   ============================================================ */
.text-muted-sm { font-size: 12px; color: var(--text-3); }
.text-sage  { color: var(--sage); }
.text-rose  { color: var(--rose); }
.text-slate { color: var(--slate); }

.divider { width: 1px; height: 22px; background: var(--border); }

/* Dropdown scroll cap (filter menus) */
.dropdown-scroll { max-height: 200px; overflow-y: auto; }

/* Small sort indicator in table headers */
.sort-indicator { font-size: 10px; opacity: 0.6; }

/* Scrollable table wrapper for wide tables */
.table-scroll { overflow-x: auto; }