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

   --accent-color / --accent-color-rgb są ustawiane dynamicznie (na
   podstawie EmbedColors z config.yml bota) 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%), #0f0f13;
  color: #9ca3af;
  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(15, 15, 19, 0.8); border-radius: 8px; }
::-webkit-scrollbar-thumb { background: rgba(var(--accent-color-rgb), 0.3); border: 2px solid rgba(15, 15, 19, 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 staff.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 { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.app-brand-text__primary { font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: -.01em; line-height: 1.1; }
.app-brand-text__secondary {
  font-size: .64rem; font-weight: 700; color: #64748b; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.1; white-space: nowrap;
}

.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: #9ca3af; 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-nav-heading {
  margin: 1rem 0 .35rem; padding: 0 .85rem; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: #4b5563;
}

.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; }
/* Strony bez panelu bocznego (login, błąd) — karta wyśrodkowana na całej wysokości ekranu. */
.app-content.is-standalone { padding: 0; display: flex; flex-direction: column; min-height: 100vh; }

.app-sidebar-toggle {
  display: none;
  position: fixed; top: .85rem; left: 1rem; z-index: 40;
  width: 42px; height: 42px; border-radius: 10px;
  background: #0d0d16; border: 1px solid rgba(255,255,255,.1);
  color: #fff; font-size: 1.05rem;
  align-items: center; justify-content: center; cursor: pointer;
}
.app-sidebar-backdrop {
  display: none;
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 29;
}

@media (max-width: 860px) {
  .app-sidebar {
    display: flex;
    position: fixed; top: 0; left: 0; z-index: 30;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 8px 0 24px rgba(0,0,0,.4);
  }
  .app-sidebar.is-open { transform: translateX(0); }
  .app-sidebar-toggle { display: flex; }
  .app-sidebar-backdrop.is-open { display: block; }
  .app-content { padding: 1.25rem; padding-top: 4.75rem; }
}

/* ── Nagłówek strony (współdzielony przez wszystkie widoki) ──────────── */
.welcome-section { padding: 0 0 1.5rem; }
.welcome-title { color: #ffffff; font-size: 2rem; font-weight: bold; margin-bottom: 0.5rem; }
.welcome-subtitle { color: #9ca3af; font-size: 1.1rem; }

/* ── Karty / panele (współdzielone przez strony admina i pozostałe) ──── */
.panel-container {
  background-color: #161219;
  border-radius: 15px;
  padding: 1.5rem;
  margin-top: 1.5rem;
  border: 1px solid rgba(var(--accent-color-rgb), 0.1);
}
.section-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.icon-container {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background-color: rgba(var(--accent-color-rgb), 0.2); color: var(--accent-color);
  box-shadow: 0 0 15px rgba(var(--accent-color-rgb), 0.3);
}
.icon-container i { font-size: 1.25rem; }
.section-title { color: #ffffff; font-size: 1.3rem; font-weight: bold; margin: 0; }

/* Mały tag z ikoną — używany na listach ticketów/recenzji do priorytetu, daty, liczby wiadomości itp.
   Warianty kolorystyczne (np. .meta-tag.priority-high) zostają lokalnie w widokach, które ich używają. */
.meta-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.75rem; border-radius: 8px; font-size: 0.85rem; font-weight: 500;
  background: rgba(22, 18, 25, 0.8); border: 1px solid rgba(var(--accent-color-rgb), 0.2);
}
.meta-tag i { font-size: 0.9rem; }

/* ── Formularze (wspólny wygląd pól Bulma na ciemnym tle) ─────────────── */
.input, .textarea, .select select {
  background-color: rgba(15, 15, 19, 0.8) !important;
  border: 1px solid rgba(var(--accent-color-rgb), 0.2) !important;
  color: #ffffff !important;
  border-radius: 8px;
}
.input:focus, .textarea:focus, .select select:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.2);
}
.input::placeholder, .textarea::placeholder { color: rgba(255, 255, 255, 0.35) !important; }
.label { color: #d1d5db; }
.help-text { color: #6b7280; font-size: 0.8rem; }

/* ── Selektor ról (rolePicker.js) — zamienia textarea z ID ról na listę z nazwami ── */
textarea.role-picker-source { display: none; }
.role-picker { margin-top: .4rem; }
.role-picker-search { margin-bottom: .5rem; }
.role-picker-list {
  max-height: 220px; overflow-y: auto;
  background-color: rgba(15, 15, 19, 0.8);
  border: 1px solid rgba(var(--accent-color-rgb), 0.2);
  border-radius: 8px;
  padding: .35rem;
}
.role-picker-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .5rem; border-radius: 6px;
  font-size: .85rem; color: #d1d5db; cursor: pointer;
}
.role-picker-item:hover { background: rgba(var(--accent-color-rgb), 0.1); }
.role-picker-item input[type="checkbox"] { flex-shrink: 0; accent-color: var(--accent-color); }
.role-picker-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.role-picker-empty { padding: .5rem; color: #6b7280; font-size: .8rem; }
.role-picker-unknown { margin-top: .5rem; }
.role-picker-unknown-label { font-size: .75rem; color: #6b7280; margin-bottom: .25rem; }
.role-picker-item.is-unknown { color: #f0b429; }

/* ── Selektor kanałów (channelPicker.js) — <select> nad polem tekstowym z ID ── */
.channel-picker-select { margin-bottom: .4rem; width: 100%; }
.channel-picker-source { font-size: .8rem; opacity: .75; }
/* 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; }

/* ── 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; }