/* ==========================================================================
   Raptool Meeting Booking — shared design system
   Minimal, geometric, high-contrast. No gradients, no decorative noise.
   Used by web/, admin/ and panel/ (the panel adds panel.css on top).
   ========================================================================== */

:root{
  /* brand */
  --brand:#F26A2E;
  --brand-ink:#FFFFFF;
  --brand-soft:#FEF1EA;

  /* room state colours — the single source of truth for every surface
     (tablet panel, floor map, week grid, analytics) */
  --state-available:#17A05C;
  --state-available-ink:#FFFFFF;
  --state-pending:#F2CC0D;          /* meeting started, not checked in */
  --state-pending-ink:#1A1400;
  --state-occupied:#F0563D;
  --state-occupied-ink:#FFFFFF;
  --state-closed:#3A3D42;
  --state-closed-ink:#FFFFFF;
  --state-offline:#6B7280;
  --state-offline-ink:#FFFFFF;

  /* neutrals */
  --bg:#FFFFFF;
  --bg-sunken:#F6F7F8;
  --bg-raised:#FFFFFF;
  --line:#E4E6EA;
  --line-strong:#CBD0D8;
  --ink:#14161A;
  --ink-2:#4B5158;
  --ink-3:#858C96;
  --ink-inv:#FFFFFF;

  --ok:#17A05C; --warn:#B98700; --danger:#D83A22; --info:#2563EB;

  /* type */
  --font:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-num:"Inter",system-ui,ui-sans-serif,sans-serif;

  /* space + shape */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --shadow-1:0 1px 2px rgba(16,20,28,.06),0 1px 1px rgba(16,20,28,.04);
  --shadow-2:0 4px 16px rgba(16,20,28,.08),0 1px 3px rgba(16,20,28,.05);
  --shadow-3:0 18px 48px rgba(16,20,28,.14);
  --focus:0 0 0 3px rgba(242,106,46,.35);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1013; --bg-sunken:#15181C; --bg-raised:#1A1E23;
    --line:#272C33; --line-strong:#39404A;
    --ink:#F2F4F7; --ink-2:#B4BCC6; --ink-3:#7C858F;
    --brand-soft:#2A1A11;
    --shadow-1:none; --shadow-2:0 4px 16px rgba(0,0,0,.5); --shadow-3:0 18px 48px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1013; --bg-sunken:#15181C; --bg-raised:#1A1E23;
  --line:#272C33; --line-strong:#39404A;
  --ink:#F2F4F7; --ink-2:#B4BCC6; --ink-3:#7C858F;
  --brand-soft:#2A1A11;
  --shadow-1:none; --shadow-2:0 4px 16px rgba(0,0,0,.5); --shadow-3:0 18px 48px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.02em;line-height:1.2}
h1{font-size:28px}h2{font-size:21px}h3{font-size:17px}h4{font-size:15px}
p{margin:0 0 var(--sp-3)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
small,.muted{color:var(--ink-3)}
.tnum{font-variant-numeric:tabular-nums}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-5) 0}

/* ------------------------------------------------------------- buttons */
.btn{
  --_bg:var(--bg-raised);--_ink:var(--ink);--_bd:var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 16px;border-radius:var(--r-sm);
  border:1px solid var(--_bd);background:var(--_bg);color:var(--_ink);
  font:inherit;font-weight:560;font-size:14px;cursor:pointer;white-space:nowrap;
  transition:filter .12s ease,background .12s ease,border-color .12s ease,transform .06s ease;
}
.btn:hover{filter:brightness(.97)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn-primary{--_bg:var(--brand);--_ink:var(--brand-ink);--_bd:transparent}
.btn-dark{--_bg:var(--ink);--_ink:var(--bg);--_bd:transparent}
.btn-ghost{--_bg:transparent;--_bd:transparent;--_ink:var(--ink-2)}
.btn-danger{--_bg:transparent;--_ink:var(--danger);--_bd:var(--danger)}
.btn-lg{height:46px;padding:0 22px;font-size:15px;border-radius:var(--r)}
.btn-sm{height:30px;padding:0 11px;font-size:13px}
.btn-block{width:100%}
.btn-icon{width:38px;padding:0}

/* -------------------------------------------------------------- fields */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-4)}
.field > label{font-size:13px;font-weight:560;color:var(--ink-2)}
.input,.select,.textarea{
  width:100%;height:38px;padding:0 12px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--bg-raised);color:var(--ink);
  font:inherit;font-size:14px;
}
.textarea{height:auto;min-height:84px;padding:9px 12px;resize:vertical}
.select{appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23858C96' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
.input::placeholder{color:var(--ink-3)}
.hint{font-size:12px;color:var(--ink-3)}
.err{font-size:12px;color:var(--danger)}
.row{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.row > *{flex:1 1 0;min-width:0}
.check{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--brand)}

/* --------------------------------------------------------------- cards */
.card{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1)}
.card-pad{padding:var(--sp-5)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line)}

/* --------------------------------------------------------------- chips */
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
  border-radius:var(--r-pill);background:var(--bg-sunken);border:1px solid var(--line);
  font-size:12.5px;font-weight:550;color:var(--ink-2)}
.chip.is-on{background:var(--brand);border-color:transparent;color:var(--brand-ink)}
.chip button{all:unset;cursor:pointer;line-height:0;opacity:.7}

.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.dot-available{background:var(--state-available)}
.dot-pending{background:var(--state-pending)}
.dot-occupied{background:var(--state-occupied)}
.dot-closed{background:var(--state-closed)}

.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;
  font-size:11.5px;font-weight:650;letter-spacing:.02em;text-transform:uppercase}
.badge-available{background:var(--state-available);color:var(--state-available-ink)}
.badge-pending{background:var(--state-pending);color:var(--state-pending-ink)}
.badge-occupied{background:var(--state-occupied);color:var(--state-occupied-ink)}
.badge-closed{background:var(--state-closed);color:var(--state-closed-ink)}
.badge-soft{background:var(--bg-sunken);color:var(--ink-2);border:1px solid var(--line)}

/* --------------------------------------------------------------- table */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-3);padding:10px 12px;border-bottom:1px solid var(--line)}
.table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tbody tr:hover{background:var(--bg-sunken)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- modal */
.modal-back{position:fixed;inset:0;background:rgba(10,13,18,.5);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-4);z-index:80}
.modal{background:var(--bg-raised);border-radius:var(--r-lg);box-shadow:var(--shadow-3);
  width:min(560px,100%);max-height:90vh;overflow:auto}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-5) var(--sp-5) var(--sp-3)}
.modal-body{padding:0 var(--sp-5) var(--sp-4)}
.modal-foot{display:flex;justify-content:flex-end;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line)}

/* --------------------------------------------------------------- toast */
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:200}
.toast{background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:var(--r-sm);
  box-shadow:var(--shadow-2);font-size:14px;font-weight:520;max-width:380px;
  animation:toast-in .18s ease}
.toast.is-err{background:var(--danger);color:#fff}
.toast.is-ok{background:var(--ok);color:#fff}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------- misc */
.spinner{width:18px;height:18px;border:2px solid var(--line-strong);border-top-color:var(--brand);
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:var(--sp-7) var(--sp-5);text-align:center;color:var(--ink-3)}
.stack{display:flex;flex-direction:column}
.grid{display:grid;gap:var(--sp-4)}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.center{display:flex;align-items:center;gap:var(--sp-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media print{.no-print{display:none!important}}