/* ===== EventDesk App Component Kit (Phase 2) — self-contained ===== */
:root{
  --purple:#7638FA;--purple-2:#704EFF;--purple-wash:#F3EFFF;
  --ink:#181819;--body:#515152;--muted:#6B6B6D;
  --line:#EAEAED;--line-2:#DDDCDA;--line-ctrl:#8F8E8B;--white:#fff;--off:#FAFAFB;--surface:#FAFAFB;--surface-2:#F5F4F2;
  --success:#2F9C63;--success-bg:#E3F6EC;--warn:#C77A12;--warn-bg:#FBF1DE;
  --danger:#C0392B;--danger-bg:#FBEAE7;--info:#3A6BC4;--info-bg:#E8EFFA;
  --r-sm:6px;--r:8px;--r-lg:12px;--control:38px;
  --sans:'Inter',system-ui,sans-serif;--disp:'Inter Tight',system-ui,sans-serif;
  /* Spacing & layout system (see web-design-guide.md). Additive — snap all spacing to these. */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;
  --app-maxw:1180px;--app-pad:32px;--block-gap:24px;--card-pad:24px;
  --fs-h1:clamp(26px,3.2vw,40px);--fs-h2:24px;--fs-h3:18px;--fs-body:15px;--fs-sm:13px;--fs-xs:11px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--sans);color:var(--body);background:var(--surface);-webkit-font-smoothing:antialiased;font-size:14px;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--disp);color:var(--ink);margin:0;letter-spacing:-.02em;font-weight:600;}

/* layout shell */
.app-shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh;}
.app-sidebar{background:var(--surface);border-right:1px solid var(--line);padding:18px 12px;}
.app-sidebar .logo{font-family:var(--disp);font-weight:600;font-size:18px;color:var(--ink);display:flex;align-items:center;gap:9px;padding:6px 10px 16px;}
.app-sidebar .logo .dot{width:24px;height:24px;border-radius:7px;background:var(--purple);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}
.app-sidebar .navi{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;color:var(--body);padding:9px 11px;border-radius:var(--r);margin-bottom:2px;cursor:pointer;}
.app-sidebar .navi:hover{background:var(--surface-2);}
.app-sidebar .navi.on{background:var(--purple-wash);color:var(--purple);font-weight:600;}
.app-topbar{display:flex;align-items:center;justify-content:space-between;background:var(--white);border-bottom:1px solid var(--line);padding:14px 24px;position:sticky;top:0;z-index:20;}
.app-topbar .title{font-family:var(--disp);font-weight:600;font-size:18px;color:var(--ink);}
.page{padding:24px;max-width:1200px;}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px;}
.section-head h2{font-size:18px;font-weight:600;}
.section-head .sub{font-size:13px;color:var(--muted);}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--control);padding:0 16px;border-radius:var(--r);border:1px solid transparent;font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;transition:background .12s,border-color .12s;}
.btn-sm{height:30px;padding:0 12px;font-size:13px;}
.btn-primary{background:var(--purple);color:#fff;}
.btn-primary:hover{background:var(--purple-2);}
.btn-secondary{background:var(--white);color:var(--ink);border-color:var(--line-2);}
.btn-secondary:hover{background:var(--surface-2);}
.btn-ghost{background:transparent;color:var(--body);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-danger{background:var(--danger);color:#fff;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* form controls */
.field{margin-bottom:16px;}
.label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.help{font-size:12px;color:var(--muted);margin-top:6px;}
.error{font-size:12px;color:var(--danger);margin-top:6px;}
.input,.select,.textarea{width:100%;height:var(--control);padding:0 12px;border:1px solid var(--line-ctrl);border-radius:var(--r);font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--white);outline:none;}
.textarea{height:auto;padding:10px 12px;min-height:84px;resize:vertical;}
.input:focus,.select:focus,.textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-wash);}
.checkbox,.radio{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;}
.toggle{position:relative;width:40px;height:22px;border-radius:999px;background:var(--line-2);cursor:pointer;transition:background .15s;}
.toggle.on{background:var(--purple);}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;}
.toggle.on::after{transform:translateX(18px);}

/* card / panel */
.card,.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);}
.card{padding:0;}
.card-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;}
.card-head h3{font-size:15px;font-weight:600;}
.card-body{padding:18px;}
.card-foot{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;}
.panel{padding:18px;}
.divider{height:1px;background:var(--line);border:0;margin:16px 0;}

/* stat */
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;}
.stat .v{font-family:var(--disp);font-size:28px;font-weight:600;color:var(--ink);line-height:1;}
.stat .k{font-size:12.5px;color:var(--muted);margin-top:6px;}

/* table */
.table-wrap{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.table{width:100%;border-collapse:collapse;font-size:13.5px;}
.table th{text-align:left;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:11px 16px;border-bottom:1px solid var(--line);background:var(--surface);}
.table td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink);}
.table tbody tr:last-child td{border-bottom:0;}
.table tbody tr:hover{background:var(--surface);}
.row-actions{display:flex;gap:8px;justify-content:flex-end;}

/* badge / chip / avatar */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.02em;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--body);}
.badge.success{background:var(--success-bg);color:#1f6e44;}
.badge.warn{background:var(--warn-bg);color:#8a560d;}
.badge.danger{background:var(--danger-bg);color:#8a2b20;}
.badge.info{background:var(--info-bg);color:#2a4f93;}
.badge.brand{background:var(--purple-wash);color:var(--purple);}
.badge.neutral{background:var(--surface-2);color:var(--body);}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;border:1px solid var(--line-2);border-radius:999px;padding:6px 13px;background:var(--white);}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--purple-wash);color:var(--purple);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;}

/* progress / empty */
.progress{height:8px;border-radius:999px;background:var(--line);overflow:hidden;}
.progress > i{display:block;height:100%;background:var(--purple);}
.empty{text-align:center;padding:40px 20px;color:var(--muted);}
.empty .t{font-family:var(--disp);font-size:16px;color:var(--ink);margin-bottom:6px;}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;}
.tab{padding:10px 14px;font-size:14px;font-weight:500;color:var(--body);border-bottom:2px solid transparent;cursor:pointer;}
.tab.on{color:var(--purple);border-bottom-color:var(--purple);font-weight:600;}

/* dropdown menu */
.menu{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 30px -12px rgba(20,10,50,.25);padding:6px;min-width:180px;}
.menu a{display:block;padding:9px 11px;border-radius:var(--r-sm);font-size:13.5px;color:var(--ink);}
.menu a:hover{background:var(--surface);}

/* modal */
.modal{position:fixed;inset:0;background:rgba(20,16,31,.5);display:none;align-items:center;justify-content:center;padding:24px;z-index:100;}
.modal.open{display:flex;}
.modal-dialog{background:var(--white);border-radius:var(--r-lg);max-width:520px;width:100%;box-shadow:0 30px 60px -20px rgba(20,10,50,.5);}
.modal-dialog .card-body{max-height:70vh;overflow:auto;}

/* toast / alert */
.toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:#fff;padding:13px 18px;border-radius:var(--r);font-size:13.5px;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);z-index:120;}
.alert{display:flex;gap:10px;align-items:flex-start;padding:13px 16px;border-radius:var(--r);font-size:13.5px;border:1px solid;}
.alert.success{background:var(--success-bg);border-color:var(--success);color:#1f6e44;}
.alert.warn{background:var(--warn-bg);border-color:var(--warn);color:#8a560d;}
.alert.danger{background:var(--danger-bg);border-color:var(--danger);color:#8a2b20;}
.alert.info{background:var(--info-bg);border-color:var(--info);color:#2a4f93;}

/* responsive */
@media(max-width:860px){
  .app-shell{grid-template-columns:1fr;}
  .app-sidebar{display:none;}
  .page{padding:16px;}
}

/* ===== a11y + state foundations (UX pass — EliseAI-preserving) ===== */
/* Visible keyboard focus on every interactive element (WCAG 2.1 AA). */
a:focus-visible,button:focus-visible,.btn:focus-visible,.navi:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible,[role="button"]:focus-visible,[role="tab"]:focus-visible,
summary:focus-visible{outline:2px solid var(--purple);outline-offset:2px;}
/* Press feedback the kit was missing (disabled affordance already present). */
.btn:active:not([disabled]){transform:translateY(1px);}
/* Honor reduced-motion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}