/* LIT CRM - Base styles (Phase 1 Foundation)
   Lightweight, framework-free CSS.
*/

:root{
  --primary: #2bb59b;
  --primary-dark: #1f9d86;
  --primary-soft: rgba(43,181,155,.12);
  --accent: #6f63ff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: rgba(17,24,39,.10);
  --shadow: 0 10px 30px rgba(17,24,39,.08);
  --shadow-soft: 0 8px 18px rgba(17,24,39,.06);
  --radius: 14px;
  --bg: #f5f7fb;
  --white: #ffffff;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: #fff;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Short ID link (sale/employee IDs) */
.id-link{
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
}

img{ max-width: 100%; height: auto; }

button, input, select{
  font: inherit;
}

.btn{
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .05s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: var(--primary);
  color: #fff;
  box-shadow: 0 14px 28px rgba(43,181,155,.25);
}
.btn-primary:hover{ background: var(--primary-dark); }

/* Destructive button (used in modals / admin actions) */
.btn-danger{
  background: rgba(239, 68, 68, 1);
  color: #fff;
  box-shadow: 0 14px 28px rgba(239, 68, 68, .18);
}
.btn-danger:hover{ background: rgba(220, 38, 38, 1); }

.btn-ghost{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-secondary{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

/* Small button variant (used for table row actions) */
.btn-sm{
  padding: .38rem .65rem;
  font-size: .78rem;
  border-radius: 10px;
}

/* Simple tab buttons (pipeline bucket tabs) */
.tabbar{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.btn-tab{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-tab.active{
  background: rgba(43,181,155,.12);
  border-color: rgba(43,181,155,.35);
  color: var(--primary-dark);
}


.badge{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .55rem;
  font-size: .75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(255,255,255,.8);
}

/* Warning badge (used for Agent Mismatch indicators) */
.badge-warn{
  border-color: rgba(234, 179, 8, .55);
  color: rgba(146, 64, 14, 1);
  background: rgba(254, 243, 199, .92);
}

/* Success badge */
.badge-success{
  border-color: rgba(34, 197, 94, .45);
  color: rgba(21, 128, 61, 1);
  background: rgba(220, 252, 231, .92);
}

/* Danger badge */
.badge-danger{
  border-color: rgba(239, 68, 68, .45);
  color: rgba(153, 27, 27, 1);
  background: rgba(254, 226, 226, .92);
}

.card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.input{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .9rem 1rem;
  background: rgba(249, 250, 251, 1);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.input:focus{
  border-color: rgba(43,181,155,.6);
  box-shadow: 0 0 0 5px rgba(43,181,155,.12);
}

.small{ font-size: .9rem; }
.muted{ color: var(--muted); }

.hr{
  height: 1px;
  background: var(--border);
  border: none;
  margin: 0;
}

.toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  background: rgba(17,24,39,.92);
  color: #fff;
  padding: .8rem 1rem;
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: none;
  max-width: min(420px, calc(100vw - 36px));
}
.toast.show{ display: block; }

/* Simple alerts (shared across pages) */
.alert{
  padding: .85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(239,68,68,.28);
  background: rgba(239,68,68,.10);
  color: rgba(239,68,68,1);
}
.alert-success{
  border-color: rgba(16,185,129,.25);
  background: rgba(16,185,129,.10);
  color: rgba(16,185,129,1);
}
.alert-warning{
  border-color: rgba(245,158,11,.28);
  background: rgba(245,158,11,.10);
  color: rgba(180,83,9,1);
}

/* Back-compat alias used by a few pages */
.login-error{
  padding: .85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(239,68,68,.28);
  background: rgba(239,68,68,.10);
  color: rgba(239,68,68,1);
}

/* Reusable modal component */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.modal.show{ display: flex; }
.modal-overlay{
  position: absolute;
  inset: 0;
  background: rgba(17,24,39,.55);
  backdrop-filter: blur(3px);
}
.modal-dialog{
  position: relative;
  z-index: 1;
  width: min(720px, calc(100vw - 40px));
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 26px 80px rgba(17,24,39,.22);
  border: 1px solid rgba(17,24,39,.10);
  padding: 18px;
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}


/* Sale maturity / aging visual indicators */
.sale-age-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.sale-age-toggle{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:.88rem; font-weight:700; }
.sale-age-toggle input{ width:18px; height:18px; }
.sale-age-legend{ display:flex; flex-wrap:wrap; gap:8px; }
.sale-age-legend-card{ margin-top:10px; padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.92); }
.sale-age-legend-card.is-collapsed{ display:none; }
.sale-age-legend-toggle{ display:inline-flex; align-items:center; gap:8px; padding:.42rem .72rem; border:1px solid var(--border); border-radius:999px; background:#fff; color:#475569; font-size:.84rem; font-weight:700; cursor:pointer; }
.sale-age-legend-toggle::after{ content:'▾'; font-size:.8rem; opacity:.72; }
.sale-age-legend-toggle.is-open::after{ content:'▴'; }
.sale-age-legend-chip{ display:inline-flex; align-items:center; gap:6px; padding:.28rem .55rem; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.92); font-size:.74rem; color:#475569; }
.sale-age-swatch{ width:10px; height:10px; border-radius:999px; display:inline-block; border:1px solid rgba(15,23,42,.08); background:#e5e7eb; }
.sale-age-swatch--neutral{ background:#e5e7eb; }
.sale-age-swatch--amber{ background:#fde7b3; }
.sale-age-swatch--peach{ background:#ffd7c2; }
.sale-age-swatch--coral{ background:#f8b8ab; }
.sale-age-swatch--rose{ background:#efb6c3; }
.sale-age-swatch--critical{ background:#e9a3a3; }
.sale-age-days-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; padding:.18rem .45rem; border-radius:999px; border:1px solid rgba(148,163,184,.28); background:rgba(241,245,249,.96); color:#475569; font-size:.72rem; font-weight:800; line-height:1; }
.sale-age-days-badge--amber{ background:#fff3d6; border-color:#f4d58d; color:#9a6700; }
.sale-age-days-badge--peach{ background:#ffe6db; border-color:#f5c6b0; color:#9a3412; }
.sale-age-days-badge--coral{ background:#ffd8cf; border-color:#f0a79a; color:#9f1239; }
.sale-age-days-badge--rose{ background:#f8d4dc; border-color:#e5a9b7; color:#9d174d; }
.sale-age-days-badge--critical{ background:#f8d1d1; border-color:#e8aaaa; color:#991b1b; }
.sale-age-row{ transition: background .15s ease, box-shadow .15s ease; }
.sale-age-row--amber > td{ background:rgba(253,231,179,.46); }
.sale-age-row--peach > td{ background:rgba(255,215,194,.52); }
.sale-age-row--coral > td{ background:rgba(248,184,171,.44); }
.sale-age-row--rose > td{ background:rgba(239,182,195,.42); }
.sale-age-row--critical > td{ background:rgba(233,163,163,.46); }
.sale-aging-disabled .sale-age-row--amber > td,
.sale-aging-disabled .sale-age-row--peach > td,
.sale-aging-disabled .sale-age-row--coral > td,
.sale-aging-disabled .sale-age-row--rose > td,
.sale-aging-disabled .sale-age-row--critical > td{ background:transparent; }
.sale-aging-disabled .sale-age-swatch--amber,
.sale-aging-disabled .sale-age-swatch--peach,
.sale-aging-disabled .sale-age-swatch--coral,
.sale-aging-disabled .sale-age-swatch--rose,
.sale-aging-disabled .sale-age-swatch--critical{ background:#e5e7eb; }
.sale-age-card{ transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.sale-age-card--amber{ background:rgba(253,231,179,.28); border-color:rgba(244,213,141,.8); }
.sale-age-card--peach{ background:rgba(255,215,194,.32); border-color:rgba(245,198,176,.78); }
.sale-age-card--coral{ background:rgba(248,184,171,.28); border-color:rgba(240,167,154,.8); }
.sale-age-card--rose{ background:rgba(239,182,195,.30); border-color:rgba(229,169,183,.85); }
.sale-age-card--critical{ background:rgba(233,163,163,.28); border-color:rgba(232,170,170,.88); }
.sale-aging-disabled .sale-age-card--amber,
.sale-aging-disabled .sale-age-card--peach,
.sale-aging-disabled .sale-age-card--coral,
.sale-aging-disabled .sale-age-card--rose,
.sale-aging-disabled .sale-age-card--critical{ background:#f8fafc; border-color:#e2e8f0; }
.sale-id-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; }


.sale-age-days-badge[data-tooltip]{ cursor:help; }
.sale-age-days-badge[data-tooltip]::before,
.sale-age-days-badge[data-tooltip]::after{ content:none !important; }
.litcrm-floating-tooltip{
  position:fixed;
  left:-9999px;
  top:-9999px;
  z-index:99999;
  pointer-events:none;
  white-space:nowrap;
  max-width:min(280px, calc(100vw - 16px));
  overflow:hidden;
  text-overflow:ellipsis;
  background:rgba(15,23,42,.96);
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  line-height:1.2;
  padding:.42rem .55rem;
  border-radius:8px;
  box-shadow:0 10px 24px rgba(15,23,42,.24);
}
.litcrm-floating-tooltip::after{
  content:'';
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
}
.litcrm-floating-tooltip[data-placement='top']::after{
  top:100%;
  border-top-color:rgba(15,23,42,.96);
}
.litcrm-floating-tooltip[data-placement='bottom']::after{
  bottom:100%;
  border-bottom-color:rgba(15,23,42,.96);
}

.edit-workspace-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.edit-workspace-title{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 6px 0; }
.edit-mode-badge{ display:inline-flex; align-items:center; gap:6px; padding:.32rem .7rem; border-radius:999px; border:1px solid rgba(59,130,246,.18); background:rgba(219,234,254,.72); color:#1d4ed8; font-size:.76rem; font-weight:800; letter-spacing:.01em; }
.edit-mode-panel{ border-color:rgba(59,130,246,.14); box-shadow:0 14px 40px rgba(15,23,42,.06); }
.edit-mode-panel .panel-header{ background:linear-gradient(180deg, rgba(239,246,255,.88), rgba(255,255,255,.95)); border-bottom:1px solid rgba(191,219,254,.7); }
.edit-mode-note{ color:#64748b; font-size:.84rem; }

@media (max-width: 900px){
  .edit-workspace-header{ flex-direction:column; align-items:stretch; }
}


.litcrm-compliance-dialog{ max-width: 760px; }
.litcrm-compliance-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.litcrm-compliance-kicker{ font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#0f766e; }
.litcrm-compliance-title{ margin:.25rem 0 0; font-size:1.35rem; color:#0f172a; }
.litcrm-compliance-message{ padding:.95rem 1rem; border-radius:14px; border:1px solid rgba(245,158,11,.28); background:rgba(254,243,199,.52); color:#92400e; font-weight:700; }
.litcrm-compliance-meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:14px; }
.litcrm-compliance-meta > div{ padding:.8rem .9rem; border-radius:12px; border:1px solid rgba(148,163,184,.22); background:#f8fafc; color:#334155; }
.litcrm-compliance-section{ margin-top:16px; }
.litcrm-compliance-section-title{ font-size:.86rem; font-weight:800; color:#0f172a; margin-bottom:8px; }
.litcrm-compliance-list{ margin:0; padding-left:1.2rem; color:#334155; }
.litcrm-compliance-list li + li{ margin-top:6px; }
.litcrm-compliance-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
body.litcrm-compliance-open{ overflow:hidden; }


.litcrm-notification-btn{ position:relative; }
.litcrm-icon-badge{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#dc2626; color:#fff; font-size:.68rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(220,38,38,.28); }
.litcrm-training-panel{ position:fixed; top:86px; right:20px; width:min(380px, calc(100vw - 24px)); max-height:calc(100vh - 120px); overflow:auto; z-index:90; background:#fff; border:1px solid rgba(148,163,184,.22); border-radius:20px; box-shadow:0 24px 60px rgba(15,23,42,.22); padding:16px; }
.litcrm-training-panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.litcrm-training-panel-kicker{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#0f766e; }
.litcrm-training-panel-head h3{ margin:.15rem 0 0; font-size:1.08rem; }
.litcrm-training-panel-summary{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px; }
.litcrm-training-summary-pill{ border-radius:14px; background:#f8fafc; border:1px solid rgba(148,163,184,.18); padding:10px 12px; display:flex; flex-direction:column; gap:4px; }
.litcrm-training-summary-pill span{ font-size:.72rem; color:#64748b; font-weight:700; }
.litcrm-training-summary-pill strong{ font-size:1.1rem; color:#0f172a; }
.litcrm-training-panel-list{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.litcrm-training-panel-empty{ color:#64748b; padding:16px 6px; }
.litcrm-training-notice{ display:block; text-decoration:none; color:inherit; border:1px solid rgba(148,163,184,.18); border-radius:16px; background:#fff; padding:12px 13px; box-shadow:0 10px 22px rgba(15,23,42,.05); }
.litcrm-training-notice.is-unread{ border-color:rgba(20,184,166,.28); background:rgba(240,253,250,.8); }
.litcrm-training-notice-title{ font-weight:800; color:#0f172a; }
.litcrm-training-notice-copy{ margin-top:4px; color:#334155; font-size:.9rem; }
.litcrm-training-notice-meta{ display:flex; justify-content:space-between; gap:8px; margin-top:8px; color:#64748b; font-size:.74rem; }
.litcrm-training-panel-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.litcrm-training-banner{ margin:14px 0 0; border-radius:18px; background:linear-gradient(135deg, rgba(20,184,166,.12), rgba(59,130,246,.08)); border:1px solid rgba(20,184,166,.22); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.litcrm-training-banner-copy{ display:flex; flex-direction:column; gap:4px; color:#0f172a; }
.litcrm-training-banner-copy span{ color:#334155; font-size:.92rem; }
.litcrm-training-banner-actions{ display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width: 720px){
  .litcrm-training-panel{ right:12px; left:12px; width:auto; top:74px; }
  .litcrm-training-banner{ flex-direction:column; align-items:flex-start; }
}

.litcrm-training-banner.is-warning{ background:linear-gradient(135deg, rgba(250,204,21,.16), rgba(245,158,11,.10)); border-color:rgba(245,158,11,.26); }
.litcrm-training-banner.is-danger{ background:linear-gradient(135deg, rgba(248,113,113,.14), rgba(239,68,68,.08)); border-color:rgba(239,68,68,.24); }