/* ============================================================
   Stat Modeller CRM - Complete Design System
   Dark-mode, Inter font, custom properties throughout
   Ported verbatim from the Apps Script CRM's styles.html
   ============================================================ */

:root {
  /* Brand - Stat Modeller Teal + Navy (from the actual logo) */
  --brand:          #0d9488;
  --brand-hover:    #0f766e;
  --brand-soft:     #f0fdfa;
  --brand-glow:     rgba(13, 148, 136, 0.18);
  --navy:           #1e3a5f;
  --navy-light:     #3d6d99;

  /* Backgrounds (Clean Light Theme) */
  --bg-base:        #F8FAFC;
  --bg-surface:     #FFFFFF;
  --bg-elevated:    #F1F5F9;
  --bg-card:        #FFFFFF;
  --bg-hover:       #F1F5F9;
  --bg-active:      #E2E8F0;

  /* Borders */
  --border:         #E2E8F0;
  --border-subtle:  #EEF2F6;
  --border-focus:   var(--brand);
  --border-strong:  #CBD5E1;

  /* Text (Crisp Readability) */
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #64748B;
  --text-link:      #0d9488;

  /* Status */
  --success:        #10B981;
  --success-soft:   #D1FAE5;
  --danger:         #EF4444;
  --danger-soft:    #FEE2E2;
  --warning:        #F59E0B;
  --warning-soft:   #FEF3C7;
  --info:           #0d9488;
  --info-soft:      #DBEAFE;

  /* Layout */
  --sidebar-width:  76px;
  --sidebar-width-expanded: 200px;
  --topbar-height:  56px;
  --radius-sm:      6px;
  --radius:         10px;
  --radius-lg:      16px;
  --radius-full:    9999px;

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

  /* Shadows */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.06);
  --shadow:         0 4px 14px rgba(0,0,0,0.08);
  --shadow-lg:      0 12px 32px rgba(0,0,0,0.12);
  --shadow-brand:   0 6px 20px rgba(13,148,136,0.2);
}

/* "Dark mode" only darkens the sidebar + topbar chrome — the working content
   area (tables, cards, forms) always stays light, matching the Bigin reference. */
:root {
  --chrome-dark: #0f2438;
}
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .topbar {
  background: var(--chrome-dark);
  border-color: rgba(255,255,255,0.08);
}
:root[data-theme="dark"] .sidebar .nav-item { color: rgba(255,255,255,0.72); }
:root[data-theme="dark"] .sidebar .nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
:root[data-theme="dark"] .sidebar .nav-item.active {
  background: var(--brand) !important; color: #fff !important;
}
:root[data-theme="dark"] .sidebar .nav-item.active .nav-icon { color: #fff; }
:root[data-theme="dark"] .sidebar .nav-item.active::after { border-left-color: var(--brand); }
:root[data-theme="dark"] .sidebar-divider { background: rgba(255,255,255,0.14); }
:root[data-theme="dark"] .sidebar-footer-btn { color: rgba(255,255,255,0.65); }
:root[data-theme="dark"] .sidebar-footer-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
:root[data-theme="dark"] .sidebar-logo { border-color: rgba(255,255,255,0.08); }
:root[data-theme="dark"] .breadcrumb { color: #fff; }
:root[data-theme="dark"] .topbar-user-profile { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
:root[data-theme="dark"] .topbar-user-profile .user-name { color: #fff; }
:root[data-theme="dark"] .topbar-user-profile .user-role { color: rgba(255,255,255,0.6); }
:root[data-theme="dark"] #admin-user-filter-select {
  background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.16);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; font-size: 14px; }
body {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
a { color: var(--text-link); text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
svg { display: block; flex-shrink: 0; }
.hidden { display: none !important; }

/* Dropdown Menus */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  background: var(--bg-surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  padding: 6px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
}
.dropdown-menu.hidden {
  display: none !important;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #f8fafc);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.dropdown-item:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.08));
  color: var(--brand, #3b82f6);
}
.dropdown-item.active { background: var(--brand); color: #fff; }
.dropdown-item.active:hover { background: var(--brand-hover); color: #fff; }
.dropdown-item svg {
  width: 14px; height: 14px; flex-shrink: 0;
  color: var(--text-muted, #94a3b8);
  transition: color 0.15s ease;
}
.dropdown-item:hover svg {
  color: var(--brand, #3b82f6);
}

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

.login-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-base);
  z-index: 1000;
  overflow: hidden;
}

.login-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.login-bg-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.12;
  animation: orb-float 8s ease-in-out infinite;
}
.orb1 { width: 500px; height: 500px; background: var(--brand); top: -150px; left: -150px; animation-delay: 0s; }
.orb2 { width: 400px; height: 400px; background: var(--navy-light); bottom: -100px; right: -100px; animation-delay: 3s; }
.orb3 { width: 300px; height: 300px; background: #0EA5E9; bottom: 20%; left: 40%; animation-delay: 6s; }

@keyframes orb-float {
  0%, 100% { transform: translateY(0px) scale(1); }
  50%       { transform: translateY(-30px) scale(1.05); }
}

.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  animation: card-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-logo-area { text-align: center; margin-bottom: 28px; }

.login-brand-icon-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

.login-brand-icon {
  width: 76px; height: 76px; border-radius: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: var(--brand);
  margin: 0 auto; letter-spacing: -0.5px;
  box-shadow: 0 10px 25px rgba(13, 148, 136, 0.2);
  position: relative; z-index: 2;
  overflow: hidden; padding: 6px;
  animation: logo-glow 3s infinite ease-in-out;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.login-brand-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: inherit;
  transition: transform 0.4s ease;
}

.login-brand-icon:hover img {
  transform: scale(1.12) rotate(2deg);
}

.logo-pulse-ring {
  position: absolute;
  top: -8px; left: -8px; right: -8px; bottom: -8px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.35), rgba(30, 58, 95, 0.35));
  filter: blur(10px);
  z-index: 1;
  animation: logo-pulse-ring 2.5s infinite ease-in-out;
}

@keyframes logo-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(13, 148, 136, 0.25), 0 0 40px rgba(30, 58, 95, 0.15); transform: scale(1); }
  50%       { box-shadow: 0 0 35px rgba(13, 148, 136, 0.45), 0 0 60px rgba(30, 58, 95, 0.3); transform: scale(1.04); }
}

@keyframes logo-pulse-ring {
  0%   { transform: scale(0.95); opacity: 0.8; }
  50%  { transform: scale(1.18); opacity: 0.25; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.login-brand-name {
  font-size: 24px; font-weight: 800; color: var(--text-primary);
  letter-spacing: -0.5px;
}

.login-tagline {
  font-size: 13px; color: var(--text-secondary); margin-top: 4px;
}

/* Fullscreen Full-Page Branding Loader Overlay */
.login-loading-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #f8fafc;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-loading-logo-glow {
  position: absolute;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(13, 148, 136, 0.22) 0%, rgba(13, 148, 136, 0) 70%);
  border-radius: 50%;
  animation: logo-glow-pulse 2s infinite ease-in-out;
}

.login-loading-logo {
  width: 120px;
  height: 120px;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(13, 148, 136, 0.25), 0 0 0 1px rgba(226, 232, 240, 0.8);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  animation: logo-big-pulse 1.8s infinite ease-in-out;
}

@keyframes logo-glow-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.5; }
  50%       { transform: scale(1.35); opacity: 0.95; }
}

@keyframes logo-big-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 15px 40px rgba(13, 148, 136, 0.2); }
  50%       { transform: scale(1.08); box-shadow: 0 25px 60px rgba(13, 148, 136, 0.4); }
}

.login-loading-bar-wrapper {
  width: 220px;
  height: 4px;
  background: rgba(226, 232, 240, 0.8);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 36px;
  position: relative;
  z-index: 2;
}

.login-loading-bar {
  height: 100%;
  width: 45%;
  background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa);
  border-radius: 99px;
  position: absolute;
  animation: loading-bar-move 1.5s infinite ease-in-out;
}

@keyframes loading-bar-move {
  0%   { left: -45%; width: 40%; }
  50%  { left: 35%; width: 60%; }
  100% { left: 105%; width: 40%; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Form elements */
.login-form { display: flex; flex-direction: column; gap: 20px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-label {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.6px;
}

.label-row { display: flex; justify-content: space-between; align-items: center; }

.forgot-link {
  font-size: 12px; color: var(--text-link);
  transition: color var(--transition);
}
.forgot-link:hover { color: var(--text-primary); }

.input-wrapper {
  position: relative; display: flex; align-items: center;
}

.input-icon {
  position: absolute; left: 12px; width: 16px; height: 16px;
  color: var(--text-muted); pointer-events: none;
}

.form-input {
  width: 100%; height: 44px; padding: 0 42px 0 40px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-primary);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  outline: none;
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  background: var(--bg-elevated);
}
.form-input.error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

.toggle-password {
  position: absolute; right: 10px;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); border-radius: var(--radius-sm);
  transition: color var(--transition);
}
.toggle-password:hover { color: var(--text-primary); }
.toggle-password svg { width: 16px; height: 16px; }

.remember-row { flex-direction: row; align-items: center; }
.checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.checkbox-input { display: none; }
.checkbox-custom {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1.5px solid var(--border-strong); border-radius: 4px;
  background: var(--bg-card); transition: all var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.checkbox-input:checked + .checkbox-custom {
  background: var(--brand); border-color: var(--brand);
}
.checkbox-input:checked + .checkbox-custom::after {
  content: ''; display: block;
  width: 10px; height: 6px;
  border-left: 2px solid white; border-bottom: 2px solid white;
  transform: rotate(-45deg) translate(1px, -1px);
}
.checkbox-text { font-size: 13px; color: var(--text-secondary); }

.login-error {
  padding: 12px 14px; background: var(--danger-soft);
  border: 1px solid rgba(239,68,68,0.3); border-radius: var(--radius);
  font-size: 13px; color: #FCA5A5; line-height: 1.5;
  animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Buttons */
.btn-primary {
  height: 48px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand), #1D4ED8);
  color: white; font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all var(--transition);
  box-shadow: var(--shadow-brand);
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity: 0; transition: opacity var(--transition);
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 40px var(--brand-glow); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.login-btn { width: 100%; }

.btn-secondary {
  height: 44px; padding: 0 20px; border-radius: var(--radius);
  border: 1px solid var(--border-strong); color: var(--text-secondary);
  font-weight: 500; font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--transition);
}
.btn-secondary:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.btn-secondary.active { background: var(--brand-soft) !important; color: var(--brand) !important; border-color: var(--brand) !important; }
.btn-secondary svg, .btn-primary svg { width: 15px; height: 15px; flex-shrink: 0; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner-icon { width: 18px; height: 18px; animation: spin 0.8s linear infinite; }

/* Forgot panel */
.forgot-panel { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1100; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); }
.forgot-icon { width: 48px; height: 48px; margin: 0 auto 16px; color: var(--info); }
.forgot-icon svg { width: 48px; height: 48px; }
.forgot-title { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 12px; }
.forgot-body { color: var(--text-secondary); text-align: center; margin-bottom: 16px; line-height: 1.7; }
.forgot-contact { text-align: center; padding: 14px; background: var(--bg-card); border-radius: var(--radius); margin-bottom: 20px; font-size: 13px; color: var(--text-secondary); }
.forgot-contact strong { color: var(--text-primary); }

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

.app-shell {
  display: flex; height: 100vh; width: 100vw; overflow: hidden;
}

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-width); height: 100%;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-logo {
  height: var(--topbar-height);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 8px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.sidebar-brand-icon {
  width: 30px; height: 30px; flex-shrink: 0;
}
.sidebar-brand-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

.sidebar-brand-name { display: none; }

.sidebar-nav {
  flex: 1; padding: 6px 6px; display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; overflow-x: hidden;
}

.nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 4px; border-radius: var(--radius);
  color: var(--text-secondary); font-weight: 500; font-size: 10.5px;
  transition: all var(--transition); position: relative; cursor: pointer;
  text-decoration: none; text-align: center;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-item.active {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}
.nav-item.active .nav-icon { color: var(--brand); }
.nav-item.active::after {
  content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 6px solid var(--brand-soft);
}

.nav-icon { width: 16px; height: 16px; flex-shrink: 0; }
.nav-label {
  font-size: 10.5px; line-height: 1.15; max-width: 62px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.nav-badge {
  position: absolute; top: 4px; right: 10px;
  background: var(--danger); color: white;
  font-size: 9px; font-weight: 700; min-width: 16px; height: 16px;
  border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

.sidebar-divider { height: 1px; background: var(--border); margin: 4px 4px; }

.sidebar-footer {
  padding: 5px 6px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px; align-items: stretch;
}

.sidebar-footer-btn {
  width: 100%; height: 26px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: var(--text-muted); transition: all var(--transition); cursor: pointer;
}
.sidebar-footer-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-footer-btn svg { width: 16px; height: 16px; }

.user-profile-btn {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  border-radius: var(--radius); width: 100%; transition: all var(--transition); cursor: pointer;
}
.user-profile-btn:hover { background: var(--bg-hover); }

.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--navy));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: white; flex-shrink: 0;
}
.user-info { flex: 1; text-align: left; overflow: hidden; }
.user-name { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { display: block; font-size: 11px; color: var(--text-muted); }
.nav-icon-sm { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }

/* ---- Collapsible Sidebar styles: default is compact icon+label; .collapsed goes icon-only ---- */
.sidebar { transition: width var(--transition-slow); }
.sidebar.collapsed { width: 56px; }
.sidebar.collapsed .sidebar-brand-name,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .user-info,
.sidebar.collapsed .nav-icon-sm {
  display: none !important;
}
.sidebar.collapsed .nav-item.active::after { display: none; }
.sidebar.collapsed .user-profile-btn {
  justify-content: center;
  padding: 9px 0;
}

/* ---- Topbar ---- */
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; min-height: 0; }

.topbar {
  height: var(--topbar-height); flex-shrink: 0;
  background: var(--bg-surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; gap: 16px;
}

.breadcrumb { font-size: 15px; font-weight: 600; color: var(--text-primary); }

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

.global-search-wrap {
  position: relative; flex: 1; max-width: 480px; display: flex; align-items: center;
  background: var(--navy, #1e3a5f); border-radius: var(--radius-full); height: 38px;
  padding: 0 12px 0 4px; border: 1px solid rgba(255,255,255,0.12); transition: border-color var(--transition);
}
.global-search-wrap:focus-within { border-color: rgba(255,255,255,0.35); }
.search-icon-sm { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; }

.global-search-scope-btn {
  display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px;
  border-radius: var(--radius-full); color: rgba(255,255,255,0.85); font-size: 12.5px; font-weight: 600;
  flex-shrink: 0; white-space: nowrap; cursor: pointer;
}
.global-search-scope-btn:hover { background: rgba(255,255,255,0.1); }
.global-search-scope-btn svg { flex-shrink: 0; }

.global-search-scope-dropdown {
  position: absolute; top: 44px; left: 0; z-index: 60; min-width: 180px; max-height: 260px; overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px;
}
.gs-scope-item { padding: 8px 10px; font-size: 13px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); }
.gs-scope-item:hover { background: var(--bg-hover); }
.gs-scope-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

.global-search-input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: #fff; font-size: 13px; padding: 0 8px;
}
.global-search-input::placeholder { color: rgba(255,255,255,0.55); }
.global-search-icon { width: 15px; height: 15px; color: rgba(255,255,255,0.65); flex-shrink: 0; }

.global-search-panel {
  /* Fixed, generous width instead of matching the search box's own width
     (previously left:0;right:0, which capped this at ~480px and squeezed
     the preview pane's header/buttons/tabs onto top of each other) — this
     is meant to read as a proper panel, not a cramped dropdown. */
  position: absolute; top: 46px; left: 0; width: 820px; max-width: calc(100vw - 48px);
  z-index: 60; min-height: 80px; max-height: 560px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); display: flex; overflow: hidden;
}
.gs-panel-list { width: 280px; flex-shrink: 0; overflow-y: auto; border-right: 1px solid var(--border); padding: 8px 0; }
.gs-panel-group-label { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.gs-panel-item { padding: 8px 14px; cursor: pointer; }
.gs-panel-item:hover, .gs-panel-item.active { background: var(--bg-hover); }
.gs-panel-item-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.gs-panel-item-subtitle { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.gs-panel-preview { flex: 1; min-width: 0; overflow-y: auto; padding: 24px; }
.gs-panel-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ============================================================
   Bulk-selection floating action bar
   ============================================================ */
.bulk-action-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg); margin-bottom: 12px; flex-wrap: wrap;
}
.bulk-count { font-size: 13px; font-weight: 700; color: var(--text-primary); padding: 0 6px 0 8px; white-space: nowrap; }
.bulk-action-btn {
  height: 32px; padding: 0 14px; border-radius: var(--radius-full); font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border); color: var(--text-secondary); background: transparent; white-space: nowrap;
  transition: all var(--transition);
}
.bulk-action-btn:hover { border-color: var(--brand); color: var(--brand); }
.bulk-action-btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.bulk-action-btn.danger { color: var(--danger); }
.bulk-action-btn.danger:hover { border-color: var(--danger); background: rgba(239,68,68,0.08); }
.bulk-close-btn {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); margin-left: auto; flex-shrink: 0;
}
.bulk-close-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ============================================================
   List-page scope pill ("All Contacts ▾ / My Contacts")
   ============================================================ */
.scope-pill {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: var(--radius-full); border: 1px solid var(--border-strong);
  font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; flex-shrink: 0;
  background: var(--bg-elevated);
}
.scope-pill:hover { border-color: var(--brand); }
.scope-pill svg { width: 11px; height: 11px; flex-shrink: 0; color: var(--text-muted); }
.scope-pill-dropdown {
  position: absolute; top: 42px; left: 0; z-index: 40; min-width: 160px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px;
}
.scope-pill-item { padding: 8px 10px; font-size: 13px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); }
.scope-pill-item:hover { background: var(--bg-hover); }
.scope-pill-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.global-search {
  height: 36px; width: 260px; padding: 0 12px 0 34px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-full); color: var(--text-primary);
  outline: none; transition: all var(--transition);
}
.global-search::placeholder { color: var(--text-muted); }
.global-search:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); width: 320px; }

.icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); transition: all var(--transition);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.icon-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }

.owner-filter-list { display: flex; flex-direction: column; gap: 1px; max-height: 340px; overflow-y: auto; }
.owner-filter-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--text-primary); }
.owner-filter-row:hover { background: var(--bg-hover); }
.owner-filter-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.owner-filter-all { font-weight: 600; }
.owner-filter-divider { height: 1px; background: var(--border); margin: 4px 2px 6px; }
.owner-filter-role { color: var(--text-muted); font-size: 11.5px; font-weight: 400; }

.topbar-user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
}

.topbar-user-profile:hover {
  background: var(--bg-active);
  border-color: var(--border-strong);
}

.topbar-signout-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: #fef2f2;
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.topbar-signout-btn:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

/* ---- Page container ---- */
.page-container {
  flex: 1; overflow-y: auto; padding: 24px;
  display: flex; flex-direction: column;
  min-height: 0;
}
.page-container > * { flex-shrink: 0; }
#deals-view-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page-container > .cal-wrapper { flex-shrink: 1; }

.page-loader {
  flex: 1; display: flex; align-items: center; justify-content: center;
}
.loader-spinner {
  width: 36px; height: 36px; border: 3px solid var(--border);
  border-top-color: var(--brand); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============================================================
   MODULE-LEVEL COMPONENTS
   ============================================================ */

/* Page header */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.page-title { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.4px; }
.page-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.page-actions { display: flex; align-items: center; gap: 10px; }

/* Tables */
.table-container {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.table-scroll-area { flex: 1; min-height: 0; overflow-y: auto; overflow-x: auto; position: relative; }
.table-container .deals-stats-bar {
  flex-shrink: 0; margin-bottom: 0; border-radius: 0;
  border: none; border-top: 1px solid var(--border); box-shadow: none;
}
.table-toolbar {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.table-search {
  flex: 1; max-width: 300px; height: 36px; padding: 0 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-primary); outline: none;
  transition: border-color var(--transition);
}
.table-search:focus { border-color: var(--brand); }
.table-search::placeholder { color: var(--text-muted); }

table { width: 100%; border-collapse: collapse; }
thead tr { border-bottom: 1px solid var(--border); }
th {
  padding: 7px 14px; text-align: left;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap; cursor: pointer; user-select: none;
}
th:hover { color: var(--text-primary); }
td { padding: 8px 14px; font-size: 13px; border-bottom: 1px solid var(--border); }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: var(--bg-hover); }

/* Drag-to-resize column widths (Contacts table). table-layout:fixed makes
   each th's explicit width authoritative; width:auto (not 100%) lets the
   table grow past its scroll area once columns are widened, instead of
   squeezing everything back down to fit. */
table.resizable-table { table-layout: fixed; width: auto; min-width: 100%; }
table.resizable-table th { overflow: hidden; text-overflow: ellipsis; position: relative; }
.col-resize-handle { position: absolute; top: 0; right: 0; bottom: 0; width: 6px; cursor: col-resize; }
.col-resize-handle:hover { background: var(--brand-soft); }
.col-resize-guide { position: absolute; top: 0; width: 2px; background: var(--brand); z-index: 50; pointer-events: none; }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; }
tbody tr:last-child td { border-bottom: none; }
th input[type="checkbox"], td input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--brand); }

.th-with-filter { display: inline-flex; align-items: center; gap: 5px; cursor: default; }
.col-filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px; color: var(--text-muted);
  text-transform: none; cursor: pointer; flex-shrink: 0;
}
.col-filter-btn svg { width: 11px; height: 11px; }
.col-filter-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.col-filter-btn.filter-active { color: var(--brand); background: var(--brand-soft); }

.table-empty {
  padding: 60px 20px; text-align: center; color: var(--text-muted); font-size: 14px;
}
.table-empty h3 { font-size: 16px; color: var(--text-secondary); margin-bottom: 8px; }

/* Badges / status pills */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge-blue    { background: var(--info-soft);    color: #2563EB; }
.badge-green   { background: var(--success-soft); color: #059669; }
.badge-amber   { background: var(--warning-soft); color: #B45309; }
.badge-red     { background: var(--danger-soft);  color: #DC2626; }
.badge-purple  { background: rgba(139,92,246,0.15); color: #7C3AED; }
.badge-gray    { background: rgba(100,116,139,0.15); color: #475569; }
.badge-teal    { background: rgba(20,184,166,0.15); color: #0D9488; }
.badge-pink    { background: rgba(236,72,153,0.15); color: #DB2777; }
.badge-indigo  { background: rgba(99,102,241,0.15); color: #4F46E5; }
.badge-cyan    { background: rgba(6,182,212,0.15);  color: #0891B2; }
.badge-orange  { background: rgba(249,115,22,0.15); color: #EA580C; }

/* Row actions */
.row-actions { display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity var(--transition); }
tbody tr:hover .row-actions { opacity: 1; }
.row-action-btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: var(--text-muted); transition: all var(--transition);
}
.row-action-btn:hover { background: var(--bg-active); color: var(--text-primary); }
.row-action-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }
.row-action-btn.wa-action-btn:hover { background: #dcfce7; color: #25D366; }
.row-action-btn svg { width: 14px; height: 14px; }

/* Pagination */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-secondary);
}
.pagination-btns { display: flex; gap: 6px; }
.page-btn {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 12px; transition: all var(--transition);
}
.page-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.page-btn.active { background: var(--brand); border-color: var(--brand); color: white; }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px); z-index: 500;
  display: flex; align-items: center; justify-content: center;
  animation: overlay-in 0.15s ease;
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%; max-width: 600px; max-height: 90vh;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  animation: modal-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.modal-close {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: all var(--transition);
}
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-close svg { width: 16px; height: 16px; }

.modal-body { flex: 1; overflow-y: auto; padding: 24px; }
.modal-footer {
  padding: 16px 24px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
}
.modal.modal-wide { max-width: 860px; }

/* Rich email composer (Send Mail modal) */
.compose-from-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 14px; }
.compose-task-checkbox {
  display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px;
  background: var(--brand-soft); border: 1px solid rgba(13, 148, 136, 0.25); border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; color: var(--brand); cursor: pointer;
}
.compose-task-checkbox input { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.compose-task-checkbox svg { width: 16px; height: 16px; flex-shrink: 0; }

.phone-field-wrap { display: flex; gap: 6px; }
.phone-country-select {
  width: 92px; flex-shrink: 0; padding: 0 6px; font-size: 12.5px; height: 44px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary);
}
.phone-number-input { flex: 1; min-width: 0; padding: 0 12px; height: 44px; }
.compose-field-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.compose-field-row label { width: 56px; flex-shrink: 0; font-size: 12.5px; color: var(--text-muted); font-weight: 600; padding-top: 8px; }
.compose-field-content { flex: 1; min-width: 0; }
.compose-cc-bcc-links { display: flex; gap: 12px; padding-top: 8px; flex-shrink: 0; }
.compose-cc-bcc-links button { font-size: 12px; color: var(--brand); font-weight: 600; }
.compose-cc-bcc-links button:hover { text-decoration: underline; }
.compose-merge-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 0 0; }
.compose-merge-label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; margin-right: 2px; }
.compose-merge-tag {
  padding: 3px 10px; border-radius: var(--radius-full); border: 1px dashed var(--brand);
  color: var(--brand); font-size: 11.5px; font-weight: 600; background: var(--brand-soft); cursor: pointer;
}
.compose-merge-tag:hover { background: var(--brand); color: white; border-style: solid; }
/* switched off until the recipient is a known CRM contact */
.compose-merge-tag:disabled { cursor: not-allowed; color: var(--text-muted); background: var(--bg-elevated); border: 1px dashed var(--border-strong); opacity: .75; }
.compose-merge-tag:disabled:hover { background: var(--bg-elevated); color: var(--text-muted); border-style: dashed; }
.compose-merge-tag.is-on { border-style: solid; box-shadow: 0 0 0 2px var(--brand-glow); }
.compose-merge-note { font-size: 11.5px; color: var(--text-muted); margin-left: 6px; }

.chip-input-wrap {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 8px; min-height: 36px; background: var(--bg-elevated);
}
.chip-input-wrap:focus-within { border-color: var(--brand); }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 600;
  padding: 3px 6px 3px 10px; border-radius: var(--radius-full); white-space: nowrap;
}
.chip-remove { border: none; background: none; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; padding: 0 2px; }
.chip-text-input { border: none; outline: none; flex: 1; min-width: 140px; font-size: 13px; background: transparent; color: var(--text-primary); }

.chip-suggest-box {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); max-height: 190px; overflow-y: auto; padding: 4px;
}
.chip-suggest-item { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.chip-suggest-item:hover { background: var(--bg-hover); }
.chip-suggest-item strong { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.chip-suggest-item span { font-size: 11px; color: var(--text-muted); }

.compose-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--bg-card, #ffffff); flex-shrink: 0; }
/* Two-row toolbar: only the second row's own bottom border separates the
   whole toolbar block from the editable body below it. */
#compose-toolbar { border-bottom: none; margin-bottom: 0; padding-bottom: 4px; }
.compose-toolbar-2 { padding-top: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.ctb-btn {
  min-width: 28px; height: 28px; padding: 0 7px; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ctb-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.ctb-btn.active { background: var(--brand-soft); color: var(--brand); }
.ctb-select {
  height: 28px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12px; padding: 0 4px; background: var(--bg-elevated); color: var(--text-primary);
}
.ctb-color { width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: none; }
.ctb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.ctb-font-select {
  height: 28px; padding: 0 6px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 12px; background: var(--bg-elevated); cursor: pointer;
  max-width: 120px; gap: 4px;
}
.ctb-font-select:hover { border-color: var(--border-strong); color: var(--text-primary); }
.ctb-font-select span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctb-font-popover { padding: 8px; width: 200px; }
.ctb-font-popover #ctb-font-search { margin-bottom: 6px; }
.ctb-font-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; }
.ctb-font-item {
  text-align: left; padding: 7px 8px; border-radius: var(--radius-sm); font-size: 13.5px;
  color: var(--text-primary); background: none; cursor: pointer;
}
.ctb-font-item:hover { background: var(--bg-hover); }
.ctb-btn svg { width: 16px; height: 16px; }
.ctb-color-btn { position: relative; flex-direction: column; gap: 0; padding: 3px 5px 6px; min-width: 30px; }
.ctb-color-icon-row { display: flex; align-items: center; gap: 1px; }
.ctb-color-btn svg { width: 14px; height: 14px; }
.ctb-chevron { width: 7px; height: 7px; color: var(--text-muted); flex-shrink: 0; }
.ctb-color-swatch { width: 18px; height: 3px; border-radius: 1px; margin-top: 3px; }
.ctb-hidden-native-color { position: absolute; width: 0; height: 0; padding: 0; margin: 0; border: none; opacity: 0; pointer-events: none; }
.ctb-textcolor-icon { font-weight: 700; font-size: 13px; line-height: 1; color: var(--text-secondary); }
.ctb-fontsize-btn { font-weight: 600; font-size: 11px; }
.ctb-fontsize-big { font-size: 16px; }
.ctb-quote-btn { font-size: 19px; font-weight: 700; line-height: 1; padding-bottom: 4px; }
.ctb-color-popover { padding: 10px; }
.ctb-color-grid { display: grid; grid-template-columns: repeat(9, 20px); gap: 4px; margin-bottom: 8px; }
.ctb-color-swatch-btn { width: 20px; height: 20px; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: pointer; }
.ctb-color-swatch-btn:hover { transform: scale(1.12); border-color: var(--text-secondary); }
.ctb-color-more-btn {
  width: 100%; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-secondary); background: none; cursor: pointer;
}
.ctb-color-more-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Insert-table popover + its right-click cell menu — separate floating
   elements appended to <body>, not the shared showModal (the compose
   form is already using that), so they can't clobber it. */
.ctb-popover {
  position: fixed; z-index: 10001; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 10px; min-width: 160px;
}
.ctb-popover-title { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.ctb-popover-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ctb-popover-row label { font-size: 12px; color: var(--text-secondary); }
.ctb-popover-row input { width: 70px; height: 30px; padding: 0 8px; font-size: 13px; }
.ctb-popover #ctb-table-insert-btn { width: 100%; height: 32px; font-size: 13px; }
.ctb-table-menu { padding: 4px; min-width: 180px; }
.ctb-table-menu button {
  display: block; width: 100%; text-align: left; padding: 7px 10px; font-size: 13px;
  border-radius: var(--radius-sm); color: var(--text-primary); background: none;
}
.ctb-table-menu button:hover { background: var(--bg-hover); }
.ctb-table-menu button.danger { color: var(--danger); }
.ctb-table-menu button.danger:hover { background: var(--danger-soft); }
.ctb-table-menu-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Format Painter "armed" state: custom brush cursor over the editable body
   so the mode is visible without a toast, matching Outlook's own affordance. */
.compose-body-editable.paint-armed {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M3 19l2.2-.7L14 9.6l-1-1L4.3 17.3 3 19z' fill='%23333333' stroke='%23ffffff' stroke-width='0.8'/><path d='M13 8.6l1.7-1.7a1.2 1.2 0 011.7 0l.7.7a1.2 1.2 0 010 1.7L15.4 11 13 8.6z' fill='%232f6fed' stroke='%23ffffff' stroke-width='0.8'/></svg>") 2 20, crosshair;
}

.compose-body-editable {
  min-height: 220px; max-height: 340px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-primary);
}
.compose-body-editable:focus { outline: none; border-color: var(--brand); }
.compose-body-editable img { max-width: 100%; }
.compose-body-editable p { margin: 0 0 12px; }
.compose-body-editable ul, .compose-body-editable ol { padding-left: 26px; margin: 0 0 12px; }
.compose-body-editable li { margin: 0 0 4px; }
.compose-body-editable h1, .compose-body-editable h2, .compose-body-editable h3, .compose-body-editable h4 { margin: 0 0 10px; }
.compose-body-editable a { color: #0b57d0; text-decoration: underline; }
.compose-body-editable pre {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-family: 'Courier New', monospace; font-size: 12.5px; overflow-x: auto; white-space: pre-wrap;
}
.compose-body-editable blockquote { border-left: 3px solid var(--border); margin: 6px 0; padding-left: 10px; color: var(--text-muted); }

.compose-attachments-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }       /* Outlook: the files sit under the Subject, above the message */
.compose-attachments-list:empty { display: none; }
.attachment-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 5px 8px; font-size: 12px; max-width: 220px;
}
.attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip button { border: none; background: none; cursor: pointer; color: var(--text-muted); flex-shrink: 0; }

/* Outlook-style "New event" panel (Schedule Meeting modal) */
.oem-wrap { display: flex; gap: 20px; align-items: flex-start; }
.oem-left { flex: 1.5; min-width: 0; }
.oem-right { flex: 1; min-width: 220px; max-width: 260px; border-left: 1px solid var(--border); padding-left: 18px; }
.oem-field-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.oem-field-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.oem-field-icon svg { width: 16px; height: 16px; display: block; }
.oem-title-input {
  border: none; outline: none; font-size: 18px; font-weight: 700; flex: 1;
  background: transparent; color: var(--text-primary);
}
.oem-plain-input { border: none; outline: none; font-size: 13px; flex: 1; background: transparent; color: var(--text-primary); font-family: inherit; }
.oem-title-input::placeholder, .oem-plain-input::placeholder { color: var(--text-muted); }
.oem-toggle { position: relative; width: 34px; height: 18px; flex-shrink: 0; display: inline-block; }
.oem-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.oem-toggle-slider {
  position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px;
  transition: background var(--transition); cursor: pointer;
}
.oem-toggle-slider::before {
  content: ''; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px;
  background: white; border-radius: 50%; transition: transform var(--transition);
}
.oem-toggle input:checked + .oem-toggle-slider { background: var(--brand); }
.oem-toggle input:checked + .oem-toggle-slider::before { transform: translateX(16px); }
.oem-mini-day-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px;
}
.oem-mini-day-header button { width: 22px; height: 22px; border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; }
.oem-mini-day-header button:hover { background: var(--bg-hover); color: var(--text-primary); }
.oem-timeline { position: relative; height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.oem-timeline-hours { position: relative; }
.oem-timeline-hour { height: 48px; border-bottom: 1px solid var(--border); font-size: 10px; color: var(--text-muted); padding: 3px 6px; box-sizing: border-box; }
.oem-timeline-block {
  position: absolute; left: 48px; right: 6px; background: var(--brand); color: white;
  border-radius: 4px; font-size: 11px; font-weight: 700; padding: 4px 6px;
  align-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: move; touch-action: none; user-select: none;
}
#sm-timeline-block-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oem-dt-col { display: flex; flex-direction: column; gap: 4px; }
.oem-dt-label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.oem-dt-input {
  border: none; border-bottom: 1px solid var(--border); outline: none; background: transparent;
  font-size: 13px; color: var(--text-primary); padding: 3px 0; font-family: inherit;
}
.oem-dt-input:focus { border-bottom-color: var(--brand); }
.oem-dt-select { cursor: pointer; }
.mmyy-select-wrap { position: relative; flex: 1; }
.mmyy-select-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-elevated); color: var(--text-primary); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color var(--transition);
}
.mmyy-select-btn:hover { border-color: var(--border-strong); }
.mmyy-select-btn svg { flex-shrink: 0; color: var(--text-muted); }
.mmyy-option-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; min-width: 0;
  max-height: 220px; overflow-y: auto;
}
.oem-resize-handle {
  position: absolute; left: 0; right: 0; height: 14px; cursor: ns-resize; touch-action: none;
}
.oem-resize-top { top: -7px; }
.oem-resize-bottom { bottom: -7px; }
/* Visible circular grab handles, matching Outlook's own resize affordance */
.oem-resize-handle::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: white; border: 2px solid var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Modal forms */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-col { display: flex; flex-direction: column; gap: 6px; }
.form-col.full { grid-column: 1 / -1; }
.cf-multiselect {
  display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated);
}
.cf-multiselect-item { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.cf-multiselect-item input { width: 15px; height: 15px; cursor: pointer; }
.pps-stage-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm);
}
.pps-stage-row:hover { background: var(--bg-hover); }
.pps-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pps-stage-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pps-stage-row .row-action-btn { width: 24px; height: 24px; }
.pps-stage-row .row-action-btn:disabled { opacity: 0.3; cursor: default; }
.pps-stage-row .row-action-btn:disabled:hover { background: none; }
.section-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.6px;
  padding: 16px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}

select, select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%2712%27%20viewBox%3D%270%200%2012%2012%27%3E%3Cpath%20d%3D%27M2%204l4%204%204-4%27%20stroke%3D%27%23475569%27%20stroke-width%3D%271.5%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}

select option {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

textarea.form-input { height: auto; padding: 10px 14px; resize: vertical; min-height: 80px; line-height: 1.5; }

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  min-width: 280px; max-width: 360px;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 12px;
  box-shadow: var(--shadow-lg); pointer-events: all;
  animation: toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.toast.removing { animation: toast-out 0.2s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); height: 0; padding: 0; margin: 0; overflow: hidden; } }
.toast-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.toast-icon svg { width: 18px; height: 18px; }
.toast.success { border-left: 3px solid var(--success); }
.toast.success .toast-icon { color: var(--success); }
.toast.error   { border-left: 3px solid var(--danger); }
.toast.error   .toast-icon { color: var(--danger); }
.toast.info    { border-left: 3px solid var(--info); }
.toast.info    .toast-icon { color: var(--info); }
.toast-msg { font-size: 13px; color: var(--text-primary); line-height: 1.5; flex: 1; }

/* ============================================================
   TWO-COLUMN RECORD DETAIL / SETTINGS PANELS
   ============================================================ */
.detail-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.detail-card-header {
  padding: 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.text-muted { color: var(--text-muted); font-size: 13px; }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.font-bold { font-weight: 700; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-card) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ============================================================
   ACTIVITIES CALENDAR
   ============================================================ */
.cal-wrapper { display: flex; flex: 1; min-height: 0; gap: 16px; }
.cal-sidebar {
  width: 200px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px;
}
.cal-sidebar-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.cal-type-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.cal-type-item.master { font-weight: 700; color: var(--text-primary); padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
#cal-type-dropdown-menu { padding: 8px; gap: 6px; }
#cal-type-dropdown-menu .cal-type-item { padding: 4px 6px; border-radius: var(--radius-sm); white-space: nowrap; }
#cal-type-dropdown-menu .cal-type-item:hover { background: var(--bg-hover); }
.cal-type-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Mini calendar (sidebar date picker) */
.cal-mini { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.cal-mini-header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--text-primary); }
.cal-mini-nav { display: flex; gap: 2px; }
.cal-mini-nav button {
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13px; cursor: pointer;
}
.cal-mini-nav button:hover { background: var(--bg-hover); color: var(--text-primary); }
.cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-mini-dow { font-size: 9px; font-weight: 700; color: var(--text-muted); text-align: center; padding-bottom: 2px; }
.cal-mini-day {
  font-size: 11px; text-align: center; padding: 4px 0; border-radius: 50%;
  color: var(--text-secondary); cursor: pointer;
}
.cal-mini-day:hover { background: var(--bg-hover); }
.cal-mini-day.other-month { color: var(--text-muted); opacity: 0.45; }
.cal-mini-day.today { font-weight: 700; color: var(--brand); background: var(--brand-soft); }
.cal-mini-day.has-events { position: relative; }
.cal-mini-day.has-events::after {
  content: ''; display: block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--brand); margin: 1px auto 0;
}

/* Outlook-style event chips: tinted background + colored left border + time */
.cal-event-chip {
  display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600;
  padding: 2px 5px; border-radius: 3px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--chip-bg, rgba(13,148,136,0.1)); border-left: 3px solid var(--chip-color, var(--brand));
  color: var(--text-primary);
}
.cal-chip-time { color: var(--text-muted); flex-shrink: 0; }
.cal-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cal-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-bottom: 12px; flex-shrink: 0;
}
.cal-toolbar-left { display: flex; align-items: center; gap: 8px; }
.cal-title { font-size: 16px; font-weight: 700; color: var(--text-primary); min-width: 160px; }
/* Whole month must fit without scrolling — the grid gets exactly the
   remaining height and divides it evenly across however many week-rows the
   month needs (5 or 6), set inline as grid-template-rows since that count
   varies per month; cal-day-cell no longer has its own min-height so every
   row stays the same size regardless of how many events a day has. */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  flex: 1; min-height: 0;
}
.cal-day-header {
  background: var(--bg-elevated); padding: 6px 8px; text-align: center; font-size: 11px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
}
.cal-day-cell {
  background: var(--bg-surface); min-height: 0; overflow: hidden; padding: 5px; display: flex; flex-direction: column; gap: 2px;
  cursor: pointer; transition: background var(--transition);
}
.cal-day-cell:hover { background: var(--bg-hover); }
.cal-day-cell.other-month { background: var(--bg-elevated); color: var(--text-muted); }
.cal-day-cell.today .cal-day-num {
  background: var(--brand); color: white; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cal-day-num { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.cal-event-pill {
  font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 4px; color: white;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.cal-more-pill { font-size: 10.5px; color: var(--text-muted); text-align: center; cursor: pointer; }
.cal-type-Call        { background: #0078d4; }
.cal-type-Meeting     { background: #8a2be2; }
.cal-type-Task        { background: #10b981; }
.cal-type-Email       { background: #ef4444; }
.cal-type-Follow-up   { background: #ec4899; }
.cal-type-Event       { background: #0ea5e9; }
.cal-type-Deadline    { background: #b91c1c; }

/* ============================================================
   DASHBOARD KPI CARDS
   ============================================================ */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.kpi-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
  transition: border-color var(--transition), transform var(--transition);
}
.kpi-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.kpi-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; }
.kpi-value { font-size: 30px; font-weight: 700; color: var(--text-primary); letter-spacing: -1px; line-height: 1.15; }
.kpi-sub { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.kpi-icon { width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.kpi-icon svg { width: 20px; height: 20px; }
.kpi-icon.blue   { background: var(--info-soft);    color: var(--info); }
.kpi-icon.green  { background: var(--success-soft); color: var(--success); }
.kpi-icon.amber  { background: var(--warning-soft); color: var(--warning); }
.kpi-icon.red    { background: var(--danger-soft);  color: var(--danger); }
.kpi-icon.brand  { background: var(--brand-soft);   color: var(--brand); }

/* Sales Playbook's KPI row can hold up to 6 cards — shrunk so they still
   fit on one line instead of wrapping the 6th card to its own row. */
.pb-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.pb-kpi-grid .kpi-card { padding: 14px; }
.pb-kpi-grid .kpi-icon { width: 30px; height: 30px; margin-bottom: 8px; }
.pb-kpi-grid .kpi-icon svg { width: 15px; height: 15px; }
.pb-kpi-grid .kpi-label { font-size: 10px; margin-bottom: 6px; }
.pb-kpi-grid .kpi-value { font-size: 20px; letter-spacing: -0.5px; }
.pb-kpi-grid .kpi-sub { font-size: 11px; margin-top: 4px; }

/* ============================================================
   TABS (Sales Playbook and similar tabbed pages)
   ============================================================ */
.tab-bar {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  padding: 0 4px; flex-shrink: 0;
}
.tab-btn {
  padding: 10px 16px; font-size: 13px; font-weight: 500;
  color: var(--text-muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: all var(--transition); cursor: pointer;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

/* ============================================================
   DETAIL PAGES (Contact / Company / Deal)
   ============================================================ */
.detail-page-container { display: flex; gap: 20px; flex: 1; min-height: 0; }
.left-scroll-pane {
  width: 320px; flex-shrink: 0; height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
}
.right-scroll-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.timeline { display: flex; flex-direction: column; gap: 14px; }
.timeline-item { display: flex; gap: 12px; }
.timeline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; margin-top: 5px; }
.timeline-dot.note { background: var(--brand); }
.timeline-dot.audit { background: var(--text-muted); }
.timeline-dot.activity { background: var(--success); }
.timeline-content { flex: 1; min-width: 0; }
.timeline-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
.timeline-text { font-size: 13px; color: var(--text-primary); line-height: 1.5; }

.mini-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: border-color var(--transition);
}
.mini-card:hover { border-color: var(--brand); }
.mini-card-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand);
  font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ============================================================
   DETAIL PAGE — Bigin-style compact info panel
   ============================================================ */
.dp-owner-line {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 12px; color: var(--text-secondary); margin-top: 2px;
}
.dp-owner-line svg { width: 13px; height: 13px; color: var(--warning); flex-shrink: 0; }
.dp-owner-label { color: var(--text-muted); font-weight: 500; }

.dp-icon-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13.5px; color: var(--text-primary); padding: 10px 0; border-bottom: 1px solid var(--border);
}
.dp-icon-row:last-child { border-bottom: none; }
.dp-icon-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.dp-icon-row-main svg { width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; }
.dp-icon-row-main span, .dp-icon-row-main a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-icon-row .dp-empty { color: var(--text-muted); }
.dp-wa-link { display: flex; flex-shrink: 0; }
.dp-wa-link svg { width: 15px; height: 15px; }

.dp-stats-line {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary);
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border);
}
.dp-stats-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--info); flex-shrink: 0; }
.dp-stats-line strong { color: var(--text-primary); font-weight: 700; }

.dp-last-modified {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-muted);
  padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--border);
}
.dp-last-modified strong { color: var(--text-secondary); font-weight: 600; }

.dp-nav-arrows { display: flex; align-items: center; gap: 4px; }
.dp-nav-btn {
  width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--text-secondary);
  transition: all var(--transition); cursor: pointer;
}
.dp-nav-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.dp-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.dp-nav-btn svg { width: 16px; height: 16px; }

.tab-pill-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; margin-left: 5px;
  border-radius: var(--radius-full); background: var(--bg-active); color: var(--text-secondary);
  font-size: 10px; font-weight: 700;
}
.tab-btn.active .tab-pill-count { background: var(--brand); color: #fff; }

/* ============================================================
   DEAL DETAIL PAGE
   ============================================================ */
.deal-detail-container { display: flex; gap: 20px; flex: 1; min-height: 0; }
.deal-detail-left { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.deal-detail-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.stage-track-wrap {
  position: relative; padding: 14px 16px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px;
}
.stage-track { display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
.stage-connector { flex: 1; height: 2px; min-width: 20px; background: var(--border); }
.stage-connector.done { background: var(--stage-color, var(--brand)); }
.stage-node-wrap { position: relative; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.stage-circle {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; color: #fff; transition: all 0.2s ease;
}
.stage-circle:hover { border-color: var(--stage-color, var(--brand)); }
.stage-circle.done { border-color: var(--stage-color, var(--brand)); background: var(--stage-color, var(--brand)); }
.stage-pill-active {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
  background: var(--stage-color, var(--brand)); color: #fff; border-radius: 16px;
  font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.stage-pill-active svg { width: 13px; height: 13px; flex-shrink: 0; }
.stage-thumb { margin-top: 6px; color: var(--text-muted); }
.stage-thumb svg { width: 16px; height: 16px; }

.stage-dropdown {
  position: absolute; top: 54px; left: 16px; z-index: 40; min-width: 220px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.stage-dropdown-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; font-size: 13px; cursor: pointer; transition: background var(--transition);
}
.stage-dropdown-item:hover { background: var(--bg-hover); }
.stage-dropdown-item.selected { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.stage-dropdown-item svg { width: 15px; height: 15px; }

.dp-prob-ring {
  display: inline-flex; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  align-items: center; justify-content: center;
}
.dp-prob-ring span { width: 11px; height: 11px; border-radius: 50%; background: var(--bg-elevated); }

.dp-file-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
}
.dp-file-icon { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dp-file-icon svg { width: 16px; height: 16px; }

.timeline-date-group {
  font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px;
  margin: 4px 0 2px; padding-left: 20px;
}
.timeline-date-group:first-child { margin-top: 0; }

/* ============================================================
   DEALS LIST — toolbar, Kanban board, stats bar, pipeline tabs
   ============================================================ */
.deals-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.deals-toolbar-select {
  height: 34px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text-primary); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.view-toggle-group { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.view-toggle-btn {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer; background: var(--bg-elevated); border-right: 1px solid var(--border);
}
.view-toggle-btn:last-child { border-right: none; }
.view-toggle-btn:hover { color: var(--text-primary); }
.view-toggle-btn.active { background: var(--brand-soft); color: var(--brand); }
.view-toggle-btn svg { width: 16px; height: 16px; }

.kanban-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.kanban-column {
  width: 260px; flex-shrink: 0; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; flex-direction: column; max-height: 560px;
}
.kanban-col-header { padding: 10px 12px 6px; border-top: 3px solid var(--border-strong); border-radius: var(--radius) var(--radius) 0 0; }
.kanban-col-title { font-weight: 700; font-size: 13px; }
.kanban-col-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.kanban-col-desc {
  padding: 6px 12px 10px; font-size: 11px; color: var(--text-muted); cursor: text;
  border-bottom: 1px solid var(--border); min-height: 14px;
}
.kanban-col-desc:hover { color: var(--text-secondary); }
.kanban-col-cards { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.kanban-col-cards.drag-over { background: var(--brand-soft); }
.kanban-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px; cursor: pointer; transition: border-color var(--transition);
}
.kanban-card:hover { border-color: var(--brand); }
.kanban-card.dragging { opacity: 0.4; }
.kanban-card-name { font-weight: 600; font-size: 12.5px; margin-bottom: 3px; }
.kanban-card-contact { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card-company { color: var(--text-muted); }
.kanban-card-owner { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-muted); margin-bottom: 6px; }
.kanban-card-owner svg { width: 11px; height: 11px; color: var(--warning); flex-shrink: 0; }
.kanban-card-footer { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.kanban-card-value { font-weight: 700; color: var(--success); }
.kanban-card-date.overdue { color: var(--danger); font-weight: 600; }
.kanban-empty { font-size: 11px; color: var(--text-muted); text-align: center; padding: 16px 0; }

.deals-stats-bar {
  display: flex; align-items: center; gap: 18px; padding: 10px 16px; font-size: 12px;
  color: var(--text-secondary); border-top: 1px solid var(--border); flex-wrap: wrap;
}
.deals-stats-bar strong { color: var(--text-primary); font-weight: 700; }
.deals-stats-bar .spacer { flex: 1; }
.deals-stats-bar select {
  height: 26px; padding: 0 6px; width: 56px; font-size: 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text-primary);
}
.deals-stats-bar .pagination { border: none; padding: 0; }

/* ============================================================
   Row hover quick-view popover (Contacts/Companies/Deals lists)
   ============================================================ */
.qv-trigger {
  opacity: 0; margin-left: 6px; display: inline-flex; vertical-align: middle;
  color: var(--text-muted); cursor: pointer; transition: opacity var(--transition), color var(--transition);
}
tr:hover .qv-trigger { opacity: 1; }
.qv-trigger:hover { color: var(--brand); }
.qv-trigger svg { width: 14px; height: 14px; }
.qv-popover {
  position: fixed; z-index: 300; width: 320px; max-height: 460px; overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 16px;
}

/* ============================================================
   Settings sidebar
   ============================================================ */
.settings-sidebar { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-sidebar-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.5px; padding: 10px 10px 6px;
}
.settings-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all var(--transition);
}
.settings-nav-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-muted); }
.settings-nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.settings-nav-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.settings-nav-item.active svg { color: var(--brand); }

.settings-subtab {
  padding: 8px 4px; margin-right: 20px; font-size: 13px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--transition);
}
.settings-subtab:hover { color: var(--text-primary); }
.settings-subtab.active { color: var(--brand); border-bottom-color: var(--brand); }


.deals-pipeline-tabs { display: flex; align-items: center; gap: 4px; margin-top: 16px; border-top: 1px solid var(--border); padding-top: 10px; }
.pipeline-tab-btn {
  padding: 6px 14px; font-size: 12px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer; color: var(--text-muted); border: 1px solid transparent;
}
.pipeline-tab-btn:hover { color: var(--text-primary); }
.pipeline-tab-btn.active { color: var(--brand); border-color: var(--border); background: var(--bg-surface); font-weight: 700; }
.pipeline-tab-add {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm);
}
.pipeline-tab-add:hover { background: var(--bg-hover); color: var(--text-primary); }

.editable-cell { cursor: text; }
.editable-cell:hover { background: var(--bg-hover); }
.editable-cell input, .editable-cell select { width: 100%; height: 28px; font-size: 12.5px; }
.stage-mini-bar { display: inline-flex; align-items: center; gap: 6px; }
.stage-mini-bar .bar-track { width: 46px; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.stage-mini-bar .bar-fill { height: 100%; background: var(--brand); }

.csv-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 28px 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--bg-elevated); cursor: pointer; text-align: center;
  color: var(--text-secondary); font-size: 13px; font-weight: 500; transition: all var(--transition);
}
.csv-dropzone:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.csv-dropzone-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-card); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.csv-dropzone-icon svg { width: 16px; height: 16px; }
.csv-dropzone:hover .csv-dropzone-icon { color: var(--brand); }

/* Import Wizard — roadmap stepper shown at the top of every screen */
.iw-stepper { display: flex; align-items: flex-start; margin-bottom: 26px; padding: 0 2px; }
.iw-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.iw-step-circle {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; background: var(--bg-elevated);
  flex-shrink: 0; box-sizing: border-box; transition: all var(--transition);
}
.iw-step-label { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; transition: color var(--transition); }
.iw-step.done .iw-step-circle { background: var(--brand); border-color: var(--brand); }
.iw-step.done .iw-step-label, .iw-step.active .iw-step-label { color: var(--text-primary); }
.iw-step.active .iw-step-circle { border-color: var(--brand); }
.iw-step-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.iw-step-line { flex: 1 1 auto; height: 2px; background: var(--border); margin-top: 12px; min-width: 20px; }
.iw-step-line.done { background: var(--brand); }

/* Import Wizard — Choose Action + column mapping steps */
.iw-action-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.iw-action-option { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.iw-action-option:hover { background: var(--bg-hover); }
.iw-action-option input { width: 16px; height: 16px; accent-color: var(--brand); }
.iw-action-extra { padding: 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); }
.iw-action-extra-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.iw-action-extra-row + .iw-protect-row, .iw-action-extra-row + .iw-action-extra-row { margin-top: 12px; }
.iw-action-extra-row select { width: 200px; height: 34px; }
.iw-protect-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 12px; cursor: pointer; }
.iw-protect-row input { width: 16px; height: 16px; accent-color: var(--brand); }

.iw-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.iw-map-tabs { display: flex; gap: 4px; }
.iw-map-tab { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-full); font-size: 12.5px; font-weight: 600; color: var(--text-secondary); border: 1px solid var(--border); }
.iw-map-tab span { color: var(--text-muted); }
.iw-map-tab.active { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.iw-map-tab.active span { color: var(--brand); }
.iw-map-list { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow-y: auto; }
.iw-map-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.iw-map-col { min-width: 0; }
.iw-map-header { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.iw-map-sample { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iw-map-select { flex-shrink: 0; width: 220px; height: 34px; }
.iw-map-links { margin-top: 12px; font-size: 12.5px; }
.iw-map-links a { color: var(--brand); }
.iw-map-links span { margin: 0 8px; color: var(--text-muted); }

/* ============================================================
   KEYBOARD NAVIGATION (keynav.js) — one highlight style for every list popup
   ============================================================ */
.kb-active { background: var(--brand-soft) !important; box-shadow: inset 3px 0 0 var(--brand); }
.dropdown-item.kb-active { color: var(--brand) !important; }
.dropdown-item.kb-active.active { background: var(--brand) !important; color: #fff !important; }
.kb-active:focus-visible { outline: none; }
:root[data-theme="dark"] .kb-active { background: rgba(13, 148, 136, .22) !important; }
@media (forced-colors: active) { .kb-active { outline: 2px solid Highlight; } }

/* ============================================================
   LAYERED WINDOWS — trail shown while a record is open on top of another screen
   ============================================================ */
.win-bar { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 8px 24px; background: var(--bg-surface); border-bottom: 1px solid var(--border); font-size: 13px; min-height: 40px; box-sizing: border-box; }
.win-bar.hidden { display: none; }
.win-back { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px 0 8px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-weight: 600; cursor: pointer; }
.win-back:hover { background: var(--bg-hover); border-color: var(--brand); color: var(--brand); }
.win-trail { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; }
.win-crumb { border: none; background: none; padding: 2px 4px; border-radius: 4px; color: var(--brand); font: inherit; cursor: pointer; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.win-crumb:hover { background: var(--brand-soft); text-decoration: underline; }
.win-sep { color: var(--text-muted); }
.win-cur { color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.win-count { color: var(--text-muted); font-size: 12px; flex-shrink: 0; }
.win-bar + .page-container { animation: win-in .16s ease-out; }
@keyframes win-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .win-bar + .page-container { animation: none; } }

/* focus ring for keyboard users on clickable rows / tabs / cards */
.tab-btn:focus-visible, #page-container tbody tr[data-id]:focus-visible, .mini-card:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ============================================================================
   ZOHO CRM STYLE SETTINGS & EMAIL TEMPLATES MODULE
   ========================================================================== */
.settings-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  min-height: calc(100vh - 120px);
}
.settings-sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 12px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  box-shadow: var(--shadow-sm);
}
.settings-sidebar::-webkit-scrollbar { width: 4px; }
.settings-sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.settings-sidebar-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: 16px 8px 6px;
}
.settings-sidebar-label:first-child { margin-top: 0; }
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  user-select: none;
}
.settings-nav-item svg { width: 17px; height: 17px; color: var(--text-secondary); flex-shrink: 0; }
.settings-nav-item:hover { background: var(--bg-hover); color: var(--brand); }
.settings-nav-item:hover svg { color: var(--brand); }
.settings-nav-item.active { background: color-mix(in srgb, var(--brand) 12%, var(--bg-card)); color: var(--brand); font-weight: 600; }
.settings-nav-item.active svg { color: var(--brand); }

.settings-subtabs {
  display: flex;
  gap: 24px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
  padding-bottom: 0;
}
.settings-subtab {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 4px 12px;
  cursor: pointer;
  position: relative;
  transition: color .15s ease;
}
.settings-subtab:hover { color: var(--text-primary); }
.settings-subtab.active { color: var(--brand); }
.settings-subtab.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand);
}

.tpl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tpl-search {
  position: relative;
  width: 280px;
}
.tpl-search input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px !important;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 13px;
}
.tpl-search-ic {
  position: absolute;
  left: 10px;
  top: 9px;
  color: var(--text-muted);
  pointer-events: none;
}
.tpl-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.tpl-table th {
  background: var(--bg-elevated);
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 1px solid var(--border);
}
.tpl-table td {
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.tpl-table tr:last-child td { border-bottom: none; }
.tpl-table tr:hover td { background: var(--bg-hover); }
.tpl-name { font-weight: 600; color: var(--text-primary); cursor: pointer; }
.tpl-name:hover { color: var(--brand); text-decoration: underline; }
.tpl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.tpl-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tpl-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
}
.tpl-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.tpl-picker-item:hover { border-color: var(--brand); background: var(--brand-soft); }

.page-container:has(.zoho-settings-layout),
.page-container.is-settings-page {
  overflow: hidden !important;
  padding: 16px 24px 20px !important;
}

.page-container > .zoho-settings-layout {
  flex: 1;
  flex-shrink: 1;
  min-height: 0;
  height: 100%;
}

.zoho-settings-layout {
  display: flex;
  gap: 24px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.zoho-settings-sidebar {
  width: 230px;
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  padding-right: 12px;
  border-right: 1px solid var(--border-subtle, var(--border));
}
.zoho-settings-sidebar::-webkit-scrollbar {
  width: 4px;
}
.zoho-settings-sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.zoho-settings-content {
  flex: 1;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-right: 6px;
}
.zoho-settings-content > div:not(#settings-panel-customfields) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
#settings-panel-customfields {
  flex: 1;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#settings-panel-customfields:not(.hidden) {
  display: flex !important;
}
.zoho-picker-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  gap: 12px;
  transition: all 0.15s ease;
}
.zoho-picker-card:hover {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.04);
}

/* ============================================================================
   ZOHO CRM STYLE FIELDS MODULE REDESIGN
   ========================================================================== */
.fields-view-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  min-height: 0;
  background: var(--bg-base);
  overflow: hidden;
}

.fields-subtabs {
  flex-shrink: 0;
  display: flex;
  gap: 28px;
  border-bottom: 1.5px solid var(--border);
  padding: 0 4px;
  margin-bottom: 16px;
  background: var(--bg-surface);
  z-index: 10;
}

.fields-subtab {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 10px 4px 12px;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}

.fields-subtab:hover {
  color: var(--text-primary);
}

.fields-subtab.active {
  color: #00a76f;
  font-weight: 700;
}

.fields-subtab.active::after {
  content: "";
  position: absolute;
  bottom: -1.5px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #00a76f;
}

.fields-cards-wrapper {
  background: #f4f6f8;
  border-radius: 10px;
  padding: 20px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fields-cards-grid {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 20px;
  align-items: stretch;
  overflow: hidden;
}

.field-module-card {
  width: 380px;
  min-width: 320px;
  max-width: 440px;
  height: 100%;
  max-height: 100%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.field-card-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #ffffff;
  border-bottom: 1px solid #f3f4f6;
  z-index: 2;
}

.field-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.field-card-header-edit-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s ease;
}

.field-card-header-edit-btn:hover {
  background: #f3f4f6;
  color: #111827;
}

.field-card-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px;
}
.field-card-body::-webkit-scrollbar {
  width: 6px;
}
.field-card-body::-webkit-scrollbar-track {
  background: transparent;
}
.field-card-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.field-card-body::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.field-section-heading {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-top: 14px;
  margin-bottom: 10px;
}

.field-section-heading:first-child {
  margin-top: 0;
}

.field-row-zoho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #1f2937;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field-row-zoho.is-mandatory {
  border-left: 3px solid #ef4444 !important;
}

.field-tag-unique {
  font-size: 12px;
  color: #9ca3af;
  font-weight: 400;
  margin-left: 6px;
}

.field-row-hover-actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.field-row-zoho:hover .field-row-hover-actions {
  opacity: 1;
  pointer-events: auto;
}

.field-row-action-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.field-row-action-btn:hover {
  background: #f3f4f6;
  color: #111827;
}

.field-row-action-btn.danger:hover {
  background: #fee2e2;
  color: #ef4444;
}

.field-card-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid #f3f4f6;
  background: #ffffff;
  z-index: 2;
  font-size: 13px;
}

/* Icon picker popover matching Screenshot 5 */
.icon-picker-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 320px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 16px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.icon-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.icon-picker-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  cursor: pointer;
}

.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}

.icon-picker-cell {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b5563;
  background: #f9fafb;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.icon-picker-cell:hover {
  background: #e0f2fe;
  color: #0284c7;
}

.icon-picker-cell.selected {
  background: #e0f2fe;
  color: #0284c7;
  border-color: #0284c7;
}

.customize-fields-link {
  color: #0284c7;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.customize-fields-link:hover {
  text-decoration: underline;
}

.used-custom-fields-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #6b7280;
}

.status-dot-green {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
}

/* Modal layout customizer matching Screenshot 4 & 5 */
.layout-builder-body {
  display: flex;
  gap: 20px;
  min-height: 480px;
  max-height: calc(85vh - 120px);
}

.layout-left-active {
  flex: 1;
  overflow-y: auto;
  padding-right: 12px;
  border-right: 1px solid #e5e7eb;
}

.layout-right-unused {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.layout-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 13px;
  position: relative;
  transition: all 0.15s ease;
}

.layout-item-row.is-mandatory {
  border-left: 3px solid #ef4444 !important;
}

.layout-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.drag-handle-icon {
  color: #9ca3af;
  cursor: grab;
  flex-shrink: 0;
}

.layout-type-badge {
  font-size: 12px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 400;
}

.btn-add-custom-field-pill {
  width: 100%;
  border: 1.5px solid #00a76f;
  color: #00a76f;
  background: transparent;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-add-custom-field-pill:hover {
  background: rgba(0, 167, 111, 0.06);
}

.unused-fields-search-wrap {
  position: relative;
  margin-top: 12px;
  margin-bottom: 12px;
}

.unused-search-input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px !important;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
}

.unused-search-icon {
  position: absolute;
  left: 10px;
  top: 10px;
  color: #9ca3af;
  pointer-events: none;
}

.unused-fields-list-box {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.unused-field-item-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.unused-field-item-card:hover {
  border-color: #00a76f;
  background: rgba(0, 167, 111, 0.04);
}




/* Insert HTML / code dialog (the </> button in the email editor) */
.ihd-sub { margin: 0 0 12px; font-size: 13px; color: var(--text-secondary); }
.ihd-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ihd-mode { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: #fff; }
.ihd-mode:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.ihd-mode input { margin-top: 3px; accent-color: var(--brand); }
.ihd-mode b { display: block; font-size: 13px; }
.ihd-mode small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.ihd-ta { width: 100%; min-height: 150px; height: 150px; padding: 10px 12px; font-family: Consolas, 'Courier New', monospace; font-size: 12.5px; line-height: 1.5; resize: vertical; white-space: pre; }
.ihd-prev-h { margin: 14px 0 6px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ihd-prev { width: 100%; height: 220px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
@media (max-width: 640px) { .ihd-modes { grid-template-columns: 1fr; } }

/* Contact form: additional emails / Mobile Nos. */
.cf-extras .cf-xrow { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.cf-extras .cf-xrow > input.form-input, .cf-extras .cf-xrow > .phone-field-wrap { flex: 1; min-width: 0; }
.cf-add-link { border: none; background: none; color: var(--brand); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 2px 0; }
.cf-add-link:hover { text-decoration: underline; }

/* two-line label for the longer Form Contacts item */
.nav-item[data-page="forms"] .nav-label { white-space: normal; text-align: center; overflow: visible; text-overflow: clip; }


/* ---- Page-open animation: whatever a tab renders fades up quickly; list rows and kanban columns follow in a short cascade (kept brief so screens feel instant). */
@keyframes pg-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pg-row { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes pg-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-container > * { animation: pg-rise .26s cubic-bezier(.2,.7,.2,1) backwards; }
.page-container > .page-loader { animation: none; }
.page-container > *:nth-child(2) { animation-delay: .03s; }
.page-container > *:nth-child(n+3) { animation-delay: .06s; }
.page-container tbody tr { animation: pg-row .22s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: .08s; }
.page-container tbody tr:nth-child(2) { animation-delay: .10s; } .page-container tbody tr:nth-child(3) { animation-delay: .12s; }
.page-container tbody tr:nth-child(4) { animation-delay: .14s; } .page-container tbody tr:nth-child(5) { animation-delay: .16s; }
.page-container tbody tr:nth-child(6) { animation-delay: .18s; } .page-container tbody tr:nth-child(n+7) { animation-delay: .20s; }
.page-container .kanban-column { animation: pg-pop .26s cubic-bezier(.2,.7,.2,1) backwards; }
.page-container .kanban-column:nth-child(2) { animation-delay: .03s; } .page-container .kanban-column:nth-child(3) { animation-delay: .06s; }
.page-container .kanban-column:nth-child(n+4) { animation-delay: .09s; }
.page-container .detail-card, .page-container .mini-card { animation: pg-pop .26s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: .05s; }
@media (prefers-reduced-motion: reduce) { .page-container > *, .page-container tbody tr, .page-container .kanban-column, .page-container .detail-card, .page-container .mini-card { animation: none !important; } }
/* ---- Tags: each distinct tag has its own colour (hue comes from --tg) ---- */
.badge.tag-dyn { background: hsl(var(--tg, 200) var(--ts, 75%) 92%); color: hsl(var(--tg, 200) 65% 26%); border: 1px solid hsl(var(--tg, 200) 60% 80%); }
.tagpick { position: relative; }
.tagpick-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: text; }
.tagpick-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
.tagpick-chips { display: contents; }
.tagpick-chips .badge { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
.tagpick-chips button { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 3px; opacity: .65; }
.tagpick-chips button:hover { opacity: 1; }
.tagpick-input { flex: 1; min-width: 120px; border: none; outline: none; background: transparent; font: inherit; font-size: 13.5px; padding: 4px 2px; }
.tagpick-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,.14); padding: 6px; max-height: 240px; overflow-y: auto; }
.tagpick-menu button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: none; background: transparent; padding: 7px 8px; border-radius: 6px; cursor: pointer; text-align: left; }
.tagpick-menu button:hover, .tagpick-menu button.on { background: #f1f5f9; }
.tagpick-menu em { font-size: 11.5px; color: var(--text-muted); font-style: normal; }
.dp-referral { display: flex; gap: 8px; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; }
.dp-referral span { color: var(--text-muted); font-size: 12px; }
.dp-referral a { color: var(--brand); font-weight: 600; text-decoration: none; }

/* ---- Email signature + tracking toggle in the compose windows ---- */
.ctb-sig-btn { width: auto !important; gap: 5px; padding: 0 8px !important; font-weight: 600; font-size: 12px; }
.sig-menu { min-width: 230px; padding: 6px; display: flex; flex-direction: column; }
.sig-menu button { text-align: left; border: none; background: transparent; padding: 9px 12px; border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; color: var(--text-primary); }
.sig-menu button:hover:not(:disabled) { background: #f1f5f9; }
.sig-menu button:disabled { opacity: .45; cursor: default; }
.sig-bar { display: flex; gap: 4px; margin-bottom: 6px; }
.sig-tb { height: 32px; min-width: 34px; padding: 0 8px; border: 1px solid var(--border); background: #fff; border-radius: 6px; cursor: pointer; font-size: 14px; }
.sig-tb:hover { background: #f1f5f9; }
.sig-edit { min-height: 150px; max-height: 280px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: #fff; outline: none; font-size: 14px; line-height: 1.5; }
.sig-edit:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
.sig-edit img, .sig-preview img { max-width: 260px; height: auto; }
.sig-auto { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; }
.sig-preview-h { margin: 14px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sig-preview { padding: 12px; border: 1px dashed var(--border); border-radius: 8px; background: #fafbfc; min-height: 44px; font-size: 14px; line-height: 1.5; }
.compose-track { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); margin-right: 8px; cursor: pointer; white-space: nowrap; }
.compose-body-editable .crm-sig { margin-top: 4px; }

/* ---- Contact / Company detail: Emails list + email viewer, Tasks tab ---- */
.em-head, .tk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.em-sum { font-size: 12.5px; color: var(--text-muted); }
.em-ic svg { width: 14px; height: 14px; display: block; }
.em-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.em-row { display: flex; gap: 12px; text-align: left; width: 100%; padding: 14px 16px; border: none; border-bottom: 1px solid var(--border); background: #fff; cursor: pointer; font: inherit; color: inherit; transition: background .12s; }
.em-row:last-child { border-bottom: none; }
.em-row:hover { background: #f8fafc; }
.em-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.em-av { flex: 0 0 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #0d9488, #1e3a5f); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.em-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.em-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.em-subj { font-size: 13.5px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-date { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.em-meta { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-meta b { color: var(--text-secondary); font-weight: 600; }
.em-snip { font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.em-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #f1f5f9; color: #64748b; }
.em-badge svg { width: 12px; height: 12px; }
.em-badge.on { background: #dcfce7; color: #15803d; } .em-badge.click { background: #e0f2fe; color: #0369a1; } .em-badge.fail { background: #fee2e2; color: #b91c1c; }
.em-badge.wait { background: #fef3c7; color: #92400e; } .em-badge.off { background: #f1f5f9; color: #94a3b8; font-weight: 500; }
.em-row.failed .em-av { background: #ef4444; }
.em-view { display: flex; flex-direction: column; gap: 14px; }
.em-dl { display: grid; grid-template-columns: 56px 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.em-dl dt { color: var(--text-muted); font-weight: 600; } .em-dl dd { margin: 0; color: var(--text-primary); word-break: break-word; }
.em-addr { color: var(--text-muted); }
.em-dl svg { width: 13px; height: 13px; vertical-align: -2px; }
.em-frame { width: 100%; height: 160px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.em-fail { padding: 10px 12px; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 13px; }
.em-track { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: linear-gradient(180deg, #f8fffe, #fff); }
.em-track.off { display: flex; gap: 12px; color: var(--text-muted); font-size: 13px; background: #f8fafc; }
.em-track-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 13.5px; } .em-track-h span { font-size: 12px; color: var(--text-muted); }
.em-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.em-stats div { display: flex; flex-direction: column; min-width: 70px; } .em-stats strong { font-size: 15px; } .em-stats small { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.em-events { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 9px; max-height: 180px; overflow-y: auto; }
.em-events li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; }
.em-events .ev { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.em-events .ev svg { width: 14px; height: 14px; } .em-events .ev.open { background: #dcfce7; color: #15803d; } .em-events .ev.click { background: #e0f2fe; color: #0369a1; }
.em-events li > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; } .em-url { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-ev-r { text-align: right; color: var(--text-secondary); display: flex; flex-direction: column; } .em-ev-r small, .em-events small { font-size: 11px; color: var(--text-muted); }
.em-hint { margin: 10px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.tk-filter { display: inline-flex; background: #f1f5f9; border-radius: 10px; padding: 3px; }
.tk-filter button { border: none; background: transparent; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.tk-filter button span { font-size: 11px; background: #e2e8f0; border-radius: 999px; padding: 0 6px; } .tk-filter button.on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.tk-list { display: flex; flex-direction: column; gap: 8px; }
.tk-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: 12px; transition: box-shadow .15s, border-color .15s; }
.tk-row:hover { border-color: #cbd5e1; box-shadow: 0 2px 10px rgba(15,23,42,.06); }
.tk-row.overdue { border-left: 3px solid #ef4444; }
.tk-check { flex: 0 0 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid #cbd5e1; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; color: #fff; transition: all .15s; }
.tk-check:hover { border-color: var(--brand); } .tk-row.done .tk-check { background: #10b981; border-color: #10b981; } .tk-check svg { width: 13px; height: 13px; }
.tk-main { flex: 1; min-width: 0; cursor: pointer; }
.tk-subj { font-size: 13.5px; font-weight: 600; color: var(--text-primary); } .tk-row.done .tk-subj { text-decoration: line-through; color: var(--text-muted); }
.tk-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.tk-type { background: #f1f5f9; border-radius: 999px; padding: 0 8px; font-weight: 600; font-size: 11px; color: #475569; }
.tk-row.overdue .tk-due { color: #dc2626; font-weight: 600; }
.tk-desc { margin-top: 5px; font-size: 12.5px; color: var(--text-secondary); white-space: pre-wrap; }
.tk-del { border: none; background: transparent; color: #94a3b8; cursor: pointer; padding: 4px; border-radius: 6px; opacity: 0; transition: opacity .15s; }
.tk-del svg { width: 16px; height: 16px; display: block; } .tk-row:hover .tk-del, .tk-del:focus-visible { opacity: 1; } .tk-del:hover { color: #ef4444; background: #fef2f2; }
.tk-empty { text-align: center; padding: 34px 16px; color: var(--text-muted); font-size: 13.5px; line-height: 1.8; }
.tk-link { border: none; background: none; color: var(--brand); font-weight: 600; cursor: pointer; font: inherit; font-weight: 600; }

/* ---- Settings > Recycle Bin ---- */
.bn { padding: 4px 4px 20px; }
.bn-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; }
.bn-head h2 { margin: 0 0 6px; font-size: 20px; } .bn-head p { margin: 0; max-width: 640px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; }
.bn-tools { display: flex; gap: 10px; align-items: center; } .bn-search input { width: 240px; height: 38px; }
.danger-outline { color: #dc2626 !important; border-color: #fecaca !important; } .danger-outline:hover { background: #fef2f2 !important; }
.bn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bn-chip { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.bn-chip span { background: #f1f5f9; border-radius: 999px; padding: 0 7px; font-size: 11px; } .bn-chip:hover { border-color: #cbd5e1; }
.bn-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; } .bn-chip.on span { background: rgba(255,255,255,.25); color: #fff; }
.bn-bulk { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 10px; font-size: 13px; font-weight: 600; }
.bn-link { border: none; background: none; color: var(--brand); cursor: pointer; font: inherit; font-weight: 600; margin-left: auto; }
.bn-table { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.bn-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.bn-tbl th { text-align: left; padding: 11px 14px; background: #f8fafc; border-bottom: 1px solid var(--border); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); white-space: nowrap; }
.bn-tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } .bn-tbl tr:last-child td { border-bottom: none; }
.bn-tbl tbody tr:hover { background: #f8fafc; }
.bn-name { font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bn-det { color: var(--text-secondary); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-type { background: #f1f5f9; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 600; color: #475569; white-space: nowrap; }
.bn-soon { color: #dc2626; font-weight: 700; }
.bn-act { white-space: nowrap; text-align: right; }
.bn-btn { border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-secondary); margin-left: 6px; }
.bn-btn:hover:not(:disabled) { background: #f1f5f9; } .bn-btn:disabled { opacity: .45; cursor: default; }
.bn-btn.danger { color: #dc2626; border-color: #fecaca; } .bn-btn.danger:hover { background: #fef2f2; }
.bn-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); }
.bn-empty { text-align: center; padding: 56px 20px; color: var(--text-muted); } .bn-empty h3 { margin: 12px 0 4px; color: var(--text-primary); font-size: 16px; } .bn-empty p { margin: 0; font-size: 13px; }
.bn-empty-ic svg { width: 44px; height: 44px; color: #cbd5e1; }

/* ---- Customize Fields: large, drag-and-drop editor ---- */
.modal.modal-xl { max-width: 1120px; width: 94vw; }
.modal-xl .layout-builder-body { min-height: 0; height: min(66vh, 640px); max-height: none; gap: 28px; }
.modal-xl .layout-left-active { padding-right: 20px; }
.modal-xl .layout-right-unused { width: 340px; }
#modal-footer:has(.lay-hint) { align-items: center; gap: 10px; }
.lay-hint { font-size: 12.5px; color: var(--text-muted); max-width: 420px; line-height: 1.4; }
.lay-sec-h { font-weight: 700; font-size: 14px; color: #111827; margin: 18px 0 10px; } .lay-sec-h:first-child { margin-top: 2px; }
.lay-list { min-height: 44px; border-radius: 8px; padding: 2px; transition: background .15s; }
.lay-list.drop-end, .lay-unused.drop-end { background: rgba(0,167,111,.07); box-shadow: inset 0 -3px 0 #00a76f; }
.layout-item-row.drop-before { box-shadow: 0 -3px 0 #00a76f; }
.layout-item-row[draggable="true"] { cursor: grab; } .layout-item-row.dragging, .unused-field-item-card.dragging { opacity: .35; }
.layout-item-row .lay-lbl { font-weight: 600; color: #111827; font-size: 13.5px; }
.layout-item-left { min-width: 0; } .lay-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lay-lock { color: #9ca3af; display: inline-flex; padding: 0 2px; }
.lay-tagc { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6366f1; background: #eef2ff; border-radius: 999px; padding: 1px 7px; margin-left: 8px; }
.lay-empty { border: 1.5px dashed #d1d5db; border-radius: 8px; padding: 14px; text-align: center; color: #9ca3af; font-size: 12.5px; }
.lay-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid #f3f4f6; font-size: 12.5px; color: #6b7280; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .lay-foot small { flex-basis: 100%; color: #9ca3af; }
.lay-un-h { font-weight: 700; font-size: 14px; color: #111827; margin-top: 16px; }
.lay-unused { border-radius: 8px; padding: 2px; transition: background .15s; }
.unused-field-item-card[draggable="true"] { cursor: grab; } .lay-glyph { color: #6b7280; font-weight: 700; width: 18px; text-align: center; }
.unused-field-item-card .drag-handle-icon { margin-right: -2px; }
@media (max-width: 760px) { .modal-xl .layout-builder-body { flex-direction: column; height: auto; } .modal-xl .layout-right-unused { width: auto; } }

/* ---- Live updates: bell, notification panel, pop-ups, sidebar counters ---- */
.live-refresh *, .live-refresh *::before { animation: none !important; }
.notif-wrap { position: relative; display: flex; align-items: center; margin-left: 12px; flex-shrink: 0; }
.notif-bell { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated, #fff); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, transform .15s; }
.notif-bell:hover { background: var(--bg-hover, #f1f5f9); color: var(--text-primary); } .notif-bell:active { transform: scale(.94); }
.notif-bell svg { width: 20px; height: 20px; }
.notif-bell[aria-expanded="true"] { background: var(--brand-soft, #e6faf6); color: var(--brand); border-color: var(--brand); }
.notif-badge { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: linear-gradient(135deg, #ff5f6d, #e11d48); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg-surface, #fff), 0 2px 8px rgba(225,29,72,.5); animation: nb-pop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes nb-pop { from { transform: scale(.3); } to { transform: scale(1); } }
.notif-panel { position: absolute; top: calc(100% + 10px); right: -40px; width: 400px; max-width: calc(100vw - 24px); max-height: min(560px, 78vh); background: #fff; color: #1f2937; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 60px rgba(15,23,42,.28); z-index: 1500; display: flex; flex-direction: column; overflow: hidden; animation: np-in .16s ease; }
.notif-panel.hidden { display: none; }
@keyframes np-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.np-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; font-size: 15px; }
.np-actions { display: flex; gap: 4px; } .np-actions button, .np-tabs button { border: none; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--brand); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.np-actions button:hover:not(:disabled) { background: #f0fdfa; } .np-actions button:disabled { color: #9ca3af; cursor: default; }
.np-tabs { display: flex; gap: 6px; padding: 0 12px 8px; border-bottom: 1px solid var(--border); }
.np-tabs button { color: #64748b; padding: 5px 12px; } .np-tabs button.on { background: #f0fdfa; color: var(--brand); }
.np-list { overflow-y: auto; flex: 1; padding: 4px 8px 8px; }
.np-day { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; padding: 10px 8px 4px; }
.np-item { position: relative; display: flex; gap: 12px; padding: 10px 34px 10px 10px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.np-item:hover, .np-item:focus-visible { background: #f8fafc; outline: none; } .np-item.unread { background: #f0fdfa; } .np-item.unread:hover { background: #e6faf6; }
.np-ic, .pop-ic { flex: 0 0 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--pc, #64748b); background: color-mix(in srgb, var(--pc, #64748b) 14%, #fff); }
.np-ic svg, .pop-ic svg { width: 18px; height: 18px; }
.np-tx, .pop-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.np-tx b, .pop-tx b { font-size: 13px; font-weight: 700; line-height: 1.3; color: #111827; }
.np-tx small, .pop-tx small { font-size: 12.5px; color: #64748b; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.np-tx em { font-style: normal; font-size: 11.5px; color: #94a3b8; }
.np-dot { position: absolute; right: 12px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #ff5f6d, #e11d48); }
.np-x { position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; border: none; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer; opacity: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
.np-x svg { width: 12px; height: 12px; } .np-item:hover .np-x, .np-x:focus-visible { opacity: 1; } .np-item:hover .np-dot { opacity: 0; } .np-x:hover { background: #fee2e2; color: #dc2626; }
.np-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 40px 24px; color: #64748b; font-size: 12.5px; } .np-empty b { color: #111827; font-size: 14px; }
.np-empty-ic svg { width: 40px; height: 40px; color: #cbd5e1; }
.np-foot { border-top: 1px solid var(--border); padding: 10px 16px; font-size: 12.5px; color: #64748b; } .np-foot label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.toast.pop { position: relative; width: 340px; max-width: calc(100vw - 32px); padding: 12px 38px 14px 12px; gap: 11px; cursor: pointer; border-left: 4px solid var(--pc, var(--brand)); overflow: hidden; align-items: center; }
.toast.pop:hover { box-shadow: 0 16px 40px rgba(15,23,42,.22); } .toast.pop:focus-visible { outline: 2px solid var(--brand); }
.pop-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: none; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.pop-x svg { width: 12px; height: 12px; } .pop-x:hover { background: #f1f5f9; color: #1f2937; }
.pop-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--pc, var(--brand)); opacity: .55; transform-origin: left; animation: pop-count var(--pd, 6s) linear forwards; }
.toast.pop.paused .pop-bar { animation-play-state: paused; }
@keyframes pop-count { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* red gradient counters on sidebar items */
.nav-badge { top: 1px; right: 6px; background: linear-gradient(135deg, #ff5f6d, #e11d48) !important; color: #fff; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(225,29,72,.45); font-weight: 800; z-index: 2; }
.nav-badge.bump { animation: nb-pop .35s cubic-bezier(.3,1.6,.5,1); }
.sidebar.collapsed .nav-badge { right: 4px; top: 0; }
@media (max-width: 760px) { .notif-panel { position: fixed; top: 64px; right: 8px; left: 8px; width: auto; } }

/* ---- Settings > Storage, OneDrive tags ---- */
.od-tag { background: #e0f2fe; color: #0369a1; border-radius: 999px; padding: 0 7px; font-size: 10.5px; font-weight: 700; }
.em-files { display: flex; flex-wrap: wrap; gap: 6px; }
.em-file { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--text-primary); }
.em-file:hover { border-color: var(--brand); background: #f0fdfa; } .em-file svg { width: 13px; height: 13px; } .em-file small { color: var(--text-muted); }
.sg { padding: 4px 4px 24px; max-width: 900px; } .sg-card { padding: 20px 24px; margin-bottom: 16px; } .sg-card h3 { margin: 0; font-size: 16px; display: flex; gap: 10px; align-items: center; }
.sg-pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; } .sg-pill.ok { background: #dcfce7; color: #15803d; } .sg-pill.warn { background: #fef3c7; color: #92400e; } .sg-pill.off { background: #f1f5f9; color: #64748b; }
.sg-btns, .sg-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sg-dl { display: grid; grid-template-columns: 120px 1fr; gap: 14px 16px; margin: 18px 0 8px; align-items: start; } .sg-dl dt { color: var(--text-muted); font-weight: 600; font-size: 13px; padding-top: 8px; } .sg-dl dd { margin: 0; } .sg-dl dd small { display: block; margin-top: 4px; }
.sg-sw { display: inline-flex; gap: 10px; align-items: center; font-size: 13.5px; cursor: pointer; padding-top: 6px; }
.sg-stats { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; } .sg-stats > div { flex: 1; min-width: 160px; padding: 12px 14px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--border); } .sg-stats strong { display: block; font-size: 22px; } .sg-stats small { color: var(--text-muted); font-size: 12px; } .sg-stats .warn { background: #fffbeb; border-color: #fde68a; }
.sg-move { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; font-size: 13px; flex-wrap: wrap; }
.sg-steps { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.55; } details.sg-card summary { cursor: pointer; font-size: 14px; }
.badge.tag-dyn { background: hsl(var(--tg, 200) var(--ts, 75%) var(--tb, 92%)); border: 1px solid hsl(var(--tg, 200) 60% var(--tbd, 80%)); }

/* ---- File preview window (Files tab, email attachments) ---- */
.pv { display: flex; flex-direction: column; gap: 10px; }
.pv-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pv-tag { color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; border-radius: 6px; padding: 3px 7px; }
.pv-name { font-size: 14px; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-count { font-size: 12px; color: var(--text-muted); } .pv-sp { flex: 1; }
.pv-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; min-width: 34px; justify-content: center; border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 0 8px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; text-decoration: none; }
.pv-btn.txt { padding: 0 12px; } .pv-btn:hover:not(:disabled) { background: #f1f5f9; color: var(--text-primary); } .pv-btn:disabled { opacity: .4; cursor: default; } .pv-btn svg { width: 16px; height: 16px; }
.pv-stage { position: relative; height: min(70vh, 720px); border: 1px solid var(--border); border-radius: 10px; background: #f1f5f9; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pv-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.pv-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-muted); font-size: 13px; } .pv-loading.over { position: absolute; inset: 0; justify-content: center; background: rgba(241,245,249,.92); pointer-events: none; }
.pv-imgwrap { width: 100%; height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 12px; } .pv-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 6px 24px rgba(15,23,42,.18); background: #fff; }
.pv-text { width: 100%; height: 100%; margin: 0; padding: 18px 22px; overflow: auto; background: #fff; font: 13px/1.6 Consolas, "Courier New", monospace; white-space: pre-wrap; word-break: break-word; }
.pv-none { text-align: center; max-width: 440px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .pv-none p { margin: 0 0 8px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; } .pv-none-ic svg { width: 44px; height: 44px; color: #cbd5e1; }
.pv-open:hover { color: var(--brand); }
.modal-xl #pv-root { min-width: 0; }

/* ---- Settings > Stages: pipelines as side-by-side cards ---- */
.pps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 16px; align-items: start; max-height: min(66vh, 640px); overflow-y: auto; padding: 2px 4px 2px 2px; }
.pps-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 18px 8px; box-shadow: var(--shadow-sm); }
@media (max-width: 760px) { .pps-grid { grid-template-columns: 1fr; } }

/* ---- "+" in the Tags column of Contacts / Companies lists ---- */
.tagcell { display: flex; align-items: center; gap: 4px; min-height: 26px; }
.tagcell-list { display: inline-flex; flex-wrap: nowrap; align-items: center; min-width: 0; overflow: hidden; }
.tag-add { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 1px dashed #b6c2d0; background: transparent; color: #7b8aa0; font-size: 15px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 1px; opacity: .55; transition: all .12s; }
tr:hover .tag-add, .tag-add:focus-visible { opacity: 1; }
.tag-add:hover { background: var(--brand); border-color: var(--brand); border-style: solid; color: #fff; transform: scale(1.1); }
.tag-pop { position: fixed; z-index: 3000; width: 300px; max-width: calc(100vw - 16px); background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 44px rgba(15,23,42,.24); padding: 10px; animation: np-in .14s ease; }
.tag-pop .tagpick-menu { position: static; box-shadow: none; border: none; padding: 4px 0 0; max-height: 180px; }

.attachment-chip small { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.em-badge.recv { background: #e0f2fe; color: #0369a1; }
/* ---- long text never spills out of its box (names, tags, list names, custom fields …) ---- */
.detail-card, .modal-body, .dx-panel, .tk-main, .em-main, .page-container .mini-card { min-width: 0; overflow-wrap: anywhere; }
.badge, .fm-pill, .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.badge { white-space: nowrap; }
.tagcell-list { display: inline-flex; flex-wrap: wrap; gap: 4px 4px; min-width: 0; max-width: 100%; }
.tagcell-list .badge { margin-right: 0 !important; }
.tagcell { max-width: 100%; }
.dp-owner-line { flex-wrap: wrap; overflow-wrap: anywhere; }
.dp-last-modified, .dp-stats-line { overflow-wrap: anywhere; }
dl dd, .form-label, .tk-subj, .tk-desc { overflow-wrap: anywhere; }
td, th { overflow-wrap: anywhere; }
table.resizable-table td, table.resizable-table th { overflow-wrap: normal; }
/* Type-to-search dropdown (search-select.js) */
.ss-wrap { position: relative; width: 100%; }
.ss-wrap .ss-input { width: 100%; padding-right: 30px; text-overflow: ellipsis; }
.ss-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
.ss-clear:hover { background: var(--bg-elevated); color: var(--text); }
.ss-list { position: fixed; z-index: 2147483000; max-height: 260px; overflow-y: auto; background: var(--bg-elevated, #fff); border: 1px solid var(--border-strong, #cbd5e1); border-radius: 8px; box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: 4px; font-size: 13.5px; }
.ss-opt { padding: 8px 10px; border-radius: 6px; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--text); }
.ss-opt small { color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.ss-opt.on { background: rgba(13,148,136,.12); }
.ss-opt.cur { font-weight: 600; }
.ss-none { padding: 10px; color: var(--text-muted); }