/* TriSpark Sales CRM — responsive behaviour */

/* Tablet / small laptop: rail sidebar by default is handled in JS (adds .ts-collapsed). */
@media (max-width: 1199.98px) {
  .ts-content { padding-inline: calc(var(--sp-4) + var(--safe-left)) calc(var(--sp-4) + var(--safe-right)); }
  .ts-topbar { padding-inline: calc(var(--sp-4) + var(--safe-left)) calc(var(--sp-4) + var(--safe-right)); }
  .ts-search { width: clamp(180px, 24vw, 280px); }
}

@media (max-width: 991.98px) {
  .ts-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .ts-leadhead__btns { margin-left: 0; }
  .ts-login { grid-template-columns: 1fr 1fr; }
  .ts-login__brand { padding: 32px; }
  .ts-login__brand h2 { font-size: 1.8rem; }
  .ts-col { flex-basis: 260px; }
}

/* Phones */
@media (max-width: 767.98px) {
  :root { --topbar-h: 54px; }
  body { font-size: .9375rem; }
  .ts-main { margin-left: 0 !important; padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom)); }

  /* Drawer */
  .ts-sidebar { width: min(300px, 86vw) !important; transform: translateX(-102%); box-shadow: var(--shadow-3); }
  html.ts-nav-open .ts-sidebar { transform: none; }
  html.ts-nav-open body { overflow: hidden; }
  html.ts-collapsed .ts-nav__label, html.ts-collapsed .ts-sidebar__brandtext { display: initial; }
  html.ts-collapsed .ts-nav__item { justify-content: flex-start; padding: 10px 12px; }
  html.ts-collapsed .ts-nav__badge { display: inline-block; }
  html.ts-collapsed .ts-nav__badge[hidden] { display: none; }
  html.ts-collapsed .ts-sidebar__brand { justify-content: flex-start; padding-inline: 16px; }
  .ts-sidebar__close { display: inline-grid; }
  .ts-topbar__menu { display: inline-grid; }
  .ts-nav__item { min-height: 48px; font-size: .95rem; }

  .ts-topbar { padding-inline: calc(var(--sp-3) + var(--safe-left)) calc(var(--sp-3) + var(--safe-right)); gap: 6px; }
  .ts-topbar__h1 { font-size: 1.05rem; }
  .ts-search { display: none; }
  .ts-topbar__actions { gap: 2px; }
  .ts-user .ts-avatar { width: 32px; height: 32px; }
  #installBtn { display: none !important; }

  .ts-content { padding: var(--sp-4) calc(var(--sp-3) + var(--safe-right)) var(--sp-6) calc(var(--sp-3) + var(--safe-left)); }
  .ts-page-head { margin-bottom: var(--sp-3); }
  .ts-page-head__actions { width: 100%; }
  .ts-page-head__actions .btn { flex: 1 1 auto; }
  .ts-page-head__actions > .form-select, .ts-page-head__actions > .form-control, .ts-page-head__actions > .ts-searchbox--sm { flex: 1 1 100%; width: 100% !important; }
  .ts-searchbox--sm { width: 100%; }
  .ts-card__head { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
  .ts-card__body { padding: var(--sp-2) var(--sp-4) var(--sp-4); }
  .ts-row, .ts-task, .ts-notif { padding-inline: var(--sp-4); }
  .ts-dl { padding-inline: var(--sp-4); }

  /* KPI: 2-column compact */
  .ts-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ts-kpi { padding: 12px; min-height: 96px; }
  .ts-kpi__value { font-size: 1.55rem; }
  .ts-kpi__label { font-size: .72rem; padding-right: 28px; }
  .ts-kpi__icon { width: 26px; height: 26px; top: 10px; right: 10px; font-size: .85rem; }

  /* Bottom navigation */
  .ts-bottomnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; height: calc(var(--bottomnav-h) + var(--safe-bottom)); padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left); background: var(--ts-navy); box-shadow: 0 -4px 16px rgba(10, 37, 64, .25); }
  .ts-bottomnav a, .ts-bottomnav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #AFC0D4; text-decoration: none; font-size: .68rem; font-weight: 600; border: 0; background: transparent; min-height: 48px; }
  .ts-bottomnav i { font-size: 1.3rem; line-height: 1; }
  .ts-bottomnav .is-active { color: #fff; }
  .ts-bottomnav .is-active i { color: var(--ts-yellow); }
  .ts-bottomnav .is-active::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--ts-yellow); }
  .ts-bottomnav__dot { position: absolute; top: 6px; left: calc(50% + 8px); background: var(--ts-error); color: #fff; font-size: .6rem; border-radius: 99px; min-width: 16px; height: 16px; display: grid; place-items: center; padding: 0 4px; font-weight: 800; }
  .ts-bottomnav__dot[hidden] { display: none; }

  /* Toasts sit above the bottom nav */
  .ts-toasts { top: auto; bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 10px); right: 12px; left: 12px; width: auto; }

  /* Tables → cards handled in markup (d-none d-md-block). Touch targets: */
  .btn-sm { min-height: 38px; }
  .form-select-sm, .form-control-sm { min-height: 40px; font-size: 1rem; }
  .form-control, .form-select { font-size: 1rem; } /* prevents iOS zoom on focus */

  /* Filters collapse on phones */
  .ts-filters__panel { display: none; }
  .ts-filters__panel.is-open { display: block; }
  .ts-filters__grid { grid-template-columns: 1fr 1fr; }

  /* Bottom-sheet dialogs */
  .modal.ts-sheet .modal-dialog { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; max-width: none; width: 100%; transform: translateY(100%); transition: transform .25s ease; }
  .modal.ts-sheet.show .modal-dialog { transform: none; }
  .modal.ts-sheet .modal-content { border-radius: 18px 18px 0 0; max-height: 92dvh; max-height: 92vh; display: flex; }
  .modal.ts-sheet .modal-body { overflow-y: auto; padding-bottom: 16px; }
  .modal.ts-sheet .modal-header::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; background: #CBD5E1; border-radius: 4px; }
  .modal.ts-sheet .modal-header { position: relative; padding-top: 22px; }
  .modal.ts-sheet .modal-footer { padding-bottom: calc(12px + var(--safe-bottom)); }
  .modal.ts-sheet .modal-footer .btn { flex: 1; }
  .modal.ts-full .modal-dialog { margin: 0; max-width: none; min-height: 100%; }
  .offcanvas { --bs-offcanvas-width: 100vw; }

  /* Lead detail: sticky action bar thumb-reachable */
  .ts-actionbar { position: fixed; left: 0; right: 0; bottom: calc(var(--bottomnav-h) + var(--safe-bottom)); z-index: 1040; margin: 0; padding: 8px 8px; background: #fff; border-top: 1px solid var(--ts-border); box-shadow: 0 -4px 14px rgba(10, 37, 64, .1); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .ts-actionbar .btn { flex-direction: column; gap: 2px; font-size: .68rem; padding: 6px 2px; min-height: 52px; line-height: 1.15; }
  .ts-actionbar .btn i { font-size: 1.2rem; }
  .ts-actionbar #actAssign:not([hidden]) { grid-column: span 4; flex-direction: row; min-height: 40px; font-size: .8rem; }
  body[data-page="lead"] .ts-main { padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 76px); }
  .ts-leadhead__name { font-size: 1.15rem; }
  .ts-leadhead__id { flex-basis: 100%; }
  .ts-leadhead__btns { position: absolute; top: 12px; right: 12px; }
  .ts-leadhead { position: relative; }

  /* Form: sticky save */
  .ts-formbar { position: fixed; left: 0; right: 0; bottom: calc(var(--bottomnav-h) + var(--safe-bottom)); z-index: 1040; background: #fff; border-top: 1px solid var(--ts-border); padding: 10px 12px; margin: 0; box-shadow: 0 -4px 14px rgba(10, 37, 64, .1); }
  .ts-formbar .btn { min-height: 46px; }
  .ts-formbar #saveBtn { flex: 1; }
  body[data-page="lead_form"] .ts-main { padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 90px); }

  .ts-steps li { padding: 6px 10px; font-size: .74rem; flex: none; }
  .ts-drop { padding: 28px 14px; }
  .ts-pipebar { grid-template-columns: 96px 1fr 30px; }
  .ts-task { grid-template-columns: 1fr; }
  .ts-task__actions { justify-content: flex-start; }
  .ts-task__actions .btn { flex: 1 1 calc(50% - 6px); }
  .ts-tl__body { padding: 8px 12px; }
  .ts-drawer-info { grid-template-columns: 1fr; }

  /* Login */
  .ts-login { grid-template-columns: 1fr; }
  .ts-login__brand { display: none; }
  .ts-login__panel { justify-content: flex-start; padding: calc(28px + var(--safe-top)) 20px calc(24px + var(--safe-bottom)); }
  .ts-login__mobilebrand { display: flex; }
}

@media (min-width: 768px) {
  .ts-filters__panel { display: block !important; }
}

@media (max-width: 380px) {
  .ts-kpi__value { font-size: 1.35rem; }
  .ts-filters__grid { grid-template-columns: 1fr; }
}

/* Print: lists only */
@media print {
  .ts-sidebar, .ts-topbar, .ts-bottomnav, .ts-toasts, .ts-actionbar, .ts-formbar { display: none !important; }
  .ts-main { margin: 0 !important; }
}