/* ============================================================
   WADR Law Firm Platform — Styles
   Palette: Black & White  |  Fonts: Playfair Display + Poppins
   ============================================================ */

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

/* Scale the whole platform down 10% for a tighter, higher-end density. */
html { zoom: 0.9; }

:root {
  /* Core palette */
  --black: #111111;
  --white: #ffffff;
  --off-white: #f7f7f5;
  --warm-white: #faf8f4;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;

  /* Accents — monoscale */
  --green: #404040;
  --red: #525252;
  --amber: #525252;
  --blue: #404040;

  /* Semantic */
  --bg: var(--off-white);
  --surface: var(--white);
  --border: var(--gray-200);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-muted: var(--gray-400);

  /* Typography */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Sizing */
  --sidebar-width: 260px;
  --topbar-height: 64px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
}

html { font-size: 13px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
}

/* ============ LOGIN SCREEN ============ */

.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  z-index: 9999;
}

.login-card {
  text-align: center;
  padding: 48px 40px;
  max-width: 400px;
  width: 100%;
}

.login-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  margin-bottom: 24px;
}

.login-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: #111111;
  letter-spacing: 4px;
  margin-bottom: 8px;
}

.login-subtitle {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #737373;
  margin-bottom: 40px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.login-form { max-width: 300px; margin: 0 auto; }

.input-group { margin-bottom: 16px; }

.input-group input {
  width: 100%;
  padding: 14px 20px;
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: var(--radius);
  color: #111111;
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

.input-group input::placeholder { color: #a3a3a3; }
.input-group input:focus { border-color: #737373; }

.login-error {
  color: #dc2626;
  font-size: 0.85rem;
  margin-top: 12px;
}

/* Divider + Google button on the login screen */
.login-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--text-secondary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.login-or::before, .login-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.btn-google {
  gap: 10px;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  font-weight: 500;
}
.btn-google:hover { background: #f7f8f8; border-color: #c6c9cd; }
.btn-google svg { flex: 0 0 auto; }

/* ============ BUTTONS ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s;
}

.btn:hover { background: var(--gray-50); border-color: var(--gray-300); }

.btn-primary {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.btn-primary:hover { background: var(--gray-800); }

.btn-full { width: 100%; }
.btn-sm { padding: 6px 14px; font-size: 0.8rem; }

/* ============ APP LAYOUT ============ */

.app {
  display: flex;
  min-height: 100vh;
}

/* ============ SIDEBAR ============ */

.sidebar {
  width: var(--sidebar-width);
  background: var(--black);
  color: var(--white);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: transform 0.3s ease;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 20px;
}

.sidebar-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  filter: invert(1) brightness(2);
}
/* Compact square mark shown only when the rail is collapsed (desktop). */
.sidebar-mark { display: none; height: 24px; width: auto; max-width: 40px; object-fit: contain; flex: 0 0 auto; }

.sidebar-close {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  color: var(--gray-400);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.15s;
}

.nav-item:hover { color: var(--white); background: var(--gray-800); }
.nav-item.active { color: var(--white); background: var(--gray-800); font-weight: 500; }
.nav-item { position: relative; }

/* Admin-only "who has access" icon + hover popover on each nav item */
.nav-perm { margin-left: auto; display: none; align-items: center; justify-content: center; color: var(--gray-500); opacity: 0.85; transition: color 0.15s, opacity 0.15s; cursor: default; flex: 0 0 auto; }
/* In the open sidebar, the access icon shows on the hovered or active item
   (admins only) so you can hover any section to see who has access. */
body:not(.role-member) .nav-item:hover .nav-perm,
body:not(.role-member) .nav-item.active .nav-perm { display: inline-flex; }
/* Never show the access icon (or its popover) while the sidebar is minimized. */
.app.nav-collapsed .nav-perm { display: none !important; }
.nav-perm:hover { color: var(--white); opacity: 1; }
.nav-perm-pop {
  display: none; position: absolute; left: calc(100% + 10px); top: 0;
  min-width: 210px; max-height: 320px; overflow-y: auto;
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); padding: 10px; z-index: 400; cursor: default;
}
.nav-perm:hover .nav-perm-pop, .nav-perm:focus-within .nav-perm-pop, .nav-perm:focus .nav-perm-pop { display: block; }
.nav-perm-title { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin: 0 2px 8px; }
.nav-perm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 2px; font-size: 0.84rem; }
.nav-perm-name { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-perm-badge { font-size: 0.64rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--gray-200); color: var(--text-secondary); white-space: nowrap; flex: 0 0 auto; }
.nav-perm-badge.is-admin { background: #ddd6fe; color: #5b21b6; }

/* Keep the Home "Ask Clerk" card pinned to the bottom of the page. */
#page-home.active { display: flex; flex-direction: column; min-height: calc(100vh - var(--topbar-height) - 48px); }
#page-home .clerk-cta { margin-top: auto; }

/* Nav Dropdown (Potential) */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.dropdown-chevron {
  margin-left: auto;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.nav-dropdown.open .dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding-left: 12px;
  margin-top: 2px;
}

.nav-dropdown.open .nav-dropdown-menu {
  display: flex;
}

.nav-dropdown-menu .nav-item {
  font-size: 0.85rem;
  padding: 10px 16px;
  color: var(--gray-500);
}

.nav-dropdown-menu .nav-item:hover {
  color: var(--gray-300);
}

.sidebar-footer {
  padding: 8px 12px;
  border-top: 1px solid var(--gray-800);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.sidebar-user:hover {
  background: var(--gray-800);
}

.sidebar-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gray-700);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  flex-shrink: 0;
}

.sidebar-user-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sidebar-user-name { font-size: 0.82rem; font-weight: 500; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 0.68rem; color: var(--gray-400); margin-top: 1px; }

.sidebar-user-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.sidebar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-xs);
  border: none;
  background: none;
  color: var(--gray-500);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.sidebar-icon-btn:hover {
  color: var(--white);
  background: var(--gray-700);
}

/* ============ MAIN CONTENT ============ */

.main-content {
  flex: 1;
  min-width: 0; /* allow the flex item to shrink so wide tables scroll instead of overflowing the page */
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============ TOP BAR ============ */

.topbar {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
}

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
}

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* Sync Button */
.sync-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.sync-btn:hover { background: var(--gray-100); }

.sync-btn.syncing .sync-icon {
  animation: spin 1s linear infinite;
}

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

/* Sync Status */
.sync-status {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.sync-status.pending { background: var(--gray-100); color: var(--gray-600); }
.sync-status.success { background: var(--gray-100); color: var(--gray-900); }
.sync-status.error { background: var(--gray-200); color: var(--gray-900); }

/* Theme Toggle */
.theme-toggle,
.topbar-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.topbar-icon-btn:hover { border-color: var(--gray-400); }
[data-theme="dark"] .topbar-icon-btn { background: #1e1e1e; }

.theme-toggle:hover { background: var(--gray-100); }

.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: block; }

[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }

/* ============ PAGE CONTAINER ============ */

.page-container { padding: 32px; flex: 1; }

.page { display: none; }
.page.active { display: block; }

.page-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  background: var(--white);
  outline: none;
  transition: border-color 0.2s;
}

.search-input:focus { border-color: var(--gray-400); }

/* ============ CARDS ============ */

.card {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(17, 24, 39, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
.stat-card {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 22px rgba(17, 24, 39, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card {
  background: rgba(30, 30, 34, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ============ LIQUID GLASS ============
   Every card is frosted glass with a slow diagonal light sheen drifting across
   it. The sheen lives on a ::before at z-index -1 (isolation:isolate keeps it
   above the card's own background but below all content), so nothing needs its
   own z-index and text stays crisp. */
.card, .stat-card, .finance-card, .clerk-bar-form { position: relative; isolation: isolate; }
.card::before, .stat-card::before, .finance-card::before, .clerk-bar-form::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.55) 49%, transparent 62%);
  background-size: 260% 260%;
  opacity: 0.5;
  animation: cardSheen 19s linear infinite;
}
.stat-card::before { animation-duration: 23s; animation-delay: -6s; }
.finance-card::before { animation-duration: 25s; animation-delay: -3s; }
.clerk-bar-form::before { animation-duration: 21s; animation-delay: -10s; }
@keyframes cardSheen {
  0% { background-position: 135% -20%; }
  100% { background-position: -35% 120%; }
}
[data-theme="dark"] .card::before, [data-theme="dark"] .stat-card::before,
[data-theme="dark"] .finance-card::before, [data-theme="dark"] .clerk-bar-form::before {
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.12) 49%, transparent 62%);
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  .card::before, .stat-card::before, .finance-card::before, .clerk-bar-form::before { animation: none; opacity: 0.28; }
}
/* Bring the Finance cards into the same frosted-glass family as the rest. */
.finance-card {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 22px rgba(17, 24, 39, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
[data-theme="dark"] .finance-card {
  background: rgba(30, 30, 34, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

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

.card-header h3 { font-size: 1.05rem; }

.card-body { padding: 24px; }

/* ============ DASHBOARD ============ */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 22px rgba(17, 24, 39, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.stat-value {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.stat-change {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.stat-change.positive { color: var(--green); }
.stat-change.negative { color: var(--red); }

.dashboard-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* ============ HOME ============ */

.home-hero { margin-bottom: 32px; }

.home-greeting {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
}

.home-date {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-top: 4px;
}

.home-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.home-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}

.home-link:hover {
  border-color: var(--gray-400);
  background: var(--gray-50);
  transform: translateY(-1px);
}

.home-link svg { color: var(--text-secondary); flex-shrink: 0; }

/* ============ TABLE ============ */

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  padding: 12px 16px;
  /* Painted divider (see .directory-table) — uniform under html { zoom }. */
  box-shadow: inset 0 -1px 0 0 var(--border);
}

.table td {
  padding: 14px 16px;
  font-size: 0.875rem;
  box-shadow: inset 0 -1px 0 0 var(--gray-100);
}

.table tbody tr:last-child td { box-shadow: none; }
.table tbody tr:hover { background: var(--gray-50); }

/* ============ BADGES ============ */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-active { background: var(--gray-100); color: var(--gray-900); }
.badge-pending { background: var(--gray-100); color: var(--gray-500); }
.badge-completed { background: var(--gray-100); color: var(--gray-400); }
.badge-await { background: #fef3c7; color: #92400e; }

/* ============ DEADLINES ============ */

.deadline-list { display: flex; flex-direction: column; gap: 16px; }

.deadline-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.deadline-date {
  min-width: 60px;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  background: var(--gray-100);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}

.deadline-date.urgent { background: var(--gray-200); color: var(--gray-900); font-weight: 700; }

.deadline-info { display: flex; flex-direction: column; gap: 2px; }
.deadline-info strong { font-size: 0.875rem; }
.deadline-info span { font-size: 0.8rem; color: var(--text-secondary); }

/* ============ FINANCE PAGE ============ */

.finance-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--border);
}
/* Dropdown section picker — replaces the tab row on small screens. */
.finance-tab-select {
  display: none; width: 100%; margin-bottom: 20px; padding: 12px 14px;
  font: inherit; font-size: 0.95rem; font-weight: 600;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-primary);
}

.finance-tab {
  padding: 12px 28px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
}

.finance-tab:hover { color: var(--text-primary); }
.finance-tab.active { color: var(--text-primary); border-bottom-color: var(--black); }

.finance-panel { display: none; }
.finance-panel.active { display: block; }

/* Finance Cards — matching screenshot style */
.finance-card {
  background: var(--warm-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 24px;
}

.finance-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 20px;
}

/* ===== Finance Overview (rebuilt owner's dashboard) ===== */
.fin-brief {
  display: flex; align-items: flex-start; gap: 12px;
  background: transparent; color: var(--text-secondary);
  border-left: 2px solid var(--border);
  padding: 2px 0 2px 16px; margin: 2px 0 26px;
}
.fin-brief-mark { font-size: 0.95rem; color: var(--text-muted); flex-shrink: 0; line-height: 1.6; }
.fin-brief-text { font-size: 0.9rem; line-height: 1.6; font-weight: 400; color: var(--text-secondary); }

.fin-hero { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.fin-hero-4 { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
@media (max-width: 1200px) { .fin-hero-4 { grid-template-columns: 1fr 1fr; } }
.fin-hero-card { margin-bottom: 0; padding: 24px 26px; }
.fin-band { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fin-band-main { grid-column: span 1; }
.fin-band .finance-card { margin-bottom: 24px; }
/* Accounts Payable summary tiles */
.ap-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.ap-tile { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; }
.ap-tile-lbl { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.ap-tile-val { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; }
@media (max-width: 700px) { .ap-summary { grid-template-columns: 1fr; } }
.ap-cardholder { font-weight: 600; }
.ap-card-last4 { font-size: 0.82rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Client payment terms selector */
.client-terms-row { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; }
.client-terms-lbl { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-secondary); }
.client-terms-sel { padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-xs); font-size: 0.85rem; background: var(--surface); color: var(--text-primary); font-family: var(--font-body); }
.client-terms-edit { border: none; background: none; color: var(--text-secondary); font-family: var(--font-body); font-size: 0.8rem; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.client-terms-edit:hover { color: var(--text-primary); text-decoration: underline; }

/* Client header: terms pinned to the upper-right as a clear, tinted panel so
   the billing arrangement is impossible to miss. */
.client-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.client-terms-panel {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--gray-50); min-width: 170px; text-align: right;
}
.client-terms-panel .client-terms-lbl { color: var(--text-muted); }
.client-terms-value { font-size: 1.05rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-primary); }
.client-terms-none { color: var(--text-muted); font-weight: 600; }
.client-terms-panel .client-terms-edit { margin-top: 2px; font-weight: 600; }
/* IOLTA (trust-account) toggle in the Terms panel. */
.client-iolta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
  width: 100%; justify-content: flex-end; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.client-iolta input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent, #6366f1); flex: 0 0 auto; }
.client-iolta input:disabled { cursor: default; }
.client-iolta.is-on { color: var(--text-primary); }
/* Tint the whole panel by terms type (matches the .terms-pill palette). */
.client-terms-panel.terms-retainer { background: #eef2ff; border-color: #dfe4ff; }
.client-terms-panel.terms-retainer .client-terms-value, .client-terms-panel.terms-retainer .client-terms-edit { color: #4338ca; }
.client-terms-panel.terms-hourly { background: #e7f5ec; border-color: #d3ecdd; }
.client-terms-panel.terms-hourly .client-terms-value, .client-terms-panel.terms-hourly .client-terms-edit { color: #1f7a45; }
.client-terms-panel.terms-fixed, .client-terms-panel.terms-project { background: #fef3e2; border-color: #f6e4c8; }
.client-terms-panel.terms-fixed .client-terms-value, .client-terms-panel.terms-project .client-terms-value,
.client-terms-panel.terms-fixed .client-terms-edit, .client-terms-panel.terms-project .client-terms-edit { color: #9a6a1a; }
[data-theme="dark"] .client-terms-panel { background: #1c1c1c; }
[data-theme="dark"] .client-terms-panel.terms-retainer { background: #23204a; border-color: #322c66; }
[data-theme="dark"] .client-terms-panel.terms-retainer .client-terms-value, [data-theme="dark"] .client-terms-panel.terms-retainer .client-terms-edit { color: #b6b0ff; }
[data-theme="dark"] .client-terms-panel.terms-hourly { background: #12321f; border-color: #1c4a30; }
[data-theme="dark"] .client-terms-panel.terms-hourly .client-terms-value, [data-theme="dark"] .client-terms-panel.terms-hourly .client-terms-edit { color: #6cd39a; }
[data-theme="dark"] .client-terms-panel.terms-fixed, [data-theme="dark"] .client-terms-panel.terms-project { background: #3a2e18; border-color: #4d3d1f; }
[data-theme="dark"] .client-terms-panel.terms-fixed .client-terms-value, [data-theme="dark"] .client-terms-panel.terms-project .client-terms-value,
[data-theme="dark"] .client-terms-panel.terms-fixed .client-terms-edit, [data-theme="dark"] .client-terms-panel.terms-project .client-terms-edit { color: #e6b566; }
/* On phones the panel drops below the name/logo and stretches full-width. */
@media (max-width: 640px) {
  .client-head-right { align-items: stretch; width: 100%; }
  .client-terms-panel { align-items: flex-start; text-align: left; min-width: 0; width: 100%; }
  .client-iolta { justify-content: flex-start; }
}

/* Skeleton loader */
.skel { position: relative; overflow: hidden; background: var(--gray-100); border-radius: 6px; }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: skelShimmer 1.3s infinite; }
@media (prefers-color-scheme: dark) { .skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); } }
[data-theme="dark"] .skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); }
@keyframes skelShimmer { 100% { transform: translateX(100%); } }
.skel-row { height: 46px; margin-bottom: 10px; }
.skel-tile { height: 92px; }
.skel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* Treasury account cards */
/* Accounts sit on a single row; they shrink to fit and scroll if there are many. */
.tr-accts { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.tr-acct { flex: 1 1 0; min-width: 150px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 16px; }
.tr-tag-mercury { color: #4f46e5; border-color: rgba(79, 70, 229, 0.35); }
.tr-acct-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tr-acct-bal { font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem; }
.tr-tag { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 20px; padding: 1px 7px; margin-left: 4px; }

/* Invoice → Mercury status dot (glowing = live in Mercury) */
.inv-status-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.mrc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.mrc-local { background: var(--gray-400); }
.mrc-sent { background: #d97706; }
.mrc-partial { background: #2563eb; }
.mrc-paid { background: #16a34a; }
.mrc-overdue { background: #dc2626; }
.mrc-glow { animation: mrcPulse 1.9s ease-in-out infinite; }
@keyframes mrcPulse {
  0% { box-shadow: 0 0 0 0 currentColor; }
  70% { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.mrc-sent.mrc-glow { color: rgba(217, 119, 6, 0.5); }
.mrc-partial.mrc-glow { color: rgba(37, 99, 235, 0.5); }
.mrc-overdue.mrc-glow { color: rgba(220, 38, 38, 0.5); }
@media (prefers-reduced-motion: reduce) { .mrc-glow { animation: none; } }

.fin-card-label { font-size: 0.9rem; font-weight: 600; letter-spacing: 0; color: var(--text-primary); display: flex; align-items: baseline; gap: 8px; }
.fin-card-period { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); }
.fin-big { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 700; line-height: 1.05; margin: 6px 0 2px; }
.fin-mid { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; }
.fin-sub { font-size: 0.82rem; color: var(--text-secondary); }
.fin-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; font-weight: 600; }
.fin-delta.up { color: var(--text-primary); }
.fin-delta.down { color: var(--text-muted); }
.fin-spark { margin-top: 12px; width: 100%; height: 44px; display: block; }
.fin-spark polyline { fill: none; stroke: var(--text-primary); stroke-width: 2; }
.fin-spark .fin-spark-zero { stroke: var(--gray-300); stroke-width: 1; stroke-dasharray: 3 3; }

.fin-compare-row { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.fin-compare-row:last-child { border-bottom: 0; }
.fin-compare-row .lbl { font-size: 0.82rem; color: var(--text-secondary); }
.fin-compare-row .val { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }

/* Waterfall (monthly revenue vs expenses) */
.fin-waterfall { display: flex; align-items: flex-end; gap: 10px; height: 200px; padding-top: 8px; }
.fin-wf-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 4px; min-width: 0; }
.fin-wf-bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; width: 100%; justify-content: center; }
.fin-wf-bar { width: 42%; max-width: 16px; border-radius: 3px 3px 0 0; }
.fin-wf-bar.rev { background: var(--gray-800); }
.fin-wf-bar.exp { background: var(--gray-300); }
.fin-wf-net { font-size: 0.68rem; font-weight: 600; color: var(--text-secondary); }
.fin-wf-lbl { font-size: 0.68rem; color: var(--text-muted); }
.fin-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 0.75rem; color: var(--text-secondary); }
.fin-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fin-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.fin-legend i.rev { background: var(--gray-800); }
.fin-legend i.exp { background: var(--gray-300); }

/* Attention list */
.fin-attention { display: flex; flex-direction: column; gap: 10px; }
.fin-alert { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.fin-alert-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; }
.fin-alert.warn .fin-alert-ic { background: var(--gray-900); color: var(--white); }
.fin-alert-body { flex: 1; min-width: 0; }
.fin-alert-body strong { display: block; font-size: 0.9rem; }
.fin-alert-body span { font-size: 0.78rem; color: var(--text-secondary); }
.fin-alert-amt { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; }
.fin-attention .fin-allclear { text-align: center; color: var(--text-secondary); padding: 24px 8px; font-size: 0.9rem; }

/* Client revenue + expense movers rows */
.fin-rowlist { display: flex; flex-direction: column; gap: 12px; }
.fin-rowitem { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.fin-rowitem .nm { font-size: 0.88rem; font-weight: 600; }
.fin-rowitem .amt { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; text-align: right; }
.fin-rowitem .bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--gray-100); overflow: hidden; }
.fin-rowitem .bar > i { display: block; height: 100%; background: var(--gray-800); border-radius: 3px; }
.fin-mover-delta { font-size: 0.82rem; font-weight: 600; text-align: right; }
.fin-mover-delta.up::before { content: '▲ '; font-size: 0.7em; }
.fin-mover-delta.down::before { content: '▼ '; font-size: 0.7em; }
.fin-mover-delta.down { color: var(--text-muted); }

/* Cash pipeline funnel */
.fin-funnel { display: flex; flex-direction: column; gap: 8px; }
.fin-funnel-row { display: flex; align-items: center; gap: 12px; }
.fin-funnel-lbl { width: 92px; flex-shrink: 0; font-size: 0.78rem; color: var(--text-secondary); }
.fin-funnel-track { flex: 1; background: var(--gray-100); border-radius: 6px; height: 26px; overflow: hidden; }
.fin-funnel-fill { height: 100%; background: var(--gray-800); border-radius: 6px; min-width: 2px; transition: width 0.4s; }
.fin-funnel-fill.is-unbilled { background: var(--gray-400); }
.fin-funnel-amt { width: 86px; flex-shrink: 0; text-align: right; font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; }

/* Break-even */
.fin-breakeven { display: flex; flex-direction: column; gap: 14px; }
.fin-be-track { position: relative; height: 34px; background: var(--gray-100); border-radius: 8px; overflow: hidden; }
.fin-be-fill { height: 100%; background: var(--gray-800); border-radius: 8px; transition: width 0.4s; }
.fin-be-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--gray-900); }
.fin-be-legend { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-secondary); }
.fin-be-legend strong { color: var(--text-primary); font-family: var(--font-heading); }

@media (max-width: 900px) {
  .fin-hero { grid-template-columns: 1fr; }
  .fin-band { grid-template-columns: 1fr; }
}

.finance-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.finance-card-header .finance-card-title { margin-bottom: 0; }

/* Toggle buttons */
.toggle-group {
  display: flex;
  border: 1px solid var(--gray-300);
  border-radius: 24px;
  overflow: hidden;
}

.toggle-btn {
  padding: 8px 20px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--white);
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
}

.toggle-btn.active {
  background: var(--gray-900);
  color: var(--white);
}

/* Split single-select pills — two separate buttons, only one active.
   Same radio behaviour as .toggle-group but visually detached. */
.seg-split { display: inline-flex; gap: 8px; }
.seg-pill {
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--gray-300);
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.seg-pill:hover { color: var(--text-primary); border-color: var(--text-primary); }
.seg-pill.active {
  background: var(--gray-900);
  color: var(--white);
  border-color: var(--gray-900);
}

/* Receivables */
.receivables-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.receivable-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.receivable-value {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 700;
}

.receivable-value.positive { color: var(--green); }

/* Financial Summary Grid */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.summary-grid.three-col { grid-template-columns: repeat(3, 1fr); }

.summary-item {
  padding: 20px 24px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.summary-item.highlight {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

.summary-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.summary-value {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 700;
}

.summary-value.negative, .negative { color: var(--gray-600); }
.summary-value.positive, .positive { color: var(--gray-900); }

/* P&L Accordion */
.pnl-card { padding-bottom: 12px; overflow: hidden; }

.pnl-accordion { margin-top: 8px; }

/* Monthly mode — scrollable wide table */
.pnl-monthly-mode {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Monthly grid rows: account label + 12 months + total = 14 columns */
.pnl-mrow {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) repeat(12, minmax(68px, 1fr)) minmax(90px, 1.2fr);
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gray-100);
  min-width: 1100px;
  transition: background 0.2s ease;
}

.pnl-mrow-header {
  padding: 8px 16px;
  border-bottom: 2px solid var(--gray-200);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
}

.pnl-mrow-header .pnl-mcol,
.pnl-mrow-header .pnl-mcol-label,
.pnl-mrow-header .pnl-mcol-total {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.pnl-mcol-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 8px;
}

.pnl-mcol {
  text-align: right;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  padding: 2px 4px;
}

.pnl-mcol-total {
  text-align: right;
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  padding: 2px 4px;
  border-left: 1px solid var(--gray-200);
  margin-left: 4px;
  padding-left: 8px;
}

/* Current month column — pulsing amber glow */
.pnl-mcol-current {
  position: relative;
  animation: pnlCurrentPulse 2.5s ease-in-out infinite;
  border-radius: var(--radius-xs);
}

@keyframes pnlCurrentPulse {
  0%, 100% { background: rgba(245, 158, 11, 0.08); }
  50% { background: rgba(245, 158, 11, 0.22); }
}

/* Current month header label gets a dot indicator */
.pnl-mrow-header .pnl-mcol-current {
  font-weight: 700;
  color: var(--text-primary);
}

.pnl-mrow-header .pnl-mcol-current::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: #f59e0b;
  border-radius: 50%;
  margin: 3px auto 0;
  animation: pnlDotPulse 1.5s ease-in-out infinite;
}

@keyframes pnlDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* Section header in monthly mode */
.pnl-mrow-section {
  cursor: pointer;
}

.pnl-mrow-section .pnl-mcol-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
}

.pnl-mrow-section .pnl-mcol {
  font-weight: 600;
  font-size: 0.8rem;
}

.pnl-mrow-section .pnl-mcol-total {
  font-weight: 700;
}

.pnl-mrow-section:hover {
  background: var(--gray-50);
}

/* Child rows in monthly mode. Indentation lives on the label cell only —
   keeping the container's padding (and therefore all 14 grid tracks)
   identical to every other row, so the month columns stay perfectly aligned
   at any nesting depth. */
.pnl-mrow-child {
  border-bottom: 1px solid var(--gray-50);
  transform: translateY(-6px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              background 0.15s ease;
}

.pnl-section.open .pnl-mrow-child {
  transform: translateY(0);
  opacity: 1;
}

.pnl-mrow-child:hover {
  background: var(--gray-50);
}

.pnl-mrow-child .pnl-mcol-label {
  font-size: 0.82rem;
  font-weight: 400;
  padding-left: 24px; /* indent the label, not the grid */
}

.pnl-mrow-child .pnl-mcol {
  font-size: 0.75rem;
}

/* Sub-child rows in monthly mode. Same grid + padding as every row (indent is
   on the label only) so columns line up with the parent rows above. */
.pnl-mrow-subchild {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) repeat(12, minmax(68px, 1fr)) minmax(90px, 1.2fr);
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--gray-50);
  min-width: 1100px;
  transform: translateY(-4px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.15s ease;
}

.pnl-account-group.open .pnl-mrow-subchild {
  transform: translateY(0);
  opacity: 1;
}

.pnl-mrow-subchild .pnl-mcol-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-left: 44px;   /* deeper indent than child, on the label only */
  padding-left: 8px;
  border-left: 2px solid var(--gray-200);
}

.pnl-mrow-subchild .pnl-mcol {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.pnl-mrow-subchild .pnl-mcol-total {
  font-size: 0.75rem;
  font-weight: 500;
}

.pnl-mrow-subchild:hover {
  background: var(--gray-50);
}

/* Subtotal and net rows in monthly mode */
.pnl-mrow-subtotal {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.pnl-mrow-subtotal .pnl-mcol-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
}

.pnl-mrow-subtotal .pnl-mcol {
  font-weight: 600;
  font-size: 0.78rem;
}

.pnl-mrow-net {
  padding: 14px 16px;
  background: var(--gray-50);
  border-bottom: none;
}

.pnl-mrow-net .pnl-mcol-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
}

.pnl-mrow-net .pnl-mcol {
  font-weight: 700;
  font-size: 0.82rem;
}

.pnl-mrow-net .pnl-mcol-total {
  font-weight: 700;
  font-size: 0.9rem;
}

/* Sub-header rows in YTD combined expenses view */
.pnl-child-subheader {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200) !important;
}

.pnl-child-subheader .pnl-row-label {
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.pnl-child-subheader .pnl-row-amount {
  font-weight: 600;
  cursor: default;
}

.pnl-child-subheader .pnl-row-pct {
  font-weight: 500;
}

/* Dark mode for monthly */
[data-theme="dark"] .pnl-mrow-header { background: var(--surface); }
[data-theme="dark"] .pnl-mcol-current { animation-name: pnlCurrentPulseDark; }
[data-theme="dark"] .pnl-mrow-subtotal { background: #1e1e1e; }
[data-theme="dark"] .pnl-mrow-net { background: #1e1e1e; }
[data-theme="dark"] .pnl-mrow-child:hover,
[data-theme="dark"] .pnl-mrow-subchild:hover { background: #1a1a1a; }
[data-theme="dark"] .pnl-child-subheader { background: #1e1e1e; border-color: #2a2a2a !important; }

@keyframes pnlCurrentPulseDark {
  0%, 100% { background: rgba(245, 158, 11, 0.06); }
  50% { background: rgba(245, 158, 11, 0.18); }
}

.pnl-row {
  display: grid;
  grid-template-columns: 1fr 160px 120px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.2s ease;
}

.pnl-row-header {
  padding: 10px 20px;
  border-bottom: 2px solid var(--gray-200);
}

.pnl-row-header span {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Section rows (Income / Expenses) */
.pnl-row-section {
  cursor: pointer;
  user-select: none;
  padding: 18px 20px;
  border-bottom: 1px solid var(--gray-200);
}

.pnl-row-section:hover {
  background: var(--gray-50);
}

.pnl-row-section .pnl-row-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}

.pnl-row-section .pnl-row-amount {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: right;
  color: var(--text-primary);
}

.pnl-row-section .pnl-row-pct {
  text-align: right;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Chevron icon */
.pnl-chevron {
  width: 18px;
  height: 18px;
  color: var(--gray-400);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.pnl-section.open .pnl-chevron {
  transform: rotate(90deg);
}

/* Collapsible children container */
.pnl-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
  opacity: 0;
}

.pnl-section.open .pnl-children {
  opacity: 1;
}

/* Individual account rows */
.pnl-child-row {
  display: grid;
  grid-template-columns: 1fr 160px 120px;
  align-items: center;
  padding: 12px 20px 12px 52px;
  border-bottom: 1px solid var(--gray-50);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              background 0.2s ease;
}

.pnl-section.open .pnl-child-row {
  transform: translateY(0);
  opacity: 1;
}

.pnl-child-row:hover {
  background: var(--gray-50);
}

.pnl-child-row .pnl-row-label {
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 400;
}

.pnl-child-row .pnl-row-amount {
  text-align: right;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-primary);
  position: relative;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  transition: background 0.2s ease, color 0.2s ease;
}

.pnl-child-row .pnl-row-amount:hover {
  background: var(--gray-200);
}

.pnl-child-row .pnl-row-amount::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 8px;
  right: 8px;
  height: 1px;
  background: var(--gray-300);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.pnl-child-row .pnl-row-amount:hover::after {
  opacity: 1;
}

.pnl-child-row .pnl-row-pct {
  text-align: right;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Staggered animation for child rows */
.pnl-child-row:nth-child(1) { transition-delay: 0.03s; }
.pnl-child-row:nth-child(2) { transition-delay: 0.06s; }
.pnl-child-row:nth-child(3) { transition-delay: 0.09s; }
.pnl-child-row:nth-child(4) { transition-delay: 0.12s; }
.pnl-child-row:nth-child(5) { transition-delay: 0.15s; }
.pnl-child-row:nth-child(6) { transition-delay: 0.18s; }
.pnl-child-row:nth-child(7) { transition-delay: 0.21s; }
.pnl-child-row:nth-child(8) { transition-delay: 0.24s; }
.pnl-child-row:nth-child(9) { transition-delay: 0.27s; }
.pnl-child-row:nth-child(10) { transition-delay: 0.30s; }
.pnl-child-row:nth-child(11) { transition-delay: 0.33s; }
.pnl-child-row:nth-child(12) { transition-delay: 0.36s; }
.pnl-child-row:nth-child(13) { transition-delay: 0.39s; }
.pnl-child-row:nth-child(14) { transition-delay: 0.42s; }
.pnl-child-row:nth-child(15) { transition-delay: 0.45s; }
.pnl-child-row:nth-child(16) { transition-delay: 0.48s; }

/* Clickable amount styling */
.pnl-clickable {
  cursor: pointer;
  position: relative;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  transition: background 0.2s ease;
}

.pnl-clickable:hover {
  background: var(--gray-200);
}

/* Expandable account with sub-accounts */
.pnl-child-expandable {
  cursor: pointer;
}

.pnl-child-expandable .pnl-row-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.pnl-chevron-sm {
  width: 14px;
  height: 14px;
  color: var(--gray-400);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.pnl-account-group.open .pnl-chevron-sm {
  transform: rotate(90deg);
}

/* Sub-children container (sub-accounts) */
.pnl-subchildren {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
}

.pnl-account-group.open .pnl-subchildren {
  opacity: 1;
}

/* Sub-account rows */
.pnl-subchild-row {
  display: grid;
  grid-template-columns: 1fr 160px 120px;
  align-items: center;
  padding: 10px 20px 10px 76px;
  border-bottom: 1px solid var(--gray-50);
  transform: translateY(-6px);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease,
              background 0.15s ease;
}

.pnl-account-group.open .pnl-subchild-row {
  transform: translateY(0);
  opacity: 1;
}

.pnl-subchild-row:nth-child(1) { transition-delay: 0.02s; }
.pnl-subchild-row:nth-child(2) { transition-delay: 0.05s; }
.pnl-subchild-row:nth-child(3) { transition-delay: 0.08s; }
.pnl-subchild-row:nth-child(4) { transition-delay: 0.11s; }
.pnl-subchild-row:nth-child(5) { transition-delay: 0.14s; }

.pnl-subchild-row:hover {
  background: var(--gray-50);
}

.pnl-subchild-row .pnl-row-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 400;
  padding-left: 4px;
  border-left: 2px solid var(--gray-200);
}

.pnl-subchild-row .pnl-row-amount {
  text-align: right;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
}

.pnl-subchild-row .pnl-row-pct {
  text-align: right;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Subtotal rows (Gross Profit, Net Operating Income) */
.pnl-row-subtotal {
  padding: 14px 20px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.pnl-row-subtotal .pnl-row-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.pnl-row-subtotal .pnl-row-amount {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: right;
  color: var(--text-primary);
}

.pnl-row-subtotal .pnl-row-pct {
  text-align: right;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Divider */
.pnl-divider {
  height: 1px;
  background: var(--gray-300);
  margin: 4px 20px;
}

.pnl-divider-heavy {
  height: 2px;
  background: var(--black);
  opacity: 0.9;
}

/* Net Income row */
.pnl-row-net {
  padding: 20px 20px;
  background: var(--gray-50);
  border-bottom: none;
}

.pnl-row-net .pnl-row-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-primary);
}

.pnl-row-net .pnl-row-amount {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  text-align: right;
  color: var(--text-primary);
}

.pnl-row-net .pnl-row-pct {
  text-align: right;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Operating Margin row */
.pnl-row-margin {
  padding: 16px 20px;
  border-bottom: none;
}

.pnl-row-margin .pnl-row-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.pnl-margin-bar-wrap {
  display: flex;
  justify-content: flex-end;
}

.pnl-margin-bar {
  width: 120px;
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
}

.pnl-margin-fill {
  display: block;
  height: 100%;
  background: var(--gray-800);
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.pnl-row-margin .pnl-row-pct {
  text-align: right;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}

/* ── Detail Popup ── */
.pnl-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.pnl-detail-overlay.visible {
  display: flex;
  opacity: 1;
}

.pnl-detail-popup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 90%;
  max-width: 640px;
  max-height: 80vh;
  overflow: hidden;
  transform: translateY(16px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
  opacity: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.pnl-detail-overlay.visible .pnl-detail-popup {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.pnl-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-200);
}

.pnl-detail-header h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.pnl-detail-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 4px;
  line-height: 1;
  transition: color 0.2s;
}

.pnl-detail-close:hover {
  color: var(--text-primary);
}

.pnl-detail-body {
  padding: 20px 24px;
  overflow-y: auto;
  max-height: calc(80vh - 70px);
}

.pnl-detail-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.pnl-detail-stat {
  padding: 14px 16px;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-100);
}

.pnl-detail-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.pnl-detail-stat-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text-primary);
}

.pnl-detail-table {
  width: 100%;
  border-collapse: collapse;
}

.pnl-detail-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 2px solid var(--gray-200);
}

.pnl-detail-table th:last-child {
  text-align: right;
}

.pnl-detail-table td {
  font-size: 0.85rem;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--text-primary);
}

.pnl-detail-table td:last-child {
  text-align: right;
  font-weight: 500;
}

.pnl-detail-table tr {
  transition: background 0.15s ease;
}

.pnl-detail-table tbody tr:hover {
  background: var(--gray-50);
}

.pnl-detail-amount {
  font-variant-numeric: tabular-nums;
}

.pnl-detail-total-row td {
  border-top: 2px solid var(--gray-300);
  padding-top: 12px;
}

.pnl-detail-bar-cell {
  width: 80px;
  padding: 10px 12px 10px 4px;
}

.pnl-detail-bar {
  display: block;
  height: 4px;
  background: var(--gray-700);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pnl-detail-section-title {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-100);
}

.pnl-detail-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}

.pnl-detail-type-badge {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--gray-100);
  color: var(--text-secondary);
}

.pnl-detail-type-badge.expense {
  background: var(--gray-200);
  color: var(--text-primary);
}

.pnl-detail-acct-path {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Insights */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Insights sub-navigation (By client | By vendor | By employee) */
.insights-subnav, .insights-subtabs { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.insights-subtab {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
  color: var(--text-secondary); padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.insights-subtab:hover { color: var(--text-primary); }
.insights-subtab.active { color: var(--text-primary); border-bottom-color: var(--gray-900); }
.insights-view { display: none; }
.insights-view.active { display: block; }

/* Expenses-to-cut list */
.ins-cuts { display: flex; flex-direction: column; gap: 10px; }
.ins-cut { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ins-cut-rank { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; background: var(--gray-900); color: var(--white); font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }
.ins-cut-body { flex: 1; min-width: 0; }
.ins-cut-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ins-cut-head strong { font-size: 0.98rem; }
.ins-cut-risk { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border); color: var(--text-secondary); }
.ins-cut-risk.risk-low { background: var(--gray-900); color: var(--white); border-color: var(--gray-900); }
.ins-cut-risk.risk-medium { background: var(--gray-100); color: var(--text-primary); }
.ins-cut-risk.risk-high { background: transparent; color: var(--text-muted); }
.ins-cut-rationale { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.5; margin-top: 5px; }
.ins-cut-meta { font-size: 0.76rem; color: var(--text-muted); margin-top: 6px; }
.ins-cut-savings { flex-shrink: 0; text-align: right; }
.ins-cut-save-amt { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; }
.ins-cut-save-lbl { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

@media (max-width: 640px) {
  .ins-cut { flex-wrap: wrap; }
  .ins-cut-savings { text-align: left; }
}

/* ---- Mobile: directory "lists" become stacked cards (grid feel) ---- */
@media (max-width: 700px) {
  .directory-table, .directory-table tbody { display: block; }
  .directory-table thead { display: none; }
  .directory-table tr {
    display: block; position: relative;
    border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px;
    padding: 14px 16px; background: var(--surface); box-shadow: 0 1px 2px rgba(16, 18, 24, 0.04);
  }
  .directory-table td { display: block; border: none !important; box-shadow: none !important; padding: 1px 0 !important; }
  /* Selection column doesn't belong in a card. */
  .directory-table td.dir-check-col, .directory-table td.dir-actions-col { display: none; }
  /* Name row reads as the card title. */
  .directory-table td:nth-of-type(2) { margin-bottom: 8px; }
  .directory-table .dir-name { font-size: 1.02rem; font-weight: 600; }
  .directory-table .dir-name .dir-avatar { width: 38px; height: 38px; }
  /* Secondary fields sit as compact chips-of-info, not full-height rows. */
  .directory-table td:not(:nth-of-type(2)) { font-size: 0.86rem; color: var(--text-secondary); }
  .directory-table td.matter-empty { padding: 18px 0; }
  /* Row action buttons float top-right of the card. */
  .directory-table tr .dir-actions { display: flex; gap: 6px; position: absolute; top: 12px; right: 12px; padding: 0; }

  /* Users directory: a cleaner card — avatar+name title, email beneath, then
     labeled Role / Client / Last login / Status rows so each value is clear. */
  .users-directory-table td { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 !important; }
  .users-directory-table td[data-label]::before {
    content: attr(data-label); color: var(--text-secondary); font-size: 0.76rem;
    font-weight: 500; flex: 0 0 auto; text-align: left;
  }
  /* Name is the card title (no label), email sits right under it as a subtitle. */
  .users-directory-table td[data-label="Name"] { display: block !important; margin-bottom: 2px; padding-bottom: 0 !important; }
  .users-directory-table td[data-label="Name"]::before { display: none; }
  .users-directory-table td[data-label="Email"] { justify-content: flex-start; padding-top: 0 !important; margin-bottom: 8px; padding-bottom: 10px !important; border-bottom: 1px solid var(--border) !important; }
  .users-directory-table td[data-label="Email"]::before { display: none; }
  .users-directory-table td[data-label="Email"] { font-size: 0.85rem; }
  .users-directory-table .dir-name { font-size: 1.05rem; font-weight: 600; }
  /* Controls (role select, client link, billable switch) align to the right. */
  .users-directory-table .user-role-select,
  .users-directory-table .access-badge,
  .users-directory-table .user-client-link,
  .users-directory-table .bill-switch,
  .users-directory-table .bill-tag,
  .users-directory-table .user-status { margin-left: auto; }
  .users-directory-table td .matter-empty { padding: 0; }

  /* Clients directory: same labeled-card treatment so each value (Type, Status,
     Matters, Terms, Primary contact) reads clearly instead of a bare stack. */
  .clients-directory-table td { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 !important; border: none !important; box-shadow: none !important; }
  .clients-directory-table td[data-label]::before {
    content: attr(data-label); color: var(--text-secondary); font-size: 0.76rem;
    font-weight: 500; flex: 0 0 auto; text-align: left;
  }
  .clients-directory-table td.dir-card-name { display: block !important; margin-bottom: 8px; padding-bottom: 10px !important; border-bottom: 1px solid var(--border) !important; }
  .clients-directory-table td.dir-card-name .dir-name { font-size: 1.05rem; font-weight: 600; }
  .clients-directory-table td.dir-check-col, .clients-directory-table td.dir-actions-col { display: none !important; }
  .clients-directory-table td.matter-empty { padding: 16px 0 !important; }
  .clients-directory-table td .cs-status, .clients-directory-table td .status-pill,
  .clients-directory-table td .terms-pill, .clients-directory-table td .client-cell,
  .clients-directory-table td .client-type-cell, .clients-directory-table td .cselect { margin-left: auto; }
  /* Edit/delete float to the card's top-right corner. */
  .clients-directory-table tr .dir-actions { display: flex; gap: 6px; position: absolute; top: 12px; right: 12px; padding: 0 !important; }
  .clients-directory-table tr .dir-actions::before { display: none; }
  /* Collapsed client card = one row (avatar + name). Tap to expand Type, Status,
     Matters, Terms, Primary contact, and the edit/delete actions. */
  .clients-directory-table tr.client-row:not(.cl-card-open) td[data-label] { display: none !important; }
  .clients-directory-table tr.client-row:not(.cl-card-open) .dir-actions { display: none !important; }
  /* Edit/delete live INSIDE the dropdown (a row at the bottom), not floating. */
  .clients-directory-table tr.client-row.cl-card-open .dir-actions {
    position: static; display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border);
  }
  .clients-directory-table tr.client-row.cl-card-open .dir-actions .dir-btn { width: 40px; height: 40px; }
  .clients-directory-table tr.client-row:not(.cl-card-open) td.dir-card-name {
    margin-bottom: 0; padding-bottom: 0 !important; border-bottom: none !important; padding-right: 26px;
  }
  /* Expand/collapse chevron; hidden once open so edit/delete take the corner. */
  .clients-directory-table tr.client-row::after {
    content: ''; position: absolute; top: 24px; right: 16px; width: 8px; height: 8px;
    border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary);
    transform: rotate(45deg); transition: transform 0.18s ease; pointer-events: none;
  }
  .clients-directory-table tr.client-row.cl-card-open::after { display: none; }
}

.chart-placeholder {
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.chart-placeholder canvas { width: 100% !important; height: 100% !important; }

/* Attorney Rankings */
.attorney-rankings { display: flex; flex-direction: column; gap: 16px; }

.attorney-rank {
  display: flex;
  align-items: center;
  gap: 16px;
}
.attorney-rank.rank-clickable { border-radius: 10px; padding: 4px 8px; margin: 0 -8px; transition: background 0.14s; }
.attorney-rank.rank-clickable:hover { background: var(--gray-100); }
[data-theme="dark"] .attorney-rank.rank-clickable:hover { background: rgba(255, 255, 255, 0.06); }

.rank-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
}

.rank-info { flex: 1; min-width: 0; }
.rank-info strong { display: block; font-size: 0.9rem; }
.rank-info span { font-size: 0.8rem; color: var(--text-secondary); }

.rank-bar {
  width: 120px;
  height: 6px;
  background: var(--gray-100);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.rank-fill {
  height: 100%;
  background: var(--black);
  border-radius: 3px;
}

/* Collection Aging */
.aging-grid { display: flex; flex-direction: column; gap: 16px; }

.aging-item { display: flex; align-items: center; gap: 16px; }

.aging-label {
  min-width: 80px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.aging-value {
  min-width: 80px;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: right;
}

.aging-bar {
  flex: 1;
  height: 8px;
  background: var(--gray-100);
  border-radius: 4px;
  overflow: hidden;
}

.aging-fill { height: 100%; border-radius: 4px; }
.aging-fill.green { background: var(--gray-900); }
.aging-fill.yellow { background: var(--gray-700); }
.aging-fill.orange { background: var(--gray-500); }
.aging-fill.red { background: var(--gray-300); }

/* ============ CLIENTS GRID ============ */

.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.client-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.client-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.client-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}

.client-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
}

.client-type {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.client-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ============ TEAM GRID ============ */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.team-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
}

.team-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 auto 16px;
}

.team-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.team-role {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.team-email {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ============ CALENDAR ============ */

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.calendar-header-cell {
  background: var(--gray-100);
  padding: 10px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.calendar-cell {
  background: var(--white);
  padding: 10px;
  min-height: 100px;
  font-size: 0.85rem;
}

.calendar-cell.other-month { background: var(--gray-50); color: var(--text-muted); }
.calendar-cell.today { background: var(--gray-100); }
/* Click any day to add an event; a faint + appears on hover. */
/* Timesheet page (all-time day rings) */
.tl-filters { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.tl-filter { display: flex; flex-direction: column; gap: 5px; }
.tl-filter label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.tl-filter select { padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-primary); font: inherit; font-size: 0.9rem; min-width: 170px; }
.tl-monthnav { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.tl-monthnav span { font-weight: 600; min-width: 130px; text-align: center; }
.tl-total { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; padding-bottom: 2px; }
.tl-cell { min-height: 96px; display: flex; flex-direction: column; }
.tl-ring-wrap { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; }
.tl-ring { transform: rotate(-90deg); }
.tl-ring-val { position: absolute; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-ring-val.tl-ring-zero { color: var(--text-muted); font-weight: 500; }
@media (max-width: 768px) {
  .tl-filters { gap: 12px; }
  .tl-filter select { min-width: 140px; }
  .tl-monthnav { margin-left: 0; }
  .tl-cell { min-height: 64px; }
  .tl-ring { width: 36px; height: 36px; }
  .tl-ring-val { font-size: 0.62rem; }
}
/* Deadlines page */
.dl-page-group { margin-bottom: 26px; }
.dl-page-group-head { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 10px; }
.dl-page-group-head.danger { color: #dc2626; }
.dl-page-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--surface); }
.dl-page-date { flex: 0 0 auto; min-width: 64px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dl-page-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-page-info strong { font-size: 0.95rem; }
.dl-page-info span { font-size: 0.8rem; color: var(--text-secondary); }
.dl-page-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 3px; }
.dl-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary); }
.dl-chip .dir-avatar-sm { width: 22px; height: 22px; font-size: 0.6rem; }
.dl-meta-matter { font-size: 0.8rem; color: var(--text-muted); }
/* Sortable deadlines table */
.dl-table th.dl-th { cursor: pointer; user-select: none; white-space: nowrap; }
.dl-table th.dl-th:hover { color: var(--text-primary); }
.dl-table th.dl-th.is-sorted { color: var(--text-primary); }
.dl-th-ar { font-size: 0.85em; }
.dl-table td { vertical-align: middle; }
.dl-table .dl-chip { font-size: 0.85rem; color: var(--text-primary); }
.dl-overdue { color: #dc2626; font-weight: 600; }
.dl-page-type { flex: 0 0 auto; font-size: 0.7rem; font-weight: 600; text-transform: capitalize; color: var(--text-muted); border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; }
.dl-page-del { flex: 0 0 auto; background: none; border: none; font-size: 1.3rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 4px; }
.dl-page-del:hover { color: #dc2626; }
.dl-check-col { width: 40px; text-align: center; }
.dl-page-done { background: none; border: none; font-size: 1rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 6px; }
.dl-page-done:hover { color: #16a34a; }
.dl-row.dl-done .dl-title-txt { text-decoration: line-through; color: var(--text-secondary); }
.dl-row.dl-done { opacity: 0.62; }
.dl-row.dl-row-selected > td { background: rgba(17, 17, 17, 0.045); }
[data-theme="dark"] .dl-row.dl-row-selected > td { background: rgba(255, 255, 255, 0.06); }
.cal-assoc-preview { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.88rem; color: var(--text-primary); }
.calendar-cell-add { position: relative; cursor: pointer; transition: background 0.15s; }
.calendar-cell-add:hover { background: var(--gray-100); }
.calendar-cell-plus {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 6px;
  border: none; background: var(--gray-900); color: #fff; font-size: 0.95rem; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity 0.15s; display: grid; place-items: center;
}
.calendar-cell-add:hover .calendar-cell-plus { opacity: 1; }
[data-theme="dark"] .calendar-cell-plus { background: #fff; color: #0a0a0a; }

.calendar-day-num {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.85rem;
}

.calendar-event {
  padding: 2px 6px;
  margin-bottom: 2px;
  border-radius: 4px;
  font-size: 0.7rem;
  background: var(--gray-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-event.urgent { background: var(--gray-200); color: var(--gray-900); }
.calendar-event.hearing { background: var(--gray-100); color: var(--gray-700); }
/* Layer styles: holidays (amber), time logged (green) */
.calendar-event.holiday { background: #fef3e2; color: #9a6a1a; }
.calendar-event.time-log { background: #e7f5ec; color: #1f7a45; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .calendar-event.holiday { background: #3a2e18; color: #e6b566; }
[data-theme="dark"] .calendar-event.time-log { background: #12321f; color: #6cd39a; }

/* Calendar layer toggle chips */
/* Import time drop-zone */
.imp-drop {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 40px 24px; border: 2px dashed var(--border); border-radius: 14px; cursor: pointer;
  background: var(--gray-50, var(--gray-100)); transition: border-color 0.15s, background 0.15s;
}
.imp-drop:hover, .imp-drop-over { border-color: var(--gray-500); background: var(--gray-100); }
.imp-drop-over { border-color: var(--gray-900); }
.imp-drop-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--gray-900); color: #fff; display: grid; place-items: center; }
[data-theme="dark"] .imp-drop-ic { background: #fff; color: #0a0a0a; }
.imp-drop-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }
.imp-drop-sub { font-size: 0.86rem; color: var(--text-secondary); max-width: 380px; line-height: 1.5; }
.imp-drop .btn { margin-top: 4px; }
.imp-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--gray-900); margin: 0 auto; animation: impSpin 0.8s linear infinite; }
[data-theme="dark"] .imp-spinner { border-top-color: #fff; }
/* Import review as a full-screen page (wide, not a cramped modal). */
.modal-overlay.imp-fullpage { padding: 0; align-items: stretch; justify-content: stretch; }
.imp-fullpage .imp-page {
  display: flex; flex-direction: column; width: 100%; height: 100%; max-height: 100vh;
  background: var(--bg, #fff); border-radius: 0;
}
.imp-page-head { display: flex; align-items: flex-start; gap: 16px; padding: 22px 32px 16px; border-bottom: 1px solid var(--border); }
.imp-page-head-main h2 { margin: 0 0 4px; font-size: 1.4rem; }
.imp-page-head-main p { margin: 0; max-width: 760px; }
.imp-page-close { margin-left: auto; font-size: 1.6rem; line-height: 1; background: none; border: none; cursor: pointer; color: var(--text-secondary); }
.imp-page-body-pad { padding: 14px 32px 0; }
.imp-fullpage .imp-bulk { margin: 14px 32px 0; }
.imp-page-body { flex: 1; overflow: auto; padding: 14px 32px 20px; }
.imp-page-body .imp-table { width: 100%; }
.imp-page-body .imp-table th { position: sticky; top: 0; background: var(--bg, #fff); z-index: 2; }
/* Let the wide columns breathe on a full page. */
.imp-page-body .imp-table td input[type="text"], .imp-page-body .imp-table td input[type="date"], .imp-page-body .imp-table td select { width: 100%; min-width: 0; }
.imp-page-body .imp-table td:nth-child(8) { min-width: 260px; } /* Description */
.imp-page-body .imp-table td:nth-child(5) { min-width: 200px; } /* Matter */
.imp-page-body .imp-table td:nth-child(4) { min-width: 160px; } /* Client */
.imp-page-foot { display: flex; align-items: center; gap: 10px; padding: 14px 32px; border-top: 1px solid var(--border); background: var(--bg, #fff); }
@media (max-width: 640px) {
  .imp-page-head, .imp-page-body, .imp-page-foot { padding-left: 16px; padding-right: 16px; }
  .imp-fullpage .imp-bulk { margin-left: 16px; margin-right: 16px; }
}
/* Person / client name never breaks to a second line (reads as "doubled up"). */
.tl-nm { white-space: nowrap; }
/* Time Log description: one-line ellipsis by default; the header "Wrap text"
   toggle (body.tl-wrap) lets long descriptions wrap. */
.time-log-table .tl-desc-cell { max-width: 360px; }
body:not(.tl-wrap) .time-log-table .tl-desc-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.tl-wrap .time-log-table .tl-desc-cell { white-space: normal; }
#tl-wrap-toggle.is-active { background: var(--gray-900, #111); color: #fff; border-color: var(--gray-900, #111); }
.imp-prog { height: 9px; background: var(--gray-100, #eee); border-radius: 999px; overflow: hidden; max-width: 340px; margin: 0 auto; }
.imp-prog-bar { height: 100%; background: var(--gray-900, #111); border-radius: 999px; transition: width 0.3s ease; }
[data-theme="dark"] .imp-prog-bar { background: #fff; }
.imp-prog-pct { margin-top: 12px; font-size: 0.95rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.imp-check-col { width: 34px; text-align: center; }
.imp-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--gray-100); }
.imp-bulk .dir-bulk-count { margin-right: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.imp-bulk-field { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-secondary); }
.imp-bulk-field select, .imp-bulk-field input { font: inherit; font-size: 0.85rem; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-primary); max-width: 200px; }
[data-theme="dark"] .imp-bulk { background: rgba(255,255,255,0.05); }
.imp-row.imp-row-sel > td { background: var(--gray-100); }
[data-theme="dark"] .imp-row.imp-row-sel > td { background: rgba(255,255,255,0.06); }
.imp-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; color: var(--text-muted); font-size: 0.8rem; }
.imp-or::before, .imp-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.imp-paste { width: 100%; font: inherit; font-size: 0.9rem; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-primary); resize: vertical; }
.imp-paste-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
@keyframes impSpin { to { transform: rotate(360deg); } }

/* Circular row selectors (Clients, Time Log, Matters) — replaces the default
   square checkbox with a filled circle + check. */
.circle-check, .cl-select, #cl-select-all, .tl-select, #tl-select-all, .mt-select, #mt-select-all {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid var(--gray-400); background: var(--surface);
  cursor: pointer; position: relative; flex: 0 0 auto; margin: 0; vertical-align: middle;
  transition: background 0.14s, border-color 0.14s;
}
.circle-check:hover, .cl-select:hover, .tl-select:hover { border-color: var(--gray-600); }
.circle-check:checked, .cl-select:checked, #cl-select-all:checked, .tl-select:checked, #tl-select-all:checked, .mt-select:checked, #mt-select-all:checked {
  background: var(--gray-900); border-color: var(--gray-900);
}
.circle-check:checked::after, .cl-select:checked::after, #cl-select-all:checked::after, .tl-select:checked::after, #tl-select-all:checked::after, .mt-select:checked::after, #mt-select-all:checked::after {
  content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
[data-theme="dark"] .circle-check:checked, [data-theme="dark"] .cl-select:checked, [data-theme="dark"] #cl-select-all:checked, [data-theme="dark"] .tl-select:checked, [data-theme="dark"] #tl-select-all:checked { background: #fff; border-color: #fff; }
[data-theme="dark"] .circle-check:checked::after, [data-theme="dark"] .cl-select:checked::after, [data-theme="dark"] .tl-select:checked::after, [data-theme="dark"] #tl-select-all:checked::after { border-color: #0a0a0a; }
.tl-check-col { width: 42px; }

/* Glass search input (Time Log) */
.glass-input {
  display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 12px; margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.55); border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  color: var(--text-secondary);
}
.glass-input input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: 0.95rem; color: var(--text-primary); }
.glass-input input::placeholder { color: var(--text-secondary); }
[data-theme="dark"] .glass-input { background: rgba(255, 255, 255, 0.06); }

/* Time Log bulk-action bar */
/* Selection actions float up as a pill anchored to the bottom-center of the
   viewport, so they stay reachable no matter where you are in a long list. */
.tl-bulkbar {
  display: flex; align-items: center; gap: 10px;
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 1200; margin: 0; width: max-content; max-width: calc(100vw - 24px);
  padding: 11px 16px; border-radius: 999px;
  background: var(--surface, #fff); border: 1px solid var(--border);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.10);
  flex-wrap: nowrap; overflow-x: auto;
  animation: tlBulkUp 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.tl-bulkbar .dir-bulk-count { margin-right: 4px; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; }
.tl-bulkbar .btn { white-space: nowrap; }
[data-theme="dark"] .tl-bulkbar { background: #1c1f26; border-color: rgba(255, 255, 255, 0.12); }
@keyframes tlBulkUp { from { opacity: 0; transform: translate(-50%, 22px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 640px) { .tl-bulkbar { bottom: 14px; gap: 7px; padding: 9px 12px; } }

/* The collapsed-nav W mark is a black-on-transparent PNG; invert it to white
   so it stays visible on the dark sidebar. */
[data-theme="dark"] .sidebar-mark { filter: brightness(0) invert(1); }

/* Selected time-log / client rows get a subtle wash so the whole row reads as picked. */
.time-row-edit.tl-row-selected > td,
#documents-list tr.tl-row-selected > td,
.client-row.cl-row-selected > td { background: rgba(17, 17, 17, 0.045); }
[data-theme="dark"] .time-row-edit.tl-row-selected > td,
[data-theme="dark"] #documents-list tr.tl-row-selected > td,
[data-theme="dark"] .client-row.cl-row-selected > td { background: rgba(255, 255, 255, 0.06); }

/* ---- Batch-edit as a bottom notification popup ---- */
/* No dimming backdrop — it floats up from the bottom like a toast and lets you
   keep the list in view. Clicks pass through the empty area to the page. */
#time-batch-modal.modal-overlay {
  align-items: flex-end;
  justify-content: center;
  background: transparent;
  padding: 0 0 24px;
  pointer-events: none;
}
#time-batch-modal .modal {
  pointer-events: auto;
  width: calc(100% - 40px);
  max-width: 560px;
  max-height: 80vh;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
#time-batch-modal.open .modal { transform: translateY(0); opacity: 1; }
[data-theme="dark"] #time-batch-modal .modal { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4); }
@media (max-width: 640px) { #time-batch-modal .modal { width: calc(100% - 24px); } }

/* Time Log: on phones the wide table becomes one stacked card per entry
   (label : value rows) instead of a horizontal-scroll table. */
@media (max-width: 700px) {
  .time-log-table, .time-log-table tbody { display: block; width: 100%; }
  .time-log-table thead { display: none; }
  .time-log-table tr {
    display: block; position: relative;
    border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px; background: var(--surface);
  }
  .time-log-table td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 5px 0 !important; border: none !important; box-shadow: none !important;
    text-align: right !important; white-space: normal !important; font-size: 0.9rem;
  }
  .time-log-table td::before {
    content: attr(data-label); color: var(--text-secondary);
    font-size: 0.78rem; font-weight: 500; flex: 0 0 auto; text-align: left;
  }
  .time-log-table td .client-cell { justify-content: flex-end; text-align: right; }
  /* Date leads as a small header; hours reads as the emphasised figure. */
  .time-log-table td[data-label="Date"] { font-weight: 600; padding-top: 0 !important; }
  .time-log-table td[data-label="Hours"] { font-weight: 700; }
  .time-log-table td[data-label="Description"]:empty,
  .time-log-table td[data-label="Activity"]:empty { display: none; }
  .time-log-table td.dir-actions {
    position: absolute; top: 8px; right: 10px; padding: 0 !important; gap: 4px;
  }
  .time-log-table td.dir-actions::before { display: none; }
  /* On phones the whole card is the tap target for selection (see the row's
     onclick), so the little select circle — which collided with the Date label —
     is dropped. Selection is shown by a glowing stroke on the card instead. */
  .time-log-table td.tl-check-col { display: none; }
  .time-log-table td[data-label="Date"] { padding-right: 60px !important; justify-content: flex-start; }
  .time-log-table tr.tl-row-selected {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 1.5px var(--text-primary), 0 0 16px rgba(17, 17, 17, 0.16);
  }
  [data-theme="dark"] .time-log-table tr.tl-row-selected {
    border-color: #fff;
    box-shadow: 0 0 0 1.5px #fff, 0 0 18px rgba(255, 255, 255, 0.26);
  }
  /* The row-wash on individual cells reads as patchy on a card — the glow is
     enough on mobile. */
  .time-log-table tr.tl-row-selected > td { background: transparent !important; }
  /* Collapsed = ONE compact row: Date · Team · Client · Time. Tap to expand for
     matter, activity, status, description, and the edit/delete actions. */
  .time-log-table tr:not(.tl-expanded):not(.dir-edit-row) {
    display: flex; align-items: center; gap: 9px; flex-wrap: nowrap;
    padding: 13px 30px 13px 14px;
  }
  .time-log-table tr:not(.tl-expanded):not(.dir-edit-row) td[data-label="Matter"],
  .time-log-table tr:not(.tl-expanded):not(.dir-edit-row) td[data-label="Activity"],
  .time-log-table tr:not(.tl-expanded):not(.dir-edit-row) td[data-label="Status"],
  .time-log-table tr:not(.tl-expanded):not(.dir-edit-row) td[data-label="Description"],
  .time-log-table tr:not(.tl-expanded):not(.dir-edit-row) td.dir-actions { display: none; }
  /* Visible cells become inline chips: no label, no full width, same body font. */
  .time-log-table tr:not(.tl-expanded):not(.dir-edit-row) td {
    display: inline-flex; align-items: center; width: auto; flex: 0 0 auto;
    padding: 0 !important; border: 0 !important; text-align: left !important;
    font-size: 0.9rem; font-weight: 400; white-space: nowrap;
  }
  .time-log-table tr:not(.tl-expanded):not(.dir-edit-row) td::before { display: none; }
  /* Date: short "Mon D" form (the full datetime is for the expanded view). */
  .time-log-table tr:not(.tl-expanded) .tl-dt-full { display: none; }
  .time-log-table .tl-dt-short { display: none; }
  .time-log-table tr:not(.tl-expanded) .tl-dt-short { display: inline; }
  .time-log-table tr:not(.tl-expanded):not(.dir-edit-row) td[data-label="Date"] { color: var(--text-secondary); }
  /* Team = avatar only (name shows on expand). */
  .time-log-table tr:not(.tl-expanded):not(.dir-edit-row) td[data-label="Member"] .client-cell { gap: 0; justify-content: flex-start; }
  .time-log-table tr:not(.tl-expanded):not(.dir-edit-row) td[data-label="Member"] .tl-nm { display: none; }
  /* Client avatar + name flexes to fill, pushing Time to the far right. */
  .time-log-table tr:not(.tl-expanded):not(.dir-edit-row) td[data-label="Client"] { flex: 1 1 auto; min-width: 0; }
  .time-log-table tr:not(.tl-expanded):not(.dir-edit-row) td[data-label="Client"] .client-cell { min-width: 0; justify-content: flex-start; text-align: left; }
  .time-log-table tr:not(.tl-expanded):not(.dir-edit-row) td[data-label="Client"] .tl-nm { overflow: hidden; text-overflow: ellipsis; }
  .time-log-table tr:not(.tl-expanded):not(.dir-edit-row) td[data-label="Hours"] { margin-left: auto; color: var(--text-primary); }
  /* Expand/collapse chevron. Collapsed: vertically centered on the single row.
     Expanded: hidden so the edit/delete buttons take the top-right corner. */
  .time-log-table tr:not(.dir-edit-row)::after {
    content: ''; position: absolute; top: 50%; margin-top: -5px; right: 13px; width: 7px; height: 7px;
    border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary);
    transform: rotate(45deg); transition: transform 0.18s ease; pointer-events: none;
  }
  .time-log-table tr.tl-expanded:not(.dir-edit-row)::after { display: none; }
}

/* Finance → Rates tab: retainer rate-card table */
.rates-table-wrap { overflow-x: auto; }
.rates-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rates-table th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); font-weight: 600; text-align: right; padding: 0 10px 10px; white-space: nowrap; border-bottom: 1.5px solid var(--text-primary); }
.rates-table th:nth-child(1), .rates-table th:nth-child(2), .rates-table th:nth-child(3) { text-align: left; }
.rates-table td { padding: 10px; font-size: 0.86rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); vertical-align: top; }
.rates-table td:nth-child(2), .rates-table td:nth-child(3) { text-align: left; color: var(--text-secondary); }
.rates-table td.rates-opt { text-align: left; font-weight: 700; color: var(--text-primary); }
.rates-table td.rates-mo { font-weight: 700; color: var(--text-primary); }
.rates-table tr.rates-tier-start td { border-top: 1.5px solid var(--border); }
.rates-table tbody tr:first-child td { border-top: none; }
.rates-disc { display: block; font-size: 0.7rem; color: var(--text-secondary); margin-top: 2px; }
.rates-note { margin: 14px 0 0; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }

/* Non-billable ("No charge") invoice line items */
.nocharge-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: var(--gray-100); color: var(--text-secondary); white-space: nowrap; }
.inv-line-nocharge td { color: var(--text-secondary); }
[data-theme="dark"] .nocharge-tag { background: #1e1e1e; color: #b5b5b5; }

/* ============ COMMAND PALETTE (⌘K) ============ */
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 900; display: none;
  background: rgba(15, 17, 22, 0.42); backdrop-filter: blur(3px);
  align-items: flex-start; justify-content: center; padding: 12vh 16px 16px;
}
.cmdk-overlay.open { display: flex; animation: popFade 0.14s ease; }
.cmdk {
  width: min(600px, 100%); max-height: 62vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 30px 70px rgba(16, 18, 24, 0.34); overflow: hidden;
}
.cmdk-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.cmdk-head input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: 1rem; color: var(--text-primary); }
.cmdk-esc { font-size: 0.7rem; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; background: var(--gray-100); }
.cmdk-results { overflow-y: auto; padding: 8px; }
.cmdk-empty { padding: 22px; text-align: center; color: var(--text-secondary); font-size: 0.9rem; }
.cmdk-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border: none; background: none; border-radius: 10px; cursor: pointer;
}
.cmdk-item.active { background: var(--gray-100); }
[data-theme="dark"] .cmdk-item.active { background: rgba(255, 255, 255, 0.07); }
.cmdk-av { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--gray-900); color: #fff; font-size: 0.7rem; font-weight: 700; background-size: cover; background-position: center; }
[data-theme="dark"] .cmdk-av-ic { background: #fff; color: #0a0a0a; }
.cmdk-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmdk-item-label { font-size: 0.92rem; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item-sub { font-size: 0.76rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item-type { flex: 0 0 auto; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }

/* Terms pill in the clients table */
.terms-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 500; white-space: nowrap; background: var(--gray-100); color: var(--text-secondary); border: 1px solid var(--border); }
.terms-pill.terms-retainer { background: #eef2ff; color: #4338ca; border-color: #dfe4ff; }
.terms-pill.terms-hourly { background: #e7f5ec; color: #1f7a45; border-color: #d3ecdd; }
.terms-pill.terms-fixed, .terms-pill.terms-project { background: #fef3e2; color: #9a6a1a; border-color: #f6e4c8; }
[data-theme="dark"] .terms-pill { background: #1e1e1e; color: #cfcfcf; }
[data-theme="dark"] .terms-pill.terms-retainer { background: #23204a; color: #b6b0ff; border-color: #322c66; }
[data-theme="dark"] .terms-pill.terms-hourly { background: #12321f; color: #6cd39a; border-color: #1c4a30; }
[data-theme="dark"] .terms-pill.terms-fixed, [data-theme="dark"] .terms-pill.terms-project { background: #3a2e18; color: #e6b566; border-color: #4d3d1f; }

/* Terms page: subtab toolbar + "Terms by type" cards. */
.terms-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.terms-toolbar-right { display: flex; align-items: center; gap: 10px; }
.term-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.term-type-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.ttc-head { display: flex; align-items: center; justify-content: space-between; }
.ttc-actions { display: flex; gap: 4px; }
.ttc-actions .dir-btn { width: 30px; height: 30px; }
.ttc-name { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; margin: 4px 0 0; color: var(--text-primary); }
.ttc-rate { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ttc-desc { font-size: 0.82rem; color: var(--text-secondary); margin: 0; line-height: 1.45; }
.ttc-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-secondary); }
.tt-kind-fields { border-top: 1px dashed var(--border); padding-top: 12px; margin-top: 4px; }
/* Terms by type — grouped into Hourly / Fixed / Retainer sections. */
.term-section { margin-bottom: 30px; }
.term-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.term-section-head h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.term-section-head p { margin: 3px 0 0; font-size: 0.84rem; color: var(--text-secondary); max-width: 560px; }
.term-ref { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--gray-100); }
[data-theme="dark"] .term-ref { background: rgba(255,255,255,0.03); }
.term-ref-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--text-secondary); margin-bottom: 12px; }
.term-ref-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.term-ref-head-row .btn { text-transform: none; letter-spacing: 0; }
.term-ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.term-ref-card { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.term-ref-label { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.term-ref-amt { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.term-ref-desc { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.35; }
/* Team rate card inside Terms. */
.term-rate-list { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.term-rate-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.term-rate-row:last-child { border-bottom: none; }
.term-rate-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.term-rate-title { font-size: 0.8rem; color: var(--text-secondary); }
.term-rate-row .term-rate-input { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; color: var(--text-secondary); }
.term-rate-input input { width: 82px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text-primary); font-size: 0.9rem; text-align: right; font-variant-numeric: tabular-nums; }
.term-rate-input input:focus { outline: none; border-color: var(--text-primary); }
.term-rate-val { margin-left: auto; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.cal-layers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cal-layer-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: 0.82rem; color: var(--text-secondary); cursor: pointer; transition: all 0.14s;
}
.cal-layer-chip:hover { border-color: var(--gray-500); }
.cal-layer-chip .cal-layer-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-400); flex: 0 0 auto; }
.cal-layer-chip.active { color: var(--text-primary); border-color: var(--gray-900); background: var(--gray-100); }
.cal-layer-deadlines.active .cal-layer-dot { background: var(--gray-700); }
.cal-layer-time.active .cal-layer-dot { background: #1f7a45; }
.cal-layer-holidays.active .cal-layer-dot { background: #c98a2a; }
.cal-layer-chip:not(.active) { opacity: 0.6; }
[data-theme="dark"] .cal-layer-chip.active { background: #1e1e1e; border-color: #e5e5e5; }

/* ============ MODALS ============ */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open { display: flex; }
/* The time-import overlay is toggled with `.active` (its own dynamic markup),
   so it needs a visibility rule too. */
.modal-overlay.active { display: flex; }

.modal {
  background: var(--white);
  border-radius: var(--radius);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}

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

.modal-header h3 { font-size: 1.1rem; }

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  line-height: 1;
}

.modal-body { padding: 24px; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

/* ============ FORMS ============ */

.form-group { margin-bottom: 16px; }

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  background: var(--white);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gray-400);
}

.form-group textarea { resize: vertical; }

/* Upload Zone */
.upload-zone {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: 16px;
  transition: all 0.2s;
}

.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--black);
  background: var(--gray-50);
}

.upload-zone svg { margin-bottom: 12px; color: var(--gray-400); }

/* ============ RESPONSIVE ============ */

@media (max-width: 1024px) {
  .dashboard-sections { grid-template-columns: 1fr; }
  .insights-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .home-links { grid-template-columns: 1fr; }
  .home-greeting { font-size: 1.6rem; }
}

/* iOS auto-zooms when you focus an input whose EFFECTIVE font-size is < 16px.
   Because the whole page is scaled by `html { zoom: 0.9 }`, a 16px control renders
   at 14.4px and still trips the zoom — so the floor is 18px (× 0.9 = 16.2px ≥ 16).
   !important so it also beats smaller per-component sizes (search bars, the Log
   Time drawer's description box, etc.) without disabling pinch-to-zoom. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea, .cselect-trigger { font-size: 18px !important; }
  /* Shrink the Log Time DROPDOWN labels (custom widgets — they can't trigger
     iOS focus-zoom) so they match their option list and don't read oversized.
     The native fields you TYPE into (Hours, Description) must keep the 16px-
     effective floor from the rule above, or iOS zooms the page on focus. */
  /* With focus-zoom disabled via the viewport, every drawer field can share one
     small size — dropdowns, Hours, Date, and the Description box all match. */
  .log-time-pop .time-fields .cselect-btn,
  .log-time-pop .time-fields .cselect-label,
  .log-time-pop #time-hours,
  .log-time-pop #time-date,
  .log-time-pop #time-desc { font-size: 0.9rem !important; }
  /* Search boxes read smaller now that the viewport blocks focus-zoom (no need
     for the 18px floor on them). */
  .search-input,
  .clerk-bar-form input,
  .tl-search input,
  .glass-input input,
  .cmdk-head input { font-size: 0.95rem !important; }
}
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
  }

  .sidebar-close { display: block; }
  .hamburger { display: block; }

  /* The admin "who has access" chip reveals on :hover. On touch that turns the
     first tap into a hover (so nav needs a second tap) — hide it on mobile. */
  .nav-item .nav-perm { display: none !important; }
  /* Opened mobile drawer shows just the logo (+ close) — no collapse hamburger.
     !important because the base .sidebar-collapse-btn rule appears later in the
     source and media queries add no specificity, so it would otherwise win. */
  .sidebar-collapse-btn { display: none !important; }

  .main-content { margin-left: 0; }

  .page-container { padding: 20px 16px; }
  .topbar { padding: 0 16px; }

  .receivables-grid { grid-template-columns: 1fr; gap: 16px; }
  .summary-grid { grid-template-columns: 1fr; }
  .summary-grid.three-col { grid-template-columns: 1fr; }

  .finance-card { padding: 20px; }

  .finance-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .calendar-cell { min-height: 60px; padding: 6px; }
  .calendar-event { font-size: 0.6rem; }

  .page-toolbar { flex-direction: column; align-items: stretch; }

  .table { font-size: 0.8rem; }
  .table th, .table td { padding: 10px 12px; }
}

@media (max-width: 480px) {
  .dashboard-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-card { padding: 16px; }
  .stat-value { font-size: 1.4rem; }
  .clients-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
}

/* ============ DARK MODE ============ */

[data-theme="dark"] {
  --bg: #0a0a0a;
  --surface: #141414;
  --white: #141414;
  --off-white: #0a0a0a;
  --warm-white: #1a1a1a;
  --gray-50: #1a1a1a;
  --gray-100: #1e1e1e;
  --gray-200: #2a2a2a;
  --gray-300: #3a3a3a;
  --gray-400: #666666;
  --gray-500: #888888;
  --gray-600: #aaaaaa;
  --gray-700: #333333;
  --gray-800: #1e1e1e;
  --gray-900: #e5e5e5;
  --border: #2a2a2a;
  --text-primary: #e5e5e5;
  --text-secondary: #888888;
  --text-muted: #666666;
  --black: #0a0a0a;
}

[data-theme="dark"] .sidebar {
  background: #0a0a0a;
}

[data-theme="dark"] .sidebar-header {
  border-bottom-color: #1e1e1e;
}

[data-theme="dark"] .sidebar-footer {
  border-top-color: #1e1e1e;
}

[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .nav-item.active {
  background: #1e1e1e;
}

[data-theme="dark"] .login-screen {
  background: #0a0a0a;
}

[data-theme="dark"] .btn-primary {
  background: #e5e5e5;
  color: #0a0a0a;
  border-color: #e5e5e5;
}

[data-theme="dark"] .btn-primary:hover {
  background: #d4d4d4;
}

[data-theme="dark"] .topbar-avatar,
[data-theme="dark"] .client-avatar,
[data-theme="dark"] .team-avatar {
  background: #e5e5e5;
  color: #0a0a0a;
}

[data-theme="dark"] .sidebar-user-avatar {
  background: #333333;
}

[data-theme="dark"] .sync-btn {
  background: #1e1e1e;
  border-color: #2a2a2a;
  color: #e5e5e5;
}

[data-theme="dark"] .sync-btn:hover {
  background: #2a2a2a;
}

[data-theme="dark"] .theme-toggle {
  background: #1e1e1e;
  border-color: #2a2a2a;
  color: #e5e5e5;
}

[data-theme="dark"] .theme-toggle:hover {
  background: #2a2a2a;
}

[data-theme="dark"] .badge-active { background: #2a2a2a; color: #e5e5e5; }
[data-theme="dark"] .badge-pending { background: #2a2a2a; color: #888888; }
[data-theme="dark"] .badge-completed { background: #1e1e1e; color: #666666; }

/* ============================================================
   REDESIGN — light navigation rail + dark content, modern type
   ============================================================ */

body { letter-spacing: -0.011em; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; font-weight: 600; }

/* ---- Light content area (everything light) ---- */
.main-content { background: var(--bg); color: var(--text-primary); }

/* ---- Light navigation rail ---- */
.sidebar {
  background: #ffffff;
  color: #15151a;
  border-right: 1px solid #e6e6e9;
}
.sidebar-logo { filter: none; height: 26px; }
.sidebar-mark { filter: none; }
.sidebar-header { border-bottom-color: #eef0f2; }
.sidebar-footer { border-top-color: #eef0f2; }

.sidebar .nav-item { color: #54545c; font-weight: 500; }
.sidebar .nav-item:hover { color: #111; background: #f3f3f5; }
.sidebar .nav-item.active { color: #fff; background: #111; font-weight: 600; }
.sidebar .nav-dropdown-menu .nav-item { color: #7a7a82; }
.sidebar .nav-dropdown-menu .nav-item:hover { color: #111; background: #f3f3f5; }

.sidebar-user:hover { background: #f3f3f5; }
.sidebar-user-avatar { background: #111; color: #fff; }
.sidebar-user-name { color: #15151a; }
.sidebar-user-role { color: #9a9aa2; }
.sidebar-icon-btn { color: #8a8a92; }
.sidebar-icon-btn:hover { color: #111; background: #f0f0f2; }
.sidebar-close { color: #8a8a92; }

/* ---- Online users ---- */
.sidebar-online { padding: 14px 12px; border-top: 1px solid #eef0f2; }
.online-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #8a8a92; margin-bottom: 10px;
}
.online-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.online-list { display: flex; flex-direction: column; gap: 2px; }
.online-user { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; }
.online-user:hover { background: #f3f3f5; }
.online-avatar {
  position: relative; width: 26px; height: 26px; border-radius: 50%;
  background: #15151a; color: #fff; font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.online-avatar::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e; border: 2px solid #fff;
}
.online-name { font-size: 0.8rem; color: #15151a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Splash screen ---- */
.splash-screen {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; background: #0d0d0f;
}
.splash-content { display: flex; flex-direction: column; align-items: center; gap: 28px; animation: splashIn 0.6s ease; }
.splash-logo { height: 54px; width: auto; object-fit: contain; filter: invert(1) brightness(2); }
.splash-loader { width: 160px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.splash-bar { width: 40%; height: 100%; border-radius: 3px; background: #fff; animation: splashBar 1.3s ease-in-out infinite; }
.splash-screen.hide { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
@keyframes splashBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }
@keyframes splashIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Matters: member multi-select (modal is light) ---- */
.member-select {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px;
}
.member-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.member-option:hover { background: var(--gray-100); }
.member-option.selected { background: var(--gray-100); }
.member-option .mo-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--black); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 0.66rem; font-weight: 700; flex-shrink: 0;
}
.member-option .mo-info { display: flex; flex-direction: column; min-width: 0; }
.member-option .mo-name { font-size: 0.85rem; font-weight: 500; }
.member-option .mo-role { font-size: 0.72rem; color: var(--text-secondary); }
.member-option .mo-check { margin-left: auto; color: var(--black); opacity: 0; flex-shrink: 0; }
.member-option.selected .mo-check { opacity: 1; }

/* ---- Matter detail dashboard ---- */
.matter-detail-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px;
  background: none; border: none; color: var(--text-secondary);
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; cursor: pointer;
}
.matter-detail-back:hover { color: var(--text-primary); }

.matter-detail-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px;
  padding: 24px; margin-bottom: 24px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
}
.matter-detail-title { font-size: 1.5rem; }
.matter-detail-sub { color: var(--text-secondary); font-size: 0.9rem; margin-top: 4px; }
.matter-detail-members { display: flex; gap: 6px; margin-left: auto; }
.mdm-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--black); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700;
  border: 2px solid var(--white);
}
/* Photo-backed avatars: always fill the circle without distortion (square + cover). */
.mdm-avatar.has-photo, .dir-avatar.has-photo, .assign-avatar[style*="url"], .online-avatar.has-photo {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  color: transparent; text-indent: -9999px;
}
/* Clients page header: category tabs (left) + Show-by-matter toggle (right) on one row */
.dir-header { display: flex; align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
/* The view dropdown is a compact, left-aligned control (not full width). */
.dir-header .cselect { width: auto; min-width: 210px; flex: 0 0 auto; }
/* "Show by matter" toggle button, sized to match the dropdown beside it. */
.dir-matter-toggle {
  padding: 10px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-primary); font-family: var(--font-body); font-size: 0.9rem; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.dir-matter-toggle:hover { border-color: var(--gray-400); }
.dir-matter-toggle.active { background: var(--gray-900); color: var(--white); border-color: var(--gray-900); }
.dir-matter-toggle.active::before { content: '✓'; margin-right: 7px; font-weight: 700; }
[data-theme="dark"] .dir-matter-toggle.active { background: #e5e5e5; color: #0a0a0a; border-color: #e5e5e5; }

/* Assigned-team groups (WADR team + client's own team) */
.team-group + .team-group { margin-top: 26px; }
.team-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.team-group-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin: 0; }
.contact-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.contact-add-input { flex: 1 1 180px; min-width: 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 0.88rem; background: var(--surface); color: var(--text-primary); }
.contact-add-input:focus { outline: none; border-color: var(--gray-400); }

/* Billable flag: tag (read-only) + compact switch (admin) */
.bill-tag { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); }
.bill-tag.is-billable { color: #15803d; }
.bill-switch { display: inline-flex; align-items: center; cursor: pointer; }
.bill-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.bill-switch .switch-track { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--gray-300); transition: background 0.18s ease; flex: 0 0 auto; }
.bill-switch .switch-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.18s ease; }
.bill-switch input:checked + .switch-track { background: #16a34a; }
.bill-switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); }

.matter-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.matter-grid .card.span-2 { grid-column: 1 / -1; }
.matter-stat-row { display: flex; gap: 24px; flex-wrap: wrap; }
.matter-stat .stat-value { font-size: 1.4rem; }
.matter-empty { color: var(--text-muted); font-size: 0.85rem; padding: 8px 0; }

@media (max-width: 600px) {
  .matter-detail-members { margin-left: 0; }
}

.matter-row-avatars { display: flex; gap: 4px; }
.matter-row-avatars .mdm-avatar { width: 26px; height: 26px; font-size: 0.6rem; }
.matter-row { cursor: pointer; }

/* Link/button-styled cells inside the Matters table */
.cell-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; color: var(--text-primary); text-align: left;
  border-radius: var(--radius-xs);
}
.matter-cell-link { font-weight: 600; }
.cell-link .cell-link-text,
.matter-cell-link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s ease; }
.cell-link:hover .cell-link-text,
.matter-cell-link:hover { text-decoration-color: currentColor; }
.client-cell { display: inline-flex; align-items: center; gap: 10px; }
.dir-avatar-sm { width: 26px; height: 26px; font-size: .62rem; }
.matter-doc-row, .matter-contact-row {
  padding: 10px 0; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.matter-doc-row:last-child, .matter-contact-row:last-child { border-bottom: none; }
.matter-grid .stat-label {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 4px;
}

/* ---- Matter dashboard: inline add forms ---- */
.matter-add-toggle {
  background: none; border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: 999px; padding: 4px 12px; font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.matter-add-toggle:hover { color: var(--text-primary); border-color: var(--gray-400); }
.matter-add-form { display: none; flex-direction: column; gap: 8px; margin: 14px 0; }
.matter-add-form.open { display: flex; }
.matter-add-form .maf-row { display: flex; gap: 8px; align-items: center; }
.matter-add-form .maf-row input, .matter-add-form .maf-row select { flex: 1; }
.matter-add-form input, .matter-add-form select {
  width: 100%; padding: 9px 12px; background: var(--white); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-primary); font-family: var(--font-body); font-size: 0.85rem; outline: none;
}
.matter-add-form input::placeholder { color: var(--text-muted); }
.matter-add-form input:focus, .matter-add-form select:focus { border-color: var(--gray-400); }
.matter-add-form .btn-sm { white-space: nowrap; }

/* ============================================================
   MOBILE PASS — platform
   ============================================================ */
@media (max-width: 768px) {
  /* The html{zoom:0.9} density hack makes mobile Safari lay the page out against
     a wider-than-viewport canvas, so the screen drifts horizontally and body's
     overflow-x:hidden can't contain it (the overflow is at the <html> level).
     Drop the zoom on phones and clamp horizontal overflow at the root. */
  html { zoom: 1; overflow-x: hidden; max-width: 100%; }
  body { overflow-x: hidden; max-width: 100%; }

  .topbar { padding: 0 16px; gap: 8px; }
  .topbar-title { font-size: 1.05rem; }
  /* Keep the whole action cluster on one line; truncate the sync pill first. */
  .topbar-actions { gap: 8px; min-width: 0; }
  .sync-status { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Wide tables scroll inside their card instead of overflowing the page */
  .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 16px; }
  .table th, .table td { white-space: nowrap; }
  .finance-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Form rows stack instead of overflowing */
  .maf-row, .time-row { flex-wrap: wrap; }
  .maf-row > .form-group, .time-row > .form-group { min-width: 0; flex: 1 1 160px; }
  input, select, textarea { max-width: 100%; }

  /* Invoice document: stack + let its wide table scroll */
  .invoice-paper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .inv-totals { width: auto; margin-left: 0; }
  .inv-ret-terms { grid-template-columns: 1fr 1fr; }

  /* Finance tabs scroll horizontally instead of wrapping */
  /* Swap the overflowing tab row for a dropdown on phones. The #page-finance
     prefix outranks the later non-media `.finance-tabs { display:flex }` rule. */
  #page-finance .finance-tabs { display: none; }
  #page-finance .finance-tab-select { display: block; }

  /* P&L statement (monthly view is wide) scrolls horizontally */
  .pnl-accordion { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Modals get breathing room */
  .modal-overlay { padding: 16px; }
  .modal { max-height: 86vh; }

  .matter-detail-header { gap: 12px; }
  .matter-detail-members { margin-left: 0; }
}

@media (max-width: 480px) {
  .home-greeting { font-size: 1.5rem; }
  .matter-add-form .maf-row { flex-wrap: wrap; }
  .toggle-group { flex-wrap: wrap; }
  /* Not enough room for the "Updated …" pill next to the title + actions. */
  .sync-status { display: none; }
  .page-container { padding: 16px 12px; }
}

/* ---- Context dropzone ---- */
#context-view { white-space: pre-wrap; }
.matter-dropzone {
  margin-top: 16px; border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
  padding: 22px; text-align: center; color: var(--text-secondary); cursor: pointer; transition: all 0.15s;
}
.matter-dropzone:hover { border-color: var(--gray-400); background: var(--gray-50); }
.matter-dropzone.dragover { border-color: var(--black); background: var(--gray-100); color: var(--text-primary); }
.matter-dropzone svg { color: var(--text-muted); margin-bottom: 4px; }
.matter-dropzone p { font-size: 0.85rem; }
.matter-doc-row a { color: var(--text-primary); text-decoration: none; }
.matter-doc-row a:hover { text-decoration: underline; }
/* Document "chips" (Google-Docs smart-chip style): file-type badge + name in a pill */
.doc-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  padding: 3px 12px 3px 4px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-primary); text-decoration: none;
  font-size: 0.86rem; line-height: 1.3; vertical-align: middle; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.doc-chip:hover { background: var(--gray-100); border-color: var(--gray-400); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); text-decoration: none; }
.doc-chip:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 1px; }
.doc-chip-ic {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 18px; padding: 0 5px; border-radius: 5px;
  color: #fff; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.04em;
}
.doc-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matter-doc-row .doc-chip { align-self: flex-start; }
/* "+ New" split menu on the Documents page */
.doc-new { position: relative; flex: 0 0 auto; }
.doc-new-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); padding: 6px; z-index: 300; }
.doc-new-menu.open { display: block; }
.doc-new-menu button { display: block; width: 100%; text-align: left; background: none; border: none; font: inherit; font-size: 0.9rem; color: var(--text-primary); padding: 9px 10px; border-radius: 7px; cursor: pointer; }
.doc-new-menu button:hover { background: var(--gray-100); }
/* "+ New" button: fully-rounded frosted-glass pill with a soft pulsing glow */
.doc-new .btn-glow {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(0, 0, 0, 0.10);
  color: var(--text-primary);
}
.doc-new .btn-glow:hover { background: rgba(255, 255, 255, 0.78); }
[data-theme="dark"] .doc-new .btn-glow { background: rgba(40, 40, 46, 0.55); border-color: rgba(255, 255, 255, 0.14); color: #e5e5e5; }
[data-theme="dark"] .doc-new .btn-glow:hover { background: rgba(52, 52, 60, 0.72); }
/* Type/Status cells read as plain text/badge, revealing the dropdown chrome only on row hover */
.dir-edit-cell .cselect { width: auto; display: inline-block; min-width: 0; }
.dir-edit-cell .cselect-btn { border-color: transparent; background: transparent; }
.dir-edit-cell .cselect-chev { opacity: 0; transition: opacity 0.12s ease; }
.directory-table tbody tr:hover .dir-edit-cell .cselect-btn { border-color: var(--border); background: var(--surface); }
.directory-table tbody tr:hover .dir-edit-cell .cselect-chev,
.dir-edit-cell .cselect.open .cselect-chev { opacity: 1; }
.dir-edit-cell .cselect.open .cselect-btn { border-color: var(--border); background: var(--surface); }

/* Context editor: use the app font, not the browser's monospace default */
.ctx-textarea {
  width: 100%; font-family: var(--font-body); font-size: 0.95rem; line-height: 1.55;
  color: var(--text-primary); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; resize: vertical; min-height: 130px;
}
.ctx-textarea:focus { outline: none; border-color: var(--gray-400); }
/* Saved context shown as soft, read-only bubbles — one per note. Hover a
   bubble to reveal its Edit / Delete controls; "+ Add context" appends more. */
.ctx-bubble {
  position: relative;
  font-family: var(--font-body); font-size: 0.95rem; line-height: 1.6; color: var(--text-primary);
  background: var(--gray-50); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px;
}
.ctx-bubble:last-child { margin-bottom: 0; }
[data-theme="dark"] .ctx-bubble { background: #161616; }
.ctx-bubble-text { white-space: pre-wrap; word-break: break-word; padding-right: 96px; }
.ctx-bubble-actions {
  position: absolute; top: 10px; right: 12px; display: flex; gap: 6px;
  opacity: 0; transition: opacity .12s;
}
.ctx-bubble:hover .ctx-bubble-actions, .ctx-bubble:focus-within .ctx-bubble-actions { opacity: 1; }
.ctx-mini {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; cursor: pointer;
  color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px; transition: color .12s, border-color .12s, background .12s;
}
.ctx-mini:hover { color: var(--text-primary); border-color: var(--gray-400); }
.ctx-mini-del:hover { color: #b42318; border-color: #f0c6c0; background: #fdf3f2; }
.ctx-editor { margin-bottom: 10px; }
.ctx-add-wrap { margin-top: 12px; }
.ctx-add-btn { border-style: dashed; }

/* ============ CLIENT PORTAL (invited-client, single-client view) ============ */
body.client-portal-mode .sidebar { display: none; }
/* !important so the collapsed-nav margin rule (higher specificity) can't push
   the portal right, leaving a gap on the left. */
body.client-portal-mode .main-content { margin-left: 0 !important; }
body.client-portal-mode .topbar { display: none; }
body.client-portal-mode .page-container { padding: 0; }
body.client-portal-mode #log-time-fab { display: none !important; }
.cp-shell { max-width: 1000px; margin: 0 auto; padding: 40px 24px 48px; }
.cp-tag { font-size: 0.72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

/* New-client intake form (gates the portal) */
.cp-intake { min-height: 100vh; background: var(--bg); padding: 40px 20px 64px; overflow-y: auto; }
.cp-intake-card { max-width: 680px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; }
/* Blocking intake popup layered over the portal. */
.cp-intake-modal-overlay { position: fixed; inset: 0; z-index: 3000; display: none; padding: 32px 16px; overflow-y: auto; background: rgba(12, 15, 20, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
body.cp-intake-open { overflow: hidden; }
.cp-intake-modal-card { max-width: 680px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4); }
@media (max-width: 560px) { .cp-intake-modal-card { padding: 22px; } }
.cp-intake-head { text-align: center; border-bottom: 1px solid var(--border); padding-bottom: 26px; margin-bottom: 8px; }
.cp-intake-logo { height: 34px; width: auto; margin-bottom: 18px; }
.cp-intake-head h1 { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; margin-bottom: 10px; }
.cp-intake-head p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; max-width: 52ch; margin: 0 auto; }
.cp-intake-who { margin-top: 12px !important; font-size: 0.85rem !important; }
.intk-sec { padding: 22px 0; border-bottom: 1px solid var(--border); }
.intk-sec:last-of-type { border-bottom: none; }
.intk-sec > h3 { font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 16px; }
.intk-row { display: flex; gap: 16px; }
.intk-row > .form-group { flex: 1; min-width: 0; }
.intk-req { color: #dc2626; margin-left: 2px; }
.intk-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.intk-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--gray-300); border-radius: 24px; cursor: pointer; font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); transition: all 0.15s; }
.intk-pill:hover { border-color: var(--text-primary); color: var(--text-primary); }
.intk-pill input { accent-color: var(--gray-900); margin: 0; }
.intk-pill:has(input:checked) { background: var(--gray-900); color: var(--white); border-color: var(--gray-900); }
.intk-pill:has(input:checked) input { accent-color: #fff; }
#intake-submit { margin-top: 24px; }
@media (max-width: 560px) { .cp-intake-card { padding: 24px; } .intk-row { flex-direction: column; gap: 0; } }

/* Portal app frame: its own sidebar (both brands) + main column */
/* App shell: pinned to the viewport so the sidebar ALWAYS spans full height
   regardless of ancestor layout; the main area scrolls inside it. */
.cp-app { position: fixed; inset: 0; z-index: 1; display: flex; background: var(--bg); }
.cp-sidebar {
  width: 260px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
  height: 100%;
}
.cp-side-head { padding: 22px 18px 16px; border-bottom: 1px solid var(--border); }
.cp-wadr-logo { height: 22px; display: block; margin-bottom: 16px; }
.cp-side-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cp-side-brand-text { min-width: 0; }
.cp-side-client { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-client-logo { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; background-size: cover; background-position: center; background-color: var(--gray-100); border: 1px solid var(--border); }
.cp-client-ini { display: inline-flex; align-items: center; justify-content: center; background: var(--black); color: var(--white); font-weight: 700; font-size: 0.8rem; border: none; }
.cp-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.cp-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-sm); color: var(--text-secondary);
  font-size: 0.9rem; font-weight: 500; cursor: pointer; user-select: none;
}
.cp-nav-item:hover { color: var(--text-primary); background: var(--gray-100); }
.cp-nav-item.active { color: var(--white); background: var(--gray-900); font-weight: 600; }
.cp-nav-badge { margin-left: auto; background: #c0392b; color: #fff; font-size: 0.7rem; font-weight: 700; border-radius: 10px; padding: 1px 7px; }
.cp-nav-item.active .cp-nav-badge { background: #fff; color: #111; }
.cp-side-foot { padding: 12px 12px 16px; border-top: 1px solid var(--border); position: relative; }
/* Lower-left user pop-up menu (click the user row to open above it). */
.cp-user-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; background: none; border-radius: 10px; cursor: pointer; text-align: left; min-width: 0; }
.cp-user-btn:hover { background: var(--gray-100); }
.cp-user-btn .cp-side-user-info { flex: 1; min-width: 0; }
.cp-user-chev { color: var(--text-secondary); flex: 0 0 auto; transition: transform 0.16s ease; }
.cp-user-btn[aria-expanded="true"] .cp-user-chev { transform: rotate(180deg); }
.cp-user-menu { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 6px); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 18, 24, 0.16); padding: 6px; display: none; z-index: 20; }
.cp-user-menu.open { display: block; }
.cp-user-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: none; background: none; border-radius: 8px; cursor: pointer; font-family: var(--font-body); font-size: 0.88rem; color: var(--text-primary); text-align: left; }
.cp-user-menu button:hover { background: var(--gray-100); }
.cp-side-user { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
.cp-side-user-info { display: flex; flex-direction: column; min-width: 0; }
.cp-side-user-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-side-user-email { font-size: 0.72rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-main { flex: 1; min-width: 0; height: 100%; overflow-y: auto; padding: 34px 38px 60px; }
.cp-main > * { max-width: 1100px; }
/* Documents header actions (upload button + matter picker). */
.cp-docs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cp-docs-actions { display: flex; align-items: center; gap: 10px; }
.cp-doc-matter-pick { display: flex; align-items: center; font-size: 0.82rem; color: var(--text-secondary); }
.cp-doc-matter-pick select { margin-left: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text-primary); font-size: 0.85rem; }

/* Drag-to-upload overlay: only visible while files are dragged over a documents
   context (firm Documents page or client portal Documents). */
#drop-overlay { position: fixed; inset: 0; z-index: 9600; display: none; align-items: center; justify-content: center;
  background: rgba(10, 12, 20, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#drop-overlay.show { display: flex; }
.drop-overlay-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 64px; border-radius: 22px;
  border: 2px dashed rgba(255, 255, 255, 0.5); color: #fff; text-align: center; pointer-events: none; }
.drop-overlay-inner strong { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; }
.drop-overlay-inner span { font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); }

/* Portal pages */
.cp-page-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.cp-page-head h2 { font-size: 1.5rem; letter-spacing: -0.02em; margin: 0; }
.cp-sub { color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 22px; flex-basis: 100%; }
.cp-alert {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  background: var(--gray-900); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 14px 18px; font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  margin-bottom: 18px; text-align: left;
}
.cp-alert-cta { font-weight: 700; white-space: nowrap; }
/* ---- Client portal: engagement letter ---- */
.cp-eng-doc-card { padding: 0; overflow: hidden; }
.cp-eng-frame { width: 100%; height: 78vh; min-height: 520px; border: 0; display: block; background: #faf8f2; }
.cp-eng-signed {
  display: flex; align-items: center; gap: 12px; background: #e9f7ee; color: #1c7a41;
  border: 1px solid #bfe6cd; border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 16px;
}
.cp-eng-signed svg { flex: none; }
.cp-eng-signed div { display: flex; flex-direction: column; line-height: 1.3; }
.cp-eng-signed strong { font-weight: 700; }
.cp-eng-signed span { font-size: 0.8rem; opacity: 0.85; }
.cp-eng-sign { margin-top: 16px; }
.cp-eng-sign h3 { margin: 0 0 6px; }
.cp-eng-field { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 10px; max-width: 420px; }
.cp-eng-field span { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.cp-eng-field input { padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.cp-eng-agree { display: flex; align-items: flex-start; gap: 9px; font-size: 0.9rem; margin: 4px 0 16px; cursor: pointer; }
.cp-eng-agree input { margin-top: 3px; flex: none; }
@media (max-width: 640px) { .cp-eng-frame { height: 68vh; min-height: 420px; } }
.cp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.cp-stat { padding: 16px 18px; margin-bottom: 0; }
.cp-stat-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 8px; }
.cp-stat-value { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
.cp-stat-sub { font-size: 0.76rem; color: var(--text-secondary); margin-top: 4px; }
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.cp-grid > .card { margin-bottom: 0; }
.cp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cp-row:last-child { border-bottom: none; }
.cp-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-row-amount { margin-left: auto; font-weight: 600; white-space: nowrap; }
.cp-hours { color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.cp-table tbody tr.cp-click-row { cursor: pointer; }
.cp-table tbody tr.cp-click-row:hover { background: var(--gray-50); }
.cp-row-arrow { color: var(--text-secondary); text-align: right; }
.cp-row.cp-click-row { cursor: pointer; }
.cp-wipline { background: var(--gray-100); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 16px; }

/* Invoice approval cards + dispute form */
.cp-approve-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 12px; }
.cp-approve-card:last-child { margin-bottom: 0; }
.cp-approve-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cp-approve-info { min-width: 0; flex: 1 1 220px; }
.cp-approve-title { font-weight: 600; color: var(--text-primary); }
.cp-approve-amount { font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
.cp-approve-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-inv-actions { display: flex; gap: 10px; margin: 18px 0 12px; }
.cp-inv-total { display: flex; justify-content: flex-end; gap: 10px; padding-top: 14px; font-size: 1.05rem; }
.cp-dispute-form { margin-top: 12px; }
.cp-dispute-form textarea { width: 100%; min-height: 70px; font: inherit; font-size: 0.9rem; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); margin-bottom: 8px; }

/* Live work-in-progress blocks */
.cp-wip-block { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden; }
.cp-wip-block:last-child { margin-bottom: 0; }
.cp-wip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; background: none; border: none; font: inherit; font-size: 0.9rem; color: var(--text-primary); cursor: pointer; text-align: left; }
.cp-wip-head:hover { background: var(--gray-50); }
.cp-wip-meta { color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.cp-wip-lines { padding: 0 14px 12px; }

@media (max-width: 980px) { .cp-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .cp-grid { grid-template-columns: 1fr; }
  .cp-app { position: static; flex-direction: column; height: auto; overflow: visible; }
  .cp-sidebar { width: 100%; height: auto; position: static; }
  .cp-nav { overflow-y: visible; }
  .cp-main { height: auto; overflow-y: visible; padding: 22px 16px 48px; }
  .cp-main > * { max-width: none; }
}

/* QuickBooks card action row (Reconnect / Disconnect) */
.intg-actions { display: flex; gap: 8px; margin-top: 8px; }

/* Operating margin card (P&L tab): diverging bars around a zero baseline —
   positive months rise above the line, negative months hang below it. */
/* Same grid template as the P&L monthly rows (.pnl-mrow) so the month columns
   line up vertically with the statement above. Leading/trailing empty cells
   stand in for the Account label and Total columns. */
.margin-bars { position: relative; display: grid; grid-template-columns: minmax(180px, 1.5fr) repeat(12, minmax(68px, 1fr)) minmax(90px, 1.2fr); align-items: flex-start; padding: 10px 16px 2px; min-width: 1100px; overflow-x: auto; }
.margin-zero-line { position: absolute; left: 16px; right: 16px; height: 1px; background: var(--gray-300); }
.margin-bar-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.margin-bar-zone { display: flex; justify-content: center; width: 100%; }
.margin-bar-zone.is-up { align-items: flex-end; }
.margin-bar-zone.is-down { align-items: flex-start; }
.margin-bar { width: 26px; background: var(--gray-900); border-radius: 4px 4px 0 0; }
.margin-bar.is-neg { background: #c0392b; border-radius: 0 0 4px 4px; }
/* Forecast months: hollow, dashed bars + muted labels. */
.margin-bar-col.is-forecast .margin-bar { background: transparent; border: 1.5px dashed var(--gray-400); }
.margin-bar-col.is-forecast .margin-bar-pct { color: var(--text-muted); font-style: italic; }
.margin-bar-col.is-forecast .margin-bar-label { color: var(--text-muted); }
.margin-bar-pct { font-size: 0.72rem; font-weight: 700; color: var(--text-primary); margin-top: 6px; }
.margin-bar-pct.is-neg { color: #c0392b; }
.margin-bar-label { font-size: 0.68rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.chart-empty { padding: 24px 8px; }

/* Inline field hint (e.g. auto-selected Activity note under the time form) */
.field-hint { display: none; font-size: 0.76rem; color: var(--text-secondary); margin: 6px 0 0; }

/* Time Log header: scope toggle sits just left, next to the title */
.time-log-header { justify-content: space-between; gap: 16px; }
/* The Activity tab sits at the far right of the client detail tab row. */
#client-tabs { display: flex; }
#client-tabs .detail-tab[data-tab="activity"] { margin-left: auto; }

/* Toggle (Entire team / My time) sits on the left; Import is pushed to the far
   right of the header. */
.time-log-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1; }
.time-log-head-actions > .btn { margin-left: auto; }
/* The floating Log Time timer button is out of place on the client detail page. */
body[data-active-page="client-detail"] #log-time-fab { display: none !important; }
/* Drag-a-file affordance on the client Documents tab. */
.client-docs-target.docs-dragover { outline: 2px dashed var(--gray-400); outline-offset: 4px; border-radius: 8px; background: rgba(17, 17, 17, 0.02); }
#page-documents.docs-dragover { outline: 2px dashed var(--gray-400); outline-offset: -8px; border-radius: 12px; }

/* Incoming / waiting-to-be-assigned screen (verified but unassigned users). */
#pending-screen { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; background: #0a0a0f; padding: 24px; overflow: hidden; }
#pending-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.pending-card { position: relative; z-index: 1; max-width: 460px; text-align: center; padding: 44px 40px 36px; border-radius: 22px;
  background: rgba(18, 18, 28, 0.55); border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); }
.pending-logo { height: 44px; width: auto; margin-bottom: 26px; filter: brightness(0) invert(1); opacity: 0.98; }
.pending-check { width: 40px; height: 40px; border-radius: 50%; background: #16a34a; color: #fff; display: flex; align-items: center; justify-content: center; margin: 26px auto 0; box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.16); }
.pending-card h1 { font-family: var(--font-heading); font-weight: 700; font-size: 2rem; margin: 0 0 12px; color: #fff; }
.pending-card p { color: rgba(255, 255, 255, 0.66); line-height: 1.6; margin: 0 0 26px; }
.pending-card .btn { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; }
.pending-card .btn:hover { background: rgba(255, 255, 255, 0.18); }

/* ---- Client intake (self-onboarding): a glass two-column card floating over a
   blurred client-portal backdrop ---- */
#intake-screen { position: fixed; inset: 0; z-index: 9000; display: none; overflow: hidden; background: #0b0d12; }

/* Blurred faux client-portal behind the glass modal. */
.intake-portal-bg { position: absolute; inset: 0; display: flex; filter: blur(9px) saturate(1.05); transform: scale(1.04); opacity: 0.7; pointer-events: none; }
.ipb-rail { width: 76px; background: #0a0a0f; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 22px 0; }
.ipb-w { color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; }
.ipb-dot { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,0.12); }
.ipb-main { flex: 1; background: linear-gradient(160deg, #1a2233, #0f1420 60%); padding: 48px 56px; }
.ipb-greet { font-family: var(--font-heading); font-weight: 700; font-size: 2.4rem; color: rgba(255,255,255,0.9); margin-bottom: 30px; }
.ipb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; }
.ipb-cards span { height: 150px; border-radius: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.05); }

/* The modal — light theme, three columns, sized to avoid scrolling. */
.intake-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px 20px; background: rgba(6,8,12,0.45); }
.intake-glass { width: 100%; max-width: 1120px; max-height: 94vh; overflow-y: auto; border-radius: 22px; padding: 28px 34px 24px;
  background: rgba(255,255,255,0.97); border: 1px solid rgba(0,0,0,0.06);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5); color: #14161c; }
.intake-head { text-align: center; margin-bottom: 20px; }
.intake-logo { height: 28px; width: auto; margin-bottom: 14px; }
.intake-glass h1 { font-family: var(--font-heading); font-weight: 700; font-size: 1.95rem; margin: 0 0 6px; color: #14161c; letter-spacing: -0.01em; }
.intake-lead { color: #5b616e; line-height: 1.5; font-size: 0.92rem; margin: 0 auto 16px; max-width: 560px; }
.intake-emailfield { max-width: 420px; margin: 0 auto; text-align: left; }
.intake-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 30px; }
.intake-section { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: #8a909c; margin: 14px 0 10px; padding-bottom: 7px; border-bottom: 1px solid #ececef; }
.intake-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.intake-field > span { font-size: 0.78rem; font-weight: 600; color: #2b2f38; }
.intake-field > span b { color: #dc2626; font-weight: 700; }
.intake-field input, .intake-field select, .intake-field textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #d9dce1; border-radius: 9px;
  background: #f6f7f9; color: #14161c; font-size: 0.9rem; font-family: inherit; }
.intake-field input::placeholder { color: #a3a8b2; }
.intake-field input:focus, .intake-field select:focus, .intake-field textarea:focus { outline: none; border-color: #14161c; background: #fff; }
.intake-field input[readonly] { color: #6b7280; background: #eef0f3; }
.intake-field textarea { resize: vertical; }
.intake-row { display: flex; gap: 10px; }
.intake-row .intake-field { flex: 1; }
.intake-radios { display: flex; gap: 16px; flex-wrap: wrap; }
.intake-radios label { display: inline-flex; align-items: center; gap: 7px; font-size: 0.88rem; color: #2b2f38; font-weight: 500; cursor: pointer; }
.intake-foot { margin-top: 18px; }
.intake-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 10px 12px; border-radius: 10px; font-size: 0.86rem; margin-bottom: 12px; }
.intake-submit { width: 100%; max-width: 340px; display: block; margin: 0 auto; padding: 12px; font-size: 0.96rem; background: #14161c; color: #fff; border: none; }
.intake-submit:hover { background: #24272f; }
.intake-signout { display: block; margin: 12px auto 0; background: none; border: none; color: #8a909c; font-size: 0.84rem; text-decoration: underline; cursor: pointer; }
@media (max-width: 960px) { .intake-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .intake-cols { grid-template-columns: 1fr; }
  .ipb-main { padding: 30px 24px; }
  .intake-glass { padding: 22px 18px; }
}

/* Link-to-client modal: the "set up as a new client (intake)" alternative. */
.client-link-or { display: flex; align-items: center; gap: 12px; margin: 16px 2px 12px; color: var(--text-secondary); font-size: 0.78rem; }
.client-link-or::before, .client-link-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.client-link-intake { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px; border: 1px dashed var(--border); border-radius: 12px; background: transparent; cursor: pointer; transition: border-color .15s, background .15s; }
.client-link-intake:hover { border-color: var(--text-primary); background: var(--gray-100); }
[data-theme="dark"] .client-link-intake:hover { background: rgba(255,255,255,0.04); }
.cli-plus { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--text-primary); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 400; line-height: 1; }
.cli-txt { display: flex; flex-direction: column; gap: 2px; }
.cli-txt strong { font-size: 0.9rem; color: var(--text-primary); }
.cli-txt span { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; }
.user-del-btn { margin-left: 12px; vertical-align: middle; }
/* A pre-filled, locked form field (e.g. client on New Matter from a client page). */
.is-locked-field { background: var(--gray-100); color: var(--text-secondary); cursor: default; }

/* Matters table: overlapping team avatars + a "needs a matter" alert. */
.matter-team-avatars { display: inline-flex; align-items: center; }
.matter-team-avatars .dir-avatar { margin-left: -6px; border: 2px solid var(--surface); }
.matter-team-avatars .dir-avatar:first-child { margin-left: 0; }
.matter-team-more { margin-left: 6px; font-size: 0.75rem; color: var(--text-secondary); }
.tab-alert { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; margin-left: 6px; padding: 0 4px; border-radius: 8px; background: #dc2626; color: #fff; font-size: 0.7rem; font-weight: 700; vertical-align: middle; }
.need-matter strong { color: var(--text-primary); }

/* In-app confirm dialog (replaces native confirm()). */
#app-confirm .app-confirm-modal { max-width: 420px; }
.app-confirm-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; margin: 0 0 8px; color: var(--text-primary); }
.app-confirm-msg { color: var(--text-primary); line-height: 1.55; white-space: pre-line; margin: 0; }
/* Mobile: title on its own line, then a full-width row with the Entire team /
   My time toggle (equal-width halves) on the left and Import on the right. */
@media (max-width: 640px) {
  .time-log-header { flex-wrap: wrap; gap: 10px; }
  .time-log-header > h3 { flex: 1 1 100%; }
  .time-log-head-actions { flex: 1 1 100%; width: 100%; gap: 8px; }
  .time-log-head-actions .seg-split { flex: 1 1 auto; }
  .time-log-head-actions .seg-split .seg-pill { flex: 1 1 0; text-align: center; padding-left: 0; padding-right: 0; }
  .time-log-head-actions > .btn { flex: 0 0 auto; }
}
.imp-table th, .imp-table td { padding: 6px 8px; }
.imp-table input, .imp-table select { width: 100%; padding: 6px 8px; font-size: 0.82rem; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); color: var(--text-primary); font-family: var(--font-body); }
.imp-hrs { max-width: 84px; }
.imp-row.imp-needs .imp-matter { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12); }

/* Lead-cell + header icons for time entries / invoices */
.cell-lead { display: inline-flex; align-items: center; gap: 8px; }
.cell-ic { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cell-ic svg { width: 13px; height: 13px; }
.cell-ic-clock { background: var(--gray-100); color: var(--text-secondary); }
.cell-ic-inv { background: rgba(26, 86, 219, 0.1); color: #1a56db; }
[data-theme="dark"] .cell-ic-inv { background: rgba(96, 150, 255, 0.16); color: #6096ff; }
.card-header h3 .cell-ic { vertical-align: middle; margin-right: 8px; }
/* Pair the Time tracking + Invoices cards so they read as one unit */
.billing-pair .card-header h3 { display: inline-flex; align-items: center; }
.billing-pair table.table th:first-child, .billing-pair table.table td:first-child { min-width: 132px; }

/* Website CMS admin */
.ws-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ws-page-body { width: 100%; font-family: var(--font-body); font-size: 0.9rem; line-height: 1.6; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); resize: vertical; }
.ws-form-type { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--gray-100); color: var(--text-secondary); padding: 3px 9px; border-radius: 10px; }
.ws-form-type-contact { background: var(--gray-900); color: var(--white); }
.ws-dropzone { border: 2px dashed var(--border); border-radius: var(--radius-sm); padding: 28px 16px; text-align: center; color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.ws-dropzone:hover, .ws-dropzone.dragover { border-color: var(--gray-500); background: var(--gray-50); }
.ws-dropzone p { margin: 8px 0 0; font-size: 0.9rem; }
.ws-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 16px; }
.ws-media-card { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.ws-media-thumb { height: 120px; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: var(--gray-100); }
.ws-media-meta { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.ws-media-name { font-size: 0.76rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-media-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Improvement page (margin report) */
.imp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.imp-sub { color: var(--text-secondary); font-size: 0.9rem; margin: 0; max-width: 640px; }
.imp-headline { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); background: var(--gray-100); border-radius: var(--radius-sm); padding: 16px 20px; margin-bottom: 18px; }
.imp-card { padding: 18px 20px; }
.imp-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.imp-card-head h3 { margin: 0; font-size: 1rem; }
.imp-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--black); color: var(--white); font-size: 0.78rem; font-weight: 700; flex-shrink: 0; }
.imp-flag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 12px; }
.imp-flag-q { background: #fdecea; color: #c0392b; }
.imp-flag-w { background: #e8f6ee; color: #1e7a44; }
.imp-flag-o { background: var(--gray-100); color: var(--text-secondary); }
.imp-impact { margin-left: auto; font-weight: 700; white-space: nowrap; color: var(--text-primary); }
.imp-accounts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.imp-account { font-size: 0.74rem; background: var(--gray-100); color: var(--text-secondary); padding: 3px 10px; border-radius: 12px; }
.imp-detail { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 8px; line-height: 1.55; }
.imp-action { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.imp-meta { margin-top: 14px; }
.imp-rev-row { display: grid; grid-template-columns: minmax(120px, 1fr) 110px 2fr 44px; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.imp-rev-row:last-child { border-bottom: none; }
.imp-rev-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-rev-amt { font-size: 0.88rem; text-align: right; white-space: nowrap; }
.imp-rev-bar { height: 8px; background: var(--gray-100); border-radius: 6px; overflow: hidden; }
.imp-rev-fill { height: 100%; background: var(--gray-900); border-radius: 6px; }
.imp-rev-pct { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-align: right; }

/* Link-to-client picker (Users page) */
.client-link-sub { font-size: 0.88rem; color: var(--text-secondary); margin: 0 0 12px; }
.client-link-list { max-height: 320px; overflow-y: auto; margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.client-link-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); font: inherit; font-size: 0.9rem; color: var(--text-primary); cursor: pointer; text-align: left; }
.client-link-row:hover { background: var(--gray-100); border-color: var(--border); }
.client-link-name { font-weight: 600; }
.client-link-row .matter-detail-sub { margin-left: auto; }
.user-client-link { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; font: inherit; font-size: 0.88rem; color: var(--text-primary); cursor: pointer; }
.user-client-link:not([disabled]):hover { text-decoration: underline; }
.user-client-link[disabled] { cursor: default; }
.user-client-link.is-missing { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.client-logo-avatar { background-size: cover; background-position: center; background-color: var(--gray-100); color: transparent; }

/* Round avatar inside enhanced dropdown options (client logos / initials) */
.cselect-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-right: 8px; vertical-align: middle; background-size: cover; background-position: center; background-color: var(--gray-100); }
.cselect-avatar-ini { background: var(--black); color: var(--white); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em; }

/* Attention-drawing "+ New" button: soft pulsing glow (respects reduced-motion) */
.btn-glow { animation: btnGlow 1.7s ease-in-out infinite; }
@keyframes btnGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 134, 11, 0); }
  50% { box-shadow: 0 0 0 4px rgba(184, 134, 11, 0.22), 0 0 16px 2px rgba(184, 134, 11, 0.55); }
}

/* ---- Time page ---- */
.time-top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; margin-bottom: 24px; }
.time-timer-card .card-body { text-align: center; }
.time-display { font-family: var(--font-heading); font-size: 3rem; font-weight: 600; letter-spacing: 0.02em; margin: 6px 0 18px; font-variant-numeric: tabular-nums; }
.time-timer-actions { display: flex; gap: 10px; justify-content: center; }
/* Clickable client / matter cells in the Time Log jump to that record's page. */
.tl-link { cursor: pointer; border-radius: 6px; }
.tl-link:hover .tl-nm, .time-log-table td.tl-link:hover, .time-log-table td .tl-link:hover { text-decoration: underline; }
.time-row { display: flex; gap: 12px; }
.time-row .form-group { flex: 1; }
@media (max-width: 768px) { .time-top { grid-template-columns: 1fr; } }

/* ---- Billing rates & invoicing ---- */
.rates-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 28px; }
.rate-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--gray-100); }
.rate-name { font-weight: 500; font-size: 0.9rem; }
.rate-input { display: flex; align-items: center; gap: 4px; color: var(--text-secondary); font-size: 0.85rem; white-space: nowrap; }
.rate-input input { width: 84px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); color: var(--text-primary); font-family: var(--font-body); text-align: right; outline: none; }
.invoicing-unbilled { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.invoicing-unbilled .stat-value { font-size: 1.6rem; }

[data-theme="dark"] .deadline-date { background: #1e1e1e; }
[data-theme="dark"] .deadline-date.urgent { background: #2a2a2a; color: #e5e5e5; }

[data-theme="dark"] .calendar-event { background: #1e1e1e; }
[data-theme="dark"] .calendar-event.urgent { background: #2a2a2a; color: #e5e5e5; }
[data-theme="dark"] .calendar-event.hearing { background: #1e1e1e; color: #aaaaaa; }

[data-theme="dark"] .summary-item.highlight { background: #1e1e1e; border-color: #3a3a3a; }
[data-theme="dark"] .pnl-net td { background: #1e1e1e; }
[data-theme="dark"] .pnl-margin-fill { background: #e5e5e5; }
[data-theme="dark"] .pnl-row-net { background: #1e1e1e; }
[data-theme="dark"] .pnl-detail-popup { background: #141414; border-color: #2a2a2a; }
[data-theme="dark"] .pnl-detail-overlay { background: rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .pnl-detail-stat { background: #1e1e1e; border-color: #2a2a2a; }
[data-theme="dark"] .pnl-child-row .pnl-row-amount:hover { background: #2a2a2a; }
[data-theme="dark"] .pnl-clickable:hover { background: #2a2a2a; }
[data-theme="dark"] .pnl-row-subtotal { background: #1e1e1e; border-color: #2a2a2a; }
[data-theme="dark"] .pnl-subchild-row .pnl-row-label { border-left-color: #3a3a3a; }
[data-theme="dark"] .pnl-detail-bar { background: #e5e5e5; }
[data-theme="dark"] .pnl-detail-type-badge { background: #2a2a2a; }
[data-theme="dark"] .pnl-detail-type-badge.expense { background: #333; }

[data-theme="dark"] .rank-fill { background: #e5e5e5; }

[data-theme="dark"] .upload-zone { border-color: #3a3a3a; }
[data-theme="dark"] .upload-zone:hover,
[data-theme="dark"] .upload-zone.dragover { border-color: #e5e5e5; background: #1a1a1a; }

[data-theme="dark"] .toggle-btn { background: #1e1e1e; color: #888888; }
[data-theme="dark"] .toggle-btn.active { background: #e5e5e5; color: #0a0a0a; }

/* ============ TOAST NOTIFICATIONS ============ */
#toast-host {
  position: fixed;
  bottom: 0; left: 0; right: 0; /* desktop: rise from the bottom */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 28px;
  z-index: 4000;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: min(460px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: opacity .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1);
}
.toast-show { opacity: 1; transform: translateY(0) scale(1); }
.toast-hide { opacity: 0; transform: translateY(12px) scale(0.97); }
/* Mobile: notifications drop in from the top instead. */
@media (max-width: 768px) {
  #toast-host { bottom: auto; top: 0; padding-bottom: 0; padding-top: calc(env(safe-area-inset-top, 0px) + 14px); }
  .toast { transform: translateY(-16px) scale(0.96); }
  .toast-show { transform: translateY(0) scale(1); }
  .toast-hide { transform: translateY(-12px) scale(0.97); }
}
.toast-icon {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.toast-icon svg { width: 18px; height: 18px; }
/* Custom icon slot (e.g. the client's photo on a "logged" confirmation). */
.toast-icon-custom { width: 34px; height: 34px; background: none !important; padding: 0; }
.toast-icon-custom .toast-cav { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-repeat: no-repeat; font-size: 0.72rem; font-weight: 700; color: #fff; background-color: var(--gray-900); overflow: hidden; }
.toast-body { flex: 1; font-size: .92rem; line-height: 1.4; font-weight: 600; }
.toast-sub { display: block; font-size: 0.8rem; font-weight: 400; color: var(--text-secondary); margin-top: 1px; }
.toast-close {
  flex: 0 0 auto;
  background: none; border: none; cursor: pointer;
  color: var(--text-secondary);
  padding: 2px; border-radius: 6px;
  display: flex; align-items: center;
}
.toast-close svg { width: 16px; height: 16px; }
.toast-close:hover { color: var(--text-primary); background: var(--gray-100); }
.toast-success .toast-icon { background: #e7f7ee; color: #1a8f4c; }
.toast-error   .toast-icon { background: #fdecec; color: #d33b3b; }
.toast-info    .toast-icon { background: #eaf1fd; color: #2563eb; }

[data-theme="dark"] .toast { background: rgba(26,26,26,0.9); border-color: #2a2a2a; }
[data-theme="dark"] .toast-close:hover { background: #2a2a2a; }
[data-theme="dark"] .toast-success .toast-icon { background: #13301f; color: #4ade80; }
[data-theme="dark"] .toast-error   .toast-icon { background: #321616; color: #f87171; }
[data-theme="dark"] .toast-info    .toast-icon { background: #16233a; color: #60a5fa; }

/* ============ COLLAPSIBLE CARDS ============ */
.card-toggle { cursor: pointer; user-select: none; }
.card-head-right { display: flex; align-items: center; gap: 12px; }
.card-chevron { display: inline-flex; color: var(--text-secondary); transition: transform .25s ease; }
.card.collapsed .card-chevron { transform: rotate(-90deg); }
.card.collapsible .card-body { transition: none; }
.card.collapsed > .card-body { display: none; }

/* Flush accordion — used on matter & client detail so both pages match.
   No box chrome; hairline dividers between sections. */
.card.card-flush {
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: none; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--border); overflow: visible;
}
.card.card-flush .card-header { padding: 18px 2px; border-bottom: none; }
.card.card-flush .card-header h3 { font-size: 1rem; }
.card.card-flush .card-body { padding: 0 2px 22px; }
#client-detail-body > .card.card-flush { margin-bottom: 0; }
.matter-grid.matter-grid-flush { gap: 0; }

/* ============ INVOICE DOCUMENT ============ */
.invoice-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 15, 20, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 3500;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
  opacity: 0; transition: opacity .25s ease;
}
.invoice-overlay-show { opacity: 1; }
.invoice-doc { width: 100%; max-width: 1240px; }
/* Invoice as its own page (not an overlay) */
.invoice-page-body { max-width: 1240px; margin: 0 auto; }
.invoice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.invoice-layout .invoice-paper { max-width: 820px; }
.invoice-side { position: sticky; top: 16px; }
@media (max-width: 1024px) { .invoice-layout { grid-template-columns: 1fr; } .invoice-side { position: static; } }
@media print { .invoice-layout { display: block; } .invoice-side { display: none; } }
.invoice-toolbar-actions { display: flex; gap: 10px; }
/* Bulk-select bar + checkbox column on the invoice list */
/* The invoices selection bar now reuses the floating .tl-bulkbar pill. */
.inv-check-col { width: 40px; text-align: center; }
.inv-select, #inv-select-all { width: 16px; height: 16px; cursor: pointer; }
.invoice-toolbar {
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px;
}
.invoice-paper {
  background: #fff; color: #14161a;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  padding: 56px 56px 44px;
  animation: invPaperIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes invPaperIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 40px; }
.inv-firm-name { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
.inv-firm-sub { color: #6b7280; font-size: .85rem; margin-top: 2px; }
.inv-meta { text-align: right; min-width: 220px; }
.inv-title { font-size: 1.3rem; font-weight: 700; letter-spacing: .14em; color: #9ca3af; margin-bottom: 14px; }
.inv-meta-row { display: flex; justify-content: space-between; gap: 24px; font-size: .85rem; padding: 3px 0; }
.inv-meta-row span { color: #6b7280; }
.inv-parties { display: flex; gap: 48px; margin-bottom: 32px; }
.inv-label { text-transform: uppercase; font-size: .7rem; letter-spacing: .1em; color: #9ca3af; font-weight: 600; margin-bottom: 6px; }
.inv-strong { font-weight: 600; font-size: 1rem; }
.inv-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.inv-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #9ca3af; padding: 10px 12px; border-bottom: 2px solid #eceef1; }
.inv-table td { padding: 14px 12px; border-bottom: 1px solid #f1f2f4; font-size: .92rem; }
.inv-table .num { text-align: right; white-space: nowrap; }
.inv-totals { margin-left: auto; width: 280px; }
.inv-total-row { display: flex; justify-content: space-between; padding: 8px 12px; font-size: .92rem; }
.inv-grand { font-size: 1.15rem; font-weight: 700; border-top: 2px solid #14161a; margin-top: 6px; padding-top: 14px; }
.inv-foot { margin-top: 40px; border-top: 1px solid #f1f2f4; padding-top: 20px; }
.inv-foot p { color: #6b7280; font-size: .85rem; margin-top: 4px; }
/* ---- Retainer invoice: terms + usage + time tracking ---- */
.inv-ret-terms { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #eceef1; border-radius: 12px; overflow: hidden; margin: 0 0 28px; }
.inv-ret-terms .inv-ret-name { grid-column: 1 / -1; border-bottom: 1px solid #eceef1; }
.inv-ret-term { padding: 13px 16px; border-right: 1px solid #eceef1; display: flex; flex-direction: column; gap: 5px; }
.inv-ret-term:last-child { border-right: none; }
.inv-ret-term .inv-label { margin-bottom: 0; }
.inv-ret-term strong { font-size: 1.05rem; color: #14161a; font-variant-numeric: tabular-nums; }
.inv-ret-usage { margin-top: 30px; }
.inv-ret-usage > .inv-label { margin-bottom: 10px; }
.inv-ret-usage-stats { display: flex; flex-wrap: wrap; gap: 22px; margin: 4px 0 10px; font-size: .9rem; color: #6b7280; }
.inv-ret-usage-stats strong { color: #14161a; font-variant-numeric: tabular-nums; }
.inv-ret-bar { height: 7px; background: #eceef1; border-radius: 999px; overflow: hidden; max-width: 340px; margin-bottom: 18px; }
.inv-ret-bar span { display: block; height: 100%; background: #14161a; }
.inv-ret-track { margin-top: 4px; margin-bottom: 0; }

.invoice-table .invoice-row { cursor: pointer; transition: background .15s ease; }
.invoice-table .invoice-row:hover { background: var(--gray-100); }

@page { margin: 14mm; }
@media print {
  body * { visibility: hidden !important; }
  #invoice-page-body, #invoice-page-body *,
  #ic-print-root, #ic-print-root * { visibility: visible !important; }
  #invoice-page-body { position: absolute; inset: 0; background: #fff; padding: 0; display: block; margin: 0; max-width: none; }
  /* The converter clones its invoice into a body-level #ic-print-root so no
     card/overflow/transform ancestor can clip it. Flow from the top of the page
     (top/left/width only — NO bottom/inset, which would clamp it to one page). */
  #ic-print-root { position: absolute; left: 0; top: 0; width: 100%; background: #fff; padding: 0; margin: 0; display: block; }
  #ic-print-root .invoice-paper { max-width: none; transform: none; box-shadow: none; border: none; border-radius: 0; padding: 0; margin: 0; animation: none; }
  .invoice-doc { max-width: none; }
  .no-print { display: none !important; }
  .invoice-paper { box-shadow: none; border-radius: 0; padding: 24px 32px; animation: none; }
}

/* ============ TOOLS PAGE · Invoice converter ============ */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; align-items: start; }
.tool-card { padding: 22px; }
.tool-card .card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tool-card-tag { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent, #6366f1); background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent); border-radius: 999px; padding: 3px 8px; }
.tool-card-desc { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; margin: 0 0 16px; }
/* Dropzone */
.ic-dropzone { border: 1.5px dashed var(--border); border-radius: 16px; padding: 34px 20px; text-align: center;
  cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; background: var(--gray-50); }
.ic-dropzone:hover, .ic-dropzone:focus-visible { border-color: var(--text-muted); background: var(--gray-100); outline: none; }
.ic-dropzone.dragover { border-color: var(--accent, #6366f1); background: color-mix(in srgb, var(--accent, #6366f1) 8%, var(--surface)); transform: scale(1.005); }
.ic-dropzone.is-hidden { display: none; }
.ic-dropzone-icon { color: var(--text-muted); margin-bottom: 10px; }
.ic-dropzone-main { font-weight: 600; font-size: 0.95rem; }
.ic-dropzone-link { color: var(--accent, #6366f1); text-decoration: underline; text-underline-offset: 2px; }
.ic-dropzone-sub { color: var(--text-muted); font-size: 0.8rem; margin-top: 5px; }
/* Status line */
.ic-status { margin-top: 14px; font-size: 0.9rem; display: flex; align-items: center; gap: 9px; color: var(--text-secondary); }
.ic-status-error { color: #b91c1c; }
.ic-spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent, #6366f1); animation: icSpin 0.7s linear infinite; flex: 0 0 auto; }
@keyframes icSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ic-spinner { animation-duration: 1.6s; } }
/* Converted result */
.ic-result { margin-top: 4px; }
.ic-result:empty { margin-top: 0; }
.ic-doc { margin-top: 18px; }
.ic-source-note { font-size: 0.8rem; color: var(--text-muted); background: var(--gray-50); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 4px 0 14px; }
.ic-editing-hint { font-size: 0.78rem; color: var(--text-muted); margin-right: 4px; }
/* Inline-editable fields: invisible until hovered/focused so the paper still
   reads like a finished invoice. */
.ic-edit { border-radius: 4px; padding: 0 2px; margin: 0 -2px; transition: background 0.12s ease, box-shadow 0.12s ease; cursor: text; }
.ic-edit:hover { background: color-mix(in srgb, var(--accent, #6366f1) 8%, transparent); }
.ic-edit:focus { background: var(--surface); box-shadow: 0 0 0 2px var(--accent, #6366f1); outline: none; }
.ic-edit:empty::before { content: attr(data-ph); color: var(--text-muted); }
@media print { .ic-edit:empty::before { content: ''; } .ic-source-note, .ic-editing-hint { display: none !important; } }

/* ---- Tools launcher tile ---- */
.tool-tile { display: flex; align-items: center; gap: 16px; text-align: left; width: 100%; cursor: pointer;
  padding: 18px 20px; border: 1px solid var(--border); background: var(--surface); font: inherit; color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; }
.tool-tile:hover { border-color: var(--gray-300); box-shadow: 0 8px 26px rgba(16,18,24,0.08); transform: translateY(-1px); }
.tool-tile-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent, #6366f1); background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent); }
.tool-tile-body { flex: 1; min-width: 0; }
.tool-tile-head { display: flex; align-items: center; gap: 10px; }
.tool-tile-head h3 { margin: 0; font-size: 1.02rem; }
.tool-tile .tool-card-desc { margin: 4px 0 0; }
.tool-tile-go { flex: 0 0 auto; color: var(--text-muted); }

/* ---- Converter page: tool on the left, list/viewer on the right ---- */
.ic-layout { display: grid; grid-template-columns: minmax(320px, 380px) 1fr; gap: 20px; align-items: start; }
.ic-tool-card { padding: 22px; position: sticky; top: 16px; }
.ic-tool-card .card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ic-panel { padding: 18px 20px; min-height: 60vh; }
.ic-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ic-panel-head h3 { margin: 0; font-size: 1.02rem; }
/* Progress bar (indeterminate-style fill while the AI reads the file) */
.ic-progress { margin-top: 14px; height: 7px; border-radius: 999px; background: var(--gray-100); overflow: hidden; }
.ic-progress-bar { height: 100%; width: 0%; border-radius: 999px; background: var(--accent, #6366f1);
  transition: width 0.2s ease; }
.ic-progress-bar.done { transition: width 0.35s ease; background: #22a565; }
/* History list */
.ic-history { display: flex; flex-direction: column; gap: 8px; }
.ic-hist-empty { color: var(--text-muted); font-size: 0.9rem; padding: 22px 4px; text-align: center; }
.ic-hist-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; text-align: left;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; font: inherit; color: inherit;
  transition: border-color 0.12s ease, background 0.12s ease; }
.ic-hist-row:hover { border-color: var(--gray-300); background: var(--gray-50); }
.ic-hist-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ic-hist-title { font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-hist-sub { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-hist-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ic-hist-total { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.ic-hist-date { font-size: 0.76rem; color: var(--text-muted); }
/* Single-invoice viewer inside the right panel */
.ic-view { overflow-x: auto; }
.ic-view-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ic-view .invoice-paper { max-width: 100%; box-shadow: none; border: 1px solid var(--border); }
@media (max-width: 900px) {
  .ic-layout { grid-template-columns: 1fr; }
  .ic-tool-card { position: static; }
}
@media (max-width: 640px) { .tools-grid { grid-template-columns: 1fr; } .tool-tile { padding: 16px; } }

/* ============ CRM ============ */
/* CRM nav is visible to admins and the marketing role only. */
.crm-nav { display: none; }
body[data-user-role="admin"] .crm-nav, body[data-user-role="marketing"] .crm-nav { display: flex; }
/* Marketing is scoped to the CRM: strip the rest of the app chrome. */
body.role-marketing .sidebar .nav-item:not(.crm-nav) { display: none; }
body.role-marketing .log-time-fab, body.role-marketing #timer-hud { display: none !important; }
/* Website page is reachable by admins and the marketing role, not plain members.
   (Marketing carries both role-member and role-marketing, so re-show it there.) */
body.role-member .web-menu-item { display: none !important; }
body.role-marketing .web-menu-item { display: flex !important; }
.crm-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.crm-stats { display: flex; gap: 20px; }
.crm-stat { color: var(--text-secondary); font-size: 0.9rem; }
.crm-stat strong { color: var(--text-primary); font-size: 1.15rem; font-weight: 700; margin-right: 5px; }
.crm-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.crm-search { flex: 1; min-width: 220px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-primary); font: inherit; }
.crm-filters { display: inline-flex; gap: 4px; background: var(--gray-100); border-radius: 10px; padding: 3px; }
.crm-filter { border: none; background: none; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 0.85rem; cursor: pointer; color: var(--text-secondary); }
.crm-filter.active { background: var(--surface); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); font-weight: 600; }
.crm-count { font-size: 0.82rem; color: var(--text-muted); }
.crm-table-wrap { overflow-x: auto; }
.crm-table { width: 100%; }
.crm-cname { font-weight: 600; }
.crm-tags { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }
.crm-email { color: var(--accent, #6366f1); text-decoration: none; }
.crm-email:hover { text-decoration: underline; }
.crm-date { white-space: nowrap; color: var(--text-secondary); font-size: 0.85rem; }
.crm-badge { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.crm-sub { background: #e7f5ec; color: #1f7a45; }
.crm-unsub { background: var(--gray-100); color: var(--text-muted); }
[data-theme="dark"] .crm-sub { background: #12321f; color: #6cd39a; }
.crm-actions { white-space: nowrap; text-align: right; }
.crm-ic { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 0.95rem; padding: 4px 7px; border-radius: 6px; }
.crm-ic:hover { color: var(--text-primary); background: var(--gray-100); }
.crm-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 0.9rem; cursor: pointer; }
.crm-check input { width: 16px; height: 16px; accent-color: var(--accent, #6366f1); flex: 0 0 auto; }
.req-star { color: #b91c1c; font-weight: 700; }
/* Inline terms dropdown + fixed-fee amount in the client header panel. */
.client-terms-inline-sel { font: inherit; font-size: 0.9rem; font-weight: 700; padding: 5px 26px 5px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-primary); max-width: 190px; cursor: pointer; }
.client-terms-inline-sel:focus { outline: none; border-color: var(--accent, #6366f1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #6366f1) 30%, transparent); }
.client-fixed-amt { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; }
.client-fixed-amt .cfa-cur { color: var(--text-muted); font-weight: 700; }
.client-fixed-amt input { width: 118px; font: inherit; font-size: 0.9rem; font-weight: 700; padding: 5px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-primary); text-align: right; }
.client-fixed-amt input:focus { outline: none; border-color: var(--accent, #6366f1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #6366f1) 30%, transparent); }

/* ---- Time approval: approved entries turn the whole row green ---- */
tr.time-row-approved > td { background: #ecfdf3 !important; }
[data-theme="dark"] tr.time-row-approved > td { background: #10281c !important; }
/* Keep this a real table cell (not display:flex) so it fills the row height and
   the green/selected row highlight runs continuously behind the buttons. */
.tl-actions-cell { white-space: nowrap; text-align: right; vertical-align: middle; }
.tl-actions-cell > * { display: inline-flex; align-items: center; vertical-align: middle; }
.tl-actions-cell > * + * { margin-left: 6px; }
.tl-approve-btn { font: inherit; font-size: 0.74rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; white-space: nowrap; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
.tl-approve-btn:hover { border-color: #22a565; color: #1f7a45; }
.tl-approve-btn.is-approved { background: #1f9d57; border-color: #1f9d57; color: #fff; }
.tl-approve-btn.is-approved:hover { background: #1b8b4d; border-color: #1b8b4d; }
.tl-approved-tag { font-size: 0.75rem; font-weight: 600; color: #1f7a45; white-space: nowrap; }
[data-theme="dark"] .tl-approved-tag { color: #6cd39a; }
.tl-pending-tag { color: var(--text-muted); }
/* Onboarding / intake summary (admin client page + client portal Overview). */
.intake-summary-tbl { width: 100%; border-collapse: collapse; }
.intake-summary-tbl td { padding: 8px 4px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 0.9rem; }
.intake-summary-tbl tr:last-child td { border-bottom: none; }
.intake-summary-tbl .isl { width: 42%; color: var(--text-secondary); font-weight: 600; }
.intake-summary-tbl .isv { color: var(--text-primary); }
.intake-badge { margin-left: auto; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.intake-badge.intake-ok { background: #e9f7ee; color: #1c7a41; }
.intake-badge.intake-missing { background: #fdecea; color: #c0392b; }
[data-theme="dark"] .intake-badge.intake-ok { background: #10281c; color: #6cd39a; }
[data-theme="dark"] .intake-badge.intake-missing { background: #2a1512; color: #f0938a; }
.intake-incomplete-note { background: #fdf3e7; border: 1px solid #f2d9b3; color: #8a5a1a; border-radius: 8px; padding: 10px 12px; font-size: 0.86rem; margin-bottom: 12px; }
[data-theme="dark"] .intake-incomplete-note { background: #2a2010; border-color: #4a3a1a; color: #e0b877; }
/* "Also viewing this page" — floating presence avatar stack. */
.same-page-presence {
  position: fixed; left: 18px; bottom: 18px; z-index: 900; display: none; align-items: center; gap: 10px;
  background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px 6px 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); font-size: 0.8rem; color: var(--text-secondary);
}
[data-theme="dark"] .same-page-presence { background: #1c1f26; border-color: rgba(255,255,255,0.12); }
.spp-stack { display: flex; }
.spp-av { width: 28px; height: 28px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid var(--surface, #fff); margin-left: -8px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: #fff; background-color: var(--gray-700, #555); }
.spp-av:first-child { margin-left: 0; }
[data-theme="dark"] .spp-av { border-color: #1c1f26; }
.spp-ini { background-color: var(--gray-900, #222); }
.spp-more { background-color: var(--gray-500, #888); }
.spp-label { white-space: nowrap; }
@media (max-width: 640px) { .same-page-presence { left: 12px; bottom: 78px; } }
/* Document signatures. */
.sig-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.sig-badge.sig-waiting, .sig-chip.sig-waiting { background: #fdf3e7; color: #9a6a1a; }
.sig-badge.sig-signed, .sig-chip.sig-signed { background: #e9f7ee; color: #1c7a41; }
[data-theme="dark"] .sig-badge.sig-waiting, [data-theme="dark"] .sig-chip.sig-waiting { background: #2a2010; color: #e0b877; }
[data-theme="dark"] .sig-badge.sig-signed, [data-theme="dark"] .sig-chip.sig-signed { background: #10281c; color: #6cd39a; }
.sig-group-lbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin: 0 0 8px; }
.sig-signer { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; cursor: pointer; }
.sig-signer input { flex: none; }
.sig-signer-av { width: 30px; height: 30px; border-radius: 50%; background: var(--gray-900, #222); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; flex: none; }
.sig-signer-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sig-signer-txt span { font-size: 0.78rem; color: var(--text-secondary); }
.sig-status-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.sig-status-row:last-child { border-bottom: none; }
.sig-status-row .sig-signer-txt { margin-right: auto; }
.sig-chip { font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.card-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cp-intake-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--text-muted); cursor: pointer; }
.cp-intake-close:hover { color: var(--text-primary); }
.cp-intake-modal-card { position: relative; }
/* Admin intake editor. */
.aie-modal { max-width: 640px; width: 100%; }
.aie-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.aie-field { display: flex; flex-direction: column; gap: 5px; }
.aie-field.aie-wide { grid-column: 1 / -1; }
.aie-field > span { font-size: 0.76rem; font-weight: 600; color: var(--text-secondary); }
.aie-field input, .aie-field select, .aie-field textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-primary); }
@media (max-width: 560px) { .aie-grid { grid-template-columns: 1fr; } }
/* Search autocomplete dropdown (teammates + clients). */
.tl-search-wrap { position: relative; }
.tl-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16); padding: 6px; max-height: 320px; overflow-y: auto;
}
[data-theme="dark"] .tl-suggest { background: #1c1f26; border-color: rgba(255, 255, 255, 0.12); }
.tl-suggest-group { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 8px 10px 4px; }
.tl-suggest-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; font: inherit; color: var(--text-primary); }
.tl-suggest-item:hover { background: var(--gray-100, rgba(0,0,0,0.05)); }
.tl-suggest-name { font-size: 0.9rem; font-weight: 500; }
.tl-rejected-tag { color: #c0392b; }
[data-theme="dark"] .tl-rejected-tag { color: #f0938a; }
/* Approve + Reject sit side by side in the row's action cell. */
.tl-review { display: inline-flex; gap: 6px; }
.tl-reject-btn { font: inherit; font-size: 0.74rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; white-space: nowrap; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
.tl-reject-btn:hover { border-color: #d3564a; color: #b3352a; }
.tl-reject-btn.is-rejected { background: #c0392b; border-color: #c0392b; color: #fff; }
.tl-reject-btn.is-rejected:hover { background: #a83226; border-color: #a83226; }
tr.time-row-rejected > td { background: #fdecea !important; }
[data-theme="dark"] tr.time-row-rejected > td { background: #2a1512 !important; }
/* Click-to-edit description cell. */
.tl-desc-cell { cursor: text; }
.tl-desc-cell:hover { background: var(--gray-50, rgba(0,0,0,0.03)); }
.tl-desc-empty { color: var(--text-muted); font-style: italic; }
.tl-desc-input { width: 100%; min-width: 120px; font: inherit; padding: 5px 8px; border: 1px solid var(--gray-900); border-radius: 6px; background: var(--surface); color: var(--text-primary); }
/* Batch-bar button variants. */
.btn-success { background: #1f9d57; color: #fff; border-color: #1f9d57; }
.btn-success:hover { background: #1b8b4d; border-color: #1b8b4d; }
.btn-warn { background: #e08a2b; color: #fff; border-color: #e08a2b; }
.btn-warn:hover { background: #c9781f; border-color: #c9781f; }

/* ============ DIRECTORY LIST VIEWS (team + clients) ============ */
.team-grid, .clients-grid { display: block; }
.directory-card { padding: 0; overflow: hidden; }
.directory-table { width: 100%; border-collapse: collapse; }
/* Row dividers are painted as inset box-shadows, not layout borders. Under
   html { zoom: 0.9 } a 1px border becomes 0.9px and each row rounds to the
   pixel grid differently — some hairlines look thin, some doubled. A painted
   shadow rasterizes uniformly at any zoom, so every divider reads identically. */
.directory-table thead th {
  text-align: left;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-secondary); font-weight: 600;
  padding: 14px 18px; box-shadow: inset 0 -1px 0 0 var(--border);
  background: var(--gray-50);
}
.directory-table tbody td { padding: 14px 18px; box-shadow: inset 0 -1px 0 0 var(--border); font-size: .92rem; vertical-align: middle; }
.directory-table tbody tr:last-child td { box-shadow: none; }
.directory-table tbody tr:hover:not(.dir-edit-row):not(.dir-del-row) { background: var(--gray-50); }
.dir-actions-col { width: 90px; }

/* Sortable column headers */
.directory-table th.dir-sort { cursor: pointer; user-select: none; transition: color .12s, background .12s; }
.directory-table th.dir-sort:hover { color: var(--text-primary); background: var(--gray-100); }
.directory-table th.dir-sort:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -2px; }
.directory-table th.dir-sort.is-sorted { color: var(--text-primary); }
.dir-th-in { display: inline-flex; align-items: center; gap: 5px; }
.dir-sort-ic { font-size: .78rem; line-height: 1; opacity: .85; }
.directory-table th.dir-sort:not(.is-sorted) .dir-sort-ic::before { content: '↕'; opacity: .28; font-size: .78rem; }

.dir-name { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.dir-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--text-primary); color: var(--bg-primary, #fff);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; flex: 0 0 auto;
}
.dir-email { color: var(--text-secondary); }

.access-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.access-admin { background: #eef2ff; color: #4338ca; }
.access-member { background: var(--gray-100); color: var(--text-secondary); }
.access-intake { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; white-space: nowrap; }
[data-theme="dark"] .access-intake { background: #2a1a0e; color: #fdba74; border-color: #7c2d12; }

.dir-rate-cell { white-space: nowrap; }
.dir-rate-cur { color: var(--text-secondary); }
.dir-rate {
  width: 64px; padding: 6px 8px; margin: 0 2px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: .9rem; background: var(--bg-primary, #fff); color: var(--text-primary);
}
.dir-rate:focus { outline: none; border-color: var(--text-primary); }
.dir-rate-unit { color: var(--text-secondary); font-size: .82rem; }
.dir-title-input {
  width: 100%; max-width: 220px; padding: 6px 8px;
  border: 1px solid transparent; border-radius: 8px; margin: -6px -8px;
  font-size: .9rem; background: transparent; color: var(--text-primary); font-family: inherit;
}
.dir-title-input:hover { border-color: var(--border); }
.dir-title-input:focus { outline: none; border-color: var(--text-primary); background: var(--bg-primary, #fff); }

.dir-actions { display: flex; gap: 6px; justify-content: flex-end; }
.dir-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-primary, #fff);
  color: var(--text-secondary); cursor: pointer; transition: all .15s ease;
}
.dir-btn svg { width: 15px; height: 15px; }
.dir-btn:hover { color: var(--text-primary); border-color: var(--gray-400); }
.dir-btn-danger:hover { color: #d33b3b; border-color: #f3b4b4; background: #fdf2f2; }

.dir-edit-row td { background: var(--gray-50); }
.dir-edit-row input, .dir-edit-row select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; font-size: .9rem; background: var(--bg-primary, #fff); color: var(--text-primary);
}
.dir-edit-row input:focus, .dir-edit-row select:focus { outline: none; border-color: var(--text-primary); }

.dir-del-row td { background: #fdf2f2; }
.dir-del-confirm { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dir-del-actions { display: flex; gap: 8px; }
.btn-danger { background: #d33b3b; color: #fff; border-color: #d33b3b; }
.btn-danger:hover { background: #b92d2d; border-color: #b92d2d; }

[data-theme="dark"] .directory-table thead th { background: #161616; }
[data-theme="dark"] .directory-table tbody tr:hover:not(.dir-edit-row):not(.dir-del-row) { background: #161616; }
[data-theme="dark"] .dir-avatar { background: #e5e5e5; color: #0a0a0a; }
[data-theme="dark"] .access-admin { background: #1e1b4b; color: #c7d2fe; }
[data-theme="dark"] .access-member { background: #1e1e1e; color: #aaa; }
[data-theme="dark"] .dir-rate, [data-theme="dark"] .dir-edit-row input, [data-theme="dark"] .dir-edit-row select { background: #0f0f0f; border-color: #2a2a2a; }
[data-theme="dark"] .dir-btn { background: #0f0f0f; border-color: #2a2a2a; }
[data-theme="dark"] .dir-btn-danger:hover { background: #2a1515; border-color: #5a2a2a; color: #f87171; }
[data-theme="dark"] .dir-edit-row td { background: #161616; }
[data-theme="dark"] .dir-del-row td { background: #2a1515; }
/* ============ LENIS SMOOTH SCROLL ============ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ============ ACCESSIBILITY & STATE HELPERS ============ */

/* Skip link — hidden until focused, then pinned top-left. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 10001;
  background: var(--black);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }

/* Visible keyboard focus ring across interactive elements. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.nav-item:focus-visible,
.matter-row:focus-visible,
.invoice-row:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* "Demo data" / "Illustrative" source badge on finance cards. */
.demo-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 8px;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--gray-100);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.demo-tag.live { color: #fff; background: var(--black); border-color: var(--black); }
[data-theme="dark"] .demo-tag { background: #161616; border-color: #2a2a2a; }
[data-theme="dark"] .demo-tag.live { background: #fff; color: #111; }

/* Inline "couldn't load — Retry" block. */
.load-error {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--text-secondary);
  font-size: 0.88rem;
  padding: 12px 0;
}

/* Hide admin-only controls from member sessions. */
body.role-member .admin-only { display: none !important; }

/* Honour reduced-motion: drop the splash animation and large transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .splash-bar { animation: none; width: 100%; }
}

/* ============ COLLAPSIBLE SIDEBAR ============ */
:root { --sidebar-collapsed: 76px; }

.sidebar-collapse-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0; padding: 0;
  border: none; background: none; color: var(--gray-300);
  border-radius: 9px; cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.sidebar-collapse-btn:hover { color: #fff; background: var(--gray-800); }
.sidebar-mark-img { width: 34px; height: 34px; border-radius: 9px; display: block; }
.sidebar { transition: width 0.2s ease, transform 0.3s ease; }
.main-content { transition: margin-left 0.2s ease; }

.app.nav-collapsed .sidebar { width: var(--sidebar-collapsed); }
.app.nav-collapsed .main-content { margin-left: var(--sidebar-collapsed); }
.app.nav-collapsed .sidebar-logo,
.app.nav-collapsed .nav-item span,
.app.nav-collapsed .sidebar-user-info,
.app.nav-collapsed .sidebar-user-actions { display: none; }
.app.nav-collapsed .sidebar-mark { display: block; margin: 0 auto; }
/* Collapsed rail shows just the W — hide the hamburger/collapse toggle. */
.app.nav-collapsed .sidebar-collapse-btn { display: none; }
.app.nav-collapsed .sidebar-header { justify-content: center; padding: 22px 0; }
.app.nav-collapsed .nav-item { justify-content: center; padding: 12px 0; gap: 0; }
.app.nav-collapsed .sidebar-user { flex-direction: column; gap: 8px; padding: 10px 4px; }
.app.nav-collapsed .sidebar-nav { padding: 16px 10px; }

/* ============ USER POPUP MENU ============ */
.sidebar-footer { position: relative; }
.user-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 8px;
  min-width: 190px;
  background: var(--gray-900);
  border: 1px solid var(--gray-800);
  border-radius: var(--radius-sm);
  padding: 6px;
  z-index: 200;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.user-menu.open { display: block; }
.user-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; background: none; cursor: pointer;
  color: var(--gray-300); font-family: var(--font-body); font-size: 0.85rem;
  border-radius: var(--radius-xs); text-align: left;
}
.user-menu-item:hover { background: var(--gray-800); color: var(--white); }
.user-menu-item svg { flex-shrink: 0; }

/* ============ HOME: ONLINE NOW ============ */
.home-online { display: flex; flex-wrap: wrap; gap: 10px; }
.online-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 7px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
}
.online-chip .online-avatar { width: 30px; height: 30px; font-size: 0.66rem; }
.online-chip-info { display: flex; flex-direction: column; line-height: 1.25; }
.online-chip .online-name { font-size: 0.82rem; font-weight: 500; color: var(--text-primary); }
.online-chip .online-role { font-size: 0.7rem; color: var(--text-secondary); }

/* Topbar presence popup ("Online now") */
.presence { position: relative; }
.presence-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; cursor: pointer; }
.presence-btn:hover { color: var(--text-primary); border-color: var(--gray-400); }
.presence-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); flex-shrink: 0; }
.presence-count { font-weight: 700; color: var(--text-primary); }
.presence-popup { position: absolute; top: calc(100% + 8px); right: 0; min-width: 250px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,0.14); padding: 12px; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.15s ease, transform 0.15s ease; }
.presence-popup.open { opacity: 1; visibility: visible; transform: translateY(0); }
.presence-popup-header { margin-bottom: 10px; }
.presence-popup-header h3 { font-size: 0.9rem; margin: 0; }
.presence-popup .home-online { flex-direction: column; flex-wrap: nowrap; gap: 4px; max-height: 320px; overflow-y: auto; }
.presence-popup .online-chip { border: none; padding: 6px; border-radius: 8px; width: 100%; }
.presence-popup .online-chip:hover { background: #f3f3f5; }

/* Clerk — AI assistant chat page */
.clerk { display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 420px; max-width: 820px; margin: 0 auto; }
.clerk-messages { flex: 1; overflow-y: auto; padding: 8px 4px 16px; }
.clerk-empty { text-align: center; max-width: 540px; margin: 56px auto; color: var(--text-secondary); }
.clerk-empty-title { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.clerk-suggestions { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.clerk-suggestion { padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-primary); cursor: pointer; font-family: var(--font-body); font-size: 0.9rem; text-align: left; }
.clerk-suggestion:hover { border-color: var(--gray-400); }

/* Ask Clerk — simple monochrome glass search bar, pinned to the bottom of Home.
   The bar keeps a constant full width; sample questions only reveal on focus. */
/* Ask Clerk stays pinned to the bottom of the Home screen while you scroll.
   Right padding keeps the input clear of the floating Log Time button. */
#page-home .clerk-bar {
  position: sticky; bottom: 16px; z-index: 40; margin-top: 40px; padding-right: 74px;
}
#page-home .clerk-bar-form { background: var(--surface); box-shadow: 0 8px 30px rgba(16, 18, 24, 0.12); }
@media (max-width: 640px) { #page-home .clerk-bar { padding-right: 0; bottom: 8px; } }
.clerk-bar { position: relative; padding-top: 10px; }
/* Inline "Log time" button that stacks above the Ask Clerk bar. Desktop uses the
   floating FAB instead, so this only shows on the mobile home (see media query). */
.home-logtime-btn { display: none; }
.clerk-bar-form {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 8px 30px rgba(16, 18, 24, 0.08);
}
.clerk-bar-form:focus-within { border-color: var(--gray-500); }
.clerk-bar-icon { color: var(--text-secondary); flex: 0 0 auto; }
.clerk-bar-form input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: 0.95rem; color: var(--text-primary); }
.clerk-bar-form input::placeholder { color: var(--text-secondary); }
.clerk-bar-btn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--gray-900); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.15s; }
.clerk-bar-btn:hover { opacity: 0.85; }
.clerk-bar-suggestions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 10px;
  max-height: 0; opacity: 0; overflow: hidden; transform: translateY(6px);
  transition: max-height 0.22s ease, opacity 0.18s ease, transform 0.18s ease; pointer-events: none;
}
.clerk-bar.focused .clerk-bar-suggestions { max-height: 90px; opacity: 1; transform: translateY(0); pointer-events: auto; }
.clerk-bar-suggestions .clerk-suggestion { font-size: 0.82rem; padding: 8px 12px; border-radius: 999px; }
[data-theme="dark"] .clerk-bar-form { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .clerk-bar-btn { background: #e5e5e5; color: #0a0a0a; }
.clerk-msg { display: flex; margin: 10px 0; }
.clerk-msg-user { justify-content: flex-end; }
.clerk-bubble { max-width: 80%; padding: 12px 16px; border-radius: 16px; font-size: 0.92rem; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; }
.clerk-msg-user .clerk-bubble { background: var(--gray-900); color: #fff; border-bottom-right-radius: 4px; }
.clerk-msg-assistant .clerk-bubble { background: var(--surface); border: 1px solid var(--border); color: var(--text-primary); border-bottom-left-radius: 4px; }

/* Rich markdown inside Clerk answers */
.clerk-bubble .clerk-line { margin: 0; }
.clerk-bubble .clerk-gap { height: 8px; }
.clerk-bubble .clerk-h { margin: 10px 0 6px; line-height: 1.25; }
.clerk-bubble h3.clerk-h { font-size: 1rem; }
.clerk-bubble h4.clerk-h { font-size: 0.92rem; }
.clerk-bubble h5.clerk-h { font-size: 0.86rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.clerk-bubble .clerk-h:first-child { margin-top: 0; }
.clerk-bubble .clerk-ul, .clerk-bubble .clerk-ol { margin: 6px 0; padding-left: 20px; }
.clerk-bubble .clerk-ul li, .clerk-bubble .clerk-ol li { margin: 2px 0; }
.clerk-bubble .clerk-hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
.clerk-bubble code { background: var(--gray-100); padding: 1px 5px; border-radius: 5px; font-size: 0.85em; }
.clerk-table-wrap { overflow-x: auto; margin: 8px 0; }
.clerk-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.clerk-table th, .clerk-table td { padding: 7px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.clerk-table thead th { background: var(--gray-50); font-weight: 600; text-align: left; color: var(--text-secondary); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; }
.clerk-table tbody tr:last-child td { border-bottom: none; }
[data-theme="dark"] .clerk-table thead th { background: #161616; }
[data-theme="dark"] .clerk-bubble code { background: #1e1e1e; }
.clerk-input { display: flex; gap: 10px; align-items: flex-end; padding: 12px 4px; border-top: 1px solid var(--border); }
.clerk-input textarea { flex: 1; resize: none; max-height: 160px; line-height: 1.45; }
.clerk-typing { display: inline-flex; gap: 4px; align-items: center; }
.clerk-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-400); animation: clerkBlink 1.2s infinite both; }
.clerk-typing span:nth-child(2) { animation-delay: 0.2s; }
.clerk-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes clerkBlink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

/* Circular profile-picture crop modal */
.avatar-crop-stage { position: relative; width: 280px; height: 280px; max-width: 100%; margin: 0 auto; border-radius: 50%; overflow: hidden; background: #000; cursor: grab; touch-action: none; user-select: none; }
.avatar-crop-stage:active { cursor: grabbing; }
.avatar-crop-stage img { position: absolute; top: 0; left: 0; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.avatar-crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.75); pointer-events: none; }
.avatar-crop-zoom-label { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 0.85rem; color: var(--text-secondary); }
.avatar-crop-zoom-label input[type="range"] { flex: 1; }

/* On mobile the sidebar is an off-canvas drawer — never show the icon-rail
   collapse there (labels must remain visible when the drawer is open). */
@media (max-width: 768px) {
  .sidebar-collapse-btn { display: flex; }
  .app.nav-collapsed .sidebar { width: var(--sidebar-width); }
  .app.nav-collapsed .main-content { margin-left: 0; }
  .app.nav-collapsed .sidebar-logo { display: block; }
  .sidebar-mark, .app.nav-collapsed .sidebar-mark { display: none; }
  .app.nav-collapsed .nav-item span { display: inline; }
  .app.nav-collapsed .sidebar-user-info { display: flex; }
  .app.nav-collapsed .sidebar-user-actions { display: flex; }
  .app.nav-collapsed .nav-item { justify-content: flex-start; padding: 12px 16px; gap: 14px; }
  .app.nav-collapsed .sidebar-header { justify-content: flex-start; padding: 24px 20px; }
  .app.nav-collapsed .sidebar-user { flex-direction: row; gap: 10px; padding: 10px 12px; }
  .app.nav-collapsed .sidebar-nav { padding: 16px 12px; }
}

/* ============ CUSTOM SELECT ============ */
.cselect { position: relative; width: 100%; }
.maf-row .cselect, .time-row .cselect { flex: 1; }
.cselect select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cselect-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-primary); font-family: var(--font-body); font-size: 0.9rem;
  cursor: pointer; text-align: left;
}
.cselect-btn:hover { border-color: var(--gray-400); }
.cselect-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Empty option = placeholder: show the field's title in muted placeholder tone. */
.cselect-btn.cselect-placeholder .cselect-label { color: var(--text-secondary); }
.cselect-chev { flex-shrink: 0; color: var(--text-secondary); transition: transform 0.15s; }
.cselect.open .cselect-chev { transform: rotate(180deg); }
.cselect-list {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); z-index: 300;
  max-height: 260px; overflow-y: auto; padding: 4px; box-sizing: border-box; min-width: 180px;
}
.cselect.open .cselect-list { display: block; }
.cselect-search {
  position: sticky; top: 0; z-index: 1;
  display: block; width: 100%; box-sizing: border-box;
  margin: 0 0 6px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--surface); color: var(--text-primary);
  font-family: var(--font-body); font-size: 0.85rem;
}
.cselect-search:focus { outline: none; border-color: var(--text-primary); }
.cselect-group { padding: 8px 10px 4px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--text-secondary); }
.cselect-opt { padding: 9px 10px; border-radius: var(--radius-xs); cursor: pointer; font-size: 0.88rem; white-space: nowrap; display: flex; align-items: center; }
.cselect-opt:hover { background: var(--gray-100); }
.cselect-opt.selected { background: var(--gray-100); font-weight: 600; }

/* Colored dots (status dropdown) */
/* Combined Client → Matter picker (Log Time) — one control, two levels. */
.cmpick { position: relative; }
.cmpick-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body);
  font-size: 0.9rem; cursor: pointer; text-align: left; min-height: 42px;
}
.cmpick-trigger:hover { border-color: var(--gray-400); }
.cmpick.open .cmpick-trigger { border-color: var(--gray-500); }
.cmpick-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmpick-placeholder { color: var(--text-secondary); }
.cmpick-chev { color: var(--text-secondary); flex: 0 0 auto; transition: transform 0.15s; }
.cmpick.open .cmpick-chev { transform: rotate(180deg); }
.cmpick-panel {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 12px 34px rgba(16, 18, 24, 0.16); max-height: 300px; overflow-y: auto; padding: 5px;
}
.cmpick.open .cmpick-panel { display: block; }
.cmpick-head { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); padding: 6px 8px 4px; }
.cmpick-opt {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 9px 10px; border: none; background: none; border-radius: var(--radius-xs);
  color: var(--text-primary); font: inherit; font-size: 0.9rem; cursor: pointer;
}
.cmpick-opt:hover, .cmpick-opt.is-sel { background: var(--gray-100); }
.cmpick-opt.is-sel { font-weight: 600; }
.cmpick-opt-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmpick-av { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background-size: cover; background-position: center; display: inline-flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700; color: #fff; background-color: var(--gray-900); }
.cmpick-back {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  padding: 8px 10px; border: none; background: none; border-bottom: 1px solid var(--border);
  color: var(--text-secondary); font: inherit; font-weight: 600; font-size: 0.82rem; cursor: pointer; margin-bottom: 4px;
}
.cmpick-back:hover { color: var(--text-primary); }
.cmpick-empty { padding: 12px 10px; color: var(--text-secondary); font-size: 0.85rem; }
[data-theme="dark"] .cmpick-opt:hover, [data-theme="dark"] .cmpick-opt.is-sel { background: rgba(255, 255, 255, 0.06); }

.cselect-dot, .status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; margin-right: 8px; vertical-align: middle; background: var(--gray-400); }
.dot-active { background: #22c55e; }
.dot-pending { background: #f59e0b; }
.dot-completed { background: #9ca3af; }
.dot-standby { background: #f59e0b; }
.cselect-opt { display: flex; align-items: center; }
.cselect-inline { width: auto; display: inline-block; min-width: 130px; }
.cselect-inline .cselect-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 0.82rem; border-radius: 999px; }
.cselect-inline .cselect-label { display: inline-flex; align-items: center; }
.status-pill { display: inline-flex; align-items: center; font-size: 0.82rem; }

/* Clients page: By Client / By Matter single toggle switch */
.dir-view-toggle { display: inline-flex; margin-bottom: 20px; }
.dir-view-switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; margin-bottom: 20px; user-select: none; }
.dir-view-switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.dir-view-switch .switch-track { position: relative; width: 44px; height: 24px; border-radius: 999px; background: var(--gray-300); transition: background 0.18s ease; flex: 0 0 auto; }
.dir-view-switch .switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.18s ease; }
.dir-view-switch input:checked + .switch-track { background: var(--text-primary); }
.dir-view-switch input:checked + .switch-track .switch-thumb { transform: translateX(20px); }
.dir-view-switch .switch-label { font-size: 0.9rem; font-weight: 500; }
[data-theme="dark"] .dir-view-switch .switch-track { background: #2a2a2a; }
[data-theme="dark"] .dir-view-switch .switch-thumb { background: #e5e5e5; }

/* Batch-select bar (clients / matters) */
.bulkbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.88rem; }
.dir-check-col { width: 38px; text-align: center; }
.cl-select, .mt-select, #cl-select-all, #mt-select-all { width: 16px; height: 16px; cursor: pointer; }

/* Users page: per-user role selector */
.user-role-select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-primary); font: inherit; font-size: 0.82rem; cursor: pointer; }
.user-role-select:hover { border-color: var(--gray-400); }
.user-role-select:disabled { opacity: 0.6; cursor: default; }
.user-role-select.is-incoming { border-color: var(--gray-900); font-weight: 600; }
.users-tabs { margin-top: 0; }
.users-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--gray-200); color: var(--text-secondary); font-size: 0.68rem; font-weight: 700; vertical-align: middle; }
.detail-tab.active .users-tab-count { background: var(--gray-900); color: #fff; }

/* Per-client retainer card */
.ret-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 0.86rem; user-select: none; }
.ret-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ret-switch .switch-track { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--gray-300); transition: background 0.18s ease; flex: 0 0 auto; }
.ret-switch .switch-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.18s ease; }
.ret-switch input:checked + .switch-track { background: var(--gray-900); }
.ret-switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); }
.ret-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; }
@media (max-width: 760px) { .ret-grid { grid-template-columns: repeat(2, 1fr); } }
.ret-fee { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ret-fee-gross { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; font-variant-numeric: tabular-nums; }
.ret-toggles { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.ret-usage { margin: 12px 0 16px; }
.ret-usage-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.86rem; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.ret-bar { height: 7px; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.ret-bar span { display: block; height: 100%; background: var(--gray-900); transition: width 0.4s ease; }
.ret-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Named-retainer rows */
.ret-usage-line { margin-bottom: 12px; }
.ret-editor { border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; background: var(--surface-2, rgba(0,0,0,0.02)); }
.ret-editor-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 12px; }
.ret-editor .form-group { margin-bottom: 12px; }
.ret-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ret-row:last-child { border-bottom: none; }
.ret-row.is-off { opacity: 0.6; }
.ret-row-main { flex: 1 1 240px; min-width: 0; }
.ret-row-name { font-weight: 700; font-size: 0.98rem; display: flex; align-items: center; gap: 8px; }
.ret-off-pill { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); background: var(--gray-200); border-radius: 999px; padding: 1px 8px; }
.ret-row-meta { font-size: 0.82rem; color: var(--text-secondary); margin-top: 3px; font-variant-numeric: tabular-nums; }
.ret-row-rc { font-size: 0.74rem; color: var(--text-secondary); margin-top: 6px; font-variant-numeric: tabular-nums; }
.ret-row-rc strong { color: var(--text-primary); }
.ret-rc-tag { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; margin-right: 6px; }
.ret-row-flags { display: flex; gap: 6px; margin-top: 6px; }
.ret-flag { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.ret-row-fee { flex: 0 0 auto; text-align: right; }
.ret-row-fee .ret-fee { font-size: 1.15rem; }
.ret-fee-per { font-size: 0.72rem; font-weight: 500; color: var(--text-secondary); }
.ret-row-actions { flex: 1 1 100%; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (min-width: 880px) { .ret-row-actions { flex: 0 0 auto; } }
/* Retainer rate card (editor) */
.rc-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 4px 0 16px; background: var(--surface-2, rgba(0,0,0,0.015)); }
.rc-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary); font-weight: 700; margin-bottom: 10px; }
.rc-tier { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.rc-lab { font-size: 0.82rem; color: var(--text-secondary); flex: 1 1 220px; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-chip { font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); background: var(--surface); }
.rc-chip.on { background: var(--gray-900); color: #fff; border-color: var(--gray-900); }
.rc-calc { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 12px; font-size: 0.86rem; }
.rc-calc strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ret-mode-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; background: var(--surface); }
.ret-mode-opt { font: inherit; font-size: 0.82rem; font-weight: 600; padding: 6px 14px; border: none; border-radius: 999px; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background .15s ease, color .15s ease; }
.ret-mode-opt.active { background: var(--gray-900); color: #fff; }
[data-theme="dark"] .ret-switch .switch-track { background: #2a2a2a; }
[data-theme="dark"] .ret-switch input:checked + .switch-track { background: #e5e5e5; }
[data-theme="dark"] .ret-switch input:checked + .switch-track .switch-thumb { background: #0a0a0a; }

/* Assigned Team rate table (matter + client detail) */
.team-rate-table th:nth-child(3), .team-rate-table td:nth-child(3) { width: 110px; }
.team-rate-table th:nth-child(4), .team-rate-table td:nth-child(4) { width: 150px; }
.team-rate-table .client-team-member { gap: 9px; }
.assign-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.assign-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; cursor: pointer; }
.assign-row:hover { background: var(--gray-100); }
.assign-row input { width: 16px; height: 16px; flex: 0 0 auto; }
.assign-row .assign-name { font-weight: 600; }
/* Visual team picker — avatar cards, click to select */
.assign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 12px; max-height: 60vh; overflow-y: auto; padding: 2px; }
.assign-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; text-align: center; font: inherit; color: var(--text-primary); transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease; }
.assign-card:hover:not(.is-added) { border-color: var(--gray-400); }
.assign-card:active:not(.is-added) { transform: scale(0.98); }
.assign-card.is-selected { border-color: var(--gray-900); box-shadow: inset 0 0 0 1px var(--gray-900); }
.assign-card.is-added { opacity: .5; cursor: default; }
.assign-avatar { width: 54px; height: 54px; border-radius: 50%; background-size: cover; background-position: center; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; color: #fff; background-color: var(--gray-900); flex: 0 0 auto; }
.assign-card-name { font-weight: 600; font-size: .86rem; line-height: 1.2; }
.assign-card-role { font-size: .72rem; color: var(--text-secondary); line-height: 1.2; }
.assign-badge { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--gray-200); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; line-height: 1; transition: background .15s ease, color .15s ease; }
.assign-card.is-selected .assign-badge, .assign-card.is-added .assign-badge { background: var(--gray-900); color: #fff; }
/* Engagement-letter row in client Documents */
.eng-doc-row td { background: var(--gray-50); }
.eng-badge { display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.eng-badge.is-signed { background: #111; color: #fff; }
.eng-badge.is-unsigned { background: var(--gray-200); color: var(--text-secondary); }
.rate-field { display: inline-flex; align-items: center; gap: 1px; border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; background: var(--surface); }
.rate-field:focus-within { border-color: var(--gray-500); }
.rate-pre, .rate-suf { color: var(--text-secondary); font-size: 0.8rem; }
.rate-input { width: 50px; border: none; background: none; color: var(--text-primary); font: inherit; font-size: 0.86rem; text-align: right; padding: 0 2px; -moz-appearance: textfield; }
.rate-input:focus { outline: none; }
.rate-input::-webkit-outer-spin-button, .rate-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Delete-invoice button (admin, on the invoice detail toolbar) */
.inv-delete-btn { color: #b91c1c; }
.inv-delete-btn:hover { background: #fdecec; border-color: #f0c4c4; }
[data-theme="dark"] .inv-delete-btn { color: #f87171; }
[data-theme="dark"] .inv-delete-btn:hover { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.4); }

/* Clickable client name -> client detail page */
.dir-name-link { cursor: pointer; border-radius: var(--radius-xs); }
.dir-name-link:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Collapsed sidebar expands on hover (flyout) — overlays content, snaps back
   on mouse-leave, and leaves the saved collapsed preference untouched.
   Only on real pointer devices at desktop widths. */
@media (hover: hover) and (min-width: 769px) {
  .app.nav-collapsed .sidebar:hover { width: var(--sidebar-width); z-index: 200; box-shadow: 6px 0 28px rgba(0, 0, 0, 0.22); }
  .app.nav-collapsed .sidebar:hover .sidebar-logo { display: block; }
  .app.nav-collapsed .sidebar:hover .sidebar-mark { display: none; }
  .app.nav-collapsed .sidebar:hover .nav-item span { display: inline; }
  .app.nav-collapsed .sidebar:hover .sidebar-user-info { display: flex; }
  .app.nav-collapsed .sidebar:hover .nav-item { justify-content: flex-start; padding: 12px 16px; gap: 14px; }
  .app.nav-collapsed .sidebar:hover .sidebar-header { justify-content: flex-start; padding: 22px 20px; }
  .app.nav-collapsed .sidebar:hover .sidebar-user { flex-direction: row; gap: 10px; padding: 10px 12px; }
  .app.nav-collapsed .sidebar:hover .sidebar-user-actions { display: flex; }
  .app.nav-collapsed .sidebar:hover .sidebar-nav { padding: 16px 12px; }
  /* When the rail auto-expands on hover, push the content over to match. */
  .app.nav-collapsed .sidebar:hover ~ .main-content { margin-left: var(--sidebar-width); }
}

/* ============ TIME LOGGER (merged timer + form) ============ */
.time-logger { margin-bottom: 24px; }
.time-logger .card-body { display: grid; grid-template-columns: 0.85fr 1.5fr; gap: 28px; align-items: stretch; }
/* Timer hundredths — slightly smaller & muted so the seconds stay dominant. */
.time-ms { font-size: 0.62em; color: var(--text-secondary); font-weight: 500; }
/* Shimmering context line under the timer */
.time-insight {
  margin-top: 12px; font-size: 0.82rem; line-height: 1.4; max-width: 280px;
  background: linear-gradient(100deg, var(--text-secondary) 30%, var(--text-primary) 50%, var(--text-secondary) 70%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: timeShimmer 3.2s linear infinite;
}
@keyframes timeShimmer { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { .time-insight { animation: none; color: var(--text-secondary); } }
.time-popout-btn { display: inline-flex; align-items: center; gap: 6px; }
/* Floating Log Time launcher (bottom-right) */
/* Time page: the inline timer card is hidden (the timer lives in the pop-out);
   a featured CTA card opens it. When popped out the card leaves #page-time, so
   this only hides it while it sits inline. */
#page-time > #time-logger-card { display: none; }
.time-cta-card {
  display: flex; align-items: center; gap: 18px; width: 100%; text-align: left;
  padding: 22px 24px; margin-bottom: 18px; cursor: pointer; border: 1px solid var(--border);
  transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}
.time-cta-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(17, 24, 39, 0.10); border-color: var(--gray-500); }
.time-cta-icon {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  background: var(--gray-900); color: #fff; display: grid; place-items: center;
}
[data-theme="dark"] .time-cta-icon { background: #fff; color: #0a0a0a; }
.time-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.time-cta-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: var(--text-primary); }
.time-cta-sub { font-size: 0.9rem; color: var(--text-secondary); }
.time-cta-arrow { flex: 0 0 auto; color: var(--text-secondary); transition: transform 0.16s; }
.time-cta-card:hover .time-cta-arrow { transform: translateX(3px); color: var(--text-primary); }

.log-time-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 500;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--gray-900); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.28); transition: transform 0.16s, box-shadow 0.16s;
}
/* On Home the Ask Clerk bar pins bottom-right; drop the FAB to line its center
   up with that bar (bar center sits ~48px from the bottom when pinned). */
.home-active .log-time-fab { bottom: 20px; }
.log-time-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(17, 24, 39, 0.34); }
.log-time-fab.hidden { display: none; }
/* While the running-timer HUD is in the top bar, drop the redundant bottom-right FAB. */
body.timer-live .log-time-fab { display: none; }
[data-theme="dark"] .log-time-fab { background: #fff; color: #0a0a0a; }
/* Centered modal popup on desktop (dimmed backdrop via the big spread shadow);
   full-screen sheet on mobile (see the media query below). */
.log-time-pop {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 501;
  width: min(920px, calc(100vw - 40px)); max-height: min(90vh, 760px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16, 18, 24, 0.28), 0 0 0 100vmax rgba(15, 17, 22, 0.42);
  display: none; animation: popFade 0.16s ease;
}
.log-time-pop.open { display: block; }
@keyframes popFade { from { opacity: 0; } to { opacity: 1; } }
/* Backdrop behind the mobile tray (desktop keeps the pop's own spread-shadow dim). */
.log-time-backdrop {
  position: fixed; inset: 0; z-index: 500; background: rgba(15, 17, 22, 0.5);
  opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s;
  display: none;
}
.log-time-backdrop.open { opacity: 1; visibility: visible; }
/* While the tray/pop is open, FREEZE the page (position:fixed) so a pull-down
   drags the tray and closes it, never scrolling/refreshing the page behind. JS
   sets body.top to -scrollY and restores the scroll position on close. */
body.lt-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; overscroll-behavior: none; }
.log-time-pop, .log-time-pop .time-fields { overscroll-behavior: contain; }
.log-time-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.log-time-pop-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }
.log-time-pop-head-actions { display: inline-flex; align-items: center; gap: 6px; }
.log-time-pop-window { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 4px; border-radius: 8px; display: inline-flex; }
.log-time-pop-window:hover { color: var(--text-primary); background: var(--gray-100); }
/* Minimize reads as a labelled pill — "Keep running" — so it's obvious the
   timer survives and lives on in the top bar, not just a bare chevron. */
.log-time-pop-min { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  background: var(--gray-100); border: 1px solid var(--border); color: var(--text-secondary);
  padding: 5px 11px 5px 9px; border-radius: 999px; font: inherit; font-size: 0.78rem; font-weight: 600; }
.log-time-pop-min:hover { color: var(--text-primary); background: var(--gray-200); }
.log-time-pop-min svg { flex: 0 0 auto; }
.log-time-pop-min-label { white-space: nowrap; }
/* Kiosk timer window (opened via "new window") — the popup fills it. */
.is-timer-window .sidebar, .is-timer-window .topbar, .is-timer-window .page-container, .is-timer-window .log-time-fab { display: none !important; }
.is-timer-window .main-content { margin-left: 0; }
.is-timer-window .log-time-pop { inset: 0; transform: none; width: 100vw; max-width: 100vw; max-height: 100vh; height: 100dvh; border: none; border-radius: 0; box-shadow: none; }
.is-timer-window .log-time-pop-window { display: none; }
.log-time-pop-dock { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--text-secondary); padding: 0 4px; }
.log-time-pop-dock:hover { color: var(--text-primary); }
.log-time-pop .time-logger { margin: 0; border: none; box-shadow: none; }
.log-time-pop .time-logger > .card-header { display: none; }
.log-time-pop .time-timer {
  border-right: none; padding: 20px;
  background: var(--gray-900); color: #fff; border-radius: var(--radius); justify-content: center;
}
/* Desktop only: the clock is a FIXED-size square on the left so it never grows/
   shrinks as the fields column changes height. (Mobile handles it in the tray
   media query below.) */
@media (min-width: 641px) {
  /* Left: the clock fills the popup's full height (spans both rows). Right: the
     fields, then the Start/Reset/Log keypad directly beneath the Description. */
  .log-time-pop .time-logger .card-body {
    grid-template-columns: 360px 1fr; grid-template-rows: auto auto; align-items: stretch;
  }
  .log-time-pop .time-timer {
    grid-column: 1; grid-row: 1 / 3; align-self: stretch;
    width: 360px; height: auto; aspect-ratio: auto;
  }
  .log-time-pop .time-fields { grid-column: 2; grid-row: 1; }
  .log-time-pop .time-actions { grid-column: 2; grid-row: 2; align-self: start; margin-top: 14px; }
}
.log-time-pop .time-timer .time-display { color: #fff; }
.log-time-pop .time-timer .time-insight { max-width: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0.45) 30%, #fff 50%, rgba(255, 255, 255, 0.45) 70%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; }
.log-time-pop .time-display { font-size: 2.4rem; margin: 2px 0 12px; }
/* Start / Reset / Log Time share one action bar spanning the card's full width. */
/* Desktop: the keypad sits under the Description in the right column (not a full
   row spanning under the clock). Mobile lays it out as a flex bar (media query). */
.log-time-pop .time-actions { grid-column: 2; margin-top: 4px; }
.log-time-pop #time-timer-hint { display: none; }
.log-time-pop .time-insight { margin-top: 7px; font-size: 0.75rem; }
.log-time-pop .card-body { padding: 14px 16px 16px; }
.log-time-pop .time-fields { gap: 10px; }
.log-time-pop .time-fields label { margin-bottom: 3px; font-size: 0.78rem; }
.log-time-pop .time-fields input, .log-time-pop .time-fields select,
.log-time-pop .time-fields textarea, .log-time-pop .time-fields .cselect-trigger { padding-top: 8px; padding-bottom: 8px; }
/* Keep the Client (with logo) and Matter select boxes the same height so they
   line up, whether or not the option carries an avatar. */
.log-time-pop .time-fields .cselect-trigger { min-height: 42px; align-items: center; box-sizing: border-box; }
.log-time-pop .time-fields .cselect-avatar { width: 20px; height: 20px; flex: 0 0 auto; }
.log-time-pop #time-desc { min-height: 42px; }
.log-time-pop .time-fields { gap: 8px; }
.log-time-pop #time-activity-hint { display: none; }
.log-time-pop .btn-full { padding: 10px; margin-top: 2px; }
/* On phones the pop-out is a full-screen sheet split into three fixed zones:
   the header and timer stay pinned at the TOP, the fields SCROLL in the middle,
   and the Log Time button stays pinned at the BOTTOM as a solid bar. */
@media (max-width: 640px) {
  .log-time-fab { right: 16px; bottom: 16px; }
  /* On Home the search bar owns the bottom edge — float the timer button just
     above it so it doesn't clip over the bar. */
  .home-active .log-time-fab { bottom: 122px; }
  .log-time-pop {
    /* A bottom tray, not a full-screen sheet — it sizes to its content up to a
       cap, so the page dims behind it. */
    top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: auto; max-height: 90vh;
    border: none; border-radius: 22px 22px 0 0; overflow: hidden; box-shadow: 0 -8px 40px rgba(16,18,24,0.28);
    flex-direction: column;
    /* Slides up from the bottom; JS adds .sheet-in on the next frame. */
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
  }
  .log-time-pop.open { display: flex; }
  .log-time-pop.sheet-in { transform: translateY(0); }
  /* "Open in a new window" makes no sense on a phone — drop it, keep minimize + close. */
  .log-time-pop-window { display: none !important; }
  /* Dim the page behind the tray; tap it to dismiss. */
  .log-time-backdrop { display: block; }
  /* Grab handle — a big, obvious drag zone. touch-action:none so the swipe
     drives the tray (JS drag), never the browser's pull-to-refresh. */
  .log-time-pop-handle { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 18px 0 14px; cursor: grab; touch-action: none; }
  .log-time-pop-handle:active { cursor: grabbing; }
  .log-time-pop-handle span { width: 56px; height: 7px; border-radius: 4px; background: var(--gray-300); }
  [data-theme="dark"] .log-time-pop-handle span { background: rgba(255,255,255,0.28); }
  .log-time-pop-head { flex: 0 0 auto; }
  .log-time-pop-body { flex: 1 1 auto; min-height: 0; display: flex; }
  .log-time-pop .time-logger { width: 100%; flex: 1 1 auto; min-height: 0; display: flex; }
  .log-time-pop .time-logger .card-body {
    display: flex; flex-direction: column; gap: 0; padding: 0;
    flex: 1 1 auto; min-height: 0; overflow: hidden;
  }
  /* Calculator order on mobile: fields up top, the clock display just above the
     keypad at the very bottom (reordered with flex `order`, DOM untouched so the
     desktop 2-column grid is unaffected). */
  .log-time-pop .time-fields { order: 0; }
  .log-time-pop .time-timer { order: 1; }
  .log-time-pop .time-actions { order: 2; }
  /* Compact clock, sitting right above the keypad (NOT the desktop 360px square). */
  .log-time-pop .time-timer {
    aspect-ratio: auto; width: auto; height: auto; flex: 0 0 auto; padding: 14px; border-radius: 14px;
    margin: 4px 16px 10px;
  }
  .log-time-pop .time-timer #time-timer-hint, .log-time-pop .time-timer .time-insight { display: none; }
  .log-time-pop .time-display { font-size: 2.1rem; margin: 0; }
  /* Fields are the scrolling zone at the top of the tray. */
  .log-time-pop .time-fields {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column; gap: 12px; padding: 10px 18px 4px;
  }
  /* The Hours/Date row stays side-by-side even on the narrowest phones (they're
     short); the wider Client/Matter row keeps stacking for legibility. */
  .log-time-pop .time-row-inline { flex-wrap: nowrap; flex-direction: row; gap: 12px; }
  .log-time-pop .time-row-inline > .form-group { flex: 1 1 0; min-width: 0; }
  /* Native <input type="date"> has an intrinsic width that overflows its flex
     cell on iOS — force it to fill (and no more) its half of the row. */
  .log-time-pop .time-fields input { width: 100%; min-width: 0; box-sizing: border-box; }
  /* Pin Hours + Date to the same height as the other fields — iOS gives the
     native date input a taller intrinsic box otherwise. */
  .log-time-pop #time-hours,
  .log-time-pop #time-date { height: 42px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; text-align: left; }
  .log-time-pop #time-date { -webkit-appearance: none; appearance: none; }
  .log-time-pop #time-date::-webkit-date-and-time-value { text-align: left; margin: 0; }
  .log-time-pop #time-desc { min-height: 80px; }
  /* Start / Reset / Log Time on one row, pinned at the bottom as a solid bar. */
  .log-time-pop .time-actions {
    flex: 0 0 auto; margin: 0; gap: 10px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .log-time-pop .time-actions .btn { padding: 12px 14px; }
}
.time-timer {
  text-align: center;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  border-right: 1px solid var(--border);
  padding-right: 28px;
}
.time-timer .time-timer-actions { justify-content: center; }
.time-fields #time-desc { min-height: 120px; resize: vertical; }
.time-fields .btn-full { width: 100%; margin-top: 4px; }
/* Start / Reset / Log Time share one row; Log Time flexes to fill the rest.
   The row is state-driven (data-timer-state): Reset shows only when paused,
   and the Log button becomes the hero "Stop & Log" once time is on the clock. */
.time-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.time-actions .btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.time-actions .btn-full { flex: 1 1 auto; width: auto; margin-top: 0; }
.time-actions .ti { flex: 0 0 auto; }
/* Start ▶ / Pause ⏸ glyph swap on the primary timer button. */
.time-startpause .ti-pause { display: none; }
.time-startpause.is-pause .ti-play { display: none; }
.time-startpause.is-pause .ti-pause { display: inline; }
/* Reset is a quiet secondary — never as loud as the productive Log button —
   and it only appears while paused. */
.time-reset-btn { background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-weight: 500; }
.time-reset-btn.armed { color: #b91c1c; border-color: rgba(185,28,28,0.5); background: rgba(185,28,28,0.06); font-weight: 600; }
.time-actions[data-timer-state="idle"] .time-reset-btn,
.time-actions[data-timer-state="running"] .time-reset-btn { display: none; }
/* Paused decision line: what's banked, in view while you choose keep / reset / log. */
.time-paused-note { flex: 1 0 100%; margin: 0 0 2px; font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; letter-spacing: 0.01em; display: none; }
.time-actions[data-timer-state="paused"] .time-paused-note { display: block; }
/* Hours and Date read as one matched pair — same left alignment (a native date
   input otherwise right-aligns its value on some mobile browsers). */
.log-time-pop #time-hours, .log-time-pop #time-date { text-align: left; }

/* ============ Calculator-style timer drawer (mobile) ============ */
/* The display reads like an instrument: big tabular figures, a subtle inner
   glow, and a green ring while it's running. */
.log-time-pop .time-display { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.log-time-pop .time-timer {
  transition: box-shadow 0.25s ease, background 0.25s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -20px 40px rgba(0,0,0,0.35);
}
.log-time-pop .time-timer.running {
  box-shadow: inset 0 0 0 1.5px rgba(52, 211, 153, 0.55), inset 0 -20px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(52,211,153,0.25);
}
/* Soft pulsing dot in the corner of the display while running. */
.log-time-pop .time-timer.running::after {
  content: ''; position: absolute; top: 12px; right: 14px; width: 9px; height: 9px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,0.6); animation: hudPulse 1.6s ease-out infinite;
}
.log-time-pop .time-timer { position: relative; }
@media (prefers-reduced-motion: reduce) { .log-time-pop .time-timer.running::after { animation: none; } }
/* Keypad keys: chunky, satisfying press. */
.log-time-pop .time-actions .btn { transition: transform 0.06s ease, box-shadow 0.12s ease; border-radius: 12px; font-weight: 600; }
.log-time-pop .time-actions .btn:active { transform: scale(0.96); }
.log-time-pop .time-actions .btn-full:active { transform: scale(0.98); }

/* ============ Running-timer HUD (all pages, desktop + mobile) ============ */
/* The running-timer HUD floats at the bottom-center of the screen while the
   clock runs (desktop + mobile). */
.timer-hud {
  position: fixed; left: 50%; bottom: 26px; top: auto; transform: translate(-50%, 16px); z-index: 490;
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--gray-900); color: #fff; border-radius: 999px;
  padding: 5px 6px 5px 14px; box-shadow: 0 12px 34px rgba(16,18,24,0.28);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.32,0.72,0,1), visibility 0.22s;
  max-width: min(60vw, 440px);
}
.timer-hud.show { opacity: 1; pointer-events: auto; visibility: visible; transform: translate(-50%, 0); }
[data-theme="dark"] .timer-hud { background: #fff; color: #0a0a0a; }
.timer-hud-main { display: inline-flex; align-items: center; gap: 9px; min-width: 0; background: none; border: none; color: inherit; cursor: pointer; font: inherit; padding: 2px 4px; }
.timer-hud-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,0.6); animation: hudPulse 1.6s ease-out infinite; }
.timer-hud.paused .timer-hud-dot { background: var(--gray-500); animation: none; }
.timer-hud-time { font-family: var(--font-heading); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.98rem; letter-spacing: 0.02em; flex: 0 0 auto; }
.timer-hud-label { font-size: 0.82rem; color: rgba(255,255,255,0.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .timer-hud-label { color: rgba(10,10,10,0.6); }
.timer-hud-toggle { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.16); color: #fff; }
[data-theme="dark"] .timer-hud-toggle { background: rgba(10,10,10,0.1); color: #0a0a0a; }
.timer-hud-toggle:active { transform: scale(0.92); }
.timer-hud .hud-ic-play { display: none; }
.timer-hud.paused .hud-ic-pause { display: none; }
.timer-hud.paused .hud-ic-play { display: block; }
@keyframes hudPulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.55); } 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
@media (prefers-reduced-motion: reduce) { .timer-hud-dot { animation: none; } }
/* Measuring pass for the minimize genie: read the HUD's resting rect without
   the entrance offset (it's kept invisible so nothing flashes). */
.timer-hud.measuring { visibility: hidden !important; transform: translate(-50%, 0) !important; transition: none !important; }
/* The drawer "genie" flying toward the pill — no pointer events, above the backdrop. */
.log-time-pop.flying { pointer-events: none; z-index: 610; }
/* When the pill lands, a one-shot ring pulse draws the eye to where the timer went. */
.timer-hud.landed { animation: hudLand 0.55s ease-out; }
@keyframes hudLand {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.55), 0 12px 34px rgba(16,18,24,0.28); }
  100% { box-shadow: 0 0 0 16px rgba(52,211,153,0), 0 12px 34px rgba(16,18,24,0.28); }
}
/* Forgotten-timer (over ~5h): amber dot instead of green, so it reads as "check me". */
.timer-hud.overlong .timer-hud-dot { background: #f59e0b; box-shadow: 0 0 0 0 rgba(245,158,11,0.6); animation: hudPulseAmber 1.6s ease-out infinite; }
@keyframes hudPulseAmber { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,0.55); } 70% { box-shadow: 0 0 0 7px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }
@media (prefers-reduced-motion: reduce) { .timer-hud.landed { animation: none; } .timer-hud.overlong .timer-hud-dot { animation: none; } }
/* On phones the top bar is too tight for the pill — float it at the bottom
   instead (thumb-reachable), clearing the Home search/log stack. */
@media (max-width: 640px) {
  .timer-hud {
    position: fixed; top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 50%; transform: translate(-50%, 14px); max-width: 92vw; z-index: 480;
  }
  .timer-hud.show { transform: translate(-50%, 0); }
  .home-active .timer-hud { bottom: calc(130px + env(safe-area-inset-bottom, 0px)); }
}
/* The HUD is meaningless in the stripped-down kiosk window. */
.is-timer-window .timer-hud, body.client-portal-mode .timer-hud { display: none !important; }

/* Matter is locked until a client is chosen. */
.time-fields select:disabled { opacity: 0.55; cursor: not-allowed; background: var(--gray-100); }
.time-fields .form-group.is-locked .cselect { opacity: 0.55; pointer-events: none; }

@media (max-width: 768px) {
  .time-logger .card-body { grid-template-columns: 1fr; gap: 22px; }
  .time-timer { border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 22px 0; }
}

/* ============ MATTER HEADER: description + clickable client ============ */
.matter-detail-headmain { flex: 1; min-width: 0; }
.matter-detail-desc { margin-top: 10px; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; max-width: 80ch; }
.matter-client-link { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.matter-client-link:hover { color: var(--text-primary); }
/* Matter page: prominent client brand (logo + name) at the top of the card */
.matter-client-head { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 12px; max-width: 100%; }
.matter-client-head[role="button"] { cursor: pointer; }
.matter-client-head[role="button"]:hover .matter-client-name { text-decoration: underline; text-underline-offset: 2px; }
.matter-client-logo { width: 46px; height: 46px; border-radius: 50%; background-size: cover; background-repeat: no-repeat; background-position: center; flex: 0 0 auto; border: 1px solid var(--border); background-color: var(--surface); }
.matter-client-head .mdm-avatar-lg { width: 46px; height: 46px; font-size: 0.95rem; flex: 0 0 auto; }
.matter-client-name { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ CLIENT DETAIL: team ============ */
.client-team { display: flex; flex-wrap: wrap; gap: 16px; }
.client-team-member { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }

/* Client category segmented control (Individuals / Entities) */
.client-cat-tabs { display: inline-flex; margin-bottom: 16px; }

/* AR tab pushed to the right of the finance tab bar */
.finance-tabs { display: flex; }
.finance-tab-ar { margin-left: auto; }

/* New Invoice modal: bigger + full-width scope toggle + include checkboxes */
.modal-lg { max-width: 680px; }

/* ---- Engagement letter modal: two columns (company info · payment) ---- */
.eng-modal { max-width: 860px; }
.eng-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.eng-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.eng-cols > .eng-col + .eng-col {
  padding-left: 28px; margin-left: -28px;
  border-left: 1px solid var(--border);
}
.eng-col .form-group { margin: 0; }
.eng-col-head {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display, var(--font-body)); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-secondary); padding-bottom: 10px; margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.eng-col-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px; flex: none;
  background: var(--accent, #b6892e); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0;
}
.eng-ret-note { margin: 6px 0 0; font-size: 0.76rem; color: var(--text-secondary); line-height: 1.4; }
.eng-foot-note { margin-top: 20px; }
@media (max-width: 620px) {
  .eng-cols { grid-template-columns: 1fr; gap: 22px; }
  .eng-cols > .eng-col + .eng-col {
    padding-left: 0; margin-left: 0; padding-top: 20px;
    border-left: none; border-top: 1px solid var(--border);
  }
}
.inv-scope-toggle { display: flex; width: 100%; }
.inv-scope-toggle .toggle-btn { flex: 1; }
.inv-includes { display: flex; flex-wrap: wrap; gap: 18px; }
.inv-check { display: inline-flex; align-items: center; gap: 9px; font-size: 0.9rem; line-height: 1; cursor: pointer; }
.inv-check input[type="checkbox"] { align-self: center; }
.inv-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 18px; height: 18px; min-width: 18px; padding: 0; margin: 0; flex: 0 0 18px; border: 1.5px solid var(--gray-400); border-radius: 50%; background: var(--surface); cursor: pointer; position: relative; transition: background 0.15s ease, border-color 0.15s ease; }
.inv-check input[type="checkbox"]:checked { background: var(--gray-900); border-color: var(--gray-900); }
.inv-check input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Bill-by + Matter/Client toggles — monochrome, full-width pills. */
.inv-billby-toggle, .inv-scope-toggle { display: flex; width: 100%; }
.inv-billby-toggle .toggle-btn, .inv-scope-toggle .toggle-btn { flex: 1; }
.inv-billby-toggle .toggle-btn:first-child, .inv-scope-toggle .toggle-btn:first-child { border-radius: 24px 0 0 24px; }
.inv-billby-toggle .toggle-btn:last-child, .inv-scope-toggle .toggle-btn:last-child { border-radius: 0 24px 24px 0; }

/* WADR logo on the printed invoice */
.inv-logo { height: 34px; width: auto; display: block; margin-bottom: 12px; }

/* Invoice comments + dispute (below the printed invoice) */
.invoice-discuss { max-width: 760px; margin: 18px auto 40px; padding: 0 24px; }
.invoice-discuss-title { font-size: 1rem; margin: 18px 0 10px; }
.inv-dispute { margin-bottom: 8px; }
.inv-dispute-banner { background: #fde8e8; color: #9b1c1c; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.88rem; margin-bottom: 8px; }
.inv-dispute textarea, .inv-comment-form textarea {
  width: 100%; min-height: 70px; resize: vertical; padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.9rem;
  background: var(--surface); color: var(--text-primary);
}
.inv-comment { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.inv-comment-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; }
.inv-comment-form { margin-top: 12px; }
.inv-comment-ref { font-size: 0.78rem; color: var(--text-secondary); display: block; padding: 6px 0; margin: 4px 0 6px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.inv-comment-avatar { width: 24px; height: 24px; font-size: 0.6rem; flex: 0 0 auto; }
.inv-comment-head { display: flex; gap: 8px; align-items: center; }
.inv-comment-text { margin-top: 4px; }
/* Per-line dispute action (revealed on row hover, hidden in print) */
.inv-line-actions { width: 1%; white-space: nowrap; text-align: right; padding-left: 10px; }
.inv-line-dispute { opacity: 0; transition: opacity 0.12s ease; border: 1px solid #f3b4b4; color: #d33b3b; background: var(--surface); border-radius: 8px; padding: 3px 11px; font-size: 0.74rem; font-weight: 600; cursor: pointer; }
.inv-line:hover .inv-line-dispute, .inv-line-dispute:focus { opacity: 1; }
.inv-line-dispute:hover { background: #fdf2f2; }
.inv-comment-line { width: 100%; margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font-size: 0.85rem; font-family: var(--font-body); }
.invoice-paper .inv-line { cursor: pointer; transition: background 0.12s ease; }
.invoice-paper .inv-line:hover { background: var(--gray-50); }
.invoice-side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; }
[data-theme="dark"] .inv-comment-ref { background: #1e1e1e; }
.badge-disputed { background: #fde8e8; color: #9b1c1c; }
[data-theme="dark"] .inv-dispute-banner, [data-theme="dark"] .badge-disputed { background: #2a1515; color: #f87171; }

/* Reimbursement tab sits to the right (left of AR) */
.finance-tab-right { margin-left: auto; }

/* Matter Context drop-down on the top card */
.matter-context-card { display: block; }
.matter-detail-headtop { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.matter-context-toggle { display: flex; align-items: center; gap: 8px; margin-top: 14px; background: none; border: none; padding: 6px 0; cursor: pointer; color: var(--text-secondary); font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; }
.matter-context-toggle:hover { color: var(--text-primary); }
.matter-context-toggle .card-chevron { transition: transform 0.15s; }
.matter-context-toggle[aria-expanded="true"] .card-chevron { transform: rotate(180deg); }
.matter-context-region { margin-top: 12px; }
.matter-context-region textarea { width: 100%; min-height: 90px; resize: vertical; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.9rem; background: var(--surface); color: var(--text-primary); margin-bottom: 10px; }

/* Clients: wider actions column (fixes overflow) + expandable matters */
.dir-actions-col { width: 116px; }
.client-matters-row td { background: var(--gray-50); padding: 0 18px 14px; }
.client-matters { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.client-matter-line { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font-size: 0.88rem; }
.client-matter-line:hover { border-color: var(--gray-400); }

/* Expanded client summary row */
.client-expand { padding-top: 6px; display: flex; flex-direction: column; gap: 16px; }
.client-expand-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.client-expand-stats > div { display: flex; flex-direction: column; gap: 2px; }
.ce-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.ce-val { font-size: 1.05rem; font-weight: 600; }
.ce-val.ce-contact { font-size: 0.86rem; font-weight: 500; color: var(--text-secondary); }
.client-expand-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ce-section-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 8px; }
.client-expand-cols .client-matter-line + .client-matter-line { margin-top: 6px; }
.client-expand-cols .client-team { display: flex; flex-wrap: wrap; gap: 12px; }
.client-expand-cols .client-team-member { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.client-expand-foot { display: flex; justify-content: flex-end; }
@media (max-width: 700px) { .client-expand-stats { grid-template-columns: repeat(2, 1fr); } .client-expand-cols { grid-template-columns: 1fr; } }

/* User menu profile header + avatar upload */
.user-menu-profile { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: none; cursor: pointer; border-radius: var(--radius-xs); text-align: left; }
.user-menu-profile:hover { background: var(--gray-800); }
.user-menu-avatar { width: 34px; height: 34px; border-radius: 50%; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; overflow: hidden; }
/* Initials avatars: always black with white first+last initials. */
.sidebar-user-avatar { background: #111; color: #fff; }
.user-menu-profile-info { display: flex; flex-direction: column; min-width: 0; }
.user-menu-name { font-size: 0.85rem; font-weight: 600; color: #fff; }
.user-menu-sub { font-size: 0.7rem; color: var(--gray-400); }
.user-menu-sep { height: 1px; background: var(--gray-800); margin: 6px 4px; }
.sidebar-user-avatar { overflow: hidden; background-repeat: no-repeat; }

/* Timer inverts to black while running */
.time-timer.running { background: var(--black); color: #fff; border-right-color: transparent; border-radius: var(--radius); padding: 24px; }
.time-timer.running .matter-empty { color: rgba(255,255,255,0.6); }
.time-timer.running .btn-primary { background: #fff; color: #111; }
.time-timer.running .btn:not(.btn-primary) { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }

/* Newly logged time entry — slides in and flashes once */
@keyframes rowNewSlide { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes rowNewFlash { 0% { background: rgba(34, 197, 94, 0.22); } 100% { background: transparent; } }
tr.row-new { animation: rowNewSlide 0.4s ease-out; }
tr.row-new > td { animation: rowNewFlash 1.9s ease-out; }

/* Field tools (dictate / AI clean-up) overlaid inside a textarea */
.textarea-with-tools { position: relative; }
.textarea-with-tools textarea { padding-top: 42px; }
.textarea-with-tools .field-tools { position: absolute; top: 8px; right: 8px; z-index: 2; }
.field-tools { display: flex; gap: 6px; }
.field-tool { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font-size: 0.74rem; font-weight: 500; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); cursor: pointer; font-family: var(--font-body); }
.field-tool:hover { color: var(--text-primary); border-color: var(--gray-400); }
.field-tool:disabled { opacity: 0.5; cursor: default; }
.field-tool.recording { color: #dc2626; border-color: #dc2626; }
.field-tool svg { width: 14px; height: 14px; }

/* New Invoice: unbilled-activity calendar */
.inv-cal { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.inv-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.85rem; }
.inv-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.inv-cal-dow { text-align: center; font-size: 0.64rem; color: var(--text-secondary); padding: 6px 0; border-bottom: 1px solid var(--border); }
.inv-cal-cell { min-height: 48px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px 5px; cursor: pointer; font-size: 0.7rem; line-height: 1.25; }
.inv-cal-cell.empty { cursor: default; background: var(--gray-50); }
.inv-cal-cell.has { background: var(--gray-50); }
.inv-cal-cell.has .inv-cal-day { font-weight: 700; }
.inv-cal-cell.in-range { background: var(--gray-200); }
.inv-cal-cell.end { background: var(--black); color: #fff; }
.inv-cal-day { display: block; }
.inv-cal-meta { display: flex; gap: 4px; color: var(--text-secondary); }
.inv-cal-amt { font-weight: 600; }
.inv-cal-cell.end .inv-cal-meta, .inv-cal-cell.end .inv-cal-amt { color: rgba(255,255,255,0.85); }

/* ============================================================
   Transitions.dev — Shimmer text + Number pop-in
   ============================================================ */

/* --- Shimmer text (used by Clerk's "thinking" state) --- */
:root {
  --shimmer-dur: 2000ms;
  --shimmer-base: #6e6e6e;
  --shimmer-highlight: #ededed;
  --shimmer-band: 400%;
  --shimmer-ease: linear;
}
[data-theme="dark"] { --shimmer-base: #8a8a8a; --shimmer-highlight: #ffffff; }

.t-shimmer {
  position: relative;
  display: inline-block;
  color: var(--shimmer-base);
}
.t-shimmer::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent          0%,
    transparent         40%,
    var(--shimmer-highlight) 50%,
    transparent         60%,
    transparent        100%
  );
  background-size: var(--shimmer-band) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}
@keyframes t-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .t-shimmer::before { animation: none !important; }
}

/* --- Number pop-in (used by the dashboard stat values) --- */
:root {
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
}
@keyframes t-digit-pop-in {
  0%   {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}
.t-digit-group { display: inline-flex; align-items: baseline; }
.t-digit { display: inline-block; will-change: transform, opacity, filter; }
.t-digit-group.is-animating .t-digit { animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both; }
.t-digit-group.is-animating .t-digit[data-stagger="1"] { animation-delay: var(--digit-stagger); }
.t-digit-group.is-animating .t-digit[data-stagger="2"] { animation-delay: calc(var(--digit-stagger) * 2); }
@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit { animation: none !important; }
}

/* ============================================================
   Home dashboard v2
   ============================================================ */
.home-briefing { margin-top: 6px; color: var(--text-secondary); font-size: 0.95rem; }

/* Ready to bill */
.ready-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; background: var(--black); color: #fff; padding: 22px 26px; }
.ready-label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.ready-amount { font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; font-weight: 700; line-height: 1.1; margin: 4px 0; }
.ready-breakdown { font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.ready-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ready-card .btn:not(.btn-primary) { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.ready-card .btn-primary { background: #fff; color: #111; }
.ready-card .btn-primary:disabled { opacity: 0.45; cursor: default; }

/* Quick actions */
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.quick-action { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-primary); cursor: pointer; font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; }
.quick-action:hover { border-color: var(--gray-400); }
.quick-action svg { color: var(--text-secondary); flex-shrink: 0; }

/* My day tile */
.myday-card .myday-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.myday-bar { flex: 1; height: 6px; border-radius: 6px; background: var(--gray-200); overflow: hidden; }
.myday-bar span { display: block; height: 100%; width: 0; background: #22c55e; border-radius: 6px; transition: width 0.4s ease; }

/* Two-column layout */
.home-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; align-items: start; }
.home-col { display: flex; flex-direction: column; gap: 18px; }

/* Card-less, high-end Home */
#page-home .home-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 36px; }
.home-hero-main { min-width: 0; }
#page-home .home-briefing { margin-top: 4px; }
.home-today { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.home-today-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-secondary); }
.home-today-val { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.home-today .home-link { margin-top: 4px; }
.home-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-bottom: 28px; }
/* Receivables / Deadlines read as cards so they line up with the Timesheet
   and Ask Clerk cards above and below. */
.home-section {
  min-width: 0; padding: 20px 22px; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 22px rgba(17, 24, 39, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .home-section { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
.home-section-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 18px; }

/* Client/team name becomes a button that opens the page, with a hover hint. */
.dir-name-link { display: inline-flex; align-items: center; gap: 10px; background: none; border: none; padding: 4px 8px; margin: -4px -8px; border-radius: 8px; font: inherit; color: inherit; cursor: pointer; transition: background 0.15s; }
.dir-name-link:hover { background: var(--gray-100); }
.dir-name-link .dir-name-text { transition: color 0.15s; white-space: nowrap; }
.dir-name-link:hover .dir-name-text { color: var(--text-primary); text-decoration: underline; }
.dir-name-link::after { content: 'Open ↗'; opacity: 0; font-size: 0.7rem; color: var(--text-secondary); transition: opacity 0.15s; }
.dir-name-link:hover::after { opacity: 1; }
.home-section-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); font-weight: 600; }
.home-link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 0.82rem; color: var(--text-secondary); transition: color 0.15s ease; }
.home-link:hover { color: var(--text-primary); }
#page-home #home-deadlines { max-height: 340px; overflow-y: auto; }
@media (max-width: 900px) { .home-flow { grid-template-columns: 1fr; gap: 32px; } #page-home .home-hero { flex-direction: column; } .home-today { align-items: flex-start; } }

/* ---- Minimal landing: centered welcome + 8 quick-launch circles ---- */
.home-launch {
  position: relative;
  min-height: calc(100vh - 150px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px; padding: 24px 0 64px;
}
.home-launch-inner { max-width: 680px; width: 100%; }
.home-launch .home-greeting { font-size: 2.4rem; }
.home-launch .home-date { margin-top: 6px; }
.home-launch .home-briefing { margin-top: 10px; max-width: 560px; margin-left: auto; margin-right: auto; }
/* Minimal hero: big welcome stacked above this month's day-ring calendar. */
.home-launch-split { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; text-align: center; min-height: calc(100vh - 160px); }
.home-hero-left { text-align: center; }
.home-launch-split .home-greeting { display: flex; flex-direction: column; align-items: center; font-size: 4.6rem; line-height: 0.98; letter-spacing: -0.015em; }
.home-greet-part { font-weight: 500; color: var(--text-secondary); }
.home-greet-name { font-weight: 700; color: var(--text-primary); }
/* The greeting fades up once on load and stays put, then a VERY subtle shimmer
   band drifts across. The gradient TILES (repeat) with the base colour at both
   ends so the text is always fully covered — a single faint highlight per cycle. */
.home-greet-part, .home-greet-name {
  background-size: 220% 100%; background-repeat: repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: greetFadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both, greetShimmer 7s linear infinite;
}
.home-greet-name { animation-delay: 0.1s, 0s; }
/* Highlight sits only a hair off the base colour — barely perceptible. */
.home-greet-part { background-image: linear-gradient(100deg, var(--text-secondary) 0%, var(--text-secondary) 44%, #9aa1ab 50%, var(--text-secondary) 56%, var(--text-secondary) 100%); }
.home-greet-name { background-image: linear-gradient(100deg, var(--text-primary) 0%, var(--text-primary) 44%, #3d4249 50%, var(--text-primary) 56%, var(--text-primary) 100%); }
[data-theme="dark"] .home-greet-name { background-image: linear-gradient(100deg, var(--text-primary) 0%, var(--text-primary) 44%, #c7ccd3 50%, var(--text-primary) 56%, var(--text-primary) 100%); }
@keyframes greetShimmer { 0% { background-position: 110% 0; } 100% { background-position: -110% 0; } }
@keyframes greetFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .home-greet-part, .home-greet-name { animation: none; -webkit-text-fill-color: currentColor; color: inherit; }
  .home-greet-part { color: var(--text-secondary); }
  .home-greet-name { color: var(--text-primary); }
}
.home-launch-split .home-date { margin: 14px 0 0; text-align: center; font-size: 1.02rem; }
.home-hero-right { width: 100%; max-width: 640px; min-width: 0; }

/* First-load intro choreography (class added once by renderHome).
   1) greeting fades in sitting lower/centered, holds, then eases up into place;
   2) the calendar stays hidden meanwhile and fades in once the greeting settles.
   All easing in/out via the same expressive cubic-bezier. */
#page-home.home-intro .home-hero-left {
  animation: homeCtaIntro 1.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes homeCtaIntro {
  0% { opacity: 0; transform: translateY(80px); }
  34% { opacity: 1; transform: translateY(80px); }
  100% { opacity: 1; transform: translateY(0); }
}
#page-home.home-intro .home-hero-right {
  animation: homeCalIntro 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.15s both;
}
@keyframes homeCalIntro {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #page-home.home-intro .home-hero-left,
  #page-home.home-intro .home-hero-right { animation: none; }
}

/* Home fits a SINGLE viewport at every screen size (not just mobile): the hero
   (greeting + month calendar) takes the space above the Ask Clerk bar and
   centers/clips instead of scrolling, and the search bar is pinned in-flow at
   the bottom. The ≤640px block below only fine-tunes sizes. */
#page-home.active {
  height: calc(100dvh - var(--topbar-height));
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
}
#page-home .home-launch-split {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  justify-content: center;
  gap: 28px;
}
#page-home .clerk-bar {
  position: static;
  flex: 0 0 auto;
  margin-top: 12px;
}

/* Admin-only toggle in the home's upper-left: my hours vs the whole team's. */
.home-scope { position: absolute; top: 16px; left: 24px; z-index: 3; display: inline-flex; gap: 2px; padding: 3px; background: var(--gray-100); border: 1px solid var(--border); border-radius: 999px; }
.home-scope-btn { border: none; background: none; cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); padding: 6px 14px; border-radius: 999px; }
.home-scope-btn.active { background: var(--surface); color: var(--text-primary); box-shadow: 0 1px 3px rgba(16,18,24,0.1); }
[data-theme="dark"] .home-scope { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .home-scope-btn.active { background: var(--gray-800); }
@media (max-width: 640px) { .home-scope { top: 8px; left: 12px; padding: 2px; } .home-scope-btn { padding: 5px 11px; font-size: 0.76rem; } }
.home-month-head { display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 16px; }
.home-month-label { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; min-width: 128px; text-align: center; }
.home-month-nav { display: inline-flex; align-items: center; gap: 12px; }
.home-month-total { position: absolute; right: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Rings animate their stroke into place; today's ring gently pulses. */
.home-month-grid .ts-ring-fg { transition: stroke-dashoffset 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.home-month-cell { position: relative; }
.home-month-cell:hover { z-index: 5; }
.home-month-cell:hover .ts-day-pop, .home-month-cell:focus-within .ts-day-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* Current day: a small dot beside the day number (no ring halo or card). */
.home-month-cell.today .home-month-num { color: #6366f1; font-weight: 700; }
.home-month-cell.today .home-month-num::after {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  margin-left: 3px;
  border-radius: 50%;
  background: #6366f1;
  vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) { .home-month-grid .ts-ring-fg { transition: none; } }
/* Just the rings in a month grid — no calendar card, borders, or cell boxes. */
.home-month-grid { background: none; border: none; border-radius: 0; gap: 8px 4px; overflow: visible; }
.home-month-grid .calendar-cell { min-height: 0; padding: 2px; display: flex; flex-direction: column; align-items: center; gap: 1px; border: none; background: none; }
.home-month-grid .calendar-cell.other-month { background: none; }
.home-month-grid .calendar-cell.today { background: none; }
.home-month-grid .calendar-header-cell { background: none; padding: 2px; font-size: 0.62rem; text-align: center; }
.home-month-num { font-size: 0.6rem; color: var(--text-secondary); }
.home-month-grid .tl-ring-wrap { width: 38px; height: 38px; }
/* Skeleton placeholders for the month grid on first load. */
.home-month-grid .skel-num { width: 10px; height: 7px; border-radius: 3px; }
.home-month-grid .skel-ring { display: block; width: 100%; height: 100%; border-radius: 50%; }
.home-month-grid .tl-ring-val { position: absolute; font-size: 0.58rem; font-weight: 700; }
@media (max-width: 900px) {
  .home-launch-split { grid-template-columns: 1fr; gap: 26px; min-height: auto; padding-top: 20px; }
  .home-launch-split .home-greeting { font-size: 2.3rem; }
}
/* Mobile home: everything fits ONE viewport — no page scroll — with the Ask
   Clerk bar pinned at the bottom. Greeting + month rings shrink to fit. */
@media (max-width: 640px) {
  /* Clip the home to the viewport so it never scrolls; the Ask Clerk bar is
     pinned to the bottom with fixed positioning (always visible, no math on the
     exact chrome offsets). Content sits above it and is centered. */
  #page-home.active { height: calc(100dvh - var(--topbar-height) - 40px); min-height: 0; overflow: hidden; padding-bottom: 0; display: flex; flex-direction: column; }
  /* flex-basis 0 + overflow hidden: the hero takes exactly the space left after
     the search bar and clips instead of pushing the bar off-screen. The
     #page-home prefix outranks the later `.home-launch { min-height }` rule
     (both are single-class = equal specificity, so source order would win). */
  #page-home .home-launch-split { flex: 1 1 0; min-height: 0; overflow: hidden; gap: 8px; padding: 2px 0 0; justify-content: center; }
  .home-launch-split .home-greeting { font-size: 1.8rem; }
  .home-launch-split .home-date { font-size: 0.85rem; margin-top: 4px; }
  .home-hero-right { max-width: 100%; }
  .home-month-head { margin-bottom: 4px; }
  .home-month-label { font-size: 0.95rem; }
  .home-month-grid { gap: 1px; }
  .home-month-grid .tl-ring-wrap { width: 26px; height: 26px; }
  .home-month-grid .tl-ring-val { font-size: 0.46rem; }
  .home-month-num { font-size: 0.5rem; }
  .home-month-grid .calendar-header-cell { font-size: 0.52rem; padding: 0; }
  .home-month-grid .calendar-cell { padding: 0; }
  /* Search bar sits at the bottom of the home column (in flow, flex:0). */
  #page-home .clerk-bar { position: static; flex: 0 0 auto; margin: 0; padding-top: 0; padding-bottom: 4px; }
  /* Bottom of the home screen is a two-item stack: the Log time button on top,
     the Ask Clerk search directly under it. The floating FAB is dropped here
     since the button now lives inline. */
  .home-active .log-time-fab { display: none; }
  #page-home .home-logtime-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    flex: 0 0 auto; width: 100%; margin: 0 0 8px; padding: 14px;
    border: none; border-radius: 16px; cursor: pointer;
    background: var(--gray-900); color: #fff;
    font: inherit; font-size: 0.95rem; font-weight: 600;
    box-shadow: 0 8px 30px rgba(16, 18, 24, 0.12);
  }
  [data-theme="dark"] #page-home .home-logtime-btn { background: #fff; color: #0a0a0a; }
}
/* The week's timesheet rings are the landing's centerpiece (full width, one row). */
.ts-landing-wrap { width: 100%; margin: 40px 0 0; }
.ts-landing-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.ts-landing-top .ts-weeklabel { margin: 0; }
.ts-landing .ts-grid { gap: 6px; }
/* Entrance: greeting/date/briefing fade up, then each day circle staggers in. */
.home-launch-inner > * { animation: homeFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.home-launch-inner .home-date { animation-delay: 0.08s; }
.home-launch-inner .home-briefing { animation-delay: 0.16s; }
.ts-day { opacity: 0; }
.ts-day.ts-day-in { animation: homeFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes homeFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .home-launch-inner > *, .ts-day.ts-day-in { animation: none; }
  .ts-day { opacity: 1; }
}
.home-scroll-cue {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-secondary);
  padding: 8px; border-radius: 50%; animation: homeCue 1.8s ease-in-out infinite;
}
.home-scroll-cue:hover { color: var(--text-primary); }
@keyframes homeCue { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
.home-today-row { flex-direction: row; align-items: baseline; justify-content: flex-end; gap: 10px; margin-bottom: 20px; }
.home-today-row .home-today-val { font-size: 1.15rem; }
.home-today-row .home-link { margin-top: 0; }
/* Keep all 8 rings on one line even on small screens — they shrink to fit. */
.ts-landing .ts-ring-wrap { width: min(60px, 8vw); height: min(60px, 8vw); }
.ts-landing .ts-ring-val { font-size: 0.82rem; }
.ts-landing .ts-ring, .ts-landing .ts-ring-wrap svg { width: 100%; height: 100%; }
.ts-landing .ts-day { padding: 8px 2px; }
@media (max-width: 640px) {
  .home-launch { min-height: calc(100vh - 120px); }
  .home-launch .home-greeting { font-size: 1.9rem; }
  .ts-landing-top { justify-content: center; }
  .ts-landing .ts-day-name { font-size: 0.6rem; }
  .ts-landing .ts-ring-val { font-size: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) { .home-scroll-cue { animation: none; } }

/* A/R */
.ar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ar-cell { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.ar-amt { font-size: 1.15rem; font-weight: 700; }
.ar-label { font-size: 0.74rem; color: var(--text-secondary); margin-top: 2px; }
.ar-count { font-size: 0.72rem; color: var(--text-secondary); margin-top: 4px; }
.ar-cell.ar-danger { background: #fde8e8; border-color: #f3b4b4; }
.ar-cell.ar-danger .ar-amt, .ar-cell.ar-danger .ar-label { color: #9b1c1c; }

/* Receivables as clean inline figures on Home (no boxes) */
.home-section .ar-grid { display: flex; flex-wrap: wrap; gap: 44px; }
.home-section .ar-cell { border: none; border-radius: 0; padding: 0; text-align: left; background: none; }
.home-section .ar-amt { font-size: 1.7rem; font-weight: 700; }
.home-section .ar-label { font-size: 0.72rem; color: var(--text-secondary); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.home-section .ar-count { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; }
.home-section .ar-cell.ar-danger { background: none; }
.home-section .ar-cell.ar-danger .ar-amt { color: #dc2626; }

/* Needs attention */
.attn-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px; border-radius: 8px; cursor: pointer; }
.attn-item:hover { background: var(--gray-100); }
.attn-main { display: flex; flex-direction: column; min-width: 0; }
.attn-main strong { font-size: 0.9rem; }
.attn-main span { font-size: 0.76rem; color: var(--text-secondary); }
.attn-reasons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.attn-tag { font-size: 0.7rem; padding: 3px 8px; border-radius: 999px; background: var(--gray-100); color: var(--text-secondary); white-space: nowrap; }
.attn-tag-danger { background: #fde8e8; color: #9b1c1c; }

/* Activity feed */
.activity-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--gray-400); }
.activity-dot.activity-time { background: #6366f1; }
.activity-dot.activity-invoice { background: #22c55e; }
.activity-dot.activity-reimb { background: #f59e0b; }
/* Who did it: real photo / initials, replacing the colored kind dot. */
.activity-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #111; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.66rem; font-weight: 700; background-size: cover; background-position: center; }
.activity-avatar-sys { background: var(--gray-100); color: var(--text-secondary); font-weight: 600; border: 1px solid var(--border); }
[data-theme="dark"] .activity-avatar-sys { background: rgba(255,255,255,0.06); }
.activity-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.activity-main strong { font-size: 0.86rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-main span { font-size: 0.74rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-at { font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
/* Client (logo + name) shown on the same row as the team member. */
.activity-client { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; max-width: 40%; min-width: 0; color: var(--text-secondary); font-size: 0.78rem; }
.activity-client .dir-avatar { width: 22px; height: 22px; flex: 0 0 auto; }
.activity-client-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Category-tinted system icons (activity items with no person). */
.activity-avatar-sys.activity-sys-people { background: #16a34a; color: #fff; border-color: transparent; }
.activity-avatar-sys.activity-sys-documents { background: #6366f1; color: #fff; border-color: transparent; }
.activity-avatar-sys.activity-sys-billing { background: #0a0a0f; color: #fff; border-color: transparent; }
[data-theme="dark"] .activity-avatar-sys.activity-sys-billing { background: #f4f4f5; color: #0a0a0f; }
.activity-avatar-sys.activity-sys-matters { background: #d97706; color: #fff; border-color: transparent; }
.activity-avatar-sys.activity-sys-time { background: #0891b2; color: #fff; border-color: transparent; }

/* Full-screen "All activity" pop-out with filter chips. */
.activity-fs { position: fixed; inset: 0; z-index: 9500; display: none; background: var(--bg); }
.activity-fs.open { display: block; }
.activity-fs-inner { height: 100%; max-width: 880px; margin: 0 auto; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(10px); transition: opacity .28s ease, transform .28s ease; }
.activity-fs.drawer-in .activity-fs-inner { opacity: 1; transform: none; }
.activity-fs-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 14px; flex: 0 0 auto; }
.activity-fs-header h2 { font-family: var(--font-heading); font-weight: 700; font-size: 1.85rem; margin: 0; color: var(--text-primary); }
.activity-fs-close { background: none; border: none; font-size: 1.9rem; line-height: 1; color: var(--text-secondary); cursor: pointer; padding: 2px 10px; border-radius: 10px; }
.activity-fs-close:hover { background: var(--gray-100); color: var(--text-primary); }
[data-theme="dark"] .activity-fs-close:hover { background: rgba(255,255,255,0.08); }
.activity-filters { display: flex; gap: 8px; padding: 2px 24px 14px; overflow-x: auto; flex-wrap: wrap; border-bottom: 1px solid var(--border); flex: 0 0 auto; -webkit-overflow-scrolling: touch; }
.activity-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.activity-chip:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.activity-chip.active { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg); }
.activity-chip-count { font-size: 0.72rem; font-weight: 700; opacity: 0.55; }
.activity-chip.active .activity-chip-count { opacity: 0.85; }
.activity-fs-body { flex: 1 1 auto; overflow-y: auto; padding: 10px 24px 48px; }
.activity-fs-body .activity-item { padding: 12px 4px; border-bottom: 1px solid var(--border); }
.activity-fs-body .activity-item:last-child { border-bottom: none; }

/* Matter activity as a vertical timeline: a line runs through the avatar column
   and each event's avatar is a node on it. */
.activity-timeline { position: relative; }
.activity-timeline .activity-item { position: relative; padding: 12px 4px 12px 0; align-items: flex-start; }
.activity-timeline .activity-item::before {
  content: ''; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px;
  background: var(--border); z-index: 0;
}
.activity-timeline .activity-item:first-child::before { top: 18px; }
.activity-timeline .activity-item:last-child::before { bottom: auto; height: 18px; }
.activity-timeline .activity-avatar { position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--surface); }
.activity-timeline .activity-main { padding-top: 4px; }
@media (max-width: 640px) { .activity-client-name { display: none; } .activity-client { max-width: none; } }
/* New Invoice — unbilled summary panel for the current selection */
.inv-modal-summary { margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--gray-50); }
.inv-modal-summary:empty { display: none; }
.inv-sum-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 8px; }
.inv-sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; padding: 3px 0; }
.inv-sum-row span:last-child { font-variant-numeric: tabular-nums; }
.inv-sum-total { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); font-weight: 700; }
[data-theme="dark"] .inv-modal-summary { background: #161616; }

.billing-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.billing-toolbar .billing-search-field { width: 130px; flex: 0 0 auto; }
.billing-toolbar .search-input { flex: 1; margin: 0; }
.billing-toolbar .cselect { width: 130px; flex: 0 0 auto; }

/* New-client wizard */
.cw-steps { display: flex; gap: 8px; margin-bottom: 16px; }
.cw-step { font-size: 0.74rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 999px; background: var(--gray-100); }
.cw-step.active { background: var(--text-primary); color: var(--bg-primary, #fff); }
.cw-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.cw-foot-right { display: flex; gap: 8px; }
[data-theme="dark"] .cw-step { background: #1e1e1e; }
[data-theme="dark"] .cw-step.active { background: #e5e5e5; color: #0a0a0a; }

/* Reimbursement receipt preview + applied-to clarity */
.receipt-head-actions { display: flex; gap: 10px; align-items: center; }
.receipt-preview { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.receipt-frame { width: 100%; height: 72vh; border: none; border-radius: 10px; background: #fff; }
.receipt-img { max-width: 100%; max-height: 72vh; display: block; margin: 0 auto; border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,0.12); }
.reimb-sub { color: var(--text-secondary); font-size: 0.85em; }
.reimb-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--gray-100); color: var(--text-secondary); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
[data-theme="dark"] .reimb-tag { background: #1e1e1e; }

/* Right-to-left roll-out drawer (All activity) */
.modal-overlay.modal-drawer { align-items: stretch; justify-content: flex-end; padding: 0; }
.modal-drawer .modal-drawer-panel {
  width: 440px; max-width: 92vw; height: 100%; max-height: 100%; align-self: stretch;
  border-radius: 0; display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -14px 0 44px rgba(0, 0, 0, 0.2);
}
.modal-drawer.drawer-in .modal-drawer-panel { transform: translateX(0); }
.modal-drawer .modal-body { flex: 1; overflow-y: auto; }
.modal-drawer .activity-all { max-height: none; }

/* New Invoice — period as a dual-handle timeline range */
.period-range { padding: 2px 4px 0; }
.period-labels { display: flex; justify-content: space-between; font-size: 0.9rem; font-weight: 600; margin-bottom: 12px; }
.period-track { position: relative; height: 32px; }
.period-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 5px; border-radius: 999px; background: var(--gray-200); }
.period-fill { position: absolute; top: 50%; transform: translateY(-50%); height: 5px; border-radius: 999px; background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.period-track input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 32px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; }
.period-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--text-primary); border: 3px solid var(--bg-primary, #fff); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); cursor: grab; }
.period-track input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.period-track input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--text-primary); border: 3px solid var(--bg-primary, #fff); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); cursor: grab; }
.period-track input[type="range"]::-moz-range-track { background: transparent; }
.period-ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.7rem; color: var(--text-muted); }
[data-theme="dark"] .period-track::before { background: #2a2a2a; }

/* Users page (all app users + presence) */
.users-list { display: flex; flex-direction: column; }
.user-row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--border); }
.user-row:last-child { border-bottom: none; }
.user-row-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--text-primary); color: var(--bg-primary, #fff); display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; flex: 0 0 auto; }
[data-theme="dark"] .user-row-avatar { background: #e5e5e5; color: #0a0a0a; }
.user-row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.user-row-name { font-weight: 600; }
.user-row-title { font-size: 0.82rem; color: var(--text-secondary); }
.user-status { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--text-secondary); white-space: nowrap; min-width: 96px; }
.user-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-400); flex: 0 0 auto; }
.user-status.is-online { color: #15803d; }
.user-status.is-online .user-status-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.user-you-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--gray-900); color: #fff; vertical-align: middle; }
[data-theme="dark"] .user-you-tag { background: #e5e5e5; color: #0a0a0a; }

/* ============ INTEGRATIONS ============ */
.integrations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.intg-card { padding: 18px 20px; }
.intg-card.intg-feature { grid-column: 1 / -1; }
.intg-head { display: flex; align-items: flex-start; gap: 14px; }
.intg-meta { flex: 1; min-width: 0; }
.intg-meta h3 { margin: 0 0 2px; font-size: 1rem; }
.intg-provider { font-size: 0.74rem; font-weight: 500; color: var(--text-secondary); margin-left: 4px; }
.intg-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--gray-900); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; flex: 0 0 auto; }
.intg-icon.intg-qb { background: #2ca01c; }
.intg-icon.intg-jw { background: #1f3b57; }
.intg-status { font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }
.intg-status.is-on { background: #dcfce7; color: #15803d; }
.intg-status.is-off { background: var(--gray-200); color: var(--text-secondary); }
.intg-body { margin-top: 14px; }
.intg-body code { background: var(--gray-100); padding: 1px 6px; border-radius: 5px; font-size: 0.82em; word-break: break-all; }
[data-theme="dark"] .intg-status.is-on { background: #14331f; color: #4ade80; }
[data-theme="dark"] .intg-body code { background: #1e1e1e; }

/* ============ INVOICE SUMMARY (AR header) — monochrome, on-brand ============ */
.inv-summary { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; padding: 0; margin-bottom: 18px; overflow: hidden; }
.inv-stat { display: flex; flex-direction: column; gap: 8px; padding: 18px 24px; flex: 1 1 0; min-width: 132px; border-left: 1px solid var(--border); }
.inv-stat:first-child { border-left: none; }
.inv-stat-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 8px; }
.inv-stat-val { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; }
.inv-stat-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: var(--gray-400); }
.inv-stat-primary { flex: 1.3 1 0; }
.inv-stat-primary .inv-stat-val { font-size: 1.55rem; }
.dot-overdue { background: #b91c1c; }
.dot-sent { background: #b08400; }
.dot-partial { background: #1d4ed8; }
.dot-paid { background: #15803d; }
.dot-draft { background: var(--gray-900); }
@media (max-width: 760px) { .inv-stat { flex-basis: 50%; border-left: none; border-top: 1px solid var(--border); } .inv-stat-primary { flex-basis: 100%; border-top: none; } }

/* ============ HOME TIMESHEET CALENDAR ============ */
.ts-wrap { margin: 4px 0 28px; }
.ts-card { padding: 22px 24px; overflow: visible; }
.ts-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ts-title { margin: 0; font-size: 1.15rem; }
.ts-billable { margin-top: 4px; font-size: 0.86rem; color: var(--text-secondary); }
.ts-billable strong { color: var(--text-primary); }
.ts-billable-amt { color: #15803d; font-weight: 600; }
.ts-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ts-nav { display: inline-flex; align-items: center; gap: 4px; }
.ts-nav-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.ts-nav-btn:hover { border-color: var(--gray-400); }
.ts-nav-today { padding: 0 12px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); cursor: pointer; font-size: 0.82rem; font-weight: 600; }
.ts-nav-today:hover { border-color: var(--gray-400); }
.ts-weeklabel { margin: 14px 0; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.ts-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.ts-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 4px; border-radius: 14px; transition: background 0.2s; cursor: default; }
.ts-day:not(.ts-day-total):hover { background: var(--gray-100); }
/* Hover/focus insight popover */
.ts-day-pop {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: 244px; max-width: 82vw; padding: 12px 13px; z-index: 40;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 38px rgba(16, 18, 24, 0.16);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease;
  text-align: left;
}
.ts-day:hover .ts-day-pop, .ts-day:focus-within .ts-day-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.ts-day-pop::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--surface); filter: drop-shadow(0 1px 0 var(--border)); }
.ts-pop-date { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.ts-pop-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; color: var(--text-secondary); padding: 2px 0; }
.ts-pop-row strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ts-pop-list { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.ts-pop-item { display: flex; justify-content: space-between; gap: 10px; font-size: 0.76rem; }
.ts-pop-item span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.ts-pop-item span:last-child { color: var(--text-secondary); font-variant-numeric: tabular-nums; flex-shrink: 0; }
/* Enriched day-ring hover: overview, section headers, calc line, insight */
.ts-pop-overview { font-size: 0.76rem; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.35; }
.ts-pop-sec { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); margin-top: 9px; }
.ts-pop-list + .ts-pop-sec { margin-top: 9px; }
.ts-pop-calc { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 0.72rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; line-height: 1.4; word-break: break-word; }
.ts-pop-insight { margin-top: 7px; font-size: 0.73rem; font-weight: 600; color: var(--text-primary); }
/* Client logo/photo beside each matter in the breakdown. */
.ts-pop-matter { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ts-pop-av { width: 16px; height: 16px; font-size: 0.5rem; flex: 0 0 auto; }
.ts-pop-mtext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Edge columns anchor the popup to a side so it stays on-screen. */
.home-month-cell.pop-right .ts-day-pop { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.home-month-cell.pop-right:hover .ts-day-pop, .home-month-cell.pop-right:focus-within .ts-day-pop { transform: translateX(0) translateY(0); }
.home-month-cell.pop-right .ts-day-pop::after { left: auto; right: 16px; transform: none; }
.home-month-cell.pop-left .ts-day-pop { left: 0; right: auto; transform: translateX(0) translateY(4px); }
.home-month-cell.pop-left:hover .ts-day-pop, .home-month-cell.pop-left:focus-within .ts-day-pop { transform: translateX(0) translateY(0); }
.home-month-cell.pop-left .ts-day-pop::after { left: 16px; right: auto; transform: none; }
/* Per-employee rows in the "Everyone" timesheet hover */
.ts-pop-item.ts-pop-person { align-items: center; }
.ts-pop-person-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.ts-pop-avatar { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; background-size: cover; background-position: center; background-color: var(--gray-100); display: inline-flex; align-items: center; justify-content: center; }
.ts-pop-avatar-ini { background: var(--black); color: var(--white); font-size: 0.56rem; font-weight: 700; }
.ts-pop-empty { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 0.76rem; color: var(--text-secondary); }
[data-theme="dark"] .ts-day:not(.ts-day-total):hover { background: rgba(255, 255, 255, 0.05); }
.ts-day.is-today { background: rgba(99, 102, 241, 0.08); }
.ts-day-total { background: none; }
.ts-total-disc { border-radius: 50%; background: var(--gray-900); }
.ts-total-disc .ts-total-val { color: #fff; }
[data-theme="dark"] .ts-total-disc { background: #e5e5e5; }
[data-theme="dark"] .ts-total-disc .ts-total-val { color: #0a0a0a; }
.ts-day-head { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ts-day-name { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.ts-day-num { font-size: 0.86rem; font-weight: 600; color: var(--text-primary); }
.ts-day.is-today .ts-day-num { color: #6366f1; }
.ts-ring-wrap { position: relative; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }
.ts-ring { transform: rotate(-90deg); }
.ts-ring-bg { fill: none; stroke: var(--gray-200); stroke-width: 8; }
.ts-ring-fg { fill: none; stroke: #6366f1; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.ts-ring-fg.is-done { stroke: #16a34a; }
.ts-ring-val { position: absolute; font-size: 1.02rem; font-weight: 700; color: var(--text-primary); }
.ts-total-val { font-size: 1.3rem; }
.ts-summary { display: flex; gap: 14px; margin-top: 20px; }
.ts-sum { flex: 1; background: var(--gray-50); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.ts-sum-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.ts-sum-val { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.ts-sum-sub { font-size: 0.78rem; color: #15803d; font-weight: 600; }
[data-theme="dark"] .ts-day-total, [data-theme="dark"] .ts-sum { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .ts-ring-bg { stroke: rgba(255, 255, 255, 0.1); }
@media (max-width: 860px) { .ts-grid { grid-template-columns: repeat(4, 1fr); } .ts-summary { flex-wrap: wrap; } }
@media (max-width: 480px) { .ts-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============ REPORTS ============ */
.report-section { margin-bottom: 26px; }
.report-section-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin: 0 0 12px; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.report-card { text-align: left; cursor: pointer; padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--border); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.report-card:hover { border-color: var(--gray-400); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08); }
.report-card-name { font-weight: 600; color: var(--text-primary); }
.report-card-desc { font-size: 0.82rem; color: var(--text-secondary); }
.report-output { margin-top: 8px; padding: 20px 22px; }
.report-output-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 12px; }
.report-output-head h3 { margin: 0; }
.report-table { margin-top: 10px; }

/* ============ DETAIL TABS (client / matter sub-pages) ============ */
.detail-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 10px 0 22px; overflow-x: auto; }
.detail-tab { background: none; border: none; padding: 11px 16px; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.detail-tab:hover { color: var(--text-primary); }
.detail-tab.active { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.detail-panel { display: none; }
.detail-panel.active { display: block; }
.detail-panel > .card { margin-bottom: 16px; }
/* Inside a detail tab, sections read as real, contained white cards (so table
   columns feel live and together) — overriding the flush/borderless variant. */
.detail-panel > .card.card-flush {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(16, 18, 24, 0.04);
  margin-bottom: 16px;
}
.detail-panel > .card.card-flush .card-header { padding: 16px 22px; border-bottom: 1px solid var(--border); }
.detail-panel > .card.card-flush .card-header h3 { font-size: 1rem; }
.detail-panel > .card.card-flush .card-body { padding: 18px 22px 20px; }
.detail-panel > .card.card-flush .table { margin-top: 0; }
.detail-panel .dashboard-grid { margin-bottom: 16px; }

/* ============ LOGIN — WebGL animated background ============ */
/* Keep the full-viewport fixed positioning from .login-screen (a bare
   position:relative here collapsed it to the card height); fixed already
   establishes the containing block for the absolute #login-bg canvas. */
#login-screen { position: fixed; inset: 0; overflow: hidden; }
#login-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
#login-screen { background: radial-gradient(120% 120% at 50% 32%, #161616, #050506 70%); }
.login-stack { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 20px; }
#login-screen .login-card {
  position: relative; z-index: 1; padding: 40px 44px; max-width: 380px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 30px 80px rgba(10, 12, 24, 0.5);
  border-radius: 22px;
}
#login-screen .login-card .login-subtitle { margin-bottom: 0; }
.login-google-pill {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 28px; border-radius: 999px; cursor: pointer;
  background: #12131a; color: #fff; border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 600;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4); transition: background .15s ease, transform .12s ease;
}
.login-google-pill:hover { background: #1c1e29; transform: translateY(-1px); }
.login-google-pill svg { flex: 0 0 auto; background: #fff; border-radius: 50%; padding: 2px; box-sizing: content-box; }
#login-screen .login-error { position: relative; z-index: 1; color: #fca5a5; }

/* ============ WEBSITE CMS ============ */
.ws-section { padding: 20px 22px; }
.ws-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ws-section-head h3 { margin: 0; }
.ws-input { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; background: var(--surface); color: var(--text-primary); font-family: inherit; }
.ws-input:focus { outline: none; border-color: var(--text-primary); }
.ws-add { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ws-add .ws-input { flex: 1; min-width: 160px; }
.ws-name-cell { display: flex; align-items: center; gap: 10px; }
.ws-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #111; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.66rem; font-weight: 700; background-size: cover; background-position: center; }

.activity-all { max-height: 62vh; overflow-y: auto; }
.activity-all .activity-item { padding: 10px 4px; border-bottom: 1px solid var(--border); }
.activity-all .activity-item:last-child { border-bottom: none; }

/* P&L snapshot */
.pnl-row { display: flex; justify-content: space-between; font-size: 0.88rem; margin-top: 6px; }
.pnl-bar { height: 8px; border-radius: 6px; background: var(--gray-100); overflow: hidden; margin: 4px 0 6px; }
.pnl-bar-fill { display: block; height: 100%; border-radius: 6px; }
.pnl-rev { background: #22c55e; }
.pnl-exp { background: #f59e0b; }
.pnl-net { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-weight: 600; }
.amt-neg { color: #dc2626; }
.amt-pos { color: #16a34a; }

/* Utilization */
.util-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.util-name { width: 120px; font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.util-track { flex: 1; height: 8px; border-radius: 6px; background: var(--gray-100); overflow: hidden; }
.util-fill { display: block; height: 100%; background: var(--black); border-radius: 6px; }
.util-hours { width: 52px; text-align: right; font-size: 0.82rem; color: var(--text-secondary); }

/* Ask Clerk CTA */
.clerk-cta { padding: 20px 22px; margin-bottom: 18px; }
.clerk-cta-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.clerk-cta-head h3 { margin: 0; }
.clerk-cta-form { display: flex; gap: 10px; }
.clerk-cta-form input { flex: 1; }
.clerk-cta-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ============================================================
   Liquid-glass Clerk — docked Home assistant bar + page input.
   Translucent, frosted, glossy, with a soft accent glow.
   ============================================================ */

/* The Home "Ask Clerk" card sits inline in the Home flow (not a floating
   dock), keeping the liquid-glass look. Scoped to #page-home. */
#page-home .clerk-cta {
  position: relative;
  left: auto; right: auto; bottom: auto;
  margin: auto 0 8px; /* margin-top:auto pins the card to the bottom of the page */
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.28)),
    radial-gradient(130% 160% at 0% 0%, rgba(99, 102, 241, 0.18), transparent 58%),
    radial-gradient(130% 160% at 100% 120%, rgba(217, 70, 239, 0.16), transparent 60%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
  box-shadow:
    0 10px 30px rgba(17, 24, 39, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22);
}
/* Normal page breathing room (no dock to clear anymore). */
#page-home { padding-bottom: 32px; position: relative; }
/* Subtle WebGL colonnade background: sits behind the home content, spanning the
   full page (grows with scroll). Content is lifted above it via z-index. */
/* WebGL home background removed — the home uses the plain solid app background. */
.home-bg { display: none; }
#page-home .home-launch, #page-home #home-timesheet, #page-home .clerk-bar { position: relative; z-index: 1; }

/* Glassy input pill (Home dock + Clerk page textarea) */
#page-home .clerk-cta-form input,
.clerk-input textarea {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 3px rgba(17, 24, 39, 0.07);
  padding: 11px 14px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.92rem;
  outline: none;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
#page-home .clerk-cta-form input::placeholder,
.clerk-input textarea::placeholder { color: rgba(60, 60, 70, 0.6); }
#page-home .clerk-cta-form input:focus,
.clerk-input textarea:focus {
  border-color: rgba(139, 92, 246, 0.7);
  box-shadow: inset 0 1px 3px rgba(17, 24, 39, 0.07), 0 0 0 3px rgba(139, 92, 246, 0.18);
}

/* Accent gradient submit buttons that read as glass-on-glass */
#page-home .clerk-cta-form .btn-primary,
.clerk-input #clerk-send {
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6 55%, #d946ef);
  color: #fff;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
#page-home .clerk-cta-form .btn-primary:hover,
.clerk-input #clerk-send:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
#page-home .clerk-cta-form .btn-primary:active,
.clerk-input #clerk-send:active { transform: translateY(1px); }

/* Glassy suggestion chips */
#page-home .clerk-cta .clerk-suggestion {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 0.82rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#page-home .clerk-cta .clerk-suggestion:hover { background: rgba(255, 255, 255, 0.7); border-color: rgba(139, 92, 246, 0.5); }

/* Clerk page input bar → floating frosted bar */
.clerk-input {
  border-top: none;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3)),
    radial-gradient(120% 180% at 100% 0%, rgba(139, 92, 246, 0.12), transparent 60%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 10px 34px rgba(17, 24, 39, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
  #page-home .clerk-cta { left: auto; right: auto; bottom: auto; }
}

/* Dark theme: swap white frost for a dark translucent frost */
[data-theme="dark"] #page-home .clerk-cta {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(135deg, rgba(38, 38, 46, 0.7), rgba(20, 20, 26, 0.55)),
    radial-gradient(130% 160% at 0% 0%, rgba(99, 102, 241, 0.28), transparent 58%),
    radial-gradient(130% 160% at 100% 120%, rgba(217, 70, 239, 0.22), transparent 60%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] #page-home .clerk-cta-form input,
[data-theme="dark"] .clerk-input textarea { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] #page-home .clerk-cta-form input::placeholder,
[data-theme="dark"] .clerk-input textarea::placeholder { color: rgba(220, 220, 230, 0.5); }
[data-theme="dark"] #page-home .clerk-cta .clerk-suggestion { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] #page-home .clerk-cta .clerk-suggestion:hover { background: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .clerk-input {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(135deg, rgba(38, 38, 46, 0.66), rgba(20, 20, 26, 0.5)),
    radial-gradient(120% 180% at 100% 0%, rgba(139, 92, 246, 0.2), transparent 60%);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Unify the Clerk page composer with the Home search bar — same monochrome
   glass container, borderless input, and dark pill send button. */
.clerk-input {
  align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 8px 30px rgba(16, 18, 24, 0.08);
}
.clerk-input:focus-within { border-color: var(--gray-500); }
.clerk-input textarea { border: none; background: none; box-shadow: none; border-radius: 0; padding: 8px 6px; }
.clerk-input textarea:focus { border: none; box-shadow: none; }
.clerk-input #clerk-send { background: var(--gray-900); color: #fff; border-radius: 999px; box-shadow: none; padding: 10px 20px; }
.clerk-input #clerk-send:hover { filter: none; opacity: 0.88; box-shadow: none; }
[data-theme="dark"] .clerk-input { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); }
[data-theme="dark"] .clerk-input textarea { background: none; border: none; }
[data-theme="dark"] .clerk-input #clerk-send { background: #e5e5e5; color: #0a0a0a; }

/* Deadline groups */
.deadline-group + .deadline-group { margin-top: 14px; }
.deadline-group-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.deadline-group-label.danger { color: #dc2626; }
.deadline-date.overdue { background: #fde8e8; color: #9b1c1c; }

/* Deadline rows on matter/client pages (with delete affordance) */
.deadline-info { flex: 1; min-width: 0; }
.deadline-list .deadline-item { align-items: center; }
.dl-del {
  border: none; background: none; cursor: pointer; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 8px; line-height: 1;
  color: var(--text-muted); font-size: 1.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.dl-del:hover { background: #fdf2f2; color: #d33b3b; }
.dl-add-row { align-items: center; }
.dl-add-row .dl-add-title { flex: 2 1 200px; }
.dl-add-row input[type="date"] { flex: 0 1 160px; }
.dl-add-row .cselect { flex: 0 1 150px; }

/* Admin status dropdown in the matters list — looks like the status badge */
.matter-status-select {
  appearance: none; -webkit-appearance: none;
  border: none; cursor: pointer; font: inherit; font-size: 0.74rem; font-weight: 600;
  padding: 4px 26px 4px 12px; border-radius: 999px; line-height: 1.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.matter-status-select:focus { outline: 2px solid var(--text-primary); outline-offset: 1px; }

/* Spacing between the stacked client-detail cards */
#client-detail-body > .card { margin-bottom: 14px; }

/* Team inside the client's main card */
.client-top-team { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.client-top-team-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); font-weight: 600; }
.client-top-team .client-team-member { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; }
/* Per-client company logo (top card) — avatar/logo sits to the LEFT of the name */
.client-head-left { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.client-logo-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.client-logo { display: block; width: 56px; height: 56px; flex: 0 0 auto; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 50%; }
.mdm-avatar-lg { width: 56px; height: 56px; font-size: 1.05rem; flex: 0 0 auto; }
.client-logo-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.client-logo-upload, .client-logo-remove { font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; white-space: nowrap; background: var(--surface); font-family: inherit; }
.client-logo-upload:hover, .client-logo-remove:hover { border-color: var(--gray-400); color: var(--text-primary); }
.client-logo-remove { color: var(--danger, #b91c1c); border-color: transparent; padding: 2px 8px; }
/* Drag-and-drop onto the header */
/* Tap-to-upload logo: the circle itself is the control, with a camera badge. */
.client-logo-tap { position: relative; display: inline-flex; cursor: pointer; border-radius: 50%; flex: 0 0 auto; }
.client-logo-tap-badge {
  position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gray-900); color: #fff; display: grid; place-items: center;
  border: 2px solid var(--surface); transition: transform 0.14s;
}
[data-theme="dark"] .client-logo-tap-badge { background: #fff; color: #0a0a0a; }
.client-logo-tap:hover .client-logo-tap-badge { transform: scale(1.08); }
.client-logo-tap:hover .client-logo, .client-logo-tap:hover .mdm-avatar { filter: brightness(0.94); }
.client-logo-drop { position: relative; }
.client-logo-drop.logo-dragover { outline: 2px dashed var(--gray-500); outline-offset: -6px; }
.client-logo-drop-hint { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.86); border-radius: inherit; font-size: 0.95rem; font-weight: 600; color: var(--text-primary); pointer-events: none; z-index: 5; }
.client-logo-drop.logo-dragover .client-logo-drop-hint { display: flex; }
[data-theme="dark"] .client-logo-drop-hint { background: rgba(18, 18, 18, 0.88); }
[data-theme="dark"] .dl-del:hover { background: #2a1515; color: #f87171; }

@media (max-width: 900px) {
  .home-cols { grid-template-columns: 1fr; }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ELITE MOBILE PASS — exhaustive small-screen hardening
   Collapses the last multi-column grids, keeps tab strips
   scrolling instead of squeezing, clamps every popover/menu
   inside the viewport, stacks modal actions, and lets the
   side drawer take the full phone width.
   ============================================================ */
@media (max-width: 768px) {
  /* Remaining multi-column grids collapse to one column */
  .ar-grid,
  .pnl-detail-summary,
  .rates-grid { grid-template-columns: 1fr; }
  .home-section .ar-grid { gap: 20px; }

  /* Tab strips never squeeze — they scroll (containers already set overflow) */
  .detail-tabs,
  .users-tabs { flex-wrap: nowrap; }
  .detail-tab { flex: 0 0 auto; }

  /* Popovers/menus never spill past the viewport edge */
  .presence-popup { min-width: 0; width: min(300px, calc(100vw - 24px)); right: 0; left: auto; }
  .nav-perm-pop { left: auto; right: 0; min-width: 0; width: min(240px, calc(100vw - 24px)); }
  .cselect-list { max-width: calc(100vw - 24px); }

  /* Side drawer takes the full width on phones */
  .modal-drawer .modal-drawer-panel { width: 100vw; max-width: 100vw; }

  /* Per-client avatar/logo shrinks a touch so the header never overflows */
  .client-logo, .mdm-avatar-lg { width: 48px; height: 48px; }
  .client-head-left { gap: 12px; }
}

@media (max-width: 480px) {
  /* Grids that stayed two-up now go single-column */
  .ret-grid,
  .quick-actions,
  .client-expand-stats { grid-template-columns: 1fr; }

  /* Form rows fully stack — no side-by-side squeeze on the narrowest screens */
  .maf-row, .time-row { flex-direction: column; align-items: stretch; }
  .maf-row > .form-group, .time-row > .form-group { flex: 1 1 auto; width: 100%; }

  /* Modal actions stack full-width and read primary-first */
  .modal-footer { flex-direction: column-reverse; align-items: stretch; }
  .modal-footer .btn { width: 100%; }

  /* Search fills its row instead of forcing a 200px minimum */
  .search-input { min-width: 0; width: 100%; }

  /* Assign-team picker: tighter cells so two fit comfortably */
  .assign-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
}