/* ─────────────────────────────────────────────────────────────────────────
   shell.css — HireMUA shared chrome
   All app pages (dashboard, bookings, booking-view, settings…) link to this.
   Do NOT put page-specific styles here. Only topbar, rail, body, tokens.
───────────────────────────────────────────────────────────────────────── */

:root {
  --c-primary:        #8B2252;
  --c-primary-dark:   #6A1A3E;
  --c-on-primary:     #FFFFFF;
  --c-primary-cnt:    #FFD7ED;
  --c-on-primary-cnt: #3C0029;
  --c-surface:        #FFFBFE;
  --c-surface-var:    #EEDDE6;
  --c-on-surface:     #1C1B1E;
  --c-on-surf-var:    #4E3B47;
  --c-outline:        #7F6773;
  --c-outline-var:    #D1BFCA;
  --c-success:        #1B6E35;
  --c-success-cnt:    #B7F0CA;
  --c-error:          #BA1A1A;
  --c-error-cnt:      #FFDAD6;
  --c-warning:        #7A5200;
  --c-warning-cnt:    #FFDEAD;
  --c-info:           #005FAF;
  --c-info-cnt:       #D6E3FF;
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:28px; --r-full:9999px;
  --font:  'Roboto', system-ui, sans-serif;
  --font-d:'Playfair Display', Georgia, serif;
  --font-m:'Roboto Mono', monospace;
  --shadow-1:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
  --shadow-2:0 4px 12px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.05);
  --nav-w:72px;
  --top-h:64px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--c-on-surface); background: #F5EDF2; font-size: 14px; line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }

.icon {
  font-family: 'Material Symbols Outlined'; font-size: 20px; line-height: 1;
  font-weight: 400; font-style: normal; display: inline-block;
  white-space: nowrap; vertical-align: middle;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased; user-select: none;
}

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width:18px; height:18px; border:2px solid var(--c-outline-var); border-top-color:var(--c-primary); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; }
.loading-row { display:flex; align-items:center; justify-content:center; padding:40px; color:var(--c-on-surf-var); gap:10px; font-size:13px; }

/* ── Topbar ───────────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--top-h); background: var(--c-surface);
  border-bottom: 1px solid var(--c-outline-var);
  display: flex; align-items: center;
  padding: 0 16px 0 calc(var(--nav-w) + 16px); gap: 16px;
}
.topbar-title { font-family: var(--font-d); font-size: 18px; font-weight: 600; color: var(--c-primary); flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--c-on-surf-var); transition: background .15s; position: relative;
}
.icon-btn:hover { background: var(--c-surface-var); }
.notif-badge {
  position: absolute; top: 6px; right: 6px;
  min-width: 16px; height: 16px; border-radius: 8px;
  background: var(--c-error); color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--c-surface); padding: 0 3px;
}

.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary-cnt), var(--c-primary));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; border: none; font-family: var(--font-d);
}
.avatar-wrap { position: relative; }
.avatar-dd {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--c-surface); border: 1px solid var(--c-outline-var);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  padding: 8px; min-width: 190px; z-index: 300; display: none;
}
.avatar-dd.open { display: block; }
.dd-name { padding: 8px 12px 10px; border-bottom: 1px solid var(--c-outline-var); margin-bottom: 4px; }
.dd-name strong { display: block; font-size: 14px; font-weight: 500; }
.dd-name span { font-size: 12px; color: var(--c-on-surf-var); }
.dd-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: var(--r-sm); font-size: 14px; color: var(--c-on-surface);
  cursor: pointer; transition: background .15s;
  width: 100%; background: none; border: none; font-family: var(--font); text-decoration: none;
}
.dd-item:hover { background: var(--c-surface-var); }
.dd-item .icon { font-size: 18px; color: var(--c-on-surf-var); }
.dd-signout { color: var(--c-error); }
.dd-signout .icon { color: var(--c-error); }

/* ── Rail nav ─────────────────────────────────────────────────────────── */
.rail {
  position: fixed; top: var(--top-h); left: 0; bottom: 0; z-index: 90;
  width: var(--nav-w); background: var(--c-surface);
  border-right: 1px solid var(--c-outline-var);
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 0; gap: 4px;
}
.rail-item {
  width: 56px; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 6px 0; border: none; background: transparent;
  cursor: pointer; border-radius: var(--r-lg); text-decoration: none;
  color: var(--c-on-surf-var); transition: color .15s; font-family: var(--font);
}
.rail-item:hover .rail-indicator { background: var(--c-surface-var); }
.rail-indicator {
  width: 56px; height: 32px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.rail-item.active .rail-indicator { background: var(--c-primary-cnt); }
.rail-item.active .icon { color: var(--c-primary); }
.rail-item.active { color: var(--c-primary); }
.rail-label { font-size: 11px; font-weight: 500; }
.rail-div { width: 40px; height: 1px; background: var(--c-outline-var); margin: 8px 0; }

/* ── Main content area ────────────────────────────────────────────────── */
.main { margin-top: var(--top-h); margin-left: var(--nav-w); padding: 24px; }
.page-title { font-size: 22px; font-weight: 500; margin-bottom: 4px; }
.page-sub { font-size: 13px; color: var(--c-on-surf-var); margin-bottom: 24px; }

/* ── Bottom nav (mobile) ──────────────────────────────────────────────── */
.bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: var(--c-surface); border-top: 1px solid var(--c-outline-var);
  padding: 8px 0 12px;
}
.bottom-nav-inner { display: flex; justify-content: space-around; }
.bnav-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; color: var(--c-on-surf-var);
  text-decoration: none; min-width: 64px;
}
.bnav-item .bnav-indicator {
  width: 64px; height: 32px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.bnav-item.active { color: var(--c-primary); }
.bnav-item.active .bnav-indicator { background: var(--c-primary-cnt); }
.bnav-item.active .icon { color: var(--c-primary); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rail { display: none; }
  .topbar { padding-left: 16px; }
  .main { margin-left: 0; padding-bottom: 80px; }
  .bottom-nav { display: block; }
}
@media (max-width: 600px) {
  .main { padding: 16px; padding-bottom: 80px; }
}