/* ==========================================================================
   AMBRA — shared UI stylesheet
   --------------------------------------------------------------------------
   One design system for every AMBRA screen: /login, /panel and whatever comes
   next. Nothing here is page-specific until section 9.

   How to extend it comfortably:
     · Never hardcode a colour, font or radius — add or reuse a token (§1).
     · Anything reusable (buttons, fields, chips, dropdowns, modals) goes in
       §3–§8 and gets used verbatim by the page layers below.
     · A new page = a body class (`.auth`, `.app`, …) + its own section at the
       end. Page layers must scope every selector under that body class or a
       block class, so pages can never bleed into each other.

   Contents
     1.  Tokens
     2.  Base / reset
     3.  Form fields
     4.  Buttons
     5.  Chips, pills & segmented controls
     6.  Dropdowns
     7.  Modals / overlays
     8.  Tables
     9.  Page — auth (login card)
     10. Page — app shell (topbar, views)
     11. App module — projects
     12. App module — users
     13. App module — permissions tree
     14. Responsive
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root{
  /* Surfaces & ink */
  --bg:#F1EFEA;
  --card:#FFFFFF;
  --surface:#F7F5F0;
  --surface-hover:#ECE9E1;
  --line:#E2DFD6;
  --ink:#20241F;
  --muted:#6C7269;
  --faint:#9A9F94;

  /* Brand & state */
  --accent:#FF711C;
  --accent-bright:#FF8A42;
  --accent-soft:rgba(255,113,28,0.09);
  --error:#B3453D;
  --error-soft:rgba(179,69,61,0.08);
  --error-line:rgba(179,69,61,0.25);
  --success:#5A8A5E;
  --warning:#C98A2E;

  /* Type */
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  /* Shape & depth */
  --radius:16px;
  --radius-md:12px;
  --radius-sm:9px;
  --radius-pill:20px;
  --shadow-card:0 24px 60px -20px rgba(32,36,31,0.18);
  --shadow-pop:0 16px 40px -12px rgba(32,36,31,0.22);
  --shadow-modal:0 30px 70px -20px rgba(32,36,31,0.32);

  --speed:.15s;
}


/* ==========================================================================
   2. Base / reset
   ========================================================================== */

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(32,36,31,0.05) 1px, transparent 0);
  background-size:22px 22px;
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* Shared micro-typography ------------------------------------------------ */

/* Small uppercase mono caption — used for eyebrows, labels, table heads. */
.eyebrow,
.field label,
.dropdown-label,
.utable-head,
.perm-head .label{
  font-family:var(--font-mono);
  text-transform:uppercase;
  color:var(--muted);
}

.eyebrow{
  margin:0 0 4px;
  font-size:10.5px;
  letter-spacing:.16em;
  text-align:center;
}


/* ==========================================================================
   3. Form fields
   ========================================================================== */

.field label{
  display:block;
  font-size:10.5px;
  letter-spacing:.06em;
  margin-bottom:6px;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field input, .field select{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 13px;
  font-size:14px;
  font-family:var(--font-body);
  color:var(--ink);
  transition:border-color var(--speed), background var(--speed);
}
.field input::placeholder{ color:var(--faint); }
.field input:focus, .field select:focus{
  outline:none;
  border-color:var(--accent);
  background:#fff;
}

.error-msg{
  display:none;
  font-size:12.5px;
  color:var(--error);
  background:var(--error-soft);
  border:1px solid var(--error-line);
  padding:9px 12px;
  border-radius:8px;
}
.error-msg.show{ display:block; }


/* ==========================================================================
   4. Buttons
   Base sizes are the compact app sizes; `.btn-block` grows one to the
   full-width form size used on the login card.
   ========================================================================== */

.btn-primary,
.btn-ghost,
.btn-outline{
  font-family:var(--font-body);
  font-weight:600;
  font-size:12.5px;
  border-radius:var(--radius-sm);
  padding:9px 15px;
  cursor:pointer;
  transition:var(--speed);
}

.btn-primary{
  background:var(--accent);
  color:#fff;
  border:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.btn-primary:hover{ background:var(--accent-bright); }
.btn-primary:active{ transform:translateY(1px); }
.btn-primary svg{ width:14px; height:14px; }

.btn-ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--muted);
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--ink); }

.btn-outline{
  width:100%;
  background:transparent;
  border:1.5px dashed var(--line);
  border-radius:10px;
  padding:12px;
  font-size:13px;
  color:var(--muted);
}
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); }

/* Full-width form button (login submit, modal CTAs that fill the row). */
.btn-block{
  width:100%;
  justify-content:center;
  padding:13px;
  font-size:14px;
}

/* Icon-only square button (topbar). */
.icon-btn{
  width:34px; height:34px;
  border-radius:var(--radius-sm);
  border:none;
  background:transparent;
  color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:var(--speed);
}
.icon-btn:hover,
.icon-btn.active{ background:var(--surface-hover); color:var(--ink); }
.icon-btn svg{ width:17px; height:17px; }

.cal-nav-btn{
  background:var(--surface); border:1px solid var(--accent); color:var(--accent);
  font-size:20px; font-weight:700; line-height:1;
}
.cal-nav-btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

.avatar-btn{
  width:34px; height:34px;
  border-radius:50%;
  border:none;
  background:var(--accent);
  color:#fff;
  font-family:var(--font-mono);
  font-size:11px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}


/* ==========================================================================
   5. Chips, pills & segmented controls
   ========================================================================== */

/* Multi-select chips (projects / bands). */
.chip-select{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--muted);
  font-family:var(--font-body);
  font-size:12px; font-weight:500;
  padding:6px 12px;
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:var(--speed);
}
.chip:hover{ border-color:var(--accent); }
.chip.selected{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }

/* Filter pills (users view). */
.filter-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.filter-pill{
  border:1px solid var(--line);
  background:var(--card);
  color:var(--muted);
  font-family:var(--font-body);
  font-size:12px; font-weight:500;
  padding:6px 13px;
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:var(--speed);
  max-width:190px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.filter-pill:hover{ border-color:var(--accent); color:var(--ink); }
.filter-pill.active{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }

/* Tab-style segmented control (topbar views). */
.tabs-seg{
  display:flex;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  height:34px;
  background:var(--card);
}
.seg-btn{
  border:none;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-body);
  font-size:12.5px; font-weight:500;
  padding:0 16px;
  height:100%;
  cursor:pointer;
  transition:var(--speed);
}
.seg-btn:hover{ color:var(--ink); }
.seg-btn.active{ background:var(--accent); color:#fff; font-weight:600; }

/* Three-state control: View / Edit / None. */
.seg3{
  display:flex;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
}
.seg3 button{
  border:none;
  background:var(--bg);
  color:var(--faint);
  font-family:var(--font-body);
  font-size:11px; font-weight:600;
  padding:6px 11px;
  cursor:pointer;
  transition:.12s;
}
.seg3 button + button{ border-left:1px solid var(--line); }
.seg3 button.selected{ background:var(--accent); color:#fff; }
.seg3 button.selected.is-none{ background:var(--faint); }


/* ==========================================================================
   6. Dropdowns
   Markup: .dropdown-anchor > trigger + .dropdown-panel
   ========================================================================== */

.dropdown-anchor{ position:relative; }

.dropdown-panel{
  display:none;
  position:absolute;
  top:calc(100% + 8px); right:0;
  z-index:60;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-pop);
  min-width:220px;
  padding:8px;
}
.dropdown-panel.open{ display:block; }
.dropdown-panel .field{ padding:2px 3px; margin-bottom:10px; }
.dropdown-panel .field:last-child{ margin-bottom:2px; }

.dropdown-item{
  width:100%;
  text-align:left;
  padding:9px 11px;
  font-size:12.5px;
  font-family:var(--font-body);
  border:none;
  background:transparent;
  border-radius:8px;
  display:flex; align-items:center; gap:9px;
  color:var(--ink);
  cursor:pointer;
}
.dropdown-item:hover{ background:var(--surface-hover); }
.dropdown-item svg{ width:15px; height:15px; color:var(--muted); flex-shrink:0; }

.dropdown-sep{ height:1px; background:var(--line); margin:6px 2px; }
.dropdown-label{
  font-size:10px;
  letter-spacing:.06em;
  color:var(--faint);
  padding:6px 11px 3px;
}

/* Collapsible inline search (topbar). */
.search-box{
  display:none;
  align-items:center; gap:6px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:0 10px;
  height:34px;
}
.search-box.open{ display:flex; }
.search-box svg{ width:14px; height:14px; color:var(--faint); flex-shrink:0; }
.search-box input{
  border:none; background:transparent;
  font-size:13px; font-family:var(--font-body);
  color:var(--ink);
  outline:none;
  width:170px;
}


/* ==========================================================================
   7. Modals / overlays
   ========================================================================== */

.overlay{
  position:fixed; inset:0;
  background:rgba(32,36,31,.45);
  display:none;
  align-items:flex-start; justify-content:center;
  padding:40px 16px;
  overflow-y:auto;
  z-index:200;
}
.overlay.open{ display:flex; }

.modal{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  width:100%;
  max-width:420px;
  box-shadow:var(--shadow-modal);
}
.modal.modal-wide{ max-width:580px; }
.modal h2{ font-family:var(--font-display); font-weight:700; font-size:19px; margin:0 0 4px; }
.modal .hint{ font-size:12px; color:var(--faint); margin:0 0 16px; }
.modal .field{ margin-bottom:14px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:9px; margin-top:22px; }


/* ==========================================================================
   8. Tables
   ========================================================================== */

.utable-head{
  background:var(--surface);
  font-size:10.5px;
  letter-spacing:.05em;
  color:var(--faint);
}


/* ==========================================================================
   9. Page — auth  (body.auth · /login)
   ========================================================================== */

body.auth{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.auth-card{
  position:relative;
  width:100%;
  max-width:380px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:40px 34px 34px;
  box-shadow:var(--shadow-card);
}

/* Credential notch — the signature element, like a badge lanyard slot. */
.auth-card .notch{
  position:absolute;
  top:-1px; left:50%;
  transform:translateX(-50%);
  width:64px; height:22px;
  background:var(--bg);
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 12px 12px;
}
.auth-card .notch::after{
  content:'';
  position:absolute;
  top:7px; left:50%;
  transform:translateX(-50%);
  width:28px; height:4px;
  border-radius:3px;
  background:var(--line);
}

.auth-card .logo{
  display:block;
  width:52px;
  height:auto;
  margin:26px auto 12px;
}

.auth-card h1{
  margin:0 0 30px;
  text-align:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:21px;
  letter-spacing:-0.01em;
  line-height:1.3;
}
.auth-card h1 span{ color:var(--accent); }

.auth-card form{ display:flex; flex-direction:column; gap:16px; }
.auth-card form .btn-block{ margin-top:6px; }

.auth-card .footnote{
  margin-top:24px;
  text-align:center;
  font-size:11.5px;
  color:var(--faint);
  font-family:var(--font-mono);
  letter-spacing:.02em;
}


/* ==========================================================================
   10. Page — app shell  (body.app · /panel)
   ========================================================================== */

/* Scales the whole panel up the same way the browser's own 110% zoom would —
   layout, fonts and spacing all grow together, nothing is picked by hand. */
/* zoom scales the whole rendered box, so 100vh (from the base body rule)
   would render as 120vh — pushing the footer below the actual viewport.
   Dividing by the same factor here cancels that out exactly. */
body.app{ zoom:1.2; min-height:calc(100vh / 1.2); }

.app-shell{ flex:1 0 auto; max-width:1180px; width:100%; margin:0 auto; padding:26px 28px 70px; }

.site-footer{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 40px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:11.5px; color:var(--faint);
}
.footer-links{ display:flex; gap:14px; }
.footer-links a{ color:var(--faint); text-decoration:none; transition:color var(--speed); display:inline-flex; align-items:center; }
.footer-links a:hover{ color:var(--accent-bright); }

/* Topbar */
.topbar{
  display:flex; flex-direction:column; gap:18px;
  padding-bottom:16px; margin-bottom:26px;
  border-bottom:1px solid var(--line);
}
.app-brand{ display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1.25; }
.app-brand-name{
  font-family:var(--font-display); font-weight:700; font-size:30px;
  letter-spacing:.01em; color:var(--accent);
}
.app-brand-tagline{
  font-family:var(--font-mono); font-size:9px; color:var(--faint);
  letter-spacing:.02em;
}
.topbar-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; }
.workspace{ display:flex; align-items:center; gap:9px; flex-shrink:0; justify-self:start; }
.tabs-seg{ justify-self:center; }
.topbar-actions{ justify-self:end; }
.workspace-dot{ width:24px; height:24px; border-radius:7px; background:var(--accent); flex-shrink:0; }
.workspace-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:19px;
  letter-spacing:-0.01em;
  cursor:text;
  outline:none;
  border-radius:6px;
  padding:2px 7px;
  margin:-2px -7px;
  transition:background var(--speed), box-shadow var(--speed);
}
.workspace-name:hover{ background:var(--surface-hover); }
.workspace-name:focus{ background:var(--surface-hover); box-shadow:0 0 0 1px var(--accent) inset; }
.topbar-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }

/* Section head */
.section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; flex-wrap:wrap; }
.section-head-left{ display:flex; align-items:baseline; gap:10px; }
.section-head h2{ margin:0; font-family:var(--font-display); font-weight:700; font-size:16.5px; }
.section-head h3{ margin:0; font-family:var(--font-display); font-weight:700; font-size:14px; }
.count-label{ font-family:var(--font-mono); font-size:11.5px; color:var(--faint); }

/* Generic toggle switch (e.g. "Tour Mode" on the Projects view). */
.switch-row{ display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.switch-label{ font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--muted); }
.switch{ position:relative; display:inline-block; width:38px; height:22px; flex-shrink:0; }
.switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.switch-track{ position:absolute; inset:0; background:var(--line); border-radius:20px; transition:background var(--speed); pointer-events:none; }
.switch-thumb{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(32,36,31,.25); transition:transform var(--speed); }
.switch input:checked + .switch-track{ background:var(--accent); }
.switch input:checked + .switch-track .switch-thumb{ transform:translateX(16px); }


/* ==========================================================================
   11. App module — projects
   ========================================================================== */

.project-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }

.pcard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  position:relative;
  min-height:188px;
  display:flex;
  flex-direction:column;
  transition:border-color var(--speed), box-shadow var(--speed);
}
.pcard.has-link{ cursor:pointer; }
.pcard:hover{ border-color:var(--accent); box-shadow:0 10px 26px -14px rgba(32,36,31,.25); }
.pcard-icon{ width:20px; height:20px; color:var(--muted); }
.pcard-name{ font-family:var(--font-body); font-weight:600; font-size:17px; margin:10px 0 2px; }
.pcard-meta{ font-size:11px; color:var(--faint); margin:0 0 10px; font-family:var(--font-mono); }
/* Space for the actions is reserved up front (via .pcard's min-height and
   this block sitting in normal flow, pinned to the bottom by margin-top:auto)
   so revealing them on hover only changes opacity — the card never resizes. */
.pcard-actions{
  margin-top:auto;
  padding-top:8px;
  display:flex; flex-direction:column; gap:2px;
  border-top:1px solid transparent;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--speed) ease, border-color var(--speed) ease;
}
.pcard:hover .pcard-actions{ opacity:1; pointer-events:auto; border-top-color:var(--line); }
.pcard-action-btn{
  width:100%; text-align:left;
  padding:6px 5px; font-size:12px;
  background:transparent; border:none;
  display:flex; align-items:center; gap:7px;
  color:var(--muted); border-radius:6px; cursor:pointer;
  font-family:var(--font-body);
}
.pcard-action-btn:hover{ background:var(--surface-hover); color:var(--ink); }
.pcard-action-btn svg{ width:13px; height:13px; flex-shrink:0; }
.pcard-del{
  position:absolute; top:10px; right:10px;
  width:22px; height:22px;
  border:none; border-radius:50%;
  background:transparent; color:var(--faint);
  opacity:0; transition:var(--speed); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.pcard-del svg{ width:11px; height:11px; }
.pcard:hover .pcard-del{ opacity:1; }
.pcard-del:hover{ background:rgba(179,69,61,.12); color:var(--error); }

.pcard-new{
  background:transparent;
  border:1.5px dashed var(--line);
  border-radius:14px;
  min-height:188px; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  color:var(--muted); cursor:pointer;
  transition:var(--speed);
  font-family:var(--font-body);
}
.pcard-new:hover{ border-color:var(--accent); color:var(--accent); }
.pcard-new svg{ width:19px; height:19px; }

/* ==========================================================================
   12. App module — users
   ========================================================================== */

.users-table{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
}
/* Corners are rounded on the head/last-row instead of clipped via the
   container's overflow:hidden — that would also clip the udots-menu
   dropdown, which needs to pop out above the table. */
.utable-head{ border-radius:var(--radius) var(--radius) 0 0; }
.utable-row:last-child{ border-radius:0 0 var(--radius) var(--radius); }
.utable-head, .utable-row{
  display:grid;
  grid-template-columns:2.2fr 1fr 1fr 90px 44px;
  gap:10px;
  align-items:center;
  padding:11px 16px;
}
.utable-row{ border-top:1px solid var(--line); transition:background .12s; }
.utable-row:hover{ background:var(--surface); }
.utable-row.is-hidden{ display:none; }

.urow-user{ display:flex; align-items:center; gap:10px; min-width:0; }
.uavatar{
  width:28px; height:28px;
  border-radius:50%;
  background:var(--surface); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:600; font-family:var(--font-mono);
  flex-shrink:0;
}
.uavatar.me{ background:var(--accent); color:#fff; }
.uname-wrap{ min-width:0; }
.uname{ font-size:13px; font-weight:500; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uemail{ font-size:11px; color:var(--faint); margin:1px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.urole-pill{ font-size:11px; color:var(--muted); background:var(--surface); padding:3px 9px; border-radius:var(--radius-pill); width:fit-content; }

.ustatus{ font-size:11.5px; display:flex; align-items:center; gap:6px; }
.ustatus-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ustatus-icon{ width:12px; height:12px; flex-shrink:0; }
.ustatus.active{ color:var(--success); }
.ustatus.active .ustatus-dot{ background:var(--success); }
.ustatus.pending{ color:var(--warning); }
.ustatus.pending .ustatus-dot{ background:var(--warning); }
.ustatus.inactive{ color:var(--faint); }
.ustatus.inactive .ustatus-dot{ background:var(--faint); }

.udots-anchor{ position:relative; justify-self:end; z-index:1; }
.udots-anchor:has(.udots-menu.open){ z-index:150; }
.udots-btn{
  background:none; border:none;
  color:var(--faint); cursor:pointer;
  width:28px; height:28px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
}
.udots-btn svg{ width:15px; height:15px; }
.udots-btn:hover{ background:var(--surface-hover); color:var(--ink); }
.udots-menu{
  display:none;
  position:absolute; top:calc(100% + 4px); right:0;
  z-index:150;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow-pop);
  min-width:170px;
  padding:6px;
}
.udots-menu.open{ display:block; }

/* Role picker (user modal) */
.role-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.role-btn{
  flex:1; min-width:78px;
  border:1px solid var(--line);
  background:var(--bg); color:var(--muted);
  font-family:var(--font-body); font-weight:600; font-size:12.5px;
  padding:9px; border-radius:var(--radius-sm);
  cursor:pointer; transition:var(--speed);
}
.role-btn:hover{ border-color:var(--accent); color:var(--ink); }
.role-btn.selected{ background:var(--accent); border-color:var(--accent); color:#fff; }

.custom-role-row{ display:none; gap:7px; margin-top:8px; }
.custom-role-row.open{ display:flex; }
.custom-role-row input{
  flex:1;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  font-size:12.5px; font-family:var(--font-body);
  color:var(--ink);
}
.custom-role-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.custom-chip{
  display:flex; align-items:center; gap:6px;
  border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:5px 6px 5px 12px;
  font-size:11.5px; font-family:var(--font-body); font-weight:500;
  color:var(--muted); background:var(--bg);
  cursor:pointer;
}
.custom-chip.selected{ background:var(--accent); border-color:var(--accent); color:#fff; }
.custom-chip button{
  background:rgba(0,0,0,.1); border:none; color:inherit;
  width:16px; height:16px; border-radius:50%;
  font-size:10px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.custom-chip button svg{ width:8px; height:8px; }


/* ==========================================================================
   13. App module — permissions tree
   ========================================================================== */

.perm-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.perm-head .label{ font-size:10.5px; letter-spacing:.05em; }
.perm-count{ font-family:var(--font-mono); font-size:11px; color:var(--faint); }

.perm-tree{ border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.perm-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; gap:10px;
  background:var(--card);
  border-top:1px solid var(--line);
}
.perm-tree .perm-row:first-child{ border-top:none; }
.perm-row.sub{ background:var(--surface); padding-left:36px; }
.perm-row-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.perm-name{ font-size:12.5px; font-weight:600; }
.perm-row.sub .perm-name{ font-weight:500; font-size:12px; color:var(--muted); }

.perm-chevron{ width:14px; height:14px; color:var(--faint); cursor:pointer; flex-shrink:0; transition:transform var(--speed); }
.perm-chevron.open{ transform:rotate(90deg); }
.perm-chevron.hidden-chevron{ visibility:hidden; }

.perm-subwrap{ display:none; }
.perm-subwrap.open{ display:block; }


/* ==========================================================================
   14. Responsive
   ========================================================================== */

@media (max-width:760px){
  .utable-head, .utable-row{ grid-template-columns:1.8fr 1fr 70px 34px; }
  .utable-head span:nth-child(3), .utable-row .ustatus{ display:none; }
}

/* Phones in landscape (roughly 570-930px wide) still hit this width range,
   not just portrait phones <=760px. The 1.2 zoom that makes the panel feel
   right on desktop just eats into that already-tight space, so it's turned
   back off here, and the 3-column topbar grid (brand/tabs/actions) is
   switched to stacking instead of staying side-by-side and squeezing. */
@media (max-width:930px){
  body.app{ zoom:1; min-height:100vh; }
  .topbar-row{ grid-template-columns:1fr; row-gap:12px; justify-items:center; }
  .workspace, .topbar-actions{ justify-self:center; }
}

/* ==========================================================================
   15. Calendar
   ========================================================================== */
.btn-primary.small, .btn-ghost.small, .btn-outline.small{ padding:6px 12px; font-size:11.5px; }

.cal-layout{ display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:stretch; }
.cal-main{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; }
.cal-nav{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.cal-month-title{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); }
.cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; }
.cal-weekdays span{ text-align:center; font-family:var(--font-mono); font-size:10.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.05em; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-day{
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:6px 7px;
  display:flex; flex-direction:column; gap:4px; cursor:pointer; transition:var(--speed);
  height:92px; overflow:hidden;
}
.cal-day:hover{ border-color:var(--accent); }
.cal-day-outside{ opacity:.35; cursor:default; }
.cal-day-today{ border-color:var(--accent); background:var(--accent-soft); }
.cal-day-num{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); flex-shrink:0; }
.cal-day-today .cal-day-num{ color:var(--accent); font-weight:700; }
.cal-day-concert{ background:var(--accent); border-color:var(--accent); }
.cal-day-concert .cal-day-num{ color:#fff; font-weight:700; }
.cal-day-concert .cal-marker-text{ color:#fff; }
.cal-day-concert:hover{ border-color:var(--ink); }
.cal-day-markers{ display:flex; flex-direction:column; gap:2px; overflow:hidden; flex:1; min-height:0; }
.cal-marker{
  font-size:10px; padding:2px 5px; border-radius:5px;
  display:flex; align-items:center; gap:4px; color:var(--ink); flex-shrink:0;
}
.cal-marker-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }
.cal-marker-event{ background:rgba(255,113,28,0.14); }
.cal-marker-rehearsal{ background:rgba(74,127,181,0.14); }
.cal-marker-custom{ background:rgba(140,111,181,0.14); }
.cal-marker-reminder{ background:rgba(217,162,61,0.18); }
.cal-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.cal-dot-event{ background:var(--accent); }
.cal-dot-rehearsal{ background:#4A7FB5; }
.cal-dot-custom{ background:#8C6FB5; }
.cal-dot-reminder{ background:#D9A23D; }
.cal-legend{ display:flex; gap:18px; margin-top:14px; }
.cal-legend-item{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); }

.cal-side{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px; display:flex; flex-direction:column; min-height:0; }
.cal-side-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-shrink:0; }
#reminders-list{ overflow-y:auto; flex:1; min-height:0; }
.cal-side-head h3{ margin:0; font-size:14px; }
.reminder-group{ margin-bottom:22px; }
.reminder-group:last-child{ margin-bottom:0; }
.reminder-group-title{ font-family:var(--font-mono); font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.reminder-box{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:10px; }
.reminder-box:last-child{ margin-bottom:0; }
.reminder-box-title{ font-family:var(--font-mono); font-weight:700; font-size:10.5px; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.reminder-item{ display:flex; align-items:flex-start; gap:8px; padding:6px 0; border-top:1px solid var(--line); }
.reminder-item:first-child{ border-top:none; }
.reminder-item label{ display:flex; align-items:flex-start; gap:8px; flex:1; min-width:0; cursor:pointer; }
.reminder-item input[type=checkbox]{ margin-top:3px; flex-shrink:0; }
.reminder-item-text{ font-size:12.5px; color:var(--ink); }
.reminder-item.done .reminder-item-text{ text-decoration:line-through; color:var(--faint); }
.reminder-item-due{ display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--faint); margin-top:2px; }
.reminder-item-due.overdue{ color:#C0392B; }
.reminder-item-due.soon{ color:var(--accent); }
.reminder-item-x{ background:none; border:none; color:var(--faint); cursor:pointer; font-size:12px; flex-shrink:0; padding:2px; }
.reminder-item-x:hover{ color:#C0392B; }

.day-detail-item{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.day-detail-item-title{ font-weight:600; font-size:13.5px; color:var(--ink); }
.day-detail-item-sub{ font-family:var(--font-mono); font-size:11px; color:var(--faint); margin-top:2px; }

@media (max-width:760px){
  .cal-layout{ grid-template-columns:1fr; }
}

/* ==========================================================================
   16. Finance — an Excel-style sheet, grouped by category
   ========================================================================== */
.fin-type-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.fin-type-btn{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:8px 18px; font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; transition:var(--speed);
}
.fin-type-btn:hover{ border-color:var(--accent); color:var(--ink); }
.fin-type-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.fin-summary{ display:flex; gap:14px; margin-top:18px; }
.fin-summary-item{
  flex:1; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px 16px; display:flex; flex-direction:column; gap:4px;
}
.fin-summary-item span:first-child{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); }
.fin-summary-item span:last-child{ font-family:var(--font-mono); font-size:18px; font-weight:700; color:var(--ink); }
.fin-profit{ border-color:var(--ink); }
.fin-profit.positive span:last-child{ color:#1E8E5A; }
.fin-profit.negative span:last-child{ color:#C0392B; }
.fin-table{ border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--card); }
.fin-header-row, .fin-row, .fin-subtotal-row, .fin-grand-total-row{
  display:grid; grid-template-columns:2fr 110px 50px 130px 2fr 24px; gap:10px; align-items:center;
  padding:8px 14px; border-top:1px solid var(--line);
}
.fin-revenue .fin-header-row, .fin-revenue .fin-row, .fin-revenue .fin-subtotal-row, .fin-revenue .fin-grand-total-row{
  grid-template-columns:2fr 70px 110px 50px 130px 2fr 24px;
}
.fin-expense .fin-header-row, .fin-expense .fin-row, .fin-expense .fin-subtotal-row, .fin-expense .fin-grand-total-row{
  grid-template-columns:2fr 110px 50px 100px 130px 2fr 24px;
}
.fin-quantity{ text-align:right; font-family:var(--font-mono); }
.fin-method{
  background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:6px 8px;
  font-size:12.5px; color:var(--ink); font-family:var(--font-body); width:100%;
}
.fin-row-readonly{ color:var(--ink); font-style:italic; }
.fin-item-readonly{ font-size:12.5px; font-style:italic; }
.fin-amount-readonly{ text-align:right; font-family:var(--font-mono); font-size:12.5px; font-style:italic; }
.fin-imported-tag{
  font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.04em;
  background:var(--surface); border-radius:4px; padding:1px 5px; margin-left:4px;
}
.fin-method-summary{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px 16px; margin-top:14px;
}
.fin-method-summary-title{
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--faint); font-weight:700; margin-bottom:8px;
}
.fin-method-total-row{ display:flex; justify-content:space-between; padding:5px 0; font-size:13px; color:var(--ink); }
.fin-method-total-row span:last-child{ font-family:var(--font-mono); font-weight:700; }
.fin-header-row{
  border-top:none; background:var(--surface); font-family:var(--font-mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:700;
}
.fin-cat-head{
  background:var(--ink); color:#fff; font-weight:700; font-size:12px; letter-spacing:.02em;
  padding:9px 14px; border-top:1px solid var(--line);
}
.fin-row input{
  background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:6px 8px;
  font-size:12.5px; color:var(--ink); font-family:var(--font-body); width:100%;
}
.fin-row .fin-amount{ text-align:right; font-family:var(--font-mono); }
.fin-row .fin-paid{ width:auto; justify-self:center; }
.fin-remove{ background:none; border:none; color:var(--faint); cursor:pointer; font-size:12px; padding:2px; }
.fin-remove:hover{ color:#C0392B; }
.fin-add-row{
  display:block; width:100%; text-align:left; background:none; border:none; border-top:1px solid var(--line);
  color:var(--accent); cursor:pointer; font-size:11.5px; font-weight:600; padding:7px 14px;
}
.fin-add-row:hover{ text-decoration:underline; }
.fin-subtotal-row{ background:var(--surface); font-weight:700; font-size:12.5px; color:var(--ink); }
.fin-subtotal-row span:nth-child(2){ text-align:right; font-family:var(--font-mono); }
.fin-grand-total-row{ background:var(--ink); color:#fff; font-weight:700; font-size:14px; }
.fin-grand-total-row span:nth-child(2){ text-align:right; font-family:var(--font-mono); }
.fin-empty{ padding:8px 14px; font-size:11.5px; color:var(--faint); font-style:italic; border-top:1px solid var(--line); }
.select-project{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:10px 34px 10px 14px; font-size:13px; font-weight:600; font-family:var(--font-body); color:var(--ink);
  cursor:pointer; transition:var(--speed); appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7269' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px;
}
.select-project:hover{ border-color:var(--accent); }
.select-project:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

@media (max-width:760px){
  .fin-header-row, .fin-row, .fin-subtotal-row, .fin-grand-total-row{ grid-template-columns:1.3fr 80px 36px 100px 1.3fr 20px; gap:6px; padding:8px; }
  .fin-revenue .fin-header-row, .fin-revenue .fin-row, .fin-revenue .fin-subtotal-row, .fin-revenue .fin-grand-total-row{
    grid-template-columns:1.2fr 50px 80px 36px 100px 1.2fr 20px;
  }
  .fin-expense .fin-header-row, .fin-expense .fin-row, .fin-expense .fin-subtotal-row, .fin-expense .fin-grand-total-row{
    grid-template-columns:1.2fr 80px 36px 70px 100px 1.2fr 20px;
  }
}