/* ================================================
   LOKA PERMIS APP — app.css
   Scope: login, register, dashboard (PWA-ready)
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700;800;900&display=swap');

/* ── Reset & Variables ─────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  /* LOKA PERMIS Brand Colors */
  --primary:      #FF0000;
  --primary-dark: #D90429;
  --primary-rgb:  255,0,0;
  /* Kept for backward-compat with existing classes */
  --blue:         #FF0000;
  --blue-mid:     #D90429;
  --blue-bright:  #FF0000;
  --blue-light:   rgba(255,0,0,.12);
  --blue-dark:    #000000;
  --accent:       #FF0000;
  --white:        #ffffff;
  /* Dark theme */
  --bg:           #000000;
  --bg-2:         #0F0F0F;
  --card:         #1a1a1a;
  --card-2:       #2B2B2B;
  --border:       #2e2e2e;
  --text:         #FFFFFF;
  --text-2:       #e0e0e0;
  --muted:        #888888;
  --green:        #10b981;
  --orange:       #f59e0b;
  --purple:       #a78bfa;
  --red:          #FF0000;
  --sidebar-w:    260px;
  --topbar-h:     64px;
  --bottom-nav-h: 62px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow:       0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:    0 10px 40px rgba(0,0,0,.6);
  --radius-sm:    8px;
  --radius:       14px;
  --radius-lg:    20px;
  --ease:         cubic-bezier(.4,0,.2,1);
  --t:            .22s;
}

html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; overflow-x:hidden; }
body { font-family:'Montserrat',system-ui,sans-serif; color:var(--text); background:var(--bg); line-height:1.6; min-height:100vh; overflow-x:hidden; }
.app { overflow-x:hidden; }
a    { color:inherit; text-decoration:none; }
img  { max-width:100%; height:auto; display:block; }
button,input,select,textarea { font-family:inherit; }

/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#3a3a3a; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#555; }

/* ================================================
   AUTH PAGES  (login.php / register.php)
   ================================================ */

.auth-page { min-height:100vh; display:flex; align-items:stretch; }

/* Left branding panel — hidden on mobile */
.auth-panel {
  flex: 0 0 44%;
  background: linear-gradient(150deg, #0B0B0B 0%, #141414 60%, #2B2B2B 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem 3.5rem;
  position: relative;
  overflow: hidden;
}

.auth-panel::before,
.auth-panel::after {
  content:'';
  position:absolute;
  border-radius:50%;
  opacity:.06;
  background:#fff;
}
.auth-panel::before { width:500px; height:500px; top:-200px; right:-150px; }
.auth-panel::after  { width:360px; height:360px; bottom:-120px; left:-120px; }

.auth-panel-logo {
  display:flex; align-items:center; gap:.75rem;
  position:relative; z-index:1;
  text-decoration:none;
}
.auth-panel-logo img  { width:40px; height:40px; object-fit:contain; }
.auth-panel-logo span { font-size:1.1rem; font-weight:800; color:#F7C600; letter-spacing:.08em; }

.auth-panel-body { position:relative; z-index:1; }
.auth-panel-body h2 { font-size:2.1rem; font-weight:800; color:#fff; line-height:1.2; margin-bottom:.9rem; }
.auth-panel-body p  { color:rgba(255,255,255,.7); font-size:.95rem; line-height:1.75; margin-bottom:2rem; }

.auth-feats { list-style:none; display:flex; flex-direction:column; gap:.8rem; }
.auth-feats li {
  display:flex; align-items:center; gap:.75rem;
  font-size:.875rem; color:rgba(255,255,255,.88);
}
.auth-feats li .icon {
  width:30px; height:30px; border-radius:8px;
  background:rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; flex-shrink:0;
}

.auth-panel-foot { position:relative; z-index:1; font-size:.75rem; color:rgba(255,255,255,.35); }

/* Right form panel */
.auth-form-panel {
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:2.5rem 1.5rem;
  background:#141414;
  overflow-y:auto;
}

.auth-box { width:100%; max-width:420px; }

/* Mobile top logo (shown only on mobile) */
.auth-mobile-logo {
  display:none;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  margin-bottom:2rem;
  text-align:center;
}
.auth-mobile-logo img  { width:52px; height:52px; object-fit:contain; }
.auth-mobile-logo span { font-size:1.15rem; font-weight:800; color:var(--primary); letter-spacing:.06em; }
.auth-mobile-logo small{ font-size:.75rem; color:var(--muted); }

.auth-title       { margin-bottom:1.75rem; }
.auth-title h1    { font-size:1.65rem; font-weight:700; margin-bottom:.3rem; }
.auth-title p     { font-size:.875rem; color:var(--muted); }
.auth-title a     { color:var(--primary); font-weight:600; }
.auth-title a:hover { text-decoration:underline; }

/* Steps indicator */
.auth-steps {
  display:flex; align-items:center; gap:0;
  margin-bottom:1.75rem;
  background:var(--bg); border-radius:50px; padding:.25rem;
}
.auth-step {
  flex:1; display:flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.45rem .6rem; border-radius:50px;
  font-size:.75rem; font-weight:600; color:var(--muted);
  transition:var(--t) var(--ease);
}
.auth-step.active { background:var(--card-2); color:var(--primary); box-shadow:var(--shadow-sm); }
.auth-step.done   { color:var(--green); }
.auth-step-num {
  width:20px; height:20px; border-radius:50%;
  background:currentColor; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem; flex-shrink:0;
  opacity:.2;
}
.auth-step.active .auth-step-num,
.auth-step.done   .auth-step-num { opacity:1; }

/* Form */
.form { display:flex; flex-direction:column; gap:.95rem; }

.form-2col { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }

.fg { display:flex; flex-direction:column; gap:.35rem; }
.fg label { font-size:.8rem; font-weight:600; color:var(--text-2); }

.fi-wrap { position:relative; }
.fi-wrap .fi-icon {
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  color:#94a3b8; font-size:.82rem; pointer-events:none; z-index:1;
}

input[type=text],
input[type=email],
input[type=password],
input[type=tel],
select {
  width:100%;
  padding:.78rem 1rem .78rem 2.55rem;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:.9rem; font-family:'Montserrat',sans-serif;
  color:var(--text); background:#1e1e1e;
  transition:border-color var(--t), box-shadow var(--t), background var(--t);
  outline:none; appearance:none;
}
input::placeholder { color:#555; }
input:focus, select:focus {
  border-color:var(--primary);
  background:#222;
  box-shadow:0 0 0 3px rgba(247,198,0,.15);
}
select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:calc(100% - 1rem) center; padding-right:2.5rem; }

.fi-toggle {
  position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  color:#94a3b8; cursor:pointer; font-size:.82rem; z-index:2;
  transition:color var(--t);
}
.fi-toggle:hover { color:var(--blue-bright); }

/* Password strength */
.pw-bar { height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin-top:.4rem; }
.pw-fill { height:100%; border-radius:2px; width:0; transition:width .35s, background .35s; }
.pw-lbl  { font-size:.72rem; color:var(--muted); margin-top:.25rem; }

/* Checkbox */
.fi-wrap.fi-error input,
.fi-wrap.fi-error select { border-color:var(--red); }
.fi-wrap.fi-error .fi-icon { color:var(--red); }

.field-error { display:block; font-size:.74rem; color:var(--red); margin-top:.3rem; }

.fcheck { display:flex; align-items:flex-start; gap:.6rem; font-size:.82rem; color:var(--muted); cursor:pointer; }
.fcheck-error { color:var(--red); }
.fcheck input[type=checkbox] { width:16px; height:16px; margin-top:.15rem; accent-color:var(--blue-bright); flex-shrink:0; }
.fcheck a { color:var(--blue-bright); font-weight:500; }

/* Buttons */
.btn-primary {
  width:100%; padding:.88rem 1rem;
  background:var(--primary); color:#0B0B0B;
  border:none; border-radius:var(--radius-sm);
  font-size:.92rem; font-weight:700; font-family:inherit;
  cursor:pointer; transition:var(--t) var(--ease);
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  text-decoration:none;
}
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(247,198,0,.35); }
.btn-primary:active { transform:translateY(0); }

.btn-ghost {
  width:100%; padding:.88rem 1rem;
  background:var(--card); color:var(--text); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-size:.92rem; font-weight:600; font-family:inherit;
  cursor:pointer; transition:var(--t); display:flex; align-items:center; justify-content:center; gap:.5rem;
  text-decoration:none;
}
.btn-ghost:hover { background:var(--card-2); border-color:var(--primary); color:var(--primary); }

.form-meta { display:flex; justify-content:flex-end; }
.form-meta a { font-size:.8rem; color:var(--primary); font-weight:500; }
.form-meta a:hover { text-decoration:underline; }

.auth-divider {
  display:flex; align-items:center; gap:.75rem;
  font-size:.78rem; color:#555; margin:.1rem 0;
}
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* ================================================
   DASHBOARD
   ================================================ */

.app { display:flex; min-height:100vh; }

/* ── Sidebar ────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w);
  background:var(--blue-dark);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; height:100vh; z-index:200;
  transition:transform var(--t) var(--ease);
  overflow:hidden;
}

.sidebar-head {
  padding:1.25rem 1.25rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.sb-logo {
  display:flex; align-items:center; gap:.7rem; text-decoration:none;
}
.sb-logo img  { width:36px; height:36px; object-fit:contain; }
.sb-logo span { font-size:1rem; font-weight:700; color:#fff; letter-spacing:.07em; }

.sb-user {
  display:flex; align-items:center; gap:.8rem;
  padding:1rem 1.25rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.sb-avatar {
  width:38px; height:38px; border-radius:50%;
  background:var(--blue-bright);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.9rem; color:#fff; flex-shrink:0;
}
.sb-user-name { font-size:.875rem; font-weight:600; color:#fff; line-height:1.2; }
.sb-user-role { font-size:.7rem; color:rgba(255,255,255,.4); }

.sb-nav { flex:1; padding:.75rem 0; overflow-y:auto; }

.sb-label {
  font-size:.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:rgba(255,255,255,.28);
  padding:.6rem 1.25rem .3rem;
}

.sb-link {
  display:flex; align-items:center; gap:.8rem;
  padding:.7rem 1.25rem;
  font-size:.86rem; font-weight:500; color:rgba(255,255,255,.55);
  transition:var(--t); position:relative; text-decoration:none;
}
.sb-link i { width:18px; text-align:center; font-size:.88rem; flex-shrink:0; }
.sb-link:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.9); }
.sb-link.active { background:rgba(247,198,0,.12); color:#F7C600; font-weight:600; }
.sb-link.active::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--primary); border-radius:0 3px 3px 0;
}

.sb-badge {
  margin-left:auto; background:var(--red); color:#fff;
  font-size:.64rem; font-weight:700; padding:.1rem .42rem;
  border-radius:20px; min-width:18px; text-align:center;
}

.sb-foot {
  padding:.75rem 1.25rem;
  border-top:1px solid rgba(255,255,255,.07);
}
.sb-link.logout:hover { background:rgba(239,68,68,.15); color:var(--red); }

/* Overlay mobile */
.sb-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.45); z-index:199;
  backdrop-filter:blur(2px);
}
.sb-overlay.show { display:block; }

/* ── Main ───────────────────────────────────────── */
.main { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }

/* ── Topbar ─────────────────────────────────────── */
.topbar {
  height:var(--topbar-h);
  background:var(--card); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.75rem;
  position:sticky; top:0; z-index:100;
}

.topbar-left  { display:flex; align-items:center; gap:.9rem; }
.topbar-right { display:flex; align-items:center; gap:.6rem; }

.menu-btn {
  display:none; background:none; border:none;
  font-size:1.15rem; color:var(--muted); cursor:pointer; padding:.25rem;
  border-radius:var(--radius-sm); transition:var(--t);
}
.menu-btn:hover { background:var(--bg); color:var(--text); }

.topbar-title h2 { font-size:1.05rem; font-weight:700; line-height:1.2; }
.topbar-title p  { font-size:.75rem; color:var(--muted); }

.tb-btn {
  position:relative; width:38px; height:38px; border-radius:var(--radius-sm);
  background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); cursor:pointer; font-size:.88rem;
  transition:var(--t); text-decoration:none;
}
.tb-btn:hover { background:var(--blue-light); color:var(--blue-bright); }
.tb-dot {
  position:absolute; top:7px; right:7px; width:8px; height:8px;
  background:var(--red); border-radius:50%; border:2px solid var(--card);
}

.tb-profile {
  display:flex; align-items:center; gap:.55rem;
  padding:.3rem .65rem .3rem .3rem; border-radius:var(--radius-sm);
  border:1px solid var(--border); cursor:pointer; transition:var(--t);
}
.tb-profile:hover { background:var(--bg); }
.tb-av {
  width:30px; height:30px; border-radius:50%;
  background:var(--blue-bright); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700;
}
.tb-name { font-size:.82rem; font-weight:600; }
.tb-profile i { font-size:.65rem; color:#b8c4d8; }

/* ── Content ────────────────────────────────────── */
.content { flex:1; padding:1.75rem; padding-bottom:calc(1.75rem + 10px); }

/* Stats grid */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-bottom:1.5rem; }

.stat {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.25rem;
  display:flex; align-items:flex-start; gap:.9rem;
  box-shadow:var(--shadow-sm); transition:var(--t);
  cursor:default;
}
.stat:hover { transform:translateY(-2px); box-shadow:var(--shadow); }

.stat-ico {
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.stat-ico.c1 { background:var(--blue-light);          color:var(--blue-bright); }
.stat-ico.c2 { background:rgba(16,185,129,.12);       color:var(--green); }
.stat-ico.c3 { background:rgba(245,158,11,.12);       color:var(--orange); }
.stat-ico.c4 { background:rgba(124,58,237,.12);       color:var(--purple); }

.stat-val   { font-size:1.4rem; font-weight:700; line-height:1.15; margin-bottom:.12rem; }
.stat-lbl   { font-size:.76rem; color:var(--muted); font-weight:500; }
.stat-hint  { font-size:.7rem; color:var(--muted); margin-top:.25rem; }
.tag {
  display:inline-block; font-size:.67rem; font-weight:700;
  padding:.18rem .5rem; border-radius:20px; margin-top:.25rem;
}
.tag.green  { background:rgba(16,185,129,.12); color:var(--green); }
.tag.orange { background:rgba(245,158,11,.12); color:var(--orange); }
.tag.blue   { background:var(--blue-light);   color:var(--blue-bright); }
.tag.red    { background:rgba(239,68,68,.12); color:var(--red); }

/* Main grid */
.grid2 { display:grid; grid-template-columns:1fr 360px; gap:1.25rem; align-items:start; }

/* Section cards */
.card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden;
}

.card-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.35rem; border-bottom:1px solid var(--border);
}
.card-head h3 { font-size:.95rem; font-weight:700; display:flex; align-items:center; gap:.5rem; }
.card-head a  { font-size:.78rem; color:var(--blue-bright); font-weight:500; }
.card-head a:hover { text-decoration:underline; }

.card-body { padding:1.25rem 1.35rem; }

/* Table */
.tbl { width:100%; border-collapse:collapse; }
.tbl th {
  text-align:left; font-size:.7rem; font-weight:600;
  color:var(--muted); text-transform:uppercase; letter-spacing:.06em;
  padding:.5rem .7rem; border-bottom:1px solid var(--border);
}
.tbl td { padding:.85rem .7rem; font-size:.84rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:rgba(255,255,255,.04); }

.v-name { font-weight:600; font-size:.84rem; }
.v-type { font-size:.7rem; color:var(--muted); }
.v-ico  {
  width:32px; height:32px; border-radius:8px;
  background:var(--blue-light); color:var(--blue-bright);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; flex-shrink:0;
}
.v-cell { display:flex; align-items:center; gap:.6rem; }

.d-main { font-weight:600; font-size:.84rem; }
.d-sub  { font-size:.7rem; color:var(--muted); display:block; }

.badge {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; font-weight:600; padding:.28rem .65rem; border-radius:20px;
}
.badge::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.ok  { background:rgba(16,185,129,.12); color:var(--green); }
.badge.pnd { background:rgba(245,158,11,.12);  color:var(--orange); }
.badge.done{ background:rgba(100,116,139,.12); color:var(--muted); }
.badge.cncl{ background:rgba(239,68,68,.12);   color:var(--red); }

.icon-btn {
  width:30px; height:30px; border-radius:7px;
  border:1px solid var(--border); background:var(--card);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:.77rem; cursor:pointer;
  transition:var(--t); text-decoration:none;
}
.icon-btn:hover { background:var(--blue-light); color:var(--blue-bright); border-color:var(--blue-bright); }

/* Right column */
.right-col { display:flex; flex-direction:column; gap:1.25rem; }

/* Score ring */
.score-ring-wrap { text-align:center; padding:.75rem 0 1.25rem; }
.score-ring {
  width:88px; height:88px; border-radius:50%; margin:0 auto .65rem;
  background: conic-gradient(var(--blue-bright) calc(var(--pct,72) * 3.6deg), var(--border) 0);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.score-ring::after { content:''; position:absolute; inset:9px; background:var(--card); border-radius:50%; }
.score-ring .sn { position:relative; z-index:1; font-size:1.25rem; font-weight:700; }
.score-ring-wrap small { font-size:.75rem; color:var(--muted); }

.themes { display:flex; flex-direction:column; gap:.8rem; }
.theme-row-head { display:flex; justify-content:space-between; font-size:.78rem; margin-bottom:.3rem; }
.theme-row-head span:first-child { font-weight:500; }
.theme-row-head span:last-child  { font-weight:700; color:var(--muted); }
.bar { height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
.bar-fill { height:100%; border-radius:3px; transition:width 1s var(--ease); }
.bar-fill.b  { background:var(--blue-bright); }
.bar-fill.g  { background:var(--green); }
.bar-fill.o  { background:var(--orange); }
.bar-fill.p  { background:var(--purple); }

/* Quick actions */
.actions { display:flex; flex-direction:column; gap:.55rem; }
.action {
  display:flex; align-items:center; gap:.8rem;
  padding:.8rem 1rem; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); background:var(--card);
  cursor:pointer; transition:var(--t); text-decoration:none; color:var(--text);
}
.action:hover { border-color:var(--blue-bright); background:var(--blue-light); }
.action-ico {
  width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:.88rem; flex-shrink:0;
}
.action-ico.c1 { background:var(--blue-light);          color:var(--blue-bright); }
.action-ico.c2 { background:rgba(16,185,129,.12);       color:var(--green); }
.action-ico.c3 { background:rgba(245,158,11,.12);       color:var(--orange); }
.action-ico.c4 { background:rgba(124,58,237,.12);       color:var(--purple); }
.action-txt strong { display:block; font-size:.82rem; font-weight:600; }
.action-txt span   { font-size:.72rem; color:var(--muted); }
.action i.arr { margin-left:auto; color:#c8d3e6; font-size:.78rem; }
.action:hover i.arr { color:var(--blue-bright); }

/* Contact card */
.cta-card {
  background:var(--primary);
  border-radius:var(--radius); padding:1.25rem 1.35rem; color:#0B0B0B;
}
.cta-card h4 { font-size:.92rem; font-weight:700; margin-bottom:.35rem; }
.cta-card p  { font-size:.78rem; color:rgba(0,0,0,.6); margin-bottom:.9rem; }
.cta-links { display:flex; flex-direction:column; gap:.45rem; }
.cta-link {
  display:flex; align-items:center; gap:.6rem;
  font-size:.8rem; color:rgba(0,0,0,.8);
  background:rgba(0,0,0,.1); padding:.45rem .85rem;
  border-radius:8px; transition:var(--t); text-decoration:none;
}
.cta-link:hover { background:rgba(0,0,0,.2); }
.cta-link i { width:14px; text-align:center; }

/* Documents */
.docs { display:flex; flex-direction:column; }
.doc {
  display:flex; align-items:center; gap:.9rem;
  padding:.8rem 0; border-bottom:1px solid var(--border);
}
.doc:last-child { border:none; }
.doc-ico {
  width:36px; height:36px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:.88rem; flex-shrink:0;
}
.doc-ico.ok   { background:rgba(16,185,129,.1);  color:var(--green); }
.doc-ico.miss { background:rgba(239,68,68,.1);   color:var(--red); }
.doc-ico.pend { background:rgba(245,158,11,.1);  color:var(--orange); }
.doc-info { flex:1; }
.doc-info strong { display:block; font-size:.83rem; font-weight:600; }
.doc-info span   { font-size:.72rem; color:var(--muted); }
.doc-act {
  font-size:.72rem; font-weight:600; padding:.28rem .65rem;
  border-radius:7px; text-decoration:none; transition:var(--t);
  white-space:nowrap; flex-shrink:0;
}
.doc-act.up   { background:var(--blue-light); color:var(--primary); }
.doc-act.view { background:rgba(16,185,129,.1); color:var(--green); }
.doc-act.up:hover   { background:var(--primary); color:#0B0B0B; }
.doc-act.view:hover { background:var(--green);       color:#fff; }

/* ── Bottom nav (mobile only) ───────────────────── */
.bottom-nav {
  display:none !important;
  position:fixed; bottom:0; left:0; right:0; height:var(--bottom-nav-h);
  background:var(--card); border-top:1px solid var(--border);
  z-index:300; padding:0 .5rem;
  padding-bottom:env(safe-area-inset-bottom,.5rem);
}
.bottom-nav ul { display:flex; height:100%; list-style:none; }
.bottom-nav li { flex:1; }
.bottom-nav a {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; gap:.2rem; text-decoration:none;
  font-size:.62rem; font-weight:500; color:var(--muted);
  transition:var(--t); position:relative; border-radius:var(--radius-sm);
}
.bottom-nav a i { font-size:1.15rem; }
.bottom-nav a.active { color:var(--blue-bright); }
.bottom-nav a.active i { transform:translateY(-1px); }
.bottom-nav a .bnav-badge {
  position:absolute; top:4px; right:calc(50% - 16px);
  width:16px; height:16px; background:var(--red); color:#fff;
  border-radius:50%; font-size:.58rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--card);
}

/* ================================================
   PWA  — Install Banner + Guide Modal
   ================================================ */

/* Install banner (bottom of screen on desktop too) */
.pwa-banner {
  position:fixed; bottom:calc(var(--bottom-nav-h) + .75rem); left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--blue-dark); color:#fff;
  border-radius:var(--radius); padding:.9rem 1.25rem;
  display:flex; align-items:center; gap:1rem;
  box-shadow:var(--shadow-lg); min-width:320px; max-width:440px; width:90%;
  opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s;
  z-index:400;
}
.pwa-banner.show { opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0); }
.pwa-banner-ico { font-size:1.75rem; flex-shrink:0; }
.pwa-banner-txt strong { display:block; font-size:.9rem; font-weight:700; margin-bottom:.1rem; }
.pwa-banner-txt span   { font-size:.77rem; color:rgba(255,255,255,.65); }
.pwa-banner-btns { display:flex; gap:.5rem; margin-left:auto; flex-shrink:0; }
.pwa-btn {
  padding:.45rem .85rem; border-radius:8px;
  font-size:.78rem; font-weight:600; cursor:pointer;
  border:none; font-family:inherit; transition:var(--t);
}
.pwa-btn.install { background:var(--primary); color:#0B0B0B; }
.pwa-btn.install:hover { background:var(--primary-dark); }
.pwa-btn.dismiss { background:rgba(255,255,255,.1); color:rgba(255,255,255,.7); }
.pwa-btn.dismiss:hover { background:rgba(255,255,255,.2); }

/* PWA Guide Modal */
.pwa-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:500;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
  backdrop-filter:blur(3px);
}
.pwa-modal-overlay.show { opacity:1; pointer-events:all; }

.pwa-modal {
  background:var(--card); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  width:100%; max-width:500px;
  padding:1.5rem 1.5rem 2rem;
  transform:translateY(40px); transition:transform .35s var(--ease);
}
.pwa-modal-overlay.show .pwa-modal { transform:translateY(0); }

.pwa-modal-pull {
  width:36px; height:4px; background:#d1d8e8; border-radius:2px;
  margin:0 auto 1.25rem;
}

.pwa-modal h3 { font-size:1.1rem; font-weight:700; margin-bottom:.35rem; }
.pwa-modal > p { font-size:.85rem; color:var(--muted); margin-bottom:1.5rem; }

.pwa-os-tabs {
  display:flex; gap:.5rem; margin-bottom:1.25rem;
}
.pwa-os-tab {
  flex:1; padding:.55rem; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-size:.8rem; font-weight:600;
  color:var(--muted); background:var(--card-2); cursor:pointer;
  transition:var(--t); display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.pwa-os-tab.active { background:var(--blue-light); border-color:var(--primary); color:var(--primary); }

.pwa-steps { display:flex; flex-direction:column; gap:.75rem; list-style:none; }
.pwa-steps li {
  display:flex; align-items:flex-start; gap:.85rem;
  font-size:.875rem; color:var(--text);
}
.pwa-step-num {
  width:28px; height:28px; border-radius:50%;
  background:var(--blue-light); color:var(--blue-bright);
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; flex-shrink:0;
}
.pwa-steps li span { line-height:1.65; padding-top:.15rem; }
.pwa-steps li span strong { color:var(--text); }

.pwa-modal-close {
  margin-top:1.5rem; width:100%;
  padding:.8rem; background:var(--bg); border:none;
  border-radius:var(--radius-sm); font-size:.88rem; font-weight:600;
  color:var(--muted); cursor:pointer; font-family:inherit; transition:var(--t);
}
.pwa-modal-close:hover { background:var(--border); }

/* Floating install btn (iOS, persistent) */
.pwa-float {
  position:fixed; bottom:1rem; right:1rem;
  background:var(--blue); color:#fff;
  width:48px; height:48px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  font-size:1.1rem; box-shadow:var(--shadow-lg); cursor:pointer; z-index:400;
  transition:var(--t); border:none;
}
.pwa-float.show { display:flex; }
.pwa-float:hover { background:var(--blue-bright); transform:scale(1.05); }

/* ================================================
   RESPONSIVE — 8 breakpoints
   1280 · 1024 · 900 · 768 · 640 · 520 · 420 · 360
   ================================================ */

/* ── 1280px : grand écran, léger resserrement ── */
@media (max-width:1280px) {
  .content { padding:1.5rem; }
}

/* ── 1200px : petits laptops, tablettes paysage ── */
@media (max-width:1200px) {
  :root { --sidebar-w:230px; }
  .stats    { grid-template-columns:repeat(2,1fr); gap:1rem; }
  .grid2    { grid-template-columns:1fr; }
  .right-col{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
}

/* ── 1024px : tablette paysage, sidebar collapse ── */
@media (max-width:1024px) {
  :root { --sidebar-w:260px; }
  .sidebar     { transform:translateX(-100%); box-shadow:none; }
  .sidebar.open{ transform:translateX(0); box-shadow:4px 0 30px rgba(0,0,0,.25); }
  .main        { margin-left:0; }
  .menu-btn    { display:flex; }
  .content     { padding:1.5rem; }
  .stats       { grid-template-columns:repeat(2,1fr); }
  .right-col   { grid-template-columns:1fr 1fr; }
}

/* ── 900px : tablette portrait ── */
@media (max-width:900px) {
  .profile-layout { grid-template-columns:1fr; }
  .reserv-stats   { grid-template-columns:repeat(3,1fr); }
  .card-head h3   { font-size:.88rem; }
  .onboarding-steps { gap:.4rem; }
  .onboarding-head h3 { font-size:.92rem; }
}

/* ── 768px : mobile landscape + petites tablettes ── */
@media (max-width:768px) {
  /* Auth */
  .auth-panel        { display:none; }
  .auth-mobile-logo  { display:flex; }
  .auth-form-panel   { align-items:flex-start; padding:1.75rem 1.25rem 2.5rem; }
  .auth-box          { max-width:100%; }

  /* Layout */
  .content { padding:1.1rem; }

  /* Grids */
  .stats     { grid-template-columns:1fr 1fr; gap:.85rem; }
  .right-col { grid-template-columns:1fr; }
  .grid2     { grid-template-columns:1fr; gap:1rem; }

  /* Cards */
  .card-head  { padding:.9rem 1rem; }
  .card-body  { padding:1rem; }
  .stat       { padding:1rem; gap:.75rem; }
  .stat-val   { font-size:1.2rem; }
  .stat-ico   { width:40px; height:40px; font-size:1rem; border-radius:10px; }

  /* Topbar */
  :root          { --topbar-h:56px; }
  .topbar        { padding:0 1rem; height:56px; }
  .topbar-title h2{ font-size:.95rem; }
  .topbar-title p { display:none; }
  .tb-profile     { padding:.3rem .5rem .3rem .3rem; }

  /* Onboarding */
  .onboarding       { padding:1rem 1.1rem; }
  .onboarding-bar   { margin-bottom:.75rem; }

  /* Table */
  .tbl th:nth-child(3),
  .tbl td:nth-child(3) { display:none; }

  /* Profile */
  .profile-grid  { grid-template-columns:1fr; }
  .profile-layout{ gap:1rem; }

  /* Reservations */
  .reserv-stats  { grid-template-columns:1fr 1fr; gap:.85rem; }
  .cal-strip     { padding:.9rem 1rem; }

  /* PWA modal — bottom sheet full width */
  .pwa-modal { border-radius:var(--radius-lg) var(--radius-lg) 0 0; padding:1.25rem 1.25rem 1.75rem; }
}

/* ── 640px : grands mobiles ── */
@media (max-width:640px) {
  /* Topbar : masquer le nom utilisateur */
  .tb-name { display:none; }
  .tb-profile { padding:.25rem; }

  /* Auth form */
  .auth-form-panel { padding:1.25rem 1rem 2rem; }
  .auth-title h1   { font-size:1.45rem; }

  /* Stats */
  .stat-val { font-size:1.1rem; }

  /* Reservations */
  .reserv-card { grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:.6rem; }
  .rc-price   { grid-column:2; justify-self:end; }
  .rc-actions { grid-column:1/-1; justify-content:flex-end; }
  .reserv-stats { grid-template-columns:1fr 1fr; }

  /* Toast */
  .toast-zone { width:calc(100vw - 1.5rem); right:.75rem; top:.75rem; }

  /* Table : masquer colonne durée */
  .tbl th:nth-child(4),
  .tbl td:nth-child(4) { display:none; }
}

/* ── 520px : mobile portrait standard ── */
@media (max-width:520px) {
  .form-2col     { grid-template-columns:1fr; }
  .stats         { grid-template-columns:1fr 1fr; }
  .content       { padding:.85rem; }
  .topbar        { padding:0 .85rem; }

  /* Actions rapides */
  .action-txt span { display:none; }
  .action { padding:.7rem .85rem; }

  /* Bottom nav labels */
  .bottom-nav a { font-size:.58rem; gap:.12rem; }
  .bottom-nav a i { font-size:1.05rem; }

  /* Onboarding */
  .onboarding-head { flex-direction:column; align-items:flex-start; gap:.2rem; }
  .onboarding-head span { font-size:.75rem; }

  /* Calendrier */
  .cal-day { font-size:.72rem; border-radius:6px; }
  .cal-dow { font-size:.6rem; }

  /* Plan cards */
  .plan-card { flex-direction:column; align-items:flex-start; gap:.65rem; }

  /* Profile meta */
  .profile-grid { grid-template-columns:1fr; }
  .reserv-stats { grid-template-columns:1fr 1fr; }
}

/* ── 420px : petits mobiles ── */
@media (max-width:420px) {
  .stats       { grid-template-columns:1fr; }
  .reserv-stats{ grid-template-columns:1fr; }
  .content     { padding:.7rem; }

  /* Auth */
  .auth-mobile-logo img  { width:44px; height:44px; }
  .auth-mobile-logo span { font-size:1rem; }
  .auth-title h1         { font-size:1.3rem; }
  .btn-primary, .btn-ghost { font-size:.86rem; padding:.82rem; }

  /* Cards */
  .card-body  { padding:.85rem; }
  .card-head  { padding:.8rem .85rem; }
  .stat       { padding:.85rem; gap:.65rem; }
  .stat-ico   { width:36px; height:36px; font-size:.88rem; border-radius:8px; }
  .stat-val   { font-size:1rem; }

  /* Bottom nav masquer labels */
  .bottom-nav a span:not(.bnav-badge) { display:none; }
  .bottom-nav a { justify-content:center; }
  .bottom-nav a i { font-size:1.2rem; }

  /* Topbar */
  .theme-toggle { display:none; }
  .topbar-title h2 { font-size:.88rem; }
}

/* ── 360px : très petits mobiles (Galaxy S8, etc.) ── */
@media (max-width:360px) {
  .content  { padding:.55rem; }
  .topbar   { padding:0 .65rem; }
  .tb-btn   { width:32px; height:32px; }
  .tb-av    { width:26px; height:26px; font-size:.65rem; }

  .auth-form-panel { padding:1rem .85rem 2rem; }
  .auth-steps      { display:none; }

  .pwa-banner      { min-width:0; width:calc(100vw - 1.2rem); }
  .pwa-banner-txt span { display:none; }
}

/* ================================================
   WAYKO — always dark, no toggle needed
   ================================================ */
/* Dark mode vars are already the default in :root */
[data-theme="dark"] .auth-box    { color:var(--text); }
[data-theme="dark"] input[type=text],
[data-theme="dark"] input[type=email],
[data-theme="dark"] input[type=password],
[data-theme="dark"] input[type=tel],
[data-theme="dark"] select       { background:#0f172a; border-color:#2d3f58; color:#f1f5f9; }
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus { background:#0f172a; }
[data-theme="dark"] .btn-ghost   { background:#1e293b; color:#93c5fd; border-color:#2d3f58; }
[data-theme="dark"] .btn-ghost:hover { background:#2d3f58; }
[data-theme="dark"] .score-ring::after { background:#1e293b; }
[data-theme="dark"] .tb-btn      { background:#0f172a; border-color:#2d3f58; }
[data-theme="dark"] .tb-profile  { border-color:#2d3f58; }
[data-theme="dark"] .tb-profile:hover { background:#0f172a; }
[data-theme="dark"] .action      { background:#1e293b; border-color:#2d3f58; }
[data-theme="dark"] .action:hover{ background:#2d3f58; border-color:var(--blue-bright); }
[data-theme="dark"] .tbl tr:hover td { background:#253347; }
[data-theme="dark"] .icon-btn    { background:#1e293b; border-color:#2d3f58; color:#94a3b8; }
[data-theme="dark"] .doc-act.view { background:rgba(16,185,129,.15); }
[data-theme="dark"] .doc-act.up  { background:#1e3a5f; }
[data-theme="dark"] .fcheck      { color:#94a3b8; }
[data-theme="dark"] .auth-steps  { background:#0f172a; }
[data-theme="dark"] .auth-step.active { background:#1e293b; }
[data-theme="dark"] .pwa-modal   { background:#1e293b; color:var(--text); }
[data-theme="dark"] .pwa-modal > p { color:#94a3b8; }
[data-theme="dark"] .pwa-os-tab  { background:#0f172a; border-color:#2d3f58; color:#94a3b8; }
[data-theme="dark"] .pwa-os-tab.active { background:#1e3a5f; border-color:var(--blue-bright); }
[data-theme="dark"] .pwa-modal-close { background:#0f172a; color:#94a3b8; }
[data-theme="dark"] .pwa-modal-close:hover { background:#2d3f58; }

/* Theme toggle button */
.theme-toggle {
  background:none; border:none; cursor:pointer;
  width:38px; height:38px; border-radius:var(--radius-sm);
  background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:.88rem; transition:var(--t);
}
.theme-toggle:hover { background:var(--blue-light); color:var(--blue-bright); }

/* ================================================
   TOAST NOTIFICATIONS
   ================================================ */
.toast-zone {
  position:fixed; top:1.25rem; right:1.25rem;
  display:flex; flex-direction:column; gap:.6rem;
  z-index:9999; pointer-events:none;
  width:320px; max-width:calc(100vw - 2rem);
}

.toast {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:.85rem 1rem;
  box-shadow:var(--shadow-lg);
  display:flex; align-items:flex-start; gap:.75rem;
  pointer-events:all;
  animation:toastIn .3s var(--ease);
  transition:opacity .3s, transform .3s;
}
.toast.hide { opacity:0; transform:translateX(20px); pointer-events:none; }

@keyframes toastIn {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0); }
}

.toast-ico {
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.88rem;
}
.toast-ico.success { background:rgba(16,185,129,.12); color:var(--green); }
.toast-ico.error   { background:rgba(239,68,68,.12);  color:var(--red); }
.toast-ico.info    { background:var(--blue-light);    color:var(--blue-bright); }
.toast-ico.warn    { background:rgba(245,158,11,.12); color:var(--orange); }

.toast-body  { flex:1; }
.toast-title { font-size:.85rem; font-weight:600; margin-bottom:.15rem; }
.toast-msg   { font-size:.78rem; color:var(--muted); line-height:1.5; }

.toast-close {
  background:none; border:none; cursor:pointer;
  color:var(--muted); font-size:.8rem; padding:.1rem; flex-shrink:0;
  transition:var(--t);
}
.toast-close:hover { color:var(--text); }

.toast-progress {
  position:absolute; bottom:0; left:0;
  height:3px; background:currentColor; opacity:.3;
  border-radius:0 0 var(--radius) var(--radius);
  animation:toastProgress linear forwards;
}
@keyframes toastProgress { from { width:100%; } to { width:0; } }

.toast { position:relative; overflow:hidden; }

/* ================================================
   SKELETON LOADING
   ================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, #dde4f0 50%, var(--border) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:6px;
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #2d3f58 25%, #3a5070 50%, #2d3f58 75%);
  background-size:200% 100%;
}
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

.sk-line  { height:14px; margin-bottom:.6rem; }
.sk-title { height:20px; width:60%; margin-bottom:1rem; }
.sk-card  { height:80px; border-radius:var(--radius); margin-bottom:1rem; }

/* ================================================
   ONBOARDING WIDGET
   ================================================ */
.onboarding {
  background:linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%);
  border-radius:var(--radius); padding:1.35rem 1.5rem;
  color:#fff; margin-bottom:1.5rem; position:relative; overflow:hidden;
}
.onboarding::after {
  content:''; position:absolute; right:-40px; top:-40px;
  width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.07);
}
.onboarding-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.onboarding-head h3 { font-size:1rem; font-weight:700; }
.onboarding-head span { font-size:.82rem; color:rgba(255,255,255,.75); }
.onboarding-bar { height:8px; background:rgba(255,255,255,.25); border-radius:4px; overflow:hidden; margin-bottom:1rem; }
.onboarding-fill { height:100%; background:#fff; border-radius:4px; transition:width 1.2s var(--ease); }
.onboarding-steps { display:flex; gap:.6rem; flex-wrap:wrap; }
.ob-step {
  display:flex; align-items:center; gap:.4rem;
  font-size:.75rem; color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.12); padding:.3rem .65rem;
  border-radius:20px;
}
.ob-step.done { background:rgba(255,255,255,.25); color:#fff; }
.ob-step.done::before { content:'✓ '; }

/* ================================================
   PAGE — RESERVATIONS
   ================================================ */
.page-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.5rem; flex-wrap:wrap; gap:.75rem;
}
.page-header h2 { font-size:1.3rem; font-weight:700; }
.page-header p  { font-size:.85rem; color:var(--muted); margin-top:.15rem; }

.btn-new {
  display:flex; align-items:center; gap:.5rem;
  padding:.7rem 1.2rem; background:var(--blue-bright); color:#fff;
  border:none; border-radius:var(--radius-sm);
  font-size:.875rem; font-weight:600; font-family:inherit;
  cursor:pointer; transition:var(--t); text-decoration:none; white-space:nowrap;
}
.btn-new:hover { background:var(--blue-mid); transform:translateY(-1px); box-shadow:0 4px 14px rgba(30,91,255,.3); }

/* Filter tabs */
.filter-tabs {
  display:flex; gap:.5rem; margin-bottom:1.25rem;
  overflow-x:auto; padding-bottom:.25rem; scrollbar-width:none;
}
.filter-tabs::-webkit-scrollbar { display:none; }
.ftab {
  padding:.45rem 1rem; border-radius:50px;
  border:1.5px solid var(--border); background:var(--card);
  font-size:.8rem; font-weight:600; color:var(--muted);
  cursor:pointer; transition:var(--t); white-space:nowrap;
  display:flex; align-items:center; gap:.4rem;
}
.ftab:hover  { border-color:var(--blue-bright); color:var(--blue-bright); }
.ftab.active { background:var(--blue-bright); border-color:var(--blue-bright); color:#fff; }
.ftab .cnt   { background:rgba(255,255,255,.3); padding:.05rem .4rem; border-radius:20px; font-size:.7rem; }
.ftab:not(.active) .cnt { background:var(--bg); color:var(--muted); }

/* Reservations grid */
.reserv-grid { display:flex; flex-direction:column; gap:.85rem; }

.reserv-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.1rem 1.25rem;
  box-shadow:var(--shadow-sm); transition:var(--t);
  display:grid; grid-template-columns:auto 1fr auto auto;
  align-items:center; gap:1.1rem;
}
.reserv-card:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.reserv-card.upcoming { border-left:3px solid var(--green); }
.reserv-card.past     { border-left:3px solid var(--border); opacity:.85; }
.reserv-card.pending  { border-left:3px solid var(--orange); }

.rc-date {
  width:54px; text-align:center; flex-shrink:0;
}
.rc-day  { font-size:1.6rem; font-weight:800; line-height:1; color:var(--blue-bright); }
.rc-month{ font-size:.7rem;  font-weight:600; text-transform:uppercase; color:var(--muted); }

.rc-title { font-size:.9rem; font-weight:700; margin-bottom:.2rem; }
.rc-meta  { font-size:.77rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:.4rem .9rem; }
.rc-meta span { display:flex; align-items:center; gap:.3rem; }

.rc-price { text-align:right; flex-shrink:0; }
.rc-price strong { display:block; font-size:1.05rem; font-weight:700; color:var(--text); }
.rc-price small  { font-size:.7rem; color:var(--muted); }

.rc-actions { display:flex; gap:.45rem; flex-shrink:0; }

/* Mini calendar strip */
.cal-strip {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.1rem 1.25rem;
  margin-bottom:1.25rem; box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.cal-strip-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.9rem;
}
.cal-strip-head h4 { font-size:.9rem; font-weight:700; }
.cal-nav { display:flex; gap:.3rem; }
.cal-nav button {
  width:28px; height:28px; border-radius:7px;
  border:1px solid var(--border); background:var(--bg);
  color:var(--muted); cursor:pointer; font-size:.8rem; transition:var(--t);
}
.cal-nav button:hover { background:var(--blue-light); color:var(--blue-bright); }
.cal-days {
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:.3rem; text-align:center;
}
.cal-dow { font-size:.66rem; font-weight:700; color:var(--muted); padding:.2rem 0; text-transform:uppercase; }
.cal-day {
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:.78rem; border-radius:8px; cursor:pointer; font-weight:500;
  transition:var(--t); position:relative;
}
.cal-day:hover         { background:var(--blue-light); color:var(--blue-bright); }
.cal-day.today         { background:var(--blue-bright); color:#fff; font-weight:700; }
.cal-day.has-event::after {
  content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--green);
}
.cal-day.today.has-event::after { background:#fff; }
.cal-day.other-month   { color:var(--border); cursor:default; }
.cal-day.other-month:hover { background:none; color:var(--border); }

/* Stats bar for reservations page */
.reserv-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; }
.rstat {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem 1.15rem;
  display:flex; align-items:center; gap:.85rem;
  box-shadow:var(--shadow-sm);
}
.rstat-ico { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.rstat-val { font-size:1.25rem; font-weight:700; line-height:1.2; }
.rstat-lbl { font-size:.72rem; color:var(--muted); }

/* ================================================
   PAGE — PROFILE
   ================================================ */
.profile-layout { display:grid; grid-template-columns:280px 1fr; gap:1.5rem; align-items:start; }

/* Profile sidebar card */
.profile-sidebar-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.profile-banner {
  height:80px;
  background:linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%);
}
.profile-av-wrap {
  padding:0 1.25rem 1.25rem;
  margin-top:-32px; position:relative;
}
.profile-avatar {
  width:64px; height:64px; border-radius:50%;
  background:var(--blue-bright); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:700; border:3px solid var(--card);
  position:relative; cursor:pointer;
}
.profile-av-edit {
  position:absolute; bottom:0; right:0;
  width:20px; height:20px; border-radius:50%;
  background:var(--blue-bright); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.6rem; border:2px solid var(--card);
}
.profile-name  { font-size:1rem; font-weight:700; margin-top:.6rem; }
.profile-role  { font-size:.75rem; color:var(--muted); margin-bottom:.9rem; }
.profile-meta  { display:flex; flex-direction:column; gap:.5rem; }
.profile-meta-item {
  display:flex; align-items:center; gap:.6rem;
  font-size:.8rem; color:var(--muted);
}
.profile-meta-item i { width:14px; text-align:center; color:var(--blue-bright); }

.profile-nav  { border-top:1px solid var(--border); padding:.6rem; margin-top:1rem; }
.profile-nav a {
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem .75rem; border-radius:var(--radius-sm);
  font-size:.84rem; font-weight:500; color:var(--muted);
  transition:var(--t); text-decoration:none;
}
.profile-nav a i { width:16px; text-align:center; font-size:.85rem; }
.profile-nav a:hover  { background:var(--bg); color:var(--text); }
.profile-nav a.active { background:var(--blue-light); color:var(--blue-bright); font-weight:600; }

/* Profile form sections */
.profile-sections { display:flex; flex-direction:column; gap:1.25rem; }

.section-title-bar {
  display:flex; align-items:center; gap:.6rem;
  font-size:.88rem; font-weight:700; margin-bottom:1.1rem;
  padding-bottom:.75rem; border-bottom:1px solid var(--border);
}
.section-title-bar i { color:var(--blue-bright); }

.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.profile-grid.full { grid-template-columns:1fr; }

/* Toggle switch */
.toggle-wrap {
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 0; border-bottom:1px solid var(--border);
}
.toggle-wrap:last-child { border:none; }
.toggle-info strong { display:block; font-size:.85rem; font-weight:600; }
.toggle-info span   { font-size:.75rem; color:var(--muted); }
.toggle {
  position:relative; width:42px; height:24px;
  flex-shrink:0; cursor:pointer;
}
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0; border-radius:24px;
  background:var(--border); transition:.3s;
}
.toggle-slider::before {
  content:''; position:absolute;
  width:18px; height:18px; border-radius:50%;
  background:#fff; bottom:3px; left:3px; transition:.3s;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.toggle input:checked + .toggle-slider { background:var(--blue-bright); }
.toggle input:checked + .toggle-slider::before { transform:translateX(18px); }

/* Plan badge */
.plan-card {
  background:linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  border-radius:var(--radius); padding:1.1rem 1.35rem; color:#fff;
  display:flex; align-items:center; justify-content:space-between;
}
.plan-info strong { display:block; font-size:1rem; font-weight:700; margin-bottom:.2rem; }
.plan-info span   { font-size:.78rem; color:rgba(255,255,255,.65); }
.plan-badge {
  background:rgba(255,255,255,.15); padding:.35rem .85rem;
  border-radius:20px; font-size:.78rem; font-weight:700;
  border:1px solid rgba(255,255,255,.25);
}

/* Danger zone */
.danger-zone .card-body { display:flex; flex-direction:column; gap:.85rem; }
.danger-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 0; border-bottom:1px solid var(--border);
}
.danger-row:last-child { border:none; }
.danger-row-info strong { display:block; font-size:.85rem; font-weight:600; }
.danger-row-info span   { font-size:.75rem; color:var(--muted); }
.btn-danger {
  padding:.45rem .9rem; border-radius:var(--radius-sm);
  border:1.5px solid var(--red); color:var(--red); background:transparent;
  font-size:.78rem; font-weight:600; font-family:inherit;
  cursor:pointer; transition:var(--t); white-space:nowrap;
}
.btn-danger:hover { background:var(--red); color:#fff; }

/* RESPONSIVE ADDITIONS — merged into main block above */