/* ---------------------------------------------------------------------------
   Global reset and type only.

   Component styling deliberately stays inline in the .cshtml files: this project was
   converted from an approved HTML prototype, and keeping the inline styles means the
   Razor markup can be diffed against that design line for line. Add shared classes
   here only when a rule genuinely repeats across screens.
   --------------------------------------------------------------------------- */

body {
    margin: 0;
    font-family: 'Nunito Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* RAE palette: Cyan Blue for links, lighter cyan on hover. */
a { color: #0076BC; }
a:hover { color: #00A8E0; }

/* Form controls inherit the UI face instead of the browser default. */
button, input, select, textarea { font-family: inherit; }

/* ---------------------------------------------------------------------------
   Mobile layout.

   Every rule below is scoped to either a brand-new class (dat-sidebar-toggle,
   dat-sidebar-backdrop - no existing markup used these names, so nothing here
   changes desktop rendering) or a max-width media query, so desktop is left
   exactly as it was. _Sidebar.cshtml/Dashboard's KPI grid/Infractions' row-
   detail grid set their desktop sizing via inline style="", which always wins
   over a plain stylesheet rule - the overrides below need !important for the
   same reason Views/Settings/Index.cshtml's own [hidden] overrides do (see
   that file's comment above .dat-settings .btn[hidden]).
   --------------------------------------------------------------------------- */

.dat-sidebar-toggle {
    display: none;
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 1200;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid rgba(17, 42, 82, 0.15);
    background: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(17, 42, 82, 0.18);
}

.dat-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 42, 82, 0.45);
    z-index: 1090;
}

@media (max-width: 860px) {
    .dat-sidebar-toggle { display: flex; }

    .dat-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        z-index: 1100 !important;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 0 0 24px rgba(17, 42, 82, 0.3);
    }

    body.dat-sidebar-open .dat-sidebar { transform: translateX(0); }
    body.dat-sidebar-open .dat-sidebar-backdrop { display: block; }
    body.dat-sidebar-open { overflow: hidden; }

    /* Dashboard's KPI cards (Views/Dashboard/Index.cshtml) - 4 fixed columns
       would force an 800px-wide row on a phone-width screen. */
    .dat-grid-4 { grid-template-columns: repeat(2, minmax(140px, 1fr)) !important; }
}

@media (max-width: 480px) {
    .dat-grid-4 { grid-template-columns: 1fr !important; }
}

/* Infractions' row-detail panel (Views/Infractions/_InfractionsTableAndPager.cshtml)
   - 3 equal columns read fine on desktop but are too narrow to be legible on a phone. */
@media (max-width: 700px) {
    .dat-grid-3 { grid-template-columns: 1fr !important; }
}