/* Dracula theme for Filestash. Applied through general.custom_css in
 * state/config/config.json (see apply-theme.sh). Palette: draculatheme.com */
:root, body, body.dark-mode {
  --bg-color: #282a36;
  --color: #f8f8f2;
  --emphasis: #bd93f9;
  --primary: #bd93f9;
  --emphasis-primary: #44475a;
  --emphasis-secondary: #ff79c6;
  --light: #f8f8f2;
  --super-light: #6272a4;
  --error: #ff5555;
  --success: #50fa7b;
  --dark: #21222c;
  --surface: #44475a;
  --border: #44475a;
}
html { font-family: "Inter", system-ui, sans-serif; }
body { background: #282a36 !important; color: #f8f8f2 !important; }

/* Login page */
.component_page_connection_form .box { background: #21222c !important; box-shadow: 0 8px 30px rgba(0,0,0,.45) !important; border-radius: 10px !important; border: 1px solid #44475a; }
.component_page_connection_form form label,
.component_page_connection_form form .advanced { color: #6272a4 !important; }
.component_page_connection_form div.buttons button { color: #6272a4 !important; background: transparent !important; }
.component_page_connection_form div.buttons button.active { color: #f8f8f2 !important; background: #44475a !important; box-shadow: none !important; }
.component_page_connection_form form button.emphasis { background: #bd93f9 !important; color: #282a36 !important; font-weight: 600; border-radius: 6px; }
.component_page_connection_form form button.emphasis:hover { background: #ff79c6 !important; }
.scroll-x::-webkit-scrollbar-track { background: #21222c !important; }

/* Inputs / buttons */
input, textarea, select, .component_input { color: #f8f8f2 !important; border-color: #44475a !important; background: transparent !important; }
input::placeholder, textarea::placeholder { color: #6272a4 !important; }
input:focus, textarea:focus, .component_input:focus { border-color: #bd93f9 !important; outline: none; }
button { color: #f8f8f2; }
button.emphasis, .component_button.emphasis { background: #bd93f9 !important; color: #282a36 !important; }

/* File manager shell */
.component_filemanager_shell, .component_filemanager_shell .component_page_filespage { background: #282a36 !important; }
[is="component_filesystem"], .component_filesystem, .list { background: #282a36 !important; }
.component_sidebar { background: #21222c !important; color: #f8f8f2 !important; border-right: 1px solid #44475a; }
.component_sidebar a, .component_sidebar div { color: #f8f8f2; }
.component_sidebar .active, .component_sidebar a:hover { background: #44475a !important; border-radius: 6px; }
.component_breadcrumb, .component_breadcrumb * { color: #f8f8f2 !important; }
.component_breadcrumb .component_breadcrumb-item:last-child, .component_breadcrumb .current { color: #bd93f9 !important; }
.component_submenu { background: #282a36 !important; color: #f8f8f2 !important; border-bottom: 1px solid #44475a; }
.component_submenu .view button, .component_submenu button { color: #f8f8f2 !important; }
.component_submenu .selection { background: #44475a !important; color: #f8f8f2 !important; }

/* Files & folders */
.component_thing { color: #f8f8f2 !important; border-color: #44475a !important; border-radius: 6px; }
.component_thing:hover, .component_thing.hover, .component_thing .highlight { background: #44475a !important; }
.component_thing.selected .selectionOverlay { background: rgba(189,147,249,.18) !important; }
.component_thing .component_datetime, .component_thing .component_filesize { color: #6272a4 !important; }
.component_thing form input { color: #f8f8f2 !important; background: #21222c !important; }
.component_thing .component_checkbox .indicator { border-color: #6272a4 !important; }
.component_thing.selected .component_checkbox .indicator { background: #bd93f9 !important; border-color: #bd93f9 !important; }
.component_thing .component_action .component_icon { filter: invert(1) hue-rotate(180deg); }

/* Modals, dropdowns, notifications, upload */
.component_modal, .component_modal > div, .component_modal .modal-content { background: #21222c !important; color: #f8f8f2 !important; border: 1px solid #44475a; border-radius: 10px; }
.component_modal .modal-message, .component_modal p { color: #f8f8f2 !important; }
.component_dropdown, .component_dropdown ul, .dropdown_menu { background: #21222c !important; color: #f8f8f2 !important; border: 1px solid #44475a !important; }
.component_dropdown li:hover { background: #44475a !important; }
.component_notification, .component_notification > div { background: #21222c !important; color: #f8f8f2 !important; border-left: 4px solid #bd93f9; }
.component_notification.error > div { border-left-color: #ff5555; }
.component_notification.success > div { border-left-color: #50fa7b; }
.component_upload_queue, .component_upload_queue > div { background: #21222c !important; color: #f8f8f2 !important; border: 1px solid #44475a; }
.component_upload_queue .progress, .progress { background: #bd93f9 !important; }
.component_fab { background: #ff79c6 !important; color: #282a36 !important; }

/* Editors / viewers */
.component_page_viewerpage, .component_ide, .CodeMirror { background: #282a36 !important; color: #f8f8f2 !important; }
.CodeMirror-gutters { background: #21222c !important; border-color: #44475a !important; }
.CodeMirror-linenumber { color: #6272a4 !important; }

/* Admin */
.component_page_admin, .component_page_admin .component_container { background: #282a36 !important; color: #f8f8f2 !important; }
.component_page_admin .box, .component_page_admin .component_box { background: #21222c !important; border-color: #44475a !important; }

/* Scrollbars & selection */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #44475a; border-radius: 4px; }
::-webkit-scrollbar-track { background: #282a36; }
::selection { background: #bd93f9; color: #282a36; }

/* Disk usage widget (generated 2026-10-24T21:55:01Z) */
body::after {
  content: "25G of 193G used  \2022  169G free";
  position: fixed; left: 16px; bottom: 16px; z-index: 9999;
  padding: 14px 24px 20px 62px; border-radius: 16px;
  color: #f8f8f2; border: 1px solid #44475a;
  font: 600 16px/1.3 system-ui, sans-serif; letter-spacing: .2px;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); pointer-events: none;
  /* layers: disk icon, fill bar, track, panel */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bd93f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='5' rx='9' ry='3'/><path d='M3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5'/><path d='M3 12c0 1.7 4 3 9 3s9-1.3 9-3'/></svg>") 20px center / 28px 28px no-repeat,
    linear-gradient(90deg, #50fa7b, #50fa7b) 62px calc(100% - 9px) / calc(13% - 13 * 0.86px) 5px no-repeat,
    linear-gradient(#44475a, #44475a) 62px calc(100% - 9px) / calc(100% - 86px) 5px no-repeat,
    #21222c;
  background-clip: border-box;
}
body::after { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }