/**
 * BauDesk Brand Theme
 * Based on docs/BauDesk_Color_Styleguide.md (v1.0), with the owner's role split:
 *   primary   = Navy   #1E527A  (dominant brand colour — main buttons, structure)
 *   secondary = Orange #F0901A  (accent — secondary buttons, sidebar-active, focus)
 *   surface   = #F4F7FA / #FFFFFF
 * Status palette (success / warning / danger / neutral) is taken as-is from §2.
 *
 * Loaded AFTER all other stylesheets (see layout/head.latte).
 */

/* =====================================================
   1. DESIGN TOKENS
   ===================================================== */

:root {

    /* ── Brand ── */
    --color-navy:        #1E527A;
    --color-navy-dark:   #123A58;   /* hover for navy elements */
    --color-orange:      #F0901A;
    --color-orange-dark: #C97710;   /* hover for orange buttons */
    --color-bg:          #F4F7FA;
    --color-surface:     #FFFFFF;

    /* ── Text ── */
    --text-primary:      #2C2C2A;
    --text-secondary:    #5F5E5A;
    --text-muted:        #888780;
    --text-link:         #1E527A;

    /* ── Status: fill (50) / text (800) / border (mid) ── */
    --status-success-bg:     #E1F5EE;
    --status-success-text:   #04342C;
    --status-success-border: #1D9E75;

    --status-warning-bg:     #FAEEDA;
    --status-warning-text:   #633806;
    --status-warning-border: #EF9F27;

    --status-danger-bg:      #FCEBEB;
    --status-danger-text:    #501313;
    --status-danger-border:  #E24B4A;

    --status-neutral-bg:     #F1EFE8;
    --status-neutral-text:   #2C2C2A;
    --status-neutral-border: #888780;

    /* ── Bootstrap / Velzon bridge ──
       primary   = Navy  (dominant brand colour: buttons, structure, links,
                          tabs, active states, form controls, pagination)
       secondary = Orange (accent: secondary buttons, sidebar-active marker,
                          focus ring) */
    --vz-primary:                 #1E527A;
    --vz-primary-rgb:             30, 82, 122;
    --vz-primary-text-emphasis:   #123A58;
    --vz-primary-bg-subtle:       #E2ECF3;
    --vz-primary-border-subtle:   #A6C3D6;

    --vz-secondary:               #F0901A;
    --vz-secondary-rgb:           240, 144, 26;
    --vz-secondary-text-emphasis: #633806;
    --vz-secondary-bg-subtle:     #FDEBD6;
    --vz-secondary-border-subtle: #F8CE9A;

    --vz-link-color:            #1E527A;
    --vz-link-hover-color:      #123A58;

    /* Page + text */
    --vz-body-bg:               #F4F7FA;
    --vz-body-color:            #2C2C2A;
    --vz-body-color-rgb:        44, 44, 42;
    --vz-secondary-color:       #5F5E5A;
    --vz-tertiary-color:        #888780;
    --vz-heading-color:         #2C2C2A;
    --vz-border-color:          #E3E6EA;

    /* Semantic status → Velzon subtle/emphasis vars */
    --vz-success:               #1D9E75;
    --vz-success-rgb:           29, 158, 117;
    --vz-success-text-emphasis: #04342C;
    --vz-success-bg-subtle:     #E1F5EE;
    --vz-success-border-subtle: #B7E4D5;

    --vz-warning:               #EF9F27;
    --vz-warning-rgb:           239, 159, 39;
    --vz-warning-text-emphasis: #633806;
    --vz-warning-bg-subtle:     #FAEEDA;
    --vz-warning-border-subtle: #F5D6A6;

    --vz-danger:                #E24B4A;
    --vz-danger-rgb:            226, 75, 74;
    --vz-danger-text-emphasis:  #501313;
    --vz-danger-bg-subtle:      #FCEBEB;
    --vz-danger-border-subtle:  #F3BFBE;
}

/* Keep the light-theme scope in sync (Velzon re-declares many vars there). */
[data-bs-theme=light] {
    --vz-primary:               #1E527A;
    --vz-primary-rgb:           30, 82, 122;
    --vz-link-color:            #1E527A;
    --vz-link-hover-color:      #123A58;
    --vz-body-bg:               #F4F7FA;
    --vz-body-color:            #2C2C2A;
    --vz-secondary-color:       #5F5E5A;
    --vz-heading-color:         #2C2C2A;
    --vz-border-color:          #E3E6EA;
}

/* =====================================================
   2. BASE
   ===================================================== */

body {
    background-color: var(--color-bg);
    color: var(--text-primary);
}

.text-muted        { color: var(--text-muted) !important; }
.text-body-secondary { color: var(--text-secondary) !important; }

/* =====================================================
   3. LINKS  (Navy, underline on hover only)
   ===================================================== */

a {
    color: var(--text-link);
    text-decoration: none;
}
a:hover {
    color: var(--color-navy-dark);
    text-decoration: underline;
}
/* Utility / component anchors that must not get an underline */
a.btn:hover,
a.nav-link:hover,
a.dropdown-item:hover,
a.page-link:hover,
.navbar-nav a:hover,
#sidebar-menu a:hover {
    text-decoration: none;
}

.link-primary {
    color: var(--text-link) !important;
}

/* =====================================================
   4. BUTTONS
   ----------------------------------------------------
   Primary   = main action        → Navy fill
   Secondary = accent action      → Orange fill
   Danger    = destructive        → Red
   ===================================================== */

.btn-primary {
    --vz-btn-bg:                    #1E527A;
    --vz-btn-border-color:          #1E527A;
    --vz-btn-hover-bg:              #123A58;
    --vz-btn-hover-border-color:    #123A58;
    --vz-btn-active-bg:             #123A58;
    --vz-btn-active-border-color:   #0E2E45;
    --vz-btn-focus-shadow-rgb:      30, 82, 122;
    --vz-btn-disabled-bg:           #1E527A;
    --vz-btn-disabled-border-color: #1E527A;
    --vz-btn-color:                 #ffffff;
    --vz-btn-hover-color:           #ffffff;
    --vz-btn-active-color:          #ffffff;
    --vz-btn-disabled-color:        #ffffff;
    color: #ffffff;
}

.btn-soft-primary {
    background-color: rgba(30, 82, 122, 0.10);
    color: #1E527A;
    border-color: transparent;
}
.btn-soft-primary:hover {
    background-color: #1E527A;
    color: #ffffff;
    border-color: #1E527A;
}

.btn-outline-primary {
    --vz-btn-color:               #1E527A;
    --vz-btn-bg:                  transparent;
    --vz-btn-border-color:        #1E527A;
    --vz-btn-hover-bg:            #1E527A;
    --vz-btn-hover-border-color:  #1E527A;
    --vz-btn-hover-color:         #ffffff;
    --vz-btn-active-bg:           #123A58;
    --vz-btn-active-border-color: #123A58;
    --vz-btn-active-color:        #ffffff;
    --vz-btn-focus-shadow-rgb:    30, 82, 122;
}

/* Accent action — orange */
.btn-secondary {
    --vz-btn-bg:                    #F0901A;
    --vz-btn-border-color:          #F0901A;
    --vz-btn-hover-bg:              #C97710;
    --vz-btn-hover-border-color:    #C97710;
    --vz-btn-active-bg:             #C97710;
    --vz-btn-active-border-color:   #B56C0F;
    --vz-btn-focus-shadow-rgb:      240, 144, 26;
    --vz-btn-disabled-bg:           #F0901A;
    --vz-btn-disabled-border-color: #F0901A;
    --vz-btn-color:                 #4A1B0C;
    --vz-btn-hover-color:           #4A1B0C;
    --vz-btn-active-color:          #4A1B0C;
    --vz-btn-disabled-color:        #4A1B0C;
    color: #4A1B0C;
}

.btn-soft-secondary {
    background-color: rgba(240, 144, 26, 0.12);
    color: #C97710;
    border-color: transparent;
}
.btn-soft-secondary:hover {
    background-color: #F0901A;
    color: #4A1B0C;
    border-color: #F0901A;
}

.btn-outline-secondary {
    --vz-btn-color:               #C97710;
    --vz-btn-bg:                  transparent;
    --vz-btn-border-color:        #F0901A;
    --vz-btn-hover-bg:            #F0901A;
    --vz-btn-hover-border-color:  #F0901A;
    --vz-btn-hover-color:         #4A1B0C;
    --vz-btn-active-bg:           #C97710;
    --vz-btn-active-border-color: #C97710;
    --vz-btn-active-color:        #4A1B0C;
    --vz-btn-focus-shadow-rgb:    240, 144, 26;
}

/* Destructive */
.btn-danger {
    --vz-btn-bg:                   #E24B4A;
    --vz-btn-border-color:         #E24B4A;
    --vz-btn-hover-bg:             #C93B3A;
    --vz-btn-hover-border-color:   #C93B3A;
    --vz-btn-active-bg:            #C93B3A;
    --vz-btn-focus-shadow-rgb:     226, 75, 74;
    --vz-btn-color:                #ffffff;
    color: #ffffff;
}
.btn-outline-danger {
    --vz-btn-color:               #E24B4A;
    --vz-btn-border-color:        #E24B4A;
    --vz-btn-hover-bg:            #E24B4A;
    --vz-btn-hover-border-color:  #E24B4A;
    --vz-btn-hover-color:         #ffffff;
    --vz-btn-focus-shadow-rgb:    226, 75, 74;
}

/* "warning" buttons align with the accent so legacy markup stays on-brand */
.btn-warning {
    --vz-btn-bg:                  #F0901A;
    --vz-btn-border-color:        #F0901A;
    --vz-btn-hover-bg:            #C97710;
    --vz-btn-hover-border-color:  #C97710;
    --vz-btn-active-bg:           #C97710;
    --vz-btn-focus-shadow-rgb:    240, 144, 26;
    --vz-btn-color:               #4A1B0C;
    --vz-btn-hover-color:         #4A1B0C;
    color: #4A1B0C;
}

/* =====================================================
   5. STATUS SYSTEM  (badges, subtle backgrounds, card accents)
   ----------------------------------------------------
   Each status is always the same triple: bg(50) / text(800) / border(mid).
   ===================================================== */

/* Subtle badge = fill(50) + text(800), always paired */
.badge.bg-success-subtle,
.bg-success-subtle {
    background-color: var(--status-success-bg) !important;
}
.badge.bg-success-subtle { color: var(--status-success-text) !important; }

.badge.bg-warning-subtle,
.bg-warning-subtle {
    background-color: var(--status-warning-bg) !important;
}
.badge.bg-warning-subtle { color: var(--status-warning-text) !important; }

.badge.bg-danger-subtle,
.bg-danger-subtle {
    background-color: var(--status-danger-bg) !important;
}
.badge.bg-danger-subtle { color: var(--status-danger-text) !important; }

.badge.bg-secondary-subtle,
.bg-secondary-subtle,
.badge.bg-light,
.bg-light-subtle {
    background-color: var(--status-neutral-bg) !important;
}
.badge.bg-secondary-subtle,
.badge.bg-light { color: var(--status-neutral-text) !important; }

/* Text-emphasis utilities (badge text / callouts) → 800 */
.text-success-emphasis { color: var(--status-success-text) !important; }
.text-warning-emphasis { color: var(--status-warning-text) !important; }
.text-danger-emphasis  { color: var(--status-danger-text)  !important; }

/* Standalone coloured text / icons on white → mid tone (stays legible as a colour) */
.text-success { color: var(--status-success-border) !important; }
.text-warning { color: var(--status-warning-border) !important; }
.text-danger  { color: var(--status-danger-border)  !important; }
.text-secondary { color: var(--text-secondary) !important; }

/* Solid badges */
.badge.bg-success { background-color: var(--status-success-border) !important; color: #ffffff !important; }
.badge.bg-warning { background-color: var(--status-warning-border) !important; color: #3B2204 !important; }
.badge.bg-danger  { background-color: var(--status-danger-border)  !important; color: #ffffff !important; }
.badge.bg-primary { background-color: var(--color-navy) !important; color: #ffffff !important; }

/* Card status accent — bind the random top borders to meaning.
   Usage in markup: <div class="card border-top-status-success"> … */
.border-top-status-success { border-top: 3px solid var(--status-success-border) !important; }
.border-top-status-warning { border-top: 3px solid var(--status-warning-border) !important; }
.border-top-status-danger  { border-top: 3px solid var(--status-danger-border)  !important; }
.border-top-status-neutral { border-top: 3px solid var(--status-neutral-border) !important; }

/* Alerts follow the same triple */
.alert-success { background-color: var(--status-success-bg); border-color: var(--status-success-border); color: var(--status-success-text); }
.alert-warning { background-color: var(--status-warning-bg); border-color: var(--status-warning-border); color: var(--status-warning-text); }
.alert-danger  { background-color: var(--status-danger-bg);  border-color: var(--status-danger-border);  color: var(--status-danger-text);  }
.alert-primary { background-color: var(--vz-primary-bg-subtle); border-color: var(--vz-primary-border-subtle); color: var(--color-navy-dark); }

/* =====================================================
   6. SIDEBAR
   ===================================================== */

[data-sidebar=light] {
    --vz-vertical-menu-bg:                    #ffffff;
    --vz-vertical-menu-border:                #EEF0F3;
    --vz-vertical-menu-item-color:            #5F5E5A;
    --vz-vertical-menu-item-hover-color:      #1E527A;
    --vz-vertical-menu-item-active-color:     #F0901A;
    --vz-vertical-menu-item-active-bg:        rgba(240, 144, 26, 0.10);
    --vz-vertical-menu-sub-item-color:        #6C757D;
    --vz-vertical-menu-sub-item-hover-color:  #1E527A;
    --vz-vertical-menu-sub-item-active-color: #F0901A;
    --vz-vertical-menu-title-color:           #888780;
}

/* Active item — orange label + icon, orange 3px left indicator, faint tint.
   The .active class is set server-side (menuActive() in navigation.latte);
   Velzon's stock app.js detection does not fire for this app's rooted URLs. */
#navbar-nav .nav-item > .nav-link.active,
#navbar-nav .nav-item > .nav-link.active span,
#navbar-nav .nav-item > .nav-link.active i,
#navbar-nav .nav-item > .nav-link.active .icon-dual,
.navbar-nav .nav-item .nav-link.active {
    color: #F0901A !important;
    fill: rgba(240, 144, 26, 0.16) !important;
    stroke: #F0901A !important;
}
#navbar-nav .nav-item > .nav-link.active {
    background-color: rgba(240, 144, 26, 0.10);
    font-weight: 600;
    box-shadow: inset 3px 0 0 #F0901A;
    border-radius: 4px;
}
.navbar-nav .nav-item .nav-link.active::before,
#navbar-nav .nav-item > .nav-link.active::before {
    background-color: #F0901A !important;
    width: 3px;
}

/* =====================================================
   7. TOPBAR
   ===================================================== */

[data-topbar=light] {
    --vz-header-bg:         #ffffff;
    --vz-header-border:     #E9EBEC;
    --vz-header-item-color: #1E527A;
}
.navbar-brand-box .logo span { color: #ffffff !important; }
.topbar-user .btn { border-color: rgba(30, 82, 122, 0.2); }

/* =====================================================
   8. NAV TABS (custom)
   ===================================================== */

.nav-tabs-custom .nav-item .nav-link.active,
.nav-success.nav-tabs-custom .nav-item .nav-link.active {
    color: #1E527A;
    border-bottom-color: #1E527A;
}
.nav-tabs-custom .nav-item .nav-link:hover {
    color: #1E527A;
}

/* =====================================================
   9. FORM CONTROLS — Orange focus ring (2px)
   ===================================================== */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #F0901A;
    box-shadow: 0 0 0 2px rgba(240, 144, 26, 0.35);
}
.form-check-input:checked {
    background-color: #1E527A;
    border-color: #1E527A;
}
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--status-danger-border);
}
.invalid-feedback,
p.error {
    color: var(--status-danger-text);
}

/* =====================================================
   10. STRUCTURE (links coloured elements, pagination, progress, accordion)
   ===================================================== */

.text-primary { color: var(--color-navy) !important; }
.bg-primary,
.badge.bg-primary,
.progress-bar.bg-primary,
.card-header.bg-primary,
.mini-stats-wid .avatar-sm .avatar-title.bg-primary {
    background-color: var(--color-navy) !important;
}
.bg-primary-subtle { background-color: var(--vz-primary-bg-subtle) !important; }

.progress-bar.bg-warning { background-color: #F0901A !important; }

.page-item.active .page-link {
    background-color: #1E527A;
    border-color: #1E527A;
}
.page-link        { color: #1E527A; }
.page-link:hover  { color: #123A58; }

.accordion-button:not(.collapsed) {
    color: #1E527A;
    background-color: var(--vz-primary-bg-subtle);
    box-shadow: inset 0 -1px 0 rgba(30, 82, 122, 0.15);
}

/* =====================================================
   11. CHARTS
   ----------------------------------------------------
   Velzon's ApexCharts read CSS custom properties named in each chart's
   data-colors attribute, so charts that reference --vz-primary now render
   Navy. Charts with hard-coded hex arrays in their own JS are not affected
   and must be adjusted at the call site.
   ===================================================== */

.apex-charts text { fill: var(--text-secondary); }