:root{
  /* Gmail-ish neutrals */
  --bg:#f6f8fc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e6eaf2;

  /* Accent */
  --blue:#2563eb;
  --blue2:#1d4ed8;

  /* Softer elevation + radius */
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 10px 26px rgba(15,23,42,.06);
  --radius:16px;

  /* Spacing scale (used by styles-polish.css + some JS inline styles) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-8: 24px;

  /* Compatibility aliases (used by styles-gmail.css / styles-polish.css) */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-500: var(--blue);
  --primary-600: var(--blue);
  --primary-700: var(--blue2);

  /* Semantic tints (used sparingly; keeps primary accent blue) */
  --success-50: #f0fdf4;
  --success-200: #bbf7d0;
  --success-600: #16a34a;
  --success-700: #15803d;

  --warning-50: #fffbeb;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-600: #d97706;
  --warning-700: #b45309;

  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fecaca;
  --danger-300: #fca5a5;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;

  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-900: #111827;

  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-tertiary: rgba(15,23,42,.55);

  --surface: var(--card);
  --hover-bg: #f7fafc;

  --border-light: var(--border);
  --border-medium: rgba(15,23,42,.14);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: var(--radius);
  --radius-full: 9999px;

  --shadow-sm: var(--shadow);
  --shadow-md: var(--shadow);
  --shadow-lg: 0 12px 34px rgba(15,23,42,.10);
  --shadow-xl: 0 22px 60px rgba(15,23,42,.12);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

.muted{ color:var(--muted); }
.hidden{ display:none !important; }

.app-shell{
  min-height:100vh;
  padding:18px;
  display:flex;
  flex-direction:row;
  gap:14px;
}

/* Header */
.app-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1px 1px;
}

h1{ margin:0; font-size:24px; }

.header-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.btn{
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:600;
  cursor:pointer;
}

.btn.primary{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}
.btn.primary:hover{ background:var(--blue2); }

.btn.ghost:hover{ background:#f7fafc; }

.btn:disabled{ opacity:.55; cursor:not-allowed; }

.btn.small{
  padding:8px 10px;
  font-size:13px;
  border-radius:12px;
}

/* Dashboard */
.dashboard{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

/* Filters */
.filters{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
}

.filter-row{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.filter-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:160px;
}

.filter-group.grow{
  flex:1;
  min-width:280px;
}

.filter-group label{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.input,.select,.textarea{
  width:100%;
  height:40px;
  border-radius:14px;
  border:1px solid var(--border);
  padding:0 12px;
  font-weight:500;
  outline:none;
  background:#fff;
}

.textarea{
  min-height:86px;
  padding:10px 12px;
  resize:vertical;
}

/* Main split */
.mainSplit{
  display:grid;
  grid-template-columns: var(--list-pane-width, 40%) 1fr;
  gap:0 !important; /* Force no gap */
  column-gap: 0 !important; /* Explicitly remove column gap */
  margin-top: 0;
  padding-top: 0;
  position: relative;
  transition: none !important;
}

/* Force grid to update when CSS variable changes */
.mainSplit[style*="--list-pane-width"] {
  grid-template-columns: var(--list-pane-width) 1fr;
}

/* Pane resizer - positioned at the boundary */
.pane-resizer {
  position: absolute;
  left: var(--list-pane-width, 40%);
  top: 0;
  bottom: 0;
  width: 6px;
  margin-left: -3px; /* Centered exactly on the border */
  cursor: col-resize;
  z-index: 999;
  background: transparent; /* Invisible by default */
  transition: background 150ms ease;
}

.pane-resizer::before {
  display: none; /* Remove the visible line */
}

.pane-resizer:hover {
  background: #3b82f6;
  width: 4px;
  margin-left: -2px;
}

.pane-resizer.resizing {
  background: #2563eb;
  width: 4px;
  margin-left: -2px;
}

/* Keep the main split flush under the filters row.
   If Gmail tabs are ever populated, we'll pull the panes up slightly under the tabs. */
body > div.app-shell > div > div.mainSplit {
  margin-top: 0 !important;
}

#gmailTabs + .mainSplit {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#gmailTabs:not(:empty) + .mainSplit {
  margin-top: -12px !important;
}

/* Ensure listPane and detailPane touch the tabs */
#contactListWrap,
#detailPanel {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.listPane,
#contactListWrap,
aside.listPane {
  border-bottom-left-radius: var(--radius) !important;
  border-bottom-right-radius: 0 !important;
}

.detailPane,
#detailPanel,
section.detailPane {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: var(--radius) !important;
}

/* Remove any default spacing on all child elements */
.mainSplit > * {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Force all panes inside mainSplit to have square tops */
.mainSplit .listPane,
.mainSplit .detailPane,
.mainSplit #contactListWrap,
.mainSplit #detailPanel {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-radius: 0 !important;
}

.listPane,.detailPane{
  background:var(--card);
  border-top:none;
  border-radius:0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  box-shadow:none;
  overflow:hidden;
  margin-top: 0;
  padding-top: 0;
}

.listPane {
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: var(--radius) !important;
  border-bottom-right-radius: 0 !important;
  margin-right: 0 !important;
}

.detailPane {
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  border-left:none;
  display: flex;
  flex-direction: column;
  position: relative;
  /* IMPORTANT: do not cap height; pane must reach bottom of viewport */
  max-height: none;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: var(--radius) !important;
  margin-left: 0 !important;
}

/* Detail pane content scrolls, buttons stick at bottom */
#detailContent {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  min-height: 0;
}

/* Sticky bottom action bar */
.detailTopStrip {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  z-index: 100;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

.detailTopActions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.paneHead{
  padding:14px 14px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--border);
}

.paneTitle{ font-size:20px; font-weight:700; }
.paneSub{ font-size:13px; margin-top:2px; }

.list{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  /* IMPORTANT: allow list to fill pane height and scroll naturally */
  max-height: none;
  overflow:auto;
}

/* Folder list */
.folderList{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  border-bottom:1px solid var(--border);
}

.folderRow.active{
  background:rgba(37,99,235,.08);
}

/* Contact rows */
.row{
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px;
  display:flex;
  gap:10px;
  align-items:center;
  cursor:pointer;
  background:#fff;
}

.row.selected{
  border-color:rgba(37,99,235,.55);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

.row-check{ width:18px; height:18px; }

.avatar{
  width:44px;
  height:44px;
  border-radius:14px;
  background:#0f172a;
  color:#fff;
  font-weight:700;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}

.rowMain{ min-width:0; flex:1; }
.rowName{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rowSub{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.pill{
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:600;
  background:#f8fafc;
  white-space:nowrap;
}

/* Folder row right-side controls (count + menu) */
.folderRowRight{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.folderCountPill{
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--border);
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  font-weight:600;
  line-height:1;
  min-width:0;
  text-align:center;
}

/* Subtle kebab menu button for folders */
.folderMenuBtn{
  width:32px;
  height:32px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-weight:600;
  line-height:1;
}
.folderMenuBtn:hover{
  border-color:var(--border);
  background:rgba(255,255,255,.9);
  color:var(--text);
}

/* When the folder row is active, keep the control clean (no pill look) */
.folderRow.active .folderCountPill{
  color:rgba(15,23,42,.85);
}
.folderRow.active .folderMenuBtn{
  color:rgba(15,23,42,.85);
  background:transparent;
  border-color:transparent;
}

/* Desktop: show kebab only on hover/active to reduce clutter */
@media (hover:hover){
  .folderMenuBtn{ opacity:0; pointer-events:none; }
  .folderRow:hover .folderMenuBtn,
  .folderRow.active .folderMenuBtn{
    opacity:1;
    pointer-events:auto;
  }
}

/* Touch devices: always show kebab (no hover) */
@media (hover:none){
  .folderMenuBtn{ opacity:1; }
}

/* Detail */
.detailPane{ padding:0px !important; }

.kv{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}

.k{ font-weight:var(--weight-semibold); color:var(--muted); font-size:13px; }
.v{ font-weight:var(--weight-semibold); }

.empty{
  height:100%;
  min-height:420px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:40px;
}

.emptyTitle{ font-weight:var(--weight-bold); font-size:20px; }
.emptySub{ margin-top:8px; }

/* Bulk bar */
.bulkMount{
  border:1px solid var(--border);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 0;
}

.bulkMount.hidden{ 
  display:none;
  margin: 0;
  padding: 0;
}
.bulkBar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  width: 100%;
}
.bulkSpacer {
  flex: 1;
}
.bulkLeft,.bulkRight{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; }
.bulkCount{
  font-size:12px;
  color:var(--muted);
  font-weight:var(--weight-semibold);
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
}

/* Modals */
.backdrop{
  position:fixed;
  inset:0;
  display:none;
  background:rgba(0,0,0,.35);
  align-items:center;
  justify-content:center;
  z-index:99999;
}

.backdrop.show{ display:flex; }

.modal{
  background:#fff;
  border-radius:18px;
  width:min(720px,92vw);
  max-height:90vh;
  overflow:auto;
  box-shadow:0 30px 70px rgba(0,0,0,.25);
}

.modalHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}

.modalTitle{ font-weight:var(--weight-bold); font-size:16px; }

.iconBtn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-weight:var(--weight-bold);
}

.modalBody{ padding:16px; }
.modalFoot{
  padding:14px 16px;
  border-top:1px solid var(--border);
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

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

.label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:var(--weight-semibold);
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* Compose cards */
.composeGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}

.composeCard{
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  cursor:pointer;
  background:#fff;
  position:relative;
  transition:transform .08s ease;
}

.composeCard:hover{
  transform:translateY(-2px);
  border-color:rgba(37,99,235,.35);
  box-shadow:0 10px 30px rgba(15,23,42,.08);
}

.composeIcon{
  font-size:24px;
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(37,99,235,.10);
  margin-bottom:10px;
}

.composeTitle{ font-weight:var(--weight-bold); }
.composeSub{ margin-top:6px; font-size:12px; color:var(--muted); line-height:1.3; }

.composeBadge{
  position:absolute;
  top:10px;
  right:10px;
  font-size:11px;
  font-weight:var(--weight-bold);
  padding:4px 8px;
  border-radius:999px;
  background:#111827;
  color:#fff;
}

/* Tags */
.tagPicker{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:16px;
}

.tagChip{
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  font-weight:var(--weight-semibold);
  font-size:12px;
  background:#fff;
  cursor:pointer;
  user-select:none;
}

.tagChip.active{
  background:rgba(37,99,235,.10);
  border-color:rgba(37,99,235,.35);
  color:#0b3aa6;
}

/* Settings */
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tab{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:var(--weight-semibold);
  cursor:pointer;
}

.tab.active{
  background:rgba(37,99,235,.10);
  border-color:rgba(37,99,235,.35);
  color:#0b3aa6;
}

@media (max-width:1050px){
  .mainSplit{ grid-template-columns:1fr; }
  .dashboard{ grid-template-columns:1fr; }
}

/* ✅ Layout: list + detail panes should stretch to bottom of viewport */
.mainSplit{
  display: grid;
  grid-template-columns: var(--list-pane-width, 578px) 1fr;
  gap: 14px;
  align-items: stretch;
  height: auto;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.folderPane{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow: var(--shadow);
}

.listPane,
.detailPane{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow: var(--shadow);
}

.listPane {
  border-bottom-left-radius: var(--radius) !important;
  border-bottom-right-radius: 0 !important;
}

.detailPane {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: var(--radius) !important;
}

/* Lists should scroll inside panes */
.list{
  flex:1;
  overflow:auto;
  padding:12px;
}

/* ===============================
   DETAILS PANEL (PREMIUM CRM)
================================*/
.detailPane{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.detailCard{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}

.detailHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.detailHeaderLeft{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.detailAvatar{
  width:62px;
  height:62px;
  border-radius:18px;
  background:#111827;
  color:#fff;
  font-weight:var(--weight-bold);
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.detailTitleWrap{
  min-width:0;
  flex:1;
}

.detailName{
  font-size:20px;
  font-weight:var(--weight-bold);
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.detailMeta{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
  font-weight:var(--weight-semibold);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.detailActions{
  display:flex;
  gap:10px;
  align-items:center;
}

.detailActions .btn{
  padding:8px 10px;
  border-radius:12px;
  font-size:13px;
}

.detailGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

.kvRow{
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px 12px;
  background:#fff;
}

.kvKey{
  font-size:12px;
  font-weight:var(--weight-semibold);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.kvVal{
  margin-top:6px;
  font-size:14px;
  font-weight:var(--weight-semibold);
  color:var(--text);
  word-break:break-word;
}

.kvVal a{
  color:var(--blue);
  font-weight:var(--weight-bold);
  text-decoration:none;
}
.kvVal a:hover{
  text-decoration:underline;
}

.detailTags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}

.detailTags .tagChip{
  cursor:default;
  background:#f1f6ff;
  border-color:#cfe1ff;
  color:#0b3aa6;
  box-shadow:0 8px 20px rgba(37,99,235,.08);
}
/* ===============================
   TOP LEFT TABS (Contacts / Calendar)
   CRM-style pill tabs
================================ */

.topTabs {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.tabBtn {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.92);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: var(--weight-bold);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 18px rgba(15,23,42,.06);
  transition: all 0.15s ease;
  user-select: none;
}

.tabBtn:hover {
  transform: translateY(-1px);
  background: #fff;
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 14px 22px rgba(15,23,42,.08);
}

.tabBtn.active {
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 16px 28px rgba(37,99,235,.14);
  color: #0b3aa6;
}

.tabBtn .tabIcon {
  width: 26px;
  height: 24px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 14px;
  background: rgba(37,99,235,.08);
}

.tabBtn.active .tabIcon {
  background: rgba(37,99,235,.18);
}

/* ===============================
   SEARCH + SORT BAR POLISH
================================ */

.filters {
  margin-top: 0px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  backdrop-filter: blur(10px);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.filter-group label {
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.filter-group input,
.filter-group select {
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 0 14px;
  outline: none;
  font-weight: var(--weight-semibold);
  font-size: 14px;
  background: #fff;
  transition: all 0.18s ease;
  box-shadow: 0 8px 18px rgba(15,23,42,.05);
}

.filter-group input::placeholder {
  color: rgba(100,116,139,.75);
  font-weight: var(--weight-semibold);
}

.filter-group input:focus,
.filter-group select:focus {
  border-color: rgba(37,99,235,.5);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}

/* Make the search bar feel like a premium CRM */
.filter-group.grow input {
  font-size: 15px;
  font-weight: var(--weight-semibold);
}

/* Filter button more premium */
#filterBtn {
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 8px 18px rgba(15,23,42,.05);
  transition: all .15s ease;
}

#filterBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(15,23,42,.08);
  border-color: rgba(37,99,235,.25);
}

/* ===============================
   OPTIONAL: make the sort dropdown nicer
================================ */
#sortSelect {
  cursor: pointer;
}

/* ===============================
   FIX: boring flat bar / spacing
================================ */
.filters {
  margin-bottom: 14px;
}
/* ===============================
   TOP LEFT TABS (Contacts / Calendar)
   CRM-style pill tabs
================================ */

.topTabs {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.tabBtn {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.92);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: var(--weight-bold);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 18px rgba(15,23,42,.06);
  transition: all 0.15s ease;
  user-select: none;
}

.tabBtn:hover {
  transform: translateY(-1px);
  background: #fff;
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 14px 22px rgba(15,23,42,.08);
}

.tabBtn.active {
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 16px 28px rgba(37,99,235,.14);
  color: #0b3aa6;
}

.tabBtn .tabIcon {
  width: 26px;
  height: 24px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 14px;
  background: rgba(37,99,235,.08);
}

.tabBtn.active .tabIcon {
  background: rgba(37,99,235,.18);
}

/* ===============================
   SEARCH + SORT BAR POLISH
================================ */

.filters {
  margin-top: 0px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  backdrop-filter: blur(10px);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.filter-group label {
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.filter-group input,
.filter-group select {
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 0 14px;
  outline: none;
  font-weight: var(--weight-semibold);
  font-size: 14px;
  background: #fff;
  transition: all 0.18s ease;
  box-shadow: 0 8px 18px rgba(15,23,42,.05);
}

.filter-group input::placeholder {
  color: rgba(100,116,139,.75);
  font-weight: var(--weight-semibold);
}

.filter-group input:focus,
.filter-group select:focus {
  border-color: rgba(37,99,235,.5);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}

/* Make the search bar feel like a premium CRM */
.filter-group.grow input {
  font-size: 15px;
  font-weight: var(--weight-semibold);
}

/* Filter button more premium */
#filterBtn {
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 8px 18px rgba(15,23,42,.05);
  transition: all .15s ease;
}

#filterBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(15,23,42,.08);
  border-color: rgba(37,99,235,.25);
}

/* ===============================
   OPTIONAL: make the sort dropdown nicer
================================ */
#sortSelect {
  cursor: pointer;
}

/* ===============================
   FIX: boring flat bar / spacing
================================ */
.filters {
  margin-bottom: 14px;
}
/* =========================================
   CONTACTS / CALENDAR TOGGLE (Top Left)
   Fix ugly browser-style buttons
========================================= */

.viewToggle {
  display: flex;
  gap: 10px;
  padding: 10px 12px 6px 12px;
  margin-bottom: 6px;
}

.viewToggle button {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: var(--weight-bold);
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(15,23,42,.06);
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.viewToggle button:hover {
  transform: translateY(-1px);
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 14px 24px rgba(15,23,42,.08);
  background: #fff;
}

.viewToggle button.active {
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 16px 28px rgba(37,99,235,.14);
  color: #0b3aa6;
}

.viewToggle button.active::after {
  content: "";
  height: 3px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -6px;
  background: rgba(37,99,235,.55);
  border-radius: 999px;
}

.viewToggle button {
  position: relative;
}

/* Make icons look intentional */
.viewToggle button .icon {
  width: 26px;
  height: 24px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(37,99,235,.08);
  font-size: 14px;
}

.viewToggle button.active .icon {
  background: rgba(37,99,235,.18);
}
.filters {
  margin-top: 0px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  backdrop-filter: blur(10px);
}

.filter-group input,
.filter-group select {
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 0 14px;
  font-weight: var(--weight-semibold);
  font-size: 14px;
  box-shadow: 0 8px 18px rgba(15,23,42,.05);
  transition: all 0.18s ease;
}

.filter-group input:focus,
.filter-group select:focus {
  border-color: rgba(37,99,235,.5);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}

/* =========================================
   ✅ CONTACTS / CALENDAR MENU BUTTONS
   Targets #menuContactsBtn and friends
========================================= */

#menuContactsBtn,
#menuCalendarBtn,
#menuTasksBtn,
#menuEventsBtn,
#menuAgendaBtn,
#menuWeekBtn,
#menuMonthBtn {
  appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: var(--weight-bold);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  user-select: none;
}

/* Hover = nice lift */
#menuContactsBtn:hover,
#menuCalendarBtn:hover,
#menuTasksBtn:hover,
#menuEventsBtn:hover,
#menuAgendaBtn:hover,
#menuWeekBtn:hover,
#menuMonthBtn:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.10);
}

/* Active state — this requires JS to add `.active` class */
#menuContactsBtn.active,
#menuCalendarBtn.active,
#menuTasksBtn.active,
#menuEventsBtn.active,
#menuAgendaBtn.active,
#menuWeekBtn.active,
#menuMonthBtn.active {
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.55);
  color: #0b3aa6;
  box-shadow: 0 18px 40px rgba(37,99,235,.16);
}

/* Focus ring (keyboard navigation) */
#menuContactsBtn:focus,
#menuCalendarBtn:focus,
#menuTasksBtn:focus,
#menuEventsBtn:focus,
#menuAgendaBtn:focus,
#menuWeekBtn:focus,
#menuMonthBtn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(37,99,235,.18), 0 18px 38px rgba(15, 23, 42, 0.10);
}

/* Make them sit nicely in a row if they’re in a container */
#menuContactsBtn,
#menuCalendarBtn,
#menuPipelineBtn {
  margin-right: 10px;
}


/* ✅ Premium segmented control */
.folderPane .menuTabs,
.folderPane .tabsRow,
.folderPane > div:first-child {
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 10px 20px rgba(15,23,42,.06);
  width: fit-content;
  margin: 10px auto;
}

#menuContactsBtn,
#menuCalendarBtn{
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: var(--weight-semibold);
  min-width: 140px;
  justify-content: center;
}


/* Premium segmented toggle */
.segmented {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.segBtn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: var(--weight-semibold);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  transition: all 160ms ease;
}

.segBtn:hover {
  background: rgba(0,0,0,0.04);
  color: #111;
}

.segBtn.active {
  background: white;
  color: #111;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
/* =======================================================
   Premium Agenda Styling (Calendar)
======================================================= */

.calSectionHeader {
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: rgba(17,17,17,0.55);
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 10px 4px 6px;
}

.calCards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 12px;
}

.calCard {
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.calCard:hover {
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

.calCard:active {
  transform: translateY(0px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.calCardLeft {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.calIcon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.04);
  font-size: 14px;
}

.calText {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calTitle {
  font-weight: var(--weight-bold);
  font-size: 13.5px;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calSub {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: rgba(17,17,17,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calWhen {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: rgba(17,17,17,0.65);
  white-space: nowrap;
  padding-top: 2px;
}

/* Makes each day section feel grouped */
.calSection {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 12px;
}

.calSection:first-child {
  border-top: none;
  padding-top: 0;
}

/* =======================================================
   Superhuman-style Agenda (Premium CRM Calendar)
   Append to bottom of styles.css
======================================================= */

/* Make the calendar list feel more spacious */
#calendarWrap {
  padding: 0;
}

/* Date header styling (airy + premium) */
.calSectionHeader {
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: rgba(17, 17, 17, 0.50);
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 18px 6px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.calSectionHeader::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.07);
  margin-top: 1px;
}

/* Section spacing */
.calSection {
  padding-bottom: 10px;
}

/* Card stack layout */
.calCards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 6px 10px;
}

/* The actual card (Superhuman airy style) */
.calCard {
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.07);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.calCard:hover {
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 26px 60px rgba(0,0,0,0.09);
}

.calCard:active {
  transform: translateY(0px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.07);
}

/* Left content */
.calCardLeft {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* Icon badge (clean, modern, subtle) */
.calIcon {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.045);
  font-size: 14px;
  flex: 0 0 auto;
}

/* Title/subtitle hierarchy */
.calText {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calTitle {
  font-weight: var(--weight-bold);
  font-size: 14px;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.calSub {
  font-size: 12px;
  font-weight: 850;
  color: rgba(17,17,17,0.52);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right-side time (quiet but crisp) */
.calWhen {
  font-size: 12px;
  font-weight: 950;
  color: rgba(17,17,17,0.60);
  white-space: nowrap;
  padding-top: 2px;
  flex: 0 0 auto;
}

/* Make empty state match premium cards */
.emptyState {
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.07);
}

.emptyTitle {
  font-weight: var(--weight-bold);
  font-size: 14px;
  margin-bottom: 6px;
}

.emptySub {
  font-size: 12px;
  color: rgba(17,17,17,0.55);
  font-weight: 750;
}

/* Optional: smoother scrolling feel in agenda list */
#calendarPanel > div:last-child {
  scroll-behavior: smooth;
}

/* =======================================================
   Fix Calendar Agenda: make middle pane scroll, not page
   Append to bottom of styles.css
======================================================= */

/* Ensure the 3-pane layout uses full height and doesn't grow page */
html, body {
  height: 100%;
}

.layout {
  height: calc(100vh - 140px); /* tweak if your header+search row differs */
  min-height: 0;
}

/* Middle pane should be a scrolling viewport */
.middlePane {
  height: 100%;
  min-height: 0;
  overflow: hidden; /* prevent children from expanding page */
  display: flex;
  flex-direction: column;
}

/* Contact list wrapper scrolls */
#contactListWrap {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#contactList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Calendar wrapper scrolls */
#calendarWrap {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Calendar panel list area scrolls */
#calendarPanel {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#calendarPanel > div:last-child {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 18px; /* breathing room */
}

/* Right pane should scroll independently too */
.rightPane {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.detailPane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* =======================================================
   App Height Fit (No global scroll)
   Append to bottom of styles.css
======================================================= */

/* Kill accidental body scroll + spacing */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* IMPORTANT: removes page scroll */
}

/* If you have a main wrapper, make it full height */
body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Header + search row stay fixed height, main layout takes remainder */
.topbar,
.searchRow {
  flex: 0 0 auto;
}

/* The 3-pane layout fills the remaining viewport exactly */
.layout {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden; /* prevent layout from pushing body */
}

/* Each pane should manage its own scroll */
.leftPane,
.middlePane,
.rightPane {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Left pane scroll (folders) */
.folderList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Middle pane scroll targets */
#contactListWrap,
#calendarWrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#contactList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Calendar internal scroll */
#calendarPanel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#calendarPanel > div:last-child {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 18px;
}

/* Right pane scroll */
.detailPane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* =======================================================
   PREMIUM UI BOOST (Typography + Surfaces + Controls)
   Append to bottom of styles.css
======================================================= */

/* ---- Premium font stack ---- */
:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text",
    "Segoe UI", Inter, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  --text: #0f172a;
  --muted2: rgba(15, 23, 42, 0.55);

  --surface: rgba(255, 255, 255, 0.92);
  --surface2: rgba(255, 255, 255, 0.78);

  --border2: rgba(15, 23, 42, 0.08);
  --shadow1: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow2: 0 22px 60px rgba(15, 23, 42, 0.10);

  --radius-lg: 16px;
  --radius-xl: var(--radius);

  --focus: rgba(37, 99, 235, 0.35);
}

/* Use font stack everywhere */
body, button, input, select, textarea {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Base typography hierarchy ---- */
body {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

h1, h2, h3, .brandTitle {
  letter-spacing: -0.02em;
}

/* Headlines feel “expensive” */
.brandTitle {
  font-weight: var(--weight-bold);
  font-size: 20px;
  line-height: 1.05;
}

.brandSub {
  font-weight: 750;
  color: var(--muted2);
  font-size: 12px;
}

/* ---- Smoother surfaces ---- */
.topbar,
.searchRow,
.leftPane,
.middlePane,
.rightPane {
  background: transparent;
}

/* Pane cards / panels */
.leftPane,
.middlePane,
.rightPane,
.contactList,
#calendarPanel {
  border-radius: var(--radius-xl);
}

/* listPane and detailPane override - no top radius, only bottom */
.listPane,
aside.listPane,
#contactListWrap {
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: var(--radius) !important;
  border-bottom-right-radius: 0 !important;
}

.detailPane,
section.detailPane,
#detailPanel {
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: var(--radius) !important;
}

/* Softer outlines everywhere */
* {
  border-color: rgba(0,0,0,0.08);
}

/* ---- Buttons & inputs ---- */
button, .btn, .btnGhost, .btnPrimary {
  border-radius: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
}

/* Make ghost buttons feel premium */
.btnGhost {
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--border2);
  box-shadow: 0 10px 26px rgba(0,0,0,0.04);
}

.btnGhost:hover {
  background: rgba(255,255,255,0.92);
  transform: translateY(-1px);
  box-shadow: var(--shadow1);
}

/* Primary button polish */
.btnPrimary {
  box-shadow: var(--shadow1);
}

.btnPrimary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
}

/* Inputs look more “CRM” */
input, select, textarea {
  border-radius: 14px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,0.88);
  box-shadow: 0 10px 26px rgba(0,0,0,0.04);
  font-weight: 850;
  padding: 10px 12px;
  outline: none;
  transition: box-shadow 140ms ease, border-color 140ms ease;
}

input:focus, select:focus, textarea:focus {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 0 0 4px var(--focus), 0 10px 26px rgba(0,0,0,0.05);
}

/* ---- Make text a bit more crisp in UI labels ---- */
.searchLabel,
.sortLabel,
.foldersHeader {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}

/* ---- Premium list items (contacts/calendar cards) ---- */
.contactRow,
.calCard {
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 14px 40px rgba(0,0,0,0.06);
}

.contactRow:hover,
.calCard:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.08);
}

/* ---- Subtle scrollbars (premium touch) ---- */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.14);
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.75);
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* =======================================================
   Premium Segmented Toggle (Contacts / Calendar)
   Targets: #menuContactsBtn #menuCalendarBtn
   Append to bottom of styles.css
======================================================= */

#menuContactsBtn,
#menuCalendarBtn {
  /* reset + base */
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;

  /* size + layout */
  height: 42px;
  padding: 0 16px;
  border-radius: 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* type */
  font-family: inherit;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.01em;
  line-height: 1;

  /* default color */
  color: rgba(17, 17, 17, 0.72);

  /* interaction */
  transition: transform 140ms ease,
              box-shadow 140ms ease,
              background 140ms ease,
              color 140ms ease;
}

/* Improve emoji icon alignment / size */
#menuContactsBtn span,
#menuCalendarBtn span,
#menuPipelineBtn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}

/* Hover feel */
#menuContactsBtn:hover,
#menuCalendarBtn:hover,
#menuPipelineBtn:hover {
  background: rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

/* Press feel */
#menuContactsBtn:active,
#menuCalendarBtn:active,
#menuPipelineBtn:active {
  transform: translateY(0px);
}

/* ✅ Active state (your JS already toggles .active) */
#menuContactsBtn.active,
#menuCalendarBtn.active,
#menuPipelineBtn.active {
  background: rgba(37, 99, 235, 0.10); /* soft blue wash */
  color: rgb(15, 23, 42);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.06),
    inset 0 0 0 1px rgba(37, 99, 235, 0.28);
}

/* Optional: subtle glow on active hover */
#menuContactsBtn.active:hover,
#menuCalendarBtn.active:hover,
#menuPipelineBtn.active:hover {
  background: rgba(37, 99, 235, 0.12);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.08),
    inset 0 0 0 1px rgba(37, 99, 235, 0.32);
}

/* ✅ The container that holds both buttons (best effort, safe) */
.menuToggle,
#menuToggle,
.contactsCalendarToggle,
#contactsCalendarToggle {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 14px 40px rgba(0,0,0,0.06);
  backdrop-filter: blur(10px);
  justify-content: center;
  align-items: center;
}

/* ✅ If your buttons are inside a generic wrapper, this helps too */
#menuContactsBtn,
#menuCalendarBtn,
#menuPipelineBtn {
  flex: 1;
}
/* =======================================================
   TRUE Premium Segmented Control (Contacts / Calendar)
   Append to bottom of styles.css (overrides previous)
======================================================= */

/* Try to grab the wrapper that contains both buttons */
#menuContactsBtn,
#menuCalendarBtn,
#menuPipelineBtn {
  flex: 1 1 0;
}

/* Most likely wrapper = parent of the buttons
   This selector styles the parent only if it contains BOTH buttons */
#menuContactsBtn:where(button, a):not(.x),
#menuCalendarBtn:where(button, a):not(.x) {}

/* Wrapper (best effort): style the immediate parent */
#menuContactsBtn.parentSeg,
#menuCalendarBtn.parentSeg {}

#menuContactsBtn,
#menuCalendarBtn {
  /* Button base */
  appearance: none;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;

  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;

  color: rgba(17, 17, 17, 0.78) !important;

  transition: transform 140ms ease,
              box-shadow 140ms ease,
              background 140ms ease,
              color 140ms ease;
}

/* Make inactive look clickable, not disabled */
#menuContactsBtn:not(.active),
#menuCalendarBtn:not(.active) {
  opacity: 1 !important;
}

#menuContactsBtn:not(.active):hover,
#menuCalendarBtn:not(.active):hover {
  background: rgba(0,0,0,0.04) !important;
  transform: translateY(-1px);
}

/* Active tab = crisp + elevated */
#menuContactsBtn.active,
#menuCalendarBtn.active {
  background: rgba(255,255,255,0.95) !important;
  color: rgba(15, 23, 42, 0.95) !important;
  box-shadow:
    0 16px 38px rgba(0,0,0,0.10),
    inset 0 0 0 1px rgba(0,0,0,0.06) !important;
}

/* Press */
#menuContactsBtn:active,
#menuCalendarBtn:active {
  transform: translateY(0px);
}

/* --- Now: fix the container that holds the buttons --- */
/* This targets common wrappers you might have */
.menuToggle,
#menuToggle,
.contactsCalendarToggle,
#contactsCalendarToggle,
#menuContactsBtn:not(.x) ~ #menuCalendarBtn {
  /* noop (just to bump specificity) */
}

/* Best universal: style the parent of both buttons */
#menuContactsBtn,
#menuCalendarBtn {}

#menuContactsBtn,
#menuCalendarBtn {}

#menuContactsBtn,
#menuCalendarBtn {}

#menuContactsBtn,
#menuCalendarBtn {}

#menuContactsBtn,
#menuCalendarBtn {}

/* Parent container styling via :has (works in modern Chrome/Safari/Edge) */
div:has(> #menuContactsBtn):has(> #menuCalendarBtn) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  padding: 6px !important;
  border-radius: 20px !important;

  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.08) !important;
  backdrop-filter: blur(10px);

  min-width: 240px;
}

/* Emoji alignment */
#menuContactsBtn span,
#menuCalendarBtn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  transform: translateY(1px);
}
/* =======================================================
   Segmented Toggle: Compact Width (not full stretch)
   Append to bottom of styles.css
======================================================= */

/* Stop the buttons from stretching */
#menuContactsBtn,
#menuCalendarBtn {
  flex: 0 0 auto !important;       /* no grow */
  width: auto !important;          /* fit content */
  min-width: 0 !important;
  padding: 0 14px !important;      /* tighter */
}

/* Optional: slightly tighter height */
#menuContactsBtn,
#menuCalendarBtn {
  height: 40px !important;
  border-radius: 16px !important;
}

/* Keep the wrapper centered and snug */
div:has(> #menuContactsBtn):has(> #menuCalendarBtn) {
  justify-content: center !important;
  width: fit-content !important;   /* shrink wrap */
  max-width: 100% !important;
  padding: 6px !important;
  gap: 6px !important;
}

/* Prevent the wrapper from being huge inside a wide left column */
div:has(> #menuContactsBtn):has(> #menuCalendarBtn) {
  margin: 0 auto !important;       /* center within left pane */
}
/* =======================================================
   PREMIUM "Compose" New Button (Gmail-style)
   Append to bottom of styles.css
======================================================= */

/* =======================================================
   PREMIUM TOP BAR UPGRADE (SAFE / CSS ONLY)
   - #addContactBtn gets Gmail-style icon bubble
   - Search gets Gmail-like surface and focus
   - Fonts/spacing unified for premium look
   Append to bottom of styles.css
======================================================= */

/* ---------- 3) Premium typography + consistent spacing ---------- */
:root{
  --ui-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

body{
  font-family: var(--ui-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tighten + unify label styling in the filter row */
.filters .filter-group label{
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(15,23,42,0.55) !important;
  margin-bottom: 8px !important;
}

/* Make the filter row align more like Gmail */
.filters .filter-row{
  align-items: center !important;
  gap: 14px !important;
}


/* ---------- 2) Gmail-like Search Bar Surface ---------- */
#searchInput{
  height: 42px !important;
  border-radius: 999px !important;

  background: rgba(15, 23, 42, 0.04) !important; /* soft gray like Gmail */
  border: 1px solid rgba(0,0,0,0.06) !important;

  padding: 0 18px !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  color: rgba(15, 23, 42, 0.92) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65) !important;

  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

/* Placeholder should feel softer */
#searchInput::placeholder{
  color: rgba(15,23,42,0.42) !important;
  font-weight: 700 !important;
}

/* Focus feels premium */
#searchInput:focus{
  outline: none !important;
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(37,99,235,0.35) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,0.10),
    0 0 0 4px rgba(37,99,235,0.14) !important;
}

/* Search should flex to fill available space */
.filters .filter-row .filter-group.grow{
  flex: 1 1 auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Make Sort + Filter controls match the new visual weight */
#sortSelect,
#filterBtn{
  height: 42px !important;
  border-radius: 999px !important;
}

/* Keep the whole filter row looking aligned on smaller screens */
@media (max-width: 900px){
  .filters .filter-row{
    flex-wrap: wrap;
    align-items: center !important;
  }
  .filters .filter-row .filter-group.grow{
    flex: 1 1 100% !important;
    max-width: none !important;
  }
}
/* =======================================================
   TOP BAR POLISH PASS (safe overrides)
   Append to bottom of styles.css
======================================================= */

/* --- Make the whole filter row slightly tighter --- */
.filters .filter-row{
  gap: 16px !important;
}

/* --- NEW button: slightly roomier, more premium --- */
#addContactBtn{
  position: absolute;
  right: 10px;
  top: 72px;
  height: 42px !important;                 /* a touch more Compose-like */
  padding: 0 20px 0 14px !important;       /* more room on the right */
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: none !important;
  color: white !important;
}

#addContactBtn::before{
  width: 26px !important;
  height: 26px !important;
  font-size: 15px !important;
  box-shadow: 0 12px 22px rgba(0,0,0,0.10) !important;
  background: rgba(255,255,255,0.2) !important; /* subtle transparent white for icon bg */
  color: white !important;
  border: none !important;
}

/* --- Search: slightly less tall + more Gmail softness --- */
#searchInput{
  height: 42px !important; /* slightly shorter feels more Gmail */
  background: rgba(15, 23, 42, 0.045) !important;
  border-color: rgba(0,0,0,0.055) !important;
}

/* Focus should feel slightly lighter (less “glow”) */
#searchInput:focus{
  box-shadow:
    0 16px 40px rgba(0,0,0,0.10),
    0 0 0 4px rgba(37,99,235,0.12) !important;
}

/* --- Make Sort + Filter match the search surface style --- */
#sortSelect,
#filterBtn{
  height: 42px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.04) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65) !important;
}

/* Hover states consistent */
#sortSelect:hover,
#filterBtn:hover{
  background: rgba(15, 23, 42, 0.055) !important;
}

/* Search should flex to fill available space */
.filters .filter-row .filter-group.grow{
  flex: 1 1 auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
/* =======================================================
   HEADER COMPACT + ONE-LINE AUTH STATUS (SAFE / CSS ONLY)
   Append to bottom of styles.css
======================================================= */

/* Make the header less tall overall */
.app-header{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Tighten the title block spacing */
.app-header .title-block h1{
  margin-bottom: 4px !important;
}

/* Force auth status + email to be on ONE line */
#authStateText,
#authEmail{
  display: inline !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(15,23,42,0.60) !important;
}

/* Add a dot separator between "Signed in" and email */
#authEmail::before{
  content: " · ";
  margin: 0 6px;
  color: rgba(15,23,42,0.40);
}

/* Prevent wrapping so it stays one line */
.app-header .title-block{
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

#authStateText,
#authEmail{
  white-space: nowrap !important;
}

/* Ensure the status line doesn't wrap underneath on small widths */
.app-header .title-block{
  min-width: 220px;
}

/* (Optional) Slightly reduce header button height so the whole thing feels tighter */
.app-header .header-actions .btn{
  height: 42px !important;
  padding: 0 14px !important;
}
/* =======================================================
   FIX: "Signed in · email" MUST be one line
   Append to bottom of styles.css
======================================================= */

/* The status row: force #authStateText + #authEmail onto one flex line */
.app-header .title-block{
  display: grid !important;
  grid-template-rows: auto auto !important;
  row-gap: 4px !important;
}

/* Turn the auth line into a real single-line flex row */
#authStateText{
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

#authEmail{
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

/* Wrap BOTH into the same visual line by forcing them to sit side-by-side */
#authStateText,
#authEmail{
  vertical-align: middle !important;
}

/* This is the key: make authStateText and authEmail share the same line */
.app-header .title-block > #authStateText,
.app-header .title-block > #authEmail{
  display: inline-flex !important;
}

/* Create the dot separator only before the email */
#authEmail::before{
  content: " · " !important;
  margin: 0 8px !important;
  color: rgba(15,23,42,0.40) !important;
}

/* Now force them into a single row by overriding layout */
.app-header .title-block{
  align-items: flex-start !important;
}

/* Make the header shorter */
.app-header{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.app-header .title-block h1{
  margin-bottom: 0px !important;
}

/* Reduce button height to match compact header */
.app-header .header-actions .btn{
  height: 42px !important;
  padding: 0 14px !important;
}

/* ✅ IMPORTANT: force the two divs to behave like one line */
.app-header .title-block{
  position: relative;
}

.app-header .title-block #authStateText{
  margin-right: 0 !important;
}

.app-header .title-block #authEmail{
  margin-left: 0 !important;
}

/* This final rule ensures they are on ONE row even if older CSS is fighting it */
.app-header .title-block{
  display: flex !important;
  flex-direction: column !important;
}

.app-header .title-block .auth-line-fix{
  display: flex !important;
  gap: 0px !important;
  align-items: center !important;
}

/* If there's no wrapper, force the 2nd + 3rd children into one line */
.app-header .title-block > #authStateText,
.app-header .title-block > #authEmail{
  display: inline-flex !important;
}
/* =======================================================
   AUTH LINE: one line + compact header
   Append to bottom of styles.css
======================================================= */

.authLine{
  display:flex !important;
  align-items:center !important;
  gap: 8px !important;
  line-height: 1.2 !important;
  margin-top: 4px !important;
}

.authLine #authStateText,
.authLine #authEmail{
  display:inline !important;
  white-space:nowrap !important;
}

/* Dot separator */
.authLine #authEmail::before{
  content:"·";
  margin-right:8px;
  color: rgba(15,23,42,0.35);
}

/* Compact header padding */
.app-header{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.app-header .title-block h1{
  margin-bottom: 0px !important;
}
/* =========================================================
   Premium Folder Count Pills (safe UI polish)
   Paste at bottom of styles.css
========================================================= */

/* Folder row baseline polish */
.folderRow {
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.folderRow:hover {
  background: rgba(37, 99, 235, 0.06);
}

.folderRow.active {
  background: rgba(37, 99, 235, 0.10);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

/* Folder count (legacy) — keep as plain text.
   IMPORTANT: do NOT style the custom folder right-side container (.folderRowRight). */
.folderRow > div:last-child:not(.folderRowRight) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.2px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 4px;
  box-shadow: none;
}

.folderRow:hover > div:last-child:not(.folderRowRight),
.folderRow.active > div:last-child:not(.folderRowRight) {
  background: transparent;
  border: 0;
  transform: none;
  color: rgba(15, 23, 42, 0.82);
}

/* Make smart folder icons feel more consistent */
.folderRow > div:first-child > div {
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

/* (removed legacy .folderRow gap override; unified in styles-gmail.css) */
/* =========================================================
   Layout tweak: make contact list wider + details narrower
   Paste at bottom of styles.css
========================================================= */

/* Slightly wider middle pane, slightly narrower details (ONLY in normal mode) */
.app-shell:not(.drawer-mode) .mainSplit {
  grid-template-columns: var(--list-pane-width, 578px) 1fr !important;
}
/* =========================================================
   Premium Calendar (Month view) — Compact / Google-ish
   Paste at bottom of styles.css
========================================================= */

/* Make sure the calendar area doesn’t feel “zoomed in” */
.calendarPane {
  font-size: 13px;
}

/* Calendar header tightening */
.calendarPane .calHeader,
.calendarPane .calendarHeader,
.calendarPane .cal-head,
.calendarPane .cal-top {
  padding: 10px 14px !important;
  gap: 10px !important;
}

.calendarPane h2,
.calendarPane .calTitle,
.calendarPane .calendarTitle {
  font-size: 18px !important;
  font-weight: 900 !important;
  margin: 0 !important;
}

.calendarPane .calSub,
.calendarPane .calendarSub {
  font-size: 13px !important;
  margin-top: 2px !important;
  opacity: 0.75;
}

/* Controls row (Today, arrows, dropdown) */
.calendarPane button,
.calendarPane select {
  height: 34px !important;
  border-radius: 12px !important;
  font-weight: 700;
}

/* -------------------------------
   Grid alignment (weekday row + month grid)
-------------------------------- */

/* Weekday header row */
.calendarPane .dowRow,
.calendarPane .weekdayRow,
.calendarPane .calDow,
.calendarPane .weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 8px 12px 6px 12px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* Month day grid */
.calendarPane .monthGrid,
.calendarPane .calGrid,
.calendarPane .calendarGrid,
.calendarPane .month-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 10px 12px 14px 12px !important;
  align-items: stretch !important;
}

/* -------------------------------
   Day cell styling (less tall, less pillowy)
-------------------------------- */

.calendarPane .dayCell,
.calendarPane .calCell,
.calendarPane .monthCell,
.calendarPane .day {
  min-height: 88px !important;         /* ✅ tighter */
  padding: 10px !important;
  border-radius: 14px !important;       /* ✅ less pillowy */
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  background: rgba(255,255,255,0.78) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02) !important;
  overflow: hidden;
  position: relative;
}

/* Slight hover lift like premium SaaS */
.calendarPane .dayCell:hover,
.calendarPane .calCell:hover,
.calendarPane .monthCell:hover,
.calendarPane .day:hover {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(37, 99, 235, 0.18) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
  transform: translateY(-1px);
  transition: 0.15s ease;
}

/* Date number styling */
.calendarPane .dayNum,
.calendarPane .dateNum,
.calendarPane .calDate {
  font-size: 13px !important;
  font-weight: 900 !important;
  opacity: 0.75;
}

/* Day count / "+N more" */
.calendarPane .moreLink,
.calendarPane .more,
.calendarPane .moreCount {
  font-weight: 800 !important;
  font-size: 12px !important;
  opacity: 0.75;
}

/* -------------------------------
   Event / task pills (cleaner + smaller)
-------------------------------- */

.calendarPane .eventPill,
.calendarPane .calItem,
.calendarPane .event,
.calendarPane .task {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px !important;
  border-radius: 999px !important;

  font-size: 12px !important;
  font-weight: 800 !important;

  background: rgba(37, 99, 235, 0.08) !important; /* soft blue */
  border: 1px solid rgba(37, 99, 235, 0.16) !important;
  color: rgba(15, 23, 42, 0.92) !important;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stack items tighter */
.calendarPane .dayCell .eventPill,
.calendarPane .dayCell .calItem,
.calendarPane .dayCell .event,
.calendarPane .dayCell .task {
  margin-top: 6px !important;
}

/* Different tint for "event" vs "task" if your DOM uses classes */
.calendarPane .event {
  background: rgba(239, 68, 68, 0.07) !important; /* soft red */
  border-color: rgba(239, 68, 68, 0.16) !important;
}

.calendarPane .task {
  background: rgba(34, 197, 94, 0.08) !important; /* soft green */
  border-color: rgba(34, 197, 94, 0.18) !important;
}

/* Make overflow scroll inside calendar instead of whole page */
.calendarPane {
  overflow: auto !important;
}
/* =========================================================
   Agenda View — Make it clean, tight, Gmail-ish
   Paste at bottom of styles.css
========================================================= */

/* Give agenda items a clean "email row" look */
.calendarPane .agendaRow,
.calendarPane .agendaItem,
.calendarPane .agendaCard,
.calendarPane .agenda-event,
.calendarPane .agenda-task {
  border-radius: 16px !important;
  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  background: rgba(255,255,255,0.85) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02) !important;
}

/* Tighten spacing so rows don’t feel huge */
.calendarPane .agendaRow,
.calendarPane .agendaItem,
.calendarPane .agendaCard {
  padding: 10px 14px !important;
  margin: 10px 0 !important;
  display: grid !important;
  grid-template-columns: 42px 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Left icon container — stop it from being a giant capsule */
.calendarPane .agendaIcon,
.calendarPane .agendaLeft,
.calendarPane .agendaBadge,
.calendarPane .agendaType {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.14) !important;
}

/* Make the icon inside not float weird */
.calendarPane .agendaIcon img,
.calendarPane .agendaIcon svg,
.calendarPane .agendaIcon span {
  transform: translateY(0px) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Title line — make it premium + not too large */
.calendarPane .agendaTitle,
.calendarPane .agendaMainTitle,
.calendarPane .agendaName {
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Contact name / sub line — tighten and soften */
.calendarPane .agendaSub,
.calendarPane .agendaContact,
.calendarPane .agendaMeta {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  opacity: 0.70 !important;
  margin-top: 3px !important;
  line-height: 1.2 !important;
}

/* Right-side date/time — align nicely and not huge */
.calendarPane .agendaWhen,
.calendarPane .agendaDate,
.calendarPane .agendaTime {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  opacity: 0.78 !important;
  white-space: nowrap !important;
}

/* Remove extra inner padding if the agenda item has nested wrappers */
.calendarPane .agendaRow * {
  max-width: 100%;
}

/* Hover like Gmail rows */
.calendarPane .agendaRow:hover,
.calendarPane .agendaItem:hover,
.calendarPane .agendaCard:hover {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(37, 99, 235, 0.22) !important;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06) !important;
  transform: translateY(-1px);
  transition: 0.16s ease;
}

/* Date headers (1/1/2026) — make them feel like section headers */
.calendarPane .agendaDayHeader,
.calendarPane .agendaDateHeader,
.calendarPane .agendaGroupTitle {
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55 !important;
  margin: 18px 0 6px 0 !important;
}

/* Optional: Make the agenda list scroll inside the calendar pane nicely */
.calendarPane .agendaList,
.calendarPane .agendaWrap {
  padding-right: 6px !important;
}
/* =========================
   Header compact + auth line
========================= */

.app-header{
  padding-top: 14px;
  padding-bottom: 14px;
}

.title-block h1{
  margin-bottom: 4px;
}

.auth-line{
  display:flex;
  align-items:center;
  gap:8px;
  line-height: 1.1;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.auth-line #authEmail{
  font-size: 12px;
  opacity: .9;
  overflow:hidden;
  text-overflow: ellipsis;
}

.auth-dot{
  opacity: .5;
  font-size: 12px;
}
.calCard { padding: 30px 16px;}
/* =========================================================
   Owner chip (Team CRM)
   Append to bottom of styles.css
========================================================= */

.pill.ownerPill{
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(15, 23, 42, 0.04);
  color: var(--text);
}

.pill.ownerPill.me{
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.10);
  color: var(--blue2);
}

.pill.ownerPill.empty{
  border-color: rgba(220, 38, 38, 0.20);
  background: rgba(220, 38, 38, 0.06);
  color: var(--danger-600);
}
/* ✅ Pills should never stretch tall */
.pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  line-height: 24px;
  padding: 0 8px;
  white-space: nowrap;
}
/* =========================================================
   FIX: Prevent giant stretched chips (contacts + details)
========================================================= */
.pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  line-height: 24px;
  padding: 0 8px;
  white-space: nowrap;
}

/* =========================================================
   FIX: Contact row chip rail alignment
========================================================= */
.row > div:last-child{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}

/* =========================================================
   Polish: Stable widths so chips line up (premium)
========================================================= */
.pill.ownerPill{
  min-width: 0;
  text-align:center;
}

.row .pill:last-child{
  min-width: 0;
  text-align:center;
}

/* =========================================================
   Detail view: keep pills compact
========================================================= */
.detailPane .pill{
  align-self:flex-start;
}
/* =========================================================
   ✅ HARD FIX: CONTACT LIST ROW HEIGHT + CHIP STRETCH
   Paste at VERY bottom of styles.css
========================================================= */

/* 1) Contact row must NEVER stretch tall */
.row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  /* lock row sizing */
  min-height: 94px !important;
  height: auto !important;
  max-height: 112px !important;

  padding: 10px 10px !important;
  gap: 8px !important;

  overflow: hidden !important;
}

/* Selected row must not change height */
.row.selected {
  min-height: 94px !important;
  max-height: 112px !important;
  padding: 10px 10px !important;
}

/* 2) Prevent any row children from stretching vertically */
.row * {
  align-self: center !important;
}

/* 3) Make the avatar + checkbox fixed and stable */
.row-check {
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
}

.row .avatar {
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 40px !important;
}

/* Force filters section to have no top margin */
body > div.app-shell > div > section {
  margin-top: 0px !important;
}

/* Gmail-style tabs spanning both panes */
.gmail-tabs-container {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #ffffff;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 0;
  padding: 0;
  height: 50px;
  width: 100%;
  margin-top: -14px;
  margin-bottom: 0;
}

/* If tabs are unused (empty container), don't reserve a 50px "header" strip */
#gmailTabs:empty {
  display: none !important;
  height: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gmail-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 0 32px;
  height: 50px;
  font-size: 14px;
  font-weight: 500;
  color: #5f6368;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  white-space: nowrap;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 24px;
  flex: 1;
}

.gmail-tab:hover {
  background: rgba(32, 33, 36, 0.04);
  color: #202124;
}

.gmail-tab.active {
  color: #1a73e8;
  border-bottom-color: #1a73e8;
  font-weight: 600;
  background: #f8f9fa;
}

.gmail-tab:focus {
  outline: none;
}

/* Vertical separators between tabs */
.gmail-tab:not(:last-child) {
  border-right: 1px solid var(--border);
}

/* Legacy list mode toggle (hidden now that we have Gmail tabs) */
.listModeToggle {
  display: none;
}
.listModeBtn {
  display: none;
}

.row.deal-row .main .title,
.row.task-row .main .title {
  font-weight: var(--weight-semibold);
  font-size: 14px;
}
.row.deal-row .main .sub,
.row.task-row .main .sub {
  font-size: 12px;
  color: var(--text-secondary);
}

/* 4) Main text block should truncate, not expand row */
.rowMain {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Stop long names from stretching layout */
.rowName, .rowSub {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* =========================================================
   ✅ FIX: Right-side chips (owner + probability)
========================================================= */

/* 5) The chip rail must NEVER stretch */
.row .pill,
.row .ownerPill {
  flex: 0 0 auto !important;
  height: 26px !important;
  line-height: 26px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  white-space: nowrap !important;
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 6) Owner pill specific */
.pill.ownerPill {
  min-width: 72px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;

  padding: 0 14px !important;
}

/* "UNASSIGNED" should NOT become huge */
.pill.ownerPill.empty {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.16) !important;
  color: rgba(239, 68, 68, 0.85) !important;
}

/* "ME" pill tint */
.pill.ownerPill.me {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.20) !important;
  color: rgba(17, 94, 53, 0.95) !important;
}

/* 7) Probability pill consistent width */
.row .pill:last-child {
  min-width: 64px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

/* =========================================================
   ✅ FIX: Detail pane pill ("UNASSIGNED") should stay compact
========================================================= */

.detailPane .pill,
.detailPane .ownerPill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 28px !important;
  line-height: 28px !important;
  padding: 0 14px !important;

  border-radius: 999px !important;
  width: fit-content !important;
  max-width: 180px !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* If detail values are flex/grid, stop them stretching the pill */
.detailPane .v,
.detailPane .kvVal {
  align-items: flex-start !important;
}

/* =========================================================
   ✅ Safety: prevent flex containers from stretching children
========================================================= */

.list, 
#contactList,
#contactListWrap {
  align-items: stretch !important;
}

/* If any ancestor is causing stretch, neutralize it */
.row,
.row > * {
  max-height: 112px !important;
}
/* =========================================================
   ✅ FIX: DETAIL PAGE "UNASSIGNED" PILL TOO BIG
   Paste at VERY bottom of styles.css
========================================================= */

/* 1) Kill stretch behavior inside detail header area */
.detailPane * {
  align-self: flex-start;
}

/* 2) Any pill/badge inside detail should ALWAYS be chip-sized */
.detailPane .pill,
.detailPane .ownerPill,
.detailPane .statusPill,
.detailPane .badge,
.detailPane .tag,
.detailPane .labelPill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 26px !important;
  line-height: 26px !important;
  padding: 0 12px !important;

  border-radius: 999px !important;

  width: auto !important;
  max-width: 180px !important;
  min-width: 0 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  flex: 0 0 auto !important;
  align-self: flex-start !important;

  transform: none !important;
}

/* 3) Specifically crush "UNASSIGNED" bar if it’s inheriting weird block sizing */
.detailPane .pill.ownerPill.empty,
.detailPane .ownerPill.empty,
.detailPane .pill.empty {
  height: 26px !important;
  line-height: 26px !important;
  padding: 0 14px !important;

  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.18) !important;
  color: rgba(239, 68, 68, 0.85) !important;

  box-shadow: none !important;
}

/* 4) If the badge is inside a KV grid cell, stop the cell from stretching it */
.detailPane .kv,
.detailPane .kvRow,
.detailPane .kvVal,
.detailPane .v {
  align-items: flex-start !important;
}

/* 5) If the badge is being treated as a full-height block, nuke that */
.detailPane .pill,
.detailPane .ownerPill,
.detailPane .badge {
  min-height: 0 !important;
  max-height: 26px !important;
  height: 26px !important;
}

/* 6) Safety: if ANY element is rendering as a tall capsule, force shrink */
.detailPane .pill * {
  line-height: 1 !important;
}
/* =========================================================
   ✅ DETAIL PAGE CLEANUP (spacing + sizing)
   Paste at VERY bottom of styles.css
========================================================= */

/* ---------- Detail pane baseline ---------- */
.detailPane{
  padding: 18px !important;
  gap: 14px !important;
  overflow: auto !important;
}

/* ---------- Header layout: make it tighter + aligned ---------- */
.detailPane .detailHeader,
.detailPane .detailHeaderLeft{
  align-items: center !important;
}

.detailPane .detailHeader{
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(15,23,42,0.06) !important;
}

/* avatar slightly smaller + less chunky */
.detailPane .detailAvatar{
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  font-size: 16px !important;
}

/* name + meta tighter */
.detailPane .detailName{
  font-size: 20px !important;
  line-height: 1.1 !important;
}

.detailPane .detailMeta{
  margin-top: 3px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  opacity: 0.8 !important;
}

/* actions: make them look like proper CRM buttons */
.detailPane .detailActions{
  gap: 10px !important;
}

.detailPane .detailActions .btn{
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

/* ---------- Badge / pill alignment inside header ---------- */
.detailPane .pill,
.detailPane .ownerPill,
.detailPane .badge{
  height: 26px !important;
  line-height: 26px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  border-radius: 999px !important;
  align-self: center !important;
  max-width: 160px !important;
}

/* ---------- Reduce the giant empty hero spacing ---------- */
/* If you have a big empty block under header, this usually fixes it */
.detailPane .detailCard{
  padding: 14px !important;
  box-shadow: 0 12px 34px rgba(15,23,42,0.06) !important;
}

.detailPane .detailCard + .detailCard{
  margin-top: 12px !important;
}

/* ---------- Make the info grid feel tighter + more CRM ---------- */
.detailPane .detailGrid{
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

/* tighter kv rows */
.detailPane .kvRow{
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.92) !important;
}

/* labels smaller / cleaner */
.detailPane .kvKey{
  font-size: 11px !important;
  font-weight: 950 !important;
  opacity: 0.72 !important;
}

/* values a bit tighter */
.detailPane .kvVal{
  margin-top: 5px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

/* ---------- Tags row: keep it clean ---------- */
.detailPane .detailTags{
  gap: 8px !important;
  margin-top: 8px !important;
}

.detailPane .detailTags .tagChip{
  padding: 6px 10px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}

/* ---------- Reduce too-tall divs caused by flex stretching ---------- */
.detailPane *{
  min-height: 0 !important;
}

/* ---------- Mobile safety ---------- */
@media (max-width: 900px){
  .detailPane{
    padding: 14px !important;
  }
  .detailPane .detailGrid{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   ✅ EDIT CONTACT MODAL FIX (spacing + sizing)
   Paste at VERY bottom of styles.css
========================================================= */

/* --- Modal overall sizing --- */
.backdrop .modal{
  width: min(860px, 94vw) !important;
  max-height: 88vh !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

/* --- Header: tighter --- */
.modalHead{
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(15,23,42,0.08) !important;
}

.modalTitle{
  font-size: 18px !important;
  font-weight: 1000 !important;
  letter-spacing: -0.02em !important;
}

/* Close button not so huge */
.modalHead .iconBtn{
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
}

/* --- Body: fix excessive whitespace --- */
.modalBody{
  padding: 16px 18px 18px !important;
  overflow: auto !important;
}

/* --- Labels: too spaced and too “shouty” --- */
.label{
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: 0.10em !important;
  color: rgba(15,23,42,0.55) !important;
}

/* --- Inputs/selects: make them feel like a CRM --- */
.input,
.select,
.textarea{
  height: 40px !important;
  border-radius: 14px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,0.04) !important;
}

/* Notes textarea is too short by default */
.textarea{
  min-height: 110px !important;
  padding: 12px 14px !important;
  line-height: 1.35 !important;
}

/* Focus ring */
.input:focus,
.select:focus,
.textarea:focus{
  outline: none !important;
  border-color: rgba(37,99,235,0.35) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.14), 0 12px 30px rgba(15,23,42,0.06) !important;
}

/* --- Grid spacing: this is the biggest “weird” factor --- */
.grid2{
  gap: 14px !important;
}

/* Add consistent spacing between sections inside modal */
.modalBody > *{
  margin-bottom: 14px !important;
}
.modalBody > *:last-child{
  margin-bottom: 0 !important;
}

/* --- Tags section: make it look like a real section --- */
.tagPicker{
  padding: 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  background: rgba(15,23,42,0.02) !important;
}

/* Tag chips: tighten + unify */
.tagChip{
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
}

/* Active tag: crisp blue */
.tagChip.active{
  background: rgba(37,99,235,0.10) !important;
  border-color: rgba(37,99,235,0.25) !important;
  color: rgba(15,23,42,0.95) !important;
}

/* Prevent tag pills in deal dropdown from being directly clickable */
#dealTags > div {
  pointer-events: none !important;
}

/* --- Footer buttons: make modal look finished --- */
.modalFoot{
  padding: 14px 18px !important;
  border-top: 1px solid rgba(15,23,42,0.08) !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(8px);
}

.modalFoot .btn{
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

/* Primary button looks more “save” */
.modalFoot .btn.primary{
  background: rgba(37,99,235,0.95) !important;
  border-color: rgba(37,99,235,0.95) !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(37,99,235,0.18) !important;
}

/* --- Mobile safe: stack into 1 column --- */
@media (max-width: 820px){
  .grid2{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   ✅ Modal scroll fix (Edit Contact)
   - modal stays fixed height
   - body scrolls
   - footer stays visible
========================================================= */

.backdrop .modal{
  display: flex !important;
  flex-direction: column !important;
  max-height: 88vh !important;    /* keeps modal inside screen */
  overflow: hidden !important;     /* prevents whole modal from scrolling */
}

/* Header stays fixed */
.modalHead{
  flex: 0 0 auto !important;
}

/* ✅ Body becomes scroll container */
.modalBody{
  flex: 1 1 auto !important;
  min-height: 0 !important;        /* CRITICAL: allows scrolling */
  overflow-y: auto !important;
  padding-bottom: 80px !important; /* Extra breathing room to ensure save button is visible */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* ✅ Footer stays pinned at bottom */
.modalFoot{
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  background: rgba(255,255,255,0.98) !important;
  border-top: 1px solid rgba(15,23,42,0.08) !important;
  backdrop-filter: blur(10px);
  z-index: 10;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05); /* Subtle shadow to show it's elevated */
}

/* Mobile optimizations for modal scrolling */
@media (max-width: 768px) {
  .backdrop .modal {
    max-height: 85vh !important; /* Smaller on mobile to account for browser UI */
  }
  
  .modalBody {
    padding-bottom: 100px !important; /* Even more padding on mobile */
  }
}

/* =========================================================
   ✅ HARD LAYOUT FIX (3-pane + independent scroll)
   This overrides duplicate/conflicting rules above.
   Paste at VERY BOTTOM of styles.css
========================================================= */

html, body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden; /* No page scroll */
}

/* App shell should fill the screen */
.app-shell {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  /* ✅ Header goes edge-to-edge */
  padding: 0 14px 0 14px !important;
  box-sizing: border-box;
}

/* Main column should stretch and allow mainSplit to consume remaining height */
.mainColumn{
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* ✅ Prevent flex-gap from stealing height at the bottom (mainSplit needs to reach the bottom).
     We'll control vertical spacing with margins on header/filters instead. */
  gap: 0 !important;
}

/* Tighten spacing between header → filters → panes */
.app-header{
  margin-bottom: 6px !important;
  margin-top: 0 !important;
}
.filters{
  margin-bottom: 6px !important;
}

/* Toast container should never affect layout height */
#toastRoot.toast-root{
  position: fixed;
  inset: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Main split fills remaining height under header/filters */
.mainSplit {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--list-pane-width, 578px) 1fr;
  gap: 14px;
  overflow: hidden;
}

/* Each pane is a fixed-height flex column */
.folderPane,
.listPane,
.detailPane,
.calendarPane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Lists scroll inside their pane */
.folderPane .list,
#folderList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#contactListWrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#contactList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ✅ Detail pane must scroll independently */
.detailPane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 0 !important;
}
/* =========================================
   DETAIL DRAWER MODE (Pipeline/Calendar)
========================================= */

/* Hide detail pane in wide modes by default */
.app-shell.drawer-mode .detailPane {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(420px, 92vw);
  max-width: 520px;
  background: white;
  z-index: 9999;
  box-shadow: -18px 0 60px rgba(0,0,0,0.14);
  transform: translateX(105%);
  transition: transform 220ms ease;
  overflow: auto;
  border-left: 1px solid var(--border);
}

/* When open, slide in */
.app-shell.drawer-mode.detail-open .detailPane {
  transform: translateX(0%);
}

/* Overlay behind drawer */
.detailOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.22);
  backdrop-filter: blur(2px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.app-shell.drawer-mode.detail-open .detailOverlay {
  opacity: 1;
  pointer-events: auto;
}

/* Make middle panes use more width */
.app-shell.drawer-mode .listPane,
.app-shell.drawer-mode .calendarPane {
  flex: 1 !important;
}

/* (removed legacy drawer-mode folder/icon-rail rules; unified in styles-gmail.css) */

/* keep only menu toggle visible */
.app-shell.drawer-mode .menuToggle {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
/* =========================================
   DRAWER MODE (Calendar/Pipeline)
   - left becomes icon rail (NOT hidden)
   - center views expand
   - detail becomes drawer
========================================= */

.detailOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.22);
  backdrop-filter: blur(2px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.detailOverlay.hidden {
  display: none;
}

.app-shell.drawer-mode .detailOverlay {
  display: block;
}

.app-shell.drawer-mode.detail-open .detailOverlay {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer detail panel */
.app-shell.drawer-mode .detailPane {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(420px, 92vw);
  max-width: 520px;
  background: white;
  z-index: 9999;
  box-shadow: -18px 0 60px rgba(0,0,0,0.14);
  transform: translateX(105%);
  transition: transform 220ms ease;
  overflow: auto;
  border-left: 1px solid var(--border);
}

.app-shell.drawer-mode.detail-open .detailPane {
  transform: translateX(0%);
}

/* Center panes get the space */
.app-shell.drawer-mode .listPane,
.app-shell.drawer-mode .calendarPane,
.app-shell.drawer-mode .pipelinePane {
  flex: 1 !important;
  min-width: 0 !important;
}

/* (removed legacy drawer-mode layout/menu rules; unified in styles-gmail.css) */

/* (removed legacy drawer-mode layout/menu rules; unified in styles-gmail.css) */

/* (removed legacy drawer-mode folder/icon-rail rules; unified in styles-gmail.css) */
/* ========== Compact header + compact filter row ========== */

.compactHeader {
  padding: 8px 14px !important;
}

.app-header.compactHeader h1{
  font-size: 20px !important;
  line-height: 1.05 !important;
}

.app-header.compactHeader .header-actions .btn{
  padding: 8px 12px !important;
  border-radius: 14px !important;
}

.authLine {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 12px;
}

.dotSep {
  opacity: 0.5;
}

.compactFilters .filter-row {
  padding: 10px 12px !important;
  gap: 8px !important;
  align-items: center !important;
}

/* spacing between Filter and top view buttons */
.topViewSpacer {
  width: 18px;
  flex: 0 0 18px;
}

.topToggle {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ✅ Keep the TOP Contacts/Calendar/Pipeline toggle horizontal even in drawer-mode */
.app-shell.drawer-mode .menuToggle.topToggle{
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
}

/* hide labels if any remain */
.filters .filter-group label {
  display: none !important;
}

/* =========================================================
   Gmail polish (final overrides)
   - unify spacing + soften shadows
   - improve hover/active affordances
========================================================= */

body{
  font-size: 14px;
  line-height: 1.45;
}

.app-shell{
  padding: 14px;
  gap: 12px;
}

/* Surfaces: reduce “cardy” look */
.app-header,
.filters,
.folderPane,
.listPane,
.detailPane{
  border-color: rgba(148,163,184,.28);
  box-shadow: 0 1px 1px rgba(15,23,42,.04), 0 8px 18px rgba(15,23,42,.06);
}

/* Buttons: a bit more Gmail-like (lighter) */
.btn{
  border-color: rgba(148,163,184,.30);
}
.btn.ghost{
  background: transparent;
}
.btn.ghost:hover{
  background: rgba(15,23,42,.04);
}

/* Folder rows: cleaner hover/active */
.folderRow{
  transition: background 140ms ease, box-shadow 140ms ease;
}
.folderRow:hover{
  background: rgba(15,23,42,.03);
}
.folderRow.active{
  background: rgba(37,99,235,.08);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.18);
}

/* Contact rows: more "inbox list" feel */
.row{
  border-color: rgba(148,163,184,.28);
  box-shadow: none;
}
.row:hover{
  background: rgba(15,23,42,.02);
}
.row.selected{
  border-color: rgba(37,99,235,.42);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

/* =========================================================
   FULL-WIDTH VIEW MODE (Forms, Templates, Analytics)
   - Hide folder sidebar to give full width to the view
========================================================= */
.app-shell.full-width-view .folderPane {
  display: none !important;
}

.app-shell.full-width-view .mainColumn {
  flex: 1;
  width: 100%;
}

/* In full-width mode, make mainSplit a simple single-column container */
.app-shell.full-width-view .mainSplit {
  display: flex !important;
  grid-template-columns: none !important;
}

/* Full-width views should take all available space */
.app-shell.full-width-view .formsPane,
.app-shell.full-width-view .templatesPane,
.app-shell.full-width-view .analyticsPane,
.app-shell.full-width-view .dealDoctorPane {
  flex: 1;
  width: 100%;
  max-width: 100%;
}

/* Reminder badge pulse animation */
@keyframes slideInUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Calendar drag and drop styles */
.calDayCard[draggable="true"],
.calMiniItem[draggable="true"],
.calWeekItem[draggable="true"] {
  cursor: grab;
}

.calDayCard[draggable="true"]:active,
.calMiniItem[draggable="true"]:active,
.calWeekItem[draggable="true"]:active {
  cursor: grabbing;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* ============================================
   Field-Row Styles (for structured form layout)
   ============================================ */

.field-row {
  display: inline-block; /* allow side-by-side placement */
  vertical-align: top;
  margin: 0 8px 8px 0; /* Right and bottom margin for spacing */
  padding: 8px 12px 8px 28px; /* Consistent compact padding */
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  position: relative;
  user-select: none;
  min-height: auto; /* Ensure no forced min-height */
  line-height: 1; /* Consistent line height */
}

/* Remove spacing from paragraphs that contain field-row embeds */
.ql-editor p:has(.field-row),
.ql-editor p .field-row {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove spacing between paragraphs with field-rows */
.ql-editor p:has(.field-row) + p:has(.field-row),
.ql-editor p:has(.field-row) + p,
.ql-editor p + p:has(.field-row) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Ensure field-row embeds don't create extra spacing */
.ql-editor .field-row {
  margin: 0 !important;
  display: inline-block; /* Allow side-by-side placement */
  vertical-align: top;
  line-height: 1;
}

/* Target paragraphs containing field-row directly */
.ql-editor p > .field-row {
  margin: 0 !important;
}

/* Remove default paragraph margins in Quill editor */
.ql-editor p {
  margin: 0;
  padding: 0;
}

/* Restore normal spacing only for text-only paragraphs */
.ql-editor p:not(:empty):not(:has(.field-row)):not(:has(.smart-field-chip)):not(:has(.line-items-embed)) {
  margin: 0.5em 0;
  padding: 0;
}

/* Drag handle - absolutely positioned on left */
.field-row__drag {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  background: transparent;
  cursor: grab;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.field-row:hover .field-row__drag {
  opacity: 1;
}

.field-row__drag::before {
  content: "⋮⋮";
  color: #94a3b8;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  letter-spacing: 1px;
}

.field-row__drag:hover::before {
  color: #3b82f6;
}

.field-row__drag:active {
  cursor: grabbing;
}

/* Content wrapper contains label + field in one span */
.field-row__content {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-right: 100px; /* Space for arrows on right */
  min-height: auto; /* No forced height */
  line-height: 1; /* Consistent line height */
}

/* Left placement - label and field side by side */
.field-row--left .field-row__content {
  flex-direction: row;
  align-items: center;
}

.field-row--left .field-row__label {
  width: 130px;
  min-width: 130px;
  flex-shrink: 0;
  text-align: right;
  padding-right: 12px;
}

.field-row--left .field-row__field {
  flex: 1;
  min-width: 0;
}

/* Compact mode - smaller label */
.field-row--left.field-row--compact .field-row__label {
  width: 110px;
  min-width: 110px;
}

.field-row--left.field-row--compact .field-row__content {
  gap: 8px;
}

/* Above placement - label and field stacked */
.field-row--above .field-row__content {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding-right: 100px; /* Space for arrows */
}

.field-row--above .field-row__label {
  width: 100%;
  text-align: left;
}

.field-row--above .field-row__field {
  width: 100%;
}

.field-row--above.field-row--compact .field-row__content {
  gap: 4px;
}

.field-row--full {
  width: 100%;
  display: inline-block;
  vertical-align: top;
  grid-column: span 12;
}

.field-row--half {
  width: calc(50% - 4px);
  display: inline-block;
  vertical-align: top;
  grid-column: span 6;
}

.field-row--third {
  width: calc(33.333% - 5.5px);
  display: inline-block;
  vertical-align: top;
  grid-column: span 4;
}

.field-row--quarter {
  width: calc(25% - 6px);
  display: inline-block;
  vertical-align: top;
  grid-column: span 3;
}

.field-row--required {
  border-left: 3px solid #ef4444;
  padding-left: 12px;
}

.field-row__label {
  font-weight: 500;
  color: #374151;
  font-size: 14px;
  line-height: 1.2; /* Consistent line height */
  padding: 0; /* No extra padding */
  margin: 0; /* No extra margin */
}

.field-row__required-star {
  color: #ef4444;
  font-weight: 600;
}

.field-row__field {
  min-width: 0;
  display: flex;
  align-items: center;
  line-height: 1; /* Consistent line height */
  padding: 0; /* No extra padding */
  margin: 0; /* No extra margin */
}

.field-row__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  border: 1px solid #7dd3fc;
  border-radius: 6px;
  font-size: 13px;
  color: #0369a1;
  font-weight: 500;
  line-height: 1; /* Consistent line height */
  margin: 0; /* No extra margin */
}

/* When inside a left-aligned grid field-row, chip should occupy grid column 2 */
.field-row--left .field-row__chip {
  grid-column: 2 !important;
  justify-self: start !important;
}

.field-row__chip-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field-row__type-icon {
  font-size: 12px;
  opacity: 0.7;
}

/* Row grouping for half-width fields */
.field-row-group {
  display: flex;
  gap: 12px;
  margin: 0;
  flex-wrap: wrap;
}

/* Row group spacing */
.field-row-group--tight {
  margin: 0;
}
.field-row-group--loose {
  margin: 8px 0;
}

/* Row spacing toggle */
.field-row--tight {
  margin-bottom: 0;
}
.field-row--loose {
  margin-bottom: 8px;
}

/* Mobile responsiveness - only on actual phones */
@media (max-width: 480px) {
  .field-row--half,
  .field-row--third,
  .field-row--quarter {
    width: 100%;
    display: flex;
  }
  
  /* REMOVED forced column layout to respect Label Left setting */
  /*
  .field-row--left,
  .field-row-input--left {
    flex-direction: column !important;
    gap: 6px !important;
  }
  
  .field-row__label,
  .field-row-input__label {
    width: 100% !important;
    min-width: unset !important;
    max-width: none !important;
    text-align: left !important;
  }
  */
}

/* ============================================
   Line Items Smart Field Styles
   ============================================ */

/* Editor mode (preview placeholder) */
.line-items-embed {
  display: block;
  margin: 16px 0;
  padding: 16px;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  user-select: none;
}

.line-items-label {
  font-weight: 700;
  font-size: 14px;
  color: #111827;
  margin-bottom: 12px;
}

.line-items-required-star {
  color: #ef4444;
  font-weight: 600;
}

.line-items-preview {
  margin-top: 8px;
}

.line-items-preview-table {
  display: grid;
  gap: 1px;
  background: #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.line-items-preview-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  background: #f3f4f6;
}

.line-items-preview-cell {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  background: white;
}

.line-items-preview-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  background: white;
}

.line-items-preview-note {
  margin-top: 8px;
  font-size: 11px;
  color: #9ca3af;
  font-style: italic;
}

/* Fill mode (interactive table) */
.line-items-fill {
  margin: 20px 0;
  padding: 0;
}

.line-items-fill-label {
  font-weight: 700;
  font-size: 15px;
  color: #111827;
  margin-bottom: 12px;
}

.line-items-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.line-items-table thead {
  background: #f9fafb;
}

.line-items-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  border-bottom: 2px solid #e5e7eb;
}

.line-items-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
}

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

.line-items-table input,
.line-items-table select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  background: white;
}

.line-items-table input:focus,
.line-items-table select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.line-items-table input[readonly],
.line-items-table input[disabled] {
  background: #f9fafb;
  color: #6b7280;
  cursor: not-allowed;
}

.line-items-table .li-actions {
  width: 60px;
  text-align: center;
}

.line-items-table .li-remove-btn {
  padding: 4px 8px;
  font-size: 11px;
  border: 1px solid #dc2626;
  color: #dc2626;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.line-items-table .li-remove-btn:hover {
  background: #fee2e2;
}

.line-items-add-row {
  margin-top: 12px;
}

.line-items-add-row-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  border: 1px solid #2563eb;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.line-items-add-row-btn:hover {
  background: #eff6ff;
}

.line-items-totals {
  margin-top: 16px;
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.line-items-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
}

.line-items-totals-row:last-child {
  border-top: 2px solid #e5e7eb;
  margin-top: 8px;
  padding-top: 12px;
  font-weight: 700;
  font-size: 15px;
  color: #111827;
}

.line-items-totals-label {
  color: #6b7280;
}

.line-items-totals-value {
  font-weight: 600;
  color: #111827;
  font-family: monospace;
}

.line-items-error {
  margin-top: 8px;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #991b1b;
  font-size: 12px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .line-items-table {
    display: block;
    overflow-x: auto;
  }
  
  .line-items-preview-header,
  .line-items-preview-row {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }
}
/* Arrow navigation buttons */
.field-row__arrows {
  display: flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.field-row__arrow {
  width: 24px;
  height: 24px;
  display: none; /* Hidden by default, shown by JS when adjacent field exists */
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
  opacity: 0.6;
}

.field-row__arrow--visible {
  display: flex !important;
}

.field-row:hover .field-row__arrow--visible {
  opacity: 1;
}

.field-row__arrow:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #2563eb;
  opacity: 1 !important;
}

.field-row__arrow:active {
  background: #dbeafe;
  transform: scale(0.95);
}

.field-row__drag:active {
  cursor: grabbing;
}

/* Content wrapper contains label + field in one span */
.field-row__content {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-right: 100px; /* Space for arrows on right */
  min-height: auto; /* No forced height */
  line-height: 1; /* Consistent line height */
}

/* Left placement - label and field side by side */
.field-row--left .field-row__content {
  flex-direction: row;
  align-items: center;
}

.field-row--left .field-row__label {
  width: 130px;
  min-width: 130px;
  flex-shrink: 0;
  text-align: right;
  padding-right: 12px;
}

.field-row--left .field-row__field {
  flex: 1;
  min-width: 0;
}

/* Compact mode - smaller label */
.field-row--left.field-row--compact .field-row__label {
  width: 110px;
  min-width: 110px;
}

.field-row--left.field-row--compact .field-row__content {
  gap: 8px;
}

/* Above placement - label and field stacked */
.field-row--above .field-row__content {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding-right: 100px; /* Space for arrows */
}

.field-row--above .field-row__label {
  width: 100%;
  text-align: left;
}

.field-row--above .field-row__field {
  width: 100%;
}

.field-row--above.field-row--compact .field-row__content {
  gap: 4px;
}

.field-row--full {
  width: 100%;
  display: inline-block;
  vertical-align: top;
  grid-column: span 12;
}

.field-row--half {
  width: calc(50% - 4px);
  display: inline-block;
  vertical-align: top;
  grid-column: span 6;
}

.field-row--third {
  width: calc(33.333% - 5.5px);
  display: inline-block;
  vertical-align: top;
  grid-column: span 4;
}

.field-row--quarter {
  width: calc(25% - 6px);
  display: inline-block;
  vertical-align: top;
  grid-column: span 3;
}

.field-row--required {
  border-left: 3px solid #ef4444;
  padding-left: 12px;
}

.field-row__label {
  font-weight: 500;
  color: #374151;
  font-size: 14px;
  line-height: 1.2; /* Consistent line height */
  padding: 0; /* No extra padding */
  margin: 0; /* No extra margin */
}

.field-row__required-star {
  color: #ef4444;
  font-weight: 600;
}

.field-row__field {
  min-width: 0;
  display: flex;
  align-items: center;
  line-height: 1; /* Consistent line height */
  padding: 0; /* No extra padding */
  margin: 0; /* No extra margin */
}

.field-row__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  border: 1px solid #7dd3fc;
  border-radius: 6px;
  font-size: 13px;
  color: #0369a1;
  font-weight: 500;
  line-height: 1; /* Consistent line height */
  margin: 0; /* No extra margin */
}

/* When inside a left-aligned grid field-row, chip should occupy grid column 2 */
.field-row--left .field-row__chip {
  grid-column: 2 !important;
  justify-self: start !important;
}

.field-row__chip-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field-row__type-icon {
  font-size: 12px;
  opacity: 0.7;
}

/* Row grouping for half-width fields */
.field-row-group {
  display: flex;
  gap: 12px;
  margin: 0;
  flex-wrap: wrap;
}

/* Row group spacing */
.field-row-group--tight {
  margin: 0;
}
.field-row-group--loose {
  margin: 8px 0;
}

/* Row spacing toggle */
.field-row--tight {
  margin-bottom: 0;
}
.field-row--loose {
  margin-bottom: 8px;
}

/* Mobile responsiveness - only on actual phones */
@media (max-width: 480px) {
  .field-row--half,
  .field-row--third,
  .field-row--quarter {
    width: 100%;
    display: flex;
  }
  
  /* REMOVED forced column layout to respect Label Left setting */
  /*
  .field-row--left,
  .field-row-input--left {
    flex-direction: column !important;
    gap: 6px !important;
  }
  
  .field-row__label,
  .field-row-input__label {
    width: 100% !important;
    min-width: unset !important;
    max-width: none !important;
    text-align: left !important;
  }
  */
}

/* ============================================
   Line Items Smart Field Styles
   ============================================ */

/* Editor mode (preview placeholder) */
.line-items-embed {
  display: block;
  margin: 16px 0;
  padding: 16px;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  user-select: none;
}

.line-items-label {
  font-weight: 700;
  font-size: 14px;
  color: #111827;
  margin-bottom: 12px;
}

.line-items-required-star {
  color: #ef4444;
  font-weight: 600;
}

.line-items-preview {
  margin-top: 8px;
}

.line-items-preview-table {
  display: grid;
  gap: 1px;
  background: #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.line-items-preview-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  background: #f3f4f6;
}

.line-items-preview-cell {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  background: white;
}

.line-items-preview-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  background: white;
}

.line-items-preview-note {
  margin-top: 8px;
  font-size: 11px;
  color: #9ca3af;
  font-style: italic;
}

/* Fill mode (interactive table) */
.line-items-fill {
  margin: 20px 0;
  padding: 0;
}

.line-items-fill-label {
  font-weight: 700;
  font-size: 15px;
  color: #111827;
  margin-bottom: 12px;
}

.line-items-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.line-items-table thead {
  background: #f9fafb;
}

.line-items-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  border-bottom: 2px solid #e5e7eb;
}

.line-items-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
}

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

.line-items-table input,
.line-items-table select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  background: white;
}

.line-items-table input:focus,
.line-items-table select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.line-items-table input[readonly],
.line-items-table input[disabled] {
  background: #f9fafb;
  color: #6b7280;
  cursor: not-allowed;
}

.line-items-table .li-actions {
  width: 60px;
  text-align: center;
}

.line-items-table .li-remove-btn {
  padding: 4px 8px;
  font-size: 11px;
  border: 1px solid #dc2626;
  color: #dc2626;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.line-items-table .li-remove-btn:hover {
  background: #fee2e2;
}

.line-items-add-row {
  margin-top: 12px;
}

.line-items-add-row-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  border: 1px solid #2563eb;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.line-items-add-row-btn:hover {
  background: #eff6ff;
}

.line-items-totals {
  margin-top: 16px;
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.line-items-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
}

.line-items-totals-row:last-child {
  border-top: 2px solid #e5e7eb;
  margin-top: 8px;
  padding-top: 12px;
  font-weight: 700;
  font-size: 15px;
  color: #111827;
}

.line-items-totals-label {
  color: #6b7280;
}

.line-items-totals-value {
  font-weight: 600;
  color: #111827;
  font-family: monospace;
}

.line-items-error {
  margin-top: 8px;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #991b1b;
  font-size: 12px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .line-items-table {
    display: block;
    overflow-x: auto;
  }
  
  .line-items-preview-header,
  .line-items-preview-row {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }
}
/* Arrow navigation buttons */
.field-row__arrows {
  display: flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.field-row__arrow {
  width: 24px;
  height: 24px;
  display: none; /* Hidden by default, shown by JS when adjacent field exists */
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
  opacity: 0.6;
}

.field-row__arrow--visible {
  display: flex !important;
}

.field-row:hover .field-row__arrow--visible {
  opacity: 1;
}

.field-row__arrow:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #2563eb;
  opacity: 1 !important;
}

.field-row__arrow:active {
  background: #dbeafe;
  transform: scale(0.95);
}

/* ============================================
   Video Viewer Professional Styling
   ============================================ */

/* Seek Slider Styling */
#seekSlider {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

#seekSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.5);
  transition: all 0.2s;
}

#seekSlider::-webkit-slider-thumb:hover {
  background: #2563eb;
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6);
}

#seekSlider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.5);
  transition: all 0.2s;
}

#seekSlider::-moz-range-thumb:hover {
  background: #2563eb;
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6);
}

/* Volume Slider Styling */
#volumeSlider {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f3f4f6;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s;
}

#volumeSlider::-webkit-slider-thumb:hover {
  background: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

#volumeSlider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f3f4f6;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s;
}

#volumeSlider::-moz-range-thumb:hover {
  background: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* Video Viewer Modal Head Improvements */
.proof-viewer-modal .modalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Ensure buttons don't overflow on smaller screens */
@media (max-width: 1200px) {
  .proof-viewer-modal .modalHead {
    flex-wrap: wrap;
    padding: 12px 16px !important;
  }
  
  .proof-viewer-modal .modalTitle {
    flex: 1 1 100%;
    margin-bottom: 8px;
  }
}

/* Status Badge Improvements */
.status-badge {
  text-transform: capitalize;
  letter-spacing: 0.3px;
}

.status-approved {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
}

.status-changes {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.status-pending {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  color: white;
}