/* Edlink CRM — custom layer on top of Tailwind */

:root {
  --primary: #164FA2;
  --ink-100: #F1F3F6;
  --ink-150: #E7EAEF;
  --ink-300: #C2C7D0;
  --lime: #C9F07A;
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-feature-settings: 'cv11', 'ss01'; }
.font-display { font-feature-settings: normal; }
.tabular { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* containers that only take focus so keyboard users land inside them (drawers, popovers) show no ring */
.focus-quiet:focus, .focus-quiet:focus-visible { outline: none; }

/* Thin, quiet scrollbars */
.nice-scroll { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
.nice-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.nice-scroll::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 99px; }
.nice-scroll::-webkit-scrollbar-track { background: transparent; }

/* Hatched fill — used for "target" and "remaining" values in charts */
.hatch {
  background-image: repeating-linear-gradient(-45deg, rgba(18, 21, 27, .16) 0 1.5px, transparent 1.5px 6px);
  background-color: var(--ink-100);
}
.hatch-light {
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .22) 0 1.5px, transparent 1.5px 6px);
}

/* Bar chart grow-in */
.bar-grow { transform-origin: bottom; animation: grow .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.bar-grow-x { transform-origin: left; animation: growx .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Chart tooltip (pure CSS) */
.chart-col .chart-tip { opacity: 0; transform: translate(-50%, 4px); transition: .15s ease; pointer-events: none; }
.chart-col:hover .chart-tip { opacity: 1; transform: translate(-50%, 0); }
/* edge bars: anchor the tooltip to the bar side so it never leaves the screen */
.chart-col .chart-tip.tip-start { left: 0; transform: translate(0, 4px); }
.chart-col .chart-tip.tip-end { left: auto; right: 0; transform: translate(0, 4px); }
.chart-col:hover .chart-tip.tip-start, .chart-col:hover .chart-tip.tip-end { transform: translate(0, 0); }
.chart-col:hover .chart-bar { filter: brightness(1.15); }

/* Toasts */
.toast-in { animation: toastIn .25s ease-out both; }
.toast-out { animation: toastOut .25s ease-in both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

/* Modal */
.modal { opacity: 0; transition: opacity .2s ease; }
.modal.is-open { opacity: 1; }
.modal .modal-panel { transform: translateY(12px) scale(.985); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.modal.is-open .modal-panel { transform: none; }

/* Native select, restyled */
.select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236C7280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}

/* Kanban drag & drop */
.lead-card { cursor: grab; }
.lead-card:active { cursor: grabbing; }
.lead-card.is-dragging { opacity: .35; }
.kanban-col.is-over .kanban-drop { background: #EBF1FA; outline: 1.5px dashed #7FA3DA; outline-offset: -1.5px; }
.kanban-col.is-locked .kanban-drop { background: #FBE9E7; outline: 1.5px dashed #E8A49E; outline-offset: -1.5px; }

/* Main sidebar: full (240px) or icon rail (72px). Width lives in a CSS variable so the
   page content and fixed bars follow it. Rail rules only apply on desktop. */
:root { --sb: 240px; --fs: 288px; }
html.sb-collapsed { --sb: 72px; }
html.fs-collapsed { --fs: 72px; }
html.no-anim *, html.no-anim *::before, html.no-anim *::after { transition: none !important; }
.ms-only { display: none !important; }
@media (min-width: 1024px) {
  .app-main { padding-left: var(--sb); transition: padding-left .22s cubic-bezier(.2, .8, .2, 1); }
  .bulk-offset { padding-left: calc(var(--sb) + var(--fs)); }
  #sidebar { transition: width .22s cubic-bezier(.2, .8, .2, 1); }
  html.sb-collapsed #sidebar:not(.is-peek) { width: 72px; }
  html.sb-collapsed #sidebar:not(.is-peek) .ms-label { display: none !important; }
  html.sb-collapsed #sidebar:not(.is-peek) .ms-only { display: flex !important; }
  html.sb-collapsed #sidebar:not(.is-peek) .ms-head { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sb-collapsed #sidebar:not(.is-peek) .ms-nav { padding-left: 12px; padding-right: 12px; }
  html.sb-collapsed #sidebar:not(.is-peek) .ms-nav a { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sb-collapsed #sidebar:not(.is-peek) .ms-foot { padding-left: 12px; padding-right: 12px; }
  html.sb-collapsed #sidebar:not(.is-peek) .ms-profile { justify-content: center; padding: 0; }
  /* hover "peek": the collapsed rail opens over the page (content keeps its 72px offset) */
  html.sb-collapsed #sidebar.is-peek { width: 240px; }
  html.sb-collapsed #sidebar.is-peek .ms-label { animation: peek-in .2s ease .06s both; }
}
@keyframes peek-in { from { opacity: 0; } to { opacity: 1; } }

/* Filter sidebar (Contact & Lead): collapsible to a 72px icon rail on desktop.
   In the rail every control is a 36px square and they sit on one 8px rhythm;
   each group (top / filters / actions) gets the same 16px padding. */
.fs-rail { display: none !important; }
/* sidebar illustration: only when there's room under the filters */
@media (max-height: 759px) { .fs-art { display: none !important; } }
@media (min-width: 1024px) {
  .fside { transition: width .25s cubic-bezier(.2, .8, .2, 1); }
  html.fs-collapsed .fside { width: 72px; }
  html.fs-collapsed .fside .fs-label { display: none !important; }
  html.fs-collapsed .fside .fs-rail { display: flex !important; }

  /* groups */
  html.fs-collapsed .fside .fs-pad,
  html.fs-collapsed .fside .fs-scroll,
  html.fs-collapsed .fside .fs-actions-wrap,
  html.fs-collapsed .fside > .fs-actions { padding: 16px 0 !important; }
  html.fs-collapsed .fside .fs-head { flex-direction: column; align-items: center; gap: 8px; }
  html.fs-collapsed .fside [data-side-search] { margin-top: 8px; }

  /* filter rows: the row itself becomes the 36px square */
  html.fs-collapsed .fside #filter-rows > li + li { margin-top: 8px !important; }
  html.fs-collapsed .fside [data-facet],
  html.fs-collapsed .fside .fs-row {
    width: 36px; height: 36px; padding: 0; margin-left: auto; margin-right: auto;
    justify-content: center; border-radius: 8px; background: transparent !important;
  }
  html.fs-collapsed .fside .fs-divider { width: 36px; margin: 8px auto; }
  html.fs-collapsed .fside [data-facet]:hover > span:first-child { color: #12151B; box-shadow: inset 0 0 0 1px #959BA8; }
  html.fs-collapsed .fside [data-facet][aria-expanded="true"] { box-shadow: none; }
  html.fs-collapsed .fside [data-facet][aria-expanded="true"] > span:first-child { color: #12151B; box-shadow: inset 0 0 0 1.5px #12151B; }

  /* bottom actions */
  html.fs-collapsed .fside .fs-actions,
  html.fs-collapsed .fside .fs-actions-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  html.fs-collapsed .fside .fs-actions-wrap > * + * { margin-top: 0 !important; }
  html.fs-collapsed .fside .fs-actions-wrap .fs-actions { padding: 0 !important; }
  html.fs-collapsed .fside .fs-actions button,
  html.fs-collapsed .fside .fs-actions-wrap > button {
    width: 36px; height: 36px; padding: 0; margin: 0;
    border: 0; border-radius: 8px; background: #E7EAEF; color: #505664; /* ink-150, same as the expanded buttons */
    box-shadow: none;
  }
  /* quick actions placed in the sidebar header keep the 8px rhythm; the primary one stays primary */
  html.fs-collapsed .fside .fs-pad .fs-actions { margin-top: 8px; }
  html.fs-collapsed .fside .fs-actions button.fs-primary { background: #164FA2; color: #fff; box-shadow: none; }
  html.fs-collapsed .fside .fs-actions button:hover,
  html.fs-collapsed .fside .fs-actions-wrap > button:hover { color: #12151B; background: #DCE0E6; }
  html.fs-collapsed .fside .fs-actions button.fs-primary:hover { background: #2C64B3; color: #fff; }
}

/* Rail tooltip (shown to the right of a control) */
.rail-tip {
  position: fixed; z-index: 90; pointer-events: none;
  padding: 7px 10px; border-radius: 8px; background: #12151B; color: #fff;
  font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: nowrap;
  opacity: 0; transform: translate(-4px, -50%); transition: opacity .12s ease, transform .12s ease;
}
.rail-tip.is-on { opacity: 1; transform: translate(0, -50%); }
.rail-tip::before {
  content: ''; position: absolute; left: -4px; top: 50%; width: 8px; height: 8px;
  background: inherit; border-radius: 1px; transform: translateY(-50%) rotate(45deg);
}
/* same tooltip, opening below its trigger ([data-hint]) */
.rail-tip.is-below { transform: translate(-50%, -4px); text-align: center; }
.rail-tip.is-below.is-on { transform: translate(-50%, 0); }
.rail-tip.is-below::before { left: var(--arrow-x, 50%); top: -4px; transform: translateX(-50%) rotate(45deg); }
.rail-tip small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: #959BA8; }

/* Hide the native horizontal scrollbar where a custom slider drives the scroll */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Swiper — keep it quiet */
/* Bleed to the card edges (card padding is 20px / 24px) so the next slide peeks from the edge.
   Set here because Swiper's own CSS forces margin-left/right: auto on .swiper. */
.branch-swiper { overflow: hidden; margin-left: -20px !important; margin-right: -20px !important; }
@media (min-width: 640px) { .branch-swiper { margin-left: -24px !important; margin-right: -24px !important; } }
.branch-swiper .swiper-slide { height: auto; }
.swiper-nav-btn.swiper-button-disabled { opacity: .35; pointer-events: none; }
.bp-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 99px; background: #C2C7D0; cursor: pointer; transition: width .25s ease, background-color .25s ease; }
.bp-dot:hover { background: #959BA8; }
.bp-dot.is-active { width: 20px; background: #12151B; }

/* Sticky table header — sits right under the 56px topbar.
   Bottom line is an inset 1px rule (borders don't stick with border-collapse). */
.sticky-head th {
  position: sticky; top: 56px; z-index: 10;
  background: #F8F9FB;
  box-shadow: inset 0 -1px 0 #DCE0E6;
}

/* Inside its own scroll container (e.g. Lead list view) the header sticks to the top of that container */
.sticky-head.in-scroll th { top: 0; }

/* "Fit" mode: the table always matches its container (no horizontal scroll),
   so the sticky header keeps working. Long text is truncated with an ellipsis. */
#table-wrap.fit table { table-layout: fixed; min-width: 0; }
#table-wrap.fit td { overflow: hidden; }
#table-wrap.fit td p { overflow: hidden; text-overflow: ellipsis; }
#table-wrap.fit td .flex > * { min-width: 0; }

/* Event list: on desktop the table fits its container so the sticky header works */
@media (min-width: 1024px) {
  #list td { overflow: hidden; }
  #list td p { overflow: hidden; text-overflow: ellipsis; }
  #list td .flex > * { min-width: 0; }
}

/* Table row hover */
.data-row { transition: background-color .12s ease; }
.data-row:hover { background: #F8F9FB; }

/* Checkbox */
.check { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 5px; background: #fff; outline: 1.5px solid var(--ink-300); outline-offset: -1.5px; display: inline-grid; place-content: center; cursor: pointer; }
.check:checked { background: var(--primary); outline-color: var(--primary); }
.check:checked::after { content: ''; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.check:indeterminate { background: var(--primary); outline-color: var(--primary); }
.check:indeterminate::after { content: ''; width: 8px; height: 2px; background: #fff; border-radius: 2px; }

/* Toggle switch */
.switch { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; border-radius: 99px; background: var(--ink-300); position: relative; cursor: pointer; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 99px; background: #fff; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.switch:checked { background: var(--primary); }
.switch:checked::after { transform: translateX(14px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Branch map (Leaflet) — flat, borderless, no shadows ---------- */
.leaflet-container { font-family: inherit; background: #F1F3F6; }
.leaflet-bar { border: 1px solid #DCE0E6 !important; border-radius: 10px !important; box-shadow: none !important; overflow: hidden; }
.leaflet-bar a { width: 32px !important; height: 32px !important; line-height: 30px !important; color: #2A2F38 !important; border-bottom-color: #E6E9EE !important; }
.leaflet-bar a:hover { background: #F1F3F6 !important; }
.leaflet-control-attribution { font-size: 10.5px; color: #6B7280; background: rgba(255,255,255,.85) !important; border-radius: 6px 0 0 0; }
.leaflet-control-attribution a { color: #4A5160; }
.leaflet-tooltip.map-tip { padding: 9px 11px; border: 0; border-radius: 8px; background: #12151B; color: #fff; box-shadow: none; line-height: 1.35; }
.leaflet-tooltip.map-tip::before { border-top-color: #12151B; }
.leaflet-interactive:focus { outline: none; }
.branch-pin { display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 9px;
  background: #12151B; color: #fff; outline: 2.5px solid #fff; transition: transform .15s ease, background .15s ease; }
.branch-pin:hover { transform: scale(1.08); }
.branch-pin.is-dim { background: #959BA8; }
.branch-pin.is-selected { background: #164FA2; transform: scale(1.15); }
.branch-pin.is-legend { width: 18px; height: 18px; border-radius: 5px; outline: 0; }
.map-gray .leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.04); }

/* ---------- Guided tour (js/tour.js): scrim with a spotlight hole, white ring, step card ---------- */
.tour { position: fixed; inset: 0; z-index: 95; opacity: 0; transition: opacity .18s ease; }
.tour.is-on { opacity: 1; }
.tour-shade { position: absolute; inset: 0; }
.tour-hole { transition: x .3s cubic-bezier(.2,.8,.2,1), y .3s cubic-bezier(.2,.8,.2,1), width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1); }
.tour-ring { position: absolute; border: 2px solid #fff; border-radius: 12px; pointer-events: none;
  transition: left .3s cubic-bezier(.2,.8,.2,1), top .3s cubic-bezier(.2,.8,.2,1), width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.tour-card { position: absolute; width: min(340px, calc(100vw - 24px)); padding: 16px 20px 18px; opacity: 0; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, left .3s cubic-bezier(.2,.8,.2,1), top .3s cubic-bezier(.2,.8,.2,1); }
.tour-card.is-in { opacity: 1; transform: none; }
.tour-arrow { position: absolute; width: 12px; height: 12px; background: #fff; border: 1px solid #DCE0E6; transform: translate(-50%, -50%) rotate(45deg); }
.tour-arrow[data-side="bottom"] { top: 0; border-right-color: transparent; border-bottom-color: transparent; }
.tour-arrow[data-side="top"] { top: 100%; border-left-color: transparent; border-top-color: transparent; }
.tour-arrow[data-side="right"] { left: 0; border-top-color: transparent; border-right-color: transparent; }
.tour-arrow[data-side="left"] { left: 100%; border-bottom-color: transparent; border-left-color: transparent; }
.tour.no-motion, .tour.no-motion * { transition: none !important; }

/* ---------- Mobile type scale (< 640px) ----------
   Small desktop sizes are hard to read on a phone, so each step moves up one notch.
   Inputs use 16px so iOS Safari does not zoom in when a field is tapped. */
@media (max-width: 639px) {
  .text-2xs, .text-\[10\.5px\], .text-\[11px\], .text-\[11\.5px\] { font-size: 12px; line-height: 16px; }
  .text-\[12px\], .text-\[12\.5px\], .auth-label { font-size: 13px; }
  .chart-axis { font-size: 11px; letter-spacing: -.01em; } /* 12 month labels must still fit side by side */
  .text-\[13px\], .text-\[13\.5px\] { font-size: 14px; }
  .text-\[14px\], .text-\[14\.5px\] { font-size: 15px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}