/* =========================================================================
   VENIO — Venue Reservation Management System
   style.css — navy & gold identity · mobile-responsive
   ========================================================================= */

:root{
  /* Brand palette (from logo) */
  --navy-900:#0a1530;
  --navy-800:#0d1b3e;
  --navy-700:#13254f;
  --navy-600:#1b3266;
  --navy-500:#26417e;
  --gold-500:#d9b779;
  --gold-400:#e3c489;
  --gold-300:#eed6a6;
  --gold-600:#c5a061;

  /* UI neutrals */
  --bg:#eef1f7;
  --surface:#ffffff;
  --surface-2:#f6f8fc;
  --border:#dde3ee;
  --text:#1d2433;
  --text-soft:#5a657a;
  --text-mute:#8b94a7;

  /* Feedback */
  --success:#1f9d6b;
  --success-bg:#e6f6ef;
  --danger:#d2453b;
  --danger-bg:#fcebea;
  --warning:#c98a18;
  --warning-bg:#fdf3e0;
  --info:#2b6cb0;

  --radius:14px;
  --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(13,27,62,.06),0 1px 3px rgba(13,27,62,.08);
  --shadow:0 4px 14px rgba(13,27,62,.10);
  --shadow-lg:0 18px 50px rgba(10,21,48,.28);
  --sidebar-w:248px;
  --topbar-h:64px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--navy-600);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0 0 .4em;font-weight:700;color:var(--navy-800);line-height:1.25}
h2{font-size:1.35rem}
h3{font-size:1.1rem}
p{margin:0 0 1em}
.muted{color:var(--text-mute)}
.small{font-size:.82rem}
.link{color:var(--navy-600);font-weight:600}
.nowrap{white-space:nowrap}

/* =========================================================================
   LAYOUT
   ========================================================================= */
.layout{display:flex;min-height:100vh}

/* Sidebar ---------------------------------------------------------------- */
.sidebar{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%);
  color:#cdd5e6;
  display:flex;
  flex-direction:column;
  position:fixed;
  inset:0 auto 0 0;
  height:100vh;
  z-index:40;
  border-right:1px solid rgba(217,183,121,.12);
}
.brand{
  height:var(--topbar-h);
  display:flex;align-items:center;justify-content:center;
  padding:14px 16px;
  border-bottom:1px solid rgba(217,183,121,.14);
}
.brand-logo{height:42px;width:auto;border-radius:9px}
.nav{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:4px}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:10px;
  color:#c2cbe0;font-weight:500;font-size:.94rem;
  transition:background .15s,color .15s;
}
.nav-item:hover{background:rgba(217,183,121,.10);color:#fff;text-decoration:none}
.nav-item.active{
  background:linear-gradient(90deg,rgba(217,183,121,.22),rgba(217,183,121,.06));
  color:var(--gold-300);
  box-shadow:inset 3px 0 0 var(--gold-500);
}
.nav-icon{
  width:24px;text-align:center;font-size:1.05rem;
  color:var(--gold-500);flex:0 0 24px;
}
.nav-item.active .nav-icon{color:var(--gold-400)}
.sidebar-foot{padding:14px 18px;border-top:1px solid rgba(217,183,121,.12)}
.sidebar-foot .ver{font-size:.74rem;color:#7f8aa6;letter-spacing:.03em}

/* Main column ------------------------------------------------------------ */
.main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-width:0}
.topbar{
  height:var(--topbar-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:14px;
  padding:0 22px;
  position:sticky;top:0;z-index:30;
  box-shadow:var(--shadow-sm);
}
.hamburger{
  display:none;border:0;background:transparent;
  font-size:1.5rem;color:var(--navy-700);cursor:pointer;padding:4px 8px;border-radius:8px;
}
.hamburger:hover{background:var(--surface-2)}
.topbar-logo{height:34px;display:none}
.topbar-title{font-size:1.18rem;margin:0;flex:1;color:var(--navy-800)}
.topbar-right{display:flex;align-items:center;gap:10px}
.user-chip{
  display:flex;flex-direction:column;align-items:flex-end;
  line-height:1.2;margin-right:4px;
}
.user-name{font-weight:700;font-size:.9rem;color:var(--navy-800)}
.user-role{font-size:.72rem;color:var(--text-mute);text-transform:capitalize}

.content{padding:26px;flex:1;max-width:1180px;width:100%}
.appfoot{
  padding:16px 26px;color:var(--text-mute);font-size:.8rem;
  border-top:1px solid var(--border);background:var(--surface);
}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;font-size:.9rem;font-weight:600;
  padding:10px 18px;border-radius:10px;border:1px solid transparent;
  cursor:pointer;transition:all .15s;white-space:nowrap;line-height:1.1;
  text-decoration:none;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg,var(--navy-700),var(--navy-600));color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:linear-gradient(135deg,var(--navy-600),var(--navy-500));color:#fff}
.btn-outline{background:var(--surface);border-color:var(--border);color:var(--navy-700)}
.btn-outline:hover{border-color:var(--navy-500);color:var(--navy-700);background:var(--surface-2)}
.btn-ghost{background:transparent;color:var(--text-soft)}
.btn-ghost:hover{background:var(--surface-2);color:var(--navy-700)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#bb3a31;color:#fff}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{background:#188257;color:#fff}
.btn-sm{padding:7px 13px;font-size:.83rem;border-radius:8px}
.btn-xs{padding:4px 10px;font-size:.76rem;border-radius:7px}
.btn-block{width:100%}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* Gold accent button (optional use) */
.btn-gold{background:linear-gradient(135deg,var(--gold-500),var(--gold-600));color:var(--navy-900)}
.btn-gold:hover{color:var(--navy-900);background:linear-gradient(135deg,var(--gold-400),var(--gold-500))}

/* =========================================================================
   CARDS
   ========================================================================= */
.card,.form-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:22px;margin-bottom:22px;
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:18px;flex-wrap:wrap;
}
.card-head h2,.card-head h3{margin:0}
.welcome{
  background:linear-gradient(120deg,var(--navy-800),var(--navy-600));
  color:#eaeefb;border:0;
}
.welcome h2{color:#fff}
.welcome p{color:#c7d0e6;margin:0}
.center-card{max-width:520px;margin:40px auto}
.big-icon{font-size:2.6rem;color:var(--gold-500);margin-bottom:8px}

/* =========================================================================
   STAT GRID
   ========================================================================= */
.stat-grid{
  display:grid;gap:16px;margin-bottom:24px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.stat-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 20px;
  display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-sm);
  transition:transform .15s,box-shadow .15s;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-icon{
  width:50px;height:50px;flex:0 0 50px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;font-size:1.45rem;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-600));
  color:var(--gold-400);
}
.stat-body{min-width:0}
.stat-val{font-size:1.7rem;font-weight:800;color:var(--navy-800);line-height:1.1}
.stat-label{font-size:.86rem;color:var(--text-soft);font-weight:600}
.stat-sub{font-size:.74rem;color:var(--text-mute)}

/* =========================================================================
   TABLES
   ========================================================================= */
.table-wrap{
  overflow-x:auto;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm);
}
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th,.table td{padding:12px 16px;text-align:left;vertical-align:middle}
.table thead th{
  background:var(--surface-2);color:var(--text-soft);
  font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.table tbody tr{border-top:1px solid var(--border)}
.table tbody tr:hover{background:var(--surface-2)}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}

/* =========================================================================
   BADGES
   ========================================================================= */
.badge{
  display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;
  background:var(--surface-2);color:var(--text-soft);border:1px solid var(--border);
  text-transform:capitalize;
}
.badge-role{background:rgba(217,183,121,.16);color:var(--gold-600);border-color:rgba(217,183,121,.4)}

/* Status badges */
.badge-status-active,.badge-status-approved,.badge-status-open{
  background:var(--success-bg);color:var(--success);border-color:rgba(31,157,107,.3)}
.badge-status-draft{background:var(--surface-2);color:var(--text-mute);border-color:var(--border)}
.badge-status-submitted{background:var(--warning-bg);color:var(--warning);border-color:rgba(201,138,24,.3)}
.badge-status-suspended,.badge-status-inactive,.badge-status-closed{
  background:var(--danger-bg);color:var(--danger);border-color:rgba(210,69,59,.25)}
.badge-status-maintenance{background:#eef2fb;color:var(--info);border-color:#cfdcf0}
.badge-active{background:var(--success-bg);color:var(--success);border-color:rgba(31,157,107,.3)}

/* =========================================================================
   FORMS
   ========================================================================= */
.field{margin-bottom:16px}
.field label{display:block;font-size:.84rem;font-weight:600;color:var(--text-soft);margin-bottom:6px}
input[type=text],input[type=password],input[type=number],input[type=email],
input[type=date],input[type=time],input[type=tel],input[type=search],
select,textarea{
  width:100%;font-family:inherit;font-size:.92rem;color:var(--text);
  padding:10px 13px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);transition:border .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--navy-500);
  box-shadow:0 0 0 3px rgba(38,65,126,.13);
}
textarea{resize:vertical;min-height:80px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 18px}
.form-section{
  margin:22px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border);
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gold-600);font-weight:700;
}
.form-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}

/* Checkbox groups */
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.check{display:flex;align-items:center;gap:9px;font-size:.88rem;
  padding:8px 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface);cursor:pointer}
.check:hover{background:var(--surface-2)}
.check input{width:auto;margin:0}

/* Permission matrix */
.perm-group{margin-bottom:22px}
.perm-cat{
  font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--gold-600);font-weight:700;margin-bottom:10px;
}
.perm-cat-col{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}

/* Definition list */
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0}
.kv dt{color:var(--text-mute);font-size:.84rem;font-weight:600}
.kv dd{margin:0;color:var(--text);font-weight:600}

/* =========================================================================
   ALERTS
   ========================================================================= */
.alert{padding:12px 16px;border-radius:11px;margin-bottom:18px;font-size:.9rem;
  border:1px solid transparent;font-weight:500}
.alert-success{background:var(--success-bg);color:#11704b;border-color:rgba(31,157,107,.25)}
.alert-danger{background:var(--danger-bg);color:#992c25;border-color:rgba(210,69,59,.22)}
.alert-warning{background:var(--warning-bg);color:#8a5f10;border-color:rgba(201,138,24,.25)}

/* =========================================================================
   PAGER
   ========================================================================= */
.pager{display:flex;gap:6px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.page{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 10px;border-radius:9px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--navy-700);font-weight:600;font-size:.86rem;
}
.page:hover{background:var(--surface-2);text-decoration:none}
.page.active{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}

/* =========================================================================
   AUTH / LOGIN / INSTALLER
   ========================================================================= */
.auth-body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-700) 55%,var(--navy-600) 100%);
}
.auth-card{
  width:100%;max-width:400px;background:var(--surface);
  border-radius:20px;box-shadow:var(--shadow-lg);
  padding:38px 32px;text-align:center;
}
.auth-logo{width:84px;height:84px;margin:0 auto 14px;border-radius:18px;box-shadow:var(--shadow)}
.auth-title{font-size:1.7rem;margin:0;color:var(--navy-800);letter-spacing:.01em}
.auth-tag{color:var(--gold-600);font-size:.9rem;margin:2px 0 22px;font-style:italic;letter-spacing:.04em}
.auth-card .field{text-align:left}
.auth-card form{margin-top:6px}
.auth-card .btn-block{margin-top:6px}
.auth-foot{margin:22px 0 0;font-size:.76rem;color:var(--text-mute)}

.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{padding-right:44px}
.pw-toggle{
  position:absolute;right:6px;border:0;background:transparent;cursor:pointer;
  font-size:1.05rem;padding:6px 8px;border-radius:8px;line-height:1;opacity:.7;
}
.pw-toggle:hover{opacity:1;background:var(--surface-2)}

/* Installer */
.install-card{
  width:100%;max-width:640px;background:var(--surface);
  border-radius:18px;box-shadow:var(--shadow-lg);padding:34px;margin:30px auto;
}
.install-card .auth-logo{width:66px;height:66px}
.install-form{margin-top:18px}
.install-note{
  background:var(--warning-bg);color:#8a5f10;border:1px solid rgba(201,138,24,.25);
  padding:13px 16px;border-radius:11px;font-size:.86rem;margin-top:18px;
}
.steps{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.step{
  display:flex;align-items:flex-start;gap:13px;padding:13px 16px;
  border:1px solid var(--border);border-radius:11px;background:var(--surface-2);
}
.step-mark{font-size:1.15rem;flex:0 0 24px;text-align:center;line-height:1.4}
.step-ok{border-color:rgba(31,157,107,.3);background:var(--success-bg)}
.step-ok .step-mark{color:var(--success)}
.step-err{border-color:rgba(210,69,59,.3);background:var(--danger-bg)}
.step-err .step-mark{color:var(--danger)}
.step-label{font-weight:700;color:var(--navy-800);font-size:.92rem}
.step-detail{font-size:.82rem;color:var(--text-soft);margin-top:2px;word-break:break-word}

/* =========================================================================
   RESPONSIVE — tablet & mobile
   ========================================================================= */
@media (max-width:920px){
  .sidebar{transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .hamburger{display:inline-flex}
  .topbar-logo{display:block}
  .topbar-title{display:none}
  .content{padding:18px}
  .grid-2,.grid-3{grid-template-columns:1fr}
}

@media (max-width:560px){
  body{font-size:14px}
  .content{padding:14px}
  .card,.form-card{padding:16px}
  .user-chip{display:none}
  .stat-grid{grid-template-columns:1fr 1fr;gap:11px}
  .stat-card{padding:14px;gap:11px}
  .stat-icon{width:42px;height:42px;flex-basis:42px;font-size:1.2rem}
  .stat-val{font-size:1.35rem}
  .auth-card{padding:30px 22px}

  /* Mobile card-style tables: th hidden, td uses data-label */
  .table.responsive thead{display:none}
  .table.responsive,.table.responsive tbody,
  .table.responsive tr,.table.responsive td{display:block;width:100%}
  .table.responsive tr{
    border:1px solid var(--border);border-radius:11px;margin-bottom:11px;padding:6px 4px;
    background:var(--surface);
  }
  .table.responsive td{
    display:flex;justify-content:space-between;gap:14px;text-align:right;
    padding:8px 14px;border:0;
  }
  .table.responsive td::before{
    content:attr(data-label);font-weight:700;color:var(--text-soft);
    text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;
  }
  .table.responsive td .row-actions{justify-content:flex-end}
}

@media (max-width:380px){
  .stat-grid{grid-template-columns:1fr}
}

/* Notification bell badge */
.venio-bell{font-size:1.05rem;line-height:1}
.bell-badge{
  position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;
  background:var(--danger);color:#fff;border-radius:999px;
  font-size:.66rem;font-weight:700;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px var(--surface);
}

/* Public auth page links */
.auth-links{margin-top:12px;font-size:.86rem}
.auth-links .sep{color:var(--text-mute);margin:0 8px}

/* ===== Reservation slot grid (Phase 2) ===== */
.slot-grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
}
.slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:12px 8px;border-radius:11px;border:1px solid var(--border);
  text-align:center;text-decoration:none;transition:all .15s;
}
.slot-time{font-weight:700;color:var(--navy-800);font-size:.95rem}
.slot-price{font-size:.78rem;color:var(--success);font-weight:600}
.slot-tag{font-size:.72rem;color:var(--text-mute);font-weight:600}
.slot-free{background:var(--success-bg);border-color:rgba(31,157,107,.3);cursor:pointer}
.slot-free:hover{transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none;border-color:var(--success)}
.slot-free-ro{background:var(--success-bg);border-color:rgba(31,157,107,.25)}
.slot-booked{background:var(--surface-2);border-color:var(--border);opacity:.7}
.slot-booked .slot-time{color:var(--text-mute)}
.legend-dot{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:middle;margin-right:5px}
.legend-free{background:var(--success)}
.legend-booked{background:var(--text-mute)}

/* ===== Vertical slot list (clearer per-hour status) ===== */
.slot-list{display:flex;flex-direction:column;gap:8px}
.slot-row{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;border:1px solid var(--border);border-radius:11px;
  background:var(--surface);text-decoration:none;transition:all .12s;
}
.slot-row .sr-time{font-weight:700;color:var(--navy-800);min-width:120px;font-variant-numeric:tabular-nums}
.slot-row .sr-price{flex:1;color:var(--success);font-weight:600}
.slot-row.is-booked{background:var(--surface-2);opacity:.75}
.slot-row.is-booked .sr-time{color:var(--text-mute)}
.slot-row.is-free{cursor:pointer}
.slot-row.is-free:hover{border-color:var(--navy-500);box-shadow:var(--shadow-sm);transform:translateX(2px);text-decoration:none}
.slot-row.is-free-ro{}
@media (max-width:560px){
  .slot-row{gap:8px;padding:11px 13px}
  .slot-row .sr-time{min-width:96px;font-size:.92rem}
  .slot-row .sr-price{font-size:.88rem}
}

/* =========================================================================
   PHASE 5 — VISUAL POLISH (desktop + mobile)
   Additive refinements layered over the base. Class names unchanged.
   ========================================================================= */

:root{
  --font-display:'Sora','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ring:0 0 0 3px rgba(217,183,121,.30);
  --shadow-soft:0 2px 8px rgba(13,27,62,.06);
  --shadow-card:0 6px 24px -8px rgba(13,27,62,.18);
}

body{
  background:
    radial-gradient(1100px 520px at 100% -8%, rgba(217,183,121,.08), transparent 60%),
    radial-gradient(900px 500px at -6% 0%, rgba(27,50,102,.07), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}

/* Display type for headings + hero numbers */
h1,h2,h3,.auth-title,.stat-val,.topbar-title{font-family:var(--font-display);letter-spacing:-.01em}
.stat-val{letter-spacing:-.02em}

/* Sidebar: subtle texture + crisper active state */
.brand-logo{box-shadow:0 4px 14px rgba(0,0,0,.25)}
.nav-item{position:relative}
.nav-item.active{box-shadow:inset 3px 0 0 var(--gold-500),0 2px 10px rgba(0,0,0,.12)}

/* Topbar glass effect */
.topbar{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
}

/* Cards: softer, deeper, lift on hover where interactive */
.card,.form-card{box-shadow:var(--shadow-soft);transition:box-shadow .18s,transform .18s}
.welcome{
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-card);
}
.welcome::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 200px at 92% -30%, rgba(217,183,121,.28), transparent 70%);
}
.welcome h2{font-size:1.5rem}

/* Stat cards: gold top hairline + lift */
.stat-card{position:relative;overflow:hidden}
.stat-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gold-500),transparent 70%);opacity:0;transition:opacity .18s;
}
.stat-card:hover::before{opacity:1}
.stat-card:hover{box-shadow:var(--shadow-card)}
.stat-icon{box-shadow:0 6px 16px -6px rgba(13,27,62,.5)}

/* Buttons: refined press + focus ring */
.btn{box-shadow:var(--shadow-soft)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn-primary{box-shadow:0 6px 18px -8px rgba(27,50,102,.7)}
.btn-primary:hover{box-shadow:0 10px 24px -8px rgba(27,50,102,.75)}
.btn-ghost{box-shadow:none}

/* Inputs: gold focus ring matches brand */
input:focus,select:focus,textarea:focus{box-shadow:var(--ring);border-color:var(--gold-500)}

/* Badges: a touch more contrast */
.badge{box-shadow:var(--shadow-soft)}

/* Tables: rounded header corners + zebra hint */
.table thead th:first-child{border-top-left-radius:var(--radius)}
.table thead th:last-child{border-top-right-radius:var(--radius)}
.table tbody tr:hover{background:linear-gradient(90deg,rgba(217,183,121,.06),transparent)}

/* Auth hero: animated gold aurora behind the card */
.auth-body{position:relative;overflow-x:hidden;overflow-y:auto;align-items:flex-start;justify-content:center}
.auth-card,.install-card{margin-top:auto;margin-bottom:auto}
.auth-body::before{
  content:"";position:absolute;width:680px;height:680px;border-radius:50%;
  top:-280px;right:-200px;pointer-events:none;
  background:radial-gradient(circle, rgba(217,183,121,.22), transparent 62%);
  animation:venioFloat 14s ease-in-out infinite;
}
.auth-body::after{
  content:"";position:absolute;width:560px;height:560px;border-radius:50%;
  bottom:-260px;left:-160px;pointer-events:none;
  background:radial-gradient(circle, rgba(38,65,126,.5), transparent 60%);
  animation:venioFloat 18s ease-in-out infinite reverse;
}
.auth-card{position:relative;z-index:1;border:1px solid rgba(255,255,255,.6)}
@keyframes venioFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-26px,22px) scale(1.06)}
}

/* Slot/package rows: clearer selected state already handled inline; add focus */
.slot-row.is-free:focus-within{border-color:var(--gold-500);box-shadow:var(--ring)}

/* Page-load fade for main content */
.content{animation:venioIn .35s ease both}
@keyframes venioIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* =========================================================================
   MOBILE: make EVERY data table a card list (not just .responsive),
   and tighten spacing. This is the key mobile usability upgrade.
   ========================================================================= */
@media (max-width:640px){
  .table-wrap{border:0;background:transparent;box-shadow:none;overflow:visible}
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{
    border:1px solid var(--border);border-radius:13px;margin-bottom:12px;
    background:var(--surface);box-shadow:var(--shadow-soft);padding:4px 2px;
  }
  .table td{
    display:flex;justify-content:space-between;align-items:center;gap:14px;
    text-align:right;padding:9px 15px;border:0;
  }
  .table td::before{
    content:attr(data-label);font-weight:700;color:var(--text-soft);
    text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;
    flex:0 0 auto;
  }
  .table td:empty{display:none}
  .table td .row-actions{justify-content:flex-end;flex-wrap:wrap}
  .table tfoot,.table tfoot tr,.table tfoot td{display:block;width:100%}
  /* cards holding tables shouldn't double-pad on mobile */
  .card>.table-wrap{margin:0 -4px}
}

/* Larger desktop: a bit more breathing room + wider content */
@media (min-width:1280px){
  .content{padding:30px 34px;max-width:1240px}
}

/* Honor reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* Sidebar group separator */
.nav-sep{height:1px;margin:10px 14px;background:rgba(255,255,255,.12);border-radius:1px}

/* =========================================================================
   PHASE 9 — READABILITY & BEAUTY REFINEMENT
   Improves legibility (contrast, spacing, type rhythm) and adds polish.
   ========================================================================= */

/* Smoother base typography + comfortable reading rhythm */
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.6; }
.content{ font-size:15px; }

/* Headings: stronger hierarchy, better spacing */
h1,h2,h3,h4{ color:var(--navy-800); line-height:1.25; }
h2{ font-size:1.45rem; margin:0 0 .3em; }
h3{ font-size:1.12rem; }
.card-head h3{ font-size:1.05rem; letter-spacing:-.01em; }
.muted{ color:var(--text-mute); }
.small{ font-size:.82rem; }

/* Cards: airier padding + cleaner separation */
.card{ padding:22px 24px; border-radius:16px; }
.card + .card{ margin-top:18px; }
.card-head{ margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }

/* Tables: more readable rows, clearer header, comfortable cells */
.table{ font-size:.92rem; }
.table thead th{
  font-size:.74rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-soft); background:var(--surface-2); padding:11px 14px;
}
.table tbody td{ padding:12px 14px; vertical-align:middle; }
.table tbody tr{ border-top:1px solid var(--border); }
.table tbody tr:hover{ background:rgba(217,183,121,.07); }

/* Buttons: clearer affordance + comfortable hit area */
.btn{ border-radius:11px; font-weight:600; letter-spacing:.01em; }
.btn-xs{ padding:5px 11px; font-size:.78rem; border-radius:8px; }
.btn-sm{ padding:8px 14px; }
.btn-primary{ background:linear-gradient(180deg, var(--navy-600), var(--navy-700)); border-color:var(--navy-700); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-outline{ border-color:var(--border); color:var(--navy-700); background:#fff; }
.btn-outline:hover{ border-color:var(--gold-500); color:var(--navy-800); background:rgba(217,183,121,.08); }

/* Forms: clearer labels + inputs that are easy to read */
.field label{ font-size:.86rem; font-weight:600; color:var(--navy-700); margin-bottom:6px; display:block; }
input, select, textarea{
  font-size:.95rem; padding:10px 13px; border-radius:11px;
  border:1px solid var(--border); background:#fff; color:var(--text);
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder{ color:#9aa3b2; }

/* Badges: legible pills */
.badge{ font-size:.72rem; font-weight:700; letter-spacing:.02em; padding:4px 10px; border-radius:999px; }

/* Alerts: softer, readable */
.alert{ border-radius:12px; padding:13px 16px; font-size:.92rem; border:1px solid transparent; }
.alert-success{ background:#eaf7f0; color:#15603f; border-color:#bfe6d2; }
.alert-danger{ background:#fdecea; color:#9a2820; border-color:#f5c6c2; }
.alert-warning{ background:#fff5e6; color:#8a5a12; border-color:#f3dcae; }
.alert-info{ background:#eaf1fb; color:#1f4a87; border-color:#c4d8f3; }

/* Welcome / hero card: clearer text on the navy gradient */
.welcome h2{ color:#fff; }
.welcome p, .welcome .muted{ color:rgba(255,255,255,.85); }

/* Stat cards: bigger, more legible numbers */
.stat-val{ font-size:1.8rem; font-weight:800; color:var(--navy-800); }
.stat-card .muted{ font-size:.8rem; }

/* Sidebar: a touch more spacing + clearer active/hover */
.nav-item{ padding:10px 16px; border-radius:10px; margin:1px 8px; font-size:.93rem; }
.nav-item:hover{ background:rgba(255,255,255,.06); }
.nav-item.active{ background:rgba(217,183,121,.16); color:#fff; }
.nav-icon{ opacity:.92; }

/* Links: readable accent */
.link{ color:var(--navy-600); font-weight:600; text-decoration:none; }
.link:hover{ color:var(--gold-600); text-decoration:underline; }

/* Comfortable spacing on mobile cards */
@media (max-width:640px){
  .card{ padding:18px 16px; }
  .content{ padding:16px 12px; }
  h2{ font-size:1.3rem; }
}