/* ==========================================================================
   Kirk One - sign-in, client portal & admin stylesheet (Kirk & Co.)
   Reuses site-wide design tokens defined in :root on the main stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. DESIGN TOKENS (portal-specific extensions)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Core colors */
  --clr-bg:           #F7F5EF;
  --clr-surface:      #FFFFFF;
  --clr-card:         #FFFFFF;
  --clr-surface-alt:  #F1EEE7;
  --clr-primary:      #BF954E;
  --clr-primary-d:    #73551F;
  --clr-interaction:  #17BFA9;
  --clr-interaction-d:#08766A;
  --clr-text:         #0B0D0F;
  --clr-navy:         #08121C;
  --clr-muted:        #5B6260;
  --clr-border:       rgba(11,13,15,.13);
  --clr-glow:         rgba(191,149,78,.14);

  /* Typography */
  --font-head:        'Archivo', system-ui, sans-serif;
  --font-body:        'Archivo', system-ui, sans-serif;
  --font-mono:        'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing */
  --sp-xs:            .5rem;
  --sp-sm:            1rem;
  --sp-md:            2rem;
  --sp-lg:            4rem;

  /* Layout */
  --radius:           8px;
  --radius-lg:        12px;

  /* Shadows */
  --shadow:           0 1px 2px rgba(23,25,20,.06);
  --shadow-lg:        0 22px 55px -34px rgba(23,25,20,.38);

  /* Sidebar */
  --sidebar-w:        240px;
  --sidebar-bg:       #FFFFFF;
  --sidebar-hover:    rgba(23, 191, 169, .08);

  /* Status colours */
  --clr-green:        #2f7d55;
  --clr-green-bg:     rgba(47, 125, 85, .13);
  --clr-amber:        #8a5d00;
  --clr-amber-bg:     rgba(138, 93, 0, .13);
  --clr-red:          #a33a30;
  --clr-red-bg:       rgba(163, 58, 48, .13);
  --clr-gray-bg:      rgba(108, 105, 95, .13);

  /* Transition presets */
  --ease-out:         cubic-bezier(.25, .46, .45, .94);
}

/* --------------------------------------------------------------------------
   1. PORTAL LAYOUT - sidebar + content
   -------------------------------------------------------------------------- */

/* Reset the default body margin so the dark layout reaches every edge -
   without this the white page canvas shows as a thin border around the page. */
html, body {
  margin: 0;
  background: var(--clr-bg, #F6F2E8);
}

/* Wrapper that holds sidebar + main content */
.portal {
  display: flex;
  min-height: 100vh;
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-body);
}

/* ---- Sidebar ---- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid rgba(25,26,23,.10);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: transform .3s var(--ease-out);
}

.sidebar-logo {
  padding: 28px 24px 20px;
  border-bottom: 1px solid rgba(25,26,23,.10);
}

.sidebar-logo img {
  width: 140px;
  height: auto;
}

.sidebar-logo span {
  color: var(--clr-primary);
}

/* Navigation */
.sidebar-nav {
  flex: 1;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  color: var(--clr-muted);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.sidebar-nav a:hover {
  color: var(--clr-text);
  background: var(--sidebar-hover);
}

.sidebar-nav a.active {
  color: var(--clr-primary);
  background: var(--sidebar-hover);
  border-left-color: var(--clr-primary);
  font-weight: 600;
}

.sidebar-nav a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: .7;
}

.sidebar-nav a:hover svg,
.sidebar-nav a.active svg {
  opacity: 1;
}

.nav-spacer { flex: 1; }

.nav-divider {
  height: 1px;
  background: rgba(25,26,23,.10);
  margin: 8px 24px;
}

.sidebar-nav a.sign-out {
  color: var(--clr-red);
  border-top: 1px solid rgba(25,26,23,.10);
  padding-top: 16px;
}

.sidebar-nav a.sign-out:hover {
  color: #f87171;
  background: rgba(239,68,68,.06);
}

/* Sidebar user info (bottom) */
.sidebar-user {
  padding: 16px 24px;
  border-top: 1px solid rgba(25,26,23,.10);
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .85rem;
  color: var(--clr-muted);
}

.sidebar-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--clr-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8rem;
  color: var(--clr-primary);
  border: 1px solid var(--clr-border);
  flex-shrink: 0;
}

.sidebar-user-name {
  color: var(--clr-text);
  font-weight: 600;
  font-size: .8125rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-email {
  font-size: .6875rem;
  color: var(--clr-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.sidebar-user-role { font-size: .75rem; }

/* ---- Main content ---- */
.portal-main,
.main,
.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
}

.portal-main {
  padding: var(--sp-md);
  max-width: 100%;
}

.portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
  flex-wrap: wrap;
}

.portal-header h1 {
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
}

/* Hamburger toggle (hidden on desktop) */
.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--clr-text);
  font-size: 1.5rem;
  cursor: pointer;
  padding: .25rem;
}

/* Backdrop for mobile sidebar */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 999;
}

/* --------------------------------------------------------------------------
   2. LOGIN PAGE
   -------------------------------------------------------------------------- */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--clr-bg);
  font-family: var(--font-body);
  padding: var(--sp-sm);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-md) var(--sp-md) var(--sp-md);
  box-shadow: var(--shadow-lg);
}

.login-card .login-logo {
  text-align: center;
  margin-bottom: var(--sp-md);
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: var(--clr-text);
}

.login-card .login-logo span {
  color: var(--clr-primary);
}

.login-card h2 {
  text-align: center;
  font-family: var(--font-head);
  font-size: 1.3rem;
  margin: 0 0 var(--sp-sm);
  color: var(--clr-text);
}

.login-card .login-subtitle {
  text-align: center;
  font-size: .9rem;
  color: var(--clr-muted);
  margin-bottom: var(--sp-md);
}

.login-error {
  background: var(--clr-red-bg);
  color: var(--clr-red);
  padding: .65rem var(--sp-sm);
  border-radius: var(--radius);
  font-size: .85rem;
  margin-bottom: var(--sp-sm);
  display: none;
}

.login-error.visible {
  display: block;
}

.login-card .form-group {
  margin-bottom: var(--sp-sm);
}

.login-card label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--clr-muted);
  margin-bottom: .35rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="text"] {
  width: 100%;
  padding: .75rem 1rem;
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: .95rem;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
}

.login-card input:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px var(--clr-glow);
}

.login-card .btn {
  width: 100%;
  margin-top: var(--sp-xs);
}

/* --------------------------------------------------------------------------
   3. DASHBOARD CARDS (metric tiles)
   -------------------------------------------------------------------------- */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}

.metric-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.metric-card .metric-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.metric-card .metric-value {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.1;
}

.metric-card .metric-trend {
  font-size: .8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.metric-trend.up {
  color: var(--clr-green);
}

.metric-trend.down {
  color: var(--clr-red);
}

.metric-trend.neutral {
  color: var(--clr-muted);
}

.metric-card .metric-sub {
  font-size: .78rem;
  color: var(--clr-muted);
}

/* --------------------------------------------------------------------------
   4. STATUS BADGES
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.badge-paid,
.badge-active {
  background: var(--clr-green-bg);
  color: var(--clr-green);
}

.badge-due {
  background: var(--clr-amber-bg);
  color: var(--clr-amber);
}

.badge-overdue {
  background: var(--clr-red-bg);
  color: var(--clr-red);
}

.badge-inactive {
  background: var(--clr-gray-bg);
  color: var(--clr-muted);
}

/* --------------------------------------------------------------------------
   5. CHART CARDS
   -------------------------------------------------------------------------- */
.chart-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--sp-sm);
}

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

.chart-card-header h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-text);
}

.chart-card-header .chart-actions {
  display: flex;
  gap: .5rem;
}

.chart-card-body {
  padding: 1.25rem;
  position: relative;
}

.chart-card-body canvas {
  width: 100% !important;
  height: auto !important;
  max-height: 340px;
}

/* --------------------------------------------------------------------------
   6. TABLES
   -------------------------------------------------------------------------- */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  margin-bottom: var(--sp-sm);
}

.portal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  white-space: nowrap;
}

.portal-table thead {
  background: var(--clr-surface);
}

.portal-table th {
  padding: .75rem 1rem;
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--clr-border);
}

.portal-table td {
  padding: .75rem 1rem;
  color: var(--clr-text);
  border-bottom: 1px solid var(--clr-border);
}

.portal-table tbody tr {
  transition: background .15s ease;
}

.portal-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .02);
}

.portal-table tbody tr:hover {
  background: rgba(23, 191, 169, .06);
}

.portal-table tbody tr:last-child td {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   7. FORMS
   -------------------------------------------------------------------------- */
.portal-form {
  max-width: 640px;
}

.portal-form .form-group {
  margin-bottom: 1.25rem;
}

.portal-form label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .4rem;
}

.portal-form input[type="text"],
.portal-form input[type="email"],
.portal-form input[type="password"],
.portal-form input[type="number"],
.portal-form input[type="url"],
.portal-form input[type="date"],
.portal-form input[type="tel"],
.portal-form select,
.portal-form textarea {
  width: 100%;
  padding: .75rem 1rem;
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: .9rem;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
}

.portal-form textarea {
  min-height: 120px;
  resize: vertical;
}

.portal-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a94a6' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.portal-form input:focus,
.portal-form select:focus,
.portal-form textarea:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px var(--clr-glow);
}

.portal-form input::placeholder,
.portal-form textarea::placeholder {
  color: var(--clr-muted);
  opacity: .6;
}

.portal-form .form-hint {
  font-size: .78rem;
  color: var(--clr-muted);
  margin-top: .3rem;
}

.portal-form .form-row {
  display: flex;
  gap: var(--sp-sm);
}

.portal-form .form-row .form-group {
  flex: 1;
}

.portal-form .form-actions {
  display: flex;
  gap: .75rem;
  margin-top: var(--sp-md);
}

/* --------------------------------------------------------------------------
   8. NOTES / UPDATE CARDS
   -------------------------------------------------------------------------- */
.update-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: var(--sp-sm);
}

.update-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.update-card-header h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-text);
}

.update-card-header .update-date {
  font-size: .8rem;
  color: var(--clr-muted);
}

.update-card .update-summary {
  font-size: .92rem;
  color: var(--clr-text);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.update-card .update-section {
  margin-bottom: 1rem;
}

.update-card .update-section:last-child {
  margin-bottom: 0;
}

.update-card .update-section h4 {
  font-size: .8rem;
  font-weight: 700;
  color: var(--clr-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 .5rem;
}

.update-card .update-section ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.update-card .update-section li {
  font-size: .88rem;
  color: var(--clr-text);
  line-height: 1.65;
  margin-bottom: .25rem;
}

.update-card .update-section li:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   9. MODAL
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .7);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  padding: var(--sp-sm);
}

.modal.open {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(.97);
  transition: transform .25s var(--ease-out);
}

.modal.open .modal-content {
  transform: translateY(0) scale(1);
}

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

.modal-header h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clr-text);
}

.modal-close {
  background: none;
  border: none;
  color: var(--clr-muted);
  font-size: 1.35rem;
  cursor: pointer;
  padding: .25rem;
  line-height: 1;
  transition: color .15s ease;
}

.modal-close:hover {
  color: var(--clr-text);
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--clr-border);
}

/* --------------------------------------------------------------------------
   10. EMPTY STATES
   -------------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg) var(--sp-md);
  text-align: center;
}

.empty-state-icon {
  font-size: 2.5rem;
  margin-bottom: var(--sp-sm);
  opacity: .4;
}

.empty-state h3 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--clr-text);
  margin: 0 0 .5rem;
}

.empty-state p {
  font-size: .88rem;
  color: var(--clr-muted);
  max-width: 340px;
  margin: 0 0 var(--sp-sm);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   11. LOADING STATES
   -------------------------------------------------------------------------- */

/* Spinner */
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-md);
}

.loading-spinner::after {
  content: "";
  width: 32px;
  height: 32px;
  border: 3px solid var(--clr-border);
  border-top-color: var(--clr-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Skeleton placeholder */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--clr-card) 25%,
    rgba(255, 255, 255, .04) 50%,
    var(--clr-card) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}

.skeleton-line {
  height: .85rem;
  margin-bottom: .6rem;
  border-radius: 4px;
}

.skeleton-line.short {
  width: 55%;
}

.skeleton-line.medium {
  width: 80%;
}

.skeleton-heading {
  height: 1.4rem;
  width: 40%;
  margin-bottom: 1rem;
  border-radius: 4px;
}

.skeleton-card {
  height: 120px;
  border-radius: var(--radius-lg);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   13. ADMIN-SPECIFIC COMPONENTS
   -------------------------------------------------------------------------- */

/* Client list card (admin overview) */
.client-list-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.client-list-card .client-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--clr-border);
}

.client-list-card .client-list-header h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-text);
}

.client-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--clr-border);
  transition: background .15s ease;
}

.client-list-item:last-child {
  border-bottom: none;
}

.client-list-item:hover {
  background: rgba(23, 191, 169, .06);
}

.client-list-item .client-info {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.client-list-item .client-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--clr-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8rem;
  color: var(--clr-primary);
  border: 1px solid var(--clr-border);
  flex-shrink: 0;
}

.client-list-item .client-name {
  font-weight: 600;
  font-size: .9rem;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-list-item .client-detail {
  font-size: .78rem;
  color: var(--clr-muted);
}

.client-list-item .client-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

/* Admin toolbar */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: var(--sp-sm);
}

.admin-toolbar .toolbar-search {
  flex: 1;
  min-width: 200px;
  padding: .6rem 1rem;
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: 999px;
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: .88rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.admin-toolbar .toolbar-search:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px var(--clr-glow);
}

.admin-toolbar .toolbar-search::placeholder {
  color: var(--clr-muted);
  opacity: .6;
}

/* --------------------------------------------------------------------------
   14. UTILITY CLASSES
   -------------------------------------------------------------------------- */

/* Margins */
.mb-xs  { margin-bottom: var(--sp-xs); }
.mb-sm  { margin-bottom: var(--sp-sm); }
.mb-md  { margin-bottom: var(--sp-md); }
.mb-lg  { margin-bottom: var(--sp-lg); }
.mt-xs  { margin-top: var(--sp-xs); }
.mt-sm  { margin-top: var(--sp-sm); }
.mt-md  { margin-top: var(--sp-md); }
.mt-lg  { margin-top: var(--sp-lg); }

/* Gap */
.gap-xs  { gap: var(--sp-xs); }
.gap-sm  { gap: var(--sp-sm); }
.gap-md  { gap: var(--sp-md); }

/* Text */
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.text-muted   { color: var(--clr-muted); }
.text-primary { color: var(--clr-primary); }
.text-sm      { font-size: .85rem; }

/* Flex */
.flex            { display: flex; }
.flex-between    { display: flex; align-items: center; justify-content: space-between; }
.flex-center     { display: flex; align-items: center; justify-content: center; }
.flex-col        { display: flex; flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.align-center    { align-items: center; }

/* Grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-sm); }

/* Visually hidden (accessible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE - mobile breakpoint at 768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Sidebar becomes off-canvas overlay */
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop.visible {
    display: block;
  }

  .sidebar-toggle {
    display: inline-flex;
  }

  /* Main content uses full width */
  .portal-main {
    margin-left: 0;
    padding: var(--sp-sm);
  }

  /* Dashboard grid collapses */
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  /* Utility grids collapse */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Metric card values slightly smaller */
  .metric-card .metric-value {
    font-size: 1.6rem;
  }

  /* Portal header stacks */
  .portal-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .portal-header h1 {
    font-size: 1.4rem;
  }

  /* Form rows stack */
  .portal-form .form-row {
    flex-direction: column;
    gap: 0;
  }

  /* Tables scroll horizontally (handled by .table-wrapper overflow-x) */

  /* Update cards tighter */
  .update-card {
    padding: 1rem;
  }

  /* Chart cards tighter */
  .chart-card-body {
    padding: .75rem;
  }

  /* Modal full width on mobile */
  .modal-content {
    max-width: 100%;
    margin: var(--sp-xs);
  }

  /* Admin toolbar stacks */
  .admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-toolbar .toolbar-search {
    min-width: 0;
  }

  /* Client list items */
  .client-list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }

  .client-list-item .client-actions {
    align-self: flex-end;
  }
}

/* Tablet intermediate breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   15. BUTTONS  (portal-local - main site btn styles not loaded in portal)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .65rem 1.4rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .88rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--clr-primary);
  color: #fff;
  border-color: var(--clr-primary);
}
.btn-primary:hover:not(:disabled) {
  background: var(--clr-primary-d, #5F4718);
  border-color: var(--clr-primary-d, #5F4718);
}

.btn-outline {
  background: transparent;
  color: var(--clr-text);
  border-color: var(--clr-border);
}
.btn-outline:hover:not(:disabled) {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}

.btn-danger {
  background: var(--clr-red);
  color: #fff;
  border-color: var(--clr-red);
}
.btn-danger:hover:not(:disabled) { opacity: .85; }

.btn-sm {
  padding: .45rem .9rem;
  font-size: .82rem;
}

/* --------------------------------------------------------------------------
   16. CARD COMPONENT  (generic card for admin pages)
   -------------------------------------------------------------------------- */
.card {
  background: var(--clr-card, #FFFCF5);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--clr-border);
  gap: 1rem;
  flex-wrap: wrap;
}

.card__title {
  font-family: var(--font-head, 'Playfair Display', serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-text);
  margin: 0;
}

.card__body {
  padding: 1.4rem;
}

/* --------------------------------------------------------------------------
   17. BEM SIDEBAR ALIASES  (admin pages use sidebar__ BEM naming)
   -------------------------------------------------------------------------- */
.portal-layout {
  display: flex;
  min-height: 100vh;
  background: var(--clr-bg, #F6F2E8);
  color: var(--clr-text);
  font-family: var(--font-body);
}

.sidebar__top {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1.4rem 1.2rem 1rem;
  border-bottom: 1px solid var(--clr-border);
}

.sidebar__top img { width: 120px; height: auto; }

.sidebar__badge {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--clr-primary);
  color: #fff;
  padding: .2rem .5rem;
  border-radius: 999px;
  line-height: 1;
}

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: .75rem 0;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem 1.2rem;
  color: var(--clr-muted, #8a94a6);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.sidebar__link:hover {
  color: var(--clr-text);
  background: rgba(25,26,23,.04);
}
.sidebar__link--active,
.sidebar__link.active {
  color: var(--clr-primary);
  background: rgba(23,191,169,.08);
  border-left-color: var(--clr-primary);
}

.sidebar__icon {
  width: 1.2rem;
  text-align: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.sidebar__divider {
  height: 1px;
  background: var(--clr-border);
  margin: .5rem 1rem;
}

.sidebar__user {
  padding: .85rem 1.2rem;
  border-top: 1px solid var(--clr-border);
}

.sidebar__user-name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--clr-text);
}

.sidebar__user-email {
  font-size: .75rem;
  color: var(--clr-muted);
  margin-top: .15rem;
}

/* Open state for mobile sidebar used by admin pages */
.sidebar.is-open {
  transform: translateX(0) !important;
}

/* --------------------------------------------------------------------------
   18. ADDITIONAL PORTAL UTILITIES
   -------------------------------------------------------------------------- */
.portal-subtitle {
  font-size: .9rem;
  color: var(--clr-muted);
  margin-top: .25rem;
}

.portal-title {
  font-family: var(--font-head, 'Playfair Display', serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--clr-text);
  margin: 0;
}

/* metric-grid alias - same as grid-4 but named semantically */
.metric-grid {
  display: grid;
  gap: var(--sp-sm, 1rem);
}

/* table-wrap alias (portal.css uses table-wrapper) */
.table-wrap { overflow-x: auto; }
.table-wrap table { min-width: 600px; width: 100%; }

/* form-error inline message */
.form-error {
  font-size: .83rem;
  color: var(--clr-red, #ef4565);
  margin-top: .5rem;
  min-height: 1.2em;
}

/* modal open alias - same behaviour as .modal.open */
.modal.is-open {
  opacity: 1;
  visibility: visible;
}
.modal.is-open .modal-content {
  transform: translateY(0) scale(1);
}

/* form-row grid helpers used inside portal-form */
.portal-form .form-row.grid-2 { grid-template-columns: repeat(2, 1fr); }
.portal-form .form-row.grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
  .portal-form .form-row.grid-2,
  .portal-form .form-row.grid-3 { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================================================
   19. APPLICATION SHELL REFRESH
   Shared visual language for sign-in, client dashboard and administrative UI.
   ========================================================================== */

html {
  color-scheme: light;
}

body {
  color: var(--clr-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

:focus-visible {
  outline: 2px solid var(--clr-interaction);
  outline-offset: 3px;
}

::selection {
  color: var(--clr-text);
  background: rgba(23, 191, 169, .24);
}

/* Compact, asset-independent product signature used by every app shell. */
.product-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .14rem;
  color: var(--clr-text);
  text-decoration: none;
}

.product-wordmark__image {
  width: min(100%, 11rem);
  height: auto;
}

.product-wordmark__name {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.065em;
}

.product-wordmark__name span {
  color: var(--clr-primary);
}

.product-wordmark__product {
  color: var(--clr-interaction-d);
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* Kirk One lockup: Kirk & Co.'s crown beside the product name, with a
   mono line under it ("by Kirk & Co.", or a context such as "Client
   portal"). The same signature as .product-lockup on kirk-co.com. */
.product-wordmark--k1 { flex-direction: row; align-items: center; gap: .72rem; }
.product-wordmark__mark { flex: none; width: auto; height: 2.15rem; }
.product-wordmark__text { display: flex; flex-direction: column; gap: .32rem; min-width: 0; }
.product-wordmark--k1 .product-wordmark__name { color: var(--clr-text); font-size: 1.62rem; font-weight: 650; line-height: 1; letter-spacing: -.035em; white-space: nowrap; }
.product-wordmark--k1 .product-wordmark__product { color: var(--clr-primary-d); letter-spacing: .12em; }

/* ---- Continue with Google ----------------------------------------------- */
/* Hidden until the page confirms a Google client is configured, so a site
   without one never shows a button that cannot work. */
.oauth-divider { display: flex; align-items: center; gap: .7rem; margin: 1.1rem 0; color: var(--clr-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; height: 1px; background: var(--clr-border, rgba(255,255,255,.16)); }
/* Centring an icon+label pair centres the pair, which leaves the words
   about 14px right of the button's centre -- crooked against the Sign in
   button above it, whose label is centred on the button. ::after is an
   empty box the same width as the mark on the other side, so the label
   lands dead centre. Done this way rather than by pinning the mark and
   padding the label off it, because the counterweight costs no fixed
   side padding and so still centres on a narrow phone.

   border-box matters as much as the counterweight: this is an <a>, which
   the UA stylesheet leaves content-box, so width:100% plus its own 2rem
   of padding made the button 34px wider than the Sign in button above it
   and pushed its whole centre 17px to the right. Centring the label
   inside a button that is itself off-centre fixes nothing. */
.btn-google { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 46px; padding: .6rem 1rem; border: 1px solid rgba(0,0,0,.18); border-radius: 8px; background: #fff; color: #1f1f1f; font: 600 .92rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none; cursor: pointer; transition: box-shadow .16s ease, background .16s ease; }
.btn-google::after { content: ""; flex: none; width: 18px; }
.btn-google:hover { background: #f7f8f8; box-shadow: 0 1px 4px rgba(0,0,0,.16); }
.btn-google:focus-visible { outline: 3px solid rgba(23,191,169,.4); outline-offset: 2px; }
.btn-google__mark { flex: none; }
.oauth-note { margin: .6rem 0 0; color: var(--clr-muted); font-size: .72rem; line-height: 1.5; text-align: center; }

/* ---- Sign in ------------------------------------------------------------ */
.portal-login-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 3rem 1rem;
  color: var(--clr-text);
  background-color: var(--clr-bg);
  background-image:
    linear-gradient(rgba(23, 25, 20, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 25, 20, .035) 1px, transparent 1px);
  background-size: 40px 40px;
}

.portal-login-page::before,
.portal-login-page::after {
  content: '';
  position: fixed;
  z-index: 0;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  filter: none;
  pointer-events: none;
  animation: none;
}

.portal-login-page::before {
  top: -18rem;
  right: -13rem;
  background: radial-gradient(circle, rgba(191, 149, 78, .18), rgba(191, 149, 78, 0) 68%);
}

.portal-login-page::after {
  bottom: -21rem;
  left: -10rem;
  background: radial-gradient(circle, rgba(23, 191, 169, .14), rgba(23, 191, 169, 0) 68%);
}

.portal-login-page .glow-footer {
  display: none;
}

/* The card is border-box. As content-box, width:100% plus its side padding
   made it wider than the screen on every phone -- 416px in a 390px viewport
   -- and the overflow was clipped, so the right edge of the email field and
   the Sign in button were cut off. On desktop the same sum made it 518px
   inside a 460px wrap, hanging 29px off centre. 518px is kept as the size,
   so desktop only loses the offset. */
.portal-login-page .login-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 518px;
}

.portal-login-page .login-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding: 3.25rem 3rem 2.75rem;
  overflow: hidden;
  color: var(--clr-text);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-top: 4px solid var(--clr-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -48px rgba(23, 25, 20, .48), 0 2px 10px rgba(23, 25, 20, .05);
}

.portal-login-page .login-card::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: auto;
  width: 5rem;
  height: 4px;
  border-radius: 0;
  background: var(--clr-interaction);
  filter: none;
}

.portal-login-page .login-card__logo {
  width: max-content;
  max-width: none;
  margin: 0 auto 2.6rem;
  align-items: center;
}

.portal-login-page .product-wordmark__image { width: 12.5rem; }
/* .login-card__logo centres itself with auto margins, which an inline-flex
   box ignores; the Kirk One lockup is a block-level flex so it actually
   sits centred over the centred heading. */
.portal-login-page .login-card__logo.product-wordmark--k1 { display: flex; }

.portal-login-page .login-card__eyebrow {
  margin: 0 0 .55rem;
  color: var(--clr-primary-d);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}

.portal-login-page .login-card__heading {
  margin: 0 0 2.35rem;
  color: var(--clr-text);
  font-family: var(--font-head);
  font-size: clamp(1.85rem, 7vw, 2.35rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.045em;
  text-align: center;
}

.portal-login-page .form-group {
  margin-bottom: 1.15rem;
}

.portal-login-page .form-group label {
  margin-bottom: .5rem;
  color: var(--clr-text);
  font-family: var(--font-mono);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.portal-login-page .form-group input {
  /* width:100% has to mean the width of what contains it. portal.css sets no
     global border-box, so padding+border rendered OUTSIDE the grid column and
     the password field ran 18px into confirm-password. Same trap as .btn-signin. */
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: .78rem .9rem;
  color: var(--clr-text);
  background: var(--clr-surface-alt);
  border: 1px solid rgba(23, 25, 20, .19);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  font-size: .94rem;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.portal-login-page .form-group input::placeholder {
  color: #94988E;
}

.portal-login-page .form-group input:focus {
  background: #FFFFFF;
  border-color: var(--clr-interaction-d);
  box-shadow: 0 0 0 3px rgba(23, 191, 169, .14);
  outline: none;
}

.portal-login-page .btn-signin {
  /* width:100% has to mean the width of what contains it. portal.css sets
     no global border-box, and a <button> gets one from the UA stylesheet
     while an <a> does not -- so the same class laid out fine on the login
     form and ran a full 2rem of padding past its column on the pages that
     use an anchor. Stated here rather than relied upon. */
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  margin-top: 1.55rem;
  padding: .86rem 1rem;
  color: #FFFFFF;
  background: var(--clr-text);
  border: 1px solid var(--clr-text);
  border-radius: var(--radius);
  box-shadow: inset 4px 0 0 var(--clr-primary);
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.portal-login-page .btn-signin::before {
  display: none;
}

.portal-login-page .btn-signin:hover:not(:disabled) {
  background: var(--clr-interaction-d);
  border-color: var(--clr-interaction-d);
  box-shadow: inset 4px 0 0 var(--clr-primary), 0 10px 24px -14px rgba(8, 118, 106, .8);
  transform: translateY(-1px);
}

.portal-login-page .btn-signin:active:not(:disabled) {
  transform: translateY(0);
}

.portal-login-page .btn-signin:disabled {
  opacity: .52;
}

.portal-login-page .spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  margin-right: .55rem;
  border: 2px solid rgba(255,255,255,.38);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: portal-spin .7s linear infinite;
}

.portal-login-page .btn-signin.loading .spinner { display: inline-block; }

@keyframes portal-spin { to { transform: rotate(360deg); } }

.portal-login-page .error-message {
  display: none;
  margin-top: 1.2rem;
  padding: .75rem .9rem;
  color: var(--clr-red);
  background: var(--clr-red-bg);
  border: 1px solid rgba(163, 58, 48, .25);
  border-radius: var(--radius);
  font-size: .82rem;
}

.portal-login-page .error-message.visible { display: block; }

.portal-login-page .login-card__help {
  margin-top: 1.3rem;
  text-align: center;
}

.portal-login-page .login-card__help a,
.portal-login-page .back-link {
  color: var(--clr-muted);
  font-family: var(--font-mono);
  font-size: .72rem;
  text-decoration: none;
  transition: color .16s ease;
}

.portal-login-page .login-card__help a:hover,
.portal-login-page .back-link:hover {
  color: var(--clr-interaction-d);
}

.portal-login-page .back-link { display: inline-block; margin-top: 1.25rem; }

/* ---- Client dashboard --------------------------------------------------- */
.portal-dashboard-page {
  min-height: 100vh;
  color: var(--clr-text);
  background: var(--clr-bg);
}

.portal-dashboard-page .sidebar {
  width: var(--sidebar-w);
  background: var(--clr-surface);
  border-top: 4px solid var(--clr-primary);
  border-right: 1px solid var(--clr-border);
  box-shadow: 12px 0 36px -34px rgba(23, 25, 20, .55);
}

.portal-dashboard-page .sidebar-logo {
  min-height: 91px;
  padding: 25px 24px 20px;
  border-bottom-color: var(--clr-border);
}

.portal-dashboard-page .sidebar-nav {
  padding: 18px 12px 12px;
}

.portal-dashboard-page .sidebar-nav a {
  gap: 11px;
  margin: 2px 0;
  padding: 11px 12px;
  color: var(--clr-muted);
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .81rem;
  font-weight: 600;
}

.portal-dashboard-page .sidebar-nav a:hover {
  color: var(--clr-interaction-d);
  background: rgba(23, 191, 169, .065);
}

.portal-dashboard-page .sidebar-nav a.active {
  color: var(--clr-interaction-d);
  background: rgba(23, 191, 169, .09);
  border-left-color: var(--clr-interaction);
}

.portal-dashboard-page .sidebar-nav a svg {
  width: 17px;
  height: 17px;
}

.portal-dashboard-page .nav-divider {
  background: var(--clr-border);
}

.portal-dashboard-page .sidebar-nav a.sign-out {
  color: var(--clr-red);
  border-top-color: var(--clr-border);
}

.portal-dashboard-page .sidebar-user {
  display: block;
  padding: 17px 24px 21px;
  border-top-color: var(--clr-border);
  background: var(--clr-surface-alt);
}

.portal-dashboard-page .sidebar-user-name {
  color: var(--clr-text);
  font-size: .78rem;
}

.portal-dashboard-page .sidebar-user-email {
  color: var(--clr-muted);
  font-family: var(--font-mono);
  font-size: .63rem;
}

.portal-dashboard-page .main {
  min-height: 100vh;
  margin-left: var(--sidebar-w);
  padding: 50px clamp(24px, 4vw, 64px) 72px;
  background:
    linear-gradient(90deg, rgba(23, 25, 20, .025) 1px, transparent 1px),
    var(--clr-bg);
  background-size: 48px 48px;
}

.portal-dashboard-page .page-header {
  position: relative;
  max-width: 1200px;
  margin: 0 auto 34px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--clr-border);
}

.portal-dashboard-page .page-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 72px;
  height: 3px;
  background: var(--clr-primary);
}

.portal-dashboard-page .page-header h1 {
  margin: 0 0 7px;
  color: var(--clr-text);
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.055em;
}

.portal-dashboard-page .page-header .welcome {
  color: var(--clr-muted);
  font-size: .88rem;
}

.portal-dashboard-page .page-header .welcome span {
  color: var(--clr-interaction-d);
  font-weight: 700;
}

.portal-dashboard-page .metrics-grid,
.portal-dashboard-page .content-sections {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

.portal-dashboard-page .metrics-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 34px;
}

.portal-dashboard-page .metric-card {
  position: relative;
  min-height: 152px;
  overflow: hidden;
  padding: 24px;
  color: var(--clr-text);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.portal-dashboard-page .metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--clr-primary);
}

.portal-dashboard-page .metric-card:hover {
  border-color: rgba(23, 191, 169, .42);
  box-shadow: 0 15px 36px -30px rgba(8, 118, 106, .6);
  transform: translateY(-2px);
}

.portal-dashboard-page .metric-label {
  margin-bottom: 14px;
  color: var(--clr-muted);
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .09em;
}

.portal-dashboard-page .metric-value {
  color: var(--clr-text);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 750;
  letter-spacing: -.045em;
}

.portal-dashboard-page .metric-value.loading,
.portal-dashboard-page .section-card .section-loading {
  background: linear-gradient(90deg, #EEEAE0 25%, #F9F7F1 50%, #EEEAE0 75%);
  background-size: 200% 100%;
}

.portal-dashboard-page .metric-subtitle {
  color: var(--clr-muted);
  font-family: var(--font-mono);
  font-size: .64rem;
}

.portal-dashboard-page .metric-amount {
  color: var(--clr-primary-d);
  font-size: 1rem;
  font-weight: 700;
}

.portal-dashboard-page .badge {
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .62rem;
}

.portal-dashboard-page .content-sections {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.portal-dashboard-page .section-card {
  padding: 27px;
  color: var(--clr-text);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.portal-dashboard-page .section-card h2 {
  margin: 0 0 16px;
  padding-bottom: 14px;
  color: var(--clr-text);
  border-bottom-color: var(--clr-border);
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -.025em;
}

.portal-dashboard-page .section-card ul li {
  color: #4E534B;
  font-size: .85rem;
}

.portal-dashboard-page .section-card ul li::before {
  background: var(--clr-interaction);
}

.portal-dashboard-page .section-card .empty-state {
  color: var(--clr-muted);
}

.portal-dashboard-page .hamburger {
  color: var(--clr-text);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-top: 3px solid var(--clr-primary);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px -18px rgba(23, 25, 20, .5);
}

.portal-dashboard-page .sidebar-overlay {
  background: rgba(23, 25, 20, .42);
  backdrop-filter: blur(2px);
}

.portal-dashboard-page #dashboardError {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  color: var(--clr-red) !important;
  background: var(--clr-red-bg) !important;
  border-color: rgba(163, 58, 48, .28) !important;
}

/* Align legacy BEM admin links with the same interaction colour. */
.sidebar__link--active,
.sidebar__link.active {
  color: var(--clr-interaction-d);
  background: rgba(23, 191, 169, .08);
  border-left-color: var(--clr-interaction);
}

@media (max-width: 1024px) {
  .portal-dashboard-page .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .portal-dashboard-page .main {
    margin-left: 0;
    padding: 82px 18px 42px;
  }

  .portal-dashboard-page .metrics-grid,
  .portal-dashboard-page .content-sections {
    grid-template-columns: 1fr;
  }

  .portal-dashboard-page .page-header {
    margin-bottom: 24px;
  }

  .portal-dashboard-page .sidebar {
    transform: translateX(-100%);
  }

  .portal-dashboard-page .sidebar.open {
    transform: translateX(0);
  }

  .portal-dashboard-page .hamburger {
    display: block;
  }
}

@media (max-width: 480px) {
  .portal-login-page {
    justify-content: flex-start;
    padding: 1rem .75rem 2rem;
  }

  .portal-login-page .login-card {
    padding: 2.6rem 1.5rem 2.2rem;
    border-radius: 10px;
  }

  .portal-dashboard-page .metric-card,
  .portal-dashboard-page .section-card {
    padding: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-login-page *,
  .portal-dashboard-page * {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

/* ----- Workspace switcher -------------------------------------------
   Sits between the brand lockup and the section nav in the CRM
   sidebar. Styled for the dark navy sidebar; admin-only. */
.crm-workspace {
  padding: .2rem 1.55rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.11);
}
.ws-select {
  width: 100%;
  padding: .5rem .6rem;
  background: rgba(255,255,255,.07);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius);
  font: 500 .82rem/1.3 var(--font-body);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.ws-select:hover { border-color: rgba(255,255,255,.4); }
.ws-select:focus-visible {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(23,191,169,.4);
}
.ws-select option { background: #0D1B29; color: #fff; }

.ws-client { margin-top: .35rem; }
.ws-go {
  width: 100%;
  margin-top: .5rem;
  padding: .5rem .6rem;
  background: var(--teal);
  color: #05211d;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  font: 600 .8rem/1.3 var(--font-body);
  cursor: pointer;
}
.ws-go:hover:not(:disabled) { background: #2fd8c1; border-color: #2fd8c1; }
.ws-go:disabled { opacity: .6; cursor: default; }
.ws-go:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(23,191,169,.45); }

/* ----- "Viewing as" banner on the client dashboard ------------------ */
.ws-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 1rem;
  background: var(--teal-soft, rgba(23,191,169,.10));
  border: 1px solid rgba(23,191,169,.42);
  border-radius: var(--radius, 8px);
  margin: 0 0 1.25rem;
}
.ws-banner__text { font-weight: 600; font-size: .9rem; }
.ws-banner__btn {
  padding: .45rem .9rem;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius, 8px);
  font: 600 .82rem/1.3 inherit;
  cursor: pointer;
}
.ws-banner__btn:hover { background: rgba(23,191,169,.14); }
.ws-banner__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(23,191,169,.45); }

@media (max-width: 520px) {
  .ws-banner { flex-direction: column; align-items: stretch; }
  .ws-banner__btn { width: 100%; }
}

/* ---- Marketing consent on the sign-in form ------------------------- */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0 0 1.1rem;
  font-size: .85rem;
  line-height: 1.45;
}
.form-consent input {
  width: 1rem;
  height: 1rem;
  margin-top: .15rem;
  flex: none;
  cursor: pointer;
  accent-color: var(--clr-primary, #806022);
}
.form-consent label { cursor: pointer; opacity: .85; }
.form-consent label:hover { opacity: 1; }

/* ---- The page itself never scrolls sideways --------------------------- */
/* Anything genuinely wider than a phone screen -- tables, the pipeline
   board, the tab strip -- scrolls inside its own overflow-x:auto container,
   so the content stays reachable. This stops anything that escapes one of
   those containers from dragging the whole layout sideways instead.

   `clip` rather than `hidden`: hidden turns the element into a scroll
   container, which silently breaks position:sticky (the table headers and
   the CRM rail both rely on it). The `hidden` line before it is the
   fallback for browsers that do not support `clip`. */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }