/* ==========================================================================
   Frontida Pharmaceutical — Application-wide responsive layer
   2026-08-21
   Loaded after page-specific styles so desktop layouts keep their design while
   tablet/phone layouts gain safe wrapping, scrollable tables, fitted modals,
   and mobile navigation.
   ========================================================================== */

:root{
  --frontida-mobile-gutter:14px;
  --frontida-table-scrollbar:rgba(28,92,55,.22);
}

html{
  width:100%;
  max-width:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

img,svg,video,canvas,iframe{
  max-width:100%;
}

img,video{
  height:auto;
}

input,select,textarea,button{
  box-sizing:border-box;
  max-width:100%;
}

/* Generic scroll wrapper added by frontida-responsive.js. */
.frontida-responsive-table{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--frontida-table-scrollbar) transparent;
}
.frontida-responsive-table > table{
  margin:0;
}
.frontida-responsive-table::-webkit-scrollbar{height:8px}
.frontida-responsive-table::-webkit-scrollbar-thumb{
  background:var(--frontida-table-scrollbar);
  border-radius:999px;
}

/* Make flex/grid children shrink instead of forcing the whole viewport wider. */
.container,
.shell,
.wrap,
.page-wrap,
.section-shell,
.hr-shell,
.hr-card,
.card,
.panel,
.modal-content,
.modal-card,
.modal-shell,
.hr-modal-dialog{
  min-width:0;
}

/* --------------------------------------------------------------------------
   HR header: dedicated mobile menu for the custom HR top bar.
   -------------------------------------------------------------------------- */
.frontida-hr-nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:40px;
  padding:0 11px;
  border:1px solid rgba(57,126,6,.22);
  border-radius:12px;
  background:#fff;
  color:#173325;
  font:900 12.5px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  cursor:pointer;
  flex:0 0 auto;
}
.frontida-hr-nav-toggle-bars{
  position:relative;
  width:17px;
  height:12px;
  border-top:2px solid currentColor;
  border-bottom:2px solid currentColor;
}
.frontida-hr-nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;right:0;top:4px;
  border-top:2px solid currentColor;
}

/* Fallback toggle styling for pages that use .topbar but do not load the
   dedicated unified-header stylesheet. */
.frontida-nav-toggle{
  box-sizing:border-box;
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  :root{--frontida-mobile-gutter:12px}

  .container,
  .shell,
  .wrap,
  .page-wrap,
  .section-shell{
    max-width:100% !important;
  }

  /* Standard application header. This also serves as a fallback on pages that
     forgot to load frontida-header-unified.css. */
  .topbar .topbar-inner{
    position:relative;
    flex-wrap:wrap !important;
    gap:8px 10px !important;
  }
  .topbar .brand{
    min-width:0 !important;
    max-width:calc(100% - 58px) !important;
    flex:1 1 auto !important;
  }
  .frontida-nav-toggle{
    flex:0 0 auto !important;
    margin-left:auto !important;
  }
  .topbar .nav,
  .topbar nav.nav,
  .topbar .actions{
    display:none !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:6px 0 3px !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:8px !important;
    overflow:visible !important;
  }
  .topbar.is-nav-open .nav,
  .topbar.is-nav-open nav.nav,
  .topbar.is-nav-open .actions{
    display:grid !important;
  }
  .topbar .nav > a.btn,
  .topbar .nav > button.btn,
  .topbar .nav > details,
  .topbar .nav > .menu,
  .topbar .nav > .btn-badge-wrap,
  .topbar .actions > a.btn,
  .topbar .actions > button.btn,
  .topbar .actions > form,
  .topbar .actions > form > .btn{
    width:100% !important;
    max-width:none !important;
  }

  /* HR custom header */
  .hr-topbar-inner{
    position:relative;
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:8px 10px !important;
    padding:9px 0 !important;
  }
  .hr-brand{
    min-width:0 !important;
    max-width:calc(100% - 60px) !important;
    flex:1 1 auto !important;
    gap:9px !important;
  }
  .hr-brand > div{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
  }
  .hr-brand small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .hr-brand img{
    flex:0 0 auto;
    height:30px !important;
    max-width:105px;
    object-fit:contain;
  }
  .frontida-hr-nav-toggle{
    display:inline-flex;
    margin-left:auto;
  }
  .hr-nav{
    display:none !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:6px 0 3px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    overflow:visible !important;
  }
  .hr-topbar.is-nav-open .hr-nav{
    display:grid !important;
  }
  .hr-nav > .btn,
  .hr-nav > .pill,
  .hr-nav > .hr-nav-dd{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
  .hr-nav > .pill{
    display:flex !important;
    justify-content:flex-start !important;
    grid-column:1/-1;
  }
  .hr-nav-dd{
    display:block !important;
    position:relative !important;
  }
  .hr-nav-dd > summary.btn{
    width:100% !important;
  }
  .hr-nav-dd-menu{
    position:static !important;
    inset:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin-top:6px !important;
    box-shadow:none !important;
  }
  .hr-nav-dd-menu a{
    white-space:normal !important;
    overflow-wrap:anywhere;
  }

  /* Common two-column layouts should become one column on tablet. */
  .hr-two-pane,
  .form-main,
  .form-sidebar{
    min-width:0;
  }

  /* Responsive modals */
  .modal,
  .hr-modal,
  [class*="modal-overlay"],
  [class*="dialog-overlay"]{
    max-width:100vw;
  }
  .modal-content,
  .modal-card,
  .modal-shell,
  .dialog,
  .dialog-card,
  .hr-modal-dialog{
    width:min(100%,calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    max-height:calc(100dvh - 24px) !important;
    overflow:auto;
  }

  /* Toolbars and action rows may wrap instead of pushing off-screen. */
  .actions,
  .btn-row,
  .row-actions,
  .panel-actions,
  .modal-actions,
  .toolbar,
  .toolbar-actions,
  .filter-actions,
  .topbar-actions,
  .mobile-actions{
    max-width:100%;
    flex-wrap:wrap !important;
  }

  /* Filters */
  .filters,
  .filterbar,
  .hr-filterbar,
  .filters-wrap,
  .filter-row,
  .search-row{
    max-width:100%;
  }
}

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  body{
    font-size:14px;
  }

  /* Prevent iOS/Safari form zoom and keep controls finger-friendly. */
  input,
  select,
  textarea{
    font-size:16px !important;
  }

  .container,
  .shell,
  .wrap,
  .page-wrap,
  .section-shell{
    width:calc(100% - (var(--frontida-mobile-gutter) * 2)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hr-shell{
    width:calc(100% - 20px) !important;
    max-width:none !important;
  }

  .hr-page{
    padding-top:14px !important;
    padding-bottom:28px !important;
  }

  .hr-page .hr-card,
  .hr-dashboard-section,
  .card,
  .panel{
    max-width:100%;
  }

  /* HR navigation becomes a clean vertical mobile menu. */
  .hr-nav{
    grid-template-columns:1fr !important;
    max-height:calc(100dvh - 76px);
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }
  .hr-nav > .pill{
    grid-column:auto;
  }
  .hr-brand small{
    font-size:10px !important;
  }

  /* Common grids used throughout Admin, Sales, Accounting, Logistics,
     Purchaser, Bookkeeper and HR pages. */
  .grid2,
  .cols,
  .contact-grid,
  .detail-grid,
  .meta-grid,
  .form-grid,
  .modal-grid,
  .summary-grid,
  .soa-grid,
  .chart-grid,
  .kpi-grid,
  .filter-grid,
  .checkgrid,
  .check-grid,
  .daily-odo-grid,
  .stats-row,
  .filters-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .hr-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .hr-grid > [class*="hr-col-"]{
    grid-column:1/-1 !important;
  }

  .hr-form-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .hr-record-summary,
  .hr-applicant-details{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .hr-dashboard-hero{
    padding:17px !important;
    gap:16px !important;
  }
  .hr-dashboard-hero h1{
    font-size:clamp(24px,8.4vw,32px) !important;
  }
  .hr-dashboard-pulse{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .hr-dashboard-module-grid,
  .hr-dashboard-company-grid,
  .hr-dashboard-action-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .hr-dashboard-module-metrics.three{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .hr-title-row,
  .hr-section-title,
  .page-title-row,
  .filter-head{
    min-width:0;
  }

  .hr-section-title{
    align-items:flex-start !important;
    flex-wrap:wrap !important;
  }

  .hr-filterbar,
  .filters,
  .filterbar,
  .filters-wrap,
  .filter-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    gap:10px !important;
  }
  .hr-filterbar .hr-field,
  .filters .filter-group,
  .filterbar .filter-group,
  .filter-field,
  .filter-control,
  .filter-input{
    min-width:0 !important;
    width:100% !important;
  }

  .actions,
  .btn-row,
  .row-actions,
  .panel-actions,
  .modal-actions,
  .toolbar-actions,
  .filter-actions{
    gap:8px !important;
  }

  /* Modal padding + bottom buttons */
  .hr-modal,
  .modal,
  [class*="modal-overlay"],
  [class*="dialog-overlay"]{
    padding:8px !important;
    align-items:flex-start !important;
  }
  .hr-modal-dialog,
  .modal-content,
  .modal-card,
  .modal-shell,
  .dialog,
  .dialog-card{
    width:100% !important;
    max-width:100% !important;
    max-height:calc(100dvh - 16px) !important;
    margin:0 !important;
    border-radius:15px !important;
  }
  .hr-modal-panel{
    padding:14px !important;
  }

  /* Full-width forms should never overflow because of fixed child widths. */
  form,
  fieldset{
    max-width:100%;
  }

  /* Responsive table wrapper gets a subtle edge cue on phones. */
  .frontida-responsive-table,
  .table-wrap,
  .hr-table-wrap,
  .tbl-wrap,
  .clients-table-wrap,
  .table-shell{
    max-width:100%;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  table{
    max-width:none;
  }

  /* Do not squeeze action buttons below a usable tap target. */
  .btn,
  button,
  input[type="submit"],
  input[type="button"]{
    min-height:40px;
  }

  /* Long values/labels must wrap instead of widening the page. */
  td,
  th,
  .card,
  .panel,
  .hr-card,
  .hr-notice,
  .hr-action-item{
    overflow-wrap:anywhere;
  }
}

/* Small phones such as 320px wide devices. */
@media (max-width:420px){
  :root{--frontida-mobile-gutter:10px}

  .hr-brand img{
    height:28px !important;
    max-width:92px !important;
  }
  .hr-brand > div{
    font-size:13px !important;
  }
  .hr-brand small{
    display:none !important;
  }
  .frontida-hr-nav-toggle{
    width:40px;
    padding:0;
  }
  .frontida-hr-nav-toggle-label{
    display:none;
  }

  .hr-dashboard-pulse{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .hr-dashboard-module-metrics,
  .hr-dashboard-module-metrics.three{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .hr-dashboard-hero-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
  }
  .hr-dashboard-hero-actions .btn{
    width:100% !important;
  }

  .hr-pad,
  .hr-dashboard-section{
    padding:13px !important;
  }

  .hr-title-row h1{
    font-size:21px !important;
  }
}

/* Landscape phones / short screens: keep mobile menus reachable. */
@media (max-height:520px) and (max-width:900px){
  .hr-nav,
  .topbar .nav,
  .topbar nav.nav,
  .topbar .actions{
    max-height:calc(100dvh - 64px) !important;
    overflow-y:auto !important;
  }
}

@media print{
  .frontida-hr-nav-toggle,
  .frontida-nav-toggle{
    display:none !important;
  }
  .frontida-responsive-table{
    overflow:visible !important;
  }
}