/* ============================================================================
   global.css  -  Bizcentral shared entry stylesheet
   ----------------------------------------------------------------------------
   This is the shared stylesheet every page links. It loads the full design
   system in cascade order, including the application shell in layout.css,
   then adds a few project-specific helpers that are shared across pages.
   Pages opt into their own CSS with a separate stylesheet link only when
   they have genuinely page-specific rules.

   Cascade order (top -> bottom wins on equal specificity):
     1.  theme.css        design tokens (must come first - everything reads them)
     2.  base.css         reset, element defaults
     3.  utilities.css    u-* helpers
     4.  layout.css       app shell, sidebar, header
     5.  typography.css   prose, display headings, lists, blockquote
     6.  button.css       button component
     7.  form.css         form component
     8.  card.css         card component
     9.  table.css        table component
    10.  alert.css        alert component
    11.  badge.css        badge component
    12.  modal.css        modal component
    13.  tabs.css         tabs component
    14.  avatar.css       avatar component
    15.  toolbar.css      page toolbar
    16.  paginator.css    list / table page footer
    17.  breadcrumb.css   breadcrumb navigation
    18.  dropdown.css     dropdown / context menu
    19.  spinner.css      standalone loading spinner
    20.  empty-state.css  empty state placeholder
    21.  skeleton.css     loading placeholders
    22.  project helpers  one-off page helpers used across the app

   To copy this design system into a new project, copy theme.css + any of
   the modules you need + a similar global.css that imports them in order.
   ========================================================================== */

/* ---------- Local vendor assets (no CDN) ---------- */
@import url("/static/vendor/mdi/css/materialdesignicons.min.css");

/* ---------- Design system modules ----------
   Load in cascade order so tokens are defined before they are consumed. */
@import url("./theme.css");
@import url("./base.css");
@import url("./utilities.css");
@import url("./layout.css");
@import url("./typography.css");
@import url("./button.css");
@import url("./form.css");
@import url("./card.css");
@import url("./table.css");
@import url("./alert.css");
@import url("./badge.css");
@import url("./modal.css");
@import url("./tabs.css");
@import url("./avatar.css");
@import url("./toolbar.css");
@import url("./paginator.css");
@import url("./breadcrumb.css");
@import url("./dropdown.css");
@import url("./spinner.css");
@import url("./empty-state.css");
@import url("./skeleton.css");



/* ============================================================================
   Project-specific helpers
   ----------------------------------------------------------------------------
   One-off widgets that are shared across multiple pages but are too narrow
   to justify their own module. If a helper starts being used on 3+ pages,
   promote it into its own module.
   ========================================================================== */

/* ---------- Ref-row (small chip with copy-to-clipboard id) ----------
   Used in modals and detail headers to surface a copyable identifier. */
.ref-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 var(--space-5);
  font-size: var(--text-sm);
}
.ref-row .muted {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ref-row .ref-id {
  font-family: var(--font-mono);
  font-weight: var(--weight-semi);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: transparent;
}
.ref-row .copy-ref {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all var(--motion);
}
.ref-row .copy-ref:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}
.ref-row .copy-ref .mdi { font-size: 14px; line-height: 1; }

/* ---------- Status code badge (used on error pages) ---------- */
.status-code-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
  letter-spacing: 0.04em;
}

/* ---------- Icon tile ----------
   A square container that centres a Material Design icon.
   Sizes: .icon-tile-sm (32 px), default (44 px), .icon-tile-lg (64 px).
   Colour variants: default = surface-hover bg, add .icon-tile-brand for brand bg. */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-surface-hover);
}
.icon-tile .mdi { font-size: 22px; line-height: 1; }

.icon-tile.icon-tile-sm { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.icon-tile.icon-tile-sm .mdi { font-size: 16px; }

.icon-tile.icon-tile-lg { width: 64px; height: 64px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.icon-tile.icon-tile-lg .mdi { font-size: 30px; }

.icon-tile.icon-tile-brand { background: var(--color-brand); color: var(--color-text-inverse); }

/* ---------- Page-local hook class ---------- */
.muted { color: var(--color-text-muted); }

/* ---------- Plan capacity bar (used by tenant detail + register form) ---------- */
.plan-bar {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}
.plan-bar-track {
  position: relative;
  width: 100%;
  height: 8px;
  background: var(--color-surface-muted, #e5e7eb);
  border-radius: 999px;
  overflow: hidden;
}
.plan-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-brand, #4f46e5), #6366f1);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.plan-bar-fill.full {
  background: linear-gradient(90deg, #dc2626, #ef4444);
}
.plan-bar-text {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.plan-bar-fill.full + .plan-bar-text,
.plan-bar-text:has(+ .plan-bar-fill.full) { color: #b91c1c; font-weight: 600; }

/* Compact plan bar inside hero-stat */
.plan-mini {
  margin-top: 0.4rem;
  width: 100%;
}
.plan-mini-track {
  width: 100%;
  height: 4px;
  background: var(--color-surface-muted, #e5e7eb);
  border-radius: 999px;
  overflow: hidden;
}
.plan-mini-fill {
  height: 100%;
  background: var(--color-brand, #4f46e5);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.plan-mini-fill.full { background: #dc2626; }