/* =====================================================================
   Brand layer — the admin in the website's language

   Loaded after admin.css and after the theme, so it wins. This is not a
   new design; it is the design the public site already has, applied to
   the tools behind it.

   Three things carry the whole difference, and they are the three things
   that make autostargarage.com look like itself:

     1. Barlow Condensed, uppercase, for every heading, button and label.
     2. Gold used as the accent that means "this one", against near-black
        ink — not a blue borrowed from a template.
     3. Flat surfaces, 4px corners, thin rules. No soft shadows, no
        rounded card look.

   Density stays as it is. A repair order still needs tighter rows than a
   marketing page, and that is a separate concern from voice.
   ===================================================================== */

:root {
    /* The site's palette, verbatim. */
    --ink:        #14161a;
    --ink-2:      #1e2228;
    --ink-3:      #2b3038;
    --gold:       #e8b21a;
    --gold-dark:  #b88a0c;

    --bg:         #f4f5f7;
    --surface:    #ffffff;
    --line:       #dfe2e7;
    --text:       #2c3138;
    --muted:      #676f7a;

    /* Gold is the accent, not the sidebar colour. Everything that used
       to resolve to a grey now reads as the brand. */
    --accent:     var(--gold-dark);

    --radius:     4px;
    --radius-sm:  3px;
    --shadow:     0 1px 2px rgba(20, 22, 26, .06), 0 8px 24px rgba(20, 22, 26, .06);

    --display:    "Barlow Condensed", "Arial Narrow", sans-serif;
    --font:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.admin { font-family: var(--font); background: var(--bg); color: var(--text); }

/* ---------- Type ---------- */
.admin h1, .admin h2, .admin h3,
.admin .page-head h1,
.admin .panel__head h2,
.admin .hub-heading,
.admin .sidebar__label,
.admin .tile__label,
.admin .table thead th {
    font-family: var(--display);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .04em;
}

.admin .page-head h1 { font-size: 1.75rem; letter-spacing: .01em; color: var(--ink); }
.admin .panel__head h2 { font-size: 1.05rem; color: var(--ink); }
.admin .hub-heading { font-size: .95rem; color: var(--muted); letter-spacing: .09em; }
.admin .table thead th { font-size: .84rem; letter-spacing: .06em; color: var(--ink); }
.admin .tile__label { font-size: .8rem; letter-spacing: .08em; }
.admin .tile strong { font-family: var(--display); font-size: 2rem; letter-spacing: 0; font-weight: 700; }

/* ---------- Sidebar ---------- */
/* Near-black against a white page is a lot of contrast to sit beside for
   eight hours. --ink-3 is the same family, three steps lighter, and the
   gold still reads clearly against it. */
.admin .sidebar { background: var(--ink-3); }
.admin .sidebar__brand { background: var(--ink-2); }
.admin .sidebar__brand { border-bottom: 3px solid var(--gold); }
.admin .sidebar__star { color: var(--gold); }
.admin .sidebar a { border-radius: var(--radius); font-weight: 500; }
.admin .sidebar a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.admin .sidebar a.is-on {
    background: var(--gold); color: var(--ink); font-weight: 600;
}
.admin .sidebar a.is-on .ico-svg { opacity: 1; }
.admin .sidebar__label { font-size: .84rem; letter-spacing: .11em; opacity: .5; }

/* ---------- Surfaces ---------- */
.admin .panel, .admin .hub-card, .admin .tile, .admin .job-card, .admin .jobcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}
.admin .panel__head { background: var(--bg); border-bottom: 1px solid var(--line); }

/* ---------- Buttons, drawn like the site's ---------- */
.admin .btn-sm,
.admin button[type="submit"],
.admin .form-actions button {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    border-radius: var(--radius);
}
.admin .btn-sm { font-size: .95rem; padding: .42rem .9rem; }
.admin button[type="submit"], .admin .form-actions button { font-size: 1.02rem; padding: .55rem 1.4rem; }

.admin .btn-sm--primary,
.admin button[type="submit"]:not(.btn-link-danger):not(.btn-sm):not(.rowmenu__item) {
    background: var(--gold);
    border: 1px solid var(--gold-dark);
    color: var(--ink);
}
.admin .btn-sm--primary:hover,
.admin button[type="submit"]:not(.btn-link-danger):not(.btn-sm):not(.rowmenu__item):hover {
    background: var(--gold-dark);
    color: #fff;
}
.admin .btn-sm:not(.btn-sm--primary) {
    background: #fff; border: 1px solid var(--line); color: var(--ink);
}
.admin .btn-sm:not(.btn-sm--primary):hover { border-color: var(--ink); }

/* ---------- Tabs and chips ---------- */
.admin .tabs a { font-weight: 600; }
.admin .tabs a.is-on { color: var(--ink); border-bottom-color: var(--gold); }
.admin .chip, .admin .pill {
    font-family: var(--display); text-transform: uppercase;
    font-size: .84rem; font-weight: 700; letter-spacing: .05em; border-radius: 3px;
}

/* ---------- Focus, links, accents ---------- */
.admin a { color: var(--gold-dark); }
.admin a:hover { color: var(--ink); }
.admin .sidebar a { color: rgba(255, 255, 255, .82); }
.admin .sidebar a .ico-svg { opacity: .75; }
.admin input:focus, .admin select:focus, .admin textarea:focus {
    outline: 2px solid var(--gold); outline-offset: -1px; border-color: var(--gold);
}
.admin .nav-badge { background: var(--gold); color: var(--ink); font-weight: 700; }

/* ---------- Notices ---------- */
.admin .notice { border-radius: var(--radius); border-left: 4px solid var(--gold); }
.admin .notice--ok { border-left-color: #0f7b4f; }
.admin .notice--bad { border-left-color: #b42318; }

/* Numbers line up. A screen that is mostly money should not wobble. */
.admin .tile strong, .admin .num, .admin td.num, .admin .ro-bar strong {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Floating menu button on shop screens, where the site header is hidden. */
.topbar__menu--float {
    position: fixed; top: 68px; left: .6rem; z-index: 45;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .35rem .6rem; cursor: pointer;
}
@media (min-width: 981px) { .topbar__menu--float { display: none; } }