/* Burraq ISO System Custom Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');

/* Keep the interface compact on laptop-sized dashboards. Tailwind's rem
   spacing and type scale inherit this value, so the adjustment is uniform. */
html {
    font-size: 15px;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #020617;
    color: #f8fafc;
    /* Standards-based dark-mode hint (distinct from the invert() fix
       below, which only covers WebKit/Blink) — lets Firefox render native
       form controls (date/time picker icon, scrollbars) in a dark-
       appropriate palette too. Overridden to `light` in theme-light.css. */
    color-scheme: dark;
}

/* Dark/light logo pair (see index.php's header) — hidden by default here
   since Tailwind has no utility named either class to clash with; the
   light-theme swap itself is in theme-light.css alongside every other
   body.bipm-light override, for the same !important-vs-Tailwind-CDN
   reason documented there. */
.bipm-logo-light {
    display: none;
}

/* FIXED: below md, #bipm-nav-aside (the hamburger-toggled mobile nav
   drawer — see index.php's own comment on it and the toggle handler in
   app.js) is a normal in-flow element right after the header in the
   markup; opening it while scrolled down revealed it at that fixed DOM
   position, which is scrolled out of the viewport above wherever the
   page currently is — it looked like the menu "didn't show" until you
   scrolled back to the top. Below 768px (Tailwind's md breakpoint) and
   only while it's actually open (`:not(.hidden)` — app.js toggles nothing
   but that one class), this pins it to the viewport instead, directly
   under the header (`top: 4rem` matches the header's own fixed `h-16`
   height exactly, at every breakpoint) — so it's always visible wherever
   the page happens to be scrolled. Never touches the md+ layout, which
   uses its own separate `md:sticky md:top-16` classes for the permanent
   sidebar and is unaffected by anything inside this media query. */
@media (max-width: 767px) {
    #bipm-nav-aside:not(.hidden) {
        position: fixed;
        top: 4rem;
        left: 0;
        right: 0;
        z-index: 40;
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
    }
}

/* Project rows stay single-line; horizontal scrolling handles genuinely
   narrow viewports more gracefully than wrapping status/action controls. */
.bipm-projects-table th,
.bipm-projects-table td {
    white-space: nowrap;
}

@media (max-width: 640px) {
    html {
        font-size: 14px;
    }
}

.nav-tab {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    border-radius: 0.5rem;
    transition: all 0.2s;
    white-space: nowrap;
}

.nav-tab:hover {
    color: #ffffff;
    background-color: #1e293b;
}

.nav-tab.active {
    background-color: #f59e0b;
    color: #020617;
}

.btn-primary {
    background-color: #f59e0b;
    color: #020617;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.btn-primary:hover {
    background-color: #d97706;
}

.btn-secondary {
    background-color: #1e293b;
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
    border: 1px solid #334155;
}

.btn-secondary:hover {
    background-color: #334155;
}

/* FIXED: every date/time input across the app (My Leave's Request Leave
   form, Task due dates, Project dates, Meeting dates, Audit scheduling,
   Training Records, etc.) sits on a dark background, but the native
   browser calendar/clock picker icon renders in its default DARK color
   regardless — effectively invisible against bg-slate-950/900. `invert(1)`
   flips a dark icon to light. Scoped OUT of light theme (see
   theme-light.css's `body.bipm-light` toggle) where the icon's default
   dark color is already correct against a light input background. */
body:not(.bipm-light) input[type="date"]::-webkit-calendar-picker-indicator,
body:not(.bipm-light) input[type="time"]::-webkit-calendar-picker-indicator,
body:not(.bipm-light) input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}