/* Nekotopia Custom Grafana Theme - Dark Mode */
/* Matching the dark, clean aesthetic of nekotopia.io */

/* ============================================
   GRAFANA DARK THEME OVERRIDES
   ============================================ */

/* Force dark background everywhere */
body,
.grafana-app,
.main-view,
.scroll-canvas,
.scrollbar-view,
.dashboard-container,
.react-grid-layout,
[class*="page-body"],
[class*="Page-body"],
[class*="dashboard-scroll"],
.dashboard-content {
    background: #0f0f0f !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Panel containers - dark card style */
.panel-container,
.panel-wrapper,
[class*="panel-container"],
[class*="PanelChrome"],
[class*="panel-chrome"],
.css-panel-container {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Panel hover effect */
.panel-container:hover,
[class*="PanelChrome"]:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Panel titles */
[class*="panel-title"],
[class*="PanelTitle"],
[class*="panel-header"] h2,
.panel-title-text {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: 0.02em !important;
}

/* Panel header bar */
[class*="panel-header"],
[class*="PanelHeader"],
.panel-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Hide stat panels / single value displays (user doesn't want number blocks) */
/* These are typically gauge or stat visualizations */
/*
[class*="gauge"],
[class*="Gauge"],
[class*="singlestat"],
[class*="SingleStat"],
[class*="stat-panel"],
[class*="StatPanel"] {
    display: none !important;
}
*/

/* Make graphs larger by default - reduce padding */
.panel-content,
[class*="panel-content"] {
    padding: 0.5rem !important;
}

/* Graph/chart backgrounds */
[class*="graph-panel"],
[class*="GraphPanel"],
.graph-canvas-wrapper,
[class*="timeseries"],
[class*="TimeSeries"] {
    background: transparent !important;
}

/* Legend styling */
[class*="Legend"],
[class*="legend"],
[class*="graph-legend"],
.graph-legend {
    font-size: 0.8rem !important;
    color: #9CA3AF !important;
    background: transparent !important;
}

[class*="legend-item"],
.legend-item {
    color: #D1D5DB !important;
}

/* Axis labels and text */
.flot-tick-label,
[class*="axis"] text,
svg text,
.axis-label {
    fill: #9CA3AF !important;
    font-size: 0.75rem !important;
}

/* Grid lines - subtle */
.flot-x-axis line,
.flot-y-axis line,
[class*="grid-line"],
.grid line {
    stroke: rgba(255, 255, 255, 0.05) !important;
}

/* Chart colors - green accent to match site */
/* Line colors will use Grafana's palette, but we can influence theming */

/* Tooltip styling */
[class*="Tooltip"],
.graph-tooltip,
[class*="tooltip"],
.grafana-tooltip {
    background: #252525 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Dashboard header / navbar - hide in kiosk mode but style anyway */
[class*="NavToolbar"],
[class*="DashNav"],
.navbar,
header,
.dashboard-header {
    background: #000000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Time picker */
[class*="TimePicker"],
[class*="RefreshPicker"],
[class*="time-picker"] {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
}

/* Dashboard title */
[class*="page-header"] h1,
[class*="DashNav"] h1,
.dashboard-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

/* Dropdown menus */
[class*="dropdown"],
[class*="Dropdown"],
[class*="menu"],
[class*="Menu"] {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4) !important;
}

[class*="dropdown-item"],
[class*="menu-item"] {
    color: #D1D5DB !important;
}

[class*="dropdown-item"]:hover,
[class*="menu-item"]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Buttons */
button,
[class*="Button"],
.btn {
    border-radius: 6px !important;
}

[class*="Button--primary"],
.btn-primary {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

[class*="Button--primary"]:hover,
.btn-primary:hover {
    background: #059669 !important;
}

/* Links */
a {
    color: #10b981 !important;
}

a:hover {
    color: #34d399 !important;
}

/* Tables */
table,
[class*="table"],
[class*="Table"] {
    background: transparent !important;
    color: #ffffff !important;
}

th {
    color: #9CA3AF !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

tr:hover td {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Alert/annotation styling */
[class*="Alert"],
[class*="alert"],
.alert-list-item {
    background: #252525 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
}

/* Status indicators - green theme */
[class*="status-ok"],
[class*="success"],
.status-green {
    color: #10b981 !important;
}

[class*="status-warning"],
.status-yellow {
    color: #f59e0b !important;
}

[class*="status-error"],
[class*="critical"],
.status-red {
    color: #ef4444 !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #4B5563;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* Hide unnecessary UI elements in kiosk mode */
.sidemenu,
[class*="Sidemenu"],
[class*="sidemenu"],
nav[class*="sidemenu"] {
    display: none !important;
}

/* Loading spinner */
[class*="LoadingPlaceholder"],
[class*="Spinner"],
.spinner {
    color: #10b981 !important;
}

/* No data message */
[class*="no-data"],
[class*="NoData"],
.panel-empty {
    color: #6B7280 !important;
    font-style: italic !important;
}

/* Row styling for dashboard rows */
.dashboard-row,
[class*="dashboard-row"] {
    background: transparent !important;
}

.dashboard-row__title,
[class*="dashboard-row"] [class*="title"] {
    color: #9CA3AF !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Variable dropdowns */
[class*="variable"],
[class*="Variable"],
.variable-link {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
}

/* Query editor (if visible) */
[class*="query-editor"],
[class*="QueryEditor"] {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Form inputs */
input,
select,
textarea {
    background: #252525 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #10b981 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}

/* Ensure panel resize handles are visible */
.react-resizable-handle {
    opacity: 0.3 !important;
}

.react-resizable-handle:hover {
    opacity: 0.7 !important;
}