/* ===============================
   ALL24 base stylesheet
   Path: /assets/app.css
   =============================== */

   /* Auth page layout (login/register) */
   .page-center {
     min-height: 100vh;
     display: grid;
     place-items: center;
   }

   .auth-card {
     width: min(520px, 92vw);
     background: var(--auto-0b0b0b);
     border: 1px solid var(--bd-10);
     border-radius: 18px;
     padding: 20px 20px 22px;
     box-shadow: 0 10px 30px rgba(var(--shadow-rgb),.35);
   }

   .auth-card .btn, .card .btn {
     width: 100%;
     margin-top: 16px;
   }
   .auth-card a, .card a {
     color:var(--text-plain); text-decoration: none; text-align: center;
   }
   .auth-card a:hover, .card a:hover {
     color:var(--accent-glow);
   }
   .auth-card input + .btn {
     margin-top: 12px;
  }
/* Theme tokens live in css/theme.css (loads first in the core bundle). */

/* Resets / base */
html,body{height:100%}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--canvas-plain);
  color:var(--text-plain);
  font:18px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* Typography helpers */
.h{margin:0 0 6px; font-size:20px; font-weight:800}
.muted{color:var(--text-soft)}
.center{text-align:center}

/* Form controls */
label{display:block; font-size:14px; color:var(--text-soft); margin:12px 0 6px}
input,select,textarea{
  width:100%;
  padding:14px 16px;
  font-size:18px;
  border-radius:12px;
  border:1px solid var(--bd-14);
  background:var(--surface-alt);
  color:var(--text-plain);
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent-glow);
  box-shadow:0 0 0 4px rgba(var(--accent-glow-rgb),.15);
}

/* Buttons */
.btn{
  display:inline-block;
  padding:14px 18px;
  font-size:17px;
  font-weight:800;
  border:0;
  border-radius:12px;
  /*cursor:pointer;*/
  background:var(--accent-glow);
  color:#001016;
}
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn-ghost{
  background:transparent;
  color:var(--ink-dfe6eb);
  border:0;
}

/* Alerts */
.error{
  display:none;
  margin-top:10px;
  font-size:16px;
  background:#b21a1a;
  border:1px solid #cf4e4e;
  padding:10px 12px;
  border-radius:10px;
}
.ok{
  display:none;
  margin-top:10px;
  font-size:16px;
  background:#103d26;
  border:1px solid #1f7a46;
  color:#d8ffe7;
  padding:10px 12px;
  border-radius:10px;
}

/* Cards / panels (reusable) */
.card,.panel,.step{
  background:var(--auto-0b0b0b);
  border:1px solid var(--bd-10);
  border-radius:18px;
  padding:20px;
  box-shadow:0 10px 30px rgba(var(--shadow-rgb),.35);
}

/* Auth layout helpers (login + register) */
.page-center{min-height:100vh; display:grid; place-items:center}
.auth-card{width:min(520px,92vw)}
.logo{display:flex; justify-content:center; margin:6vh 0 12px}
.logo img{width:min(320px,80%); height:auto; display:block}

/* Top bar (single-row header) */
.topbar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center;
  padding:0 14px;
  height:48px;
  background:var(--auto-0a0b0d);
  border-bottom:1px solid var(--bd-08);
}
.topbar .brand{display:flex; align-items:center; gap:10px; margin-right:20px}
.topbar .brand img{height:24px; width:auto}

/* Inline nav (in header) */
.nav-inline{display:flex; gap:2px; flex:1}
.nav-item{
  padding:6px 12px; border-radius:6px;
  color:rgba(var(--ink-rgb),.55); text-decoration:none;
  font:13px/1.2 system-ui; font-weight:600;
  transition:all .12s ease;
}
.nav-item:hover{color:var(--text-plain); background:rgba(var(--ink-rgb),.06)}
.nav-item.active{color:var(--text-plain); background:rgba(var(--accent-glow-rgb),.18)}

/* User actions (right side of header) */
.user-actions{display:flex; align-items:center; gap:4px; margin-left:auto}
.header-btn{
  padding:6px 10px; border-radius:6px;
  font:12px/1 system-ui; color:rgba(var(--ink-rgb),.55);
  cursor:pointer; transition:all .12s;
}
.header-btn:hover{color:var(--text-plain); background:rgba(var(--ink-rgb),.06)}

/* Mobile hamburger (appears left of brand on mobile) */
.nav-toggle{
  display:none; border:0; background:0; padding:8px;
  cursor:pointer; flex-direction:column; gap:4px;
  width:36px; height:36px; justify-content:center; align-items:center;
  order: -1; margin-right: 4px;
}
.nav-toggle span{
  display:block; width:18px; height:2px; background:var(--paper);
  border-radius:1px; transition:all .2s;
}

/* Layout-fixed: lock viewport, hide footer */
body.layout-fixed{overflow:hidden; height:100dvh}
body.layout-fixed footer{display:none !important}
body.layout-fixed .teambar{display:none}
body.layout-fixed .tb-admin-actions{display:none}

/* Legacy tabs (kept for other pages) */
.tabs{display:flex; gap:8px; padding:10px 14px; border-bottom:1px solid var(--bd-08); background:var(--surface-alt); }
.tab{padding:10px 12px; border-radius:10px; color:var(--ink-dfe6eb); text-decoration:none}
.tab.active,.tab:hover{background:rgba(var(--accent-glow-rgb),.15); color:var(--text-plain)}

/* App layout */
.app-layout{display:grid; grid-template-columns:280px 1fr; gap:14px; padding:14px}
.side-panel{background:var(--panel-solid); border:1px solid var(--bd-08); border-radius:14px; padding:12px}

/* Utility */
.hidden{display:none}


/* minimal modal styles */
.modal-backdrop{position:fixed;inset:0;background:var(--sunk-60);display:none;align-items:center;justify-content:center;z-index:50}
.modal-backdrop .modal{width:min(560px,92vw);background:var(--auto-0b0b0b);border:1px solid var(--bd-12);border-radius:14px;padding:16px}
.modal-backdrop .modal h3{margin:0 0 8px}
.modal-backdrop .modal .muted{margin:0 0 10px}
.modal-backdrop .input-row{display:flex;gap:8px}
.modal-backdrop .input-row input{flex:1}
.modal-backdrop .list{margin-top:10px;display:grid;gap:8px}
.modal-backdrop .item{padding:10px;border-radius:10px;border:1px solid var(--bd-12);background:var(--surface-alt);cursor:pointer}
.modal-backdrop .item:hover{border-color:var(--accent-glow)}
.modal-backdrop .modal .actions{margin-top:12px;display:flex;gap:8px;justify-content:flex-end}


/* Team switcher + banners */
.teambar {
  display:flex; align-items:center; gap:10px; padding:8px 14px;
  border-bottom:1px solid var(--bd-08); background:var(--surface-alt);
}
.team-switch { position:relative; }
.team-btn {
  background:var(--auto-0b0b0b); color:var(--text-plain); border:1px solid var(--bd-14);
  padding:8px 12px; border-radius:10px; font-weight:700;
}
.team-dd {
  position:absolute; top:110%; left:0; min-width:260px; z-index:30;
  background:var(--auto-0b0b0b); border:1px solid var(--bd-14); border-radius:10px; padding:8px; display:none;
}
.team-dd .item { padding:8px 10px; border-radius:8px; }
.team-dd .item:hover { background:rgba(var(--ink-rgb),.08); }

.banner {
  margin:10px 14px 0; padding:10px 12px;
  border-radius:10px; background:#102033; border:1px solid rgba(var(--accent-glow-rgb),.35);
}
.banner .muted { color:var(--ink-c8d8e6) }
.link-btn { color:var(--accent-glow); background:transparent; border:0; padding:0 2px; }
.join-panel { margin:10px 14px; padding:12px; border:1px solid var(--bd-14); background:var(--surface-alt); border-radius:10px; display:none; }
.join-row { display:flex; gap:8px; }
@media (max-width:560px){ .join-row { display:block; } }
.result { padding:10px; border:1px solid var(--bd-12); border-radius:10px; background:var(--auto-0b0b0b); }
.result + .result { margin-top:8px; }







/* Base: desktop/tablet stays as-is */
.app-layout { display:grid; grid-template-columns: 280px 1fr; gap:16px; padding:16px; }

/* Mobile responsive */
@media (max-width: 768px) {
  .nav-inline { display:none }
  .nav-toggle { display:flex !important }
  .user-actions { margin-right:8px }
  .app-layout { grid-template-columns: 1fr; }
  .side-panel { order:2; }
  .panel { order:1; }
  .card { border-radius:14px; }
  .btn, .btn-ghost, .team-btn { padding:12px 14px; border-radius:12px; }
  .card.wide { width: 90%; }
  .app-layout > .grid-wide { grid-column: 1; }
}

/* Mobile nav dropdown */
.mobile-menu {
  display:none; z-index:100;
  background:var(--auto-0a0b0d);
  border-bottom: 1px solid var(--bd-10);
  padding:6px 8px;
}
.mobile-menu a {
  display:block; padding:12px 14px; border-radius:8px;
  text-decoration:none; color:rgba(var(--ink-rgb),.7); font:14px/1.2 system-ui; font-weight:600;
}
.mobile-menu a:hover, .mobile-menu a.active { background:rgba(var(--ink-rgb),.06); color:var(--text-plain); }



.centered-form {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 5vh;
}


.app-layout > .grid-wide { grid-column: 1 / -1 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   Global text-selection guard
   Disable mouse text selection EVERYWHERE except inside form inputs.
   (Nothing in the app UI should be mouse-selectable — it just creates
   confusing highlight artifacts. Cmd+A is also blocked by utils.js.)
   ═══════════════════════════════════════════════════════════════════════════ */
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input,
textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Shared modal overlay — used by invite modal (footer.php) and others
   Loaded globally so every page can show these modals correctly.
   ═══════════════════════════════════════════════════════════════════════════ */
.os-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important; /* above nav rail and SPA stages */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 4, 10, .65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  padding: 20px;
  overflow-y: auto;
}
.os-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}