/* ================================================
   PREP WORKSPACE — GLOBAL RESPONSIVE STYLESHEET
   Covers all app pages. Link in every HTML page.
   ================================================ */

/* ================================================
   1. SHARED / UNIVERSAL
   ================================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

*, *::before, *::after {
  -webkit-tap-highlight-color: rgba(90, 24, 154, 0.1);
}

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Scrollable containers get smooth touch scrolling */
[style*="overflow-x: auto"],
[style*="overflow-x:auto"],
.overflow-scroll,
.table-wrapper,
.comparison-table-wrapper {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ================================================
   2. UNIVERSAL NAV (bottom nav used across all pages)
   ================================================ */
@media (max-width: 768px) {
  .universal-nav,
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: 60px;
  }

  /* Prevent page content from sitting behind the nav */
  body {
    padding-bottom: 68px;
  }
}

/* ================================================
   3. DASHBOARD
   ================================================ */
@media (max-width: 768px) {
  /* Fix nowrap header */
  .header-top {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Shrink logo text */
  .logo {
    font-size: 1.4rem;
  }

  /* Profile pill: stacks nicely */
  .profile {
    padding: 5px 12px;
    gap: 8px;
  }

  .greeting {
    white-space: normal;
    font-size: 0.78rem;
  }

  /* Main container */
  .container {
    width: calc(100% - 16px);
    margin: 10px auto 80px;
    padding: 18px 14px;
    border-radius: 16px;
  }

  /* Splash screen */
  .splash-content {
    padding: 32px 24px;
  }

  .splash-title {
    font-size: 2.4rem;
    letter-spacing: -1px;
    gap: 8px;
  }

  .splash-subtitle {
    font-size: 1.2rem;
  }
}

/* -----------------------------------------------
   FEATURE GRID — circular icon style on mobile
   Override dashboard.css 680px/520px 1-col rules
----------------------------------------------- */
@media (max-width: 680px) {
  /* Force 4-per-row grid — !important beats dashboard.css */
  .feature-list {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
  }

  /* Each box becomes a compact icon tile */
  .feature-box {
    min-height: unset !important;
    height: auto;
    padding: 12px 6px 10px !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  /* Icon: round background circle */
  .feature-box .feature-icon {
    font-size: 1.35rem !important;
    margin-bottom: 0 !important;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(90, 24, 154, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease;
  }

  .feature-box:hover .feature-icon,
  .feature-box:active .feature-icon {
    background: rgba(90, 24, 154, 0.2);
  }

  body.dark .feature-box .feature-icon {
    background: rgba(255, 195, 0, 0.12);
  }

  /* Label: small, tight, centered */
  .feature-box .feature-name {
    font-size: 0.65rem !important;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
    hyphens: auto;
    color: var(--color-text);
  }

  /* Hide help tooltip button — too small to tap */
  .feature-box .feature-help-btn {
    display: none;
  }

  /* Coming soon badge: hide on small */
  .feature-box .coming-soon-badge {
    display: none;
  }
}

@media (max-width: 420px) {
  /* 3-per-row on very small screens */
  .feature-list {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .feature-box .feature-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem !important;
  }

  .feature-box .feature-name {
    font-size: 0.6rem !important;
  }
}

/* -----------------------------------------------
   PROJECTS — make cards visible and clean
----------------------------------------------- */
@media (max-width: 768px) {
  /* Ensure project list shows as single column */
  .project-list {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .project-box {
    min-height: unset !important;
    padding: 14px !important;
  }

  /* Project card header: title + date side by side */
  .project-card-header {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 6px;
  }

  .project-card-header h4 {
    font-size: 0.95rem;
    flex: 1;
  }

  .project-card-header .project-date {
    font-size: 0.7rem;
    padding: 4px 8px;
    flex-shrink: 0;
  }

  /* Meta badges: compact */
  .project-meta-badges {
    gap: 4px;
    margin-top: 4px;
  }

  .meta-badge {
    font-size: 0.68rem;
    padding: 3px 7px;
  }

  .project-meta-summary {
    font-size: 0.75rem;
    -webkit-line-clamp: 2;
  }

  /* Project card footer */
  .project-card-footer {
    font-size: 0.78rem;
    margin-top: 8px;
    padding-top: 8px;
  }

  /* No-projects message */
  .no-projects-message {
    padding: 20px 16px;
  }

  .no-projects-icon {
    font-size: 2.5rem;
  }

  .no-projects-message h2 {
    font-size: 1.25rem;
  }
}


/* ================================================
   4. AUTH (login.html / signup.html)
   ================================================ */
@media (max-width: 768px) {
  /* Two-column auth layout collapses */
  .auth-layout,
  .auth-split {
    flex-direction: column;
  }

  /* Hide decorative visual panel on mobile */
  .auth-visual-panel,
  .auth-visual,
  aside.auth-visual-panel {
    display: none;
  }

  /* Full-width form side */
  .auth-form-side,
  .auth-form-container {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  /* Auth card padding */
  .container {
    padding: 28px 18px;
    border-radius: 16px;
  }

  .logo {
    font-size: 2rem;
    margin-bottom: 18px;
  }

  /* Stack button row */
  .button-row {
    grid-template-columns: 1fr;
  }

  /* Phone input */
  .phone-group {
    grid-template-columns: 0.9fr 1.1fr;
  }

  /* Input row in team section */
  .input-row {
    grid-template-columns: 1fr;
  }

  /* Compact inputs */
  input, select {
    padding: 12px 14px;
    font-size: 0.9rem;
  }

  /* Compact buttons */
  .btn--primary,
  .btn--secondary {
    padding: 12px 16px;
    font-size: 0.88rem;
  }
}

/* ================================================
   5. PROFILE PAGE
   ================================================ */
@media (max-width: 768px) {
  .page-header {
    padding: 10px 16px;
    border-radius: 16px;
  }

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

  .profile-container {
    padding: 20px 16px;
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  body {
    padding: 12px;
  }

  .profile-container {
    padding: 18px 14px;
  }

  .profile-fieldset {
    padding: 14px;
  }

  .profile-fieldset legend {
    font-size: 0.95rem;
  }

  label {
    font-size: 0.82rem;
    margin-top: 12px;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    padding: 10px 12px;
    font-size: 0.9rem;
  }

  /* Photo upload buttons */
  .photo-actions {
    flex-direction: column;
  }

  .photo-action-btn,
  .choose-media-btn {
    width: 100%;
  }

  #saveProfileBtn {
    padding: 12px;
    font-size: 1rem;
  }
}

/* ================================================
   6. SCREENPLAY EDITOR
   ================================================ */
@media (max-width: 900px) {
  /* Scene navigator: hide by default, toggle via JS */
  .scene-navigator {
    position: fixed;
    top: 0;
    left: -260px;
    height: 100%;
    width: 240px;
    z-index: 500;
    transition: left 0.3s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    overflow-y: auto;
  }

  .scene-navigator.open {
    left: 0;
  }

  /* Nav toggle button — show on mobile */
  .scene-nav-toggle {
    display: flex !important;
  }
}

@media (max-width: 600px) {
  /* Screenplay paper: remove inch-based margins */
  .screenplay-paper,
  .script-paper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    font-size: 13px;
  }

  /* Script element indentations */
  .character, .character-name {
    margin-left: 25% !important;
  }

  .dialogue, .dialog {
    margin-left: 15% !important;
    margin-right: 10% !important;
  }

  .parenthetical {
    margin-left: 20% !important;
    margin-right: 20% !important;
  }

  /* Toolbar: scrollable row */
  .screenplay-toolbar,
  .script-toolbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 4px;
  }

  /* Find/replace panel */
  .find-replace-panel {
    right: 8px !important;
    left: 8px !important;
    top: 70px !important;
    width: auto !important;
  }
}

/* ================================================
   7. SCRIPT BREAKDOWN
   ================================================ */
@media (max-width: 768px) {
  /* Header: allow wrap */
  .breakdown-header,
  .page-controls,
  .controls-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Remove fixed min-widths that cause overflow */
  .disclaimer-message {
    min-width: 0 !important;
    width: 100%;
  }

  .breakdown-btn {
    min-width: 0 !important;
    padding: 8px 14px;
    font-size: 0.82rem;
  }

  /* Export dropdown stays within screen */
  .export-dropdown {
    right: 0;
    left: auto;
    min-width: 160px;
  }
}

@media (max-width: 480px) {
  /* Scene cards: full width */
  .breakdown-grid,
  .scenes-grid {
    grid-template-columns: 1fr;
  }

  /* Category tags: wrap tightly */
  .category-tags,
  .element-tags {
    gap: 4px;
  }

  .tag, .element-tag {
    font-size: 0.7rem;
    padding: 3px 8px;
  }

  /* Table view: horizontal scroll */
  .breakdown-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ================================================
   8. SCHEDULE / STRIP BOARD
   ================================================ */
@media (max-width: 768px) {
  /* Production overview grid: single column */
  .production-overview,
  .overview-grid {
    grid-template-columns: 1fr !important;
  }

  /* Stats bar: 2 columns */
  .stats-bar,
  .schedule-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  /* CRITICAL: wrap timeline in a scroll container */
  .timeline-container,
  .timeline-wrap,
  .strip-board-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Set minimum width so timeline stays usable while scrolling */
  .timeline-inner,
  .timeline-grid,
  .strip-board-inner {
    min-width: 600px;
  }

  /* Schedule view controls */
  .view-controls,
  .schedule-controls {
    flex-wrap: wrap;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  /* Stats bar: all 4 in 2x2 */
  .stats-bar,
  .schedule-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Scene info compact */
  .scene-card,
  .schedule-scene-card {
    padding: 10px 12px;
    font-size: 0.82rem;
  }

  .scene-card-header {
    font-size: 0.85rem;
  }
}

/* ================================================
   9. BUDGET PLANNER
   ================================================ */
@media (max-width: 640px) {
  /* Project title: let it grow */
  #projectTitle {
    max-width: 100% !important;
    width: 100%;
    font-size: 0.9rem;
  }

  /* Overview cards: single column */
  .budget-overview,
  .budget-stats {
    grid-template-columns: 1fr;
  }

  /* Category tabs: scrollable */
  .budget-tabs,
  .category-tabs-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 6px;
  }

  /* Budget table: scroll horizontally */
  .budget-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Form rows: stack */
  .form-row,
  .budget-form-row {
    flex-direction: column;
    gap: 8px;
  }

  .form-row input,
  .form-row select {
    width: 100%;
  }
}

@media (max-width: 480px) {
  /* FAB button: slightly higher above bottom nav */
  .fab-btn,
  .add-item-fab {
    bottom: 80px !important;
    right: 16px;
  }
}

/* ================================================
   10. CALL SHEET
   ================================================ */
@media (max-width: 768px) {
  .call-sheet-header,
  .call-sheet-meta {
    flex-direction: column;
    gap: 12px;
  }

  .call-sheet-grid,
  .call-time-grid {
    grid-template-columns: 1fr;
  }

  .department-section {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .cast-row,
  .crew-row {
    flex-wrap: wrap;
    gap: 4px;
  }

  .call-time-badge {
    font-size: 0.72rem;
    padding: 3px 8px;
  }

  /* Print/export button: full width */
  .call-sheet-actions {
    flex-direction: column;
    gap: 8px;
  }

  .call-sheet-actions button,
  .call-sheet-actions a {
    width: 100%;
  }
}

/* ================================================
   11. SHOT DESIGNER / SHOT LIST
   ================================================ */
@media (max-width: 768px) {
  .shot-list-grid,
  .shots-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .shot-card {
    padding: 12px;
  }

  .shot-card-image {
    height: 120px;
  }
}

@media (max-width: 480px) {
  .shot-list-grid,
  .shots-grid {
    grid-template-columns: 1fr;
  }

  .shot-card-image {
    height: 160px;
  }
}

/* ================================================
   12. STORYBOARD
   ================================================ */
@media (max-width: 768px) {
  .storyboard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .storyboard-frame {
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  .storyboard-grid {
    grid-template-columns: 1fr;
  }

  .storyboard-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}

/* ================================================
   13. CAST & CREW MANAGER
   ================================================ */
@media (max-width: 768px) {
  .crew-grid,
  .cast-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .crew-card,
  .cast-card {
    padding: 14px;
  }

  .crew-filters,
  .cast-filters {
    flex-wrap: wrap;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .crew-grid,
  .cast-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================
   14. LOCATIONS
   ================================================ */
@media (max-width: 768px) {
  .locations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .locations-grid {
    grid-template-columns: 1fr;
  }

  .location-card-image {
    height: 150px;
  }
}

/* ================================================
   15. MODALS (all pages)
   ================================================ */
@media (max-width: 768px) {
  .modal-overlay,
  .modal {
    padding: 12px;
    align-items: flex-end; /* sheet slides from bottom */
  }

  .modal-box,
  .modal-content {
    width: 100%;
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    max-height: 90vh;
    overflow-y: auto;
  }
}

@media (max-width: 480px) {
  .modal-header {
    padding: 14px 16px;
  }

  .modal-header h2 {
    font-size: 1rem;
  }

  /* Shortcut list in modal */
  .shortcut-list {
    padding: 12px 14px 20px;
  }

  .shortcut-key {
    min-width: 80px;
    font-size: 0.78rem;
    padding: 5px 8px;
  }

  .shortcut-desc {
    font-size: 0.85rem;
  }
}

/* ================================================
   16. BLOG
   ================================================ */
@media (max-width: 640px) {
  .articles-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .featured-article {
    flex-direction: column;
  }

  .featured-image {
    height: 200px !important;
    width: 100% !important;
  }

  .newsletter-form {
    flex-direction: column;
    gap: 8px;
  }

  .newsletter-form input,
  .newsletter-form button {
    width: 100%;
    min-width: 0 !important;
  }
}

/* ================================================
   17. PRICING PAGE
   ================================================ */
@media (max-width: 640px) {
  .plan-cards,
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .plan-card {
    min-height: unset !important;
  }

  .pricing-comparison-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ================================================
   18. SETTINGS PAGE
   ================================================ */
@media (max-width: 768px) {
  .settings-layout,
  .settings-grid {
    flex-direction: column;
    gap: 0;
  }

  /* Settings sidebar becomes horizontal tabs */
  .settings-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    gap: 0;
    flex-direction: row;
  }

  .settings-nav-item {
    white-space: nowrap;
    padding: 12px 16px;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    flex-shrink: 0;
  }

  .settings-nav-item.active {
    border-bottom-color: var(--color-primary, #5a189a);
    border-left: none;
  }

  .settings-content {
    padding: 20px 16px;
  }
}

/* ================================================
   19. PROJECT FOLDER / PROJECT DETAILS
   ================================================ */
@media (max-width: 768px) {
  .project-details-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .project-details-header h1,
  .project-title {
    font-size: 1.3rem;
  }

  .project-tools-grid,
  .tools-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .project-meta-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .project-tabs,
  .folder-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 4px;
  }

  .project-tab,
  .folder-tab {
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 0.8rem;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .project-tools-grid,
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-action-btns {
    flex-direction: column;
    gap: 8px;
  }

  .project-action-btns button,
  .project-action-btns a {
    width: 100%;
  }
}

/* ================================================
   20. MOODBOARD
   ================================================ */
@media (max-width: 768px) {
  .moodboard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .moodboard-toolbar {
    flex-wrap: wrap;
    gap: 6px;
  }

  .moodboard-toolbar button {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .moodboard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

/* ================================================
   21. MEDIA LIBRARY
   ================================================ */
@media (max-width: 768px) {
  .media-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .media-filters {
    flex-wrap: wrap;
    gap: 6px;
  }

  .media-upload-zone {
    padding: 20px 16px;
    min-height: 100px;
  }

  .media-upload-zone p {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .media-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================
   22. TEAM TASKS / COLLABORATION
   ================================================ */
@media (max-width: 768px) {
  .kanban-board,
  .tasks-board {
    flex-direction: column;
    gap: 16px;
    overflow-x: unset;
  }

  .kanban-column,
  .task-column {
    width: 100% !important;
    min-width: unset !important;
  }

  .task-card {
    padding: 12px;
  }
}

/* ================================================
   23. AI SCRIPT / AV SCRIPT
   ================================================ */
@media (max-width: 768px) {
  .ai-layout,
  .av-layout,
  .script-layout {
    flex-direction: column;
  }

  .ai-sidebar,
  .av-sidebar {
    width: 100% !important;
    max-height: 200px;
    overflow-y: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
  }

  .ai-toolbar,
  .av-toolbar,
  .script-toolbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 4px;
    padding-bottom: 4px;
  }

  .ai-toolbar button,
  .av-toolbar button {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 7px 10px;
    font-size: 0.78rem;
  }
}

@media (max-width: 480px) {
  .ai-content-area,
  .av-content-area {
    padding: 12px;
    font-size: 0.9rem;
  }
}

/* ================================================
   24. SCENE REPORT / SCRIPT REPORT
   ================================================ */
@media (max-width: 768px) {
  .report-header {
    flex-direction: column;
    gap: 10px;
  }

  .report-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .report-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .report-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .report-actions button {
    flex: 1 1 auto;
    min-width: 120px;
  }
}

@media (max-width: 480px) {
  .report-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================
   25. NOTIFICATIONS
   ================================================ */
@media (max-width: 768px) {
  .notifications-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 360px;
    height: 100%;
    z-index: 1000;
    transition: right 0.3s ease;
    overflow-y: auto;
  }

  .notifications-panel.open {
    right: 0;
  }

  .notification-item {
    padding: 12px 14px;
    gap: 10px;
  }

  .notification-text {
    font-size: 0.85rem;
  }
}

/* ================================================
   26. ABOUT / STATIC PAGES (about, terms, privacy, cookies)
   ================================================ */
@media (max-width: 768px) {
  .content-container,
  .static-container {
    padding: 20px 16px;
  }

  .about-hero {
    flex-direction: column;
    text-align: center;
  }

  .about-hero img {
    width: 120px;
    margin: 0 auto;
  }

  .feature-grid,
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .feature-grid,
  .why-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================
   27. GUIDE PAGE
   ================================================ */
@media (max-width: 768px) {
  .guide-layout {
    flex-direction: column;
  }

  .guide-sidebar {
    width: 100%;
    position: static;
    max-height: 220px;
    overflow-y: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
    padding: 12px;
  }

  .guide-content {
    padding: 20px 16px;
  }

  .guide-section h2 {
    font-size: 1.3rem;
  }
}

/* ================================================
   28. FEATURES PAGE
   ================================================ */
@media (max-width: 520px) {
  .feature-map-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .feature-callout {
    grid-template-columns: 1fr !important;
  }

  .feature-callout-image {
    order: -1;
    height: 180px;
    object-fit: cover;
  }

  .feature-hero h1 {
    font-size: 1.8rem;
  }

  .feature-hero p {
    font-size: 0.9rem;
  }
}

/* ================================================
   29. CONTACTS PAGE
   ================================================ */
@media (max-width: 768px) {
  .contacts-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .contact-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ================================================
   30. SHARED PAGE HEADERS (used on most inner pages)
   ================================================ */
@media (max-width: 768px) {
  .page-header-bar,
  .app-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
  }

  .page-title,
  .app-header h1 {
    font-size: 1.1rem;
  }

  .header-actions:not(.script-breakdown-header .header-actions) {
    flex-wrap: wrap;
    gap: 6px;
  }

  .header-actions:not(.script-breakdown-header .header-actions) button,
  .header-actions:not(.script-breakdown-header .header-actions) a {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  /* Icon-only mode for small screens */
  .header-actions:not(.script-breakdown-header .header-actions) .btn-label {
    display: none;
  }

  .header-actions:not(.script-breakdown-header .header-actions) button i {
    margin: 0;
  }

  .script-breakdown-header .header-actions {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 5px !important;
  }

  .script-breakdown-header .header-actions::-webkit-scrollbar {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .header-actions .btn-label {
    display: none;
  }
}

/* ================================================
   31. FORM ELEMENTS (shared across all pages)
   ================================================ */
@media (max-width: 640px) {
  /* All form rows default to stacked */
  .form-row,
  .input-group-row,
  .field-row {
    flex-direction: column;
    gap: 10px;
  }

  .form-row > *,
  .input-group-row > *,
  .field-row > * {
    width: 100%;
  }

  /* Modals with forms */
  .modal-form .form-row {
    flex-direction: column;
  }
}

/* ================================================
   32. TABLES (all pages with data tables)
   ================================================ */
@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }

  table {
    min-width: 500px;
  }

  th, td {
    padding: 10px 12px;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  th:first-child,
  td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-card-background, #fff);
  }
}

/* ================================================
   33. TOASTS & ALERTS (shared)
   ================================================ */
@media (max-width: 640px) {
  .toast-message,
  .alert-toast {
    left: 16px !important;
    right: 16px !important;
    bottom: 80px !important;
    transform: none !important;
    width: auto !important;
    text-align: center;
    font-size: 0.88rem;
  }

  /* Alert banners */
  .alert-banner {
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    font-size: 0.85rem;
  }

  .alert-banner .alert-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .alert-banner .alert-actions button {
    flex: 1;
  }
}

/* ================================================
   34. LANDSCAPE PHONE ADJUSTMENTS
   ================================================ */
@media (max-width: 900px) and (orientation: landscape) {
  /* Reduce vertical padding so content fits */
  .hero-section,
  .page-hero {
    padding-top: 50px !important;
    padding-bottom: 30px !important;
  }

  .splash-content {
    padding: 20px 32px;
  }

  .splash-title {
    font-size: 2rem;
  }

  /* Bottom nav hides in landscape to reclaim space */
  .universal-nav,
  .bottom-nav {
    display: none;
  }

  body {
    padding-bottom: 0;
  }

  /* Modals open center (not bottom sheet) in landscape */
  .modal-overlay,
  .modal {
    align-items: center;
  }

  .modal-box,
  .modal-content {
    border-radius: 20px;
    max-height: 85vh;
    max-width: 560px;
  }
}

/* ================================================
   35. REDUCED MOTION
   ================================================ */
@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;
  }
}

/* ================================================
   36. HIGH CONTRAST / ACCESSIBILITY
   ================================================ */
@media (forced-colors: active) {
  .feature-box,
  .project-box,
  .plan-card,
  .modal-box {
    border: 2px solid ButtonText;
  }
}

/* ================================================
   37. UTILITY HELPERS (use in HTML via class)
   ================================================ */

/* Hide on mobile */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

/* Hide on desktop */
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* Show only on mobile */
.show-mobile { display: none; }
@media (max-width: 768px) {
  .show-mobile { display: block; }
}

/* Scrollable row */
.scroll-row {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 10px;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.scroll-row::-webkit-scrollbar { display: none; }

/* Stack on mobile */
@media (max-width: 640px) {
  .stack-mobile {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .stack-mobile > * {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Full width on mobile */
@media (max-width: 640px) {
  .full-mobile {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Scrollable table wrapper — add class to any table's parent */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}