/**
 * Mobile-first responsive layer — all portals, login, tables, grids.
 * Breakpoints: 480px (small phone), 640px (phone), 768px (tablet), 1024px (desktop nav).
 */

/* ── Screen-reader only ── */
.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;
}

body.portal-nav-open {
  overflow: hidden;
}

/* ── Mobile top bar (hidden on desktop) ── */
.portal-mobile-bar,
.portal-mobile-backdrop,
.portal-sidebar-close {
  display: none;
}

@media (max-width: 1023px) {
  .portal-mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 45;
    height: 3.25rem;
    padding: 0 0.625rem 0 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .portal-mobile-bar__brand {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
    text-decoration: none;
  }

  .portal-mobile-bar__logo {
    display: block;
    width: auto;
    height: 2rem;
    max-width: min(9.5rem, 52vw);
    object-fit: contain;
    object-position: left center;
  }

  .portal-mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: auto;
    flex-shrink: 0;
    border: none;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .portal-mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 0.14);
  }

  .portal-mobile-menu-btn__icon {
    width: 1.35rem;
    height: 1.35rem;
  }

  .portal-mobile-menu-btn__icon--close {
    position: absolute;
    inset: 0;
    margin: auto;
  }

  .portal-mobile-menu-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.12);
  }

  .portal-mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 48;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .portal-mobile-backdrop.portal-mobile-backdrop--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .portal-sidebar-close {
    display: none !important;
  }

  /* Sidebar drawer — soft fly-in from the right */
  .session-sidebar {
    left: auto;
    right: 0;
    width: min(18.5rem, 88vw);
    border-right: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 50;
    box-shadow: none;
    will-change: transform;
  }

  .session-sidebar:hover {
    width: min(18.5rem, 88vw);
  }

  .session-sidebar.session-sidebar--open {
    transform: translateX(0);
    box-shadow: -12px 0 48px rgba(0, 0, 0, 0.5);
  }

  .session-sidebar .sidebar-label,
  .session-sidebar:hover .sidebar-label,
  .session-sidebar.session-sidebar--open .sidebar-label {
    opacity: 1;
  }

  .session-sidebar .ai-nav-badge,
  .session-sidebar:hover .ai-nav-badge {
    opacity: 1;
  }

  .session-sidebar-inner {
    position: relative;
    padding-top: 0.25rem;
  }

  .session-sidebar .sidebar-nav-link .sidebar-label {
    margin-left: 0.625rem;
  }

  .hr-main,
  .hr-main--blank,
  .hr-main--settings,
  .hr-main--chat {
    margin-left: 0 !important;
    padding-top: 3.25rem;
  }

  .hr-page-header {
    padding: 1rem 1rem 0.875rem;
  }

  .hr-page-header > p.text-xs {
    display: none;
  }

  .hr-page-header h1 {
    font-size: 1.375rem !important;
    line-height: 1.25;
  }

  .hr-page-content {
    padding: 1rem 1rem 5.5rem;
  }

  .hr-main--chat {
    padding-top: 3.25rem;
    height: 100dvh;
  }

  .ai-ask-widget {
    bottom: 1rem;
    right: 1rem;
    height: 48px;
    padding: 0 0.875rem 0 0.75rem;
    font-size: 0.9375rem;
  }

  .ai-ask-widget__label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  @media (max-width: 1023px) {
    .session-sidebar {
      transition: none;
    }

    .portal-mobile-backdrop {
      transition: none;
    }
  }
}

/* ── Touch: disable hover-only sidebar expand ── */
@media (hover: none) and (max-width: 1023px) {
  .session-sidebar:hover {
    width: min(18.5rem, 88vw);
  }
}

/* ── Responsive grids (utility + overrides) ── */
.hr-responsive-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  width: 100%;
}

@media (min-width: 640px) {
  .hr-responsive-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .hr-responsive-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hr-responsive-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .hr-responsive-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Scorecards / filter forms — mobile only (do not override Tailwind sm: breakpoints) */
@media (max-width: 639px) {
  .scorecards-toolbar form.flex,
  .hr-filter-toolbar form.flex {
    flex-direction: column;
    align-items: stretch;
  }

  .scorecards-toolbar form.flex .hr-btn,
  .hr-filter-toolbar form.flex .hr-btn {
    width: 100%;
    justify-content: center;
  }

  .scorecards-toolbar .hr-input,
  .hr-filter-toolbar .hr-input {
    width: 100%;
    min-width: 0;
  }
}

/* Review period banner */
@media (max-width: 767px) {
  .review-period-banner {
    padding: 1rem;
  }

  .review-period-banner__top {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .review-period-banner__picker {
    width: 100%;
    align-self: stretch;
  }

  .review-period-picker--compact,
  .review-period-picker--compact .hr-dropdown {
    width: 100%;
    max-width: none;
  }

  .review-period-banner__title {
    font-size: 1.125rem;
  }
}

/* Wide appraisal / goals tables scroll horizontally */
@media (max-width: 767px) {
  .hr-table--top-align {
    min-width: 40rem;
  }

  .stat-card.overflow-hidden .hr-table-wrap {
    margin: 0;
  }
}

/* KPI: 2 cols on phone, 3 tablet, 6 desktop */
@media (max-width: 639px) {
  .kpi-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }

  .kpi-card {
    min-height: 5rem;
    padding: 0.75rem;
  }

  .kpi-card-value {
    font-size: 1.35rem;
  }
}

/* Bento: single column on small screens */
@media (max-width: 767px) {
  .bento-grid,
  .bento-grid--animate {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 1rem;
  }

  .bento-slot,
  .bento-slot--tall,
  .bento-slot--a,
  .bento-slot--b,
  .bento-slot--c,
  .bento-slot--d,
  .bento-slot--wide {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: auto;
  }

  .bento-card {
    min-height: 0;
  }

  .bento-hero-main {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* Tables: scroll + readable on phone */
.hr-table-wrap {
  -webkit-overflow-scrolling: touch;
  margin: 0 -0.25rem;
  padding: 0 0.25rem;
}

@media (max-width: 767px) {
  .hr-table th,
  .hr-table td,
  .data-table th,
  .data-table td {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
  }

  .hr-table th {
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .manager-goals-table {
    min-width: 36rem;
  }
}

/* Buttons & action rows */
@media (max-width: 639px) {
  .hr-btn {
    min-height: 2.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hr-btn--sm {
    min-height: 2.5rem;
  }

  .flex.flex-wrap.justify-end.gap-2,
  .flex.flex-wrap.gap-2,
  .flex.flex-wrap.gap-3,
  .flex.flex-wrap.gap-4,
  .flex.flex-wrap.items-center.gap-3,
  .flex.flex-wrap.items-center.gap-4,
  .manager-goals-panel__footer,
  .perf-goals-form__actions,
  .hr-goals-panel__actions,
  .appraisal-signoff-form,
  .dev-plan-editor-actions {
    flex-direction: column;
    align-items: stretch !important;
  }

  .flex.flex-wrap.justify-end.gap-2 .hr-btn,
  .flex.flex-wrap.gap-2 .hr-btn,
  .flex.flex-wrap.gap-3 .hr-btn,
  .manager-goals-panel__footer .hr-btn,
  .perf-goals-form__actions .hr-btn,
  .hr-goals-panel__actions .hr-btn {
    width: 100%;
    justify-content: center;
  }

  td.text-right .flex,
  td.text-right form.inline {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  td.text-right .hr-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Appraisal sheet */
@media (max-width: 767px) {
  .appraisal-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem;
  }

  .appraisal-section-total {
    text-align: left !important;
  }

  .appraisal-signoffs-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .appraisal-signoff-form .hr-btn {
    width: 100%;
  }

  .goal-ratings-form select.hr-input,
  .goal-ratings-form .hr-input {
    width: 100%;
    max-width: 100%;
  }
}

/* Performance goals form */
@media (max-width: 767px) {
  .perf-goals-form__grid {
    grid-template-columns: 1fr;
  }

  .perf-goals-form__section {
    padding: 1rem;
  }

  .hr-goals-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .hr-goals-panel__actions {
    width: 100%;
  }

  .hr-goals-panel__actions .hr-btn {
    width: 100%;
  }
}

/* Manager goals */
@media (max-width: 639px) {
  .manager-goals-request-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .manager-goals-request-banner .hr-btn {
    width: 100%;
    justify-content: center;
  }

  .manager-goals-table__status-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

/* Review period tabs */
@media (max-width: 767px) {
  .hr-tabs-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    max-width: 100%;
  }

  .hr-tabs-trigger {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Category accordion */
@media (max-width: 639px) {
  .category-accordion-trigger {
    padding: 0.875rem 1rem;
  }

  .category-accordion-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

/* HR goals panel / stat cards flex */
@media (max-width: 767px) {
  .stat-card.flex,
  .stat-card.flex.flex-col,
  .stat-card.flex.flex-col.sm\:flex-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* Dialog */
@media (max-width: 479px) {
  .hr-dialog-root {
    padding: 0.5rem;
    align-items: flex-end;
  }

  .hr-dialog-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .hr-dialog-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .hr-dialog-footer .hr-btn {
    width: 100%;
  }
}

/* AI chat */
@media (max-width: 639px) {
  .ai-page {
    padding: 0.75rem;
    max-width: 100%;
  }

  .ai-prompt-title {
    font-size: 1.75rem;
  }

  .ai-message {
    max-width: 100%;
  }
}

/* Settings */
@media (max-width: 767px) {
  .hr-settings-layout {
    flex-direction: column;
  }

  .hr-settings-nav {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .hr-settings-panel {
    padding: 1rem;
  }
}

/* Login page */
@media (max-width: 1023px) {
  .login-header__title {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  .login-header__subtitle {
    font-size: clamp(0.875rem, 3.4vw, 1.125rem);
  }

  #step-code .text-\[2\.5rem\],
  #step-success .text-\[2\.5rem\] {
    font-size: 1.75rem !important;
  }

  .max-w-md {
    max-width: 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  #step-code .flex.items-center.justify-center {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding-bottom: 0.25rem;
  }

  #step-code .flex.w-full.gap-3 {
    flex-direction: column;
  }

  #step-code .btn-back {
    width: 100% !important;
  }

  #step-code #btn-continue {
    width: 100%;
  }

  .login-legal-footer {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .login-legal-footer__text {
    font-size: 0.6875rem;
    max-width: 100%;
  }
}

/* Legal pages */
@media (max-width: 899px) {
  .legal-layout {
    grid-template-columns: 1fr;
    padding: 1rem 1rem 2rem;
    gap: 1.25rem;
  }

  .legal-nav {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .legal-nav__list {
    display: contents;
  }

  .legal-nav__list li {
    display: contents;
  }

  .legal-article {
    padding: 1.25rem 1rem;
  }

  .legal-header__inner {
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 479px) {
  .legal-nav {
    grid-template-columns: 1fr;
  }
}

/* Attention / activity */
@media (max-width: 639px) {
  .attention-row,
  .activity-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .quick-actions-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Development plan timeline */
@media (max-width: 767px) {
  .dev-plan-timeline-item {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Import page / wide forms */
@media (max-width: 767px) {
  .hr-input,
  .hr-textarea,
  select.hr-input {
    font-size: 16px; /* prevents iOS zoom on focus */
  }
}

/* Appraisal rating legend — readable on narrow screens */
@media (max-width: 639px) {
  .appraisal-rating-legend {
    padding: 1rem;
  }

  .appraisal-formula-lg strong {
    font-size: 1.125rem;
  }
}

/* Category list cards */
@media (max-width: 639px) {
  .category-list-content {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 1rem;
    gap: 0.35rem;
  }

  .category-list-card {
    height: auto;
    min-height: 5rem;
  }

  .category-list-item:hover .category-list-card,
  .category-list-item.is-open .category-list-card {
    height: auto;
    min-height: 6.5rem;
  }
}

/* HR dropdown menus fit viewport */
@media (max-width: 479px) {
  .hr-dropdown-menu {
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: auto !important;
    max-width: none;
  }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
  @media (max-width: 1023px) {
    .portal-mobile-bar {
      padding-top: max(0px, env(safe-area-inset-top));
      height: calc(3.25rem + env(safe-area-inset-top, 0px));
    }

    .hr-page-content {
      padding-bottom: max(5.5rem, calc(5.5rem + env(safe-area-inset-bottom)));
    }

    .ai-ask-widget {
      bottom: max(1rem, env(safe-area-inset-bottom));
    }
  }
}