/* 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 ---- */
:where(body:not([data-path="login"])) .form-control,
:where(body:not([data-path="login"])) .input-with-feedback,
:where(body:not([data-path="login"])) .orbit7-control input,
:where(body:not([data-path="login"])) .orbit7-control select,
:where(body:not([data-path="login"])) .orbit7-control textarea,
:where(body:not([data-path="login"])) .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'] :where(body:not([data-path="login"])) .form-control,
[data-theme='dark'] :where(body:not([data-path="login"])) .input-with-feedback,
[data-theme='dark'] :where(body:not([data-path="login"])) .orbit7-control input,
[data-theme='dark'] :where(body:not([data-path="login"])) .orbit7-control select,
[data-theme='dark'] :where(body:not([data-path="login"])) .orbit7-control textarea,
[data-theme='dark'] :where(body:not([data-path="login"])) .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:not([type='checkbox']):not([type='radio']),
.form-control[readonly]:not([type='checkbox']):not([type='radio']),
.orbit7-control input:disabled:not([type='checkbox']):not([type='radio']),
.orbit7-control input[readonly]:not([type='checkbox']):not([type='radio']),
.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:not([type='checkbox']):not([type='radio']),
[data-theme='dark'] .form-control[readonly]:not([type='checkbox']):not([type='radio']),
[data-theme='dark'] .orbit7-control input:disabled:not([type='checkbox']):not([type='radio']),
[data-theme='dark'] .orbit7-control input[readonly]:not([type='checkbox']):not([type='radio']),
[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;
}

/* Read-only / disabled checkboxes & radios: keep the native checked
   indicator visible. Just dim slightly and switch cursor. The default
   gray background-color in the rule above wiped out the checkmark on
   read-only Check fields (e.g. is_tax_applicable on Salary Detail)
   making a true value look false. */
.orbit7-control input[type='checkbox']:disabled,
.orbit7-control input[type='checkbox'][readonly],
.orbit7-control input[type='radio']:disabled,
.orbit7-control input[type='radio'][readonly],
.form-control[type='checkbox']:disabled,
.form-control[type='checkbox'][readonly],
.form-control[type='radio']:disabled,
.form-control[type='radio'][readonly] {
  cursor: not-allowed !important;
  opacity: 0.85;
}

/* =============================================
   Orbit7 Custom Checkbox Styling
   ============================================= */
input[type='checkbox'] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  border: 1px solid var(--orbit-input-border, #d0d5dd) !important;
  border-radius: 3px !important;
  background-color: var(--control-bg, #fff) !important;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-top: 0 !important;
}

/* Checked state for active, disabled, and readonly grids */
input[type='checkbox']:checked,
input[type='checkbox'].disabled-selected,
input[type='checkbox']:disabled:checked {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z' fill='%23fff'/%3E%3C/svg%3E") !important;
  background-size: 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Dim disabled/readonly checkboxes */
input[type='checkbox']:disabled,
input[type='checkbox'][readonly],
input[type='checkbox'].disabled-selected {
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}



/* =============================================
   Sidebar Item Styling — full pill rounding for
   every row (including `/desk/.../iframe/...` links).
   ============================================= */

.body-sidebar .sidebar-item-container > .standard-sidebar-item {
  border-radius: 9999px !important;
  overflow: hidden;
}

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

.body-sidebar .standard-sidebar-item.active-sidebar,
.body-sidebar .sidebar-item-container.active-sidebar,
.body-sidebar .sidebar-item-container.active-sidebar > .standard-sidebar-item {
  border-radius: 9999px !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 themed icons */
.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;
}

   /* Navbar global search trigger (Orbit Theme Settings toggle) */
.orbit7-theme-navbar-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-right: 12px;
  min-width: 280px;
  max-width: 360px;
  height: 36px;
  border: 1px solid var(--orbit-input-border, var(--border-color, #e2e8f0));
  border-radius: var(--border-radius, 6px);
  background-color: var(--control-bg, var(--gray-50, #f9fafb));
  color: var(--text-color, inherit);
  font-size: 13px;
  cursor: pointer;
  transition: var(--orbit-transition, all 0.2s ease);
}
.orbit7-theme-navbar-search-trigger:hover {
  background-color: var(--control-bg-on-gray, var(--gray-100, #f3f4f6));
  border-color: var(--gray-300, #d1d5db);
}
.orbit7-theme-navbar-search-icon {
  display: flex;
  opacity: 0.7;
}
.orbit7-theme-navbar-search-label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orbit7-theme-navbar-search-kbd {
  margin-left: 4px;
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 4px;
  background: var(--gray-200, #e5e7eb);
  color: var(--text-muted, #6b7280);
}
[data-theme="dark"] .orbit7-theme-navbar-search-kbd {
  background: var(--gray-700, #374151);
  color: var(--gray-300, #d1d5db);
}