@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800|Roboto:100,300,400,500,700,900|Roboto+Mono:100,200,300,400,500,600,700|Noto+Sans+Symbols:100,200,300,400,500,600,700,800,900|Share+Tech+Mono:400');

@import url('https://fonts.googleapis.com/css?family=Armata:400|Rajdhani:300,400,500,600,700|Poppins:100,200,300,400,500,600,700,800,900|Saira:100,200,300,400,500,600,700,800,900|Jura:300,400,500,600,700|Monda:400,700');

:root {
    --border-color: #fff;
    --active-background-gradient: linear-gradient(180deg, rgba(33,150,243,1) 0%, rgba(33,150,243,0.75) 75%, rgba(0,0,0,0) 100%);
    --linear-background-gradient: linear-gradient(180deg, rgba(166,166,166,0.75) 0%, rgba(166,166,166,0.75) 75%, rgba(0,0,0,0) 100%);
    --inactive-color: #BABABA;
    --active-color: #2196F3;
    --active-rgba-color: rgba(33,150,243,1);
    --toggled-rgba-color: rgba(33,150,243,0.45);
    --text-color: #222222;
    --active-text-color: #FFF;
    --select-border: #777;
    --select-focus: blue;
    --select-arrow: var(--select-border);
    --toolbar-width: 3.5vw;
    --toolbar-height: 16vw;
    --light-text-weight: 300;
    --heavy-text-weight: 800;
    --normal-text-weight: 400;
    --ui-container-radial-gradient: radial-gradient(circle, rgba(221,221,221,1) 0%, rgba(216,216,216,1) 55%, rgba(136,136,136,1) 100%);
    /* --ui-item-active-border-color: var(--active-rgba-color); */
    --ui-item-active-border-color: #FFFFFF;
    --ui-item-active-background-color: rgba(0,0,0,0.40);
    --ui-item-active-foreground-color: #FFFFFF;
    --ui-item-dark-active-border-color: #CCCCCC;
    --ui-item-dark-active-background-color: rgba(0,0,0,0.30);
    --ui-item-dark-active-foreground-color: #CCCCCC;
    --ui-item-hover-border-color: #EEEEEE;
    --ui-item-hover-background-color: rgba(0,0,0,0.60);
    --ui-item-hover-foreground-color: #EEEEEE;
    --ui-item-inactive-border-color: #9D9D9D;
    --ui-item-inactive-background-color: rgba(0,0,0,0.25);
    --ui-item-inactive-foreground-color: #9D9D9D;
    --ui-item-pressed-border-color: #2196F3; /* #CCCCCC; */
    --ui-item-pressed-background-color: rgba(0,0,0,0.75);
    --ui-item-pressed-foreground-color: #2196F3; /* #CCCCCC; */
    /* Label Text */
    --label-large-text: 1.7em;
    --label-medium-text: 1em;
    --label-small-text: 0.6em;
    /* Label Icons */
    --label-large-icon: 80%;
    --label-medium-icon: 60%;
    --label-small-icon: 40%;
    /* All label filters assume the label is black to start */
    --label-active-filter: invert(100%);
    --label-hover-filter: invert(88%);
    --label-inactive-filter: invert(70%);
    --label-pressed-filter: invert(52%) sepia(51%) saturate(5307%) hue-rotate(189deg) brightness(104%) contrast(91%); /* #2196F3 (bright cobalt blue) */
    /* All icon filters assume the icon is black to start */
    --icon-active-filter: invert(100%);
    --icon-hover-filter: invert(88%);
    --icon-inactive-filter: invert(65%);
    --icon-pressed-filter: invert(52%) sepia(51%) saturate(5307%) hue-rotate(189deg) brightness(104%) contrast(91%); /* #2196F3 (bright cobalt blue) */
}


.pagebackgroundstyle {
    /* background: rgb(221,221,221); */
    background: var(--ui-container-radial-gradient);
    sfont-family: 'Open Sans', sans-serif;
    sfont-family: 'Roboto', sans-serif;
    sfont-weight: var(--heavy-text-weight);
}

.pagestyle {
    sfont-family: 'Open Sans', sans-serif;
    font-family: 'Poppins', sans-serif;
    font-weight: var(--light-text-weight);
}

.activeitem:hover {
    border-width: 0.125em;
    border-style: solid;
    border-color: var(--ui-item-active-border-color);
    background-color: var(--ui-item-active-hover-background-color);
}

.activeitem:active {
    background-color: var(--ui-item-active-pressed-background-color);
}



.standardcontainerstyle {
    background-color: var(--ui-item-inactive-background-color);
    /* Adding font color and weight here so that divs show up */
    /* in a uniform fashion as long as they are given this */
    /* class. */
    color: var(--ui-item-dark-active-foreground-color);
    font-size: 1.15em;
    sfont-family: 'Open Sans', sans-serif;
    font-family: 'Poppins', sans-serif;
}

.activecontainerstyle {
    background-color: var(--ui-item-active-background-color);
}



.inactivebackgroundstyle {
    background-color: var(--ui-item-inactive-background-color);
}

.inactiveiconstyle {
    filter: var(--icon-inactive-filter);
}

.activebackgroundstyle {
    background-color: var(--ui-item-active-background-color);
}

.activeiconstyle {
    filter: var(--icon-active-filter);
}

.pressedbackgroundstyle {
    background-color: var(--ui-item-active-pressed-background-color);
}

hoverbackgroundstyle:hover {
    border-width: 0.125em;
    border-style: solid;
    border-color: var(--ui-item-active-border-color);
    background-color: var(--ui-item-active-hover-background-color);
}

.standardiconlayout {
    /* background: transparent; */
    /* background: red; */
    background-repeat: no-repeat;
    background-position: center;
    /*background-size: var(--label-medium-icon);*/
    background-size: 80% 60%;
    /* padding: 0.0em 0.0em 0.5em 0.0em; */
    /* margin: 0.5em 0.65em 0.5em 0em; */
    /* margin: 0em 0.65em 0em 0.65em; */
    /*    margin: 0em auto; */
    /* overflow: scroll; */
    /* white-space: nowrap; */
    /* color: white; */
    /* font-weight: 500; */
    text-align: center;
}


.squareareainterior {
    background-image: url("squareblack.svg");
}



/* Re-styling Bootstrap */

label {
    sfont-weight: bold; /* Bold label text */
    sfont-size: 1.1em;
}


.form-control {
    background-color: var(--ui-item-dark-active-background-color);
    sborder: 1px solid #CCC; /* Dark-ui border */
    border: 0 !important; /* Remove borders */
    border-radius: 0 !important; /* Make corners square */
    color: var(--ui-item-dark-active-foreground-color);

    sfont-size: 1.25rem;
}

    .form-control:focus {
        background-color: var(--ui-item-dark-active-background-color);
        sborder: 1px solid #CCC; /* Dark-ui border */
        border: 0 !important; /* Remove borders */
        border-radius: 0 !important; /* Make corners square */
        color: var(--ui-item-dark-active-foreground-color);
    }

    .form-control::placeholder {
        color: var(--ui-item-inactive-foreground-color);
    }


.form-select {
    background-color: var(--ui-item-dark-active-background-color);
    sborder: 1px solid #CCC; /* Dark-ui border */
    border: 0 !important; /* Remove borders */
    border-radius: 0 !important; /* Make corners square */
    color: var(--ui-item-dark-active-foreground-color);
    /* Believe it or not the next 4 lines are necessary JUST */
    /* to change the chevron arrow color to white. If you */
    /* want to change it to another color, you will need to */
    /* alter the part of the 'background-image' value where */
    /* it says'fill="white"'. Change 'white' to whatever */
    /* color you want. */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;

    font-size: 1.25rem;
}

    .form-select:focus {
        background-color: var(--ui-item-dark-active-background-color);
        sborder: 1px solid #CCC; /* Dark-ui border */
        border: 0 !important; /* Remove borders */
        border-radius: 0 !important; /* Make corners square */
        color: var(--ui-item-dark-active-foreground-color);
    }

    .form-select::placeholder {
        color: var(--ui-item-inactive-foreground-color);
    }

option {     /* For select options */
    color: var(--ui-item-dark-active-background-color); /* Text color */
    background-color: var(--ui-item-dark-active-background-color); /* Background color */
}



/* Custom radio button */
.form-check-input {
    background-color: var(--ui-item-dark-active-background-color);
}

    .form-check-input:checked {
        background-color: var(--ui-item-dark-active-background-color);
    }

/* Custom label styling */
.form-check-label {
    sfont-weight: bold; /* Bold label text */
}

/* Denture Order Styling */
.section-container {
    background-color: var(--secondary-bg);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
}

.section-title {
    color: white;
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

/* Dental Arch Visual Layout */
.dental-arch-container {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 30px;
}

.arch-section {
    width: 100%;
    max-width: 800px;
}

.arch-label {
    text-align: left;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #aaa;
}

.arch-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    position: relative;
}

.arch-row.lower {
    align-items: flex-start;
}

.tooth-btn {
    width: 52px;
    height: 58px;
    border: 2px solid #666;
    border-radius: 8px 8px 12px 12px;
    background: var(--tooth-default);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    font-size: 11px;
    font-weight: 600;
    color: #333;
}

.arch-row.lower .tooth-btn {
    border-radius: 12px 12px 8px 8px;
}

.tooth-btn:hover {
    background: var(--tooth-hover);
    transform: scale(1.05);
    border-color: var(--accent-color);
}

.tooth-btn.selected {
    background: var(--partial-color);
    border-color: #2e7d32;
    color: white;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.tooth-btn.complete-arch {
    background: var(--full-color);
    border-color: #b8860b;
    color: #333;
}

.tooth-number {
    font-size: 16px;
    font-weight: bold;
}

.tooth-name {
    font-size: 9px;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Quadrant divider */
.quadrant-divider {
    width: 3px;
    height: 70px;
    background: linear-gradient(to bottom, transparent, var(--accent-color), transparent);
    margin: 0 15px;
}

/* Complete arch checkbox styling */
.complete-arch-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.complete-arch-toggle input[type="checkbox"] {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: var(--full-color);
}

.complete-arch-toggle label {
    font-weight: 600;
    color: var(--full-color);
    cursor: pointer;
    font-size: 1.1rem;
}

/* Selection Summary */
.selection-summary {
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 15px 20px;
    margin-top: 20px;
    max-width: 800px;
}

.summary-row {
    display: flex;
    align-items: left;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.summary-row:last-child {
    border-bottom: none;
}

.summary-label {
    color: #aaa;
    font-size: 1.0rem;
    width: 400px;
    flex-shrink: 0;
}

.summary-value {
    font-weight: bold;
    color: var(--partial-color);
}

.summary-value.full-denture {
    color: var(--full-color);
}

.denture-code {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-color), #2e7d32);
    padding: 8px 20px;
    border-radius: 8px;
    text-align: center;
}

.control-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.btn-clear {
    background: #dc3545;
    border: none;
    padding: 10px 25px;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-clear:hover {
    background: #c82333;
}

/* Legend */
.legend {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.legend-color {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid #666;
}

.legend-color.partial {
    background: var(--partial-color);
    border-color: #2e7d32;
}

.legend-color.full {
    background: var(--full-color);
    border-color: #b8860b;
}

.legend-color.unselected {
    background: var(--tooth-default);
}

/* Denture Type Codes Reference */
.code-reference {
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.code-reference h6 {
    color: #aaa;
    margin-bottom: 10px;
}

.code-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.code-item {
    font-size: 0.85rem;
    padding: 5px 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
}

.code-item strong {
    color: var(--accent-color);
}

/* Form data output */
.debug-output {
    background: rgba(0,0,0,0.4);
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

.debug-output h6 {
    color: #aaa;
    margin-bottom: 10px;
}

.debug-output pre {
    color: #4CAF50;
    font-size: 12px;
    margin: 0;
    white-space: pre-wrap;
}

/* Responsive */
@media (max-width: 768px) {
    .tooth-btn {
        width: 42px;
        height: 48px;
    }
    
    .tooth-number {
        font-size: 13px;
    }
    
    .tooth-name {
        font-size: 7px;
    }

    .quadrant-divider {
        margin: 0 8px;
    }
}

@media (max-width: 576px) {
    .tooth-btn {
        width: 36px;
        height: 42px;
    }
    
    .tooth-name {
        display: none;
    }
}



/* Change the background color and text color of the tabs */
.nav-tabs .nav-link {
    sbackground-color: var(--inactive-color);
    sbackground-color: transparent;
    background-image: linear-gradient(180deg, rgba(80,80,80,.5) 0%, rgba(80,80,80,0.3) 50%, rgba(0,0,0,0.05) 90%, rgba(0,0,0,0) 100%);
    color: #555555;
    border-radius: .5em .5em 0em 0em;
    -webkit-border-radius: .5em .5em 0em 0em;
    -moz-border-radius: .5em .5em 0em 0em;
    font-weight: bold; /* Bold label text */
    font-size: 1.2em;
}

.nav-tabs .nav-link.active {
    sbackground-color: var(--active-color);
    background-color: transparent;
    sbackground-image: linear-gradient(180deg, rgba(33,150,243,1) 0%, rgba(33,150,243,0.75) 50%, rgba(0,0,0,0.01) 90%, rgba(0,0,0,0) 100%);
    background-image: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.05) 90%, rgba(0,0,0,0) 100%);
    color: var(--ui-item-active-foreground-color);
}

.nav-tabs .nav-link:hover {
    sbackground-color: var(--active-color);
    sbackground-color: transparent;
    sbackground-image: linear-gradient(180deg, rgba(33,150,243,1) 0%, rgba(33,150,243,0.75) 50%, rgba(0,0,0,0.01) 90%, rgba(0,0,0,0) 100%);
    sbackground-image: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.05) 90%, rgba(0,0,0,0) 100%);
    color: var(--ui-item-active-foreground-color);
}

#file-upload-display {
    position: relative; /* Ensures it scrolls with the page */
    margin: 0; /* Remove any extra margins */
    padding: 10px; /* Internal spacing */
    max-height: 150px; /* Limit height to prevent overflow */
    overflow-y: auto; /* Enable scroll if the content exceeds max height */
    width: 100%; /* Match the full width of the container */
    background-color: #9D9D9D; /* Bright background for contrast */
    border: 1px solid #ccc; /* Subtle border for separation */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow for depth */
    font-family: Arial, sans-serif; /* Readable font */
    font-size: 14px; /* Easy-to-read text size */
    color: #ffffff; /* Black text for visibility */
    font-weight: 500; /* Slightly bold for better readability */
    line-height: 1.5; /* Improve text spacing */
}

#casefilesuploadcontainer {
    display: flex; /* Align children properly */
    flex-direction: column; /* Stack children vertically */
    gap: 10px; /* Add spacing between children */
    width: 100%; /* Ensure the container spans the full width of its parent */
}


#file-upload-display div {
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow content */
    text-overflow: ellipsis; /* Add "..." for clipped content */
    display: block;
    color: #ffffff /* Ensure each log entry is treated as a block element */
}

#file-upload-display div:hover {
    overflow: visible; /* Allow full text to be visible on hover */
    white-space: normal; /* Wrap text normally when hovering */
    background-color: #b3b3b3; /* Optional: Highlight background on hover */
    z-index: 10; /* Ensure it appears above other elements */
    position: relative; /* Ensure it's positioned properly */
}


.button-container {
    display: flex; /* Align buttons in a row */
    justify-content: space-between; /* Distribute space between buttons */
    gap: 10px; /* Add spacing between buttons */
    margin-top: 20px; /* Add space above the button container */
    position: relative; /* Ensure proper alignment */
    z-index: 10; /* Keep above other content */
    width: 100%; /* Make container span the full width */
}

button#clear-rx,
button#clear-uploads {
    background-color: #ff0000; /* Red background */
    color: white; /* White text */
    border: none; /* Remove border */
    font-size: 18px; /* Larger font size */
    font-weight: 700; /* Bold font */
    padding: 10px 20px; /* Consistent padding */
    border-radius: 4px; /* Slightly rounded corners */
    cursor: pointer;
    flex: 1; /* Make these buttons share the available space evenly */
    text-align: center; /* Center text inside the button */
}

button#clear-rx:hover,
button#clear-uploads:hover {
    background-color: #cc0000; /* Darker red on hover */
}

button.submit-button {
    font-size: 26px; /* Largest font size for prominence */
    font-weight: 750; /* Boldest font weight */
    padding: 10px 20px; /* Consistent padding */
    background-color: #007bff; /* Blue background */
    color: white; /* White text */
    border: none; /* Remove border */
    border-radius: 4px; /* Slightly rounded corners */
    flex: 2; /* Make this button take up twice as much space */
    text-align: center; /* Center text inside the button */
}

button.submit-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.rush-indicator {
    margin-top: 2px;
    font-weight: 700;
    color: #c53030; /* red-ish, adjust as needed */
}

.delivery-warning {
  margin-top: 2px;
  font-weight: 700;
  color: #c53030;
}