/* --- Root Variables (Colors) --- */
:root {
  /* --- Mica Inspired Color Variables --- */
  --background-color: rgba(20, 20, 20, 0.6);
  --content-color: rgba(255, 255, 255, 0.1);
  --foreground-color: rgb(237, 238, 240);
  --accent-color: #0078d4;
  --border-color: rgb(53, 59, 69);
  --icon-color: rgb(169, 174, 184);
  --icon-hover: rgba(169, 174, 184, 0.8);
  --hover-color: rgba(93, 114, 135, 0.12);
  --highlight-color: rgba(61, 61, 61, 0.8);
  --active-color: rgb(93, 114, 135);
  --inactive-color: rgba(93, 114, 135, 0.5);
}

/* --- Base Styles --- */
* {
  font-size: 14px;
  color: var(--foreground-color);
  font-weight: 600;
  font-family: "Segoe UI", "JetBrainsMono NFP";
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --- Yasb Bar Itself --- */
.yasb-bar {
  background-color: var(--background-color);
  padding: 0 6px;
}

/* --- Individual Widgets --- */
.widget {
  padding: 2px 12px;
  margin: 6px 2px;
  border-radius: 7px;
  background-color: var(--content-color);
}

/* --- Icons --- */
.icon {
  font-size: 14px;
  color: var(--icon-color);
}

/* --- Apps Widget Specific --- */
.apps-widget {
  padding: 0 4px 0 2px;
}

.apps-widget .widget-container .label {
  font-size: 12px;
}

/* --- Komorebi Active Layout --- */
.komorebi-active-layout {
  padding: 0 4px 3px 4px;
}

.komorebi-active-layout .label {
  font-weight: 600;
  font-size: 12px;
}

/* --- Komorebi & GlazeWM Workspaces --- */
.komorebi-workspaces,
.glazewm-workspaces {
  padding: 0;
}

.komorebi-workspaces .offline-status,
.glazewm-workspaces .offline-status {
  color: var(--foreground-color);
  font-size: 12px;
  padding: 0 4px;
  font-weight: 600;
}

.komorebi-workspaces .ws-btn,
.glazewm-workspaces .ws-btn {
  color: transparent;
  width: 10px;
  height: 10px;
  background-color: var(--active-color);
  border-radius: 5px;
  margin: 0 2px;
  font-size: 1px;
}

.komorebi-workspaces .ws-btn:hover,
.glazewm-workspaces .ws-btn:hover {
  color: var(--accent-color);
  background-color: var(--hover-color);
}

.komorebi-workspaces .ws-btn.populated,
.glazewm-workspaces .ws-btn.populated {
  width: 10px;
  height: 10px;
  background-color: var(--active-color);
  margin: 0 2px;
  font-size: 1px;
}

.komorebi-workspaces .ws-btn.active,
.glazewm-workspaces .ws-btn.active_populated,
.glazewm-workspaces .ws-btn.active_empty {
  color: transparent;
  background-color: var(--icon-color);
  width: 36px;
  height: 10px;
}

/* --- Glazewm Tiling Direction --- */
.glazewm-tiling-direction {
  background-color: transparent;
  padding: 0;
  margin: 4px 0;
}

.glazewm-tiling-direction .btn {
  font-size: 14px;
  width: 14px;
  padding: 0 4px 0 12px;
  color: var(--foreground-color);
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 2px;
}

.glazewm-tiling-direction .btn:hover {
  background-color: var(--hover-color);
}

/* --- Common Widget Padding --- */
.weather-widget,
.battery-widget,
.wifi-widget,
.volume-widget,
.brightness-widget,
.clock-widget {
  padding: 0 6px;
}

/* --- Apps Widget Label --- */
.apps-widget .label {
  font-size: 14px;
  padding: 0 2px;
  color: var(--foreground-color);
}

/* --- Volume Widget --- */
.volume-widget .icon {
  color: var(--foreground-color);
  margin: 1px 2px 0 0;
}

.volume-slider {
  border: none;
}

.audio-menu {
  background-color: var(--background-color);
}

.audio-container .device {
  background-color: transparent;
  border: none;
  padding: 6px 8px 6px 4px;
  margin: 2px 0;
  font-size: 12px;
  border-radius: 4px;
}

.audio-container .device.selected {
  background-color: var(--highlight-color);
}

.audio-container .device:hover {
  background-color: var(--hover-color);
}

/* --- Battery Widget --- */
.battery-widget .icon {
  padding: 0 4px;
  font-size: 16px;
  color: var(--foreground-color);
}

.battery-widget .widget-container .icon.status-charging {
  font-size: 12px;
}

/* --- Brightness Widget --- */
.brightness-widget .icon {
  color: var(--foreground-color);
}

/* --- Weather Widget --- */
.weather-widget .icon {
  font-size: 18px;
  margin: 0 2px 1px 0;
}

/* --- Wallpapers Widget --- */
.wallpapers-widget .icon {
  color: var(--foreground-color);
  font-size: 14px;
  margin: 0;
}

/* --- Systray --- */
.systray {
  border: none;
  padding: 0 4px;
}
.systray .button {
  border-radius: 4px;
  padding: 4px 2px;
}
.systray .unpinned-visibility-btn {
  height: 20px;
  width: 16px;
  border: none;
  font-size: 26px;
}
.systray .unpinned-visibility-btn:hover {
  border-radius: 4px;
}

/* --- Home --- */
.home-widget .icon {
  color: #b4befe;
  margin-bottom: 2px;
}

.home-widget .icon:hover {
  color: #cdd6f4;
}

.home-menu {
  background-color: var(--background-color);
}

.home-menu .menu-item {
  padding: 6px 48px 7px 16px;
  font-size: 12px;
}

.home-menu .menu-item:hover {
  background-color: var(--hover-color);
}

.home-menu .separator {
  max-height: 1px;
  background-color: var(--border-color);
}

/* --- Taskbar --- */
.taskbar-widget .app-container {
  margin: 0 2px;
  border-radius: 4px;
  padding: 0 4px;
}
.taskbar-widget .app-container.flashing {
  background-color: rgba(255, 106, 106, 0.63);
}
.taskbar-widget .app-container .app-title {
  padding-left: 4px;
}
/* Taskbar preview popup is very limited in styling options, do not use margins/paddings here */
.taskbar-preview {
  border-radius: 8px;
  background-color: #2b2c2d;
}
.taskbar-preview .header {
  padding-bottom: 12px;
  padding-top: 4px;
}
.taskbar-preview .header .title {
  color: #d6d6d6;
  font-family: "Segoe UI";
  font-weight: 600;
  font-size: 13px;
}

/* --- WiFi --- */
.wifi-menu {
  font-family: "Segoe UI";
  background-color: rgba(17, 17, 27, 0.4);
  max-height: 350px;
  min-height: 375px;
  min-width: 375px;
}

.wifi-menu .progress-bar {
  max-height: 2px;
}

.wifi-menu .progress-bar::chunk {
  background-color: #4cc2ff;
}

.wifi-menu .header {
  font-family: "Segoe UI";
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  padding: 12px;
  background-color: var(--background-color);
  color: white;
  border-bottom: 1px solid var(--border-color);
}

.wifi-menu .error-message {
  font-family: "Segoe UI";
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  padding: 12px;
  background-color: red;
  color: white;
  border-bottom: 1px solid var(--border-color);
}

.wifi-menu .wifi-list {
  background-color: var(--background-color);
  margin-right: 3px;
}

.wifi-menu .wifi-item {
  min-height: 35px;
  padding: 2px 12px;
  margin: 2px 4px;
}

.wifi-menu .wifi-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.wifi-menu .wifi-item[active="true"] {
  background-color: rgba(255, 255, 255, 0.15);
  font-size: 14px;
  border-radius: 6px;
  min-height: 80px;
}

.wifi-menu .wifi-item .icon {
  font-family: "Segoe Fluent Icons";
  font-size: 26px;
  margin-right: 10px;
}

.wifi-menu .wifi-item .name {
  font-family: "Segoe UI";
  font-size: 14px;
  margin-right: 10px;
}

.wifi-menu .wifi-item .password {
  font-family: "Segoe UI";
  background-color: transparent;
  font-size: 14px;
}

.wifi-menu .wifi-item .status {
  font-family: "Segoe UI";
  font-size: 14px;
}

.wifi-menu .wifi-item .strength {
  font-family: "Segoe UI";
  font-size: 14px;
}

.wifi-menu .wifi-item .controls-container {
  padding-top: 8px;
}

.wifi-menu .wifi-item .connect {
  background-color: rgba(255, 255, 255, 0.15);
  padding: 4px 30px;
  border-radius: 4px;
  border: none;
  font-size: 14px;
}

.wifi-menu .wifi-item .connect:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.wifi-menu .wifi-item .connect:pressed {
  background-color: rgba(255, 255, 255, 0.3);
}

.wifi-menu .footer {
  font-size: 12px;
  font-weight: 600;
  padding: 12px;
  margin-top: 2px;
  color: #9399b2;
  background-color: var(--background-color);
  border-top: 1px solid var(--border-color);
}

.wifi-menu .footer .settings-button {
  font-family: "Segoe UI";
  background-color: transparent;
  border: none;
  padding: 0 2px;
  min-width: 26px;
  min-height: 26px;
  color: #fff;
}

.wifi-menu .footer .refresh-icon {
  font-family: "Segoe Fluent Icons";
  background-color: transparent;
  border: none;
  min-width: 26px;
  min-height: 26px;
  color: #fff;
}

.wifi-menu .footer .refresh-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

/* --- Media Widget --- */
.media-widget {
  padding: 0;
  margin: 5px 2px;
}
.media-widget .label {
  color: var(--foreground-color);
  font-size: 12px;
}
.media-widget .btn {
  color: var(--icon-color);
  padding: 0 6px;
  margin: 0;
  font-family: "Segoe Fluent Icons";
  font-weight: 400;
}
.media-widget .btn:hover {
  color: var(--icon-hover);
}
.media-widget .btn.play {
  font-size: 16px;
}
.media-widget .btn.disabled:hover,
.media-widget .btn.disabled {
  color: var(--inactive-color);
  font-size: 12px;
  background-color: transparent;
}

/* --- Media Menu --- */
.media-menu {
  min-width: 440px;
  max-width: 440px;
  background-color: var(--background-color);
}
.media-menu .title,
.media-menu .artist,
.media-menu .source {
  font-size: 14px;
  font-weight: 600;
  margin-left: 10px;
  font-family: "Segoe UI";
}
.media-menu .artist {
  font-size: 13px;
  color: var(--icon-color);
  margin-top: 0px;
}
.media-menu .source {
  font-size: 11px;
  color: var(--foreground-color);
  border-radius: 3px;
  background-color: var(--accent-color);
  padding: 2px 4px;
  font-weight: 600;
  font-family: "Segoe UI";
  margin-top: 10px;
}
.media-menu .btn {
  font-family: "Segoe Fluent Icons";
  font-size: 14px;
  font-weight: 400;
  margin: 10px 2px 0px 2px;
  min-width: 40px;
  max-width: 40px;
  min-height: 40px;
  max-height: 40px;
  border-radius: 20px;
}
.media-menu .btn.prev {
  margin-left: 10px;
}
.media-menu .btn:hover {
  color: var(--foreground-color);
  background-color: var(--hover-color);
}
.media-menu .btn.play {
  background-color: var(--hover-color);
  font-size: 20px;
}
.media-menu .btn.disabled:hover,
.media-menu .btn.disabled {
  color: var(--inactive-color);
  background-color: transparent;
}

.media-menu .playback-time {
  font-size: 13px;
  font-family: "Segoe UI";
  color: var(--icon-color);
  margin-top: 20px;
  min-width: 100px;
}
.media-menu .progress-slider {
  height: 10px;
  margin: 5px 4px;
  border-radius: 3px;
}
.media-menu .progress-slider::groove {
  background: var(--content-color);
  height: 2px;
  border-radius: 3px;
}
.media-menu .progress-slider::groove:hover {
  background: var(--hover-color);
  height: 6px;
  border-radius: 3px;
}
.media-menu .progress-slider::sub-page {
  background: var(--foreground-color);
  border-radius: 3px;
  height: 4px;
}

.media-menu .app-volume-container {
  background-color: rgba(
    255,
    255,
    255,
    0.05
  ); /* optional: replace with var(--content-color) if desired */
  padding: 8px 6px;
  border-radius: 16px;
  margin-left: 10px;
}
.media-menu .app-volume-container .volume-slider::groove {
  background: var(--content-color);
  width: 2px;
  border-radius: 3px;
}
.media-menu .app-volume-container .volume-slider::add-page {
  background: var(--foreground-color);
  border-radius: 3px;
}
.media-menu .app-volume-container .volume-slider::groove:hover {
  background: var(--hover-color);
  width: 6px;
  border-radius: 3px;
}
.media-menu .app-volume-container .volume-slider::sub-page {
  background: var(--content-color);
  border-radius: 3px;
}
.media-menu .app-volume-container .mute-button,
.media-menu .app-volume-container .unmute-button {
  font-size: 16px;
  color: var(--foreground-color);
  font-family: "Segoe Fluent Icons";
  margin-top: 4px;
}
.media-menu .app-volume-container .unmute-button {
  color: var(--icon-color);
}
