/* Fleet Portal 2.0 - Premium UI */

/* Themes */
:root[data-theme="dark"]{
  --bg: #0c0f17;
  --bg-grad: radial-gradient(1200px 600px at 10% -20%, rgba(124,92,255,.18), transparent 60%), linear-gradient(180deg,#0b0f14 0%, #0f1521 100%);
  --panel: rgba(18, 22, 32, .82);
  --panel-strong: rgba(20, 26, 39, .95);
  --panel-blur: 12px;
  --text: #e7e9ee;
  --muted: #9aa3b2;
  --primary: #8b7dff;
  --primary-2:#6759ff;
  --ok:#2ee6a6;
  --warn:#ffb454;
  --danger:#ff6b6b;
  --border: #26324b;
  --chip: #121829;
  --input: #0e1421;
  --thead:#0f1524;
  --row-alt: rgba(255,255,255,.03);
  --shadow: 0 18px 55px rgba(0,0,0,.35);
  --soft-shadow: 0 10px 30px rgba(0,0,0,.25);
}

:root[data-theme="light"]{
  --bg: #edf1f7;
  --bg-grad: radial-gradient(1000px 500px at 10% -20%, rgba(103,89,255,.10), transparent 60%), linear-gradient(180deg,#f7f9fc 0%, #eaf0f8 100%);
  --panel: rgba(255,255,255,.7);
  --panel-strong: rgba(255,255,255,.9);
  --panel-blur: 14px;
  --text: #121826;
  --muted: #526075;
  --primary: #6f77ff;
  --primary-2:#3b82f6;
  --ok:#0ea371;
  --warn:#b77111;
  --danger:#e76565;
  --border: #d3dbe7;
  --chip: #f2f6fb;
  --input: #ffffff;
  --thead:#f7f9fc;
  --row-alt: rgba(18,24,38,.03);
  --shadow: 0 22px 50px rgba(18,24,38,.12);
  --soft-shadow: 0 12px 28px rgba(18,24,38,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);
  background: var(--bg-grad), var(--bg);
  font:14px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* Top Header */
.header{
  position: sticky; top:0; z-index: 100;
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid var(--border);
  background: var(--panel); backdrop-filter: blur(var(--panel-blur)) saturate(160%);
}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px}
.brand .glyph{
  width:.7rem; height:.7rem; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, #fff0 40%), linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow: 0 0 0 .25rem rgba(139,125,255,.15);
}
.nav{display:flex; align-items:center; gap:.35rem}
.nav a{
  color:var(--text); text-decoration:none; padding:.6rem .85rem; border-radius:.7rem;
}
.nav a.active, .nav a:hover{ background: rgba(255,255,255,.06) }
.header .right{display:flex; gap:.6rem; align-items:center}
.btn{
  background: linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff; border:none; border-radius:.7rem; padding:.55rem .95rem; cursor:pointer;
  box-shadow: var(--soft-shadow);
  transition: transform .08s ease, filter .2s ease;
}
.btn:hover{ filter: saturate(110%) }
.btn:active{ transform: translateY(1px) }

.select,input[type="search"],input[type="text"],input[type="password"]{
  appearance:none; border:1px solid var(--border); background:var(--input); color:var(--text);
  padding:.65rem .85rem; border-radius:.7rem; outline:none;
}
.select:focus,input:focus{ border-color: var(--primary); box-shadow: 0 0 0 .15rem rgba(103,89,255,.2) }

/* Toggle */
.switch{display:inline-flex; align-items:center; gap:.5rem; padding:.2rem .4rem; border-radius:999px; border:1px solid var(--border); background:var(--chip)}
.switch input{display:none}
.switch .track{width:44px; height:22px; border-radius:999px; background:var(--thead); position:relative; border:1px solid var(--border)}
.switch .thumb{position:absolute; top:1px; left:1px; width:20px;height:20px;border-radius:50%;
  background: linear-gradient(135deg,var(--primary),var(--primary-2)); transition:left .2s ease}
.switch input:checked + .track .thumb{ left:23px }

/* Layout */
.container {
  /* This sets the max-width to be the SMALLER of two values:
    1. 90vw (90% of the viewport's width)
    2. 1800px (a new, larger hard limit)
  */
  max-width: min(1800px, 90vw); 
  margin: 2rem auto;
  padding: 0 1rem;
}
.grid{display:grid; gap:1rem}
.grid.cols-4{grid-template-columns: repeat(4, 1fr)}
.grid.cols-3{grid-template-columns: repeat(3, 1fr)}
@media (max-width: 1100px){ .grid.cols-4{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 720px){ .grid.cols-4, .grid.cols-3{grid-template-columns: 1fr} }

.card{
  background: var(--panel); border:1px solid var(--border); border-radius:1rem;
  box-shadow: var(--shadow); padding: 1rem;
}
.card h2{margin:.25rem 0 1rem 0}

/* Stats */
.kpi{display:flex; align-items:center; justify-content:space-between; padding:.65rem .8rem; background: var(--panel-strong);
  border:1px solid var(--border); border-radius:.9rem}
.kpi .title{color:var(--muted); font-weight:600}
.kpi .value{font-size:1.3rem; font-weight:800}

/* Filters (floating labels) */
.filters{display:grid; grid-template-columns: repeat(12, 1fr); gap:.6rem}
.f-col-6{grid-column: span 6}
.f-col-3{grid-column: span 3}
.f-col-2{grid-column: span 2}
.f-col-12{grid-column: span 12}
@media (max-width: 900px){
  .f-col-6,.f-col-3,.f-col-2,.f-col-12{grid-column: span 12}
}
.field{position:relative; display: flex; flex-direction: column;}
.field input,.field select{width:100%; padding: 0.75rem 0.9rem;}
.field label{
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  color: var(--text);
  opacity: 1;
  pointer-events: auto;
  background: none;
  position: static;
}



/* Table */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:.9rem; width: 100%; margin: 0;}
table{width:100%; border-collapse:separate; border-spacing:0; min-width: 1400px;}
thead th{
  position:sticky; top:0; background:var(--thead); color:var(--muted); text-align:left; font-weight:700;
  padding:.6rem .5rem; border-bottom:1px solid var(--border); z-index:1; backdrop-filter: blur(4px);
  font-size: 0.85rem; white-space: nowrap;
}
tbody td{padding:.6rem .5rem; border-bottom:1px dashed rgba(255,255,255,.06); font-size: 0.85rem;}
tbody tr:nth-child(even){background:var(--row-alt)}
tbody tr{opacity:0; transform:translateY(4px); animation: rowIn .28s ease forwards}
tbody tr:hover{background: linear-gradient(90deg, rgba(139,125,255,.10), transparent)}
@keyframes rowIn{to{opacity:1; transform:translateY(0)}}

/* Badges */
.pill{padding:.22rem .55rem; border-radius:999px; border:1px solid var(--border); font-weight:700}
.pill.ok{background:rgba(46,230,166,.1); color:var(--ok); border-color:rgba(46,230,166,.35)}
.pill.warn{background:rgba(255,180,84,.1); color:var(--warn); border-color:rgba(255,180,84,.35)}
.badge{font-size:.75rem; padding:.18rem .5rem; border-radius:.45rem; border:1px solid var(--border)}
.badge-eur{background:rgba(59,130,246,.12); color:#7ea8ff; border-color:rgba(59,130,246,.35)}
.badge-bgn{background:rgba(16,185,129,.12); color:#79e6bd; border-color:rgba(16,185,129,.35)}
.badge-neutral{background:rgba(148,163,184,.12); color:#cbd5e1; border-color:rgba(148,163,184,.35)}

/* Toast */
.toast{position:fixed; right:1rem; bottom:1rem; background:var(--panel-strong); border:1px solid var(--border);
  color:var(--text); padding:.7rem 1rem; border-radius:.7rem; box-shadow: var(--soft-shadow); opacity:0; transform:translateY(8px);
  animation: toast .32s ease forwards}
@keyframes toast{to{opacity:1; transform:translateY(0)}}

/* Login */
.login-wrap{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:1.5rem}
.login-card{width:100%; max-width:420px}
.login-title{font-weight:800; margin-bottom:.75rem}
.login-sub{color:var(--muted); margin-bottom:1rem}
.brand-big{display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem}
.brand-big .glyph{width:.9rem; height:.9rem; border-radius:50%; background: linear-gradient(135deg,var(--primary),var(--primary-2))}
.remember{display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.9rem}
.footer-note{color:var(--muted); text-align:center; margin-top:.75rem; font-size:.85rem}

/* Version Mismatch Styling */
.version-mismatch {
  background-color: var(--danger);
  color: var(--text);
  font-weight: bold;
  padding: 0.2rem 0.4rem;
  border-radius: 0.3rem;
}

.version-match {
  background-color: var(--ok);
  color: var(--text);
  padding: 0.2rem 0.4rem;
  border-radius: 0.3rem;
}

.row-mismatch {
  border-left: 5px solid var(--danger);
}

.row .currency-badge {
  margin-left: 0.4rem;
  vertical-align: middle;
}


.version-missing {
  background-color: var(--chip);
  color: var(--muted);
  padding: 0.2rem 0.4rem;
  border-radius: 0.3rem;
}

/* Table cells for versions */
#devices-table td {
  vertical-align: middle;
}

#devices-table td.version-mismatch,
#devices-table td.version-match,
#devices-table td.version-missing {
  text-align: center;
}

.icon-btn {
  padding: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.icon-btn:hover {
  transform: rotate(30deg);
}
.icon-btn svg {
  pointer-events: none;
}