/* ==========================================================================
   SetuCRM UI styles
   Loaded after styles.css. Everything is scoped by attributes on <html>:
     data-ui-style = classic | kommo | compact
     data-ui-board = plain | navy | ocean | field | sunset   (pipeline board)
     data-bs-theme = light | dark                            (existing switch)
   "classic" adds nothing, so the original look is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. UI Style picker (all styles)
   -------------------------------------------------------------------------- */
.sui-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: .5rem; }
.sui-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 767.98px) { .sui-styles { grid-template-columns: 1fr; } }
.sui-style-card { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: .6rem; border: 2px solid var(--bs-border-color); border-radius: .6rem; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sui-style-card:hover { border-color: rgba(var(--bs-primary-rgb), .45); }
.sui-style-card.is-selected { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .15); }
.sui-style-card input, .sui-board input { position: absolute; opacity: 0; pointer-events: none; }
.sui-style-name { font-weight: 700; color: var(--bs-heading-color); }
.sui-style-desc { font-size: .76rem; line-height: 1.35; color: var(--bs-secondary-color); }
.sui-hint { font-size: .78rem; color: var(--bs-secondary-color); }

/* mini previews */
.sui-preview { display: flex; height: 84px; border-radius: .4rem; overflow: hidden; border: 1px solid var(--bs-border-color); background: #fff; }
.sui-pv-rail { width: 18px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 8px; background: #fff; border-right: 1px solid #eee; }
.sui-pv-rail i { width: 8px; height: 8px; border-radius: 2px; background: #c9c8f0; }
.sui-pv-main { flex: 1; display: flex; flex-direction: column; background: #fdfdff; }
.sui-pv-top { height: 14px; border-bottom: 1px solid #eee; background: #fff; }
.sui-pv-cols { flex: 1; display: flex; gap: 4px; padding: 5px; }
.sui-pv-col { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 3px; border-radius: 4px; background: #fff; border: 1px solid #eee; }
.sui-pv-col b { height: 4px; border-radius: 2px; background: #5955d1; opacity: .7; }
.sui-pv-col em { height: 12px; border-radius: 3px; background: #f1f0ff; border: 1px solid #e3e2fa; }
.sui-preview-kommo .sui-pv-rail { background: #0f2a43; border: 0; }
.sui-preview-kommo .sui-pv-rail i { background: #5d7d9c; }
.sui-preview-kommo .sui-pv-rail i:first-child { background: #fff; }
.sui-preview-kommo .sui-pv-main { background: #eef2f5; }
.sui-preview-kommo .sui-pv-top { height: 10px; }
.sui-preview-kommo .sui-pv-col { background: transparent; border: 0; padding: 0; }
.sui-preview-kommo .sui-pv-col b { height: 3px; border-radius: 0; opacity: 1; background: #98cbff; }
.sui-preview-kommo .sui-pv-col:nth-child(2) b { background: #fff4a3; }
.sui-preview-kommo .sui-pv-col:nth-child(3) b { background: #ffc4c4; }
.sui-preview-kommo .sui-pv-col em { background: #fff; border: 0; border-radius: 2px; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.sui-preview-compact .sui-pv-cols { gap: 2px; padding: 3px; }
.sui-preview-compact .sui-pv-col { padding: 2px; gap: 2px; }
.sui-preview-compact .sui-pv-col em { height: 8px; }

.sui-boards { display: flex; flex-wrap: wrap; gap: .6rem; }
.sui-board { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; cursor: pointer; }
.sui-board-swatch { width: 74px; height: 44px; border-radius: .4rem; border: 2px solid var(--bs-border-color); }
.sui-board.is-selected .sui-board-swatch { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .15); }
.sui-board-name { font-size: .72rem; color: var(--bs-secondary-color); }
.sui-board-plain  { background: var(--bs-secondary-bg); }
.sui-board-navy   { background: linear-gradient(160deg, #0f2742, #1d4a78); }
.sui-board-ocean  { background: linear-gradient(135deg, #1565c0, #3fb4e6); }
.sui-board-field  { background: linear-gradient(160deg, #2e7d4f, #a5cf6a); }
.sui-board-sunset { background: linear-gradient(135deg, #f6855a, #d64f7a 60%, #6b3fa0); }

/* --------------------------------------------------------------------------
   2. Pipeline board backgrounds (all styles)
   -------------------------------------------------------------------------- */
html:not([data-ui-board="plain"]) .kanban-board-scroll { border-radius: 10px; padding: 10px; background-attachment: local; }
html[data-ui-board="navy"]   .kanban-board-scroll { background: linear-gradient(160deg, #0f2742, #1d4a78); }
html[data-ui-board="ocean"]  .kanban-board-scroll { background: linear-gradient(135deg, #1565c0, #3fb4e6); }
html[data-ui-board="field"]  .kanban-board-scroll { background: linear-gradient(160deg, #2e7d4f, #a5cf6a); }
html[data-ui-board="sunset"] .kanban-board-scroll { background: linear-gradient(135deg, #f6855a, #d64f7a 60%, #6b3fa0); }

/* --------------------------------------------------------------------------
   3. Compact style — Classic colours, denser layout
   -------------------------------------------------------------------------- */
html[data-ui-style="compact"] {
  --bs-body-font-size: .8125rem;
  --bs-body-line-height: 1.45;
  --app-header-height: 62px;
}
html[data-ui-style="compact"] .app-wrapper { padding-left: 22px; padding-right: 14px; }
html[data-ui-style="compact"] .card-body { padding: .85rem; }
html[data-ui-style="compact"] .table > :not(caption) > * > * { padding: .4rem .55rem; }
html[data-ui-style="compact"] .btn { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .65rem; --bs-btn-font-size: .8125rem; }
html[data-ui-style="compact"] .form-control,
html[data-ui-style="compact"] .form-select { padding-top: .3rem; padding-bottom: .3rem; font-size: .8125rem; }
html[data-ui-style="compact"] .lead-mini-card { padding: .28rem .45rem; }
html[data-ui-style="compact"] .kanban-col-body { gap: 4px; }

/* --------------------------------------------------------------------------
   4. Kommo-style — colours and type
   -------------------------------------------------------------------------- */
html[data-ui-style="kommo"] {
  --sui-navy: #0f2a43;
  --sui-navy-2: #17385a;
  --sui-rail-text: #9fb4c8;
  --bs-primary: #3d8af7;
  --bs-primary-rgb: 61, 138, 247;
  --bs-btn-primary-hover: #2b76e0;
  --bs-btn-primary-border-hover: #2b76e0;
  --bs-btn-primary-active: #2268c9;
  --bs-primary-text-emphasis: #154a91;
  --bs-primary-bg-subtle: #eaf3ff;
  --bs-primary-border-subtle: #bcd8fd;
  --bs-body-font-family: "Setu Rupee", "PT Sans", "Segoe UI", Arial, sans-serif;
  --bs-body-font-size: .875rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.45;
  --bs-body-color: #313942;
  --bs-body-color-rgb: 49, 57, 66;
  --bs-heading-color: #1d2733;
  --bs-secondary-color: rgba(49, 57, 66, .62);
  --bs-secondary-bg: #f4f6f8;
  --bs-tertiary-bg: #eef2f5;
  --bs-border-color: #e1e6ea;
  --bs-link-color: #1f6fd1;
  --bs-link-color-rgb: 31, 111, 209;
  --bs-link-hover-color: #155ab0;
  --bs-border-radius: .25rem;
  --bs-border-radius-sm: .2rem;
  --bs-border-radius-lg: .375rem;
  --bs-border-radius-xl: .5rem;
  --custom-body-bg: #eef2f5;
  --app-header-bg: #ffffff;
  --app-sidebar-bg: #ffffff;
  --app-header-height: 58px;
}
html[data-ui-style="kommo"][data-bs-theme="dark"] {
  --bs-primary: #4a93f8;
  --bs-primary-rgb: 74, 147, 248;
  --bs-primary-text-emphasis: #9cc4fb;
  --bs-primary-bg-subtle: #10243d;
  --bs-primary-border-subtle: #1d3f6b;
  --bs-body-color: #b9c4ce;
  --bs-body-color-rgb: 185, 196, 206;
  --bs-heading-color: #e8eef3;
  --bs-secondary-color: rgba(185, 196, 206, .62);
  --bs-body-bg: #1a232d;
  --bs-body-bg-rgb: 26, 35, 45;
  --bs-secondary-bg: #202b37;
  --bs-tertiary-bg: #253241;
  --bs-border-color: rgba(255, 255, 255, .08);
  --bs-link-color: #7fb2fa;
  --bs-link-color-rgb: 127, 178, 250;
  --bs-link-hover-color: #a3c8fc;
  --custom-body-bg: #131b23;
  --app-header-bg: #1a232d;
  --app-sidebar-bg: #1a232d;
  --sui-navy: #0b1622;
  --sui-navy-2: #15273b;
}
html[data-ui-style="kommo"] body { font-family: var(--bs-body-font-family); letter-spacing: .005em; }
html[data-ui-style="kommo"] h1, html[data-ui-style="kommo"] h2, html[data-ui-style="kommo"] h3,
html[data-ui-style="kommo"] h4, html[data-ui-style="kommo"] h5, html[data-ui-style="kommo"] h6,
html[data-ui-style="kommo"] .h4, html[data-ui-style="kommo"] .h5, html[data-ui-style="kommo"] .h6 { font-family: var(--bs-body-font-family); font-weight: 700; letter-spacing: 0; }
html[data-ui-style="kommo"] .app-wrapper { background: var(--custom-body-bg); padding-left: 24px; padding-right: 16px; }

/* --------------------------------------------------------------------------
   5. Kommo-style — navy rail with labels
   -------------------------------------------------------------------------- */
html[data-ui-style="kommo"] .app-menubar-tabs {
  background: linear-gradient(to right, var(--sui-navy) var(--app-menubar-tabs, 80px), var(--app-sidebar-bg) var(--app-menubar-tabs, 80px));
  box-shadow: none;
}
html[data-ui-style="kommo"] .app-navbar-brand { background: var(--sui-navy); border-bottom: 1px solid rgba(255, 255, 255, .06); }
html[data-ui-style="kommo"] .app-navbar-tabs { background: var(--sui-navy); --bs-heading-color: var(--sui-rail-text); }
html[data-ui-style="kommo"] .app-navbar-tabs .nav-item { display: flex; flex-direction: column; align-items: center; margin-bottom: 4px; }
html[data-ui-style="kommo"] .app-navbar-tabs .nav-item[data-bs-title]::after {
  content: attr(data-bs-title);
  display: block; max-width: 74px; margin-top: 2px; padding: 0 2px;
  font-size: 10px; font-weight: 700; line-height: 1.15; text-align: center; letter-spacing: .01em;
  color: var(--sui-rail-text); pointer-events: none;
}
html[data-ui-style="kommo"] .app-navbar-tabs .menu-link { border-radius: 8px; background: transparent; }
html[data-ui-style="kommo"] .app-navbar-tabs .menu-link:hover { background: rgba(255, 255, 255, .08); --bs-heading-color: #ffffff; }
html[data-ui-style="kommo"] .app-navbar-tabs .menu-link.active { background: rgba(255, 255, 255, .14); --bs-heading-color: #ffffff; box-shadow: none; }
html[data-ui-style="kommo"] .app-navbar-tabs .nav-item:has(.menu-link.active)::after,
html[data-ui-style="kommo"] .app-navbar-tabs .nav-item:hover::after { color: #ffffff; }
html[data-ui-style="kommo"] .app-navbar-tabs .menu-link i,
html[data-ui-style="kommo"] .app-navbar-tabs .menu-link svg { color: var(--bs-heading-color); }
/* the labels replace the rail's hover tooltips (setu-ui.js marks them) */
html[data-ui-style="kommo"] .tooltip.sui-rail-tip { display: none !important; }

/* second-level menu panel */
html[data-ui-style="kommo"] .app-tab-content { border-right: 1px solid var(--bs-border-color); }
html[data-ui-style="kommo"] .app-tab-content .menu-heading .menu-label { font-size: .68rem; letter-spacing: .08em; }
html[data-ui-style="kommo"] .app-tab-content .menu-link { border-radius: 4px; }
html[data-ui-style="kommo"] .app-tab-content .menu-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); font-weight: 700; }

/* --------------------------------------------------------------------------
   6. Kommo-style — slim top bar, cards, forms, tables
   -------------------------------------------------------------------------- */
html[data-ui-style="kommo"] .app-header { box-shadow: none; border-bottom: 1px solid var(--bs-border-color); }
html[data-ui-style="kommo"] .app-header .form-control-fill { background: var(--bs-secondary-bg); border: 1px solid transparent; border-radius: 4px; height: 34px; }
html[data-ui-style="kommo"] .app-header .form-control-fill:focus { background: var(--bs-body-bg); border-color: var(--bs-primary); }

html[data-ui-style="kommo"] .card { border: 1px solid var(--bs-border-color); border-radius: 6px; box-shadow: none; }
html[data-ui-style="kommo"] .card-header { background: transparent; border-bottom: 1px solid var(--bs-border-color); }
html[data-ui-style="kommo"] .shadow-sm, html[data-ui-style="kommo"] .shadow { box-shadow: 0 1px 2px rgba(15, 42, 67, .08) !important; }

html[data-ui-style="kommo"] .btn { border-radius: 4px; font-weight: 700; letter-spacing: .01em; }
html[data-ui-style="kommo"] .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: #2b76e0; --bs-btn-hover-border-color: #2b76e0; --bs-btn-active-bg: #2268c9; --bs-btn-active-border-color: #2268c9; --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); }
html[data-ui-style="kommo"] .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); }
html[data-ui-style="kommo"] .text-primary { color: var(--bs-primary) !important; }
html[data-ui-style="kommo"] .bg-primary { background-color: var(--bs-primary) !important; }
html[data-ui-style="kommo"] .border-primary { border-color: var(--bs-primary) !important; }

html[data-ui-style="kommo"] .form-control,
html[data-ui-style="kommo"] .form-select,
html[data-ui-style="kommo"] .select2-container--default .select2-selection { border-radius: 3px; border-color: #d3dae0; }
html[data-ui-style="kommo"][data-bs-theme="dark"] .form-control,
html[data-ui-style="kommo"][data-bs-theme="dark"] .form-select { border-color: rgba(255, 255, 255, .12); }
html[data-ui-style="kommo"] .form-control:focus,
html[data-ui-style="kommo"] .form-select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .18); }
html[data-ui-style="kommo"] .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
html[data-ui-style="kommo"] .form-label { font-weight: 700; font-size: .8rem; }

html[data-ui-style="kommo"] .table > thead th,
html[data-ui-style="kommo"] .table > thead td { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--bs-border-color); }
html[data-ui-style="kommo"] .table > tbody tr:hover > * { background: rgba(var(--bs-primary-rgb), .04); }
html[data-ui-style="kommo"] .badge { border-radius: 3px; font-weight: 700; }
html[data-ui-style="kommo"] .dropdown-menu { border-radius: 4px; border-color: var(--bs-border-color); box-shadow: 0 6px 22px rgba(15, 42, 67, .14); }
html[data-ui-style="kommo"] .modal-content { border-radius: 6px; }
html[data-ui-style="kommo"] .nav-tabs .nav-link.active, html[data-ui-style="kommo"] .nav-pills .nav-link.active { color: var(--bs-primary); }
html[data-ui-style="kommo"] .nav-pills .nav-link.active { background: var(--bs-primary-bg-subtle); }
html[data-ui-style="kommo"] .page-item.active .page-link { background: var(--bs-primary); border-color: var(--bs-primary); }

/* --------------------------------------------------------------------------
   7. Kommo-style — pipeline board
   -------------------------------------------------------------------------- */
/* Stage colours, by column position (12-colour cycle) */
html[data-ui-style="kommo"] .kanban-col:nth-child(12n+1)  { --sui-stage: #98cbff; }
html[data-ui-style="kommo"] .kanban-col:nth-child(12n+2)  { --sui-stage: #fff19c; }
html[data-ui-style="kommo"] .kanban-col:nth-child(12n+3)  { --sui-stage: #ffd28f; }
html[data-ui-style="kommo"] .kanban-col:nth-child(12n+4)  { --sui-stage: #ffc2c2; }
html[data-ui-style="kommo"] .kanban-col:nth-child(12n+5)  { --sui-stage: #d4f39e; }
html[data-ui-style="kommo"] .kanban-col:nth-child(12n+6)  { --sui-stage: #a8ecd2; }
html[data-ui-style="kommo"] .kanban-col:nth-child(12n+7)  { --sui-stage: #dccdff; }
html[data-ui-style="kommo"] .kanban-col:nth-child(12n+8)  { --sui-stage: #ffcdeb; }
html[data-ui-style="kommo"] .kanban-col:nth-child(12n+9)  { --sui-stage: #bfe6ff; }
html[data-ui-style="kommo"] .kanban-col:nth-child(12n+10) { --sui-stage: #f1e2bb; }
html[data-ui-style="kommo"] .kanban-col:nth-child(12n+11) { --sui-stage: #bff0ec; }
html[data-ui-style="kommo"] .kanban-col:nth-child(12n+12) { --sui-stage: #dfe3e8; }

html[data-ui-style="kommo"] .kanban-board-scroll { gap: 6px; }
html[data-ui-style="kommo"] .kanban-col .kanban-card { background: transparent; border: 0; box-shadow: none !important; }
html[data-ui-style="kommo"] .kanban-card-header {
  background: transparent; border: 0; border-bottom: 3px solid var(--sui-stage, var(--bs-primary));
  padding: 6px 6px 7px; margin-bottom: 6px; flex-wrap: wrap; row-gap: 2px;
}
html[data-ui-style="kommo"] .kanban-col-title { font-family: var(--bs-body-font-family); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-heading-color); }
html[data-ui-style="kommo"] .lead-count-badge { background: transparent !important; border: 0 !important; color: var(--bs-secondary-color) !important; font-weight: 700; padding: 0 2px; }
html[data-ui-style="kommo"] .btn-col-add { border-radius: 3px; border: 1px dashed var(--bs-border-color); background: transparent; color: var(--bs-secondary-color); }
html[data-ui-style="kommo"] .btn-col-add:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
html[data-ui-style="kommo"] .sui-stage-total { flex-basis: 100%; font-size: .72rem; color: var(--bs-secondary-color); white-space: nowrap; }
html[data-ui-style="kommo"] .sui-stage-total b { color: var(--bs-body-color); font-weight: 700; }
html:not([data-ui-style="kommo"]) .sui-stage-total { display: none; }
html[data-ui-style="kommo"] .kanban-col-body { gap: 4px; padding: 0 2px; }

/* Lead cards: white, flat, compact */
html[data-ui-style="kommo"] .kanban-col .lead-mini-card,
html[data-ui-style="kommo"] .kanban-col .lead-mini-card:nth-child(even of .lead-mini-card) {
  background: var(--bs-body-bg); border: 0; border-radius: 3px; padding: 7px 9px 6px;
  box-shadow: 0 1px 1px rgba(15, 42, 67, .10), 0 0 0 1px rgba(15, 42, 67, .04);
}
html[data-ui-style="kommo"] .kanban-col .lead-mini-card:hover { background: var(--bs-body-bg); box-shadow: 0 2px 8px rgba(15, 42, 67, .16); transform: none; }
html[data-ui-style="kommo"] .lead-mini-card .lmc-lead-title { font-size: .84rem; }
html[data-ui-style="kommo"] .lead-mini-card .lmc-lead-title > span:first-child { color: var(--bs-link-color); font-weight: 700; }
/* long lead names end in "…" instead of pushing the WA / priority badges off the card (all styles) */
.lead-mini-card .lmc-lead-title { gap: 6px; min-width: 0; }
.lead-mini-card .lmc-lead-title > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-mini-card .lmc-lead-title > span:last-child { flex-shrink: 0; }
.lead-mini-card .wl-origin-badge { margin-right: 0; }
html[data-ui-style="kommo"] .lead-mini-card .lmc-contact { font-size: .78rem; color: var(--bs-body-color); }
html[data-ui-style="kommo"] .lead-mini-card .lmc-footer { font-size: .7rem; color: var(--bs-secondary-color); border-top: 0; }
html[data-ui-style="kommo"] .lead-mini-card .badge-sm-priority { border-radius: 3px; }
/* keep SetuCRM's own markers visible on top of the Kommo card */
html[data-ui-style="kommo"] .kanban-col .lead-mini-card.has-unread-wa { box-shadow: inset 3px 0 0 #25d366, 0 1px 1px rgba(15, 42, 67, .10); }
html[data-ui-style="kommo"] .kanban-col .lead-mini-card.wl-wa-origin,
html[data-ui-style="kommo"] .kanban-col .lead-mini-card.wl-wa-origin:nth-child(even of .lead-mini-card) { background: color-mix(in srgb, #25d366 13%, var(--bs-body-bg)); }
html[data-ui-style="kommo"] .kanban-col .lead-mini-card.is-selected,
html[data-ui-style="kommo"] .kanban-col .lead-mini-card.active { box-shadow: 0 0 0 2px var(--bs-primary); }

/* On a coloured board background the column headers sit on the picture */
html[data-ui-style="kommo"]:not([data-ui-board="plain"]) .kanban-col-title,
html[data-ui-style="kommo"]:not([data-ui-board="plain"]) .lead-count-badge,
html[data-ui-style="kommo"]:not([data-ui-board="plain"]) .sui-stage-total,
html[data-ui-style="kommo"]:not([data-ui-board="plain"]) .sui-stage-total b { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
html[data-ui-style="kommo"]:not([data-ui-board="plain"]) .btn-col-add { color: #fff; border-color: rgba(255, 255, 255, .5); }
html[data-ui-style="kommo"]:not([data-ui-board="plain"]) .kanban-col-more .kanban-load-more-btn { background: rgba(255, 255, 255, .85); }

/* Classic + Compact on a coloured board: keep the columns readable */
html:not([data-ui-style="kommo"]):not([data-ui-board="plain"]) .kanban-col .kanban-card { box-shadow: 0 2px 10px rgba(0, 0, 0, .15) !important; }

/* --------------------------------------------------------------------------
   8. Kommo-style — lead panel
   -------------------------------------------------------------------------- */
html[data-ui-style="kommo"] #leadPaneHeader { background: var(--sui-lead-stage, var(--bs-primary)) !important; transition: background .2s; }
html[data-ui-style="kommo"] #leadPaneHeader.sui-light,
html[data-ui-style="kommo"] #leadPaneHeader.sui-light input,
html[data-ui-style="kommo"] #leadPaneHeader.sui-light button,
html[data-ui-style="kommo"] #leadPaneHeader.sui-light i,
html[data-ui-style="kommo"] #leadPaneHeader.sui-light span { color: #1d2733 !important; }
html[data-ui-style="kommo"] #leadPaneHeader.sui-light input::placeholder { color: rgba(29, 39, 51, .55) !important; }
html[data-ui-style="kommo"] .lead-right-tabs-bar { background: var(--sui-navy) !important; }
html[data-ui-style="kommo"] .lr-tab { font-family: var(--bs-body-font-family); letter-spacing: .05em; }
html[data-ui-style="kommo"] .lr-tab.is-active { color: #fff !important; border-bottom-color: var(--bs-primary) !important; }
html[data-ui-style="kommo"] .lead-right-pane { background: var(--custom-body-bg); }
html[data-ui-style="kommo"] .lf-label { color: var(--bs-secondary-color); font-size: .78rem; }
html[data-ui-style="kommo"] .lead-note-panel { border-radius: 6px; border: 1px solid var(--bs-border-color); box-shadow: 0 -2px 10px rgba(15, 42, 67, .05); }
html[data-ui-style="kommo"] .activity-date-label { border-radius: 3px; font-weight: 700; letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   9. Kommo-style — login page
   -------------------------------------------------------------------------- */
html[data-ui-style="kommo"] .auth-wrapper { background: linear-gradient(160deg, #0f2a43 0%, #17385a 55%, #1d4f80 100%); }
html[data-ui-style="kommo"] .auth-wrapper .card { border: 0; border-radius: 8px !important; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
html[data-ui-style="kommo"] .auth-wrapper img[src*="vector"] { filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .25)); }
html[data-ui-style="kommo"][data-bs-theme="dark"] .auth-wrapper .card { background: #1a232d; }

/* --------------------------------------------------------------------------
   10. Small fixes for every style
   -------------------------------------------------------------------------- */
/* login logo is written in dark ink inline; keep it readable in dark mode */
html[data-bs-theme="dark"] a[aria-label="SetuCRM Logo"] span { color: #e8eef3 !important; }

/* ==========================================================================
   Kommo-style v2 polish
   Design tokens (kept in one place so every page agrees):
     navy #0F2A43 · canvas #EEF2F5 · surface #FFF · ink #1D2733 · muted #6B7884 · accent #3D8AF7
     type: PT Sans 400/700 only · scale 11 / 12 / 13 / 14 / 16 / 20 px · radius 4 / 6 / 8
   ========================================================================== */
html[data-ui-style="kommo"] {
  --sui-ink: #1d2733;
  --sui-muted: #6b7884;
  --sui-canvas: #eef2f5;
  --sui-panel: #f6f8fa;
  --sui-hover: rgba(15, 42, 67, .05);
  --sui-active-bg: #e4eefe;
  --sui-active-fg: #1c5fc4;
  --bs-secondary-color: #6b7884;
}
html[data-ui-style="kommo"][data-bs-theme="dark"] {
  --sui-ink: #e8eef3;
  --sui-muted: #93a1ad;
  --sui-canvas: #131b23;
  --sui-panel: #17212b;
  --sui-hover: rgba(255, 255, 255, .05);
  --sui-active-bg: rgba(74, 147, 248, .16);
  --sui-active-fg: #9cc4fb;
  --bs-secondary-color: #93a1ad;
}
html[data-ui-style="kommo"] body { font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }

/* --------------------------------------------------------------------------
   11. Middle menu panel (second level of the sidebar)
   -------------------------------------------------------------------------- */
html[data-ui-style="kommo"] .app-menubar-tabs { background: linear-gradient(to right, var(--sui-navy) var(--app-menubar-tabs, 80px), var(--sui-panel) var(--app-menubar-tabs, 80px)); }
html[data-ui-style="kommo"] .app-menubar-tabs .app-tab-content {
  background: var(--sui-panel);
  border-right: 1px solid var(--bs-border-color);
}
html[data-ui-style="kommo"] .app-menubar-tabs.open .app-tab-content { box-shadow: 12px 0 32px -18px rgba(15, 42, 67, .45); }
html[data-ui-style="kommo"] .app-side-brands {
  height: var(--app-header-height); display: flex; align-items: center; padding: 0 18px;
  border-bottom: 1px solid var(--bs-border-color); background: transparent;
}
html[data-ui-style="kommo"] .app-side-brands .navbar-brand-text { font-size: 16px; font-weight: 700; color: var(--sui-ink); letter-spacing: 0; }
html[data-ui-style="kommo"] .app-tab-content .menu-heading { padding: 16px 18px 6px; margin: 0; }
html[data-ui-style="kommo"] .app-tab-content .menu-heading .menu-label,
html[data-ui-style="kommo"] .app-tab-content .menu-heading > span {
  text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 700; color: var(--sui-muted);
}
html[data-ui-style="kommo"] .app-tab-content .menu-heading::before { display: none; }
html[data-ui-style="kommo"] .app-tab-content .menu-heading a {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--sui-muted) !important; font-size: 12px;
}
html[data-ui-style="kommo"] .app-tab-content .menu-heading a:hover { background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary) !important; }
html[data-ui-style="kommo"] .app-tab-content .menu-divider { margin: 8px 18px; background: var(--bs-border-color); opacity: 1; }
html[data-ui-style="kommo"] .app-tab-content .menu-item { margin: 0; }
html[data-ui-style="kommo"] .app-tab-content .menu-link {
  display: flex; align-items: center; gap: 10px;
  margin: 1px 10px; padding: 7px 10px; border-radius: 6px;
  font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--sui-ink);
  background: transparent; transition: background .12s;
}
html[data-ui-style="kommo"] .app-tab-content .menu-link .menu-label { font-size: 14px; font-weight: inherit; color: inherit; }
html[data-ui-style="kommo"] .app-tab-content .menu-link > i,
html[data-ui-style="kommo"] .app-tab-content .menu-link > svg { font-size: 15px; width: 18px; text-align: center; color: var(--sui-muted); flex-shrink: 0; }
html[data-ui-style="kommo"] .app-tab-content .menu-link:hover { background: var(--sui-hover); }
html[data-ui-style="kommo"] .app-tab-content .menu-link.active {
  background: var(--sui-active-bg); color: var(--sui-active-fg); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--bs-primary);
}
html[data-ui-style="kommo"] .app-tab-content .menu-link.active > i { color: var(--bs-primary); }
html[data-ui-style="kommo"] .app-tab-content .menu-link .badge { margin-left: auto; }
/* lighter screen behind the slide-out panel on laptop widths */
html[data-ui-style="kommo"] :has(.app-menubar-tabs) .app-toggler::after { background-color: rgba(15, 42, 67, .18); opacity: 1; }
/* "Find in menu" box (added by setu-ui.js) */
.sui-nav-search { display: none; }
html[data-ui-style="kommo"] .sui-nav-search { display: block; padding: 12px 14px 4px; }
html[data-ui-style="kommo"] .sui-nav-search input {
  width: 100%; height: 32px; padding: 0 10px 0 30px; border-radius: 6px; font-size: 13px;
  border: 1px solid var(--bs-border-color); background: var(--bs-body-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7884' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center;
  color: var(--sui-ink); outline: 0;
}
html[data-ui-style="kommo"] .sui-nav-search input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .15); }
html[data-ui-style="kommo"] .sui-nav-empty { padding: 10px 18px; font-size: 13px; color: var(--sui-muted); }

/* --------------------------------------------------------------------------
   12. One type scale (11 / 12 / 13 / 14 / 16 / 20) — SetuCRM's views use
       many rem sizes (0.68–0.95rem); these snap them onto the scale.
   -------------------------------------------------------------------------- */
/* 11 — meta: ticks, badges, timestamps on cards */
html[data-ui-style="kommo"] :is(.wl-tl-who, .wl-tl-meta, .wl-tick, .lm-badge, .activity-badge, .lmc-footer, .lmc-footer *, .badge-sm-priority, .wl-origin-badge, .lv-badge) { font-size: 11px !important; }
/* 12 — labels, tabs, small UI text */
html[data-ui-style="kommo"] :is(.lr-tab, .lf-add-label, .lr-tracking-link-btn, .activity-date-label, .activity-time, .note-participants, .note-participants *,
  .wl-tl-head, .wl-tl-switch, .lm-card-head, .lead-count-badge, .sui-stage-total, .lf-label, small, .small, .form-text, .text-2xs, .text-xs,
  .reports-filter-btn, .reminder-shortcut-btn, .reminder-date-label, .reminder-details-label, .lm-hint, .lm-row > label, .lm-status) { font-size: 12px !important; }
html[data-ui-style="kommo"] .kanban-col-title { font-size: 12px !important; }
/* 13 — controls and dense content */
html[data-ui-style="kommo"] :is(.btn:not(.btn-icon), .dropdown-item, .form-control, .form-select, .lv-bulk-btn, .note-type-btn, .note-type-option, .btn-note-add, .btn-note-cancel,
  .btn-lead-cancel, .btn-lead-save, .lmc-contact, .wl-tl-msg, .lm-card-preview, .lm-card-more, .activity-user, .activity-text, .lm-tools button, .lm-tools select,
  .lm-btn, .lm-wa-send, .lm-wa-cancel, .timeline-load-more-btn, .kanban-load-more-btn, .table td, .page-link,
  .select2-container .select2-selection__rendered, .select2-container .select2-selection__placeholder, .select2-results__option) { font-size: 13px !important; }
html[data-ui-style="kommo"] #leadPaneBody :is(input, select, textarea) { font-size: 13px !important; }
html[data-ui-style="kommo"] :is(.table, .list-view-table) > thead :is(th, td) { font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; }
/* 14 — reading text */
html[data-ui-style="kommo"] :is(.note-textarea, .lm-editor, .lm-card-subject, .lm-card-full, .lmc-lead-title, .menu-link) { font-size: 14px !important; }
html[data-ui-style="kommo"] .lmc-lead-title { font-size: 13px !important; }
/* 16 / 20 — titles */
html[data-ui-style="kommo"] :is(.card-title, .modal-title, h5, .h5) { font-size: 16px; }
html[data-ui-style="kommo"] :is(h4, .h4) { font-size: 20px; }
html[data-ui-style="kommo"] .lead-title-input { font-size: 16px !important; font-weight: 700; }
html[data-ui-style="kommo"] .app-wrapper :is(.breadcrumb, .breadcrumb-item, .breadcrumb a) { font-size: 13px; }

/* --------------------------------------------------------------------------
   13. Consistent shape: radius 4 (controls) / 6 (menus, cards) / 8 (panels)
   -------------------------------------------------------------------------- */
html[data-ui-style="kommo"] :is(.lv-bulk-btn, .btn-note-add, .btn-note-cancel, .btn-lead-save, .btn-lead-cancel, .note-type-btn, .lm-btn, .lm-wa-send, .view-toggle-btn, .pl-filter-toggle) { border-radius: 4px !important; }
html[data-ui-style="kommo"] :is(.wl-tl-card, .lm-card, .lead-note-panel, .note-type-dropdown, .lm-win) { border-radius: 8px; }
html[data-ui-style="kommo"] .lm-win-head { background: var(--sui-navy); }

/* --------------------------------------------------------------------------
   14. Leads list view + export
   -------------------------------------------------------------------------- */
html[data-ui-style="kommo"] .lv-row > td { border-color: var(--bs-border-color); }
html[data-ui-style="kommo"] .lv-row:hover > td { background: rgba(var(--bs-primary-rgb), .04); }
.sui-export-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 6px;
  border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); font-size: 13px; font-weight: 600; }
.sui-export-btn:hover { border-color: #1d6f42; color: #1d6f42; }
.sui-export-btn i { color: #1d6f42; font-size: 15px; }
.sui-export-btn:disabled { opacity: .6; }
html[data-ui-style="kommo"] .sui-export-btn { border-radius: 4px; font-weight: 700; }

/* Leads list: one line per lead — wide name column, badges inline, long names end in "…" (all styles) */
#pipelineDataTable td.lv-lead-title { min-width: 260px; white-space: nowrap; }
#pipelineDataTable td.lv-lead-title .lv-open-lead { display: inline-block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
#pipelineDataTable td.lv-lead-title :is(.badge, .wl-origin-badge) { vertical-align: middle; }
#pipelineDataTable td.lv-lead-title .wl-origin-badge { margin-right: 6px; }
html[data-ui-style="kommo"] #pipelineDataTable td.lv-lead-title .lv-open-lead { font-weight: 700; color: var(--bs-link-color); }

/* Keep the floating follow-up buttons from covering the email window's Send button */
body:has(.lm-win.show) :is(.fup-fab, .wfup-fab) { opacity: 0; pointer-events: none; transition: opacity .15s; }

/* Dark mode: Bootstrap "light" components read as glare on a dark canvas */
html[data-bs-theme="dark"] .alert-light { background: var(--bs-tertiary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color) !important; }
html[data-bs-theme="dark"] .alert-light code { background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary-text-emphasis); padding: 0 4px; border-radius: 3px; }
html[data-bs-theme="dark"] .btn-light { background: transparent; color: var(--bs-body-color); border-color: var(--bs-border-color) !important; }
html[data-bs-theme="dark"] .btn-light:hover { background: var(--bs-tertiary-bg); }
html[data-bs-theme="dark"] .btn-light.text-danger { color: var(--bs-danger-text-emphasis) !important; }
html[data-bs-theme="dark"] .btn-outline-secondary { color: var(--bs-body-color); border-color: var(--bs-border-color); }
html[data-bs-theme="dark"] .btn-outline-secondary:hover { background: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); }