/**
 * styles.css — Far Out Resource
 * Basert på stilsetting fra Far Out Event Planner
 */

/* ============================================================
   CSS-variabler for theming (lys/mørk)
   ============================================================ */
:root {
  --primary-blue:  #1DA1F2;
  --bg-primary:    #ffffff;
  --bg-secondary:  #f5f5f5;
  --text-primary:  #1a1a1a;
  --text-secondary:#666666;
  --border-color:  #e0e0e0;
  --card-bg:       #f3f3f3;
  --shadow:        rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
  --bg-primary:    #17191c;
  --bg-secondary:  #141b2d;
  --text-primary:  #e8e8e8;
  --text-secondary:#a0a0a0;
  --border-color:  #2a3548;
  --card-bg:       #1a2332;
  --shadow:        rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary:    #17191c;
    --bg-secondary:  #141b2d;
    --text-primary:  #e8e8e8;
    --text-secondary:#a0a0a0;
    --border-color:  #2a3548;
    --card-bg:       #1a2332;
    --shadow:        rgba(0, 0, 0, 0.4);
  }
}

/* ============================================================
   Body
   ============================================================ */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

[data-bs-theme="dark"] {
  --bs-body-bg:      var(--bg-primary);
  --bs-body-color:   var(--text-primary);
  --bs-card-bg:      var(--card-bg);
  --bs-border-color: var(--border-color);
}

/* ============================================================
   Navbar — enkelt rad, alltid mørk
   ============================================================ */
.navbar {
  background-color: #17191c !important;
  border-bottom: 2px solid var(--primary-blue);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  padding: 0;
}
.navbar-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 .75rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 58px;
  flex-wrap: wrap;
}
@media (min-width: 992px) {
  .navbar-inner { flex-wrap: nowrap; height: 58px; min-height: unset; }
}
.navbar-brand { color: var(--primary-blue) !important; font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: .4rem; flex-shrink: 0; text-decoration: none; white-space: nowrap; }
.navbar-username { color: #e8e8e8; font-size: .875rem; white-space: nowrap; }
.nav-icon-btn { color: #e8e8e8; font-size: 1.05rem; text-decoration: none; padding: .25rem .35rem; border-radius: 6px; transition: color .2s; display: flex; align-items: center; }
.nav-icon-btn:hover { color: var(--primary-blue); }
.nav-text-btn { color: #e8e8e8; text-decoration: none; font-size: .875rem; font-weight: 500; padding: .25rem .5rem; border-radius: 6px; transition: color .2s; white-space: nowrap; }
.nav-text-btn:hover { color: var(--primary-blue); }
.navbar-nav .nav-link { color: #e8e8e8 !important; font-weight: 500; font-size: .875rem; padding: .3rem .6rem !important; border-radius: 6px; transition: color .2s, background .2s; white-space: nowrap; }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus { color: var(--primary-blue) !important; background: rgba(77,166,255,.08); }
.navbar-nav .nav-link.active { color: var(--primary-blue) !important; border-bottom: 2px solid var(--primary-blue); }
/* Profil-dropdown knapp */
.navbar-profile-btn {
  background: none;
  border: 1px solid #2a3548;
  color: #e8e8e8;
  border-radius: 8px;
  padding: .2rem .5rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.navbar-profile-btn:hover { border-color: var(--primary-blue); color: var(--primary-blue); }
/* Profil-dropdown meny */
.navbar-profile-dropdown {
  background: #1e2128;
  border: 1px solid #2a3548;
  border-radius: 8px;
  min-width: 180px;
}
.navbar-profile-dropdown .dropdown-item { color: #e8e8e8; font-size: .875rem; padding: .5rem 1rem; }
.navbar-profile-dropdown .dropdown-item:hover,
.navbar-profile-dropdown .dropdown-item:focus { background: rgba(77,166,255,.08); color: var(--primary-blue); }
.navbar-profile-dropdown .dropdown-divider { border-color: #2a3548; }
/* Hamburger toggler */
.navbar-toggler { border-color: #2a3548; padding: .35rem .55rem; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28220%2C220%2C220%2C1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler:focus { box-shadow: none; }
/* Mobile collapse */
@media (max-width: 991.98px) {
  .navbar-collapse { width: 100%; border-top: 1px solid #2a3548; padding: .5rem 0 .75rem; }
  .navbar-nav .nav-link { padding: .5rem .25rem !important; border-bottom: 1px solid #2a3548; border-radius: 0; }
  .navbar-nav .nav-link.active { border-bottom-color: var(--primary-blue); }
}
/* Spillerprofil-modal */
.spiller-session-row { cursor: pointer; transition: background .15s; }
.spiller-session-row:hover { background: rgba(77,166,255,.06); }

/* ============================================================
   Main — sentrert, maks 1200px, som event-app
   ============================================================ */
main {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem .75rem;
}
/* Bootstrap containers inside main — sett maks bredde lik main, behold original gutter for row/col */
main .container,
main .container-sm,
main .container-md,
main .container-lg,
main .container-xl,
main .container-xxl,
main .container-fluid {
  max-width: 100% !important;
}

/* ============================================================
   Footer — alltid mørk
   ============================================================ */
footer {
  background-color: #17191c;
  border-top: 1px solid #2a3548;
  padding: 2rem;
  text-align: center;
  color: #a0a0a0;
  margin-top: auto;
}

footer .container { max-width: 1200px; margin: 0 auto; }
footer p { margin: 0.5rem 0; }

footer .disclaimer {
  font-size: 0.85rem;
  color: #888;
  font-style: italic;
  margin-top: 1.5rem;
}

footer .disclaimer a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color 0.3s;
}

footer .disclaimer a:hover {
  color: #4fc3f7;
  text-decoration: underline;
}

/* ============================================================
   Kort (cards)
   ============================================================ */
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--shadow);
  color: var(--text-primary);
}

.card-header {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.card-footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary);
}

/* ============================================================
   KPI-kort — dashboard
   ============================================================ */
.kpi-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.4rem 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px var(--shadow);
}

.kpi-card .kpi-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.kpi-card .kpi-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
}

.kpi-card .kpi-sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.3rem;
}

.kpi-card .kpi-icon {
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  opacity: 0.12;
}

.kpi-card-link {
  transition: border-color 0.2s, transform 0.15s;
}
.kpi-card-link:hover {
  border-color: var(--primary-blue);
  transform: translateY(-2px);
}

/* ============================================================
   Økt-status-badges
   ============================================================ */
.badge-okt-draft     { background-color: #6c757d; color: #fff; }
.badge-okt-submitted { background-color: #f5a623; color: #000; }
.badge-okt-approved  { background-color: #28a745; color: #fff; }
.badge-okt-rejected  { background-color: #dc3545; color: #fff; }

/* ============================================================
   Commander-banner
   ============================================================ */
.commander-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(245,196,90,0.12), rgba(245,196,90,0.04));
  border: 1px solid rgba(245,196,90,0.3);
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.commander-banner .cb-icon {
  font-size: 1.8rem;
  color: #f5c45a;
  flex-shrink: 0;
}

.commander-banner h5 {
  margin: 0 0 0.15rem;
  font-weight: 600;
  color: #f5c45a;
}

.commander-banner p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* ============================================================
   Modale vinduer
   ============================================================ */
.modal-content {
  background-color: var(--card-bg);
  border: 1px solid #4b4b4b;
  color: var(--text-primary);
}

.modal-header,
.modal-footer {
  border-color: #4b4b4b;
  background-color: var(--bg-secondary);
}

[data-theme="dark"] .btn-close,
:root:not([data-theme="light"]) .btn-close {
  filter: invert(1);
}

/* ============================================================
   Tabeller
   ============================================================ */
.table {
  color: var(--text-primary);
}

.table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-color);
}

.table-hover > tbody > tr:hover > * {
  background-color: rgba(29, 161, 242, 0.06);
}

/* ============================================================
   Dropdown
   ============================================================ */
.dropdown-menu {
  background-color: #141b2d;
  border: 1px solid #2a3548;
}

.dropdown-item {
  color: #e8e8e8;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #1a2332;
  color: var(--primary-blue);
}

/* ============================================================
   Felleslager — filter-panel
   ============================================================ */
.filter-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: .3rem;
  display: block;
}

/* Typeahead-dropdown */
#q-suggestions {
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
  right: 0;
  border-radius: 0 0 .375rem .375rem;
  box-shadow: 0 4px 16px var(--shadow);
  max-height: 220px;
  overflow-y: auto;
}

/* Recent-feed — venstre fargebord per type */
.recent-feed-item {
  border-left: 3px solid transparent;
  transition: background .15s;
}
.recent-feed-item[data-itype="commodity"] { border-left-color: #4caf7d; }
.recent-feed-item[data-itype="component"] { border-left-color: #5b9bd5; }
.recent-feed-item[data-itype="weapon"]    { border-left-color: #e05c5c; }
.recent-feed-item[data-itype="armor"]     { border-left-color: #b07de0; }