/* IFL Driver Hub 3.0 responsive compatibility layer.
 * Selectors are recorded in docs/component-inventory.json from the supplied build.
 * !important is limited to geometry/accessibility overrides of Angular's scoped,
 * dynamically inserted component CSS. Theme variables and business logic stay owned
 * by the original application. Keep this source separate from compiled chunks.
 */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('./material-symbols-outlined.woff2') format('woff2');
}

html.ifl-responsive {
  --ifl-safe-top: env(safe-area-inset-top, 0px);
  --ifl-safe-right: env(safe-area-inset-right, 0px);
  --ifl-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ifl-safe-left: env(safe-area-inset-left, 0px);
  --ifl-header-height: calc(64px + var(--ifl-safe-top));
  --ifl-view-height: 100vh;
  scroll-padding-top: calc(var(--ifl-header-height) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@supports (height: 100dvh) {
  html.ifl-responsive { --ifl-view-height: 100dvh; }
}
html.ifl-responsive body { min-width: 0; }
html.ifl-responsive app-root,
html.ifl-responsive .page-host,
html.ifl-responsive .drivershub-main-content,
html.ifl-responsive .drivershub-page-content { min-width: 0; max-width: 100%; }
html.ifl-responsive :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--md-sys-color-primary, #d4af37) !important;
  outline-offset: 3px;
}
html.ifl-responsive :is(input, select, textarea) { max-width: 100%; scroll-margin-block: 24px; }
html.ifl-responsive :is(textarea, .regolamento-preview, .uem-body, .modal-body, .am-body) {
  overscroll-behavior: contain;
}
html.ifl-responsive :is(.form-field, .form-group, .uem-field, .am-field, .profile-identity, .pp-identity) { min-width: 0; }
html.ifl-responsive :is(.user-email, .uem-header-email, .pp-bio, .profile-bio, .civ-description, .em-hero-desc, .nb-notif-msg) {
  overflow-wrap: anywhere;
}
html.ifl-responsive .material-symbols-outlined { flex-shrink: 0; }

/* Readable data tables retain every column and their native header semantics. */
html.ifl-responsive .ifl-table-region {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
html.ifl-responsive .ifl-table-region > table { width: max-content; min-width: 100%; }
html.ifl-responsive .ifl-table-region > table :is(th, td) { padding: 12px !important; }
html.ifl-responsive .ifl-table-region:focus-visible { outline-offset: -3px; }

/* Dialogs fit the visual viewport, including the on-screen keyboard. */
html.ifl-responsive :is(.modal-overlay, .setup-overlay, .uem-backdrop, .am-overlay,
 .cf-backdrop, .civ-overlay, .mi-backdrop, .tp-backdrop, .cg-modal-backdrop,
 .image-modal-overlay, .lu-overlay, .ul-otp-backdrop) {
  max-width: 100%;
  height: var(--ifl-visual-height, var(--ifl-view-height)) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: max(12px, var(--ifl-safe-top)) max(12px, var(--ifl-safe-right)) max(12px, var(--ifl-safe-bottom)) max(12px, var(--ifl-safe-left)) !important;
  overscroll-behavior: contain;
}
html.ifl-responsive :is(.modal-content, .setup-modal, .uem-panel, .am-panel,
 .cf-modal, .civ-content, .mi-modal, .tp-modal, .cg-modal, .cp-card, .lu-card, .ul-otp-modal) {
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: calc(var(--ifl-visual-height, var(--ifl-view-height)) - max(24px, var(--ifl-safe-top)) - var(--ifl-safe-bottom)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
html.ifl-responsive :is(.uem-body, .am-body, .modal-body, .mi-modal-body, .tp-modal-body) { min-height: 0; }
html.ifl-responsive :is(.modal-footer, .uem-footer, .am-footer, .cf-actions, .mi-modal-footer, .tp-modal-footer) {
  flex-wrap: wrap;
  gap: 10px;
}

/* Navigation, notifications and floating tools share safe-area geometry. */
html.ifl-responsive .drivershub-navbar { padding-top: var(--ifl-safe-top); }
html.ifl-responsive .navbar-container {
  padding-inline: max(12px, var(--ifl-safe-left)) max(12px, var(--ifl-safe-right)) !important;
}
html.ifl-responsive .nb-notif-panel { max-height: calc(var(--ifl-visual-height, var(--ifl-view-height)) - var(--ifl-header-height) - 24px) !important; }
html.ifl-responsive .nb-notif-list { max-height: calc(var(--ifl-visual-height, var(--ifl-view-height)) - var(--ifl-header-height) - 110px) !important; }
html.ifl-responsive :is(.nb-lang-dropdown, .profile-dropdown) { max-height: calc(var(--ifl-visual-height, var(--ifl-view-height)) - var(--ifl-header-height) - 24px); overflow-y: auto; }
html.ifl-responsive #ifl-ai-root { left: max(12px, var(--ifl-safe-left)); bottom: max(12px, var(--ifl-safe-bottom)); }
html.ifl-responsive #ifl-comms-button { right: max(12px, var(--ifl-safe-right)); bottom: max(12px, var(--ifl-safe-bottom)); }
html.ifl-responsive .radio-bubble-wrapper { bottom: calc(78px + var(--ifl-safe-bottom)) !important; }
html.ifl-responsive .ifl-ai-panel { max-height: calc(var(--ifl-visual-height, var(--ifl-view-height)) - 104px - var(--ifl-safe-top) - var(--ifl-safe-bottom)); }
html.ifl-responsive #ifl-comms-panel { max-height: calc(var(--ifl-visual-height, var(--ifl-view-height)) - var(--ifl-header-height) - 24px - var(--ifl-safe-bottom)); }
html.ifl-responsive.ifl-dialog-open :is(#ifl-ai-root, #ifl-comms-button, .radio-bubble-wrapper) { visibility: hidden; }

@media (max-width: 1200px) and (min-width: 993px) {
  html.ifl-responsive app-navbar .logo-text-container { display: none !important; }
  html.ifl-responsive app-navbar .navbar-center .nav-menu { gap: 2px !important; }
}
@media (max-width: 1200px) {
  html.ifl-responsive app-navbar .navbar-center {
    top: 64px !important;
    max-height: calc(var(--ifl-visual-height, var(--ifl-view-height)) - var(--ifl-header-height)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-bottom: var(--ifl-safe-bottom);
  }
  html.ifl-responsive app-navbar .navbar-center:not(.is-open) { visibility: hidden; }
  html.ifl-responsive app-navbar .navbar-center.is-open { visibility: visible; }
  html.ifl-responsive .nav-group-menu { max-width: 100%; }
  html.ifl-responsive app-navbar :is(.nav-group-btn, .nav-sub, .nav-menu > li > a) { min-height: 48px !important; }
}
/* The grouped desktop navigation cannot fit a 1024px tablet. Reuse its native
 * hamburger state through 1200px rather than clipping any authorized links. */
@media (min-width: 993px) and (max-width: 1200px) {
  html.ifl-responsive app-navbar .hamburger-menu { display: inline-flex !important; }
  html.ifl-responsive app-navbar .navbar-center {
    display: block !important;
    position: absolute !important;
    left: 0;
    width: 100%;
    background: var(--md-sys-color-background);
    border-bottom: 1px solid var(--md-sys-color-outline);
    box-shadow: 0 8px 32px #0008;
    z-index: 99;
  }
  html.ifl-responsive app-navbar .navbar-center:not(.is-open) { opacity: 0; pointer-events: none; }
  html.ifl-responsive app-navbar .navbar-center.is-open { opacity: 1; pointer-events: auto; }
  html.ifl-responsive app-navbar .nav-menu { flex-direction: column !important; align-items: stretch !important; padding: 10px !important; gap: 4px !important; }
  html.ifl-responsive app-navbar .nav-menu > li { width: 100%; }
  html.ifl-responsive app-navbar :is(.nav-group-btn, .nav-menu > li > a) { width: 100%; justify-content: flex-start !important; border-radius: 12px !important; }
  html.ifl-responsive app-navbar .nav-menu > li > a > span:not(.material-symbols-outlined) { max-width: none !important; opacity: 1 !important; margin-left: 10px !important; }
  html.ifl-responsive app-navbar .nav-group-menu { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; min-width: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 0 0 14px !important; }
  html.ifl-responsive app-navbar .nav-group-btn { pointer-events: none; opacity: .7; text-transform: uppercase; font-size: .78rem; }
  html.ifl-responsive app-navbar .nav-caret { display: none !important; }
  html.ifl-responsive app-navbar .nb-overlay { display: block !important; position: fixed; inset: var(--ifl-header-height) 0 0; z-index: 98; pointer-events: none; }
  html.ifl-responsive app-navbar .nb-overlay.is-open { pointer-events: auto; background: #0008; }
}
@media (max-width: 768px) {
  html.ifl-responsive .navbar-inner {
    padding-inline: max(16px, var(--ifl-safe-left)) max(16px, var(--ifl-safe-right)) !important;
  }
  html.ifl-responsive .mobile-menu.open {
    max-height: calc(var(--ifl-visual-height, var(--ifl-view-height)) - var(--ifl-header-height)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-bottom: var(--ifl-safe-bottom);
  }
  html.ifl-responsive .mobile-lang-switcher { flex-wrap: wrap; gap: 8px !important; }
  html.ifl-responsive .mobile-lang-btn { min-width: 44px; min-height: 44px; }
  html.ifl-responsive .drivershub-page-content {
    padding: 20px max(12px, var(--ifl-safe-right)) calc(88px + var(--ifl-safe-bottom)) max(12px, var(--ifl-safe-left)) !important;
  }
  html.ifl-responsive app-settings-page { padding: 0 !important; }
  html.ifl-responsive :is(.profile-page, .bo-page, .op-page, .gb-page, .al-page, .ul-page,
   .pz-page, .vt-page, .sp-page, .cf-page, .em-page, .iflp-page, .rk-page, .tut-page, .td-page) {
    min-width: 0;
    padding-inline: 0 !important;
  }
  html.ifl-responsive :is(.profile-tabs, .settings-tabs, .ets2-tabs, .pp-tabs, .pz-showroom-filters,
   .gb-filters, .al-level-pills, .ifl-rule-sections) {
    display: flex;
    max-width: 100%;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-block: 4px;
  }
  html.ifl-responsive :is(.profile-tab, .pp-tab, .ets2-tabs > button) { flex-shrink: 0; white-space: nowrap; }
  html.ifl-responsive :is(.form-row, .form-grid, .uem-grid-2, .uem-grid-3, .am-row, .mi-grid-2,
   .tp-grid-2, .em-form-grid, .slots-form-grid, .account-grid, .layout-grid-two-col) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html.ifl-responsive :is(.form-row, .am-row) { flex-wrap: wrap; }
  html.ifl-responsive :is(.form-row, .am-row) > * { min-width: 0; flex-basis: 100%; }
  html.ifl-responsive :is(.dh-page, .bottom-row, .content-grid, .left-column, .right-column,
   .profile-hero-content, .profile-identity, .bo-header-left, .settings-content, .settings-panel) { min-width: 0; }
  html.ifl-responsive :is(.daily-head, .dh-date-nav, .em-header, .em-header-right, .al-header,
   .al-header-actions, .ul-header, .ul-header-right, .gb-header, .cg-toolbar, .cg-toolbar-actions,
   .vt-header, .iflp-header, .iflp-top, .pz-header, .em-reg-actions) { flex-wrap: wrap; gap: 10px; }
  html.ifl-responsive .dh-date-nav { margin-left: auto; }
  html.ifl-responsive .settings-sidebar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-basis: auto !important;
    align-items: start;
    gap: 12px !important;
  }
  html.ifl-responsive .settings-sidebar .nav-group { display: flex; flex-direction: column !important; margin: 0 !important; min-width: 0; }
  html.ifl-responsive .settings-sidebar > .nav-tab:first-child { grid-column: 1 / -1; }
  html.ifl-responsive .settings-sidebar .nav-group-title { color: var(--md-sys-color-on-surface-variant) !important; font-size: 10px; overflow-wrap: anywhere; }
  html.ifl-responsive .settings-sidebar .nav-tab { width: 100%; min-width: 0; padding-inline: 8px !important; gap: 6px !important; overflow-wrap: normal; }
  html.ifl-responsive .shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html.ifl-responsive .shortcut-card { background: var(--md-sys-color-surface-variant) !important; padding: 16px 8px !important; }
  html.ifl-responsive :is(.bo-header-left > div, .em-title, .cg-toolbar-left, .ul-header-left) { min-width: 0; }
  html.ifl-responsive :is(.bo-title, .bo-subtitle, .em-title, .td-title-block, .pp-username) { overflow-wrap: anywhere; }
  html.ifl-responsive :is(.profile-hero, .tab-content) { padding: 20px 16px !important; }
  html.ifl-responsive .auth-page-wrapper {
    min-height: var(--ifl-view-height) !important;
    padding: max(16px, var(--ifl-safe-top)) max(12px, var(--ifl-safe-right)) max(16px, var(--ifl-safe-bottom)) max(12px, var(--ifl-safe-left)) !important;
  }
  html.ifl-responsive .auth-form-panel { padding: 28px 20px !important; }
  html.ifl-responsive :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']), select, textarea) {
    font-size: 16px !important; /* Prevent automatic iOS input zoom. */
  }
  html.ifl-responsive :is(button, input:not([type='checkbox']):not([type='radio']), select, textarea, .btn, .dropdown-item, .mobile-nav-link, .nav-sub, summary) {
    min-height: 44px !important;
  }
  html.ifl-responsive :is(.btn-icon, .hamburger-menu, .nb-lang-btn, .uem-icon-btn, .ul-btn-icon,
   .modal-close-btn, .uem-close-btn, .am-close, .close-button, .ifl-close) {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  html.ifl-responsive :is(.nb-notif-del, .nb-notif-mark-all) { opacity: 1 !important; }
  html.ifl-responsive :is(.form-check, .consent-row, .regolamento-check, .uem-checkbox-row, .am-checkbox-row) {
    min-height: 44px;
    align-items: center;
  }
  html.ifl-responsive .ifl-bus-page {
    top: auto !important;
    bottom: auto;
    padding: 18px max(12px, var(--ifl-safe-right)) calc(88px + var(--ifl-safe-bottom)) max(12px, var(--ifl-safe-left)) !important;
  }
  html.ifl-responsive :is(.ifl-bus-hero, .ifl-bus-bottom) { grid-template-columns: minmax(0, 1fr) !important; }
  html.ifl-responsive .ifl-bus-page__top { align-items: flex-start; gap: 12px; }
  html.ifl-responsive .ifl-bus-hotspot { min-width: 44px; min-height: 44px !important; }
  html.ifl-responsive .ifl-mat strong { font-size: 14px; }
  html.ifl-responsive :is(.ifl-mat small, .ifl-mat em, .ifl-valid, .ifl-how p, .ifl-leader li) { font-size: 12px; line-height: 1.5; }
  html.ifl-responsive .ifl-bus-inspector b { font-size: 13px; }
  html.ifl-responsive .ifl-bus-inspector small { font-size: 12px; }
  html.ifl-responsive .ifl-bus-teaser__top { flex-wrap: wrap; gap: 5px; }
  html.ifl-responsive .trm-controls { flex-wrap: wrap; }
  html.ifl-responsive .trm-scrubber { min-width: 120px; flex: 1 1 120px; }
  html.ifl-responsive #ifl-comms-panel {
    inset: calc(var(--ifl-header-height) + 8px) max(8px, var(--ifl-safe-right)) auto max(8px, var(--ifl-safe-left)) !important;
    width: auto !important;
    height: calc(var(--ifl-visual-height, var(--ifl-view-height)) - var(--ifl-header-height) - 20px - var(--ifl-safe-bottom)) !important;
  }
}
@media (max-width: 430px) {
  html.ifl-responsive .ifl-materials { grid-template-columns: minmax(0, 1fr) !important; }
  html.ifl-responsive app-navbar .logo-text-container { display: none !important; }
  html.ifl-responsive app-navbar .navbar-left { min-width: 0; flex: 1 1 auto !important; }
  html.ifl-responsive app-navbar .navbar-right { flex: 0 0 auto; gap: 0 !important; }
  html.ifl-responsive app-navbar .icon-buttons-group { gap: 0 !important; }
  html.ifl-responsive app-navbar .logo-img { max-width: 88px; height: auto !important; max-height: 40px; object-fit: contain; }
  html.ifl-responsive app-navbar .profile-activator { min-width: 44px; min-height: 44px; padding: 4px !important; gap: 0 !important; }
  html.ifl-responsive app-navbar .profile-dropdown-icon { display: none !important; }
  html.ifl-responsive :is(.nb-notif-panel, .profile-dropdown, .nb-lang-dropdown) {
    position: fixed !important;
    top: calc(var(--ifl-header-height) + 8px) !important;
    left: max(8px, var(--ifl-safe-left)) !important;
    right: max(8px, var(--ifl-safe-right)) !important;
    width: auto !important;
    max-width: none !important;
  }
  html.ifl-responsive .setup-modal { padding: 24px 18px !important; }
  html.ifl-responsive app-onboarding-gate .modal-header { display: block !important; text-align: center; }
  html.ifl-responsive app-onboarding-gate .ob-counter { margin-bottom: 12px; }
  html.ifl-responsive .auth-tabs { flex-wrap: wrap; }
  html.ifl-responsive :is(.am-header, .uem-header, .civ-meta-grid, .cf-selectors, .cf-profiles) { gap: 12px; }
  html.ifl-responsive :is(.civ-meta-grid, .cf-selectors) { grid-template-columns: minmax(0, 1fr) !important; }
  html.ifl-responsive :is(.bo-stats, .stats-row, .pp-stats-grid, .metrics-row) { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-height: 500px) and (orientation: landscape) {
  html.ifl-responsive :is(.modal-overlay, .setup-overlay, .uem-backdrop, .am-overlay, .cf-backdrop, .civ-overlay) { align-items: flex-start !important; }
  html.ifl-responsive :is(.auth-page-wrapper, .rewind-wrapper) { align-items: flex-start !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.ifl-responsive *, html.ifl-responsive *::before, html.ifl-responsive *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}