/* =========================
   Soffitta Segreta Themes
   ========================= */

:root {
  --bg: #FAF1E1;
  --grid: #E9DECC;
  --text: #1b1b1b;
  --accent: #74B9FF;
  --accent-2: #FF9E57;
  --accent-3: #FF7EB3;
  --accent-4: #7DE4C1;
  --accent-5: #FFD166;
  --panel: #FFF9F0;
  --panel-2: #FFF3E3;
  --surface: #FFFFFF;
  --border: #1b1b1b;
  --radius: 14px;
  --shadow: 3px 3px 0 var(--border);
  --btn-text: #1b1b1b;
  --btn-primary: #FF9E57;
  --btn-download: #74B9FF;
  --btn-select: #7DE4C1;
  --btn-add: #FF7EB3;
  --btn-toggle: #FFD166;
  --table-head: #7DE4C1;
  --chip-bg: #FFD166;
  --row-selected: #74B9FF;
  --font-body: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Bungee', cursive;
  --font-mono: 'VT323', monospace;
}

:root[data-theme="y2k"] {
  --font-body: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Bungee', cursive;
  --font-mono: 'VT323', monospace;
}

:root[data-theme="neo-glow"] {
  --bg: #0b1020;
  --grid: #101735;
  --text: #e8ecff;
  --accent: #00e5ff;
  --accent-2: #ff2ea6;
  --accent-3: #7a5cff;
  --accent-4: #17d47b;
  --accent-5: #ffd166;
  --panel: rgba(255,255,255,0.06);
  --panel-2: rgba(255,255,255,0.04);
  --surface: rgba(12,16,32,0.9);
  --border: rgba(255,255,255,0.14);
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --btn-text: #e8ecff;
  --btn-primary: #1a2142;
  --btn-download: #182a4a;
  --btn-select: #24345c;
  --btn-add: #3b1c4f;
  --btn-toggle: #3e3322;
  --table-head: rgba(255,255,255,0.08);
  --chip-bg: rgba(255,255,255,0.06);
  --row-selected: rgba(0,229,255,0.15);
  --font-body: 'Orbitron', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Orbitron', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'VT323', monospace;
}

:root[data-theme="forest"] {
  --bg: #eef6f0;
  --grid: #dce9e0;
  --text: #1b2a1f;
  --accent: #3fb68b;
  --accent-2: #f4b266;
  --accent-3: #5b7cfa;
  --accent-4: #7bd389;
  --accent-5: #ffd36b;
  --panel: #f7fbf6;
  --panel-2: #edf6f0;
  --surface: #ffffff;
  --border: #1b2a1f;
  --shadow: 3px 3px 0 rgba(27,42,31,0.9);
  --btn-text: #1b2a1f;
  --btn-primary: #7bd389;
  --btn-download: #5b7cfa;
  --btn-select: #3fb68b;
  --btn-add: #f4b266;
  --btn-toggle: #ffd36b;
  --table-head: #cbe9d7;
  --chip-bg: #dff2e6;
  --row-selected: #c5f1dd;
  --font-body: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Bungee', cursive;
  --font-mono: 'VT323', monospace;
}

:root[data-theme="midnight"] {
  --bg: #0a0f1f;
  --grid: #151b33;
  --text: #e9e6ff;
  --accent: #8f7dff;
  --accent-2: #ff8bd1;
  --accent-3: #3ad4ff;
  --accent-4: #59f5a5;
  --accent-5: #ffd166;
  --panel: #141a33;
  --panel-2: #10162c;
  --surface: #0f1430;
  --border: rgba(233,230,255,0.18);
  --shadow: 0 12px 30px rgba(0,0,0,0.5);
  --btn-text: #e9e6ff;
  --btn-primary: #1d2550;
  --btn-download: #2b2a5e;
  --btn-select: #1d3f5e;
  --btn-add: #3a1f52;
  --btn-toggle: #4a3a20;
  --table-head: #1f2a55;
  --chip-bg: #1a2145;
  --row-selected: rgba(143,125,255,0.22);
  --font-body: 'Orbitron', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Press Start 2P', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'VT323', monospace;
}

:root[data-theme="paper"] {
  --bg: #f6f3ee;
  --grid: #e7e1d8;
  --text: #1e1c19;
  --accent: #3b82f6;
  --accent-2: #ef4444;
  --accent-3: #10b981;
  --accent-4: #f59e0b;
  --accent-5: #8b5cf6;
  --panel: #ffffff;
  --panel-2: #f8f6f2;
  --surface: #ffffff;
  --border: #1e1c19;
  --shadow: 2px 2px 0 rgba(30,28,25,0.7);
  --btn-text: #1e1c19;
  --btn-primary: #f8f6f2;
  --btn-download: #e0e7ff;
  --btn-select: #dcfce7;
  --btn-add: #fee2e2;
  --btn-toggle: #fef9c3;
  --table-head: #f8f6f2;
  --chip-bg: #f8f6f2;
  --row-selected: #e0e7ff;
  --font-body: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Bungee', cursive;
  --font-mono: 'VT323', monospace;
}

html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.3;
  background:
    repeating-linear-gradient(0deg, var(--bg), var(--bg) 46px, var(--grid) 46px, var(--grid) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 46px, var(--grid) 46px, var(--grid) 48px);
}

  /* Container finestra */
form {
  width: min(1200px, 92vw);
  margin: 20px auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 3px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.form-group { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.form-group-horizontal { flex-direction: row; }
.input-group { display: grid; gap: 4px; }
.input-group label { font-family: var(--font-mono); font-size: 16px; letter-spacing: .02em; }

  /* Input */
input[type="text"], input[type="number"], input[type="date"], input[type="search"], #search_term, select {
  appearance: none;
  outline: none;
  background: var(--surface);
  color: var(--text);
  padding: 6px 8px;
  border: 3px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  transition: transform .05s ease, filter .15s ease;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus, #search_term:focus, select:focus { filter: brightness(1.03); }
#limit { width: 120px; }

  /* Buttons */
 .btn, .button, #download-button, #download-browser-button, #share-link-button, #select-all-button, #export-button, #add-to-db-button, #refresh-online-button, #toggleButton, .download-btn, input[type="submit"] {
  font-family: var(--font-heading);
  letter-spacing: .02em;
  background: var(--btn-primary);
  color: var(--btn-text);
  border: 3px solid var(--border);
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 13px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .06s ease, filter .12s ease;
}
.btn:hover, .button:hover, #download-button:hover, #download-browser-button:hover, #share-link-button:hover, #select-all-button:hover, #export-button:hover, #add-to-db-button:hover, #refresh-online-button:hover, #toggleButton:hover, .download-btn:hover, input[type="submit"]:hover { filter: brightness(1.08); }
.btn:active, .button:active, #download-button:active, #download-browser-button:active, #share-link-button:active, #select-all-button:active, #export-button:active, #add-to-db-button:active, #refresh-online-button:active, #toggleButton:active, .download-btn:active, input[type="submit"]:active { transform: translate(2px, 2px); }
#download-button, #download-browser-button, #share-link-button, .download-btn { background: var(--btn-download); }
#select-all-button, #export-button { background: var(--btn-select); }
#add-to-db-button, #refresh-online-button { background: var(--btn-add); }
#toggleButton { background: var(--btn-toggle); }

  /* Barra modalità + titolo topic */
 .mode-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 3px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  background: var(--panel);
}
.mode-container label { font-family: var(--font-heading); }

.theme-switcher { display: inline-flex; align-items: center; gap: 6px; }
.theme-switcher label { font-family: var(--font-mono); font-size: 14px; }
.theme-switcher select { min-width: 160px; }

.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--panel-2);
  font-family: var(--font-mono);
}

.login-telegram {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 2px dashed var(--border);
  background: var(--panel-2);
}
.login-telegram .login-hint {
  font-family: var(--font-mono);
  font-size: 12px;
}
.login-telegram .login-note {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.85;
}

.download-info .path-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 2px dashed var(--border);
  background: var(--panel-2);
  font-family: var(--font-mono);
  font-size: 14px;
}

#download-panel {
  width: min(1200px, 92vw);
  margin: 12px auto 6px;
  padding: 12px;
  border-radius: 16px;
  border: 3px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  display: grid;
  gap: 10px;
}
#download-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#download-panel .panel-title {
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: .04em;
}
#download-panel .panel-subtitle {
  font-family: var(--font-mono);
  font-size: 14px;
}
#download-panel .progress-track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 2px solid var(--border);
  overflow: hidden;
}
#download-panel .progress-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-3), var(--accent-2));
  transition: width .3s ease;
}
#download-panel .progress-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
}
#download-panel .stat-pill {
  padding: 4px 8px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface);
}
#download-panel .progress-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}

#download-panel .share-link {
  display: flex;
  gap: 8px;
  align-items: center;
}
#download-panel .share-link input {
  flex: 1;
  min-width: 220px;
}
#download-panel .share-link button {
  padding: 6px 10px;
}

:root[data-theme="neo-glow"] .button,
:root[data-theme="neo-glow"] #download-button,
:root[data-theme="neo-glow"] #download-browser-button,
:root[data-theme="neo-glow"] #share-link-button,
:root[data-theme="neo-glow"] #select-all-button,
:root[data-theme="neo-glow"] #export-button,
:root[data-theme="neo-glow"] #add-to-db-button,
:root[data-theme="neo-glow"] #refresh-online-button,
:root[data-theme="neo-glow"] #toggleButton,
:root[data-theme="neo-glow"] .download-btn,
:root[data-theme="neo-glow"] input[type="submit"] {
  border-width: 1px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), 0 8px 24px rgba(0,0,0,0.45);
  text-transform: uppercase;
}

:root[data-theme="forest"] .button,
:root[data-theme="forest"] #download-button,
:root[data-theme="forest"] #download-browser-button,
:root[data-theme="forest"] #share-link-button,
:root[data-theme="forest"] #select-all-button,
:root[data-theme="forest"] #export-button,
:root[data-theme="forest"] #add-to-db-button,
:root[data-theme="forest"] #refresh-online-button,
:root[data-theme="forest"] #toggleButton,
:root[data-theme="forest"] .download-btn,
:root[data-theme="forest"] input[type="submit"] {
  border-radius: 999px;
  border-width: 2px;
  box-shadow: 0 6px 0 rgba(27,42,31,0.25);
}

:root[data-theme="midnight"] .button,
:root[data-theme="midnight"] #download-button,
:root[data-theme="midnight"] #download-browser-button,
:root[data-theme="midnight"] #share-link-button,
:root[data-theme="midnight"] #select-all-button,
:root[data-theme="midnight"] #export-button,
:root[data-theme="midnight"] #add-to-db-button,
:root[data-theme="midnight"] #refresh-online-button,
:root[data-theme="midnight"] #toggleButton,
:root[data-theme="midnight"] .download-btn,
:root[data-theme="midnight"] input[type="submit"] {
  border-radius: 8px;
  border-width: 1px;
  background: linear-gradient(180deg, #1b2144, #11172f);
  box-shadow: 0 10px 24px rgba(0,0,0,0.5);
  text-transform: uppercase;
}

:root[data-theme="paper"] .button,
:root[data-theme="paper"] #download-button,
:root[data-theme="paper"] #download-browser-button,
:root[data-theme="paper"] #share-link-button,
:root[data-theme="paper"] #select-all-button,
:root[data-theme="paper"] #export-button,
:root[data-theme="paper"] #add-to-db-button,
:root[data-theme="paper"] #refresh-online-button,
:root[data-theme="paper"] #toggleButton,
:root[data-theme="paper"] .download-btn,
:root[data-theme="paper"] input[type="submit"] {
  border-radius: 6px;
  border-width: 2px;
  box-shadow: none;
  text-transform: none;
}

 #topic-container { display: flex; flex-direction: column; gap: 2px; margin-left: auto; text-align: right; }
 #topic-title { font-family: var(--font-heading); font-size: 16px; letter-spacing: .02em; }
 #topic-author { font-family: var(--font-mono); color: var(--text); text-decoration: underline; }

  /* Topic chips */
 .topic-strip { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; padding: 10px; border: 3px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
 .topic-strip label { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 3px solid var(--border); border-radius: 10px; background: var(--chip-bg); box-shadow: var(--shadow); cursor: pointer; font-family: var(--font-heading); font-size: 13px; transition: transform .06s ease, filter .12s ease; }
 .topic-strip label:hover { filter: brightness(1.05); }
 .topic-strip input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
 .topic-strip label.selected { background: var(--accent); }
 .topic-strip i { color: var(--text); }

  /* Filtri e ricerca */
 .date-limit-strip, .search-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px; border: 3px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
 .search-container { display: flex; align-items: center; gap: 10px; flex: 1; }

 .ui-autocomplete { max-height: 220px; overflow-y: auto; padding-right: 6px; background: var(--surface); color: var(--text); border: 3px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }

  /* DataTables wrapper */
 .dataTables_wrapper { width: min(1200px, 92vw); margin: 10px auto 24px; padding: 12px; background: var(--panel); border: 3px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
 table.dataTable { border-collapse: separate !important; border-spacing: 0 6px !important; }
 #resultsTable { width: 100% !important; }
 #resultsTable thead th { background: var(--table-head); color: var(--text); font-family: var(--font-heading); padding: 8px; border-bottom: 2px solid var(--border); border-top: 2px solid var(--border); border-right: 2px solid var(--border); border-left: 2px solid var(--border); }
 #resultsTable tbody tr { transition: transform .06s ease, box-shadow .12s ease, background .12s ease; }
 #resultsTable tbody tr td { background: var(--surface); border-top: 2px solid var(--border); border-bottom: 2px solid var(--border); padding: 8px; }
 table.dataTable.display tbody tr.odd, table.dataTable.display tbody tr.even { background: transparent !important; }
 #resultsTable tbody tr:hover { transform: translate(1px, 1px); box-shadow: var(--shadow); background: var(--panel-2) !important; }
 #resultsTable tbody tr.selected { background: var(--row-selected) !important; }
 #resultsTable tbody tr.selected td { background: transparent; }
 #resultsTable tbody tr td a { color: var(--text); text-decoration: underline; }

 .ui-widget-content { background: transparent !important; color: var(--text) !important; }
 table.dataTable tbody th, table.dataTable tbody td { color: var(--text) !important; }

  /* Progress bar */
 #download-progress { width: 200px; height: 14px; border-radius: 12px; overflow: hidden; background: var(--surface); border: 3px solid var(--border); box-shadow: var(--shadow); }
 #download-progress::-webkit-progress-bar { background: transparent; }
 #download-progress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent-3), var(--accent-2), var(--accent-5)); transition: width .3s ease; }
 #download-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--accent-3), var(--accent-2), var(--accent-5)); }
 #progress-text { margin-left: 10px; color: var(--text); font-family: var(--font-mono); font-size: 14px; }
 #progress-summary { margin-left: 10px; color: var(--text); font-weight: 600; }

  /* Blocker filtro */
 #blocker { position: absolute; inset: 0; background: rgba(0,0,0,0.05); border-radius: 10px; z-index: 10; }

  /* Links */
 a { color: var(--text); }
 a:hover { text-decoration: underline; }

  /* Checkbox delle righe */
 input[type="checkbox"].select-row { width: 14px; height: 14px; accent-color: var(--accent); }

  /* Responsive */
 @media (max-width: 900px) {
    body { font-size: 15px; line-height: 1.45; }
    .dataTables_wrapper, form { width: 96vw; padding: 12px; }
  .form-group { flex-direction: column; align-items: stretch; }
  .form-group-horizontal { flex-direction: column; }
  .mode-container { gap: 8px; }
  #topic-container { width: 100%; justify-content: space-between; text-align: left; }
    #topic-title { font-size: 18px; }
    #topic-author { font-size: 14px; }
  .theme-switcher, .user-badge, .login-telegram { width: 100%; }
    .topic-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .topic-strip label { justify-content: center; font-size: 14px; padding: 10px 12px; }
  .date-limit-strip { flex-direction: column; }
  .search-container { width: 100%; }
  #search_term { width: 100%; }
  .download-info .path-chip { font-size: 11px; word-break: break-all; }
  #resultsTable { display: block; width: 100%; overflow-x: auto; }
    #resultsTable thead th, #resultsTable tbody tr td { font-size: 14px; padding: 10px; }
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: left;
    width: 100%;
  }
  .btn, .button, #download-button, #download-browser-button, #share-link-button,
  #select-all-button, #export-button, #add-to-db-button, #refresh-online-button,
  #toggleButton, .download-btn, input[type="submit"] {
      width: 100%;
      padding: 12px 14px;
      font-size: 15px;
  }
    input[type="text"], input[type="number"], input[type="date"], input[type="search"], #search_term, select {
      padding: 10px 12px;
      font-size: 15px;
    }
  #download-panel { width: 100%; }
    #download-progress { width: 180px; }
    input[type="checkbox"].select-row { width: 18px; height: 18px; }
 }