/*Solves the problem of the dash table not rendering properly*/
.dash-table-container .row {
  margin: 0;
}

/*Solution for the date picker which appread too big for the inputs */
.DateInput_input, .DateInput_input_1 {
  font-size: inherit; /*inherit;*/  /*or whatever size you would like to have*/
  height: 34px;
  border-radius:4px
}

/*Change color of Slider*/
.rc-slider-track {
  background-color: darkgreen;
}

.rc-slider-dot-active {  
  border-color: green;
  border: solid 2px green;
}

.rc-slider-handle {
  /*background-color: green;*/
  border-color: green;
}



/*Needed to make the dropdowns in dash tables work*/
.Select-menu-outer {
  display : block !important;
}

/* Change the colour for the dropdown menu inside the dash data table*/
.Select-menu-outer {
  --accent : rgb(80,80,80);
}

/* Change the colour for the arrow in the dropdown menu inside the dash data table*/
.Select-arrow {
	--accent: rgb(80,80,80);
}



/*dbc.Dropdownmenu class for navigation*/
.nav-dropdown-menu .dropdown-menu {
  border: 0px solid #444; /* or remove 'solid #444' entirely */
}

.nav-dropdown-menu .dropdown-item:hover,
.nav-dropdown-menu .dropdown-item:focus {
  background-color: rgb(232, 240, 254);
}

/*.dbc.Dropdownmenu for hub item menus*/
.hub-item-menu .dropdown-menu {
  border: 1px solid rgb(200, 200, 200); /* or remove 'solid #444' entirely */
  border-radius: 6px;
  font-size: 14px;
  color: rgb(180, 180, 180);
}

/* Class for the Hub Items menu toggle */
.hub-menu-dropdown-toggle {
  border: none;
  background: none;
  padding: 0;
  box-shadow: none; /* Removes focus ring if any */
  cursor: pointer;  /* Show pointer cursor on hover */
}

/* Hover/focus state for the same element */
.hub-menu-dropdown-toggle:hover,
.hub-menu-dropdown-toggle:focus {
  background-color: rgb(235, 235, 235);
}

/* Active state when user clicks (presses) on it */
.hub-menu-dropdown-toggle:active {
  background-color: rgb(210, 210, 210) !important;
}

/* Active state when user clicks (presses) on it */
.hub-menu-dropdown-toggle:disabled {
  color: rgb(255, 255, 255) !important;
  background-color: rgb(255, 255, 255) !important;
}

.hub-menu-dropdown-item {
  color: rgb(160, 160, 160);       /* text color */
  font-weight: 500;     /* bold text */
  font-size: 13px;      /* increase font size */
}

/* When hovering over the item */
.hub-menu-dropdown-item:hover {
  background-color: rgb(235, 235, 235);  /* custom hover background */
}

/* Active state when user clicks (presses) on it */
.hub-menu-dropdown-item:active {
  background-color: rgb(210, 210, 210) !important;
}

/* Active state when user clicks (presses) on it */
.hub-menu-dropdown-item:disabled {
  /*color: rgb(255, 255, 255) !important;*/
  background-color: rgb(255, 255, 255) !important;
}

/* Base styles for the custom input */
.hub-name-input {
  font-size: var(--input-size, 1.5rem); /* Default size, adjustable with size attribute */
  /*font-size: '40px' !important;*/
  /*color: var(--input-color, #000); /* Default text color */
  color: 'rgb(80, 80, 80)' !important;
  /*font-weight: var(--input-weight, normal); /* Default font weight */
  font-weight: 500 !important;
  /*border: '0px solid rgba(255, 255, 255, 0)' !important; /* No borders initially */
  border: none;
  outline: none !important; /* Remove default focus outline */
  transition: border 0.3s ease !important; /* Smooth transition for border on focus */
  background-color: transparent !important; /* Optional: Set transparent background */
}

/* Input on hover or click */
.hub-name-input:hover {
  border: 1px solid rgba(120, 120, 120); /* Border color on focus */
  border-radius: 4px; /* Optional: Add a border radius */
}

/* Input on focus or click */
.hub-name-input:focus {
  border: 1px solid var(--input-border-color, #007bff); /* Border color on focus */
  border-radius: 4px; /* Optional: Add a border radius */
}


/*Background color for tabs on hover*/
.tab:hover, .tab:focus {
  background-color: rgb(248,249,250)!important;
}


/*Define a class for the nav items when active or not*/
.nav-link.active {
  border-bottom: 3px solid rgb(0, 128, 255);
  color: rgb(29,53,84);
}

/*Define a class for the nav items when active or not this replaces the 
  active_button_style = {'color':cfx_utils.colors[0],'border-radius':'0px','backgroundColor':cfx_utils.colors[10], 'width':'100%'}*/
.nav-link-button.active {
  background-color: rgb(232,240,254);
  color: rgb(29,53,84);
  border-bottom: 0px solid rgb(255, 255, 255);
}

/* Style for non-active state */
.nav-link {
  color: rgb(29,53,84);
}

.not-active-navigation-link {
  border-bottom: 3px solid rgb(29,53,84);
}

/*Change the color of the pointer in tool tip https://community.plotly.com/t/dash-bootstrap-components-tooltip-color/60989 */
.tooltip-inner {
  background-color: rgb(0,60,113)
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: rgb(0,60,113);
}
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: rgb(0,60,113);
}
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: rgb(0,60,113);
}
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: rgb(0,60,113);
}

/*Bring the css from https://cdn.jsdelivr.net/npm/bootswatch@5.2.3/dist/cosmo/bootstrap.min.css*/
/* to make the drop down menu opn on the left of the menu*/
.dropdown-menu-end {
  --bs-position: end;
}
.dropdown-menu-end[data-bs-popper] {
  right: 0;
  left: auto;
}


/* making a button class for the buttons that have no border and an icon in them */
/* assets/style.css */
.hover-button:hover {
  background-color: rgb(232,240,254) !important;  /* Replace #NEW_COLOR with the color you want on hover */
}

.hover-button-clear-all:hover {
  background-color: rgb(225, 225, 225) !important;  /* Replace #NEW_COLOR with the color you want on hover */
}

.hover-button-save:hover {
  background-color: rgb(209, 231, 221) !important;  /* Replace #NEW_COLOR with the color you want on hover */
}

.hover-button-navigate:hover {
  background-color: rgb(209, 231, 221) !important;  /* Replace #NEW_COLOR with the color you want on hover */
}

.hover-button-delete:hover {
  background-color: rgb(248, 215, 218) !important;  /* Replace #NEW_COLOR with the color you want on hover */
}

/* dbc.Modal style */

.custom-modal .modal-dialog {
  width: 99vw !important; /* 99% of the viewport width */
  max-width: 99vw !important; /* Ensure it respects the full width */
  margin: auto !important; /* Center the modal */
}

.custom-modal .modal-content {
  height: 90vh !important; /* 90% of the viewport height */
  border-radius: 15px !important; /* Rounded corners */
  overflow: hidden !important; /* Ensure content doesn't overflow */
  background-color: white !important; /* White background for content */
}

/* Ensure nested modals are handled properly */
.modal-backdrop.show {
  z-index: 1040 !important; /* Increase z-index for backdrop */
}

.custom-modal .modal {
  z-index: 1050 !important; /* Ensure the modal is above the backdrop */
}


/* We ran into a problem where the leaflet maps inside a dbc.Tab wont render properly*/
/* We tried this solution but it didnt work https://stackoverflow.com/questions/75329708/dash-leaflet-not-rendering-when-inside-a-bootstrap-tab-container*/
/* So we are making the dcc.Tabs look the same as the dbc.Tabs*/
/* formatting dcc.tabs */
.tab_custom_container{
  margin-top: 1rem;
  padding: 0;
  width: 100%;
  border-top: 0.0px solid white !important;
  border-bottom: 0.5px solid rgb(200,200,200) !important;
  /* allow horizontal scroll if many tabs */
  overflow-x: auto;
  white-space: nowrap;
}

/*.tab_custom {
  width: 15% !important; 
  text-align: center !important;
  background-color: transparent !important;
  color: rgb(4, 27, 114); 
  border-right: transparent !important;
  border-left: transparent !important;
  border-bottom: transparent !important;
  border-top: transparent !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  display: inline-block !important;
  align-items: center!important;
  justify-content: left !important;
  white-space: nowrap !important;
}*/

/* Each tab should size to its content (NOT equal widths) */
.tab_custom {
  /* kill equal-width behavior from dcc.Tabs default */
  flex: 0 0 auto !important;     /* <-- key: variable width */
  width: auto !important;         /* <-- key: variable width */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 6px 12px !important;   /* comfy clickable area */
  margin-right: 0.5rem;           /* spacing between tabs */
  background-color: transparent !important;
  color: rgb(4, 27, 114) !important;   /* label color */

  border: none !important;        /* let the container provide the underline */
  border-radius: 0 !important;
  white-space: nowrap !important; /* no wrapping inside tabs */
  text-align: left !important;    /* match dbc default feel */
  cursor: pointer;
}

.tab_custom:hover {
  background-color: rgb(232,240,254) !important; /* Background color on hover */
}

.tab_custom_selected   {
  color: rgb(4, 27, 114) !important; /*text color of label*/
  /* border-top: transparent !important; */
  border-bottom: 3px solid rgb(0, 128, 255) !important;
}

/* Content area for dcc.Tabs, to mimic dbc.Tab padding */
.tab_custom_content {
  padding: 1rem !important;                 /* same feel as dbc.Tab */
}


/* formatting dbc.tabs */
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  border-bottom: 3px solid rgb(0, 128, 255);
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* changing the hover style*/
.nav-tabs .nav-item .nav-link:not(.active):hover {
  background-color: rgb(232,240,254);
  border-top: none; 
  border-left: none;
  border-right: none;
}

/* making all labels in tabs bold*/
.nav-tabs .nav-link {
  color: rgb(4, 27, 114) !important;
}

/* Formatting dbc.Label*/
.form-label {
  font-weight: 500; /* Change font weight */
  color: rgb(130, 130, 130); /* Change font color */
}

/* Change font color in dropdown */
.Select-control, .Select-value, .Select-menu-outer {
    color: rgb(130, 130, 130); /* Change to your desired color */
}

/* Change font color of the selected value */
.Select--single > .Select-control .Select-value,
.Select-value-label {
    color: rgb(120, 120, 120) !important; /* Example: Change selected value color to green */
}

/* Change font color in dbc.Textarea */
.form-control {
  color: rgb(120, 120, 120) !important; /* Replace with your desired color */
}

/* Change border radius of the tooltip */
.tooltip-inner {
  border-radius: 4px !important;
}

/* Change color of the place holder for the dbc.Input */
.form-control::placeholder {
  color: rgb(160, 160, 160); /* Placeholder font color */
  opacity: 1; /* Full opacity */
}

/*Made a class for button to be shown under inputs or dropsdowns same as Form Text*/
.formtext-button {
  background-color: transparent;
  border: none;
  color: rgb(4, 27, 114); /* The color typically used in dbc.FormText */
  font-size: 0.8rem; /* Font size of dbc.FormText */
  padding: 0px 4px 0px 4px; /* Remove default padding */
  margin-top: 0.25rem; /* Margin similar to dbc.FormText */
  margin-bottom: 0.25rem; /* Margin similar to dbc.FormText */
  cursor: pointer;
}

.formtext-button:hover {
  color: rgb(4, 27, 114);
  background-color: rgb(232,240,254); /* Slightly darker shade for hover effect */ 
  /* text-decoration: underline; */
  border-radius: '10px';
}

/*Editable heading*/

.editable-heading {
  /*cursor: text;              /* Show text cursor on hover */
  cursor: pointer;  /* Moved from Python to CSS */
  /*font-weight: bold;         /* Looks like an H4 */
  /*font-size: 1.5rem;         /* Tweak as needed */
  /*color: cfx_utils.owner_dict[cfx_utils.app_owner]['active_button_color']; */
  color: rgb(4, 27, 114);
  font-weight: 350;
  transition: background 0.2s ease;
  padding: 4px;       /* Gives space so rounded corners are visible */
}

/* When the user hovers, show a light background */
.editable-heading:hover {
  background-color: #f2f2f2;
  border-radius: 4px; /* Adjust as desired */
  padding: 4px;       /* Gives space so rounded corners are visible */
}

.editable-heading:focus {
  outline: none;               /* Remove the default focus outline */
  border: 1px solid rgb(200, 200, 200);   /* Use solid instead of dashed */
  border-radius: 4px;          /* Optional: round corners */
  padding: 4px;                /* Helps the border stand out */
}

.quill-container {
  /*width: 600px;*/
  height: 300px;
  border: 1px solid rgb(200, 200, 200);
  border-radius: 4px; /* Set how round you want the corners */
  padding: 4px;
  margin-bottom: 20px;
  position: relative;
}

/* make sure Quill editors wrap long lines */
.ql-editor {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

/* 
   1) Remove Quill’s individual borders on toolbar/container 
   2) Give the entire "ql-snow" block a single unified border + round corners 
   3) overflow: hidden ensures the toolbar and text area also have rounded corners
*/


/*Making ther quil wiht round corners*/
/* Toolbar: round ONLY the top corners */
.ql-toolbar.ql-snow {
  border: 1px solid #ccc !important;
  /*border-bottom: none !important;  /* So it merges cleanly with the container below */
  
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Container: round ONLY the bottom corners */
.ql-container.ql-snow {
  border: 1px solid #ccc !important;
  border-top: none !important;     /* So it merges with the toolbar above */
  
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

/* For custom scrollbars */
.scrollable-div::-webkit-scrollbar {
  width: 6px; /* Width of the vertical scrollbar */
  height: 6px; /* Height of the horizontal scrollbar */
}

.scrollable-div::-webkit-scrollbar-track {
  background: #f1f1f1; /* Background of the scrollbar track */
  border-radius: 10px;
}

.scrollable-div::-webkit-scrollbar-thumb {
  background: rgb(187, 187, 187); /* Scrollbar color */
  border-radius: 10px;
}

.scrollable-div::-webkit-scrollbar-thumb:hover {
  background: rgb(187, 187, 187); /* Scrollbar color on hover */
}

/* Optional: Hide scrollbars on overflow (if needed) */
.scrollable-div {
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: rgb(187, 187, 187) #f1f1f1; /* Scrollbar thumb and track colors for Firefox */
}

.tasks-comments-container-div {
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: rgb(187, 187, 187) #f1f1f1; /* Scrollbar thumb and track colors for Firefox */
  overflow-y: scroll;
  height: calc(100vh - 470px);
  padding-right: 4px
}


/* Class to shape the images contained in bub/task/comments*/
.comment-box img {
  max-width: 70% !important; 
  height: auto !important;
}

/* Make the dbc.M odal corners round*/
/*Override the Bootstrap 5 Custom Property
  If Bootstrap is defining:*/
.modal-content {
  border-radius: var(--bs-modal-border-radius);
}

/*And you see --bs-modal-border-radius: var(--bs-border-radius-lg);, 
you can override that variable on the .modal-dialog for specific sizes. For example:*/

.modal-dialog.modal-sm {
  --bs-modal-border-radius: 4px !important;
}

.modal-dialog.modal-lg {
  --bs-modal-border-radius: 4px !important;
}

.modal-dialog.modal-xl {
  --bs-modal-border-radius: 4px !important;
}

/* Viewport that clips the scrolling track */
.ticker-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* fade edges (optional) */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}

/* The moving track (we'll inject 3 identical sets inside so it loops smoothly) */
.ticker-track {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  will-change: transform;
  animation-name: ticker-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Pause on hover (optional) */
.ticker-viewport:hover .ticker-track {
  animation-play-state: paused;
}

/* Smooth looping: since we render 3 identical sets, translate by exactly 1/3 */
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}

/* Apply to ANY dcc.Dropdown you give className="dd-sm" */
.dd-sm .Select-control,
.dd-sm .Select__control,
.dd-sm [class$="-control"] {
  /* Height / density */
  min-height: var(--dd-h, 31px) !important;
  height: var(--dd-h, 31px) !important;
  padding: 0 6px !important;
  box-shadow: none;
}

/* Placeholder + selected value: vertical centering and font size */
.dd-sm .Select-placeholder,
.dd-sm .Select-value,
.dd-sm .Select-value-label,
.dd-sm .Select--single > .Select-control .Select-value,
.dd-sm .Select__placeholder,
.dd-sm .Select__single-value,
.dd-sm [class$="-singleValue"],
.dd-sm [class$="-placeholder"] {
  line-height: var(--dd-h, 31px) !important;
  font-size: var(--dd-fs, 0.875rem) !important; /* ~14px */
}

/* Input area inside the control */
.dd-sm .Select-input,
.dd-sm .Select__input-container,
.dd-sm [class$="-input"] {
  height: var(--dd-h, 31px) !important;
  min-height: var(--dd-h, 31px) !important;
  padding: 0 !important;
}

/* Indicator zones (arrow / clear) tighter */
.dd-sm .Select-arrow-zone,
.dd-sm .Select-clear-zone,
.dd-sm [class$="-indicatorContainer"] {
  padding: 0 6px !important;
}

/* Menu sizing when open (optional) */
.dd-sm .Select-menu-outer,
.dd-sm [class$="-menu"] {
  max-height: var(--dd-menu-h, 220px);
}

/* OPTIONAL: compact multi-value chips (if multi=True) */
.dd-sm .Select--multi .Select-value {
  padding: 2px 4px;
  margin: 2px 3px 2px 0;
  font-size: 0.8125rem;
}

/*This scales the dcc.Dropdown*/
.dd-scale-sm { transform: scale(0.8); transform-origin: top left; }



/* 1) Root: full width + stacking fix (Fix A) */
.dash-dropdown.dd-scale {
  position: relative;                 /* enables z-index */
  z-index: var(--dd-z, 1100);
  width: 100%;
  display: block;
  min-width: 0;                       /* safe inside flex/grid cols */
}

/* 2) Scale the visible control (React-Select renders it with role="combobox") */
.dash-dropdown.dd-scale [role="combobox"] {
  /* Oversize layout width, then scale visually so the *visible* width is 100% */
  width: calc(100% / var(--dd-scale, 0.92)) !important;
  transform: scale(var(--dd-scale, 0.92)) !important;
  transform-origin: top left;
}

/* 3) Keep the menu above neighbors; scale it too for consistency (optional) */
.dash-dropdown.dd-scale [role="listbox"] {
  z-index: calc(var(--dd-z, 1100) + 1);
  width: calc(100% / var(--dd-scale, 0.92)) !important;
  transform: scale(var(--dd-scale, 0.92)) !important;
  transform-origin: top left;
}

/* --- Debug helper (remove after verifying) ---
.dash-dropdown.dd-scale [role="combobox"] { outline: 2px solid hotpink; }
.dash-dropdown.dd-scale [role="listbox"]  { outline: 2px solid orange;  }
*/


/*FIX Orders*/
/* 4-column grid: rail | SELL | BUY | rail */
.fx-order-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  align-items: center;
  gap: 10px;
}

.fx-order-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 4px;
}

.fx-rail-vert {
  display: grid;
  grid-auto-rows: 26px;
  gap: 6px;
}

.fx-arrow-vert {
  font-size: 0.72rem;
  padding: 2px 8px;
  line-height: 1.1;
  border: 1px solid #dee2e6;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}
.fx-arrow-vert:hover { background: #f8f9fa; }
.fx-arrow-vert.fx-reset { font-weight: 600; }

.fx-price-face.fx-bid { color: rgb(23,156,82); }
.fx-price-face.fx-ask { color: rgb(13, 110, 253); }

/* Match your existing segmented font scale (tweak if needed) */
.fx-price-face .fx-big     { font-size: 1.05rem; font-weight: 600; }
.fx-price-face .fx-pips    { font-size: 1.6rem;  font-weight: 800; line-height: 1.0; }
.fx-price-face .fx-pipette { font-size: 1.0rem;  font-weight: 700; margin-top: 6px; }


/* Keep Mantine DatePicker dropdown (its internal Popover) INSIDE our dbc.Popover.
   Scoped to the tenor-picker calendar only via .tp-calendar so it won't affect
   other DatePickers in your app. */
.tp-calendar .mantine-Popover-dropdown {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Optional: ensure calendar uses the full width we give it */
.tp-calendar .mantine-Popover-dropdown [data-mantine-date-picker-calendar] {
  width: 100%;
}

/* Ensure Bootstrap popover doesn't clip the inline calendar content */
.tp-popover {overflow: visible; }

.tp-stack { align-items: flex-start; }
.tp-calendar-wrap { position: relative; z-index: 0; }

/* When DatePicker renders its popover dropdown, make sure it stays inline here too.
   (Inline styles already do this, but this helps in case Mantine updates styling.) */
.tp-calendar .mantine-Popover-dropdown {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide the DatePicker input: we only use the calendar grid */
.tp-calendar .mantine-Input-input {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}



/* Use on Mantine/DMC inputs to keep a flat, white, non-interactive look when disabled */
.ti-disabled-flat input:disabled,
.ti-disabled-flat input:disabled:hover,
.ti-disabled-flat input:disabled:focus,
.ti-disabled-flat textarea:disabled,
.ti-disabled-flat textarea:disabled:hover,
.ti-disabled-flat textarea:disabled:focus {
  background-color: #fff !important;  /* stay white */
  border: 0 !important;               /* remove borders */
  box-shadow: none !important;         /* no glow/outline */
  outline: none !important;
  color: black;

  /* Pick ONE of the following cursor lines: */
  cursor: not-allowed !important;      /* keep the disabled cursor */
  /* cursor: default !important; */    /* OR use the normal arrow, if you prefer */
}

/* Mantine sometimes dims disabled fields; keep full opacity if desired */
.ti-disabled-flat { opacity: 1; }

/* If your theme applies hover styles on a wrapper element, neutralize those too */
.ti-disabled-flat [data-disabled="true"],
.ti-disabled-flat [data-disabled="true"]:hover,
.ti-disabled-flat [data-disabled="true"]:focus {
  box-shadow: none !important;
  border: 0 !important;
}

/* Optional: keep label appearance stable */
.ti-disabled-flat label {
  opacity: 1;
  cursor: default;
}