/* 2026-02-13  TRILUMA Admin UX – Light Theme (final)
   Version: 1.0.1
   Scope: /opt/triluma/admin/web/triluma-admin.css

   Changes in 1.0.1:
   - Dashboard: 2nd row grid = 2/3 (Letzte Änderungen) + 1/3 (Quick Actions) to match top row (User-Codes width)
   - Vertical spacing between rows equals horizontal spacing: content gap now uses --tri-gap
*/

/* ---------------------------
   Fonts (local)
--------------------------- */

@font-face {
  font-family: "Roboto";
  src: url("fonts/roboto-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/roboto-400italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/roboto-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/roboto-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("fonts/Merriweather.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("fonts/MerriweatherItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------
   Triluma Tokens (Light)
--------------------------- */

:root{
  --tri-bg: #ffffff;
  --tri-surface: #f8fafc;
  --tri-card: #ffffff;
  --tri-card-2: #f8fafc;

  --tri-border: #e2e8f0;
  --tri-border-strong: #cbd5e1;

  --tri-text: #111827;
  --tri-muted: #475569;
  --tri-faint: #64748b;

  --tri-accent: #3BA2C4;
  --tri-accent-2: #2C7A93;

  --tri-ok: #059669;
  --tri-warn: #d97706;
  --tri-bad: #dc2626;

  --tri-radius: 16px;
  --tri-radius-sm: 12px;

  --tri-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --tri-shadow-soft: 0 8px 18px rgba(15, 23, 42, .06);

  --tri-font: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial;
  --tri-serif: "Merriweather", ui-serif, Georgia, serif;
  --tri-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --tri-gap: 16px;
}

/* ---------------------------
   Base
--------------------------- */

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: var(--tri-font);
  color: var(--tri-text);
  background:
    radial-gradient(900px 500px at 18% 0%, rgba(59,162,196,.10), transparent 60%),
    radial-gradient(900px 500px at 85% 12%, rgba(5,150,105,.06), transparent 55%),
    var(--tri-bg);
}

h1, .brand-name {
  font-family: var(--tri-serif);
  color: var(--tri-accent);
}

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

button, input, select, textarea{
  font:inherit;
  color:inherit;
}

/* Accessibility */
.skip{
  position:absolute;
  left:-999px;
  top:-999px;
  background: var(--tri-accent);
  color:#001018;
  padding:10px 12px;
  border-radius:10px;
}
.skip:focus{
  left:12px;
  top:12px;
  z-index:9999;
}

/* ---------------------------
   Layout
--------------------------- */

.app{
  min-height:100%;
  display:flex;
}

.sidebar{
  width: 280px;
  background: var(--tri-surface);
  border-right: 1px solid var(--tri-border);
  padding: 18px 14px;
  display:flex;
  flex-direction:column;
  gap: 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 10px 8px;
  border-radius: var(--tri-radius);
  background: rgba(255,255,255,.70);
  box-shadow: var(--tri-shadow-soft);
  border: 1px solid var(--tri-border);
}

.logo{
  width: 40px;
  height: 40px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(59,162,196,.25), rgba(5,150,105,.18));
  border: 1px solid rgba(59,162,196,.25);
  font-weight: 900;
  color: #0f172a;
}

.brand-name{
  font-weight: 900;
  letter-spacing:.2px;
}

.brand-sub{
  color: var(--tri-muted);
  font-size: 12px;
  margin-top:2px;
}

/* ---------------------------
   Sidebar Nav
--------------------------- */

.nav{
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding: 0 6px;
}

.nav-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  color: var(--tri-muted);
  border: 1px solid transparent;
}

.nav-item:hover{
  background: rgba(15, 23, 42, .03);
  color: var(--tri-text);
  border-color: var(--tri-border);
}

.nav-item.active{
  background: rgba(59,162,196,.12);
  color: var(--tri-text);
  border-color: rgba(59,162,196,.30);
}

.nav-ico{
  width: 22px;
  text-align:center;
  opacity:.95;
}

.nav-sep{
  height:1px;
  background: var(--tri-border);
  margin: 8px 6px;
}

/* Sidebar footer */
.sidebar-foot{
  margin-top:auto;
  padding: 10px 6px 0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.mini{
  padding: 12px;
  border-radius: var(--tri-radius);
  border:1px solid var(--tri-border);
  background: rgba(255,255,255,.65);
  box-shadow: var(--tri-shadow-soft);
}

.mini-title{
  font-size: 12px;
  color: var(--tri-muted);
  margin-bottom: 6px;
}

.mini-row{
  display:flex;
  gap:8px;
  align-items:center;
  color: var(--tri-text);
}

/* ---------------------------
   Main + Topbar
--------------------------- */

.main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,.80);
  border-bottom: 1px solid var(--tri-border);
  backdrop-filter: blur(10px);
}

.topbar-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width:0;
}

.crumbs{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--tri-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.crumb.current{
  color: var(--tri-text);
  font-weight: 700;
}

.crumb-sep{
  opacity:.7;
}

/* Burger (mobile) */
.burger{
  display:none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--tri-border);
  background: rgba(255,255,255,.70);
  cursor:pointer;
  box-shadow: var(--tri-shadow-soft);
}

.burger span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(15,23,42,.70);
  margin: 4px auto;
  border-radius: 2px;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Search */
.search{
  position:relative;
  width: min(440px, 38vw);
}

.search input{
  width:100%;
  padding: 10px 36px 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--tri-border);
  background: rgba(255,255,255,.90);
  outline:none;
}

.search input:focus{
  border-color: rgba(59,162,196,.55);
  box-shadow: 0 0 0 4px rgba(59,162,196,.14);
}

.search-ico{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tri-faint);
  pointer-events:none;
}

/* ---------------------------
   Content
--------------------------- */

.content{
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: var(--tri-gap); /* was 18px -> now matches horizontal grid gap exactly */
}

.footer{
  padding: 10px 18px 16px;
  color: var(--tri-faint);
}

/* Pages */
.page{
  display:none;
}
/* Dashboard rows spacing = exakt gleich wie horizontales Grid-Gap */
#dashboard{
  display:flex;
  flex-direction:column;
  gap: var(--tri-gap);
}

/* .page:target{ display:block; }
.page:first-of-type{ display:block; } /* fallback */

.page-head{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.page-head.row{
  flex-direction:row;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}

h1{
  font-size: 22px;
  margin:0;
  letter-spacing:.2px;
}

.muted{ color: var(--tri-muted); margin:0; }
.small{ font-size: 12px; }
.mono{ font-family: var(--tri-mono); letter-spacing:.2px; }

/* ---------------------------
   Grid + Cards
--------------------------- */

.grid{
  display:grid;
  gap: var(--tri-gap);
}

.grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Dashboard row 2: Letzte Änderungen (2/3) + Quick Actions (1/3) */
#dashboard .grid.grid-2{
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.card{
  border-radius: var(--tri-radius);
  border: 1px solid var(--tri-border);
  background: rgba(255,255,255,.85);
  box-shadow: var(--tri-shadow-soft);
  padding: 14px;
  min-width:0;
}

.card-title{
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing:.2px;
}

.card-actions{ margin-top: 12px; }
.card-foot{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--tri-border);
}

/* KPI */
.kpi{
  font-size: 38px;
  font-weight: 900;
  letter-spacing: .4px;
  color: #0f172a;
}

.status-row{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(15,23,42,.12);
}
.status-row:last-child{ border-bottom:none; }

.spacer{ flex:1; }

/* ---------------------------
   Pills + Status
--------------------------- */

/* DB Health pills vertical layout */
#dbHealth{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--tri-border);
  background: rgba(15,23,42,.02);
  font-size: 12px;
  color: var(--tri-muted);
}

.pill-ok{
  border-color: rgba(5,150,105,.35);
  background: rgba(5,150,105,.10);
  color: rgba(5, 90, 70, .92);
}

.pill-warn{
  border-color: rgba(217,119,6,.35);
  background: rgba(217,119,6,.10);
  color: rgba(140, 70, 0, .92);
}

.pill-bad{
  border-color: rgba(220,38,38,.35);
  background: rgba(220,38,38,.10);
  color: rgba(140, 0, 0, .92);
}

.pill-muted{ opacity:.75; }

.dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display:inline-block;
}

.dot-ok{
  background: var(--tri-ok);
  box-shadow: 0 0 0 4px rgba(5,150,105,.14);
}

.dot-warn{
  background: var(--tri-warn);
  box-shadow: 0 0 0 4px rgba(217,119,6,.14);
}

.dot-bad{
  background: var(--tri-bad);
  box-shadow: 0 0 0 4px rgba(220,38,38,.14);
}

/* ---------------------------
   Buttons
--------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--tri-border);
  background: rgba(255,255,255,.90);
  color: var(--tri-text);
  cursor:pointer;
  user-select:none;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
}

.btn:hover{
  background: rgba(15,23,42,.03);
  border-color: var(--tri-border-strong);
}

.btn:active{ transform: translateY(1px); }

.btn-primary{
  border-color: rgba(59,162,196,.55);
  background: linear-gradient(180deg, rgba(59,162,196,.18), rgba(59,162,196,.06));
}

.btn-primary:hover{
  border-color: rgba(59,162,196,.75);
}

.btn-secondary{
  border-color: rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
}

.btn-ghost{
  background: transparent;
}

.btn-danger{
  border-color: rgba(220,38,38,.35);
  background: rgba(220,38,38,.08);
}

.btn-sm{
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.btn-full{ width: 100%; }

/* ---------------------------
   Forms
--------------------------- */

.row{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}

.actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}

.filters{
  display:grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  gap: var(--tri-gap);
  align-items:end;
}

.field{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.field-inline{ justify-content:end; }

.label{
  font-size: 12px;
  color: var(--tri-muted);
}

.help{
  font-size: 12px;
  color: var(--tri-faint);
}

input, select, textarea{
  border-radius: 14px;
  border: 1px solid var(--tri-border);
  background: rgba(255,255,255,.95);
  padding: 10px 12px;
  outline:none;
}

textarea{ resize: vertical; }

input:focus, select:focus, textarea:focus{
  border-color: rgba(59,162,196,.55);
  box-shadow: 0 0 0 4px rgba(59,162,196,.14);
}

/* ---------------------------
   Tables
--------------------------- */

.table-wrap{
  overflow:auto;
  border-radius: 14px;
  border: 1px solid var(--tri-border);
  background: rgba(255,255,255,.90);
  box-shadow: var(--tri-shadow-soft);
}

.table{
  width:100%;
  border-collapse: collapse;
  min-width: 720px;
}

.table thead{
	 position:sticky;
	 top:0;
	 background:#fff;
	 z-index:2;
}

.table th, .table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  text-align:left;
}

.table th{
  font-size: 12px;
  letter-spacing:.2px;
  text-transform: uppercase;
  color: var(--tri-muted);
  background: rgba(248,250,252,.95);
  position: sticky;
  top: 0;
}

.table tr:hover td{
  background: rgba(15,23,42,.02);
}

.right{ text-align:right; }

.ellipsis{
  max-width: 520px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------
   Notes + Callouts
--------------------------- */

.note{
  border-radius: 14px;
  border: 1px solid var(--tri-border);
  background: rgba(15,23,42,.02);
  padding: 10px 12px;
  color: var(--tri-muted);
  margin-top: 10px;
}

.note.danger{
  border-color: rgba(220,38,38,.22);
  background: rgba(220,38,38,.06);
  color: rgba(120,0,0,.88);
}

.divider{
  height:1px;
  background: var(--tri-border);
  margin: 12px 0;
}

.stack{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.callout{
  border-radius: 14px;
  border: 1px solid rgba(59,162,196,.28);
  background: rgba(59,162,196,.08);
  padding: 10px 12px;
  color: rgba(15, 60, 80, .92);
}

/* ---------------------------
   Chips
--------------------------- */

.chips{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}

.chip{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--tri-border);
  background: rgba(15,23,42,.02);
  color: var(--tri-muted);
  cursor:pointer;
}

.chip-on{
  border-color: rgba(59,162,196,.35);
  background: rgba(59,162,196,.10);
  color: var(--tri-text);
}

/* ---------------------------
   Tabs
--------------------------- */

.tabs{
  display:flex;
  gap: 8px;
  padding: 8px;
  border-radius: var(--tri-radius);
  border: 1px solid var(--tri-border);
  background: rgba(248,250,252,.95);
  width: fit-content;
}

.tab{
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--tri-muted);
  border: 1px solid transparent;
}

.tab:hover{
  color: var(--tri-text);
  background: rgba(15,23,42,.02);
  border-color: rgba(15,23,42,.08);
}

/* ---------------------------
   Toggle
--------------------------- */

.toggle{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 0;
  user-select:none;
}

.toggle input{
  position:absolute;
  left:-9999px;
}

.toggle-ui{
  width: 44px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--tri-border);
  background: rgba(15,23,42,.03);
  position:relative;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.04);
}

.toggle-ui::after{
  content:"";
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(15,23,42,.45);
  position:absolute;
  top: 2px;
  left: 3px;
  transition: transform .18s ease, background .18s ease;
}

.toggle input:checked + .toggle-ui{
  border-color: rgba(59,162,196,.45);
  background: rgba(59,162,196,.12);
}

.toggle input:checked + .toggle-ui::after{
  transform: translateX(18px);
  background: rgba(15,60,80,.85);
}

/* ---------------------------
   Key/Value
--------------------------- */

.kv{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.kv-row{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(15,23,42,.10);
}

.kv-row:last-child{ border-bottom:none; }

.kv-k{
  color: var(--tri-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing:.2px;
}

.kv-v{
  color: var(--tri-text);
}

/* ---------------------------
   Responsive
--------------------------- */

@media (max-width: 980px){
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  #dashboard .grid.grid-2{ grid-template-columns: 1fr; } /* override on smaller screens */
  .filters{ grid-template-columns: 1fr; }
  .search{ display:none; }
}

@media (max-width: 860px){
  .burger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .sidebar{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-105%);
    transition: transform .18s ease;
    z-index: 60;
    width: min(320px, 88vw);
  }

  body.nav-open .sidebar{
    transform: translateX(0);
  }

  .main{
    margin-left: 0;
  }
}

/* ---------------------------
   Login Overlay (Admin SPA)
--------------------------- */

.login-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(6px);
  z-index: 999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

.login-wrap{
  width: min(520px, 92vw);
}

.login-card{
  box-shadow: var(--tri-shadow);
}

.login-overlay[hidden] {
  display: none !important;
}

body.locked{
  overflow:hidden;
}