/* D:\Hurricane Creek Automotive Website\palaciosenterprisestesting.net\static\css\layout.css */

/* Tokens: shared sizes/colors used across the header and page */
:root { --h:56px; --pad:16px; --gap:12px; --radius:8px; --c-bg:#ffffff; --c-surface:#ffffff; --c-text:#111827; --c-muted:#e5e7eb; --c-accent:#2563eb; --shadow:0 1px 0 rgba(0,0,0,.06); }

/* Reset: consistent box model */
*, *::before, *::after { box-sizing:border-box; }

/* Base: page defaults */
body { margin:0; font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif; color:var(--c-text); background:var(--c-bg); }

/* Header bar: full-width sticky frame */
#app-header { position:sticky; top:0; z-index:1000; background:var(--c-surface); border-bottom:1px solid var(--c-muted); box-shadow:var(--shadow); }

/* Header inner: centers header to page width and lays out brand • gear • tabs • auth */
#app-header .inner { max-width:1200px; margin:0 auto; height:var(--h); padding:0 var(--pad); display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:var(--gap); }

/* Brand: "{Role} Dashboard" link */
.brand { font-weight:700; text-decoration:none; color:var(--c-text); letter-spacing:.2px; }

/* Icon button: square button for Settings gear; centered content and larger size for visibility */
.icon-btn { display:inline-grid; place-items:center; width:36px; height:36px; padding:0; line-height:0; border-radius:var(--radius); border:1px solid transparent; background:transparent; cursor:pointer; }

/* Icon image/SVG inside the gear button: ensure perfect centering and larger glyph */
.icon-btn .icon { display:block; width:24px; height:24px; object-fit:contain; }

/* Icon hover: subtle background */
.icon-btn:hover { background:rgba(0,0,0,.05); }

/* Tabs: horizontal list centered with the content width */
#primary-nav { display:flex; gap:var(--gap); align-items:center; overflow:auto; scrollbar-width:none; }

/* Tabs (webkit): hide scrollbar track for a clean strip */
#primary-nav::-webkit-scrollbar { display:none; }

/* Items: shared pill look for nav and auth controls */
.nav-item, .auth-item { display:inline-block; padding:6px 10px; border-radius:var(--radius); text-decoration:none; color:var(--c-text); font-weight:600; line-height:1; background:transparent; border:1px solid transparent; }

/* Items hover: light surface on hover */
.nav-item:hover, .auth-item:hover { background:rgba(0,0,0,.05); }

/* Active tab: tight square border (no outline so it doesn't get clipped) */
.nav-item.is-active { border:1px solid var(--c-accent); box-shadow:none; }

/* Auth cluster: right-aligned account/logout area */
.auth { display:flex; gap:var(--gap); align-items:center; justify-content:flex-end; }

/* Auth button: normalized button look */
button.auth-item { cursor:pointer; }

/* Utility: hide elements until allowed by auth or page state */
.is-hidden { display:none !important; }

/* Focus ring: accessible keyboard focus */
a:focus-visible, button:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }

/* Main content: mirrors header inner width and centers the page content */
#app-main { padding:24px var(--pad); max-width:1200px; margin:0 auto; }

/* Mobile header: collapses height and stacks sections */
@media (max-width:640px) { #app-header .inner { grid-template-columns:auto auto 1fr; height:auto; padding:8px var(--pad); row-gap:8px; } }

/* Mobile tabs: move tabs to their own row under brand/gear */
@media (max-width:640px) { #primary-nav { grid-column:1 / -1; order:3; } }

/* Mobile auth: keep auth to the right of brand/gear */
@media (max-width:640px) { .auth { order:2; } }

/* Dark tokens: palette swap for dark preference */
@media (prefers-color-scheme: dark) { :root { --c-bg:#0b0f17; --c-surface:#0f1521; --c-text:#e5e7eb; --c-muted:#1f2937; --c-accent:#60a5fa; --shadow:0 1px 0 rgba(0,0,0,.4); } }

/* Dark hover: soften hover surfaces on dark */
@media (prefers-color-scheme: dark) { .nav-item:hover, .auth-item:hover, .icon-btn:hover { background:rgba(255,255,255,.06); } }

/* Dark button: soften borders on dark */
@media (prefers-color-scheme: dark) { button.auth-item, .icon-btn { border-color:#273244; } }