/* /public/app.css */

:root{
  color-scheme: light;

  --bg:#ffffff;
  --surface:#ffffff;
  --surface2:#f6f8fb;
  --surface3:#eef3fa;

  --text:#0f172a;
  --muted:#475569;
  --muted2:#64748b;

  --border:#e5e7eb;
  --border2:#dbe3ee;

  /* BRAND */
  --brand:#253a4b;
  --brand2:#507da0;
  --brandSoft:rgba(37,58,75,.08);

  --success:#16a34a;
  --danger:#dc2626;

  --shadow:0 14px 32px rgba(2,6,23,.08);
  --shadow2:0 8px 18px rgba(2,6,23,.06);

  --r6:6px;
  --r8:8px;
  --r10:10px;
  --r12:12px;

  --max:1200px;
}

/* DARK MODE */
html[data-theme="dark"]{
  color-scheme: dark;

  --bg:#0b1220;
  --surface:#111827;
  --surface2:#172132;
  --surface3:#1d2a3d;

  --text:#e5e7eb;
  --muted:#cbd5e1;
  --muted2:#94a3b8;

  --border:#243244;
  --border2:#314155;

  --brand:#7ea6c7;
  --brand2:#9fc1db;
  --brandSoft:rgba(159,193,219,.12);

  --success:#22c55e;
  --danger:#ef4444;

  --shadow:0 18px 38px rgba(0,0,0,.35);
  --shadow2:0 10px 24px rgba(0,0,0,.28);
}
html[data-theme="dark"] .small,
html[data-theme="dark"] small{
  color: var(--muted) !important;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  transition: background-color .18s ease, color .18s ease;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }

.container.appContainer{ max-width: var(--max); }

/* Bootstrap normalization (keeps functionality, upgrades look) */
.card{
  border:1px solid var(--border) !important;
  border-radius: var(--r12) !important;
  box-shadow: var(--shadow2) !important;
  overflow:hidden;
  background: var(--surface) !important;
}
.card .card-body{
  padding:18px !important;
  background: var(--surface) !important;
  color: var(--text);
}

.btn{
  border-radius: var(--r10) !important;
  font-weight:700 !important;
  letter-spacing:-0.01em;
}
.btn.btn-lg{ padding:12px 16px !important; }
.btn.btn-sm{ padding:8px 12px !important; }

.btn-primary{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color:#fff !important;
}
.btn-primary:hover{
  background: var(--brand2) !important;
  border-color: var(--brand2) !important;
  color:#fff !important;
}

.btn-outline{
  border:1px solid var(--border2) !important;
  color: var(--text) !important;
  background: var(--surface) !important;
}
.btn-outline:hover{
  background: var(--surface2) !important;
  border-color: var(--border2) !important;
  color: var(--text) !important;
}

.btn-outline-primary{
  border-color: rgba(37,58,75,.24) !important;
  color: var(--brand) !important;
  background: var(--surface) !important;
}
.btn-outline-primary:hover{
  background: var(--brandSoft) !important;
  border-color: rgba(37,58,75,.32) !important;
  color: var(--brand) !important;
}
html[data-theme="dark"] .btn-outline-primary{
  border-color: rgba(126,166,199,.28) !important;
}
html[data-theme="dark"] .btn-outline-primary:hover{
  border-color: rgba(159,193,219,.38) !important;
}

.btn-outline-danger{
  border-color: rgba(220,38,38,.28) !important;
  color: #991b1b !important;
  background: var(--surface) !important;
}
.btn-outline-danger:hover{
  background: rgba(220,38,38,.06) !important;
  border-color: rgba(220,38,38,.34) !important;
}
html[data-theme="dark"] .btn-outline-danger{
  color: #fecaca !important;
}

.form-control, .form-select{
  border-radius: var(--r10) !important;
  border:1px solid var(--border2) !important;
  font-weight:600;
  background: var(--surface) !important;
  color: var(--text) !important;
}
.form-control::placeholder,
textarea::placeholder{
  color: var(--muted2) !important;
  opacity:1;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(37,58,75,.38) !important;
  box-shadow: 0 0 0 .22rem rgba(37,58,75,.10) !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus{
  border-color: rgba(159,193,219,.42) !important;
  box-shadow: 0 0 0 .22rem rgba(159,193,219,.10) !important;
}
.form-control-lg{ padding:12px 14px !important; }
.form-check-input{
  background-color: var(--surface) !important;
  border-color: var(--border2) !important;
}
.form-check-input:checked{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

.table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
}
.table thead th{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--muted) !important;
  font-weight:800 !important;
  border-bottom:1px solid var(--border) !important;
  background: transparent !important;
}
.table td{
  border-bottom:1px solid var(--border) !important;
  color: var(--text) !important;
  background: transparent !important;
}
.badge{
  border-radius: 999px !important;
  font-weight:800 !important;
  letter-spacing:-0.01em;
  padding:6px 10px !important;
}
.text-bg-primary{
  background: rgba(37,58,75,.10) !important;
  color: var(--brand) !important;
  border:1px solid rgba(37,58,75,.18) !important;
}
.text-bg-secondary{
  background: rgba(100,116,139,.10) !important;
  color: var(--text) !important;
  border:1px solid rgba(100,116,139,.18) !important;
}
html[data-theme="dark"] .text-bg-primary{
  background: rgba(126,166,199,.14) !important;
  border-color: rgba(126,166,199,.26) !important;
}
html[data-theme="dark"] .text-bg-secondary{
  background: rgba(148,163,184,.12) !important;
  border-color: rgba(148,163,184,.22) !important;
  color: #dbe5ef !important;
}

/* App shell */
.appPage{
  width:100%;
  padding: 18px 0 44px;
}

.appTopRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin: 6px 0 14px;
}
.appTopActions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.appThemeToggle{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:10px;
  padding:6px 10px;
  font-size:16px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}

.appThemeToggle:hover{
  background:var(--surface2);
}

.appEyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:900;
  color: var(--brand);
}
.appEyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brandSoft);
}
.appTitle{
  margin:6px 0 6px;
  font-size:32px;
  line-height:1.08;
  font-weight:950;
  letter-spacing:-0.03em;
}
.appSub{
  color: var(--muted);
  font-weight:600;
  max-width: 72ch;
  line-height:1.55;
}

.appCard{
  background: var(--surface);
}
.appDivider{
  height:1px;
  background: var(--border);
  margin: 14px 0;
}

.pillHint,
.pill2{
  font-size:12px;
  font-weight:900;
  color: var(--muted);
  border:1px solid rgba(37,58,75,.14);
  background: rgba(37,58,75,.05);
  padding:6px 10px;
  border-radius: 999px;
}
html[data-theme="dark"] .pillHint,
html[data-theme="dark"] .pill2{
  border-color: rgba(126,166,199,.20);
  background: rgba(126,166,199,.10);
  color: #dbe5ef;
}

/* Empty state */
.emptyState{
  border:1px dashed var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface2));
  border-radius: var(--r12);
  padding: 18px;
  text-align:left;
}
.emptyIcon{
  width:38px;
  height:38px;
  border-radius: var(--r10);
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--brandSoft);
  border: 1px solid rgba(37,58,75,.12);
  margin-bottom: 10px;
  font-size:18px;
}
.emptyTitle{
  font-weight:900;
  letter-spacing:-0.02em;
  font-size:16px;
  margin-bottom:6px;
}
.emptyText{
  color: var(--muted);
  font-weight:600;
  line-height:1.5;
  max-width: 70ch;
}

/* How it works */
.howList{ display:flex; flex-direction:column; gap:12px; }
.howItem{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  border-radius: var(--r12);
}
.howNum{
  width:28px;
  height:28px;
  border-radius: var(--r10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color: var(--brand);
  background: var(--brandSoft);
  border: 1px solid rgba(37,58,75,.14);
  flex:0 0 auto;
}
.howTitle{
  font-weight:900;
  letter-spacing:-0.01em;
  margin-bottom:2px;
}
.howText{
  color: var(--muted);
  font-weight:600;
  font-size:13px;
  line-height:1.45;
}

/* Builder: uploads */
.uploadGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 991px){
  .uploadGrid{ grid-template-columns: 1fr; }
}
.uploadBox{
  border:1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface2));
  border-radius: var(--r12);
  padding: 14px;
}
.uploadTitle{
  font-weight:900;
  letter-spacing:-0.01em;
  margin-bottom:2px;
}
.uploadSub{
  color: var(--muted);
  font-weight:600;
  font-size:13px;
  margin-bottom:10px;
}

/* Soft notice */
.softNotice{
  border:1px solid var(--border);
  background: var(--surface2);
  border-radius: var(--r12);
  padding:12px 14px;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.softNotice .fw-bold{ color: var(--brand); }

/* Outline list + DnD states */
.outlineList{ display:flex; flex-direction:column; gap:10px; }
#outlineList{ display:flex; flex-direction:column; gap:10px; }

.outlineItem{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius: var(--r12);
  padding: 10px 12px;
  box-shadow: 0 6px 14px rgba(2,6,23,.05);
}
.outlineItem.dragOver{
  border-color: rgba(37,58,75,.26);
  background: var(--brandSoft);
}
.outlineItem.dragging{
  opacity:.75;
  box-shadow: 0 12px 26px rgba(2,6,23,.10);
}

.outlineGrip{
  width:32px;
  height:32px;
  border-radius: var(--r10);
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--surface2);
  border:1px solid var(--border);
  color: var(--muted);
  cursor:grab;
  user-select:none;
  flex:0 0 auto;
}
.outlineMain{ flex:1; min-width:0; }
.outlineTitle{
  font-weight:900;
  letter-spacing:-0.01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Mini cards (builder bottom) */
.miniCard{
  border:1px solid var(--border);
  background: var(--surface2);
  border-radius: var(--r12);
  padding: 14px;
}
.miniTitle{
  font-weight:900;
  letter-spacing:-0.01em;
  margin-bottom:6px;
}
.miniText{
  color: var(--muted);
  font-weight:600;
  font-size:13px;
  line-height:1.5;
}

/* Player */
.playerTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin: 6px 0 14px;
}
.playerTopActions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.playerOutline{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.playerOutlineItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 12px;
  border-radius: var(--r12);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow: 0 6px 14px rgba(2,6,23,.05);
  transition: transform .10s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.playerOutlineItem:hover{
  background: var(--surface2);
  transform: translateY(-1px);
}
.playerOutlineItem.isActive{
  border-color: rgba(37,58,75,.30);
  box-shadow: 0 14px 28px rgba(37,58,75,.10);
  background: linear-gradient(180deg, var(--surface), var(--brandSoft));
}
.playerOutlineTitle{
  font-weight:900;
  letter-spacing:-0.01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  flex:1;
}

.playerStage{
  border:1px solid var(--border);
  border-radius: var(--r12);
  overflow:hidden;
  background:#0b1020;
  box-shadow: 0 18px 36px rgba(2,6,23,.12);
}
.playerVideo{
  width:100%;
  height:auto;
  display:block;
  background:#000;
}
.playerDocFrame{
  background:#fff;
}
.playerDocFrame iframe{
  width:100%;
  height: 72vh;
  border:0;
  display:block;
  background:#fff;
}

.playerNavBottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Alerts */
.alert{
  border-radius: var(--r12) !important;
  border:1px solid var(--border) !important;
  font-weight:600;
}
.alert-danger{
  border-color: rgba(220,38,38,.22) !important;
  background: rgba(220,38,38,.06) !important;
  color: #7f1d1d !important;
}
html[data-theme="dark"] .alert-danger{
  color: #fecaca !important;
}

/* Modals */
.modal-content{
  background: var(--surface) !important;
  color: var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius: var(--r12) !important;
}
.modal-header,
.modal-footer{
  border-color: var(--border) !important;
}
.btn-close{
  filter: none;
}
html[data-theme="dark"] .btn-close{
  filter: invert(1) grayscale(100%);
}

/* ---------- SaaS App Topbar (nav_app.php) ---------- */

.appTopbar{
  position: sticky;
  top: 0;
  z-index: 70;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(229,231,235,.95);
}
html[data-theme="dark"] .appTopbar{
  background: rgba(11,18,32,.88);
  border-bottom-color: var(--border);
}

.appTopbar .container{
  max-width: var(--max);
}

.appTopbarInner{
  height: 66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 0 4px;
}

.appBrand{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  min-width: 220px;
}

.appBrandLogo{
  width: 26px;
  height: 26px;
}

.appBrandText{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 14px;
  color: var(--text);
}

.appTopbarNav{
  display:flex;
  align-items:center;
  gap: 10px;
}

.appNavLink{
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: var(--r10);
  transition: background .15s ease, color .15s ease;
}
.appNavLink:hover{
  background: var(--surface2);
  color: var(--text);
}

.appNavDivider{
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 2px;
}

.appPrimaryCta{
  box-shadow: 0 10px 22px rgba(37,58,75,.12);
}

.appUserMenu{
  position: relative;
  display:flex;
  align-items:center;
}

.appUserMenu.isDemoAvatarOnly .appUserBtn{
  cursor: default;
}

.appUserMenu.isDemoAvatarOnly .appUserBtn:focus,
.appUserMenu.isDemoAvatarOnly .appUserBtn:active{
  outline: none;
  box-shadow: none;
}

.appUserMenu.isDemoAvatarOnly .appCaret{
  display: none;
}

.appUserBtn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r10);
  padding: 7px 10px;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
  color: var(--text);
}
.appUserBtn:hover{
  background: var(--surface2);
  border-color: var(--border2);
  box-shadow: 0 10px 18px rgba(2,6,23,.06);
}

.appAvatar{
  width: 28px;
  height: 28px;
  border-radius: var(--r8);
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--brandSoft);
  border: 1px solid rgba(37,58,75,.14);
  color: var(--brand);
  font-weight: 900;
  font-size: 13px;
  flex: 0 0 auto;
}

.appUserMeta{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  text-align:left;
}
.appUserName{
  font-size: 13px;
  font-weight: 900;
  letter-spacing:-0.01em;
  color: var(--text);
}
.appUserSub{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted2);
  max-width: 220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.appCaret{
  font-size: 12px;
  color: var(--muted2);
  margin-left: 2px;
}

.appUserDropdown{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r12);
  box-shadow: 0 18px 40px rgba(2,6,23,.12);
  overflow:hidden;
  display:none;
}

.appUserDropdown.open{ display:block; }

.appUserDropdownTop{
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface2));
}
.appUserDropdownName{
  font-weight: 900;
  letter-spacing:-0.01em;
}
.appUserDropdownEmail{
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted2);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.appUserDropdownItem{
  display:block;
  padding: 11px 14px;
  font-weight: 800;
  color: var(--text);
  background:var(--surface);
}
.appUserDropdownItem:hover{
  background: var(--surface2);
}

/* Theme toggle helpers for nav */
.themeToggleBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:40px;
}
.themeIconLight,
.themeIconDark{
  display:none;
}
html:not([data-theme="dark"]) .themeIconLight{ display:inline-block; }
html[data-theme="dark"] .themeIconDark{ display:inline-block; }

/* Tighten app content spacing under the sticky topbar */
.appPage{
  padding-top: 16px;
}
/* Profile page */
.statusMsg.ok{
  color: var(--success) !important;
}
.statusMsg.err{
  color: var(--danger) !important;
}

/* Mobile */
@media (max-width: 700px){
  .appTitle{ font-size:28px; }
  .card .card-body{ padding:16px !important; }
  .appPage{ padding: 14px 0 34px; }
  .appTopbarInner{ height: auto; padding: 12px 0; }
  .appBrand{ min-width: 0; }
}