/* =====================================================================
   MRA POS — Responsive Enhancements (2026-05-29)
   Additive breakpoint layer. Does NOT modify existing component CSS.
   Breakpoints: mobile <768, tablet 768–1024, desktop >1024.
   ===================================================================== */

/* =====================================================================
   GLOBAL DISPLAY SCALE — REMOVED 2026-05-29.
   body{zoom:0.85} shrank the UI but left a ~15vh WHITE STRIP glued to the
   bottom of every page. CSS zoom does not scale vh units cleanly, so the
   app shell rendered short and the page background showed through at the
   bottom. Reverted to 100% scale. To shrink the UI without this artifact,
   use the browser zoom (Ctrl + minus) or per-component sizing instead.
   ===================================================================== */
html { font-size: 16px; }

/* ---- Global: stop horizontal overflow, keep media fluid ---- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

/* ---- Wide tables scroll horizontally instead of breaking layout ---- */
.table-responsive,
.dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 1024px) {
    .content table.table,
    .box-body table.table { min-width: 560px; }   /* forces scroll inside the wrapper */
}

/* =====================================================================
   DASHBOARD HEADER — title + clock + chips + install
   ===================================================================== */
/* Right cluster reads as one tidy row (UI win #1) */
.dashboard-header .header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dashboard-header .header-right > * { align-self: center; }

/* (sticky header removed 2026-05-29 per request — header scrolls with the page) */

@media (max-width: 768px) {
    .dashboard-header { flex-direction: column; align-items: stretch; gap: 12px; }
    .dashboard-header .header-left { text-align: left; }
    .dashboard-header .header-right { justify-content: flex-start; }
    .dashboard-header h1 { font-size: 1.35rem; margin: 0; }
}

/* =====================================================================
   QUICK ACCESS GRID — responsive columns + touch targets
   ===================================================================== */
@media (min-width: 1025px) { .qa-grid { grid-template-columns: repeat(8, 1fr); } }
@media (min-width: 769px) and (max-width: 1024px) { .qa-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 481px) and (max-width: 768px)  { .qa-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .qa-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
.is-touch .qa-tile { min-height: 86px; }                 /* bigger tap targets on touch */
.is-touch .qa-tile-ctrl { width: 24px; height: 24px; }   /* easier delete/edit on touch */

/* =====================================================================
   AI INSIGHTS / BRIEFING — stack on small screens
   ===================================================================== */
@media (max-width: 768px) {
    .ai-dashboard-section > div { flex-direction: column !important; }
    .ai-dashboard-section > div > div { min-width: 0 !important; width: 100% !important; }
}

/* =====================================================================
   GENERAL SMALL-SCREEN SPACING
   ===================================================================== */
@media (max-width: 640px) {
    .dashboard-container { padding-left: 10px; padding-right: 10px; }
    .qa-section { padding: 12px; }
    .ai-health-chip { padding: 4px 10px; }
    .digital-clock { padding: 5px 12px; }
    .row { margin-left: -8px; margin-right: -8px; }
    .box-body { padding: 12px; }
}

/* =====================================================================
   MOBILE SIDEBAR DRAWER
   The header hamburger (.small-view-button) adds .small-view-side-active to
   .side-bar. Make that a proper left drawer below the lg breakpoint, and
   neutralise the modern sidebar's translateX(-100%) so it actually shows.
   ===================================================================== */
@media (max-width: 1023px) {
    .side-bar.small-view-side-active {
        display: flex !important;
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        width: 290px; max-width: 86vw;
        transform: none !important;          /* cancel the off-canvas translate */
        z-index: 1050 !important;
        box-shadow: 4px 0 28px rgba(0,0,0,0.28);
        overflow-y: auto;
    }
    .overlay { z-index: 1040; }
    /* full-width content when the sidebar is an overlay (not in flow) */
    .thetop > main { min-width: 0; width: 100%; }
}

/* =====================================================================
   TOUCH ERGONOMICS — larger hit areas for key floating controls
   ===================================================================== */
.is-touch .help-launcher { width: 56px; height: 56px; }
/* keep the help launcher + mobile sidebar FAB from stacking on top of each other */
@media (max-width: 1023px) {
    #sidebar-mobile-toggle { bottom: 84px !important; }   /* sit above the help launcher */
}

/* =====================================================================
   PRINT — already handled elsewhere; ensure no sticky header on print
   ===================================================================== */
@media print {
    .dashboard-header { position: static !important; }
}

/* =====================================================================
   Hide the floating bottom-left "+" (quick-create FAB) and floating
   "?" (help-launcher) on ALL pages (owner request 2026-05-31).
   They were only meant to be visible on the dashboard via header
   counterparts; the floating versions are now redundant everywhere.
   ===================================================================== */
#quick-create-btn,
#quick-create-menu,
.help-launcher {
    display: none !important;
}


/* =====================================================================
   Hide the PWA 'Install App' button system-wide (owner request 2026-05-31).
   Was rendering as a floating bottom-left button on non-dashboard pages
   and in the dashboard header on the home page.
   ===================================================================== */
#pwa-install-btn,
#pwa-install-slot,
.pwa-install-button,
.pwa-install-inline {
    display: none !important;
}

/* =====================================================================
   Make .content-header (AdminLTE-style page title on all non-dashboard
   pages) visually consistent with .dashboard-header (owner request
   2026-05-31). Same size, weight, padding, and modern flat treatment.
   ===================================================================== */
.content-header {
    padding: 16px 20px 14px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.content-header h1 {
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    color: #111827 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.content-header h1 small {
    font-size: 0.8rem !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
    margin-left: 0 !important;
}
.content-header .breadcrumb {
    margin: 6px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 12px;
    border-radius: 0;
}
@media (max-width: 640px) {
    .content-header { padding: 12px 14px 10px !important; }
    .content-header h1 { font-size: 1.25rem !important; }
}

/* =====================================================================
   Unified page header — single source of truth (2026-05-31).
   - .mra-page-header  → new shared partial (resources/views/layouts/partials/page-header.blade.php)
   - .content-header   → legacy AdminLTE markup (auto-styled to look identical)
   - .dashboard-header → custom dashboard markup (h1 size aligned)
   Edit the rules below once and every page reflects the change.
   ===================================================================== */
.mra-page-header,
.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 22px 16px !important;
    margin: 0 0 16px !important;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.mra-page-header .mph-left,
.content-header > * { display: flex; align-items: center; gap: 12px; }
.mph-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #2563eb;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
}
.mph-titles { min-width: 0; }
.mph-title,
.mra-page-header h1,
.content-header h1 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
}
.mph-subtitle,
.mra-page-header h1 small,
.content-header h1 small {
    display: block;
    font-size: 0.82rem !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
    margin: 2px 0 0 !important;
}
.mph-right,
.content-header > .pull-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mra-page-header .breadcrumb,
.content-header .breadcrumb {
    margin: 0 !important; padding: 0 !important;
    background: transparent !important; border-radius: 0;
    font-size: 12px; color: #6b7280;
}
.dashboard-header h1 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
}
@media (max-width: 640px) {
    .mra-page-header, .content-header { padding: 14px 16px 12px !important; }
    .mph-title, .mra-page-header h1, .content-header h1 { font-size: 1.25rem !important; }
    .mph-icon { width: 34px; height: 34px; font-size: 16px; }
}

/* =====================================================================
   SYSTEM-WIDE PAGE SHELL UNIFICATION (2026-05-31)

   Goal: every page (dashboard, modules, settings, etc.) looks like the
   homepage in terms of spacing, container styling, and card treatment.
   Edit the rules below ONCE and the entire system reflects the change.

   Targets:
     • section.content  → AdminLTE legacy page-body container
     • main.content-wrapper-modern → optional modern wrapper
     • .dashboard-container (kept for /home — same baseline padding now)
   ===================================================================== */

/* Consistent inner padding + soft background for the page body on every page. */
section.content,
.content-wrapper-modern {
    padding: 24px 24px 32px !important;
    background: transparent;
    min-height: calc(100vh - 64px);
}

/* Match the dashboard's padding rhythm */
.dashboard-container {
    padding: 24px 24px 32px !important;
}

/* All white panels / boxes used across pages get consistent rounded card style */
.box,
.panel,
section.content > .row > [class*="col-"] > .box,
section.content > .box {
    background: #fff;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    margin-bottom: 18px;
}
.box-header,
.panel-heading {
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 14px 18px !important;
    background: #fff !important;
    border-radius: 12px 12px 0 0 !important;
}
.box-body,
.panel-body {
    padding: 16px 18px !important;
}
.box-title,
.panel-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 !important;
}

/* AdminLTE removes the corner radius on .box that lives inside main — undo it */
.box.box-default,
.box.box-primary,
.box.box-info,
.box.box-warning,
.box.box-success,
.box.box-danger {
    border-top-width: 1px !important; /* drop the colored top accent */
}

/* Buttons: tighten/modernize across the system without overriding intent */
.btn { border-radius: 8px !important; font-weight: 500 !important; }
.btn-sm { padding: 4px 10px !important; }
.btn-primary { background-color: #2563eb !important; border-color: #2563eb !important; }
.btn-primary:hover { background-color: #1d4ed8 !important; border-color: #1d4ed8 !important; }
.btn-success { background-color: #16a34a !important; border-color: #16a34a !important; }
.btn-warning { background-color: #f59e0b !important; border-color: #f59e0b !important; color: #fff !important; }

/* Tables: modern look */
section.content .table,
.box-body .table {
    border-radius: 8px;
    overflow: hidden;
}
section.content .table > thead > tr > th {
    background: #f9fafb !important;
    color: #374151 !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Small-screen tightening */
@media (max-width: 640px) {
    section.content,
    .content-wrapper-modern,
    .dashboard-container { padding: 14px !important; }
    .box-header, .panel-heading { padding: 10px 12px !important; }
    .box-body, .panel-body { padding: 12px !important; }
}

/* =====================================================================
   SYSTEM-WIDE BACKGROUND + HEADER STYLE (2026-05-31)
   Apply the dashboard's blue/purple gradient backdrop to every page, and
   restyle .mra-page-header / .content-header as white-text-on-translucent
   dark cards so they match the homepage look exactly.
   ===================================================================== */

/* The shared backdrop. Same image the dashboard uses (fixed-attachment so it
   stays put while content scrolls). Path is relative to this CSS file. */
section.content,
.dashboard-container,
.content-wrapper-modern {
    background: url('../img/home.jpg') no-repeat center center fixed !important;
    background-size: cover !important;
}

/* Page header — translucent dark card with white text (matches .dashboard-header) */
.mra-page-header,
.content-header {
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18) !important;
}
.mph-title,
.mra-page-header h1,
.content-header h1 {
    color: #ffffff !important;
}
.mph-subtitle,
.mra-page-header h1 small,
.content-header h1 small {
    color: rgba(255, 255, 255, 0.78) !important;
}
.mph-icon {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

/* Page content panels: keep them white but add a stronger shadow so they
   stand out against the new dark gradient backdrop. */
.box, .panel, .dash-card,
section.content > .row > [class*="col-"] > .box,
section.content > .box {
    background: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10) !important;
}

/* Sidebar / top navbar already have their own backgrounds — leave them. */