/* styles.css */
.btn {
    border: 2px solid #d4af37;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.2);
}

.btn:hover {
    background-color: transparent;
    transform: scale(1.05);
    color: #dee2e6;
    text-shadow: 0 0 20px #ffd700;
    box-shadow: inset 0 0 7px rgba(212, 175, 55, 0.2);
}

.btn:active {
    transform: scale(0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);
}

.btn.disabled,
.btn:disabled {
    background-color: #6c757d;
    border-color: #d4af37;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.65;
}

.hidden {display: none;}

#contractinator_top_container {
    width: 400px;
    display: inline-block;
}

#main_tab {
    margin-bottom: 15px;
}

.shiny-notification {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1000 !important;
    background: #007bff !important;
    color: white !important;
    padding: 20px !important;
    border-radius: 10px !important;
    font-size: 18px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* ------- Contractinator --------------------------------------------------- */

/* Formats top-level accordion button */
#contractinator_top_container > .accordion-item >
.accordion-header > .accordion-button {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Orbitron', 'Arial', sans-serif;
}

/* Spacing and scrollbar behavior for accordion items */
#contractinator_accordion{
    margin-top: 15px;
    padding: 20px;
    max-height: 350px;
    overflow-y: auto;
}
#contractinator_accordion .accordion-item{
    border: none;
}
#contractinator_accordion .accordion-item:not(:first-child) {
    margin-top: 4px;
}

/* Formats all contractinator contract item buttons */
#contractinator_accordion .accordion-button[aria-expanded="true"] {
    background: linear-gradient(145deg, #1a1a1a, #2a2a3a);
    border: 2px solid #00b7eb;
    border-radius: 8px;
    padding: 5px 10px;
    color: #e0e0e0;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease; /* Smooth transitions for hover/active states */
}
#contractinator_accordion .accordion-button[aria-expanded="false"] {
    background: linear-gradient(145deg, #1a1a1a, #2a2a3a);
    border: 2px solid #ff007a;
    border-radius: 8px;
    padding: 5px 10px;
    color: #e0e0e0;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease; /* Smooth transitions for hover/active states */
}

/* Hover state */
#contractinator_accordion .accordion-button[aria-expanded="true"]:hover {
    border-color: #ff007a;
    text-shadow: 0 0 5px #00b7eb, 0 0 10px #00b7eb;
    box-shadow: 0 0 20px rgba(255, 0, 122, 0.7);
    transform: translateY(-2px); /* Slight lift for dynamic feel */
}
#contractinator_accordion .accordion-button[aria-expanded="false"]:hover {
    border-color: #00b7eb;
    text-shadow: 0 0 5px #ff007a, 0 0 10px #ff007a;
    box-shadow: 0 0 20px rgba(0, 183, 235, 0.7);
    transform: translateY(-2px); /* Slight lift for dynamic feel */
}

/* digital glitch effect */
#contractinator_accordion .accordion-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(0, 183, 235, 0.2),
            transparent
    ); /* Faint cyan scanline */
    transition: 0.5s;
}
#contractinator_accordion .accordion-button:hover::before {
    left: 100%; /* Scanline moves across on hover */
}

/* Collapse control styling */
#contractinator_accordion .accordion-button::after {
    content: '';
    position: absolute; /* Move to far right */
    right: 10px; /* Align to right edge with padding */
    top: 50%; /* Vertically center */
    transform: translateY(-50%) scale(1); /* Center and default scale */
    color: #00b7eb;
    text-shadow: 0 0 1px #00b7eb, 0 0 2px #00b7eb;
    background: linear-gradient(45deg, #00b7eb, #ffd700);
    -webkit-background-clip: text; /* Clip gradient to text */
    -webkit-text-fill-color: transparent; /* Transparent text for gradient */
    /*filter: drop-shadow(0 0 1px #00b7eb);*/
    transition: all 0.3s ease; /* Smooth transitions for color, rotation, scale */
}

/* Expanded state: Up tri with magenta/gold */
#contractinator_accordion .accordion-button[aria-expanded="true"]::after {
    content: '△'; /* Up tri for expanded state */
    color: #ff007a;
    text-shadow: 0 0 1px #ff007a, 0 0 2px #ff007a;
    background: linear-gradient(45deg, #ff007a, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*filter: drop-shadow(0 0 1px #ff007a);*/
    transform: translateY(-50%) rotate(360deg)
    scale(1.2); /* Center, rotate, and enlarge */
}

/* Collapsed state: Down tri with cyan/silver */
#contractinator_accordion .accordion-button[aria-expanded="false"]::after {
    content: '▽'; /* Explicitly set for clarity */
    transform: translateY(-50%) scale(1); /* Center and reset scale */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 15px; /* Adjust padding to control spacing, override Bootstrap default if needed */
}

.modal-title {
    flex-grow: 1;
    margin: 0; /* Remove default margin to avoid constraining the inner div */
    width: 100%;
}

.modal-title > div {
    display: flex;
    align-items: center;
    width: 100%;
}

.modal-title > div > .action-button#close_modal {
    margin-left: auto; /* Push the button to the rightmost edge */
}

.modal_close_button {
    color: #ff007a;
    text-shadow: 0 0 5px #ff007a, 0 0 10px #ff007a;
    background: linear-gradient(45deg, #ff007a, #ffd700);
    box-shadow: none;
    border: none;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.modal_close_button:hover {
    color: #ff007a;
    text-shadow: 0 0 10px #ff007a, 0 0 15px #ff007a;
    background: linear-gradient(45deg, #ff007a, #ffd700);
    transform: scale(1.05);
    box-shadow: none;
    border: none;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.inline-code {
    font-family: var(--bs-font-monospace), serif;
    margin-top: 0;
    margin-bottom: 0;
    overflow: auto;
    font-size: .875em;
    color: #ede5b8;
    background-color: RGBA(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.04);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 3px;
}

.validation_table th, .validation_table td {
    text-align: left;
}

.vertically_centered {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

.contractinator_completed  span > button {
    border-color: #02db02 !important;
}

#contractinator_remove_a_row_modal {
    max-height: 350px;
    overflow-y: auto;
}

/* Target the DataFrame table */
#new_contractinator_panels_df_output table,
#new_contractinator_panels_df_output .table {
    border: none !important;
    position: relative;
    overflow: hidden;
    table-layout: fixed;
}

/* th, NOT button columns */
#new_contractinator_panels_df_output th:not(:nth-last-child(-n+2)),
#new_contractinator_panels_df_output tbody th:not(:nth-last-child(-n+2)) {
    background: linear-gradient(145deg, #1a1a1a, #2a2a3a);
    color: #e0e0e0; /* Light text for contrast */
    border: 2px solid #00b7eb;
    padding: 5px; /* Slightly larger for readability */
}

/* td, NOT button columns */
#new_contractinator_panels_df_output td:not(:nth-last-child(-n+2)),
#new_contractinator_panels_df_output tbody td:not(:nth-last-child(-n+2)) {
    background: linear-gradient(145deg, #2a2a3a, #3a3a4a);
    height: 32px;
    width: 150px;
    color: #e0e0e0;
    border: 1px solid #00b7eb;
    padding: 8px;
    transition: all 0.3s ease; /* Smooth hover transitions */
    box-shadow: inset 0 0 3px rgba(0, 183, 235, 0.2); /* Subtle sci-fi glow */
}

/* td, button columns */
#new_contractinator_panels_df_output td:nth-last-child(-n+2),
#new_contractinator_panels_df_output tbody td:nth-last-child(-n+2),
#new_contractinator_panels_df_output th:nth-last-child(-n+2),
#new_contractinator_panels_df_output tbody th:nth-last-child(-n+2) {
    background: transparent;
    border: none;
    width: 17px !important;
}

/* Hover effects on rows: NOT button columns */
#new_contractinator_panels_df_output td:not(:nth-last-child(-n+2)):hover {
    background: linear-gradient(145deg, #ff007a, #3a3a4a);
    box-shadow: 0 0 10px rgba(255, 0, 122, 0.7); /* Neon magenta shadow */
    transform: translateY(-1px); /* Slight lift for interactivity */
    color: #ffd700; /* Jules Verne gold text on hover */
    text-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700; /* Gold glow */
}

/* Neuromancer scanline effect */
#new_contractinator_panels_df_output table::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(0, 183, 235, 0.2),
            transparent
    ); /* Faint cyan scanline */
    transition: 0.5s;
}

#new_contractinator_panels_df_output table:hover::before {
    left: 100%; /* Scanline moves across on hover */
}

#new_contractinator_panels_df_output thead,
#new_contractinator_panels_df_output .dataTables_scrollHead table,
#new_contractinator_panels_df_output > div,
#new_contractinator_panels_df_output > div > div {
    border: none !important;
}

.plus-button, .minus-button {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    outline: none;
    transition: all 0.2s ease;
    position: relative;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
}
.plus-button {
    color: #00FF66;
}
.minus-button{
    color: #FF1A3D;
}
.minus-button > span {
    transform: translateY(-2px);
}

.plus-button:hover, .minus-button:hover {
    text-shadow: 0 0 20px #ffd700;
    font-size: 1.7rem;
    background: rgba(255, 255, 255, 0);
    border: 1px solid #ffd700;
    outline: none !important;
}
.plus-button:hover {
    color: #00FF66;
}
.minus-button:hover {
    color: #FF1A3D;
    border: 1px solid #ffd700;
}

.plus-button:focus, .plus-button:focus-visible,
.minus-button:focus, .minus-button:focus-visible {
    background: rgba(255, 255, 255, 0);
    border: 1px solid !important;
    outline: none !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.plus-button:active, .minus-button:active {
    text-shadow: 0 0 10px #ffd700;
    background: rgba(255, 255, 255, 0);
    border: 1px solid !important;
    outline: none !important;
    font-size: 1.4rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
