/* ==========================================================================
   ReDIB Portal - Main Stylesheet
   ========================================================================== */

/* Alpine.js: hide elements with x-cloak until Alpine initialises */
[x-cloak] { display: none !important; }

/* --------------------------------------------------------------------------
   Brand Variables
   Derived from the ReDIB logo: dark teal "Re", silver "DiB", crimson dot.
   Primary is a deeper navy-teal so the logo remains visible on dark backgrounds.
   -------------------------------------------------------------------------- */
:root {
    --redib-primary: #1A3D50;       /* Deep navy-teal (navbar, buttons, links) */
    --redib-secondary: #6B7780;     /* Warm gray (muted text, secondary elements) */
    --redib-accent: #BE2845;        /* Crimson red from logo dot (badges, alerts, highlights) */
    --redib-sidebar-shadow: rgba(0, 0, 0, 0.1);
    --redib-navbar-height: 56px;
}

/* --------------------------------------------------------------------------
   Bootstrap Overrides
   Wire brand variables into Bootstrap utility classes so navbar, buttons,
   badges, and cards all use the ReDIB palette consistently.
   -------------------------------------------------------------------------- */

/* Navbar & backgrounds */
.bg-primary { background-color: var(--redib-primary) !important; }

/* Buttons */
.btn-primary {
    background-color: var(--redib-primary);
    border-color: var(--redib-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #143349;
    border-color: #143349;
}
.btn-primary:active {
    background-color: #0F2A3C;
    border-color: #0F2A3C;
}
.btn-outline-primary {
    color: var(--redib-primary);
    border-color: var(--redib-primary);
}
.btn-outline-primary:hover {
    background-color: var(--redib-primary);
    border-color: var(--redib-primary);
    color: #fff;
}

/* Links */
a { color: var(--redib-primary); }
a:hover { color: #143349; }

/* Card headers that use bg-primary */
.card-header.bg-primary { background-color: var(--redib-primary) !important; }

/* Accent color for info-styled elements */
.bg-info { background-color: var(--redib-accent) !important; }
.badge.bg-info { background-color: var(--redib-accent) !important; }
.text-info { color: var(--redib-accent) !important; }

/* Secondary overrides */
.bg-secondary { background-color: var(--redib-secondary) !important; }
.text-secondary { color: var(--redib-secondary) !important; }

/* --------------------------------------------------------------------------
   Dashboard Sidebar
   Extracted from templates/dashboard_base.html
   -------------------------------------------------------------------------- */
.sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: calc(100vh - var(--redib-navbar-height));
    overflow-y: auto;
    box-shadow: inset -1px 0 0 var(--redib-sidebar-shadow);
}

.sidebar .list-group-item {
    border-left: 3px solid transparent;
    border-radius: 0;
}

.sidebar .list-group-item.active,
.sidebar .list-group-item:hover {
    border-left-color: var(--redib-primary);
    background-color: #f8f9fa;
    color: var(--redib-primary);
    font-weight: 500;
}

.sidebar .bi {
    margin-right: 8px;
}

@media (max-width: 767.98px) {
    .sidebar {
        position: relative;
        height: auto;
    }
}

/* --------------------------------------------------------------------------
   Text Utilities
   Extracted from detail.html, preview.html, review.html, feasibility_review.html
   -------------------------------------------------------------------------- */
.text-pre-wrap {
    white-space: pre-wrap;
}

/* --------------------------------------------------------------------------
   Wizard / Application Form Utilities
   Extracted from wizard_step*.html templates
   -------------------------------------------------------------------------- */
.progress-lg {
    height: 30px;
}

.sticky-sidebar-card {
    top: 20px;
}

/* --------------------------------------------------------------------------
   Evaluation Form
   Extracted from evaluations/evaluation_form.html
   -------------------------------------------------------------------------- */
.form-check-label {
    cursor: pointer;
}

.form-check-input:checked + .form-check-label {
    font-weight: 600;
}