/* Mobile Responsive Styles — Call Sheet, Diary, Cast, Shoot, Budget Pages */
/* Optimized for film crews on set using mobile devices (≤768px, ≤480px) */

/* ── Call Sheet Mobile Styles ────────────────────────────── */
@media (max-width: 768px) {
  /* Call sheet preview — readable on phone */
  .cs-preview-header {
    flex-direction: column;
    gap: var(--space-2);
  }

  .cs-preview-title {
    font-size: var(--text-lg);
  }

  .cs-preview-meta {
    flex-direction: column;
    gap: var(--space-1);
  }

  .cs-crew-table,
  .cs-cast-table,
  .cs-scene-table {
    font-size: var(--text-xs);
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-md);
  }

  .cs-crew-table td,
  .cs-cast-table td,
  .cs-scene-table td {
    padding: var(--space-1) var(--space-2);
  }

  .cs-crew-table th,
  .cs-cast-table th,
  .cs-scene-table th {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }

  /* Call sheet editor — compact form */
  .cs-editor-form {
    padding: var(--space-2);
  }

  .cs-editor-row {
    flex-direction: column;
    gap: var(--space-2);
  }

  .cs-editor-row > * {
    width: 100% !important;
  }

  /* Call sheet library sidebar — collapse on mobile */
  .cs-library-sidebar {
    display: none;
  }

  .cs-library-sidebar.mobile-open {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 80vw;
    height: 100vh;
    z-index: 200;
    background: var(--app-surface);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
  }

  /* Call sheet print preview — stack vertically */
  .cs-print-preview {
    max-width: 100%;
    margin: 0 auto;
  }
}

/* ── Diary Mobile Styles ─────────────────────────────────── */
@media (max-width: 768px) {
  /* Diary day cards — full width stacked */
  .diary-day-card {
    width: 100%;
    margin: 0 0 var(--space-4);
  }

  .diary-day-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3);
  }

  .diary-header {
    flex-direction: column;
    gap: var(--space-2);
  }

  .diary-header-actions {
    flex-wrap: wrap;
    gap: var(--space-2);
    width: 100%;
  }

  .diary-header-actions button {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
    flex: 1 1 auto;
    min-width: 80px;
  }

  .diary-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-bottom: 2px solid var(--app-border);
    margin-bottom: var(--space-4);
  }

  .diary-tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  /* Hide less critical info on mobile */
  .diary-col-optional {
    display: none;
  }

  /* Diary entry — single column */
  .diary-entry-row {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* ── Cast Page Mobile Styles ─────────────────────────────── */
@media (max-width: 768px) {
  .cast-list-table {
    font-size: var(--text-xs);
  }

  .cast-list-table th,
  .cast-list-table td {
    padding: var(--space-1) var(--space-2);
  }

  .cast-page-header {
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
  }

  .cast-page-title {
    font-size: var(--text-lg);
  }

  .cast-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    flex-wrap: nowrap;
    border-bottom: 2px solid var(--app-border);
  }

  .cast-tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  /* Hide less critical columns on mobile */
  .cast-col-agent,
  .cast-col-contract,
  .cast-col-notes {
    display: none;
  }

  /* Cast search — full width */
  .cast-search-form {
    width: 100%;
  }

  .cast-search-form input {
    width: 100%;
  }
}

/* ── Shoot Page Mobile Styles ────────────────────────────── */
@media (max-width: 768px) {
  .shoot-day-header {
    flex-direction: column;
    gap: var(--space-1);
    align-items: flex-start;
  }

  .shoot-day-title {
    font-size: var(--text-lg);
  }

  .shoot-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-2);
  }

  .shoot-stat-card {
    padding: var(--space-2);
  }

  .shoot-stat-card-label {
    font-size: var(--text-xs);
  }

  .shoot-stat-card-value {
    font-size: var(--text-lg);
  }

  .shoot-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-bottom: 2px solid var(--app-border);
    margin-bottom: var(--space-3);
  }

  .shoot-tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  .crew-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-md);
  }

  .crew-table {
    font-size: var(--text-xs);
    min-width: 500px;
  }

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

  /* Hide less critical columns */
  .crew-col-notes {
    display: none;
  }
}

/* ── Budget Page Mobile Styles ───────────────────────────── */
@media (max-width: 768px) {
  .budget-summary-cards {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-2);
  }

  .budget-card {
    padding: var(--space-3);
  }

  .budget-card-label {
    font-size: var(--text-xs);
  }

  .budget-card-amount {
    font-size: var(--text-lg);
  }

  .budget-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-md);
  }

  .budget-table {
    font-size: var(--text-xs);
    min-width: 600px;
  }

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

  .budget-header-row {
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
  }

  .budget-header-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .budget-header-actions button {
    flex: 1 1 auto;
    min-width: 80px;
  }

  /* Hide less critical columns */
  .budget-col-variance,
  .budget-col-trend {
    display: none;
  }
}

/* ── App-Wide Mobile Improvements ────────────────────────── */
@media (max-width: 768px) {
  /* Page headers */
  .page-header,
  [class*="page-header"] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }

  .page-title,
  [class*="page-title"] {
    font-size: var(--text-lg);
    width: 100%;
  }

  /* Tab bars — scroll horizontally */
  [class*="-tabs"],
  [class*="tab-bar"],
  .app-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  [class*="-tabs"]::-webkit-scrollbar,
  [class*="tab-bar"]::-webkit-scrollbar,
  .app-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Tab items */
  [class*="-tab"],
  [class*="tab-item"],
  .app-tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  /* Modals — full screen or sheet on mobile */
  [class*="modal-overlay"],
  .app-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  [class*="modal-content"],
  [class*="modal-body"],
  .app-modal {
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    width: 100%;
    max-width: 100%;
  }

  /* Buttons — larger tap targets (min 40px height per iOS HIG) */
  button,
  .btn,
  [role="button"] {
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
  }

  /* Tables — horizontal scroll container */
  table {
    min-width: unset;
  }

  .table-wrapper,
  [class*="table-container"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-md);
  }

  /* Form inputs — full width */
  .app-input,
  .app-textarea,
  .app-select,
  input,
  textarea,
  select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: 16px;
  }

  /* Form groups — stack vertically */
  .app-input-group {
    flex-direction: column;
  }

  .app-input-group > * {
    flex: 1;
    width: 100%;
  }

  /* Flex utilities — responsive */
  .app-flex-between {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* Grids — single column on mobile */
  .app-grid,
  .app-grid-2,
  .app-grid-3,
  .app-grid-4,
  [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-3);
  }

  /* Sidebar navigation — toggle or collapse */
  [class*="sidebar"],
  [role="navigation"] {
    display: none;
  }

  [class*="sidebar"].mobile-open {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 80vw;
    height: 100vh;
    z-index: 199;
    background: var(--app-surface);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
  }

  /* Cards — less padding on mobile */
  .app-card {
    padding: var(--space-3);
  }

  .app-card-header {
    font-size: var(--text-md);
  }

  .app-card-body {
    font-size: var(--text-sm);
  }

  /* Empty states — compact */
  .app-empty {
    padding: var(--space-6) var(--space-4);
  }

  .app-empty-icon {
    font-size: 32px;
  }

  .app-empty-title {
    font-size: var(--text-md);
  }

  .app-empty-desc {
    font-size: var(--text-sm);
  }

  /* Alerts — full width */
  .app-alert {
    margin-left: 0;
    margin-right: 0;
  }

  /* List items — larger touch targets */
  .app-list-item {
    padding: var(--space-3) var(--space-2);
    gap: var(--space-2);
  }

  /* Buttons on toolbars — stack or wrap */
  .app-toolbar {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .app-toolbar button {
    flex: 1 1 auto;
    min-width: 80px;
  }

  /* Utility spacing — tighter on mobile */
  .mt-1 { margin-top: var(--space-1); }
  .mt-2 { margin-top: var(--space-1); }
  .mt-3 { margin-top: var(--space-2); }
  .mt-4 { margin-top: var(--space-2); }
  .mb-1 { margin-bottom: var(--space-1); }
  .mb-2 { margin-bottom: var(--space-1); }
  .mb-3 { margin-bottom: var(--space-2); }
  .mb-4 { margin-bottom: var(--space-2); }
}

/* ── Extra Small Phones (≤480px) ─────────────────────────── */
@media (max-width: 480px) {
  /* Typography — scale down slightly */
  h1,
  .app-title,
  [class*="page-title"] {
    font-size: var(--text-lg) !important;
  }

  h2,
  .section-title {
    font-size: var(--text-md) !important;
  }

  h3 {
    font-size: var(--text-base) !important;
  }

  /* Stats cards — 2 per row, 1 on very small */
  [class*="stats-grid"],
  [class*="summary-cards"],
  .budget-summary-cards,
  .shoot-stats-grid {
    grid-template-columns: 1fr !important;
  }

  /* Page padding — minimal on tiny phones */
  .app-page,
  .app-page-sm,
  .app-page-lg {
    padding: var(--space-3) var(--space-2) var(--space-6);
  }

  /* Modal — full height */
  [class*="modal-content"],
  [class*="modal-body"],
  .app-modal {
    max-height: 100vh;
    border-radius: 0;
    max-width: 100%;
    width: 100%;
  }

  /* Modal overlay — edges hidden */
  [class*="modal-overlay"],
  .app-modal-overlay {
    padding: 0;
  }

  /* Sidebar — full width on tiny phones */
  [class*="sidebar"].mobile-open,
  .cs-library-sidebar.mobile-open {
    width: 100vw;
  }

  /* Buttons — full width stacked */
  .app-modal-footer button,
  .app-card-footer button {
    width: 100%;
    flex-direction: column;
  }

  /* Tables — more aggressive font reduction */
  table,
  .app-table {
    font-size: var(--text-xs) !important;
  }

  table th,
  table td,
  .app-table th,
  .app-table td {
    padding: 4px !important;
  }

  /* Form inputs — stack full width */
  .app-input,
  .app-textarea,
  .app-select,
  input,
  textarea,
  select {
    font-size: 16px;
    padding: var(--space-2) var(--space-2);
  }

  /* List items — minimal padding */
  .app-list-item {
    padding: var(--space-2) var(--space-1);
  }

  /* Tab bar — scrollable, minimal padding */
  [class*="-tabs"],
  [class*="tab-bar"],
  .app-tabs {
    margin-bottom: var(--space-2);
  }

  [class*="-tab"],
  [class*="tab-item"],
  .app-tab {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }

  /* Badge — smaller */
  .app-badge {
    padding: 2px 6px;
    font-size: 10px;
  }

  /* Divider — tighter spacing */
  .app-divider {
    margin: var(--space-2) 0;
  }

  /* Empty states — minimal padding */
  .app-empty {
    padding: var(--space-4) var(--space-2);
  }

  .app-empty-icon {
    font-size: 24px;
  }

  /* Alert — compact */
  .app-alert {
    padding: var(--space-2) var(--space-2);
    font-size: var(--text-xs);
  }

  /* Hide non-essential UI elements on tiny phones */
  .hide-on-mobile {
    display: none !important;
  }
}

/* ── Landscape Orientation (Mobile) ──────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .app-page,
  .app-page-sm,
  .app-page-lg {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }

  h1,
  .app-title,
  [class*="page-title"] {
    font-size: var(--text-lg);
    margin-bottom: var(--space-1);
  }

  .app-modal {
    max-height: 95vh;
  }

  /* Tables — more compact in landscape */
  table th,
  table td {
    padding: 4px 6px !important;
  }
}

/* ── Print Styles (Mobile & Desktop) ────────────────────── */
@media print {
  .cs-library-sidebar,
  .cs-library-sidebar.mobile-open,
  .app-toolbar,
  button,
  .btn,
  [role="navigation"],
  [class*="modal"],
  [class*="-tabs"] {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    padding: 0;
    margin: 0;
  }

  .app-page,
  .app-page-sm,
  .app-page-lg {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  .app-card,
  table {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .app-table td,
  table td {
    page-break-inside: avoid;
  }

  a {
    text-decoration: none;
  }

  .app-title,
  [class*="page-title"] {
    page-break-after: avoid;
    margin-bottom: 12px;
  }
}