:root {
  /* Taustat ja pinnat */
  --bg: #0d1016;
  --surface-0: #11141b;
  --surface-1: #0f1319;
  --surface-2: #161a21;
  --overlay: rgba(13,16,22,.7);

  /* Rajat ja jakajat */
  --line: #242a33;
  --line-soft: #1e232b;

  /* Teksti */
  --text: #e6eaf2;
  --text-muted: #9aa3b2;
  --text-subtle: #6b7280;

  /* Linkit & päävärit */
  --link: #8ab4f8;
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --primary-active: #1d4ed8;

  /* Tilavärit */
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;

  /* Otsikkogradientti */
  --grad-warm: linear-gradient(90deg, #f59e0b 0%, #f97316 40%, #ec4899 100%);

  /* Typografia */
  --font-sans: "Google Sans", Inter, Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --fs-xxl: clamp(28px, 4vw, 48px);
  --fs-xl: 24px; --fs-lg: 18px; --fs-md: 16px; --fs-sm: 14px; --fs-xs: 12px;
  --lh-tight: 1.2; --lh: 1.5;
  --fw-med: 500; --fw-semi: 600; --fw-bold: 700;

  /* Spacing (4px grid) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Kulmistot & varjot */
  --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 12px 24px rgba(0,0,0,.35);

  /* Liike */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;
}

/* Sivupohja */
.app { background: var(--bg); color: var(--text); font-family: var(--font-sans); }

/* Kortit ja peruspinnat */
.card,
.admin-section,
.admin-header {
  background: var(--surface-0) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  color: var(--text);
}

.admin-container { padding: var(--sp-8) !important; }

.card--hover:hover { box-shadow: var(--shadow-2); transition: box-shadow var(--dur) var(--ease); }

/* Header otsikko gradientti */
.admin-header h1, .h-hero {
  font-size: var(--fs-xxl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.h1 { font-size: 28px; line-height: var(--lh-tight); font-weight: var(--fw-semi); color: var(--text); }
.h2 { font-size: 22px; line-height: var(--lh-tight); font-weight: var(--fw-semi); color: var(--text); }
.body { font-size: var(--fs-md); line-height: var(--lh); color: var(--text); }
.muted { color: var(--text-muted); font-size: var(--fs-sm); }
.caption { color: var(--text-subtle); font-size: var(--fs-xs); letter-spacing: .01em; }

/* Linkit */
a, .a { color: var(--link); text-decoration: none; }
a:hover, .a:hover { text-decoration: underline; }

/* Lomakekentät */
.input,
input[type="text"],
input[type="password"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.input::placeholder, textarea::placeholder { color: var(--text-subtle); }
.input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--link) 65%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--link) 25%, transparent);
}

.label { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 6px; display:block; }
.help { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 6px; }
.error { color: var(--danger); font-size: var(--fs-sm); margin-top: 6px; }

/* Napit (sovitetaan olemassa oleviin .button-luokkiin) */
.button, .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:10px 16px; border-radius: var(--r-md);
  border:1px solid var(--line); background: var(--surface-2); color: var(--text);
  transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.button:hover, .btn:hover { background:#1a1f27; }
.button:active, .btn:active { transform: translateY(1px); }

.button.primary, .btn.btn--primary { background: var(--primary); color:#fff; border-color: transparent; }
.button.primary:hover, .btn.btn--primary:hover { background: var(--primary-hover); }
.button.secondary { background: transparent; }
.button.danger { background: #2a1111; border-color: #402022; color: #ffb4b4; }

.button.small, .button-small { min-height: 32px; padding: 6px 10px; font-size: 12px; }

/* Tabit */
.admin-tabs { display:flex; gap:8px; margin-bottom: var(--sp-6); }
.tab-button {
  padding:8px 12px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--text-muted);
}
.tab-button.active { color: var(--text); border-color: #334155; background: var(--surface-2); }

/* Taulukot */
.data-table { width:100%; border-collapse: collapse; margin: var(--sp-6) 0; }
.data-table th, .data-table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--line); color: var(--text); }
.data-table th { background: var(--surface-1) !important; font-weight: 600; }
.data-table tr:hover { background: #141924; }

/* Indikaattorit */
.status-indicator { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; }
.status-active { background: var(--success) !important; }
.status-inactive { background: var(--danger) !important; }

/* Koodilohkot */
.code-block { position:relative; background: #0b0f14 !important; color: var(--text); padding: 15px; border-radius: 8px; overflow-x:auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; line-height: 1.6; border:1px solid var(--line) !important; }
.copy-button { position:absolute; top:10px; right:10px; padding:6px 12px; font-size:12px; background: var(--primary); color:#fff; border:none; border-radius:8px; cursor:pointer; transition: background var(--dur) var(--ease); }
.copy-button:hover { background: var(--primary-hover); }
.copy-button.copied { background: #16a34a; }

/* Jakajat */
.section-divider, .divider { height:1px; background: var(--line-soft) !important; border: none !important; margin: var(--sp-10) 0; }

/* Info-boksit (yliajot yleisimmille inline taustoille) */
.admin-section div[style*="background: #f8f9fa"],
.admin-section div[style*="background:#f8f9fa"],
.admin-section div[style*="background: white"],
.admin-section div[style*="background:white"],
.admin-section div[style*="background: #e8f5e8"],
.admin-section div[style*="background:#e8f5e8"],
.admin-section div[style*="background: #e3f2fd"],
.admin-section div[style*="background:#e3f2fd"],
.admin-section div[style*="background: #fff3cd"],
.admin-section div[style*="background:#fff3cd"],
.admin-section table[style*="background: #f8f9fa"],
.admin-section table[style*="background:#f8f9fa"] {
  background: var(--surface-0) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

/* Korttien sisäiset otsikot */
.admin-section h2, .admin-section h3, .admin-section h4 { color: var(--text); }
.admin-section p, .admin-section li, .admin-section small { color: var(--text-muted); }

/* Modal-ikkunan kontrastit */
.modal-content {
  color: var(--text) !important;
}
.modal-content h3 {
  color: var(--text) !important;
}
.modal-content label {
  color: var(--text-muted) !important;
}
.modal-content input,
.modal-content select,
.modal-content textarea {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.modal-content input::placeholder,
.modal-content textarea::placeholder {
  color: var(--text-subtle) !important;
}

/* Info-boksit parannetut kontrastit */
.info-box {
  background: var(--surface-0) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
.info-box strong {
  color: var(--text) !important;
}
.info-box p,
.info-box li {
  color: var(--text-muted) !important;
}

/* Turvallisuus- ja analytiikka-sivujen parannukset */
#securityStats .card,
#analyticsSummary .card {
  background: var(--surface-0) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}

.country-section {
  background: var(--surface-0) !important;
  border: 1px solid var(--line) !important;
}

.country-section.suspicious-country {
  border-color: var(--warning) !important;
  background: color-mix(in oklab, var(--warning) 10%, var(--surface-0)) !important;
}

/* Päivitä kaavioiden värit */
#dailyActivityChart,
#countriesChart {
  color: var(--text) !important;
}

/* Varmista että kaikki taulukot näkyvät oikein */
.data-table th {
  background: var(--surface-1) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--line) !important;
}

.data-table td {
  color: var(--text) !important;
  border-bottom: 1px solid var(--line) !important;
}

.data-table tr:hover {
  background: var(--surface-1) !important;
}

/* Navigaatiorivi */
.nav-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 12px 14px; border-radius: var(--r-md); background: transparent; border: 1px solid transparent; color: var(--text); }
.nav-row:hover { background: var(--surface-2); border-color: var(--line); }
.nav-row .meta { color: var(--text-muted); font-size: var(--fs-sm); }

/* Saavutettavuus */
:focus-visible { outline: 2px solid color-mix(in oklab, var(--link) 65%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media (max-width: 1024px) {
  .admin-container {
    padding: var(--sp-6) !important;
  }
}

@media (max-width: 768px) {
  .admin-container {
    padding: var(--sp-4) !important;
  }

  #adminApp .card {
    margin: var(--sp-6) auto !important;
    width: 100%;
    max-width: 460px;
  }

  .admin-tabs {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
  }

  .tab-button {
    flex: 1 1 160px;
    text-align: center;
  }

  #adminApp .admin-header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    align-items: flex-start;
  }

  #adminApp .admin-header button {
    align-self: stretch;
  }

  #analyticsSummary {
    grid-template-columns: 1fr !important;
  }

  #adminApp [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 600px) {
  .admin-container {
    padding: var(--sp-3) !important;
  }

  #adminApp .card {
    padding: var(--sp-6) var(--sp-4) !important;
  }

  .admin-tabs {
    overflow-x: auto;
    padding-bottom: var(--sp-2);
    gap: var(--sp-2);
  }

  .admin-tabs::-webkit-scrollbar {
    display: none;
  }

  .tab-button {
    flex: 0 0 auto;
  }

  #adminApp [style*="display: flex"][style*="gap: 10px"],
  #adminApp [style*="display:flex"][style*="gap:10px"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #adminApp [style*="display: grid"][style*="minmax(200px, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  #adminApp [style*="padding: 20px"],
  #adminApp [style*="padding: 15px"] {
    padding: var(--sp-4) !important;
  }

  #adminApp .button {
    width: 100%;
    justify-content: center;
  }

  #adminApp .button.small {
    width: auto;
  }
}

@media (max-width: 480px) {
  #adminApp .admin-header {
    align-items: stretch;
    text-align: center;
  }

  #adminApp .admin-header button {
    width: 100%;
  }

  .tab-button {
    font-size: var(--fs-sm);
    padding: 8px var(--sp-3);
  }
}