/*
 * Authenticated mobile web layout
 *
 * This file is loaded after the feature stylesheets so phone-sized layouts
 * have one predictable, shared responsive layer. Keep desktop refinements in
 * their feature stylesheets and mobile containment/interaction rules here.
 */

@media (max-width: 900px) {
  :root {
    --superhub-topbar-height: 64px;
    --mobile-page-gutter: 14px;
    --mobile-card-radius: 14px;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    -webkit-text-size-adjust: 100%;
  }

  .super-shell.is-authenticated,
  .super-shell.is-authenticated .layout,
  .super-shell.is-authenticated .page-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .super-shell.is-authenticated .page-content {
    margin-left: 0 !important;
    padding: calc(var(--superhub-topbar-height) + 16px)
      var(--mobile-page-gutter)
      calc(34px + env(safe-area-inset-bottom)) !important;
    overflow-x: clip;
  }

  .super-shell.is-authenticated .page-content > *,
  .super-shell.is-authenticated .page-content :where(section, article, form, fieldset, nav, header, footer, div) {
    min-width: 0;
    max-width: 100%;
  }

  .super-shell.is-authenticated img,
  .super-shell.is-authenticated video,
  .super-shell.is-authenticated canvas,
  .super-shell.is-authenticated iframe {
    max-width: 100%;
  }

  /* Compact app bar: menu, wordmark, notifications, overflow menu. */
  .super-shell.is-authenticated .topbar,
  body.dashboard-calm-page .super-shell.is-authenticated .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: var(--superhub-topbar-height) !important;
    min-height: var(--superhub-topbar-height) !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    border-bottom: 1px solid rgba(108, 144, 184, .20) !important;
    background: rgba(5, 18, 31, .97) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
  }

  html[data-theme="light"] .super-shell.is-authenticated .topbar,
  html[data-theme="light"] body.dashboard-calm-page .super-shell.is-authenticated .topbar {
    border-bottom-color: rgba(91, 117, 145, .22) !important;
    background: rgba(248, 250, 252, .97) !important;
    box-shadow: 0 8px 24px rgba(28, 48, 70, .10) !important;
  }

  .super-shell.is-authenticated .topbar .mobile-nav-toggle {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 1.2rem !important;
    box-shadow: none !important;
  }

  .super-shell.is-authenticated .topbar > .brand {
    display: inline-flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .super-shell.is-authenticated .topbar > .brand .brand-mark,
  .super-shell.is-authenticated .topbar > .brand .brand-mark img {
    display: block !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
  }

  .super-shell.is-authenticated .topbar > .brand .brand-wordmark,
  .super-shell.is-authenticated .topbar > .brand .brand-wordmark--text {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .super-shell.is-authenticated .topbar > .brand .brand-wordmark strong {
    display: block !important;
    overflow: hidden !important;
    color: var(--text, #f4f8fc) !important;
    font-size: .98rem !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .super-shell.is-authenticated .topbar > .brand .brand-wordmark small,
  .super-shell.is-authenticated .topbar > .workspace-switcher,
  .super-shell.is-authenticated .topbar-search,
  .super-shell.is-authenticated .topbar-actions > .pill[data-theme-toggle],
  .super-shell.is-authenticated .topbar-actions > .language-form,
  .super-shell.is-authenticated .topbar-actions > .account-menu,
  .super-shell.is-authenticated .topbar-actions > .logout-btn {
    display: none !important;
  }

  .super-shell.is-authenticated .topbar-actions {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: 4px !important;
  }

  .super-shell.is-authenticated .topbar-actions > .topbar-bell,
  .super-shell.is-authenticated .topbar-menu-button {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .super-shell.is-authenticated .topbar-menu-panel,
  .super-shell.is-authenticated .account-menu-panel {
    position: fixed !important;
    top: calc(var(--superhub-topbar-height) - 2px) !important;
    right: 10px !important;
    left: auto !important;
    width: min(320px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - var(--superhub-topbar-height) - 12px) !important;
    overflow-y: auto !important;
  }

  .super-shell.is-authenticated .sidebar,
  .super-shell.is-authenticated.sidebar-collapsed .sidebar {
    top: var(--superhub-topbar-height) !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(86vw, 340px) !important;
    height: calc(100dvh - var(--superhub-topbar-height)) !important;
    padding: 14px 10px calc(18px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    border-radius: 0 16px 16px 0 !important;
    box-shadow: 18px 0 54px rgba(0, 0, 0, .34) !important;
  }

  /* Shared mobile content rhythm and readable wrapping. */
  .super-shell.is-authenticated :where(h1, h2, h3, h4, p, a, button, label, strong, small, td, th) {
    overflow-wrap: anywhere;
  }

  .super-shell.is-authenticated .page-content :where(.hero, .panel, .card, .module-card, .dashboard-card, .content-card, .calendar-card, .table-card, .form-card, .settings-card, .workspace-card) {
    border-radius: var(--mobile-card-radius) !important;
  }

  .super-shell.is-authenticated .page-content > :where(.hero, .panel, .card, .module-card, .dashboard-card, .content-card, .calendar-card, .table-card, .form-card, .settings-card, .workspace-card) {
    margin-inline: 0 !important;
  }

  .super-shell.is-authenticated .page-content :where(input, select, textarea, button, .btn, .ui-button, .primary-btn, .soft-btn) {
    max-width: 100%;
  }

  .super-shell.is-authenticated .page-content :where(button, .btn, .ui-button, .primary-btn, .soft-btn) {
    min-height: 44px;
  }

  .super-shell.is-authenticated :where(.form-grid, .report-filter-grid) {
    grid-template-columns: 1fr !important;
  }

  .super-shell.is-authenticated :where(
    .two-column-grid,
    .two-col-grid,
    .responsive-grid.two,
    .compact-form.two,
    .detail-grid,
    .organization-workspace-grid,
    .schedule-builder-grid,
    .billing-invoice-grid,
    .settings-invite-grid,
    .settings-access-grid,
    .settings-plan-grid
  ) {
    grid-template-columns: 1fr !important;
  }

  .super-shell.is-authenticated :where(.metric-grid, .stats-grid, .compact-metrics) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .super-shell.is-authenticated :where(
    .attendance-filter-form,
    .people-filter-form,
    .data-filter-form,
    .admin-invoice-filters,
    .report-filter-grid,
    .schedule-date-toolbar,
    .payroll-bulk-toolbar
  ) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .super-shell.is-authenticated :where(
    .attendance-tabs,
    .leave-workspace-tabs,
    .payroll-workspace-tabs,
    .report-tabs,
    .notification-tabs,
    .plan-scope-tabs,
    .account-settings-nav
  ) {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .super-shell.is-authenticated :where(
    .attendance-tabs,
    .leave-workspace-tabs,
    .payroll-workspace-tabs,
    .report-tabs,
    .notification-tabs,
    .plan-scope-tabs,
    .account-settings-nav
  )::-webkit-scrollbar {
    display: none;
  }

  .super-shell.is-authenticated :where(
    .attendance-tabs,
    .leave-workspace-tabs,
    .payroll-workspace-tabs,
    .report-tabs,
    .notification-tabs,
    .plan-scope-tabs,
    .account-settings-nav
  ) > * {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }

  .super-shell.is-authenticated :where(.module-toolbar, .page-actions, .people-actions, .filter-bar, .filters, .form-actions, .settings-form-actions, .report-filter-actions) {
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .super-shell.is-authenticated :where(.module-toolbar, .page-actions, .people-actions, .filter-bar, .filters, .form-actions, .settings-form-actions, .report-filter-actions) > :where(form, label, input, select, button, a) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .super-shell.is-authenticated :where(.responsive-table, .responsive-table-wrap, .report-table-wrap, .payroll-table-wrap, .employee-leave-balance-table-wrap, .table-card) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .super-shell.is-authenticated :where(.responsive-table, .responsive-table-wrap, .report-table-wrap, .payroll-table-wrap, .employee-leave-balance-table-wrap, .table-card) > table {
    width: 100%;
    min-width: 640px;
  }

  .super-shell.is-authenticated :where(dialog, .ui-dialog, .people-promote-dialog, .workplace-map-dialog-card) {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  .super-shell.is-authenticated .communications-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100dvh - var(--superhub-topbar-height) - 28px) !important;
    overflow: hidden !important;
  }

  .super-shell.is-authenticated :where(.message-thread-list, .conversation-panel, .message-thread, .reply-composer) {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  body.dashboard-calm-page .super-shell.is-authenticated .page-content {
    padding: calc(var(--superhub-topbar-height) + 12px)
      var(--mobile-page-gutter)
      calc(30px + env(safe-area-inset-bottom)) !important;
  }

  body.dashboard-calm-page .sh-dashboard-home.sh-home-v3,
  body.dashboard-calm-page .sh-home-v3 > .sh-home-v3-main,
  body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-v3-main,
  body.dashboard-calm-page .sh-home-v3 .sh-home-overview-grid {
    gap: 12px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .social-home-header {
    min-height: 38px !important;
    margin: 0 !important;
  }

  body.dashboard-calm-page .sh-home-v3 .social-home-header h1 {
    font-size: clamp(1.3rem, 6vw, 1.55rem) !important;
  }

  body.dashboard-calm-page .sh-home-v3 :where(.sh-home-work-card, .sh-role-actions, .sh-home-calendar-card, .sh-admin-attendance, .sh-home-module) {
    min-height: 0 !important;
    padding: 15px !important;
    border-radius: var(--mobile-card-radius) !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-mobile-action {
    width: 100% !important;
    min-height: 44px !important;
    margin: 12px 0 0 !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-role-actions-head {
    min-height: 0 !important;
    gap: 10px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-role-action-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 0 !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-role-action-card {
    grid-template-columns: 42px minmax(0, 1fr) auto 16px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 66px !important;
    padding: 10px 0 !important;
    gap: 10px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-role-action-copy small {
    display: block !important;
    overflow: visible !important;
    line-height: 1.35 !important;
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-role-action-badge {
    width: auto !important;
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding-inline: 7px !important;
  }

  /* Dashboard week card: seven equal days and details that stay in the card. */
  body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card {
    position: relative !important;
    display: grid !important;
    gap: 12px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .calendar-glance-head {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    min-height: 0 !important;
    gap: 8px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .calendar-glance-head h2 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 1rem !important;
  }

  body.dashboard-calm-page .sh-home-v3 .calendar-week-actions {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 0 0 auto !important;
  }

  body.dashboard-calm-page .sh-home-v3 .calendar-week-actions > a {
    position: static !important;
    width: auto !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(126, 168, 214, .22) !important;
    border-radius: 9px !important;
    line-height: 1.2 !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-week-strip {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-day-pill,
  body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-day-pill.is-selected {
    width: 100% !important;
    min-width: 0 !important;
    height: 68px !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 6px 1px !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-home-calendar-card .calendar-day-pill.is-selected {
    border-radius: 8px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .calendar-week-detail {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 11px 0 0 !important;
    gap: 10px !important;
    border-width: 1px 0 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.dashboard-calm-page .sh-home-v3 .calendar-week-detail > strong {
    width: 100% !important;
    font-size: .8rem !important;
    line-height: 1.4 !important;
  }

  body.dashboard-calm-page .sh-home-v3 .calendar-week-detail > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 7px 10px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .calendar-week-detail span {
    min-width: 0 !important;
    white-space: normal !important;
  }

  body.dashboard-calm-page .sh-home-v3 .calendar-week-detail > a,
  body.dashboard-calm-page .sh-home-v3 .calendar-week-detail > .calendar-week-view-day {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(126, 168, 214, .22) !important;
    border-radius: 9px !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance {
    grid-template-columns: 1fr !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-admin-attendance-head {
    display: flex !important;
    align-items: center !important;
  }

  body.dashboard-calm-page .sh-home-v3 .sh-admin-card-grid {
    grid-column: 1 !important;
    grid-row: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .super-shell.is-authenticated :where(.action-grid, .cards-grid, .peoplehub-module-grid) {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  :root {
    --mobile-page-gutter: 10px;
  }

  .super-shell.is-authenticated .topbar {
    padding-inline: 10px !important;
    gap: 6px !important;
  }

  .super-shell.is-authenticated .topbar > .brand .brand-mark,
  .super-shell.is-authenticated .topbar > .brand .brand-mark img {
    flex-basis: 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .super-shell.is-authenticated .topbar > .brand .brand-wordmark strong {
    font-size: .92rem !important;
  }

  body.dashboard-calm-page .sh-home-v3 :where(.sh-home-work-card, .sh-role-actions, .sh-home-calendar-card, .sh-admin-attendance, .sh-home-module) {
    padding: 13px !important;
  }

  .super-shell.is-authenticated :where(.metric-grid, .stats-grid, .compact-metrics) {
    gap: 10px !important;
  }

}