/*
    Kelderbazen theme refresh

    Additive layer on top of the existing "Luna" admin theme (style.min.css)
    and custom.css. Defines the app's own color/type tokens - drawn from the
    real logo (the bottle's moss green) and the login screen's vineyard photo
    (the amber of the autumn leaves) - and retargets the handful of selectors
    that carry the stock orange accent, plus adds a few missing states
    (input focus) and a bit of real hierarchy to section headings and stat
    numbers. Does not touch style.min.css, the template engine, or any PHP.

    Loaded last, so these rules win on selector-order without needing to
    fight specificity.
*/

:root {
    --ink: #1c1e24;
    --panel: #24262d;
    --amber: #c9922e;
    --amber-soft: rgba(201, 146, 46, 0.16);
    --moss: #8fae4a;
    --paper: #e9e6dd;
}

/* -------------------------------------------------------------------- */
/* Base surface - deeper, warmer than the stock gray                    */
/* -------------------------------------------------------------------- */

body {
    background: var(--ink);
}

/* -------------------------------------------------------------------- */
/* Accent: retarget every place the stock orange (#f68821) carries      */
/* meaning, to the vineyard amber instead                               */
/* -------------------------------------------------------------------- */

.btn-accent {
    border-color: var(--amber);
}
.btn-accent:focus,
.btn-accent.focus,
.btn-accent:hover,
.btn-accent:active,
.btn-accent.active,
.open > .dropdown-toggle.btn-accent {
    background-color: var(--amber-soft);
    border-color: var(--amber);
}

.hilite,
.orange,
.pointer {
    color: var(--amber);
}

.buttonfloat {
    background-color: var(--amber);
}

.pace .pace-progress {
    background: var(--amber);
}

.luna-nav.nav li.active a,
.luna-nav.nav li.active .nav-second li.active a {
    border-left-color: var(--amber);
}

.navbar-default .navbar-brand:hover {
    background-color: var(--amber);
}

.view-header .header-icon {
    color: var(--amber);
}

.first-row {
    border-bottom-color: var(--amber) !important;
}

#mapcol {
    border-color: var(--amber);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-bottom-color: var(--amber);
}

/* -------------------------------------------------------------------- */
/* Brand tie-in: the sidebar wordmark gets the logo's own green,        */
/* the first place the real brand shows up inside the tool itself       */
/* -------------------------------------------------------------------- */

.navbar-brand {
    position: relative;
}
.navbar-brand:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--moss);
}

/* -------------------------------------------------------------------- */
/* Section headings: promote the already-loaded Roboto 900 for real     */
/* hierarchy, with a moss rule standing in for the old plain bold text  */
/* -------------------------------------------------------------------- */

.panel-heading {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--paper);
    padding-left: 12px;
    border-left: 3px solid var(--moss);
    margin-bottom: 12px;
}

/* -------------------------------------------------------------------- */
/* Inputs: a visible, on-brand focus ring (there wasn't one before -    */
/* .form-control:focus previously set box-shadow: none with no          */
/* replacement, so keyboard focus was effectively invisible)            */
/* -------------------------------------------------------------------- */

.form-control:focus {
    box-shadow: 0 0 0 2px var(--amber-soft), inset 0 0 0 1px var(--amber);
}

/* -------------------------------------------------------------------- */
/* Corner radius: soften panels, buttons and inputs a touch             */
/* -------------------------------------------------------------------- */

.panel,
.form-control,
.btn {
    border-radius: 5px;
}

/* -------------------------------------------------------------------- */
/* Stat tiles (start screen + tank detail): the numbers a winemaker     */
/* checks first read with real weight instead of default h2 styling.   */
/* Scoped to the actual stat-tile shape (.panel-filled .panel-body h2)  */
/* so it doesn't touch the other .panel-filled contexts (login, help)   */
/* that don't use this structure.                                       */
/* -------------------------------------------------------------------- */

.panel.panel-filled .panel-body h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--amber);
    font-size: 2.4rem;
}
.panel.panel-filled .panel-body .small {
    color: var(--paper);
    opacity: 0.7;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 11px;
}