/**
 * responsive.css — Phase 18: Tablet & Desktop Layout Adaptations
 * Mobile-first design gracefully scales to tablets and desktop browsers.
 *
 * Breakpoints:
 *   - 640px  : Small tablet (landscape phones)
 *   - 768px  : Tablet portrait
 *   - 1024px : Desktop / landscape tablet
 *   - 1280px : Large desktop
 *   - 1440px : Wide desktop
 */

/* ═══════════════════════════════════════════════════════════════════════════
   §0  GLOBAL RESPONSIVE TRANSITION (Smooth layout shifts)
   ═══════════════════════════════════════════════════════════════════════════ */

.main-content,
.top-bar,
#nav-drawer,
#nav-bottom {
  transition:
    margin var(--transition-normal),
    width var(--transition-normal),
    left var(--transition-normal),
    transform var(--transition-normal);
}

/* Mobile defaults */
#menu-btn {
  display: inline-flex !important;
}

.visible-mobile {
  display: inline-flex !important;
}

@media (max-width: 767px) {
  .responsive-table-view:not(.always-table) {
    display: none !important;
  }
  .responsive-card-view,
  .responsive-cards-view {
    display: flex !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §1  SMALL TABLET — 640px+
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {

  /* KPI grids: at least 2 columns */
  .grid.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Search filter bars: row layout */
  .filter-chips-container {
    flex-wrap: nowrap !important;
  }

  /* Module header actions: row layout */
  .module-header-actions {
    flex-direction: row;
    align-items: center;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §2  TABLET VIEWPORTS — 768px+
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  /* ── Two-Column Form Layouts ──────────────────────────────────────────── */
  .grid-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .grid-form .form-group.col-span-2,
  .grid-form .form-actions {
    grid-column: span 2;
  }

  /* ── Split Layout: List + Detail side by side ────────────────────────── */
  .split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: start;
  }

  /* ── Wider Modals ────────────────────────────────────────────────────── */
  .modal-content {
    max-width: 640px;
    margin: 40px auto;
    border-radius: var(--radius-lg);
  }

  /* ── Personnel Layout: Main + AZ sidebar ─────────────────────────────── */
  .personal-layout {
    flex-direction: row;
    gap: var(--space-4);
  }

  /* ── Card Grids: Two columns ─────────────────────────────────────────── */
  .personal-list,
  .users-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  /* ── Desktop table view: show on tablet+ when module JS adds class ──── */
  .responsive-table-view {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  .responsive-card-view,
  .responsive-cards-view {
    display: none !important;
  }

  /* ── Bienes (consulta) grid: 2 columns on tablet ─────────────────────── */
  .bienes-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-3) !important;
  }

  /* ── Conciliación and Audit Filter Forms: side by side ───────────────── */
  .conciliacion-module .grid.grid-cols-1,
  .audit-module .grid.grid-cols-1 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Repository layout: full width table ─────────────────────────────── */
  .repository-module {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: var(--space-3);
  }

  /* ── Pagination: larger hit targets ──────────────────────────────────── */
  .pagination-container .btn-sm {
    min-width: 120px;
  }

  /* ── Toast container: positioned to right edge ───────────────────────── */
  .toast-container {
    right: var(--space-6);
    left: auto;
    width: 360px;
    max-width: 360px;
  }

  /* ── Faltantes module: form and list side by side when form visible ──── */
  .faltantes-module {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §3  DESKTOP VIEWPORTS — 1024px+
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

  /* ── Body: standard block flow ───────────────────────────────────────── */
  body {
    display: block !important;
    margin: 0 !important;
    background-color: var(--surface-1) !important;
  }

  /* ── Top Bar: Full Width Across the Screen ──────────────────────────── */
  .top-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--top-bar-h, 68px) !important;
    z-index: 1000 !important;
    background: var(--surface-0) !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  /* ── Permanent Navigation Sidebar (under top bar) ──────────────────── */
  #nav-drawer {
    position: fixed !important;
    top: var(--top-bar-h, 68px) !important;
    left: 0 !important;
    width: var(--drawer-w, 240px) !important;
    height: calc(100vh - var(--top-bar-h, 68px)) !important;
    transform: none !important; /* Always visible */
    box-shadow: none !important;
    z-index: 50 !important;
    border-right: 1px solid var(--border-color);
    background: var(--surface-0) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* Pin header & footer */
  }

  .nav-drawer-header {
    flex-shrink: 0 !important;
  }

  .nav-drawer-body {
    flex: 1 !important;
    overflow-y: auto !important; /* Only links scroll */
    min-height: 0 !important;
  }

  .nav-drawer-footer {
    flex-shrink: 0 !important;
  }

  #drawer-overlay {
    display: none !important; /* No overlay on desktop */
  }

  /* ── Hide Hamburger Menu Button & Mobile Buttons ───────────────────── */
  #menu-btn {
    display: none !important;
  }

  .visible-mobile {
    display: none !important;
  }

  /* ── Main Content Area ───────────────────────────────────────────────── */
  .main-content {
    margin-left: var(--drawer-w, 240px) !important;
    width: calc(100% - var(--drawer-w, 240px)) !important;
    padding: 14px 20px !important;
    min-height: 100vh !important;
    padding-top: calc(var(--top-bar-h, 68px) + 14px) !important;
    padding-bottom: 24px !important;
    background-color: var(--surface-1) !important;
  }

  /* ── Hide Bottom Navigation ──────────────────────────────────────────── */
  #nav-bottom {
    display: none !important;
  }

  /* ── Remove bottom nav padding from main content ─────────────────────── */
  .module-container {
    min-height: calc(100vh - var(--top-bar-h, 56px) - var(--space-8)) !important;
    padding-bottom: 0 !important;
  }

  /* ── Dashboard: 5 KPI cards in 1 row ─────────────────────────────────── */
  .dashboard-module .grid.grid-cols-5,
  .dashboard-module .dash-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .dashboard-module .grid.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Card Grids: Three columns ───────────────────────────────────────── */
  .personal-list,
  .users-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── Bienes grid: 3 columns ──────────────────────────────────────────── */
  .bienes-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* ── Modals: wider on desktop ────────────────────────────────────────── */
  .modal-content {
    max-width: 720px;
    margin: 60px auto;
  }

  /* ── Scanner View: constrained to center ─────────────────────────────── */
  .scanner-overlay {
    max-width: 500px;
    max-height: 500px;
    margin: auto;
    border-radius: var(--radius-lg);
    border: 4px solid var(--color-primary);
  }

  .scanner-overlay .scanner-camera-container {
    max-width: 480px;
    max-height: 480px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .scanner-overlay .scanner-frame {
    max-width: 300px;
    max-height: 300px;
  }

  /* ── Conciliación KPI grid: 4 columns ────────────────────────────────── */
  .conciliacion-module .grid.grid-cols-2 {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* ── Repository Module: Full width table layout ──────────────────────── */
  .repository-module {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Faltantes Module: Search top, form+list bottom ──────────────────── */
  .faltantes-module {
    grid-template-columns: 1fr 1fr;
  }

  /* ── Forms: Three-column grid for wide forms ─────────────────────────── */
  .grid-form-wide {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .grid-form-wide .form-group.col-span-3,
  .grid-form-wide .form-actions {
    grid-column: span 3;
  }

  /* ── Table Styles: Enhanced for desktop ──────────────────────────────── */
  .responsive-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
  }

  .responsive-table thead {
    position: sticky;
    top: 0;
    z-index: var(--z-base);
  }

  .responsive-table thead th {
    background: var(--surface-2);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color-strong);
    white-space: nowrap;
    text-align: left;
  }

  .responsive-table tbody tr {
    transition: background-color var(--transition-fast);
  }

  .responsive-table tbody tr:hover {
    background: var(--surface-2);
  }

  .responsive-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--divider);
    vertical-align: middle;
  }

  .responsive-table tbody tr:last-child td {
    border-bottom: none;
  }

  /* ── Validation module: constrain giant button on wide screens ────────── */
  .validation-module .validacion-action-area {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── Inventory Campo: Side-by-side comparison panel ──────────────────── */
  .comparison-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  /* ── Empty state: constrain width ────────────────────────────────────── */
  .empty-state {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── Login page: center the card ─────────────────────────────────────── */
  .login-module .login-container {
    max-width: 420px;
    margin: 0 auto;
  }

  /* ── PDF viewer: constrained width ───────────────────────────────────── */
  #pdf-view-overlay iframe {
    max-width: 900px;
    margin: 0 auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §4  LARGE DESKTOP — 1280px+
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {

  /* ── Content max-width containment ───────────────────────────────────── */
  .main-content {
    padding: var(--space-8);
    padding-top: calc(var(--top-bar-h) + var(--space-8));
  }

  .module-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── Card Grids: 4 columns on very wide screens ──────────────────────── */
  .personal-list,
  .users-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── Bienes grid: 4 columns ──────────────────────────────────────────── */
  .bienes-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* ── Dashboard: wider charts ─────────────────────────────────────────── */
  .dashboard-module .card.glass-card canvas {
    max-height: 320px;
  }

  /* ── Modals: even wider ──────────────────────────────────────────────── */
  .modal-content {
    max-width: 800px;
  }

  /* ── Tables: more spacious ───────────────────────────────────────────── */
  .responsive-table thead th {
    padding: var(--space-3) var(--space-6);
  }

  .responsive-table tbody td {
    padding: var(--space-3) var(--space-6);
  }

  /* ── Inventory field form: 3-column ──────────────────────────────────── */
  .inventario-campo-module .grid-form {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §5  WIDE DESKTOP — 1440px+
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1440px) {

  .module-container {
    max-width: 1400px;
  }

  .main-content {
    padding: var(--space-10);
    padding-top: calc(var(--top-bar-h) + var(--space-10));
  }

  /* ── Dashboard leaderboard: expand ───────────────────────────────────── */
  .dashboard-module .grid.grid-cols-1.lg\:grid-cols-3 {
    grid-template-columns: 2fr 1fr !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §6  PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  #nav-drawer,
  #nav-bottom,
  .top-bar,
  .fab,
  .btn-fab-extended,
  .scanner-overlay,
  .toast-container,
  .modal-overlay,
  #pdf-view-overlay {
    display: none !important;
  }

  .main-content {
    margin: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  .glass,
  .glass-card,
  .glass-heavy {
    background: white !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §7  HOVER-CAPABLE DEVICE ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {

  /* ── Enhanced hover effects for desktop mice ─────────────────────────── */
  .personal-card:hover,
  .user-card:hover,
  .item-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
  }

  /* ── Table row hover ─────────────────────────────────────────────────── */
  .responsive-table tbody tr {
    cursor: pointer;
  }

  .responsive-table tbody tr:hover {
    background: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.04);
  }

  /* ── Nav drawer items: hover highlight ───────────────────────────────── */
  .nav-drawer-item:hover {
    background: var(--surface-2);
    border-radius: var(--radius-md);
  }

  /* ── Buttons: cursor pointer feedback ────────────────────────────────── */
  .btn:hover {
    cursor: pointer;
  }

  /* ── AZ letter button hover ──────────────────────────────────────────── */
  .az-letter-btn:hover {
    background: var(--color-primary);
    color: white;
    transform: scale(1.15);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §8  TOUCH-ONLY DEVICE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {

  /* ── Ensure minimum touch targets ────────────────────────────────────── */
  .responsive-table tbody td {
    padding: var(--space-3) var(--space-3);
    min-height: 48px;
  }

  .responsive-table tbody tr {
    min-height: 48px;
  }

  /* ── Larger pagination buttons ───────────────────────────────────────── */
  .pagination-container .btn {
    min-height: 48px;
    min-width: 48px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §9  ORIENTATION-SPECIFIC ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (orientation: landscape) and (max-height: 500px) {
  /* Phone in landscape mode: reduce vertical padding */
  .top-bar {
    height: 44px;
  }

  .main-content {
    padding-top: calc(44px + var(--space-2));
  }

  #nav-bottom {
    height: 48px;
  }

  /* Scanner: constrain height */
  .scanner-overlay .scanner-camera-container {
    max-height: 280px;
  }

  /* Validation button: reduce height */
  .validation-module .validacion-action-area {
    max-height: 35vh;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §10  RESPONSIVE UTILITY CLASSES (JS-toggled)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide on mobile, show on tablet+ */
.hide-mobile {
  display: none !important;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: initial !important;
  }
  .hide-tablet {
    display: none !important;
  }
}

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

/* Show on mobile only */
.show-mobile-only {
  display: initial !important;
}

@media (min-width: 768px) {
  .show-mobile-only {
    display: none !important;
  }
}