/* ══════════════════════════════════════════════════════════════
   MOBILE.CSS — Complete mobile redesign for ProfTutoring
   Loaded AFTER all inline panel CSS to override desktop styles.
   Breakpoints: 768px (phone), 480px (small phone), 375px (SE)
══════════════════════════════════════════════════════════════ */

/* ╔══════════════════════════════════════════════════════════╗
   ║  1. BASE & BODY                                         ║
   ╚══════════════════════════════════════════════════════════╝ */
@media (max-width: 768px) {

html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: 0;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
:root { --topbar-h: 50px; }

/* Prevent iOS input zoom */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"],
input[type="time"], input[type="search"], input[type="url"],
select, textarea,
.login-input, .lf-input, .lc-input, .inp, .sel, .ta,
.fi, .fs, .ft, .bv-search, .field input, .field select, .field textarea {
  font-size: 16px !important;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  2. LOGIN PAGE                                           ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Hide big brand panel in split login (login.html) */
.login-split > .login-brand {
  display: none;
}
.login-split {
  background: linear-gradient(160deg, #1A1713 0%, #2C2620 45%, #3D352B 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
/* Mobile brand header above login card */
.mobile-login-brand {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}
.mlb-mark {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--g1, #F9C843), var(--g2, #F07020));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(240,112,32,.3);
}
.mobile-login-brand-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.3px;
}
.mobile-login-brand-text em {
  font-style: italic;
  color: #F9C843;
}
.mobile-login-brand-sub {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  font-weight: 500;
  letter-spacing: .3px;
}
.login-form-panel {
  width: 100%;
  max-width: 400px;
  padding: 32px 24px 28px;
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.05);
  flex-shrink: 0;
  height: auto;
  min-height: auto;
  flex: none;
}
.login-card {
  max-width: 100%;
}
.login-card-header {
  margin-bottom: 28px;
  text-align: center;
}
.login-card-title {
  font-size: 22px;
}
.login-card-sub {
  font-size: 13px;
}
.login-field {
  margin-bottom: 14px;
}
.login-input {
  padding: 12px 12px 12px 40px;
  border-radius: 12px;
}
.login-btn {
  padding: 14px;
  border-radius: 12px;
  font-size: 15px;
}
.login-row {
  margin-bottom: 20px;
}
.login-footer {
  margin-top: 24px;
}
.role-picker-grid {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.role-picker-btn {
  padding: 14px 12px;
  border-radius: 12px;
  font-size: 14px;
}

/* Tutor / Salesman login panels */
.login-brand-panel {
  display: none;
}
#loginScreen {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
}
.login-form-panel:only-child,
#loginScreen .login-form-panel {
  width: 100%;
  max-width: 400px;
  padding: 32px 20px 24px;
  border-radius: 20px;
}
/* Salesman login card */
.lc {
  padding: 32px 22px 26px;
  border-radius: 22px;
  max-width: calc(100% - 24px);
  margin: 0 auto;
  box-shadow: 0 16px 64px rgba(26,23,19,.2);
}
.lc-h { font-size: 24px; }
.lc-sub { font-size: 12px; margin-bottom: 24px; }

/* ╔══════════════════════════════════════════════════════════╗
   ║  3. TOPBAR — all panels                                  ║
   ╚══════════════════════════════════════════════════════════╝ */

.topbar {
  height: 50px;
  min-height: 50px;
  padding: 0 12px;
  gap: 8px;
}
.brand { gap: 8px; }
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  font-size: 13px;
}
.brand-mark svg { width: 13px; height: 13px; }
.brand-name { font-size: 15px; }
.brand-sep, .brand-role { display: none; }

/* Topbar buttons */
.icon-btn { width: 32px; height: 32px; border-radius: 8px; }
/* Hide live-pills on mobile — too much space */
.live-pill { display: none !important; }
.live-dot { width: 6px; height: 6px; }
.topbar-right { gap: 6px; align-items: center; }

/* User area */
.user-btn .u-name, .user-btn .user-name { display: none; }
.user-btn { padding: 2px; border-radius: 50%; }
.u-av { width: 28px; height: 28px; font-size: 10px; }
.logout-btn, .logout { padding: 4px 8px; font-size: 10px; border-radius: 6px; }
/* Inline-styled logout button in coordinator topbar */
.topbar-right > button:last-child {
  padding: 5px 10px !important;
  font-size: 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: rgba(0,0,0,.03) !important;
  color: var(--ink50, #6B6459) !important;
  white-space: nowrap;
}

/* Stats strip — always hide on mobile */
.stats-strip { display: none; }

/* ╔══════════════════════════════════════════════════════════╗
   ║  4. TAB NAVIGATION — coordinator & HR                    ║
   ╚══════════════════════════════════════════════════════════╝ */

.tab-nav {
  padding: 4px 8px;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--white, #fff);
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: stretch;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: 8px 14px;
  font-size: 11.5px;
  white-space: nowrap;
  flex-shrink: 0;
  flex: 1;
  gap: 5px;
  border-radius: 10px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
}
.tab-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.tab-count { font-size: 9px; padding: 2px 6px; border-radius: 99px; }

/* Salesman tabbar — bigger, scrollable, visible */
.tabbar {
  padding: 0 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  gap: 0;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar-wrap {
  position: relative;
}
.tabbar-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 32px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95));
  pointer-events: none;
  z-index: 2;
  opacity: 1 !important;
}
.tab {
  padding: 0 14px;
  font-size: 11px;
  height: 42px;
  gap: 5px;
  flex-shrink: 0;
}
.tab svg { width: 14px; height: 14px; }

/* ╔══════════════════════════════════════════════════════════╗
   ║  5. COORDINATOR: Script Panel Overlay                    ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Booking view: single column */
.app {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

/* Hide script panel by default on mobile */
.script-panel {
  display: none;
}

/* Show mobile script toggle */
.mobile-script-toggle {
  display: flex !important;
}

/* Script panel as full-screen overlay */
.script-panel.mobile-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 300;
  width: 100%;
  height: 100dvh;
  background: #FDFBF7;
  border-right: none;
  padding: 0;
  overflow-y: auto;
  animation: mobileSlideUp .3s cubic-bezier(.4,0,.2,1);
}
@keyframes mobileSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Script close button */
.mobile-script-close {
  display: none;
}
.script-panel.mobile-open .mobile-script-close {
  display: flex !important;
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  padding: 14px 16px;
  padding-top: calc(14px + env(safe-area-inset-top));
  background: linear-gradient(135deg, #1A1713, #2C2620);
  border: none;
  color: #fff;
  font: 700 14px/1 'DM Sans', sans-serif;
  cursor: pointer;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Script content on mobile */
.script-panel.mobile-open .panel-header {
  padding: 12px 14px;
}
.script-panel.mobile-open .panel-label {
  font-size: 16px;
}
.section-card {
  margin-bottom: 6px;
  border-radius: 10px;
}
.section-head {
  padding: 10px 12px;
  gap: 8px;
}
.sec-title { font-size: 12px; flex: 1; min-width: 0; }
.sec-icon { width: 26px; height: 26px; min-width: 26px; border-radius: 6px; font-size: 13px; line-height: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sec-accent { min-height: 14px; }
.section-card.open .section-body {
  padding: 14px 12px 16px;
}

/* Chat bubbles compact */
.sc-you, .sc-parent { padding: 10px 12px; font-size: 12.5px; border-radius: 10px; margin-bottom: 8px; }
.sc-tip { padding: 10px; border-radius: 10px; margin-bottom: 8px; }
.sc-uwaga { padding: 10px; margin-bottom: 8px; }
.sc-alt { padding: 10px; border-radius: 10px; margin-bottom: 8px; }
.sc-parent-label { font-size: 9px; }

/* Branch cards single column */
.sc-branch-cards {
  grid-template-columns: 1fr !important;
  gap: 6px;
}
.sc-branch-card {
  padding: 10px 12px;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  6. COORDINATOR: Form Panel                              ║
   ╚══════════════════════════════════════════════════════════╝ */

.form-panel {
  padding: 14px 12px 24px;
  border-left: none;
}
.form-panel-title { font-size: 16px; }
.form-panel-sub { font-size: 11px; }
.frow.c2, .frow.c3 { grid-template-columns: 1fr; }
.fset-legend { font-size: 9px; }

/* Slot picker */
.slot-box { border-radius: 12px; }
.slot-filters { padding: 6px 10px; gap: 4px; }
.sf { font-size: 10px; padding: 4px 8px; }
.slot-item { padding: 8px 10px; }

/* CTA button */
.cta { padding: 14px 16px; border-radius: 12px; font-size: 14px; }

/* ╔══════════════════════════════════════════════════════════╗
   ║  7. VIEW CONTAINERS — height fix                         ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Coordinator/HR views (topbar 50 + tab-nav ~40) */
.view-container,
.app,
.bookings-view,
.tutors-view,
.leads-view,
.szkolenie-view {
  height: calc(100dvh - 50px - 40px);
}

/* Salesman views — fix scrolling */
.views {
  height: calc(100dvh - 50px - 42px) !important;
  flex: none !important;
  overflow: hidden;
  position: relative;
}
.views .view.on,
.views .view[style*="flex"] {
  position: absolute;
  inset: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding: 10px !important;
  display: block !important;
}
.views .view.on > * {
  margin-bottom: 10px;
}
/* Prevent .card overflow:hidden from clipping scrollable content */
.views .view.on > .card {
  overflow: visible !important;
  max-height: none !important;
}
.views .view.on .card > div[style*="overflow"],
.views .view.on .card > div[style*="max-height"] {
  overflow: visible !important;
  max-height: none !important;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  8. TABLES → MOBILE CARDS                               ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── 8a. Coordinator: Bookings Table ─────────────────────── */

.bv-table,
.bv-table thead,
.bv-table tbody,
.bv-table th,
.bv-table td,
.bv-table tr {
  display: block;
}
.bv-table { border-spacing: 0; }
.bv-table thead { display: none; }

.bv-table tbody tr {
  background: var(--white, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  margin-bottom: 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(26,23,19,.04);
  position: relative;
  transform: none;
  overflow: hidden;
}
.bv-table tbody tr:hover { transform: none; }
.bv-table td {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
/* Row color accents */
.bv-table tbody tr::before { display: none; }
.bv-row-ok { border-left: 4px solid #1DB954; }
.bv-row-cancel { border-left: 4px solid #E53E3E; opacity: .6; }
.bv-row-pending { border-left: 4px solid #F07020; }

/* Card top section: name + date + status */
/* Name cell (td 1) */
.bv-table td:nth-child(1) {
  padding: 12px 14px 0;
}
.bv-name { font-size: 14px; font-weight: 700; }
.bv-sub { font-size: 11px; color: var(--ink60, #6B6459); margin-top: 1px; }

/* Date (td 2) + Subject (td 3) + Tutor (td 4): info row */
.bv-table td:nth-child(2),
.bv-table td:nth-child(3),
.bv-table td:nth-child(4) {
  padding: 2px 14px;
  font-size: 12px;
  color: var(--ink60, #6B6459);
}
.bv-table td:nth-child(2) { padding-top: 8px; }
.bv-date-main { font-size: 12px; font-weight: 600; display: inline; }
.bv-date-time { font-size: 12px; font-weight: 600; color: var(--g2, #F07020); display: inline; margin-left: 4px; }
.bv-date-time::before { content: '·'; margin-right: 4px; color: var(--ink30, #C2BAB0); }

/* Status pills (td 5 + td 6): inline row */
.bv-table td:nth-child(5),
.bv-table td:nth-child(6) {
  padding: 4px 14px 0;
  display: inline-block;
}
.status-pill { font-size: 10px; padding: 3px 10px; border-radius: 99px; }

/* Actions (td 7): bottom bar */
.bv-table td:nth-child(7) {
  padding: 8px 14px 10px;
  margin-top: 6px;
  border-top: 1px solid rgba(0,0,0,.04);
  background: rgba(0,0,0,.01);
}
.bv-actions { gap: 6px; justify-content: flex-start !important; }
.bva { width: 34px; height: 34px; border-radius: 10px; }

/* Header toolbar */
.bv-header { padding: 10px 12px 6px; }
.bv-header-top { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.bv-header-title { font-size: 17px; }
.bv-header-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}
.bv-header-btn {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  font-size: 11px;
  white-space: nowrap;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bv-header-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
/* Toolbar */
.bv-toolbar {
  padding: 8px 12px;
  gap: 6px;
  flex-direction: column;
  align-items: stretch;
}
.bv-search-wrap { width: 100%; }
.bv-search { font-size: 14px; }
/* Filter chips row — horizontal scroll */
.bv-toolbar > div[style*="flex"] {
  overflow-x: auto;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 4px !important;
  padding-bottom: 2px;
}
.bv-toolbar > div[style*="flex"]::-webkit-scrollbar { display: none; }
.filter-chip {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 11px;
}
/* Subject/tutor/date filter selects */
.bv-toolbar > .sel,
.bv-toolbar > .inp,
.bv-toolbar > select,
.bv-toolbar > input[type="date"] {
  width: 100%;
  max-width: none !important;
}
/* Tutor header stats */
.t-header-stat {
  padding: 3px 8px;
  font-size: 10px;
  gap: 4px;
}
.t-header-stat-count { font-size: 12px; }
#tutorHeaderStats {
  flex-wrap: wrap;
  gap: 4px !important;
}
/* Tutor filter chips — horizontal scroll */
.t-filter-chips {
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 4px;
}
.t-filter-chips::-webkit-scrollbar { display: none; }
.t-filter-chip {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 11px;
  white-space: nowrap;
}
/* Tutor subject filter */
#tutorSubjFilter { width: 100%; max-width: none !important; }
/* Lead header stats */
.ld-header { padding: 10px 12px 6px; }
.ld-header-top { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.ld-header-stats { flex-wrap: wrap; gap: 4px; }
.ld-stat { padding: 3px 8px; font-size: 10px; gap: 4px; }
.ld-stat-count { font-size: 12px; }

/* ── 8b. Coordinator: Tutors Table ───────────────────────── */

.tutors-table,
.tutors-table thead,
.tutors-table tbody,
.tutors-table th,
.tutors-table td,
.tutors-table tr {
  display: block;
}
.tutors-table { border-spacing: 0; }
.tutors-table thead { display: none; }

.tutors-table tbody tr {
  background: var(--white, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  margin-bottom: 10px;
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  box-shadow: 0 2px 8px rgba(26,23,19,.04);
  position: relative;
}
.tutors-table td {
  background: transparent;
  border: none;
  padding: 0;
  position: static;
  left: auto;
  right: auto;
  z-index: auto;
}
.tutors-table .t-freeze-av,
.tutors-table .t-freeze-name,
.tutors-table .t-freeze-last {
  position: static;
  left: auto;
  right: auto;
}
/* Avatar */
.tutor-avatar { width: 38px; height: 38px; font-size: 13px; }
/* Name takes remaining width */
.tutors-table .t-freeze-name { flex: 1; min-width: 120px; }
.tutor-name { font-size: 13.5px; }
.tutor-sub { font-size: 10.5px; }
/* Hide calendly link inside name cell on mobile */
.tutors-table .cal-link {
  display: none;
}
/* Hide extra dynamic columns (beyond avatar, name, subjects, phone, actions) */
.tutors-table td:nth-child(n+5):not(.t-freeze-last) {
  display: none;
}
/* Phone column (td 4): full width */
.tutors-table td:nth-child(4) {
  width: 100%;
  font-size: 13px;
}
/* Subject pills (td 3): full width */
.tutors-table td:nth-child(3) {
  width: 100%;
}
.t-subj-pills { gap: 3px; flex-wrap: wrap; }
.t-subj-pill { font-size: 9.5px; padding: 2px 6px; }
/* Status dot */
.t-status-dot { width: 8px; height: 8px; }
/* Actions: full width */
.tutors-table .t-freeze-last {
  width: 100%;
  border-top: 1px solid rgba(0,0,0,.05);
  padding-top: 8px;
  margin-top: 2px;
}
.tutor-act-btn { padding: 6px 10px; font-size: 10.5px; }
/* Row variants */
.t-active { border-left: 3px solid #1DB954; }
.t-inactive { border-left: 3px solid #E53E3E; }

/* ── 8c. Coordinator: Leads Table ────────────────────────── */

.leads-table,
.leads-table thead,
.leads-table tbody,
.leads-table th,
.leads-table td,
.leads-table tr {
  display: block;
}
.leads-table { border-spacing: 0; }
.leads-table thead { display: none; }

.leads-table tbody tr {
  background: var(--white, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  margin-bottom: 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(26,23,19,.04);
  overflow: hidden;
}
.leads-table td {
  background: transparent;
  border: none;
  padding: 3px 14px;
  position: static;
  left: auto;
  right: auto;
  z-index: auto;
  font-size: 12px;
}
.leads-table .l-freeze {
  position: static;
  right: auto;
}
/* Name cell (td 1) */
.leads-table td:nth-child(1) {
  padding: 12px 14px 4px;
}
.ld-name { font-size: 14px; font-weight: 700; letter-spacing: -.2px; }
.ld-name-sub { font-size: 10.5px; color: var(--ink50, #6B6459); }
/* Date (td 2) */
.leads-table td:nth-child(2) { padding: 2px 14px; }
.ld-date { font-size: 11px; color: var(--ink50, #6B6459); }
/* Phone (td 3) */
.leads-table td:nth-child(3) { padding: 4px 14px 2px; }
.ld-phone-link { font-size: 13px; font-weight: 600; color: var(--g2, #F07020); }
/* Email (td 4) */
.leads-table td:nth-child(4) { padding: 2px 14px 4px; }
.ld-email-link { font-size: 11px; max-width: none; color: var(--ink50, #6B6459); }
/* Status select (td 5) */
.leads-table td:nth-child(5) { padding: 6px 14px; }
.status-sel { font-size: 12px; padding: 8px 10px; width: 100%; border-radius: 10px; }
/* Actions cell (td 6): bottom bar */
.leads-table td:nth-child(6) {
  padding: 8px 14px 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(0,0,0,.04);
  background: rgba(0,0,0,.015);
}
.ld-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ld-btn { font-size: 10px; }
.ld-btn-call, .ld-btn-wa, .ld-btn-fu {
  width: 36px; height: 36px; border-radius: 10px;
}
/* Row variants */
.ls-umowiony { border-left: 3px solid #1DB954; }
.ls-oddzwonic { border-left: 3px solid #2B6CB0; }
.ls-nowy { border-left: 3px solid #F07020; }
.ls-rezygnacja { border-left: 3px solid #E53E3E; opacity: .65; }

/* Lead header */
.ld-header { padding: 12px; }
.ld-header-title { font-size: 18px; }
.ld-header-stats { gap: 4px; flex-wrap: wrap; }
.ld-stat { padding: 4px 10px; font-size: 10px; }

/* ── 8d. Salesman: Booking Table ─────────────────────────── */

.bk-table,
.bk-table thead,
.bk-table tbody,
.bk-table th,
.bk-table td,
.bk-table tr {
  display: block;
}
.bk-table { border-spacing: 0; }
.bk-table thead { display: none; }
.bk-table tbody tr {
  background: var(--white, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  margin-bottom: 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(26,23,19,.04);
  overflow: hidden;
}
.bk-table td {
  background: transparent;
  border: none;
  padding: 3px 14px;
  font-size: 12.5px;
}
.bk-table td:first-child { padding-top: 12px; }
.bk-table td::before { display: none; }
/* Time cell – accent color */
.bk-c-time { font-size: 16px; }
.bk-c-name { font-size: 14px; font-weight: 600; }
.bk-c-badge { font-size: 10px; border-radius: 99px; }
/* Actions cell — last td */
.bk-table td:last-child {
  padding: 8px 14px 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(0,0,0,.04);
  background: rgba(0,0,0,.01);
}
.bk-btn { width: 32px; height: 32px; border-radius: 10px; }
.bk-acts { gap: 6px; }
/* Status variants */
.bk-table tr.bk-conf { border-left: 4px solid #34D399; }
.bk-table tr.bk-unc { border-left: 4px solid var(--g2, #F07020); }
.bk-table tr.bk-can { border-left: 4px solid #EF4444; opacity: .55; }

/* (Generic .tbl styles moved to section 8f below) */

/* ── 8e. Tutor Panel: Students Table → Cards ──────────────── */
/* 9 columns: Uczen | Klasa | Przedmiot | Terminy | Umowa | Rodzic | Meet | Kontakt | Akcje */

.tbl-wrap table,
.tbl-wrap table thead,
.tbl-wrap table tbody,
.tbl-wrap table th,
.tbl-wrap table td,
.tbl-wrap table tr {
  display: block;
}
.tbl-wrap table { border-spacing: 0; width: 100%; }
.tbl-wrap table thead { display: none; }
.tbl-wrap {
  overflow: visible;
  border: none;
}
.tbl-wrap table tbody tr {
  background: var(--white, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  margin-bottom: 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(26,23,19,.04);
  overflow: hidden;
}
.tbl-wrap table td {
  background: transparent;
  border: none;
  padding: 3px 14px;
  font-size: 12.5px;
}
/* Student name (td 1): prominent */
.tbl-wrap table td:nth-child(1) {
  padding-top: 12px;
  font-size: 14px;
  font-weight: 600;
}
/* Klasa (td 2) — muted */
.tbl-wrap table td:nth-child(2) {
  font-size: 11px;
  color: var(--ink50, #999);
}
/* Akcje (td 9): bottom bar */
.tbl-wrap table td:nth-child(9) {
  border-top: 1px solid rgba(0,0,0,.04);
  padding: 8px 14px 10px;
  margin-top: 4px;
  background: rgba(0,0,0,.01);
  white-space: normal;
}
.tbl-wrap table td:nth-child(9) .btn {
  font-size: 11px;
  padding: 6px 10px;
}

/* ── 8f. Generic salesman .tbl (fallback scroll) ────────── */

/* Default: horizontal scroll for unknown wide tables */
.tbl {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.tbl::-webkit-scrollbar { height: 4px; }
.tbl::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 4px; }
.tbl td, .tbl th {
  font-size: 12px;
  padding: 8px 10px;
}

/* ── 8f-i. Salesman: Umowy → Mobile Cards ──────────────── */
/* 11 cols: Klient|ID|Uczeń|Przedmioty|Korepetytor|Start|Abonament|Dz.pł.|Raty|Lekcje|Status */

#v-umowy .tbl,
#v-umowy .tbl thead,
#v-umowy .tbl tbody,
#v-umowy .tbl th,
#v-umowy .tbl td,
#v-umowy .tbl tr {
  display: block;
}
#v-umowy .tbl {
  overflow-x: visible;
  border-spacing: 0;
}
#v-umowy .tbl thead { display: none; }
#v-umowy .card > div[style*="overflow"] {
  overflow: visible !important;
  max-height: none !important;
}
#v-umowy .tbl tbody tr.umowa-row {
  background: var(--white, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  margin: 0 10px 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(26,23,19,.04);
  overflow: hidden;
  animation: none;
}
#v-umowy .tbl td {
  background: transparent !important;
  border: none !important;
  border-right: none !important;
  border-left: none !important;
  padding: 2px 12px;
  font-size: 12px;
  position: static !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: normal;
  text-align: left !important;
}
/* td1: Klient — prominent */
#v-umowy .tbl td:nth-child(1) {
  padding: 10px 12px 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #1A1713);
}
/* td2: ID — small muted inline */
#v-umowy .tbl td:nth-child(2) {
  font-size: 10px !important;
  color: var(--ink30, #C2BAB0) !important;
  padding-top: 0;
}
/* td3: Uczeń */
#v-umowy .tbl td:nth-child(3) {
  font-size: 12px;
}
/* td4: Przedmioty */
#v-umowy .tbl td:nth-child(4) {
  color: var(--ink50, #6B6459);
}
/* td5: Korepetytor */
#v-umowy .tbl td:nth-child(5) {
  color: var(--g2, #F07020);
  font-weight: 500;
}
/* td6: Start date */
#v-umowy .tbl td:nth-child(6) {
  font-size: 11px;
  color: var(--ink50, #6B6459);
}
/* td7: Abonament — highlight */
#v-umowy .tbl td:nth-child(7) {
  font-weight: 600;
  color: var(--ink, #1A1713);
}
/* td8,9,10: Dz.pł, Raty, Lekcje — inline compact row */
#v-umowy .tbl td:nth-child(8),
#v-umowy .tbl td:nth-child(9),
#v-umowy .tbl td:nth-child(10) {
  display: inline-block !important;
  width: auto !important;
  padding: 2px 6px;
  font-size: 10px;
  color: var(--ink50, #6B6459);
}
#v-umowy .tbl td:nth-child(8)::before { content: 'Dz.pł: '; font-size: 9px; color: var(--ink30); }
#v-umowy .tbl td:nth-child(9)::before { content: 'Raty: '; font-size: 9px; color: var(--ink30); }
#v-umowy .tbl td:nth-child(10)::before { content: 'Lekcje: '; font-size: 9px; color: var(--ink30); }
/* td11: Status — bottom action bar */
#v-umowy .tbl td:nth-child(11) {
  padding: 8px 12px 10px !important;
  margin-top: 4px;
  border-top: 1px solid rgba(0,0,0,.04) !important;
  background: rgba(0,0,0,.015) !important;
}
#v-umowy .tbl td:nth-child(11) .umowa-status-select {
  font-size: 12px !important;
  padding: 6px 8px;
  width: 100%;
  margin-bottom: 6px;
  border-radius: 8px;
}
#v-umowy .tbl td:nth-child(11) .umowa-doc-btn {
  min-height: 30px;
}
/* Status color accents — applied via JS class on tr.umowa-row */
#v-umowy .tbl tbody tr { border-left: 4px solid transparent; }

/* ── 8f-ii. Salesman: Klienci → Mobile Cards ───────────── */
/* 11 cols: Klient|Uczeń|Kontakt|Przedmioty|Abonament|Dz.pł.|Raty|Płatność|Status|Korepetytor|Akcje */

#v-klienci .tbl,
#v-klienci .tbl thead,
#v-klienci .tbl tbody,
#v-klienci .tbl th,
#v-klienci .tbl td,
#v-klienci .tbl tr {
  display: block;
}
#v-klienci .tbl {
  overflow-x: visible;
  border-spacing: 0;
}
#v-klienci .tbl thead { display: none; }
#v-klienci .card > div[style*="overflow"] {
  overflow: visible !important;
  max-height: none !important;
}
#v-klienci .tbl tbody tr {
  background: var(--white, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  margin: 0 10px 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(26,23,19,.04);
  overflow: hidden;
  animation: none;
}
#v-klienci .tbl td {
  background: transparent !important;
  border: none !important;
  border-right: none !important;
  border-left: none !important;
  padding: 2px 12px;
  font-size: 12px;
  position: static !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: normal;
  text-align: left !important;
}
/* td1: Klient — prominent */
#v-klienci .tbl td:nth-child(1) {
  padding: 10px 12px 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #1A1713);
}
/* td2: Uczeń */
#v-klienci .tbl td:nth-child(2) {
  font-size: 12px;
  padding-bottom: 4px;
}
/* td3: Kontakt (phone) */
#v-klienci .tbl td:nth-child(3) {
  font-size: 13px;
}
#v-klienci .tbl td:nth-child(3) a {
  color: var(--g2, #F07020) !important;
  font-weight: 600;
  text-decoration: none;
}
/* td4: Przedmioty */
#v-klienci .tbl td:nth-child(4) {
  color: var(--ink50, #6B6459);
  font-size: 11px;
}
/* td5: Abonament */
#v-klienci .tbl td:nth-child(5) {
  font-weight: 600;
  color: var(--ink, #1A1713);
}
/* td6,7: Dz.pł, Raty — inline */
#v-klienci .tbl td:nth-child(6),
#v-klienci .tbl td:nth-child(7) {
  display: inline-block !important;
  width: auto !important;
  padding: 1px 6px;
  font-size: 10px;
  color: var(--ink50, #6B6459);
}
#v-klienci .tbl td:nth-child(6)::before { content: 'Dz.pł: '; font-size: 9px; color: var(--ink30); }
#v-klienci .tbl td:nth-child(7)::before { content: 'Raty: '; font-size: 9px; color: var(--ink30); }
/* td8: Płatność — badge */
#v-klienci .tbl td:nth-child(8) {
  padding: 4px 12px;
}
#v-klienci .tbl td:nth-child(8) .overdue-badge {
  font-size: 10px !important;
}
/* td9: Status */
#v-klienci .tbl td:nth-child(9) {
  padding: 4px 12px;
}
/* td10: Korepetytor */
#v-klienci .tbl td:nth-child(10) {
  font-size: 11px;
  color: var(--g2, #F07020);
  font-weight: 500;
}
/* td11: Akcje — bottom bar */
#v-klienci .tbl td:nth-child(11) {
  padding: 8px 12px 10px !important;
  margin-top: 4px;
  border-top: 1px solid rgba(0,0,0,.04) !important;
  background: rgba(0,0,0,.015) !important;
}
#v-klienci .kl-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
#v-klienci .kl-actions .ia {
  min-height: 32px;
  min-width: 32px;
  border-radius: 8px;
}
/* Overdue row highlight */
#v-klienci .tbl tr.row-overdue {
  border-left: 4px solid var(--red, #C53030);
}
#v-klienci .tbl tr.row-overdue td {
  background: transparent !important;
}
#v-klienci .tbl tr.row-overdue td:first-child {
  border-left: none !important;
}

/* ── 8f-iii. Salesman: Platnosci → Mobile Cards ────────── */
/* Structure: checkbox | Klient(sticky) | Przedmiot | Kwota | Status | Start | Koniec | 12 months | Akcje */

#v-platnosci .tbl,
#v-platnosci .tbl thead,
#v-platnosci .tbl tbody,
#v-platnosci .tbl th,
#v-platnosci .tbl td,
#v-platnosci .tbl tr {
  display: block;
}
#v-platnosci .tbl {
  overflow-x: visible;
  border-spacing: 0;
}
#v-platnosci .tbl thead { display: none; }
#v-platnosci .pl-table-wrap,
#v-platnosci .card > div[style*="overflow"],
#v-platnosci #pl-grid {
  overflow: visible !important;
  max-height: none !important;
}
#v-platnosci .tbl tbody tr {
  background: var(--white, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(26,23,19,.05);
  overflow: hidden;
  position: relative;
}
#v-platnosci .tbl td {
  background: transparent !important;
  border: none !important;
  border-right: none !important;
  border-left: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: normal;
  text-align: left !important;
}
/* td1: Checkbox — hide on mobile */
#v-platnosci .tbl td:nth-child(1) {
  display: none;
}
/* td2: Klient — name at top, full width */
#v-platnosci .tbl td:nth-child(2) {
  width: 100%;
  padding: 12px 14px 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #1A1713);
}
/* td3: Przedmiot + td4: Kwota — side by side */
#v-platnosci .tbl td:nth-child(3) {
  display: inline-block !important;
  padding: 2px 4px 2px 14px;
  font-size: 12px;
  color: var(--ink50, #6B6459);
  width: auto !important;
}
#v-platnosci .tbl td:nth-child(4) {
  display: inline-block !important;
  padding: 2px 14px 2px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--g2, #F07020);
  width: auto !important;
}
#v-platnosci .tbl td:nth-child(4)::before {
  content: '· ';
  color: var(--ink30, #C2BAB0);
}
/* td5: Status */
#v-platnosci .tbl td:nth-child(5) {
  padding: 4px 14px;
  font-size: 11px;
  width: 100%;
}
/* td6: Start + td7: Koniec — inline pair */
#v-platnosci .tbl td:nth-child(6) {
  display: inline-block !important;
  padding: 2px 4px 2px 14px;
  font-size: 10px;
  color: var(--ink50, #6B6459);
  width: auto !important;
}
#v-platnosci .tbl td:nth-child(6)::before { content: 'Od: '; font-size: 9px; color: var(--ink30); }
#v-platnosci .tbl td:nth-child(7) {
  display: inline-block !important;
  padding: 2px 14px 2px 4px;
  font-size: 10px;
  color: var(--ink50, #6B6459);
  width: auto !important;
}
#v-platnosci .tbl td:nth-child(7)::before { content: 'Do: '; font-size: 9px; color: var(--ink30); }

/* ── Month grid: visual payment timeline ── */
/* Wrapper for all month cells */
#v-platnosci .tbl td:nth-child(n+8):not(:last-child) {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  width: auto !important;
  padding: 4px 2px 2px;
  vertical-align: top;
}
/* First month cell — left padding for alignment */
#v-platnosci .tbl td:nth-child(8) {
  padding-left: 14px;
}
/* Month cells — larger, more visible */
#v-platnosci .tbl .pl-cell {
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px;
  font-size: 12px !important;
}
/* Fix invisible "none" icons — add contrast */
#v-platnosci .tbl .pl-cell-none {
  color: var(--ink40, #999) !important;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
}

/* ── Action pills — fix icon visibility ── */
/* Last td: Akcje — bottom action bar */
#v-platnosci .tbl td:last-child {
  width: 100%;
  padding: 10px 14px 12px !important;
  margin-top: 6px;
  border-top: 1px solid rgba(0,0,0,.04) !important;
  background: rgba(0,0,0,.015) !important;
}
#v-platnosci .pl-pills {
  gap: 6px;
  justify-content: flex-start;
  flex-wrap: wrap;
}
#v-platnosci .pl-pill {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1.5px solid rgba(0,0,0,.1);
}
/* Ensure all SVG icons inside pills are visible */
#v-platnosci .pl-pill svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
}
/* Pill color accents */
#v-platnosci .pl-pill.wa {
  color: #25D366;
  border-color: rgba(37,211,102,.25);
}
#v-platnosci .pl-pill.sms {
  color: var(--g2, #F07020);
  border-color: rgba(240,112,32,.2);
}
#v-platnosci .pl-pill.email {
  color: #2B6CB0;
  border-color: rgba(43,108,176,.2);
}
#v-platnosci .pl-pill.phone {
  color: #1DB954;
  border-color: rgba(29,185,84,.2);
}
#v-platnosci .pl-pill.fu {
  color: var(--ink50, #6B6459);
  border-color: rgba(0,0,0,.1);
}
/* Reminder badge */
#v-platnosci .pl-reminder-badge {
  font-size: 10px;
  margin-top: 4px;
}
/* Batch action bar — stack */
#v-platnosci .pl-batch-bar {
  flex-direction: column;
  padding: 10px !important;
  gap: 8px;
}
/* Hide select-all checkbox header */
#v-platnosci #pl-check-all {
  display: none;
}

/* ── 8f-iv. Salesman: Sales Calls → Mobile Cards ─────────── */
/* 7 cols: Data | Lead | Przedmiot | Wynik | Podsumowanie | Mocne/Słabe | Typ */

#v-salescalls .tbl,
#v-salescalls .tbl thead,
#v-salescalls .tbl tbody,
#v-salescalls .tbl th,
#v-salescalls .tbl td,
#v-salescalls .tbl tr {
  display: block;
}
#v-salescalls .tbl {
  overflow-x: visible;
  border-spacing: 0;
}
#v-salescalls .tbl thead { display: none; }
#v-salescalls .card > div[style*="overflow"] {
  overflow: visible !important;
  max-height: none !important;
}
#v-salescalls .tbl tbody tr {
  background: var(--white, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(26,23,19,.04);
  overflow: hidden;
}
#v-salescalls .tbl td {
  background: transparent !important;
  border: none !important;
  padding: 2px 12px;
  font-size: 12px;
  position: static !important;
  white-space: normal;
  text-align: left !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: unset !important;
}
/* td1: Data — small date on top */
#v-salescalls .tbl td:nth-child(1) {
  padding: 10px 12px 2px;
  font-size: 11px;
  color: var(--ink50, #6B6459);
  font-weight: 600;
}
/* td2: Lead — prominent name */
#v-salescalls .tbl td:nth-child(2) {
  padding: 2px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #1A1713);
}
/* td3: Przedmiot */
#v-salescalls .tbl td:nth-child(3) {
  font-size: 12px;
  color: var(--ink50, #6B6459);
}
#v-salescalls .tbl td:nth-child(3)::before {
  content: 'Przedmiot: ';
  font-size: 9px;
  color: var(--ink30, #C2BAB0);
}
/* td4: Wynik badge */
#v-salescalls .tbl td:nth-child(4) {
  padding: 4px 12px;
}
/* td5: Podsumowanie — full text */
#v-salescalls .tbl td:nth-child(5) {
  padding: 4px 12px 6px;
  font-size: 12px;
  color: var(--ink70, #444);
  white-space: normal !important;
}
/* td6: Mocne/Słabe */
#v-salescalls .tbl td:nth-child(6) {
  padding: 2px 12px 6px;
  font-size: 11px !important;
}
/* td7: Typ — bottom bar */
#v-salescalls .tbl td:nth-child(7) {
  padding: 6px 12px 10px !important;
  margin-top: 2px;
  border-top: 1px solid rgba(0,0,0,.04) !important;
  background: rgba(0,0,0,.015) !important;
  font-size: 11px !important;
  color: var(--ink50, #6B6459);
}

/* Sales Calls filter header — compact */
#v-salescalls .ch {
  flex-wrap: wrap;
  gap: 6px;
}
#v-salescalls .ch > div[style*="flex"] {
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
#v-salescalls .ch .fs {
  flex: 1;
  min-width: 100px;
}

/* ── 8f-v. Booking contact labels ────────────────────────── */
.bk-contact-label {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink40, #999);
  vertical-align: middle;
  padding: 2px 6px;
  background: rgba(0,0,0,.04);
  border-radius: 4px;
}
.bk-contact-label.bk-cl-tutor {
  color: var(--g2, #F07020);
  background: rgba(240,112,32,.08);
}

/* Platnosci month labels via data attribute */
#v-platnosci .tbl td[data-month]::before {
  content: attr(data-month);
  display: block;
  font-size: 8px;
  font-weight: 700;
  color: var(--ink40, #999);
  text-align: center;
  letter-spacing: .03em;
  margin-bottom: 1px;
}

/* Generic fallback for other .tbl tables */
.tbl-sticky td:first-child,
.tbl-sticky th:first-child {
  min-width: 100px;
  max-width: 130px;
}
.tbl-sticky .stk-r {
  min-width: 80px;
}

/* ── 8g. HR: Tutor cards / tables ────────────────────────── */

.tutor-cards { grid-template-columns: 1fr; gap: 8px; }
.metrics-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

/* HR KPI — compact */
.team-kpi-strip {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px 12px;
}
.team-kpi-card {
  padding: 8px 6px;
  border-radius: 10px;
  text-align: center;
}
.team-kpi-value { font-size: 18px; }
.team-kpi-label { font-size: 9px; }
.metric-card { padding: 10px; border-radius: 10px; }
.metric-value, .kpi-value { font-size: 20px; }
.metric-label { font-size: 10px; }

/* HR tutor cards — maximize scroll area */
.tutor-cards-wrap {
  padding: 0 10px 10px;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
/* Compact KPI strip on mobile to save space */
.team-kpi-strip {
  padding: 6px 10px !important;
  gap: 4px !important;
}
.team-kpi-card { padding: 6px 4px !important; }
.team-kpi-value { font-size: 16px !important; }
.team-kpi-label { font-size: 8px !important; }
/* Compact toolbar on mobile */
#view-tutors .smart-toolbar {
  padding: 6px 10px !important;
  gap: 4px !important;
  flex-wrap: wrap;
}
#view-tutors .smart-toolbar .search-bar {
  width: 100%;
  order: -1;
}
#view-tutors .smart-toolbar .toolbar-select {
  flex: 1;
  min-width: 0;
  font-size: 11px !important;
  padding: 6px 8px !important;
}
#view-tutors .smart-toolbar .toolbar-toggle {
  font-size: 10px !important;
  padding: 5px 8px !important;
}
#view-tutors .smart-toolbar .btn-g {
  font-size: 10px !important;
  padding: 5px 10px !important;
}
/* Hide stat bar on mobile to maximize scroll area */
#view-tutors .stat-bar {
  display: none;
}
/* Tutor cards — larger, full-width */
.tutor-card {
  border-radius: 14px;
  margin-bottom: 0;
}
.tutor-card-header { padding: 12px 14px 8px; gap: 10px; }
.tutor-card-body { padding: 6px 14px 10px; }
.tutor-card-name { font-size: 15px; }
.tutor-card-status { font-size: 11px; }
.tutor-card-subjects { gap: 3px; }
.card-action-bar { padding: 8px 12px; gap: 6px; }

/* HR script — fix visibility */
#view-hrscript {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 50px - 44px);
  overflow: hidden;
}
#view-hrscript .script-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
#view-hrscript .script-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px;
}
.script-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
  gap: 0;
  padding: 8px 12px 0;
}
.script-tabs::-webkit-scrollbar { display: none; }
.script-tab {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 11px;
  white-space: nowrap;
}
.script-header { padding: 10px 12px; }
.script-label { font-size: 14px; }

/* HR leads table — full-width column card transformation */
#view-leads .leads-table-wrap {
  padding: 0 10px 10px;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#view-leads .leads-table thead { display: none; }
#view-leads .leads-table,
#view-leads .leads-table tbody,
#view-leads .leads-table tr,
#view-leads .leads-table td {
  display: block;
  width: 100%;
}
#view-leads .leads-table tbody tr {
  background: var(--white, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  margin-bottom: 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(26,23,19,.04);
  overflow: hidden;
  cursor: pointer;
}
#view-leads .leads-table td {
  padding: 3px 14px;
  font-size: 12px;
  border: none;
  background: transparent;
  width: 100%;
}
/* Lp column — first td, small accent */
#view-leads .leads-table td.lead-lp {
  font-size: 9px;
  color: var(--ink30, #C2BAB0);
  padding: 10px 14px 0;
  font-weight: 600;
}
/* First data td after Lp — name, make it prominent */
#view-leads .leads-table td:nth-child(2) {
  font-size: 14px;
  font-weight: 700;
  padding: 2px 14px;
  color: var(--ink, #1A1713);
}
/* Status badges — compact but readable */
#view-leads .status-badge-lg {
  font-size: 11px !important;
  padding: 3px 10px !important;
  border-radius: 8px;
  display: inline-block;
}
/* Source chips — compact */
#view-leads .source-chip {
  font-size: 10px !important;
  padding: 2px 8px !important;
  border-radius: 6px;
}
/* Pipeline days — compact inline */
#view-leads .pipeline-days {
  font-size: 11px !important;
  padding: 2px 8px !important;
}
/* Action buttons — bottom bar */
#view-leads .lead-actions {
  display: flex;
  gap: 6px !important;
}
#view-leads .lead-action-svg {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  border-radius: 8px;
}
#view-leads .lead-action-svg svg {
  width: 13px !important;
  height: 13px !important;
}
/* Actions td — bottom bar with separator */
#view-leads .leads-table td:last-child {
  width: 100%;
  border-top: 1px solid rgba(0,0,0,.04);
  padding: 8px 14px 10px !important;
  margin-top: 4px;
  background: rgba(0,0,0,.015);
}
/* HR leads toolbar — properly constrained */
#view-leads .leads-toolbar {
  padding: 8px 10px !important;
  gap: 6px !important;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: visible;
}
#view-leads .search-bar {
  max-width: none !important;
  width: 100%;
}
#view-leads .filter-row {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 4px;
}
#view-leads .filter-row::-webkit-scrollbar { display: none; }
#view-leads .chip {
  flex-shrink: 0;
  font-size: 11px;
  padding: 6px 10px;
  white-space: nowrap;
}
/* Export CSV button — full width, compact */
#view-leads .btn-o {
  width: 100%;
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 10px;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* HR Leads KPI strip — 2 col + 3 col for 5 items */
#view-leads .kpi-strip {
  grid-template-columns: 1fr 1fr !important;
  gap: 6px;
  padding: 8px 10px;
}
#view-leads .kpi-strip .kpi-card,
#view-leads .kpi-strip > div {
  padding: 8px 6px;
  border-radius: 10px;
  text-align: center;
}
/* Last KPI card spans full width */
#view-leads .kpi-strip > div:last-child {
  grid-column: 1 / -1;
}
#view-leads .kpi-strip .kpi-value {
  font-size: 18px !important;
}
#view-leads .kpi-strip .kpi-label {
  font-size: 9px !important;
}
#view-leads .kpi-strip .kpi-trend {
  font-size: 8px !important;
}
#view-leads .kpi-strip .kpi-icon {
  display: none;
}
#view-leads .kpi-strip .pipeline-bar {
  margin-top: 4px !important;
}

/* HR view containers — fix height */
.view-container {
  height: calc(100dvh - 50px - 44px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.view-container.active { display: flex; }

/* ╔══════════════════════════════════════════════════════════╗
   ║  9. CARDS, KPI & CONTENT                                ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Content area */
.content {
  padding: 10px 10px 20px;
}
.view {
  padding: 10px;
}
.views .view {
  padding: 10px;
  gap: 10px;
}
/* Scrollable views */
.bookings-view,
.tutors-view,
.leads-view {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Cards */
.card { border-radius: 14px; }
.ch { padding: 14px; }
.cb { padding: 14px; }
.section-card { border-radius: 10px; }

/* KPI grids */
.kpi-row, .kpi-grid,
.dash-kpi-row, .kpi-strip {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
/* KPI cards */
.kpi, .dash-kpi-card, .kpi-card {
  padding: 10px;
  border-radius: 10px;
}
.kpi .kpi-val { font-size: 1.3rem; }

/* Hero sections */
.szk-hero, .kreator-hero {
  padding: 20px 16px;
  border-radius: 14px;
}
.szk-hero h2 { font-size: 1.4rem; }
.szk-hero p { font-size: .82rem; }

/* Szkolenie grid */
.szk-grid, .sz-grid { grid-template-columns: 1fr; gap: 12px; }
.sz-card { border-radius: 16px; }
.sz-card-head { padding: 14px 16px; }

/* Quick actions */
.quick-actions-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
.qa-btn { padding: 12px 8px; border-radius: 10px; }
.qa-btn .qa-icon { width: 34px; height: 34px; border-radius: 10px; }
.qa-btn .qa-label { font-size: .72rem; }

/* Dashboard grids */
.dash-grid { grid-template-columns: 1fr; }
.dash-alerts-grid { grid-template-columns: 1fr; }

/* Lead cards (salesman) — see also section 13 */
.lk { padding: 12px; border-radius: 12px; }

/* ╔══════════════════════════════════════════════════════════╗
   ║  10. MODALS & DRAWERS                                    ║
   ╚══════════════════════════════════════════════════════════╝ */

.modal-card, .edit-modal {
  margin: 0;
  max-width: 100vw;
  width: 100vw;
  max-height: 100dvh;
  border-radius: 0;
}
.edit-modal {
  height: 100dvh;
}
.modal-card {
  border-radius: 0;
  max-height: 100dvh;
  overflow-y: auto;
}
.drawer, .lead-drawer, .alerts-drawer {
  width: 100vw;
  max-width: 100vw;
  border-radius: 0 !important;
}
.alerts-drawer {
  top: 0 !important;
  right: 0 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}
.drawer-head { padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top)); }
.drawer-body { padding: 10px; }
.alert-card { border-radius: 12px; margin-bottom: 8px; }
.slots-modal {
  max-width: 100vw;
  width: 100vw;
  max-height: 100dvh;
  border-radius: 0;
}
.slots-grid {
  grid-template-columns: 1fr;
}
.slot-card { border-radius: 12px; }

/* Confirm modal */
.confirm-box {
  margin: 16px;
  max-width: calc(100vw - 32px);
  border-radius: 18px;
}
.confirm-title { font-size: 16px; }

/* Follow-up modal */
.fu-modal, .fu-popup {
  width: calc(100vw - 24px);
  max-width: calc(100vw - 24px);
  border-radius: 20px;
}
/* Mega popup */
.mega-popup {
  width: calc(100vw - 24px);
  max-width: calc(100vw - 24px);
  border-radius: 22px;
}
.mega-popup-title { font-size: 17px; }
.mega-popup-name { font-size: 18px; }
.mega-btn { padding: 14px; font-size: 14px; border-radius: 14px; }

/* New lead popup */
.new-lead-popup {
  width: calc(100vw - 16px);
  right: 8px;
  bottom: 8px;
  border-radius: 16px;
}

/* Survey reminder */
.survey-reminder {
  margin: 12px;
  padding: 24px 18px 20px;
  border-radius: 18px;
}
.survey-reminder .sr-actions {
  flex-direction: column;
  gap: 8px;
}
.survey-reminder .sr-btn { width: 100%; }

/* Toast */
.toasts, .toast-container {
  left: 8px;
  right: 8px;
  bottom: calc(64px + env(safe-area-inset-bottom));
}
.toast {
  left: 8px;
  right: 8px;
  max-width: calc(100vw - 16px);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  11. TUTOR PANEL                                         ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Sidebar hidden, mobile nav shown */
.sidebar { display: none; }
.mobile-nav {
  display: flex !important;
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(56px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -2px 12px rgba(0,0,0,.04);
  justify-content: space-around;
  align-items: stretch;
  overflow: visible;
  gap: 0;
}
.mob-tab {
  font-size: 9px;
  gap: 2px;
  padding: 6px 2px 4px;
  flex: 0 0 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  border-radius: 0;
  position: relative;
  white-space: nowrap;
}
.mob-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
.mob-tab.active {
  color: #F07020;
  font-weight: 700;
}
.mob-tab.active svg { opacity: 1; }
/* Active tab indicator line */
.mob-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 2.5px;
  background: linear-gradient(90deg, #F9C843, #F07020);
  border-radius: 0 0 2px 2px;
}
/* "Więcej" tab — prevent nested menu from affecting button size */
.mob-tab[data-tab="more"] {
  position: relative;
  overflow: visible;
}
/* More menu popup — fixed position to escape overflow clipping */
.mob-more-menu {
  position: fixed !important;
  bottom: calc(56px + env(safe-area-inset-bottom) + 8px) !important;
  right: 8px !important;
  left: auto !important;
  top: auto !important;
  width: 210px !important;
  min-width: 210px !important;
  max-width: 260px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.18) !important;
  padding: 8px !important;
  background: #fff !important;
  z-index: 200;
  display: none;
}
.mob-more-menu.on {
  display: block !important;
}
.mob-more-menu .mob-more-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #444 !important;
  border-radius: 10px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 40px !important;
  text-align: left !important;
  white-space: normal !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  background: none !important;
  border: none !important;
}
.mob-more-menu .mob-more-item:active {
  background: rgba(240,112,32,.08) !important;
}
.mob-more-menu .mob-more-item svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  opacity: .7;
}

/* Content with bottom nav */
.app-body .content {
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

/* Next session banner */
.next-session-banner {
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
}
.nsb-time { font-size: 1.4rem; min-width: 60px; }
.nsb-join { width: 100%; justify-content: center; border-radius: 12px; padding: 12px 20px; }

/* Timeline cards */
.timeline-container { padding-left: 30px; }
.timeline-line { left: 10px; }
.timeline-now-dot { left: 6px; }
.tl-node::before { left: -22px; }
.tl-card {
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 12px;
  gap: 8px;
}
.tl-time { min-width: 60px; }
.tl-hour { font-size: 1.3rem; }
.tl-actions {
  width: 100%;
  border-top: 1px solid rgba(0,0,0,.04);
  padding-top: 8px;
  gap: 6px;
  flex-wrap: wrap;
}
.tl-join-btn, .tl-wa-send-btn {
  flex: 1;
  justify-content: center;
  font-size: .8rem;
  padding: 10px 14px;
  border-radius: 10px;
}

/* Calendar scroll */
.avail-grid-v2 { min-width: 650px; }
.avail-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}

/* Availability text mode */
.at-day { padding: 10px; border-radius: 10px; }
.at-block { flex-wrap: wrap; gap: 6px; }
.at-block input[type="time"] { max-width: 130px; }

/* History */
.hist-filters { flex-direction: column; gap: 8px; }
.hist-row { grid-template-columns: 70px 1fr; }

/* Overdue surveys */
.overdue-survey-item { padding: 10px 12px; gap: 8px; }
.os-avatar { width: 36px; height: 36px; }

/* ╔══════════════════════════════════════════════════════════╗
   ║  12. HR PANEL                                            ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Profile panel */
.profile-panel { width: 100vw; max-width: 100vw; height: 100dvh; border-radius: 0; }
.profile-fields { grid-template-columns: 1fr; }

/* Contract editor */
.contract-editor { grid-template-columns: 1fr; }
.contract-preview-side { display: none; }
.contract-section-fields { grid-template-columns: 1fr; }
.contract-form-header { flex-direction: column; gap: 10px; }

/* Leads */
.leads-toolbar { padding: 10px; flex-direction: column; }
.lead-drawer {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  border-radius: 0;
}
.lead-drawer-header { padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top)); }
.lead-drawer-body { padding: 12px; }
.ld-section { border-radius: 12px; margin-bottom: 8px; }
/* Lead drawer action buttons */
.ld-action-call, .ld-action-wa {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  13. SALESMAN PANEL                                      ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Lead detail → stacked */
.lead-detail-grid { grid-template-columns: 1fr; }
.atl-sidebar { max-height: 280px; }

/* Salesman lead cards (.lcard) — beautiful mobile cards */
.lcard {
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
}
.lc-main-row { padding: 12px 14px; gap: 0; }
.lc-info { min-width: 0; }
.lc-name { font-size: 15px; }
.lc-hdr-row { gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.lc-meta { font-size: 11px; }
.lc-tags { flex-wrap: wrap; gap: 3px; }
.lc-right { flex-shrink: 0; }
/* Lead card detail tabs */
.ldt { padding: 8px 12px; font-size: 11px; }
.ldt-badge { font-size: 8px; padding: 1px 5px; }
/* Lead card detail panels */
.ldt-panel { padding: 10px 14px; }
.lc-dfld { min-width: 0; width: 100%; padding-right: 0; padding-bottom: 6px; }
.lc-dflg { flex-direction: column; }
/* Lead card action bar */
.lc-acts { padding: 8px 12px; gap: 6px; flex-wrap: wrap; }
/* Flow bar — horizontal scroll */
.flow-bar-v2 {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
  gap: 0;
  padding: 10px 12px;
  border-radius: 14px;
}
.flow-bar-v2::-webkit-scrollbar { display: none; }
.phase {
  flex-shrink: 0;
  min-width: 72px;
  padding: 6px 8px;
}
.phase-ring { width: 28px; height: 28px; font-size: 11px; }
.phase-label { font-size: 8px; }
.phase-name { font-size: 10px; }
.phase-dots { gap: 2px; }
.step-dot { width: 5px; height: 5px; }
.phase-connector { min-width: 12px; margin: 0 2px; }
.phase-info { min-width: 0; }
/* Salesman filter selects */
.fs {
  font-size: 12px !important;
  padding: 7px 10px !important;
}
.sb { min-width: 0 !important; }
/* Leads stats bar */
.leads-stats { font-size: 11px; gap: 6px; flex-wrap: wrap; }
/* FU alerts */
.fu-alerts { font-size: 11px; }

/* Salesman card headers */
.card .ch { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
.card .ch-t { font-size: 14px; }
.card .cb { padding: 12px 14px; }
/* Salesman settings button — compact */
.settings-btn { font-size: 14px !important; padding: 4px 8px !important; }

/* Salesman: Platnosci nav tabs */
#v-platnosci .pl-tab {
  font-size: 11px;
  padding: 8px 12px;
  border-radius: 10px;
  flex-shrink: 0;
}
#v-platnosci #pl-nav-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  padding: 10px 12px !important;
}
#v-platnosci #pl-nav-tabs::-webkit-scrollbar { display: none; }
/* Platnosci panels */
#v-platnosci .pl-panel {
  padding: 0 10px 10px;
}
/* Platnosci KPI */
#v-platnosci .pl-kpi-grid {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 0 8px;
}
/* Table card container */
#v-platnosci .pl-table-card {
  border-radius: 14px;
  overflow: hidden;
}

/* Platnosci */
.pl-header { flex-direction: column; gap: 8px; padding: 12px 14px; }
.pl-header-left { gap: 10px; }
.pl-header-right { width: 100%; flex-direction: column; gap: 6px; }
.pl-header-title { font-size: 16px; }
.pl-header-sub { font-size: 11px; }
.pl-header-icon { width: 36px; height: 36px; border-radius: 10px; }
.pl-filter { width: 100%; border-radius: 10px; }
.pl-search-wrap { width: 100%; }
.pl-search-input { width: 100%; border-radius: 10px; }
.pl-tab { font-size: 11px; padding: 8px 12px; border-radius: 10px; }
.pl-table-card { border-radius: 14px; }
.pl-table-wrap { overflow: visible; }
.pl-filters {
  padding: 8px 12px !important;
  flex-direction: column;
  gap: 6px !important;
}
.pl-kpi-grid { grid-template-columns: 1fr 1fr; gap: 6px; }

/* Klienci */
.kl-stats { padding: 0 10px; gap: 4px; flex-wrap: wrap; }
.kl-stat { padding: 8px 10px; font-size: 11px; min-width: calc(50% - 4px); flex: none; border-radius: 10px; }

/* Kreator umow — fullscreen modal */
#km-box {
  width: 100vw;
  max-width: 100vw;
  max-height: 100dvh;
  height: 100dvh;
  border-radius: 0;
}
#km-body { padding: 16px; }
.kg, #km-body .kg { grid-template-columns: 1fr; }

/* Kreator tab (v-kreator) — mobile layout */
#v-kreator .kreator-hero {
  padding: 16px 12px;
  border-radius: 12px;
}
#v-kreator .kreator-hero-inner {
  flex-wrap: wrap;
  gap: 10px;
}
#v-kreator .kreator-hero-inner .btn {
  width: 100%;
  justify-content: center;
  margin-left: 0 !important;
}
#v-kreator .kreator-steps {
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
#v-kreator .kreator-step {
  font-size: 11px;
}
#v-kreator .kreator-step-sep {
  display: none;
}
/* Kreator form fields */
#v-kreator .kreator-form .r2,
#v-kreator .kreator-form .r3,
#v-kreator .kreator-form .kg {
  grid-template-columns: 1fr;
}
#v-kreator .kreator-result {
  border-radius: 12px;
  padding: 14px;
}

/* Salesman lead detail fields collapse */
.lc-dfld {
  min-width: 0;
  width: 100%;
  padding-right: 0;
}
.lc-dflg { flex-direction: column; }
.ldt { padding: 7px 10px; font-size: 11px; }

/* Platnosci */
.pl-kpi-grid { grid-template-columns: 1fr 1fr; }
.pl-csv-summary { grid-template-columns: 1fr 1fr; }
.pl-filters { padding: 10px 14px; flex-wrap: wrap; gap: 6px; }

/* Klienci stats */
.kl-stats { flex-wrap: wrap; gap: 6px; }
.kl-stat { padding: 10px 14px; flex: 1; min-width: calc(50% - 6px); }

/* ╔══════════════════════════════════════════════════════════╗
   ║  14. FORMS & INPUTS                                      ║
   ╚══════════════════════════════════════════════════════════╝ */

.form-row, .form-grid, .profile-fields, .r2, .r3 {
  grid-template-columns: 1fr;
}
.field, .fg { margin-bottom: 10px; }

/* Search bars */
.search-bar { padding: 8px 10px; border-radius: 10px; }
.search-bar input { font-size: 14px; }

/* Filter chips scroll */
.filter-row, .t-filter-chips {
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  gap: 4px;
}
.filter-row::-webkit-scrollbar, .t-filter-chips::-webkit-scrollbar { display: none; }
.chip, .filter-chip, .t-filter-chip, .sf {
  flex-shrink: 0;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  15. TOUCH TARGETS                                       ║
   ╚══════════════════════════════════════════════════════════╝ */

.btn, .btn-g, .btn-o, .btn-p, .btn-sm, .btn-s {
  min-height: 38px;
  border-radius: 10px;
}
.ic-btn, .ic { min-height: 34px; min-width: 34px; }

} /* END @media 768px */


/* ╔══════════════════════════════════════════════════════════╗
   ║  16. SMALL PHONES (≤480px)                               ║
   ╚══════════════════════════════════════════════════════════╝ */
@media (max-width: 480px) {
  .topbar { padding: 0 8px; }
  .brand-name { font-size: 14px; }

  /* KPI to single column */
  .kpi-row, .dash-kpi-row,
  .metrics-grid, .kpi-strip {
    grid-template-columns: 1fr;
  }
  /* HR KPI strip stays 4-col but smaller */
  .team-kpi-strip { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .team-kpi-value { font-size: 16px; }
  .team-kpi-label { font-size: 8px; }
  .metric-value, .kpi-value { font-size: 18px; }

  /* Tab text smaller */
  .tab-btn { font-size: 10px; padding: 6px 10px; }
  .tab { font-size: 10px; padding: 0 10px; }

  /* Quick actions single column */
  .quick-actions-grid { grid-template-columns: 1fr; }

  /* Login card full width */
  .login-split { padding: 20px 12px; }
  .login-form-panel { width: 100%; padding: 28px 16px 24px; }
  .login-card-title { font-size: 20px; }
  .mobile-login-brand { margin-bottom: 24px; }
  .mobile-login-brand-text { font-size: 22px; }
  .mlb-mark { width: 46px; height: 46px; }
  .lc { padding: 28px 16px 22px; max-width: calc(100% - 16px); }
  .lc-h { font-size: 22px; }

  /* Role picker single col */
  .role-picker-grid { grid-template-columns: 1fr; }

  /* Students table: hide Klasa column on small phones */
  .tbl-wrap table td:nth-child(2) { display: none; }

  /* Booking time font smaller */
  .bk-c-time { font-size: 15px; }

  /* Salesman lead stats single col */
  .kl-stat { min-width: calc(50% - 4px); }

  /* Platnosci single col */
  .pl-kpi-grid, .pl-csv-summary { grid-template-columns: 1fr; }

  /* Platnosci month cells — smaller on small phones */
  #v-platnosci .tbl .pl-cell {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }
  #v-platnosci .pl-pill {
    width: 30px;
    height: 30px;
  }

  /* Tutor bottom nav compact */
  .mob-tab { font-size: 8px; flex: 0 0 20%; min-width: 52px; }
  .mob-tab svg { width: 16px; height: 16px; }

  /* Timeline actions stack */
  .tl-join-btn, .tl-wa-send-btn {
    flex: none;
    width: 100%;
  }

  /* Lead card compact */
  .lc-name { font-size: 14px; }
  .lc-main-row { padding: 10px 12px; }
  .phase { min-width: 70px; }
  .phase-ring { width: 24px; height: 24px; font-size: 10px; }

  /* Coordinator filter selects stacked */
  .bv-toolbar > .sel,
  .bv-toolbar > .inp,
  .bv-toolbar > select,
  .bv-toolbar > input[type="date"] {
    font-size: 13px !important;
  }
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  17. EXTRA SMALL (≤375px — iPhone SE)                    ║
   ╚══════════════════════════════════════════════════════════╝ */
@media (max-width: 375px) {
  .topbar { height: 46px; min-height: 46px; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-name { font-size: 13px; }
  .tab-btn { font-size: 9.5px; padding: 5px 8px; min-height: 34px; }
  .tab { font-size: 9px; height: 36px; padding: 0 8px; }
  .login-split { padding: 16px 8px; }
  .login-form-panel { padding: 24px 12px 20px; border-radius: 18px; }
  .mobile-login-brand { margin-bottom: 16px; gap: 6px; }
  .mobile-login-brand-text { font-size: 20px; }
  .mlb-mark { width: 42px; height: 42px; border-radius: 12px; }
  .lc { padding: 24px 12px 18px; border-radius: 18px; }

  /* Cards tighter */
  .bv-table tbody tr,
  .tutors-table tbody tr,
  .leads-table tbody tr,
  .tbl-wrap table tbody tr,
  .bk-table tbody tr,
  .lcard {
    border-radius: 12px;
  }
  .bv-table td,
  .leads-table td,
  .bk-table td,
  .tbl-wrap table td {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Mobile nav compact */
  .mob-tab { font-size: 8px; min-width: 48px; flex: 0 0 20%; }

  /* Content padding */
  .content, .view { padding: 6px 6px 16px; }
  .views .view { padding: 6px !important; }

  /* Smaller card elements */
  .bv-name, .ld-name, .bk-c-name, .lc-name { font-size: 13px; }
  .bk-c-time { font-size: 14px; }
  .filter-chip, .t-filter-chip { font-size: 10px; padding: 5px 8px; }
  .bv-header-btn { font-size: 10px; padding: 5px 8px; }

  /* KPI strip 2 columns on iPhone SE */
  .team-kpi-strip { grid-template-columns: 1fr 1fr; }
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  18. LANDSCAPE PHONES                                    ║
   ╚══════════════════════════════════════════════════════════╝ */
@media (max-width: 768px) and (max-height: 500px) {
  .topbar { height: 40px; min-height: 40px; }
  .tab-nav { padding: 2px 8px; }
  .tab-btn { padding: 4px 8px; min-height: 28px; }
  .mobile-nav { height: calc(40px + env(safe-area-inset-bottom)); }
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  19. DESKTOP — hide mobile elements                      ║
   ╚══════════════════════════════════════════════════════════╝ */
@media (min-width: 769px) {
  .mobile-script-toggle { display: none !important; }
  .bk-contact-label { display: none !important; }
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  20. PRINT                                               ║
   ╚══════════════════════════════════════════════════════════╝ */
@media print {
  .mobile-nav, .mobile-script-toggle, .toasts, .toast-container { display: none !important; }
}