/* ================================================================
   ITUM ERP — MOBILE RESPONSIVE
   Complete mobile optimization for phones & small tablets
   ================================================================ */

/* ── SIDEBAR OVERLAY / BACKDROP ─────────────────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: calc(var(--z-sidebar) - 1);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.sidebar-backdrop.visible {
  display: block;
  opacity: 1;
}

/* ================================================================
   TABLET & PHONE (≤768px)
   ================================================================ */
@media (max-width: 768px) {

  /* ── SIDEBAR ──────────────────────────────────────────────── */
  .app-sidebar {
    width: min(300px, 85vw);
    will-change: transform;
  }

  /* ── HEADER ───────────────────────────────────────────────── */
  .app-header {
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }

  /* ── PAGE HEADER ──────────────────────────────────────────── */
  .page-title {
    font-size: var(--text-xl);
  }
  .page-subtitle {
    font-size: var(--text-xs);
  }
  .page-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .page-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    font-size: var(--text-xs);
  }

  /* ── GRID FIX: grid-cols-6 was missing ────────────────────── */
  .grid-cols-6 {
    grid-template-columns: 1fr;
  }
  .grid {
    gap: var(--space-3);
  }

  /* ── TABLE → CARD MODE ────────────────────────────────────── */
  .table-wrapper {
    border-radius: var(--radius-md);
  }

  .table-container table thead {
    display: none;
  }
  .table-container table,
  .table-container table tbody {
    display: block;
    width: 100%;
  }
  .table-container table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-secondary);
    position: relative;
  }
  .table-container table tr:last-child {
    border-bottom: none;
  }
  .table-container table td {
    display: inline-flex;
    align-items: center;
    border: none;
    padding: 0;
    font-size: var(--text-xs);
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
  }
  /* First cell (usually name/number) — full width, prominent */
  .table-container table td:first-child {
    width: 100%;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-1);
  }
  /* Last cell (usually actions) — positioned top-left */
  .table-container table td:last-child {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
  }

  /* Table toolbar — stacked */
  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-3);
    gap: var(--space-2);
  }
  .table-toolbar-right {
    width: 100%;
  }
  .table-toolbar-right .search-input-wrapper {
    width: 100%;
  }
  .table-toolbar-right .search-input-wrapper .search-input,
  .table-toolbar-right .search-input-wrapper input {
    width: 100% !important;
  }
  .table-toolbar-left {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .table-toolbar-left .form-select,
  .table-toolbar-left select,
  .table-toolbar select {
    flex: 1 1 120px;
    min-width: 0 !important;
    width: auto !important;
    font-size: var(--text-xs);
  }

  /* Table footer — stacked */
  .table-footer {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    text-align: center;
  }

  /* Table actions — bigger tap targets */
  .table-actions {
    gap: var(--space-2);
  }
  .table-actions .btn {
    min-height: 36px;
    min-width: 36px;
  }

  /* ── CARDS ────────────────────────────────────────────────── */
  .card {
    border-radius: var(--radius-md);
  }
  .card-header {
    padding: var(--space-3) var(--space-3);
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .card-header-title {
    font-size: var(--text-sm);
  }
  .card-body {
    padding: var(--space-3);
  }

  /* ── STAT CARDS ───────────────────────────────────────────── */
  .stat-card {
    padding: var(--space-3);
  }
  .stat-card-value {
    font-size: var(--text-xl);
  }
  .stat-card-label {
    font-size: 0.625rem;
  }

  /* ── DETAIL ROWS ──────────────────────────────────────────── */
  .detail-row {
    flex-direction: column;
    gap: 2px;
  }
  .detail-row-label {
    min-width: 0;
    font-size: var(--text-xs);
  }
  .detail-row-value {
    font-size: var(--text-sm);
  }

  /* ── MODALS ───────────────────────────────────────────────── */
  .modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  .modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    margin: 0;
  }
  .modal-lg, .modal-xl {
    max-width: 100%;
  }
  .modal-header {
    padding: var(--space-3) var(--space-4);
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-modal);
  }
  .modal-title {
    font-size: var(--text-base);
  }
  .modal-body {
    padding: var(--space-3) var(--space-4);
    overflow-y: auto;
  }
  .modal-footer {
    padding: var(--space-3) var(--space-4);
    position: sticky;
    bottom: 0;
    background: var(--surface-modal);
    border-top: 1px solid var(--border-primary);
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .modal-footer .btn {
    flex: 1 1 auto;
    min-width: 0;
  }
  .confirm-dialog {
    padding: var(--space-4);
  }

  /* ── INLINE GRIDS — force single column ─────────────────── */
  .grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* ── FORMS ────────────────────────────────────────────────── */
  .form-row {
    grid-template-columns: 1fr !important;
    gap: var(--space-3);
  }
  .form-group {
    margin-bottom: var(--space-3);
  }
  .form-input, .form-select, textarea.form-input {
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  /* ── BUTTONS — TOUCH TARGETS ──────────────────────────────── */
  .btn {
    min-height: 44px;
    font-size: var(--text-xs);
  }
  .btn-sm {
    min-height: 36px;
    font-size: 0.6875rem;
  }
  .btn-icon {
    min-height: 44px;
    min-width: 44px;
  }

  /* ── BREADCRUMBS ──────────────────────────────────────────── */
  .breadcrumbs {
    font-size: var(--text-xs);
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  /* ── TABS ──────────────────────────────────────────────────── */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding-bottom: 2px;
  }
  .tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  /* ── DRAWER ───────────────────────────────────────────────── */
  .drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* ── INLINE FILTERS (calculations, etc.) ────────────────── */
  .flex.gap-3.mb-4 {
    flex-direction: column;
  }
  .flex.gap-3.mb-4 .form-group {
    width: 100%;
  }
  .flex.gap-3.mb-4 .form-select,
  .flex.gap-3.mb-4 select {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ── ALL SELECTS — prevent overflow ────────────────────── */
  select.form-select,
  .form-select {
    max-width: 100%;
    min-width: 0 !important;
  }

  /* ── PO LINE ITEMS — MOBILE STACK ───────────────────────── */
  .po-line-grid,
  .po-line-grid.no-prices {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-2);
  }
  .po-line-item {
    grid-column: 1 / -1;
  }
  .po-line-unit {
    display: none !important;
  }
  .po-line-total {
    text-align: right;
  }
  .po-line-remove {
    grid-column: 1 / -1;
    align-items: flex-start;
  }
  .po-edit-warn-row {
    display: none;
  }

  /* ── MODAL TABLES — keep table layout but scroll ────────── */
  .modal .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal .table-container table {
    display: table;
    min-width: 500px;
  }
  .modal .table-container table thead {
    display: table-header-group;
  }
  .modal .table-container table tbody {
    display: table-row-group;
  }
  .modal .table-container table tr {
    display: table-row;
    padding: 0;
    border-bottom: none;
    position: static;
  }
  .modal .table-container table td,
  .modal .table-container table th {
    display: table-cell;
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-2);
    white-space: nowrap;
  }
  .modal .table-container table td:first-child {
    width: auto;
    font-size: var(--text-xs);
    font-weight: normal;
    margin-bottom: 0;
  }
  .modal .table-container table td:last-child {
    position: static;
  }

  /* ── RECEIVE GOODS CARDS — MOBILE ────────────────────────── */
  .recv-card {
    padding: var(--space-3);
  }
  .recv-card-input {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .recv-card-qty {
    max-width: 100%;
  }
  .recv-card-exception-label {
    font-size: var(--text-sm);
    padding: var(--space-2) 0;
  }
  .recv-card-exception-label input[type="checkbox"] {
    min-width: 22px;
    min-height: 22px;
  }

  /* ── EXCEPTION FIELDS — MOBILE ──────────────────────────── */
  .exception-fields {
    flex-wrap: wrap;
  }
  .exception-select {
    width: 100% !important;
    min-width: 0;
    font-size: 16px;
  }
  .exception-notes {
    width: 100%;
    font-size: 16px;
  }

  /* ── HIDE-ON-MOBILE TABLE CELLS ────────────────────────── */
  .hide-mobile {
    display: none !important;
  }

  /* ── BADGES ───────────────────────────────────────────────── */
  .badge {
    font-size: 0.6rem;
    padding: 2px 6px;
  }

  /* ── EMPTY STATE ──────────────────────────────────────────── */
  .empty-state {
    padding: var(--space-6) var(--space-3);
  }
  .empty-state-icon {
    font-size: 2rem;
  }

  /* ── ALERT CARDS ──────────────────────────────────────────── */
  .alert-card {
    padding: var(--space-3);
    flex-direction: column;
    gap: var(--space-2);
  }

  /* ── HEADER DROPDOWNS ─────────────────────────────────────── */
  .header-dropdown {
    position: fixed;
    width: calc(100vw - 16px);
    max-width: 100%;
    right: 8px;
    left: 8px;
    top: calc(var(--header-height) + 4px);
  }
  .header-notif-dropdown {
    position: fixed;
    width: calc(100vw - 16px);
    right: 8px;
    left: 8px;
    top: calc(var(--header-height) + 4px);
    max-height: 70vh;
  }

  /* ── WIZARD CARD ──────────────────────────────────────────── */
  .wizard-card {
    padding: var(--space-3);
  }

  /* ── WIZARD NAV BUTTONS ───────────────────────────────────── */
  .wizard-nav-buttons {
    flex-direction: column-reverse;
    gap: var(--space-2);
  }
  .wizard-nav-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── WIZARD STEPPER ───────────────────────────────────────── */
  .wizard-progress {
    padding: var(--space-3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wizard-progress > .flex {
    min-width: max-content;
  }
  .wizard-step {
    min-width: 56px;
  }
  .wizard-step-num {
    width: 30px;
    height: 30px;
    font-size: var(--text-xs);
  }
  .wizard-step-label {
    font-size: 0.5625rem;
  }
  .wizard-step-line {
    min-width: 16px;
    margin-bottom: 14px;
  }

  /* ── APPROVAL BAR ─────────────────────────────────────────── */
  .approval-bar {
    flex-wrap: wrap;
    gap: var(--space-1);
  }
  .approval-step {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
  }

  /* ── FLEX CONTAINERS — word-break ─────────────────────────── */
  .flex.flex-col.gap-3 {
    word-break: break-word;
  }

  /* ── TOOLTIP ──────────────────────────────────────────────── */
  #global-tip {
    max-width: calc(100vw - 32px);
  }

  /* ── AI PANEL ─────────────────────────────────────────────── */
  .ai-summary-bar {
    flex-direction: column;
    gap: var(--space-2);
  }
  .ai-rec-card {
    padding: var(--space-3);
  }

  /* ── PERMISSION MATRIX ────────────────────────────────────── */
  .perm-matrix {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .perm-matrix-head,
  .perm-row {
    min-width: 600px;
  }
}


/* ================================================================
   SMALL PHONE (≤480px)
   ================================================================ */
@media (max-width: 480px) {

  /* Sidebar: full width */
  .app-sidebar {
    width: 100vw;
  }

  /* Header: tighter */
  .app-header {
    padding: 0 var(--space-2);
    gap: var(--space-1);
  }

  /* Pages: tighter padding */
  :root {
    --page-padding-x: var(--space-3);
    --page-padding-y: var(--space-3);
  }

  /* Cards: minimal padding */
  .card-header,
  .card-body {
    padding: var(--space-2) var(--space-3);
  }

  /* Table card rows: tighter */
  .table-container table tr {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-1) var(--space-2);
  }

  /* Page header: full-width stacked */
  .page-actions {
    flex-direction: column;
  }
  .page-actions .btn {
    width: 100%;
  }
  .page-title {
    font-size: var(--text-lg);
  }

  /* Stat cards: 2-col grid */
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-2);
  }

  /* Modal: true full-screen */
  .modal {
    border-radius: 0;
    max-height: 100vh;
    height: 100vh;
    max-height: 100dvh;
    height: 100dvh;
  }

  /* Search input */
  .search-input-wrapper .search-input {
    font-size: 16px;
  }

  /* Tenant switcher panel */
  .tenant-switcher-panel {
    position: fixed;
    width: calc(100vw - 16px);
    right: 8px;
    left: 8px;
    top: calc(var(--header-height) + 4px);
  }
}


/* ================================================================
   VERY SMALL PHONE (≤360px)
   ================================================================ */
@media (max-width: 360px) {
  :root {
    --page-padding-x: var(--space-2);
    --page-padding-y: var(--space-2);
  }

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

  .btn {
    font-size: 0.6875rem;
    padding: 0.5rem 0.625rem;
    min-height: 40px;
  }

  .card-header, .card-body {
    padding: var(--space-2);
  }

  .table-container table tr {
    padding: var(--space-2);
  }
}


/* ================================================================
   TOUCH DEVICE ENHANCEMENTS
   ================================================================ */
@media (hover: none) and (pointer: coarse) {
  .btn-primary:hover { transform: none; }
  .card:hover { transform: none; }
  .sidebar-nav-link:hover { transform: none; }
  .dashboard-quick-link:hover { transform: none; }

  .sidebar-nav-link {
    min-height: 48px;
    padding-block: var(--space-3);
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-width: 22px;
    min-height: 22px;
  }

  table a {
    display: inline-block;
    padding: 2px 0;
  }
}


/* ================================================================
   SAFE AREA (iPhone notch / Dynamic Island)
   ================================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .app-sidebar {
      padding-bottom: env(safe-area-inset-bottom);
    }
    .modal-footer {
      padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    }
    .app-content {
      padding-bottom: calc(var(--page-padding-y) + env(safe-area-inset-bottom));
    }
    .app-header {
      padding-top: env(safe-area-inset-top);
    }
  }
}


/* ================================================================
   LANDSCAPE PHONE
   ================================================================ */
@media (max-width: 768px) and (orientation: landscape) {
  .modal-backdrop {
    align-items: center;
    padding: var(--space-2);
  }
  .modal {
    border-radius: var(--radius-lg);
    max-height: 95vh;
    height: auto;
  }
  .app-sidebar {
    width: min(280px, 50vw);
  }
}


/* ================================================================
   PRINT: hide mobile-only UI
   ================================================================ */
@media print {
  .sidebar-backdrop,
  .header-menu-btn {
    display: none !important;
  }
}