/* =====================================================================
   Responsive layer (loaded after kbt.css). Breakpoints used app-wide:
   1100px (laptop / tablet landscape), 900px (tablet -> drawer nav), 600px (phone), 400px (small phone).
   !important appears only where it must beat inline style="grid-template-columns" written in views.
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, canvas, video { max-width: 100%; }
img { height: auto; }
.grid > *, .card, .kpi > div, .page-head > *, .filter-bar > * { min-width: 0; }
.content { overflow-wrap: break-word; }
.tbl td .mono, .dl dd, .user-chip .name, .user-chip .role { overflow-wrap: anywhere; }
.table-wrap { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.tabs { overflow-x: auto; scrollbar-width: thin; }
.tabs a, .tabs button { white-space: nowrap; flex: none; }
.sidebar-mobile-links { display: none; }
.topbar-search, .topbar-search input[type=search] { min-width: 0; }
.topbar-actions { flex: none; }

/* Touch devices: comfortable targets without changing the desktop (mouse) density */
@media (pointer: coarse) {
    .icon-btn { width: 40px; height: 40px; }
    .btn-sm { height: 36px; }
    .nav-group > summary { padding: 11px 10px; }
    .nav-sub a { padding: 9px 8px; }
    .pill { padding: 8px 14px; }
    .tabs a, .tabs button { padding: 12px 14px; }
    .check input { width: 20px; height: 20px; }
}

/* Laptop / tablet landscape: fixed-track inline grids reflow instead of squeezing */
@media (max-width: 1100px) {
    .grid[style*="grid-template-columns"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important; }
}

/* Tablet and below: drawer navigation */
@media (max-width: 900px) {
    .sidebar { visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; overscroll-behavior: contain; }
    body.nav-open .sidebar { visibility: visible; transition-delay: 0s; }
    .setting-row[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 8px; }
    .tn-flow[style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .auth-form { padding: 28px 20px; }
    .page-head > .row { flex-wrap: wrap; }
    .cal-scroll { overflow-x: auto; }
    .cal-scroll > * { min-width: 640px; }
    .tn-cal { min-width: 640px; }
    .card-head { flex-wrap: wrap; }
}

/* Phone */
@media (max-width: 600px) {
    body { font-size: 14px; }
    h1 { font-size: 18px; }
    h2 { font-size: 15px; }
    .content { padding: 12px 12px 24px; }
    .card-head { padding: 12px 12px 8px; }
    .card-body { padding: 4px 12px 12px; }
    .card-foot { padding: 10px 12px; }
    .page-head { gap: 10px; align-items: stretch; }
    .page-head > .row { width: 100%; }
    .page-head > .row > .btn, .page-head > .row > details, .page-head > .row > form { flex: 1 1 auto; }
    .page-head > .row > details > summary { width: 100%; }
    .topbar-actions { gap: 2px; }
    .topbar-actions .tb-opt { display: none; }
    .sidebar-mobile-links { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 0; border-top: 1px solid rgba(255,255,255,.08); }
    .sidebar-mobile-links a { display: flex; align-items: center; gap: 10px; color: #d6e1f7; padding: 10px; border-radius: 8px; }
    .sidebar-mobile-links a:hover { background: rgba(255,255,255,.07); text-decoration: none; }
    .user-chip { margin-left: 0; padding: 2px; }
    .kpi { padding: 12px; gap: 10px; }
    .kpi-icon { width: 36px; height: 36px; }
    .kpi-value { font-size: 18px; overflow-wrap: anywhere; }
    .dl, .dl[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 10px; }
    .branch-row, .branch-row[style*="grid-template-columns"] { grid-template-columns: minmax(70px, 36%) minmax(0, 1fr) auto !important; gap: 8px; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar > form { display: flex; flex-wrap: wrap; gap: 8px; }
    .filter-bar input:not([type=checkbox]):not([type=radio]), .filter-bar select { width: 100%; max-width: 100%; min-width: 0 !important; }
    .filter-bar .btn { width: 100%; }
    /* 16px controls stop iOS Safari zooming the page on focus; larger targets for touch */
    .input, input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=number],
    input[type=tel], input[type=url], input[type=time], input[type=datetime-local], select, textarea { font-size: 16px; min-height: 42px; max-width: 100%; }
    .input-sm, select.input-sm { font-size: 16px; min-height: 38px; }
    input[type=file] { max-width: 100%; font-size: 14px; }
    .field input, .field select, .field textarea { width: 100%; }
    .setting-row select, .setting-row input[type] { width: 100%; }
    .btn { min-height: 40px; }
    #kbt-toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; }
    .kbt-details-card { width: calc(100vw - 24px); max-height: 88vh; max-height: 88dvh; }
    .kbt-details-row { grid-template-columns: 1fr; gap: 2px; }
    details.dropdown > .card { max-width: calc(100vw - 24px); }
    .auth-form { padding: 20px 16px; }
    .auth-form .inner { max-width: none; }
    .stepper { padding: 12px; }
    .tbl th, .tbl td { padding: 8px 9px; }

    /* Opt-in stacked-card tables: add class "tbl-stack" to a table.tbl; responsive.js adds data-label to cells */
    table.tbl.tbl-stack, .tbl-stack thead, .tbl-stack tbody, .tbl-stack tr, .tbl-stack td { display: block; width: 100%; }
    .tbl-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tbl-stack tbody tr { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 0 0 10px; background: #fff; overflow: hidden; }
    .tbl-stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right !important; border-bottom: 1px solid var(--border); padding: 8px 12px; background: transparent !important; }
    .tbl-stack td:last-child { border-bottom: 0; }
    .tbl-stack td::before { content: attr(data-label); flex: none; max-width: 42%; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); }
    .tbl-stack td:not([data-label])::before { display: none; }
    .tbl-stack td:not([data-label]) { justify-content: flex-end; }
    .tbl-stack td[colspan] { display: block; text-align: center !important; }
    .table-wrap:has(> .tbl-stack) { overflow: visible; padding: 10px; }
}

/* Small phone (320-400px) */
@media (max-width: 400px) {
    .topbar { padding: 0 8px; gap: 4px; }
    .topbar-search input[type=search] { padding-left: 32px; }
    .topbar-search .icon { left: 9px; }
    .icon-btn { width: 36px; height: 36px; }
    .btn { padding: 0 12px; }
    .page-head h1 { overflow-wrap: anywhere; }
}

/* Sub-navigation pills and segmented controls scroll sideways on phones instead of stacking into tall blocks */
.legend { flex-wrap: wrap; }
.seg { max-width: 100%; overflow-x: auto; }
@media (max-width: 600px) {
    .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
    .pills > .pill, .pills > a, .seg a, .seg button { flex: none; white-space: nowrap; }
}

/* Phone: inline-width controls and action rows must never exceed the viewport */
@media (max-width: 600px) {
    .row { flex-wrap: wrap; }
    .row > .input-icon, .input-icon { max-width: 100%; }
    input[style*="width"], select[style*="width"], .input-sm { max-width: 100%; }
    form.row > *, .row > .input-icon { flex: 1 1 140px; }
    .badge { white-space: normal; height: auto; min-height: 22px; padding-top: 2px; padding-bottom: 2px; }
}

/* Module board header: the icon strip wraps instead of forcing a 600px-wide card */
@media (max-width: 900px) {
    .board-head { flex-wrap: wrap; }
    .board-head > .card.row { flex-wrap: wrap; justify-content: center; max-width: 100%; }
}
.board-title { min-width: min(320px, 100%); }

/* Safety net: a table placed straight in a card body (no .table-wrap) scrolls inside the card instead of widening the page */
@media (max-width: 900px) {
    .card-body > table.tbl:not(.tbl-stack) { display: block; max-width: 100%; overflow-x: auto; }
}

/* Column spans written for desktop grids must not create implicit columns once the grid collapses */
@media (max-width: 900px) {
    .grid > [style*="grid-column"], .grid > .span-2 { grid-column: auto !important; }
}
@media (max-width: 600px) {
    .btn { white-space: normal; text-align: center; height: auto; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
    .btn-sm { min-height: 34px; }
}

/* Toolbars/filter rows wrap at every width (no effect unless they would otherwise overflow) */
.row { flex-wrap: wrap; }
.row > .input-icon { max-width: 100%; }

/* Long chips (e.g. segregation-of-duties warnings) wrap instead of forcing a 600px-wide page; UoM flow steps wrap on narrow screens */
@media (max-width: 900px) {
    .chip { white-space: normal; max-width: 100%; }
}
@media (max-width: 600px) {
    .uom-flow { flex-wrap: wrap; justify-content: center; }
}