/*
 * IPS CLIENT PORTAL — STYLESHEET
 * portal.css | Version 2.0 | 2026-03-12
 * Merged: portal-v7-patch.css integrated — patch file retired
 * Changes v2.0: Cormorant Garamond + Figtree typography · Navy deepened #0c1020
 * Option A: Navy IPS header, light workspace
 * All values sourced from live site styles.css (indo-pacific.com)
 *
 * TOKEN REFERENCE (live site):
 *   Navy header bg:    #0D2137
 *   Primary blue:      #104e8b
 *   Gold accent:       #C9A227  (text/divisions)
 *   Gold deep:         #A07D1A  (stat values)
 *   Gold btn gradient: linear-gradient(180deg, #B8922E, #8A6B15)
 *   Gold btn border:   #9A7A1C
 *   Page bg:           #f3f4f6
 *   Card bg:           #ffffff
 *   Border:            #e5e7eb
 *   Text primary:      #111827
 *   Text secondary:    #4b5563
 *   Text muted:        #6b7280
 *   Text placeholder:  #9ca3af
 */

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

/* ── DESIGN TOKENS (utility refs only — no surfaces use these) ───────────── */
:root {
  --gold:           #C9A227;
  --gold-deep:      #A07D1A;
  --navy:           #0c1020;
  --blue:           #104e8b;
  --blue-dark:      #0c3b6b;

  --font-display:   'Cormorant Garamond', Georgia, serif;
  --font-body:      'Figtree', system-ui, sans-serif;
  --font-logo:      'Horizon', 'Cormorant Garamond', sans-serif;

  --radius-sm:      4px;
  --radius-md:      6px;
  --radius-lg:      10px;
  --radius-xl:      12px;

  --space-xs:       4px;
  --space-sm:       8px;
  --space-md:       12px;
  --space-lg:       16px;
  --space-xl:       24px;
  --space-2xl:      40px;

  --transition:     0.15s ease;

  --danger:         #991b1b;
  --danger-bg:      #fef2f2;
  --danger-border:  #fecaca;
  --success:        #166534;
  --success-bg:     #f0fdf4;
  --success-border: #bbf7d0;
  --warning:        #92400e;
  --warning-bg:     #fef3c7;
  --warning-border: #fde68a;

  /* Extended tokens — component-level references */
  --border:         #e5e7eb;
  --surface:        #ffffff;
  --text-muted:     #6b7280;
  --text-secondary: #4b5563;
}

/* ── BASE ────────────────────────────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: #f3f4f6;
  color: #111827;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  min-height: 100vh;
}

/* Form elements do not inherit font-family from body in all browsers.
   Explicit declaration ensures Figtree renders on all inputs and buttons. */
input, select, textarea, button {
  font-family: var(--font-body);
}

a { color: #104e8b; text-decoration: none; transition: color var(--transition); }
a:hover { color: #0c3b6b; }

/* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5,
.card-title,
.engagement-title,
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #111827;
}
h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

.text-gold      { color: #C9A227; }
.text-muted     { color: #6b7280; }
.text-secondary { color: #4b5563; }
.text-danger    { color: #991b1b; }
.text-success   { color: #166534; }
.text-primary   { color: #111827; }
.text-small     { font-size: 0.8125rem; }
.text-xs        { font-size: 0.75rem; }

/* ══════════════════════════════════════════════════════════════════════════
   IPS HEADER — SHARED COMPONENT
   Navy #0c1020 background · 2px #C9A227 bottom border
   Horizon firm name · gold divisions line
   Used identically on login-card and dashboard sidebar.
   Do not alter one without the other.
══════════════════════════════════════════════════════════════════════════ */
.ips-header {
  background: #0c1020;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 2px solid #C9A227;
  flex-shrink: 0;
}

.ips-header-shield {
  height: 52px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.ips-header-name {
  font-family: var(--font-logo);
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
}

.ips-header-divisions {
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C9A227;
  margin-top: 5px;
  display: block;
}

/* ── PORTAL LAYOUT ───────────────────────────────────────────────────────── */
.portal-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar  topbar"
    "sidebar  main";
  min-height: 100vh;
  background: #f3f4f6;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
.sidebar {
  grid-area: sidebar;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0,0,0,0.04);
}

/* .ips-header sits at the top of .sidebar — no separate logo block needed */

.sidebar-nav {
  flex: 1;
  padding: 14px 0;
  overflow-y: auto;
}

.nav-section {
  margin-bottom: 2px;
}

.nav-section-label {
  font-size: 0.4375rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9ca3af;
  padding: 12px 16px 3px;
  display: block;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  color: #4b5563;
  font-size: 0.8125rem;
  font-weight: 400;
  transition: all var(--transition);
  border-left: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
}

.nav-item:hover {
  color: #104e8b;
  background: #eff6ff;
}

.nav-item.active {
  color: #104e8b;
  background: #eff6ff;
  border-left-color: #C9A227;
  font-weight: 600;
}

.nav-icon {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  flex-shrink: 0;
}

.nav-item.active .nav-icon,
.nav-item:hover .nav-icon { opacity: 1; }

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid #f3f4f6;
  background: #f9fafb;
  font-size: 0.75rem;
  color: #6b7280;
  flex-shrink: 0;
}

.sidebar-footer strong {
  color: #111827;
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

/* ── TOPBAR ──────────────────────────────────────────────────────────────── */
.topbar {
  grid-area: topbar;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-xl);
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.875rem;
  color: #4b5563;
}

.topbar-user strong {
  color: #111827;
  font-weight: 600;
}

.topbar-divider {
  width: 1px;
  height: 20px;
  background: #e5e7eb;
}

.page-title {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}

/* ── MAIN CONTENT ─────────────────────────────────────────────────────────── */
.main-content {
  grid-area: main;
  padding: var(--space-xl);
  overflow-y: auto;
  background: #f3f4f6;
}

/* ── CARDS ───────────────────────────────────────────────────────────────── */
.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: box-shadow var(--transition);
}

.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid #f3f4f6;
}

.card-title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
}

.card-subtitle {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-top: 2px;
}

/* ── STAT CARDS ──────────────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.stat-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #104e8b, #C9A227);
}

.stat-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: var(--space-sm);
}

.stat-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

.stat-value.gold { color: #A07D1A; }

.stat-meta {
  font-size: 0.6875rem;
  color: #9ca3af;
  margin-top: var(--space-xs);
}

/* ── BADGES ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge-gold    { background: #fef9ec; color: #A07D1A;  border: 1px solid #e8d48a; }
.badge-success { background: #f0fdf4; color: #166534;  border: 1px solid #bbf7d0; }
.badge-warning { background: #fef3c7; color: #92400e;  border: 1px solid #fde68a; }
.badge-danger  { background: #fef2f2; color: #991b1b;  border: 1px solid #fecaca; }
.badge-muted   { background: #f3f4f6; color: #6b7280;  border: 1px solid #e5e7eb; }
.badge-review  { background: #fff7ed; color: #92400e;  border: 1px solid #fed7aa; }
.badge-info    { background: #eff6ff; color: #1e40af;  border: 1px solid #bfdbfe; }
.badge-blue    { background: #eff6ff; color: #104e8b;  border: 1px solid #bfdbfe; }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(180deg, #B8922E, #8A6B15);
  color: #fff;
  border: 1px solid #9A7A1C;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.1);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #A6832A, #7A5E12);
  border-color: #8A6B15;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.1), 0 4px 12px rgba(138,107,21,0.3);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  background: transparent;
  color: #104e8b;
  border: 1px solid #bfdbfe;
}
.btn-outline:hover {
  background: #eff6ff;
  border-color: #104e8b;
  color: #0c3b6b;
}

.btn-ghost {
  background: transparent;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}
.btn-ghost:hover {
  background: #f9fafb;
  color: #111827;
}

.btn-danger {
  background: transparent;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.btn-danger:hover { background: #fef2f2; }

.btn-sm  { padding: 6px 14px;   font-size: 0.75rem; }
.btn-lg  { padding: 14px 28px;  font-size: 0.9375rem; }

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}

/* ── FORMS ────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-lg); }

.form-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #374151;
  margin-bottom: var(--space-sm);
}

.form-control {
  width: 100%;
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  border-radius: var(--radius-md);
  padding: 11px 14px;
  color: #111827;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  -webkit-appearance: none;
}

.form-control:focus {
  border-color: #104e8b;
  box-shadow: 0 0 0 3px rgba(16, 78, 139, 0.1);
}

.form-control::placeholder { color: #9ca3af; }

.form-control.error {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}

.form-hint {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: var(--space-xs);
}

/* ── ALERTS ──────────────────────────────────────────────────────────────── */
.alert {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.alert-danger  { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.alert-warning { background: #fef3c7; border: 1px solid #fde68a; color: #92400e; }
.alert-info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #104e8b; }
.alert-notice  { background: #fef9ec; border: 1px solid #e8d48a; color: #A07D1A; }

/* ── DIVIDER ─────────────────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid #f3f4f6;
  margin: var(--space-lg) 0;
}

.divider-label {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9ca3af;
}

.divider-label::before,
.divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #f3f4f6;
}

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

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

thead th {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9ca3af;
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid #f3f4f6;
  white-space: nowrap;
}

tbody td {
  padding: var(--space-md);
  border-bottom: 1px solid #f9fafb;
  color: #4b5563;
  vertical-align: middle;
}

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

tbody tr:hover td {
  background: #f9fafb;
  color: #111827;
}

/* ── LOGIN PAGE ──────────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
}

.login-card {
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
}

.login-body { padding: 28px 28px 26px; }

.login-form-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.login-form-sub {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-bottom: var(--space-xl);
}

.login-form-wrap { width: 100%; }

.login-footer-text {
  font-size: 0.6875rem;
  color: #9ca3af;
  text-align: center;
  margin-top: var(--space-lg);
  line-height: 1.65;
}

.login-footer-text a { color: #104e8b; }

/* Password toggle */
.input-wrap { position: relative; }
.input-wrap .form-control { padding-right: 48px; }
.input-toggle {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: #9ca3af; padding: 4px;
  display: flex; align-items: center;
  transition: color var(--transition);
}
.input-toggle:hover { color: #6b7280; }

/* ── UTILITIES ────────────────────────────────────────────────────────────── */
.d-flex          { display: flex; }
.align-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm          { gap: var(--space-sm); }
.gap-md          { gap: var(--space-md); }
.mt-sm           { margin-top: var(--space-sm); }
.mt-md           { margin-top: var(--space-md); }
.mt-lg           { margin-top: var(--space-lg); }
.mb-sm           { margin-bottom: var(--space-sm); }
.mb-md           { margin-bottom: var(--space-md); }
.mb-lg           { margin-bottom: var(--space-lg); }
.mb-xl           { margin-bottom: var(--space-xl); }
.w-100           { width: 100%; }
.text-center     { text-align: center; }
.text-right      { text-align: right; }
.fw-600          { font-weight: 600; }
.lh-1            { line-height: 1; }

/* ── FADE IN ANIMATIONS ───────────────────────────────────────────────────── */
.fade-in-up {
  animation: fadeInUp 0.4s ease both;
}
.fade-in-up-1 { animation-delay: 0.05s; }
.fade-in-up-2 { animation-delay: 0.10s; }
.fade-in-up-3 { animation-delay: 0.15s; }
.fade-in-up-4 { animation-delay: 0.20s; }

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

/* ── LOADING STATE ────────────────────────────────────────────────────────── */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: rgba(255,255,255,0.9);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Login: already a centred card, inherently responsive */
  .login-page { padding: var(--space-lg) var(--space-md); }

  .portal-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "topbar"
      "sidebar"
      "main";
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }
}

@media (max-width: 640px) {
  .main-content { padding: var(--space-lg); }
  .stat-grid    { grid-template-columns: 1fr 1fr; }
}

/* ── WEEK 2: DIVISION NAV — AVAILABLE STATE ─────────────────────────────── */
/*
 * Available nav items: client has no active engagement in this division.
 * Ambient upsell — visible but clearly not active. No lock icons, no 403s.
 * Clicking routes to available.php holding page with contact prompt.
 */

.nav-item--available {
  opacity: 0.45;
  cursor: pointer;
  position: relative;
}

.nav-item--available:hover {
  opacity: 0.7;
  background: transparent;
  color: var(--text-secondary);
}

.nav-item--available .nav-icon {
  stroke: var(--text-muted);
}

.nav-available-label {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.75;
  margin-left: auto;
  padding: 1px 5px;
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── WEEK 2: DIVISION BADGE ─────────────────────────────────────────────── */

.badge-division {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
}

.badge-division-legal   { background: #e0e7ff; color: #3730a3; }
.badge-division-comp    { background: #dcfce7; color: #166534; }
.badge-division-cons    { background: #fef9c3; color: #854d0e; }
.badge-division-intel   { background: #fce7f3; color: #9d174d; }
.badge-division-nexs    { background: #f0f9ff; color: #075985; }

/* ── WEEK 2: AGREEMENT TYPE NOTICE ─────────────────────────────────────── */

.engagement-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.5;
  margin-bottom: 16px;
}

.engagement-notice--cda {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

.engagement-notice--standard {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
}

/* ── WEEK 2: ENGAGEMENT / MATTER CARD ───────────────────────────────────── */

.engagement-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 16px;
  background: var(--surface);
  transition: box-shadow 0.15s ease;
}

.engagement-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.engagement-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 12px;
}

.engagement-id {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.engagement-matter {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  font-family: var(--font-display);
  margin-bottom: 4px;
}

.engagement-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ── WEEK 2: COMPLIANCE SERVICE REGISTER ───────────────────────────────── */

.service-register-row--available td {
  opacity: 0.55;
  font-style: italic;
}

.service-register-row--available td:first-child {
  opacity: 1;
  font-style: normal;
}

/* ── WEEK 2: AVAILABLE PAGE ─────────────────────────────────────────────── */

.available-hero {
  max-width: 560px;
  margin: 80px auto;
  text-align: center;
  padding: 0 24px;
}

.available-hero-icon {
  width: 56px;
  height: 56px;
  background: #fef9ec;
  border: 1.5px solid #e8d48a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.available-hero h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: 12px;
}

.available-hero p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.65;
  margin-bottom: 28px;
}

/* ══════════════════════════════════════════════════════════════════════════
   WEEK 2 ADDITIONS — COMPLETE COMPONENT LIBRARY
   All classes referenced across PHP pages. Audited and confirmed present.
══════════════════════════════════════════════════════════════════════════ */

/* ── ENGAGEMENT HEADER ───────────────────────────────────────────────────
   Page-level section header: title left, badge or tag right.
   Used on: consultancy.php, invoices.php, kyc.php, intelligence.php
───────────────────────────────────────────────────────────────────────── */
.engagement-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

/* ── ENGAGEMENT TAGS — agreement type pills ──────────────────────────────
   Used to visually distinguish CDA (Legal) from Standard engagements.
   engagement-tag: base | engagement-tag-cda: blue | engagement-tag-standard: green
───────────────────────────────────────────────────────────────────────── */
.engagement-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.engagement-tag-cda {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}

.engagement-tag-standard {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}

/* ── MATTER CARD ─────────────────────────────────────────────────────────
   Individual engagement/matter display card.
   Used on: consultancy.php (active view)
───────────────────────────────────────────────────────────────────────── */
.matter-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 16px;
  transition: box-shadow 0.15s ease;
}

.matter-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.matter-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.matter-ref {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: #6b7280;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.matter-title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}

.matter-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.matter-meta-sep {
  color: #d1d5db;
  font-size: 0.75rem;
}

/* ── SERVICE REGISTER ─────────────────────────────────────────────────────
   Vertical list of services with active/available state per row.
   Used on: kyc.php, intelligence.php
───────────────────────────────────────────────────────────────────────── */
.service-register {
  display: flex;
  flex-direction: column;
}

.service-register-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #f3f4f6;
}

.service-register-row:last-child {
  border-bottom: none;
}

/* ── SERVICE REGISTER ROW — service data cells ───────────────────────────
   svc-name: product title | svc-tagline: one-liner | svc-description: detail
   svc-active / svc-available: row-level state modifiers
───────────────────────────────────────────────────────────────────────── */
.svc-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: #111827;
  margin-bottom: 2px;
}

.svc-tagline {
  font-size: 0.775rem;
  color: #6b7280;
  line-height: 1.5;
}

.svc-description {
  font-size: 0.775rem;
  color: #4b5563;
  line-height: 1.55;
  margin-top: 6px;
}

.svc-active {
  /* Active state — full opacity, no modifier needed at row level */
}

.svc-available {
  opacity: 0.6;
}

/* ── SHOWCASE LAYOUT — non-engaged division view ─────────────────────────
   Shown to clients with no active engagement in a division.
   Presents available services with agreement context and contact prompt.
   Used on: consultancy.php, intelligence.php, available.php-referenced pages
───────────────────────────────────────────────────────────────────────── */
.showcase-wrap {
  max-width: 680px;
}

.showcase-intro {
  margin-bottom: 24px;
}

.showcase-intro h2 {
  margin-bottom: 10px;
}

.showcase-intro p {
  color: #4b5563;
  font-size: 0.9rem;
  line-height: 1.65;
}

.showcase-agreement {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #6b7280;
}

.showcase-services {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 4px 20px;
  margin-bottom: 20px;
}

/* ── SERVICE ROW — showcase service list items ────────────────────────────
   Used inside .showcase-services to list individual service offerings.
───────────────────────────────────────────────────────────────────────── */
.service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #f9fafb;
}

.service-row:last-child {
  border-bottom: none;
}

.service-row-body {
  flex: 1;
}

.service-row-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: #111827;
  margin-bottom: 2px;
}

.service-row-tagline {
  font-size: 0.775rem;
  color: #6b7280;
  line-height: 1.5;
}

.service-row-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C9A227;
  flex-shrink: 0;
  opacity: 0.6;
}

/* ── EMPTY STATE ─────────────────────────────────────────────────────────
   Centred placeholder for sections with no data yet (Phase 2/3 content).
   Used on: consultancy.php, invoices.php, kyc.php, admin/clients.php
───────────────────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 40px 24px;
}

.empty-state-icon {
  display: block;
  margin: 0 auto 14px;
  opacity: 0.18;
  color: var(--navy);
}

.empty-state-title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.empty-state-sub {
  font-size: 0.8125rem;
  color: #9ca3af;
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto;
}

/* ── ADMIN TABLE ─────────────────────────────────────────────────────────
   Slightly tighter table variant for admin views.
   Used on: admin/clients.php
───────────────────────────────────────────────────────────────────────── */
.admin-table {
  font-size: 0.8125rem;
}

.admin-table thead th {
  background: #f9fafb;
}

.client-code-cell {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  letter-spacing: 0.04em;
}

/* ── END WEEK 2 COMPONENT LIBRARY ────────────────────────────────────────── */

/* ── PASSWORD TOGGLE ICON SELECTORS ──────────────────────────────────────
   Classes exist as JS querySelector targets on SVG elements in login.php.
   Display state is managed by portal.js initLoginPage().
───────────────────────────────────────────────────────────────────────── */
.icon-eye     { display: block; }
.icon-eye-off { display: none;  }

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v7 — INTEGRATED FROM portal-v7-patch.css | 2026-03-12
   Patch file retired. All rules below are now canonical portal.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── DASHBOARD DISPLAY HEADINGS — italic treatment ──────────────────────── */
.dashboard-greeting,
.section-heading-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}