/* GostelOS responsive/mobile runtime 1.32.5 */
:root { --gostelos-cookie-height: 0px; }
html, body { min-height: 100%; max-width: 100%; overflow-x: hidden; }
input, button, select, textarea, a { touch-action: manipulation; }
.dashboard-upcoming-wrap { overflow: visible !important; }
.dashboard-upcoming-table {
  width: 100%; min-width: 0 !important; table-layout: fixed;
}
.dashboard-upcoming-table th,
.dashboard-upcoming-table td { min-width: 0; overflow-wrap: anywhere; }
.dashboard-upcoming-table th:nth-child(1) { width: 34%; }
.dashboard-upcoming-table th:nth-child(2) { width: 25%; }
.dashboard-upcoming-table th:nth-child(3) { width: 21%; }
.dashboard-upcoming-table th:nth-child(4) { width: 20%; }
.dashboard-upcoming-table .status { max-width: 100%; white-space: normal; }
.gostelos-login-error {
  display: block; margin: .75rem 0; padding: .75rem 1rem;
  border-radius: .75rem; background: rgba(185, 28, 28, .10);
  color: #991b1b; font-size: .9375rem; line-height: 1.35;
}
.auth-2fa-card { width: min(560px, 100%); }
.second-factor-methods { display: grid; gap: 9px; margin: 20px 0; }
.second-factor-method,
.second-factor-methods form.second-factor-method {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center; gap: 11px; margin: 0; padding: 12px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--paper);
}
.second-factor-method > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--soft); color: var(--brand); font-weight: 900;
}
.second-factor-method strong,
.second-factor-method small { display: block; }
.second-factor-method small { margin-top: 3px; color: var(--muted); line-height: 1.3; }
.second-factor-verify { padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 520px) {
  .second-factor-method,
  .second-factor-methods form.second-factor-method { grid-template-columns: 36px minmax(0, 1fr); }
  .second-factor-method .btn { grid-column: 1 / -1; width: 100%; }
}

/* Horizontal-scroll-free component contract.
   Wide screens retain dense matrices; compact workspaces reflow every value
   into a labelled, keyboard- and touch-accessible vertical representation. */
.tabs, .system-tabs, .animation-subnav, .advanced-sales-tabs,
.public-privacy-nav, .privacy-jump, .guest-chat-quick,
.station-switcher, .mail-folder-nav, .public-locale-switch {
  max-width: 100%; overflow-x: visible !important; white-space: normal !important;
  flex-wrap: wrap !important;
}
.table-wrap, .calendar-scroll, .pricing-chessboard, .control-table-wrap,
.employee-month-grid, .employee-time-grid, .animation-week-grid,
.public-animation-grid, .security-day-chart, .billing-security-chart,
.analytics-chart, .mini-bars, .funnel-row, .kanban, .booking-motivators {
  max-width: 100%;
}
.public-animation-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  overflow-x: visible !important;
}
.public-animation-day { min-width: 0 !important; overflow-wrap: anywhere; }
.public-animation-slot { grid-template-columns: 40px minmax(0, 1fr) auto; }
.cms-dish-strip {
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  overflow-x: visible !important;
  scroll-snap-type: none !important;
}
.cms-dish-card { scroll-snap-align: none !important; }
.cms-dish-carousel .cms-carousel-arrow { display: none !important; }
.security-day-chart, .billing-security-chart, .analytics-chart, .mini-bars {
  overflow-x: visible !important;
}
.security-day-column, .billing-security-chart > a, .analytics-bar, .mini-bar {
  min-width: 0 !important; flex: 1 1 0 !important;
}
.animation-week-list, .employee-agenda-list, .employee-month-date { display: none; }

@media (max-width: 1100px) {
  .public-nav > .brand { margin-right: auto; }
  .public-menu-toggle {
    display: inline-flex !important; position: relative; z-index: 82;
    align-items: center; justify-content: center; gap: 7px;
    min-height: 44px; padding: 8px 12px; border: 1px solid var(--line);
    border-radius: 12px; background: var(--panel); color: var(--brand);
    font: inherit; font-weight: 800;
  }
  .public-menu-toggle.open { background: var(--brand); border-color: var(--brand); color: #fff; }
  .public-links {
    display: flex !important; position: fixed !important;
    left: 12px !important; right: 12px !important; top: 82px !important;
    z-index: 81; width: auto !important; max-height: calc(100dvh - 94px);
    overflow-x: hidden !important; overflow-y: auto !important;
    overscroll-behavior: contain; flex-direction: column; align-items: stretch;
    gap: 6px; margin: 0 !important; padding: 12px;
    border: 1px solid var(--line); border-radius: 18px;
    background: var(--panel); box-shadow: 0 24px 70px rgba(15,38,30,.28);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  }
  .public-links.open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition-delay: 0s;
  }
  .public-links a, .public-links a:not(.btn),
  .public-links form, .public-links form button {
    display: flex !important; width: 100%; min-height: 44px;
    align-items: center; justify-content: flex-start;
  }
  .public-links a { padding: 10px 12px; border-radius: 10px; }
  .public-links a:hover { background: var(--paper); }
  .public-links form { margin: 0; }
  .public-menu-backdrop {
    display: block !important; position: fixed; inset: 74px 0 0; z-index: 69;
    background: rgba(14,24,21,.42); opacity: 0; visibility: hidden;
    pointer-events: none; transition: opacity .16s ease, visibility 0s linear .16s;
  }
  .public-menu-backdrop.open {
    opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s;
  }
  body.public-menu-open { overflow: hidden; }
  .svetly-site.svetly-cms .public-header .public-links > a:not(.btn) {
    color: var(--svetly-ink, var(--ink)); text-shadow: none;
  }
  .topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important; min-height: var(--topbar-height, 64px);
  }
  .topbar-title-wrap, .topbar-actions { min-width: 0; max-width: 100% !important; }
  .topbar-actions {
    width: 100%; margin: 0 !important; padding: 4px 0 !important;
    flex-wrap: wrap !important; overflow: visible !important;
    justify-content: flex-start !important;
  }
  .control-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .control-nav { position: static !important; height: auto !important; }
  .control-nav nav {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 4px;
  }
  .control-main { padding: 18px !important; }
  .control-main .two-cols, .control-main .three-cols,
  .control-main .form-grid, .control-main .activity-filter-grid,
  .control-main .billing-security-scope {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .control-main .form-grid .wide,
  .control-main .activity-filter-search,
  .control-main .activity-filter-actions { grid-column: auto !important; }
  .staff-main { width: 100%; min-width: 0; padding-inline: 16px; }
  .staff-main > *, .staff-main .panel, .staff-main .panel-body,
  .staff-main .grid, .staff-main .field, .staff-page,
  .control-main, .control-main > * { min-width: 0; max-width: 100%; }
  .staff-page .grid, .staff-page .metric-grid, .staff-page .system-metrics,
  .staff-page .agent-metrics, .staff-page .process-metrics,
  .staff-page .employees-metrics, .staff-page .security-metric-grid,
  .staff-page .security-summary-grid, .staff-page .security-severity-grid,
  .staff-page .territory-inventory-metrics,
  .staff-main [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .topbar-action-label { display: none; }
  .topbar-action { min-width: 42px; }
  .topbar-counter-action { width: 42px !important; min-width: 42px !important; }
  .page-head, .section-head { align-items: stretch; flex-direction: column; }
  .page-actions { width: 100%; }
  .page-actions > .btn, .page-actions > a.btn { flex: 1 1 auto; }
  .tabs, .system-tabs, .animation-subnav, .advanced-sales-tabs,
  .public-privacy-nav, .privacy-jump, .station-switcher,
  .mail-folder-nav, .public-locale-switch {
    display: flex !important; position: static; width: 100%;
    overflow: visible !important; white-space: normal !important;
  }
  .tabs > *, .system-tabs > *, .animation-subnav > *,
  .advanced-sales-tabs > *, .public-privacy-nav > *, .privacy-jump > *,
  .station-switcher > *, .mail-folder-nav > * { flex: 1 1 170px !important; }
  .funnel-row, .booking-motivators,
  .booking-flow-steps, .integration-steps, .public-animation-grid,
  .cms-dish-strip {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }
  .funnel-step, .booking-motivator, .booking-flow-step,
  .public-animation-day { width: 100%; min-width: 0 !important; }
  .funnel-step i { display: none; }
  .mail-app { grid-template-columns: minmax(0, 1fr) !important; }
  .mail-folders {
    display: block !important; border-right: 0 !important;
    border-bottom: 1px solid var(--line); overflow: visible !important;
    white-space: normal !important;
  }
  .mail-compose-button { width: 100% !important; margin: 0 0 8px !important; }
  .mail-folder-nav { display: grid !important; grid-template-columns: minmax(0, 1fr); }

  .table-wrap, .calendar-scroll, .pricing-chessboard, .control-table-wrap {
    overflow: visible !important; max-width: 100%;
  }
  table.responsive-table {
    display: block; width: 100%; min-width: 0 !important;
    border-collapse: separate;
  }
  table.responsive-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  table.responsive-table tbody, table.responsive-table tr,
  table.responsive-table td { display: block; width: 100%; min-width: 0 !important; }
  table.responsive-table tbody { padding: 8px; }
  table.responsive-table tr {
    margin: 0 0 12px; border: 1px solid var(--line); border-radius: 13px;
    background: var(--panel, #fff); overflow: hidden;
    box-shadow: 0 3px 10px rgba(25,55,45,.04);
  }
  table.responsive-table tr:last-child { margin-bottom: 0; }
  table.responsive-table td {
    display: grid; grid-template-columns: minmax(118px, 34%) minmax(0, 1fr);
    gap: 12px; align-items: start; padding: 10px 12px;
    border: 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere;
    position: static !important; box-shadow: none !important;
  }
  table.responsive-table td:last-child { border-bottom: 0; }
  table.responsive-table td::before {
    content: attr(data-mobile-label); color: var(--muted); font-size: 10px;
    font-weight: 850; line-height: 1.35; text-transform: uppercase;
    letter-spacing: .04em;
  }
  table.responsive-table td[colspan] { display: block; text-align: center; }
  table.responsive-table td[colspan]::before { display: none; }
  table.responsive-table td form, table.responsive-table td .inline-form,
  table.responsive-table td .stack-form, table.responsive-table td input,
  table.responsive-table td select, table.responsive-table td textarea {
    width: 100%; max-width: 100%; min-width: 0;
  }
  .inventory-table .sticky-col, .pricing-chessboard .sticky-col {
    position: static !important; min-width: 0 !important; box-shadow: none !important;
  }

  .calendar-scroll { border: 0; background: transparent; }
  .calendar-grid { display: grid; min-width: 0 !important; gap: 14px; }
  .calendar-header { display: none !important; }
  .calendar-row {
    display: grid; grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden; border: 1px solid var(--line); border-radius: 15px;
    background: var(--panel); box-shadow: 0 5px 16px rgba(25,55,45,.05);
  }
  .calendar-row > .calendar-name {
    position: static; padding: 13px; border-right: 0;
    background: color-mix(in srgb, var(--brand) 7%, var(--panel));
  }
  .calendar-drop-cell {
    display: grid; grid-template-columns: minmax(92px, .28fr) minmax(0, 1fr);
    gap: 10px; min-height: 54px !important; padding: 9px 11px !important;
    border-right: 0;
  }
  .calendar-drop-cell::before {
    content: attr(data-date); color: var(--muted); font-size: 11px; font-weight: 850;
  }
  .calendar-drop-cell .booking-span { width: 100% !important; min-width: 0; }

  .animation-week-grid, .employee-time-grid { display: none !important; }
  .animation-week-list, .employee-agenda-list {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px;
  }
  .animation-week-day-card, .employee-agenda-day {
    min-width: 0; overflow: hidden; border: 1px solid var(--line);
    border-radius: 14px; background: var(--panel);
  }
  .animation-week-day-card > header, .employee-agenda-day > header {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 12px 14px; background: var(--paper);
  }
  .animation-week-day-card > header small,
  .employee-agenda-day > header small { color: var(--muted); }
  .animation-week-slot, .employee-agenda-event {
    display: grid; grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 10px; align-items: start; padding: 11px 14px; border-top: 1px solid var(--line);
  }
  .animation-week-slot time, .employee-agenda-event time { font-weight: 850; }
  .animation-week-slot > span, .employee-agenda-event > span {
    display: flex; min-width: 0; flex-direction: column; overflow-wrap: anywhere;
  }
  .animation-week-slot small, .employee-agenda-event small { color: var(--muted); }
  .animation-week-slot > b { white-space: nowrap; color: var(--brand); }
  .employee-month-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important; gap: 8px;
  }
  .employee-month-weekday { display: none; }
  .employee-month-day {
    min-height: 0; border: 1px solid var(--line); border-radius: 11px;
    background: var(--panel); border-right: 1px solid var(--line);
  }
  .employee-month-date { display: block !important; color: var(--muted); }

  .department-folder-list, .employee-registry, .department-registry {
    min-width: 0 !important; overflow: visible !important;
  }
  .department-folder-row,
  .employee-registry .registry-row,
  .employee-registry .employee-team-columns,
  .employee-registry .employee-team-row,
  .directory-detail-row > summary,
  .task-registry-row, .salary-registry-row {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important; gap: 7px; align-items: start;
  }
  .registry-head { display: none !important; }
  .registry-row:not(.registry-head) {
    margin: 0 0 10px; border: 1px solid var(--line); border-radius: 13px;
    background: var(--panel); overflow: hidden;
  }
  .registry-row:not(.registry-head) > span,
  .department-folder-row > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .department-folder-row .directory-avatar { grid-row: auto !important; }

  .security-day-chart, .billing-security-chart, .analytics-chart, .mini-bars {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
    overflow: visible !important;
  }
  .editor-canvas { overflow: hidden !important; }
  .editor-canvas iframe { width: 100% !important; max-width: 100%; flex-basis: auto !important; }
}

@media (max-width: 760px) {
  .kanban[data-kanban-enhanced], .kanban {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }
  .kanban-col { min-height: 0; }
  .kanban-pager { display: none !important; }
}

@media (max-width: 560px) {
  .public-links { top: 72px !important; max-height: calc(100dvh - 84px); }
  .public-menu-backdrop { inset: 64px 0 0; }
  table.responsive-table td { grid-template-columns: minmax(0, 1fr); }
  table.responsive-table td::before { margin-bottom: -5px; }
  .animation-week-slot, .employee-agenda-event {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .animation-week-slot > b { grid-column: 2; }
  .calendar-drop-cell { grid-template-columns: minmax(0, 1fr); }
  .cms-dish-strip { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (min-width: 561px) and (max-width: 1100px) {
  .cms-dish-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media print {
  .animation-week-list, .employee-agenda-list { display: none !important; }
  .animation-week-grid, .employee-time-grid { display: grid !important; }
}
@media (max-width: 768px) {
  html, body, #app, #root { width: 100%; min-height: 100%; }
  [data-page="login"], .login-page, .auth-page, .login-container, .auth-container {
    min-height: 100dvh !important; height: auto !important;
    overflow: visible !important; padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  }
  form[action*="login" i], form[action*="signin" i], form[data-login-form] {
    width: min(100%, 32rem) !important; max-width: 100% !important;
  }
  form[action*="login" i] input, form[action*="signin" i] input,
  form[data-login-form] input, input[name="login" i], input[name="username" i],
  input[name="email" i], input[type="password"] {
    min-height: 44px; font-size: 16px !important;
  }
  #cookie-banner, .cookie-banner, .cookie-consent, [data-cookie-banner],
  [class*="cookie-banner" i], [class*="cookie-consent" i] {
    position: fixed !important; left: .5rem !important; right: .5rem !important;
    transform: none !important;
    bottom: max(.5rem, env(safe-area-inset-bottom)) !important;
    width: auto !important; max-width: none !important; max-height: min(55dvh, 28rem) !important;
    overflow: auto !important; overscroll-behavior: contain;
    z-index: 2147483646 !important; pointer-events: auto !important;
  }
  #cookie-banner button, .cookie-banner button, .cookie-consent button,
  [data-cookie-banner] button, [class*="cookie-banner" i] button,
  [class*="cookie-consent" i] button {
    position: relative; z-index: 2; min-height: 44px; pointer-events: auto !important;
  }
  .guest-helper, #help-widget, .help-widget, .support-widget, [data-help-widget],
  [data-support-widget] {
    bottom: calc(var(--gostelos-cookie-height) + 1rem + env(safe-area-inset-bottom)) !important;
    z-index: 2147483645 !important;
  }
  .guest-helper-panel {
    max-height: max(0px, min(75dvh, calc(100dvh - var(--gostelos-cookie-height) - 6rem - env(safe-area-inset-bottom))));
  }
}