/* ============================================================
   CONCEPT CZECH HQ — Styles
   Palette: blue var(--primary), yellow #fbbf24, gray slate scale
   Clean, professional, no emojis.
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* === DESIGN SYSTÉM — jeden zdroj pravdy (akcent fialová #5B5BD6 + pastely) === */
  --primary: #5B5BD6;           /* akcent fialová — CTA, aktivní stav, krokovník */
  --primary-light: #7C7CE0;
  --primary-lighter: #EEEDFE;   /* pastel fialová (aktivní pozadí, světlé plochy) */
  --primary-dark: #4A4AC0;
  --primary-darker: #3B3BA0;

  --accent: #5B5BD6;
  --accent-dark: #4A4AC0;
  --accent-light: #EEEDFE;

  /* Pastelová rampa (jako KPI dlaždice na Domů) — podklad + tmavší text z téže rampy */
  --pastel-blue: #E6F1FB;   --pastel-blue-fg: #2563EB;
  --pastel-purple: #EEEDFE; --pastel-purple-fg: #5B5BD6;
  --pastel-green: #E1F5EE;  --pastel-green-fg: #0F6E56;
  --pastel-amber: #FAEEDA;  --pastel-amber-fg: #B45309;

  --white: #FFFFFF;
  /* neutrální šedá škála (Linear) */
  --gray-50: #FAFAFA;
  --gray-100: #F4F4F5;
  --gray-200: #EAEAEC;          /* linky / oddělovače */
  --gray-300: #D4D4D8;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;          /* sekundární text / popisky */
  --gray-600: #52525B;
  --gray-700: #3F3F46;
  --gray-800: #27272A;
  --gray-900: #0A0A0A;          /* hlavní text (téměř černá) */

  --danger: #DC2626;
  --danger-light: #FEF2F2;
  --success: #059669;
  --success-light: #ECFDF5;
  --warning: #D97706;
  --warning-light: #FFFBEB;
  --info: var(--primary);
  --info-light: var(--primary-lighter);

  --radius: 10px;
  --radius-lg: 16px;            /* jednotný radius karet všude */
  /* skoro ploché stíny (Linear) — definici dělá hlavně 1px šedá linka */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.03);
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.10);
  --transition: 0.16s cubic-bezier(0.33, 0, 0.2, 1);
  --bottom-nav-height: 60px;
  --header-height: 56px;
  --bg: #F7F7F5;           /* jednotné plátno (teplá světle šedá) */
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, sans-serif;
  background: var(--bg);
  color: var(--gray-900);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* --- Login Screen --- */
#login-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
  padding: 20px;
}

.login-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.login-logo {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.login-subtitle {
  color: var(--gray-600);
  font-size: 0.875rem;
  margin-bottom: 32px;
}

/* --- Login Form --- */
.login-form {
  text-align: left;
}

.login-form .form-group {
  margin-bottom: 16px;
}

.login-form .form-label {
  color: var(--gray-700);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

.login-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: var(--gray-900);
  background: var(--white);
  transition: var(--transition);
}

.login-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.login-submit {
  margin-top: 4px;
  padding: 12px 20px;
  font-size: 0.95rem;
}

.login-forgot {
  text-align: center;
  margin-top: 16px;
}

.login-forgot a {
  color: var(--primary);
  font-size: 0.85rem;
}

.login-forgot-info {
  text-align: center;
  margin-top: 8px;
  padding: 10px;
  background: var(--warning-light);
  border-radius: var(--radius);
  font-size: 0.8rem;
  color: var(--gray-700);
}

.login-error {
  color: var(--danger);
  font-size: 0.85rem;
  margin-top: 12px;
  display: none;
}

.login-pending {
  color: var(--warning);
  font-size: 0.85rem;
  margin-top: 16px;
  display: none;
  padding: 12px;
  background: var(--warning-light);
  border-radius: var(--radius);
}

/* --- App Shell --- */
#app-shell { display: none; min-height: 100vh; }

/* Header */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
  box-shadow: var(--shadow);
}

.header-logo {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-switch {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--white);
  padding: 4px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
}

.lang-switch:hover { background: rgba(255,255,255,0.25); }

.header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: var(--transition);
}

.header-user:hover { background: rgba(255,255,255,0.15); }

.header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  object-fit: cover;
}

.header-username {
  font-size: 0.85rem;
  font-weight: 500;
  display: none;
}

.user-menu {
  position: absolute;
  top: calc(var(--header-height) - 4px);
  right: 8px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  display: none;
  z-index: 200;
  overflow: hidden;
}

.user-menu.open { display: block; }

.user-menu-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--gray-800);
  font-size: 0.9rem;
  transition: var(--transition);
}

.user-menu-item:hover { background: var(--gray-100); }

/* --- Main Content Area --- */
.app-content {
  margin-top: var(--header-height);
  padding-bottom: 16px;
  min-height: calc(100vh - var(--header-height));
}

.module-view {
  display: none;
  padding: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.module-view.active { display: block; }



/* --- Sidebar Navigation (desktop) --- */
.sidebar {
  display: none;
}

/* --- Cards & Common Components --- */
.page-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-bottom: 16px;
  transition: box-shadow var(--transition), border-color var(--transition);
}

.card:hover { box-shadow: var(--shadow); border-color: var(--gray-300); }

.card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 4px;
}

.card-meta {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.card-body {
  font-size: 0.9rem;
  color: var(--gray-700);
  line-height: 1.6;
}

/* --- Badges / Tags --- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-new { background: var(--info-light); color: var(--info); }
.badge-progress { background: var(--warning-light); color: var(--warning); }
.badge-done { background: var(--success-light); color: var(--success); }
.badge-urgent { background: var(--danger-light); color: var(--danger); }
.badge-high { background: var(--warning-light); color: var(--warning); }
.badge-normal { background: var(--gray-200); color: var(--gray-600); }

.badge-role {
  background: var(--primary);
  color: var(--white);
  font-size: 0.65rem;
  padding: 2px 6px;
}

/* --- Priority indicators --- */
.priority-urgent { border-left: 4px solid var(--danger); }
.priority-high { border-left: 4px solid var(--warning); }
.priority-normal { border-left: 4px solid var(--gray-300); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: var(--transition);
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary); }
.btn:active { transform: translateY(0.5px); }

.btn-primary {
  background: var(--primary);
  color: var(--white);
}
.btn-primary:hover { background: var(--primary-dark); }

.btn-accent {
  background: var(--accent);
  color: var(--primary-dark);
}
.btn-accent:hover { background: var(--accent-dark); }

.btn-outline {
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
}
.btn-outline:hover { background: var(--gray-100); border-color: var(--gray-400); }

.btn-danger {
  background: var(--danger);
  color: var(--white);
}
.btn-danger:hover { background: var(--danger); }

.btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
}

.btn-block { width: 100%; }

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- FAB (Floating Action Button) --- */
.fab {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--primary-dark);
  border: none;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  z-index: 50;
}

.fab:hover { transform: scale(1.1); background: var(--accent-dark); }

/* --- Forms --- */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 4px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--gray-900);
  background: var(--white);
  transition: var(--transition);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.form-textarea { min-height: 100px; resize: vertical; }

/* --- Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 20px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.modal-overlay.open .modal {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-500);
  font-size: 1.5rem;
  padding: 4px;
  line-height: 1;
}

.modal-close:hover { color: var(--gray-800); }

/* --- Comments --- */
.comments-section {
  margin-top: 16px;
  border-top: 1px solid var(--gray-200);
  padding-top: 12px;
}

.comment {
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}

.comment:last-child { border-bottom: none; }

.comment-author {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
}

.comment-date {
  font-size: 0.7rem;
  color: var(--gray-400);
  margin-left: 8px;
}

.comment-text {
  font-size: 0.85rem;
  color: var(--gray-700);
  margin-top: 2px;
}

.comment-input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.comment-input-row .form-input { flex: 1; padding: 8px 10px; font-size: 0.85rem; }
.comment-input-row .btn { flex-shrink: 0; }

/* --- Filters / Toolbar --- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}

.filter-chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--gray-300);
  background: var(--white);
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 500;
  color: var(--gray-600);
}

.filter-chip.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.filter-chip:hover:not(.active) {
  border-color: var(--primary);
  color: var(--primary);
}

/* --- Calendar --- */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 16px;
}

.calendar-header-cell {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gray-500);
  padding: 8px 0;
  text-transform: uppercase;
}

.calendar-cell {
  min-height: 48px;
  padding: 4px;
  background: var(--white);
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.calendar-cell:hover { background: var(--gray-50); }

.calendar-cell.other-month { opacity: 0.3; pointer-events: none; }
.calendar-cell.today { outline: 2px solid var(--accent); }

.calendar-day {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 2px;
}

.calendar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin: 1px;
}

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.calendar-month-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
}

.calendar-nav-btn {
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 6px 12px;
  cursor: pointer;
  color: var(--gray-600);
  transition: var(--transition);
}

.calendar-nav-btn:hover { background: var(--gray-100); }

/* Event type colors */
.event-ig { background: #e1306c; }
.event-fb { background: #1877f2; }
.event-email { background: var(--success); }
.event-hairdresser { background: #7b1fa2; }
.event-customer { background: var(--warning); }
.event-news { background: #00bcd4; }
.event-deadline { background: var(--danger); }

.event-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.event-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.event-list-title {
  font-size: 0.85rem;
  font-weight: 500;
  flex: 1;
}

.event-list-date {
  font-size: 0.75rem;
  color: var(--gray-500);
}

/* Event type legend */
.event-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--gray-600);
}

/* --- Team List --- */
.team-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.team-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.team-info { flex: 1; }

.team-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gray-900);
}

.team-role {
  font-size: 0.8rem;
  color: var(--gray-500);
}

.team-contact {
  font-size: 0.75rem;
  color: var(--gray-400);
}

/* --- Admin Panel --- */
.admin-section {
  margin-bottom: 24px;
}

.admin-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}

.pending-user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.pending-actions {
  display: flex;
  gap: 6px;
}

.log-entry {
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.85rem;
}

.log-time {
  font-size: 0.75rem;
  color: var(--gray-400);
}

/* --- Empty State --- */
.empty-state {
  text-align: center;
  padding: 56px 24px;
  color: var(--gray-500);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.empty-state-icon {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-lighter);
  color: var(--primary);
}
.empty-state-icon svg { width: 28px; height: 28px; }

.empty-state svg {
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.empty-state-title { font-size: 1.05rem; font-weight: 700; color: var(--gray-800); margin-bottom: 6px; }
.empty-state-text {
  font-size: 0.9rem;
  color: var(--gray-500);
  max-width: 360px;
  margin: 0 auto 16px;
  line-height: 1.5;
}

/* --- Loading Spinner --- */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 40px auto;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Tabs inside modules --- */
.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tab-btn {
  padding: 10px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: var(--transition);
}

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab-btn:hover:not(.active) { color: var(--gray-700); }

/* --- Detail view --- */
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--primary);
  cursor: pointer;
  margin-bottom: 12px;
  border: none;
  background: none;
  padding: 4px 0;
}

.detail-back:hover { text-decoration: underline; }

/* --- Toast / Notification --- */
.toast-container {
  position: fixed;
  top: calc(var(--header-height) + 8px);
  right: 8px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--gray-900);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.3s ease;
  max-width: 320px;
}

.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   DESKTOP LAYOUT (>= 768px)
   ============================================================ */
@media (min-width: 768px) {
  .sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: 220px;
    background: var(--white);
    border-right: 1px solid var(--gray-200);
    padding: 16px 0;
    z-index: 90;
  }

  .sidebar .nav-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 9px 14px;
    margin: 1px 10px;
    gap: 12px;
    min-width: unset;
    width: calc(100% - 20px);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-700);
    text-align: left;
    transition: var(--transition);
    border-radius: var(--radius);
    font-family: inherit;
  }

  .sidebar .nav-item:hover {
    background: var(--gray-100);
    color: var(--gray-900);
  }

  .sidebar .nav-item svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-bottom: 0;
    flex-shrink: 0;
    color: var(--gray-500);
  }

  .sidebar .nav-label {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .sidebar .nav-item.active {
    background: var(--primary-lighter);
    color: var(--primary-dark);
    font-weight: 600;
  }
  .sidebar .nav-item.active svg { color: var(--primary); }
  /* Accent pruh vlevo (Fluent/Teams) */
  .sidebar .nav-item.active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
  }

  .sidebar .nav-badge {
    position: static;
    margin-left: auto;
    background: var(--danger);
    color: white;
    border-radius: 10px;
    font-size: 0.7rem;
    padding: 1px 6px;
    font-weight: 700;
  }

  .app-content {
    margin-left: 220px;
    padding-bottom: 24px;
  }

  .fab {
    bottom: 24px;
    right: 24px;
  }

  .header-username { display: block; }

  .modal-overlay { align-items: center; }
  .modal {
    border-radius: var(--radius-lg);
    max-width: 560px;
  }

  .module-view { padding: 24px; }

  .calendar-cell { min-height: 72px; }
}

@media (min-width: 1024px) {
  .module-view { max-width: 960px; }
}

/* --- Tasks: Department filter cards --- */
.dept-filter-cards {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.dept-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  background: var(--white);
  cursor: pointer;
  transition: var(--transition);
  min-width: 90px;
  flex-shrink: 0;
}

.dept-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
}

.dept-card.active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.dept-card.active .dept-card-label,
.dept-card.active .dept-card-count {
  color: var(--white);
}

.dept-card-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-600);
  white-space: nowrap;
}

.dept-card-count {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dept-color, var(--primary));
}

/* --- Tasks: Tab counts --- */
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: 0.65rem;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
}

.tab-btn.active .tab-count {
  background: var(--primary);
  color: var(--white);
}

/* --- Tasks: Row-based task display --- */
.task-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-row {
  display: flex;
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition);
  overflow: hidden;
}

.task-row:hover {
  border-color: var(--primary, #1e3a8a);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* Barevný pruh priority vlevo */
.task-row-bar {
  flex: 0 0 5px;
  width: 5px;
  align-self: stretch;
}
.task-row-priority { display: none; }

.task-row-body {
  flex: 1;
  padding: 14px 16px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-row-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.task-row-title {
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--gray-900);
  flex: 1;
  min-width: 0;
  line-height: 1.35;
  /* zalom na max 2 řádky místo ošklivého ořezu */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.task-prio-tag {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.task-prio-urgent { background: var(--danger-light, #fee2e2); color: var(--danger, #dc2626); }
.task-prio-high { background: #fef3c7; color: #b45309; }

.task-row-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}
.task-row-badges:empty { display: none; }

.task-assignee {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  background: var(--primary-lighter, #e0e7ff);
  color: var(--primary-dark, #1e3a8a);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}
.task-sub-tag {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-600, #4b5563);
}

.task-row-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-row-due {
  font-size: 0.78rem;
  color: var(--gray-500);
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.task-row-due.overdue {
  color: var(--danger);
  font-weight: 700;
}

/* --- Tasks: Department badge --- */
.dept-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--gray-100);
  color: var(--gray-700);
  white-space: nowrap;
  letter-spacing: 0.2px;
  border: 1px solid var(--gray-200);
}

/* --- Tasks: Period badge --- */
.period-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--primary-lighter);
  color: var(--primary-dark);
  white-space: nowrap;
}

/* --- Utility --- */
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-8 { gap: 8px; }
.gap-4 { gap: 4px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   STATS DASHBOARD — Concept Czech
   ============================================================ */

/* --- Module container (plná šířka jako ostatní moduly) --- */
.st-module {
  padding: 0;
  margin: 0;
}

/* --- Loading / Empty states --- */
.st-loading {
  text-align: center;
  padding: 60px 20px;
  font-size: 1.1rem;
  color: var(--gray-500);
}

.st-empty {
  text-align: center;
  padding: 80px 20px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--gray-500);
  line-height: 1.6;
}

/* --- Upload section --- */
.st-upload {
  margin-bottom: 24px;
}

.st-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--primary);
  color: var(--white);
  padding: 16px 28px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  min-height: 56px;
  transition: background var(--transition);
  width: 100%;
  justify-content: center;
}

.st-upload-btn:hover {
  background: var(--primary-light);
}

@media (min-width: 600px) {
  .st-upload-btn {
    width: auto;
  }
}

/* --- KPI Cards Grid --- */
.st-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .st-kpi-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

.st-kpi {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 18px 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.st-kpi:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.st-kpi-hero {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  color: var(--white);
  border-color: transparent;
}

.st-kpi-hero .st-kpi-label {
  color: rgba(255, 255, 255, 0.85);
}

.st-kpi-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.st-kpi-value {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2;
}

.st-kpi-big {
  font-size: 1.75rem;
}

.st-kpi-meta {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 6px;
}

/* --- Trend indicators --- */
.st-up {
  color: var(--success);
}

.st-down {
  color: var(--danger);
}

.st-flat {
  color: var(--gray-400);
}

/* --- Section wrapper --- */
.st-section {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.st-section-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 16px;
}

/* --- Vertical Bar Chart (monthly) --- */
.st-chart {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.st-chart-bars {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 220px;
  min-width: 600px;
}

.st-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-width: 44px;
}

.st-bar-val {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 4px;
  white-space: nowrap;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-bar-track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}

.st-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  background: linear-gradient(180deg, var(--primary), var(--primary-light));
  transition: height 0.4s ease;
}

.st-bar-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gray-500);
  margin-top: 6px;
  text-transform: uppercase;
}

/* --- Horizontal Bar Chart (brands, admin) --- */
.st-hbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.st-hbar-label {
  width: 130px;
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-700);
  text-align: right;
}

.st-hbar-track {
  flex: 1;
  height: 28px;
  background: var(--gray-100);
  border-radius: 4px;
  overflow: hidden;
}

.st-hbar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: 4px;
  min-width: 2px;
  transition: width 0.4s ease;
}

.st-hbar-val {
  width: 140px;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
}

.st-hbar-val small {
  color: var(--gray-400);
  font-weight: 500;
}

/* --- Percentage Bar (brands, OZ) --- */
.st-pbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.st-pbar-label {
  width: 130px;
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-700);
  text-align: right;
}

.st-pbar-track {
  flex: 1;
  height: 26px;
  background: var(--gray-100);
  border-radius: 4px;
  overflow: hidden;
}

.st-pbar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  border-radius: 4px;
  min-width: 2px;
  transition: width 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
}

.st-pbar-val {
  width: 55px;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gray-700);
  text-align: right;
}

/* --- Tables --- */
.st-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
  padding: 0 16px;
}

.st-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 500px;
}

.st-table th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--gray-200);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--gray-600);
  white-space: nowrap;
}

.st-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}

.st-table tbody tr:last-child td {
  border-bottom: none;
}

.st-table tbody tr:hover {
  background: var(--gray-50);
}

/* --- Ranking rows --- */
.st-rank-gold {
  background: var(--accent-light) !important;
}

.st-rank-gold td:first-child {
  font-weight: 800;
  color: var(--accent-dark);
}

.st-rank-silver {
  background: var(--gray-100) !important;
}

.st-rank-silver td:first-child {
  font-weight: 800;
  color: var(--gray-400);
}

.st-rank-bronze {
  background: var(--danger-light) !important;
}

.st-rank-bronze td:first-child {
  font-weight: 800;
  color: var(--danger);
}

/* --- Danger text (inactive > 60 days) --- */
.st-danger {
  color: var(--danger) !important;
  font-weight: 700;
}

/* --- Empty table cell --- */
.st-empty-cell {
  text-align: center;
  color: var(--gray-400);
  padding: 24px 12px !important;
  font-style: italic;
}

/* ============================================================
   CLIENTS MODULE — Kadernici
   ============================================================ */

/* --- Alerts (birthday/nameday) --- */
.cl-alerts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.cl-alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  line-height: 1.5;
}

.cl-alert-birthday {
  background: var(--danger-light);
  color: var(--danger);
  border-left: 4px solid var(--danger);
}

.cl-alert-nameday {
  background: var(--success-light);
  color: var(--success);
  border-left: 4px solid var(--success);
}

.cl-alert-week {
  background: var(--info-light);
  color: var(--info);
  border-left: 4px solid var(--info);
}

/* --- Toolbar --- */
.cl-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.cl-search-row {
  width: 100%;
}

.cl-search {
  width: 100%;
}

.cl-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cl-filter-select {
  flex: 1;
  min-width: 140px;
}

.cl-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cl-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* --- Desktop table --- */
.cl-table-wrap {
  display: none;
}

.cl-table {
  min-width: 700px;
}

.cl-row {
  cursor: pointer;
}

.cl-row:hover {
  background: var(--gray-50);
}

/* --- Mobile cards --- */
.cl-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cl-card {
  cursor: pointer;
  padding: 14px 16px;
}

.cl-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.cl-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-900);
  flex: 1;
}

.cl-card-meta {
  font-size: 0.8rem;
  color: var(--gray-500);
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.cl-card-actions {
  display: flex;
  gap: 6px;
}

/* --- Detail view --- */
.cl-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.cl-detail-item {
  font-size: 0.9rem;
  color: var(--gray-700);
  line-height: 1.5;
}

.cl-detail-label {
  font-weight: 600;
  color: var(--gray-500);
  font-size: 0.8rem;
}

/* --- Email log --- */
.cl-email-log-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cl-email-log-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}

.cl-email-log-item:last-child {
  border-bottom: none;
}

.cl-email-log-subject {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-800);
}

.cl-email-log-meta {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 2px;
}

/* --- Desktop layout for clients --- */
@media (min-width: 768px) {
  .cl-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .cl-search-row {
    flex: 1;
    min-width: 200px;
  }

  .cl-table-wrap {
    display: block;
  }

  .cl-cards {
    display: none;
  }

  .cl-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}




/* ============================================================
   KOMPONENTY
   ============================================================ */

.home-celebrants { margin-bottom: 16px; }
.home-celebrant { display: flex; align-items: center; padding: 12px 16px; border-radius: 8px; font-size: 0.9rem; background: var(--white); border: 1px solid var(--gray-200); color: var(--gray-900); }
.home-celebrant-nameday { border-left: 4px solid var(--primary); }
.home-celebrant-birthday { border-left: 4px solid var(--accent); }
.home-celebrant-icon { display: none; }
.home-celebrant strong { font-weight: 700; margin-right: 6px; color: var(--primary); }

.board-card-inner { display: flex; gap: 14px; align-items: flex-start; }
.board-thumb { width: 88px; height: 88px; min-width: 88px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.board-thumb-placeholder { background: var(--primary-lighter); }
.board-card-body { flex: 1; min-width: 0; }

.header-weather { font-size: 0.8rem; color: rgba(255,255,255,0.9); display: flex; align-items: center; gap: 4px; margin-right: 8px; white-space: nowrap; }

.prod-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.prod-summary-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 8px; padding: 14px 12px; text-align: center; }
.prod-summary-value { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.prod-summary-label { font-size: 0.72rem; color: var(--gray-700); margin-top: 4px; }
.prod-progress-bar { height: 8px; background: var(--gray-200); border-radius: 4px; overflow: hidden; }
.prod-progress-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.prod-dept-list { display: flex; flex-direction: column; }
.prod-dept-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.prod-dept-name { width: 110px; font-size: 0.82rem; color: var(--gray-800); flex-shrink: 0; }
.prod-dept-bar-wrap { flex: 1; }
.prod-dept-stats { display: flex; flex-direction: column; align-items: flex-end; min-width: 52px; gap: 2px; }



.hidden { display: none !important; }

/* ============================================================
   MOBILE — max-width: 767px
   ============================================================ */
@media (max-width: 767px) {

  /* --- Base --- */
  body {
    background: var(--gray-100) !important;
    font-size: 15px;
  }

  /* --- Header --- */
  .app-header {
    height: 52px;
    padding: 0 16px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
  }
  .header-logo { font-size: 1rem; letter-spacing: 1.5px; }
  .header-weather { display: none !important; }
  .lang-switch { font-size: 0.75rem; padding: 4px 8px; }

  /* --- Content --- */
  .app-content {
    padding: 16px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }

  /* --- Page Title --- */
  .page-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 12px;
  }

  /* --- Cards --- */
  .card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    padding: 14px 16px;
    margin-bottom: 10px;
    border: none;
  }
  .card-title { font-size: 0.95rem; font-weight: 700; }
  .card-meta { font-size: 0.75rem; margin-top: 2px; }
  .card-body { font-size: 0.875rem; line-height: 1.6; margin-top: 6px; }

  /* --- Task Rows --- */
  .task-row {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin-bottom: 8px;
  }
  .task-row-body { padding: 10px 12px; }
  .task-row-title { font-size: 0.9rem; font-weight: 600; }
  .task-row-priority { width: 3px !important; border-radius: 3px 0 0 3px; }

  /* --- Dept Filter Cards --- */
  .dept-filter-cards {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 6px;
    margin-bottom: 10px;
  }
  .dept-filter-cards::-webkit-scrollbar { display: none; }
  .dept-card {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--white) !important;
    border: 1.5px solid var(--gray-200) !important;
    color: var(--gray-800) !important;
    min-width: unset;
  }
  .dept-card:hover { border-color: var(--primary) !important; }
  .dept-card.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
    box-shadow: none !important;
  }
  .dept-card-count {
    font-size: 0.75rem;
    margin-left: 4px;
    color: inherit !important;
    opacity: 0.85;
  }
  .dept-card.active .dept-card-count { color: var(--accent) !important; opacity: 1; }

  /* --- Tabs --- */
  .tab-bar,
  .task-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: none;
    background: none;
  }
  .tab-bar::-webkit-scrollbar,
  .task-tabs::-webkit-scrollbar { display: none; }
  .tab-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    color: var(--gray-600);
    white-space: nowrap;
    margin-bottom: 0;
    border-bottom: none;
  }
  .tab-btn.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
  }

  /* --- Badges --- */
  .badge-new { background: var(--primary-lighter) !important; color: var(--primary-light) !important; }
  .badge-progress { background: var(--primary-lighter) !important; color: var(--primary) !important; }
  .badge-done { background: var(--success-light) !important; color: var(--success) !important; }
  .dept-badge { background: var(--primary-lighter) !important; color: var(--primary) !important; }
  .period-badge { background: var(--primary-lighter) !important; color: var(--primary) !important; }

  /* --- Buttons --- */
  .btn { min-height: 44px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; }
  .btn-sm { min-height: 36px; font-size: 0.8rem; }
  .btn-block { border-radius: 10px; }

  /* --- Forms --- */
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px;
    min-height: 46px;
    border-radius: 10px;
    border: 1.5px solid var(--gray-200);
    padding: 0 14px;
  }
  .form-textarea { min-height: unset; padding: 12px 14px; }
  .form-label { font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; color: var(--gray-700); }

  /* --- Modal --- */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    border-radius: 20px 20px 0 0;
    max-height: 88vh;
    overflow-y: auto;
    width: 100%;
    max-width: 100%;
    padding: 8px 20px 20px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  }
  .modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--gray-300);
    border-radius: 2px;
    margin: 0 auto 16px;
  }
  .modal-header { margin-bottom: 16px; }
  .modal-title { font-size: 1rem; font-weight: 700; }

  /* --- Board Cards --- */
  .board-thumb { width: 88px; height: 88px; min-width: 88px; border-radius: 10px; }
  .board-card-inner { gap: 12px; }

  /* --- Home Celebrants --- */
  .home-celebrant {
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 0.875rem;
    font-weight: 500;
  }

  /* --- Productivity --- */
  .prod-summary-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .prod-summary-card { padding: 12px 8px; border-radius: 10px; }
  .prod-summary-value { font-size: 1.5rem; }
  .prod-summary-label { font-size: 0.65rem; }

  /* --- Stats: Horizontal Bars --- */
  .st-hbar-row { flex-wrap: wrap; }
  .st-hbar-label { width: 100%; text-align: left; margin-bottom: 2px; }
  .st-hbar-val { width: auto; }

  /* --- Stats: Percentage Bars --- */
  .st-pbar-row { flex-wrap: wrap; }
  .st-pbar-label { width: 100%; text-align: left; margin-bottom: 2px; }

  /* --- Tables --- */
  .st-table-scroll,
  .cl-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }



  /* --- Login --- */
  .login-box { padding: 32px 24px; border-radius: 20px; }
  .login-logo { font-size: 2rem; }
}

/* ============================================================
   HAMBURGER + DRAWER
   ============================================================ */
.header-hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 40px; height: 40px;
  background: none; border: none; cursor: pointer; padding: 4px; border-radius: 8px;
  flex-shrink: 0;
}
.header-hamburger span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,0.9); border-radius: 2px;
  transition: all 0.2s;
}

.drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 299; backdrop-filter: blur(2px);
}
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 280px; background: var(--white);
  z-index: 300; display: flex; flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,0.18);
  animation: slideInDrawer 0.25s ease;
  overflow-y: auto;
}
@keyframes slideInDrawer { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 16px;
  background: linear-gradient(135deg, var(--primary-darker) 0%, var(--primary) 100%);
}
.drawer-logo {
  font-size: 1rem; font-weight: 800; color: var(--accent);
  letter-spacing: 2px; text-transform: uppercase;
}
.drawer-close {
  background: none; border: none; color: rgba(255,255,255,0.7);
  font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.drawer-close:hover { background: rgba(255,255,255,0.1); color: var(--white); }

.drawer-user {
  padding: 14px 20px;
  font-size: 0.85rem; font-weight: 600; color: var(--primary);
  background: var(--gray-50);
}

.drawer-divider {
  height: 1px; background: var(--gray-200); margin: 4px 0;
}

.drawer-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 20px;
  border: none; background: none;
  font-size: 0.95rem; font-weight: 600; color: var(--primary);
  cursor: pointer; text-align: left;
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.drawer-item:hover, .drawer-item.active {
  background: var(--gray-50); border-left-color: var(--primary);
}
.drawer-item svg { color: var(--primary); flex-shrink: 0; }

.drawer-item-logout {
  color: var(--danger) !important; margin-top: auto;
}
.drawer-item-logout svg { color: var(--danger) !important; }

@media (max-width: 767px) {
  .header-hamburger { display: flex; }

  .app-header {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 8px;
  }

  .header-logo {
    text-align: center;
    font-size: 0.95rem;
    letter-spacing: 2px;
    font-weight: 800;
  }

  .header-username { display: none; }
  .header-weather { display: none; }
}

/* ===== Doplňkové buttony + záložky statistik (Sklad & zisk) ===== */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
}
.btn-ghost:hover { background: var(--gray-100); }

.btn-secondary {
  background: var(--gray-200, #e5e7eb);
  color: var(--gray-800, #1f2937);
}
.btn-secondary:hover { filter: brightness(0.96); }

/* Záložky uvnitř modulu Pohoda */
.st-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 16px 0;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.st-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-500, #6b7280);
  cursor: pointer;
}
.st-tab.active {
  color: var(--primary, #1e3a8a);
  border-bottom-color: var(--accent, #fbbf24);
}

/* Přepínač období ve "Sklad & zisk" */
.stk-period {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.stk-period-btn {
  background: var(--gray-100, #f3f4f6);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius, 8px);
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-600, #4b5563);
  cursor: pointer;
}
.stk-period-btn.active {
  background: var(--primary, #1e3a8a);
  color: #fff;
  border-color: var(--primary, #1e3a8a);
}

/* Přehled měsíců — karty (vidět z jakých dat data jsou) */
.stk-months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.stk-month-card {
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  background: var(--white, #fff);
  transition: var(--transition, all .15s);
}
.stk-month-card:hover { border-color: var(--primary, #1e3a8a); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,0.08); }
.stk-month-card.active {
  border-color: var(--primary, #1e3a8a);
  box-shadow: 0 0 0 2px var(--primary, #1e3a8a) inset;
  background: linear-gradient(180deg, #f8fafc, #fff);
}
.stk-month-name { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-500, #6b7280); }
.stk-month-rev { font-size: 1.35rem; font-weight: 800; color: var(--gray-900, #111827); margin: 4px 0 2px; letter-spacing: -0.02em; }
.stk-month-meta { font-size: 0.74rem; color: var(--gray-500, #6b7280); }

.stk-period-head {
  font-size: 0.9rem;
  color: var(--gray-600, #4b5563);
  margin: 4px 0 12px;
}
.stk-period-head strong { color: var(--primary, #1e3a8a); }

/* Tagy klienta */
.cl-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-700, #374151);
  font-size: 0.72rem;
  font-weight: 600;
  margin-right: 4px;
}

/* Časová osa na kartě klienta */
.cl-timeline { display: flex; flex-direction: column; gap: 2px; }
.cl-tl-item { display: flex; gap: 12px; padding: 8px 0; }
.cl-tl-dot {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px;
}
.cl-tl-body { flex: 1; border-bottom: 1px solid var(--gray-100, #f3f4f6); padding-bottom: 8px; }
.cl-tl-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cl-tl-type { font-weight: 700; font-size: 0.8rem; color: var(--gray-800, #1f2937); }
.cl-tl-date { font-size: 0.75rem; color: var(--gray-400, #9ca3af); }
.cl-tl-text { font-size: 0.85rem; color: var(--gray-600, #4b5563); margin-top: 2px; }

/* ===== Deals / Pipeline ===== */
.dl-kanban {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  align-items: flex-start;
}
.dl-col {
  flex: 0 0 250px;
  background: var(--gray-100, #f3f4f6);
  border-radius: var(--radius, 8px);
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
.dl-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gray-800, #1f2937);
  background: #fff;
  border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
}
.dl-col-count {
  background: var(--gray-200, #e5e7eb);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.72rem;
  margin-left: 4px;
}
.dl-col-sum { font-size: 0.72rem; color: var(--gray-500, #6b7280); font-weight: 600; }
.dl-col-body {
  padding: 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dl-col-body.dl-over { background: rgba(99, 102, 241, 0.08); outline: 2px dashed rgba(99,102,241,0.4); }
.dl-card {
  background: #fff;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.dl-card:hover { border-color: var(--primary, #1e3a8a); }
.dl-card.dragging { opacity: 0.4; }
.dl-card-title { font-weight: 700; font-size: 0.85rem; color: var(--gray-900, #111827); }
.dl-card-client { font-size: 0.78rem; color: var(--gray-500, #6b7280); margin-top: 2px; }
.dl-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.dl-card-value { font-weight: 700; font-size: 0.82rem; color: var(--primary, #1e3a8a); }
.dl-card-owner { font-size: 0.72rem; color: var(--gray-400, #9ca3af); }
.dl-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
}
.dl-lost { margin-top: 18px; }
.dl-acts { display: flex; flex-direction: column; gap: 6px; }
.dl-act { font-size: 0.83rem; color: var(--gray-700, #374151); padding: 6px 0; border-bottom: 1px solid var(--gray-100, #f3f4f6); }
.dl-act-type { font-weight: 700; color: var(--primary, #1e3a8a); }
.dl-act-date { font-size: 0.72rem; color: var(--gray-400, #9ca3af); }
.dl-stage-move { display: flex; flex-wrap: wrap; gap: 6px; }
.dl-stage-btn {
  background: var(--gray-100, #f3f4f6);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.8rem; font-weight: 600;
  color: var(--gray-700, #374151);
  cursor: pointer;
}
.dl-stage-btn:disabled { cursor: default; opacity: 1; }
.dl-stage-btn:not(:disabled):hover { border-color: var(--primary, #1e3a8a); }

/* ===== Podúkoly (tasks) ===== */
.subtask-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
  cursor: pointer;
}
.subtask-text { flex: 1; font-size: 0.88rem; color: var(--gray-700, #374151); }
.subtask-text.done { text-decoration: line-through; color: var(--gray-400, #9ca3af); }
.subtask-del {
  background: none; border: none; cursor: pointer;
  color: var(--gray-400, #9ca3af); font-size: 1.1rem; line-height: 1; padding: 0 4px;
}
.subtask-del:hover { color: var(--danger, #dc2626); }

/* ===== Reakce na nástěnce ===== */
.board-reactions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.board-react-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--gray-100, #f3f4f6);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}
.board-react-btn.mine { background: var(--primary-lighter); border-color: var(--primary-light); }
.board-react-count { font-size: 0.78rem; font-weight: 600; color: var(--gray-600, #4b5563); }

/* ===== Notifikace (zvonek) ===== */
.notif-wrap { position: relative; display: inline-flex; }
.notif-bell {
  position: relative;
  background: none; border: none; cursor: pointer;
  color: var(--gray-600, #4b5563);
  padding: 6px; display: inline-flex; align-items: center;
}
.notif-bell:hover { color: var(--primary, #1e3a8a); }
.notif-badge {
  position: absolute; top: -2px; right: -2px;
  background: var(--danger, #dc2626); color: #fff;
  font-size: 0.62rem; font-weight: 700;
  min-width: 16px; height: 16px; line-height: 16px;
  border-radius: 999px; padding: 0 4px; text-align: center;
}
.notif-dropdown {
  position: absolute; top: 120%; right: 0;
  width: 320px; max-width: 90vw; max-height: 70vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,0.14);
  z-index: 1000;
}
.notif-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; font-weight: 700; font-size: 0.85rem;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
  color: var(--gray-800, #1f2937);
}
.notif-clear { background: none; border: none; cursor: pointer; color: var(--gray-400, #9ca3af); font-size: 0.75rem; }
.notif-clear:hover { color: var(--danger, #dc2626); }
.notif-empty { padding: 24px 14px; text-align: center; color: var(--gray-400, #9ca3af); font-size: 0.85rem; }
.notif-list { display: flex; flex-direction: column; }
.notif-item { padding: 10px 14px; border-bottom: 1px solid var(--gray-100, #f3f4f6); cursor: pointer; }
.notif-item:hover { background: var(--gray-50, #f9fafb); }
.notif-item.unread { background: #eff6ff; }
.notif-item.unread:hover { background: #dbeafe; }
.notif-text { font-size: 0.85rem; color: var(--gray-800, #1f2937); line-height: 1.4; }
.notif-meta { font-size: 0.72rem; color: var(--gray-400, #9ca3af); margin-top: 4px; }

/* ============================================================
   OBJEDNÁVKY (OZ) — Brevo styl + paleta Concept Czech
   Scoped pod .oz-view, ať se nemíchá se zbytkem appky.
   ============================================================ */
.oz-view {
  --cc-bg: #FAF8F5;
  --cc-surface: #FFFFFF;
  --cc-text: #1A1A1A;
  --cc-accent: #8B2332;
  --cc-accent-soft: rgba(139,35,50,0.08);
  --cc-neutral: #9B9189;
  --cc-line: #ECE7E1;
  --cc-radius: 16px;
  --cc-radius-lg: 22px;
  --cc-shadow: 0 1px 2px rgba(26,26,26,0.04), 0 6px 20px rgba(26,26,26,0.05);
  background: var(--cc-bg);
  color: var(--cc-text);
  min-height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.oz-wrap { max-width: 720px; margin: 0 auto; padding: 22px 16px 96px; }

.oz-head { margin-bottom: 18px; }
.oz-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--cc-text); margin: 0; }
.oz-subtitle { font-size: 0.92rem; color: var(--cc-neutral); margin-top: 4px; }

/* Stepper */
.oz-stepper { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.oz-step { display: flex; align-items: center; gap: 8px; opacity: 0.5; }
.oz-step.is-active, .oz-step.is-done { opacity: 1; }
.oz-step-dot {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 700; background: #fff; color: var(--cc-neutral);
  border: 1.5px solid var(--cc-line);
}
.oz-step.is-active .oz-step-dot { background: var(--cc-accent); color: #fff; border-color: var(--cc-accent); }
.oz-step.is-done .oz-step-dot { background: var(--cc-accent-soft); color: var(--cc-accent); border-color: transparent; }
.oz-step-label { font-size: 0.85rem; font-weight: 600; color: var(--cc-text); }
.oz-step:not(.is-active) .oz-step-label { color: var(--cc-neutral); font-weight: 500; }
.oz-step-line { flex: 1; height: 2px; background: var(--cc-line); border-radius: 2px; min-width: 12px; }

/* Search */
.oz-searchwrap { position: relative; margin-bottom: 16px; }
.oz-search-ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--cc-neutral); }
.oz-search {
  width: 100%; box-sizing: border-box; padding: 14px 16px 14px 44px; border-radius: 999px;
  border: 1.5px solid var(--cc-line); background: var(--cc-surface); color: var(--cc-text);
  font-size: 0.95rem; outline: none; transition: border-color .15s, box-shadow .15s;
}
.oz-search:focus { border-color: var(--cc-accent); box-shadow: 0 0 0 4px var(--cc-accent-soft); }
.oz-search::placeholder { color: var(--cc-neutral); }

/* Salon list + card */
.oz-salon-list { display: flex; flex-direction: column; gap: 10px; }
.oz-salon-card {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius);
  padding: 14px 16px; cursor: pointer; box-shadow: var(--cc-shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.oz-salon-card:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(26,26,26,.05), 0 10px 28px rgba(26,26,26,.08); border-color: #e2dcd4; }
.oz-salon-card:active { transform: translateY(0); }
.oz-avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cc-accent-soft); color: var(--cc-accent); font-weight: 700; font-size: 0.95rem;
}
.oz-avatar-sm { width: 32px; height: 32px; font-size: 0.8rem; }
.oz-salon-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oz-salon-name { font-weight: 700; font-size: 1rem; color: var(--cc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oz-salon-sub { font-size: 0.82rem; color: var(--cc-neutral); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oz-cur {
  flex: 0 0 auto; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; padding: 4px 10px;
  border-radius: 999px; background: #F2EFEA; color: var(--cc-neutral);
}
.oz-cur-eur { background: var(--cc-accent-soft); color: var(--cc-accent); }
.oz-chev { flex: 0 0 auto; color: var(--cc-neutral); font-size: 1.4rem; line-height: 1; }
.oz-more { text-align: center; font-size: 0.8rem; color: var(--cc-neutral); padding: 10px; }

/* Salon bar (kroky 2/3) */
.oz-salonbar { display: flex; align-items: center; gap: 10px; background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius); padding: 10px 14px; box-shadow: var(--cc-shadow); margin-bottom: 16px; }
.oz-salonbar-name { flex: 1; font-weight: 700; }
.oz-change { background: none; border: none; color: var(--cc-accent); font-weight: 600; font-size: 0.85rem; cursor: pointer; padding: 4px 6px; }

/* Loading / empty */
.oz-loading { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 48px 0; color: var(--cc-neutral); }
.oz-spinner { width: 22px; height: 22px; border: 3px solid var(--cc-line); border-top-color: var(--cc-accent); border-radius: 50%; animation: oz-spin .8s linear infinite; }
@keyframes oz-spin { to { transform: rotate(360deg); } }
.oz-empty { text-align: center; padding: 56px 20px; }
.oz-empty-emoji { font-size: 2.2rem; margin-bottom: 10px; }
.oz-empty-title { font-weight: 700; font-size: 1.05rem; color: var(--cc-text); }
.oz-empty-sub { font-size: 0.88rem; color: var(--cc-neutral); margin-top: 6px; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .oz-view {
    --cc-bg: #14110F; --cc-surface: #1E1A17; --cc-text: #F5F1EC; --cc-neutral: #A89E95;
    --cc-line: #2C2722; --cc-accent: #C25160; --cc-accent-soft: rgba(194,81,96,0.14);
    --cc-shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  .oz-cur { background: #2A2521; }
}

/* ============================================================
   GLOBÁLNÍ RESKIN — světlý glass chrome (hlavička, menu, drawer, login)
   v paletě Concept Czech. Byly modré s bílým textem -> teď světlé.
   ============================================================ */

/* Hlavička: světlý glass místo modré plochy */
.app-header {
  background: rgba(250, 248, 245, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  color: var(--gray-900);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.03);
}
.header-logo { color: var(--gray-900); letter-spacing: 1.5px; }       /* logo čistě grafitově, ne žlutě */
.header-username { color: var(--gray-800); display: none; }
.header-hamburger span { background: var(--gray-800); }
.header-weather { color: var(--gray-500) !important; }
.header-avatar { border-color: var(--primary); }                       /* vínový rámeček */
.header-user:hover { background: rgba(139, 35, 50, 0.06); }
.lang-switch { background: var(--white); border: 1px solid var(--gray-300); color: var(--gray-700); }
.lang-switch:hover { background: var(--gray-100); border-color: var(--primary); color: var(--primary); }
.notif-bell { color: var(--gray-700); }
.notif-bell:hover { color: var(--primary); }

/* Mobilní drawer: světlý glass */
.drawer { background: rgba(250, 248, 245, 0.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.drawer-header { background: transparent; border-bottom: 1px solid var(--gray-200); }
.drawer-logo { color: var(--gray-900); }
.drawer-close { color: var(--gray-500); }
.drawer-close:hover { background: var(--gray-100); color: var(--gray-900); }
.drawer-user { color: var(--primary); background: var(--gray-50); }
.drawer-item { color: var(--gray-700); }
.drawer-item svg { color: var(--gray-500); }
.drawer-item:hover, .drawer-item.active { background: var(--gray-100); color: var(--gray-900); }
.drawer-item.active { color: var(--primary); }
.drawer-item.active svg { color: var(--primary); }
.drawer-item-logout, .drawer-item-logout svg { color: var(--danger) !important; }

/* Login: krémové pozadí místo modrého gradientu */
#login-screen { background: linear-gradient(160deg, #FAF8F5 0%, #EFE4E2 100%) !important; }
.login-logo { color: var(--gray-900); }

/* Desktop hlavička s username viditelným (override skrytí výše) */
@media (min-width: 1024px) { .header-username { display: block; } }

/* ============================================================
   BREVO VIZUÁLNÍ JAZYK — vzdušné měkké karty (vzorová obrazovka: Domů)
   Prostor, velké zaoblení, měkký rozptýlený stín, jasná hierarchie.
   ============================================================ */
.brevo-home { padding: 30px 24px 88px; max-width: 1180px; margin: 0 auto; }
@media (max-width: 640px) { .brevo-home { padding: 22px 16px 88px; } }

.bw-hello { margin-bottom: 30px; }
.bw-hello-title { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.025em; color: var(--gray-900); margin: 0; }
.bw-hello-sub { color: var(--gray-500); font-size: 0.98rem; margin-top: 7px; text-transform: capitalize; }

/* KPI karty */
.bw-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 18px; margin-bottom: 30px; }
.bw-kpi {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  background: var(--white); border: none; border-radius: 20px; padding: 22px 22px 20px;
  box-shadow: 0 1px 3px rgba(26,26,26,0.04), 0 10px 26px rgba(26,26,26,0.05);
  cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; font-family: inherit; width: 100%;
}
.bw-kpi:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(26,26,26,0.05), 0 18px 42px rgba(26,26,26,0.10); }
.bw-kpi-label { font-size: 0.78rem; color: var(--gray-500); font-weight: 600; margin-top: 16px; }
.bw-kpi-value { font-size: 2.3rem; font-weight: 800; color: var(--gray-900); line-height: 1.05; margin-top: 6px; letter-spacing: -0.02em; }
.bw-kpi-hint { font-size: 0.85rem; color: var(--gray-400); margin-top: 8px; }

/* Barevné ikonkové dlaždice */
.bw-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; }
.bw-ic--sm { width: 38px; height: 38px; border-radius: 11px; }
.bw-ic--wine { background: rgba(139,35,50,0.10); color: #8B2332; }
.bw-ic--amber { background: rgba(180,83,9,0.13); color: #B45309; }
.bw-ic--red { background: rgba(192,57,43,0.12); color: #C0392B; }
.bw-ic--green { background: rgba(46,125,50,0.12); color: #2E7D32; }
.bw-ic--neutral { background: rgba(155,145,137,0.18); color: #7A7066; }

/* Sekční karty */
.bw-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(344px, 1fr)); gap: 20px; }
@media (max-width: 640px) { .bw-sections { grid-template-columns: 1fr; } }
.bw-card {
  background: var(--white); border-radius: 20px; padding: 24px 24px 22px;
  box-shadow: 0 1px 3px rgba(26,26,26,0.04), 0 10px 26px rgba(26,26,26,0.05);
}
.bw-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bw-card-title { font-size: 1.02rem; font-weight: 700; color: var(--gray-900); letter-spacing: -0.01em; }

/* Seznamy — vzduch mezi řádky, jemné oddělovače */
.bw-list { display: flex; flex-direction: column; }
.bw-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--gray-100); }
.bw-row:first-child { border-top: none; padding-top: 6px; }
.bw-row-main { flex: 1; min-width: 0; }
.bw-row-title { font-weight: 600; color: var(--gray-900); font-size: 0.95rem; }
.bw-row-meta { font-size: 0.8rem; color: var(--gray-400); margin-top: 3px; }
.bw-row-body { font-size: 0.88rem; color: var(--gray-600); line-height: 1.55; margin-top: 6px; }
.bw-row-amount { font-size: 0.92rem; font-weight: 800; color: var(--primary); white-space: nowrap; }
.bw-row-date { font-size: 0.8rem; font-weight: 600; color: var(--gray-500); white-space: nowrap; }
.bw-row-date.is-over { color: var(--danger); font-weight: 700; }

.bw-more { margin-top: 16px; }
.bw-btn {
  background: var(--gray-50); border: 1px solid var(--gray-200); color: var(--gray-800);
  border-radius: 999px; padding: 9px 18px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all .15s;
}
.bw-btn:hover { background: rgba(139,35,50,0.06); border-color: var(--primary); color: var(--primary); }

.bw-empty { text-align: center; padding: 50px 28px; }
.bw-empty-ic { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px; display: grid; place-items: center; background: rgba(139,35,50,0.08); color: var(--primary); }
.bw-empty-ic svg { width: 26px; height: 26px; }
.bw-empty-title { font-size: 1.1rem; font-weight: 700; color: var(--gray-900); }
.bw-empty-sub { color: var(--gray-500); font-size: 0.92rem; margin-top: 6px; max-width: 420px; margin-left: auto; margin-right: auto; }

.bw-skel { background: var(--gray-100); border-radius: 6px; animation: bw-pulse 1.4s ease-in-out infinite; }
.bw-kpi--skel { cursor: default; }
@keyframes bw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ============================================================
   BREVO JAZYK — globální sjednocení (karty, tlačítka, menu, hlavička)
   Platí na VŠECHNY obrazovky používající .card / .btn / sidebar.
   ============================================================ */

/* Karty: měkké, vzdušné, bez tvrdé linky */
.card {
  border: 1px solid rgba(26, 26, 26, 0.045);
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(26,26,26,0.04), 0 10px 26px rgba(26,26,26,0.05);
  padding: 24px;
  margin-bottom: 18px;
}
.card:hover { box-shadow: 0 2px 6px rgba(26,26,26,0.05), 0 16px 38px rgba(26,26,26,0.08); }

/* Nadpisy stránek — víc vzduchu */
.page-title { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 24px; color: var(--gray-900); }

/* Tlačítka — kulatější, měkčí, vínový primár s jemným stínem */
.btn { border-radius: 10px; padding: 10px 18px; font-weight: 600; }
.btn-sm { border-radius: 9px; padding: 7px 14px; }
.btn-primary { box-shadow: 0 4px 12px rgba(139, 35, 50, 0.18); }
.btn-outline { border-radius: 10px; }

/* Vstupy — měkčí rohy */
.form-input, .form-select, .form-textarea { border-radius: 10px; }

/* Sidebar (desktop) — vzdušnější řádky, měkká pilulka místo tvrdého proužku, jemný glass */
@media (min-width: 1024px) {
  .sidebar {
    padding: 14px 12px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    backdrop-filter: saturate(150%) blur(12px);
    border-right: 1px solid var(--gray-200);
  }
  .sidebar .nav-item {
    padding: 11px 14px; margin: 3px 4px; gap: 13px;
    border-radius: 12px; width: calc(100% - 8px);
    color: var(--gray-600);
  }
  .sidebar .nav-item svg { color: var(--gray-400); }
  .sidebar .nav-item:hover { background: var(--gray-100); color: var(--gray-900); }
  .sidebar .nav-item:hover svg { color: var(--gray-600); }
  .sidebar .nav-item.active { background: var(--primary-lighter); color: var(--primary-dark); font-weight: 600; }
  .sidebar .nav-item.active svg { color: var(--primary); }
  .sidebar .nav-item.active::before { display: none; }  /* zrušen tvrdý levý proužek */
}

/* Hlavička — měkčí glass, jemnější dělící linka */
.app-header {
  background: rgba(250, 248, 245, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(26, 26, 26, 0.05);
  box-shadow: 0 1px 24px rgba(26, 26, 26, 0.04);
}

/* Modály — větší zaoblení, měkký stín */
.modal { border-radius: 20px; box-shadow: var(--shadow-lg); }

/* --- Mini-vizualizace v KPI kartách (Domů) --- */
.bw-mini { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; width: 100%; }
.bw-minibar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--gray-100); gap: 2px; }
.bw-seg { display: block; min-width: 6px; border-radius: 999px; }
.bw-seg--wine { background: #8B2332; } .bw-seg--amber { background: #C77B2C; } .bw-seg--red { background: #C0392B; }
.bw-seg--green { background: #3E9142; } .bw-seg--neutral { background: #CDC4BA; }
.bw-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.bw-lg { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--gray-500); }
.bw-lg b { color: var(--gray-700); font-weight: 700; }
.bw-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bw-dot--wine { background: #8B2332; } .bw-dot--amber { background: #C77B2C; } .bw-dot--red { background: #C0392B; }
.bw-dot--green { background: #3E9142; } .bw-dot--neutral { background: #CDC4BA; }

/* --- Sjednocení custom modulů (stock, deals, admin, tým) do měkkého jazyka --- */
.team-card, .pending-user-card, .stk-month-card, .dl-card {
  border-radius: 14px;
  border: 1px solid rgba(26, 26, 26, 0.05);
  box-shadow: 0 1px 3px rgba(26,26,26,0.04), 0 8px 22px rgba(26,26,26,0.05);
}
.team-card:hover, .stk-month-card:hover, .dl-card:hover { box-shadow: 0 2px 6px rgba(26,26,26,0.05), 0 12px 30px rgba(26,26,26,0.08); }
.dl-col {
  border-radius: 16px; background: var(--white);
  border: 1px solid rgba(26, 26, 26, 0.05);
  box-shadow: 0 1px 3px rgba(26,26,26,0.04), 0 8px 22px rgba(26,26,26,0.05);
}
.admin-section { margin-bottom: 24px; }
.log-entry { border-radius: 10px; }

/* ============================================================
   MODERNÍ v2 (Linear/Vercel/Stripe) — bílá, šedé linky, indigo akcent jen místy,
   KOMPAKTNÍ hustota. Tento blok je poslední -> přebíjí dřívější vínové/nafouknuté.
   ============================================================ */

/* Karty: bílé, tenká šedá linka, skoro plochý stín, kompaktnější */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  margin-bottom: 14px;
}
.card:hover { box-shadow: var(--shadow); }
.page-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 20px; }

/* Tlačítka: indigo primár, jen MÍSTY */
.btn { border-radius: 8px; padding: 8px 15px; }
.btn-sm { border-radius: 7px; padding: 6px 12px; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: none; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { border-radius: 8px; border-color: var(--gray-300); }

/* Hlavička: čistá bílá glass + jemná šedá linka (žádná krémová/vínová) */
.app-header {
  background: rgba(255, 255, 255, 0.80);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: none;
}
.header-avatar { border-color: var(--gray-200); }
.header-user:hover { background: var(--gray-100); }
.lang-switch:hover { background: var(--gray-100); border-color: var(--gray-300); color: var(--gray-800); }
.notif-bell:hover { color: var(--primary); }

/* Sidebar: kompaktní, indigo aktivní stav (jen tady barva) */
@media (min-width: 1024px) {
  .sidebar { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; border-right: 1px solid var(--gray-200); padding: 10px 10px; }
  .sidebar .nav-item { padding: 8px 12px; margin: 2px 4px; border-radius: 8px; gap: 11px; color: var(--gray-600); }
  .sidebar .nav-item svg { color: var(--gray-400); }
  .sidebar .nav-item:hover { background: var(--gray-100); color: var(--gray-900); }
  .sidebar .nav-item.active { background: var(--primary-lighter); color: var(--primary-dark); }
  .sidebar .nav-item.active svg { color: var(--primary); }
}

/* === Domů: kompaktní karty + tlumené ikonky === */
.brevo-home { padding: 24px 22px 80px; }
.bw-hello-title { font-size: 1.6rem; }
.bw-kpis { gap: 14px; margin-bottom: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bw-kpi { padding: 16px 16px 15px; border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: var(--shadow-sm); }
.bw-kpi:hover { transform: none; box-shadow: var(--shadow); border-color: var(--gray-300); }
.bw-kpi-label { margin-top: 13px; font-size: 0.76rem; color: var(--gray-500); }
.bw-kpi-value { font-size: 1.9rem; }
.bw-kpi-hint { font-size: 0.8rem; color: var(--gray-400); }
.bw-sections { gap: 14px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.bw-card { padding: 18px; border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: var(--shadow-sm); }
.bw-row { padding: 10px 0; }
.bw-row:first-child { padding-top: 4px; }
.bw-row-amount { color: var(--gray-900); }
.bw-empty-ic { background: var(--gray-100); color: var(--gray-500); }
.bw-btn:hover { background: var(--gray-100); border-color: var(--gray-300); color: var(--gray-800); }

/* Tlumené barevné ikonky (Linear/Brevo — decentní akcent, ne plochy) */
.bw-ic { width: 38px; height: 38px; border-radius: 10px; }
.bw-ic--sm { width: 34px; height: 34px; border-radius: 9px; }
.bw-ic--neutral { background: #F4F4F5; color: #6B7280; }
.bw-ic--blue    { background: #EFF4FF; color: #2563EB; }
.bw-ic--indigo  { background: var(--primary-lighter); color: var(--primary); }
.bw-ic--green   { background: #ECFDF5; color: #059669; }
.bw-ic--purple  { background: #F5F3FF; color: #7C3AED; }
.bw-ic--amber   { background: #FFFBEB; color: #D97706; }
.bw-ic--red     { background: #FEF2F2; color: #DC2626; }
.bw-ic--wine    { background: var(--primary-lighter); color: var(--primary); }  /* legacy -> indigo */

/* Mini-proužky: neutrální/tlumené */
.bw-seg--neutral, .bw-dot--neutral { background: #D4D4D8; }
.bw-seg--blue,    .bw-dot--blue    { background: #3B82F6; }
.bw-seg--indigo,  .bw-dot--indigo  { background: var(--primary); }
.bw-seg--green,   .bw-dot--green   { background: #10B981; }
.bw-seg--purple,  .bw-dot--purple  { background: #8B5CF6; }
.bw-seg--amber,   .bw-dot--amber   { background: #F59E0B; }
.bw-seg--red,     .bw-dot--red     { background: #EF4444; }
.bw-seg--wine,    .bw-dot--wine    { background: var(--primary); }

/* === Objednávky: nová paleta + kompaktní řádky + neutrální měnový odznak === */
.oz-view {
  --cc-bg: #F7F7F8; --cc-surface: #FFFFFF; --cc-text: #0A0A0A; --cc-neutral: #6B7280;
  --cc-line: #EAEAEC; --cc-accent: var(--primary); --cc-accent-soft: rgba(79,70,229,0.08);
  --cc-radius: 12px; --cc-radius-lg: 14px;
  --cc-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.oz-wrap { padding: 22px 16px 88px; }
.oz-title { font-size: 1.45rem; }
.oz-salon-list { gap: 6px; }
.oz-salon-card { padding: 9px 12px; gap: 11px; border-radius: 10px; box-shadow: none; border: 1px solid var(--cc-line); }
.oz-salon-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--gray-300); }
.oz-avatar { width: 34px; height: 34px; border-radius: 9px; background: #F4F4F5; color: #6B7280; font-size: 0.82rem; }
.oz-salon-name { font-size: 0.92rem; }
.oz-salon-sub { font-size: 0.78rem; }
.oz-cur, .oz-cur-eur { background: #F4F4F5; color: #6B7280; }   /* měna neutrálně, ne barevně */
.oz-search { border-radius: 10px; }
.oz-step.is-active .oz-step-dot { background: var(--primary); border-color: var(--primary); }
.oz-step.is-done .oz-step-dot { background: var(--primary-lighter); color: var(--primary); }

/* ============================================================
   DASHBOARD (Domů) — pastelové KPI dlaždice + graf + spodní karty
   ============================================================ */
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }
/* Mobil: 2 dlaždice vedle sebe (ne pod sebou) */
@media (max-width: 520px) { .dash-kpis { grid-template-columns: 1fr 1fr; gap: 10px; } }

.dash-kpi { border-radius: 14px; padding: 16px 16px 15px; }
.dash-kpi-top { display: flex; align-items: center; gap: 9px; }
.dash-kpi-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,0.55); }
.dash-kpi-label { font-size: 0.78rem; font-weight: 600; }
.dash-kpi-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 13px; line-height: 1; }
.dash-kpi-trend { font-size: 0.76rem; margin-top: 8px; opacity: 0.85; }
.dash-prog { margin-top: 13px; height: 6px; border-radius: 999px; background: rgba(0,0,0,0.08); overflow: hidden; }
.dash-prog span { display: block; height: 100%; border-radius: 999px; }

/* pastelové dlaždice (přesné barvy z předlohy) */
.dash-kpi--obrat { background: #E6F1FB; color: #0C447C; }
.dash-kpi--obrat .dash-kpi-label, .dash-kpi--obrat .dash-kpi-ic { color: #185FA5; }
.dash-kpi--orders { background: #EEEDFE; color: var(--primary); }
.dash-kpi--orders .dash-kpi-label, .dash-kpi--orders .dash-kpi-ic { color: #534AB7; }
.dash-kpi--salons { background: #E1F5EE; color: #085041; }
.dash-kpi--salons .dash-kpi-label, .dash-kpi--salons .dash-kpi-ic { color: #0F6E56; }
.dash-kpi--plan { background: #FAEEDA; color: #854F0B; }
.dash-kpi--plan .dash-kpi-label, .dash-kpi--plan .dash-kpi-ic { color: #BA7517; }
.dash-kpi--plan .dash-prog span { background: #BA7517; }

/* Graf obratu */
.dash-chartcard { background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dash-card-title { font-size: 1rem; font-weight: 700; color: var(--gray-900); }
.dash-sample { font-size: 0.72rem; color: var(--gray-400); }
.dash-chart-wrap { position: relative; height: 230px; }

/* Spodní dvojice karet */
.dash-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .dash-two { grid-template-columns: 1fr; } }
.dash-card { border-radius: 14px; padding: 18px; }
.dash-card--blue { background: #E6F1FB; }
.dash-card--green { background: #E1F5EE; }
.dash-card .dash-card-title { margin-bottom: 16px; color: #1A1A1A; }

.dash-bars { display: flex; flex-direction: column; gap: 13px; }
.dash-bar-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.84rem; color: #1A1A1A; margin-bottom: 6px; }
.dash-bar-val { font-weight: 700; font-size: 0.8rem; color: #2A4A6B; }
.dash-bar-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.75); overflow: hidden; }
.dash-bar-fill { display: block; height: 100%; border-radius: 999px; background: #378ADD; }

.dash-brands { display: flex; flex-direction: column; gap: 12px; }
.dash-brand { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: #1A1A1A; }
.dash-brand-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.dash-brand-name { flex: 1; }
.dash-brand-pct { font-weight: 700; }

/* ============================================================
   OBJEDNÁVKY — krok Zboží (ceník + košík)
   ============================================================ */
.oz-wrap--cenik { padding-bottom: 24px; }

/* karta vybraného salonu (pastelově zelená) */
.oz-shopbar { display: flex; align-items: center; gap: 11px; background: #E1F5EE; border: 1px solid #CDEBE0; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.oz-shopbar .oz-avatar-sm { background: #0F6E56; color: #fff; }
.oz-shopbar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.oz-shopbar-name { font-weight: 700; color: #0A0A0A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oz-shopbar-sub { font-size: 0.78rem; color: #0F6E56; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oz-shopbar .oz-change { color: #0F6E56; }
.oz-shopbar .oz-cur { background: rgba(255,255,255,0.7); color: #0F6E56; }

/* filtr značek — capsule chipy */
.oz-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; -webkit-overflow-scrolling: touch; }
.oz-chips::-webkit-scrollbar { height: 0; }
.oz-chip { flex: 0 0 auto; border: none; border-radius: 999px; padding: 8px 15px; font-size: 0.85rem; font-weight: 600; cursor: pointer; background: #EFEFF1; color: #52525B; transition: all .14s; }
.oz-chip:hover { background: #E6E6EA; }
.oz-chip.is-active { background: var(--primary); color: #fff; }
/* Filtry kategorií = mřížka zalomená na víc řádků (vidět všechny najednou, jako starý systém) */
.oz-tabs { flex-wrap: wrap !important; overflow-x: visible !important; gap: 6px; padding-bottom: 0; }
.oz-tabs .oz-chip { flex: 0 1 auto; font-size: 0.8rem; padding: 7px 13px; }

/* seznam produktů */
.oz-prods { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.oz-prod { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid #EAEAEC; border-radius: 10px; padding: 9px 12px; }
.oz-prod.is-in { border-color: #C5C0EE; background: #FAFAFE; }
.oz-prod-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; }
.oz-prod-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.oz-prod-name { font-size: 0.9rem; font-weight: 600; color: #1A1A1A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oz-prod-meta { font-size: 0.74rem; color: #9CA3AF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oz-prod-price { font-size: 0.88rem; font-weight: 700; color: #1A1A1A; white-space: nowrap; }
.oz-qty { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.oz-qty-add { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #D4D4D8; background: #fff; color: var(--primary); font-size: 1.2rem; font-weight: 600; cursor: pointer; line-height: 1; }
.oz-qty-add:hover { background: #F4F4F5; border-color: var(--primary); }
.oz-qty-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: #EEEDFE; color: var(--primary); font-size: 1.1rem; font-weight: 700; cursor: pointer; line-height: 1; }
.oz-qty-btn:hover { background: #E0DEFB; }
.oz-qty-num { min-width: 22px; text-align: center; font-weight: 700; font-size: 0.92rem; color: #1A1A1A; }

/* pastelové ikonkové dlaždice dle značky */
.oz-ic--neutral { background: #F4F4F5; color: #6B7280; }
.oz-ic--green { background: #E1F5EE; color: #0F6E56; }
.oz-ic--blue { background: #E6F1FB; color: #185FA5; }
.oz-ic--purple { background: #EEEDFE; color: #534AB7; }
.oz-ic--amber { background: #FAEEDA; color: #BA7517; }
.oz-ic--pink { background: #FBEAF2; color: #9D3B6B; }

/* spodní lišta (tmavě fialová) */
.oz-bar { position: sticky; bottom: 12px; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--primary); color: #fff; border-radius: 14px; padding: 13px 16px; box-shadow: 0 8px 24px rgba(60,52,137,0.30); }
.oz-bar.is-empty { background: #EFEFF1; color: #9CA3AF; box-shadow: none; justify-content: center; }
.oz-bar-info { font-size: 0.92rem; }
.oz-bar-info strong { font-weight: 800; }
.oz-bar-btn { background: #fff; color: var(--primary); border: none; border-radius: 10px; padding: 10px 18px; font-size: 0.9rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.oz-bar-btn:hover { background: #F0EFFC; }

/* Souhrn (krok 3) */
.oz-sum-card { background: #fff; border: 1px solid #EAEAEC; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.oz-sum-head { font-size: 0.78rem; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.oz-sum-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #F1F1F3; }
.oz-sum-row:first-of-type { border-top: none; }
.oz-sum-name { flex: 1; min-width: 0; font-size: 0.88rem; color: #1A1A1A; display: flex; flex-direction: column; gap: 1px; }
.oz-sum-code { font-size: 0.72rem; color: #9CA3AF; }
.oz-sum-qty { font-size: 0.82rem; color: #6B7280; white-space: nowrap; }
.oz-sum-unit { font-size: 0.82rem; color: #6B7280; white-space: nowrap; min-width: 70px; text-align: right; }
.oz-sum-line { font-size: 0.88rem; font-weight: 700; color: #1A1A1A; white-space: nowrap; min-width: 80px; text-align: right; }
.oz-sum-total { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 12px; border-top: 2px solid #EAEAEC; font-size: 1rem; color: #1A1A1A; }
.oz-sum-total strong { font-size: 1.15rem; font-weight: 800; }
.oz-note { margin-bottom: 12px; }
.oz-note label { display: block; font-size: 0.8rem; color: #6B7280; margin-bottom: 6px; }
.oz-note textarea { width: 100%; box-sizing: border-box; border: 1px solid #EAEAEC; border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 0.9rem; resize: vertical; color: #1A1A1A; }
.oz-note textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.12); }
.oz-submit-err { color: #DC2626; font-size: 0.85rem; margin-bottom: 10px; }
.oz-back { background: transparent; border: none; color: rgba(255,255,255,0.85); font-size: 0.9rem; font-weight: 600; cursor: pointer; padding: 8px 4px; }
.oz-back:hover { color: #fff; }

/* Potvrzení odeslání */
.oz-done { text-align: center; padding: 46px 20px; }
.oz-done-ic { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; background: #E1F5EE; color: #0F6E56; }
.oz-done-title { font-size: 1.3rem; font-weight: 800; color: #1A1A1A; }
.oz-done-sub { font-size: 0.92rem; color: #6B7280; margin-top: 8px; line-height: 1.55; }
.oz-done-btn.oz-bar-btn { margin-top: 22px; background: var(--primary); color: #fff; }
.oz-done-btn.oz-bar-btn:hover { background: var(--primary-dark); }

/* Ceník — slevové sloupce (původní přeškrtnutá / vaše cena zeleně / odznak slevy) */
.oz-prod-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 0; flex: 0 0 auto; min-width: 76px; }
.oz-p-orig { font-size: 0.72rem; color: #9CA3AF; text-decoration: line-through; line-height: 1.25; }
.oz-p-your { font-size: 0.9rem; font-weight: 700; color: #0F6E56; white-space: nowrap; line-height: 1.25; }
.oz-disc-badge { display: inline-block; margin-left: 7px; font-size: 0.68rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: #E1F5EE; color: #0F6E56; vertical-align: middle; }

/* Souhrn — původní/sleva řádky */
.oz-sum-sub { display: flex; justify-content: space-between; font-size: 0.84rem; color: #6B7280; padding: 4px 0; }
.oz-strike { text-decoration: line-through; color: #9CA3AF; }
.oz-sum-saved { color: #0F6E56; font-weight: 600; }

/* Akce — odznak + záložka */
.oz-akce-badge { display: inline-block; margin-left: 7px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 6px; background: #FAEEDA; color: #BA7517; vertical-align: middle; }
/* Akce záložka = červená (1:1 starý), Oblíbené = žlutá */
.oz-chip-akce { background: #FEE2E2; color: #C53030; }
.oz-chip-akce:hover { background: #FECACA; }
.oz-chip-akce.is-active { background: #E53E3E; color: #fff; }
.oz-chip-fav { background: #FEF3C7; color: #92400E; }
.oz-chip-fav:hover { background: #FDE68A; }
.oz-chip-fav.is-active { background: #F59E0B; color: #fff; }
.oz-chip-n { opacity: 0.7; font-weight: 600; }
.oz-prod.is-promo { border-color: #F0DFC0; }

/* Nadpisy kategorií v ceníku (seskupení) */
.oz-cat-head { font-size: 0.82rem; font-weight: 800; color: #3F3F46; letter-spacing: 0.01em; padding: 16px 4px 7px; border-bottom: 1px solid var(--gray-200); margin-bottom: 4px; }
.oz-cat-head:first-child { padding-top: 2px; }
.oz-cat-n { color: #9CA3AF; font-weight: 600; }

/* Lišta „Znovu objednat" */
.oz-reorder { display: flex; align-items: center; gap: 10px; background: var(--primary-lighter); border: 1px solid #DDE1FF; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.oz-reorder-ic { font-size: 1.1rem; color: var(--primary); }
.oz-reorder-txt { flex: 1; font-size: 0.85rem; color: var(--primary-dark); }
.oz-reorder-btn { background: var(--primary); color: #fff; border: none; border-radius: 9px; padding: 8px 14px; font-size: 0.83rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.oz-reorder-btn:hover { background: var(--primary-dark); }

/* ===== Ceník jako TABULKA (věrná kopie starého systému) ===== */
.oz-info-banner { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; background: linear-gradient(135deg, var(--primary-lighter), #F5F3FF); border: 1px solid #E0E2FF; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.oz-info-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--primary-dark); background: rgba(255, 255, 255, 0.75); padding: 6px 13px; border-radius: 20px; }
.oz-info-chip strong { color: var(--primary-dark); }
.oz-info-vat { color: #6B7280; }

.oz-tw { border: 1px solid var(--gray-200); border-radius: 12px; overflow: auto; max-height: 640px; margin-bottom: 14px; }
.oz-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; table-layout: fixed; }
/* pevné šířky sloupců — všech 5 se vejde bez vodorovného scrollu (NÁZEV = zbytek) */
.oz-table th:nth-child(1) { width: 108px; }   /* KÓD */
.oz-table th:nth-child(3) { width: 90px; }    /* PŮVODNÍ CENA */
.oz-table th:nth-child(4) { width: 90px; }    /* VAŠE CENA */
.oz-table th:nth-child(5) { width: 108px; }   /* MNOŽSTVÍ */
.oz-table thead { position: sticky; top: 0; z-index: 2; }
.oz-table th { background: #F3F4F6; padding: 7px 12px; text-align: left; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6B7280; border-bottom: 1.5px solid var(--gray-200); white-space: nowrap; }
.oz-th-r { text-align: right !important; }
.oz-th-c { text-align: center !important; }
/* kompaktní řádky — těsně pod sebou jako originál */
.oz-table td { padding: 3px 12px; border-bottom: 1px solid #E9E9EE; vertical-align: middle; height: 32px; }
.oz-prow:hover td { background: #FAFAFB; }
.oz-prow.is-in td { background: #F5F3FF; }
.oz-prow.is-promo td { background: rgba(229, 62, 62, 0.035); }
.oz-prow.is-in.is-promo td { background: #F5F3FF; }
.oz-c-orig, .oz-c-your { text-align: right; white-space: nowrap; overflow: hidden; }
.oz-c-qty { text-align: right; white-space: nowrap; }
.oz-c-code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* NÁZEV: flex — text se zkrátí „…", odznaky vždy viditelné, nikdy nevytlačí ceny */
.oz-c-name { display: flex; align-items: center; overflow: hidden; }
.oz-pc { font-family: ui-monospace, monospace; font-size: 0.72rem; color: #9CA3AF; }
.oz-pn { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.oz-c-name .oz-akce-badge, .oz-c-name .oz-fav-badge, .oz-c-name .oz-dt { flex: 0 0 auto; }
.oz-po { color: #9CA3AF; text-decoration: line-through; font-size: 0.8rem; }
.oz-pd { color: #0F6E56; font-weight: 700; }
.oz-cgh td { background: linear-gradient(135deg, var(--primary-lighter), #F7F7FB); font-weight: 800; font-size: 0.78rem; color: #3F3F46; padding: 6px 12px; border-bottom: 1px solid #E0E2FF; height: auto; }
.oz-cgh .oz-cat-n { color: #9CA3AF; font-weight: 600; }

.oz-dt { display: inline-block; font-size: 0.58rem; padding: 1px 5px; border-radius: 5px; font-weight: 700; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.oz-dt.d35 { background: #E1F5EE; color: #0F6E56; }
.oz-dt.d40 { background: #D2F0E4; color: #0B6049; }
.oz-dt.d45 { background: #BFE9D6; color: #08543F; }
.oz-dt.d50 { background: #A7E0C7; color: #064534; }
.oz-dt.d25 { background: #FCEEDD; color: #B45309; }
.oz-dt.d0 { background: #FEE2E2; color: #C53030; }
.oz-fav-badge { display: inline-flex; align-items: center; font-size: 0.66rem; color: #92400E; background: #FEF3C7; padding: 2px 7px; border-radius: 10px; margin-left: 6px; font-weight: 600; }

.oz-qw { display: inline-flex; align-items: center; }
.oz-qb { width: 26px; height: 26px; border: 1.5px solid var(--gray-200); background: #fff; cursor: pointer; font-size: 0.95rem; font-weight: 700; color: var(--gray-700); display: flex; align-items: center; justify-content: center; }
.oz-qb:first-child { border-radius: 7px 0 0 7px; }
.oz-qb:last-child { border-radius: 0 7px 7px 0; }
.oz-qb:hover { background: #F5F3FF; border-color: #C7D2FE; color: var(--primary); }
.oz-qi { width: 38px; height: 26px; border: 1.5px solid var(--gray-200); border-left: 0; border-right: 0; text-align: center; font-size: 0.8rem; font-weight: 700; background: #fff; outline: none; color: var(--gray-900); -moz-appearance: textfield; }
.oz-qi::-webkit-outer-spin-button, .oz-qi::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.oz-prow.is-in .oz-qi { color: var(--primary); }

.oz-cust { margin-bottom: 14px; }
.oz-cust-add { width: 100%; padding: 11px; background: none; border: 1.5px dashed var(--gray-300); border-radius: 10px; color: var(--gray-600); font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.oz-cust-add:hover { border-color: var(--primary); color: var(--primary); background: #F5F3FF; }
.oz-cust-form { margin-top: 10px; padding: 12px; border: 1px solid var(--gray-200); border-radius: 10px; background: var(--gray-50); }
.oz-cust-form > .oz-cust-inp { width: 100%; }
.oz-cust-row { display: flex; gap: 8px; margin-top: 8px; }
.oz-cust-inp { flex: 1; padding: 9px 11px; border: 1px solid var(--gray-200); border-radius: 8px; font-size: 0.86rem; }
.oz-cust-qty { max-width: 70px; }
.oz-cust-ok { padding: 9px 20px; background: var(--primary); color: #fff; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 0.86rem; }
.oz-cust-cancel { padding: 9px 16px; background: none; border: 1px solid var(--gray-200); border-radius: 8px; cursor: pointer; font-size: 0.86rem; color: var(--gray-600); }
.oz-cust-err { color: #C53030; font-size: 0.8rem; margin-top: 6px; }
.oz-cust-tag { display: inline-block; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; background: #E5E7EB; color: #4B5563; padding: 2px 6px; border-radius: 5px; margin-right: 6px; vertical-align: middle; }
.oz-cust-rm { border: none; background: none; color: #C53030; font-weight: 700; cursor: pointer; font-size: 1rem; padding: 0 4px; margin-left: 4px; }

/* ================= Objednávky sjednocené s dashboardem ================= */
/* Plná šířka obsahu jako dashboard (menu zůstává) */
#view-objednavky.module-view { max-width: 100%; }
#view-objednavky .oz-wrap { max-width: 100%; }

/* Hlavička kroku (jako dashboard nadpisy) */
.oz-pagehead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.oz-pagetitle { font-size: 1.5rem; font-weight: 700; color: var(--gray-900); letter-spacing: -0.02em; margin: 0; }
.oz-pagecount { font-size: 0.85rem; color: var(--gray-500); font-weight: 600; }
.oz-filterbar { margin-bottom: 14px; }

/* Výběr salonu — dashboard-style mřížka bohatých karet */
.oz-salon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
.oz-salon-card { display: flex; flex-direction: column; align-items: stretch; gap: 5px; text-align: left; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px; cursor: pointer; transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition); font-family: inherit; }
.oz-salon-card:hover { box-shadow: var(--shadow); border-color: #C7D2FE; transform: translateY(-2px); }
.oz-salon-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.oz-salon-card .oz-avatar { width: 42px; height: 42px; border-radius: 12px; font-size: 1rem; }
.oz-salon-card .oz-salon-name { font-size: 1rem; font-weight: 700; color: var(--gray-900); line-height: 1.25; }
.oz-salon-card .oz-salon-sub { font-size: 0.82rem; color: var(--gray-500); }
.oz-salon-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.oz-status { font-size: 0.73rem; font-weight: 700; padding: 2px 9px; border-radius: 20px; }
.oz-status.is-on { background: #E1F5EE; color: #0F6E56; }
.oz-status.is-off { background: #F3F4F6; color: #9CA3AF; }
.oz-salon-card .oz-chev { font-size: 0.78rem; font-weight: 700; color: var(--primary); }

/* Ceník tabulka v bílé kartě (dashboard rámování) */
.oz-tw { background: var(--white); box-shadow: var(--shadow-sm); }

/* ===== MOBIL: ceník zůstává TABULKA, 1:1 responzivita ze staré předlohy ===== */
@media (max-width: 768px) {
  #view-objednavky.module-view { padding: 14px 12px; }
  /* info pruh na sloupec (jako starý .info-banner) */
  .oz-info-banner { flex-direction: column; gap: 8px; padding: 12px; }
  .oz-info-chip { font-size: 0.78rem; padding: 5px 10px; }
  /* tabulka: auto layout + menší fonty/padding, název se přirozeně zalomí */
  .oz-table { table-layout: auto; font-size: 0.82rem; }
  .oz-table th:nth-child(1), .oz-table th:nth-child(3), .oz-table th:nth-child(4), .oz-table th:nth-child(5) { width: auto; }
  .oz-table th { padding: 8px 6px; font-size: 0.66rem; }
  .oz-table td { padding: 8px 6px; height: auto; }
  .oz-c-name { display: table-cell; overflow: visible; }
  .oz-pn { display: inline; white-space: normal; overflow: visible; text-overflow: clip; max-width: none; min-width: 0; font-weight: 500; }
  .oz-c-code, .oz-c-orig, .oz-c-your { overflow: visible; }
  .oz-c-orig, .oz-c-your { white-space: nowrap; }
  .oz-pc { font-size: 0.72rem; }
  .oz-dt { font-size: 0.56rem; }
  .oz-qb { width: 36px; height: 36px; font-size: 1.05rem; }
  .oz-qi { width: 40px; height: 36px; }
  .oz-tw { overflow-x: auto; max-height: none; }
}
@media (max-width: 480px) {
  /* pevný layout: 4 sloupce se zaručeně vejdou do 390px, stepper zůstane vidět */
  .oz-table { font-size: 0.78rem; table-layout: fixed; width: 100%; }
  .oz-table th, .oz-table td { padding: 6px 4px; }
  /* skrýt sloupec KÓD na malých telefonech (jako starý systém) — NE nadpisy kategorií */
  .oz-table thead th:first-child, .oz-prow td:first-child { display: none; }
  /* NÁZEV = zbytek (co nejvíc), ceny úzké, MNOŽSTVÍ pevné pro stepper */
  .oz-table thead th:nth-child(3), .oz-c-orig { width: 50px; }
  .oz-table thead th:nth-child(4), .oz-c-your { width: 54px; }
  .oz-table thead th:nth-child(5), .oz-c-qty { width: 90px; }
  .oz-po { font-size: 0.66rem; }
  .oz-pd { font-size: 0.72rem; }
  .oz-pn { font-size: 0.8rem; line-height: 1.3; }
  .oz-qb { width: 27px; height: 28px; font-size: 0.95rem; }
  .oz-qi { width: 30px; height: 28px; }
}
/* Dotyková zařízení — větší stepper (jako starý @media(hover:none)) */
@media (hover: none) {
  .oz-qb { width: 40px; height: 40px; font-size: 1.15rem; }
  .oz-qi { width: 44px; height: 40px; }
}

/* Filtr OZ (rozbalovák) + CTA na kartě salonu */
.oz-filterrow { margin-bottom: 12px; }
.oz-ozfilter { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oz-ozfilter-lbl { font-size: 0.8rem; font-weight: 600; color: var(--gray-600); }
.oz-select { padding: 9px 12px; border: 1px solid var(--gray-200); border-radius: 9px; background: var(--white); font-size: 0.86rem; font-family: inherit; color: var(--gray-900); min-width: 230px; cursor: pointer; box-shadow: var(--shadow-sm); }
.oz-salon-oz { font-size: 0.74rem; color: var(--gray-500); font-weight: 600; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oz-salon-cta { display: block; text-align: center; margin-top: 10px; padding: 9px; border-radius: 9px; background: var(--primary-lighter); color: var(--primary); font-weight: 700; font-size: 0.85rem; transition: background var(--transition), color var(--transition); }
.oz-salon-card:hover .oz-salon-cta { background: var(--primary); color: #fff; }

/* MOBIL — výběr salonu: jeden sloupec, velké karty/search/CTA, ovládání palcem */
@media (max-width: 640px) {
  .oz-salon-grid { grid-template-columns: 1fr; gap: 12px; }
  .oz-salon-card { padding: 16px; }
  .oz-salon-card .oz-avatar { width: 50px; height: 50px; font-size: 1.15rem; border-radius: 14px; }
  .oz-salon-card .oz-salon-name { font-size: 1.1rem; }
  .oz-salon-card .oz-salon-sub { font-size: 0.88rem; }
  .oz-salon-cta { padding: 13px; font-size: 0.96rem; margin-top: 12px; }
  .oz-pagetitle { font-size: 1.25rem; }
  .oz-searchwrap .oz-search { font-size: 1rem; padding-top: 13px; padding-bottom: 13px; }
  .oz-ozfilter { display: flex; width: 100%; }
  .oz-ozfilter .oz-select { flex: 1; min-width: 0; width: 100%; padding: 13px 12px; font-size: 0.96rem; }
}

/* Admin — editor akcí */
.ak-top { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; font-size: 0.85rem; }
.ak-top .form-input { width: 120px; display: inline-block; margin-left: 6px; }
.ak-chk { display: flex; align-items: center; gap: 6px; }
.ak-block { border: 1px solid var(--gray-200); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.ak-h { font-weight: 700; font-size: 0.9rem; margin-bottom: 10px; color: var(--gray-900); }
.ak-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ak-code { font-family: ui-monospace, monospace; font-size: 0.78rem; background: var(--gray-100); padding: 2px 6px; border-radius: 5px; }
.ak-nm { flex: 1; min-width: 120px; font-size: 0.84rem; color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-pct, .ak-fp, .ak-fpe, .ak-t-od, .ak-t-pct, .ak-add-pct, .ak-add-fp, .ak-add-fpe { width: 70px; }
.ak-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.ak-add-code, .ak-add-fcode { min-width: 160px; }
.ak-x { border: none; background: var(--gray-100); color: var(--danger); border-radius: 6px; cursor: pointer; font-weight: 700; padding: 4px 9px; }
.ak-x:hover { background: #FEE2E2; }
.ak-grp { border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px; margin-bottom: 10px; background: var(--gray-50); }
.ak-g-name { flex: 1; } .ak-g-cat, .ak-g-nm, .ak-g-kody { flex: 1; min-width: 140px; }
.ak-tiers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.ak-tier { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--gray-200); border-radius: 8px; padding: 4px 8px; font-size: 0.82rem; }
.ak-save-row { margin-top: 14px; display: flex; align-items: center; gap: 10px; }

/* ===== Modul Objednávky = iframe s původním souborem (plná plocha, bez paddingu) ===== */
.module-view.oz-iframe-wrap { padding: 0 !important; max-width: 100% !important; margin: 0 !important; }
.oz-frame-bar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--white); border-bottom: 1px solid var(--gray-200); }
.oz-frame-back { background: var(--primary-lighter); color: var(--primary); border: none; border-radius: 9px; padding: 8px 13px; font-weight: 700; cursor: pointer; font-size: 0.85rem; }
.oz-frame-back:hover { background: var(--primary); color: #fff; }
.oz-frame-salon { font-weight: 600; color: var(--gray-800); }
.oz-frame { width: 100%; height: calc(100vh - var(--header-height) - 45px); border: 0; display: block; }

/* ===== DESIGN SYSTÉM: salonní/klientské karty — pastel CELÉ karty dle písmene ===== */
.oz-salon-card.tone-blue   { --tone-bg: var(--pastel-blue);   --tone-fg: var(--pastel-blue-fg); }
.oz-salon-card.tone-purple { --tone-bg: var(--pastel-purple); --tone-fg: var(--pastel-purple-fg); }
.oz-salon-card.tone-green  { --tone-bg: var(--pastel-green);  --tone-fg: var(--pastel-green-fg); }
.oz-salon-card.tone-amber  { --tone-bg: var(--pastel-amber);  --tone-fg: var(--pastel-amber-fg); }
.oz-salon-card[class*="tone-"] { background: var(--tone-bg) !important; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.oz-salon-card[class*="tone-"]:hover { box-shadow: var(--shadow); border-color: rgba(0, 0, 0, 0.10); transform: translateY(-2px); }
.oz-salon-card[class*="tone-"] .oz-avatar { background: #fff; color: var(--tone-fg); }
.oz-salon-card[class*="tone-"] .oz-salon-name { color: var(--gray-900); }
.oz-salon-card[class*="tone-"] .oz-salon-sub,
.oz-salon-card[class*="tone-"] .oz-salon-oz { color: var(--gray-600); }
.oz-salon-card[class*="tone-"] .oz-status.is-on { background: rgba(255, 255, 255, 0.78); color: var(--pastel-green-fg); }
.oz-salon-card[class*="tone-"] .oz-status.is-off { background: rgba(255, 255, 255, 0.6); color: var(--gray-500); }
.oz-salon-card[class*="tone-"] .oz-salon-cta { background: #fff; color: var(--tone-fg); }
.oz-salon-card[class*="tone-"]:hover .oz-salon-cta { background: var(--tone-fg); color: #fff; }

/* ============================================================
   LOGO Concept Czech — nahrazuje textový název (login / header / drawer)
   ============================================================ */
.login-logo-img {
  display: block;
  width: auto;
  height: 46px;
  max-width: 230px;
  margin: 0 auto 6px;
  object-fit: contain;
}
.header-logo { display: flex; align-items: center; }
.header-logo-img {
  display: block;
  height: 26px;
  width: auto;
  object-fit: contain;
}
.drawer-logo { display: flex; align-items: center; }
.drawer-logo-img {
  display: block;
  height: 28px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}
@media (max-width: 768px) {
  .header-logo-img { height: 22px; }
}

/* ============================================================
   KADEŘNÍCI (clients) — sjednoceno se salon pickerem
   ============================================================ */
.cl-actionbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cl-selectall {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-size: 0.8rem; color: var(--gray-600); font-weight: 600; cursor: pointer; user-select: none;
}
.cl-selectall input { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; }

/* CTA uvnitř karty je teď <button> — vynulovat nativní styl tlačítka */
.oz-salon-card .oz-salon-cta {
  width: 100%; border: none; cursor: pointer; font-family: inherit;
  display: block; text-align: center;
}
/* Checkbox výběru v rohu karty (místo měny) */
.cl-pick { display: inline-flex; align-items: center; justify-content: center; padding: 4px; cursor: pointer; }
.cl-pick input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.oz-salon-card.is-selected { outline: 2px solid var(--primary); outline-offset: -1px; }
.oz-salon-card .oz-salon-oz { font-size: 0.78rem; color: var(--gray-600); font-weight: 600; }

/* Nadpis skupiny (role v Týmu, sekce v dalších modulech) */
.cl-grouphead {
  font-size: 0.78rem; font-weight: 700; color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 1px;
  margin: 22px 0 10px; display: flex; align-items: center; gap: 8px;
}
.cl-grouphead span {
  background: var(--gray-100); color: var(--gray-500);
  font-size: 0.72rem; padding: 1px 8px; border-radius: 20px; letter-spacing: 0;
}
.cl-grouphead:first-child { margin-top: 4px; }

/* Sdílené pilulkové taby (stejný vzhled jako filtry v salon pickeru) */
.cc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.cc-tab {
  border: none; border-radius: 999px; padding: 8px 16px;
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  background: #EFEFF1; color: #52525B; transition: all .14s; font-family: inherit;
}
.cc-tab:hover { background: #E6E6EA; }
.cc-tab.is-active { background: var(--primary); color: #fff; }
/* Decentní popisek pod hlavičkou */
.cc-subtle { color: var(--gray-600); font-size: 0.9rem; margin-bottom: 16px; }

/* Sjednocení všech tab systémů na pilulky (st-tab, tab-btn) — vzhled jako reference */
.st-tabs, .tab-bar { border-bottom: none !important; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.st-tab, .tab-btn {
  border: none !important; border-radius: 999px !important;
  padding: 8px 16px !important; font-size: 0.85rem; font-weight: 600;
  background: #EFEFF1; color: #52525B; transition: all .14s;
}
.st-tab:hover:not(.active), .tab-btn:hover:not(.active) { background: #E6E6EA; color: var(--gray-700); }
.st-tab.active, .tab-btn.active { background: var(--primary); color: #fff; }
.tab-btn .tab-count { background: rgba(0,0,0,0.06); color: inherit; }
.tab-btn.active .tab-count { background: rgba(255,255,255,0.25); color: #fff; }

/* ============================================================
   JEDNOTNÁ ŠÍŘKA OBSAHU — plná šířka jako objednávkový modul.
   Obsah vyplní plochu vedle sidebaru, s jednotným vnitřním odsazením.
   ============================================================ */
.module-view { max-width: none; width: 100%; }
@media (min-width: 1024px) { .module-view { max-width: none; } }
.brevo-home { max-width: none; }
#view-objednavky.module-view { max-width: none; }
#view-objednavky .oz-wrap { max-width: 100%; }
/* vnitřní wrappery, které samy omezovaly šířku → plná šířka jako zbytek */
.oz-wrap { max-width: 100% !important; }

/* Úkoly: řádky do responzivní mřížky karet (využije plnou šířku) */
.task-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
@media (max-width: 560px) { .task-rows { grid-template-columns: 1fr; } }

/* Úkoly: barevné pastelové dlaždice dle DŮLEŽITOSTI (jako karty klientů).
   urgentní=červená · vysoká=jantarová · normální=modrá. Plná neprůhledná plocha (čitelnost). */
.task-row[class*="task-tone-"] {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.task-row.task-tone-urgent { background: #FDECEA; border-color: rgba(192,57,43,0.20); }
.task-row.task-tone-high   { background: #FAEEDA; border-color: rgba(180,83,9,0.20); }
.task-row.task-tone-normal { background: #E9F1FB; border-color: rgba(37,99,235,0.16); }
.task-row.task-tone-done   { background: #EAF6F0; border-color: rgba(15,110,86,0.16); }
.task-row[class*="task-tone-"]:hover {
  box-shadow: var(--shadow); border-color: rgba(0,0,0,0.12); transform: translateY(-2px);
}
/* chip prvky uvnitř barevné dlaždice = bílý podklad pro ostrost */
.task-row[class*="task-tone-"] .task-sub-tag,
.task-row[class*="task-tone-"] .task-assignee { background: rgba(255,255,255,0.72); color: var(--gray-700); }
.task-row[class*="task-tone-"] .task-row-due { color: var(--gray-600); }

/* ============================================================
   KALENDÁŘ — firemní design, barevné dlaždice událostí (marketing plán)
   ============================================================ */
.calendar-nav { margin-bottom: 14px; }
.calendar-month-title { color: var(--gray-900); font-size: 1.05rem; font-weight: 700; }
.calendar-nav-btn { border-radius: 10px; color: var(--gray-700); background: var(--white); border: 1px solid var(--gray-300); }
.calendar-nav-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--white); }

.calendar-grid { gap: 6px; }
.calendar-header-cell { color: var(--gray-500); font-size: 0.72rem; }
.calendar-cell {
  min-height: 94px; border: 1px solid var(--gray-200); border-radius: 12px;
  padding: 7px; display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  background: var(--white); transition: border-color var(--transition), box-shadow var(--transition);
}
.calendar-cell:hover { background: #FCFCFD; border-color: var(--gray-300); box-shadow: var(--shadow-sm); }
.calendar-cell.today { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.calendar-cell.other-month { opacity: 0.45; }
.calendar-day { font-size: 0.78rem; color: var(--gray-700); margin-bottom: 0; }

.cal-ev-wrap { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-ev {
  font-size: 0.68rem; font-weight: 600; padding: 2px 7px; border-radius: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35;
}
.cal-ev-more { font-size: 0.66rem; color: var(--gray-500); font-weight: 600; padding-left: 3px; }

/* Pilulková legenda typů */
.event-legend { gap: 6px; margin-bottom: 16px; }
.legend-item {
  padding: 4px 11px; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
  gap: 6px; align-items: center; border: none;
}
.legend-item .event-color-dot { width: 8px; height: 8px; }

/* Seznam událostí v měsíci = barevné dlaždice */
.cal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-top: 6px; }
.cal-list-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 13px 15px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  margin-bottom: 0; cursor: pointer; transition: box-shadow var(--transition), transform var(--transition);
}
.cal-list-item:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.cal-list-type { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; display: inline-flex; align-items: center; gap: 6px; }
.cal-list-title { font-weight: 700; color: var(--gray-900); font-size: 0.95rem; flex: none; }
.cal-list-date { font-size: 0.78rem; color: var(--gray-600); }

/* Časová osa klienta — vycentrovat SVG ikonu v barevném kolečku */
.cl-tl-dot { display: flex; align-items: center; justify-content: center; }

/* ============================================================
   PŘEHLED / SPRÁVA OBJEDNÁVEK
   ============================================================ */
.oz-modetabs { margin-bottom: 16px; }

/* Přehled = barevné dlaždice podle stavu objednávky */
.ord-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
@media (max-width: 560px) { .ord-list { grid-template-columns: 1fr; } }
.ord-tile {
  display: flex; flex-direction: column; gap: 5px; cursor: pointer;
  border: 1px solid rgba(0,0,0,0.05); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 16px;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.ord-tile:hover { box-shadow: var(--shadow); border-color: rgba(0,0,0,0.12); transform: translateY(-2px); }
.ord-tone-amber { background: #FBF3E4; }
.ord-tone-green { background: #E9F6F0; }
.ord-tone-blue  { background: #EAF2FC; }
.ord-tone-red   { background: #FCEDEA; }
.ord-tone-gray  { background: #F4F4F6; }
.ord-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ord-tile-num { font-size: 0.74rem; font-weight: 700; color: var(--primary); letter-spacing: .3px; }
.ord-tile-salon { font-weight: 800; color: var(--gray-900); font-size: 1rem; line-height: 1.25; }
.ord-tile-sub { font-size: 0.8rem; color: var(--gray-600); }
.ord-tile-foot { display: flex; justify-content: flex-end; margin-top: 2px; }
.ord-tile-total { font-weight: 800; color: var(--gray-900); font-size: 1.05rem; }
.ord-mini { display: flex; gap: 3px; margin: 5px 0 2px; }
.ord-miniseg { flex: 1; height: 5px; border-radius: 3px; background: rgba(0,0,0,0.09); }
.ord-miniseg.on { background: var(--primary); }
.ord-mini-storno span { flex: 1; height: 5px; border-radius: 3px; background: var(--danger); }

/* Velký stepper postupu v detailu (vidí i kadeřník) */
.ord-progress { display: flex; align-items: flex-start; margin: 16px 0 20px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.ord-pstep { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 0 0 auto; min-width: 70px; }
.ord-pdot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 700; background: var(--gray-200); color: var(--gray-500); border: 2px solid var(--gray-200); }
.ord-pstep.active .ord-pdot { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-lighter); }
.ord-pstep.done .ord-pdot { background: var(--success); color: #fff; border-color: var(--success); }
.ord-plabel { font-size: 0.72rem; color: var(--gray-500); text-align: center; font-weight: 600; line-height: 1.2; max-width: 84px; }
.ord-pstep.active .ord-plabel { color: var(--gray-900); }
.ord-pstep.done .ord-plabel { color: var(--success); }
.ord-pline { flex: 1; height: 2px; background: var(--gray-200); min-width: 14px; margin-top: 14px; }
.ord-pline.done { background: var(--success); }
.ord-storno { background: var(--danger-light); color: var(--danger); font-weight: 700; padding: 11px 14px; border-radius: 10px; margin: 14px 0 16px; text-align: center; }

/* Zámek editace + export hint */
.ord-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--gray-500); font-weight: 600; }
.oz-exp-hint { font-size: 0.78rem; color: var(--gray-500); align-self: center; }

/* Navádění „co teď udělat" + odškrtávací seznam skladu */
.ord-hint { display: flex; gap: 10px; align-items: flex-start; background: var(--primary-lighter); color: var(--gray-800); border-radius: 12px; padding: 12px 14px; margin: 6px 0 16px; font-size: 0.9rem; line-height: 1.45; }
.ord-hint-ic { color: var(--primary); flex-shrink: 0; margin-top: 1px; display: inline-flex; }
.ord-hint b { color: var(--gray-900); }
.ord-pickbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--warning-light); color: var(--warning); border-radius: 10px; padding: 9px 14px; font-size: 0.85rem; font-weight: 600; margin-bottom: 10px; }
.ord-pickbar.is-done { background: var(--success-light); color: var(--success); }
.ord-i-pick { width: 36px; text-align: center; }
.ord-pick { width: 18px; height: 18px; accent-color: var(--success); cursor: pointer; }
.ord-picked td { opacity: 0.5; }
.ord-picked .ord-i-name { text-decoration: line-through; }

/* ============================================================
   POHODA (stats) — vzhled jako úvodní dashboard
   ============================================================ */
.st-kpi-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; margin-bottom: 18px !important; }
@media (max-width: 900px) { .st-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .st-kpi-grid { grid-template-columns: 1fr 1fr !important; } }
.st-kpi { border: 1px solid rgba(0,0,0,0.05) !important; border-radius: 14px !important; box-shadow: var(--shadow-sm) !important; padding: 16px !important; }
.st-kpi:hover { transform: none !important; box-shadow: var(--shadow) !important; }
.st-kpi:nth-child(4n+1) { background: #E6F1FB; } .st-kpi:nth-child(4n+1) .st-kpi-value { color: #0C447C; }
.st-kpi:nth-child(4n+2) { background: #EEEDFE; } .st-kpi:nth-child(4n+2) .st-kpi-value { color: var(--primary); }
.st-kpi:nth-child(4n+3) { background: #E1F5EE; } .st-kpi:nth-child(4n+3) .st-kpi-value { color: #0F6E56; }
.st-kpi:nth-child(4n+4) { background: #FAEEDA; } .st-kpi:nth-child(4n+4) .st-kpi-value { color: #854F0B; }
.st-kpi-label { color: var(--gray-600) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.78rem !important; }
.st-kpi-value { letter-spacing: -0.02em; }
.st-kpi.st-kpi-hero { background: linear-gradient(135deg, #6D5DD3, #8B7DE8) !important; color: #fff !important; border-color: transparent !important; }
.st-kpi.st-kpi-hero .st-kpi-label { color: rgba(255,255,255,0.9) !important; }
.st-kpi.st-kpi-hero .st-kpi-value { color: #fff !important; }

/* Měsíční karty (výběr období) = čisté dlaždice */
.stk-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.stk-month-card { border-radius: 14px !important; border: 1px solid var(--gray-200) !important; box-shadow: var(--shadow-sm); padding: 14px 16px; }
.stk-month-card:hover { border-color: #C7D2FE !important; transform: translateY(-2px); box-shadow: var(--shadow) !important; }
.stk-month-card.active { background: var(--primary-lighter) !important; border-color: var(--primary) !important; }
.stk-month-card.active .stk-month-rev { color: var(--primary); }
.stk-period-btn { border-radius: 999px !important; border: 1px solid var(--gray-300); background: var(--white); padding: 7px 15px; font-weight: 600; font-size: 0.83rem; }
.stk-period-btn.active { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.stk-period-head { font-size: 0.85rem; color: var(--gray-600); margin-bottom: 12px; }

/* Sekce (grafy) = čisté karty */
.st-section { background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.st-section-title { font-size: 1rem !important; font-weight: 700 !important; color: var(--gray-900) !important; border: none !important; padding: 0 0 14px !important; margin: 0 !important; }
.st-bar { background: linear-gradient(180deg, var(--primary-light), var(--primary)) !important; border-radius: 5px 5px 0 0 !important; }
.st-hbar-fill, .st-pbar-fill { background: linear-gradient(90deg, var(--primary), var(--primary-light)) !important; }

/* Statistiky — nasazení podle oddělení (řádky s bary) */
.prod-people { display: flex; flex-direction: column; gap: 12px; }
.prod-prow { display: grid; grid-template-columns: minmax(160px, 1.3fr) 2fr auto; align-items: center; gap: 14px; }
@media (max-width: 600px) { .prod-prow { grid-template-columns: 1fr; gap: 4px; } }
.prod-pname { font-weight: 700; color: var(--gray-900); font-size: 0.9rem; display: flex; flex-direction: column; }
.prod-pmemb { font-weight: 500; color: var(--gray-500); font-size: 0.76rem; }
.prod-pstat { font-size: 0.84rem; color: var(--gray-600); white-space: nowrap; text-align: right; }
.prod-pstat b { color: var(--gray-900); }

/* Akční tlačítko přímo na dlaždici objednávky (co mám udělat) */
.ord-tile-cta { display: block; width: 100%; margin-top: 10px; padding: 9px; border: none; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 700; font-size: 0.88rem; cursor: pointer; font-family: inherit; transition: background var(--transition); }
.ord-tile-cta:hover { background: var(--primary-dark); }
/* Filtr „K vyřízení" zvýrazněný i v neaktivním stavu */
.oz-chip-todo:not(.is-active) { background: var(--primary-lighter); color: var(--primary); font-weight: 700; }

/* Faktura — náhled */
.modal:has(.inv-doc) { max-width: 720px; }
.inv-doc { border: 1px solid var(--gray-200); border-radius: 12px; padding: 22px; font-size: 0.88rem; color: var(--gray-900); }
.inv-top { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.inv-h { font-size: 0.66rem; letter-spacing: 1px; color: var(--gray-400); font-weight: 700; margin-bottom: 4px; }
.inv-seller, .inv-buyer { line-height: 1.55; }
.inv-buyer { margin-bottom: 14px; }
.inv-meta { text-align: right; }
.inv-title { font-size: 1.6rem; font-weight: 800; letter-spacing: 1px; }
.inv-no { font-weight: 700; color: var(--primary); }
.inv-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.inv-table th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); padding: 7px 8px; border-bottom: 2px solid var(--gray-200); }
.inv-table td { padding: 7px 8px; border-bottom: 1px solid var(--gray-100); }
.inv-table .r { text-align: right; white-space: nowrap; }
.inv-sumrow { display: flex; justify-content: flex-end; align-items: flex-start; gap: 22px; margin-top: 12px; }
.inv-qr { text-align: center; }
.inv-qr img { border: 1px solid var(--gray-200); border-radius: 8px; }
.inv-qr-lbl { font-size: 0.72rem; font-weight: 700; color: var(--gray-500); margin-top: 3px; }
.inv-sum { margin: 0; width: 260px; }
.inv-sum > div { display: flex; justify-content: space-between; padding: 3px 0; }
.inv-total { font-weight: 800; font-size: 1.05rem; border-top: 2px solid var(--gray-900); margin-top: 4px; padding-top: 6px; }
.inv-note { margin-top: 14px; font-size: 0.82rem; color: var(--gray-600); }
.inv-hint { margin-top: 12px; font-size: 0.76rem; color: var(--gray-400); font-style: italic; }

.ord-badge { font-size: 0.74rem; font-weight: 700; padding: 3px 11px; border-radius: 20px; white-space: nowrap; }
.ord-gray  { background: #F3F4F6; color: #6B7280; }
.ord-amber { background: #FAEEDA; color: #B45309; }
.ord-green { background: #E1F5EE; color: #0F6E56; }
.ord-blue  { background: #E6F1FB; color: #2563EB; }
.ord-red   { background: #FDECEA; color: #DC2626; }

/* Detail */
.ord-detail { padding: 20px 22px; }
.ord-d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ord-d-num { font-size: 0.82rem; font-weight: 700; color: var(--primary); }
.ord-d-salon { font-size: 1.2rem; font-weight: 800; color: var(--gray-900); }
.ord-d-meta { font-size: 0.85rem; color: var(--gray-500); margin: 4px 0 16px; }
.ord-table-wrap { overflow-x: auto; }
.ord-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ord-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); font-weight: 700; padding: 6px 10px; border-bottom: 1px solid var(--gray-200); }
.ord-table td { padding: 9px 10px; border-bottom: 1px solid var(--gray-100); }
.ord-i-code { font-family: monospace; font-size: 0.78rem; color: var(--gray-500); }
.ord-i-name { font-weight: 600; color: var(--gray-900); }
.ord-i-disc { font-size: 0.7rem; font-weight: 700; color: var(--success); background: var(--success-light); padding: 1px 6px; border-radius: 5px; margin-left: 4px; }
.ord-i-spec { font-size: 0.7rem; font-weight: 700; color: var(--danger); background: #FDECEA; padding: 1px 6px; border-radius: 5px; margin-left: 4px; }
.ord-mkt-row td { background: var(--primary-lighter); }
.ord-i-mkt { font-size: 0.7rem; font-weight: 700; color: var(--primary); background: #fff; border: 1px solid var(--primary-light); padding: 1px 6px; border-radius: 5px; margin-left: 4px; }
.ord-spec-banner { margin-top: 10px; border-radius: 10px; padding: 10px 14px; font-size: 0.85rem; line-height: 1.5; }
.ord-spec-banner.is-pending { background: var(--warning-light); color: var(--warning); }
.ord-spec-banner.is-approved { background: var(--success-light); color: var(--success); }
.ord-i-price, .ord-i-line { text-align: right; white-space: nowrap; }
.ord-i-line { font-weight: 700; }
.ord-qin { width: 64px; padding: 6px 8px; border: 1px solid var(--gray-300); border-radius: 8px; text-align: center; font-family: inherit; font-weight: 600; }
.ord-i-rm { background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: 1rem; padding: 4px 8px; border-radius: 6px; }
.ord-i-rm:hover { background: var(--danger-light); color: var(--danger); }
.ord-d-totals { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.ord-d-totals > div { display: flex; gap: 24px; font-size: 0.9rem; }
.ord-d-final { font-weight: 800; font-size: 1.1rem; color: var(--gray-900); }
.ord-d-note { margin-top: 14px; font-size: 0.88rem; color: var(--gray-700); background: var(--gray-50); padding: 10px 14px; border-radius: 10px; }
.ord-d-addr { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 0.84rem; color: var(--gray-600); }
@media (max-width: 560px) { .ord-d-addr { grid-template-columns: 1fr; } }
.ord-d-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.ord-err { color: var(--danger); font-size: 0.85rem; margin-top: 10px; min-height: 1em; }

/* ============================================================
   PRODUKTY — administrace (mřížka karet s fotkou + formulář)
   ============================================================ */
.pa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pa-card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; cursor: pointer;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.pa-card:hover { box-shadow: var(--shadow); border-color: #C7D2FE; transform: translateY(-2px); }
.pa-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #F7F7F8; border-bottom: 1px solid var(--gray-200); }
.pa-thumb-empty { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: var(--gray-300); }
.pa-body { padding: 12px 14px 6px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pa-name { font-weight: 700; font-size: 0.92rem; color: var(--gray-900); line-height: 1.3; }
.pa-meta { font-size: 0.76rem; color: var(--gray-500); }
.pa-price { font-size: 0.9rem; font-weight: 700; color: var(--primary); margin-top: 2px; }
.pa-edit { margin: 0 12px 12px; }

/* Formulář produktu */
.pa-form { display: flex; flex-direction: column; gap: 4px; }
.pa-imgwrap { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.pa-imgprev {
  width: 110px; height: 110px; flex-shrink: 0; border-radius: 12px; overflow: hidden;
  background: #F4F4F5; border: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: center;
}
.pa-imgprev img { width: 100%; height: 100%; object-fit: contain; }
.pa-imgph { font-size: 0.78rem; color: var(--gray-400); }
.pa-imgbtns { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pa-uplabel { cursor: pointer; }
.pa-upinfo { font-size: 0.78rem; color: var(--gray-500); }
.pa-err { color: var(--danger); font-size: 0.85rem; margin-top: 8px; min-height: 1em; }

/* Legenda barev úkolů dle důležitosti */
.task-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; }
.task-legend .tl-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--gray-600); font-weight: 600; }
.task-legend .tl-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.tl-dot.tl-urgent { background: #E2503B; }
.tl-dot.tl-high { background: #D79A2B; }
.tl-dot.tl-normal { background: #5B8DEF; }
.tl-dot.tl-done { background: #2E9E76; }

/* Statistiky: souhrnné dlaždice = jednotný vzhled KPI (radius/stín, auto-fit) */
.prod-summary-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 12px !important; }
.prod-summary-card { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm); padding: 16px 14px !important; }

/* Nástěnka: příspěvky do mřížky karet */
.board-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
@media (max-width: 560px) { .board-list { grid-template-columns: 1fr; } }

/* Admin: každá sekce = čistá bílá karta (oddělené sekce dle designu) */
.admin-section {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.admin-section-title {
  color: var(--gray-900);
  border-bottom: 1px solid var(--gray-200);
  border-bottom-width: 1px;
}
/* uvnitř sekce-karty nech vnořené karty ploché, ať nevzniká karta v kartě */
.admin-section .team-card,
.admin-section .pending-user-card {
  box-shadow: none;
  border: 1px solid var(--gray-200);
  margin-bottom: 8px;
}

/* =====================================================================
   OBJEDNÁVKY — nativní tok OZ (2026-09): nové prvky + mobil (telefon v terénu)
   ===================================================================== */
/* dlouhý název salonu nesmí roztáhnout kartu mimo obrazovku */
.oz-salon-grid { grid-template-columns: repeat(auto-fill, minmax(min(248px, 100%), 1fr)); }
.oz-salon-card { min-width: 0; }
.oz-salon-card.has-draft { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

/* rozdělaná objednávka (uložená v telefonu) */
.oz-draft { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--warning-light); border: 1px solid #FCD9A0; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.oz-draft-txt { font-size: 0.9rem; color: #7C4A03; min-width: 0; }
.oz-draft-acts { display: flex; gap: 8px; }
.oz-draft-go, .oz-draft-rm { border-radius: 999px; padding: 9px 16px; font-size: 0.86rem; font-weight: 700; cursor: pointer; font-family: inherit; min-height: 40px; }
.oz-draft-go { background: var(--primary); color: #fff; border: none; }
.oz-draft-rm { background: transparent; color: #7C4A03; border: 1px solid #E9C58A; }

/* souhrn: marketing zdarma */
.oz-mkt-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--success-light); color: var(--success); font-size: 0.7rem; font-weight: 800; vertical-align: 1px; }
.oz-mkt-info { font-size: 0.9rem; color: #1A1A1A; margin-top: 4px; }
.oz-mkt-dim { color: #6B7280; font-size: 0.8rem; }
.oz-mkt-meter { height: 8px; border-radius: 999px; background: #EFEFF1; margin: 10px 0 6px; overflow: hidden; }
.oz-mkt-meter span { display: block; height: 100%; border-radius: 999px; background: var(--success); transition: width .2s ease; }
.oz-mkt-left { font-size: 0.82rem; color: #4B5563; margin-bottom: 8px; }
.oz-mkt.is-over { border-color: var(--danger); }
.oz-mkt.is-over .oz-mkt-meter span { background: var(--danger); }
.oz-mkt.is-over .oz-mkt-left { color: var(--danger); }
.oz-mkt-row, .oz-mkt-res { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #F1F1F3; }
.oz-mkt-q { min-width: 34px; text-align: center; font-weight: 700; font-size: 0.9rem; border-top: 1.5px solid var(--gray-200); border-bottom: 1.5px solid var(--gray-200); align-self: stretch; display: flex; align-items: center; justify-content: center; }
.oz-mkt-search { margin: 10px 0 2px; }
.oz-mkt-res-name { flex: 1; min-width: 0; font-size: 0.86rem; display: flex; flex-direction: column; gap: 1px; }
.oz-mkt-res-price { font-size: 0.84rem; font-weight: 700; white-space: nowrap; }
.oz-mkt-add { border: none; border-radius: 999px; background: var(--primary-lighter); color: var(--primary); font-weight: 700; font-size: 0.82rem; padding: 9px 14px; min-height: 40px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.oz-mkt-add:disabled { background: #F3F4F6; color: #9CA3AF; cursor: not-allowed; }
.oz-mkt-res.is-over .oz-mkt-res-name, .oz-mkt-res.is-over .oz-mkt-res-price { color: #9CA3AF; }
.oz-mkt-none { font-size: 0.85rem; color: #6B7280; padding: 8px 0; }

/* souhrn: způsob platby */
.oz-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.oz-pay-opt { border: 1.5px solid var(--gray-200); background: #fff; border-radius: 12px; padding: 12px 8px; min-height: 48px; font-size: 0.88rem; font-weight: 600; color: #374151; cursor: pointer; font-family: inherit; }
.oz-pay-opt.is-active { border-color: var(--primary); background: var(--primary-lighter); color: var(--primary); }
.oz-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.oz-wrap--souhrn { padding-bottom: 24px; }

@media (max-width: 640px) {
  /* méně vnořených okrajů — na telefonu je každý pixel šířky znát */
  #view-objednavky.module-view { padding: 8px 6px; }
  #view-objednavky .oz-wrap { padding-left: 10px; padding-right: 10px; }
  .oz-pay { grid-template-columns: 1fr; }

  /* CENÍK: místo tabulky karty produktů (název nahoře, ceny vlevo, velké +/− vpravo) */
  .oz-tw { border: none; border-radius: 0; overflow: visible; max-height: none; }
  .oz-table, .oz-table tbody { display: block; width: 100%; }
  .oz-table thead { display: none; }
  .oz-table tr.oz-cgh { display: block; position: sticky; top: 0; z-index: 2; margin: 14px 0 8px; }
  .oz-table tr.oz-cgh td { display: block; border-radius: 10px; padding: 9px 12px; font-size: 0.82rem; border: none; }
  .oz-table tr.oz-prow { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "name name name" "code code code" "your orig qty"; align-items: center; gap: 2px 10px; background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; padding: 12px; margin-bottom: 8px; }
  .oz-table tr.oz-prow.is-in { border-color: var(--primary); background: #F5F3FF; }
  .oz-table tr.oz-prow td, .oz-prow td:first-child { display: block; padding: 0; border: none; background: transparent !important; width: auto !important; height: auto; text-align: left; }
  .oz-prow .oz-c-name { grid-area: name; display: block; overflow: visible; }
  .oz-prow .oz-c-code { grid-area: code; }
  .oz-prow .oz-c-your { grid-area: your; }
  .oz-prow .oz-c-orig { grid-area: orig; }
  .oz-prow .oz-c-qty { grid-area: qty; justify-self: end; }
  .oz-prow .oz-pn { display: inline; white-space: normal; font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
  .oz-prow .oz-dt { font-size: 0.68rem; padding: 2px 6px; }
  .oz-prow .oz-pd { font-size: 1.05rem; }
  .oz-prow .oz-po { font-size: 0.82rem; }
  .oz-prow .oz-qb { width: 46px; height: 46px; font-size: 1.3rem; }
  .oz-prow .oz-qb:first-child { border-radius: 12px 0 0 12px; }
  .oz-prow .oz-qb:last-child { border-radius: 0 12px 12px 0; }
  .oz-prow .oz-qi { width: 52px; height: 46px; font-size: 16px; } /* 16px = iOS při psaní nezoomuje */
  .oz-mkt .oz-qb { width: 44px; height: 44px; font-size: 1.2rem; }

  /* spodní lišta vždy po ruce (palec), i nad systémovou lištou telefonu */
  .oz-bar { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 5; padding: 12px 14px; }
  .oz-bar-btn { padding: 13px 20px; font-size: 0.98rem; min-height: 48px; }
  .oz-back { min-height: 48px; padding: 8px 10px; }
  .oz-sum-row { flex-wrap: wrap; }
  .oz-sum-name { flex-basis: 100%; }
  .oz-sum-qty, .oz-sum-unit { font-size: 0.84rem; color: #6B7280; }
  .oz-sum-line { margin-left: auto; font-weight: 700; }
  .oz-note textarea, .oz-search { font-size: 16px; }
}
@media (max-width: 640px) {
  /* nad ceníkem co nejméně výšky — produkty mají být vidět hned */
  .oz-wrap--cenik .oz-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -10px; margin-right: -10px; padding: 2px 10px 8px; }
  .oz-wrap--cenik .oz-tabs::-webkit-scrollbar { display: none; }
  .oz-wrap--cenik .oz-tabs .oz-chip { flex: 0 0 auto; min-height: 40px; }
  .oz-info-banner { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 6px; padding: 8px 10px; }
  .oz-info-chip { font-size: 0.72rem; padding: 3px 8px; }
  .oz-reorder { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .oz-reorder-txt { flex: 1 1 0; min-width: 0; font-size: 0.84rem; }
  .oz-reorder-btn { flex: 1 0 100%; min-height: 44px; }
  .oz-shopbar-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* „Znovu objednat" je vedlejší akce — hlavní tlačítko obrazovky je Souhrn / Odeslat */
.oz-reorder-btn { background: #fff; color: var(--primary); border: 1.5px solid var(--primary); }
.oz-reorder-btn:hover { background: var(--primary-lighter); }
/* prázdná lišta košíku nemá překrývat ceník */
.oz-bar.is-empty { position: static; }

/* PŘEHLED / DETAIL OBJEDNÁVKY — mobil: nic nesmí přetékat do strany */
@media (max-width: 640px) {
  /* ukazatel stavu: všech 6 kroků se vejde, popisek jen u aktuálního */
  .ord-progress { overflow: visible; align-items: center; margin: 14px 0 6px; padding-bottom: 22px; position: relative; }
  .ord-pstep { min-width: 0; flex: 0 0 auto; position: static; }
  .ord-pline { min-width: 6px; margin-top: 0; }
  .ord-plabel { display: none; }
  .ord-pstep.active .ord-plabel { display: block; position: absolute; left: 0; right: 0; bottom: 0; max-width: none; font-size: 0.8rem; text-align: left; }
  /* položky: místo tabulky řádky (název přes celou šířku, pod ním cena × ks = celkem) */
  .ord-table-wrap { overflow: visible; }
  .ord-table, .ord-table tbody { display: block; width: 100%; }
  .ord-table thead { display: none; }
  .ord-table tr { display: grid; grid-template-columns: auto auto 1fr auto auto; grid-template-areas: "pick name name name rm" "pick code code code rm" "pick price qty line rm"; gap: 2px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--gray-100, #F1F1F3); }
  .ord-table td { display: block; padding: 0 !important; border: none !important; width: auto !important; text-align: left; }
  .ord-table .ord-i-pick { grid-area: pick; }
  .ord-table .ord-i-pick input { width: 26px; height: 26px; }
  .ord-table .ord-i-name { grid-area: name; font-size: 0.92rem; }
  .ord-table .ord-i-code { grid-area: code; }
  .ord-table .ord-i-price { grid-area: price; color: var(--gray-500); font-size: 0.86rem; }
  .ord-table .ord-i-qty { grid-area: qty; font-size: 0.9rem; }
  .ord-table .ord-i-line { grid-area: line; text-align: right; }
  .ord-table td:last-child:not(.ord-i-line) { grid-area: rm; }
  .ord-table .ord-qin { width: 72px; height: 44px; font-size: 16px; text-align: center; }
  .ord-d-totals { align-items: stretch; }
  .ord-d-totals > div { justify-content: space-between; }
  .ord-d-actions .btn { flex: 1 1 auto; min-height: 48px; font-size: 0.95rem; }
  .oz-modetabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .oz-modetabs .cc-tab { min-height: 44px; }
}
.oz-done-link { display: block; margin: 12px auto 0; background: none; border: none; color: var(--primary); font-weight: 600; font-size: 0.9rem; cursor: pointer; min-height: 44px; font-family: inherit; }

/* ==============================================================
   DOMŮ — novinky z webu www.conceptczech.cz (karty s obrázkem)
   ===================================================================== */
.bw-hello-sub { text-transform: none; }
.bw-hello-sub::first-letter { text-transform: uppercase; }
.dash-news { margin-bottom: 18px; }
.dash-news:empty { display: none; }
.dash-news-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dash-news-title { font-size: 1.1rem; font-weight: 800; color: var(--gray-900); margin: 0; }
.dash-news-acts { display: flex; align-items: center; gap: 12px; }
.dash-news-all { color: var(--primary); font-weight: 600; font-size: 0.88rem; text-decoration: none; white-space: nowrap; }
.dash-news-all:hover { text-decoration: underline; }
.dash-news-refresh { border: 1px solid var(--gray-200); background: #fff; color: var(--gray-700); border-radius: 999px; padding: 7px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: inherit; min-height: 36px; }
.dash-news-refresh:hover { border-color: var(--primary); color: var(--primary); }
.dash-news-empty { background: #fff; border: 1px dashed var(--gray-200); border-radius: var(--radius-lg); padding: 22px; color: var(--gray-500); font-size: 0.9rem; text-align: center; }
.dash-news-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dash-news-card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition, .15s ease), transform var(--transition, .15s ease); }
.dash-news-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.dash-news-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.dash-news-img { display: block; aspect-ratio: 2000 / 1662; /* poměr bannerů na webu — bez ořezu */ background: var(--primary-lighter); overflow: hidden; }
.dash-news-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-news-body { display: flex; flex-direction: column; gap: 5px; padding: 13px 15px 15px; }
.dash-news-date { font-size: 0.74rem; font-weight: 600; color: var(--gray-500); }
.dash-news-name { font-size: 0.95rem; font-weight: 700; line-height: 1.3; color: var(--gray-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-news-perex { font-size: 0.84rem; line-height: 1.45; color: var(--gray-600); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .dash-news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  /* telefon: vodorovný posuvný pás karet (další karta vykukuje = je jasné, že jde posouvat) */
  .dash-news-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .dash-news-list::-webkit-scrollbar { display: none; }
  .dash-news-card { flex: 0 0 82%; scroll-snap-align: center; }
  .dash-news-all { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .dash-news-card { transition: none; } .dash-news-card:hover { transform: none; } }

/* Tlačítka na telefonu nesmí přetéct obrazovku (dlouhý text se zalomí) */
@media (max-width: 640px) { .btn { white-space: normal; max-width: 100%; } }

/* KADEŘNÍCI — mobil: nástroje v jednom posuvném řádku (primární akce první), filtry přes celou šířku */
@media (max-width: 640px) {
  .cl-actionbar { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0 -12px 12px; padding: 2px 12px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cl-actionbar::-webkit-scrollbar { display: none; }
  .cl-actionbar .btn { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }
  #view-clients #cl-search, #view-clients #cl-filter-oz, #view-clients #cl-filter-city, #view-clients #cl-filter-category { flex: 1 1 100% !important; min-width: 0 !important; max-width: none !important; width: 100%; min-height: 46px; font-size: 16px; }
}

/* SOUHRN — ruční sleva (zadává OZ/kancelář, schvaluje sklad nebo kancelář) */
.oz-sum-row { flex-wrap: wrap; }
.oz-spec-link { flex: 0 0 100%; text-align: left; background: none; border: none; padding: 6px 0 0; min-height: 36px; color: var(--primary); font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.oz-spec-link:hover { text-decoration: underline; }
.oz-spec-tag { display: inline-block; align-self: flex-start; margin-top: 3px; padding: 2px 8px; border-radius: 6px; background: #FDECEA; color: var(--danger); font-size: 0.72rem; font-weight: 700; }
.oz-sum-row.has-spec .oz-sum-unit, .oz-sum-row.has-spec .oz-sum-line { color: var(--danger); }
.oz-spec-form { flex: 0 0 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; padding: 12px; border: 1px solid #F6CFCB; background: #FFF8F7; border-radius: 12px; }
.oz-spec-lbl { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; font-weight: 600; color: #4B5563; min-width: 0; }
.oz-spec-pct, .oz-spec-reason { width: 100%; box-sizing: border-box; min-height: 46px; padding: 8px 10px; border: 1.5px solid var(--gray-200); border-radius: 10px; font-size: 16px; font-family: inherit; background: #fff; color: #1A1A1A; }
.oz-spec-pct:focus, .oz-spec-reason:focus { outline: none; border-color: var(--primary); }
.oz-spec-err { grid-column: 1 / -1; color: var(--danger); font-size: 0.82rem; }
.oz-spec-err:empty { display: none; }
.oz-spec-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.oz-spec-ok, .oz-spec-rm, .oz-spec-cancel { min-height: 44px; padding: 9px 16px; border-radius: 999px; font-size: 0.86rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.oz-spec-ok { background: var(--primary); color: #fff; border: none; }
.oz-spec-rm { background: #fff; color: var(--danger); border: 1.5px solid var(--danger); }
.oz-spec-cancel { background: transparent; color: #4B5563; border: 1.5px solid var(--gray-200); }
.oz-spec-note { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--warning-light); border: 1px solid #FCD9A0; color: #7C4A03; font-size: 0.84rem; line-height: 1.4; }
@media (max-width: 420px) { .oz-spec-form { grid-template-columns: 1fr; } }

/* =====================================================================
   MOBIL — JEDNOTNÁ ŠÍŘKA OBSAHU VE VŠECH MODULECH
   Obsah je roztažený přes celou šířku telefonu s jediným okrajem 12 px.
   (Dřív se sčítal okraj .app-content + .module-view + vnitřní obal = 32–44 px
   a každý modul to měl jinak.) Nové moduly: nedávat vlastní boční padding.
   ===================================================================== */
@media (max-width: 640px) {
  .app-content { padding-left: 0 !important; padding-right: 0 !important; }
  .module-view,
  .module-view.brevo-home,
  #view-objednavky.module-view { padding: 14px 12px 96px !important; max-width: none !important; width: 100%; margin: 0 !important; box-sizing: border-box; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
  /* vnitřní obaly modulů bez dalšího bočního okraje */
  #view-objednavky .oz-wrap, .module-view .oz-wrap { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
  /* pásy, které jdou až ke kraji displeje, počítají se stejným okrajem 12 px */
  .dash-news-list { margin: 0 -12px; padding: 2px 12px 10px; }
  .oz-wrap--cenik .oz-tabs { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .cl-actionbar { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
}

/* KALENDÁŘ — sloupce vždy stejně široké (dlouhý název události dřív roztáhl sloupec a rozbil mřížku) */
.calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-cell { min-width: 0; }
@media (max-width: 640px) {
  .calendar-grid { gap: 3px; }
  .calendar-cell { min-height: 64px; padding: 5px 3px; border-radius: 9px; }
  /* v úzké buňce se text nedá číst → barevný proužek typu; název je v seznamu po klepnutí na den */
  .cal-ev { font-size: 0; line-height: 0; height: 6px; padding: 0; border-radius: 3px; }
  .cal-ev-more { font-size: 0.62rem; padding-left: 1px; }
  .calendar-nav-btn { min-width: 44px; min-height: 44px; }
}

/* PŘÍLEŽITOSTI — mobil: sloupce kanbanu se zarážkou, další sloupec vykukuje */
@media (max-width: 640px) {
  .dl-kanban { scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -12px; padding: 0 12px 10px; scroll-padding-left: 12px; }
  .dl-kanban::-webkit-scrollbar { display: none; }
  .dl-col { flex: 0 0 84%; scroll-snap-align: start; }
}

/* ZÁLOŽKY (pilulky) — na telefonu pohodlně na prst ve všech modulech */
@media (max-width: 640px) {
  .cc-tab, .st-tab, .tab-btn, .filter-chip, .oz-chip { min-height: 40px; }
}
@media (max-width: 640px) { .cal-ev { background: currentColor !important; opacity: 0.85; } }

/* POHODA — mobil: velké číslo se vejde na jeden řádek, přepínač období na prst, tabulky s jemným posuvníkem */
@media (max-width: 640px) {
  .st-kpi-value.st-kpi-big { font-size: 1.35rem; white-space: nowrap; }
  .st-kpi-value { white-space: nowrap; font-size: 1.2rem; }
  .stk-period-btn { min-height: 40px; }
  .st-table-scroll { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
}

/* PRODUKTY — mobil: kompaktní řádek (malá fotka vlevo, údaje, tlačítko vpravo) místo karty přes celou obrazovku.
   S 650 produkty byla stránka na telefonu vysoká přes 300 000 px. */
@media (max-width: 640px) {
  .pa-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pa-card { flex-direction: row !important; align-items: center; gap: 10px; padding: 8px 10px; min-width: 0; }
  .pa-card:hover { transform: none; }
  .pa-thumb { flex: 0 0 60px; width: 60px; height: 60px; aspect-ratio: auto; border: 1px solid var(--gray-200); border-radius: 10px; }
  .pa-thumb-empty { font-size: 1rem; }
  .pa-body { padding: 0; min-width: 0; }
  .pa-name { font-size: 0.88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pa-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pa-edit { margin: 0; flex: 0 0 auto; min-height: 44px; }
  .pa-imgwrap { flex-direction: column; }
}

/* ADMIN → Akce / slevy — mobil: kód + název na prvním řádku, pole s cenou/procenty pohromadě na druhém */
@media (max-width: 640px) {
  .ak-row { flex-wrap: wrap; row-gap: 6px; align-items: center; }
  .ak-row .ak-nm { flex: 1 1 calc(100% - 130px); min-width: 0; }
  .ak-x { min-width: 40px; min-height: 40px; }
  #view-products select, #view-products input[type="text"], #view-products input[type="search"] { width: 100% !important; max-width: none !important; min-height: 46px; font-size: 16px; }
}

/* =====================================================================
   POHODA — záložka Synchronizace (pohoda-sync.js): 3 kroky + report
   ===================================================================== */
.ps-wrap { max-width: 920px; }
.ps-agendas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ps-hint { color: var(--gray-600); font-size: 0.9rem; line-height: 1.5; margin: 0 0 16px; }
.ps-error { background: var(--danger-light); border: 1px solid #FECACA; color: #991B1B; border-radius: 12px; padding: 12px 14px; font-size: 0.9rem; margin-bottom: 14px; }
.ps-step { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px; margin-bottom: 14px; }
.ps-step-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.ps-step-n { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--primary-lighter); color: var(--primary); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.ps-step-title { font-weight: 700; color: var(--gray-900); font-size: 1rem; }
.ps-step-sub { color: var(--gray-500); font-size: 0.84rem; line-height: 1.45; margin-top: 3px; }
.ps-cta { min-height: 46px; padding-left: 20px; padding-right: 20px; border-radius: 999px; }
.ps-file { display: inline-block; margin-left: 10px; font-size: 0.82rem; color: var(--gray-500); }
.ps-dates { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.ps-dates label { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; font-weight: 600; color: var(--gray-600); }
.ps-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ps-kpi { border-radius: 14px; padding: 14px; border: 1px solid rgba(0,0,0,0.05); min-width: 0; }
.ps-kpi--green { background: #E1F5EE; } .ps-kpi--purple { background: var(--primary-lighter); } .ps-kpi--amber { background: #FAEEDA; } .ps-kpi--blue { background: #E6F1FB; }
.ps-kpi-label { font-size: 0.78rem; color: var(--gray-600); font-weight: 600; }
.ps-kpi-value { font-size: 1.5rem; font-weight: 800; color: var(--gray-900); letter-spacing: -0.02em; margin-top: 4px; white-space: nowrap; }
.ps-kpi-sub { font-size: 0.74rem; color: var(--gray-500); margin-top: 2px; }
.ps-list { border: 1px solid var(--gray-200); border-radius: 12px; margin-bottom: 8px; background: #fff; }
.ps-list summary { cursor: pointer; padding: 12px 14px; font-weight: 600; font-size: 0.9rem; color: var(--gray-900); list-style-position: inside; min-height: 44px; }
.ps-list-n { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: var(--gray-100, #F3F4F6); color: var(--gray-600); font-size: 0.76rem; font-weight: 700; }
.ps-list-note { padding: 0 14px 8px; font-size: 0.82rem; color: var(--gray-500); }
.ps-rows { max-height: 320px; overflow-y: auto; border-top: 1px solid var(--gray-200); }
.ps-row { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; border-top: 1px solid #F1F1F3; }
.ps-row:first-child { border-top: none; }
.ps-row-main { font-size: 0.88rem; font-weight: 600; color: var(--gray-900); overflow-wrap: anywhere; }
.ps-row-sub { font-size: 0.78rem; color: var(--gray-500); overflow-wrap: anywhere; }
.ps-row-more { color: var(--gray-500); font-size: 0.82rem; }
.ps-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.ps-done { background: var(--success-light); color: #065F46; border-radius: 12px; padding: 12px 14px; font-size: 0.9rem; flex: 1 1 100%; }
.ps-note { background: var(--warning-light); color: #7C4A03; border: 1px solid #FCD9A0; border-radius: 12px; padding: 12px 14px; font-size: 0.88rem; flex: 1 1 100%; }
.ps-modal-text { font-size: 0.95rem; line-height: 1.5; color: var(--gray-700); margin: 6px 0 18px; }
.ps-modal-acts { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 640px) {
  .ps-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-kpi-value { font-size: 1.25rem; }
  .ps-step { padding: 14px; }
  .ps-cta, .ps-actions .btn, #ps-request { width: 100%; min-height: 48px; white-space: normal; }
  .ps-file { display: block; margin: 8px 0 0; }
  .ps-dates label { flex: 1 1 140px; }
}

/* Synchronizace — výběr souboru: nativní <label for>, input jen vizuálně skrytý (ne display:none), zóna pro přetažení */
.ps-file-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; }
.ps-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px 16px; border: 2px dashed var(--gray-300, #D1D5DB); border-radius: 14px; background: #FAFAFB; cursor: pointer; text-align: center; transition: border-color .15s ease, background .15s ease; }
.ps-drop:hover, .ps-drop.is-over { border-color: var(--primary); background: var(--primary-lighter); }
.ps-drop .btn { pointer-events: none; } /* kliknutí patří celé zóně (labelu) */
.ps-drop-hint { font-size: 0.84rem; color: var(--gray-500); }
.ps-drop.is-busy { cursor: progress; opacity: 0.75; pointer-events: none; }
.ps-file-input:focus-visible + .ps-drop { outline: 3px solid var(--primary); outline-offset: 2px; }
.ps-file { margin: 10px 0 0; font-size: 0.82rem; color: var(--gray-500); }
@media (prefers-reduced-motion: reduce) { .ps-drop { transition: none; } }

/* Synchronizace — zjednodušená obrazovka (1 tlačítko + 1 plocha, report po agendách) */
.ps-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 14px; }
.ps-card .ps-hint { margin: 0; }
.ps-card > #ps-request { align-self: flex-start; }
.ps-drop { min-height: 140px; }
.ps-drop-title { font-size: 1rem; font-weight: 700; color: var(--gray-900); }
.ps-drop .ps-file { margin: 0; }
.ps-report { gap: 0; }
.ps-report-head { font-weight: 700; font-size: 1rem; color: var(--gray-900); margin-bottom: 12px; }
.ps-section { border-top: 1px solid var(--gray-200); padding-top: 14px; margin-top: 4px; margin-bottom: 10px; }
.ps-section:first-of-type { border-top: none; padding-top: 0; }
.ps-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ps-section-title { margin: 0; font-size: 0.98rem; font-weight: 700; color: var(--gray-900); }
.ps-section-n { font-weight: 500; color: var(--gray-500); font-size: 0.82rem; margin-left: 6px; }
.ps-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--gray-100, #F3F4F6); color: var(--gray-600); font-size: 0.76rem; font-weight: 600; }
.ps-badge--todo { background: var(--primary-lighter); color: var(--primary); }
.ps-badge--done { background: var(--success-light); color: #065F46; }
@media (max-width: 640px) {
  .ps-card { padding: 14px; }
  .ps-card > #ps-request { align-self: stretch; }
  .ps-drop { min-height: 120px; }
}

/* ===== Pohoda → Přehled: statistiky z faktur (stats-invoices.js) ===== */
.is-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.is-periods, .is-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--gray-100); border-radius: 999px; max-width: 100%; overflow-x: auto; }
.is-chip, .is-seg-btn { border: 0; background: transparent; color: var(--gray-600); font: inherit; font-size: 0.85rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; min-height: 36px; }
.is-chip.active, .is-seg-btn.active { background: #fff; color: var(--gray-900); box-shadow: var(--shadow-sm); }
.is-chip:focus-visible, .is-seg-btn:focus-visible, .is-more:focus-visible, .is-link:focus-visible, .is-cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.is-period-label { font-size: 0.85rem; color: var(--gray-500); }
.is-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; margin-bottom: 14px; }
.is-kpi { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); min-width: 0; }
.is-kpi-label { font-size: 0.78rem; font-weight: 600; color: var(--gray-500); }
.is-kpi-value { font-size: 1.75rem; font-weight: 800; color: var(--gray-900); letter-spacing: -0.02em; margin-top: 6px; line-height: 1.1; overflow-wrap: anywhere; }
.is-kpi-hint { font-size: 0.8rem; color: var(--gray-500); margin-top: 8px; line-height: 1.4; }
.is-kpi--red .is-kpi-value { color: var(--danger); }
.is-kpi--amber .is-kpi-value { color: var(--warning); }
.is-up { color: var(--success); font-weight: 700; } .is-down { color: var(--danger); font-weight: 700; }
.is-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 18px; box-shadow: var(--shadow-sm); min-width: 0; margin-bottom: 14px; }
.is-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 14px; align-items: start; }
.is-grid .is-card { margin-bottom: 0; }
.is-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.is-card-title { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--gray-900); letter-spacing: -0.01em; }
.is-card-sub { font-size: 0.78rem; color: var(--gray-500); }
.is-chart { position: relative; height: 260px; }
.is-row { padding: 9px 0; border-top: 1px solid var(--gray-100); }
.is-row:first-of-type { border-top: 0; }
.is-row-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.is-row-title { font-weight: 600; color: var(--gray-900); font-size: 0.92rem; min-width: 0; overflow-wrap: anywhere; }
.is-row-value { font-weight: 700; color: var(--gray-900); font-size: 0.9rem; white-space: nowrap; }
.is-row-meta { font-size: 0.78rem; color: var(--gray-500); margin-top: 3px; line-height: 1.4; }
.is-bar { height: 8px; background: var(--gray-100); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.is-bar-fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.is-bar-fill--amber { background: var(--warning); } .is-bar-fill--red { background: var(--danger); }
.is-list { display: flex; flex-direction: column; }
.is-lrow { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--gray-100); }
.is-lrow:first-child { border-top: 0; }
.is-lrow-main { flex: 1; min-width: 0; }
.is-lrow-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.is-badge { font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.is-badge--amber { background: var(--pastel-amber); color: var(--pastel-amber-fg); } .is-badge--red { background: var(--danger-light); color: var(--danger); }
.is-mini-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.is-mini-value { font-size: 1.3rem; font-weight: 800; color: var(--gray-900); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.is-red { color: var(--danger); }
.is-subhead { font-size: 0.78rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.04em; margin: 16px 0 4px; }
.is-note { font-size: 0.8rem; color: var(--gray-500); line-height: 1.5; margin-top: 10px; background: var(--gray-50); border-radius: 8px; padding: 10px 12px; }
.is-seg { margin-bottom: 8px; }
.is-more, .is-cta { display: block; width: 100%; margin-top: 10px; border: 1px solid var(--gray-200); background: #fff; color: var(--primary); font: inherit; font-weight: 700; font-size: 0.9rem; padding: 11px; border-radius: 10px; cursor: pointer; min-height: 44px; }
.is-cta { background: var(--primary); color: #fff; border-color: var(--primary); border-radius: 999px; max-width: 280px; margin: 18px auto 0; }
.is-cta:disabled, .is-link:disabled { opacity: 0.6; cursor: wait; }
.is-empty-line { color: var(--gray-500); font-size: 0.9rem; padding: 12px 0; }
.is-foot { font-size: 0.8rem; color: var(--gray-500); text-align: center; margin: 18px 0 8px; line-height: 1.8; }
.is-link { border: 0; background: none; color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; padding: 6px 4px; text-decoration: underline; }
@media (max-width: 640px) {
  .is-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .is-kpi { padding: 12px; }
  .is-kpi-value { font-size: 1.25rem; }
  .is-kpi-hint { font-size: 0.74rem; }
  .is-card { padding: 14px; }
  .is-chart { height: 220px; }
  .is-top { flex-direction: column; align-items: stretch; }
  .is-periods { width: 100%; }
  .is-chip { flex: 1 1 auto; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { .is-chip, .is-seg-btn { transition: none; } }

/* ===== Přehled v2: zdroj dat, období se srovnáním, mřížka rozbalovacích sekcí, prokliky ===== */
.is-source { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 0.82rem; color: var(--gray-600); line-height: 1.5; }
.is-source-ic { color: var(--primary); font-size: 1rem; }
.is-source-text { flex: 1 1 360px; min-width: 0; }
.is-source-text strong { color: var(--gray-900); }
.is-source-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.is-period { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.is-period-summary { display: none; width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; padding: 4px 0; min-height: 44px; align-items: center; gap: 8px; flex-wrap: wrap; }
.is-period-main { font-weight: 700; color: var(--gray-900); }
.is-period-cmp { color: var(--gray-500); font-size: 0.82rem; }
.is-period-caret { margin-left: auto; color: var(--gray-500); }
.is-period-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.is-chips { display: inline-flex; gap: 4px; padding: 4px; background: var(--gray-100); border-radius: 999px; }
.is-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; font-weight: 600; color: var(--gray-500); }
.is-field select, .is-field input { font: inherit; font-size: 0.88rem; color: var(--gray-900); border: 1px solid var(--gray-200); border-radius: 8px; padding: 7px 10px; background: #fff; min-height: 38px; }
.is-field select:focus-visible, .is-field input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.is-period-done { display: none; }
.is-period-warn { margin-top: 8px; font-size: 0.8rem; color: var(--pastel-amber-fg); background: var(--pastel-amber); border-radius: 8px; padding: 8px 10px; line-height: 1.45; }
.is-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.is-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.is-kpi--link { font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; transition: border-color var(--transition), box-shadow var(--transition); }
.is-kpi--link:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(91,91,214,0.12); }
.is-kpi--link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.is-card--chart .is-chart { height: 230px; }
.is-grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.is-sec { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: var(--shadow-sm); min-width: 0; }
.is-sec-head { list-style: none; display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; cursor: pointer; min-height: 48px; }
.is-sec-head::-webkit-details-marker { display: none; }
.is-sec-head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 12px; }
.is-sec-title { font-weight: 700; color: var(--gray-900); font-size: 1rem; }
.is-sec-headline { margin-left: auto; font-weight: 700; color: var(--gray-600); font-size: 0.88rem; white-space: nowrap; }
.is-sec-toggle::before { content: "\25B8"; color: var(--gray-400); display: inline-block; transition: transform var(--transition); }
.is-sec[open] .is-sec-toggle::before { transform: rotate(90deg); }
.is-sec-body { padding: 0 16px 14px; }
.is-lrow--link { border: 0; background: none; font: inherit; text-align: left; cursor: pointer; border-radius: 8px; padding: 10px 6px; margin: 0 -6px; width: calc(100% + 12px); min-height: 44px; }
.is-lrow--link:hover { background: var(--gray-50); }
.is-lrow--link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.is-lrow-main { display: flex; flex-direction: column; }
.is-chev { color: var(--gray-400); font-size: 1.2rem; flex: 0 0 auto; }
.is-note--top { margin: 0 0 10px; }
/* postranní panel */
.sd-root { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
.sd-root.open { pointer-events: auto; }
.sd-backdrop { position: absolute; inset: 0; background: rgba(10,10,10,0.28); opacity: 0; transition: opacity 0.2s; }
.sd-root.open .sd-backdrop { opacity: 1; }
.sd-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--gray-50, #FAFAFA); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform 0.22s cubic-bezier(0.33,0,0.2,1); display: flex; flex-direction: column; }
.sd-root.open .sd-panel { transform: none; }
.sd-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--gray-200); }
.sd-head-text { flex: 1; min-width: 0; }
.sd-title { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--gray-900); overflow-wrap: anywhere; }
.sd-title:focus { outline: none; }
.sd-sub { font-size: 0.8rem; color: var(--gray-500); margin-top: 3px; line-height: 1.4; }
.sd-back, .sd-close { border: 0; background: var(--gray-100); color: var(--gray-700); font: inherit; font-weight: 700; border-radius: 999px; min-width: 40px; min-height: 40px; padding: 0 12px; cursor: pointer; flex: 0 0 auto; }
.sd-close { font-size: 1.3rem; padding: 0; }
.sd-back:focus-visible, .sd-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sd-body { flex: 1; overflow-y: auto; padding: 14px 16px 30px; -webkit-overflow-scrolling: touch; }
.sd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.sd-kpi { background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.sd-kpi-label { font-size: 0.72rem; font-weight: 600; color: var(--gray-500); }
.sd-kpi-value { font-size: 1.1rem; font-weight: 800; color: var(--gray-900); overflow-wrap: anywhere; margin-top: 2px; }
.sd-kpi-hint { font-size: 0.72rem; color: var(--gray-500); }
.sd-action { width: 100%; min-height: 44px; margin-bottom: 12px; border: 1px solid var(--primary); background: #fff; color: var(--primary); font: inherit; font-weight: 700; border-radius: 999px; cursor: pointer; }
.sd-section { margin-top: 16px; }
.sd-section-title { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); }
.sd-tools { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.sd-search { flex: 1 1 160px; min-width: 0; font: inherit; font-size: 16px; border: 1px solid var(--gray-200); border-radius: 8px; padding: 8px 10px; min-height: 40px; }
.sd-sort { font: inherit; font-size: 0.85rem; border: 1px solid var(--gray-200); border-radius: 8px; padding: 6px 8px; min-height: 40px; background: #fff; max-width: 45%; }
.sd-dir, .sd-csv { border: 1px solid var(--gray-200); background: #fff; font: inherit; font-weight: 700; border-radius: 8px; min-width: 40px; min-height: 40px; cursor: pointer; color: var(--gray-700); }
.sd-count { font-size: 0.74rem; color: var(--gray-500); margin: 4px 0; }
.sd-rows { background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; }
.sd-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--gray-100); width: 100%; text-align: left; background: #fff; font: inherit; border-left: 0; border-right: 0; border-bottom: 0; min-height: 44px; }
.sd-row:first-child { border-top: 0; }
.sd-row--link { cursor: pointer; }
.sd-row--link:hover { background: var(--gray-50); }
.sd-row--link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.sd-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sd-row-title { font-weight: 600; color: var(--gray-900); font-size: 0.9rem; overflow-wrap: anywhere; }
.sd-row-meta { font-size: 0.76rem; color: var(--gray-500); margin-top: 2px; line-height: 1.4; }
.sd-row-num { font-weight: 700; color: var(--gray-900); font-size: 0.88rem; white-space: nowrap; }
.sd-chev { color: var(--gray-400); font-size: 1.1rem; }
.sd-more, .sd-empty { padding: 12px; color: var(--gray-500); font-size: 0.82rem; }
.sd-error { background: var(--danger-light); color: #991B1B; border-radius: 10px; padding: 10px 12px; font-size: 0.88rem; margin-bottom: 10px; }
body.sd-lock { overflow: hidden; }
/* importy */
.pi-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pi-list { padding: 6px 16px; }
.pi-badge--ok { background: var(--success-light); color: #065F46; }
.pi-badge--dry { background: var(--gray-100); color: var(--gray-600); }
@media (max-width: 1100px) { .is-kpis--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .is-kpis--5, .is-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-kpis--5 .is-kpi:last-child { grid-column: 1 / -1; }
  .is-period-summary { display: flex; }
  .is-period-controls { display: none; margin-top: 8px; }
  .is-period.open .is-period-controls { display: flex; }
  .is-period-controls .is-field { flex: 1 1 calc(50% - 7px); }
  .is-period-controls .is-field select, .is-period-controls .is-field input { font-size: 16px; }
  .is-chips { width: 100%; }
  .is-chips .is-chip { flex: 1; }
  .is-period-done { display: block; width: 100%; min-height: 44px; border: 0; background: var(--primary); color: #fff; font: inherit; font-weight: 700; border-radius: 999px; }
  .is-source { padding: 10px 12px; }
  .is-source-text { flex-basis: 100%; }
  .is-card--chart .is-chart { height: 200px; }
  .sd-panel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .sd-panel, .sd-backdrop, .is-sec-toggle::before { transition: none; } }
@media (max-width: 640px) {
  .is-source { gap: 6px; font-size: 0.78rem; }
  .is-source-ic { display: none; }
  .is-source-extra { display: none; }
  .is-source-actions { width: 100%; }
  .is-source .is-link { padding: 4px 6px 4px 0; }
  #view-stats .st-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #view-stats .st-tabs::-webkit-scrollbar { display: none; }
  #view-stats .st-tab { flex: 0 0 auto; }
}

/* ===== Přehled: kategorie Prodej z auta + přepínač s DPH / bez DPH ===== */
.is-kpis--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.is-kpis--5 .is-kpi-value, .is-kpis--6 .is-kpi-value { font-size: 1.5rem; }
.is-vat { margin-left: auto; }
@media (max-width: 1280px) { .is-kpis--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .is-kpis--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .is-kpis--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-kpis--5 .is-kpi-value, .is-kpis--6 .is-kpi-value { font-size: 1.2rem; }
  .is-vat { margin-left: 0; }
}

/* ===== Přehled: celkový obrat (největší číslo nahoře) + grafy v sekcích ===== */
.is-hero { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; font: inherit; cursor: pointer; background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--shadow-sm); transition: border-color var(--transition), box-shadow var(--transition); }
.is-hero:hover { border-color: var(--primary); box-shadow: 0 2px 12px rgba(91,91,214,0.12); }
.is-hero:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.is-hero-label { font-size: 0.85rem; font-weight: 600; color: var(--gray-500); }
.is-hero-value { font-size: 2.6rem; font-weight: 800; color: var(--gray-900); letter-spacing: -0.03em; line-height: 1.05; overflow-wrap: anywhere; }
.is-hero-parts { font-size: 0.85rem; color: var(--gray-600); }
.is-hero-cmps { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.85rem; color: var(--gray-500); }
.is-sec-chart { position: relative; margin: 2px 0 10px; }
@media (max-width: 640px) {
  .is-hero { padding: 14px; }
  .is-hero-value { font-size: 2rem; }
  .is-hero-parts, .is-hero-cmps { font-size: 0.78rem; }
}

/* ===== Marketing 7 % (Pohoda → Marketing 7 %, karta kadeřníka) ===== */
.mk-search { width: 100%; font: inherit; font-size: 0.9rem; padding: 10px 14px; border: 1px solid var(--gray-200); border-radius: 999px; background: #fff; margin: 4px 0 8px; min-height: 44px; }
.mk-search:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.cl-mkt { margin-bottom: 16px; }
.cl-mkt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cl-mkt-title { font-size: 1rem; font-weight: 700; color: var(--primary); margin: 0; }
.cl-mkt-asof { font-size: 0.8rem; color: var(--gray-500); }
.cl-mkt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cl-mkt-num { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: 12px; background: #fff; min-width: 0; }
.cl-mkt-num--main { border-color: var(--primary); }
.cl-mkt-label { font-size: 0.8rem; font-weight: 600; color: var(--gray-500); }
.cl-mkt-value { font-size: 1.35rem; font-weight: 800; color: var(--gray-900); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.cl-mkt-hint { font-size: 0.78rem; color: var(--gray-500); }
.cl-mkt-over { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--danger-light); color: var(--danger); font-size: 0.85rem; }
.cl-mkt-empty { font-size: 0.9rem; color: var(--gray-500); }
@media (max-width: 640px) {
  .cl-mkt-grid { grid-template-columns: 1fr; }
}
.is-grid.mk-grid { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
.mk-grid .is-seg { flex-wrap: wrap; }
/* Marketing 7 % v seznamu Kadeřníci: jedno číslo na kartě + filtr */
.cl-mkt-badge { display: inline-flex; align-self: flex-start; margin-top: 6px; font-size: 0.75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.cl-mkt-badge--left { background: var(--success-light); color: var(--success); }
.cl-mkt-badge--over { background: var(--danger-light); color: var(--danger); }
.filter-chip.cl-mkt-chip--over.active { background: var(--danger-light); color: var(--danger); border-color: var(--danger); }
.filter-chip.cl-mkt-chip--left.active { background: var(--success-light); color: var(--success); border-color: var(--success); }

/* ===== Objednávka: stav skladu, náhled produktu, doprava, platba ===== */
.oz-cenik-hint { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8rem; color: var(--gray-500); margin: 0 0 8px; }
.oz-stock { display: inline-block; margin-left: 6px; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.oz-stock--ok { background: var(--success-light); color: var(--success); }
.oz-stock--low { background: var(--pastel-amber); color: var(--pastel-amber-fg); }
.oz-stock--out { background: var(--danger-light); color: var(--danger); }
.oz-prow { cursor: default; user-select: none; }
.oz-pv { max-width: 480px; }
.oz-pv-photo { display: flex; justify-content: center; background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.oz-pv-photo img { max-width: 100%; max-height: 260px; object-fit: contain; }
.oz-pv-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 0.82rem; color: var(--gray-500); margin-bottom: 10px; }
.oz-pv-code { font-family: ui-monospace, monospace; }
.oz-pv-desc { font-size: 0.9rem; color: var(--gray-700); line-height: 1.5; margin: 0 0 12px; }
.oz-pv-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; background: var(--gray-50); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.oz-pv-prices > div { display: flex; flex-direction: column; gap: 2px; }
.oz-pv-lbl { font-size: 0.72rem; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.04em; }
.oz-pv-orig { font-size: 1.05rem; color: var(--gray-500); text-decoration: line-through; }
.oz-pv-your { font-size: 1.25rem; font-weight: 800; color: var(--gray-900); }
.oz-pv-disc { font-size: 1.05rem; font-weight: 700; }
.oz-pv-stock { display: block; padding: 8px 12px; border-radius: 10px; font-size: 0.88rem; font-weight: 700; margin-bottom: 12px; }
.oz-pv-asof { font-weight: 500; opacity: 0.85; }
.oz-pv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.oz-pv-incart { font-size: 0.85rem; color: var(--gray-600); }
.oz-bar-ship { color: var(--gray-500); font-weight: 500; }
.oz-bar-ship.is-free { color: var(--success); font-weight: 600; }
.oz-sum-hint { display: block; font-size: 0.75rem; color: var(--gray-500); font-weight: 500; }
.oz-pay-opt[disabled] { opacity: 0.5; cursor: not-allowed; }
.oz-pay-sub { display: block; font-size: 0.72rem; font-weight: 500; }
.oz-pay-note { margin-top: 8px; font-size: 0.85rem; color: var(--pastel-amber-fg); background: var(--pastel-amber); padding: 8px 12px; border-radius: 10px; }
/* stav skladu jako barevná tečka + počet (bez slova „skladem") */
.oz-stock { display: inline-flex; align-items: center; gap: 5px; background: none !important; padding: 0 2px; color: var(--gray-600); font-weight: 600; }
.oz-stock-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }
.oz-stock--ok .oz-stock-dot { background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); }
.oz-stock--low .oz-stock-dot { background: #D97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15); }
.oz-stock--out .oz-stock-dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
.oz-stock--out { color: var(--danger); }
.oz-pv-stock { display: flex; align-items: center; gap: 8px; background: var(--gray-50); color: var(--gray-800); }
.oz-pv-stock.oz-stock--out { color: var(--danger); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cl-mkt-badge--muted { background: var(--gray-100); color: var(--gray-600); }

/* ===== MOBIL (390 px) — bez vodorovného posouvání, náhled přes celou obrazovku (Petr: mobil je priorita) ===== */
@media (max-width: 640px) {
  /* záložky Pohody: zalomit místo posouvání do strany */
  #view-stats .st-tabs { flex-wrap: wrap; overflow-x: visible; gap: 6px; }
  #view-stats .st-tab { flex: 1 1 auto; min-height: 44px; text-align: center; white-space: nowrap; }
  /* Kadeřníci: akce ve dvou sloupcích, hlavní přes celou šířku */
  .cl-actionbar { display: grid; grid-template-columns: 1fr 1fr; overflow-x: visible; margin: 0 0 12px; padding: 0; }
  .cl-actionbar .btn { white-space: normal; min-height: 44px; line-height: 1.2; }
  .cl-actionbar #cl-add-btn { grid-column: 1 / -1; }
  /* náhled produktu: celá obrazovka, velké tlačítko dole */
  #modal-overlay:has(.oz-pv) { align-items: stretch; padding: 0; }
  #modal-content:has(.oz-pv) { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; }
  .oz-pv { max-width: none; display: flex; flex-direction: column; min-height: 100%; padding: 12px 16px 0; }
  .oz-pv .modal-header { position: sticky; top: 0; background: #fff; z-index: 1; padding: 8px 0; margin: 0 0 8px; gap: 12px; }
  .oz-pv .modal-title { font-size: 1.1rem; line-height: 1.3; }
  .oz-pv .modal-close { width: 44px; height: 44px; font-size: 1.6rem; flex: 0 0 auto; }
  .oz-pv-photo img { max-height: 38vh; }
  .oz-pv-prices { grid-template-columns: 1fr 1fr; }
  .oz-pv-stock { flex-wrap: wrap; }
  .oz-pv-asof { flex-basis: 100%; font-size: 0.8rem; }
  .oz-pv-foot { position: sticky; bottom: 0; margin-top: auto; background: #fff; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: 8px; border-top: 1px solid var(--gray-200); }
  .oz-pv .oz-pv-foot .oz-bar-btn { width: 100%; min-height: 56px; font-size: 1.05rem; justify-content: center; }
  .oz-pv-incart { text-align: center; }
}
/* tlačítko v náhledu produktu = hlavní akce (bílé je jen na barevné liště košíku) */
.oz-pv .oz-bar-btn { background: var(--primary); color: #fff; min-height: 48px; }
.oz-pv .oz-bar-btn:hover { background: var(--primary); filter: brightness(1.08); }
.oz-pv-asof { margin-left: 4px; }
@media (max-width: 640px) {
  /* KPI karty na telefonu: dva sloupce, lichá poslední přes celou šířku (pravidlo pro 1 100 px výš by je jinak dalo do tří) */
  .is-kpis--4, .is-kpis--5, .is-kpis--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .is-kpis--5 .is-kpi:last-child { grid-column: 1 / -1; }
  .is-kpis--4 .is-kpi-value, .is-kpis--5 .is-kpi-value, .is-kpis--6 .is-kpi-value { font-size: 1.25rem; white-space: nowrap; }
  .is-kpi { padding: 12px; min-width: 0; }
}
/* vysvětlující věta u čísla („775 z 1 502 salonů…") */
.is-explain { font-size: 0.9rem; color: var(--gray-700); line-height: 1.45; margin: 6px 0 4px; }
.is-note--tight { margin: 0 0 4px; font-size: 0.8rem; }
/* typ klienta B2B / B2C */
.cl-type-chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 8px; }
.cl-type-chips .filter-chip { min-height: 44px; }
.cl-type-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cl-type-opt { font: inherit; font-size: 0.85rem; font-weight: 600; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--gray-200); background: #fff; color: var(--gray-700); cursor: pointer; }
.cl-type-opt.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.cl-type-why { font-size: 0.8rem; color: var(--gray-500); margin-top: 6px; line-height: 1.4; }
.cl-cta-off { color: var(--gray-500) !important; background: var(--gray-50) !important; cursor: default; font-weight: 500; font-size: 0.8rem; text-align: center; }

/* ===== Přehled jako příběh: kapitoly 1–5 ===== */
.is-chapter { margin: 28px 0 8px; }
.is-chapter:first-of-type { margin-top: 8px; }
.is-chapter-title { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 800; color: var(--gray-900); margin: 0 0 2px; letter-spacing: -0.01em; }
.is-chapter-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.9rem; font-weight: 800; flex: 0 0 auto; }
.is-chapter-sub { font-size: 0.88rem; color: var(--gray-500); margin: 0 0 12px 38px; }
.is-chapter > .is-grid { margin-top: 4px; }
.is-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.is-sec-body > .is-explain:first-child { margin-top: 0; }
@media (max-width: 640px) {
  .is-chapter { margin-top: 22px; }
  .is-chapter-title { font-size: 1.1rem; }
  .is-chapter-sub { margin-left: 0; }
  .is-kpis--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-kpis--3 .is-kpi:last-child { grid-column: 1 / -1; }
  .is-kpis--3 .is-kpi-value { font-size: 1.25rem; white-space: nowrap; }
}
.cl-mkt-items { width: 100%; min-height: 44px; margin-top: 10px; justify-content: center; }

/* ===== Pohoda → Pohledávky ===== */
.rv-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.rv-bucket { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--gray-200); background: #fff; font: inherit; text-align: left; cursor: pointer; color: var(--gray-800); }
.rv-bucket span { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--gray-600); }
.rv-bucket strong { font-size: 1rem; }
.rv-bucket small { font-size: 0.75rem; color: var(--gray-500); }
.rv-bucket.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; }
.rv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rv-c, #9CA3AF); display: inline-block; }
.rv-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.rv-tools .mk-search { flex: 1 1 220px; margin: 0; }
.rv-group { border-top: 1px solid var(--gray-100); }
.rv-group:first-child { border-top: 0; }
.rv-ghead { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 56px; padding: 10px 4px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.rv-ghead:hover { background: var(--gray-50); }
.rv-ghead:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.rv-age { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #fff; background: var(--rv-c, var(--danger)); white-space: nowrap; }
.rv-age--ok { background: var(--gray-100); color: var(--gray-600); }
.rv-inv { padding: 0 4px 10px 12px; border-left: 3px solid var(--gray-100); margin: 0 0 8px 4px; }
.rv-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 0; border-top: 1px dashed var(--gray-200); }
.rv-row:first-child { border-top: 0; }
.rv-row-main { flex: 1 1 220px; min-width: 0; }
.rv-row-top { display: flex; justify-content: space-between; gap: 8px; }
.rv-amount { font-weight: 700; white-space: nowrap; }
.rv-sent { font-size: 0.78rem; color: var(--success); margin-top: 4px; }
.rv-send { min-height: 44px; }
.rv-modal-sum { font-size: 0.88rem; color: var(--gray-600); margin: 0 0 12px; }
.rv-modal-err { color: var(--danger); font-size: 0.85rem; min-height: 1.2em; }
.rv-modal-foot { display: flex; gap: 8px; justify-content: flex-end; }
.rv-modal-foot .btn { min-height: 48px; }
@media (max-width: 640px) {
  .rv-buckets { grid-template-columns: 1fr 1fr; }
  .rv-send { flex: 1 1 100%; }
  .rv-modal-foot { flex-direction: column-reverse; }
  .rv-modal-foot .btn { width: 100%; }
  #modal-overlay:has(.rv-modal) { align-items: stretch; padding: 0; }
  #modal-content:has(.rv-modal) { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; overflow-y: auto; }
}
.is-kpi-hint { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
/* pohledávky: upozornění na ověření v Pohodě */
.rv-warn { background: var(--pastel-amber); color: var(--pastel-amber-fg); border-radius: 12px; padding: 12px 14px; font-size: 0.88rem; line-height: 1.45; margin-bottom: 10px; }
.rv-warn-old { display: inline-block; margin-top: 4px; }
.rv-how { font-size: 0.85rem; color: var(--gray-700); margin: 0 0 12px; }
.rv-how summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--primary); }
.rv-how ul { padding-left: 18px; margin: 6px 0; }
.rv-unverified { display: inline-block; margin-top: 4px; font-size: 0.75rem; font-weight: 700; color: var(--pastel-amber-fg); background: var(--pastel-amber); padding: 2px 8px; border-radius: 999px; }
.rv-confirm { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; min-height: 48px; padding: 4px 0; margin: 8px 0; cursor: pointer; }
.rv-confirm input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; }

/* ===== Částky zarovnané pod sebou (Petr: „oko to nečte") =====
   Číslice stejně široké, sloupec částky pevné šířky a zarovnaný vpravo — ve všech seznamech i panelu. */
.is-row-value, .is-mini-value, .is-kpi-value, .is-hero-value, .sd-row-num, .sd-kpi-value, .rv-amount, .rv-bucket strong, .cl-mkt-value, .oz-sum-line, .oz-pd, .oz-po { font-variant-numeric: tabular-nums; }
.is-lrow-side { min-width: 8.5em; text-align: right; }
.is-lrow-side .is-row-value { display: block; text-align: right; }
.sd-row-num { min-width: 8.5em; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .is-lrow-side, .sd-row-num { min-width: 6.5em; } }

/* ===== Přihlášení přes Google a Apple ===== */
.login-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--gray-400); font-size: 0.8rem; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }
.login-social { display: flex; flex-direction: column; gap: 10px; }
.btn-social { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; border-radius: 12px; font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; border: 1px solid var(--gray-200); background: #fff; color: var(--gray-900); }
.btn-social:hover { background: var(--gray-50); }
.btn-social:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-social--apple { background: #000; color: #fff; border-color: #000; }
.btn-social--apple:hover { background: #1f1f1f; }
.btn-social-ic { width: 20px; height: 20px; flex: 0 0 auto; }
.login-social-note { font-size: 0.78rem; color: var(--gray-500); text-align: center; margin: 8px 0 0; }
.link-note { font-size: 0.88rem; color: var(--gray-600); margin: 0 0 12px; }
.link-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-top: 1px solid var(--gray-100); }
.link-name { font-weight: 700; }
.link-on { color: var(--success); font-weight: 600; }
.link-btn { min-height: 44px; }
.btn-social[hidden] { display: none; }

/* Admin → Šablona upomínky */
.rt-note { font-size: 0.85rem; color: var(--gray-600); margin: 0 0 12px; line-height: 1.45; }
.rt-text { font-family: inherit; line-height: 1.5; resize: vertical; min-height: 200px; }
.rt-chips-label, .rt-prev-label { font-size: 0.78rem; font-weight: 600; color: var(--gray-500); margin: 4px 0 8px; }
.rt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.rt-chip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gray-200); background: #fff; color: var(--gray-900); font: inherit; font-size: 0.85rem; cursor: pointer; }
.rt-chip:hover { border-color: var(--primary); color: var(--primary); }
.rt-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rt-warn { font-size: 0.82rem; color: var(--warning); min-height: 0; margin-bottom: 10px; line-height: 1.4; }
.rt-warn:empty { display: none; }
.rt-prev { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.rt-prev-subj { font-weight: 700; margin-bottom: 10px; overflow-wrap: anywhere; }
.rt-prev-text { white-space: pre-wrap; font-size: 0.9rem; line-height: 1.5; color: var(--gray-700); overflow-wrap: anywhere; }
.rt-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.rt-foot .btn { min-height: 44px; }
.rt-meta { font-size: 0.78rem; color: var(--gray-500); margin-top: 10px; text-align: right; }
@media (max-width: 640px) { .rt-foot .btn { flex: 1 1 100%; } .rt-meta { text-align: left; } }

/* ==========================================================================
   PŘIHLÁŠENÍ — vzhled původního objednávkového systému (objednavky.conceptczech.cz)
   Fotka salonu vlevo, bílý panel vpravo, černé tlačítko, zlaté detaily, Poppins.
   Platí JEN pro #login-screen, zbytek CRM se nemění.
   ========================================================================== */
html body #login-screen {
  --lg-bg: #f5f5f3; --lg-text: #1a1a1a; --lg-light: #888; --lg-border: #e0ddd8; --lg-gold: #b08d57; --lg-btn: #1a1a1a;
  flex-direction: row; align-items: stretch; justify-content: stretch; padding: 0;
  background: #fff !important; color: var(--lg-text);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#login-screen .login-banner {
  flex: 1; position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 48px;
  background: #111 url('img/login-salon.jpg') center/cover no-repeat;
}
#login-screen .login-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.05) 100%); }
#login-screen .login-banner-text { position: relative; z-index: 1; text-align: center; color: #fff; }
#login-screen .login-banner-text h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2rem; font-weight: 600; letter-spacing: .08em; margin: 0 0 6px; }
#login-screen .login-banner-text p { font-size: .85rem; font-weight: 300; color: rgba(255,255,255,.75); letter-spacing: .04em; margin: 0; }
#login-screen .login-side { width: 480px; min-width: 400px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 40px; overflow-y: auto; }
#login-screen .login-box { background: transparent; box-shadow: none; border-radius: 0; padding: 0; max-width: 360px; animation: lg-fade .5s ease; }
@keyframes lg-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
#login-screen .login-logo-img { height: 44px; max-width: 200px; margin: 0 auto 22px; }
#login-screen .login-subtitle { font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; color: var(--lg-light); font-weight: 400; margin: 0 0 18px; }
#login-screen .login-gold-line { width: 40px; height: 1.5px; background: var(--lg-gold); margin: 0 auto 28px; }
#login-screen .login-form .form-label { color: var(--lg-light); font-size: .75rem; font-weight: 500; letter-spacing: .02em; }
#login-screen .login-input { padding: 14px 16px; border: 1.5px solid var(--lg-border); border-radius: 6px; background: var(--lg-bg); color: var(--lg-text); font-family: inherit; font-size: 1rem; }
#login-screen .login-input::placeholder { color: var(--lg-light); font-weight: 300; }
#login-screen .login-input:focus { border-color: var(--lg-btn); box-shadow: 0 0 0 3px rgba(26,26,26,.06); background: #fff; }
#login-screen .login-submit { background: var(--lg-btn); border: none; border-radius: 6px; min-height: 48px; font-family: inherit; font-weight: 600; letter-spacing: .06em; color: #fff; transition: background .25s, transform .25s, box-shadow .25s; }
#login-screen .login-submit:hover { background: #333; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.15); }
#login-screen .login-submit:focus-visible { outline: 2px solid var(--lg-gold); outline-offset: 2px; }
#login-screen .login-forgot a { color: var(--lg-light); font-size: .8rem; text-decoration: underline; text-underline-offset: 2px; }
#login-screen .login-forgot a:hover { color: var(--lg-gold); }
#login-screen .btn-social { border-radius: 6px; font-family: inherit; border-width: 1.5px; border-color: var(--lg-border); }
#login-screen .btn-social--apple { border-color: var(--lg-btn); }
#login-screen .login-divider { color: var(--lg-light); }
#login-screen .login-divider::before, #login-screen .login-divider::after { background: var(--lg-border); }
#login-screen .login-social-note { color: var(--lg-light); }
#login-screen .login-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 24px; }
#login-screen .login-chip { font-size: .72rem; font-weight: 500; color: var(--lg-light); background: var(--lg-bg); padding: 5px 12px; border-radius: 20px; border: 1px solid var(--lg-border); letter-spacing: .02em; }
#login-screen .login-footer { text-align: center; margin-top: 28px; color: var(--lg-light); font-size: .75rem; letter-spacing: .02em; }
#login-screen .login-footer a { color: var(--lg-gold); text-decoration: none; font-weight: 500; }
#login-screen .login-credit { display: block; margin-top: 6px; font-size: .68rem; opacity: .55; }
#login-screen .login-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 400; }
/* telefon a úzké okno: jako původní systém — jen panel přes celou šířku */
@media (max-width: 860px) {
  #login-screen .login-banner { display: none; }
  #login-screen .login-side { width: 100%; min-width: 0; min-height: 100vh; padding: 32px 24px; }
}
@media (max-width: 400px) {
  #login-screen .login-side { padding: 24px 20px; }
  #login-screen .login-logo-img { max-width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  #login-screen .login-box { animation: none; }
  #login-screen .login-submit:hover { transform: none; }
}
/* účet čeká na schválení: hláška + odhlášení (na přihlašovací obrazovce) */
#login-screen .login-pending { text-align: center; line-height: 1.5; background: #fbf6ec; border: 1px solid #ecdcbc; border-radius: 8px; padding: 12px 14px; color: #6b5220; }
#login-screen .login-pending-out { display: block; margin: 8px auto 0; min-height: 44px; padding: 0 16px; background: none; border: 1.5px solid var(--lg-border); border-radius: 6px; font: inherit; font-size: .85rem; color: var(--lg-text); cursor: pointer; }

/* ==========================================================================
   WHATSAPP — karta na Domů + okno chatu (whatsapp.js)
   Plné neprůhledné plochy (čitelnost), jeden hlavní prvek: Otevřít chat / Odeslat.
   ========================================================================== */
.dash-wa { margin-bottom: 18px; }
.dash-wa:empty { display: none; }
.wa-home { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
.wa-home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.wa-home-title { font-size: 1.1rem; font-weight: 800; color: var(--gray-900); margin: 0; display: flex; align-items: center; gap: 8px; }
.wa-home-sub { font-size: 0.8rem; color: var(--gray-500); margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wa-open-btn { min-height: 44px; white-space: nowrap; }
.wa-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; }
.wa-badge--off { background: #FEF3C7; color: #92400E; }
.wa-badge--on { background: var(--success-light); color: var(--success); }
.wa-badge--demo { background: var(--primary-lighter); color: var(--primary); }
.wa-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 0.72rem; font-weight: 700; }
.wa-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-left: 6px; vertical-align: middle; }
.wa-hlist { display: flex; flex-direction: column; }
.wa-hrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 4px; border: none; border-top: 1px solid var(--gray-100); background: none; font: inherit; text-align: left; cursor: pointer; }
.wa-hrow:hover { background: var(--gray-100); }
.wa-hrow-main, .wa-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-hrow-name, .wa-row-name { font-weight: 700; color: var(--gray-900); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-hrow-text, .wa-row-text { font-size: 0.82rem; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-hrow-time, .wa-row-time { font-size: 0.75rem; color: var(--gray-500); white-space: nowrap; flex-shrink: 0; }
.wa-avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--primary-lighter); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; }
.wa-empty { text-align: center; padding: 18px 8px 6px; }
.wa-empty-title { font-weight: 700; color: var(--gray-900); }
.wa-empty-sub { font-size: 0.85rem; color: var(--gray-500); margin-top: 4px; line-height: 1.45; }
.wa-link { background: none; border: none; color: var(--primary); font: inherit; font-weight: 600; font-size: 0.88rem; cursor: pointer; min-height: 44px; padding: 0 8px; margin-top: 4px; }
.wa-link:hover { text-decoration: underline; }

/* okno chatu */
body.wa-lock { overflow: hidden; }
.wa-panel { position: fixed; inset: 0; z-index: 900; background: rgba(15,15,20,0.45); display: flex; align-items: center; justify-content: center; padding: 24px; }
.wa-shell { background: #fff; width: 100%; max-width: 1040px; height: min(760px, 100%); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; overflow: hidden; }
.wa-side { width: 340px; flex-shrink: 0; border-right: 1px solid var(--gray-200); display: flex; flex-direction: column; min-height: 0; }
.wa-side-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 16px 16px 10px; }
.wa-side-title { font-size: 1.1rem; font-weight: 800; color: var(--gray-900); }
.wa-side-sub { font-size: 0.78rem; color: var(--gray-500); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wa-icon-btn { width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--gray-100); color: var(--gray-700); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.wa-icon-btn:hover { background: var(--gray-200); }
.wa-note { margin: 0 16px 10px; padding: 10px 12px; border-radius: var(--radius); background: #FEF3C7; color: #78350F; font-size: 0.8rem; line-height: 1.4; }
.wa-note--demo { background: var(--primary-lighter); color: #3730A3; }
.wa-search { margin: 0 16px 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--gray-200); border-radius: var(--radius); font: inherit; font-size: 0.9rem; background: #fff; }
.wa-list { flex: 1; overflow-y: auto; min-height: 0; }
.wa-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 10px 16px; border: none; border-top: 1px solid var(--gray-100); background: none; font: inherit; text-align: left; cursor: pointer; }
.wa-row:hover { background: var(--gray-100); }
.wa-row.active { background: var(--primary-lighter); }
.wa-row-top { display: flex; justify-content: space-between; gap: 8px; }
.wa-row-sub { font-size: 0.75rem; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #F7F7F8; }
.wa-main-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--gray-200); }
.wa-back { display: none; }
.wa-main-who { min-width: 0; }
.wa-main-name { font-weight: 700; color: var(--gray-900); }
.wa-main-sub { font-size: 0.78rem; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-main-empty { margin: auto; text-align: center; padding: 24px; }
.wa-thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.wa-day { align-self: center; font-size: 0.72rem; color: var(--gray-500); background: #fff; border: 1px solid var(--gray-200); padding: 3px 10px; border-radius: 999px; margin: 6px 0; }
.wa-msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; line-height: 1.45; font-size: 0.92rem; }
.wa-msg--in { align-self: flex-start; background: #fff; border: 1px solid var(--gray-200); border-bottom-left-radius: 4px; color: var(--gray-900); }
.wa-msg--out { align-self: flex-end; background: var(--primary-lighter); border: 1px solid #DCDAFB; border-bottom-right-radius: 4px; color: var(--gray-900); }
.wa-msg--warn { background: #FEF3C7; border-color: #FCD34D; }
.wa-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.wa-msg-meta { font-size: 0.7rem; color: var(--gray-500); margin-top: 3px; text-align: right; }
.wa-compose { background: #fff; border-top: 1px solid var(--gray-200); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
.wa-window { font-size: 0.75rem; color: var(--gray-500); margin: 0 4px 8px; line-height: 1.4; }
.wa-window--closed { color: #92400E; }
.wa-compose-row { display: flex; gap: 8px; align-items: flex-end; }
.wa-text { flex: 1; min-height: 44px; max-height: 140px; resize: none; padding: 11px 12px; border: 1px solid var(--gray-200); border-radius: 12px; font: inherit; font-size: 1rem; line-height: 1.4; }
.wa-text:disabled { background: var(--gray-100); }
.wa-send { min-height: 44px; white-space: nowrap; }
@media (max-width: 760px) {
  .wa-home-head { flex-wrap: wrap; }
  .wa-open-btn { width: 100%; }
  .wa-panel { padding: 0; }
  .wa-shell { height: 100%; max-width: none; border-radius: 0; }
  .wa-side { width: 100%; border-right: none; }
  .wa-main { display: none; }
  .wa-shell--thread .wa-side { display: none; }
  .wa-shell--thread .wa-main { display: flex; }
  .wa-back { display: inline-flex; align-items: center; justify-content: center; }
  .wa-msg { max-width: 88%; }
  .wa-send { padding: 0 14px; }
}
.is-badge--green { background: var(--success-light); color: var(--success); }
.is-badge--blue { background: var(--pastel-blue, #E6F1FB); color: var(--pastel-blue-fg, #2563EB); }

/* Admin → Historie přihlášení */
.lh-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lh-chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gray-200); background: #fff; font: inherit; font-size: 0.85rem; cursor: pointer; }
.lh-chip.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.lh-list { display: flex; flex-direction: column; }
.lh-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--gray-100); }
.lh-row--fail { background: #FEF2F2; }
.lh-badge { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.lh-ok { background: var(--success-light); color: var(--success); }
.lh-bad { background: #FEE2E2; color: #B91C1C; }
.lh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lh-who { font-weight: 600; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-meta { font-size: 0.78rem; color: var(--gray-500); overflow-wrap: anywhere; }
.lh-ip { flex-shrink: 0; font-size: 0.75rem; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.lh-empty { font-size: 0.85rem; color: var(--gray-500); padding: 8px 0; }
@media (max-width: 480px) { .lh-row { flex-wrap: wrap; } .lh-ip { width: 100%; padding-left: 0; } }