/* ============================================
   MOBILE-FIRST RESPONSIVE DESIGN
   Modern Mobile UI Standards 2025
   
   Guidelines Applied (Updated Nov 2025):
   - Touch targets: minimum 44x44px (WCAG 2.2), 48px recommended
   - Body text: minimum 16px on mobile
   - Spacing: 8-12px between related elements, 16-24px between groups
   - Mobile-first breakpoints
   - Primary navigation: 3-5 items max in tab bar
   ============================================ */

/* ============================================
   CSS VARIABLES FOR MOBILE
   ============================================ */
:root {
  /* Touch target sizes - 2025 standards */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
  --touch-target-large: 56px;
  
  /* Spacing - 2025 best practices */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* Font sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  
  /* Border radius - 2025 trend toward more rounded */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

/* ============================================
   GLOBAL MOBILE OPTIMIZATIONS
   ============================================ */

/* Prevent zoom on input focus on iOS */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Smooth scrolling with momentum on iOS */
.overflow-y-auto,
.overflow-auto {
  -webkit-overflow-scrolling: touch;
}

/* Disable text selection during touch interactions */
.touch-manipulation {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================
   DASHBOARD PAGES (My Backups, My Proposals)
   Card-based layout for mobile - 2025 Standard
   ============================================ */
@media (max-width: 767px) {
  /* Dashboard header - stack on mobile */
  .p-4.sm\\:p-6 > .flex.flex-col.sm\\:flex-row {
    gap: 16px;
  }
  
  /* Page title area */
  .p-4.sm\\:p-6 > .flex h1 {
    font-size: 24px;
    line-height: 1.2;
  }
  
  .p-4.sm\\:p-6 > .flex p {
    font-size: 14px;
    margin-top: 4px;
  }
  
  /* Search input - full width on mobile */
  .p-4.sm\\:p-6 input[type="search"] {
    width: 100%;
    min-height: 48px;
    border-radius: var(--radius-md);
  }
  
  /* New Backup / New Proposal button - full width on mobile */
  .p-4.sm\\:p-6 > .flex a.bg-blue-600,
  .p-4.sm\\:p-6 > .flex button.bg-blue-600 {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
  }
  
  /* Dashboard action row - stack search and button */
  .p-4.sm\\:p-6 > .flex > .flex.items-center.gap-3 {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
}

/* ============================================
   DASHBOARD TABLE → CARD CONVERSION (Mobile)
   Convert tables to stacked cards on mobile
   ============================================ */
@media (max-width: 767px) {
  /* Dashboard list container */
  #estimates-container,
  #proposals-list-container,
  #users-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  /* Table wrapper - remove horizontal scroll on mobile */
  #estimates-container > .bg-white,
  #proposals-list-container > .bg-white,
  .rounded-lg.shadow-sm.overflow-hidden {
    overflow: visible !important;
    border-radius: var(--radius-lg);
  }
  
  /* Hide table headers on mobile */
  #estimates-container table thead,
  #proposals-list-container table thead,
  .dashboard-table thead {
    display: none;
  }
  
  /* Convert table rows to cards */
  #estimates-container table tbody,
  #proposals-list-container table tbody,
  .dashboard-table tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  #estimates-container table tbody tr,
  #proposals-list-container table tbody tr,
  .dashboard-table tbody tr {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
  }
  
  /* Table cells as card rows */
  #estimates-container table tbody td,
  #proposals-list-container table tbody td,
  .dashboard-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border: none;
    font-size: 14px;
    width: 100% !important;
  }
  
  /* First cell (title/name) - make it prominent */
  #estimates-container table tbody td:first-child,
  #proposals-list-container table tbody td:first-child {
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
  }
  
  /* Add labels to cells */
  #estimates-container table tbody td::before,
  #proposals-list-container table tbody td::before {
    content: attr(data-label);
    font-weight: 500;
    color: #6b7280;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  /* First cell shouldn't have label */
  #estimates-container table tbody td:first-child::before,
  #proposals-list-container table tbody td:first-child::before {
    content: none;
  }
  
  /* Status badges - keep inline */
  .dashboard-table .status-badge,
  table tbody td span[class*="rounded-full"] {
    display: inline-flex;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
  }
  
  /* Action buttons cell */
  #estimates-container table tbody td:last-child,
  #proposals-list-container table tbody td:last-child {
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px solid #f3f4f6;
  }
  
  #estimates-container table tbody td:last-child::before,
  #proposals-list-container table tbody td:last-child::before {
    content: none;
  }
  
  /* Action buttons - full width */
  #estimates-container table tbody td:last-child > *,
  #proposals-list-container table tbody td:last-child > * {
    width: 100%;
  }
  
  #estimates-container table tbody td button,
  #proposals-list-container table tbody td button,
  #estimates-container table tbody td a,
  #proposals-list-container table tbody td a {
    min-height: 44px;
    width: 100%;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
  }
}

/* ============================================
   BUTTON TEXT OVERFLOW PREVENTION (ALL SCREENS)
   ============================================ */

/* Base button styles - prevent overflow */
button,
.btn,
[role="button"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure button content doesn't wrap */
button > span,
.btn > span,
[role="button"] > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}

/* Action buttons specifically */
#btn-export-pdf,
#btn-print,
#btn-fullscreen,
#btn-submit-estimate-approval,
#btn-proposal-pdf,
#btn-proposal-print,
#btn-proposal-fullscreen,
#btn-submit-for-approval,
button[id^="btn-"] {
  white-space: nowrap !important;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive action button sizing */
@media (min-width: 768px) and (max-width: 1279px) {
  #btn-submit-estimate-approval,
  #btn-submit-for-approval {
    padding: 0 12px !important;
    font-size: 13px !important;
  }
  
  #btn-export-pdf,
  #btn-print,
  #btn-proposal-pdf,
  #btn-proposal-print {
    padding: 0 10px !important;
    font-size: 13px !important;
  }
}

/* Hide button text on constrained width, keep icon */
@media (min-width: 768px) and (max-width: 1023px) {
  #btn-export-pdf span,
  #btn-print span,
  #btn-proposal-pdf span,
  #btn-proposal-print span {
    display: none;
  }
  
  #btn-export-pdf,
  #btn-print,
  #btn-proposal-pdf,
  #btn-proposal-print {
    padding: 0 12px !important;
    min-width: 44px;
  }
}

/* Tablet/small laptop - compact Submit for Approval */
@media (min-width: 768px) and (max-width: 1279px) {
  /* Use abbreviated text via CSS */
  #btn-submit-estimate-approval span,
  #btn-submit-for-approval span {
    font-size: 0;
  }
  
  #btn-submit-estimate-approval span::after,
  #btn-submit-for-approval span::after {
    content: "Submit";
    font-size: 13px;
  }
}

/* Large screens - full text */
@media (min-width: 1280px) {
  #btn-submit-estimate-approval span::after,
  #btn-submit-for-approval span::after {
    content: none;
  }
  
  #btn-submit-estimate-approval span,
  #btn-submit-for-approval span {
    font-size: inherit;
  }
}

/* ============================================
   BUILDER ACTION BAR (Estimator + Proposal)
   Top action bar with back, status, tabs, buttons
   ============================================ */
@media (max-width: 767px) {
  /* Builder container - full height layout */
  .estimator-builder-container,
  .proposal-builder-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
  }
  
  /* Action bar wrapper */
  .estimator-builder-container > .bg-white.border-b,
  .proposal-builder-container > .bg-white.border-b {
    flex-shrink: 0;
  }
  
  /* Row 1: Back + Status + Panel Toggle */
  .estimator-builder-container > .bg-white.border-b > div:first-child,
  .proposal-builder-container > .bg-white.border-b > div:first-child {
    padding: 12px 16px;
  }
  
  /* Back button - larger touch target */
  .estimator-builder-container a[aria-label*="Back"],
  .proposal-builder-container a[aria-label*="Back"] {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
  }
  
  /* Hide "Back" text on mobile - keep icon only */
  .estimator-builder-container a[aria-label*="Back"] span,
  .proposal-builder-container a[aria-label*="Back"] span {
    display: none !important;
  }
  
  /* Status badge */
  #estimate-status-badge,
  #proposal-status-badge {
    font-size: 11px;
    padding: 4px 10px;
  }
  
  /* Save status - hide on very small screens */
  #save-status,
  #proposal-save-status {
    display: none !important;
  }
  
  /* Row 2: Action buttons - scrollable */
  .estimator-builder-container > .bg-white.border-b > div:last-child,
  .proposal-builder-container > .bg-white.border-b > div:last-child {
    padding: 8px 16px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .estimator-builder-container > .bg-white.border-b > div:last-child::-webkit-scrollbar,
  .proposal-builder-container > .bg-white.border-b > div:last-child::-webkit-scrollbar {
    display: none;
  }
  
  /* Action buttons row */
  .estimator-builder-container > .bg-white.border-b > div:last-child > div,
  .proposal-builder-container > .bg-white.border-b > div:last-child > div {
    display: flex;
    gap: 8px;
    min-width: max-content;
  }
  
  /* All action buttons - FIXED HEIGHT for alignment */
  #btn-export-pdf,
  #btn-print,
  #btn-proposal-pdf,
  #btn-proposal-print {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    line-height: 1 !important;
  }
  
  /* PDF button - primary action */
  #btn-export-pdf,
  #btn-proposal-pdf {
    background: #2563eb !important;
    color: white !important;
    border: none !important;
  }
  
  /* Print button - same height as PDF */
  #btn-print,
  #btn-proposal-print {
    background: white !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
  }
  
  /* Fullscreen button - hidden on mobile */
  #btn-fullscreen,
  #btn-proposal-fullscreen {
    display: none !important;
  }
  
  /* Action buttons row container */
  .px-4.py-2.overflow-x-auto .flex.items-center.gap-2 {
    align-items: stretch !important;
  }
}

/* ============================================
   PANEL TOGGLE (Form/Preview, Builder/Preview)
   Pill-style tab switcher - 2025 Design
   CRITICAL: Both buttons MUST be vertically aligned
   ============================================ */

/* Panel toggle container - pill background */
.panel-toggle-container {
  display: inline-flex !important;
  align-items: stretch !important; /* Stretch ensures equal height */
  background: #f3f4f6;
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  flex-shrink: 0 !important; /* Prevent shrinking */
  margin-left: auto !important; /* Push to right side */
  position: relative !important; /* Prevent position shifting */
}

/* Panel tab buttons - IDENTICAL sizing for both states */
.panel-tab {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  color: #6b7280;
  background: transparent;
  border: none !important;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex-shrink: 0;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

/* Active panel tab - ONLY change background/color, NO size changes */
.panel-tab.active {
  background: white !important;
  color: #111827 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  /* Explicitly keep same size */
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 20px !important;
  margin: 0 !important;
}

/* Hover state for non-touch devices */
@media (hover: hover) {
  .panel-tab:not(.active):hover {
    background: rgba(255, 255, 255, 0.5);
    color: #374151;
  }
}

/* Active press state - subtle scale, no position change */
.panel-tab:active {
  transform: scale(0.98);
}

/* Tab icons - fixed size */
.panel-tab svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
}

/* Tab text - hide on very small screens */
@media (max-width: 400px) {
  .panel-tab span {
    display: none;
  }
  
  .panel-tab,
  .panel-tab.active {
    padding: 0 14px !important;
    min-width: 48px;
  }
}

/* ============================================
   BOTTOM ACTION BUTTONS (Reset All, Rename, etc.)
   Estimator Summary section buttons
   ============================================ */
@media (max-width: 1023px) {
  /* Action buttons container - stack on mobile */
  .flex.items-center.justify-between.gap-3 {
    flex-wrap: wrap;
    gap: 12px !important;
  }
  
  /* Left and right button groups */
  .flex.items-center.justify-between.gap-3 > .flex.items-center.gap-2 {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  
  /* All bottom action buttons - consistent sizing */
  .flex.items-center.justify-between.gap-3 button,
  .flex.items-center.justify-between.gap-3 a {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap;
    box-sizing: border-box !important;
    text-decoration: none !important;
  }
  
  /* Reset All button */
  .flex.items-center.justify-between.gap-3 button[data-action="reset"] {
    background: white !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
  }
  
  /* Rename button */
  .flex.items-center.justify-between.gap-3 button[data-action="rename"] {
    background: white !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
  }
  
  /* Create Proposal button (purple) */
  .flex.items-center.justify-between.gap-3 a[href*="proposal-builder"] {
    background: #9333ea !important;
    border: none !important;
    color: white !important;
  }
  
  /* Print Summary button (blue) */
  .flex.items-center.justify-between.gap-3 button[data-action="print"] {
    background: #2563eb !important;
    border: none !important;
    color: white !important;
  }
}

/* Small mobile - stack buttons vertically */
@media (max-width: 500px) {
  .flex.items-center.justify-between.gap-3 {
    flex-direction: column;
    align-items: stretch !important;
  }
  
  .flex.items-center.justify-between.gap-3 > .flex.items-center.gap-2 {
    width: 100%;
    justify-content: center;
  }
  
  .flex.items-center.justify-between.gap-3 button,
  .flex.items-center.justify-between.gap-3 a {
    flex: 1;
    min-width: 0;
  }
}

/* ============================================
   BUILDER SPLIT PANELS - MOBILE
   ============================================ */
@media (max-width: 1023px) {
  /* Split panels container */
  .builder-split-panels {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  
  /* Panel content - full width, toggle visibility */
  .builder-panel,
  #panel-form,
  #panel-preview,
  #proposal-panel-builder,
  #proposal-panel-preview {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-right: none !important;
  }
  
  /* Panel content visibility - override Tailwind hidden class */
  .panel-content {
    display: none !important;
  }
  
  .panel-content.active,
  .panel-content.flex {
    display: flex !important;
    flex-direction: column;
  }
  
  /* Explicit hidden override */
  .panel-content.hidden {
    display: none !important;
  }
  
  /* Form panel content */
  #panel-form > div,
  #proposal-panel-builder > div {
    padding: 16px;
    width: 100%;
    max-width: 100%;
  }
  
  /* Preview panel content */
  #panel-preview,
  #proposal-panel-preview {
    background: #f9fafb;
  }
  
  /* Preview document container - updated for professional document preview */
  #live-preview-content,
  #proposal-preview-content {
    width: 100%;
    max-width: 100%;
  }
  
  /* Professional document preview container takes its own styling */
  #live-preview-content .document-preview-container,
  #proposal-preview-content .document-preview-container {
    width: 100%;
    background: #ffffff;
    padding: 8px;
  }
  
  #live-preview-content .document-page,
  #proposal-preview-content .document-page {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
    padding: 16px;
    font-size: 10pt;
  }
  
  /* Legacy styles for non-document-preview content */
  #live-preview-content > .bg-white:not(.document-preview-container),
  #proposal-preview-content > .bg-white:not(.document-preview-container) {
    padding: 20px;
    font-size: 14px;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
}

/* ============================================
   FORM INPUTS - MOBILE OPTIMIZED (2025)
   ============================================ */
@media (max-width: 767px) {
  /* All form inputs - larger touch area */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  select,
  textarea {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 16px;
    border-radius: var(--radius-sm);
    border: 1px solid #d1d5db;
    background: white;
    width: 100%;
  }
  
  /* Date inputs need extra height on iOS */
  input[type="date"] {
    min-height: 52px;
  }
  
  /* Focus states */
  input:focus,
  select:focus,
  textarea:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  }
  
  /* Labels */
  label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
    display: block;
  }
  
  /* Form groups - more spacing on mobile */
  .space-y-3 > * + * {
    margin-top: 16px;
  }
  
  .space-y-4 > * + * {
    margin-top: 20px;
  }
  
  /* Grid forms - stack on mobile */
  .grid.grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  /* Select dropdowns - ensure they look native on mobile */
  select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 20px;
    padding-right: 40px;
  }
}

/* ============================================
   BUTTONS - MOBILE TOUCH TARGETS (2025)
   ============================================ */
@media (max-width: 767px) {
  /* Primary buttons - larger, bolder */
  .bg-blue-600,
  .bg-green-600,
  .bg-emerald-600,
  button[type="submit"] {
    min-height: 48px;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  
  /* Secondary/outline buttons */
  .border-gray-300,
  .bg-white.border {
    min-height: 48px;
    padding: 14px 24px;
    font-size: 16px;
    border-radius: var(--radius-md);
  }
  
  /* Icon buttons */
  button:has(svg):not(:has(span)),
  .icon-button {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
    border-radius: var(--radius-sm);
  }
  
  /* Danger buttons */
  .bg-red-600,
  .text-red-600 {
    min-height: 48px;
  }
  
  /* Button groups - don't stack in action bars */
  .flex.items-center.gap-2:not(.builder-split-panels *) > button,
  .flex.items-center.gap-2:not(.builder-split-panels *) > a {
    flex-shrink: 0;
  }
}

/* ============================================
   CARDS & CONTAINERS - MOBILE (2025)
   ============================================ */
@media (max-width: 767px) {
  /* Card containers */
  .rounded-lg.bg-white.shadow-sm,
  .rounded-lg.bg-white.shadow,
  .bg-white.rounded-lg {
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
  }
  
  /* Card with padding */
  .bg-white.rounded-lg.shadow-sm.p-4 {
    padding: 16px;
  }
  
  /* Card headers */
  .rounded-lg.bg-white h2,
  .rounded-lg.bg-white h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
  }
  
  /* Summary cards */
  .grid.gap-3.sm\\:grid-cols-3,
  .grid.sm\\:grid-cols-3 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  /* Info cards in action bar */
  .bg-blue-50.border.border-blue-200.rounded-lg {
    padding: 12px;
    margin-bottom: 16px;
  }
  
  .bg-blue-50 p {
    font-size: 13px;
    line-height: 1.5;
  }
}

/* ============================================
   ESTIMATOR SECTIONS - MOBILE
   ============================================ */
@media (max-width: 767px) {
  /* Section cards */
  .bg-white.rounded-lg.shadow-sm.p-4 h3 {
    font-size: 15px;
    font-weight: 600;
  }
  
  /* Line items - card layout */
  .line-item-row {
    background: #f9fafb;
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 10px;
  }
  
  /* Line item inputs - row layout */
  .grid.grid-cols-12 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  /* Item label - full width */
  .grid.grid-cols-12 > .col-span-3,
  .grid.grid-cols-12 > .col-span-4 {
    grid-column: 1 / -1;
  }
  
  /* Number inputs - grid on mobile */
  .grid.grid-cols-12 > .col-span-1,
  .grid.grid-cols-12 > .col-span-2 {
    width: 100%;
  }
  
  /* Total display */
  .bg-blue-50.rounded-md {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* ============================================
   ADMIN TABLES - CARD VIEW ON MOBILE
   ============================================ */
@media (max-width: 767px) {
  /* Admin stats cards - 2 column grid */
  #admin-stats.grid.grid-cols-2,
  .grid.grid-cols-2.md\\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  #admin-stats .bg-white.rounded-lg {
    padding: 14px;
  }
  
  #admin-stats .flex.items-center.gap-3 {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  
  #admin-stats .flex.h-10.w-10 {
    width: 36px;
    height: 36px;
  }
  
  #admin-stats p.text-xs {
    font-size: 10px;
  }
  
  #admin-stats p.text-xl {
    font-size: 18px;
  }
  
  /* Admin user table - card conversion */
  #users-container .bg-white.rounded-lg table {
    display: block;
  }
  
  #users-container table thead {
    display: none;
  }
  
  #users-container table tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }
  
  #users-container table tbody tr {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
  }
  
  #users-container table tbody td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border: none;
    font-size: 14px;
    width: 100% !important;
  }
  
  /* First cell (user info) - make it prominent */
  #users-container table tbody td:first-child {
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
  }
  
  #users-container table tbody td:first-child .flex.items-center {
    width: 100%;
  }
  
  /* Show hidden columns on mobile */
  #users-container table tbody td.hidden {
    display: flex !important;
  }
  
  /* Action buttons - row at bottom */
  #users-container table tbody td:last-child {
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid #f3f4f6;
    justify-content: flex-start;
    gap: 8px;
  }
  
  #users-container table tbody td:last-child button {
    min-height: 44px;
    min-width: 44px;
    padding: 10px;
    border-radius: 8px;
  }
  
  /* Legacy admin-table class */
  .admin-table thead {
    display: none;
  }
  
  .admin-table tbody tr {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
  }
  
  .admin-table tbody td {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border: none;
    font-size: 14px;
  }
  
  .admin-table tbody td::before {
    content: attr(data-label);
    font-weight: 500;
    color: #6b7280;
    font-size: 12px;
  }
  
  /* Admin search and filters - stack */
  .grid.grid-cols-1.md\\:grid-cols-3 {
    gap: 12px;
  }
  
  .grid.grid-cols-1.md\\:grid-cols-3 input,
  .grid.grid-cols-1.md\\:grid-cols-3 select {
    min-height: 48px;
    font-size: 16px;
  }
}

/* ============================================
   MODAL - MOBILE OPTIMIZED (2025)
   ============================================ */
@media (max-width: 767px) {
  /* Modal container - full screen on mobile */
  .modal-overlay {
    padding: 0;
    align-items: stretch;
  }
  
  .modal-content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  
  /* Modal header */
  .modal-header {
    padding: 16px 20px;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .modal-title {
    font-size: 18px;
    font-weight: 600;
  }
  
  .modal-close {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    border-radius: var(--radius-sm);
  }
  
  /* Modal body - scrollable */
  .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Modal footer - sticky at bottom */
  .modal-footer {
    padding: 16px 20px;
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .modal-footer button {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    font-weight: 600;
  }
}

/* Tablet modals - centered */
@media (min-width: 768px) and (max-width: 1023px) {
  .modal-content {
    width: 90%;
    max-width: 560px;
    max-height: 85vh;
    border-radius: var(--radius-xl);
    margin: auto;
  }
}

/* ============================================
   APPROVAL PAGES - MOBILE
   ============================================ */
@media (max-width: 767px) {
  /* Approval stats row - 2x2 grid */
  .grid.grid-cols-2.md\\:grid-cols-4 {
    gap: 12px;
  }
  
  .grid.grid-cols-2.md\\:grid-cols-4 > div {
    padding: 14px;
  }
  
  .grid.grid-cols-2.md\\:grid-cols-4 .flex.items-center.gap-3 {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  
  .grid.grid-cols-2.md\\:grid-cols-4 .flex.h-10.w-10 {
    width: 36px;
    height: 36px;
  }
  
  .grid.grid-cols-2.md\\:grid-cols-4 p.text-xs {
    font-size: 10px;
  }
  
  .grid.grid-cols-2.md\\:grid-cols-4 p.text-xl {
    font-size: 18px;
  }
  
  /* Approval tabs - full width on mobile */
  .approval-tab {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
  }
  
  .approval-tab.active {
    background: #2563eb;
    color: white;
  }
  
  .approval-tab:not(.active) {
    background: transparent;
    color: #6b7280;
  }
  
  .approval-tab span {
    font-size: 11px;
    padding: 2px 6px;
  }
  
  /* Approval request cards */
  .approval-card {
    padding: 16px;
    border-radius: var(--radius-lg);
  }
  
  /* Approval actions - stack */
  .approval-card .flex.gap-2,
  .approval-card .flex.gap-3 {
    flex-direction: column;
    gap: 10px;
  }
  
  .approval-card button,
  .approval-card a {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    font-weight: 500;
    justify-content: center;
  }
  
  /* Stats cards - 3 column on approval pages */
  .grid.grid-cols-1.sm\\:grid-cols-3 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  /* Modal footer buttons on approval pages */
  #review-modal .flex.gap-3 {
    flex-direction: column;
    width: 100%;
  }
  
  #review-modal .flex.gap-3 button {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }
}

/* ============================================
   NOTIFICATIONS - MOBILE
   ============================================ */
@media (max-width: 767px) {
  /* Notification dropdown - full width */
  .notification-dropdown {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 64px);
    border-radius: 0;
    margin: 0;
  }
  
  /* Notification items - larger touch area */
  .notification-item {
    padding: 16px;
    min-height: 64px;
  }
}

/* ============================================
   AI ASSISTANT - MOBILE
   ============================================ */
@media (max-width: 767px) {
  /* AI chat trigger - FAB */
  .ai-chat-trigger {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  /* AI chat panel - full screen */
  .ai-chat-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    border-radius: 0;
  }
  
  /* AI chat input */
  .ai-chat-input {
    min-height: 48px;
    font-size: 16px;
  }
  
  .ai-chat-send-btn {
    min-width: 48px;
    min-height: 48px;
  }
}

/* ============================================
   SAFE AREA INSETS (iPhone X+ notch)
   ============================================ */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 767px) {
    /* Header safe area */
    .info-header {
      padding-top: env(safe-area-inset-top);
    }
    
    /* Content padding */
    .sidebar-main-content {
      padding-top: calc(64px + env(safe-area-inset-top));
    }
    
    /* Modal footer */
    .modal-footer {
      padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    
    /* FAB positioning */
    .floating-action-btn,
    .fab,
    .ai-chat-trigger {
      bottom: calc(24px + env(safe-area-inset-bottom));
    }
    
    /* Bottom actions */
    .action-bar-bottom {
      padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
  }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (pointer: coarse) {
  /* Larger tap targets for all interactive elements */
  a, button, [role="button"], input, select, textarea, label[for] {
    min-height: 44px;
  }
  
  /* Remove hover effects on touch devices */
  a:hover, button:hover, [role="button"]:hover {
    /* Keep original state - hover doesn't work on touch */
  }
  
  /* Add active states instead */
  a:active, button:active, [role="button"]:active {
    opacity: 0.85;
    transform: scale(0.98);
  }
  
  /* Increase spacing between interactive elements */
  .space-y-2 > * + * {
    margin-top: 12px;
  }
  
  /* Checkboxes and radio buttons - larger */
  input[type="checkbox"],
  input[type="radio"] {
    width: 24px;
    height: 24px;
  }
  
  /* Links in text */
  p a, li a, .prose a {
    padding: 2px 4px;
    margin: -2px -4px;
  }
}

/* ============================================
   LANDSCAPE MOBILE OPTIMIZATIONS
   ============================================ */
@media (max-width: 896px) and (orientation: landscape) {
  /* Reduce header height in landscape */
  :root {
    --header-height: 52px;
  }
  
  /* Compact form layout */
  .modal-content {
    max-height: 100vh;
  }
  
  .modal-body {
    padding: 12px 16px;
  }
  
  /* Two column forms in landscape */
  .grid.grid-cols-1:not(.dashboard-grid) {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  /* Action bar - more compact */
  .panel-tab {
    min-height: 40px;
    padding: 8px 16px;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  /* Hide mobile-specific elements */
  .mobile-menu-btn,
  .panel-tab,
  .floating-action-btn,
  .fab,
  .ai-chat-trigger,
  .lg\\:hidden {
    display: none !important;
  }
  
  /* Show all panels */
  .panel-content {
    display: block !important;
  }
}

/* ============================================
   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;
  }
}

/* ============================================
   DASHBOARD HEADER MOBILE OPTIMIZATIONS
   ============================================ */
@media (max-width: 639px) {
  /* Dashboard page header */
  .p-4.sm\\:p-6 > .flex.flex-col.sm\\:flex-row {
    gap: 16px;
  }
  
  /* Title section */
  .p-4.sm\\:p-6 > .flex.flex-col h1,
  .p-4.sm\\:p-6 h1.text-xl {
    font-size: 20px;
    line-height: 1.3;
  }
  
  /* Action buttons container - full width */
  .p-4.sm\\:p-6 > .flex.flex-col > div:last-child {
    width: 100%;
  }
  
  /* Search and button wrapper - stack vertically */
  .flex.flex-col.sm\\:flex-row.items-stretch {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  
  /* Search inputs and buttons - full width with proper height */
  .flex.flex-col.sm\\:flex-row input[type="search"],
  .flex.flex-col.sm\\:flex-row a,
  .flex.flex-col.sm\\:flex-row button {
    width: 100%;
    min-height: 48px;
  }
  
  /* All header action links/buttons - ensure touch-friendly */
  .p-4.sm\\:p-6 a.min-h-\\[48px\\],
  .p-4.sm\\:p-6 button.min-h-\\[48px\\] {
    width: 100%;
  }
}

/* ============================================
   LOGIN PAGE MOBILE OPTIMIZATIONS
   ============================================ */
@media (max-width: 639px) {
  /* Login container */
  .max-w-md {
    padding: 0 4px;
  }
  
  /* Login card */
  .bg-white.rounded-xl.shadow-md {
    padding: 24px 20px;
  }
  
  /* Form spacing */
  form .space-y-5 > * + * {
    margin-top: 20px;
  }
  
  /* Submit button */
  form button[type="submit"] {
    margin-top: 24px;
  }
}

/* ============================================
   CONSISTENT TYPOGRAPHY - ALL PAGES
   ============================================ */
@media (max-width: 767px) {
  /* Page titles consistency */
  h1.text-xl,
  h1.text-2xl,
  .text-xl.font-bold,
  .text-2xl.font-bold {
    font-size: 20px !important;
    line-height: 1.3;
  }
  
  /* Subtitles */
  .text-sm.text-gray-500 {
    font-size: 13px;
  }
  
  /* Section headers in cards */
  h2.text-lg,
  h3.text-sm.font-semibold {
    font-size: 15px;
  }
}

/* ============================================
   CONSISTENT BUTTONS - ALL PAGES
   ============================================ */
@media (max-width: 767px) {
  /* Primary action buttons */
  a.bg-blue-600,
  button.bg-blue-600,
  a.bg-green-600,
  button.bg-green-600,
  a.bg-gray-600,
  button.bg-gray-600 {
    min-height: 48px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }
  
  /* Full-width buttons in headers */
  .p-4.sm\\:p-6 > .flex a.bg-blue-600,
  .p-4.sm\\:p-6 > .flex button.bg-blue-600,
  .p-4.sm\\:p-6 > .flex a.bg-gray-600,
  .p-4.sm\\:p-6 > .flex button.bg-gray-600 {
    width: 100%;
    justify-content: center;
  }
  
  /* Icon buttons */
  button svg,
  a svg {
    flex-shrink: 0;
  }
}

/* ============================================
   CONSISTENT CARDS - ALL PAGES  
   ============================================ */
@media (max-width: 767px) {
  /* All white cards */
  .bg-white.rounded-lg.shadow-sm,
  .bg-white.rounded-lg.shadow,
  .bg-white.rounded-xl {
    border-radius: 16px;
  }
  
  /* Card padding */
  .bg-white.rounded-lg.shadow-sm.p-4,
  .bg-white.rounded-lg.p-4 {
    padding: 16px;
  }
  
  /* Stats cards consistency */
  .bg-white.rounded-lg.shadow-sm.p-4.border {
    padding: 14px;
  }
}

/* ============================================
   EMPTY STATES & LOADING - MOBILE
   ============================================ */
@media (max-width: 767px) {
  /* Empty state containers */
  .text-center.py-16,
  .text-center.py-12 {
    padding: 48px 24px;
  }
  
  /* Empty state icons */
  .text-center svg.h-16 {
    width: 56px;
    height: 56px;
  }
  
  /* Empty state titles */
  .text-center h3.text-lg {
    font-size: 18px;
    margin-bottom: 8px;
  }
  
  /* Empty state descriptions */
  .text-center p.text-gray-500 {
    font-size: 14px;
    line-height: 1.5;
    padding: 0 16px;
  }
  
  /* Empty state action buttons */
  .text-center a.bg-blue-600,
  .text-center button.bg-blue-600 {
    margin-top: 20px;
    padding: 14px 24px;
    font-size: 16px;
  }
  
  /* Loading spinners */
  .animate-spin {
    margin-bottom: 12px;
  }
}

/* ============================================
   INFO BANNERS - MOBILE
   ============================================ */
@media (max-width: 767px) {
  /* Info/tip banners */
  .bg-blue-50.border.border-blue-200,
  .bg-white.rounded-lg.shadow-sm.border.border-gray-100.p-4 {
    padding: 14px;
  }
  
  .bg-blue-50 .flex.items-start.gap-3 {
    gap: 12px;
  }
  
  .bg-blue-50 p.text-xs,
  .bg-blue-50 p.text-sm {
    font-size: 13px;
    line-height: 1.5;
  }
}

/* ============================================
   FILTER INDICATOR - MOBILE
   ============================================ */
@media (max-width: 767px) {
  #filter-indicator {
    padding: 12px 16px;
  }
  
  #filter-indicator button {
    min-height: 44px;
    padding: 8px 12px;
  }
}

/* ============================================
   APPROVAL PAGES - MOBILE
   ============================================ */
@media (max-width: 767px) {
  /* Approval page containers */
  #my-proposals-container,
  #sup-proposals-container,
  #admin-proposals-container {
    gap: 12px;
  }
  
  /* Approval cards */
  #my-proposals-container > div,
  #sup-proposals-container > div,
  #admin-proposals-container > div {
    padding: 14px;
  }
  
  /* Status count cards */
  [data-filter] {
    min-height: 88px;
    padding: 14px;
  }
  
  [data-filter] .text-3xl {
    font-size: 1.75rem;
  }
  
  [data-filter] .text-xs {
    font-size: 0.75rem;
  }
  
  /* Approval action buttons */
  .approval-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .approval-action-btn {
    flex: 1;
    min-width: calc(50% - 4px);
    justify-content: center;
    min-height: 44px;
    font-size: 0.8125rem;
  }
  
  /* Review page panels */
  #proposal-panel,
  #backup-panel {
    padding: 14px;
  }
  
  /* View toggle buttons */
  .review-view-tab {
    min-height: 44px;
    padding: 10px 16px;
  }
  
  /* Review notes textarea */
  #review-notes {
    min-height: 100px;
    font-size: 16px;
  }
  
  /* Feedback notes */
  .feedback-notes {
    padding: 12px;
    font-size: 0.875rem;
  }
  
  /* Timeline */
  .approval-timeline {
    padding-left: 1.25rem;
  }
  
  .timeline-item {
    padding-bottom: 14px;
  }
  
  /* Audit history items */
  #audit-history .flex.items-start.gap-3 {
    gap: 10px;
  }
  
  #audit-history .flex-shrink-0.w-8 {
    width: 32px;
    height: 32px;
  }
  
  /* Info bar on review page */
  #info-requester,
  #info-submitted,
  #info-proposal-total,
  #info-estimate-total {
    font-size: 14px;
  }
  
  /* Submission notes section */
  #submission-notes-section,
  #supervisor-notes-section {
    padding: 12px;
  }
  
  /* Review content sections */
  #proposal-content,
  #backup-content {
    padding: 12px;
  }
  
  #proposal-content .space-y-4 > div,
  #backup-content .space-y-4 > div {
    padding: 12px;
  }
  
  /* Grid layouts */
  #proposal-content .grid.grid-cols-2,
  #backup-content .grid.grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  #proposal-content .grid.grid-cols-2 .col-span-2,
  #backup-content .grid.grid-cols-2 .col-span-2 {
    grid-column: span 1;
  }
}

/* Extra small screens - stack more elements */
@media (max-width: 500px) {
  /* Status count grid */
  .grid.grid-cols-2.gap-3,
  .grid.grid-cols-5.gap-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Single column for very small screens */
  .approval-action-btn {
    min-width: 100%;
  }
  
  /* Full width for action buttons in review */
  #review-actions .flex.gap-3 {
    flex-direction: column;
    gap: 10px;
  }
  
  #review-actions button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
}

/* ============================================
   DOCUMENT PREVIEW RESPONSIVE SCALING
   Applies to Estimator and Proposal Builder pages
   ============================================ */

/* Preview containers - responsive scaling */
#live-preview-content,
#proposal-preview-content {
  background: #e5e7eb;
  overflow-y: auto;
  overflow-x: hidden;
}

#live-preview-content .document-preview-container,
#proposal-preview-content .document-preview-container {
  background: transparent;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#live-preview-content .document-page,
#proposal-preview-content .document-page {
  width: 8.5in;
  min-height: 11in;
  background: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  transform-origin: top center;
  transition: transform 0.15s ease;
}

/* Desktop wide: more space for preview */
@media screen and (min-width: 1441px) {
  #live-preview-content .document-page,
  #proposal-preview-content .document-page {
    transform: scale(0.75);
    margin-bottom: calc(-11in * 0.25);
  }
}

/* Desktop standard */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
  #live-preview-content .document-page,
  #proposal-preview-content .document-page {
    transform: scale(0.62);
    margin-bottom: calc(-11in * 0.38);
  }
}

/* Tablet */
@media screen and (max-width: 1024px) {
  #live-preview-content,
  #proposal-preview-content {
    background: #f3f4f6;
  }
  
  #live-preview-content .document-page,
  #proposal-preview-content .document-page {
    transform: scale(0.7);
    margin-bottom: calc(-11in * 0.30);
  }
}

/* Mobile */
@media screen and (max-width: 768px) {
  #live-preview-content,
  #proposal-preview-content {
    background: #f9fafb;
    padding: 0;
    overflow-x: auto;
    overflow-y: auto;
  }
  
  #live-preview-content .document-preview-container,
  #proposal-preview-content .document-preview-container {
    padding: 0;
    width: 100%;
  }
  
  #live-preview-content .document-page,
  #proposal-preview-content .document-page {
    width: 100%;
    max-width: 100%;
    transform: none;
    margin-bottom: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 12px;
  }
}

/* Small mobile */
@media screen and (max-width: 480px) {
  #live-preview-content .document-preview-container,
  #proposal-preview-content .document-preview-container {
    padding: 0;
  }
  
  #live-preview-content .document-page,
  #proposal-preview-content .document-page {
    width: 100%;
    padding: 8px;
    box-shadow: none;
    border: none;
  }
}