/* =========================
   VARIABLES
========================= */
:root {
    --primary-color: #0E2E72;
    --secondary-color: #122860;
    --accent-color: #676B72;

    --bs-primary: var(--primary-color);
    --bs-secondary: var(--secondary-color);
    --bs-danger: #dc3545;
    --bs-info: #0dcaf0;
    --bs-light: #f8f9fa;

    --bs-primary-rgb: 14,46,114;
    --bs-secondary-rgb: 18,40,96;

    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Gotham', sans-serif;
}

/* =========================
   GLOBAL STYLES
========================= */
body {
    font-family: var(--font-primary);
    color: var(--primary-color);
    background-color: var(--bs-light);
}

.text-justify { text-align: justify; }

textarea { min-height: 300px !important; }

.main-content { margin: 0; background-color: white; }

footer.footer { text-align: center; padding: 20px; color: black; }

.recap {
    padding: 10px;
    background-color: var(--bs-primary);
    color: white;
    min-height: 200px;
    border-radius: 10px;
}

/* =========================
   HEADER
========================= */
.dashboard-page-header { height: 60px !important; width: 100% !important; }

/* =========================
   SIDEBAR
========================= */
.sidebar { min-height: 100vh; }

.sidebar .sidebar-heading {
    color: #d9d9d9;
    text-shadow: -1px -1px 1px rgba(255,255,255,0.1), 1px 1px 1px rgba(0,0,0,0.5);
    border-bottom: 3px solid var(--bs-info);
    font-weight: bold;
}

/* Links */
.sidebar .nav-link {
    color: var(--secondary-color);
    margin: 5px 0 5px -15px;
    padding: 10px;
    border-bottom: 3px solid #f0f3f3;
    transition: background-color 0.3s, color 0.3s;
}

.sidebar .nav-link:hover,
.sidebar .active-link {
    background-color: #f0f0f0;
    color: var(--secondary-color);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    font-weight: bold;
    border-bottom: 3px solid var(--primary-color);
}

/* Icons inside links */
.sidebar .active-link .bi,
.sidebar .nav-item .nav-link:hover .bi,
.sidebar .nav-link.logout:hover .bi {
    margin-right: 10px;
    border-radius: 5px;
    padding: 14px;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

/* Specific icons colors */
.sidebar .active-link .bi,
.sidebar .nav-item .nav-link:hover .bi { 
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 5px 5px 0 0 var(--secondary-color);
}

.sidebar .nav-link.logout { 
    color: var(--bs-danger);
    font-weight: bold;
}

.sidebar .nav-link.logout:hover {
    border-bottom: 3px solid var(--bs-danger);
    color: var(--bs-danger);
}

.sidebar .nav-link.logout:hover .bi {
    background-color: var(--bs-danger);
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 5px 5px 0 0 rgba(220,53,69,1);
}

/* Offcanvas header */
.sidebar .offcanvas-header { border-bottom: 1px solid gray; }

/* Submenu collapse */
.sidebar .submenu { overflow: hidden; max-height: 0; transition: max-height 0.4s ease; }
.sidebar .submenu.open { max-height: 500px; }

/* =========================
   BREADCRUMB
========================= */
.breadcrumb-chevron .breadcrumb-item {
    position: relative;
    padding-right: 1.5rem;
}

.breadcrumb-chevron .breadcrumb-item::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.75rem;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid #6c757d;
    border-right: 2px solid #6c757d;
    transform: translateY(-50%) rotate(45deg);
}

.breadcrumb-chevron .breadcrumb-item.active::before { display: none; }

/* =========================
   TYPOGRAPHY & HEADINGS
========================= */
.bg-primary.text-white h1, .bg-primary.text-white h2,
.bg-primary.text-white h3, .bg-primary.text-white h4,
.bg-primary.text-white h5, .bg-primary.text-white h6,
.bg-secondary.text-white h1, .bg-secondary.text-white h2,
.bg-secondary.text-white h3, .bg-secondary.text-white h4,
.bg-secondary.text-white h5, .bg-secondary.text-white h6,
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
    color: white;
}

/* =========================
   LINKS, BUTTONS, BADGES, ALERTS
========================= */
a { color: var(--primary-color); }
a:hover, a:focus, a.text-primary:hover, a.text-primary:focus { color: var(--secondary-color); }

.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb),0.5);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.text-primary { color: var(--primary-color) !important; }
.badge-primary { color: #fff; background-color: var(--primary-color); }

.alert-primary {
    color: #002a43;
    background-color: #cce5ff;
    border-color: #b8daff;
}
.alert-primary hr { border-top-color: #9fcdff; }
.alert-primary .alert-link { color: #000f1a; }

/* =========================
   FORM ELEMENTS
========================= */
input, select, textarea {
    border: 1px solid var(--primary-color);
    border-radius: 0.25rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb),0.25);
    outline: none;
}

input:hover, select:hover, textarea:hover { border-color: var(--secondary-color); }

input:disabled, select:disabled, textarea:disabled {
    background-color: #e9ecef;
    border-color: #ced4da;
    color: #6c757d;
}

input::placeholder, textarea::placeholder { color: #999; }

/* FORM-CHECK (RADIO / CHECKBOX / SWITCH) */
.form-check-input {
    border: 2px solid var(--primary-color);
    cursor: pointer;
    transition: all 0.2s ease;
}
.form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); }
.form-check-input:focus { box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb),0.25); border-color: var(--primary-color); }
.form-check-input:hover { border-color: var(--secondary-color); }
.form-check-input[type="radio"]:checked::before { background-color: white; }

.form-switch .form-check-input { width:2.5em; height:1.4em; background-color: var(--bs-light); }
.form-switch .form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb),0.25); }

.form-check-label { color: var(--primary-color); font-weight:500; }
.form-check-label:hover { color: var(--secondary-color); }

/* =========================
   RANGE / SLIDER
========================= */
input[type="range"] {
    -webkit-appearance:none;
    width:100%;
    height:6px;
    background: var(--bs-light);
    border-radius:3px;
    outline:none;
    transition: background 0.3s ease;
}
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
    height:20px; width:20px;
    background: var(--primary-color);
    border:2px solid #fff;
    border-radius:50%;
    cursor:pointer;
    box-shadow:0 0 3px rgba(0,0,0,0.3);
    transition: background 0.3s ease;
}
input[type="range"]:focus::-webkit-slider-thumb,
input[type="range"]:focus::-moz-range-thumb { box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb),0.25); }