/* ========================================================================
   MyBizMan UI Foundation — Phase 1
   Layout, navigation and responsive/mobile system.
   Component styling belongs in app-ui.css.
   ======================================================================== */
:root {
    --sidebar-width: 260px;
    --topbar-height: 56px;
    --mobile-topbar-height: 52px;
    --primary-color: #1e293b;
    --secondary-color: #2563eb;
    --accent-color: #dc2626;
    --page-bg: #f5f7fb;
    --surface: #ffffff;
    --border: #e2e8f0;
    --text: #1e293b;
    --muted: #64748b;
    --focus: rgba(37, 99, 235, .18);
}

html { min-height: 100%; }

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--page-bg);
    color: var(--text);
    overflow-x: hidden;
    padding-top: var(--topbar-height);
}

/* Top navigation */
#top-toolbar {
    position: fixed;
    inset: 0 0 auto;
    height: var(--topbar-height);
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: 0 .85rem;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(15,23,42,.06);
    backdrop-filter: blur(10px);
}

#top-toolbar .brand-text {
    min-width: 0;
    color: var(--primary-color);
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sidebarToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #334155;
    cursor: pointer;
}

#sidebarToggle:hover { background: #eff6ff; color: var(--secondary-color); }
#sidebarToggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.sidebar-toggle-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; font: 1.45rem/1 Arial,sans-serif; }

/* Sidebar */
.sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--topbar-height));
    z-index: 1000;
    display: flex;
    flex-direction: column;
    color: #fff;
    background: linear-gradient(180deg,#1e293b 0%,#0f172a 100%);
    box-shadow: 3px 0 14px rgba(15,23,42,.14);
    overflow: hidden;
    transform: translateX(0);
    transition: transform .22s ease;
}

body:not(.sidebar-open) .sidebar { transform: translateX(-100%); }
body.sidebar-open .sidebar { transform: translateX(0); }

.sidebar-brand {
    flex: 0 0 auto;
    padding: 1.15rem 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.1);
    background: rgba(0,0,0,.12);
}
.sidebar-brand h4 { margin: 0; color:#fff; font-weight: 750; }
.sidebar-brand small { font-size:.78rem; opacity:.78; }

.nav-menu { flex: 1 1 auto; min-height: 0; padding: .7rem 0; overflow-y: auto; overscroll-behavior: contain; }
.nav-item { position: relative; }
.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 42px;
    padding: .65rem 1.15rem;
    color: rgba(255,255,255,.84);
    border-left: 3px solid transparent;
    transition: background .16s ease,color .16s ease,border-color .16s ease;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active { color:#fff; background:rgba(255,255,255,.08); border-left-color:#60a5fa; text-decoration:none; }
.sidebar .nav-link i { flex: 0 0 1.2rem; width:1.2rem; text-align:center; }

.has-submenu > .nav-link[data-toggle="collapse"] { position:relative; padding-right:38px !important; }
.has-submenu > .nav-link[data-toggle="collapse"]::after {
    content:"›";
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    color:#94a3b8;
    font-size:18px;
    line-height:1;
    transition: transform .18s ease;
}
.has-submenu > .nav-link[data-toggle="collapse"].active::after,
.has-submenu > .nav-link[data-toggle="collapse"][aria-expanded="true"]::after { content:"⌄"; color:#fff; }
.has-submenu > .nav-link[data-toggle="collapse"]:hover::after { color:#fff; }

.submenu { display:none; padding-left:1.1rem; background:rgba(0,0,0,.14); }
.submenu.show,.submenu.collapse.show { display:block; }
.submenu .nav-link { min-height:36px; padding:.5rem .8rem; font-size:.89rem; border-left-width:2px; }
.submenu .nav-link:hover { border-left-color:#f87171; }

.sidebar-footer { flex: 0 0 auto; padding:.7rem 0; border-top:1px solid rgba(255,255,255,.1); }
.sidebar-footer .nav-link { min-height:38px; padding:.5rem 1.15rem; font-size:.92rem; }

/* Main document area */
.main-content {
    flex: 1 0 auto;
    width: 100%;
    min-width: 0;
    margin-left: 0;
    padding: 1.15rem;
    transition: margin-left .22s ease,width .22s ease;
}
body.sidebar-open .main-content { margin-left:var(--sidebar-width); width:calc(100% - var(--sidebar-width)); }
.content-wrapper { width:100%; min-width:0; }
.main-content.full-width { margin-left:0 !important; width:100% !important; }

.stat-card { background:#fff; border-radius:10px; padding:1.15rem; margin-bottom:1rem; box-shadow:0 2px 10px rgba(15,23,42,.06); border-left:4px solid var(--secondary-color); }
.stat-card.warning { border-left-color:#f59e0b; }
.stat-card.danger { border-left-color:#dc2626; }
.stat-card.success { border-left-color:#16a34a; }

.page-header { margin-bottom:1.15rem; padding-bottom:.75rem; border-bottom:1px solid var(--border); }
.page-header h1 { margin:0; color:var(--primary-color); font-size:1.55rem; line-height:1.25; }

/* Footer stays in document flow and never overlays forms/tables. */
.footer {
    flex: 0 0 auto;
    width:100%;
    margin-left:0;
    padding:.45rem 0;
    min-height:36px;
    background:var(--surface);
    border-top:1px solid var(--border);
    font-size:.82rem;
    line-height:1.25;
    white-space:normal !important;
    transition: margin-left .22s ease,width .22s ease;
}
body.sidebar-open .footer { margin-left:var(--sidebar-width); width:calc(100% - var(--sidebar-width)); }
.footer .container-fluid { max-width:100%; padding-top:.3rem; padding-bottom:.3rem; }

/* Reusable safe overflow wrappers */
.mobile-scroll-x,
.table-responsive,
.dataTables_wrapper { min-width:0; }
.mobile-scroll-x { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.mobile-scroll-x > * { min-width:max-content; }

/* Keep invoice grids intentional: stack only at mobile, never globally. */
@media (min-width:769px) {
    body:not(.sidebar-open) .sidebar { transform:translateX(0); }
    body:not(.sidebar-open) .main-content,
    body:not(.sidebar-open) .footer { margin-left:var(--sidebar-width); width:calc(100% - var(--sidebar-width)); }
    body.sidebar-collapsed .sidebar { transform:translateX(-100%); }
    body.sidebar-collapsed .main-content,
    body.sidebar-collapsed .footer { margin-left:0; width:100%; }
    body.sidebar-open::after { display:none; }
}

@media (max-width:768px) {
    body { padding-top:var(--mobile-topbar-height); }
    #top-toolbar { height:var(--mobile-topbar-height); padding:0 .45rem; }
    #top-toolbar .brand-text { font-size:.95rem; }
    #top-toolbar .text-muted.small { display:none !important; }

    .sidebar { top:var(--mobile-topbar-height); width:min(86vw,320px); height:calc(100vh - var(--mobile-topbar-height)); }
    body.sidebar-open::after {
        content:"";
        position:fixed;
        inset:var(--mobile-topbar-height) 0 0;
        z-index:900;
        background:rgba(15,23,42,.38);
    }

    .main-content { padding:.7rem .6rem; }
    .footer { font-size:.72rem; }
    .footer .row { justify-content:center; row-gap:.15rem; }
    .footer .col-12 { flex:0 0 auto; width:auto; padding:0 .4rem; text-align:center; }
    .footer .col-md-6 { width:auto; flex:0 0 auto; text-align:center !important; }
    .footer .badge { font-size:.65rem; padding:.2rem .4rem; }
    .footer .text-muted.ms-2 { margin-left:.25rem !important; font-size:.65rem; }

    .page-header { margin-bottom:.8rem; padding-bottom:.65rem; }
    .page-header h1 { font-size:1.3rem; }

    /* Do NOT force every Bootstrap column to 100%. Bootstrap-style
       col-md-* should stack naturally only because their base width is 100%.
       Explicit .col-6/.col-4 layouts remain useful on small screens. */
    .container,.container-fluid { padding-left:8px; padding-right:8px; }
    .row { margin-left:-7px; margin-right:-7px; }
    .row > * { padding-left:7px; padding-right:7px; }

    .btn { min-height:40px; }
    .form-control,.form-select { min-height:40px; }
    .input-group > .btn { min-height:40px; }

    .action-toolbar,
    .report-filter-actions { gap:.5rem !important; flex-wrap:wrap; }
    .action-toolbar > *,
    .report-filter-actions > * { min-width:0; }

    .modal-dialog { margin:.65rem; }
    .modal-content { max-height:calc(100vh - 1.3rem); overflow:hidden; }
    .modal-body { overflow-y:auto; }

    .table-responsive { margin-bottom:.65rem; border-radius:.55rem; }
    .table-responsive > .table { margin-bottom:0; }
    .table th,.table td { padding:.55rem .5rem; }

    /* Make dense filter bars usable on phones without destroying the grid. */
    .filter-card .row,
    .report-filter .row { row-gap:.25rem; }
}

@media (max-width:430px) {
    .main-content { padding:.55rem .4rem; }
    .container,.container-fluid { padding-left:5px; padding-right:5px; }
    .row { margin-left:-5px; margin-right:-5px; }
    .row > * { padding-left:5px; padding-right:5px; }
    .page-header h1 { font-size:1.2rem; }
    .sidebar { width:min(90vw,320px); }
}

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}