/* ==========================================================================
   Lexy color palette (matched with the main Lexy app)
   ========================================================================== */
:root {
    --lexy-primary: #3D507D;       /* sidebar / primary buttons / links */
    --lexy-primary-dark: #0D0937;  /* hover / strong accents */
    --lexy-primary-light: #bbc5dd; /* subtle backgrounds, active page items */
    --lexy-accent: #EFA823;        /* warning-style accents (orange) */
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

/* --------------------------------------------------------------------------
   Sidebar — matches main app's navy sidebar
   -------------------------------------------------------------------------- */
.navbar-vertical[data-bs-theme="dark"] {
    background-color: var(--lexy-primary) !important;
}

.navbar-vertical[data-bs-theme="dark"] .nav-link {
    color: #dbe1f0;
}

.navbar-vertical[data-bs-theme="dark"] .nav-link:hover,
.navbar-vertical[data-bs-theme="dark"] .nav-link.active {
    background-color: var(--lexy-primary-dark);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
a {
    color: var(--lexy-primary);
}

a:hover {
    color: var(--lexy-primary-dark);
}

/* --------------------------------------------------------------------------
   Primary buttons
   -------------------------------------------------------------------------- */
.btn-primary {
    background-color: var(--lexy-primary);
    border-color: var(--lexy-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--lexy-primary-dark) !important;
    border-color: var(--lexy-primary-dark) !important;
}

.btn-outline-primary {
    color: var(--lexy-primary);
    border-color: var(--lexy-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--lexy-primary) !important;
    color: #fff !important;
    border-color: var(--lexy-primary) !important;
}

/* --------------------------------------------------------------------------
   Pagination — light variant matching main app
   -------------------------------------------------------------------------- */
.page-item.active .page-link {
    background-color: var(--lexy-primary-light);
    border-color: var(--lexy-primary-light);
    color: var(--lexy-primary);
}

.page-link {
    color: var(--lexy-primary);
}

.page-link:hover {
    color: var(--lexy-primary-dark);
}

/* --------------------------------------------------------------------------
   Focus ring — softer, brand-coloured
   -------------------------------------------------------------------------- */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.15rem var(--lexy-primary-light);
    border-color: var(--lexy-primary);
}

/* --------------------------------------------------------------------------
   Badges — keep semantic colours but soften
   -------------------------------------------------------------------------- */
.badge.bg-blue-lt {
    background-color: var(--lexy-primary-light) !important;
    color: var(--lexy-primary-dark) !important;
}

/* --------------------------------------------------------------------------
   Success buttons — orange in main Lexy branding (matches `.btn-success`
   in the main app's main.css)
   -------------------------------------------------------------------------- */
.btn-success {
    background-color: var(--lexy-accent);
    border-color: var(--lexy-accent);
    color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #d28e0c !important;
    border-color: #d28e0c !important;
    color: #fff !important;
}

.btn-outline-success {
    color: var(--lexy-accent);
    border-color: var(--lexy-accent);
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    background-color: var(--lexy-accent) !important;
    border-color: var(--lexy-accent) !important;
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   Warning accents — use brand orange too
   -------------------------------------------------------------------------- */
.btn-outline-warning {
    color: var(--lexy-accent);
    border-color: var(--lexy-accent);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    background-color: var(--lexy-accent) !important;
    border-color: var(--lexy-accent) !important;
    color: #fff !important;
}

/* "Expiring soon" badge — soft orange */
.badge.bg-warning-lt {
    background-color: rgba(239, 168, 35, 0.15) !important;
    color: #8a5c00 !important;
}
