/* =========================================================
   WPA CRM — Luxury Light Theme (V2)
   Palette: ivory / champagne / charcoal / gold / deep red
   ========================================================= */
:root{
  --ivory:#F7F3EC;
  --paper:#FFFFFF;
  --champagne:#EFE6D6;
  --charcoal:#1F2127;
  --charcoal-soft:#3A3D45;
  --gold:#B8973E;
  --gold-soft:#C9AE63;
  --red:#9A2B2B;
  --line:#E4DBCB;
  --muted:#857C6C;
  --ok:#1e7d4f;
  --shadow:0 2px 10px rgba(31,33,39,.06), 0 8px 30px rgba(31,33,39,.05);
  --radius:14px;
  --font-head:"Playfair Display", Georgia, serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--ivory);
  color:var(--charcoal);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-head);font-weight:600;color:var(--charcoal);margin:0 0 4px;}
h1{font-size:1.6rem;}
h3{font-size:1.15rem;}
a{color:var(--gold);text-decoration:none;}
.muted{color:var(--muted);font-size:.88rem;}

/* ---------- LOGIN ---------- */
.login-body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%, #fff 0%, var(--ivory) 60%);
  padding:24px;
}
.login-wrap{
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);padding:38px 32px;max-width:380px;width:100%;text-align:center;
}
.login-logo{width:92px;height:auto;margin:0 auto 14px;display:block;}
.login-wrap h1{font-size:1.35rem;}
.login-fields{display:flex;flex-direction:column;gap:12px;margin-top:18px;}
.login-fields input{
  padding:13px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px;
  background:var(--ivory);
}
.login-fields input:focus{outline:none;border-color:var(--gold);background:#fff;}
.login-fields button,button[type=submit]{
  background:var(--charcoal);color:#fff;border:0;padding:13px;border-radius:10px;
  font-size:15px;font-weight:600;cursor:pointer;letter-spacing:.3px;transition:.2s;
}
.login-fields button:hover,button[type=submit]:hover{background:#000;}
.back-link{display:inline-block;margin-top:18px;color:var(--muted);font-size:.85rem;}

/* ---------- APP SHELL ---------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{
  width:240px;background:var(--charcoal);color:#cfcabf;
  padding:22px 16px;flex-shrink:0;position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:22px;}
.brand img{width:38px;height:38px;object-fit:contain;}
.brand span{font-family:var(--font-head);font-size:1.15rem;color:#fff;font-weight:600;}
.userbox{
  background:rgba(255,255,255,.06);border-radius:10px;padding:10px 12px;margin-bottom:18px;
  display:flex;flex-direction:column;
}
.userbox strong{color:#fff;font-size:.95rem;text-transform:capitalize;}
.userbox span{color:var(--gold-soft);font-size:.78rem;text-transform:capitalize;}
.sidebar nav{display:flex;flex-direction:column;gap:2px;}
.sidebar nav a{
  color:#cfcabf;padding:11px 12px;border-radius:9px;font-size:.95rem;transition:.15s;
}
.sidebar nav a:hover{background:rgba(184,151,62,.16);color:#fff;}
.sidebar nav a.nav-logout{margin-top:10px;color:#d99;}
.content{flex:1;padding:28px;max-width:1100px;}

.mobile-menu-btn{display:none;}

/* ---------- TOPBAR ---------- */
.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* ---------- CARDS / GRID ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);}
.grid{display:grid;gap:14px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.stat{font-family:var(--font-head);font-size:2rem;color:var(--charcoal);margin-top:4px;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;background:var(--charcoal);color:#fff;padding:9px 16px;border-radius:9px;
  font-size:.88rem;font-weight:600;border:0;cursor:pointer;transition:.18s;
}
.btn:hover{background:#000;color:#fff;}
.btn-secondary{background:var(--champagne);color:var(--charcoal);}
.btn-secondary:hover{background:#e4d6bd;color:var(--charcoal);}
.btn-danger{background:#fff;color:var(--red);border:1px solid #e4c4c4;}
.btn-danger:hover{background:var(--red);color:#fff;}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:#fff;}

/* ---------- FORMS ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.form-grid .full{grid-column:1 / -1;}
.form-grid label{display:block;font-size:.8rem;font-weight:600;color:var(--charcoal-soft);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px;}
.form-grid input,.form-grid select,.form-grid textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px;
  font-family:var(--font-body);background:var(--ivory);
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:none;border-color:var(--gold);background:#fff;}
.form-grid textarea{min-height:80px;resize:vertical;}
.section-title{grid-column:1/-1;font-family:var(--font-head);font-size:1.05rem;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:6px;margin-top:8px;}
.field-hint{font-size:.72rem;color:var(--muted);margin-top:3px;}

/* ---------- TABLES ---------- */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:.9rem;}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);}
th{font-size:.74rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;}
tr:hover td{background:#fcfaf6;}

/* ---------- BADGES ---------- */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:.72rem;font-weight:700;}
.badge.today{background:#fff4d6;color:#9a7b1e;}
.badge.overdue{background:#fde0e0;color:var(--red);}
.badge.upcoming{background:#e3f1e9;color:var(--ok);}
.hs-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-weight:700;font-size:.78rem;color:#fff;}

/* ---------- FLASH ---------- */
.flash{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:.9rem;}
.flash.success{background:#e3f1e9;color:var(--ok);border:1px solid #bfe0cd;}
.flash.error{background:#fde0e0;color:var(--red);border:1px solid #f0c4c4;}

/* ---------- QUICK LIST ---------- */
.quick-list{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.quick-item{padding:10px;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:2px;background:var(--ivory);}
.quick-item small{color:var(--muted);}

/* ---------- MOBILE ---------- */
@media(max-width:860px){
  .form-grid,.grid-2,.grid-3{grid-template-columns:1fr;}
  .mobile-menu-btn{
    display:block;position:fixed;top:12px;left:12px;z-index:60;
    background:var(--charcoal);color:#fff;border:0;width:44px;height:44px;border-radius:10px;font-size:20px;cursor:pointer;
  }
  .sidebar{
    position:fixed;left:-260px;top:0;z-index:55;transition:left .25s;height:100vh;
  }
  body.nav-open .sidebar{left:0;box-shadow:0 0 40px rgba(0,0,0,.4);}
  .content{padding:64px 16px 24px;width:100%;}
  /* stacked tables on phones */
  table thead{display:none;}
  table,tbody,tr,td{display:block;width:100%;}
  tr{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:6px;background:#fff;}
  td{border:0;padding:7px 10px;display:flex;justify-content:space-between;gap:10px;}
  td::before{content:attr(data-label);font-weight:700;color:var(--muted);font-size:.72rem;text-transform:uppercase;}
  td.row-actions{justify-content:flex-start;flex-wrap:wrap;}
  td.row-actions::before{display:none;}
}