/* Odoo redesign: small screens. Owner: small-screen work package. Media queries only: nothing in this file changes the desktop
   (>= 992 px wide with a mouse). Uses the tokens from odoo-tokens.css and is linked last, after every other Odoo stylesheet.

   Odoo switches to its small-screen UI below 992 px (the "lg" breakpoint); this file follows the same breakpoints:
     (max-width: 991.98px)   small screens: tablets and phones, compact control panel, one-column forms, sheets instead of popovers
     (max-width: 767.98px)   narrow tablets / large phones
     (max-width: 575.98px)   phones: dialogs become bottom sheets, view switcher spans the width, labels above fields
     (pointer: coarse)       any touch screen, whatever its width: 44 px tap targets (Apple HIG / Material)
   Tap targets: a control is either made 44 px for real (buttons, inputs) or keeps its look and gets a 44 px hit area through an
   invisible ::after (stars, info icons, checkboxes, tiny icon buttons), so dense screens stay as compact as the design allows. */

/* ================================================================================================================================
   1. 44 px TAP TARGETS (small screens and touch screens)
   ================================================================================================================================ */
@media (max-width: 991.98px), (pointer: coarse) {
  /* ---- navbar ---- */
  .o_main_navbar { padding-top: 0; padding-bottom: 0; }
  .o_navbar_btn { width: 40px; height: 40px; }
  .o_systray_btn { width: 40px; height: 40px; }
  .o_nav_entry, .o_menu_brand { min-height: 40px; }
  .o_nav_entry.o_systray_text { min-width: 40px; justify-content: center; }
  .o_menu_systray { height: 100%; }
  .o_avatar_btn { width: 40px; height: 40px; margin: 0 4px 0 0; }
  .o_avatar_dot { right: 6px; bottom: 8px; }
  .o_systray_badge { top: 3px; right: 3px; }

  /* ---- dropdown / popover rows ---- */
  .o_dd_item, .o_menu_item, .ov-pop-item, .odf-menu button, .o_switch_company_item, .o_command, .o_burger_item { min-height: 40px; }
  .o_menu_item { padding-top: 6px; padding-bottom: 6px; }
  .o_menu_item_del { width: 40px; height: 40px; opacity: 1; }
  .o_dd_item.is-rich { min-height: 48px; }
  .o_zoom_btn { height: 40px; }
  .o_pill_btn { height: 40px; padding: 0 16px; }
  .o_pop_input { height: 40px; }
  .o_notification_close { position: relative; }
  .o_notification_close::after, .o_home_search_clear::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
  .o_home_search_clear { position: relative; }

  /* ---- control panel: buttons, pager, search box, view switcher ---- */
  .o_cp_btn, .o_cp_btn_sm { height: 40px; min-width: 40px; }
  .o_cp_btn_icon { width: 40px; padding: 0; }
  .o_cp_chip { position: relative; height: 36px; }
  .o_cp_chip::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
  .o_pager, .o_pager_btn { height: 40px; }
  .o_pager_btn { width: 40px; }
  .o_pager_value { min-width: 40px; min-height: 40px; height: 40px; }
  /* a facet is a 36 px chip whose remove button is a full 44 px target that reaches past the chip (so the chip no longer clips) */
  .o_searchview_facet { height: 36px; overflow: visible; }
  .o_facet_icon { border-radius: var(--odoo-radius) 0 0 var(--odoo-radius); }
  .o_facet_remove { width: 40px; height: 40px; margin: -4px -8px -4px 0; border-radius: 0 var(--odoo-radius) var(--odoo-radius) 0; background: transparent; }
  .o_facet_remove:hover { background: transparent; }
  .o_searchview_facet { align-items: center; }
  .o_facet_icon { align-self: stretch; }
  .o_switch_view { position: relative; width: 40px; height: 36px; }
  .o_switch_view::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }

  /* ---- views toolbars, list, kanban, pivot ---- */
  .odf-act-l button { min-width: 40px; }
  .ov-select,
.ov-input { height: 40px; min-width: 40px; }
  .ov-list-pager .ov-input { height: 40px; }
  .ov-btngrp > button { height: 40px; min-width: 40px; }
  .ov-btngrp > .ov-pager-pg { height: 40px; }
  .ov-seg > button { height: 40px; min-width: 40px; }
  .ov-link, .ov-batch-link { position: relative; min-width: 40px; text-align: center; }
  .ov-link::after, .ov-batch-link::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 40px; transform: translateY(-50%); }
  
  .ov-starbtn, .ov-kstar, .ov-optbtn, .ov-xbtn, .ov-kplus { position: relative; }
  .ov-starbtn::after, .ov-kstar::after, .ov-optbtn::after, .ov-xbtn::after, .ov-kplus::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
  .ov-list th.ov-th { height: 40px; }
  .ov-list td, .ov-list td.ov-grp-td { height: 40px; }
  .ov-list .cellinput { min-height: 36px; }
  .ov-input.num, .ov-list-pager .ov-input { min-width: 64px; }
  
  

  /* ---- checkboxes, radios and switches anywhere ---- */
  
  
  input.tgl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 52px; height: 40px; transform: translate(-50%, -50%); }
  .oc-check, label.cursor-pointer { min-height: 40px; }
  .oc-check input { position: relative; }
  input[type="range"] { min-height: 40px; }

  /* ---- everything else that is tapped in the pages, the dialogs and the side panels: 44 px high (tables, chips and kanban cards keep their
     own rules above, they get a 44 px hit area instead) ---- */
  body :is(button, select, textarea, input:is(:not([type]), [type="text"], [type="search"], [type="number"], [type="email"], [type="tel"], [type="url"], [type="password"], [type="date"], [type="datetime-local"], [type="time"])):not(.chip *, .ov-kcard *, .page *, .o_searchview *, .o_pager *, .o_switcher *, .odf-statusbar *, .odf-nav *, .oc-md, .oc-dn, .info-i, .ov-starbtn) { min-height: 40px; }
  .chip button { position: relative; }
  .chip button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
  .oc-dn { position: relative; }
  .oc-dn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
  .oc-md { min-height: 40px; }
  .oc-ib, .oc-ib-sm, .oc-grp .oc-ib, .oc-navgrp .oc-ib { width: 40px; height: 40px; }
  .oc-grp { flex-wrap: wrap; max-width: 100%; }
  .oc-btn, .oc-sel, .oc-pill { height: 40px; }
  .oc-ex { min-height: 40px; }
  .dnd-h { position: relative; }
  .dnd-h::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
  /* tag / unit pills in the forms: a 36 px pill with a hit area that reaches 4 px above and below */
  .odf button.px-2\.5.h-8.rounded-lg.border { position: relative; min-height: 38px; }
  .odf button.px-2\.5.h-8.rounded-lg.border::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
  input[type="color"] { min-width: 40px; min-height: 40px; }
  body button:not(.chip *, .ov-kcard *, .page *, .o_searchview *, .o_pager *, .o_switcher *, .odf-statusbar *, .odf-nav *, .oc-md, .oc-dn, .info-i, .ov-starbtn, .ov-kstar, .ov-optbtn, .dnd-h, .ov-kplus, .o_facet_remove, .o_notification_close, .odf-step, .odf-tab) { min-width: 40px; }
  .dnd-cell .dnd-cell-t, .dnd-chip .t { font-size: 12px; }
  .wa-btn { min-height: 40px; display: inline-flex; align-items: center; }

  /* ---- text of 12 px and more (the print previews are scaled copies of the PDF and keep their size) ---- */
  :is([class*="text-[9"], [class*="text-[10"], [class*="text-[11"]):not(.page *, svg *) { font-size: 12px; line-height: 1.4; }
  .ov-kcard .ov-tag, .ov-tag { font-size: 12px; height: 22px; line-height: 14px; }
  .ov-avatar, .o_avatar { font-size: 12px; }
  .o_systray_badge { font-size: 12px; line-height: 14px; min-width: 18px; padding: 2px 5px; }
  .o_app_count { font-size: 12px; }
  .odf-time, .odf-cnt, .ibwrap .cnt { font-size: 12px; }
  .ibwrap .cnt { min-width: 18px; height: 18px; }
  .oc-kpi-s { font-size: 12px; }
  .ov-kmove span { font-size: 12px; }
  .ov-kmove > button { width: 40px; height: 40px; }
  .ov-kfoot { min-height: 40px; }

  /* ---- (i) help icons: the glyph (a ::before) stays small, a ::after makes the hit area 44 px ---- */
  .info-i:not(.o-lbl.shrink-0 .info-i), .odf .info-i, .odlg .info-i, .odf-panes .info-i, .odf .o-lbl.shrink-0 .info-i, .odf .o-lbl .info-i { position: relative; }
  .info-i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
}

/* ================================================================================================================================
   2. SMALL SCREENS < 992 px
   ================================================================================================================================ */
@media (max-width: 991.98px) {
  /* ---- control panel: compact, search box on its own line, view switcher at the end of the button row ---- */
  .o_control_panel { padding: 4px 12px 8px; gap: 8px; }
  .o_cp_top { gap: 4px 12px; }
  .o_cp_top { min-height: 40px; }
  .o_breadcrumb_current { font-size: 16px; font-weight: 500; color: #000; }
  .o_cp_bottom { gap: 8px 12px; }

  /* the filters panel is a sheet at the bottom of the screen with its three sections stacked */
  .o_search_bar_menu { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; max-height: min(78dvh, 640px); margin: 0;
    border-radius: var(--odoo-radius-xl) var(--odoo-radius-xl) 0 0; border-bottom: 0; box-shadow: var(--odoo-popover-shadow); padding-bottom: env(safe-area-inset-bottom); z-index: 70; }
  .o_search_col { padding: 12px 8px 4px; }
  .o_search_backdrop { background: rgba(0, 0, 0, .35); z-index: 65; }
  /* every other popover that hangs off a button of the control panel fits the screen */
  .o_tools_menu, .o_act_menu, .o_qe_menu, .o_appsw_menu { width: min(320px, calc(100vw - 16px)); max-width: calc(100vw - 16px); }
  .ov-pop, .ov-pop-cols, .ov-pop-wide { max-width: calc(100vw - 16px); }
  .odf-menu { max-width: calc(100vw - 16px); }

  /* ---- scroll areas ---- */
  .ov-list-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .ov-list th.ov-cb, .ov-list td.ov-cb { padding-left: 10px; padding-right: 4px; }
  .ov-kanban { scroll-snap-type: x mandatory; scroll-padding-left: 0; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding-bottom: 24px; }
  .kcol.ov-kcol { scroll-snap-align: start; flex-basis: min(380px, calc(100vw - 40px)); width: min(380px, calc(100vw - 40px)); padding-left: 8px; padding-right: 8px; }
  .odf-nav, .odf-statusbar, .odf-smartgrp { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

  /* ---- form: single column, compact title, 44 px stage bar and tabs, the chatter below the sheet ---- */
  .odf-sheetbg { padding: 0 8px 12px; }
  .odf-status { padding: 0 12px 8px; }
  .odf-smartbox { justify-content: flex-start; padding: 0 12px 8px; }
  .odf-chatter { padding: 0 8px 48px; }
  .odf-title { font-size: 26px; line-height: 32px; }
  .odf-statusbar { height: 48px; }
  .odf-step { height: 40px; padding-top: 10px; padding-bottom: 10px; }
  .odf-smart { height: 40px; }
  .odf-tab { height: 40px; }
  .odf-gear { width: 40px; height: 40px; }
  .odf-bc-parent { min-height: 24px; }
  .odf-pager-b button { width: 40px; height: 40px; }
  .odf-ind { width: 40px; height: 40px; }
  
  .odf-title { min-height: 40px; }
  .odf-rib { transform: scale(.8); transform-origin: top right; }

  /* ---- dialogs: never taller than the visible screen (dvh excludes the browser bars), header and footer stay in view ---- */
  .o-modal .o-dlg { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
  .o-modal .o-dlg > :first-child { position: sticky; top: 0; z-index: 4; }
  .o-modal .o-dlg > [class~="border-t"]:last-child { position: sticky; bottom: 0; z-index: 4; padding-bottom: max(15.5px, env(safe-area-inset-bottom)); }
  
  
  
  .o-modal .o-dlg > :first-child button[aria-label="Close"] { width: 40px; height: 40px; flex-basis: 40px; margin-right: -8px; }
  .o_command_dialog { top: max(8px, env(safe-area-inset-top)); }
  .o_command_input { height: 40px; }
  .o_notif_menu { left: 8px; right: 8px; width: auto; max-width: none; top: calc(var(--odoo-navbar-h) + 2px); }

  /* ---- toasts are never wider than the screen ---- */
  .o_notification { width: auto; min-width: 0; max-width: 100%; }
  .o_notification_manager { left: 8px; right: 8px; max-width: none; align-items: stretch; }
}

/* ================================================================================================================================
   3. PHONES < 576 px
   ================================================================================================================================ */
@media (max-width: 575.98px) {
  /* ---- navbar: the app name gives way to the 44 px buttons ---- */
  .o_brand_icon { display: none; }
  .o_menu_brand { padding: 0 6px; }
  .o_navbar_btn { margin-left: 0; }
  .o_menu_systray { padding-right: 0; }

  /* ---- control panel ---- */
  .o_control_panel { padding-left: 8px; padding-right: 8px; }
  .o_switcher { display: flex; width: 100%; }
  .o_switch_view { flex: 1 1 0; min-width: 0; width: auto; }
  .o_cp_buttons { gap: 8px 6px; }

  /* ---- forms: labels above the fields ---- */
  .odf .fm-sections .o-row, .odf .fm-stacked .o-row, .odf .fm-three .o-row, .odf .fm-single .o-row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .odf-title { font-size: 24px; line-height: 30px; }
  .odf-avatar { width: 52px; height: 52px; }
  .odf-titlerow { gap: 12px; }
  .odf-titlerow.has-rib { padding-right: 56px; }

  /* ---- dialogs are bottom sheets ---- */
  .o-modal > .grid { padding: 0; align-items: end; place-items: end center; }
  .o-modal .o-dlg { max-width: none; width: 100%; border-radius: var(--odoo-radius-xl) var(--odoo-radius-xl) 0 0; border-bottom: 0; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .o-modal .o-dlg > :first-child { border-radius: var(--odoo-radius-xl) var(--odoo-radius-xl) 0 0; }
  #auditLog.o-modal .o-dlg { border-radius: var(--odoo-radius-xl) var(--odoo-radius-xl) 0 0; max-height: calc(100dvh - 16px); }
  .o-modal .o-backdrop { background: rgba(0, 0, 0, .4); }
  .o_burger_menu { width: min(320px, 88vw); }
}

/* ================================================================================================================================
   3b. SHORT TOUCH SCREENS in the desktop layout (landscape tablets): the navbar and the control panel together must not eat
   more than a quarter of the height, so the control panel scrolls away with the page (the navbar stays)
   ================================================================================================================================ */
@media (min-width: 992px) and (max-height: 760px) and (pointer: coarse) {
  .o_control_panel { position: static; }
  .odf-status { position: static; }
  section > .sticky.top-10.rail, .ov-batch.sticky { top: calc(var(--odoo-navbar-h) + 4px); }
}

/* ================================================================================================================================
   3c. SAFE AREAS (notch and home indicator when the app is installed to the home screen or the phone is turned sideways)
   ================================================================================================================================ */
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 991.98px), (pointer: coarse) {
    .o_control_panel { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
    .odf-cp, .odf-status, .odf-smartbox { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
    .odf-sheetbg, .odf-chatter { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
    .o_home_menu { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); padding-bottom: max(32px, env(safe-area-inset-bottom)); }
    .o_burger_menu { padding-left: env(safe-area-inset-left); }
    .o_burger_body { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
    .o_notification_manager { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    .o-modal .o-dlg { margin-left: env(safe-area-inset-left); margin-right: env(safe-area-inset-right); width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)); }
    main { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  }
}

/* ================================================================================================================================
   4. LANDSCAPE PHONES: little height, so the stacked header must not eat the screen
   ================================================================================================================================ */
@media (max-height: 480px) and (max-width: 991.98px) {
  .o-modal .o-dlg { max-height: calc(100dvh - 8px); }
  .o-modal > .grid { padding: 4px; }
  .o_search_bar_menu { max-height: 85dvh; }
  .o_command_list { max-height: 40vh; }
}