/* =============================================================================
   TagMyMachine — Responsive + Desktop Density CSS
   Updated: 2026-05-13
   Goals:
     1. 100% responsive on phones (small, medium, tablet)
     2. Compact desktop layout — pages must fit in a normal browser window
        without manual zoom-out
     3. Sidebar collapses on phones via hamburger button
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. DESKTOP DENSITY — global base font scale.
   Bootstrap 5 defaults to 16px which makes the admin feel oversized on
   1366×768 / 1440×900 screens that small businesses commonly use. Drop the
   base to 14px so the same DOM occupies less area, and tighten paddings.
   ----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   A. DASHBOARD METRIC CARDS — !important override
   These were defined inline in dashboard.php with huge padding (25px) and
   2.5rem h3. Loaded AFTER this file, so they normally win. !important forces
   our compact version to apply even if dashboard.php wasn't re-uploaded.
   ----------------------------------------------------------------------------- */
.metric-card {
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
.metric-card h3 {
    font-size: 1.55rem !important;
    margin: 0 !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}
.metric-card p {
    margin: 3px 0 0 0 !important;
    font-size: 0.72rem !important;
}
.row.mb-4 { margin-bottom: 12px !important; }
.col-md-6.mb-3 { margin-bottom: 8px !important; }
.dashboard-section { margin-bottom: 16px !important; }
.section-title {
    font-size: 1rem !important;
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
}
.dashboard-section a[style*="padding: 20px"] {
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
}


/* -----------------------------------------------------------------------------
   B. SIDEBAR SCROLLBAR — wide, blue, always visible.
   Updated 2026-05-13d — previous 8px was too subtle.
   ----------------------------------------------------------------------------- */
.sidebar {
    overflow-y: scroll !important;   /* always show the bar, never auto-hide */
    overflow-x: hidden !important;
    scrollbar-width: thin;              /* Firefox */
    scrollbar-color: #4f9cf9 #1a1f2e;   /* Firefox: thumb + track */
}
.sidebar::-webkit-scrollbar { width: 12px; background: #0e1320; }
.sidebar::-webkit-scrollbar-track { background: #0e1320; }
.sidebar::-webkit-scrollbar-thumb {
    background: #4f9cf9;
    border-radius: 6px;
    border: 2px solid #0e1320;        /* small gap so thumb stands out */
    min-height: 50px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: #6cb0fa; }


/* -----------------------------------------------------------------------------
   C. TABLE ACTION BUTTONS — keep horizontal, shrink so rows don't stack
   The User Management page (and others) put 4–6 buttons in <div class="btn-group btn-group-sm">.
   On narrow columns they were wrapping vertically, making rows 3× tall.
   Force them inline-flex nowrap with tighter padding so they sit side-by-side.
   ----------------------------------------------------------------------------- */
.table .btn-group,
.table .btn-group-sm {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}
.table .btn-group .btn,
.table .btn-group-sm .btn {
    padding: 3px 7px !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    border-radius: 3px;
}
.table .btn-group .btn i,
.table .btn-group-sm .btn i {
    font-size: 0.75rem;
    margin-right: 2px;
}
/* On narrow viewports, hide button text — keep just the icon */
@media (max-width: 1200px) {
    .table .btn-group .btn span,
    .table .btn-group-sm .btn span,
    .table .btn-group .btn::after { display: none; }
}
/* Tighten row vertical padding so user list isn't a 120px-per-row monster */
.table tbody td { vertical-align: middle; }


html { font-size: 15px; }
@media (min-width: 1600px) { html { font-size: 16px; } }
@media (min-width: 2000px) { html { font-size: 17px; } }

body { font-size: 0.95rem; }

:root {
    --sidebar-width: 220px;    /* was 230px — slightly slimmer */
}
/* Ultra-compact sidebar — fit all 18 items + 7 section headers in ~600px */
.sidebar-brand { padding: 8px 14px 6px !important; }
.sidebar-brand h5 { font-size: 0.88rem !important; margin: 0 !important; }
.sidebar-brand small { font-size: 0.6rem !important; }
.sidebar nav a {
    font-size: 0.76rem !important;
    padding: 3px 14px !important;          /* was 5px → 3px vertical */
    line-height: 1.15 !important;
    gap: 8px !important;
    border-left-width: 2px !important;
}
.sidebar nav a i { font-size: 0.76rem !important; width: 15px !important; }
.sidebar-section {
    font-size: 0.56rem !important;
    padding: 4px 12px 0 !important;         /* was 6px 12px 1px */
    letter-spacing: 0.7px !important;
    margin-top: 2px !important;
}
.sidebar .sidebar-footer { padding: 2px 0 !important; border-top-width: 1px !important; }
.sidebar .sidebar-footer a {
    padding: 4px 14px !important;
    font-size: 0.76rem !important;
    gap: 8px !important;
}

.topbar       { padding: 10px 20px !important; }
.main-content { padding: 18px !important; }
.card-body    { padding: 16px; }
.card-header  { padding: 11px 16px; }
.form-label   { margin-bottom: 3px; font-size: 0.88rem; }
.form-control, .form-select { font-size: 0.93rem; padding: 7px 11px; }
.btn          { font-size: 0.9rem; padding: 6px 14px; }
.btn-sm       { font-size: 0.82rem; padding: 4px 10px; }
.table        { font-size: 0.92rem; }
.table th, .table td { padding: 8px 10px; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }


/* -----------------------------------------------------------------------------
   1. Generic table improvements (all viewports)
   ----------------------------------------------------------------------------- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.table-responsive::-webkit-scrollbar { height: 6px; }
.table-responsive::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; }

/* Make Bootstrap rows / cols stack cleanly without horizontal scroll caused by
   negative margins on small screens */
@media (max-width: 576px) {
    .row { margin-left: -6px; margin-right: -6px; }
    .row > [class*="col-"] { padding-left: 6px; padding-right: 6px; }
}


/* -----------------------------------------------------------------------------
   2. Sticky first column on scrollable tables
   ----------------------------------------------------------------------------- */
.table-responsive table.table-sticky-first th:first-child,
.table-responsive table.table-sticky-first td:first-child {
    position: sticky; left: 0; background: #fff; z-index: 5;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
}
.table-responsive table.table-sticky-first thead th:first-child {
    background: #1a1f2e; color: #fff;
}


/* -----------------------------------------------------------------------------
   3. Sticky table header
   ----------------------------------------------------------------------------- */
.table-responsive table.table-sticky-head thead th {
    position: sticky; top: 0; z-index: 4;
}


/* -----------------------------------------------------------------------------
   4. Hide low-priority columns on small screens.
   ----------------------------------------------------------------------------- */
@media (max-width: 992px) { .d-tablet-hide { display: none !important; } }
@media (max-width: 768px) { .d-mobile-hide { display: none !important; } }
@media (max-width: 480px) { .d-xs-hide     { display: none !important; } }


/* -----------------------------------------------------------------------------
   5. Compact tables on phones
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .table-responsive .table { font-size: 0.78rem; }
    .table-responsive .table th, .table-responsive .table td {
        padding: 5px 7px; white-space: nowrap;
    }
    .table-responsive .table .badge { font-size: 0.62rem; padding: 2px 5px; }
    .table-responsive .table .btn-sm,
    .table-responsive .table .btn    { padding: 2px 6px; font-size: 0.72rem; }
}


/* -----------------------------------------------------------------------------
   6. Sidebar collapses on phones — hamburger toggle
   ----------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease-out;
        width: 260px;
    }
    .sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.25);
    }
    .main-wrapper { margin-left: 0 !important; }
    .topbar { padding-left: 56px !important; position: relative; }

    .mobile-toggle {
        display: inline-flex !important;
        position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
        width: 36px; height: 36px;
        align-items: center; justify-content: center;
        background: #1a1f2e; color: #fff; border: none;
        border-radius: 4px; font-size: 1rem;
    }

    .sidebar-backdrop {
        display: block; position: fixed; inset: 0;
        background: rgba(0, 0, 0, 0.4); z-index: 999;
    }
}
.mobile-toggle    { display: none; }
.sidebar-backdrop { display: none; }


/* -----------------------------------------------------------------------------
   7. Topbar adapts: hide search field on small phones, shrink user info
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .topbar { gap: 6px; flex-wrap: wrap; padding: 8px 14px !important; padding-left: 56px !important; }
    .topbar .page-title { font-size: 0.88rem; flex: 1 1 100%; order: -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar .user-info  { gap: 6px; }
    .topbar .user-info .avatar { width: 30px; height: 30px; font-size: 0.78rem; }
    .topbar .user-info > div:not(.avatar) { display: none; }
    #globalSearch { font-size: 0.85rem; }
}
@media (max-width: 576px) {
    .topbar > div[style*="width:280px"] { display: none !important; }
    /* Hide global search on small phones — accessible via hamburger menu later */
}


/* -----------------------------------------------------------------------------
   8. Forms — stack and pad correctly on phones
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .container, .container-fluid { padding-left: 10px; padding-right: 10px; }
    .main-content { padding: 12px !important; }
    .card-body    { padding: 12px; }
    .form-control, .form-select {
        font-size: 16px !important;       /* prevent iOS zoom on focus */
    }
    h1, h2 { font-size: 1.3rem; }
    h3, h4 { font-size: 1.1rem; }
    h5, h6 { font-size: 0.95rem; }
    .btn-lg { font-size: 0.95rem; padding: 8px 14px; }
}


/* -----------------------------------------------------------------------------
   9. Stat / dashboard cards — 2-column then 1-column on tiny phones
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .stat-card, .col-xl-3.col-md-6 { margin-bottom: 8px !important; }
    .stat-card h2 { font-size: 1.3rem; }
    .stat-card .fs-1 { font-size: 1.5rem !important; }
}
@media (max-width: 420px) {
    .row > .col-md-6, .row > .col-sm-6 { flex: 0 0 100%; max-width: 100%; }
}


/* -----------------------------------------------------------------------------
   10. Modal full-width on phones
   ----------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .modal-dialog { margin: 0; max-width: 100%; height: 100%; }
    .modal-content { border-radius: 0; min-height: 100vh; }
    .modal-body { padding: 12px; }
}


/* -----------------------------------------------------------------------------
   11. Action button column — wrap, don't overflow
   ----------------------------------------------------------------------------- */
.table .text-nowrap.actions { white-space: normal !important; }
.table .actions .btn { margin: 1px; }


/* -----------------------------------------------------------------------------
   12. Daily Jobs page — wide 13-column table
   ----------------------------------------------------------------------------- */
.daily-jobs-table { min-width: 1100px; }
@media (max-width: 992px) { .daily-jobs-table { font-size: 0.76rem; } }


/* -----------------------------------------------------------------------------
   13. Login card — full-width on phones, never overflow viewport
   ----------------------------------------------------------------------------- */
@media (max-width: 576px) {
    body.login-page, body:has(.login-card) {
        padding: 10px;
    }
    .login-card { margin: 0 8px; }
    .login-card .card-header { padding: 1.25rem !important; }
    .login-card h4 { font-size: 1.05rem; }
    .login-card .card-body { padding: 1.25rem !important; }
}


/* -----------------------------------------------------------------------------
   14. Buttons row — break onto multiple lines instead of overflowing card
   ----------------------------------------------------------------------------- */
.btn-group, .btn-toolbar { flex-wrap: wrap; gap: 4px; }


/* -----------------------------------------------------------------------------
   15. Images and embeds never overflow their container
   ----------------------------------------------------------------------------- */
img, video, iframe, canvas { max-width: 100%; height: auto; }


/* -----------------------------------------------------------------------------
   16. Print — hide nav/sidebar/buttons
   ----------------------------------------------------------------------------- */
@media print {
    .sidebar, .topbar, .btn, .pagination, .alert-dismissible .btn-close,
    .mobile-toggle, .sidebar-backdrop { display: none !important; }
    .main-wrapper { margin-left: 0 !important; }
    .main-content { padding: 0 !important; }
    .table { font-size: 11px; }
    body { background: #fff !important; }
}