/* ============================================================
   D'ETTE SERVICES — SPECIAL EVENTS PORTAL
   Vanilla HTML / CSS / JS build. No framework, no build step.
   ============================================================ */

/* ---- Fonts ---- */
@font-face { font-family:'Gloock'; src:url('../assets/fonts/Gloock-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Italiana'; src:url('../assets/fonts/Italiana-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Instrument Sans'; src:url('../assets/fonts/InstrumentSans-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Instrument Sans'; src:url('../assets/fonts/InstrumentSans-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Instrument Sans'; src:url('../assets/fonts/InstrumentSans-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Geist Mono'; src:url('../assets/fonts/GeistMono-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }

/* ---- Tokens (edit these to retheme) ---- */
:root {
  --ink:#1A1714;
  --ivory:#FAF7F2;
  --paper:#FFFFFF;
  --accent:#9A6A4F;
  --gold:#A09060;
  --rail:#6E4318;          /* sidebar */
  --login-aside:#65482B;   /* login left panel */
  --hero:#82470B;          /* dashboard hero band */
  --main-bg:#F6F4F4;       /* main work area */
  --hairline:#D9CFC2;
  --mute:#6B6258;
  --sand:#F1E9DE;

  --font-display:'Gloock', Georgia, serif;
  --font-accent:'Italiana', Georgia, serif;
  --font-body:'Instrument Sans', -apple-system, sans-serif;
  --font-mono:'Geist Mono', 'Courier New', monospace;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }

.eyebrow {
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
}
.mono { font-family:var(--font-mono); }
.muted { color:var(--mute); }

/* ============================================================
   LOGIN
   ============================================================ */
.auth-page { min-height:100vh; display:flex; }

.auth-aside {
  flex:1.05;
  background:var(--login-aside);
  color:var(--ivory);
  padding:64px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.auth-aside > * { position:relative; z-index:2; }
.auth-aside .eyebrow { color:var(--gold); letter-spacing:.24em; }
.auth-aside .wordmark {
  font-family:var(--font-accent);
  font-size:86px;
  line-height:.95;
  letter-spacing:.03em;
  margin-bottom:22px;
}
.auth-aside .tagline {
  font-family:var(--font-display);
  font-size:24px;
  line-height:1.5;
  max-width:450px;
  color:rgba(250,247,242,.9);
  margin:0;
}
.auth-aside .foot {
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(250,247,242,.4);
}
.auth-aside .watermark {
  position:absolute;
  right:-70px; bottom:-90px;
  font-family:var(--font-accent);
  font-size:380px;
  line-height:1;
  color:rgba(160,144,96,.07);
  pointer-events:none;
  z-index:1;
}

.auth-main {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  background:var(--ivory);
}
.auth-form { width:100%; max-width:382px; }

.auth-toggle {
  display:flex;
  gap:26px;
  margin-bottom:30px;
  border-bottom:1px solid var(--hairline);
}
.auth-toggle button {
  background:none;
  border:none;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding-bottom:10px;
  margin-bottom:-1px;
  color:var(--mute);
  border-bottom:2px solid transparent;
  cursor:pointer;
}
.auth-toggle button.active { color:var(--ink); border-bottom-color:var(--accent); }

.auth-form h1 {
  font-family:var(--font-display);
  font-weight:400;
  font-size:32px;
  margin:10px 0 8px;
}
.auth-form .sub { color:var(--mute); font-size:13.5px; margin:0 0 30px; }
.auth-form .note { font-size:12px; color:var(--mute); margin-top:18px; }

/* ============================================================
   FORMS (shared)
   ============================================================ */
label {
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:6px;
}
input, select, textarea {
  width:100%;
  font-family:var(--font-body);
  font-size:14px;
  padding:12px 13px;
  border:1px solid var(--hairline);
  border-radius:2px;
  background:var(--paper);
  color:var(--ink);
  margin-bottom:16px;
}
textarea { resize:vertical; }
input:focus, select:focus, textarea:focus {
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:var(--accent);
}
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  padding:14px 22px;
  border-radius:2px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:var(--ivory);
  cursor:pointer;
  transition:opacity .15s ease, transform .05s ease;
}
.btn:hover { opacity:.88; }
.btn:active { transform:translateY(1px); }
.btn--block { width:100%; }
.btn--ghost {
  background:transparent;
  color:var(--ink);
  border:1px solid var(--hairline);
}
.btn--ghost:hover { border-color:var(--ink); opacity:1; }
.btn--sm { padding:9px 16px; font-size:12.5px; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app { display:flex; min-height:100vh; }

.sidebar {
  width:248px;
  flex-shrink:0;
  background:var(--rail);
  color:var(--ivory);
  display:flex;
  flex-direction:column;
  padding:36px 28px;
  position:sticky;
  top:0;
  height:100vh;
}
.sidebar__brand { margin-bottom:44px; }
.sidebar__brand .eyebrow { color:var(--gold); letter-spacing:.18em; margin-bottom:10px; }
.sidebar__brand .wordmark {
  font-family:var(--font-accent);
  font-size:34px;
  line-height:1;
  letter-spacing:.02em;
}
.sidebar__brand .sub {
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(250,247,242,.45);
  margin-top:8px;
}
.sidebar__nav { display:flex; flex-direction:column; gap:4px; flex:1; }
.sidebar__nav a {
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:12px 12px;
  border-radius:2px;
  font-size:14px;
  cursor:pointer;
  color:rgba(250,247,242,.6);
  transition:background .15s ease, color .15s ease;
}
.sidebar__nav a .num {
  font-family:var(--font-mono);
  font-size:11px;
  min-width:18px;
  color:var(--gold);
}
.sidebar__nav a:hover { background:rgba(250,247,242,.06); color:var(--ivory); }
.sidebar__nav a.active { background:rgba(160,144,96,.28); color:var(--ivory); }
.sidebar__nav a.active .num { color:var(--ivory); }
.sidebar__nav a.signout { margin-top:auto; color:rgba(250,247,242,.5); }
.sidebar__nav a.signout:hover { background:transparent; color:var(--ivory); }
.sidebar__foot {
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(250,247,242,.35);
  border-top:1px solid rgba(250,247,242,.12);
  padding-top:16px;
  margin-top:24px;
}

.main {
  flex:1;
  padding:40px 52px 90px;
  max-width:1180px;
  width:100%;
  background:var(--main-bg);
}

.topbar {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:32px;
  padding-bottom:22px;
  border-bottom:1px solid var(--hairline);
}
.topbar .eyebrow { margin-bottom:8px; }
.topbar h1 {
  font-family:var(--font-display);
  font-weight:400;
  font-size:34px;
  margin:0;
  letter-spacing:.01em;
}
.topbar__meta {
  text-align:right;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--mute);
  line-height:1.9;
}
.topbar__meta strong { color:var(--ink); font-weight:400; }
.sync-badge { display:inline-flex; align-items:center; gap:6px; color:#5E7A4A; }
.sync-badge::before { content:"●"; font-size:8px; }

/* ============================================================
   PANELS / GRIDS
   ============================================================ */
.panel {
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:2px;
  padding:28px;
}
.panel + .panel { margin-top:24px; }
.panel__head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:6px;
}
.panel__head h2 {
  font-family:var(--font-display);
  font-weight:400;
  font-size:19px;
  margin:0;
}
.panel__head .tag {
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
.panel__intro { color:var(--mute); font-size:13px; margin:0 0 18px; }

.grid-2 { display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:start; }
.grid-2--even { grid-template-columns:1fr 1fr; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:980px) { .grid-2, .grid-2--even, .grid-3 { grid-template-columns:1fr; } }

/* ============================================================
   DASHBOARD HERO
   ============================================================ */
.hero {
  background:var(--hero);
  color:var(--ivory);
  border-radius:3px;
  padding:40px 44px;
  margin-bottom:24px;
  position:relative;
  overflow:hidden;
}
.hero > * { position:relative; z-index:2; }
.hero .eyebrow { color:var(--gold); }
.hero h2 {
  font-family:var(--font-display);
  font-weight:400;
  font-size:38px;
  line-height:1.15;
  margin:14px 0 0;
  max-width:700px;
}
.hero__meta { display:flex; gap:44px; margin-top:26px; flex-wrap:wrap; }
.hero__meta .k {
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(250,247,242,.5);
  margin-bottom:6px;
}
.hero__meta .v { font-family:var(--font-display); font-size:19px; }
.hero .watermark {
  position:absolute;
  right:-30px; top:-70px;
  font-family:var(--font-accent);
  font-size:260px;
  line-height:1;
  color:rgba(160,144,96,.06);
  pointer-events:none;
  z-index:1;
}

/* ============================================================
   CALENDAR
   ============================================================ */
.cal-panel { overflow:visible; }
.cal-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}
.cal-head__left { display:flex; align-items:center; gap:14px; }
.cal-head h2 { font-family:var(--font-display); font-weight:400; font-size:22px; margin:0; }
.cal-nav { display:flex; gap:6px; }
.cal-nav button {
  font-family:var(--font-mono);
  font-size:13px;
  width:28px; height:28px;
  border:1px solid var(--hairline);
  border-radius:2px;
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  line-height:1;
}
.cal-nav button:hover { border-color:var(--accent); color:var(--accent); }
.se-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--sand);
  padding:5px 12px;
  border-radius:999px;
}
.se-badge::before { content:"★"; font-size:10px; }

.cal-dow {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
}
.cal-dow span {
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mute);
  text-align:center;
  padding-bottom:6px;
}
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }

.day {
  position:relative;
  aspect-ratio:1;
  border:1px solid var(--hairline);
  border-radius:2px;
  padding:7px 8px;
  font-family:var(--font-mono);
  font-size:12px;
  background:var(--paper);
  transition:border-color .12s, background .12s;
}
.day.empty { border-color:transparent; background:transparent; }
.day .n { color:var(--ink); opacity:.65; }
.day.has-events { background:#FCFAF5; cursor:pointer; }
.day.has-events .n { opacity:1; font-weight:700; }
.day.today { border:1.5px solid var(--accent); background:rgba(154,106,79,.08); }
.day.today .n { color:var(--accent); font-weight:700; opacity:1; }
.day:hover.has-events { border-color:var(--accent); }

.day__dots { position:absolute; bottom:7px; left:8px; display:flex; gap:3px; }
.day__dots span { width:6px; height:6px; border-radius:50%; }

/* Hover popover */
.day-pop {
  position:absolute;
  z-index:60;
  width:232px;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(9px);
  background:var(--ink);
  color:var(--ivory);
  border-radius:4px;
  padding:13px 15px;
  box-shadow:0 18px 44px rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.08);
  line-height:1.5;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .12s ease;
}
.day:hover .day-pop { opacity:1; visibility:visible; }
.day.pop-above .day-pop { top:auto; bottom:100%; transform:translateX(-50%) translateY(-9px); }
.day.pop-left  .day-pop { left:0; transform:translateX(0) translateY(9px); }
.day.pop-left.pop-above  .day-pop { transform:translateX(0) translateY(-9px); }
.day.pop-right .day-pop { left:auto; right:0; transform:translateX(0) translateY(9px); }
.day.pop-right.pop-above .day-pop { transform:translateX(0) translateY(-9px); }
.day-pop__date {
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:9px;
}
.day-pop__row { display:flex; gap:9px; margin-bottom:9px; }
.day-pop__row:last-child { margin-bottom:0; }
.day-pop__row .dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.day-pop__row .t { font-family:var(--font-body); font-size:12.5px; font-weight:700; line-height:1.35; }
.day-pop__row .m { font-family:var(--font-mono); font-size:9.5px; color:rgba(250,247,242,.6); margin-top:2px; letter-spacing:.04em; }

.cal-foot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--hairline);
  margin-top:22px;
  padding-top:18px;
}
.cal-foot .hint { font-family:var(--font-mono); font-size:10px; color:var(--mute); letter-spacing:.04em; }

/* ============================================================
   UPCOMING LIST
   ============================================================ */
.event-row {
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--hairline);
}
.event-row:last-child { border-bottom:none; }
.event-row__date {
  font-family:var(--font-display);
  font-size:24px;
  width:50px;
  text-align:center;
  flex-shrink:0;
  color:var(--accent);
  line-height:1;
}
.event-row__date span {
  display:block;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.1em;
  color:var(--mute);
  margin-top:3px;
}
.event-row__body { flex:1; }
.event-row__body h3 {
  font-family:var(--font-body);
  font-size:14px;
  font-weight:700;
  margin:0 0 6px;
}
.event-row__tags { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--hairline);
  color:var(--mute);
}
.chip .dot { width:7px; height:7px; border-radius:50%; }
.event-row__tags .when { font-family:var(--font-mono); font-size:10px; color:var(--mute); }

/* ============================================================
   QUICK LINKS
   ============================================================ */
.quicklinks { margin-top:24px; }
.quicklinks .panel { display:flex; flex-direction:column; padding:26px; }
.quicklinks .panel h2 { font-size:16px; }
.quicklinks .panel p { color:var(--mute); font-size:13px; margin:0 0 18px; flex:1; }

/* ============================================================
   ADD EVENT — steps + tz preview
   ============================================================ */
.steps .step { display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--hairline); }
.steps .step:last-of-type { border-bottom:none; }
.steps .step .i { font-family:var(--font-mono); font-size:15px; color:var(--accent); width:24px; flex-shrink:0; }
.steps .step h3 { font-family:var(--font-body); font-size:14px; font-weight:700; margin:0 0 4px; }
.steps .step p { margin:0; font-size:13px; color:var(--mute); }
.steps__note { border-top:1px solid var(--hairline); margin-top:8px; padding-top:16px; }
.steps__note p { font-size:12px; color:var(--mute); margin:0; }

.tz-preview {
  background:var(--sand);
  border:1px solid var(--hairline);
  border-radius:2px;
  padding:13px 14px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--mute);
  margin-bottom:16px;
  line-height:1.8;
}
.tz-preview strong { color:var(--ink); }

/* ============================================================
   CONTACTS
   ============================================================ */
.contact-card {
  border:1px solid var(--hairline);
  border-radius:2px;
  padding:18px;
  background:var(--paper);
}
.contact-card .role {
  display:block;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:8px;
}
.contact-card h3 { font-family:var(--font-body); font-size:15px; font-weight:700; margin:0 0 4px; }
.contact-card.big h3 { font-family:var(--font-display); font-weight:400; font-size:22px; }
.contact-card p { margin:2px 0; font-size:13px; color:var(--mute); }
.contact-card.editable { border-style:dashed; cursor:pointer; }
.contact-card.editable:hover { border-color:var(--accent); }

/* ============================================================
   SHOP
   ============================================================ */
.product-card {
  border:1px solid var(--hairline);
  border-radius:2px;
  background:var(--paper);
  overflow:hidden;
}
.product-card__media {
  aspect-ratio:4/3;
  background:var(--sand);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-accent);
  font-size:16px;
  color:var(--accent);
  letter-spacing:.05em;
  text-align:center;
  padding:14px;
}
.product-card__body { padding:16px; }
.product-card__body h3 { font-family:var(--font-body); font-size:14px; font-weight:700; margin:0 0 4px; }
.product-card__body p { margin:0 0 14px; font-size:12.5px; color:var(--mute); }
.product-card__row { display:flex; justify-content:space-between; align-items:center; }
.product-card__price { font-family:var(--font-mono); font-size:13px; color:var(--ink); }
.shop-note { border-top:1px solid var(--hairline); margin-top:22px; padding-top:16px; }
.shop-note p { font-size:12px; color:var(--mute); margin:0; }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position:fixed;
  bottom:28px;
  right:28px;
  background:var(--ink);
  color:var(--ivory);
  padding:15px 20px;
  border-radius:3px;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.24);
  z-index:200;
  max-width:360px;
  transform:translateY(160%);
  opacity:0;
  transition:transform .35s ease, opacity .35s ease;
}
.toast.show { transform:translateY(0); opacity:1; }
.toast .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; }

@media (max-width:760px) {
  .auth-aside { display:none; }
  .sidebar { display:none; }
  .main { padding:28px 20px 60px; }
}