/* ---------- Apply to the entire document or specific elements -------------------------- */
/* ---- loading-spinner --- */
/* Full-screen overlay (no blur) */
.loading-spinner {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* lighter dim + softer blur */
  /* background: rgba(12, 18, 28, 0.15);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); */
}

/* Card around the spinner */
.loading-spinner .dash-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 18px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* Spinner styling */
.loading-spinner .dash-spinner {
  width: 150px !important;
  height: 150px !important;
  border-width: 12px !important;
  border-style: solid !important;
  border-radius: 50% !important;

  border-color: rgba(23, 125, 165, 0.18) !important; /* base ring */
  border-top-color: #177da5 !important;              /* accent arc */

  animation-duration: 0.85s !important;
  box-shadow: 0 0 12px rgba(23, 125, 165, 0.25);
}

/* Loading label */
.loading-spinner .dash-spinner-container::after {
  content: "Loading…";
  margin-top: 12px;
  font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #1f2a37;
  opacity: 0.95;
  animation: labelPulse 1.6s ease-in-out infinite;
}

@keyframes labelPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Dark mode tweaks (no blur) */
@media (prefers-color-scheme: dark) {
  .loading-spinner .dash-spinner-container {
    background: rgba(24, 28, 38, 0.85);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  }
  .loading-spinner .dash-spinner {
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
  .loading-spinner .dash-spinner-container::after {
    color: #eef2f7;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .loading-spinner .dash-spinner {
    animation-duration: 1.6s !important;
  }
  .loading-spinner .dash-spinner-container::after {
    animation: none;
  }
}


/* ---- scrollbar ---- */
::-webkit-scrollbar {
    width: 10px; 
    height: 10px;
  }
  
  ::-webkit-scrollbar-track {
    background: var(--div-head-first-background-color); /* Track color */
    border-radius: 10px; /* Rounded corners */
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--controls-background-color);
    /* background: linear-gradient(90deg, #111dcb, #2575fc);  Gradient thumb color */
    border-radius: 10px; /* Rounded corners */
    border: 2px solid #f4f4f4; /* Adds a gap between the track and the thumb */
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #2575fc, #6a11cb); /* Hover effect */
  }

  /* .dash-dropdown > div:first-child {
    color: rgb(26, 24, 24) !important; 
    overflow: visible;
} */

/* ---- slider ---- */
.rc-slider-step{
    background: var(--controls-background-color);
}
.rc-slider-handle{
    background: #0840a1; /* Handle color */
    border: 2px solid #f4f4f4; /* Adds a gap between the track and the handle */
    border-radius: 10px; /* Rounded corners */
    width: 15px; /* Handle width */
    height: 15px; /* Handle height */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
}
.rc-slider-step:hover{
    background: linear-gradient(90deg, #2575fc, #6a11cb); /* Hover effect */
}

/* ---- icon ---- */
.icon{
    height: 90%;
    aspect-ratio: 1 / 1;
    padding: 1px;
    margin: 1px;
    object-fit: contain;
}

/* ---- icon-button-row ---- */
.icon-button-div-row {
    height: 98%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: center;
}

/* Shared base style */
.icon-button-row-enabled,
.icon-button-row-disabled {
    height: 95%;
    aspect-ratio: 1 / 1;
    padding: 0.5%;
    margin: 0.5%;
    cursor: pointer; 
    border-radius: 5px; 
    border: 1px solid; /* <-- ensures border is visible */
}

/* Different border colors */
.icon-button-row-enabled {
    border-color: #0e0d0d;
}

.icon-button-row-disabled {
    border-color: #f03607;
}

/* Image styles */
.icon-button-row-enabled img,
.icon-button-row-disabled img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
    border-radius: 5px;
    transition: background-color 0.3s ease; 
}

/* Hover effects (only if you want them for both) */
.icon-button-row-enabled:hover,
.icon-button-row-disabled:hover {
    background-color: #e8f5e9;
    border-color: #66bb6a;
    box-shadow: 0 0 5px rgba(102, 187, 106, 0.5);
}

/* Focus effects */
.icon-button-row-enabled:focus,
.icon-button-row-disabled:focus {
    border-color: #2196f3;
    box-shadow: 0 0 5px rgba(4, 2, 161, 0.5);
    outline: none; 
}


/* ---- icon-button-column ---- */
.icon-button-div-column {
    width: 98%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: center;
}

/* Shared base style */
.icon-button-column-enabled,
.icon-button-column-disabled {
    width: 95%;
    aspect-ratio: 1 / 1;
    padding: 0.5%;
    margin: 0.5%;
    cursor: pointer; 
    border-radius: 5px; 
    border: 1px solid; /* ensures border is visible */
}

/* Different border colors */
.icon-button-column-enabled {
    border-color: #0e0d0d;
}

.icon-button-column-disabled {
    border-color: #f03607;
}

/* Image styles */
.icon-button-column-enabled img,
.icon-button-column-disabled img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
    border-radius: 5px;
    transition: background-color 0.3s ease; 
}

/* Hover effects (both enabled & disabled) */
.icon-button-column-enabled:hover,
.icon-button-column-disabled:hover {
    background-color: #e8f5e9;
    border-color: #66bb6a;
    box-shadow: 0 0 5px rgba(102, 187, 106, 0.5);
}

/* Focus effects (both enabled & disabled) */
.icon-button-column-enabled:focus,
.icon-button-column-disabled:focus {
    border-color: #2196f3;
    box-shadow: 0 0 5px rgba(4, 2, 161, 0.5);
    outline: none; 
}


/* ---- common-input ---- */
input.dash-input {
    border: var(--controls-border); 
    border-radius: 10px; 
    font-size: 110%; 
    color: var(--controls-color); 
    background-color: #e5e6e1;  
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input.dash-input:hover {
    background-color: #e8f5e9; 
    border-color: #66bb6a; 
    box-shadow: 0 0 5px rgba(102, 187, 106, 0.5); 
}

input.dash-input:focus {
    border-color: #2196f3;
    box-shadow: 0 0 5px rgba(4, 2, 161, 0.5);
    outline: none; 
}

/* ========================================================================== */
/* ----------------------------- Dropdown ----------------------------------  */
/* ========================================================================== */
/* Apply to all except inside #setting-data-table */
.Select-control:not(#setting-data-table .Select-control) {
  background-color: #e5e6e1;
  border: var(--controls-border);
  border-radius: 10px;
  font-size: 110% ;
  color: var(--controls-color);
  box-sizing: border-box;
}

.Select-control:not(#setting-data-table .Select-control):hover {
  background-color: #e8f5e9;
  border: 1px solid #66bb6a; 
  box-shadow: 1px 1px 5px rgba(102,187,106,.5);
}

/* Special styling only for inside table */
#setting-data-table .Select-control {
  background-color: #e5e6e1;
}

#setting-data-table .Select-control:hover {
  background-color: #e8f5e9;
  border: 1px solid #66bb6a; 
  box-shadow: 0 0 2px rgba(102,187,106,.5);
}

/* Disabled: global */
.Select.is-disabled > .Select-control,
.Select--is-disabled .Select-control {
  background-color: #f0f0f0 !important;
  border: 1px solid #ccc !important;
  color: #999 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 0.7;
}

/* Disabled: inside #setting-data-table */
#setting-data-table .Select.is-disabled > .Select-control,
#setting-data-table .Select--is-disabled .Select-control {
  background-color: #f7f7f7 !important;
  border: 1px solid #bbb !important;
  color: #777 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 0.8;
}






/* -------------------------------------------------------------------------- */
/* ----------------------- Custom checkbox appearance ----------------------- */
/* -------------------------------------------------------------------------- */
/* App-wide custom checkbox styling */
#app-root input[type="checkbox"] {
  /* layout */
  display: inline-block;            /* was inline-flex; not needed for inputs */
  vertical-align: middle;           /* vertical align with text */
  margin: 3px 6px 3px 0;
  cursor: pointer;
  user-select: none;

  /* visual */
  appearance: none;
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  border: var(--controls-border) !important;
  border-radius: 6px;               /* rounded corners */
  background-color: #e5e6e1;
  position: relative;               /* 👈 needed for ::after checkmark positioning */
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}

/* Hover */
#app-root label:hover input[type="checkbox"] {
  background-color: #e8f5e9 !important; 
  border-color: #66bb6a !important; 
  box-shadow: 0 0 5px rgba(102, 187, 106, 0.5) !important; 
}

/* Focus ring */
#app-root input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(23,125,165,.20);
  border-color: #177da5;
}

/* Checked state */
#app-root input[type="checkbox"]:checked {
  background-color: #509dbb;        /* keep your brand fill */
  border-color: #177da5;
}

/* Black, bold checkmark */
#app-root input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px;                         /* tweak for centering inside 25px box */
  top: 3px;
  width: 7px;                        /* thicker, larger tick */
  height: 13px;
  border: solid #000;                /* 👈 black checkmark */
  border-width: 0 3px 3px 0;         /* 👈 bold thickness */
  transform: rotate(45deg);
}

/* Labels/layout: vertical centering */
#app-root label {
  display: inline-flex;              /* flex so contents center vertically */
  align-items: center;               /* 👈 vertical center label contents */
  gap: 8px;
  margin: 6px 12px 6px 0;
  cursor: pointer;
  user-select: none;
  font-style: var(--font-style);
  font-weight: var(--font-width);
}

/* Disabled state (optional) */
#app-root input[type="checkbox"]:disabled {
  background: #f3f4f6;
  border-color: #e5e7eb;
  cursor: not-allowed;
}
#app-root input[type="checkbox"]:disabled + * {
  color: #9ca3af;
}


/* ---- Floating div (hidden by default) ----- */
.floating-div-hide {
    display: none;
}

.icon-button:disabled {
    cursor: not-allowed; /* Change cursor to indicate it's disabled */
    opacity: 0.6; /* Reduce opacity to visually indicate it's disabled */
    background-color: rgba(0, 0, 0, 0.1); /* Optional: Subtle background for disabled state */
    border-color: #ccc; /* Optional: Lighten the border color */
    box-shadow: none; /* Remove any box shadow */
}

/* Floating div (visible) */
.floating-div-show {
    display: block; 
    position: fixed;
    top: 40%;
    left: 30%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    min-height: 2vh;
    min-width: 15vw;
    max-width: 35vw;
    max-height: 80vh;
    background: var(--div-body-background-color);
    border: var(--controls-border);
    border-radius: 5px;
    box-shadow: var(--floating-selected-box-shadow);
    z-index: 1000;
    text-align: center;
    box-sizing: border-box;
}



.floating-div-show ~ body::before {
    display: block;
}

.floating-div-head-first-div{
    width: 100%;
    height: 4vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: var(--controls-border);
    border-top-left-radius: 5px;  
    border-top-right-radius: 5px;  
    background-color: var(--div-head-first-background-color);
    box-sizing: border-box; 
}

.floating-div-header-title{
    height: 90%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 120%;
    color: var(--text-color);
    font-style: var(--font-style);
    font-weight: var(--font-width); 
    box-sizing: border-box; 
}
.floating-div-buttons-group-div{
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; 
    background-color: var(--div-head-first-background-color);
    padding: 1px;
    margin: 1px;
    box-sizing: border-box;
}

/* Make the color-picker area fully interactive, not draggable */
.color-picker-container-div {
  position: relative;            /* ensure it’s a real box for pointer hit-testing */
  z-index: 2;                    /* float above any overlay in your draggable */
  background: transparent;       /* keep your current look */
}

/* Override any global .draggable rules */
.color-picker-container-div,
.color-picker-container-div * {
  cursor: default !important;    /* no grab/hand cursor */
  pointer-events: auto !important;
  user-select: auto !important;  /* allow selecting & dragging inside the picker */
  -webkit-user-drag: none;       /* avoid image drag ghosts */
}
/* ---- set-password ---- */
.floating-div-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    background-color: var(--div-body-background-color);
    padding: 1px;
    margin: 1px;
    box-sizing: border-box;
}


/* ---- tooltip ------- */
.app-tools-tooltip {
    background-color: var(--app-tools-tooltip-background-color); 
    border: var(--app-tools-tooltip-border);
    border-radius: 8px; 
    font-size: 100%; 
    color: var(--app-tools-tooltip-color); 
    padding: 10px; 
    max-width: 200px; 
    z-index: 10000;

    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    transition-delay: 0.3s; 
} 

/* Tooltip visible state */
.tooltip.show {
    opacity: 1;
    transition-delay: 0.3s; 
    animation: fadeout 1.5s ease-in-out forwards;
    animation-delay: 5s;  
} 

@keyframes fadeout {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* ---- Base style for the alert ----*/
.custom-alert {
    font-size: 120%; /* Adjust font size */
    font-weight: bold; /* Bold text */
    border-radius: 5px; /* Rounded corners */
    padding: 15px; /* Spacing inside the alert */
    margin-bottom: 20px; /* Space below the alert */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow for a modern look */
    display: flex; /* Flex layout for icon and text alignment */
    align-items: center; /* Vertically center items */
}

/* Success Alert Styling */
.custom-alert-success {
    background-color: #d4edda; /* Light green background */
    color: #155724; /* Dark green text */
    border: 1px solid #c3e6cb; /* Matching border color */
}

/* Error Alert Styling */
.custom-alert-error {
    background-color: #f8d7da; /* Light red background */
    color: #721c24; /* Dark red text */
    border: 1px solid #f5c6cb; /* Matching border color */
}

.custom-alert-error-route-page{
    font-size: 120%; 
    font-weight: bold; 
    border-radius: 5px; 
    padding: 15px; 
    margin-bottom: 20px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    /* display: flex; 
    align-items: center;  */
    background-color: #f8d7da; 
    color: #721c24; 
    border: 1px solid #f5c6cb; 

    display: block; 
    position: fixed;
    top: 40%;
    left: 30%;
}

/* Hover effect for the alert */
.custom-alert:hover {
    transform: translateY(-2px); /* Slight lift on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* Dismiss button inside the alert */
.custom-alert .close {
    color: #721c24; /* Button color */
    font-size: 130%; /* Increase font size for visibility */
    font-weight: bold; /* Make text bold */
    line-height: 24px; /* Match line-height to font size */
    padding: 5px 10px; /* Add padding for a larger clickable area */
    cursor: pointer; /* Change cursor to pointer on hover */
    opacity: 0.9; /* Slightly transparent for a modern look */
    background: none; /* Remove default background */
    border: none; /* Remove default border */
    outline: none; /* Remove focus outline */
    display: inline-flex; /* Ensure proper alignment */
    justify-content: center; /* Center text horizontally */
    align-items: center; /* Center text vertically */
    height: 32px; /* Set a height for the button */
    width: 32px; /* Set a width for the button */
    border-radius: 50%; /* Make the button round */
    text-align: center; /* Ensure the "X" is centered */
}

/* Hover effect for dismiss button */
.custom-alert .close:hover {
    opacity: 1; /* Fully opaque on hover */
    color: #d9534f; /* Change color on hover */
    transform: scale(1.2); /* Enlarge slightly on hover */
}

.alert-dismissible .btn-close{
    position:relative;
}

.center-msg{
    min-height: 95vh;            
    display: flex;
    align-items: center;           
    justify-content: center;       
    text-align: center;
    font-weight: bold;
    font-size: 140%;
  }