/* Custom Styles for Dark Mode and Layout 
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: normal;
src: local('Inter'), url('../fonts/Inter-Regular.woff') format('woff');
}

@font-face {
font-family: 'Inter Thin';
font-style: normal;
font-weight: normal;
src: local('Inter Thin'), url('../fonts/Inter-Thin-BETA.woff') format('woff');
}

@font-face {
font-family: 'Inter Medium';
font-style: normal;
font-weight: normal;
src: local('Inter Medium'), url('../fonts/Inter-Medium.woff') format('woff');
}

*/

body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s, color 0.3s;
    overflow: hidden; /* Prevent body scroll */
    background-position: center center;
    background-image: url(../bg_light.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

/* Dark Mode Colors */
.dark-mode {
    background-color: #0f172a; /* Slate 900 */
    color: #f1f5f9; /* Slate 100 */
}
.dark-mode .bg-light { background-color: #1e293b !important; } /* Slate 800 */
.dark-mode .bg-white { background-color: #1e293b !important; } /* Slate 800 */
.dark-mode .text-dark { color: #f1f5f9 !important; }
.dark-mode .text-muted { color: #94a3b8 !important; } /* Slate 400 */
.dark-mode .border { border-color: #334155 !important; } /* Slate 700 */
.dark-mode .list-group-item { background-color: #1e293b; border-color: #334155; }
.dark-mode .form-control { background-color: #334155; border-color: #475569; color: #f1f5f9; }
.dark-mode .form-control::placeholder { color: #94a3b8; }
.dark-mode .card { background-color: #1e293b; border-color: #334155; }

/* Brand Color Definition */
.btn-brand {
    background-color: #0ea5e9; /* Brand 600 */
    border-color: #0ea5e9;
    color: white;
    transition: background-color 0.15s ease-in-out;
}
.btn-brand:hover {
    background-color: #0284c7; /* Brand 700 */
    border-color: #0284c7;
    color: white;
}

/* Responsive Sidebar Overlay for Mobile */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1040; /* Above modal backdrop (1040) */
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    transition: opacity 0.3s;
}

.sidebar-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 80%; /* Takes 80% of screen width on mobile */
    max-width: 320px;
    height: 100%;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.sidebar-open .sidebar-overlay { display: block; }
.sidebar-open .sidebar-content { transform: translateX(0);background: white !important; }

@media (min-width: 576px) { /* sm breakpoint */
    .sidebar-overlay { display: none !important; }
    .sidebar-content { 
        position: relative;
        max-width: none;
        width: 320px; /* Fixed width on desktop */
        transform: translateX(0);
        box-shadow: none;
    }
}

/* Loader styles */
.loader {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0ea5e9;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}
.dark-mode .loader {
    border-color: #334155;
    border-top-color: #0ea5e9;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#canvas-points {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.selected_row{

}

.selected_row .fileName{
    color: var(--bs-indigo);
}

.selected-type-result{
    background: #f6eaff !important;
}

.selected-type-result .type-icon-bg {
    background: #7536ff !important;
}

.selected-type-result i{
    color: white;
}

.model-label{
    border: 1px solid var(--bs-indigo) !important;
    color: var(--bs-indigo) !important;
}

.btn-check:checked + .model-label{
    background: var(--bs-indigo) !important;
    color: white !important;
}