/*======================================================================================*/
/* MODULE:  static/css/custom.css                                                       */
/*======================================================================================*/

/*              *=======================================================================*/
/*              * Flexible content definition                                           */
/*              *=======================================================================*/
body {
    display:            flex;
    flex-direction:     column;
    min-height:         100vh;                  /* Ensure the body takes full viewport height */
    margin:             0;
}
main {
    flex:               1 0 auto;               /* Allow main content to grow and push footer down */
}
footer {
    flex-shrink:        0;                      /* Prevent footer from shrinking */
    background-color:   var(--contrast-bg);     /* Example background */
    padding:            10px 0;
}

/*              *=======================================================================*/
/*              * Standard HTML tags (headings, tables)                                 */
/*              *=======================================================================*/
h2 {
    margin-bottom:    20px;
}
table {
    width:            100%; 
    max-width:        90%; 
    margin:           20px auto;
    border-radius:    8px;
}

th, td {
    background-color: var(--tr-data-bg);
    text-align:       left;
    vertical-align:   middle; 
}

.tr_head {
    background-color: var(--tr-header-bg);
    border-bottom:    10px solid var(--tr-header-border);
    text-align:       left;
}

th {
    padding-top:      15px;
    padding-bottom:   15px;
}

.th_rank {
    text-align:       center;
}

.tr_body {
    border-bottom:    3px solid var(--tr-data-border);
    text-align:       left;
}

/*              *=======================================================================*/
/*              * "Soft" Button: Extends Bootstrap 'btn' with subtle, minimalist styling*/
/*              *=======================================================================*/
.btn.cdm-soft-btn {
    background-color:       var(--soft-btn-bg);
    color:                  var(--soft-btn-text);
    border-color:           var(--soft-btn-border);
    transition:             background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border-radius:          30px;
    border-width:           2px;
    white-space:            nowrap;
    max-width:              80%;
    width:                  100%;
}
.btn.cdm-soft-btn:hover {
    background-color:       var(--soft-btn-hover-bg);
    color:                  var(--soft-btn-hover-text);
    border-color:           var(--soft-btn-hover-border);
}
.btn.cdm-soft-btn:active, .btn.cdm-soft-btn.active {
    background-color:       var(--soft-btn-active-bg);
    color:                  var(--soft-btn-active-text);
    border-color:           var(--soft-btn-active-border);
}

/*              *=======================================================================*/
/*              * "Loud" Button: Bootstrap 'btn' with bold, attention-grabbing styling  */
/*              *=======================================================================*/
.btn.cdm-loud-btn {
    background-color:       var(--loud-btn-bg);
    color:                  var(--loud-btn-text);
    border-color:           var(--loud-btn-border);
    transition:             background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border-radius:          30px;
    border-width:           2px;
    white-space:            nowrap;
    max-width:              80%;
    width:                  100%;
}
.btn.cdm-loud-btn:hover {
    background-color:       var(--loud-btn-hover-bg);
    color:                  var(--loud-btn-hover-text);
    border-color:           var(--loud-btn-hover-border);
}
.btn.cdm-soloudft-btn:active, .btn.cdm-loud-btn.active {
    background-color:       var(--loud-btn-active-bg);
    color:                  var(--loud-btn-active-text);
    border-color:           var(--loud-btn-active-border);
}

/*              *=======================================================================*/
/*              * Toggle switch and options                                             */
/*              *=======================================================================*/
.twoway-toggle {
    display:          flex;
    width:            100vh;
    justify-content:  center;
    align-items:      center;
    margin-bottom:    8px;
}
.toggle-input {
    display:          none;
}
.toggle-switch {
    display:          flex;
    align-items:      center;
    background-color: var(--toggle-bg);
    border:           1px solid var(--toggle-border);
    border-radius:    30px;
    padding:          5px;
    cursor:           pointer;
    transition:       background-color 0.3s;
}
.toggle-option {
    background-color: var(--toggle-off-bg);  
    color:            var(--toggle-off-text);
    border:           none;
    padding:          10px 20px;
    cursor:           pointer;
    font-size:        16px;
    border-radius:    30px;
    transition:       background-color 0.3s, color 0.3s;
}
.toggle-option.active {
    background-color: var(--toggle-on-bg);  
    color:            var(--toggle-on-text);
}

/*              *=======================================================================*/
/*              * Container                                                             */
/*              *=======================================================================*/
.container {
    flex:             1;
    display:          flex;
    width:            100%;
    margin-top:       20px;
    max-height:       500px;
}