/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 28 aug 2026, 19:31:38
    Author     : Zowiezo101
*/

:root {
    /* The color values */
    --bg-color-rgb: 69, 64, 53;
    --bg-color-secondary-rgb: 135, 125, 104;
    --acc-color-rgb: 168, 47, 47;
    --acc-color-secondary-rgb: 125, 51, 51;
    --link-hover-color-rgb: 168, 47, 47;
    
    /* Color values translated to hex values */
    --bg-color:            rgba(var(--bg-color-rgb), 1);
    --bg-color-secondary:  rgba(var(--bg-color-secondary-rgb), 1);
    --acc-color:           rgba(var(--acc-color-rgb), 1);
    --acc-color-secondary: rgba(var(--acc-color-econdary-rgb), 1);
    --link-hover-color:    rgba(var(--link-hover-color-rgb), 1);
    
    /* Inserting the color values into bootstrap */
    --bs-body-color:        var(--bs-white);
    --bs-body-color-rgb:    var(--bs-white-rgb);
    --bs-body-bg:           var(--bg-color);
    --bs-body-bg-rgb:       var(--bg-color-rgb);
    --bs-secondary-bg:      var(--bg-color-secondary);
    --bs-secondary-bg-rgb:  var(--bg-color-secondary-rgb);
    --bs-tertiary-bg:       var(--acc-color);
    --bs-tertiary-bg-rgb:   var(--acc-color-rgb);
    --bs-link-color:            var(--bs-black);
    --bs-link-color-rgb:        var(--bs-black-rgb);
    --bs-link-hover-color:      var(--link-hover-color);
    --bs-link-hover-color-rgb:  var(--link-hover-color-rgb);
    --bs-border-width:          2px;
    --bs-border-color:          var(--bs-black);
}

/* Make sure the form link-buttons have white text  */
form .btn-link:not(hover) {
    color: var(--bs-white);
}

/* Collapsibles have the little arrow from Bootstrap */
.collapsible {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Keeping the title in the center */
.collapsible b {
    padding-left: var(--bs-accordion-btn-icon-width);
    margin-left: auto;
    margin-right: auto;
}

/* The bootstrap arrow (on the right side) */
.collapsible::after {
    width: var(--bs-accordion-btn-icon-width);
    height: var(--bs-accordion-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
}

/* Turn the arrow upside down */
.collapsible:not(.collapsed)::after {
  transform: var(--bs-accordion-btn-icon-transform);
}

/**
 * Adding some bootstrap classes together
 * to prevent Class-itis
 */
.btn-group-vertical > button {    
    /* fw-bold */
    font-weight: 700;
    
    /* text-start */
    text-align: left;
}

.btn-group-vertical:not([role="tablist"]) > button {    
    /* fw-bold */
    font-weight: 700;
    
    /* text-start */
    text-align: left;
    
    /* pb-0 */
    padding-bottom: 0;
}

.bg-gradient-center {
    background-image: linear-gradient(90deg,
        rgba(36, 32, 30, 1) 0%, 
        rgba(69, 64, 53, 1) 15%, 
        rgba(69, 64, 53, 1) 85%, 
        rgba(36, 32, 30, 1) 100%);
}

.form-control {
    background-color: var(--bg-color-secondary);
}

.form-select {
    background-color: var(--bg-color-secondary);
}

.table {
    --bs-table-bg: var(--bg-color-secondary);
    --bs-table-color: var(--bs-white);
    --bs-table-hover-color: var(--bs-white);
}