/* orbit7_theme.css */

/* Core Variablization and Resets */
:root {
  --orbit-glass-bg: rgba(255, 255, 255, 0.7);
  --orbit-glass-bg-dark: rgba(30, 41, 59, 0.7);
  --orbit-glass-border: rgba(255, 255, 255, 0.2);
  --orbit-shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --orbit-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --orbit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Typography Injection */
body {
  font-family: var(--font-stack, 'Inter', -apple-system, sans-serif) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
  font-family: var(--heading-font, var(--font-stack, 'Inter', -apple-system, sans-serif)) !important;
}

/* Sleek Navbar (Glassmorphism) */
.navbar {
  background: var(--orbit-glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--orbit-glass-border) !important;
  box-shadow: var(--orbit-shadow-soft) !important;
}

[data-theme='dark'] .navbar {
  background: var(--orbit-glass-bg-dark) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Refined Cards */
.orbit7-card,
.layout-main-section,
.widget,
.dashboard-widget-box {
  border-radius: var(--border-radius-md, 8px) !important;
  box-shadow: var(--orbit-shadow-soft) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  transition: var(--orbit-transition) !important;
}

[data-theme='dark'] .orbit7-card,
[data-theme='dark'] .layout-main-section,
[data-theme='dark'] .widget,
[data-theme='dark'] .dashboard-widget-box {
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
}

.orbit7-card:hover,
.widget:hover,
.dashboard-widget-box:hover {
  box-shadow: var(--orbit-shadow-hover) !important;
  transform: translateY(-2px);
}

/* Standard Buttons */
.btn {
  border-radius: var(--border-radius-sm, 6px) !important;
  transition: var(--orbit-transition) !important;
}

/* Primary Button — uses --btn-primary (Orbit7's actual var, set by boot.py) */
.btn-primary,
.btn.btn-primary {
  background-color: var(--btn-primary, var(--primary-color)) !important;
  border-color: var(--btn-primary, var(--primary-color)) !important;
  box-shadow: 0 4px 6px -1px rgba(var(--primary-color-rgb, 97, 0, 255), 0.2) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 12px -2px rgba(var(--primary-color-rgb, 97, 0, 255), 0.3) !important;
}

/* Secondary / Default Buttons
   Styling for .btn-secondary and .btn-default is fully managed via dynamic
   injection from boot.py. This ensures that the user's settings apply immediately. */


/* =============================================
   Text Color Override
   Consumes --text-color and --heading-color
   set by boot.py from Orbit Theme Settings.
   Guards use `var(--text-color, initial)` so
   rules are no-ops when the admin leaves the
   field blank.
   ============================================= */

body,
.form-page,
.page-body,
.orbit7-list,
.list-row,
.doctype-icon-row,
p,
label,
.control-label,
.help-box,
.small,
.text-muted,
.like-disabled-input {
  color: var(--text-color, inherit) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.ellipsis,
.sidebar-item-label,
.module-title,
.list-item--head .level-item {
  color: var(--heading-color, inherit) !important;
}

/* Dark-mode: [data-theme='dark'] block already emitted by boot.py */


/* =============================================
   Sidebar Background
   Consumes --orbit-sidebar-bg set by boot.py.
   Targets .body-sidebar (the structural wrapper)
   AND .desk-sidebar (the inner nav container).
   ============================================= */

.body-sidebar,
.desk-sidebar,
.layout-side-section {
  background-color: var(--orbit-sidebar-bg, transparent) !important;
}

[data-theme='dark'] .body-sidebar,
[data-theme='dark'] .desk-sidebar,
[data-theme='dark'] .layout-side-section {
  background-color: var(--orbit-sidebar-bg, transparent) !important;
}


/* =============================================
   Input / Form Control Background + Permanent Border
   =============================================
   WHY NOT --border-color?
   Orbit7's --border-color = var(--gray-200) = ~#e5e7eb.
   That is near-invisible on white. We define our own
   --orbit-input-border using --dark-border-color
   (= var(--gray-300) = ~#d1d5db) — visible on any bg.
   ============================================= */

/* Define the input border variable universally */
:root,
[data-theme='light'] {
  --orbit-input-border: var(--dark-border-color, #d0d5dd);
}

[data-theme='dark'] {
  --orbit-input-border: var(--gray-600, #4b5563);
}

/* ---- All standard inputs: background + permanent border ---- */
.form-control,
.input-with-feedback,
.orbit7-control input,
.orbit7-control select,
.orbit7-control textarea,
.orbit7-control .form-control {
  background-color: var(--control-bg) !important;
  color: var(--text-color, inherit) !important;
  border: 1px solid var(--orbit-input-border) !important;
}

/* ---- Attach / Attach Image: Orbit7 renders these as divs ----
   controls.scss only sets background + border-radius on .attached-file
   but NO border — so we add one permanently here. */
.orbit7-control[data-fieldtype="Attach"] .attached-file,
.orbit7-control[data-fieldtype="Attach Image"] .attached-file,
.orbit7-control .control-input .input-area,
.like-disabled-input {
  background-color: var(--control-bg) !important;
  color: var(--text-color, inherit) !important;
  border: 1px solid var(--orbit-input-border) !important;
  border-radius: var(--border-radius, 6px) !important;
}

/* ---- Quill editors ----
   .ql-editor = Snow theme (rich text, HTML fields)
   .ql-bubble = Bubble theme (Comment / Activity reply box) */
.ql-editor:not(.read-mode),
.ql-bubble .ql-editor,
.ql-container.ql-bubble {
  background-color: var(--control-bg) !important;
  color: var(--text-color, inherit) !important;
  border: 1px solid var(--orbit-input-border) !important;
  border-radius: var(--border-radius, 6px) !important;
}

/* ---- Link field wrapper ---- */
.link-field.ui-front {
  background-color: var(--control-bg) !important;
}

/* ---- Awesomeplete / Autocomplete dropdown ---- */
.awesomplete ul,
.autocomplete-results {
  background-color: var(--control-bg) !important;
  border: 1px solid var(--orbit-input-border) !important;
}

/* ---- Code editor (Ace) ---- */
.ace_editor,
.ace_editor .ace_scroller,
.ace_editor .ace_gutter {
  background-color: var(--control-bg) !important;
}

/* ---- Dark mode mirrors ----
   boot.py already emits [data-theme='dark'] { --control-bg: ...; }
   so --control-bg is automatically correct in dark mode.
   We only need to explicitly set --border-color fallback for browsers
   that haven't yet received the injected <style> block. */
[data-theme='dark'] .form-control,
[data-theme='dark'] .input-with-feedback,
[data-theme='dark'] .orbit7-control input,
[data-theme='dark'] .orbit7-control select,
[data-theme='dark'] .orbit7-control textarea,
[data-theme='dark'] .orbit7-control .form-control {
  background-color: var(--control-bg) !important;
  color: var(--text-color, inherit) !important;
  border-color: var(--orbit-input-border) !important;
}

[data-theme='dark'] .orbit7-control[data-fieldtype="Attach"] .attached-file,
[data-theme='dark'] .orbit7-control[data-fieldtype="Attach Image"] .attached-file,
[data-theme='dark'] .orbit7-control .control-input .input-area,
[data-theme='dark'] .like-disabled-input {
  background-color: var(--control-bg) !important;
  color: var(--text-color, inherit) !important;
  border-color: var(--orbit-input-border) !important;
}

[data-theme='dark'] .ql-editor:not(.read-mode),
[data-theme='dark'] .ql-bubble .ql-editor,
[data-theme='dark'] .ql-container.ql-bubble {
  background-color: var(--control-bg) !important;
  color: var(--text-color, inherit) !important;
  border-color: var(--orbit-input-border) !important;
}

[data-theme='dark'] .awesomplete ul,
[data-theme='dark'] .autocomplete-results {
  background-color: var(--control-bg) !important;
  border-color: var(--orbit-input-border) !important;
}

[data-theme='dark'] .ace_editor,
[data-theme='dark'] .ace_editor .ace_scroller,
[data-theme='dark'] .ace_editor .ace_gutter {
  background-color: var(--control-bg) !important;
}

/* =============================================
   Disabled / Readonly Inputs
   ============================================= */
.form-control:disabled,
.form-control[readonly],
.orbit7-control input:disabled,
.orbit7-control input[readonly],
.orbit7-control select:disabled,
.orbit7-control textarea:disabled,
.orbit7-control textarea[readonly],
.like-disabled-input {
  background-color: var(--disabled-control-bg, var(--gray-50)) !important;
  color: var(--text-muted, inherit) !important;
  cursor: not-allowed !important;
}

[data-theme='dark'] .form-control:disabled,
[data-theme='dark'] .form-control[readonly],
[data-theme='dark'] .orbit7-control input:disabled,
[data-theme='dark'] .orbit7-control input[readonly],
[data-theme='dark'] .orbit7-control select:disabled,
[data-theme='dark'] .orbit7-control textarea:disabled,
[data-theme='dark'] .orbit7-control textarea[readonly],
[data-theme='dark'] .like-disabled-input {
  background-color: var(--disabled-control-bg, var(--gray-800)) !important;
  color: var(--text-muted, inherit) !important;
}


/* =============================================
   Sidebar Item Styling
   ============================================= */

.standard-sidebar-item {
  border-radius: var(--border-radius-sm, 6px) !important;
  transition: var(--orbit-transition) !important;
}

.standard-sidebar-item:hover {
  background-color: rgba(var(--primary-color-rgb, 97, 0, 255), 0.05) !important;
}

.standard-sidebar-item.selected {
  background-color: rgba(var(--primary-color-rgb, 97, 0, 255), 0.1) !important;
  color: var(--primary-color) !important;
  font-weight: 600;
}

/* Workspace SVG Integrations in Sidebar */
.standard-sidebar-item img.custom-workspace-icon {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  opacity: 0.8;
  transition: var(--orbit-transition);
}

.standard-sidebar-item:hover img.custom-workspace-icon {
  opacity: 1;
  transform: scale(1.05);
}

.standard-sidebar-item.selected img.custom-workspace-icon {
  opacity: 1;
  filter: drop-shadow(0 2px 4px rgba(var(--primary-color-rgb, 97, 0, 255), 0.3));
}

/* Desktop Icon Styling — remove colored backgrounds for icons with custom logo_url */
.desktop-icon .icon-container:has(img.app-icon),
.desktop-modal .desktop-icon .icon-container {
  background-color: transparent !important;
  border-radius: var(--border-radius-md, 8px) !important;
  transition: var(--orbit-transition) !important;
}

.desktop-icon:hover .icon-container:has(img.app-icon),
.desktop-modal .desktop-icon:hover .icon-container {
  background-color: rgba(var(--primary-color-rgb, 97, 0, 255), 0.05) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(var(--primary-color-rgb, 97, 0, 255), 0.1);
}

.desktop-modal .desktop-icon .icon-container svg,
.desktop-modal .desktop-icon .icon-container use {
  /* Orbit7 default icons are usually SVG <use>. We use a CSS filter to colorize
       them to the primary color since we cannot directly change the fill of a <use> href.
       This is a generic blue/purple filter, which will be mostly correct for Orbit7. */
  filter: invert(27%) sepia(85%) saturate(3015%) hue-rotate(248deg) brightness(96%) contrast(106%) !important;
  opacity: 0.9;
}

/* Force injected SVGs to remove the default purple filter in light mode */
.sidebar-item-container.orbit7-icon-injected .sidebar-item-icon svg,
.sidebar-header .header-logo.orbit7-icon-injected svg,
.desktop-modal .desktop-icon.orbit7-icon-injected .icon-container svg {
  filter: none !important;
}

/* Invert injected SVGs in dark mode so dark lines become light */
[data-theme="dark"] .sidebar-item-container.orbit7-icon-injected .sidebar-item-icon svg,
[data-theme="dark"] .sidebar-header .header-logo.orbit7-icon-injected svg,
[data-theme="dark"] .desktop-modal .desktop-icon.orbit7-icon-injected .icon-container svg {
  filter: brightness(0) invert(1) opacity(0.8) !important;
}

/* =============================================
   Dark mode: comprehensive icon inversion
   =============================================
   Uses html[data-theme="dark"] for maximum specificity.
   Also handled by JS (orbit7_theme._handle_dark_mode_icons)
   as a bulletproof fallback for caching/timing edge cases.
   ============================================= */

/* --- Main desktop page icons (img.app-icon from logo_url) --- */
html[data-theme="dark"] .desktop-icon .icon-container img.app-icon,
html[data-theme="dark"] .desktop-icon .icon-container img {
  filter: brightness(0) invert(1) opacity(0.8) !important;
}

/* --- Sprite-based fallback icons (SVG <use> elements) --- */
html[data-theme="dark"] .desktop-icon .icon-container svg,
html[data-theme="dark"] .desktop-icon .icon-container use {
  filter: brightness(0) invert(1) opacity(0.8) !important;
}

/* --- Modal (folder child) icons --- */
html[data-theme="dark"] .desktop-modal .desktop-icon .icon-container img.app-icon,
html[data-theme="dark"] .desktop-modal .desktop-icon .icon-container img,
html[data-theme="dark"] .desktop-modal .desktop-icon .icon-container svg,
html[data-theme="dark"] .desktop-modal .desktop-icon .icon-container use {
  filter: brightness(0) invert(1) opacity(0.8) !important;
}

/* --- Folder thumbnail: child icons inside the 2x2/3x3 preview grid --- */
html[data-theme="dark"] .folder-icon .icons img.app-icon,
html[data-theme="dark"] .folder-icon .icons img,
html[data-theme="dark"] .folder-icon .icons svg,
html[data-theme="dark"] .folder-icon .icons use,
html[data-theme="dark"] .folder-icon .icons-container img.app-icon,
html[data-theme="dark"] .folder-icon .icons-container img,
html[data-theme="dark"] .folder-icon .icons-container svg,
html[data-theme="dark"] .folder-icon .icons-container use {
  filter: brightness(0) invert(1) opacity(0.8) !important;
}

/* --- Folder thumbnail: colored initial-letter fallback icons --- */
html[data-theme="dark"] .folder-icon .icons .desktop-icon-item,
html[data-theme="dark"] .folder-icon .icons-container .desktop-icon-item {
  filter: brightness(1.3) !important;
}

/* --- Override the purple filter on non-injected modal SVGs in dark mode --- */
html[data-theme="dark"] .desktop-modal .desktop-icon .icon-container svg,
html[data-theme="dark"] .desktop-modal .desktop-icon .icon-container use {
  filter: brightness(0) invert(1) opacity(0.8) !important;
}