/* ===== BASE ===== */
:root {
  --bg: #f3f4f6;
  --card: rgba(255, 255, 255, 0.72);
  --text: #111111;
  --border: rgba(255, 255, 255, 0.45);
  --muted: #6b7280;
  --hover: rgba(219, 234, 254, 0.55);
  --primary: #1d4ed8;
  --primary-strong: #1e40af;
  --success: #22c55e;
  --panel-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --radius-card: 16px;
}

body.dark {
  --bg: #0f172a;
  --card: rgba(17, 24, 39, 0.72);
  --text: #e5e7eb;
  --border: rgba(71, 85, 105, 0.6);
  --muted: #9ca3af;
  --hover: rgba(55, 65, 81, 0.65);
  --primary: #3b82f6;
  --primary-strong: #2563eb;
  --success: #34d399;
  --panel-shadow: 0 16px 38px rgba(2, 6, 23, 0.45);
}



h1,h2,h3{
  letter-spacing:-0.02em;
  margin:0 0 12px;
}

h1{
  font-size:clamp(1.35rem, 2vw, 1.9rem);
  font-weight:700;
}

h3{
  font-size:1rem;
  font-weight:650;
}

p, label{
  color:var(--muted);
}

#wrapper{
  max-width:1360px;
  margin:0 auto;
  padding:20px 20px 28px;
}

.tool-header{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  box-shadow:var(--panel-shadow);
  backdrop-filter: blur(12px);
  margin-bottom:16px;
}

.header-inner{
  padding:14px 18px;
}

/* ===== LAYOUT ===== */
.layout{
  display:grid;
  grid-template-columns:minmax(240px,280px) minmax(0,1fr) minmax(240px,280px);
  gap:24px;
  max-width:1600px;
  margin:0 auto;
  align-items:start;
  transition:all 0.25s ease;
  position:relative;
}

.sidebar-left,.sidebar-right{
  background:var(--card);
  padding:16px;
  border-radius:var(--radius-card);
  border:1px solid var(--border);
  box-shadow:var(--panel-shadow);
  backdrop-filter: blur(12px);
  position:sticky;
  top:20px;
  height:calc(100vh - 40px);
  max-height:860px;
  overflow:auto;
  transition:transform 0.25s ease, opacity 0.25s ease, max-width 0.25s ease, margin 0.25s ease;
}

.main{
  display:flex;
  flex-direction:column;
  gap:24px;
  min-width:0;
}

.card{
  background:var(--card);
  padding:16px;
  border-radius:var(--radius-card);
  border:1px solid var(--border);
  box-shadow:var(--panel-shadow);
  backdrop-filter: blur(12px);
  transition:all 0.25s ease;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(15, 23, 42, 0.12);
}

/* ===== TABLE ===== */

.table-wrapper{
  max-height:50vh;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  box-shadow:var(--panel-shadow);
}

table{
  width:100%;
  border-collapse:collapse;
  background:transparent;
  color:var(--text);
}

th,
td{
  padding:8px;
  border:1px solid var(--border);
  text-align:center;
  color:var(--text);
}

/* HEADER */
th{
  background:var(--primary);
  color:#fff;
  position:sticky;
  top:0;
  z-index:5;
}

/* SELECTED */
tr.selected{
  background:rgba(59,130,246,.18) !important;
  box-shadow:inset 0 0 0 2px var(--primary);
}

/* HOVER */
#tableBody tr{
  transition:background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

#tableBody tr.row-hover:hover{
  background:var(--hover);
  transform:translateY(-1px);
}

/* BEST */
tr.best-row{
  box-shadow:inset 0 0 0 2px var(--success);
}

/* DARK MODE EXTRA BOOST */
body.dark table,
body.dark td,
body.dark tr{
  color:var(--text) !important;
  background-color: :var(--card) !important;
}

body.dark th{
  background:var(--bg) !important;
}

/* ==================================
   PREMIUM BUTTONS - Light / Dark
================================== */

button{
  appearance:none;
  border:1px solid var(--border);
  background:linear-gradient(135deg, var(--card), rgba(255,255,255,.92));
  color:var(--text);

  border-radius:14px;
  padding:12px 14px;
  min-height:44px;

  font-weight:700;
  font-size:14px;
  letter-spacing:.01em;

  cursor:pointer;
  user-select:none;

  box-shadow:
    0 6px 18px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.75);

  transition:
    transform .18s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease,
    color .22s ease;
}

/* Hover */
button:hover{
  transform:translateY(-2px);
  border-color:#93c5fd;

  box-shadow:
    0 12px 24px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.85);

  background:linear-gradient(135deg, #ffffff, #f8fafc);
}

/* Active */
button:active{
  transform:translateY(0) scale(.97);
  box-shadow:
    0 4px 12px rgba(15,23,42,.08),
    inset 0 2px 6px rgba(0,0,0,.08);
}

/* Focus */
button:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(59,130,246,.28),
    0 10px 24px rgba(15,23,42,.12);
}

/* Disabled */
button:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* Primary Button */
#compareBtn{
  background:linear-gradient(135deg, var(--primary), var(--primary-strong));
  color:#fff;
  border-color:transparent;

  box-shadow:
    0 10px 22px rgba(37,99,235,.28),
    inset 0 1px 0 rgba(255,255,255,.18);
}

#compareBtn:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg, var(--primary-strong), #1e3a8a);

  box-shadow:
    0 16px 28px rgba(37,99,235,.38),
    inset 0 1px 0 rgba(255,255,255,.22);
}

#compareBtn:active{
  transform:translateY(0) scale(.97);
}

/* Dark Mode */
body.dark button{
  background:linear-gradient(135deg, #111827, #1f2937);
  color:#f8fafc;
  border-color:rgba(255,255,255,.08);

  box-shadow:
    0 8px 18px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);
}

body.dark button:hover{
  background:linear-gradient(135deg, #1f2937, #273449);
  border-color:#60a5fa;

  box-shadow:
    0 14px 26px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.06);
}

body.dark #compareBtn{
  background:linear-gradient(135deg, #3b82f6, #2563eb);
}

body.dark #compareBtn:hover{
  background:linear-gradient(135deg, #2563eb, #1d4ed8);
}

#search,
#usageMode,
#historySearchInput,
#formFilter,
#manufacturerFilter,
#dischargeMin,
#dischargeMax,
#priceMin,
#priceMax{
  width:100%;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  border-radius:12px;
  min-height:42px;
  padding:10px 12px;
  margin:8px 0 10px;
  font-size:14px;
}

#usageMode{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

input:focus, select:focus, button:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(59,130,246,0.22);
}

/* ===== TOAST ===== */
#toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(16px);
  background:rgba(17,24,39,0.95);
  color:#fff;
  padding:12px 18px;
  border-radius:14px;
  opacity:0;
  transition:all 0.25s ease;
  box-shadow:0 14px 28px rgba(0,0,0,0.25);
  backdrop-filter:blur(6px);
  z-index:999;
}
#toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.mode-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:10px 0 8px;
  padding:6px 10px;
  border-radius:999px;
  background:#e0e7ff;
  color:#1e3a8a;
  font-size:12px;
  font-weight:700;
}

.mode-active{
  outline:2px solid #2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,0.18);
}

.mode-badge[data-mode="power"]{
  background:#fef3c7;
  color:#92400e;
}

.mode-badge[data-mode="budget"]{
  background:#dcfce7;
  color:#166534;
}

.history-controls{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
}

.sidebar-section{
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:color-mix(in srgb, var(--card) 75%, var(--bg) 25%);
  margin-bottom:12px;
  backdrop-filter: blur(10px);
}

.sidebar-section h4{
  margin:0 0 8px;
  font-size:13px;
  color:var(--text);
}

.filter-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.mode-toggles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.mode-toggle-btn{
  font-size:12px;
  padding:8px 6px;
}

.mode-toggle-btn.active{
  background:#1d4ed8;
  color:#fff;
  border-color:#1d4ed8;
}

.filters-row{
  display:flex;
  gap:8px;
}

.filters-row button{
  flex:1;
}

.history-controls input,
.history-controls select{
  width:100%;
  padding:8px;
  border:1px solid #d1d5db;
  border-radius:8px;
}

.history-clear{
  background:#fee2e2;
  border:1px solid #fecaca;
  color:#991b1b;
  border-radius:8px;
  padding:8px;
}

.history-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:450px;
  overflow:auto;
}

.history-item{
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 10px;
  background:var(--card);
  cursor:pointer;
}

.history-item:hover{
  background:var(--hover);
}

.history-top{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  margin-bottom:4px;
}

.history-meta{
  font-size:11px;
  color:var(--muted);
}

.history-badge{
  font-size:10px;
  border-radius:999px;
  padding:3px 7px;
  font-weight:700;
  background:#e0e7ff;
  color:#1e3a8a;
}

.history-empty{
  font-size:12px;
  color:var(--muted);
}

button:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

canvas{
  margin-top:0;
}

#chartContainer{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

#chartContainer h3{
  grid-column:1 / -1;
  margin:0;
}

#chartContainer canvas{
  width:100% !important;
  min-height:230px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  opacity:0;
  transform:translateY(8px);
  animation:chartFadeIn 0.35s ease forwards;
}

.layout.fullscreen .sidebar-left,
.layout.fullscreen .sidebar-right{
  display:none;
}

.layout.fullscreen{
  grid-template-columns:1fr;
  max-width:none;
  width:100%;
  min-height:100vh;
  padding:12px;
  animation:layoutScaleIn 0.3s ease;
}

.focus-mode .sidebar-left,
.focus-mode .sidebar-right{
  opacity:0;
  transform:translateX(12px);
  pointer-events:none;
  max-width:0;
  margin:0;
  padding:0;
  border-width:0;
  overflow:hidden;
}

.focus-mode .card:first-child,
.focus-mode #recommendations{
  opacity:0;
  transform:translateY(-8px);
  max-height:0;
  overflow:hidden;
  padding:0;
  margin:0;
  border-width:0;
  pointer-events:none;
}

.focus-mode .layout{
  grid-template-columns:1fr;
}

.focus-mode .main{
  position:relative;
  z-index:2;
}

.focus-mode::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.12);
  backdrop-filter:blur(6px);
  pointer-events:none;
  z-index:1;
}

.focus-mode #chartContainer{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

#exitFocusBtn{
  position:absolute;
  top:10px;
  right:10px;
  z-index:40;
  display:none;
}

body.focus-mode #exitFocusBtn{
  display:inline-flex;
}

body.dark .mode-badge{
  background:#1e3a8a;
  color:#dbeafe;
}

body.dark tr.selected{
  background:#1e3a8a !important;
  box-shadow:inset 0 0 0 2px #60a5fa;
}

body.dark th{
  background:#1e40af;
}

.layout.fullscreen-exit{
  animation:layoutScaleOut 0.28s ease;
}

body.dark .tool-header,
body.dark .card,
body.dark .sidebar-left,
body.dark .sidebar-right{
  box-shadow:var(--panel-shadow);
}

#tableBody tr.selected{
  animation:rowSelectedPulse 0.26s ease;
}

#chartContainer.loading{
  position:relative;
}

#chartContainer.loading::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  background:linear-gradient(90deg, transparent, rgba(148,163,184,0.14), transparent);
  animation:chartShimmer 0.8s linear infinite;
  pointer-events:none;
}

@keyframes chartFadeIn{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes layoutScaleIn{
  from{
    opacity:0.88;
    transform:scale(0.992);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes layoutScaleOut{
  from{
    opacity:1;
    transform:scale(1);
  }
  to{
    opacity:0.92;
    transform:scale(0.994);
  }
}

@keyframes rowSelectedPulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.004); }
  100%{ transform:scale(1); }
}

@keyframes chartShimmer{
  from{ transform:translateX(-100%); }
  to{ transform:translateX(100%); }
}

@media (max-width: 1100px){
  .layout{
    grid-template-columns:1fr;
  }
  .sidebar-left,.sidebar-right{
    position:static;
    height:auto;
    max-height:none;
  }
  #chartContainer{
    grid-template-columns:1fr;
  }
  .mode-toggles{
    grid-template-columns:1fr;
  }
}

@media (max-width: 720px){
  #wrapper{
    padding:12px;
  }
  .header-inner{
    padding:12px;
  }
  .card,.sidebar-left,.sidebar-right{
    padding:12px;
  }
  .filter-grid{
    grid-template-columns:1fr;
  }
}