/* Baudos Taškai – UI v1 (shared) */
:root{
  --bg: #f6f8fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --shadow: 0 10px 30px rgba(15,23,42,.08);
  --shadow-sm: 0 4px 14px rgba(15,23,42,.08);
  --radius: 16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 420px at 95% 0%, rgba(168,85,247,.18), transparent 55%),
    linear-gradient(180deg, #f8fafc, var(--bg));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* “App shell” */
.app-header{
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
  background: rgba(246,248,251,.75);
  border-bottom: 1px solid rgba(226,232,240,.75);
}
.app-header .wrap{
  max-width: 72rem;
  margin: 0 auto;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
}
.brand .logo{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: var(--shadow-sm);
}
.brand h1{
  font-size: 18px;
  margin:0;
  letter-spacing: .2px;
}
.brand p{ margin:0; color: var(--muted); font-size: 12px; }

.page{
  max-width: 72rem;
  margin: 0 auto;
  padding: 16px;
}

.card{
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card .card-h{
  padding: 16px 16px 10px 16px;
  border-bottom: 1px solid var(--border);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.card .card-h h2{ margin:0; font-size: 16px; }
.card .card-h p{ margin: 4px 0 0 0; color: var(--muted); font-size: 13px; }

.card .card-b{ padding: 14px 16px 16px 16px; }

/* Controls */
.btn{
  appearance:none;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(15,23,42,.03);
  transition: transform .06s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{ box-shadow: var(--shadow-sm); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }

.btn-primary{ background: linear-gradient(135deg, #2563eb, #1d4ed8); color:#fff; border-color: rgba(37,99,235,.4); }
.btn-danger{ background: linear-gradient(135deg, #ef4444, #dc2626); color:#fff; border-color: rgba(239,68,68,.35); }
.btn-soft{ background: #f1f5f9; }

.input, select{
  width: 100%;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus, select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}

/* Tables */
.table-wrap{ overflow:auto; border-radius: 14px; border:1px solid var(--border); }
table{ width:100%; border-collapse: collapse; }
thead th{
  position: sticky;
  top: 0;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #475569;
  padding: 12px 12px;
}
tbody td{
  border-bottom: 1px solid rgba(226,232,240,.7);
  padding: 12px 12px;
  vertical-align: middle;
}
tbody tr:hover td{ background: rgba(37,99,235,.03); }

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
}
.badge-ok{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); color: #166534; }
.badge-warning{ background: rgba(234,179,8,.14); border-color: rgba(234,179,8,.3); color: #854d0e; }
.badge-critical{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.28); color: #7f1d1d; }

/* Modal polish (your existing structure) */
#offenseModal > div{
  border-radius: 22px !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid rgba(226,232,240,.9) !important;
}
#offenseList > div{ transition: background .12s ease, border-color .12s ease; }
#offenseList > div:hover{ background: rgba(37,99,235,.04); }

/* Small text */
.help{ color: var(--muted); font-size: 12px; }


/* --- Dark mode + motion (v2) --- */
.dark{
  --bg: #0b1220;
  --card: rgba(17,24,39,.62);
  --text:#e5e7eb;
  --muted:#94a3b8;
  --border: rgba(148,163,184,.18);
  --shadow: 0 18px 50px rgba(0,0,0,.40);
  --shadow-sm: 0 10px 28px rgba(0,0,0,.34);
}
body.app-body{
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 420px at 95% 0%, rgba(168,85,247,.18), transparent 55%),
    linear-gradient(180deg, #f8fafc, var(--bg));
}
.dark body.app-body{
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(96,165,250,.18), transparent 60%),
    radial-gradient(900px 420px at 95% 0%, rgba(167,139,250,.14), transparent 55%),
    linear-gradient(180deg, #0b1220, var(--bg));
}

.app-header{
  background: rgba(246,248,251,.75);
  border-bottom: 1px solid rgba(226,232,240,.75);
}
.dark .app-header{
  background: rgba(2,6,23,.55);
  border-bottom: 1px solid rgba(148,163,184,.18);
}
.btn-ghost{
  background: transparent;
}

/* Badges (use across pages) */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border: 1px solid var(--border);
  font-weight:700;
  font-size: 12px;
  line-height: 1;
}
.badge-ok{ background: rgba(16,185,129,.14); }
.badge-warning{ background: rgba(245,158,11,.14); }
.badge-critical{ background: rgba(239,68,68,.14); }

/* Motion */
@media (prefers-reduced-motion: no-preference){
  .fade-in{ animation: fadeInUp .35s ease both; }
  @keyframes fadeInUp{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform: translateY(0); }
  }
  .btn{ transition: transform .10s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease; }
  .btn:hover{ transform: translateY(-1px); }
  .btn:active{ transform: translateY(0px); }
}

/* Inputs on dark */
.dark .input, .dark select, .dark input, .dark textarea{
  background: rgba(15,23,42,.55);
  color: var(--text);
}
.dark thead th{ background: rgba(2,6,23,.25); color: var(--muted); }


/* Inputs – FIX grey blocks */
input, select, textarea{
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.55) !important;
  color: rgba(226,232,240,1) !important;
  padding: 12px 12px;
}

input::placeholder, textarea::placeholder{
  color: rgba(148,163,184,.85);
}

input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: rgba(96,165,250,.65);
  box-shadow: 0 0 0 4px rgba(96,165,250,.18);
}

/* Buttons */
button, .btn{
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.55);
  color: rgba(226,232,240,1);
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}

button:hover, .btn:hover{ filter: brightness(1.06); }
button:active, .btn:active{ transform: translateY(1px); }

.btn-primary{
  background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
  border-color: transparent !important;
  color: white !important;
}

/* Small icon button (theme toggle) */
#themeToggle{
  width: 42px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Make top-right secondary buttons not look disabled */
a.btn, a.button, a[role="button"]{
  text-decoration: none;
}


/* Header spacing fix */
.app-header,
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

/* Jei turi vidinį wrapper */
.app-header .wrap,
header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Atitraukiam dešinę pusę */
.header-actions,
.app-header .flex,
header .flex {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px; /* svarbiausia vieta */
}

/* Atsijungti mygtuko padding */
#signOutBtn,
button[id*="signOut"] {
  padding: 8px 14px;
  margin-left: 8px;
}

/* ===== THEME SYSTEM (Light + Dark) ===== */
:root{
  --bg: #f6f7fb;
  --bg2: radial-gradient(900px 600px at 25% 0%, rgba(37,99,235,.10), transparent 60%),
         radial-gradient(700px 520px at 85% 15%, rgba(99,102,241,.08), transparent 60%);
  --surface: rgba(255,255,255,.92);
  --surface2: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(15,23,42,.10);
  --shadow: 0 14px 40px rgba(2,6,23,.08);

  --input-bg: #ffffff;
  --input-text: #0f172a;
  --input-placeholder: rgba(100,116,139,.85);

  --thead-bg: rgba(15,23,42,.04);
  --row-hover: rgba(37,99,235,.06);

  --btn-bg: rgba(255,255,255,.9);
  --btn-text: #0f172a;

  --primary: #2563eb;
  --primary2: #1d4ed8;
}

.dark{
  --bg: #070b14;
  --bg2: radial-gradient(900px 600px at 25% 0%, rgba(59,130,246,.18), transparent 60%),
         radial-gradient(700px 520px at 85% 15%, rgba(99,102,241,.14), transparent 60%);
  --surface: rgba(15,23,42,.72);
  --surface2: rgba(2,6,23,.50);
  --text: #e5e7eb;
  --muted: rgba(226,232,240,.75);
  --border: rgba(148,163,184,.18);
  --shadow: 0 18px 55px rgba(0,0,0,.45);

  --input-bg: rgba(2,6,23,.55);
  --input-text: #e5e7eb;
  --input-placeholder: rgba(148,163,184,.85);

  --thead-bg: rgba(2,6,23,.55);
  --row-hover: rgba(96,165,250,.10);

  --btn-bg: rgba(15,23,42,.55);
  --btn-text: #e5e7eb;

  --primary: #3b82f6;
  --primary2: #2563eb;
}

/* Page background */
body{
  background: var(--bg2), var(--bg);
  color: var(--text);
}

/* Header */
header, .app-header{
  background: rgba(255,255,255,.65);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.dark header, .dark .app-header{
  background: rgba(2,6,23,.35);
}

/* Cards / sections */
.card, .panel, .box, .wrap-card{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 18px;
  color: var(--text);
}

/* Text */
p, small, .muted, .text-muted{
  color: var(--muted);
}

/* Inputs */
input, select, textarea{
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
}
input::placeholder, textarea::placeholder{
  color: var(--input-placeholder) !important;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: rgba(96,165,250,.70) !important;
  box-shadow: 0 0 0 4px rgba(96,165,250,.18) !important;
}

/* Buttons */
button, .btn{
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.btn-primary{
  background: linear-gradient(180deg, var(--primary), var(--primary2)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Tables */
table{
  color: var(--text);
}
thead tr, thead th{
  background: var(--thead-bg) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}
tbody tr:hover{
  background: var(--row-hover) !important;
}

/* ===== Smooth Motion Pack ===== */
@media (prefers-reduced-motion: no-preference){

  /* Page enter */
  .enter{
    animation: enter .45s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes enter{
    from{ opacity:0; transform: translateY(12px); }
    to{ opacity:1; transform: translateY(0); }
  }

  /* Stagger children */
  .stagger > *{
    animation: enter .45s cubic-bezier(.2,.8,.2,1) both;
  }
  .stagger > *:nth-child(1){ animation-delay: .02s; }
  .stagger > *:nth-child(2){ animation-delay: .06s; }
  .stagger > *:nth-child(3){ animation-delay: .10s; }
  .stagger > *:nth-child(4){ animation-delay: .14s; }
  .stagger > *:nth-child(5){ animation-delay: .18s; }

  /* Card hover */
  .card, .panel, .box, .wrap-card{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    will-change: transform;
  }
  .card:hover, .panel:hover, .box:hover, .wrap-card:hover{
    transform: translateY(-2px);
  }

  /* Button hover */
  button, .btn{
    transition: transform .14s ease, filter .14s ease;
    will-change: transform;
  }
  button:hover, .btn:hover{ transform: translateY(-1px); }
  button:active, .btn:active{ transform: translateY(0); }

  /* Subtle press on inputs */
  input, select, textarea{
    transition: box-shadow .14s ease, border-color .14s ease, transform .14s ease;
  }
}

/* ===== Toast ===== */
.toast-wrap{
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast{
  pointer-events: auto;
  min-width: 260px;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.toast .t-title{ font-weight: 700; margin: 0; }
.toast .t-msg{ margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.toast .t-icon{ line-height: 1; margin-top: 2px; }

.toast.ok{ border-color: rgba(16,185,129,.35); }
.toast.warn{ border-color: rgba(245,158,11,.35); }
.toast.err{ border-color: rgba(239,68,68,.35); }

@media (prefers-reduced-motion: no-preference){
  .toast{
    animation: toastIn .22s ease both;
  }
  @keyframes toastIn{
    from{ opacity:0; transform: translateY(-8px); }
    to{ opacity:1; transform: translateY(0); }
  }
}


/* ===== Utility class mapping for Tailwind-ish markup (keeps light+dark consistent) ===== */
.bg-white{ background: var(--card) !important; }
.text-gray-900, .text-slate-900{ color: var(--text) !important; }
.text-gray-600, .text-slate-600, .text-gray-500, .text-slate-500{ color: var(--muted) !important; }
.border, .border-gray-200, .border-slate-200{ border-color: var(--border) !important; }
.bg-gray-50, .bg-slate-50{ background: color-mix(in srgb, var(--card) 92%, var(--bg) 8%) !important; }
.bg-gray-100, .bg-slate-100{ background: color-mix(in srgb, var(--card) 85%, var(--bg) 15%) !important; }
.bg-gray-200, .bg-slate-200{ background: color-mix(in srgb, var(--card) 75%, var(--bg) 25%) !important; }

.dark .bg-white{ background: var(--card) !important; }
.dark .bg-gray-50, .dark .bg-slate-50,
.dark .bg-gray-100, .dark .bg-slate-100,
.dark .bg-gray-200, .dark .bg-slate-200{
  background: rgba(2,6,23,.40) !important;
}

/* Table header for dark */
.dark thead th{ background: rgba(2,6,23,.45) !important; color: rgba(226,232,240,.85) !important; }

/* ===== Smooth Motion Pack (safe) ===== */
@media (prefers-reduced-motion: no-preference){
  .enter{ animation: enter .45s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes enter{ from{ opacity:0; transform: translateY(12px);} to{opacity:1; transform: translateY(0);} }

  .card, .panel, .box, .wrap-card{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; will-change: transform; }
  .card:hover, .panel:hover, .box:hover, .wrap-card:hover{ transform: translateY(-2px); }

  button, .btn{ transition: transform .14s ease, filter .14s ease, background .14s ease; }
  button:hover, .btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
  button:active, .btn:active{ transform: translateY(0); }
}

/* ===== Toast ===== */
.toast-wrap{ position: fixed; right: 16px; top: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events:none; }
.toast{ pointer-events:auto; min-width: 260px; max-width: 360px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm); display:flex; align-items:flex-start; gap:10px; }
.toast .t-title{ font-weight:700; margin:0; }
.toast .t-msg{ margin:2px 0 0; color: var(--muted); font-size:13px; }
.toast .t-icon{ line-height:1; margin-top:2px; }
.toast.ok{ border-color: rgba(16,185,129,.35); }
.toast.warn{ border-color: rgba(245,158,11,.35); }
.toast.err{ border-color: rgba(239,68,68,.35); }
@media (prefers-reduced-motion: no-preference){
  .toast{ animation: toastIn .22s ease both; }
  @keyframes toastIn{ from{ opacity:0; transform: translateY(-8px);} to{opacity:1; transform: translateY(0);} }
}

/* ===== Mobile polish ===== */
@media (max-width: 768px){
  .wrap{ padding-left: 14px !important; padding-right: 14px !important; }
  table{ display:block; overflow-x:auto; white-space:nowrap; }
  .card{ border-radius: 16px; }
}

/* ===========================
   THEME FINAL FIX (Light/Dark)
   =========================== */

/* 1) Theme tokens */
:root{
  --bg: #f6f7fb;
  --bgGrad:
    radial-gradient(900px 600px at 25% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(700px 520px at 85% 15%, rgba(99,102,241,.08), transparent 60%);
  --surface: rgba(255,255,255,.94);
  --surfaceSolid: #ffffff;
  --text: #0f172a;
  --muted: rgba(15,23,42,.62);
  --border: rgba(15,23,42,.10);
  --shadow: 0 14px 40px rgba(2,6,23,.08);

  --inputBg: #ffffff;
  --inputText: #0f172a;
  --inputPlaceholder: rgba(100,116,139,.85);

  --theadBg: rgba(15,23,42,.04);
  --rowHover: rgba(37,99,235,.06);

  --btnBg: rgba(255,255,255,.92);
  --btnText: #0f172a;

  --primary: #2563eb;
  --primary2: #1d4ed8;
}

.dark{
  --bg: #070b14;
  --bgGrad:
    radial-gradient(900px 600px at 25% 0%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(700px 520px at 85% 15%, rgba(99,102,241,.14), transparent 60%);
  --surface: rgba(15,23,42,.72);
  --surfaceSolid: rgba(2,6,23,.55);
  --text: #e5e7eb;
  --muted: rgba(226,232,240,.72);
  --border: rgba(148,163,184,.18);
  --shadow: 0 18px 55px rgba(0,0,0,.45);

  --inputBg: rgba(2,6,23,.55);
  --inputText: #e5e7eb;
  --inputPlaceholder: rgba(148,163,184,.85);

  --theadBg: rgba(2,6,23,.55);
  --rowHover: rgba(96,165,250,.10);

  --btnBg: rgba(15,23,42,.55);
  --btnText: #e5e7eb;

  --primary: #3b82f6;
  --primary2: #2563eb;
}

/* 2) Global base */
body{
  background: var(--bgGrad), var(--bg);
  color: var(--text);
}

/* 3) Header unified */
header, .app-header{
  background: rgba(255,255,255,.65);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.dark header, .dark .app-header{
  background: rgba(2,6,23,.35);
}

/* 4) Cards/sections unified (fix: white cards in dark mode) */
.card, .panel, .box, .wrap-card,
section, .section, .container-card,
.bg-white, [class*="bg-white"]{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 18px;
}

/* 5) Text helpers */
p, small, .muted, .text-muted, .text-gray-500, .text-slate-500{
  color: var(--muted) !important;
}

/* 6) Inputs/selects unified */
input, select, textarea{
  background: var(--inputBg) !important;
  color: var(--inputText) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
}
input::placeholder, textarea::placeholder{
  color: var(--inputPlaceholder) !important;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: rgba(96,165,250,.70) !important;
  box-shadow: 0 0 0 4px rgba(96,165,250,.18) !important;
}

/* 7) Buttons unified */
button, .btn{
  background: var(--btnBg) !important;
  color: var(--btnText) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
}
.btn-primary{
  background: linear-gradient(180deg, var(--primary), var(--primary2)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* 8) Tables unified */
table{ color: var(--text) !important; }
thead tr, thead th{
  background: var(--theadBg) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}
tbody tr:hover{
  background: var(--rowHover) !important;
}

/* 9) Keep badges readable */
.badge-ok{ background: rgba(16,185,129,.14) !important; border: 1px solid rgba(16,185,129,.30) !important; }
.dark .badge-ok{ background: rgba(16,185,129,.18) !important; border-color: rgba(16,185,129,.35) !important; color: rgba(167,243,208,1) !important; }