/* ============================================================
   Rainbow Sandals Compliance Portal — Stylesheet
   Theme: White calm beach — inspired by the retro Rainbow Sandals logo
   Colors: Ocean blue, warm sand, coral sunset, clean white
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:       #2B6CB0;
  --red:        #E53E3E;
  --orange:     #DD6B20;
  --yellow:     #D69E2E;
  --white:      #FFFFFF;
  --off-white:  #FAFCFF;
  --sand:       #F7F3ED;
  --light-sand: #FDF9F5;
  --wave:       #EBF4FF;
  --text:       #1A365D;
  --text-mid:   #2D4A7A;
  --muted:      #718096;
  --light-text: #A0AEC0;
  --border:     #DDEAF5;
  --border-mid: #C5D9EE;
  --green:      #276749;
  --green-bg:   #E6F6F0;
  --green-bdr:  #9AE6C8;
  --danger:     #C53030;
  --danger-bg:  #FFF5F5;
  --danger-bdr: #FEB2B2;
  --amber:      #744210;
  --amber-bg:   #FFFBEB;
  --amber-bdr:  #F6E05E;
  --info:       #2B6CB0;
  --info-bg:    #EBF4FF;
  --info-bdr:   #90CDF4;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--sand);
  min-height: 100vh;
  color: var(--text);
}
input, select, button { font-family: inherit; }

/* ── LOGIN ────────────────────────────────────────────────── */
.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--sand);
}
.login-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  width: 420px;
  max-width: 92vw;
  text-align: center;
}
.login-logo { width: 180px; height: auto; margin: 0 auto 1.25rem; display: block; }
.login-card h2 { font-size: 17px; font-weight: 600; color: var(--blue); margin-bottom: 4px; }
.login-card p  { font-size: 13px; color: var(--muted); margin-bottom: 1.5rem; }
.sso-btn { width:100%; padding:11px; background:var(--blue); color:var(--white); border:none; border-radius:10px; font-size:14px; font-weight:500; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:.75rem; }
.sso-btn:hover { background:#1A4A8A; }
.divider { display:flex; align-items:center; gap:10px; margin:.75rem 0; color:var(--light-text); font-size:12px; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border); }
.btn-login { width:100%; padding:10px; background:var(--orange); color:var(--white); border:none; border-radius:10px; font-size:14px; font-weight:500; cursor:pointer; margin-top:.25rem; }
.btn-login:hover { background:#C05A10; }
.error-msg { color:var(--danger); font-size:12px; margin-top:6px; text-align:left; }
.demo-creds { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); text-align:left; }
.demo-creds p { font-size:11px; color:var(--muted); line-height:1.9; }

/* ── APP SHELL ────────────────────────────────────────────── */
.app  { display:flex; min-height:100vh; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.page { padding:1.25rem 1.5rem; overflow:auto; flex:1; background:var(--sand); }

/* ── RAINBOW BAR ──────────────────────────────────────────── */
.rainbow-bar { height:4px; background:linear-gradient(90deg,#E53E3E 0%,#DD6B20 33%,#D69E2E 66%,#2B6CB0 100%); flex-shrink:0; }

/* ── SIDEBAR ──────────────────────────────────────────────── */
.sidebar { width:240px; background:var(--white); border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; }
.sb-header { padding:1.25rem 1rem 1rem; border-bottom:1px solid var(--border); text-align:center; }
.sb-logo-img { width:140px; height:auto; display:block; margin:0 auto .5rem; }
.sb-sub { font-size:11px; color:var(--muted); font-weight:500; letter-spacing:.03em; text-transform:uppercase; }
.nav-lbl { padding:10px 1rem 4px; font-size:10px; color:var(--light-text); letter-spacing:.06em; text-transform:uppercase; font-weight:600; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 1rem; cursor:pointer; font-size:13px; color:var(--muted); border-left:3px solid transparent; transition:all .15s; }
.nav-item svg { flex-shrink:0; opacity:.7; }
.nav-item span { flex:1; }
.nav-item:hover  { background:var(--wave); color:var(--blue); }
.nav-item:hover svg { opacity:1; }
.nav-item.active { background:var(--wave); color:var(--blue); font-weight:600; border-left-color:var(--orange); }
.nav-item.active svg { opacity:1; }
.nav-dot { width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.sb-footer { margin-top:auto; padding:1rem; border-top:1px solid var(--border); background:var(--light-sand); }
.user-chip { display:flex; align-items:center; gap:8px; }
.user-av { width:32px; height:32px; background:var(--blue); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--white); font-size:11px; font-weight:700; flex-shrink:0; }
.user-name { font-size:12px; color:var(--text); font-weight:500; }
.user-role { font-size:10px; color:var(--muted); }
.btn-out { background:none; border:none; color:var(--muted); font-size:11px; cursor:pointer; padding:0; margin-top:6px; display:block; }
.btn-out:hover { color:var(--danger); }

/* ── TOPBAR ───────────────────────────────────────────────── */
.topbar { background:var(--white); border-bottom:1px solid var(--border); padding:.85rem 1.5rem; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; flex-wrap:wrap; gap:8px; }
.tb-title { font-size:16px; font-weight:700; color:var(--blue); }
.tb-sub   { font-size:12px; color:var(--muted); }
.tb-actions { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn         { padding:7px 13px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; border:1px solid var(--border-mid); background:var(--white); color:var(--text-mid); }
.btn:hover   { background:var(--wave); border-color:var(--blue); color:var(--blue); }
.btn-primary { background:var(--blue); color:var(--white); border-color:var(--blue); }
.btn-primary:hover { background:#1A4A8A; }
.btn-accent  { background:var(--orange); color:var(--white); border-color:var(--orange); }
.btn-accent:hover  { background:#C05A10; }
.btn-danger  { background:var(--danger-bg); color:var(--danger); border-color:var(--danger-bdr); }
.btn-sm  { padding:5px 10px; font-size:12px; }
.btn-xs  { padding:3px 7px; font-size:11px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ── FORM ─────────────────────────────────────────────────── */
.form-group { margin-bottom:.85rem; }
.form-group label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; font-weight:500; }
.form-group input,
.form-group select { width:100%; padding:9px 11px; border:1px solid var(--border-mid); border-radius:8px; font-size:13px; background:var(--white); color:var(--text); }
.form-group input:focus,
.form-group select:focus { outline:none; border-color:var(--blue); }

/* ── CARDS ────────────────────────────────────────────────── */
.card { background:var(--white); border:1px solid var(--border); border-radius:14px; padding:1.25rem; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:1.25rem; }
.metric-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:1rem; text-align:center; border-top:3px solid var(--border); }
.metric-card:nth-child(1){border-top-color:var(--blue);}
.metric-card:nth-child(2){border-top-color:var(--green);}
.metric-card:nth-child(3){border-top-color:var(--danger);}
.metric-card:nth-child(4){border-top-color:var(--orange);}
.metric-lbl { font-size:10px; color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.metric-val { font-size:28px; font-weight:700; color:var(--text); }
.metric-val.green { color:var(--green); }
.metric-val.red   { color:var(--danger); }
.progress-wrap { background:var(--sand); border-radius:20px; height:6px; overflow:hidden; margin-top:6px; }
.progress-bar  { height:100%; border-radius:20px; transition:width .4s; }
.dept-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:1.25rem; }
.dept-card { background:var(--white); border:1px solid var(--border); border-radius:10px; padding:.85rem; }
.dept-name { font-size:12px; font-weight:600; color:var(--blue); margin-bottom:3px; }
.dept-stat { font-size:11px; color:var(--muted); }
.dept-bar  { height:4px; border-radius:20px; background:var(--sand); margin-top:6px; overflow:hidden; }

/* ── BADGES ───────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-ok         { background:var(--green-bg);  color:var(--green); }
.badge-no         { background:var(--danger-bg); color:var(--danger); }
.badge-superadmin { background:#EBF4FF; color:#1A4A8A; }
.badge-hr         { background:var(--green-bg);  color:var(--green); }
.badge-admin      { background:#EBF4FF;           color:var(--blue); }
.badge-viewer     { background:var(--sand);       color:var(--muted); }
.dot   { width:6px; height:6px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dot-g { background:var(--green); }
.dot-r { background:var(--danger); }

/* ── TABLE ────────────────────────────────────────────────── */
.tbl-wrap { border-radius:12px; overflow:hidden; border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:13px; background:var(--white); }
th { text-align:left; padding:10px 14px; font-size:10px; font-weight:700; color:var(--muted); background:var(--light-sand); border-bottom:1px solid var(--border); text-transform:uppercase; letter-spacing:.05em; }
td { padding:10px 14px; border-bottom:1px solid var(--border); color:var(--text); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--wave); }

/* ── FILTERS ──────────────────────────────────────────────── */
.filter-row { display:flex; gap:7px; margin-bottom:1rem; flex-wrap:wrap; align-items:center; }
.filter-row input,
.filter-row select { padding:8px 10px; border:1px solid var(--border-mid); border-radius:8px; font-size:13px; background:var(--white); color:var(--text); }
.filter-row input:focus,
.filter-row select:focus { outline:none; border-color:var(--blue); }
.count-pill { font-size:12px; color:var(--muted); padding:5px 12px; background:var(--white); border:1px solid var(--border); border-radius:20px; white-space:nowrap; font-weight:500; }

/* ── MODAL ────────────────────────────────────────────────── */
.modal-bg { position:fixed; inset:0; background:rgba(26,54,93,.35); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal { background:var(--white); border-radius:16px; padding:1.75rem; width:440px; max-width:92vw; border:1px solid var(--border); }
.modal h3 { font-size:16px; font-weight:700; color:var(--blue); margin-bottom:.4rem; }
.modal-sub { font-size:12px; color:var(--muted); margin-bottom:1.1rem; }
.modal-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:1.25rem; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ── ALERTS ───────────────────────────────────────────────── */
.alert { padding:.75rem 1rem; border-radius:10px; font-size:13px; margin-bottom:1rem; display:flex; align-items:flex-start; gap:8px; line-height:1.5; }
.alert-info    { background:var(--info-bg);   color:var(--info);   border:1px solid var(--info-bdr); }
.alert-success { background:var(--green-bg);  color:var(--green);  border:1px solid var(--green-bdr); }
.alert-warn    { background:var(--amber-bg);  color:var(--amber);  border:1px solid var(--amber-bdr); }
.alert-close   { cursor:pointer; font-size:15px; opacity:.5; margin-left:auto; flex-shrink:0; }

/* ── SYNC PILL ────────────────────────────────────────────── */
.sync-pill    { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:500; }
.sync-ok      { background:var(--green-bg); color:var(--green); }
.sync-demo    { background:var(--amber-bg); color:var(--amber); }
.sync-idle    { background:var(--sand); color:var(--muted); border:1px solid var(--border); }
.sync-loading { background:var(--info-bg); color:var(--info); }

/* ── SETTINGS ─────────────────────────────────────────────── */
.settings-grid { display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
.settings-table { width:100%; font-size:13px; }
.settings-table td { padding:5px 0; vertical-align:top; }
.settings-table td:first-child { color:var(--muted); width:110px; font-weight:500; }
.mono { font-family:monospace; font-size:11px; }
.status-active  { background:var(--green-bg); color:var(--green); }
.status-invited { background:var(--amber-bg); color:var(--amber); }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:640px){
  .sidebar { display:none; }
  .metrics-grid { grid-template-columns:repeat(2,1fr); }
  .dept-grid { grid-template-columns:1fr 1fr; }
  .settings-grid { grid-template-columns:1fr; }
  .page { padding:1rem; }
  .two-col { grid-template-columns:1fr; }
}


/* ── BUSINESS CARD PLACEHOLDER TEXT ──────────────────────── */
.biz-input::placeholder { color: rgba(255,255,255,.55) !important; }