/*
 * ----------------------------------------
 * 🎨 CSS Variables & Base Styles (Gruvbox-Neumorphism)
 * ----------------------------------------
 * This section defines a central palette and reusable styles
 * to maintain consistency and make future changes easier.
 */
:root {
  /* Gruvbox-like Color Palette from original code */
  --gruv-bg: #282828;
  --gruv-bg-light: #3c3836;
  --gruv-bg-medium: #32302f;
  --gruv-fg: #ebdbb2;
  --gruv-fg-soft: #d8dee9;
  --gruv-red: #cc241d;
  --gruv-green: #98971a;
  --gruv-blue: #458588;
  --gruv-hover-bg: #d5c4a1;

  /* Common Opacities */
  --opacity-08: 0.08;
  --opacity-507: 0.507;
  --opacity-555: 0.555;
  --opacity-75: 0.45; /* 0x75/0xFF = 0.45 */
  --opacity-15: 0.05;
  --opacity-50: 0.5;
  --opacity-60: 0.6;

  /* Reusable Box Shadows */
  --shadow-panel:
    rgba(0, 0, 0, var(--opacity-507)) 0 2px 0px,
    rgba(0, 0, 0, var(--opacity-555)) 0 2px 0px, #00000075 0 -4px 0 inset;
  --shadow-dockbar-buttons:
    inset 3px 3px 5px rgba(255, 255, 255, 0.05),
    inset -3px -3px 5px rgba(0, 0, 0, 0.5), #00000075 0 -4px 0 inset;
  --shadow-window-controls:
    rgba(0, 0, 0, var(--opacity-507)) 0 1px 1px,
    rgba(0, 0, 0, var(--opacity-555)) 0 1px 1px, #00000075 0 -4px 0 inset;
  --shadow-window-controls-hover:
    rgba(0, 0, 0, var(--opacity-60)) 0 2px 4px,
    rgba(0, 0, 0, var(--opacity-50)) 0 2px 4px, #00000075 0 -2px 0 inset;
  --shadow-notes-buttons: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-neumorphic-inset-medium:
    inset 2px 2px 5px rgba(0, 0, 0, 0.5),
    inset -2px -2px 5px rgba(255, 255, 255, 0.05);
  --shadow-neumorphic-outset-large:
    4px 4px 8px rgba(0, 0, 0, 0.5), -4px -4px 8px rgba(255, 255, 255, 0.05);
  --shadow-neumorphic-press:
    inset 2px 2px 4px rgba(0, 0, 0, 0.6),
    inset -2px -2px 4px rgba(255, 255, 255, 0.05);

  /* Fonts */
  --font-family-default: "Roboto", "Helvetica Neue", sans-serif;
  --font-family-system:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    sans-serif;
}

/* Global Font Settings */
* {
  font-family: var(--font-family-default);
}

/*
 * ----------------------------------------
 * 🚀 Panel & Bar Styles
 * ----------------------------------------
 * Styles for the main panels, taskbar, and their button containers.
 */
.top-panel {
  background-color: #1d202186;
  border-bottom: 1px solid #1a1a1a;
  color: #e0e0e0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  font-weight: 400;
}

.left-panel {
  -gtk-icon-size: 48px;
  margin-left: 5px;
  background: transparent;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  border-style: none;
  color: var(--gruv-fg);
  box-shadow: var(--shadow-panel);
}

.right-panel {
  -gtk-icon-size: 42px;
  background: transparent;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  border-style: none;
  color: var(--gruv-fg);
  padding: 6px;
  box-shadow: var(--shadow-panel);
}

.dockbar-buttons {
  background: #1d2021dc;
  border-radius: 7px;
  padding: 5px;
  box-shadow: var(--shadow-dockbar-buttons);
  -gtk-icon-size: 42px;
  font-size: 16px;
}

.dockbar-buttons:hover {
  color: var(--gruv-bg);
  background-color: var(--gruv-hover-bg);
  text-shadow: 0.006em 0.006em 0.007em rgba(9, 5, 5, 0.8);
}

.box-widgets {
  margin: -3px;
  padding: 1px;
}

.top-panel-box-widgets-left {
  background: linear-gradient(145deg, #1d2021af, #1d20214f);
  border-radius: 7px;
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.05),
    inset -3px -3px 5px rgba(0, 0, 0, 0.5),
    2px 2px 5px rgba(0, 0, 0, 0.3);
}

.top-panel-box-systray {
  background: linear-gradient(145deg, #1d2021b6, #1d2021a9);
  border-radius: 10px;
  padding-top: 2px;
  margin-right: 5px;
  margin-top: 1px;
  margin-bottom: 1px;
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.05),
    inset -3px -3px 5px rgba(0, 0, 0, 0.5),
    2px 2px 5px rgba(0, 0, 0, 0.3);
}

.BottomBar {
  background-color: #00000000;
  margin: 1px 11px 1px 1px;
  padding: 1px 1px 1px 1px;
}

.taskbar {
  border-radius: 8px;
  -gtk-icon-size: 42px;
  background: transparent;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  border-style: none;
  color: var(--gruv-fg);
  padding: 6px;
  box-shadow: var(--shadow-panel);
}

.taskbar-button {
  background-color: #1d20218e;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  color: var(--gruv-fg);
  font-weight: 500;
  border-radius: 8px;
  border-style: none;
  padding: 5px 5px 5px 5px;
  box-shadow: var(--shadow-panel);
  -gtk-icon-size: 42px;
  font-size: 16px;
}

.taskbar-button.focused {
  background-color: var(--gruv-hover-bg);
  color: var(--gruv-bg);
  font-weight: bold;
  border: 1px solid white;
  box-shadow: 0 0 8px rgba(100, 180, 255, 0.5);
}

.taskbar-button.focused:hover {
  background-color: var(--gruv-bg);
  transform: scale(1.05);
  transition: all 0.1s ease;
  color: var(--gruv-hover-bg);
}

.taskbar-button:hover {
  color: var(--gruv-bg);
  background-color: var(--gruv-hover-bg);
  text-shadow: 0.006em 0.006em 0.007em rgba(9, 5, 5, 0.8);
}

/*
 * ----------------------------------------
 * 🖥️ Window Controls
 * ----------------------------------------
 * Styles for the window title and control buttons.
 */
.window-title-content {
  background-color: transparent;
  margin-top: 8px;
  margin-left: 15px;
}

.window-title-label {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-family-default);
  color: var(--gruv-fg);
}

.window-title-icon {
  -gtk-icon-size: 28px;
}

.window-controls-box {
  border-style: solid;
  background: rgba(36, 40, 59, 0);
  margin: 5px;
}

.window-controls-close-button:hover,
.window-controls-maximize-button:hover,
.window-controls-minimize-button:hover {
  background-color: #5c8f97;
  box-shadow: var(--shadow-window-controls-hover);
  transform: scale(1.05);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.window-controls-close-button {
  -gtk-icon-size: 20px;
  background: linear-gradient(145deg, var(--gruv-red), var(--gruv-medium-bg));
  background-color: var(--gruv-bg-medium);
  box-shadow: var(--shadow-window-controls);
  padding: 2px 8px 2px 8px;
  margin-left: 2px;
  margin-right: 1px;
  background-size: 100% auto;
  color: var(--gruv-fg);
  border-color: rgba(36, 40, 59, 0.744);
  border-radius: 4px;
}

.window-controls-maximize-button {
  -gtk-icon-size: 20px;
  background: linear-gradient(145deg, var(--gruv-blue), var(--gruv-medium-bg));
  background-color: var(--gruv-bg-medium);
  box-shadow: var(--shadow-window-controls);
  padding: 2px 8px 2px 8px;
  margin-left: 2px;
  margin-right: 1px;
  background-size: 100% auto;
  color: var(--gruv-fg);
  border-color: rgba(36, 40, 59, 0.744);
  border-radius: 4px;
}

.window-controls-minimize-button {
  -gtk-icon-size: 20px;
  background-color: var(--gruv-green);
  background: linear-gradient(145deg, var(--gruv-green), var(--gruv-medium-bg));
  background-color: var(--gruv-bg-medium);
  box-shadow: var(--shadow-window-controls);
  padding: 2px 8px 2px 8px;
  margin-left: 2px;
  margin-right: 1px;
  background-size: 100% auto;
  color: var(--gruv-fg);
  border-color: rgba(36, 40, 59, 0.744);
  border-radius: 4px;
}

/*
 * ----------------------------------------
 * 🎛️ Plugin-Specific Styles
 * ----------------------------------------
 * Styles for individual widgets and plugins.
 */
.tray_icon {
  background-color: #202020;
  min-width: 24px;
  min-height: 24px;
  -gtk-icon-size: 16px;
}

.tray-menu-button {
  border-radius: 8px;
  margin-left: 5px;
}

.clock-label {
  background: linear-gradient(145deg, #1d202154, #1d2021ce);
  border-radius: 7px;
  padding: 3px;
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.05),
    inset -3px -3px 5px rgba(0, 0, 0, 0.5),
    2px 2px 5px rgba(0, 0, 0, 0.3);
  font-family: "DSEG7-Classic", "DSEG14-Classic", monospace;
  font-size: 18px;
  color: var(--gruv-fg);
  text-decoration: none;
  text-shadow:
    0 0 2px rgba(235, 219, 178, 0.1),
    0 0 5px rgba(235, 219, 178, 0.1);
}

.Clock-box {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.clock-button {
  background-color: transparent;
}

.weather-label {
  font-size: 15px;
  font-weight: bold;
  background-color: transparent;
  color: #89a899;
}

/* Notes Plugin */
.notes_button_clear.text-button {
  background-color: #ff0000;
  color: white;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.notes_button_add.text-button {
  background-color: #008000;
  color: white;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.notes_button_delete.image-button {
  background-color: #ff0000;
  color: white;
  border: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* App Launcher */
.app-launcher-popover {
}

.app-launcher-searchbar {
  background-color: var(--gruv-bg);
  border-width: 0px;
  border-radius: 10px;
  padding: 5px 10px;
  color: var(--gruv-fg);
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-family-default);
}

.app-launcher-flowbox {
  background-color: transparent;
  padding: 10px;
}

.app-launcher-main-box {
  background-color: transparent;
}

.app-launcher-icon-from-popover {
  -gtk-icon-size: 68px;
  padding: 10px;
  background-color: var(--gruv-bg);
  border-width: 0px;
  border-radius: 10px;
  box-shadow:
    2px 2px 4px rgba(0, 0, 0, 0.5),
    -2px -2px 4px rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease-in-out;
}

.app-launcher-icon-from-popover:hover {
  background-color: var(--gruv-bg-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-neumorphic-outset-large);
}

.app-launcher-icon-from-popover:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-neumorphic-press);
}

.app-launcher-label-from-popover {
  font-size: 12px;
  font-weight: bold;
  color: var(--gruv-fg);
  text-align: center;
}

/* System Dashboard Plugin */
.system-dashboard-button {
}

.system-dashboard-button:hover {
}

.system-dashboard-button:active {
}

.system_dashboard_stack {
  background-color: var(--gruv-bg);
  border-radius: 10px;
  font-family: "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.system_dash_label {
  color: #eceff4;
  font-weight: bold;
}

.system_dash_summary {
  color: var(--gruv-fg-soft);
}

/* Bluetooth Dashboard Plugin */
.bluetooth-dashboard-buttons {
  background-color: var(--gruv-bg);
  color: var(--gruv-fg);
  border-radius: 8px;
  border-style: none;
  font-family: var(--font-family-default);
  font-weight: 800;
  font-size: 18px;
  padding: 8px 12px;
  box-shadow:
    inset 3px 3px 5px rgba(0, 0, 0, 0.5),
    inset -3px -3px 5px rgba(255, 255, 255, 0.05);
}

.bluetooth-dashboard-buttons:hover {
  background-color: var(--gruv-bg-light);
  transform: translateY(-1px);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

.bluetooth-dashboard-buttons-connected {
  background-color: var(--gruv-green);
  color: var(--gruv-bg);
  border-radius: 8px;
  border-style: none;
  font-weight: 800;
  font-family: var(--font-family-default);
  font-size: 18px;
  padding: 8px 12px;
  box-shadow:
    5px 5px 10px rgba(0, 0, 0, 0.4),
    -5px -5px 10px rgba(255, 255, 255, 0.05);
}

.bluetooth-dashboard-buttons-connected:hover {
  background-color: #b8bb26;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.3),
    0 2px 5px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
  transition: all 0.2s ease-in-out;
}

/*
 * ----------------------------------------
 * 🌐 Network Manager Plugin
 * ----------------------------------------
 * Styles for network-related widgets.
 */
.network-manager-container {
  background-color: var(--gruv-bg);
  color: var(--gruv-fg);
  border-radius: 12px;
  box-shadow: var(--shadow-neumorphic-inset-medium);
}

.network-manager-scrolledwindow {
  border: none;
}

.network-manager-device-toggle-button,
.network-manager-config-box {
  background-color: transparent;
  border: none;
  box-shadow: none;
  transition: all 0.2s ease-in-out;
}

.network-manager-device-toggle-button:hover,
.network-manager-config-box:hover {
  background-color: var(--gruv-bg-light);
  border-radius: 8px;
  box-shadow: var(--shadow-neumorphic-outset-large);
}

.network-manager-device-toggle-button:active,
.network-manager-config-box:active {
  background-color: var(--gruv-medium-bg);
  box-shadow: var(--shadow-neumorphic-press);
}

.network-manager-device-separator {
  background-color: #504945;
  min-height: 2px;
  border-radius: 1px;
}

.network-manager-config-button {
  background-color: transparent;
  border: none;
  color: var(--gruv-fg);
}

.network-manager-config-label {
  color: var(--gruv-fg);
  font-weight: bold;
}

/*
 * ----------------------------------------
 * 🔔 Notification Plugin
 * ----------------------------------------
 * Styles for notifications and related popups.
 */
.notify-client-box {
  background-color: #558588;
  border-radius: 10px;
  margin: 3px;
}

.notify-client-heading {
  margin-top: 12px;
  font-weight: bold;
  font-family: var(--font-family-system);
  font-size: 16px;
}

.notify-client-body-label,
.notify-client-timestamp {
  margin: 3px;
  font-family: var(--font-family-system);
}

.notify-client-timestamp {
  font-size: 13px;
}

.notify-window {
  background-color: transparent;
  color: #fff;
  border-radius: 10px;
}

.notify-server-vbox {
  background-color: var(--gruv-bg);
  color: var(--gruv-fg);
  padding: 10px;
  font-weight: bold;
  font-family: var(--font-family-system);
  font-size: 16px;
  border-radius: 10px;
}

/*
 * ----------------------------------------
 * 🔊 Volume & Misc. Styles
 * ----------------------------------------
 */
.floating-volume-widget {
  background-color: rgba(30, 30, 30, 0.6);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.floating-volume-icon {
  color: #fff;
}

.floating-volume-label {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}

.mullvad-header-label {
  font-weight: bold;
  font-size: 14px;
  color: #ffffff;
}

/*
 * ----------------------------------------
 * 🖼️ Common Reusable Classes
 * ----------------------------------------
 */
.image-button {
  -gtk-icon-size: 16px;
  color: #ffffffd8;
  background-color: #18181800;
}

.text-button {
  border-radius: 0px;
  background-color: rgba(13, 61, 151, 0);
  font-size: 12px;
  color: rgba(221, 221, 221, 0.9);
  border-style: solid;
  border-color: rgba(36, 40, 59, 0.744);
}

.button_clear_from_clipboard {
  background-color: #ff0000;
  color: white;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.close-button:hover {
  background-color: #ff5f56cc;
}

.maximize-button:hover {
  background-color: #ffbd2ecc;
}

.minimize-button:hover {
  background-color: #28c940cc;
}

.close-button:active {
  background-color: #ff5f5699;
}

.maximize-button:active {
  background-color: #ffbd2e99;
}

.minimize-button:active {
  background-color: #28c94099;
}

.ai-prompt-label:hover {
  color: var(--gruv-bg);
  background-color: var(--gruv-hover-bg);
  text-shadow: 0.006em 0.006em 0.007em rgba(9, 5, 5, 0.8);
}

.app-launcher-menu-button,
.bookmarks-menu-button,
.places-menu-button {
  -gtk-icon-size: 29px;
}

.places-icon-from-popover {
  -gtk-icon-size: 42px;
}

.places-label-from-popover {
  font-size: 20px;
  font-weight: bold;
}

.bookmarks-icon-from-popover {
  -gtk-icon-size: 36px;
}

.top-panel-box-right {
  background-color: transparent;
}

.top-panel-box-left {
  -gtk-icon-size: 32px;
}

.right-box-spacer {
  background-color: transparent;
}

.top_panel_box_center {
  -gtk-icon-size: 0px;
}

.notification-panel-button {
  padding-top: 6px;
}

.network-manager-device-header {
}

.network-manager-device-details-grid {
}

popover.background {
}

