/**
 * unitbook.css
 * Unified design system for all unitbook dashboard views.
 *
 * Structure:
 *   1. Tokens          — CSS custom properties
 *   2. Reset & Base    — body, typography, links
 *   3. Layout          — app shell, sidebar, topbar, main, page
 *   4. Components      — btn, badge, panel, table, card, toggle, avatar, form fields
 *   5. Utilities       — display, spacing, typography, colour helpers
 */


/* ============================================================================
   1. TOKENS
   ============================================================================ */

:root {
  /* Colour */
  --rp-bg:          #f5f4f1;
  --rp-surface:     #ffffff;
  --rp-border:      #e2e0db;
  --rp-text:        #1a1917;
  --rp-muted:       #6b6760;
  --rp-subtle:      #9c9890;

  --rp-accent:      #2a6049;
  --rp-accent-lt:   #e8f2ee;
  --rp-accent-dk:   #1f4f3a;

  --rp-danger:      #c0392b;
  --rp-danger-lt:   #fef2f2;
  --rp-warning:     #d97706;
  --rp-warning-lt:  #fef3c7;
  --rp-info:        #2563eb;
  --rp-info-lt:     #eff6ff;
  --rp-success:     #16a34a;
  --rp-success-lt:  #f0fdf4;

  /* Typography */
  --rp-font:        'DM Sans', system-ui, sans-serif;
  --rp-font-serif:  'DM Serif Display', Georgia, serif;
  --rp-font-mono:   'DM Mono', 'Fira Code', monospace;

  /* Spacing */
  --rp-radius:      10px;
  --rp-radius-sm:   6px;
  --rp-radius-lg:   14px;
  --rp-radius-full: 9999px;

  /* Shadows */
  --rp-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --rp-shadow-md: 0 4px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  --rp-shadow-lg: 0 8px 32px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.05);

  /* Layout */
  --rp-sidebar-w:        240px;
  --rp-topbar-h:         53px;
  --rp-settings-nav-w:   220px;

  /* Transitions */
  --rp-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================================
   2. RESET & BASE
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: var(--rp-font);
  background:  var(--rp-bg);
  color:       var(--rp-text);
  min-height:  100vh;
  display:     flex;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
}

img { max-width: 100%; display: block; }


/* ============================================================================
   3. LAYOUT
   ============================================================================ */

/* ── App sidebar ── */
.rp-sidebar {
  width: var(--rp-sidebar-w);
  background: var(--rp-accent-dk);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
}

.rp-sidebar-logo {
  padding: 1.5rem 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.rp-sidebar-logo-mark {
  font-family: var(--rp-font-serif);
  font-size: 1.35rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.rp-sidebar-logo-mark .rp-logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--rp-accent);
  border-radius: var(--rp-radius-sm);
  font-size: .85rem;
  color: #fff;
}

.rp-sidebar-nav   { padding: .5rem .75rem; flex: 1; overflow-y: auto; }
.rp-sidebar-label {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  padding: 1.25rem 1.25rem .4rem;
}

.rp-nav-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .75rem;
  border-radius: 7px;
  color: rgba(255,255,255,.65);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--rp-transition), color var(--rp-transition);
  text-decoration: none;
  margin-bottom: 2px;
}

.rp-nav-item i      { font-size: 1rem; flex-shrink: 0; }
.rp-nav-item:hover  { background: rgba(255,255,255,.08); color: #fff; }
.rp-nav-item.active { background: var(--rp-accent); color: #fff; }

.rp-nav-badge {
  margin-left: auto;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: .65rem;
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: var(--rp-radius-full);
}

.rp-nav-item.active .rp-nav-badge { background: rgba(255,255,255,.25); }

.rp-sidebar-footer {
  padding: 1rem .75rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.rp-sidebar-user {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .75rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background var(--rp-transition);
}

.rp-sidebar-user:hover { background: rgba(255,255,255,.08); }

.rp-sidebar-user .rp-user-name { font-size: .8rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-sidebar-user .rp-user-role { font-size: .7rem; color: rgba(255,255,255,.45); }
.rp-sidebar-user .rp-user-info { flex: 1; min-width: 0; }

/* ── Main content area ── */
.rp-main {
  margin-left: var(--rp-sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Topbar ── */
.rp-topbar {
  background: var(--rp-surface);
  border-bottom: 1px solid var(--rp-border);
  padding: .875rem 2rem;
  height: var(--rp-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.rp-topbar-title { font-size: 1rem; font-weight: 600; color: var(--rp-text); }

.rp-topbar-left {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.rp-topbar-actions { display: flex; align-items: center; gap: .75rem; }

.rp-topbar-back {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--rp-muted);
  cursor: pointer;
  transition: color var(--rp-transition);
}

.rp-topbar-back:hover { color: var(--rp-accent); }
.rp-topbar-sep        { color: var(--rp-border); }

/* ── Search ── */
.rp-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--rp-bg);
  border: 1px solid var(--rp-border);
  border-radius: 7px;
  padding: .4rem .75rem;
  width: 240px;
  transition: border-color var(--rp-transition);
}

.rp-search:focus-within { border-color: var(--rp-accent); }

.rp-search input {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  background: none;
  border: none;
  outline: none;
  font-size: .8rem;
  color: var(--rp-text);
  width: 100%;
}

.rp-search input::placeholder { color: var(--rp-subtle); }
.rp-search i { font-size: .8rem; color: var(--rp-subtle); flex-shrink: 0; }

/* ── Page ── */
.rp-page { padding: 2rem; flex: 1; }

.rp-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
}

.rp-page-title {
  font-family: var(--rp-font-serif);
  font-size: 1.6rem;
  color: var(--rp-text);
  line-height: 1.2;
  margin-bottom: .25rem;
}

.rp-page-sub { font-size: .875rem; color: var(--rp-muted); }

/* ── Settings layout ── */
.rp-settings-wrap    { display: flex; flex: 1; }

.rp-settings-sidebar {
  width: var(--rp-settings-nav-w);
  flex-shrink: 0;
  padding: 1.75rem 1rem;
  border-right: 1px solid var(--rp-border);
  background: var(--rp-surface);
  position: sticky;
  top: var(--rp-topbar-h);
  height: calc(100vh - var(--rp-topbar-h));
  overflow-y: auto;
}

.rp-settings-content { flex: 1; padding: 2rem 2.5rem; max-width: 760px; }

.rp-settings-nav-label {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rp-subtle);
  padding: .75rem .75rem .35rem;
  margin-top: .25rem;
}

.rp-settings-nav-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .75rem;
  border-radius: 7px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--rp-muted);
  cursor: pointer;
  transition: background var(--rp-transition), color var(--rp-transition);
  text-decoration: none;
  margin-bottom: 1px;
}

.rp-settings-nav-item i { font-size: .875rem; }
.rp-settings-nav-item:hover  { background: var(--rp-bg); color: var(--rp-text); }
.rp-settings-nav-item.active { background: var(--rp-accent-lt); color: var(--rp-accent); font-weight: 600; }
.rp-settings-nav-item.danger { color: var(--rp-danger); }


/* ============================================================================
   4. COMPONENTS
   ============================================================================ */

/* ── Avatar ── */
.rp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: .02em;
}

.rp-avatar-sm  { width: 24px; height: 24px; font-size: .58rem; border-radius: 6px; }
.rp-avatar-md  { width: 32px; height: 32px; font-size: .72rem; border-radius: 8px; }
.rp-avatar-lg  { width: 44px; height: 44px; font-size: .9rem; border-radius: 10px; }
.rp-avatar-xl  { width: 56px; height: 56px; font-size: 1.1rem; border-radius: 12px; }
.rp-avatar-round { border-radius: 50%; }

.rp-avatar-stack { display: flex; }
.rp-avatar-stack .rp-avatar { border: 2px solid var(--rp-surface); margin-left: -6px; }
.rp-avatar-stack .rp-avatar:first-child { margin-left: 0; }

/* ── Badge ── */
.rp-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  border-radius: var(--rp-radius-full);
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}

.rp-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.rp-badge-green   { background: var(--rp-accent-lt); color: var(--rp-accent); }
.rp-badge-red     { background: var(--rp-danger-lt); color: var(--rp-danger); }
.rp-badge-amber   { background: var(--rp-warning-lt); color: var(--rp-warning); }
.rp-badge-blue    { background: var(--rp-info-lt); color: var(--rp-info); }
.rp-badge-grey    { background: #f3f4f6; color: #6b7280; }
.rp-badge-no-dot::before { display: none; }

/* ── Buttons ── */
.rp-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  border-radius: var(--rp-radius-sm);
  cursor: pointer;
  border: none;
  transition:
    background var(--rp-transition),
    box-shadow var(--rp-transition),
    transform var(--rp-transition);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.rp-btn:active { transform: translateY(1px); }
.rp-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.rp-btn-sm { padding: .3rem .75rem; font-size: .75rem; }
.rp-btn-lg { padding: .65rem 1.5rem; font-size: .9rem; }

.rp-btn-primary {
  background: var(--rp-accent);
  color: #fff;
  box-shadow: 0 1px 3px rgba(42,96,73,.2);
}
.rp-btn-primary:hover {
  background: var(--rp-accent-dk);
  box-shadow: 0 3px 10px rgba(42,96,73,.28);
}

.rp-btn-ghost {
  background: transparent;
  color: var(--rp-muted);
  border: 1px solid var(--rp-border);
}
.rp-btn-ghost:hover { background: var(--rp-bg); color: var(--rp-text); }

.rp-btn-danger {
  background: var(--rp-danger);
  color: #fff;
}
.rp-btn-danger:hover { background: #a93226; }

.rp-btn-danger-outline {
  background: transparent;
  color: var(--rp-danger);
  border: 1px solid rgba(192,57,43,.3);
}
.rp-btn-danger-outline:hover { background: var(--rp-danger-lt); }

/* ── Icon button ── */
.rp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--rp-radius-sm);
  border: 1px solid var(--rp-border);
  background: none;
  cursor: pointer;
  color: var(--rp-muted);
  font-size: .85rem;
  transition: all var(--rp-transition);
  flex-shrink: 0;
}

.rp-icon-btn:hover { border-color: var(--rp-accent); color: var(--rp-accent); background: var(--rp-accent-lt); }
.rp-icon-btn.danger:hover { border-color: var(--rp-danger); color: var(--rp-danger); background: var(--rp-danger-lt); }
.rp-icon-btn-sm { width: 26px; height: 26px; font-size: .75rem; }

/* ── Panel ── */
.rp-panel {
  background: var(--rp-surface);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  box-shadow: var(--rp-shadow-sm);
  overflow: hidden;
}

.rp-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--rp-border);
}

.rp-panel-title {
  font-size: .875rem;
  font-weight: 600;
  color: var(--rp-text);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.rp-panel-title i { color: var(--rp-muted); font-size: .9rem; }

.rp-panel-body   { padding: 1.5rem; }
.rp-panel-action {
  font-size: .75rem;
  font-weight: 500;
  color: var(--rp-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .25rem;
  transition: opacity var(--rp-transition);
}

.rp-panel-action:hover { opacity: .75; text-decoration: underline; }

.rp-panel-footer {
  padding: .875rem 1.5rem;
  border-top: 1px solid var(--rp-border);
  background: #fafaf8;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
}

/* ── Card (settings-style with header/body/footer) ── */
.rp-card {
  background: var(--rp-surface);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  box-shadow: var(--rp-shadow-sm);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.rp-card-header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--rp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rp-card-title { font-size: .875rem; font-weight: 600; color: var(--rp-text); }
.rp-card-sub   { font-size: .775rem; color: var(--rp-muted); margin-top: 2px; }
.rp-card-body  { padding: 1.5rem; }

.rp-card-footer {
  padding: .875rem 1.5rem;
  border-top: 1px solid var(--rp-border);
  background: #fafaf8;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
}

.rp-card.rp-card-danger { border-color: rgba(192,57,43,.25); }
.rp-card.rp-card-danger .rp-card-header { border-bottom-color: rgba(192,57,43,.15); background: #fff8f7; }
.rp-card.rp-card-danger .rp-card-title  { color: var(--rp-danger); }

/* ── Stat card ── */
.rp-stat-card {
  background: var(--rp-surface);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--rp-shadow-sm);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rp-stat-icon {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--rp-accent-lt);
  color: var(--rp-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.rp-stat-icon.amber { background: var(--rp-warning-lt); color: var(--rp-warning); }
.rp-stat-icon.blue  { background: var(--rp-info-lt); color: var(--rp-info); }
.rp-stat-icon.red   { background: var(--rp-danger-lt); color: var(--rp-danger); }

.rp-stat-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rp-muted);
}

.rp-stat-value {
  font-family: var(--rp-font-serif);
  font-size: 1.75rem;
  color: var(--rp-text);
  line-height: 1.1;
}

.rp-stat-delta {
  font-size: .75rem;
  font-weight: 500;
  color: var(--rp-accent);
  display: flex;
  align-items: center;
  gap: .2rem;
  margin-top: 2px;
}

.rp-stat-delta.down { color: var(--rp-danger); }

/* ── Table ── */
.rp-table-wrap { overflow-x: auto; }

.rp-table { width: 100%; border-collapse: collapse; font-size: .8rem; }

.rp-table thead th {
  padding: .65rem 1.5rem;
  text-align: left;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rp-muted);
  border-bottom: 1px solid var(--rp-border);
  background: #fafaf8;
  white-space: nowrap;
}

.rp-table thead th.sortable { cursor: pointer; user-select: none; }
.rp-table thead th.sortable:hover { color: var(--rp-text); }
.rp-table thead th.sorted { color: var(--rp-accent); }

.rp-table tbody tr {
  border-bottom: 1px solid var(--rp-border);
  transition: background var(--rp-transition);
  cursor: pointer;
}

.rp-table tbody tr:last-child { border-bottom: none; }
.rp-table tbody tr:hover { background: #fafaf8; }
.rp-table tbody td { padding: .9rem 1.5rem; vertical-align: middle; color: var(--rp-text); }
.rp-table .td-muted { color: var(--rp-muted); font-size: .775rem; }

/* ── Tab bar ── */
.rp-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--rp-border);
  padding: 0 1.5rem;
}

.rp-tab {
  padding: .75rem 1rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--rp-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--rp-transition), border-color var(--rp-transition);
  white-space: nowrap;
  user-select: none;
}

.rp-tab.active { color: var(--rp-accent); border-bottom-color: var(--rp-accent); font-weight: 600; }
.rp-tab:hover:not(.active) { color: var(--rp-text); }

/* ── Pagination ── */
.rp-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.5rem;
  border-top: 1px solid var(--rp-border);
  background: #fafaf8;
}

.rp-pagination-info { font-size: .775rem; color: var(--rp-muted); }
.rp-pagination-btns { display: flex; align-items: center; gap: .35rem; }

.rp-pg-btn {
  width: 30px; height: 30px;
  border-radius: var(--rp-radius-sm);
  border: 1px solid var(--rp-border);
  background: var(--rp-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .775rem;
  font-weight: 500;
  color: var(--rp-muted);
  cursor: pointer;
  transition: all var(--rp-transition);
}

.rp-pg-btn:hover  { border-color: var(--rp-accent); color: var(--rp-accent); }
.rp-pg-btn.active { background: var(--rp-accent); border-color: var(--rp-accent); color: #fff; }

/* ── Toggle switch ── */
.rp-toggle {
  position: relative;
  width: 36px; height: 20px;
  flex-shrink: 0;
}

.rp-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }

.rp-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--rp-border);
  border-radius: 20px;
  cursor: pointer;
  transition: background .2s;
}

.rp-toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.rp-toggle input:checked + .rp-toggle-slider { background: var(--rp-accent); }
.rp-toggle input:checked + .rp-toggle-slider::before { transform: translateX(16px); }

.rp-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 0;
  border-bottom: 1px solid var(--rp-border);
}

.rp-toggle-row:last-child  { border-bottom: none; padding-bottom: 0; }
.rp-toggle-row:first-child { padding-top: 0; }
.rp-toggle-info            { flex: 1; padding-right: 1.5rem; }
.rp-toggle-label           { font-size: .8rem; font-weight: 600; color: var(--rp-text); margin-bottom: 2px; }
.rp-toggle-desc            { font-size: .75rem; color: var(--rp-muted); line-height: 1.4; }

/* ── Form fields ── */
.rp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.rp-form-row.full { grid-template-columns: 1fr; }
.rp-form-row:last-child { margin-bottom: 0; }
.rp-form-field { display: flex; flex-direction: column; gap: .35rem; }
.rp-form-label { font-size: .775rem; font-weight: 500; color: var(--rp-text); }
.rp-form-sublabel { font-size: .72rem; color: var(--rp-muted); }

.rp-input {
  width: 100%;
  padding: .55rem .85rem;
  font-family: inherit;
  font-size: .875rem;
  color: var(--rp-text);
  background: var(--rp-bg);
  border: 1.5px solid var(--rp-border);
  border-radius: 7px;
  outline: none;
  transition: border-color var(--rp-transition), box-shadow var(--rp-transition);
  -webkit-appearance: none;
  appearance: none;
}

.rp-input:focus { border-color: var(--rp-accent); box-shadow: 0 0 0 3px var(--rp-accent-lt); background: var(--rp-surface); }
.rp-input::placeholder { color: var(--rp-subtle); }
.rp-input:disabled { opacity: .6; cursor: not-allowed; }
.rp-input.is-invalid { border-color: var(--rp-danger); box-shadow: 0 0 0 3px var(--rp-danger-lt); }

textarea.rp-input { resize: vertical; min-height: 80px; line-height: 1.5; }

select.rp-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239c9890'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-right: 2.2rem;
}

/* ── Drawer ── */
.rp-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,25,23,.35);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.rp-drawer-overlay.open { opacity: 1; pointer-events: all; }

.rp-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px;
  background: var(--rp-surface);
  border-left: 1px solid var(--rp-border);
  z-index: 201;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,.08);
}

.rp-drawer.open { transform: translateX(0); }

.rp-drawer-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--rp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rp-drawer-title { font-size: .9rem; font-weight: 600; color: var(--rp-text); }
.rp-drawer-sub   { font-size: .775rem; color: var(--rp-muted); margin-top: 2px; }
.rp-drawer-body  { flex: 1; overflow-y: auto; padding: 1.5rem; }

.rp-drawer-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--rp-border);
  display: flex;
  gap: .65rem;
}

/* ── Dialog (confirmations) ── */
.rp-dialog {
  margin: auto; /* the global reset zeroes <dialog>'s centring margin */
  width: min(400px, calc(100vw - 2rem));
  padding: 1.5rem;
  border: 1px solid var(--rp-border);
  border-radius: 12px;
  background: var(--rp-surface);
  color: var(--rp-text);
  box-shadow: 0 16px 48px rgba(0,0,0,.14);
}

.rp-dialog::backdrop { background: rgba(26,25,23,.35); }
.rp-dialog[open] { animation: rpDialogIn .18s cubic-bezier(.16,1,.3,1); }

.rp-dialog-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rp-danger-lt);
  color: var(--rp-danger);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.rp-dialog-title   { font-size: .95rem; font-weight: 600; margin-bottom: .35rem; }
.rp-dialog-body    { font-size: .8rem; color: var(--rp-muted); line-height: 1.5; }
.rp-dialog-body strong { color: var(--rp-text); font-weight: 500; }
.rp-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.5rem; }

@keyframes rpDialogIn {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ── Activity feed ── */
.rp-activity-item {
  display: flex;
  gap: .85rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--rp-border);
  align-items: flex-start;
}

.rp-activity-item:last-child { border-bottom: none; }

.rp-activity-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rp-accent);
  flex-shrink: 0;
  margin-top: .35rem;
}

.rp-activity-dot.amber { background: var(--rp-warning); }
.rp-activity-dot.blue  { background: var(--rp-info); }
.rp-activity-dot.red   { background: var(--rp-danger); }

.rp-activity-text { font-size: .8rem; color: var(--rp-text); line-height: 1.4; }
.rp-activity-text strong { font-weight: 600; }
.rp-activity-time { font-size: .7rem; color: var(--rp-subtle); margin-top: 2px; }

/* ── Section header (settings) ── */
.rp-section-header {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rp-border);
}

.rp-section-title {
  font-family: var(--rp-font-serif);
  font-size: 1.4rem;
  color: var(--rp-text);
  margin-bottom: .3rem;
}

.rp-section-sub { font-size: .875rem; color: var(--rp-muted); }

/* ── Danger item ── */
.rp-danger-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 0;
  border-bottom: 1px solid rgba(192,57,43,.1);
}

.rp-danger-item:last-child  { border-bottom: none; padding-bottom: 0; }
.rp-danger-item:first-child { padding-top: 0; }
.rp-danger-item-label { font-size: .8rem; font-weight: 600; color: var(--rp-text); margin-bottom: 2px; }
.rp-danger-item-desc  { font-size: .75rem; color: var(--rp-muted); line-height: 1.4; }

/* ── Progress bar ── */
.rp-progress {
  width: 100%;
  height: 6px;
  background: var(--rp-border);
  border-radius: 3px;
  overflow: hidden;
}

.rp-progress-fill {
  height: 100%;
  background: var(--rp-accent);
  border-radius: 3px;
  transition: width .3s ease;
}

/* ── Scrollable container ── */
.rp-scroll { overflow-y: auto; }
.rp-scroll::-webkit-scrollbar { width: 4px; }
.rp-scroll::-webkit-scrollbar-track { background: transparent; }
.rp-scroll::-webkit-scrollbar-thumb { background: var(--rp-border); border-radius: 4px; }

/* ── Animations ── */
.rp-fade-up {
  animation: rpFadeUp .35s ease both;
}

@keyframes rpFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rp-fade-up:nth-child(1) { animation-delay: .04s; }
.rp-fade-up:nth-child(2) { animation-delay: .08s; }
.rp-fade-up:nth-child(3) { animation-delay: .12s; }
.rp-fade-up:nth-child(4) { animation-delay: .16s; }
.rp-fade-up:nth-child(5) { animation-delay: .20s; }
.rp-fade-up:nth-child(6) { animation-delay: .24s; }


/* ============================================================================
   5. UTILITIES
   ============================================================================ */

/* ── Display ── */
.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }
.d-grid         { display: grid !important; }

/* ── Visibility ── */
.visible   { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* ── Flex ── */
.flex-row      { flex-direction: row !important; }
.flex-col      { flex-direction: column !important; }
.flex-wrap     { flex-wrap: wrap !important; }
.flex-nowrap   { flex-wrap: nowrap !important; }
.flex-1        { flex: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-grow-1   { flex-grow: 1 !important; }

.items-start   { align-items: flex-start !important; }
.items-center  { align-items: center !important; }
.items-end     { align-items: flex-end !important; }

.justify-start   { justify-content: flex-start !important; }
.justify-center  { justify-content: center !important; }
.justify-end     { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }

/* ── Gap ── */
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: .75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-5 { gap: 1.25rem !important; }
.gap-6 { gap: 1.5rem !important; }
.gap-8 { gap: 2rem !important; }

/* ── Margin ── */
.m-0   { margin: 0 !important; }
.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: .25rem !important; }
.mt-2  { margin-top: .5rem !important; }
.mt-3  { margin-top: .75rem !important; }
.mt-4  { margin-top: 1rem !important; }
.mt-6  { margin-top: 1.5rem !important; }
.mt-8  { margin-top: 2rem !important; }
.mb-0  { margin-bottom: 0 !important; }
.mb-2  { margin-bottom: .5rem !important; }
.mb-3  { margin-bottom: .75rem !important; }
.mb-4  { margin-bottom: 1rem !important; }
.mb-6  { margin-bottom: 1.5rem !important; }
.mb-8  { margin-bottom: 2rem !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* ── Padding ── */
.p-0  { padding: 0 !important; }
.p-2  { padding: .5rem !important; }
.p-4  { padding: 1rem !important; }
.p-6  { padding: 1.5rem !important; }
.px-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

/* ── Typography ── */
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

.text-xs   { font-size: .72rem !important; }
.text-sm   { font-size: .8rem !important; }
.text-base { font-size: .875rem !important; }
.text-md   { font-size: 1rem !important; }
.text-lg   { font-size: 1.125rem !important; }
.text-xl   { font-size: 1.25rem !important; }

.font-normal   { font-weight: 400 !important; }
.font-medium   { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold     { font-weight: 700 !important; }

.leading-tight  { line-height: 1.2 !important; }
.leading-normal { line-height: 1.5 !important; }
.leading-loose  { line-height: 1.75 !important; }

.truncate { overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; }
.uppercase  { text-transform: uppercase !important; }
.capitalize { text-transform: capitalize !important; }
.tracking-wide { letter-spacing: .06em !important; }

/* ── Colour — text ── */
.text-primary { color: var(--rp-text) !important; }
.text-muted   { color: var(--rp-muted) !important; }
.text-subtle  { color: var(--rp-subtle) !important; }
.text-accent  { color: var(--rp-accent) !important; }
.text-danger  { color: var(--rp-danger) !important; }
.text-warning { color: var(--rp-warning) !important; }
.text-white   { color: #ffffff !important; }

/* ── Colour — background ── */
.bg-surface   { background: var(--rp-surface) !important; }
.bg-bg        { background: var(--rp-bg) !important; }
.bg-accent    { background: var(--rp-accent) !important; }
.bg-accent-lt { background: var(--rp-accent-lt) !important; }
.bg-danger-lt { background: var(--rp-danger-lt) !important; }

/* ── Border ── */
.border        { border: 1px solid var(--rp-border) !important; }
.border-top    { border-top: 1px solid var(--rp-border) !important; }
.border-bottom { border-bottom: 1px solid var(--rp-border) !important; }
.border-none   { border: none !important; }
.rounded       { border-radius: var(--rp-radius) !important; }
.rounded-sm    { border-radius: var(--rp-radius-sm) !important; }
.rounded-full  { border-radius: var(--rp-radius-full) !important; }

/* ── Sizing ── */
.w-full  { width: 100% !important; }
.w-auto  { width: auto !important; }
.h-full  { height: 100% !important; }
.min-w-0 { min-width: 0 !important; }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto   { overflow: auto !important; }
.overflow-x-auto { overflow-x: auto !important; }

/* ── Position ── */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.sticky   { position: sticky !important; }

/* ── Misc ── */
.cursor-pointer     { cursor: pointer !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.pointer-events-none{ pointer-events: none !important; }
.select-none        { user-select: none !important; }
.opacity-0          { opacity: 0 !important; }
.opacity-50         { opacity: .5 !important; }
.shadow-sm          { box-shadow: var(--rp-shadow-sm) !important; }
.shadow-md          { box-shadow: var(--rp-shadow-md) !important; }
.shadow-none        { box-shadow: none !important; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
  .rp-main { margin-left: 0; }
  .rp-sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  .rp-sidebar.open { transform: translateX(0); }
  .rp-page { padding: 1.25rem; }
  .rp-topbar { padding: .875rem 1.25rem; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .hide-tablet { display: none !important; }
}

@media (min-width: 1025px) {
  .hide-desktop { display: none !important; }
}


/* Long values (serial numbers can be up to 100 characters with no spaces)
   wrap inside their cell instead of stretching tables and drawers. */
.asset-name, .asset-serial, .sub-ref, .drawer-val, .drawer-key, .drawer-sub, .drawer-title {
  overflow-wrap: anywhere;
}