/**
 * Liberty Catalog — Mobile & Tablet Responsive Styles
 * Shared responsive rules for iPhone, iPad, and touch devices.
 * Include after app-specific styles: <link rel="stylesheet" href="../css/mobile.css">
 */

/* ============================================================
   TOUCH TARGETS (iOS minimum 44px)
   ============================================================ */
@media (pointer: coarse) {
  input, select, textarea {
    min-height: 44px;
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  button, .btn, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  .btn-sm {
    min-height: 36px;
    padding: 6px 12px;
  }
}

/* ============================================================
   TABLET (768px — 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  /* Tables: horizontal scroll */
  .o_list_view {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .o_list_table {
    min-width: 600px;
  }

  /* Control panel: wrap actions */
  .o_control_panel_main {
    flex-wrap: wrap;
    gap: 8px;
  }

  .o_control_panel_actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Search bar: full width on wrap */
  .o_searchview {
    flex: 1 1 200px;
    min-width: 0;
  }

  /* Form two-column to single */
  .o_inner_group {
    flex: 0 0 100%;
  }

  /* Kanban: allow horizontal scroll */
  .o_kanban_view {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  /* Status bar: scroll on overflow */
  .o_statusbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .o_statusbar_status {
    flex-shrink: 0;
  }

  /* Sub-navbar: horizontal scroll */
  .o_sub_navbar, nav[id="sub-navbar"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Nav tabs: scrollable */
  .o_notebook .nav-tabs, .nav-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .o_notebook .nav-tabs .nav-link, .nav-tabs .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Modal: wider on tablets */
  .modal-dialog {
    max-width: 90vw;
  }
}

/* ============================================================
   PHONE (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Control panel: vertical stack */
  .o_control_panel_main {
    flex-direction: column;
    align-items: stretch;
  }

  .o_control_panel_breadcrumbs {
    margin-bottom: 4px;
  }

  .o_control_panel_actions {
    width: 100%;
  }

  .o_searchview {
    flex: 1 1 100%;
  }

  /* Pager: compact */
  .o_control_panel_navigation {
    justify-content: center;
    padding: 4px 0;
  }

  /* Form sheet: less padding */
  .o_form_sheet_bg {
    padding: 8px;
  }

  .o_form_sheet {
    padding: 16px 12px;
  }

  /* Form button box: stack */
  .o_form_buttonbox {
    float: none;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }

  .oe_stat_button {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }

  /* Modal: full width on phones */
  .modal-dialog {
    max-width: 95vw;
    margin: 16px;
  }

  /* Toast/notifications: full width */
  .o_notification {
    left: 16px;
    right: 16px;
    min-width: 0;
    max-width: none;
  }

  /* Table cells: tighter */
  .o_list_table th,
  .o_list_table td {
    padding: 6px;
    font-size: 13px;
  }

  /* Hide low-priority columns on phone */
  .o_list_table .mobile-hide {
    display: none;
  }

  /* Dropdown menus: wider */
  .o_dropdown_menu {
    min-width: 200px;
  }

  /* Kanban: single column */
  .o_kanban_view {
    flex-direction: column;
  }

  .o_kanban_group {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

/* ============================================================
   SMALL PHONE (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
  .o_content {
    padding: 6px;
  }

  .o_control_panel {
    padding: 6px 8px 8px;
  }

  .o_form_sheet {
    padding: 12px 8px;
  }

  /* Full-width buttons */
  .o_control_panel_actions .btn {
    flex: 1;
    justify-content: center;
  }

  /* Status bar arrows: smaller */
  .status-step {
    padding: 4px 12px 4px 20px;
    font-size: 12px;
  }

  .status-step::after {
    border-top-width: 14px;
    border-bottom-width: 14px;
    border-left-width: 12px;
    right: -12px;
  }

  .status-step::before {
    border-top-width: 14px;
    border-bottom-width: 14px;
    border-left-width: 12px;
  }
}

/* ============================================================
   SALES APP — Inline-styled elements need specific overrides
   ============================================================ */
@media (max-width: 768px) {
  /* Sales app list search: full width */
  #list-search {
    width: 100% !important;
    max-width: none !important;
  }

  /* Sales app control panels: stack */
  #cp-list, #cp-form {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #cp-list > div, #cp-form > div {
    flex: 1 1 100% !important;
    justify-content: center !important;
  }

  /* Sales form: stat buttons wrap */
  #cp-form > div:nth-child(2) {
    order: -1;
  }

  /* Sub-navbar scroll */
  #sub-navbar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #sub-navbar button {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Sales app inputs: touch-friendly */
  .fi, .ci, .fsel {
    min-height: 40px !important;
    padding: 8px !important;
    font-size: 16px !important;
  }

  /* List table: scroll container */
  #view-list {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #list-table {
    min-width: 600px;
  }

  /* Form view: scrollable */
  #form-body {
    overflow-x: auto !important;
  }
}

/* ============================================================
   SAFE AREA (iPhone notch / home bar)
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ============================================================
   SMOOTH SCROLLING (touch devices)
   ============================================================ */
.o_content,
.o_list_view,
.modal-body {
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   LANDSCAPE PHONE
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .o_main_navbar {
    height: 36px;
  }

  .o_sub_navbar, nav[id="sub-navbar"] {
    height: 30px !important;
  }

  .o_control_panel {
    padding: 4px 8px;
  }
}

/* ============================================================
   PRINT: don't apply mobile styles
   ============================================================ */
@media print {
  .o_list_table th,
  .o_list_table td {
    padding: 4px 6px !important;
    font-size: 11px !important;
  }
}