/* DASE · Hallintakeskus — hallintanäkymän teema, sama ilme kuin kirjautumisnäkymässä (login.css) */

:root {
  --dx-display: 'Syncopate', 'Arial Black', ui-sans-serif, system-ui, sans-serif;
  --dx-ice: #cfeeff;
  --dx-glass: linear-gradient(160deg, rgba(10, 18, 34, 0.74), rgba(4, 8, 16, 0.82));
  --dx-edge: rgba(56, 189, 248, 0.2);
  --dx-edge-hot: rgba(125, 211, 252, 0.6);
}
body { background: #000; }

/* ---------- Tausta ---------- */
.app-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #02040a; opacity: 0; transition: opacity 0.8s ease; }
.app-bg.on { opacity: 1; }
.app-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.app-bg .nebula { position: absolute; inset: -20%; }
.app-bg .nebula i { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; will-change: transform; }
.app-bg .n1 { left: 8%; top: 12%; width: 46vmax; height: 34vmax; background: radial-gradient(closest-side, rgba(14, 86, 160, 0.5), transparent); animation: dl-drift-a 26s ease-in-out infinite alternate; }
.app-bg .n2 { right: 2%; bottom: 6%; width: 42vmax; height: 32vmax; background: radial-gradient(closest-side, rgba(100, 56, 200, 0.38), transparent); animation: dl-drift-b 32s ease-in-out infinite alternate; }
.app-bg .n3 { left: 36%; top: 38%; width: 34vmax; height: 20vmax; background: radial-gradient(closest-side, rgba(20, 184, 166, 0.2), transparent); animation: dl-drift-a 38s ease-in-out infinite alternate-reverse; }
.app-bg .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.78) 100%); }
.app-bg .grain {
  position: absolute; inset: -50%; opacity: 0.08; mix-blend-mode: overlay; animation: dl-grain 0.9s steps(6) infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Otsikko ---------- */
.container { max-width: 76rem; }
.header { border-bottom: 0; position: relative; padding-bottom: 1.75rem; }
.header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(125, 211, 252, 0.9), rgba(56, 189, 248, 0.25) 45%, transparent);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.55);
}
.header h1 {
  font-family: var(--dx-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.28em;
  font-size: clamp(2rem, 7vw, 2.9rem); line-height: 1;
  background: linear-gradient(180deg, #f2fbff 0%, #a8e0ff 55%, #4cb8f2 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.5)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.45));
}
.header p { font-family: var(--dx-display); text-transform: uppercase; letter-spacing: 0.32em; font-size: 0.62rem; color: #8fd0f4; margin-top: 0.85rem; text-shadow: 0 0 12px rgba(56, 189, 248, 0.5); }

/* ---------- Painikkeet ---------- */
.btn {
  font-family: var(--dx-display); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6rem; font-weight: 700;
  padding: 0.7rem 1.05rem; border-radius: 0.65rem; background: rgba(6, 12, 24, 0.7); border: 1px solid var(--dx-edge); color: #a8dcf8;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s, transform 0.15s, color 0.25s;
}
.btn:hover { background: rgba(56, 189, 248, 0.1); border-color: var(--dx-edge-hot); box-shadow: 0 0 22px rgba(56, 189, 248, 0.28); color: #e6f6ff; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn-logout:hover { box-shadow: 0 0 22px rgba(239, 68, 68, 0.22); }
.btn-primary { color: #031321; background: linear-gradient(180deg, #8bdcff, #38bdf8); border-color: rgba(186, 230, 253, 0.8); box-shadow: 0 0 22px rgba(56, 189, 248, 0.35); }
.btn-primary:hover { color: #031321; background: linear-gradient(180deg, #a3e3ff, #4cc2fb); box-shadow: 0 0 34px rgba(56, 189, 248, 0.6); }
.btn-secondary { color: #7f93aa; }

/* Projektikeskus (rakenteilla) */
.btn-pk { position: relative; color: #e6f6ff; border-color: rgba(125, 211, 252, 0.55); background: linear-gradient(160deg, rgba(20, 60, 100, 0.55), rgba(8, 18, 36, 0.8)); box-shadow: 0 0 24px rgba(56, 189, 248, 0.22), inset 0 1px 0 rgba(186, 230, 253, 0.15); }
.btn-pk:hover { box-shadow: 0 0 36px rgba(56, 189, 248, 0.45), inset 0 1px 0 rgba(186, 230, 253, 0.25); }
.btn-pk .pk-tag {
  font-size: 0.5rem; letter-spacing: 0.14em; padding: 0.2rem 0.45rem; border-radius: 0.35rem; color: #ffd27a;
  background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.4); text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}
.btn-pk .pk-tag::before { content: ''; display: inline-block; width: 0.35rem; height: 0.35rem; margin-right: 0.35rem; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 8px #f59e0b; animation: dx-blink 1.6s ease-in-out infinite; vertical-align: 0.04rem; }
@keyframes dx-blink { 50% { opacity: 0.25; } }

/* ---------- Lasipinnat ---------- */
.stat-card, .health-card, .service-card {
  background: var(--dx-glass); border: 1px solid var(--dx-edge); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(186, 230, 253, 0.08);
}
.stat-card, .health-card { border-radius: 1.1rem; }
.service-card { border-radius: 1.1rem; }
.stat-card:hover, .service-card:hover { border-color: var(--dx-edge-hot); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 34px rgba(56, 189, 248, 0.22), inset 0 1px 0 rgba(186, 230, 253, 0.12); }
.service-card.disabled { box-shadow: none; }
/* Pyörivä valoreuna korteilla pidettäessä hiirtä päällä */
.service-card::after, .stat-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: conic-gradient(from var(--dl-angle), transparent 0 62%, rgba(56, 189, 248, 0.95) 80%, #e0f7ff 87%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: dl-spin 5s linear infinite;
}
.service-card:not(.disabled):hover::after, .stat-card:hover::after { opacity: 1; }
.service-card .initial { font-family: var(--dx-display); color: rgba(125, 211, 252, 0.1); }
.service-card .gradient { background: linear-gradient(to top, rgba(2, 5, 12, 0.96), rgba(2, 5, 12, 0.55) 55%, transparent); }
.service-card .name { font-family: var(--dx-display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; color: var(--dx-ice); }
.service-card .badge { font-family: var(--dx-display); font-size: 0.5rem; letter-spacing: 0.14em; border-radius: 0.4rem; }
.stat-card .label, .category-header .count { font-family: var(--dx-display); letter-spacing: 0.2em; font-size: 0.55rem; color: #7fb4d6; }
.stat-card .value { font-family: var(--dx-display); font-size: 1.45rem; font-weight: 700; letter-spacing: 0.04em; color: var(--dx-ice); text-shadow: 0 0 18px rgba(56, 189, 248, 0.35); }
@media (min-width: 640px) { .stat-card .value { font-size: 1.6rem; } }

/* ---------- Kategoriat ---------- */
.category-header h2 { font-family: var(--dx-display); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.72rem; font-weight: 700; color: var(--dx-ice); text-shadow: 0 0 14px rgba(56, 189, 248, 0.45); }
.category-header .line { background: linear-gradient(90deg, rgba(125, 211, 252, 0.6), rgba(56, 189, 248, 0.1) 60%, transparent); box-shadow: 0 0 10px rgba(56, 189, 248, 0.25); }

/* ---------- Modaalit ja ilmoitus ---------- */
.modal-overlay { background: rgba(0, 3, 10, 0.78); backdrop-filter: blur(10px); }
.modal { background: var(--dx-glass); border: 1px solid rgba(56, 189, 248, 0.28); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 60px rgba(56, 189, 248, 0.12); border-radius: 1.1rem; }
.modal-header h2, .detail-header h2 { font-family: var(--dx-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.95rem; }
.admin-section h3 { font-family: var(--dx-display); letter-spacing: 0.22em; font-size: 0.6rem; }
.toast { font-family: var(--dx-display); letter-spacing: 0.1em; font-size: 0.62rem; text-transform: uppercase; border-radius: 0.65rem; box-shadow: 0 0 30px rgba(56, 189, 248, 0.25); }
.footer { font-family: var(--dx-display); letter-spacing: 0.3em; font-size: 0.55rem; text-transform: uppercase; border-top: 0; position: relative; color: #4f6a84; }
.footer::before { content: ''; position: absolute; left: 20%; right: 20%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.5), transparent); }

/* ---------- Sisääntulo kirjautumisen jälkeen ---------- */
.container.enter .header, .container.enter .stats > *, .container.enter .health-section > *, .container.enter .category, .container.enter .footer {
  opacity: 0; animation: dx-rise 0.8s cubic-bezier(.16, .84, .3, 1) forwards;
}
.container.enter .header { animation-delay: 0.1s; }
.container.enter .stats > :nth-child(1) { animation-delay: 0.25s; }
.container.enter .stats > :nth-child(2) { animation-delay: 0.33s; }
.container.enter .stats > :nth-child(3) { animation-delay: 0.41s; }
.container.enter .stats > :nth-child(4) { animation-delay: 0.49s; }
.container.enter .health-section > :nth-child(1) { animation-delay: 0.55s; }
.container.enter .health-section > :nth-child(2) { animation-delay: 0.63s; }
.container.enter .category:nth-of-type(1) { animation-delay: 0.7s; }
.container.enter .category:nth-of-type(2) { animation-delay: 0.8s; }
.container.enter .category:nth-of-type(3) { animation-delay: 0.9s; }
.container.enter .category:nth-of-type(n+4) { animation-delay: 1s; }
.container.enter .footer { animation-delay: 1.1s; }
@keyframes dx-rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

@media (prefers-reduced-motion: reduce) {
  .container.enter .header, .container.enter .stats > *, .container.enter .health-section > *, .container.enter .category, .container.enter .footer { animation: none; opacity: 1; }
  .app-bg .nebula i, .app-bg .grain, .service-card::after, .stat-card::after { animation: none; }
  .btn-pk .pk-tag::before { animation: none; }
}

/* ---------- Viimeistelyt ---------- */
.header > div:first-child { flex: 0 0 auto; }
.header p { white-space: nowrap; }
.header-actions { flex: 1; justify-content: flex-end; }
@media (max-width: 639px) { .header-actions { justify-content: flex-start; } }
.health-card h3 { font-family: var(--dx-display) !important; letter-spacing: 0.22em !important; font-size: 0.6rem !important; color: #7fb4d6 !important; }
.health-card p { font-family: var(--dx-display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.55rem !important; color: #7fb4d6 !important; }
.health-ring .ring-value { font-family: var(--dx-display); font-size: 1.6rem; text-shadow: 0 0 20px currentColor; }
.health-bar-row .name { font-size: 0.8rem; color: var(--dx-ice); }
.health-bar-fill { box-shadow: 0 0 10px currentColor; }

/* ---------- Palvelun kuvake kortissa ---------- */
.service-card.has-icon .initial { display: none; }
.service-card .svc-icon {
  position: absolute; left: 50%; top: 41%; z-index: 5; width: 3.9rem; height: 3.9rem; object-fit: contain; padding: 0.55rem;
  transform: translate(-50%, -50%); border-radius: 1rem; pointer-events: none;
  background: radial-gradient(circle at 50% 35%, rgba(30, 60, 100, 0.55), rgba(6, 12, 24, 0.85));
  border: 1px solid rgba(125, 211, 252, 0.28);
  box-shadow: 0 0 26px rgba(56, 189, 248, 0.28), inset 0 1px 0 rgba(186, 230, 253, 0.14);
  transition: transform 0.35s cubic-bezier(.16, .84, .3, 1), box-shadow 0.35s;
}
.service-card .svc-icon.sm { width: 3.1rem; height: 3.1rem; padding: 0.7rem; image-rendering: -webkit-optimize-contrast; }
.service-card:not(.disabled):hover .svc-icon { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 40px rgba(56, 189, 248, 0.5), inset 0 1px 0 rgba(186, 230, 253, 0.2); }
.service-card.disabled .svc-icon { opacity: 0.55; box-shadow: none; }