/* CRM Theme Base - palette, typography, layout */
:root{
  --bg:#0f1720;
  --panel:#16202a;
  --muted:#98a3ad;
  --accent:#0d6efd;
  --success:#28a745;
  --danger:#dc3545;
  --surface:#ffffff;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --radius:8px;
}

html,body{height:100%;}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--surface);
  margin:0;line-height:1.4;
}

#app{display:flex;min-height:100vh}

.sidebar{width:240px; background: #0b1320; padding:18px 12px; box-shadow:2px 0 6px rgba(0,0,0,0.4);} 
.sidebar .sidebar-header{color:var(--surface); font-weight:700; margin-bottom:12px}
.sidebar .nav-list{list-style:none;padding:0;margin:0}
.sidebar .nav-item{margin-bottom:6px}
.sidebar .nav-link{display:flex;align-items:center;gap:10px;color:var(--muted);text-decoration:none;padding:10px;border-radius:6px}
.sidebar .nav-link.active, .sidebar .nav-link:hover{background:#0e2230;color:var(--surface)}
.sidebar .nav-link i{width:20px;text-align:center}

.main-content{flex:1;padding:20px}
.card{background:var(--panel);border-radius:var(--radius);padding:14px;margin-bottom:16px;border:1px solid rgba(255,255,255,0.03)}
.content-header h1{font-size:22px;margin:0 0 12px 0;color:var(--surface)}

.filters-container{background:var(--surface);color:#222;padding:12px;border-radius:8px;margin-bottom:12px}
.filters-row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.filter-group{display:flex;flex-direction:column;min-width:180px}
.filter-group label{font-size:12px;color:#666;margin-bottom:6px}
.filter-group select,.filter-group input{padding:8px 10px;border-radius:6px;border:1px solid #dfe6ea}
.btn{display:inline-block;padding:8px 12px;border-radius:6px;background:var(--accent);color:#fff;border:none;cursor:pointer}
.btn.secondary{background:#6c757d}

.table{width:100%;border-collapse:collapse;background:transparent;color:#222}
.table thead th{background:#f6f8fa;color:#2b3a42;padding:10px;border-bottom:2px solid #e9eef2}
.table tbody td{background:#ffffff;border-bottom:1px solid #eef3f6;padding:10px;color:#2b3a42}
.table .badge{display:inline-block;padding:4px 8px;border-radius:12px;font-size:12px}
.badge-new{background:#e8f5e9;color:#2e7d32}
.badge-inprogress{background:#fff3e0;color:#f57c00}
.badge-completed{background:#e8f5e8;color:#2e7d32}
.badge-cancelled{background:#ffebee;color:#c62828}

@media(max-width:900px){
  .sidebar{display:none}
  .filters-row{flex-direction:column}
}

/* Collapsed sidebar visuals */
.sidebar{
  transition: width 0.18s ease;
  overflow: hidden;
}
.sidebar.collapsed{
  width: 64px !important;
}
.sidebar .nav-text{
  transition: opacity 0.12s ease, visibility 0.12s;
}
.sidebar.collapsed .nav-text{
  opacity: 0;
  visibility: hidden;
  display: none;
}
.sidebar .nav-link i{
  width: 36px;
  text-align: center;
}
.sidebar.collapsed .nav-link{
  justify-content: center;
  padding-left: 6px;
  padding-right: 6px;
}
.sidebar-toggle, .mobile-sidebar-toggle{
  background: transparent;
  border: none;
  color: var(--surface);
  font-size: 18px;
  padding: 6px;
  cursor: pointer;
  margin-bottom: 8px;
}
@media(max-width:900px){
  .mobile-sidebar-toggle{display:inline-block}
  .sidebar-toggle{display:none}
}

/* Compact filters override for CRM leads */
.filters.mb-3 .row.g-2 {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.filters.mb-3 .col-md-2 { flex: 0 0 180px; }
.filters.mb-3 .col-md-3 { flex: 0 0 260px; }
.filters.mb-3 .col-md-1 { flex: 0 0 100px; }
.filters.mb-3 .form-label.small { margin-bottom: 6px; color: #6c757d; font-size: 13px; }
.filters.mb-3 .form-control.form-control-sm,
.filters.mb-3 input.form-control,
.filters.mb-3 select.form-control { padding: 8px 10px; border-radius: 6px; }

/* Make clear button compact */
#clearFiltersBtn { padding: 8px 10px; }

/* Responsive fallback */
@media (max-width: 900px) {
  .filters.mb-3 .row.g-2 { flex-direction: column; }
  .filters.mb-3 .col-md-2,
  .filters.mb-3 .col-md-3,
  .filters.mb-3 .col-md-1 { flex: 1 1 auto; min-width: 0; }
}

/* ---------- Sidebar tweaks ---------- */
.sidebar { transition: width .18s ease, padding .18s ease; }
.sidebar.collapsed { width: 64px !important; padding-left:6px; padding-right:6px; }
.sidebar .nav-text { transition: opacity .12s ease, visibility .12s; }
.sidebar.collapsed .nav-text { opacity:0; visibility:hidden; display:none; }
.sidebar .nav-link { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar .nav-link i { width:36px; text-align:center; }

/* show small icons bar on collapsed hover (optional) */
.sidebar.collapsed:hover { width:160px !important; }

/* mobile: full overlay behavior */
@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1000;transform:translateX(-100%);transition:transform .18s ease}
  .sidebar.open{transform:translateX(0)}
  body.with-sidebar-open{overflow:hidden}
}

/* ---------- Table / leads responsiveness ---------- */
.table-responsive { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table { min-width: 1000px; } /* allow horizontal scroll on small screens */
.table thead th { position:sticky; top:0; z-index:2; background:#f6f8fa; }
.table thead th, .table tbody td { white-space:nowrap; padding:10px 12px; vertical-align:middle; }

/* compact cells: ellipsis */
.table tbody td { max-width:220px; overflow:hidden; text-overflow:ellipsis; }

/* zebra rows + hover */
.table tbody tr:nth-child(odd) td { background: #ffffff; }
.table tbody tr:nth-child(even) td { background: #fbfcfd; }
.table tbody tr:hover td { background:#f1f7fb; }

/* status badges */
.badge { padding:4px 8px; border-radius:12px; font-size:12px; display:inline-block; }
.badge-new{ background:#e8f5e9; color:#2e7d32; }
.badge-inprogress{ background:#fff3e0; color:#f57c00; }
.badge-completed{ background:#e8f5e8; color:#2e7d32; }
.badge-cancelled{ background:#ffebee; color:#c62828; }

/* Responsive collapse for very small screens: convert table to block rows */
@media (max-width:640px) {
  .table, .table thead, .table tbody, .table th, .table td, .table tr { display:block; }
  .table thead { display:none; }
  .table tbody tr { margin-bottom:12px; border-radius:8px; background:#fff; padding:10px; }
  .table tbody td { display:flex; justify-content:space-between; padding:8px 10px; white-space:normal; max-width:100%; }
  .table tbody td:before { content: attr(data-label); font-weight:600; color:#6c757d; margin-right:8px; }
}

/* Fix: prevent table/card overflow that draws white area over dark background */
.card { overflow: hidden; box-sizing: border-box; }

/* Responsive table wrapper: keep overflow inside the wrapper */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; }

/* Table sizing: allow horizontal scrolling but avoid expanding the parent card */
.table { min-width: 900px; width: 100%; box-sizing: border-box; }

/* Placeholder safety */
.table-placeholder { max-width: 100%; box-sizing: border-box; }

/* Ensure main content padding doesn't allow visual bleed */
.preview-main, .main-content { box-sizing: border-box; }

/* If card content still overflows, add subtle inner shadow to hide seam */
.card::after {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 0;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.card { position: relative; }

/* TABLE: polished per mockups */
.table-responsive { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table { min-width:1100px; width:100%; border-collapse:separate; border-spacing:0; }
.table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f6f8fa;
  color: #2b3a42;
  padding: 14px 16px;
  font-weight:700;
  border-bottom: 2px solid #e6edf2;
}
.table tbody td {
  padding: 12px 16px;
  color: #2b3a42;
  vertical-align: middle;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #fff;
}
.table tbody tr { border-bottom: 1px solid #eef3f6; }
.table tbody tr:nth-child(even) td { background: #fbfcfd; }
.table tbody tr:hover td { background: #f1f7fb; }

/* Card container safety */
.card .table-responsive { background: transparent; padding: 0; margin: 0; }

/* Pagination placeholder */
.pagination { display:flex; gap:8px; align-items:center; padding:12px 0; }
.pagination .page { padding:6px 10px; border-radius:6px; background:#fff; color:#2b3a42; border:1px solid #e6edf2; cursor:pointer; }
.pagination .page.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* Badges (refined) */
.badge { display:inline-block; padding:6px 10px; border-radius:16px; font-size:12px; font-weight:600; }
.badge-new{ background:#eaf7ee; color:#2e7d32; }
.badge-inprogress{ background:#fff6ea; color:#f57c00; }
.badge-completed{ background:#eaf6f0; color:#2e7d32; }
.badge-cancelled{ background:#fff2f2; color:#c62828; }

/* Narrow screens: horizontal scroll + readable rows */
@media (max-width:900px) {
  .table { min-width:900px; }
  .table thead th, .table tbody td { padding:10px; }
}

/* Sidebar navigation — визуальное оформление */
.preview-sidebar .nav-link,
.sidebar .nav-link {
  display: block;
  padding: 10px 14px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 8px;
  margin: 6px 0;
  font-weight: 600;
  transition: background .12s ease, color .12s ease, transform .08s ease;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.preview-sidebar .nav-link:hover,
.sidebar .nav-link:hover {
  background: rgba(255,255,255,0.04);
  color: var(--surface);
  transform: translateX(2px);
}

.preview-sidebar .nav-link.active,
.sidebar .nav-link.active {
  background: rgba(13,110,253,0.12);
  color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
}

/* Подзаголовки / мелкие подписи внутри ссылки (если появятся) */
.preview-sidebar .nav-link .nav-text,
.sidebar .nav-link .nav-text {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}

/* Список ссылок — колоночная структура с расстоянием */
.preview-sidebar nav,
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
}

/* Адаптив: на маленьких экранах оставить компактный список */
@media (max-width:900px) {
  .preview-sidebar .nav-link,
  .sidebar .nav-link { padding: 10px; font-size: 14px; }
}
/* Compact table layout for wide tables: reduce padding, smaller font and ellipsis */
.table-full th, .table-full td {
  padding: 6px 8px;
  font-size: 13px;
  line-height: 1.2;
  max-width: 200px;
}
.table-full th { font-weight: 600; }
.table-full td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Try to keep table in viewport: fixed layout on wide screens */
@media (min-width:1200px) {
  .table-full { table-layout: fixed; }
}

/* Reduce overall card padding to fit more on screen */
.card, .table { padding: 10px; }
/* Slightly smaller KPI and header on smaller screens */
@media (min-width:1000px){
  .preview-main { padding: 18px; }
}
/* === UX overrides: allow wrapping, slightly taller rows, prepare resizable headers === */
.table-full th, .table-full td {
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.3;
  max-width: 220px;
  white-space: normal;            /* allow wrapping */
  word-break: break-word;        /* break long words/URLs */
  overflow: visible;
  text-overflow: clip;
}

/* ensure cells wrap instead of truncating with ellipsis */
.table-full td {
  white-space: normal !important;
}

/* slightly taller rows for readability */
.table-full tbody tr {
  min-height: 46px;
  height: auto;
}

/* responsive horizontal scroll */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* resizer handle (JS will insert .col-resize-handle into TH) */
.table-full th { position: relative; }
.table-full th .col-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
  background: transparent;
}

/* small visual for active resizing (optional) */
.table-full th.resizing { outline: 1px dashed rgba(0,0,0,0.08); }

/* preserve table layout on wide screens but still allow resize */
@media (min-width:1200px) {
  .table-full { table-layout: fixed; }
}

/* make header labels wrap if long */
.table-full thead th { white-space: normal; word-wrap: break-word; }

/* ensure badges and small controls keep layout */
.table-full .badge { white-space: nowrap; }
/* === UX overrides: allow wrapping, slightly taller rows, prepare resizable headers === */
.table-full th, .table-full td {
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.3;
  max-width: 220px;
  white-space: normal;            /* allow wrapping */
  word-break: break-word;        /* break long words/URLs */
  overflow: visible;
  text-overflow: clip;
}

/* ensure cells wrap instead of truncating with ellipsis */
.table-full td {
  white-space: normal !important;
}

/* slightly taller rows for readability */
.table-full tbody tr {
  min-height: 46px;
  height: auto;
}

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* resizer handle (JS will insert .col-resize-handle into TH) */
.table-full th { position: relative; }
.table-full th .col-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
  background: transparent;
}

/* small visual for active resizing (optional) */
.table-full th.resizing { outline: 1px dashed rgba(0,0,0,0.08); }

/* preserve table layout on wide screens but still allow resize */
@media (min-width:1200px) {
  .table-full { table-layout: fixed; }
}

/* make header labels wrap if long */
.table-full thead th { white-space: normal; word-wrap: break-word; }

/* ensure badges and small controls keep layout */
.table-full .badge { white-space: nowrap; }

/* Sidebar collapsed */
body.sidebar-collapsed .preview-sidebar{width:64px;overflow:hidden}
body.sidebar-collapsed .preview-sidebar nav a{white-space:nowrap;opacity:0.95}
body.sidebar-collapsed .preview-main{margin-left:64px}
@media(max-width:900px){ body.sidebar-collapsed .preview-sidebar{display:none} }

/* Sidebar collapse/expand */
.sidebar { transition: width .18s ease, min-width .18s ease; width: 220px; }
.sidebar.collapsed { width: 64px; overflow: hidden; }
.sidebar .nav-text { transition: opacity .12s ease, transform .12s ease; opacity: 1; }
.sidebar.collapsed .nav-text { opacity: 0; transform: translateX(-6px); pointer-events: none; width: 0; max-width:0; }
.sidebar .nav-item { white-space: nowrap; }
.main-content, .content-wrapper, .preview-main { transition: margin-left .18s ease; margin-left: 220px; }
.main-content.sidebar-collapsed, .content-wrapper.sidebar-collapsed, .preview-main.sidebar-collapsed { margin-left: 64px; }

/* toggle button */
#sidebarToggleBtn {
  position: absolute;
  top: 10px;
  right: -18px;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #ffffff;
  color: #222;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  z-index: 60;
}

/* responsive: smaller screens - sidebar overlays */
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; transform: translateX(0); }
  #sidebarToggleBtn { right: 8px; top: 8px; }
}

/* === Sidebar collapse compatibility fixes === */
body.sidebar-collapsed .sidebar .nav-item { text-align: center; }

/* ensure sane defaults (can be overridden by existing theme) */

/* ==== Layout fix: use flex layout and remove extra margin gap ==== */
#app { display:flex; min-height:100vh; box-sizing:border-box; }

/* Sidebar as a flex item (fixed width) */
.sidebar { position:relative; flex: 0 0 240px; width:240px; box-sizing:border-box; }

/* Main content occupies remaining space — remove legacy margin-left rules */
.main-content, .content-wrapper, .preview-main {
  flex: 1 1 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* Collapsed state: narrow sidebar, main stays full width (no extra margin) */
body.sidebar-collapsed .sidebar,
.sidebar.collapsed {
  padding-left: 6px;
  padding-right: 6px;
  overflow: hidden;
}

/* Ensure main content doesn't shift by margin when collapsed */
body.sidebar-collapsed .main-content,
body.sidebar-collapsed .content-wrapper,
body.sidebar-collapsed .preview-main {
}

/* Hide labels inside collapsed sidebar */
.sidebar.collapsed .nav-text,
body.sidebar-collapsed .nav-text {
}

/* Keep table/card wrappers inside their container to avoid white seam */
.card { overflow: hidden; box-sizing: border-box; }

/* small safety: prevent double margins from older rules */


/* Sidebar toggle visual fix: ensure button visible and clickable */
#sidebarToggleBtn {
  position: absolute;
  top: 12px;
  right: -18px;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.04);
  background: #0f1720;
  color: #fff;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 80;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.sidebar { position: relative; } /* ensure absolute positioning anchor */
#sidebarToggleBtn:focus { outline: 2px solid rgba(13,110,253,0.18); }

/* ensure collapsed state keeps layout consistent */
body.sidebar-collapsed .main-content,
body.sidebar-collapsed .preview-main,
body.sidebar-collapsed .content-wrapper { padding-left: 20px; }

/* Strong rules for preview-sidebar and layout (override older rules if needed) */
aside.preview-sidebar, .preview-sidebar, .sidebar, #sidebar {
  min-width: 64px;
}

/* main area should be flex child and not rely on margin-left */
.main-content, .content-wrapper, .preview-main, .page-content {
}

/* collapsed visuals */
.sidebar.collapsed, aside.preview-sidebar.collapsed, .preview-sidebar.collapsed {
}
body.sidebar-collapsed .main-content,
body.sidebar-collapsed .preview-main,
body.sidebar-collapsed .content-wrapper {
}

/* hide labels in collapsed */
.sidebar.collapsed .nav-text,
.preview-sidebar.collapsed .nav-text,

/* ensure toggle anchor exists */

/* safety: prevent elements with explicit margin-left from creating gap */

/* DEBUG: force no-gap layout and ensure preview sidebar is inline */
aside.preview-sidebar, .preview-sidebar, .sidebar, #sidebar {
  position: relative !important;
  box-sizing: border-box !important;
  flex: 0 0 240px !important;
  width: 240px !important;
  margin-right: 0 !important;
}

#app { display:flex !important; align-items:stretch; }
.main-content, .content-wrapper, .preview-main, .page-content {
  flex: 1 1 auto !important;
  margin-left: 0 !important;
  padding: 20px !important;
}

/* remove any explicit left margin from main containers */
*[style*='margin-left:'] { margin-left: 0 !important; }

/* Sidebar toggle - visible button */
#sidebarToggleBtn {
  position: absolute;
  top: 12px;
  right: -18px;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  background: #0f1720;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:120;
  cursor:pointer;
}

/* Strong layout rules: use flex, remove legacy margin gap */

/* collapsed visuals */

/* hide labels on collapse */

/* safety: remove inline margin-left produced by other scripts */

/* === FORCE: fixed sidebar + collapse by body.sidebar-collapsed === */
/* make sidebar fixed so transform reliably hides it */
aside.preview-sidebar, .preview-sidebar, .sidebar, #sidebar {
  transition: transform .18s ease, width .18s ease;
}

/* main area sits to the right of fixed sidebar */
#app, body > #app {
}
.main-content, .preview-main, .content-wrapper, .page-content {
  transition: margin-left .18s ease, padding .18s ease;
}

/* collapsed — slide sidebar left but leave small visible strip (icons) */
body.sidebar-collapsed aside.preview-sidebar,
body.sidebar-collapsed .preview-sidebar,
body.sidebar-collapsed .sidebar,
body.sidebar-collapsed #sidebar {
}

/* main content adjusts */
body.sidebar-collapsed .main-content,
body.sidebar-collapsed .preview-main,
body.sidebar-collapsed .content-wrapper,
body.sidebar-collapsed .page-content {
}

/* ensure toggle button visible above everything */
#sidebarToggleBtn {
}

/* small safety for mobile/overlay */
@media (max-width:900px) {
}

/* FORCE: ensure transform-based collapse works */
aside.preview-sidebar, .preview-sidebar, .sidebar, #sidebar {
}

/* Sidebar toggle button */

/* Force transform collapse to work reliably */
aside.preview-sidebar, .preview-sidebar, .sidebar, #sidebar {
}
.main-content, .preview-main, .content-wrapper, .page-content {
}
body.sidebar-collapsed aside.preview-sidebar,
body.sidebar-collapsed .preview-sidebar,
body.sidebar-collapsed .sidebar,
body.sidebar-collapsed #sidebar {
}
body.sidebar-collapsed .main-content,
body.sidebar-collapsed .preview-main,

/* column resize handle */
.table-full th { position: relative; }
.table-full th .col-resize-handle { background: transparent; }
.table-full th.resizing { outline: 1px dashed rgba(0,0,0,0.08); }

/* column resize handle */
.table-full th { position: relative; }
.table-full th .col-resize-handle { background: transparent; width:8px; right:0; top:0; position:absolute; cursor:col-resize; }
.table-full th.resizing { outline: 1px dashed rgba(0,0,0,0.08); }

/* column resize handle */
.table-full th { position: relative; }
.table-full th .col-resize-handle { background: transparent; width:8px; right:0; top:0; position:absolute; cursor:col-resize; }
.table-full th.resizing { outline: 1px dashed rgba(0,0,0,0.08); }

/* column resize handle */
.table-full th { position: relative; }
.table-full th .col-resize-handle { background: transparent; width:8px; right:0; top:0; position:absolute; cursor:col-resize; }
.table-full th.resizing { outline: 1px dashed rgba(0,0,0,0.08); }