/**
 * Sidebar Layout Integration
 * Adjusts existing CoinTracking layout to work with new sidebar
 */

/* Add class to body when sidebar is active */
body.with-sidebar {
    margin: 0;
    padding: 0;
}

/* Hide old navigation when sidebar is active */
body.with-sidebar .desktop_only .header,
body.with-sidebar .desktop_only .main-nav,
body.with-sidebar #main-menu-1 {
    display: none !important;
}

/* Hide old mobile header - applies to all screen sizes */
body.with-sidebar .header_mnav,
body.with-sidebar div.header_mnav,
body.with-sidebar .header_mnav.mobile_only,
body.with-sidebar div.header_mnav.mobile_only {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    /* left: -9999px !important; */
}

body.with-sidebar .wrapper.top-nav #content-container > .progress-notice {
    margin-top: 1rem!important;
    width: calc(100% - 1rem)!important;
}

body.with-sidebar .wrapper.top-nav .progress-notice {
    opacity: 1;
    transform: translateY(0px);
    margin-bottom: 0;
    color: var(--text-primary);

    border-style: solid;
    animation: slideDown 0.3s ease-out forwards;
    border-width: 2px;
    border-radius: .5rem;
}

body.with-sidebar .wrapper.top-nav .progress-notice.progress-green {
      background-color: var(--notification-green-bg)!important;
      border-color: var(--notification-green-border)!important;

      a {
          color: var(--accent-green);
      }
}

body.with-sidebar .wrapper.top-nav .progress-notice.progress-green.referrer span {
    color: var(--accent-green)!important;
}

body.with-sidebar .wrapper.top-nav .progress-notice.progress-red,
body.with-sidebar .wrapper.top-nav .progress-notice.progress-warning {
      background-color: var(--notification-red-bg)!important;
      border-color: var(--notification-red-border)!important;

      a {
          color: var(--accent-red);
      }
}

body.with-sidebar .wrapper.top-nav .progress-notice.progress-blue {
      background-color: var(--notification-blue-bg)!important;
      border-color: var(--notification-blue-border)!important;
      color: var(--accent-blue);
}

body.with-sidebar .content-container-wrapper {
    min-height: calc(100vh - 4rem);
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Desktop: Main content area shifts right for sidebar */
@media (min-width: 1024px) {
    /* 
     * Simple approach: Shift content right to avoid sidebar
     * - Keep existing page max-width (don't override)
     * - Add left margin to push content right of sidebar
     * - Pages with max-width will still be constrained and centered within remaining space
     */
    body.with-sidebar .wrapper,
    body.with-sidebar .content-container-wrapper {
        /* Use max-width for responsiveness */
        width: auto !important;
        /* Add 40px to max-width to account for padding (20px each side) */
        /* This ensures actual content area remains 1241px */
        max-width: 1281px !important; /* 1241px content + 40px padding */
        /* Center with calc(), but never less than sidebar width */
        margin-left: auto!important; /* 640.5px = half of 1281px */
        margin-right: auto !important;
        transition: margin-left 300ms ease-in-out;
    }
    
    /* Fix fixed-width contentbox elements to be responsive */
    body.with-sidebar .contentbox.l,
    body.with-sidebar .contentbox.m
    {
        width: 100%;
        max-width: 100%;
    }
    
    /* Override inline widths for specific dashboard elements */
    body.with-sidebar #dashboard-balance-wrapper,
    body.with-sidebar #dashboard-charts-wrapper {
        width: 50% !important;
    }

    body.with-sidebar #dashboard-charts-wrapper {
        padding-right: 5px;
    }

    body.with-sidebar #dashboard-balance-wrapper {
        padding-left: 5px;
    }

    body.with-sidebar #dashboard-balance-box,
    body.with-sidebar #dashboard-profit-box,
    body.with-sidebar #dashboard-exchange-box,
    body.with-sidebar #dashboard-column-box,
    body.with-sidebar #dashboard-summary-box,
    body.with-sidebar #dashboard-timeline-box,
    body.with-sidebar #timeline_div1,
    body.with-sidebar #timeline_div2 {
        width: 100% !important;
    }

    /* React app root - same responsive approach as wrapper */
    body.with-sidebar #root,
    body.with-sidebar #app {
        width: auto !important;
        max-width: 1281px !important; /* Match wrapper width */
    }

    /* Hide old desktop navigation elements */
    body.with-sidebar .header-desktop,
    body.with-sidebar .nav-desktop {
        display: none !important;
    }

    body.with-sidebar {
        background-color: var(--bg-primary);
    }

    body.with-sidebar .outerDiv {
        position: relative;
        background-color: unset !important;
        z-index: 0;
    }

    body.with-sidebar .contentLayer {
        transition: width 300ms ease-in-out;
        right: 1rem;
        width: calc(100% - 1rem);
        background-color: var(--bg-content);
        padding: 1rem;
        border-radius: 20px;
        margin-top: 1rem;
        border-color: #e5e7eb;
        min-height: calc(100vh - 2rem);
    }

    body.with-sidebar .wrapper.top-nav {
        max-width: unset!important;
        padding: 0 !important;
        margin-left: calc(90px + 1rem) !important;
        margin-right: 0 !important;
        transition: margin-left 300ms ease-in-out;
    }

    body.with-sidebar.analysis-open .wrapper.top-nav {
        margin-left: 376px !important;
    }

    body.with-sidebar .wrapper.top-nav .progress-notice {
        position: relative;
        transition: width 300ms ease-in-out;
        width: 100%;
    }

    body.with-sidebar .content-container-wrapper:has(> .avoid-flex > .content-container-wrapper-extended) {
        position: relative;
        transition: width 300ms ease-in-out;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding-right: 2rem !important;
    }

    #notification-container {
        transition: width 300ms ease-in-out;
        width: 100%;
        margin-left: auto;
    }

    #content-container {
        padding-bottom: 1rem;
    }
}

body.with-sidebar .content-container-wrapper .content-container-wrapper-extended {
    overflow-x: auto;
}

/* Mobile: Full width, no sidebar shift */
@media (max-width: 1023px) {
    body.with-sidebar {
        padding-top: 64px; /* Top header height */
        padding-bottom: 80px; /* Bottom nav height */
        background-color: var(--bg-primary) !important;
    }

    body.with-sidebar .wrapper {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 16px;
    }
    
    body.with-sidebar div.outerDiv {
        background-color: var(--bg-content) !important;
    }
    
    /* Footer and React root full width on mobile */
    body.with-sidebar footer,
    body.with-sidebar .footer,
    body.with-sidebar #footer,
    body.with-sidebar #root,
    body.with-sidebar #app {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Hide old mobile navigation */
    body.with-sidebar .mobile_only,
    body.with-sidebar .header-mobile,
    body.with-sidebar .mobile-nav,
    body.with-sidebar .header_mnav,
    body.with-sidebar div.header_mnav,
    body.with-sidebar .header_mnav.mobile_only,
    body.with-sidebar div.header_mnav.mobile_only,
    body.with-sidebar #page > .header_mnav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        /* left: -9999px !important; */
    }

  body.with-sidebar .wrapper.top-nav {
    max-width: unset!important;
    padding: 1rem!important;
    margin: 0!important;
  }

  body.with-sidebar .wrapper.top-nav .progress-notice {
    width: 100%;
  }

  #notification-container > div {
    margin-right: 0;
  }

  body.with-sidebar #account-switcher-container:has(> div) {
    min-height: 2rem;
  }
}

/* Sidebar layout container */
.sidebar-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Desktop sidebar wrapper - expands when analysis menu is open */
@media (min-width: 1024px) {
    #sidebar-wrapper {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 100;
        display: flex;
        flex-direction: row;
        overflow: hidden;
    }
    
    /* Sidebar container and analysis menu are positioned by wrapper flex layout */
    #analysis-menu-container:empty {
        display: none;
        z-index: 100;
    }

    #desktop-layout {
        position: relative;
        width: 100%;
    }
}

/* Account switcher positioning */
body.with-sidebar #account-switcher-container {
  position: relative;
}

body.with-sidebar main {
  width: 100%;
}

/* Mobile specific adjustments */
@media (max-width: 1023px) {
    body.with-sidebar #mobile-layout {
        /* Don't cover entire screen - just position header/nav */
        position: relative;
        width: 100%;
        z-index: 10;
    }

    #desktop-layout {
        position: relative;
        width: 100%;
    }
}

/* Ensure content scrolls properly */
#content-container {
    flex: 1;
    min-width: 0; /* Prevents flex item from overflowing */
    position: relative;
}

/* Fix for existing .wrapper when inside sidebar layout */
body.with-sidebar #content-container > .wrapper {
    margin-left: 0 !important;
    padding-left: 0;
    padding-right: 0;
}

/* Notification banner positioning */
#notification-container {
    position: relative;
    z-index: 1;
}

body.with-sidebar #refresh {
  margin-top: 10px;
}

.contentbox,
.contentbox_cell,
.container-item,
.box_xm2_content
{
  padding: 1.25rem!important;
  border: 0!important;
  border-radius: 12px!important;
}

.content-container .container-item {
  background-color: var(--bg-card)
}

.content-container .container-item:last-child {
  margin-right: 0;
}

.contentbox_cell {
  background-color: var(--bg-card);
}

.contentbox_cell--default .contentbox_cell__title,
.contentbox_cell--default .utitel_gross_grau {
  color: var(--text-secondary);
}

.contentbox_cell--default .utitel_gross {
  color: var(--text-primary);
}

.contentbox_cell--default .contentbox_cell__text-info .grau3 {
  color: var(--accent-red);
}

header.main-header,
.contentbox.head_notext
{
  padding-left: 0!important;
  padding-right: 0!important;
}

.contentbox.head_notext {
  background: unset;
  margin: 0;
  h1 {
    color: var(--text-primary);
    font-size: 32px;
    font-family: 'Helvetica-bd', Verdana, sans-serif;
  }
}

.box_xm2_content {
  width: 100%!important;
}

.ui-tabs-panel {
  position: relative;
  z-index: 1;
}

.ct-link-tabs > ul {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
}

#tabs.ct-tabs .ui-widget-header.ui-tabs-nav li,
.ct-tabs .ui-widget-header.ui-tabs-nav li,
.ct-link-tabs #tab-nav li
{
  padding: 12px 15px!important;
  border-radius: 12px 12px 0px 0px;
  border: none!important;
  margin-left: 0px;
  z-index: 0;
}

.ct-tabs.ui-tabs > div,
#tabs > div
{
  position: relative;
  z-index: 1;
  padding-bottom: 2rem!important;
}

.ct-link-tabs > div {
  position: relative;
  z-index: 1;
}

.main-header__title,
.main-header__subtitle,
.dashboard__tip .grau3
{
  color: var(--text-primary);
}

.highcharts-button-symbol {
  stroke: var(--text-primary)!important;
}

.highcharts-button {
  border-color: var(--border-secondary);
  text {
    fill: var(--text-primary)!important;
  }
}

.highcharts-reset-zoom .highcharts-button-box {
  fill: var(--bg-card);
  stroke: var(--border-color);
}

.highcharts-button-box:hover {
  fill: var(--button-bg-hover);
}

.highcharts-tooltip {
  .highcharts-tooltip-box {
    fill: var(--bg-card) !important;
    stroke: var(--border-color) !important;
  }
  text {
    fill: var(--text-primary) !important;
  }
}

.highcharts-menu {
  color: var(--text-primary) !important;
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55) !important;
  padding: 4px 0 !important;
}

.highcharts-menu hr {
  border: 0;
  border-top: 1px solid var(--border-color) !important;
  margin: 4px 0 !important;
}

.highcharts-menu-item {
  color: var(--text-primary) !important;
  padding: 6px 14px !important;
}

.highcharts-menu-item:hover {
  background-color: var(--accent-blue-hover) !important;
  color: #ffffff !important;
}

.highcharts-menu-item-disabled span {
  opacity: 0.4;
}

.contentbox {
    background-color: var(--bg-card);
}

header.main-header.contentbox {
  background-color: unset;
}

.nice-select,
.table-wrapper--calm .dataTables_length select,
.dataTables_length select,
select
{
  background-color: var(--nice-select-bg)!important;
  border-color: var(--nice-select-border)!important;
  border-radius: 8px!important;
  color: var(--text-secondary)!important;
  font-size: 12px!important;
  font-weight: 400 !important;
  cursor: pointer!important;
  transition: background-color 0.2s, border-color 0.2s!important;

  option,
  .list {
    background-color: var(--nice-select-bg);
    border-color: var(--nice-select-border);
    color: var(--text-secondary);
  }

  option,
  .option
  {
    color: var(--text-secondary);
  }

  option:hover, option.selected:hover,
  .option:hover, .option.selected:hover
  {
    background-color: var(--button-bg-hover);
    color: var(--text-primary);
  }

  option.selected.focus,
  .option.selected.focus
  {
    background-color: unset;
    color: var(--text-secondary);
  }

  option.selected.focus:hover,
  .option.selected.focus:hover
  {
    background-color: var(--button-bg-hover);
    color: var(--text-primary);
  }
}


.nice_filter,
.nice_filter .anchor,
.nice_filter .multi_div
{
  background-color: var(--nice-select-bg);
  border-color: var(--nice-select-border);
  color: var(--text-secondary);
  .items {
    color: var(--text-secondary);
  }
}

.nice_filter {
  border-radius: 8px;
  height: 36px;
}

.contentbox_table button,
.contentbox_table button:is(.disabled),
.dataTables_length select,
.dataTables_length select:is(.disabled),
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dtbuttons .dt-button,
.dtbuttons .dt-button:is(.disabled),
.table-wrapper--calm .dataTables_length select,
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button,
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button.next,
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.table-wrapper--calm .dt-button,
.table-wrapper--calm .dt-button:active,
.table-wrapper--calm .dt-button:is(.disabled)
{
  font-family: 'Helvetica', serif;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-color: var(--border-color);
  border-radius: 8px;
  color: var(--text-primary) !important;
  background-image: unset;
  box-shadow: none;
  font-size: 12px;
  font-weight: 400 !important;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button.next
{
  padding: 0.6rem 1rem;
  color: var(--text-primary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button,
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button.next
{
  border: 1px solid transparent;
  color: var(--text-primary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current
{
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.dataTables_length label {
  color: var(--text-secondary) !important;
}

.dtbuttons .dt-button:is(.disabled),
.table-wrapper--calm .dt-button:is(.disabled),
.dataTables_length select:is(.disabled)
{
  opacity: 0.5;
}

button.dt-button:active:not(.disabled):hover:not(.disabled),
.contentbox_table button:active:not(.disabled),
.contentbox_table button:focus:not(.disabled),
.contentbox_table button:hover:not(.disabled),
.contentbox_table button:hover:not(.disabled,.fancybox-button),
.dataTables_length select:active:not(.disabled),
.dataTables_length select:focus:not(.disabled),
.dataTables_length select:hover:not(.disabled),
.dataTables_wrapper .dataTables_paginate .paginate_button:active,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dtbuttons .dt-button:active:not(.disabled),
.dtbuttons .dt-button:focus:not(.disabled),
.dtbuttons .dt-button:hover:not(.disabled),
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button:active,
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button:focus,
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button.next:active,
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button.next:focus,
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover,
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button.previous:active,
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button.previous:focus,
.table-wrapper--calm .dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.table-wrapper--calm .dt-button:active:not(.disabled),
.table-wrapper--calm .dt-button:focus:not(.disabled),
.table-wrapper--calm .dt-button:hover:not(.disabled)
{
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  background-color: var(--button-bg-hover) !important;
  background: var(--button-bg-hover) !important;
  box-shadow: none;
  background-image: unset;
}

.dataTables_length select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 18px 18px;
  padding-right: 32px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.dataTables_wrapper .dataTables_paginate {
  padding-top: 0;
}

div.dt-button-collection {
  background-color: var(--bg-secondary);
}

.dataTables_filter label {
  color: var(--text-secondary);
}

.table-wrapper--calm .dataTables_wrapper .dataTables_info,
.dataTables_info {
  color: var(--text-secondary);
}

#all_currencies_filter label input,
.table-wrapper--calm label input,
.dataTables_filter input,
input:not(.ct_textfield)
{
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
}

.table-wrapper--calm label input[type="search"] {
  height: 40px;
  padding: 8px 8px 8px 36px!important;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px 16px;
}

#all_currencies_filter label input:focus,
.table-wrapper--calm label input:focus,
#all_currencies_filter label input:focus-visible,
.table-wrapper--calm label input:focus-visible,
.dataTables_filter input:focus,
.dataTables_filter input:focus-visible,
input:not(.ct_textfield):focus-visible
{
  border: 1px solid var(--border-color);
  outline: none;
}

#all_currencies_filter label input::placeholder,
.table-wrapper--calm label input::placeholder,
.dataTables_filter input::placeholder,
input:not(.ct_textfield)::placeholder
{
  color: var(--text-secondary);
}

.wrapper {
  color: var(--text-secondary);
}


html.dark table.dataTable thead .sorting_desc,
html.dark .table-wrapper--calm table.dataTable thead .sorting_desc
{
  background-image: url("../../img/sort_desc_dark_theme.png")!important;
}

table.fixedHeader-floating.no-footer th,
table.dataTable tbody tr,
table.dataTable tbody tr.even
{
  background-color: var(--bg-card);
}

table.fixedHeader-floating.no-footer th,
.table-wrapper--calm table.dataTable tfoot th,
.table-wrapper--calm table.dataTable thead th
{
  color: var(--text-secondary);
}

table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
.table-wrapper--calm table.dataTable.display tbody tr.odd
{
  background-color: var(--bg-content);
}

table.dataTable.display tbody .shown,
table.dataTable.display tbody tr.odd.shown:hover,
table.dataTable.display tbody tr.even.shown:hover
{
  background-color: var(--bg-primary)!important;
}

table.dataTable.row-border tbody th,
table.dataTable.row-border tbody td,
table.dataTable.display tbody th,
table.dataTable.display tbody td
{
  border-top: 1px solid var(--table-row-border);
}

.table-wrapper--calm table.dataTable.display tbody td {
  color: var(--text-secondary);
}

table.dataTable.display tbody tr.even:hover,
table.dataTable.display tbody tr.odd:hover,
table.dataTable.display tbody tr.even.selected,
table.dataTable.display tbody tr.odd.selected
{
  background-color: var(--table-row-hover)!important;
}

/* special case for trade list expandable rows */
table.dataTable.display tbody tr:not(tr[role="row"]):hover
{
  background-color: var(--bg-card)!important;
}

table.dataTable.display tbody tr.odd>.sorting_1,
table.dataTable.order-column.stripe tbody tr.odd>.sorting_1,
table.dataTable.display tbody tr.even>.sorting_1,
table.dataTable.order-column.stripe tbody tr.even>.sorting_1,
.table-wrapper--calm table.dataTable.display tbody tr.odd>.sorting_1,
.table-wrapper--calm table.dataTable.display tbody tr.even>.sorting_1
{
  background-color: inherit;
}

a {
  color: var(--anchor);
}

.dataTables_paginate .ellipsis {
  color: var(--text-secondary)
}

.dataTables_wrapper .dataTables_paginate >:not(:last-child) {
  margin-right: 0.5rem;
}

.timeline-wrapper div.timeliner div.date_separator span {
  color: var(--text-primary);
}

.timeliner {
  padding-top: 1rem;
}

button.grau
{
  height: 36px;
  font-size: 14px;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.625rem;
}

button.csp-mode {
  color: var(--text-secondary)!important;
  background-color: var(--bg-card)!important;
  outline: none!important;
  border-color: var(--border-color)!important;
}

button.csp-mode:hover {
  color: var(--text-secondary)!important;
  background-color: var(--button-bg-hover)!important;
}

a.nice_button,
span.nice_button,
.nice_button.button
{
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
}

.nice_button.button:hover,
span.nice_button:hover,
a.nice_button:hover,
button.grau:hover
{
  background-color: var(--button-bg-hover);
}

button.s {
  border-radius: 0;
  font-size: 10px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.2rem;
  padding-bottom: 0;
}

.box_tax_delete {
  background-color: var(--bg-card);
}

.grau,
.grau2,
.grau3
{
   color: var(--text-secondary);
}

.sqlbox {
  color: var(--text-muted);
}

.sqlbox_grau {
  color: var(--text-secondary);
}

#dashboard_edit {
  background-color: var(--bg-card);
  padding: 1.25rem!important;
  border: 0!important;
  border-radius: 12px!important;

  margin-top:20px;
  margin-bottom:10px;
  width:auto;
}

h2 {
  color: var(--text-primary);
}

h3 {
  color: var(--text-secondary);
}

.ct-link-tabs
{
  padding: 0!important;
}

.ct-link-tabs .contentbox:first-child
{
  border-top-left-radius: 0!important;
}

.ct-link-tabs #tab-nav li
{
  background: var(--tab-nav-card-inactive);
}

.ct-link-tabs #tab-nav li:hover
{
  background: var(--tab-nav-card-hover);
}

.ct-link-tabs #tab-nav li.active,
.ct-link-tabs #tab-nav li.active:hover,
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active
{
  background: var(--bg-card);
}

.ct-link-tabs #tab-nav li a
{
  padding-bottom: 0!important;
  color: var(--text-secondary)!important;
}

.ct-link-tabs #tab-nav li a:hover
{
  color: var(--text-primary)!important;
}

.ct-link-tabs #tab-nav li.active a,
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited
{
  color: var(--text-primary)!important;
}

.summary_sorting--default {
  background-color: var(--bg-card);
  color: var(--text-primary)!important;

  .div_rechts_titel a {
    color: var(--text-primary)!important;
  }
}

.summary_sorting--default .box_m2_mid .box_m2_content .grau2_gr,
.summary_sorting--default .box_m2_mid .box_m2_content .grau_gr
{
  color: var(--text-primary)!important;
}

.summary_sorting--default .box_m2_mid .box_m2_content .smalltext {
  color: var(--text-primary)!important;
}

.summary_sorting--default .box_m2_mid .box_m2_content .grau_gr a {
  color: var(--anchor)!important;
}

table.fancy {
  thead tr td, thead tr th {
    color: var(--table-header-text);
    border-color: var(--border-hover);
  }

  tbody tr td {
    border-color: var(--table-row-border);
  }
}

input[type="submit"].button.orange,
button.button.orange,
span.button.orange,
a.button.orange
{
  color: #ffffff;
  background-color: var(--accent-blue);
  line-height: 1.3;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
}

input[type="submit"].button.orange:hover,
button.button.orange:hover,
span.button.orange:hover,
a.button.orange:hover
{
  background-color: var(--accent-blue-hover);
}

.button.leftsvg {
  display: flex;
}

input[type="submit"].button.gray,
button.button.gray,
span.button.gray,
a.button.gray,

input[type="submit"].button.red,
button.button.red,
span.button.red,
a.button.red,

input[type="submit"].button.secondary,
button.button.secondary,
span.button.secondary,
a.button.secondary
{
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  line-height: 1.3;
}

input[type="submit"].button.secondary,
button.button.secondary,
span.button.secondary,
a.button.secondary
{
  color: var(--text-primary);
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  line-height: 1.3;
}

input[type="submit"].button.secondary:hover,
button.button.secondary:hover,
span.button.secondary:hover,
a.button.secondary:hover
{
  background-color: var(--button-bg-hover);
  border-color: var(--border-hover);
}

input[type="submit"].button.red,
button.button.red,
span.button.red,
a.button.red {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
}

input[type="submit"].button.red:hover,
button.button.red:hover,
span.button.red:hover,
a.button.red:hover {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
}

/* Small button size utility class */
.btn-sm,
input[type="submit"].btn-sm,
button.btn-sm,
span.btn-sm,
a.btn-sm
{
  padding: 0.5rem 1rem !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

.utitel {
  color: var(--text-primary);
}

.utitel_gross {
  color: var(--text-primary);
}

.info div {
  background-color: var(--bg-content);
}

.tip div {
  background-color: var(--bg-content);
}

.DTED_Lightbox_Content_Wrapper {
  .DTE {
    background-color: var(--bg-primary)!important;
  }
  .DTE_Header {
    color: var(--text-primary);
    background-color: var(--bg-primary)!important;
  }
  .DTE_Body_Content,
  .DTE_Form_Content,
  .DTE_Form_Content fieldset,
  #customForm,
  #customForm fieldset,
  #customForm fieldset legend,
  #customForm fieldset div
  {
    color: var(--text-primary);
    background-color: var(--bg-card);
    div.DTE_Field:hover {
      background-color: inherit!important;
      border: 1px solid var(--bg-card)!important;
    }
    div.DTE_Field_Input input,
    div.DTE_Field_InputControl > span
    {
      background: var(--bg-card);
      background-color: var(--bg-card);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
    }
  }
  .DTE_Footer {
    color: var(--text-primary);
    background-color: var(--bg-primary)!important;
    border-top: 0!important;
  }
  div.DTE div.DTE_Form_Buttons button {
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: unset!important;
    text-shadow: unset!important;
    border-radius: 6px!important;
  }
  div.DTE div.DTE_Form_Buttons button:hover {
    background: var(--button-bg-hover);
  }
  .ui-selectmenu-menu .ui-widget-content li.ui-selectmenu-optgroup,
  ul.ui-widget-content
  {
    color: var(--text-primary)!important;
    background: var(--bg-card);
    background-color: var(--bg-card);
  }
  .ui-selectmenu-menu .ui-menu-item .ui-state-active {
    background: var(--table-row-hover)!important;
    background-color: var(--table-row-hover)!important;
  }
  div.group .ui-selectmenu-optgroup.ui-menu-divider {
    color: var(--text-primary)!important;
  }
  .ui-menu div.header {
    background-color: var(--border-color)!important;
  }
}

html.iframe {
  overflow-y: auto!important;
}

.main.iframe {
  width: 100%;
  .contentbox {
    margin-bottom: 0!important;
  }
  strong {
    color: var(--text-primary)!important;
  }
  label {
    color: var(--text-secondary)!important;
  }
}

body.with-sidebar.iframe {
    background-color: var(--bg-content)!important;
    padding: 0!important;
}

.fancybox-skin {
  background-color: var(--bg-content);
}

.ajax-upload-dragdrop {
  border: 2px dashed var(--border-color)!important;
  color: var(--text-secondary)!important;
  background: var(--bg-secondary)!important;
}

.fancybox-button.fancybox-button--close {
  background-color: transparent!important;
}

.red {
  color: var(--accent-red);
}

.green {
  color: var(--accent-green);
}

.page_help {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-secondary);
  h {
    color: var(--border-color);
  }
  h2 {
    color: var(--accent-blue);
  }
}

textarea {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

/* Admin panel */
.box_xm2_mid .box_xm2_content {
  width: 100%!important;
}

.box_xm2_mid .box_xm2_content,
.box_m2_mid .box_m2_content,
.box_m2_mid
{
  a {
    color: var(--anchor);
  }
  background-color: var(--bg-card);
}

.box_m2_top
{
  background-color: var(--bg-primary);
}

.div_rechts_titel
{
  color: var(--text-primary);
}