/* ============================================================
   EVENTIPO — Locais CRM styles
   ============================================================ */
.crm { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; }

/* ---- list column ---- */
.crm-list {
  position: sticky; top: 0;
  display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100vh - var(--topbar-h) - 80px);
}
.crm-toolbar { display: flex; gap: 8px; }
.crm-search { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 12px; height: 38px; }
.crm-search:focus-within { border-color: var(--gold-line); }
.crm-search svg { color: var(--ink-4); flex-shrink: 0; }
.crm-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--ink); font-family: var(--sans); font-size: 13px; }
.crm-search input::placeholder { color: var(--ink-4); }
.crm-add { flex-shrink: 0; }
.crm-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-filters .ke-filter { padding: 5px 11px; font-size: 11.5px; }
.crm-count { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); padding: 0 2px; }

.crm-rows { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.crm-row {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 14px; cursor: pointer; transition: all .14s;
}
.crm-row:hover { border-color: var(--line-strong); background: var(--bg-raised); }
.crm-row[data-active="true"] { border-color: var(--gold-line); background: linear-gradient(90deg, var(--gold-glow), transparent); }
.crm-row-dot { width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0; }
.d-gold { background: var(--gold); } .d-pos { background: var(--pos); } .d-mut { background: var(--ink-4); }
.crm-row-name { font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-row-meta { font-size: 10.5px; color: var(--ink-3); }
.crm-row-rating { font-size: 11px; color: var(--gold); display: inline-flex; align-items: center; gap: 3px; }
.crm-row-cap { font-size: 10.5px; color: var(--ink-3); }
.crm-fav { display: flex; align-items: center; justify-content: center; color: var(--ink-4); cursor: pointer; padding: 4px; border-radius: 6px; transition: all .14s; flex-shrink: 0; }
.crm-fav:hover { color: var(--gold); background: var(--gold-glow); }
.crm-fav.on { color: var(--gold); }
.crm-fav-btn.on { color: var(--gold); border-color: var(--gold-line); }
.ke-fav[data-active="true"] { color: var(--gold); border-color: var(--gold-line); background: var(--gold-glow); }
.ke-fav { display: inline-flex; align-items: center; gap: 5px; }
.crm-empty-list { text-align: center; padding: 30px; color: var(--ink-4); font-size: 12px; }
.crm-reset { background: none; border: 0; color: var(--ink-4); font-family: var(--mono); font-size: 10.5px; cursor: pointer; padding: 6px; text-align: left; }
.crm-reset:hover { color: var(--gold); }

/* ---- detail column ---- */
.crm-detail { position: relative; background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 30px; min-height: 520px; }
.crm-flash { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 6px; background: oklch(0.74 0.07 155 / 0.16); border: 1px solid oklch(0.74 0.07 155 / 0.4); color: var(--pos); font-size: 12px; padding: 6px 12px; border-radius: 99px; z-index: 5; animation: riseIn .3s ease both; }

.crm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 460px; gap: 6px; }
.crm-empty-ic { width: 64px; height: 64px; border-radius: 16px; background: var(--bg-inset); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--gold); margin-bottom: 16px; }
.crm-empty h3 { font-size: 18px; color: var(--ink); font-weight: 500; }
.crm-empty p { font-size: 12px; color: var(--ink-4); margin-bottom: 18px; }

/* ---- detail (read) ---- */
.vd-top { display: flex; gap: 22px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.vd-top image-slot { flex-shrink: 0; border-radius: 14px; }
.vd-head { flex: 1; min-width: 0; }
.vd-name { font-size: 24px; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; text-wrap: pretty; }
.vd-sub { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.vd-sub span { display: inline-flex; align-items: center; gap: 5px; }
.vd-sub .sep { color: var(--line-strong); }
.vd-actions { display: flex; gap: 8px; margin-top: 16px; }
.vd-del { color: var(--neg); border-color: oklch(0.66 0.10 28 / 0.3); }
.vd-del:hover { background: oklch(0.66 0.10 28 / 0.12); color: var(--neg); }

.vd-section { padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.vd-section:last-child { border-bottom: 0; }
.vd-section-h { margin-bottom: 14px; }
.vd-row { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 7px 0; align-items: baseline; }
.vd-row-lab { font-size: 12.5px; color: var(--ink-3); }
.vd-row-val { font-size: 13.5px; color: var(--ink); text-wrap: pretty; }
.vd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vd-chip { font-size: 11.5px; color: var(--ink-2); background: var(--bg-inset); border: 1px solid var(--line); border-radius: 99px; padding: 4px 11px; }

/* Contacts CRM */
.ct-tier-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--ink-4); }
.ct-tier-dot.pill-pos { background: var(--pos); border: 0; }
.ct-tier-dot.pill-gold { background: var(--gold); border: 0; }
.ct-tier-dot.pill-info { background: var(--info); border: 0; }
.ct-avatar-lg { width: 84px; height: 84px; border-radius: 18px; flex-shrink: 0; background: var(--bg-inset); border: 1px solid var(--gold-line); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--gold); letter-spacing: 0.02em; }
.ct-history-banner { display: flex; align-items: center; gap: 14px; background: linear-gradient(180deg, var(--gold-glow), transparent), var(--bg-inset); border: 1px solid var(--gold-line); border-radius: var(--r-md); padding: 14px 18px; margin: 20px 0 4px; }
.ct-hist-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--bg-surface); border: 1px solid var(--gold-line); display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; }
.ct-hist-main { font-size: 15px; color: var(--ink); font-weight: 500; }
.ct-hist-sub { font-size: 11px; color: var(--ink-3); }
.ct-hist-bars { margin-left: auto; display: flex; gap: 4px; }
.ct-hist-bar { width: 10px; height: 22px; border-radius: 3px; background: var(--line-strong); }
.ct-hist-bar.on { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }

/* Accounts CRM */
.acc-ic { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; background: var(--bg-inset); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--gold); }
.acc-import-btn { width: 100%; justify-content: center; }

/* Speakers */
.sk-avatar { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; background: var(--bg-inset); border: 1px solid var(--gold-line); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--gold); letter-spacing: 0.02em; }
.sk-topic { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(180deg, var(--gold-glow), transparent), var(--bg-inset); border: 1px solid var(--gold-line); border-radius: var(--r-md); padding: 16px 18px; margin: 20px 0 4px; }
.sk-topic-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--bg-surface); border: 1px solid var(--gold-line); display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; }
.sk-topic-text { font-size: 16px; color: var(--ink); line-height: 1.35; text-wrap: pretty; }
.sk-events { display: flex; flex-direction: column; gap: 8px; }
.sk-event { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px; }
.sk-event svg { color: var(--pos); flex-shrink: 0; }
.pill-neg { color: var(--neg); border-color: oklch(0.66 0.10 28 / 0.35); background: oklch(0.66 0.10 28 / 0.1); }

/* advanced filter panel (Accounts + Contacts) */
.fl-toggle { display: inline-flex; align-items: center; gap: 5px; }
.fl-panel { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; animation: riseIn .18s ease both; }
.fl-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 120px; }
.fl-lab { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); font-family: var(--mono); }
.fl-sel { background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); font-size: 12.5px; padding: 8px 28px 8px 10px; outline: 0; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2380838c' fill='none' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; width: 100%; }
.fl-sel:focus { border-color: var(--gold-line); }
.fl-clear { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-3); font-size: 11px; padding: 8px 12px; cursor: pointer; height: 36px; }
.fl-clear:hover { color: var(--neg); border-color: oklch(0.58 0.18 28 / 0.4); }
.acc-avatar { width: 84px; height: 84px; border-radius: 18px; flex-shrink: 0; background: var(--bg-inset); border: 1px solid var(--gold-line); display: flex; align-items: center; justify-content: center; color: var(--gold); }
.acc-contacts { display: flex; flex-direction: column; gap: 8px; }
.acc-contact { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 14px; cursor: pointer; transition: all .14s; color: var(--ink-4); }
.acc-contact:hover { border-color: var(--gold-line); }
.acc-contact-name { font-size: 13.5px; color: var(--ink); }
.acc-contact-role { font-size: 11px; color: var(--ink-3); }

/* multi-select chips */
.mc { position: relative; }
.mc-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px; background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 34px 8px 10px; cursor: pointer; position: relative; }
.mc-chosen:hover { border-color: var(--line-strong); }
.mc-ph { color: var(--ink-4); font-size: 13px; }
.mc-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--gold-glow); border: 1px solid var(--gold-line); color: var(--gold); font-size: 11.5px; padding: 3px 8px; border-radius: 6px; }
.mc-chip .mc-x { color: var(--ink-3); font-size: 13px; }
.mc-chip:hover .mc-x { color: var(--neg); }
.mc-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-4); display: flex; }
.mc-pop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 240px; overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg); z-index: 20; padding: 4px; }
.mc-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; color: var(--ink-2); font-size: 12.5px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.mc-opt:hover { background: var(--bg-raised); color: var(--ink); }
.mc-opt[data-on="true"] { color: var(--gold); }
.mc-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: #1a1505; flex-shrink: 0; }
.mc-opt[data-on="true"] .mc-check { background: var(--gold); border-color: var(--gold); }

/* custom fields manager */
.cf-empty { font-size: 12px; color: var(--ink-4); text-align: center; padding: 16px; }
.cf-list { display: flex; flex-direction: column; gap: 10px; }
.cf-def { display: grid; grid-template-columns: 1fr 130px 30px; gap: 10px; align-items: center; }
.cf-label { background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; color: var(--ink); font-size: 13px; outline: 0; }
.cf-label:focus { border-color: var(--gold-line); }
.cf-type { background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-2); font-size: 12px; padding: 9px 8px; outline: 0; cursor: pointer; }
.cf-options { grid-column: 1 / -1; resize: vertical; font-size: 12px; }
.crm-cf-btn { background: none; border: 0; color: var(--ink-4); font-size: 10.5px; font-family: var(--mono); cursor: pointer; padding: 6px; display: inline-flex; align-items: center; gap: 5px; }
.crm-cf-btn:hover { color: var(--gold); }

/* Supplier workflow */
.sw-flow { display: flex; align-items: center; gap: 0; }
.sw-stage { display: flex; align-items: center; gap: 9px; background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; cursor: pointer; flex: 1; transition: all .14s; }
.sw-stage:hover { border-color: var(--line-strong); }
.sw-stage.done { border-color: oklch(0.74 0.07 155 / 0.4); background: oklch(0.74 0.07 155 / 0.08); }
.sw-stage.overdue { border-color: oklch(0.58 0.18 28 / 0.4); background: oklch(0.58 0.18 28 / 0.08); }
.sw-stage-ic { width: 24px; height: 24px; border-radius: 99px; background: var(--bg-surface); border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex-shrink: 0; }
.sw-stage.done .sw-stage-ic { background: var(--pos); border-color: var(--pos); color: #06140c; }
.sw-stage.overdue .sw-stage-ic { border-color: var(--neg); color: var(--neg); }
.sw-stage-lab { font-size: 12.5px; color: var(--ink); }
.sw-stage-st { font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); }
.sw-stage.done .sw-stage-st { color: var(--pos); }
.sw-stage.overdue .sw-stage-st { color: var(--neg); }
.sw-conn { width: 16px; height: 1.5px; background: var(--line-strong); flex-shrink: 0; }
.sw-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 680px) { .sw-flow { flex-direction: column; align-items: stretch; gap: 6px; } .sw-conn { display: none; } .sw-pay { grid-template-columns: 1fr; } }

.vd-fac { display: flex; flex-wrap: wrap; gap: 8px; }
.fac-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); }
.fac-chip.on { color: var(--ink); border-color: var(--gold-line); background: var(--gold-glow); }
.fac-chip.on svg { color: var(--gold); }
.fac-chip.off { color: var(--ink-4); }
.fac-x { font-family: var(--mono); }

.vd-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.vd-sw-h { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; }
.vd-sw-pos { color: var(--pos); } .vd-sw-neg { color: var(--neg); }
.vd-sw-i { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--ink-2); padding: 5px 0; }
.vd-sw-i svg { color: var(--pos); flex-shrink: 0; margin-top: 2px; }
.vd-sw-dash { color: var(--neg); flex-shrink: 0; }
.vd-none { font-size: 12px; }

.vd-hist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vd-hist > div { display: flex; flex-direction: column; gap: 5px; }
.vd-hist-n { font-size: 18px; color: var(--ink); }
.vd-hist-l { font-size: 11px; color: var(--ink-3); }
.vd-notes { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; background: var(--bg-inset); border: 1px solid var(--line-soft); border-left: 2px solid var(--gold); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 14px 16px; }

/* ---- form ---- */
.vform { display: flex; flex-direction: column; }
.vform-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.vform-title { font-size: 23px; color: var(--ink); font-weight: 500; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); outline: 0; padding: 4px 0; width: 100%; margin-top: 6px; font-family: var(--serif); }
.vform-title:focus { border-color: var(--gold); }
.vform-title::placeholder { color: var(--ink-4); }
.vform-section-h { margin: 22px 0 14px; }
.vform-section-h:first-of-type { margin-top: 0; }

.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld { display: flex; flex-direction: column; gap: 7px; }
.fld-wide { grid-column: 1 / -1; }
.fld-lab { font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; }
.fld-hint { font-style: normal; color: var(--ink-4); font-size: 10px; }
.fld-in { background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; color: var(--ink); font-family: var(--sans); font-size: 13.5px; outline: 0; transition: border-color .14s; width: 100%; }
.fld-in:focus { border-color: var(--gold-line); }
.fld-in::placeholder { color: var(--ink-4); }
select.fld-in { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2380838c' fill='none' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; }
.fld-area { resize: vertical; font-size: 13px; line-height: 1.5; min-height: 64px; }

.tgl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tgl { display: flex; align-items: center; gap: 10px; background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; cursor: pointer; transition: all .14s; }
.tgl:hover { border-color: var(--line-strong); }
.tgl[data-on="true"] { border-color: var(--gold-line); }
.tgl-track { width: 32px; height: 18px; border-radius: 99px; background: var(--bg-hover); border: 1px solid var(--line-strong); position: relative; flex-shrink: 0; transition: background .14s; }
.tgl[data-on="true"] .tgl-track { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border-color: var(--gold-bright); }
.tgl-knob { position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 99px; background: var(--ink-3); transition: transform .16s, background .14s; }
.tgl[data-on="true"] .tgl-knob { transform: translateX(14px); background: #1a1505; }
.tgl-lab { font-size: 12.5px; color: var(--ink-2); }
.tgl[data-on="true"] .tgl-lab { color: var(--ink); }

.vform-foot { display: flex; align-items: center; gap: 8px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }

@media (max-width: 1100px) {
  .crm { grid-template-columns: 1fr; }
  .crm-list { position: static; max-height: none; }
  .crm-rows { max-height: 340px; }
  .fgrid, .tgl-grid, .vd-sw { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .vd-top { flex-direction: column; }
  .fgrid, .tgl-grid, .vd-sw, .vd-hist { grid-template-columns: 1fr; }
  .vd-row { grid-template-columns: 1fr; gap: 2px; }
}