/* ══════════════════════════════════════════════════════════════════
   MyStory Staff — Wspólny arkusz stylów (struktura zgodna z mystoryrp.com
   i todo.mystoryrp.com: ta sama paleta, ta sama siatka kart/przycisków,
   ten sam układ panelu bocznego co todo.mystoryrp.com).

   --accent-color / --accent-color-rgb są ustawiane dynamicznie (kolor marki
   konfigurowalny w Ustawienia → Wygląd) w małym inline <style> w
   partials/header.ejs — tu tylko z nich korzystamy przez var(...).
   ══════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(circle at top left, rgba(var(--accent-color-rgb), 0.2) 0%, rgba(var(--accent-color-rgb), 0.15) 50%, rgba(var(--accent-color-rgb), 0.1) 100%), #050508;
  color: #cbd5e1;
  font-family: 'Rubik', system-ui, sans-serif;
  min-height: 100vh;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(19, 17, 26, 0.8); border-radius: 8px; }
::-webkit-scrollbar-thumb { background: rgba(var(--accent-color-rgb), 0.3); border: 2px solid rgba(19, 17, 26, 0.8); border-radius: 8px; transition: all .3s ease; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-color-rgb), 0.5); }

/* ── Układ — panel boczny (jak todo.mystoryrp.com) ───────────────────── */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: 250px; flex-shrink: 0;
  background: #0d0d16; border-right: 1px solid rgba(255,255,255,.07);
  padding: 1.5rem 1rem; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.app-brand {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem; margin-bottom: 1.75rem; text-decoration: none;
}
.app-brand-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-color), #8b5cf6);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: .95rem;
  box-shadow: 0 4px 14px -4px rgba(var(--accent-color-rgb), .6);
}
.app-brand-text { font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }

.app-nav { display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.app-nav-link {
  display: flex; align-items: center; gap: .75rem; padding: .65rem .85rem;
  border-radius: 9px; color: #94a3b8; text-decoration: none; font-size: .88rem; font-weight: 600;
  transition: background .15s, color .15s;
}
.app-nav-link:hover { background: rgba(255,255,255,.04); color: #fff; }
.app-nav-link.is-active { background: rgba(var(--accent-color-rgb), .15); color: #fff; }
.app-nav-link i { width: 18px; text-align: center; color: var(--accent-color); }

.app-user { border-top: 1px solid rgba(255,255,255,.07); padding-top: 1rem; margin-top: 1rem; display: flex; align-items: center; gap: .65rem; }
.app-user-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--accent-color); }
.app-user-name { color: #fff; font-weight: 700; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-user-role { font-size: .68rem; font-weight: 700; color: var(--accent-color); opacity: .9; }
.app-user-logout { margin-left: auto; color: #64748b; text-decoration: none; font-size: .95rem; transition: color .15s; flex-shrink: 0; }
.app-user-logout:hover { color: #f87171; }

.app-content { flex: 1; padding: 2.25rem 2.5rem; min-width: 0; }

.app-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.app-page-title { font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: -.01em; margin: 0 0 .3rem; }
.app-page-sub { color: #64748b; font-size: .88rem; margin: 0; }

@media (max-width: 860px) {
  .app-sidebar { display: none; }
  .app-content { padding: 1.25rem; }
}

/* ── Karty (współdzielone przez wszystkie strony panelu) ─────────────── */
.glass-card {
  background: #0d0d16; backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--accent-color-rgb), 0.1);
  border-radius: 16px; padding: 1.5rem; margin-bottom: 1.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.section-title { font-size: 1.25rem; font-weight: 600; color: #fff; margin-bottom: .35rem; display: flex; align-items: center; gap: .75rem; }
.section-title i { color: var(--accent-color); }
.section-subtitle { color: rgba(255,255,255,0.55); font-size: .88rem; margin-bottom: 1.25rem; }
.section-description { color: rgba(255, 255, 255, 0.7); margin-bottom: 1.5rem; }
.help { color: rgba(255,255,255,0.65); }
.label { color: rgba(255,255,255,0.75); }

/* ── Formularze (wspólny wygląd pól Bulma na ciemnym tle) ─────────────── */
.input, .textarea, .form-input, .form-select, .select select {
  background: rgba(24, 21, 31, 0.6);
  border: 1px solid rgba(var(--accent-color-rgb), 0.2);
  color: #fff;
}
.input:focus, .textarea:focus, .form-input:focus, .form-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.2);
}
/* Bulma domyślnie ustawia bardzo ciemny kolor placeholdera (dobrany pod jasny motyw) —
   na naszym ciemnym tle robił się praktycznie niewidoczny. */
.input::placeholder, .textarea::placeholder, .form-input::placeholder { color: rgba(255, 255, 255, 0.35); }
/* Wiele przycisków w panelu ma gołą ikonę <i> tuż przed tekstem, bez owijającego .icon (span)
   Bulmy, więc bez tej reguły ikona i tekst sklejają się bez odstępu. */
.button > i:first-child, .button > i.fas:first-child, .button > i.fab:first-child { margin-right: .5rem; }

.button.is-primary { background: rgba(var(--accent-color-rgb), 0.15); color: var(--accent-color); border: none; }
.button.is-primary:hover { background: rgba(var(--accent-color-rgb), 0.25); transform: translateY(-1px); }
.button.is-primary:disabled, .button.is-primary[disabled] {
  background: rgba(var(--accent-color-rgb), 0.15); border-color: transparent; box-shadow: none;
  opacity: .45; cursor: not-allowed; transform: none;
}

/* ── Alerty / powiadomienia (Bulma notification, dopasowane do motywu) ── */
.notification { background: rgba(255,255,255,.04); }
.notification.is-success { background: rgba(72, 199, 116, 0.1); border: 1px solid rgba(72, 199, 116, 0.2); color: #48c774; }
.notification.is-danger { background: rgba(241, 70, 104, 0.1); border: 1px solid rgba(241, 70, 104, 0.2); color: #f14668; }