/* ============================================================
   Tucan Theme for Perfex CRM
   Glassmorphism UI · Basier Circle · icomoon · Light + Dark
   ------------------------------------------------------------
   Colours are centralised as CSS custom properties in :root.
   The dark palette lives in html[data-theme="dark"] and simply
   re-points the same variables, so every rule below "just works"
   in both modes. Icon-font remaps and @font-face are functional
   and identical in both themes.
   ============================================================ */

/* =========================
   Design tokens — LIGHT (default)
   ========================= */
:root {
  /* Brand */
  --tt-primary:        #ff5816;
  --tt-primary-soft:   #fab89e;
  --tt-accent:         #6871d9;
  --tt-accent-soft:    #757ee6;
  --tt-accent-soft-2:  #777edf;
  --tt-success:        #2e987d;

  /* Surfaces */
  --tt-bg:             #fefefb;   /* app / page background behind panels */
  --tt-bg-cream:       #fcfaf2;
  --tt-panel:          #ffffff;
  --tt-panel-alt:      #f7f5ed;
  --tt-active-bg:      #fcfaf2;
  --tt-dark-pill:      #181818;   /* segmented active tab / dark chip */
  --tt-dark-pill-hov:  #474747;

  /* Lines & text */
  --tt-border:         #f7f5ed;
  --tt-border-strong:  #e3e1db;
  --tt-text:           #181818;
  --tt-text-soft:      #474747;
  --tt-text-muted:     #a7afa9;
  --tt-text-faint:     #7a7871;

  /* Glass / chrome */
  --tt-header-bg-a:    rgba(255, 255, 255, 0.75);
  --tt-header-bg-b:    rgba(255, 255, 255, 0);
  --tt-sidebar-bg:     rgba(255, 255, 255, 0.70);
  --tt-glass-border:   rgba(255, 255, 255, 0.30);
  --tt-glass-tint:     rgba(255, 255, 255, 0.25);
  --tt-glass-tint-2:   rgba(255, 255, 255, 0.45);
  --tt-glass-glow:     rgba(255, 255, 255, 0.20);

  /* Shadows */
  --tt-shadow-card:    0 5px 12px rgba(0, 0, 0, 0.05);
  --tt-shadow-soft:    0 5px 10px rgba(0, 0, 0, 0.125);
  --tt-shadow-glass:   0 4px 14px rgba(0, 0, 0, 0.08);

  /* Radii */
  --tt-r-sm: 15px;
  --tt-r:    20px;
  --tt-r-lg: 28px;
  --tt-r-pill: 30px;

  /* Signature gradients */
  --tt-grad-bar:     linear-gradient(135deg, #ff5816 0%, #6871d9 100%);
  --tt-grad-primary: linear-gradient(135deg, #fab89e 0%, #ff5816 100%);
}

/* =========================
   Design tokens — DARK
   ========================= */
html[data-theme="dark"] {
  /* Brand stays vivid; softs are toned down for dark surfaces */
  --tt-primary:        #ff6a2e;
  --tt-primary-soft:   #7a3a24;
  --tt-accent:         #7c85ef;
  --tt-accent-soft:    #8a92f0;
  --tt-accent-soft-2:  #8a91f2;
  --tt-success:        #35b394;

  /* Soft dark slate — deliberately NOT pure black. Darkest surface
     (--tt-bg) is #1b1d23, panels sit a step lighter so cards read as
     raised. Keeps the warm/neutral feel of the light theme. */
  --tt-bg:             #1b1d23;   /* darkest layer, app background */
  --tt-bg-cream:       #1b1d23;
  --tt-panel:          #24262d;   /* cards / modals / dropdowns */
  --tt-panel-alt:      #2c2f37;   /* inputs / segmented tabs */
  --tt-active-bg:      #2c2f37;   /* active menu pill = submenu tone (not bright) */
  --tt-dark-pill:      #ff5816;   /* in dark, the active chip becomes brand */
  --tt-dark-pill-hov:  #ff6a2e;

  --tt-border:         #292c33;   /* subtle surface/grid lines (was too bright) */
  --tt-border-strong:  #3f434c;   /* inputs / controls that need a visible edge */
  --tt-text:           #e9eaee;
  --tt-text-soft:      #c4c7ce;
  --tt-text-muted:     #9298a1;
  --tt-text-faint:     #9aa0a8;

  --tt-header-bg-a:    rgba(27, 29, 35, 0.78);
  --tt-header-bg-b:    rgba(27, 29, 35, 0);
  --tt-sidebar-bg:     rgba(27, 29, 35, 0.72);
  --tt-glass-border:   rgba(255, 255, 255, 0.08);
  --tt-glass-tint:     rgba(255, 255, 255, 0.06);
  --tt-glass-tint-2:   rgba(255, 255, 255, 0.10);
  --tt-glass-glow:     rgba(255, 255, 255, 0.04);

  --tt-shadow-card:    0 5px 14px rgba(0, 0, 0, 0.45);
  --tt-shadow-soft:    0 5px 14px rgba(0, 0, 0, 0.55);
  --tt-shadow-glass:   0 8px 32px rgba(0, 0, 0, 0.55);
}

/* =========================
   Fonts: Basier Circle
   ========================= */
@font-face {
  font-family: 'basier_circlebold';
  src: url('/assets/fonts/basiercircle-bold-webfont.woff2') format('woff2'),
       url('/assets/fonts/basiercircle-bold-webfont.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'basier_circlebold_italic';
  src: url('/assets/fonts/basiercircle-bolditalic-webfont.woff2') format('woff2'),
       url('/assets/fonts/basiercircle-bolditalic-webfont.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'basier_circlemedium';
  src: url('/assets/fonts/basiercircle-medium-webfont.woff2') format('woff2'),
       url('/assets/fonts/basiercircle-medium-webfont.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'basier_circlemedium_italic';
  src: url('/assets/fonts/basiercircle-mediumitalic-webfont.woff2') format('woff2'),
       url('/assets/fonts/basiercircle-mediumitalic-webfont.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'basier_circleregular';
  src: url('/assets/fonts/basiercircle-regular-webfont.woff2') format('woff2'),
       url('/assets/fonts/basiercircle-regular-webfont.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'basier_circleregular_italic';
  src: url('/assets/fonts/basiercircle-regularitalic-webfont.woff2') format('woff2'),
       url('/assets/fonts/basiercircle-regularitalic-webfont.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'basier_circlesemibold';
  src: url('/assets/fonts/basiercircle-semibold-webfont.woff2') format('woff2'),
       url('/assets/fonts/basiercircle-semibold-webfont.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'basier_circlesemibold_italic';
  src: url('/assets/fonts/basiercircle-semibolditalic-webfont.woff2') format('woff2'),
       url('/assets/fonts/basiercircle-semibolditalic-webfont.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* =========================
   Icon Font (icomoon)
   ========================= */
@font-face {
  font-family: 'icomoon';
  src: url('/assets/fonts/icomoon.eot?s2o930');
  src: url('/assets/fonts/icomoon.eot?s2o930#iefix') format('embedded-opentype'),
       url('/assets/fonts/icomoon.ttf?s2o930') format('truetype'),
       url('/assets/fonts/icomoon.woff?s2o930') format('woff'),
       url('/assets/fonts/icomoon.svg?s2o930#icomoon') format('svg');
  font-weight: normal; font-style: normal; font-display: block;
}

/* =========================
   Layout
   ========================= */
html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-family: "basier_circleregular" !important;
  font-weight: normal !important;
  background: var(--tt-bg);
  color: var(--tt-text);
}

#wrapper {
  padding-top: 70px;
}

/* App background: warm off-white in light, soft dark slate in dark */
body.admin,
.admin #wrapper {
  background: var(--tt-bg);
}

.admin #header {
  background: linear-gradient(180deg, var(--tt-header-bg-a) 0%, var(--tt-header-bg-b) 100%);
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 4px;
  height: 68px;
  z-index: 999;
  -webkit-backdrop-filter: saturate(130%) blur(20px);
  backdrop-filter: saturate(130%) blur(20px);
  box-shadow: none;
}

#header::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 4px;
  margin-bottom: 20px;
  background: var(--tt-grad-bar) !important;
}

/* =========================
   Panels / Cards / Buttons
   ========================= */
.sidebar > ul.nav > li.active a:first-child,
.sidebar > ul.nav > li:hover a:first-child,
.btn,
.nav-tabs-segmented > li.active a,
.nav-tabs-segmented > li.active a:hover,
.panel,
.panel_s,
.panel-body,
.top_stats_wrapper {
  border-radius: var(--tt-r);
  box-shadow: none;
}

.dashboard .top_stats_wrapper,
.dashboard .panel_s .panel-body {
  border-radius: var(--tt-r-lg);
}

.btn {
  border-radius: var(--tt-r-lg) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border: 1px solid var(--tt-glass-border) !important;
  box-shadow:
    var(--tt-shadow-glass),
    inset 0 1px 0 var(--tt-glass-tint),
    inset 0 -1px 0 var(--tt-glass-tint-2),
    inset 0 0 10px 6px var(--tt-glass-glow) !important;
}

.btn:active {
  border-color: var(--tt-active-bg) !important;
}

/* Form-adjacent controls must NOT inherit the glass bloom — it renders as a
   bright halo around selects, input-group addons and dropdown fields (both
   light and dark). Flatten them to plain bordered controls. */
.bootstrap-select > .btn,
.bootstrap-select .dropdown-toggle,
.input-group .btn,
.input-group-btn > .btn,
.input-group-addon,
.selectpicker,
select.form-control,
.btn-group.bootstrap-select .btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 1px solid var(--tt-border-strong) !important;
}

.panel-body {
  border: 1px solid var(--tt-border) !important;
  background-color: var(--tt-panel);
  color: var(--tt-text);
  border-radius: var(--tt-r-lg);
  box-shadow: var(--tt-shadow-card);
}

.panel-full-width-tabs .nav {
  border-top-left-radius: var(--tt-r);
  border-top-right-radius: var(--tt-r);
}

.panel-footer {
  border-radius: 0 0 var(--tt-r-lg) var(--tt-r-lg) !important;
}

.top_stats_wrapper,
.panel_s .panel-body {
  border-radius: var(--tt-r-lg) !important;
  background: linear-gradient(
    to bottom,
    var(--tt-glass-tint) 0%,
    var(--tt-panel) 11%,
    var(--tt-panel) 100%) !important;
}

/* =========================
   Sidebar / Navigation
   ========================= */
.sidebar {
  background-color: var(--tt-sidebar-bg) !important;
}

.sidebar > ul.nav > li {
  color: var(--tt-text);
}

.sidebar > ul.nav > li.active {
  background: var(--tt-active-bg);
  border-radius: var(--tt-r);
}

.sidebar > ul.nav > li.active a:first-child,
.sidebar > ul.nav > li:hover a:first-child {
  box-shadow: none !important;
  border: none !important;
}

.sidebar a {
  font-family: "basier_circleregular" !important;
  font-weight: normal !important;
}

h1, h2, h3, h4 {
  font-family: "basier_circlesemibold" !important;
  font-weight: normal !important;
  color: var(--tt-text);
}

#menu {
  position: fixed;
  overflow-y: scroll;
  overflow-x: hidden;
  min-height: 110%;
  height: 100vh;
  border: none;
}

.admin #side-menu li.active > a,
.admin #setup-menu li.active > a,
#side-menu.nav > li > a,
#setup-menu > li > a {
  transition: background 70ms ease-out;
  border-radius: var(--tt-r);
}

.admin .sidebar {
  -webkit-backdrop-filter: saturate(130%) blur(20px);
  backdrop-filter: saturate(130%) blur(20px);
}

.admin #side-menu li.active > a,
.admin #setup-menu li.active > a,
#side-menu.nav > li > a:hover,
#side-menu.nav > li > a:focus,
#setup-menu > li > a:hover,
#setup-menu > li > a:focus {
  transition: none;
  /* cream (#fcfaf2) in light, submenu-matching slate in dark */
  background: var(--tt-active-bg);
}

#side-menu li.active > a span {
  font-family: "basier_circlemedium";
}

.menu-text {
  padding-left: 5px;
}

#side-menu .menu-icon::before {
  padding: 5px 7px 7px 7px;
  border-radius: var(--tt-r);
  transition: all 0.2s ease-in-out;
}

#side-menu .active .menu-icon::before {
  background: var(--tt-primary);
  padding: 7px;
  border-radius: var(--tt-r);
  color: #fff;
  left: 0;
}

#side-menu li a:hover .menu-icon::before {
  background: var(--tt-panel);
  padding: 7px;
  border-radius: var(--tt-r);
  color: var(--tt-primary);
}

#side-menu li a:hover span {
  font-family: "basier_circlemedium";
  transition: all 0.2s ease-in-out;
}

.sidebar ul.nav li a {
  padding: 10px 10px 8px 5px;
  border: none;
}

.sidebar ul.nav li a span {
  font-size: 15px;
}

.sidebar ul.nav li .nav-second-level li a {
  padding: 0 15px 7px 42px;
}

.nav-second-level > li > a:hover {
  border-left: 0 !important;
  border-radius: var(--tt-r) !important;
}

.nav-second-level li.active a {
  border-left: 0 !important;
}

.nav-second-level li a span {
  font-size: 14px !important;
}

.nav-second-level li a:active span {
  color: var(--tt-success) !important;
}

.nav .sub-menu-text {
  color: var(--tt-text);
}

.tw-rounded-xl {
  border-radius: var(--tt-r-pill) !important;
}

.fc .fc-button,
.horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal.nav-tabs-segmented,
.nav-tabs-segmented {
  border-radius: var(--tt-r-pill);
}

.horizontal-scrollable-tabs:has(.nav-tabs-segmented) .scroller {
  background: transparent;
}

/* =========================
   Icon Base Styles
   ========================= */
[class^="fa-"],
[class*=" fa-"],
[class^="fa"] {
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.widget-dragger::before {
  font-family: "icomoon" !important;
  content: "\e92b";
}

/* =========================
   Icon Mappings (fa-* -> icomoon)
   ========================= */
.menu-item-appointly ul li i::before { content: " "; }
.fa-object-group::before { content: "\e603"; }
.fa-gavel::before { content: "\e931"; }
.fa-power-off::before { content: "\e6d3"; }
.fa-plus-square::before,
.fa-plus-square-o::before { content: "\e95b"; }
.fa-user::before { content: "\e723"; }
.fa-balance-scale::before { content: "\e75b"; }
.fa-file-text-o::before { content: "\e758"; }
.fa-file-lines::before { content: "\e6d1"; }
.fa-cubes::before,
.fa-bars::before { content: "\e808"; }
.fa-chart-gantt::before { content: "\e837"; }
.fa-window-maximize::before,
.fa-circle-check::before { content: "\e92e"; }
.fa-life-ring::before,
.fa-ticket::before { content: "\e7da"; }
.fa-crosshairs::before { content: "\e870"; }
.fa-folder-open-o::before { content: "\e715"; }
.fa-circle-dot::before { content: "\e63a"; }
.fa-area-chart::before { content: "\e7fb"; }
.fa-cog::before { content: "\e672"; }
.fa-user-circle::before { content: "\e71b"; }
.fa-users::before { content: "\e726"; }
.fa-note-sticky::before, .fa-file-text-o::before { content: "\e6d8" !important; }
.fa-file-text::before { content: "\e9be"; }
.fa-bolt::before,
.fa-zap::before { content: "\e75b" !important; }
.fa-file-powerpoint-o::before { content: "\e912"; }
.customer_tab_credit_notes .fa-sticky-note-o::before { content: "\e763"; }
.fa-clipboard::before { content: "\e913"; }
.fa-refresh::before,
.fa-repeat::before { content: "\e8da"; }
.fa-paperclip::before { content: "\e698"; }
.fa-lock::before { content: "\e769"; }
.fa-map-marker::before { content: "\e77a"; }
.fa-close::before { content: "\e95a"; }
.sidebar .fa.arrow::before, .fa-arrow-left:before { content: "\e964"; line-height: -0.7em; }
.sidebar .active > a > .fa.arrow::before { content: "\e963"; }
.fa-clock::before { content: "\e8ef"; }
.fa-angle-left::before { content: "\e93b"; }
.fa-angle-right::before { content: "\e93c"; }
.todo-title .fa-warning::before,
.fa-square-check::before,
.fa-check::before { content: "\e959"; }
.fa-question-circle::before { content: "\e7da"; }
.fa-chevron-down::before { content: "\e963"; line-height: 2.1em; }
.fa-search::before { content: "\e6a9"; }
#top_search_button .fa-search::before { content: "\e6a9"; color: var(--tt-text-faint); }
#top-timers .fa-clock-o::before,
.project_tab_project_timesheets .fa-clock-o::before { content: "\e8ef"; }
.fa-check-circle::before,
.fa-check-square-o::before { content: "\e959"; }
.fa-bell::before { content: "\e8aa"; }
.fa-bullhorn::before,
.fa-share::before { content: "\e8ae"; }
.fa-remove::before { content: "\e95a"; }
.fa-expand::before,
.fa-angle-double-right::before { content: "\e94c"; }
.fa-angle-double-left::before { content: "\e94d"; }
.fa-pencil-square-o::before { content: "\e615"; }
.fa-file-pdf-o::before { content: "\e6b3"; }
.fa-envelope::before { content: "\e699"; }
.fa-bar-chart::before { content: "\e7fa"; }
.fa-filter::before { content: "\e97c"; }
.fa-envelope-open-o::before,
.fa-envelope-open::before { content: "\e697"; }
.fa-eye::before { content: "\e973"; }
.fa-calendar::before { content: "\e789"; }
.fa-calendar-check::before { content: "\e786"; }
.fa-align-left::before { content: "\e92f"; }
.fa-files-o::before { content: "\e6b8"; }
.fa-th::before { content: "\e880"; }
.fa-rocket::before { content: "\e779"; }
.fa-commenting::before { content: "\e7d7"; }
.fa-comment::before { content: "\e7d7"; }
.fa-exclamation::before { content: "\e92d"; }
.fa-cogs::before { content: "\e657"; }
.fa-chart-line::before { content: "\e7fb"; }
.fa-file::before { content: "\e72e"; }
.fa-envelope-square::before,
.fa-square-envelope::before { content: "\e696"; }
.fa-product-hunt::before { content: "\e744"; }
.fa-pen-to-square::before { content: "\e613"; }
.fa-file-pdf::before { content: "\e6b3"; }
.fa-upload::before { content: "\e8f5"; }
.fa-grip-vertical::before { content: "\e92f"; }
.fa-grip-vertical { transform: rotate(90deg); }
.fa-table-list::before { content: "\e930"; }
.fa-star::before { content: "\e901"; }
.fa-bookmark::before { content: "\e692"; }
.fa-trash::before { content: "\e681"; }
.fa-inbox::before { content: "\e693"; }
.fa-tag::before { content: "\e756"; }
.fa-cart-arrow-down::before { content: "\e8e4"; }
.fa-user-circle::before { content: "\e71e"; }
.fa-line-chart::before { content: "\e7fb"; }
.fa-file-powerpoint::before { content: "\e912"; }
.fa-location-dot::before { content: "\e781"; }
.fa-mars::before { content: "\e8a1"; }
.fa-times::before { content: "\e680"; }
.fa-trash-can::before { content: "\e680"; }
.fa-grip-lines-vertical::before { content: "\e8e4"; }
.fa-edit::before { content: "\e613"; }
.fa-wand-sparkles::before { content: "\e62b"; }
.fa-toggle-on::before { content: "\e671"; color: var(--tt-success) !important; }
.fa-add:before, .fa-plus:before { content: "\e936"; font-size: 0.8em; }
.fa-chain:before, .fa-link:before { content: "\e917"; }
.fa-eye-slash:before { content: "\e6a6"; }
.fa-exchange:before { content: "\e94f"; }
.fa-university:before { content: "\e719"; }
.fa-history:before { content: "\e8e4"; }
.fa-download:before { content: "\e655"; }
.fa-unlink:before { content: "\e918"; }
.fa-toggle-off:before { content: "\e670"; }
.fa-reply:before { content: "\e69a"; }
.fa-message:before { content: "\e7d7"; }
.fa-file-invoice:before { content: "\e75b"; }
.fa-th-list:before { content: "\e92d"; }
.task-modal-single .fa-th-list:before { content: "\e8ea"; }
.project_tab_project_files .fa-file::before { content: "\e6b7"; }
.project_tab_project_gantt .fa-chart-gantt::before { content: "\e930"; }
.project_tab_project_contracts .fa-file-contract:before { content: "\e6d1"; }
.project_tab_project_activity .fa-file-lines::before { content: "\e8e4"; }

/* =========================
   Tables / DataTables
   ========================= */
.dataTables_empty {
  background: url("/uploads/img/nothing-to-see.png") no-repeat;
  background-size: contain;
  background-position: top center;
  padding-bottom: 250px !important;
  overflow: hidden;
  filter: opacity(0.3);
}

table.dataTable thead > tr > th {
  background: var(--tt-panel);
  color: var(--tt-text);
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  font-size: 14px !important;
  padding-bottom: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
  background: var(--tt-panel-alt);
  border-radius: 10px 10px 0 0;
  font-family: 'basier_circlemedium';
}

.description span:first-child {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tt-text-muted);
}

div.dataTables_wrapper .btn-dt-reload,
div.dataTables_wrapper .btn-dt-reload:hover {
  border-radius: var(--tt-r) !important;
  margin-left: 5px !important;
}

/* =========================
   Forms / Inputs / Labels
   ========================= */
input,
textarea {
  border-radius: var(--tt-r-sm) !important;
}

.label {
  border-radius: 3rem !important;
}

.input-group {
  border-radius: var(--tt-r) !important;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group .form-control:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group-addon {
  border-radius: var(--tt-r);
}

/* =========================
   Chat / Misc
   ========================= */
#pusherChat .chat-footer {
  border-radius: 80px !important;
  padding-bottom: 20px;
}

#pusherChat {
  bottom: 60px !important;
}

.row-border-info::after {
  display: none;
}

.fc-toolbar-chunk,
.float-alert {
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border: 1px solid var(--tt-glass-border) !important;
  box-shadow:
    var(--tt-shadow-glass),
    inset 0 1px 0 var(--tt-glass-tint),
    inset 0 -1px 0 var(--tt-glass-tint-2),
    inset 0 0 10px 6px var(--tt-glass-glow) !important;
}

.float-alert {
  border-radius: 22px !important;
}

.tw-bg-primary-600 {
  background: var(--tt-grad-primary) !important;
  box-shadow:
    var(--tt-shadow-glass),
    inset 0 1px 0 var(--tt-glass-tint),
    inset 0 -1px 0 var(--tt-glass-tint-2),
    inset 0 0 10px 6px var(--tt-glass-glow) !important;
}

.menu-item-mailbox .bg-danger {
  background-color: var(--tt-accent-soft-2);
}

.admin button.hide-menu {
  color: var(--tt-text-muted);
}

.admin #setup-menu li a:hover {
  color: #ffffff !important;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px) {
  body.show-sidebar #wrapper:after {
    background: transparent;
    box-shadow: 20px 15px 25px rgba(0, 0, 0, 0.125);
  }
}

.panel_s {
  background: transparent;
  border: none;
}

/* Remove the blue info stripe from panels */
.panel_s,
.panel_s.row-border-info,
.row-border-info { border-left: 0 !important; }
.row-border-info::before,
.row-border-info::after { display: none !important; }

#toplink, #botlink { display: none; }

.fc-daygrid-block-event .fc-event-title { padding: 5px; }
.fc .fc-event { border-radius: var(--tt-r) !important; }
.modal-content { border-radius: var(--tt-r-lg); }
.modal-header {
  border-top-left-radius: var(--tt-r-lg);
  border-top-right-radius: var(--tt-r-lg);
}
.tw-rounded-lg { border-radius: var(--tt-r-lg) !important; }

.nav-tabs-segmented > li.active > a {
  background-color: var(--tt-dark-pill);
  color: #fff;
  transition: background 0.15s ease-in;
}
.nav-tabs-segmented > li.active > a:hover {
  background-color: var(--tt-dark-pill-hov);
  color: #fff;
  transition: background 0.15s ease-in;
}

.nav-tabs > li.active > a i.menu-icon { color: #fff; }
.nav-tabs > li > a i.menu-icon { color: var(--tt-accent-soft); }
.nav-tabs > li.active > a:hover i.menu-icon { color: #fff; }

.nav-tabs-segmented > li > a > .badge,
.badge {
  background: var(--tt-accent-soft) !important;
  color: #fff;
  font-family: 'basier_circlemedium';
}

.horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal.nav-tabs-segmented,
.nav-tabs-segmented {
  background: var(--tt-panel-alt);
  font-size: 1.1em;
}

.onoffswitch-checkbox:checked + .onoffswitch-label {
  background-color: var(--tt-success) !important;
  border-color: var(--tt-success);
}
.onoffswitch-checkbox:checked + .onoffswitch-label::before {
  border-color: var(--tt-success);
}

.dropdown-menu > li > a { border-radius: var(--tt-r-pill); }
.dropdown-menu > li > a:hover {
  background-color: var(--tt-accent-soft);
  color: #fff;
  border-radius: 22px;
  transition: background 0.2s ease-out;
}
.dropdown-menu {
  padding: 5px !important;
  min-width: 170px;
  border-radius: 22px;
}

.horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal,
.panel-full-width-tabs .nav li a {
  background: var(--tt-panel-alt);
}
.panel-full-width-tabs .nav li a:hover { background: var(--tt-panel); }

/* =========================
   Customers Area — invoice / estimate / proposal views
   ========================= */
.viewestimate #wrapper,
.viewinvoice #wrapper,
.proposal-view #wrapper {
  padding-top: 0;
  background: var(--tt-bg-cream);
}

.viewestimate > .panel-body,
.viewinvoice > .panel-body,
.viewproposal > .panel-body {
  background: #fff;
  color: #181818;
  box-shadow: var(--tt-shadow-soft);
}

.estimate-html-logo img,
.proposal-html-logo img,
.invoice-html-logo img {
  height: 50px;
  margin: 0 auto;
}

.viewestimate .col-md-3,
.viewinvoice .col-md-3,
.proposal-view .col-md-3 {
  width: 100%;
}

#wrapper::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 4px;
  background: var(--tt-grad-bar) !important;
  margin-bottom: 20px;
}

.proposal-content tbody { vertical-align: top !important; }

/* =========================
   Admin Area — pinned menu + hidden extras
   ========================= */
#menu {
  position: fixed !important;
  bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.offline_banking_api .panel-body .row .col-md-6 a,
.hr-panel-heading {
  display: none !important;
}

/* ============================================================
   DARK MODE — surface, text & control overrides
   These only fire under html[data-theme="dark"]. Variables above
   already handle most colours; the rules here fix third-party
   Bootstrap/Tailwind defaults that hardcode light values.
   ============================================================ */
html[data-theme="dark"] body { background: var(--tt-bg); color: var(--tt-text); }

html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .panel_s .panel-body,
html[data-theme="dark"] .top_stats_wrapper,
html[data-theme="dark"] .well,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .panel-default,
html[data-theme="dark"] .tw-bg-white {
  background-color: var(--tt-panel) !important;
  color: var(--tt-text);
  border-color: var(--tt-border) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-footer {
  background-color: var(--tt-panel) !important;
  border-color: var(--tt-border) !important;
  color: var(--tt-text);
}

/* ---- Tailwind neutral scale remap (Perfex hardcodes light values) ---- */
/* Light backgrounds -> dark surfaces */
html[data-theme="dark"] .tw-bg-neutral-50,
html[data-theme="dark"] .tw-bg-neutral-100,
html[data-theme="dark"] .tw-bg-gray-50,
html[data-theme="dark"] .tw-bg-gray-100 { background-color: var(--tt-panel) !important; }
html[data-theme="dark"] .tw-bg-neutral-200,
html[data-theme="dark"] .tw-bg-neutral-300,
html[data-theme="dark"] .tw-bg-gray-200 { background-color: var(--tt-panel-alt) !important; }

/* Dark text -> light (this is the low-contrast tw-text-neutral-800 etc.) */
html[data-theme="dark"] .tw-text-neutral-900,
html[data-theme="dark"] .tw-text-neutral-800,
html[data-theme="dark"] .tw-text-neutral-700,
html[data-theme="dark"] .tw-text-gray-900,
html[data-theme="dark"] .tw-text-gray-800,
html[data-theme="dark"] .tw-text-black,
html[data-theme="dark"] .text-dark { color: var(--tt-text) !important; }
html[data-theme="dark"] .tw-text-neutral-600,
html[data-theme="dark"] .tw-text-gray-700 { color: var(--tt-text-soft) !important; }
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .tw-text-neutral-500,
html[data-theme="dark"] .tw-text-neutral-400,
html[data-theme="dark"] .tw-text-neutral-300,
html[data-theme="dark"] .tw-text-gray-500,
html[data-theme="dark"] .tw-text-gray-400 { color: var(--tt-text-muted) !important; }

/* Light Tailwind borders -> subtle dark */
html[data-theme="dark"] .tw-border-neutral-100,
html[data-theme="dark"] .tw-border-neutral-200,
html[data-theme="dark"] .tw-border-neutral-300,
html[data-theme="dark"] .tw-border-gray-100,
html[data-theme="dark"] .tw-border-gray-200,
html[data-theme="dark"] .tw-border { border-color: var(--tt-border) !important; }

/* ---- Tailwind SLATE scale (Perfex uses slate for headings/labels too) ---- */
html[data-theme="dark"] .tw-text-slate-900,
html[data-theme="dark"] .tw-text-slate-800,
html[data-theme="dark"] .tw-text-slate-700 { color: var(--tt-text) !important; }
html[data-theme="dark"] .tw-text-slate-600 { color: var(--tt-text-soft) !important; }
html[data-theme="dark"] .tw-text-slate-500,
html[data-theme="dark"] .tw-text-slate-400 { color: var(--tt-text-muted) !important; }

/* Headings: Perfex core hardcodes dark colours on some heading classes
   (e.g. .customer-profile-group-heading = #1e293b) which vanish on dark.
   Force all headings light. (Verified live: contrast 1.03 -> readable.) */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: var(--tt-text) !important; }

/* Form labels: Perfex core sets .control-label { color:#4b5563 } (contrast ~2.0
   on dark). Lift to readable soft text. */
html[data-theme="dark"] .control-label,
html[data-theme="dark"] .form-group > label,
html[data-theme="dark"] form label { color: var(--tt-text-soft) !important; }

/* Top header toolbar: icon links + "Einstellungen" were #6b7280 (contrast 3.48).
   Lift to soft light. (Verified live: 3.48 -> 9.95.) */
html[data-theme="dark"] #header a,
html[data-theme="dark"] #header .navbar-nav > li > a,
html[data-theme="dark"] #header .top-timers { color: var(--tt-text-soft) !important; }

/* Count badges (Mailbox 463, tab counts) — light text on light violet read
   poorly. Use a deeper violet with solid white text for AA-ish contrast. */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .nav-tabs-segmented > li > a > .badge,
html[data-theme="dark"] .menu-item-mailbox .bg-danger {
  background-color: #5b63cc !important;
  color: #ffffff !important;
}

/* Search shortcut hint keys (⇧↵ / ⇥) were too dim */
html[data-theme="dark"] .commandbar kbd,
html[data-theme="dark"] #search kbd,
html[data-theme="dark"] kbd { color: var(--tt-text-soft) !important; }

/* Tables */
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] table.dataTable thead > tr > th {
  background: var(--tt-panel);
  color: var(--tt-text);
  border-color: var(--tt-border) !important;
}
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tbody > tr > th {
  border-color: var(--tt-border) !important;
  color: var(--tt-text);
}
html[data-theme="dark"] .table-hover > tbody > tr:hover,
html[data-theme="dark"] table.dataTable tbody tr:hover {
  background-color: var(--tt-panel-alt) !important;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Form controls */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .select2-selection,
html[data-theme="dark"] .input-group-addon {
  background-color: var(--tt-panel-alt) !important;
  border-color: var(--tt-border-strong) !important;
  color: var(--tt-text) !important;
}
html[data-theme="dark"] .form-control::placeholder { color: var(--tt-text-muted); }
html[data-theme="dark"] .select2-container--default .select2-selection__rendered { color: var(--tt-text); }
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-results__option {
  background-color: var(--tt-panel) !important;
  color: var(--tt-text);
}
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--tt-accent-soft) !important;
  color: #fff;
}

/* bootstrap-select buttons + native selects render light by default — darken */
html[data-theme="dark"] .bootstrap-select > .btn,
html[data-theme="dark"] .bootstrap-select .dropdown-toggle,
html[data-theme="dark"] .selectpicker,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] .input-group-addon {
  background-color: var(--tt-panel-alt) !important;
  color: var(--tt-text) !important;
  border-color: var(--tt-border-strong) !important;
}
html[data-theme="dark"] .bootstrap-select .dropdown-menu { background-color: var(--tt-panel) !important; }

/* Disabled/readonly native selects render with the OS's light chrome on macOS
   (bootstrap-select skips disabled fields). Force appearance:none so our dark
   background applies. (Verified live: currency field #f… -> #24262d.) */
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] select[readonly],
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: var(--tt-panel) !important;
  color: var(--tt-text-muted) !important;
  opacity: 1;
}

/* Unread notifications use a light blue highlight (#eff6ff) — blinding on dark.
   Subtle violet tint instead so the light text stays readable. */
html[data-theme="dark"] .unread-notification {
  background-color: rgba(124, 133, 239, 0.13) !important;
}
html[data-theme="dark"] .notification-date { color: var(--tt-text-muted) !important; }

/* ---- Findings from the live full-page contrast sweep (all verified) ---- */

/* Generic content links use Perfex's default #1d4ed8 (contrast ~2.2 on dark).
   Lift the DEFAULT link colour to a light blue. Low specificity + no !important
   so the sidebar/table/header link rules above still win where they set colour. */
html[data-theme="dark"] a { color: #6ea8fe; }

/* Disabled bootstrap-select wrapper renders light (#f3f4f6) — e.g. a locked
   currency field. */
html[data-theme="dark"] .bootstrap-select.disabled,
html[data-theme="dark"] .bootstrap-select.disabled > .btn,
html[data-theme="dark"] .bootstrap-select .btn.disabled {
  background-color: var(--tt-panel) !important;
  color: var(--tt-text-muted) !important;
  border-color: var(--tt-border-strong) !important;
}

/* FullCalendar weekday headers were #374151 (contrast 1.47). FC needs !important. */
html[data-theme="dark"] .fc a.fc-col-header-cell-cushion,
html[data-theme="dark"] .fc .fc-col-header-cell-cushion { color: var(--tt-text-muted) !important; }

/* Light containers/toolbars that stayed white on dark:
   - .btn-bottom-toolbar : the sticky save bar (was #fff)
   - .main               : invoice items container (was #f9fafb)
   - .screen-options-btn : dashboard options button (was #e5e7eb)
   - thead               : invoice-items / plain table headers (was #f3f4f6) */
html[data-theme="dark"] .btn-bottom-toolbar {
  background-color: var(--tt-panel) !important;
  border-top: 1px solid var(--tt-border) !important;
}
html[data-theme="dark"] .main { background-color: var(--tt-panel) !important; }
html[data-theme="dark"] .screen-options-btn {
  background-color: var(--tt-panel-alt) !important;
  color: var(--tt-text) !important;
}
html[data-theme="dark"] table thead,
html[data-theme="dark"] .table thead,
html[data-theme="dark"] .invoice-items-table thead,
html[data-theme="dark"] .invoice-items-table thead th {
  background-color: var(--tt-panel) !important;
  color: var(--tt-text) !important;
}

/* Violet focus accent (from the badge/label colour) */
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection,
html[data-theme="dark"] .bootstrap-select.open > .btn {
  border-color: var(--tt-accent-soft) !important;
  box-shadow: 0 0 0 2px rgba(124, 133, 239, 0.25) !important;
}

/* Checkboxes / radios: violet accent instead of glaring white */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--tt-accent-soft); }
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
  accent-color: var(--tt-accent-soft);
}

/* DataTables body links — Perfex core hardcodes rgb(55 65 81) (near-black),
   unreadable on dark. Lift to readable light text; keep semantic colours.
   IMPORTANT: exclude .label/.badge/.btn — status labels carry their own inline
   colour and must not be forced light (that made light-on-light chips). */
html[data-theme="dark"] .dataTables_wrapper table tbody a:not(.text-muted):not(.text-primary):not(.text-danger):not(.text-warning):not(.text-success):not(.text-info):not(.label):not(.badge):not(.btn),
html[data-theme="dark"] table.dataTable tbody a:not(.text-muted):not(.text-primary):not(.text-danger):not(.text-warning):not(.text-success):not(.text-info):not(.label):not(.badge):not(.btn) {
  color: var(--tt-text) !important;
}
/* Row action links (Anzeigen | Kontakte | löschen) were near-invisible */
html[data-theme="dark"] .row-options a,
html[data-theme="dark"] table.dataTable .text-muted,
html[data-theme="dark"] .dataTables_wrapper .text-muted { color: var(--tt-text-muted) !important; }

/* Status labels use pale inline backgrounds (background:#f7faff etc.) with a
   coloured text hue — glaring on dark. Neutralise to a dark translucent chip
   and lift the text with a brightness filter so even the dark-slate "neutral"
   statuses (Entwurf/Nicht angefangen) stay readable while keeping their hue.
   (Values verified live on the invoices list.) */
html[data-theme="dark"] .label {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  filter: brightness(1.5) saturate(1.05);
}

/* Soft alert banners (testing notice, warnings) are too bright on dark */
html[data-theme="dark"] .alert-warning { background-color: rgba(234, 179, 8, 0.12) !important; border-color: rgba(234, 179, 8, 0.30) !important; color: #f3d488 !important; }
html[data-theme="dark"] .alert-success { background-color: rgba(34, 197, 94, 0.12) !important; border-color: rgba(34, 197, 94, 0.30) !important; color: #86e0a6 !important; }
html[data-theme="dark"] .alert-info    { background-color: rgba(56, 184, 218, 0.12) !important; border-color: rgba(56, 184, 218, 0.30) !important; color: #8fd6ea !important; }
html[data-theme="dark"] .alert-danger  { background-color: rgba(239, 68, 68, 0.12) !important; border-color: rgba(239, 68, 68, 0.30) !important; color: #f0a0a0 !important; }

/* Buttons — kill the light glass insets, keep the rounded glass frame */
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-light {
  background-color: var(--tt-panel-alt) !important;
  color: var(--tt-text) !important;
}
html[data-theme="dark"] .btn {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Segmented / full-width tabs on dark */
html[data-theme="dark"] .nav-tabs-segmented,
html[data-theme="dark"] .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal.nav-tabs-segmented,
html[data-theme="dark"] .panel-full-width-tabs .nav li a,
html[data-theme="dark"] .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal {
  background: var(--tt-panel-alt) !important;
}

/* Borders / dividers */
html[data-theme="dark"] hr,
html[data-theme="dark"] .border,
html[data-theme="dark"] .horizontal-scrollable-tabs { border-color: var(--tt-border) !important; }

/* Header + sidebar glass already use variables; ensure text is light */
html[data-theme="dark"] .sidebar > ul.nav > li a,
html[data-theme="dark"] #side-menu li a span,
html[data-theme="dark"] .menu-text { color: var(--tt-text-soft); }
html[data-theme="dark"] #side-menu li.active > a span { color: var(--tt-text); }

/* Customer invoice/estimate wrapper goes dark, but keep the "paper" light */
html[data-theme="dark"] .viewestimate #wrapper,
html[data-theme="dark"] .viewinvoice #wrapper,
html[data-theme="dark"] .proposal-view #wrapper { background: var(--tt-bg-cream); }

/* Images that assume a light backdrop */
html[data-theme="dark"] .dataTables_empty { filter: opacity(0.3) invert(0.9) hue-rotate(180deg); }

/* Calendar (FullCalendar) — kill the bright white day/today/week cells */
html[data-theme="dark"] .fc { color: var(--tt-text); }
html[data-theme="dark"] .fc-theme-standard td,
html[data-theme="dark"] .fc-theme-standard th,
html[data-theme="dark"] .fc-scrollgrid,
html[data-theme="dark"] .fc-scrollgrid td,
html[data-theme="dark"] .fc .fc-daygrid-day { border-color: var(--tt-border) !important; }
html[data-theme="dark"] .fc .fc-daygrid-day,
html[data-theme="dark"] .fc .fc-daygrid-day-frame,
html[data-theme="dark"] .fc-theme-standard .fc-scrollgrid,
html[data-theme="dark"] .fc-col-header-cell { background-color: transparent !important; }
html[data-theme="dark"] .fc .fc-col-header-cell { background-color: var(--tt-panel) !important; }
/* current week / today were rendered near-white — use a soft brand tint */
html[data-theme="dark"] .fc .fc-day-today,
html[data-theme="dark"] .fc .fc-daygrid-day.fc-day-today,
html[data-theme="dark"] .fc .fc-timegrid-col.fc-day-today,
html[data-theme="dark"] .fc .fc-highlight {
  background-color: rgba(255, 88, 22, 0.10) !important;
}
html[data-theme="dark"] .fc .fc-daygrid-day-number,
html[data-theme="dark"] .fc .fc-col-header-cell-cushion { color: var(--tt-text-muted); }

/* Progress bars — the empty track was pure white */
html[data-theme="dark"] .progress {
  background-color: var(--tt-panel-alt) !important;
  box-shadow: none;
}

/* Panels' subtle top-gradient sheen reads as a bright band on dark — flatten it */
html[data-theme="dark"] .top_stats_wrapper,
html[data-theme="dark"] .panel_s .panel-body {
  background: var(--tt-panel) !important;
}

/* Inactive tab labels were near-black on dark — lift to a readable light grey */
html[data-theme="dark"] .nav-tabs-segmented > li > a,
html[data-theme="dark"] .nav-tabs > li > a,
html[data-theme="dark"] .horizontal-tabs .nav > li > a,
html[data-theme="dark"] .panel-full-width-tabs .nav li a {
  color: var(--tt-text-soft) !important;
}
html[data-theme="dark"] .nav-tabs-segmented > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a { color: #fff !important; }

/* Bright inset "highlight" lines from the glass shadows look wrong on dark.
   Drop the white insets on these chrome elements, keep a soft drop shadow. */
html[data-theme="dark"] .fc-toolbar-chunk,
html[data-theme="dark"] .float-alert,
html[data-theme="dark"] .tw-bg-primary-600,
html[data-theme="dark"] .btn {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  border-color: var(--tt-border) !important;
}

/* Tab strips / bottom dividers should not glow */
html[data-theme="dark"] .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal,
html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .panel-full-width-tabs .nav { border-color: var(--tt-border) !important; }

/* ============================================================
   Theme switcher button (injected by theme.js)
   ============================================================ */
/* Deliberately understated: icon-only, ghost button, muted until hover. */
.tt-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  width: 34px;
  min-width: 34px;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--tt-text-muted);
  font-family: "basier_circlemedium", sans-serif;
  line-height: 1;
  opacity: 0.7;
  box-shadow: none;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.tt-theme-toggle:hover {
  opacity: 1;
  color: var(--tt-text);
  background: var(--tt-glass-tint);
  border-color: var(--tt-border);
}
.tt-theme-toggle:active { opacity: 1; }
.tt-theme-toggle svg { width: 17px; height: 17px; display: block; }

/* Icon-only everywhere — the label stays for a11y/tooltip but is visually hidden */
.tt-theme-toggle .tt-toggle-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Header top-nav spacing (also vertically centres the toggle) */
#header .navbar-nav > li > a {
  padding-top: 20px;
  padding-bottom: 20px;
  height: 57px;
}

/* As a top-nav <li> in the admin header — centre the button in the 57px bar */
li.tt-theme-toggle-li {
  display: flex;
  align-items: center;
  height: 57px;
  padding: 0 4px;
}

/* Floating fallback (customer area / any layout without a top nav) */
.tt-theme-toggle.tt-floating {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1050;
  height: 40px;
  width: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--tt-panel);
  border-color: var(--tt-border);
  opacity: 0.85;
  box-shadow: var(--tt-shadow-card);
}
.tt-theme-toggle.tt-floating:hover { opacity: 1; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .tt-theme-toggle,
  #side-menu .menu-icon::before,
  .nav-tabs-segmented > li.active > a { transition: none !important; }
}