/* ==========================================================================
   Pinordo — Midnight-teema (vaihtoehtoinen tumma UI)
   Ladataan brand.css:n JÄLKEEN kun organisaation asetus ui_theme=midnight.
   Syvä yönsininen tausta, lasiset tummat pinnat, pyöristetyt pillerimuodot
   ja kirkkaat pastelliaksentit (minttu / keltainen / violetti).
   ========================================================================== */

body[data-theme="midnight"] {
  /* Tekstihierarkia vaalealle tekstille */
  --ink: #eef0f7;
  --ink-soft: #c9cdda;
  --muted: #8f94a6;
  --brand-black: #f3f4f9;      /* otsikot ja hover-tekstit vaaleiksi */
  --brand-graphite: #aab0c0;
  --brand-silver: #6a7080;

  /* Kirkkaammat aksentit tummalla pohjalla */
  --brand-red: #ff5a49;
  --brand-red-deep: #e0402f;
  --accent: #7c9bff;
  --accent-2: #4de3c1;

  /* Tummat lasipinnat */
  --glass: rgba(24, 27, 42, 0.66);
  --glass-strong: rgba(44, 48, 70, 0.85);
  --glass-thin: rgba(20, 23, 36, 0.45);
  --glass-border: rgba(255, 255, 255, 0.09);
  --hairline: rgba(255, 255, 255, 0.10);
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.55);

  color: var(--ink);
  /* Kuutamomaisema kuultaa tumman kalvon alta (valikoissa enemmän) */
  background:
    linear-gradient(180deg, rgba(10, 12, 22, 0.72) 0%, rgba(7, 8, 15, 0.82) 100%),
    url("../img/midnight-bg.jpg?v=2") center / cover no-repeat #07080f;
  background-attachment: fixed;
}
body[data-theme="midnight"]::before { opacity: 0.35; filter: invert(1); }

/* ----- Kuori: sivupalkki ja yläpalkki (läpikuultavampia — maisema näkyy) -- */
body[data-theme="midnight"] .sidebar {
  background: linear-gradient(180deg, rgba(18, 21, 34, 0.55), rgba(12, 14, 24, 0.42));
  border-right-color: var(--glass-border);
}
body[data-theme="midnight"] .topbar {
  background: rgba(12, 14, 24, 0.40);
  border-bottom-color: var(--glass-border);
}
body[data-theme="midnight"] .topbar-search input[type="search"] {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--hairline);
}
body[data-theme="midnight"] .user-dd > summary:hover,
body[data-theme="midnight"] .user-dd[open] > summary {
  background: rgba(255, 255, 255, 0.10);
}
body[data-theme="midnight"] .brand-copy small { color: var(--muted); }

/* ----- Kortit ja sisältöpinnat ------------------------------------------ */
body[data-theme="midnight"] .card::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

/* Taulukot */
body[data-theme="midnight"] table { background: rgba(255, 255, 255, 0.03); }
body[data-theme="midnight"] th { background: rgba(255, 255, 255, 0.06); }
body[data-theme="midnight"] td { background: rgba(255, 255, 255, 0.025); }
body[data-theme="midnight"] tr:nth-child(even) td { background: rgba(255, 255, 255, 0.05); }
body[data-theme="midnight"] tbody tr:hover td,
body[data-theme="midnight"] tr:hover td { background: rgba(124, 155, 255, 0.10); }
body[data-theme="midnight"] code { background: rgba(255, 255, 255, 0.08); }

/* Lomakkeet */
body[data-theme="midnight"] input,
body[data-theme="midnight"] textarea,
body[data-theme="midnight"] select {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}
body[data-theme="midnight"] input:focus,
body[data-theme="midnight"] textarea:focus,
body[data-theme="midnight"] select:focus {
  background: rgba(255, 255, 255, 0.09);
}
body[data-theme="midnight"] select option { background: #141726; color: var(--ink); }
body[data-theme="midnight"] ::placeholder { color: var(--brand-silver); }

/* Flash-ilmoitukset */
body[data-theme="midnight"] .flash { background: rgba(255, 255, 255, 0.06); }
body[data-theme="midnight"] .flash.error { color: #ffb3a9; }
body[data-theme="midnight"] .flash.success { color: #8ff0b0; }
body[data-theme="midnight"] .flash.info { color: var(--ink); }

/* ----- Pillerit: kirkkaat pastellit (vrt. referenssin Paid/Credits) ------ */
body[data-theme="midnight"] .pill {
  border-radius: 999px;
  font-weight: 700;
}
body[data-theme="midnight"] .pill.queued {
  color: #0d1330; background: #aebfff; border-color: transparent;
}
body[data-theme="midnight"] .pill.in_progress,
body[data-theme="midnight"] .pill.sent,
body[data-theme="midnight"] .pill.in_review {
  color: #2f2604; background: #f6e96b; border-color: transparent;
}
body[data-theme="midnight"] .pill.done,
body[data-theme="midnight"] .pill.paid,
body[data-theme="midnight"] .pill.approved,
body[data-theme="midnight"] .pill.accepted {
  color: #06301a; background: #7ce7a2; border-color: transparent;
}
body[data-theme="midnight"] .pill.cancelled,
body[data-theme="midnight"] .pill.rejected {
  color: #33081a; background: #f2a3c0; border-color: transparent;
}
body[data-theme="midnight"] .pill.draft,
body[data-theme="midnight"] .pill.received {
  color: #1c1440; background: #cdb4ff; border-color: transparent;
}
body[data-theme="midnight"] .pill.overdue {
  color: #3a0d05; background: #ffb08c; border-color: transparent;
}

/* ----- Toiminnot-valikko -------------------------------------------------- */
body[data-theme="midnight"] .actions-menu > summary.actions-btn {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--hairline);
  color: var(--ink);
}
body[data-theme="midnight"] .actions-menu > summary.actions-btn:hover,
body[data-theme="midnight"] .actions-menu[open] > summary.actions-btn {
  background: rgba(255, 255, 255, 0.12);
}
body[data-theme="midnight"] .act-panel {
  background: rgba(24, 27, 42, 0.78);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border-color: var(--glass-border);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}
body[data-theme="midnight"] .act-item,
body[data-theme="midnight"] button.act-item { color: var(--ink-soft) !important; }
body[data-theme="midnight"] .act-item svg { color: var(--muted); }
body[data-theme="midnight"] .act-item:hover,
body[data-theme="midnight"] button.act-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--ink) !important;
}
body[data-theme="midnight"] .act-item:hover svg { color: var(--ink-soft); }
body[data-theme="midnight"] .act-item.act-danger,
body[data-theme="midnight"] button.act-item.act-danger { color: #ff8a7d !important; }
body[data-theme="midnight"] .act-item.act-danger svg { color: #ff8a7d; }
body[data-theme="midnight"] .act-sep { background: var(--hairline); }
body[data-theme="midnight"] .act-langs > a {
  border-color: var(--hairline);
  color: var(--ink-soft);
}
body[data-theme="midnight"] .act-langs > a:hover { background: rgba(255, 255, 255, 0.08); }
body[data-theme="midnight"] .act-langs > a.active {
  color: #fff;
  border-color: transparent;
}
body[data-theme="midnight"] .act-item.act-danger:hover,
body[data-theme="midnight"] button.act-item.act-danger:hover {
  background: rgba(255, 90, 73, 0.14);
  color: #ff8a7d;
}
body[data-theme="midnight"] .btn.btn-quiet,
body[data-theme="midnight"] .btn.btn-quiet:hover {
  border-color: var(--hairline);
}

/* ----- Datagrid ----------------------------------------------------------- */
body[data-theme="midnight"] .dg-search,
body[data-theme="midnight"] .dg-filter-input {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}
body[data-theme="midnight"] .dg-search:focus,
body[data-theme="midnight"] .dg-filter-input:focus {
  background: rgba(255, 255, 255, 0.10);
}
body[data-theme="midnight"] tr.dg-filter-row th.dg-filter-cell,
body[data-theme="midnight"] tr.dg-filter-row th.dg-filter-cell:empty {
  background: rgba(255, 255, 255, 0.05);
}

/* ----- Modaalit ------------------------------------------------------------ */
body[data-theme="midnight"] .modal-dialog {
  background: rgba(24, 27, 42, 0.97);
  border-color: var(--glass-border);
}
body[data-theme="midnight"] .modal-close { background: rgba(255, 255, 255, 0.07); }

/* ----- Muut pienet pinnat --------------------------------------------------- */
body[data-theme="midnight"] .side-settings-menu {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body[data-theme="midnight"] .side-settings-langs > a,
body[data-theme="midnight"] .pi-tab,
body[data-theme="midnight"] .worktime-entry,
body[data-theme="midnight"] .worktime-day-card.worktime-day-weekend {
  background: rgba(255, 255, 255, 0.06);
}
body[data-theme="midnight"] .empty-state { background: rgba(255, 255, 255, 0.04); }

/* ----- Uloskirjautumisanimaatio: UI haihtuu, maisema kirkastuu ja
   zoomautuu kohti kuuta (transform-origin ~ kuun sijainti kuvassa) ------- */
/* html:n tausta ei saa vilkkua vaaleana tumman teeman alla */
html:has(body[data-theme="midnight"]) { background: #07080f; }

body[data-theme="midnight"] .logout-fx {
  position: fixed;
  inset: 0;
  z-index: 0; /* bodyn taustan päälle, sovelluksen (z-index 1) alle */
}
body[data-theme="midnight"] .logout-fx-img {
  position: absolute;
  inset: 0;
  background: url("../img/midnight-bg.jpg?v=2") center / cover no-repeat;
  transform-origin: 76% 22%;   /* kuu */
  will-change: transform;
  animation: midnight-zoom 2.4s cubic-bezier(0.45, 0.05, 0.35, 1) forwards;
}
body[data-theme="midnight"] .logout-fx-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 22, 0.72) 0%, rgba(7, 8, 15, 0.82) 100%);
  animation: midnight-clear 1.6s ease-out forwards;
}
@keyframes midnight-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.55); }
}
@keyframes midnight-clear {
  to { opacity: 0; }
}

/* Sisäänkirjautumisen tuloanimaatio: lähtö zoomatusta kirkkaasta
   asetelmasta, zoom kauas ja UI ilmestyy alta */
body[data-theme="midnight"] .entry-fx {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
body[data-theme="midnight"] .entry-fx-img {
  position: absolute;
  inset: 0;
  background: url("../img/midnight-bg.jpg?v=2") center / cover no-repeat;
  transform-origin: 76% 22%;
  transform: scale(1.55);
  will-change: transform;
  animation: midnight-zoom-out 2.2s cubic-bezier(0.45, 0.05, 0.35, 1) forwards;
}
body[data-theme="midnight"] .entry-fx-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 22, 0.72) 0%, rgba(7, 8, 15, 0.82) 100%);
  opacity: 0;
  animation: midnight-darken 2.2s ease-in forwards;
}
.entry-fx.done {
  opacity: 0;
  transition: opacity 0.8s ease;
}
@keyframes midnight-zoom-out {
  from { transform: scale(1.55); }
  to { transform: scale(1); }
}
@keyframes midnight-darken {
  to { opacity: 1; }
}
body[data-theme="midnight"].logging-out .app-shell {
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
body[data-theme="midnight"].logging-out::before {
  opacity: 0;
  transition: opacity 1.1s ease;
}

/* ----- Kirjautumissivu (ei sivupalkkia): kuu valmiiksi zoomattuna --------- */
body[data-theme="midnight"]:not(:has(.sidebar)) {
  background: #07080f;
}
body[data-theme="midnight"] .login-bg {
  position: fixed;
  inset: 0;
  z-index: 0; /* bodyn taustan päälle, sisällön (z-index 1) alle */
  overflow: hidden;
}
body[data-theme="midnight"] .login-bg-img {
  position: absolute;
  inset: 0;
  background: url("../img/midnight-bg.jpg?v=2") center / cover no-repeat;
  transform-origin: 76% 22%;   /* kuu */
  transform: scale(1.55);      /* sama kuin animaatioiden ääriasento */
}
body[data-theme="midnight"] .login-bg-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 22, 0.22) 0%, rgba(7, 8, 15, 0.45) 100%);
}
body[data-theme="midnight"]:not(:has(.sidebar)) .card {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(16, 19, 32, 0.72);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
body[data-theme="midnight"]:not(:has(.sidebar)) .flash {
  background: rgba(16, 19, 32, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ----- Annika-widget Midnight-teemassa ----------------------------------- */
body[data-theme="midnight"] .annika-panel {
  background: rgba(24, 27, 42, 0.96);
  border-color: var(--glass-border);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
}
body[data-theme="midnight"] .annika-head { border-bottom-color: var(--hairline); }
body[data-theme="midnight"] .annika-input { border-top-color: var(--hairline); }
body[data-theme="midnight"] .annika-msg-assistant {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}
body[data-theme="midnight"] .annika-face-stack { border-color: rgba(255, 255, 255, 0.25); }
body[data-theme="midnight"] .annika-presence { border-color: #181b2a; }