/* =====================================================
   Alliance Control Center - Full Site CSS
   Base font: 12px
   Layout: topbar + shell (sidebar + main)
===================================================== */

:root{
  color-scheme: dark;
  font-size: 12px;

  --bg: #0f1115;
  --sidebar: #0b0d12;

  --card: #161a22;
  --card-soft: #101522;

  --border: #242a36;
  --border-soft: #1f2531;

  --text: #e6e6e6;
  --muted: #aab0bd;
  --link: #8ab4ff;

  --btn: #222838;
  --btn-hover: #2a3142;

  --ok: #9ef0b1;
  --warn: #ffd08a;

  --err-bg: #2a1a1a;
  --err-border: #4a2a2a;

  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ================= Light Mode ================= */

html[data-theme="light"]{
  color-scheme: light;

  --bg: #f6f7fb;
  --sidebar: #ffffff;

  --card: #ffffff;
  --card-soft: #f1f3f8;

  --border: rgba(15,17,21,.14);
  --border-soft: rgba(15,17,21,.12);

  --text: rgba(15,17,21,.92);
  --muted: rgba(15,17,21,.65);
  --link: #2457ff;

  --btn: rgba(15,17,21,.06);
  --btn-hover: rgba(15,17,21,.10);

  --err-bg: rgba(239,68,68,.10);
  --err-border: rgba(239,68,68,.25);

  --shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* =====================================================
   Global
===================================================== */

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
}

a{ color: var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* =====================================================
   App Structure
===================================================== */

/* app is a normal block wrapper now */
.app{
  min-height: 100vh;
}

/* topbar spans across full page */
.topbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background: var(--sidebar);
  position: sticky;
  top:0;
  z-index:25;
}

.topbar-title{
  font-weight:700;
  font-size:1.2rem;
  flex:1;
  text-align:center;
}

/* shell is the desktop row container (sidebar + main) */
.shell{
  display:flex;
  min-height: calc(100vh - 52px);
}

/* =====================================================
   Sidebar + Main
===================================================== */

.sidebar{
  width:260px;
  background: var(--sidebar);
  border-right:1px solid var(--border);
  padding:18px;
  position: relative;
  z-index:30;
}

.sidebar-title{
  font-weight:600;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--muted);
  margin-bottom:1rem;
}

.sub{
  font-size:1rem;
  color: var(--muted);
  margin-bottom:1rem;
}

.clock-row{
  margin-top:6px;
}

.main{
  flex:1;
  padding:24px;
  min-width:0;
}

.main-inner{
  max-width:1200px;
  margin:0 auto;
}

/* =====================================================
   Navigation
===================================================== */

.nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:1rem;
}

.nav-item{
  display:block;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--border-soft);
  background: rgba(255,255,255,.04);
}

html[data-theme="light"] .nav-item{
  background: rgba(15,17,21,.03);
}

.nav-item:hover{
  background: rgba(255,255,255,.08);
  border-color: var(--border);
  text-decoration:none;
}

html[data-theme="light"] .nav-item:hover{
  background: rgba(15,17,21,.06);
}

.nav-item.active{
  background: rgba(138,180,255,.18);
  border-color: rgba(138,180,255,.35);
}

html[data-theme="light"] .nav-item.active{
  background: rgba(36,87,255,.10);
  border-color: rgba(36,87,255,.22);
}

/* =====================================================
   Cards
===================================================== */

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  margin-bottom:16px;
}

.side-card{
  margin-top:1rem;
  padding:14px;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--card-soft);
}

.muted{ color: var(--muted); }
.ok{ color: var(--ok); }
.warn{ color: var(--warn); }

/* =====================================================
   Buttons
===================================================== */

.iconbtn{
  border:1px solid var(--border-soft);
  background: var(--btn);
  color: var(--text);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  font-size:1rem;
  line-height:1;
}

.iconbtn:hover{ background: var(--btn-hover); }

.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--border-soft);
  background: var(--btn);
  color: var(--text);
  cursor:pointer;
  font-size:1rem;
}

.btn:hover{ background: var(--btn-hover); text-decoration:none; }

/* =====================================================
   Forms (dropdown visibility fixed)
===================================================== */

input, select, textarea{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--border-soft);
  background: var(--card);
  color: var(--text);
  margin:6px 0 12px;
  font-size:1rem;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background:#ffffff;
  color:rgba(15,17,21,.92);
}

select option{
  background: var(--card);
  color: var(--text);
}

html[data-theme="light"] select option{
  background:#ffffff;
  color:rgba(15,17,21,.92);
}

textarea{
  min-height:110px;
  resize:vertical;
}

/* =====================================================
   Tables
===================================================== */

table{
  width:100%;
  border-collapse:collapse;
}

th, td{
  padding:10px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}

th{
  text-align:left;
  font-size:.9rem;
  color: var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* =====================================================
   Alerts
===================================================== */

.errbox{
  background: var(--err-bg);
  border:1px solid var(--err-border);
  padding:12px;
  border-radius:10px;
  margin-bottom:12px;
}

.okbox{
  background: rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.25);
  padding:12px;
  border-radius:10px;
  margin-bottom:12px;
}

/* =====================================================
   Utilities
===================================================== */

.row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.mt-1{ margin-top:.5rem; }
.mt-2{ margin-top:1rem; }

/* =====================================================
   Overlay + Mobile Drawer Sidebar
===================================================== */

.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 20;
}

/* Mobile: sidebar becomes a drawer, shell becomes block */
@media (max-width:900px){
  .shell{ display:block; }
  .main{ padding:18px; }

  .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height:100vh;
    width:320px;
    max-width:86vw;
    transform: translateX(-105%);
    transition: transform 180ms ease;
    box-shadow: var(--shadow);
    overflow-y:auto;
    z-index:30;
  }

  html.menu-open .sidebar{
    transform: translateX(0);
  }
}

/* Desktop: hide hamburger button because sidebar is already visible */
@media (min-width:901px){
  #menuBtn{ display:none; }
}

/* Tables scroll on small screens */
@media (max-width:700px){
  table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }
  th, td{ padding:8px; }
}

/* Focus */
:focus-visible{
  outline:2px solid rgba(138,180,255,.55);
  outline-offset:2px;
}

html[data-theme="light"] :focus-visible{
  outline:2px solid rgba(36,87,255,.45);
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}


/* =====================================================
   Layout Top additions (Account dropdown + Server Event pills)
===================================================== */

/* Account dropdown spacing when it opens */
#accountMenu{
  margin-top:10px;
}

/* Make the account button look like a normal nav-item button */
#accountBtn{
  width:100%;
  text-align:left;
}

/* Server Event mini day pills (if you keep the inline spans, this just helps consistency) */
.mini-pill{
  display:inline-block;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid var(--border-soft);
  background: rgba(255,255,255,.04);
  font-weight:600;
  color: var(--muted);
}

html[data-theme="light"] .mini-pill{
  background: rgba(15,17,21,.03);
}

.mini-pill.is-today{
  border-color: rgba(138,180,255,.35);
  background: rgba(138,180,255,.18);
  color: var(--text);
  font-weight:700;
}

html[data-theme="light"] .mini-pill.is-today{
  border-color: rgba(36,87,255,.22);
  background: rgba(36,87,255,.10);
}