@charset "UTF-8";
/*!
 * OS.js - JavaScript Cloud/Web Desktop Platform
 *
 * Copyright (c) 2011-2020, Anders Evenrud <andersevenrud@gmail.com>
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 * 1. Redistributions of source code must retain the above copyright notice, this
 *    list of conditions and the following disclaimer
 * 2. Redistributions in binary form must reproduce the above copyright notice,
 *    this list of conditions and the following disclaimer in the documentation
 *    and/or other materials provided with the distribution
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
 * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 *
 * @author  Anders Evenrud <andersevenrud@gmail.com>
 * @licence Simplified BSD License
 */
/*!
 * OS.js Catppuccin Mocha Theme
 * Overrides all default OS.js styles with the official Catppuccin Mocha palette.
 * Palette: https://catppuccin.com/palette/
 */
/* ─── Palette Variables (for reference, used directly in selectors below) ─── */
/* base      #1e1e2e */
/* mantle    #181825 */
/* crust     #11111b */
/* surface0  #313244 */
/* surface1  #45475a */
/* surface2  #585b70 */
/* overlay0  #6c7086 */
/* overlay1  #7f849c */
/* overlay2  #9399b2 */
/* text      #cdd6f4 */
/* subtext1  #bac2de */
/* subtext0  #a6adc8 */
/* blue      #89b4fa */
/* lavender  #b4befe */
/* sapphire  #74c7ec */
/* sky       #89dceb */
/* teal      #94e2d5 */
/* green     #a6e3a1 */
/* yellow    #f9e2af */
/* peach     #fab387 */
/* maroon    #eba0ac */
/* red       #f38ba8 */
/* mauve     #cba6f7 */
/* pink      #f5c2e7 */
/* flamingo  #f2cdcd */
/* rosewater #f5e0dc */
/* ═══════════════════════════════════════════════════════════════════════
   1. DESKTOP SHELL
   ═══════════════════════════════════════════════════════════════════════ */
/* Desktop background */
.osjs-root {
  background: #1e1e2e;
  /* base */
}

/* Boot splash */
.osjs-boot-splash {
  background: #181825 !important;
  /* mantle */
  color: #cdd6f4 !important;
  /* text */
}

/* Desktop contents area */
.osjs-contents {
  background-color: transparent;
  /* allow body background to show through */
}

/* Taskbar/Panel (bottom bar) */
.osjs-panel {
  background: #313244 !important;
  /* surface0 */
  color: #cdd6f4 !important;
  /* text */
}

.osjs-panel-item {
  color: #cdd6f4 !important;
  /* text */
}

.osjs-panel-item:hover {
  color: #89b4fa !important;
  /* blue */
}

/* Clock text */
.osjs-panel-item[data-name=clock] {
  color: #cdd6f4 !important;
  /* text */
}

/* Running-app icons in taskbar */
.osjs-panel-item[data-name=windows] > div {
  color: #cdd6f4 !important;
  /* text */
  background-color: transparent;
}

.osjs-panel-item[data-name=windows] > div:hover {
  background-color: #313244 !important;
  /* surface0 */
  color: #89b4fa !important;
  /* blue */
}

.osjs-panel-item[data-name=windows] > div.osjs__active {
  background-color: #45475a !important;
  /* surface1 */
  color: #89b4fa !important;
  /* blue */
}

/* Menu button in panel */
.osjs-panel-item[data-name=menu] {
  color: #cdd6f4 !important;
  /* text */
}

.osjs-panel-item[data-name=menu]:hover {
  color: #89b4fa !important;
  /* blue */
  background: #313244 !important;
  /* surface0 */
}

/* Tray icons */
.osjs-panel-item[data-name=tray] {
  color: #cdd6f4 !important;
  /* text */
}

.osjs-panel-item[data-name=tray] > div {
  color: #cdd6f4 !important;
  /* text */
}

/* ═══════════════════════════════════════════════════════════════════════
   2. WINDOW CHROME
   ═══════════════════════════════════════════════════════════════════════ */
/* Window outer border/frame */
.osjs-window {
  border: 1px solid #585b70 !important;
  /* surface2 */
  background: #1e1e2e !important;
  /* base */
}

/* Window title bar / header */
.osjs-window-header {
  background: #313244 !important;
  /* surface0 */
  color: #cdd6f4 !important;
  /* text */
  border-bottom: 1px solid #45475a !important;
  /* surface1 */
}

/* Window title text */
.osjs-window-title {
  color: #cdd6f4 !important;
  /* text */
}

/* Window buttons (close, min, max) */
.osjs-window-button {
  color: #7f849c !important;
  /* overlay1 */
  background-color: transparent;
  margin-right: 0 !important;
  /* neutralize vendors~osjs.css DOM-order :not(:last-child) margin */
}

.osjs-window-button:hover {
  color: #585b70 !important;
  /* surface2 */
  background: #313244;
}

.osjs-window-button:active {
  color: #89b4fa !important;
  /* blue */
}

/* Window button order (traffic-light: close, minimize, maximize) */
.osjs-window-button[data-action=close] {
  order: -3 !important;
  margin-right: 0.25em !important;
  /* visual-first gap */
}

.osjs-window-button[data-action=minimize] {
  order: -2 !important;
  margin-right: 0.25em !important;
  /* visual-middle gap */
}

.osjs-window-button[data-action=maximize] {
  order: -1 !important;
  margin-right: 0 !important;
  /* visual-last — no trailing margin */
}

/* Window icon — push to far right, after title */
.osjs-window-icon {
  order: 1 !important;
  /* after title (default order 0) */
  margin-right: 0;
  margin-left: 0.5em;
  /* breathing room from window right edge */
}

/* Window content area */
.osjs-window-content {
  background: #11111b !important;
  /* crust */
  color: #cdd6f4 !important;
  /* text */
}

/* Window drop outline */
.osjs-window.osjs__drop {
  outline: 2px solid #89b4fa !important;
  /* blue */
}

/* ═══════════════════════════════════════════════════════════════════════
   3. APPLICATION WINDOWS (all app content areas)
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-window-inner {
  background: #1e1e2e;
  /* base */
}

/* ═══════════════════════════════════════════════════════════════════════
   4. MENUS & CONTEXT MENUS
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-menu {
  background: #181825 !important;
  /* mantle */
  border: 1px solid #45475a !important;
  /* surface1 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.osjs-gui-menu ul {
  background: #181825 !important;
  /* mantle */
}

.osjs-gui-menu ul > li {
  background-color: transparent;
}

.osjs-gui-menu ul > li > div {
  background-color: transparent;
}

.osjs-gui-menu ul > li > div:hover {
  background: #313244 !important;
  /* surface0 */
}

.osjs-gui-menu-label {
  color: #cdd6f4 !important;
  /* text */
  background-color: transparent;
}

.osjs-gui-menu ul > li > div:hover .osjs-gui-menu-label {
  color: #bac2de !important;
  /* subtext1 */
  background: #313244 !important;
  /* surface0 */
}

/* Menu separator */
.osjs-gui-menu-separator {
  background-color: transparent;
}

.osjs-gui-menu-separator:after {
  background-color: #6c7086 !important;
  /* overlay0 */
  height: 1px;
}

/* Disabled menu items */
.osjs-gui-menu-label[data-disabled=true] {
  color: #6c7086 !important;
  /* overlay0 */
}

/* Menu checkbox */
.osjs-gui-menu-label > .osjs-gui-menu-checkbox:after {
  color: #89b4fa !important;
  /* blue */
}

/* Menu submenu indicator */
.osjs-gui-menu-container[data-has-children] > .osjs-gui-menu-label:after {
  color: #cdd6f4 !important;
  /* text */
}

/* ═══════════════════════════════════════════════════════════════════════
   5. DIALOGS / MODALS
   ═══════════════════════════════════════════════════════════════════════ */
/* Dialog backdrop/overlay - needs to be on the body overlay */
.osjs-root.login:after {
  background: rgba(17, 17, 27, 0.8) !important;
  /* crust @ 80% */
}

/* Dialog/modal background */
.osjs-dialog-buttons {
  background: #181825 !important;
  /* mantle */
  padding: 0.5em;
}

.osjs-dialog-message,
.osjs-dialog-status {
  color: #cdd6f4 !important;
  /* text */
  background: #181825 !important;
  /* mantle */
}

/* General dialog wrapper */
.osjs-window[data-dialog=true] .osjs-window-content {
  background: #181825 !important;
  /* mantle */
}

.osjs-window[data-dialog=true] .osjs-window-header {
  background: #313244 !important;
  /* surface0 */
}

/* ═══════════════════════════════════════════════════════════════════════
   6. BUTTONS & CONTROLS
   ═══════════════════════════════════════════════════════════════════════ */
/* Default button */
.osjs-gui-button > button {
  background: #585b70 !important;
  /* surface2 */
  color: #cdd6f4 !important;
  /* text */
  border: 1px solid #6c7086 !important;
  /* overlay0 */
}

.osjs-gui-button > button:hover {
  background: #45475a !important;
  /* surface1 */
}

.osjs-gui-button > button:active,
.osjs-gui-button > button[active=true] {
  background: #313244 !important;
  /* surface0 */
}

/* Primary/action buttons */
.osjs-gui-button.osjs__primary > button {
  background: #89b4fa !important;
  /* blue */
  color: #1e1e2e !important;
  /* base */
  border: 1px solid #89b4fa !important;
  /* blue */
}

.osjs-gui-button.osjs__primary > button:hover {
  background: #b4befe !important;
  /* lavender */
}

/* Cancel button */
.osjs-gui-button.osjs__cancel > button {
  background: #313244 !important;
  /* surface0 */
  color: #cdd6f4 !important;
  /* text */
}

/* ═══════════════════════════════════════════════════════════════════════
   7. INPUTS & FORM CONTROLS
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-field input,
.osjs-gui-field select,
.osjs-gui-field textarea,
.osjs-gui-input input,
.osjs-gui-input select,
.osjs-gui-input textarea {
  background: #11111b !important;
  /* crust */
  color: #cdd6f4 !important;
  /* text */
  border: 1px solid #6c7086 !important;
  /* overlay0 */
}

.osjs-gui-field input:focus,
.osjs-gui-field select:focus,
.osjs-gui-field textarea:focus,
.osjs-gui-input input:focus,
.osjs-gui-input select:focus,
.osjs-gui-input textarea:focus {
  border-color: #89b4fa !important;
  /* blue */
  box-shadow: 0 0 3px #89b4fa !important;
  /* blue */
  outline: none;
}

.osjs-gui-field input::placeholder,
.osjs-gui-field textarea::placeholder {
  color: #6c7086 !important;
  /* overlay0 */
}

/* Select dropdown */
.osjs-gui-select-field > div:after {
  color: #cdd6f4 !important;
  /* text */
}

.osjs-gui-select-field select {
  background: #313244 !important;
  /* surface0 */
  color: #cdd6f4 !important;
  /* text */
}

.osjs-gui-select-field select option {
  background: #181825 !important;
  /* mantle */
  color: #cdd6f4 !important;
  /* text */
}

/* ═══════════════════════════════════════════════════════════════════════
   8. SCROLLBARS
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-list-view-wrapper::-webkit-scrollbar,
.osjs-search-results::-webkit-scrollbar,
.osjs-gui-icon-view-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.osjs-gui-list-view-wrapper::-webkit-scrollbar-track,
.osjs-search-results::-webkit-scrollbar-track,
.osjs-gui-icon-view-wrapper::-webkit-scrollbar-track {
  background: #313244 !important;
  /* surface0 */
}

.osjs-gui-list-view-wrapper::-webkit-scrollbar-thumb,
.osjs-search-results::-webkit-scrollbar-thumb,
.osjs-gui-icon-view-wrapper::-webkit-scrollbar-thumb {
  background: #585b70 !important;
  /* surface2 */
  border-radius: 4px;
}

.osjs-gui-list-view-wrapper::-webkit-scrollbar-thumb:hover,
.osjs-search-results::-webkit-scrollbar-thumb:hover,
.osjs-gui-icon-view-wrapper::-webkit-scrollbar-thumb:hover {
  background: #7f849c !important;
  /* overlay1 */
}

/* Firefox scrollbars */
.osjs-gui-list-view-wrapper,
.osjs-search-results,
.osjs-gui-icon-view-wrapper {
  scrollbar-width: thin;
  scrollbar-color: #585b70 #313244;
  /* surface2 / surface0 */
}

/* ═══════════════════════════════════════════════════════════════════════
   9. TOOLTIPS
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-tooltip {
  background: #313244 !important;
  /* surface0 */
  color: #cdd6f4 !important;
  /* text */
  border: 1px solid #45475a !important;
  /* surface1 */
  padding: 0.5em;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════
   10. POPOVERS
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-popover {
  background: #181825 !important;
  /* mantle */
  color: #cdd6f4 !important;
  /* text */
  border: 1px solid #45475a !important;
  /* surface1 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════
   11. PROGRESS BARS
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-progressbar-wrapper {
  background: #313244 !important;
  /* surface0 */
}

.osjs-gui-progressbar-value {
  background-color: #89b4fa !important;
  /* blue */
}

.osjs-gui-progressbar-label {
  color: #cdd6f4 !important;
  /* text */
}

/* ═══════════════════════════════════════════════════════════════════════
   12. NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-notifications {
  color: #cdd6f4 !important;
  /* text */
}

.osjs-notification {
  background: #181825 !important;
  /* mantle */
  color: #cdd6f4 !important;
  /* text */
  border: 1px solid #45475a !important;
  /* surface1 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Info notification */
.osjs-notification[data-type=info] {
  border-left: 3px solid #89b4fa !important;
  /* blue */
}

/* Error notification */
.osjs-notification[data-type=error] {
  border-left: 3px solid #f38ba8 !important;
  /* red */
}

/* Success notification */
.osjs-notification[data-type=success] {
  border-left: 3px solid #a6e3a1 !important;
  /* green */
}

/* ═══════════════════════════════════════════════════════════════════════
   13. TABS
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-tabs-header {
  background: #313244 !important;
  /* surface0 */
  border-bottom: 1px solid #45475a !important;
  /* surface1 */
}

.osjs-gui-tabs-header > div {
  color: #cdd6f4 !important;
  /* text */
  background-color: transparent;
  border-bottom: 2px solid transparent;
}

.osjs-gui-tabs-header > div:hover {
  background: #45475a !important;
  /* surface1 */
}

.osjs-gui-tabs-header > div.osjs__active {
  background: #181825 !important;
  /* mantle */
  border-bottom: 2px solid #89b4fa !important;
  /* blue */
  color: #89b4fa !important;
  /* blue */
}

.osjs-gui-tabs-panes > div {
  background: #181825 !important;
  /* mantle */
  color: #cdd6f4 !important;
  /* text */
}

/* ═══════════════════════════════════════════════════════════════════════
   14. TOOLBAR & STATUSBAR
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-toolbar {
  background: #313244 !important;
  /* surface0 */
  border-bottom: 1px solid #45475a !important;
  /* surface1 */
}

.osjs-gui-statusbar {
  background: #313244 !important;
  /* surface0 */
  color: #cdd6f4 !important;
  /* text */
  border-top: 1px solid #45475a !important;
  /* surface1 */
}

/* ═══════════════════════════════════════════════════════════════════════
   15. LIST VIEW / ICON VIEW
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-list-view-header {
  background: #313244 !important;
  /* surface0 */
  color: #cdd6f4 !important;
  /* text */
  border-bottom: 1px solid #45475a !important;
  /* surface1 */
}

.osjs-gui-list-view-cell {
  color: #cdd6f4 !important;
  /* text */
  border-bottom: 1px solid #313244 !important;
  /* surface0 */
}

.osjs-gui-list-view-cell:hover {
  background: #313244 !important;
  /* surface0 */
}

.osjs-gui-list-view-cell.osjs__active {
  background: #45475a !important;
  /* surface1 */
  color: #89b4fa !important;
  /* blue */
}

/* Sidebar zebra rows — replace #f9f9f9 with Mocha palette */
.osjs-gui-list-view .rows:not([data-zebra=false]) > div:nth-child(odd):not(.osjs__active) {
  background: #181825 !important;
}

/* mantle */
.osjs-gui-list-view .rows:not([data-zebra=false]) > div:nth-child(even):not(.osjs__active) {
  background: #1e1e2e !important;
}

/* base */
.osjs-gui-list-view .rows > div:hover,
.osjs-gui-list-view .rows > div.osjs__active {
  background: #313244 !important;
}

/* surface0 */
/* Icon view */
.osjs-gui-icon-view-entry {
  color: #cdd6f4 !important;
  /* text */
}

.osjs-gui-icon-view-entry > .osjs__container > .osjs__label {
  color: #cdd6f4 !important;
  /* text */
}

.osjs-gui-icon-view-entry.osjs__active > .osjs__container {
  background: #313244 !important;
  /* surface0 */
}

/* Desktop icon view */
.osjs-desktop-iconview__entry--selected .osjs-desktop-iconview__entry__icon {
  background: #313244 !important;
  /* surface0 */
}

.osjs-desktop-iconview__entry--selected .osjs-desktop-iconview__entry__label {
  background: #313244 !important;
  /* surface0 */
  color: #cdd6f4 !important;
  /* text */
}

.osjs-desktop-iconview__entry__label {
  color: #cdd6f4 !important;
  /* text */
}

/* ═══════════════════════════════════════════════════════════════════════
   16. EXPANDER
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-expander-header {
  background: #313244 !important;
  /* surface0 */
  color: #cdd6f4 !important;
  /* text */
  border-bottom: 1px solid #45475a !important;
  /* surface1 */
}

.osjs-gui-expander-header:hover {
  background-color: #45475a !important;
  /* surface1 */
}

.osjs-gui-expander-content {
  background: #181825 !important;
  /* mantle */
  color: #cdd6f4 !important;
  /* text */
}

/* ═══════════════════════════════════════════════════════════════════════
   17. MENUBAR (inside app windows)
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-menubar {
  background-color: #313244 !important;
  /* surface0 */
  color: #cdd6f4 !important;
  /* text */
  border-bottom: 1px solid #45475a !important;
  /* surface1 */
}

.osjs-gui-menubar > div > span {
  color: #cdd6f4 !important;
  /* text */
}

.osjs-gui-menubar > div:hover > span {
  color: #89b4fa !important;
  /* blue */
  background: #45475a !important;
  /* surface1 */
}

.osjs-gui-menubar > div:hover {
  background: #45475a !important;
  /* surface1 — replaces OS.js default blue accent */
}

/* Menu li:hover > div > span — override upstream #fff/#000 */
.osjs-gui-menu li:hover > div > span {
  background: #45475a !important;
  /* surface1 */
  color: #cdd6f4 !important;
  /* text */
}

/* Panel item clickable hover — override upstream #fff */
.osjs-panel-item--clickable:hover {
  background: #313244 !important;
  /* surface0 */
}

/* Search result active — override upstream #fff/#000 */
.osjs-search-result.osjs__active {
  background: #45475a !important;
  /* surface1 */
  color: #cdd6f4 !important;
  /* text */
}

/* Icon view active selection — replace legacy blue accent with surface0 */
.osjs-gui-icon-view-wrapper .osjs__active .osjs__image,
.osjs-gui-icon-view-wrapper .osjs__active .osjs__label {
  background: #313244 !important;
  /* surface0 */
  color: #cdd6f4 !important;
  /* text */
}

/* Focus outlines — replace legacy blue outline with Catppuccin blue at low alpha */
.osjs-gui-button > button:focus,
.osjs-gui-input select:focus,
.osjs-gui-input textarea:focus,
.osjs-gui-icon-view-wrapper:focus,
.osjs-gui-list-view-wrapper:focus,
.osjs-gui-box-styled:focus {
  outline: 1px solid rgba(137, 180, 250, 0.4) !important;
  /* blue @ 40% */
}

/* ═══════════════════════════════════════════════════════════════════════
   18. LOGIN SCREEN
   ═══════════════════════════════════════════════════════════════════════ */
#osjs-login .osjs-login-header {
  color: #cdd6f4 !important;
  /* text */
}

#osjs-login .osjs-login-field-select:after {
  color: #cdd6f4 !important;
  /* text */
}

#osjs-login .osjs-login-error {
  background: rgba(243, 139, 168, 0.8) !important;
  /* red @ 80% */
  color: #1e1e2e !important;
  /* base */
}

#osjs-login .osjs-login-stamp {
  color: rgba(205, 214, 244, 0.5) !important;
  /* text @ 50% */
}

#osjs-login input {
  outline: 1px solid #6c7086 !important;
  /* overlay0 */
  background-color: #11111b !important;
  /* crust */
  color: #cdd6f4 !important;
  /* text */
}

#osjs-login input:active,
#osjs-login input:focus {
  box-shadow: 0 0 0.5em rgba(137, 180, 250, 0.8) !important;
  /* blue glow */
  outline: 1px solid #89b4fa !important;
  /* blue */
}

#osjs-login button,
#osjs-login input[type=submit] {
  background-color: #585b70 !important;
  /* surface2 */
  color: #cdd6f4 !important;
  /* text */
  border: 1px solid #6c7086 !important;
  /* overlay0 */
}

#osjs-login button:hover,
#osjs-login input[type=submit]:hover {
  background-color: #45475a !important;
  /* surface1 */
}

#osjs-login input[type=password],
#osjs-login input[type=text],
#osjs-login select {
  background-color: #1e1e2e !important;
  /* base */
  color: #cdd6f4 !important;
  /* text */
  border: 1px solid #6c7086 !important;
  /* overlay0 */
}

#osjs-login select option {
  color: #cdd6f4 !important;
  /* text */
  background: #181825 !important;
  /* mantle */
}

#osjs-login ::-webkit-input-placeholder {
  color: #6c7086 !important;
  /* overlay0 */
  text-transform: uppercase;
}

#osjs-login ::-moz-placeholder {
  color: #6c7086 !important;
  /* overlay0 */
  text-transform: uppercase;
}

#osjs-login :-ms-input-placeholder {
  color: #6c7086 !important;
  /* overlay0 */
  text-transform: uppercase;
}

#osjs-login :-moz-placeholder {
  color: #6c7086 !important;
  /* overlay0 */
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════
   19. SEARCH
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-search-container {
  background: #181825 !important;
  /* mantle */
  color: #cdd6f4 !important;
  /* text */
  border: 1px solid #45475a !important;
  /* surface1 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.osjs-search-input {
  background: #11111b !important;
  /* crust */
  color: #cdd6f4 !important;
  /* text */
  border: 1px solid #6c7086 !important;
  /* overlay0 */
}

.osjs-search-input:focus {
  border-color: #89b4fa !important;
  /* blue */
  outline: none;
}

.osjs-search-message {
  color: #7f849c !important;
  /* overlay1 */
}

.osjs-search-result {
  color: #cdd6f4 !important;
  /* text */
}

.osjs-search-result:hover {
  background: #313244 !important;
  /* surface0 */
}

/* ═══════════════════════════════════════════════════════════════════════
   20. IFRAMES / EMBEDDED CONTENT
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-iframe > iframe {
  background-color: #1e1e2e !important;
  /* base */
}

/* ═══════════════════════════════════════════════════════════════════════
   21. TOGGLE / CHECKBOX
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-toggle-field > label > .osjs-toggle-input:before {
  border: 1px solid #6c7086 !important;
  /* overlay0 */
  background: #11111b !important;
  /* crust */
}

.osjs-gui-toggle-field > label > .osjs-toggle-input:before:active,
.osjs-gui-toggle-field > label > .osjs-toggle-input:before[active=true] {
  background: #45475a !important;
  /* surface1 */
  border-color: #45475a !important;
  /* surface1 */
}

.osjs-gui-toggle-field > label > input:checked + span .osjs-toggle-input:before {
  background: #89b4fa !important;
  /* blue */
  border-color: #89b4fa !important;
  /* blue */
}

.osjs-gui-toggle-field > label > .osjs-toggle-label {
  color: #cdd6f4 !important;
  /* text */
}

/* ═══════════════════════════════════════════════════════════════════════
   22. PANE SPLITTERS
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-panes-spacer {
  background: #313244 !important;
  /* surface0 */
}

.osjs-gui-panes-pane {
  background: #181825 !important;
  /* mantle */
  color: #cdd6f4 !important;
  /* text */
}

/* ═══════════════════════════════════════════════════════════════════════
   23. LABELS
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-field-label > label {
  color: #cdd6f4 !important;
  /* text */
}

/* ═══════════════════════════════════════════════════════════════════════
   24. VIDEO / MEDIA
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-video {
  background: #11111b !important;
  /* crust */
}

.osjs-gui-video > video {
  background: #11111b !important;
  /* crust */
}

/* ═══════════════════════════════════════════════════════════════════════
   25. GENERIC TEXT SELECTION
   ═══════════════════════════════════════════════════════════════════════ */
::selection {
  background-color: #89b4fa !important;
  /* blue */
  color: #1e1e2e !important;
  /* base */
}

/* ═══════════════════════════════════════════════════════════════════════
   26. GENERIC FOCUS OUTLINES
   ═══════════════════════════════════════════════════════════════════════ */
*:focus-visible {
  outline: 2px solid #89b4fa !important;
  /* blue */
  outline-offset: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════
   27. CATCH-ALL: force dark backgrounds in all GUI components
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-window-content * {
  color: inherit;
  /* inherit from parent instead of browser default */
}

/* Force dark bg on any content area that may be white */
.osjs-window-content,
.osjs-gui-box,
.osjs-gui-box-container,
.osjs-gui {
  background-color: inherit;
}

/* Generic box backgrounds */
.osjs-gui-box {
  background: #1e1e2e !important;
  /* base */
}

/* ═══════════════════════════════════════════════════════════════════════
   28. GLOBAL SCROLLBAR OVERRIDES (override upstream light scrollbar components)
   ═══════════════════════════════════════════════════════════════════════ */
/* All non-thumb scrollbar components → #181825 (mantle); thumb → #45475a (surface1) */
::-webkit-scrollbar-button {
  background: #181825 !important;
  /* mantle */
}

::-webkit-scrollbar-thumb {
  background: #45475a !important;
  /* surface1 */
}

::-webkit-scrollbar-track-piece {
  background: #181825 !important;
  /* mantle */
}

::-webkit-resizer,
::-webkit-scrollbar-corner {
  background: #181825 !important;
  /* mantle */
}

/* ═══════════════════════════════════════════════════════════════════════
   29. WINDOW BUTTON DOT COLORS (override upstream #bababa unfocused / #e56c5c close / #f9c435 min / #8dd22b max)
   ═══════════════════════════════════════════════════════════════════════ */
/* Unfocused dot — neutral overlay0 */
.osjs-window-button > div:before {
  background: #6c7086 !important;
  /* overlay0 */
}

/* Focused traffic-light dots — Catppuccin Mocha palette */
.osjs-window[data-focused=true] .osjs-window-button[data-action=close] > div:before {
  background: #f38ba8 !important;
  /* red */
}

.osjs-window[data-focused=true] .osjs-window-button[data-action=minimize] > div:before {
  background: #f9e2af !important;
  /* yellow */
}

.osjs-window[data-focused=true] .osjs-window-button[data-action=maximize] > div:before {
  background: #a6e3a1 !important;
  /* green */
}

/* :active and :hover variants — slightly darker (theme gives both the same gradient) */
.osjs-window[data-focused=true] .osjs-window-button[data-action=close]:active > div:before,
.osjs-window[data-focused=true] .osjs-window-button[data-action=close]:hover > div:before {
  background: #eba0ac !important;
  /* maroon */
}

.osjs-window[data-focused=true] .osjs-window-button[data-action=minimize]:active > div:before,
.osjs-window[data-focused=true] .osjs-window-button[data-action=minimize]:hover > div:before {
  background: #fab387 !important;
  /* peach */
}

.osjs-window[data-focused=true] .osjs-window-button[data-action=maximize]:active > div:before,
.osjs-window[data-focused=true] .osjs-window-button[data-action=maximize]:hover > div:before {
  background: #94e2d5 !important;
  /* teal */
}

/* ═══════════════════════════════════════════════════════════════════════
   30. RANGE FIELDS (override upstream #d9d9d9 tracks, #f8f8f8 thumbs)
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-range-field > input[type=range]::-webkit-slider-runnable-track {
  background: #313244 !important;
  /* surface0 */
  border: 0 !important;
}

.osjs-gui-range-field > input[type=range]::-webkit-slider-thumb {
  background: #89b4fa !important;
  /* blue */
  border-color: #89b4fa !important;
}

.osjs-gui-range-field > input[type=range]::-moz-range-track {
  background: #313244 !important;
  /* surface0 */
  border: 0 !important;
}

.osjs-gui-range-field > input[type=range]::-moz-range-thumb {
  background: #89b4fa !important;
  /* blue */
  border-color: #89b4fa !important;
}

.osjs-gui-range-field > input[type=range]::-ms-track {
  background: #313244 !important;
  /* surface0 */
  border-color: #313244 !important;
}

.osjs-gui-range-field > input[type=range]::-ms-fill-lower,
.osjs-gui-range-field > input[type=range]::-ms-fill-upper {
  background: #313244 !important;
  /* surface0 */
}

.osjs-gui-range-field > input[type=range]::-ms-thumb {
  background: #89b4fa !important;
  /* blue */
  border-color: #89b4fa !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   31. BOX STYLED (override upstream #fff background / #242424 text)
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-box-styled {
  background: #1e1e2e !important;
  /* base */
  color: #cdd6f4 !important;
  /* text */
  border: 1px solid #45475a !important;
  /* surface1 */
}

/* ═══════════════════════════════════════════════════════════════════════
   32. LIST / ICON VIEW WRAPPER BACKGROUNDS (override upstream #fff)
   ═══════════════════════════════════════════════════════════════════════ */
.osjs-gui-list-view-wrapper {
  background: #11111b !important;
  /* crust */
  color: #cdd6f4 !important;
  /* text */
  border: 1px solid #45475a !important;
  /* surface1 */
}

.osjs-gui-icon-view-wrapper {
  background: #1e1e2e !important;
  /* base */
  color: #cdd6f4 !important;
  /* text */
  border: 1px solid #45475a !important;
  /* surface1 */
}

body,
html {
  width: 100%;
  height: 100%;
}

/*# sourceMappingURL=osjs.css.map*/