:root {

  --ink: #1a1614;

  --ink-soft: #3d3530;

  --ivory: #faf7f2;

  --cream: #f3ebe0;

  --champagne: #d4c4a8;

  --gold: #b8956c;

  --gold-deep: #9a7b52;

  --muted: #8a7e72;

  --border: #e8dfd4;

  --danger: #b54a4a;

  --success: #3d7a5f;

  --font-display: "Cormorant Garamond", Georgia, serif;

  --font-sans: "Outfit", system-ui, sans-serif;

  --shadow-soft: 0 4px 24px rgba(26,22,20,.06);

  --shadow-lift: 0 12px 40px rgba(26,22,20,.12);

}



* { box-sizing: border-box; }

body {

  margin: 0;

  font-family: var(--font-sans);

  background:

    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(184,149,108,.12), transparent 50%),

    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(232,221,212,.5), transparent 45%),

    linear-gradient(180deg, #faf7f2 0%, #f5efe6 100%);

  color: var(--ink);

  min-height: 100vh;

  -webkit-font-smoothing: antialiased;

}

body.modal-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }

h1,h2,h3 { font-family: var(--font-display); font-weight: 500; margin: 0; }



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



/* Sidebar */

.sidebar {

  width: 256px; flex-shrink: 0;

  background: rgba(255,255,255,.72);

  border-right: 1px solid rgba(232,223,212,.85);

  display: flex; flex-direction: column;

  backdrop-filter: blur(10px);

}

.brand { display: block; padding: 1.75rem 1.5rem; }

.brand-eyebrow { display:block; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:500; }

.brand-name { font-family: var(--font-display); font-size:1.75rem; line-height:1.1; }

.nav { padding: .35rem .75rem; flex:1; overflow:auto; }

.nav-link {

  display:flex; align-items:center; gap:.75rem;

  padding:.65rem .9rem; border-radius:1rem; margin-bottom:.15rem;

  color: var(--ink-soft); font-size:.92rem; transition: all .2s;

}

.nav-link:hover { background: var(--cream); }

.nav-link.active { background: var(--ink); color: var(--ivory); box-shadow: var(--shadow-soft); }

.nav-icon { display:flex; opacity:.85; flex-shrink:0; }

.nav-link.active .nav-icon { opacity:1; }



.sidebar-user {

  border-top:1px solid var(--border); padding:1rem 1.15rem;

  display:flex; gap:.75rem; align-items:center;

}

.sidebar-user-info { min-width:0; flex:1; }

.user-name { font-size:.9rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.user-role { font-size:.75rem; color:var(--muted); }



.avatar {

  display:inline-flex; align-items:center; justify-content:center;

  border-radius:999px; background:linear-gradient(135deg, var(--champagne), var(--gold));

  color:#fff; font-weight:600; flex-shrink:0;

}

.avatar-sm { width:32px; height:32px; font-size:.72rem; }

.avatar-md { width:40px; height:40px; font-size:.8rem; }

.avatar-lg { width:56px; height:56px; font-size:1rem; }



.icon-btn {

  display:inline-flex; align-items:center; justify-content:center;

  width:40px; height:40px; border:0; background:transparent;

  border-radius:.85rem; cursor:pointer; color:var(--ink-soft);

  transition: background .2s;

}

.icon-btn:hover { background: var(--cream); }

.logout-btn { color: var(--muted); }



/* Main + topbar */

.main { flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar {

  height:64px; display:flex; align-items:center; gap:.75rem;

  padding:0 1rem 0 1.25rem; border-bottom:1px solid rgba(232,223,212,.85);

  background: rgba(250,247,242,.88); backdrop-filter: blur(10px);

  position: sticky; top:0; z-index:20;

}

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

.search-trigger {

  flex:1; max-width:28rem; height:42px;

  display:flex; align-items:center; gap:.6rem;

  padding:0 1rem; border-radius:1rem;

  border:1px solid var(--border); background:#fff;

  color:var(--muted); font:inherit; font-size:.88rem;

  cursor:pointer; transition: border-color .2s;

}

.search-trigger:hover { border-color: var(--champagne); }

.search-placeholder { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.topbar-actions { margin-left:auto; display:flex; align-items:center; gap:.35rem; }

.topbar-avatar { display:none; }



.notif-wrap { position:relative; }

.notif-badge {

  position:absolute; top:4px; right:4px; min-width:18px; height:18px;

  padding:0 4px; border-radius:999px; background:var(--gold); color:#fff;

  font-size:10px; font-weight:600; display:flex; align-items:center; justify-content:center;

}

.notif-dropdown {

  position:absolute; right:0; top:calc(100% + 8px); width:min(92vw, 22rem);

  background:#fff; border:1px solid var(--border); border-radius:1.5rem;

  box-shadow: var(--shadow-lift); z-index:50; overflow:hidden;

}

.notif-dropdown-head, .notif-dropdown-foot {

  display:flex; justify-content:space-between; align-items:center;

  padding:.85rem 1rem; border-bottom:1px solid var(--border);

}

.notif-dropdown-foot { border-bottom:0; border-top:1px solid var(--border); justify-content:center; color:var(--gold); font-size:.88rem; }

.notif-read-all { font-size:.75rem; color:var(--gold); }

.notif-dropdown-body { max-height:20rem; overflow:auto; }

.notif-item { display:block; padding:.85rem 1rem; border-bottom:1px solid rgba(232,223,212,.6); }

.notif-item:hover { background: rgba(243,235,224,.6); }

.notif-item.unread { background: rgba(212,196,168,.15); }

.notif-item strong { display:block; font-size:.88rem; }

.notif-item span { display:block; font-size:.78rem; color:var(--muted); margin-top:.2rem; }



.content { padding: 1.25rem 1.5rem 2rem; max-width: 80rem; width:100%; margin:0 auto; }



/* Mobile drawer */

.mobile-drawer { position:fixed; inset:0; z-index:60; }

.mobile-drawer-backdrop { position:absolute; inset:0; background:rgba(26,22,20,.4); }

.mobile-drawer-panel {

  position:absolute; left:0; top:0; bottom:0; width:18rem;

  background:var(--ivory); padding:1rem; overflow:auto;

  box-shadow: var(--shadow-lift);

}

.mobile-drawer-head { display:flex; justify-content:space-between; align-items:start; margin-bottom:1rem; }

.mobile-nav { padding:0; }

.mobile-logout {

  display:flex; align-items:center; gap:.5rem; margin-top:1rem;

  padding:.75rem 1rem; border-radius:1rem; color:var(--danger);

}

.mobile-logout:hover { background:rgba(181,74,74,.08); }



/* Modals */

.modal { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:1rem; }

.modal[hidden] { display:none !important; }

.modal-backdrop { position:absolute; inset:0; background:rgba(26,22,20,.45); }

.modal-panel {

  position:relative; width:100%; background:#fff; border-radius:1.75rem;

  border:1px solid var(--border); box-shadow: var(--shadow-lift);

  max-height:90vh; overflow:auto;

}

.modal-md { max-width:32rem; }

.modal-lg { max-width:42rem; }

.modal-head {

  display:flex; justify-content:space-between; align-items:center;

  padding:1.1rem 1.25rem; border-bottom:1px solid var(--border);

  position:sticky; top:0; background:#fff; z-index:1;

}

.modal-head h2 { font-size:1.4rem; }

.modal-body { padding:1.25rem; }



.search-input-wrap {

  position:relative; margin-bottom:1rem;

}

.search-input-wrap svg { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--muted); }

.search-input-wrap input {

  width:100%; height:46px; padding:0 1rem 0 2.6rem;

  border-radius:1rem; border:1px solid var(--border); font:inherit;

}

.search-results { max-height:20rem; overflow:auto; }

.search-result {

  display:block; padding:.85rem 1rem; border-radius:1rem; margin-bottom:.25rem;

}

.search-result:hover { background: var(--cream); }

.search-type { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gold); margin-bottom:.15rem; }



/* Layout components */

.grid { display:grid; gap:1rem; }

.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.grid-5-2 { grid-template-columns: 3fr 2fr; }



.card {

  background:#fff; border:1px solid rgba(232,223,212,.9);

  border-radius:1.5rem; box-shadow:0 2px 16px rgba(26,22,20,.05);

  padding:1.25rem 1.35rem;

}

.card-title { display:flex; align-items:center; gap:.5rem; font-size:1.35rem; margin-bottom:1rem; }

.hero-card {

  background: linear-gradient(135deg, var(--ink) 0%, #2a2320 100%);

  color: var(--ivory); border:0; position:relative; overflow:hidden;

  padding:1.75rem 2rem;

}

.hero-card::after {

  content:''; position:absolute; right:-2.5rem; top:-2.5rem;

  width:10rem; height:10rem; border-radius:999px;

  background:rgba(184,149,108,.2); filter:blur(24px);

}

.hero-eyebrow { font-size:.68rem; text-transform:uppercase; letter-spacing:.18em; color:var(--gold); }

.hero-title { font-family:var(--font-display); font-size:2.2rem; margin-top:.5rem; position:relative; }

.hero-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.25rem; position:relative; }

.hero-grid .muted { color:rgba(212,196,168,.65); font-size:.72rem; }

.hero-grid strong { font-size:1.05rem; font-weight:500; }



.kpi-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); }

.kpi-value { font-family:var(--font-display); font-size:2rem; margin-top:.5rem; line-height:1; }

.kpi-hint { font-size:.78rem; color:var(--muted); margin-top:.35rem; }



.btn {

  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;

  border:0; cursor:pointer; font:inherit; font-weight:500;

  height:42px; padding:0 1.1rem; border-radius:1rem;

  transition: all .15s; white-space:nowrap;

}

.btn:active { transform: scale(.98); }

.btn-gold { background:var(--gold); color:#fff; }

.btn-gold:hover { background:var(--gold-deep); }

.btn-ink { background:var(--ink); color:var(--ivory); }

.btn-secondary { background:var(--cream); color:var(--ink); border:1px solid var(--border); }

.btn-secondary:hover { background:#ebe3d8; }

.btn-danger { background:rgba(181,74,74,.1); color:var(--danger); }

.btn-sm { height:34px; padding:0 .8rem; font-size:.85rem; border-radius:.8rem; }

.btn-block { width:100%; }



.pill-group { display:flex; flex-wrap:wrap; gap:.35rem; }

.pill {

  display:inline-flex; align-items:center; gap:.35rem;

  height:36px; padding:0 .9rem; border-radius:999px;

  border:1px solid var(--border); background:#fff; font-size:.85rem;

}

.pill.active { background:var(--ink); color:var(--ivory); border-color:var(--ink); }



.field { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.9rem; }

.field label { font-size:.88rem; color:var(--ink-soft); font-weight:500; }

.field input, .field select, .field textarea {

  width:100%; height:42px; border-radius:1rem; border:1px solid var(--border);

  padding:0 .9rem; font:inherit; background:#fff;

}

.field textarea { height:auto; min-height:90px; padding:.75rem .9rem; }

.field input:focus, .field select:focus, .field textarea:focus {

  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,149,108,.2);

}



.table { width:100%; border-collapse:collapse; font-size:.9rem; }

.table th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:.75rem; border-bottom:1px solid var(--border); }

.table td { padding:.85rem .75rem; border-bottom:1px solid rgba(232,223,212,.7); vertical-align:top; }



.badge {

  display:inline-flex; align-items:center; padding:.22rem .6rem;

  border-radius:999px; font-size:.72rem; font-weight:500; border:1px solid;

}

.badge-gold { background:rgba(212,196,168,.35); color:var(--ink); border-color:var(--champagne); }

.badge-ok { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }

.badge-warn { background:#fffbeb; color:#92400e; border-color:#fde68a; }

.badge-danger { background:#fff1f2; color:#9f1239; border-color:#fecdd3; }

.badge-info { background:#f0f9ff; color:#075985; border-color:#bae6fd; }



.flash { padding:.85rem 1rem; border-radius:1rem; margin-bottom:1rem; font-size:.9rem; }

.flash-success { background:#ecfdf5; color:#065f46; }

.flash-error { background:#fff1f2; color:#9f1239; }



.page-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:end; margin-bottom:1.25rem; }

.page-head h1 { font-size:2rem; }

.page-head p { color:var(--muted); margin:.35rem 0 0; font-size:.95rem; }

.page-head-with-avatar { display:flex; gap:1rem; align-items:center; }

.actions { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }

.back-link { display:inline-flex; align-items:center; gap:.25rem; color:var(--gold); font-size:.9rem; }



.list-row {

  display:flex; justify-content:space-between; gap:1rem; align-items:center;

  padding:.85rem 0; border-bottom:1px solid rgba(232,223,212,.7);

}

.list-row:last-child { border-bottom:0; }

.muted { color:var(--muted); font-size:.85rem; }

.empty { text-align:center; padding:2.5rem 1rem; color:var(--muted); }

.empty svg { opacity:.35; margin-bottom:.5rem; }



/* Timeline */

.timeline { position:relative; }

.timeline-line {

  position:absolute; left:4.5rem; top:.5rem; bottom:.5rem; width:1px; background:var(--border);

}

.timeline-row {

  display:flex; gap:1rem; padding:.85rem .5rem; border-radius:1rem;

  transition: background .2s;

}

.timeline-row:hover { background: rgba(243,235,224,.55); }

.timeline-time { width:3.5rem; text-align:right; font-weight:500; flex-shrink:0; padding-top:.15rem; }

.timeline-dot-wrap { display:flex; flex-direction:column; align-items:center; padding-top:.45rem; }

.timeline-dot {

  width:10px; height:10px; border-radius:999px; background:var(--gold);

  box-shadow:0 0 0 4px var(--ivory); z-index:1;

}

.timeline-body { flex:1; min-width:0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; align-items:center; }



/* Calendar */

.calendar-nav { display:flex; align-items:center; gap:.5rem; }

.calendar-grid {

  display:grid; grid-template-columns: repeat(7, 1fr); gap:.35rem;

}

.calendar-head { font-size:.7rem; text-transform:uppercase; color:var(--muted); text-align:center; padding:.35rem; }

.calendar-day {

  min-height:4.5rem; border:1px solid var(--border); border-radius:1rem;

  padding:.35rem; background:#fff; font-size:.78rem;

}

.calendar-day.other { opacity:.45; }

.calendar-day.today { border-color:var(--gold); box-shadow:0 0 0 2px rgba(184,149,108,.25); }

.calendar-day.selected { background:rgba(212,196,168,.2); }

.calendar-day-num { font-weight:600; margin-bottom:.25rem; }

.calendar-chip {

  display:block; font-size:.65rem; padding:.15rem .35rem; border-radius:.45rem;

  background:rgba(184,149,108,.15); margin-bottom:.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

}



.settings-row { display:flex; justify-content:space-between; align-items:center; padding:.65rem 0; border-bottom:1px solid rgba(232,223,212,.6); }

.settings-row:last-child { border-bottom:0; }

.notif-row { text-decoration:none; color:inherit; }

.notif-unread { background:rgba(212,196,168,.12); margin:0 -.5rem; padding-left:.5rem !important; padding-right:.5rem !important; border-radius:.75rem; }

.notif-dot { width:8px; height:8px; border-radius:999px; background:var(--gold); flex-shrink:0; }



.service-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:.5rem; }

.service-chip {

  padding:.75rem; border:1px solid var(--border); border-radius:1rem; cursor:pointer; text-align:left;

  background:#fff; transition: all .15s;

}

.service-chip:hover, .service-chip.selected { border-color:var(--gold); background:rgba(212,196,168,.15); }



.chart-wrap { height:220px; position:relative; }

.bar-row { display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem; }

.bar-track { flex:1; height:8px; background:var(--cream); border-radius:999px; overflow:hidden; }

.bar-fill { height:100%; background:linear-gradient(90deg, var(--gold), var(--champagne)); border-radius:999px; }



.login-page {

  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem;

  background: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(184,149,108,.18), transparent 55%),

              linear-gradient(165deg, #1a1614 0%, #2a2320 50%, #1a1614 100%);

}

.login-card {

  width:100%; max-width:420px; background:var(--ivory); border-radius:2rem; padding:2rem;

  box-shadow:0 12px 40px rgba(0,0,0,.25);

}

.login-brand { text-align:center; color:#fff; margin-bottom:1.5rem; }

.login-brand .eyebrow { color:var(--gold); letter-spacing:.28em; text-transform:uppercase; font-size:11px; }

.login-brand h1 { font-size:3rem; color:var(--ivory); }

.login-brand .sub { color:rgba(212,196,168,.8); }



@media (max-width: 1024px) {

  .desktop-sidebar { display:none; }

  .mobile-menu-btn { display:inline-flex; }

  .topbar-avatar { display:flex; }

  .grid-5-2 { grid-template-columns: 1fr; }

}



@media (max-width: 768px) {

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .hero-grid { grid-template-columns: 1fr; }

  .timeline-line { display:none; }

  .timeline-dot-wrap { display:none; }

  .content { padding:1rem; }

  .page-head h1 { font-size:1.6rem; }

  .search-placeholder { display:none; }

}



@media (min-width: 1025px) {

  .mobile-drawer { display:none !important; }

}

.status-select { height:34px; border-radius:.8rem; border:1px solid var(--border); font:inherit; font-size:.8rem; padding:0 .5rem; }
.search-bar { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.search-bar .search-input-wrap { flex:1; min-width:200px; }