/* Dark.css */
@import '../../../base.css';

/*******************************************************************************
 * all used colors are set here
 */
:root {
  --body-bg:                  #252525;
  --card-bg:                  #444;
  --header-bg:                #444;
  --hover-bg:                 #555;
  --code-bg:                  #333;
  --table-bg:                 #444;
  --row-even-bg:              #444;
  --row-odd-bg:               #303030;
  --modal-bg:                 var(--color-black);

  --border:                   #555;
  --border-dark:              #666;
  --border-active:            var(--color-blue-500);
  --border-error:             var(--color-red-500);
  --border-forms:             var(--color-gray-500);

  --scrollbar:                #555;

  --text-body:                #f2f2f2;
  --text-card:                #ddd;
  --text-th:                  #eee;
  --text-highlight-bg:        var(--color-yellow-900);
  --text-hint:                var(--color-orange-600);
  --text-hint-soft:           var(--color-gray-400);
  --text-active1:             var(--color-blue-400);
  --text-active2:             var(--color-red-500);
  --text-success:             var(--color-green-500);
  --text-alert:               var(--color-red-500);
  --text-warning:             var(--color-yellow-500);
  --text-unreachable:         var(--color-red-500);
  --text-mixed-gradient-from: var(--color-gray-400);
  --text-mixed-gradient-to:   var(--color-gray-500);

  --navbar-fg:                var(--text-body);
  --navbar-bg:                var(--header-bg);
  --navbar-item-fg:           var(--navbar-fg);
  --navbar-item-bg:           var(--navbar-bg);
  --navbar-item-hover-fg:     var(--text-active1);
  --navbar-item-hover-bg:     var(--hover-bg);

  --forms-fg:                 #f2f2f2;
  --forms-bg:                 #444;

  --text-pager:               #ccc;
  --text-pager-hover:         #ccc;
  --button-pager-bg:          #555;
  --button-pager-bg-hover:    #666;

  --badge-fg:                 #333;
  --badge-bg:                 var(--color-gray-300);
  --badge-ok-bg:              var(--color-green-600);
  --badge-ok-fg:              var(--text-body);
  --badge-warning-bg:         var(--color-yellow-500);
  --badge-warning-fg:         var(--text-body);
  --badge-critical-bg:        var(--color-red-700);
  --badge-critical-fg:        var(--text-body);
  --badge-unknown-bg:         var(--color-orange-500);
  --badge-unknown-fg:         var(--text-body);
  --badge-up-bg:              var(--color-green-600);
  --badge-up-fg:              var(--text-body);
  --badge-down-bg:            var(--color-red-700);
  --badge-down-fg:            var(--text-body);
  --badge-unreachable-bg:     var(--color-red-600);
  --badge-unreachable-fg:     var(--text-body);
  --badge-pending-bg:         var(--color-truegray-500);
  --badge-pending-fg:         var(--text-body);
  --badge-problems-bg:        var(--color-yellow-600);
  --badge-problems-fg:        #333;

  --console-fg:               var(--color-lime-500);
  --console-bg:               var(--color-black);

  --peer-up-bg:               var(--color-green-600);
  --peer-up-fg:               #f2f2f2;
  --peer-warn-bg:             var(--color-yellow-500);
  --peer-warn-fg:             #f2f2f2;
  --peer-down-bg:             var(--color-red-700);
  --peer-down-fg:             #f2f2f2;
  --peer-dis-bg:              #777;
  --peer-dis-fg:              #f2f2f2;
  --peer-hid-bg:              #666;
  --peer-hid-fg:              #f2f2f2;

  --progessbar-fg:            var(--color-sky-800);
  --progessbar-bg:            var(--color-warmgray-500);

  --row-selected-fg:          var(--color-gray-700);
  --row-selected-even-bg:     var(--color-yellow-200);
  --row-selected-odd-bg:      var(--color-yellow-300);

  --tooltip-fg:               var(--text-body);
  --tooltip-bg:               #888;

  --alert-green-fg:           var(--color-green-800);
  --alert-green-bg:           var(--color-green-200);
  --alert-yellow-fg:          var(--color-yellow-800);
  --alert-yellow-bg:          var(--color-yellow-200);
  --alert-red-fg:             var(--color-red-800);
  --alert-red-bg:             var(--color-red-200);
  --alert-orange-fg:          var(--color-orange-800);
  --alert-orange-bg:          var(--color-orange-200);

  --icon-red-fg:              var(--text-body);
  --icon-red-bg:              var(--color-red-600);
  --icon-green-fg:            var(--text-body);
  --icon-green-bg:            var(--color-green-500);
  --icon-yellow-fg:           var(--color-black);
  --icon-yellow-bg:           var(--color-yellow-300);
  --icon-orange-fg:           var(--color-black);
  --icon-orange-bg:           var(--color-orange-500);
  --icon-gray-fg:             var(--color-black);
  --icon-gray-bg:             var(--color-gray-200);

  --perfbar-green-bg:         var(--color-green-500);
  --perfbar-green-border:     var(--color-green-700);
  --perfbar-yellow-bg:        var(--color-yellow-500);
  --perfbar-yellow-border:    var(--color-yellow-700);
  --perfbar-red-bg:           var(--color-red-500);
  --perfbar-red-border:       var(--color-red-700);
  --perfbar-gray-bg:          var(--color-gray-400);
  --perfbar-gray-border:      var(--color-gray-500);
  --perfbar-bg:               var(--color-gray-200);

  --button-fg:                #f2f2f2;
  --button-bg:                #777;
  --button-hover-fg:          #f2f2f2;
  --button-hover-bg:          #666;
  --button-red-fg:            var(--text-body);
  --button-red-bg:            var(--color-red-700);
  --button-red-hover-fg:      var(--text-body);
  --button-red-hover-bg:      var(--color-red-800);
  --button-green-fg:          var(--text-body);
  --button-green-bg:          var(--color-green-700);
  --button-green-hover-fg:    var(--text-body);
  --button-green-hover-bg:    var(--color-green-800);
  --button-orange-fg:         var(--color-white);
  --button-orange-bg:         var(--color-orange-600);
  --button-orange-hover-fg:   var(--color-white);
  --button-orange-hover-bg:   var(--color-orange-700);
  --button-disabled-fg:       #ccc;
  --button-disabled-bg:       #555;

  --stats-time-backend:       var(--color-sky-600);
  --stats-time-controler:     var(--color-yellow-600);
  --stats-time-io:            var(--color-lime-600);
  --stats-time-locks:         var(--color-rose-500);
  --stats-time-cmds:          var(--color-indigo-600);
  --stats-time-view:          var(--color-orange-600);

  --dashboard-series-1:       var(--color-sky-600);
  --dashboard-series-2:       var(--color-orange-500);
  --dashboard-series-3:       var(--color-purple-600);
}

/*******************************************************************************
* dark theme overrides
*/
:root {
  color-scheme: dark;
 }

::selection {
  background: #0c62a3; /* WebKit/Blink Browsers */
  color: var(--text-body);
}
::-moz-selection {
  background: #0c62a3; /* Gecko Browsers */
  color: var(--text-body);
}

.jstree-default .jstree-clicked { /* override highlight blue of editor plugin */
  background: #0c62a3 !important;
  color: var(--text-body) !important;
}

@layer base {
  LI.ajax_search_selected { /* override text in highlighted search results */
    @apply hover:text-[color:var(--text-body)] text-[color:var(--row-selected-fg)];
  }
}

.tableRowSelected I.fa-solid { /* override icons when rows selected */
  color: var(--row-selected-fg);
}
.tableRowSelected DIV.spinner { /* override spinner with dark text when rows selected */
  border-color: var(--row-selected-fg);
  border-right-color: transparent;
}

/*******************************************************************************
* login page
*/
BODY.loginpage {
 @apply bg-gradient-to-t from-[#111] via-[#444] to-[#111];
  INPUT::placeholder {
    @apply opacity-100;
  }
}
INPUT::placeholder {
  @apply opacity-100;
}


/*******************************************************************************
* dashboard main.cgi
*/
.bb-chart-arc .bb-gauge-value, .bb text, .bb .bb-button, .bb-chart-arcs .bb-chart-arcs-gauge-min, .bb-chart-arcs .bb-chart-arcs-gauge-max {
  fill: var(--text-card) !important;
}
.bb-chart-arc path, .bb-chart-arcs-background {
  stroke: var(--card-bg) !important;
  stroke-width: 0px;
}
.bb-axis > path, .bb-axis line {
  stroke: var(--text-body) !important;
}
.bb-tooltip {
  color: #333 !important;
}
