/* Theme-aware body styling */
body {
    background-color: var(--bg-primary, #ffffff);
    color: var(--text-primary, #212529);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar-top-header{
    /*background-color: #009170;*/
    background-color: var(--navbar-bg, white);
    box-shadow: var(--navbar-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
}

.background-card {
    padding: 10px 30px;
    border-radius: 4px;
    background: var(--card-bg, #f5f5f5);
    box-shadow: 0 20px 25px -15px var(--shadow-strong, rgba(0, 0, 0, 0.3));  
}

.card-header{
    background: var(--card-header-bg, #212529);
    color: var(--card-header-text, white);
}

.content {
    position: absolute;
    left: 0;
    right: 0;
    top: 55px;
    margin-left:auto; 
    margin-right:auto;  
}

.imgComments {
    background-image: url(../img/inbox_document_text.png);
}

#footer {
    width:100%;
    height:30px;
    background-color: var(--footer-bg, green);
    color: var(--footer-text, white);
}

.form-label-custom {
    font-weight: bold;
    text-decoration: underline;
}

.header-content{
    padding-left: 15px;
    padding-right: 15px;
}

.kaban-board-col{
    height:50vh;
    overflow-y:auto;
}

.kaban-board-header {
    font-weight:900;
    text-decoration: underline;
}

.leaderboard-container{
    overflow-y:auto; 
    height: 750px;
}

.loading{
    width:25px; 
    height: 25px;
    border-radius:50%;
    background: repeating-conic-gradient(#000 0 90deg, gold 0 180deg);
    animation: s1 1s infinite linear;
}

@keyframes s1 {
    100% {transform: rotate(.5turn)}
}

/* Ensure Bootstrap modals have correct z-index hierarchy */
/* Backdrop should be below modal - must be at body level */
body > .modal-backdrop,
.modal-backdrop {
    z-index: 1040 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* Modal should be above backdrop - must be at body level */
body > .modal,
.modal.show,
.modal {
    z-index: 1055 !important;
    position: fixed !important;
}

/* Ensure modal dialog is also above backdrop */
.modal.show .modal-dialog,
.modal .modal-dialog {
    z-index: 1056 !important;
    position: relative !important;
}

/* Ensure modal content is above everything */
.modal.show .modal-content,
.modal .modal-content {
    position: relative !important;
    z-index: 1057 !important;
}

.modal-header{
    background-color: var(--modal-header-bg, #0b0b0c);
    color: var(--modal-header-text, white);
}

.modal-header .btn-close{
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

.modal-header-error{
    background-color: #FF3547;
    color: black;
}

.modal-header-success {
    background-color: #5CBB5C;
    color: black;
}

.nav-tabs .nav-link.active {
    color: var(--tab-active-text, black);
}

.nav-tabs .nav-link{
    background: var(--tab-bg, rgba( 255, 255, 255, 0.50 ));
    backdrop-filter: blur( 20.0px );
    -webkit-backdrop-filter: blur( 20.0px );
    color: var(--tab-text, #495057);
}

.card-blur{
    background: var(--blur-bg, rgba( 255, 255, 255, 0.90 ));
    backdrop-filter: blur( 20.0px );
    -webkit-backdrop-filter: blur( 20.0px );
    color: var(--blur-text, black);
}

.nav-tabs .nav-link:hover{
    background: var(--tab-hover-bg, rgba( 255, 255, 255 ));
    backdrop-filter: blur( 20.0px );
    -webkit-backdrop-filter: blur( 20.0px );
    color: var(--tab-hover-text, blue);
}

.no-button-format{
    border:0px; 
    background-color: transparent;
}
  
.no-link-format{
    color: inherit;
    text-decoration: inherit;
}

#settingsContent{
    height:100%;
}


.settings-avatar{
    border:1px solid black;
    height:200px;
    width:198px;
}


.settings-avatar-tabpanel .nav-link{
    background: #b9b9b9;
    color:white;
    backdrop-filter: blur( 20.0px );
    -webkit-backdrop-filter: blur( 20.0px );
    border-bottom-right-radius: 80px;
    border-bottom-left-radius: 80px;
}

.settings-avatar-tabpanel  .nav-link.active {
    background-color: #f9ff60;
    background-image: linear-gradient(315deg, #f9ff60 0%, #ffef77 74%);
    color:black;
}

.settings-avatar-tabpanel .nav-link:hover{
    background-color: #f9ff60;
    background-image: linear-gradient(315deg, #f9ff60 0%, #ffef77 74%);
    backdrop-filter: blur( 20.0px );
    -webkit-backdrop-filter: blur( 20.0px );
    color:black;
}

.settings-avatar-tabpanel .nav-tabs{
    border-bottom:0px;
}

.settings-display{
    border: 1px solid black;
    margin-top:10px;
}

.timeline-date{
    position: relative;
    background: #8AC149;
    display: inline-block;
    color: #FFFFFF;
    top: 0;
    right: 0;
    padding:10px;
    display:none;
}

.timeline-section{
    position: relative;
    padding: 10px 30px;
    border-radius: 4px;
    background: var(--timeline-bg, #f5f5f5);
    box-shadow: 0 20px 25px -15px var(--shadow-strong, rgba(0, 0, 0, 0.3));
    margin-left:auto; 
    margin-right: auto;
    display:none;
    height:100%;
}

.comment {
    display:none;
    margin-left: auto;
    margin-right: auto;
    padding-top:50px;
    width:60%;
}

.timeline-bottom{
    border-top: 1px solid black;
    background:whitesmoke;
    display: none;
    position: absolute;
    bottom: 0;
    width: 100%;;
}

.timeline-feedback-button-blue {
    background-color: #48abe0;
    color: white;
    border: none;
    padding-left: 5px;
    padding-right: 5px;
    height: 30px;
    width: 30px;
    box-shadow: 0 2px 4px darkslategray;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 70%;
    float:right;
}

.timeline-feedback-button-red {
    background-color: red;
    color: white;
    border: none;
    padding-left: 5px;
    padding-right: 5px;
    height: 30px;
    width: 30px;
    box-shadow: 0 2px 4px darkslategray;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 70%;
    float:right;
}

.timeline-feedback-button-orange {
    background-color: orange;
    color: white;
    border: none;
    padding-left: 5px;
    padding-right: 5px;
    height: 30px;
    width: 30px;
    box-shadow: 0 2px 4px darkslategray;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 70%;
    float:right;
}

.skyscrapper-window{
    height: 310px;
    width: 100%;
    position: relative;
}

.skyscrapper-window:hover{
    background-image: none;
    background-color:lightgrey;
}

.skyscrapper-window:hover .comment {
    display:block;
}

.skyscrapper-window:hover .timeline-section{
    display:block;
}

.skyscrapper-window:hover .timeline-bottom{
    display: block;
}

.tab-content{
    background-color: var(--bg-primary, white);
    overflow-y:auto;
    padding-bottom:170px;
}

.tab-content-windows {
    background-color: white;
    background-image: url('../img/skyscrapper_window.jpg');
    
}

.table-button-header{
    width:150px;
}

.text-area-custom{
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--input-text, #212529);
    background-color: var(--input-bg, #fff);
    background-clip: padding-box;
    border: 1px solid var(--input-border, #ced4da);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.topNav {
    background-color: #f9ff60;
    background-image: linear-gradient(315deg, #f9ff60 0%, #ffef77 74%);
    position: absolute;
    left: 0;
    right: 0;
    margin-left:auto; 
    margin-right:auto;
    text-align: center;
    z-index: 1;
    width:300px;
    height:50px;
    border-radius: 0px 0px 80px 80px;
    transition: .5s ease;
}

.topNavExpand{
    width:400px;
    height:80px;
    transition: .5s ease;
}

.topNav .nav-link {
    color: black;
}

.topNav .nav-link:hover {
    color: blue;
}

.timeline-left-pane{
    border: 5px solid var(--timeline-border, black); 
    height:120px;
    margin-bottom:5px;
}

.timeline-right-pane{
    border: 5px solid var(--timeline-border, black); 
    height:120px;
    margin-bottom:5px;
}

.yellow_text {
    border-color: 1px solid black;
    background: #fff;
    color: #f9ff60;
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 32px;
    font-family: Arial Black, Gadget, serif;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color:black;
}

/**MODAL BACKGROUND**/

.failure-bg {
    background-color: #FF3547;
  }
    
.success-bg {
    background-color: #5CBB5C;
}

.normal-bg{
    background-color: black;
    color: white;
}

.information-bg{
    background-color: #03a9f4 ;
    color:black;
}
  
.cheatsheet-header{
    display:inline-block; 
    position:relative; 
    top:-15px; 
    background-color: var(--bg-primary, white); 
    margin-left:5px; 
    font-weight: bold;
    color: var(--tab-hover-text, blue);
}

.cheatsheet-item{
    position:relative;
    top: -10px;
}

.cheatsheet-flex {
    display:flex; 
    flex-wrap: wrap;
}

.panel-default {
    margin-top: 10px;
    border: none;
    overflow-anchor:none;
    box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
  }
  
  .panel-default .panel-heading {
    background-image: none;
    background-color: var(--panel-header-bg, #212529);
    font-weight: bold;
    padding-left: 6px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: var(--panel-header-text, #FFFFFF);
    border-top: none;
    border-left: 1px solid var(--panel-header-bg, #212529);
    border-right: 1px solid var(--panel-header-bg, #212529);
    border-radius: 0px;
  }
  
  .panel-default .panel-body {
    background-image: none;
    background-color: var(--panel-bg, rgb(244,244,244));
    border-top: 1px solid var(--border-color, rgb(207,207,207));
    border-left: 1px solid var(--border-color, rgb(207,207,207));
    border-right: 1px solid var(--border-color, rgb(207,207,207));
    border-bottom: 1px solid var(--border-color, rgb(207,207,207));
    padding-bottom: 20px;
  }
  
  .panel-default .panel-title {
    font-size: 14px;
    height:30px;
  }
  
  .panel-default  .panel-footer{
    font-size: 12px;
    background-color: var(--panel-bg, rgb(244,244,244));
  }
  
  .panel-default .panel-heading-red {
    background-color: rgb(244,0,9);
    border-top: 1px solid rgb(244,0,9);
    border-left: 1px solid rgb(244,0,9);
    border-right: 1px solid rgb(244,0,9);
    border-bottom: none;
  }
  
  .panel-info {
    background-color: black;
    color: white;
  }

  .menuhide{
    display:block;
    height:20px;
    width:20px;
    margin:5px;
    content: url(../img/menugreen.png);
  }
  
  .menushow{
    display:block;
    height:20px;
    width:20px;
    margin:5px;
    content: url(../img/menuwhite.png);
  }
  
.show-toggle {
    content: url(../img/down-arrow.png);
    width: 100%;
    max-width: 32px;
    height: auto;
}

.collapse-toggle {
    content:url(../img/right-arrow.png);
    width: 100%;
    max-width: 32px;
    height: auto;
}

.left-arrow {
    content:url(../img/left-arrow.png);
    width: 100%;
    max-width: 32px;
    height: auto;
}

.right-arrow {
    content:url(../img/right-arrow.png);
    width: 100%;
    max-width: 32px;
    height: auto;
}

.neon {
    color: white;
    text-shadow:
      0 0 5px white,
      0 0 10px white
  }

.mailbox {
    margin-top:-60px;
    margin-left:200px;
}

.inline-div {
    display:inline-block;
}

@media (max-width: 576px) {
    .mx-w-100 {
    width: 100% !important;
    }

    .mailbox {
        margin-left:50px;
    }

    .comment {
        width:100%;
    }
}

.link-primary-hover:hover {
    color: #007bff !important;
}

.form-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.form-section h5 {
    color: #495057;
    margin-bottom: 1rem;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 0.5rem;
}

.form-section-header-content {
    margin-bottom: 1rem;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 0.5rem;
}

.required-field {
    color: #dc3545;
}
.form-help {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}
.priority-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}


/* Priority and Status Badges */
.priority-badge, .status-badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.priority-low {
    background-color: #d4edda;
    color: #155724;
}

.priority-medium {
    background-color: #fff3cd;
    color: #856404;
}

.priority-high {
    background-color: #f8d7da;
    color: #721c24;
}

.priority-urgent {
    background-color: #f5c6cb;
    color: #721c24;
    font-weight: bold;
}

.status-todo {
    background-color: #e2e3e5;
    color: #383d41;
}

.status-in_progress {
    background-color: #cce5ff;
    color: #004085;
}

.status-review {
    background-color: #e2d9f3;
    color: #4a2c7a;
}

.status-completed {
    background-color: #d4edda;
    color: #155724;
}

.autocomplete-container {
    position: relative;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-color, #ced4da);
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.autocomplete-dropdown.show {
    display: block;
}

.autocomplete-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color, #f0f0f0);
}

.autocomplete-item:hover,
.autocomplete-item.highlighted {
    background-color: var(--bg-secondary, #f8f9fa);
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-match {
    font-weight: bold;
}

.filter-card {
    background-color: #f8f9fa !important;
}


.table-modern {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.table-modern th {
    background: #f8f9fa;
    border: none;
    font-weight: 600;
    color: #333;
}

.table-modern td {
    border: none;
    border-bottom: 1px solid #f1f3f4;
}

.table-modern.table-modern-bordered td {
    border: 1px solid #f1f3f4 !important;
}