/*
 * Mobile Responsive Styles
 *
 * Comprehensive mobile optimization for all pages.
 * Uses consistent breakpoints and touch-friendly patterns.
 *
 * Breakpoints:
 *   - Desktop: > 900px (default)
 *   - Tablet: 768px - 900px
 *   - Mobile: 480px - 768px
 *   - Small Mobile: < 480px
 *
 * Touch Target Guidelines:
 *   - Minimum touch target: 44px x 44px (Apple HIG recommendation)
 *   - Minimum spacing between targets: 8px
 *   - Important actions should be larger: 48px+
 */

@layer base {

/* ============================================
 * BREAKPOINT CUSTOM PROPERTIES
 * ============================================ */
:root {
  /* Mobile-specific spacing overrides */
  --space-page-margin-tablet: var(--space-6);  /* 24px */
  --space-page-margin-mobile: var(--space-4);  /* 16px */
  --space-page-margin-small: var(--space-3);   /* 12px */

  /* Touch-friendly minimum sizes */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
  --touch-spacing-min: 8px;
}

/* Prevent iOS auto-zoom on input focus (font-size < 16px triggers zoom) */
input, textarea, select {
  font-size: max(16px, 1em);
}

} /* @layer base */

@layer components {

/* ============================================
 * TOUCH-FRIENDLY BUTTON ENHANCEMENTS
 * ============================================ */

/* Ensure all buttons meet minimum touch target size */
  @media (pointer: coarse) {
.btn {
    min-block-size: var(--touch-target-min);
    min-inline-size: var(--touch-target-min)
}
  }

  @media (pointer: coarse) {
.btn-sm {
    min-block-size: 38px
}
  }

  @media (pointer: coarse) {
.btn-lg {
    min-block-size: var(--touch-target-comfortable)
}
  }

/* Increase tap area for icon buttons */
  @media (pointer: coarse) {
.btn-icon {
    min-inline-size: var(--touch-target-min);
    min-block-size: var(--touch-target-min)
}
  }

/* ============================================
 * GLOBAL MOBILE LAYOUT ADJUSTMENTS
 * ============================================ */

/* Prevent horizontal overflow */
html, body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Improve touch scrolling on all scrollable areas */
.admin-table-container,
.markdown-content pre {
  -webkit-overflow-scrolling: touch;
}

/* ============================================
 * PAGE CONTAINER RESPONSIVE ADJUSTMENTS
 * ============================================ */
  @media (width <= 900px) {
.issues-page,
.issue-form-page {
    padding: var(--space-6) var(--space-page-margin-tablet)
}
  }

  @media (width <= 768px) {
.issues-page,
.issue-form-page {
    padding: var(--space-4) var(--space-page-margin-mobile)
}
  }

  @media (width <= 480px) {
.issues-page,
.issue-form-page {
    padding: var(--space-3) var(--space-page-margin-small)
}
  }

/* ============================================
 * AUTH PAGES MOBILE OPTIMIZATION
 * ============================================ */
  @media (width <= 480px) {
.auth-page {
    margin: var(--space-8) auto;
    padding: var(--space-4);
    max-inline-size: none
}

    .auth-page h1 {
      font-size: 1.25rem;
      margin-block-end: var(--space-4);
    }
  }

  @media (width <= 480px) {
    .auth-form input[type="email"],
    .auth-form input[type="password"] {
      min-block-size: var(--touch-target-min);
    }

    .auth-form .btn-primary {
      inline-size: 100%;
      min-block-size: var(--touch-target-comfortable);
      font-size: 1rem;
    }
  }

/* ============================================
 * DASHBOARD MOBILE ENHANCEMENTS
 * ============================================ */
  @media (width <= 900px) {
.dashboard-page {
    padding: var(--space-6) var(--space-page-margin-tablet)
}
  }

  @media (width <= 768px) {
.dashboard-page {
    padding: var(--space-4) var(--space-page-margin-mobile)
}
  }

  @media (width <= 480px) {
.dashboard-page {
    padding: var(--space-3) var(--space-page-margin-small)
}
  }

  @media (width <= 768px) {
.dashboard-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4)
}
  }

  @media (width <= 480px) {
.dashboard-grid {
    gap: var(--space-3);
    margin-block-start: var(--space-4)
}
  }

  @media (width <= 768px) {
.dashboard-card {
    padding: var(--space-4);
    min-block-size: auto
}

    .dashboard-card h2 {
      font-size: 0.9375rem;
      margin-block-end: var(--space-3);
      padding-block-end: var(--space-2);
    }
  }

  @media (width <= 480px) {
.dashboard-card {
    padding: var(--space-3)
}
  }

  @media (width <= 768px) {
.dashboard-stat__value {
    font-size: 1.5rem
}
  }

/* Make issue items more touch-friendly */
  @media (width <= 480px) {
.issue-item-compact {
    padding: var(--space-3);
    min-block-size: var(--touch-target-comfortable)
}
  }

  @media (width <= 480px) {
.issue-link {
    font-size: 0.9375rem
}
  }

  @media (width <= 480px) {
.team-stat-item {
    padding: var(--space-3) var(--space-2);
    min-block-size: var(--touch-target-min)
}
  }

  @media (width <= 480px) {
.team-name {
    font-size: 0.875rem
}
  }

  @media (width <= 480px) {
.team-count {
    font-size: 1rem;
    padding: var(--space-1-5) var(--space-2)
}
  }

/* ============================================
 * ADMIN TABLES MOBILE OPTIMIZATION
 * ============================================ */
  @media (width <= 768px) {
.admin-table-container {
    margin: 0 calc(-1 * var(--space-page-margin-mobile));
    border-radius: var(--radius-lg);
    border-inline-start: none;
    border-inline-end: none;
    overflow: hidden
}
  }

  @media (width <= 480px) {
.admin-table-container {
    margin: 0 calc(-1 * var(--space-page-margin-small))
}
  }

  @media (width <= 768px) {
.admin-table {
    font-size: 0.875rem
}

    .admin-table th,
    .admin-table td {
      padding: var(--space-2) var(--space-3);
      font-size: var(--text-sm);
    }

    .admin-table .actions-cell {
      white-space: nowrap;
    }

    .admin-table .btn-action,
    .admin-table .btn-impersonate,
    .admin-table .btn-danger {
      padding: var(--space-2);
      min-block-size: var(--touch-target-min);
      min-inline-size: var(--touch-target-min);
    }
  }

  @media (width <= 480px) {
.admin-table {

    /* Hide less important columns on very small screens */
}

    .admin-table th,
    .admin-table td {
      padding: var(--space-2-5) var(--space-2);
    }

    .admin-table .date-cell {
      display: none;
    }

    .admin-table th:nth-child(5),
    .admin-table td:nth-child(5) {
      display: none;
    }
  }

/* Make action buttons more touch-friendly */
  @media (width <= 768px) {
.btn-action {
    padding: var(--space-2) var(--space-3);
    min-block-size: 36px
}
  }

  @media (width <= 768px) {
.actions-cell {
    gap: var(--space-2)
}
  }

/* Stack user email and badge on mobile */
  @media (width <= 480px) {
.user-email {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1)
}
  }

/* Compact role and status badges */
  @media (width <= 480px) {
.role-badge,
.status-badge {
    font-size: 0.6875rem;
    padding: var(--space-0-5) var(--space-2)
}
  }

/* ============================================
 * FORM MOBILE ENHANCEMENTS
 * ============================================ */

/* Ensure form containers don't overflow */
  @media (width <= 768px) {
.admin-form-container,
.issue-form-container {
    max-inline-size: none
}
  }

/* Make inputs easier to tap */
  @media (width <= 768px) {
.form-input,
.form-textarea,
.form-select {
    min-block-size: var(--touch-target-min);
}
  }

/* Full-width form actions */
  @media (width <= 768px) {
.form-actions {
    flex-direction: column;
    gap: var(--space-2)
}

    .form-actions .btn {
      inline-size: 100%;
      justify-content: center;
      min-block-size: var(--touch-target-min);
    }
  }

/* Touch-friendly checkboxes and radios */
  @media (width <= 768px) {
.form-checkbox,
.form-radio {
    inline-size: 22px;
    block-size: 22px;
    min-inline-size: 22px
}
  }

  @media (width <= 768px) {
.form-check {
    min-block-size: var(--touch-target-min);
    padding: var(--space-2) 0
}
  }

  @media (width <= 768px) {
.team-checkbox,
.label-checkbox {
    padding: var(--space-3);
    min-block-size: var(--touch-target-min)
}
  }

  @media (width <= 480px) {
.form-label {
    font-size: 0.8125rem
}
  }

  @media (width <= 480px) {
.form-hint,
.form-error {
    font-size: 0.6875rem
}
  }

/* Stack checkbox/radio groups */
  @media (width <= 480px) {
.form-check-group-inline {
    flex-direction: column;
    gap: var(--space-2)
}
  }

  @media (width <= 768px) {
.form-row {
    flex-direction: column;
    gap: var(--space-3)
}
  }

  @media (width <= 768px) {
.form-group {
    inline-size: 100%
}
  }

/* ============================================
 * CARD COMPONENT MOBILE ENHANCEMENTS
 * ============================================ */
  @media (width <= 480px) {
.card {
    border-radius: 6px
}
  }

  @media (width <= 480px) {
.card-header {
    padding: var(--space-3)
}
  }

  @media (width <= 480px) {
.card-title {
    font-size: var(--text-base)
}
  }

  @media (width <= 480px) {
.card-body {
    padding: var(--space-3)
}
  }

  @media (width <= 480px) {
.card-footer {
    padding: var(--space-3)
}
  }

/* Make card actions touch-friendly */
  @media (width <= 480px) {
    .card-header-actions .btn {
      min-block-size: 36px;
    }
  }

/* ============================================
 * MODAL MOBILE OPTIMIZATION
 * ============================================ */
  @media (width <= 768px) {
.modal-dialog {
    inline-size: 95%;
    max-inline-size: none;
    margin: var(--space-4);
    max-block-size: calc(100vh - 2 * var(--space-4));
    max-block-size: calc(100dvh - 2 * var(--space-4));
    overflow-y: auto
}
  }

  @media (width <= 768px) {
.modal-header {
    padding: var(--space-4)
}
  }

  @media (width <= 768px) {
.modal-body {
    padding: var(--space-4)
}
  }

  @media (width <= 768px) {
.modal-footer {
    padding: var(--space-3) var(--space-4);
    flex-direction: column-reverse;
    gap: var(--space-2)
}

    .modal-footer .btn-modal-cancel,
    .modal-footer .btn-modal-confirm {
      inline-size: 100%;
      min-block-size: var(--touch-target-min);
    }
  }

  @media (width <= 768px) {
.delete-options {
    gap: var(--space-3)
}
  }

  @media (width <= 768px) {
.delete-option {
    padding: var(--space-3)
}
  }

  @media (width <= 480px) {
.modal-icon {
    inline-size: 40px;
    block-size: 40px
}

    .modal-icon svg {
      inline-size: 20px;
      block-size: 20px;
    }
  }

  @media (width <= 480px) {
.modal-title {
    font-size: 1rem
}
  }

/* ============================================
 * FLASH MESSAGES MOBILE OPTIMIZATION
 * ============================================ */
  @media (width <= 768px) {
.flash-notice,
.flash-alert {
    margin: var(--space-3) var(--space-page-margin-mobile);
    padding: var(--space-3);
    border-radius: 6px;
    font-size: 0.8125rem
}
  }

  @media (width <= 480px) {
.flash-notice,
.flash-alert {
    margin: var(--space-2) var(--space-page-margin-small)
}
  }

/* ============================================
 * PAGE HEADER MOBILE OPTIMIZATION
 * ============================================ */
  @media (width <= 768px) {
.page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3)
}

    .page-header h1 {
      font-size: 1.25rem;
      text-align: center;
    }
  }

  @media (width <= 480px) {
.page-header {
    gap: var(--space-3)
}

    .page-header h1 {
      font-size: 1.125rem;
    }
  }

  @media (width <= 768px) {
.header-actions {
    justify-content: center
}
  }

  @media (width <= 480px) {
.header-actions {
    flex-direction: column;
    gap: var(--space-2)
}

    .header-actions .btn {
      inline-size: 100%;
      justify-content: center;
    }
  }

  @media (width <= 768px) {
.page-header--enhanced {
    padding: var(--space-4);
    gap: var(--space-3)
}
  }

  @media (width <= 768px) {
.page-header__title-section {
    text-align: center
}
  }

  @media (width <= 768px) {
.page-header__title {
    font-size: 1.25rem
}
  }

  @media (width <= 768px) {
.page-header__subtitle {
    font-size: var(--text-xs)
}
  }

  @media (width <= 768px) {
.page-header__actions {
    justify-content: center;
    flex-wrap: wrap
}
  }

  @media (width <= 480px) {
.page-header__actions {
    flex-direction: column;
    inline-size: 100%
}

    .page-header__actions .btn,
    .page-header__actions .btn-primary,
    .page-header__actions .btn-secondary {
      inline-size: 100%;
      justify-content: center;
    }
  }

  @media (width <= 480px) {
.workspace-status {
    text-align: center;
    inline-size: 100%
}
  }

/* ============================================
 * EMPTY STATE MOBILE OPTIMIZATION
 * ============================================ */
  @media (width <= 480px) {
.empty-state {
    padding: var(--space-6) var(--space-4)
}
  }

  @media (width <= 480px) {
.empty-state-inline {
    padding: var(--space-6) var(--space-3)
}
  }

/* ============================================
 * ISSUE DETAIL PAGE MOBILE OPTIMIZATION
 * ============================================ */
  @media (width <= 768px) {
.issue-detail-page {
    padding: var(--space-2)
}
  }

  @media (width <= 480px) {
.issue-detail-page {
    padding: var(--space-2)
}
  }

  @media (width <= 768px) {
.issue-breadcrumb {
    flex-wrap: wrap;
    gap: var(--space-1);
    font-size: var(--text-xs);
    margin-block-end: var(--space-4)
}
  }

  @media (width <= 768px) {
.issue-header-redesign {
    padding-inline-start: 0;
    padding-inline-end: 0
}
  }

  @media (width <= 768px) {
.issue-header-top-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2)
}
  }

  @media (width <= 768px) {
.issue-header-actions {
    inline-size: auto;
    flex-shrink: 0
}
  }

  @media (width <= 768px) {
.issue-title-redesign {
    font-size: var(--text-xl)
}
  }

  @media (width <= 480px) {
.issue-title-redesign {
    font-size: var(--text-lg)
}
  }

  @media (width <= 768px) {
.issue-badges {
    flex-wrap: wrap
}
  }

  @media (width <= 480px) {
.issue-badges {
    gap: var(--space-1-5)
}
  }

  @media (width <= 480px) {
.issue-status-badge,
.issue-priority-badge,
.issue-id-badge {
    font-size: var(--text-xs);
    padding: var(--space-0-5) var(--space-2)
}
  }

  @media (width <= 768px) {
.issue-meta-row {
    flex-wrap: wrap;
    gap: var(--space-2)
}
  }

  @media (width <= 768px) {
.meta-item {
    font-size: var(--text-xs)
}
  }

  @media (width <= 768px) {
.issue-main-content,
.issue-sidebar-redesign {
    padding: 0;
    inline-size: 100%
}
  }

  @media (width <= 768px) {
.sidebar-card {
    inline-size: 100%;
    max-inline-size: 100%;
    box-sizing: border-box;
    overflow-x: hidden
}
  }

  @media (width <= 480px) {
.sidebar-card {
    padding: var(--space-2)
}
  }

  @media (width <= 768px) {
.content-card {
    inline-size: 100%;
    max-inline-size: 100%;
    box-sizing: border-box;
    overflow-x: hidden
}
  }

/* Comments area */
  @media (width <= 768px) {
.comment-item {
    gap: var(--space-2)
}
  }

  @media (width <= 768px) {
.comment-avatar-img,
.comment-avatar-placeholder {
    inline-size: 32px;
    block-size: 32px
}
  }

  @media (width <= 768px) {
.comment-content {
    padding: var(--space-2-5) var(--space-3)
}
  }

  @media (width <= 768px) {
.comment-textarea {
    min-block-size: 100px;
}
  }

/* Prevent iOS auto-zoom on input focus [MC-284] [MC-290]
 * iOS Safari zooms in when a focused element has computed font-size < 16px.
 * Only keyboard-opening elements (input, textarea, select, contenteditable)
 * trigger this behavior — buttons do not.
 *
 * MC-005 exception: !important is required here to override component-level
 * specificity (e.g. .tiptap-editor-wrapper .ProseMirror). Matching every
 * component selector is impractical; !important is the pragmatic choice
 * until cascade layers (MC-005 Phase 1) eliminate the need.
 */
  @media (width <= 768px) {
/* stylelint-disable selector-class-pattern -- ProseMirror is a third-party class name */
input:not([type="hidden"]),
textarea,
select,
[contenteditable="true"],
.ProseMirror {
    /* stylelint-disable-next-line declaration-no-important -- required to override component specificity */
    font-size: max(16px, 1em) !important;
}
/* stylelint-enable selector-class-pattern */
  }

  @media (width <= 480px) {
.details-list-redesign {
    padding: var(--space-2)
}
  }

  @media (width <= 480px) {
.detail-row {
    flex-direction: row;
    justify-content: space-between;
    padding: var(--space-1) 0;
    font-size: 11px
}

    .detail-row dd {
      text-align: end;
    }
  }

/* Content cards */
  @media (width <= 768px) {
.content-card-header {
    padding: var(--space-3)
}
  }

  @media (width <= 480px) {
.content-card-header {
    padding: var(--space-3) var(--space-4)
}
  }

  @media (width <= 768px) {
.content-card-body {
    padding: var(--space-3)
}
  }

  @media (width <= 480px) {
.content-card-body {
    padding: var(--space-4)
}
  }

/* ============================================
 * ISSUE LIST MOBILE OPTIMIZATION
 * ============================================ */
  @media (width <= 768px) {
.issue-card {
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3)
}
  }

  @media (width <= 480px) {
.issue-card {
    padding: var(--space-2-5)
}
  }

  @media (width <= 768px) {
.issue-identifier {
    font-size: 0.6875rem;
    min-inline-size: auto
}
  }

  @media (width <= 768px) {
.issue-meta {
    gap: var(--space-2)
}
  }

  @media (width <= 768px) {
.issue-card--enhanced {
    padding: 0
}
  }

  @media (width <= 768px) {
.issue-card__main {
    padding: var(--space-3)
}
  }

  @media (width <= 768px) {
.issue-card__header {
    gap: var(--space-2)
}
  }

  @media (width <= 480px) {
.issue-title {
    font-size: 0.875rem
}
  }

  @media (width <= 480px) {
.issue-priority,
.issue-status {
    font-size: 0.6875rem;
    padding: var(--space-0-5) var(--space-1-5)
}
  }

/* ============================================
 * FILTER CONTROLS MOBILE OPTIMIZATION
 * ============================================ */
  @media (width <= 768px) {
.filters-container {
    gap: var(--space-3);
    padding: 0 var(--space-3);
    margin: 0
}
  }

/* Remove any background/padding from individual filters on mobile */
  @media (width <= 768px) {
.priority-filter,
.status-filter,
.team-filter,
.label-filter,
.assignee-filter,
.sort-filter {
    padding: 0;
    background: transparent;
    inline-size: auto;
    flex-shrink: 0
}
  }

  @media (width <= 768px) {
.priority-filter-options {
    inline-size: 100%
}
  }

  @media (width <= 480px) {
.priority-filter-options {
    flex-direction: column
}
  }

  @media (width <= 768px) {
.priority-filter-option {
    padding: var(--space-2) var(--space-3);
    min-block-size: 36px
}
  }

  @media (width <= 480px) {
.priority-filter-option {
    inline-size: 100%;
    justify-content: center;
    min-block-size: var(--touch-target-min)
}
  }

  @media (width <= 480px) {
.status-filter-toggle {
    min-block-size: var(--touch-target-min)
}
  }

/* ============================================
 * TEAM SECTIONS MOBILE OPTIMIZATION
 * ============================================ */
  @media (width <= 768px) {
.teams-container {
    gap: var(--space-6)
}
  }

  @media (width <= 768px) {
.issues-container {
    border-radius: 8px
}
  }

  @media (width <= 768px) {
.team-section--enhanced {
    border-radius: 8px
}
  }

  @media (width <= 768px) {
.team-header--enhanced {
    padding: 0
}
  }

  @media (width <= 768px) {
.team-header__content {
    padding: var(--space-3)
}
  }

  @media (width <= 768px) {
.team-header__name {
    font-size: var(--text-base)
}
  }

/* ============================================
 * NOTIFICATIONS PAGE MOBILE
 * ============================================ */
  @media (width <= 768px) {
.notifications-page {
    padding: var(--space-4)
}
  }

  @media (width <= 768px) {
.notification-item {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3)
}
  }

  @media (width <= 768px) {
.notification-icon {
    inline-size: 32px;
    block-size: 32px;
    align-self: flex-start
}
  }

  @media (width <= 768px) {
.notification-header {
    flex-direction: column;
    gap: var(--space-1)
}
  }

  @media (width <= 768px) {
.notification-actions {
    inline-size: 100%;
    justify-content: flex-start;
    flex-wrap: wrap
}

    .notification-actions .btn {
      flex: 1;
      min-inline-size: 100px;
      justify-content: center;
      min-block-size: var(--touch-target-min);
    }
  }

/* ============================================
 * ISSUES PAGE HEADER MOBILE
 * ============================================ */
  @media (width <= 768px) {
.issues-page-header {
    /* Two-column header: dropdown left, actions right */
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0;
    margin-block-end: var(--space-3)

    /* View-as dropdown should be left-aligned with no extra padding/margin */
}

    .issues-page-header .view-as-dropdown--inline {
      margin-inline-start: 0;
    }

    .issues-page-header .view-as-toggle--inline {
      padding-inline-start: 0;
      justify-content: flex-start;
    }
  }

/* Hide the "Issues" heading on mobile - just show dropdown selector */
  @media (width <= 768px) {
.issues-page-header__title {
    display: none
}
  }

  @media (width <= 768px) {
.issues-page-header__actions {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0
}

    .issues-page-header__actions .btn-primary,
    .issues-page-header__actions .btn-secondary,
    .issues-page-header__actions .view-as-dropdown {
      inline-size: auto;
      padding: var(--space-1) var(--space-2);
      font-size: var(--text-xs);
      min-block-size: auto;
    }

    .issues-page-header__actions .view-as-dropdown .view-as-toggle {
      padding: var(--space-1) var(--space-2);
      font-size: var(--text-xs);
    }
  }

/* Match mobile header padding (space-3 = 12px) for alignment with logo */
  @media (width <= 768px) {
.issues-page--flat {
    padding: var(--space-3);
    padding-block-start: var(--space-2)
}
  }

/* ============================================
 * PERIOD HEADER MOBILE (Plan Period Groups)
 * ============================================ */
  @media (width <= 768px) {
.issues-period-group {
    /* Period groups extend to edges on mobile */
    border-radius: 0;
    margin: 0 0 var(--space-2) 0
}
  }

  @media (width <= 480px) {
.issues-period-group {
    margin: 0 0 var(--space-3) 0
}
  }

  @media (width <= 768px) {
.issues-period-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2)
}
  }

  @media (width <= 480px) {
.issues-period-header {
    padding: var(--space-3)
}
  }

  @media (width <= 768px) {
.issues-period-title {
    font-size: var(--text-base);
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-inline-start: 0;
    margin-inline-start: 0
}
  }

  @media (width <= 768px) {
.issues-period-plan-name {
    font-size: var(--text-xs)
}
  }

/* Backlog header: two columns - title left, count right */
  @media (width <= 768px) {
    .issues-period-group--backlog .issues-period-header {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .issues-period-group--backlog .issues-period-title {
      margin: 0;
    }
  }

/* Past/completed period headers: title and dates left, checkmark right */
  @media (width <= 768px) {
    .issues-period-group--past .issues-period-header {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .issues-period-group--past .issues-period-title {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      margin: 0;
      flex-wrap: nowrap;
    }

    .issues-period-group--past .issues-period-dates {
      inline-size: auto;
    }

    .issues-period-group--past .issues-period-header-right {
      inline-size: auto;
      flex-shrink: 0;
    }
  }

/* Remove expand icon gap on mobile */
  @media (width <= 768px) {
.issues-period-expand-icon {
    margin-inline-end: 0
}
  }

  @media (width <= 768px) {
.issues-period-dates {
    font-size: 10px;
    inline-size: auto
}
  }

  @media (width <= 768px) {
.issues-period-header-right {
    inline-size: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2)
}
  }

  @media (width <= 768px) {
.period-progress {
    min-inline-size: 100%;
    order: 1
}
  }

  @media (width <= 768px) {
.issues-period-count {
    order: 0
}
  }

/* Issue compact cards on mobile - single line layout */
  @media (width <= 768px) {
.issue-card--compact {
    padding: var(--space-2) var(--space-2);
    padding-inline-start: var(--space-1);
    flex-direction: row;
    align-items: center;
    gap: var(--space-2)
}
  }

  /* Even more compact on very small screens */
  @media (width <= 480px) {
.issue-card--compact {
    padding: var(--space-2)
}
  }

/* Remove left margin from issues list and containers */
  @media (width <= 768px) {
.issues-list {
    padding: 0;
    margin: 0
}
  }

  @media (width <= 768px) {
.issues-container,
.issues-container--grouped {
    padding: 0;
    margin: 0
}
  }

  @media (width <= 768px) {
.issue-card-compact__left {
    flex: 1;
    min-inline-size: 0; /* Allow flex item to shrink below content size */
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2)
}
  }

/* Hide identifier on mobile */
  @media (width <= 768px) {
.issue-card-compact__identifier {
    display: none
}
  }

/* Hide checkbox on mobile for cleaner single-line layout */
  @media (width <= 768px) {
.issue-card-compact__checkbox {
    display: none
}
  }

  @media (width <= 768px) {
.issue-card-compact__priority {
    flex-shrink: 0
}
  }

  @media (width <= 768px) {
.issue-card-compact__status {
    flex-shrink: 0
}
  }

  @media (width <= 768px) {
.issue-card-compact__title {
    flex: 1;
    min-inline-size: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    order: 0;
    margin-block-start: 0
}
  }

  @media (width <= 768px) {
.issue-card-compact__title-link {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}
  }

  @media (width <= 768px) {
.issue-card-compact__right {
    flex-shrink: 0;
    inline-size: auto;
    gap: var(--space-2);
    flex-wrap: nowrap
}
  }


  /* Show compact t-shirt size estimate next to assignee on mobile */
  .issue-card-compact__estimate-badge {
    font-size: 9px;
    padding: 1px var(--space-1);
    min-inline-size: unset;
  }

  @media (width <= 768px) {
.issue-card-compact__assignee {
    inline-size: auto;
    flex-shrink: 0
}
  }

/* Smaller avatars on mobile */
  @media (width <= 768px) {
.issue-card-compact__avatar {
    inline-size: 24px;
    block-size: 24px;
    font-size: 10px
}
  }

  @media (width <= 480px) {
.issue-card-compact__date {
    display: none
}
  }

/* ============================================
 * FILTERS MOBILE IMPROVEMENTS
 * ============================================ */
  @media (width <= 768px) {
.filters-header {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    padding: 0
}
  }

  @media (width <= 768px) {
.filters-toggle-button {
    inline-size: auto;
    flex-shrink: 0
}
  }

  @media (width <= 768px) {
.active-filters-summary {
    flex: 1;
    min-inline-size: 0;
    flex-wrap: nowrap;
    padding: var(--space-1) var(--space-2);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-default);
    font-size: var(--text-xs)
}
  }

  @media (width <= 768px) {
.active-filters-summary__items {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}
  }

/* Compact filter container */
  @media (width <= 768px) {
.filters-content {
    padding: var(--space-2);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-default)
}
  }

/* Filter labels already hidden globally */

/* All filters inline - search gets full width on its own row */
  @media (width <= 768px) {
.search-filter {
    inline-size: 100%;
    flex-shrink: 0;
    order: -1
}
  }

  @media (width <= 768px) {
.search-filter-form {
    flex-direction: row;
    gap: var(--space-2);
    inline-size: 100%
}
  }

  @media (width <= 768px) {
.search-input-wrapper {
    flex: 1;
    min-inline-size: 0;
    max-inline-size: none
}
  }

/* Compact filter dropdowns */
  @media (width <= 768px) {
.priority-filter-dropdown,
.team-filter-dropdown,
.status-filter-dropdown,
.label-filter-dropdown,
.assignee-filter-dropdown,
.sort-filter-dropdown {
    inline-size: auto
}
  }

  @media (width <= 768px) {
.priority-filter-toggle,
.team-filter-toggle,
.status-filter-toggle,
.label-filter-toggle,
.assignee-filter-toggle,
.sort-filter-toggle {
    inline-size: auto;
    justify-content: space-between;
    min-block-size: 32px;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs)
}
  }

/* Filter menus positioned absolutely on mobile too */
  @media (width <= 768px) {
.priority-filter-menu,
.team-filter-menu,
.status-filter-menu,
.label-filter-menu,
.assignee-filter-menu,
.sort-filter-menu {
    position: absolute;
    inline-size: max-content;
    min-inline-size: 180px;
    max-block-size: 50vh;
    overflow-y: auto;
    margin-block-start: 0
}
  }

/* ============================================
 * PAGINATION MOBILE
 * ============================================ */
  @media (width <= 768px) {
.pagination-container {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2);
    font-size: var(--text-xs)
}
  }

  @media (width <= 768px) {
.pagination-info {
    text-align: start;
    font-size: var(--text-xs)
}
  }

  @media (width <= 768px) {
.pagination-controls {
    justify-content: flex-end;
    gap: var(--space-1)
}
  }

  @media (width <= 768px) {
.pagination-btn {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    min-block-size: auto
}
  }

  @media (width <= 768px) {
.pagination-page-size {
    gap: var(--space-1);
    font-size: var(--text-xs)
}
  }

  @media (width <= 768px) {
.pagination-page-size-select {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    min-block-size: auto
}
  }

/* ============================================
 * VIEW AS BANNER MOBILE
 * ============================================ */
  @media (width <= 768px) {
.view-as-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    text-align: start
}
  }

  @media (width <= 768px) {
.view-as-banner__content {
    flex-wrap: wrap;
    justify-content: flex-start;
    flex: 1
}
  }

  @media (width <= 768px) {
.view-as-banner__hint {
    font-size: var(--text-xs)
}
  }

  @media (width <= 768px) {
.view-as-banner__close {
    flex-shrink: 0
}
  }

/* ============================================
 * VIEW AS DROPDOWN MOBILE
 * ============================================ */
  @media (width <= 768px) {
.view-as-dropdown {
    inline-size: 100%
}
  }

  @media (width <= 768px) {
.view-as-toggle {
    inline-size: 100%;
    justify-content: flex-start;
    padding-inline-start: 0
}
  }

  @media (width <= 768px) {
.view-as-menu {
    left: 0;
    right: 0;
    max-block-size: 60vh;
    overflow-y: auto
}
  }

/* ============================================
 * ADMIN PAGES MOBILE
 * ============================================ */
  @media (width <= 900px) {
.admin-page {
    padding: var(--space-6) var(--space-page-margin-tablet)
}
  }

  @media (width <= 768px) {
.admin-page {
    padding: var(--space-4) var(--space-page-margin-mobile)
}
  }

  @media (width <= 480px) {
.admin-page {
    padding: var(--space-3) var(--space-page-margin-small)
}
  }

/* Admin nav scrolls horizontally on mobile */
  @media (width <= 768px) {
.admin-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline-start: calc(-1 * var(--space-4));
    margin-inline-end: calc(-1 * var(--space-4));
    padding-inline-start: var(--space-4);
    padding-inline-end: var(--space-4)
}
  }

  @media (width <= 768px) {
.admin-nav__list {
    flex-wrap: nowrap;
    min-inline-size: max-content
}
  }

  @media (width <= 768px) {
.admin-nav__link {
    white-space: nowrap;
    min-block-size: var(--touch-target-min)
}
  }

/* ============================================
 * SAFE AREA INSETS (for notched devices)
 * ============================================ */

@supports (padding: env(safe-area-inset-bottom)) {
  .main-nav__menu {
    padding-block-end: max(var(--space-4), env(safe-area-inset-bottom));
  }

  .modal-footer {
    padding-block-end: max(var(--space-3), env(safe-area-inset-bottom));
  }

  /* Ensure bottom content is reachable on devices with safe area insets */
  .app-content {
    padding-block-end: max(0px, env(safe-area-inset-bottom));
  }

  .sidebar-user {
    padding-block-end: max(var(--space-4), env(safe-area-inset-bottom));
  }
}

/* ============================================
 * REDUCED MOTION PREFERENCES
 * ============================================ */

/* stylelint-disable declaration-no-important -- Reduced motion must override all layers for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* stylelint-enable declaration-no-important */

/* ============================================
 * PRINT STYLES (hide navigation on print)
 * ============================================ */

@media print {
  .main-nav,
  .main-nav__mobile-toggle,
  .flash-notice,
  .flash-alert {
    /* stylelint-disable-next-line declaration-no-important -- Print styles must override all layers */
    display: none !important;
  }

  .main-content {
    min-block-size: auto;
  }
}
} /* @layer components */