/*
 * ERA ERP — Color Theme
 * Primary: #1B3D3D (Dark Teal) | Accent: #D4A04C (Gold)
 * Built for Cloud Bhutan
 *
 * Only overrides colors. Does NOT change layout, spacing, or sizing.
 */

/* ==========================================================================
   LIGHT MODE (default)
   ========================================================================== */

:root,
[data-era-theme="light"] {
  --era-primary: #1B3D3D;
  --era-primary-dark: #0F2929;
  --era-primary-deep: #061818;
  --era-primary-hover: #234E4E;
  --era-primary-light: #2A6060;

  --era-accent: #D4A04C;
  --era-accent-dark: #B8853C;

  --era-text: #1B2A2A;
  --era-text-secondary: #3D5050;
  --era-text-muted: #7A8A8A;

  --era-bg: #F8F5EE;
  --era-bg-card: #FFFFFF;
  --era-border: #E8E3D7;

  --era-slate-100: #F3EFE5;
  --era-slate-200: #E8E3D7;
  --era-slate-300: #D4CCBA;

  --era-success: #1D7A4E;
  --era-danger: #C93B3B;
  --era-warning: #D4A04C;

  /* Sidebar — always dark teal regardless of mode */
  --era-sidebar-bg: #1B3D3D;
  --era-sidebar-text: #F5F1E8;
  --era-sidebar-text-muted: #A8B5B5;
  --era-sidebar-hover-bg: #234E4E;
  --era-sidebar-active-bg: #D4A04C;
  --era-sidebar-active-text: #1B3D3D;
}


/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-era-theme="dark"] {
  --era-primary: #2A6060;
  --era-primary-dark: #1B3D3D;
  --era-primary-deep: #0F2929;
  --era-primary-hover: #3A7878;
  --era-primary-light: #4A8E8E;

  --era-accent: #E6B567;
  --era-accent-dark: #D4A04C;

  --era-text: #E4E9E9;
  --era-text-secondary: #B0BFBF;
  --era-text-muted: #7A8A8A;

  --era-bg: #0F1F1F;
  --era-bg-card: #1A2E2E;
  --era-border: #2A4040;

  --era-slate-100: #142525;
  --era-slate-200: #1F3535;
  --era-slate-300: #2A4040;

  --era-success: #34D27B;
  --era-danger: #F06565;
  --era-warning: #E6B567;

  /* Sidebar STAYS dark teal even in dark mode (brand signature) */
  --era-sidebar-bg: #1B3D3D;
  --era-sidebar-text: #F5F1E8;
  --era-sidebar-text-muted: #A8B5B5;
  --era-sidebar-hover-bg: #234E4E;
  --era-sidebar-active-bg: #D4A04C;
  --era-sidebar-active-text: #1B3D3D;
}


/* ERA's theme has no "auto" mode — it uses the explicit data-era-theme
   switcher, and deliberately does not react to Frappe's data-theme-mode. */


/* ==========================================================================
   COMPONENT COLORS ONLY — no layout, spacing, or sizing changes
   ========================================================================== */

/* ===== Background ===== */
body,
.page-container,
#page-container,
.main-section {
  background-color: var(--era-bg) !important;
}


/* ===== Navbar ===== */
.navbar {
  background-color: var(--era-bg-card) !important;
  border-bottom-color: var(--era-border) !important;
}

.navbar .navbar-nav .nav-link,
.navbar .navbar-brand,
.navbar .notifications-icon,
.navbar .search-bar .search-input,
header .form-control {
  color: var(--era-text-secondary) !important;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
  color: var(--era-text) !important;
  background-color: var(--era-slate-100) !important;
}

.navbar .search-bar {
  background-color: var(--era-slate-100) !important;
  border-color: var(--era-border) !important;
}

.navbar .search-bar:focus-within {
  border-color: var(--era-primary) !important;
}

.navbar .search-bar .search-input::placeholder {
  color: var(--era-text-muted) !important;
}

.navbar .badge,
.navbar .notifications-icon .badge {
  background-color: var(--era-accent) !important;
  color: var(--era-primary-deep) !important;
}


/* ===== Sidebar (transparent — follows page bg) =====
   Earlier attempts to force a dark-teal sidebar broke text readability
   in expanded sub-menus. Sidebar now uses the normal page bg in both
   light and dark mode. Brand identity comes through via gold accents
   on active items + the dark teal --era-primary on buttons/links. */
.desk-sidebar,
.desk-sidebar .sidebar-menu,
.standard-sidebar-section,
.nested-container,
.sidebar-standard,
.layout-side-section,
.desk-sidebar .standard-sidebar-section,
.desk-sidebar .nested-container {
  background-color: transparent !important;
  background: transparent !important;
}

.desk-sidebar .sidebar-menu .sidebar-label {
  color: var(--era-text-muted) !important;
}

.desk-sidebar .sidebar-menu a {
  color: var(--era-text-secondary) !important;
}

.desk-sidebar .sidebar-menu a:hover {
  color: var(--era-primary) !important;
}

.desk-sidebar .sidebar-menu a.active,
.desk-sidebar .sidebar-menu a.selected {
  color: var(--era-primary) !important;
  border-left-color: var(--era-accent) !important;
}

.workspace-sidebar-item.selected {
  color: var(--era-primary) !important;
  border-left-color: var(--era-accent) !important;
}


/* ===== Buttons ===== */
.btn-primary,
.btn-primary-dark {
  background-color: var(--era-primary) !important;
  border-color: var(--era-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary-dark:hover {
  background-color: var(--era-primary-hover) !important;
  border-color: var(--era-primary-hover) !important;
}

.btn-primary:active,
.btn-primary-dark:active {
  background-color: var(--era-primary-dark) !important;
  border-color: var(--era-primary-dark) !important;
}

.btn-secondary,
.btn-default {
  background-color: var(--era-bg-card) !important;
  border-color: var(--era-border) !important;
  color: var(--era-text) !important;
}

.btn-secondary:hover,
.btn-default:hover {
  border-color: var(--era-slate-300) !important;
  background-color: var(--era-slate-100) !important;
  color: var(--era-primary) !important;
}


/* ===== Links ===== */
a {
  color: var(--era-primary) !important;
}

a:hover {
  color: var(--era-primary-hover) !important;
}

.navbar a, .navbar a:hover,
.btn a, .btn a:hover {
  color: inherit !important;
}


/* ===== Page Head ===== */
.page-head {
  background-color: var(--era-bg-card) !important;
  border-bottom-color: var(--era-border) !important;
}

.page-head .page-title .title-text {
  color: var(--era-text) !important;
}

.breadcrumb-container .breadcrumb a {
  color: var(--era-text-muted) !important;
}

.breadcrumb-container .breadcrumb a:hover {
  color: var(--era-primary) !important;
}


/* ===== Cards ===== */
.frappe-card,
.widget.widget-shadow,
.page-form,
.comment-box,
.timeline-item {
  background-color: var(--era-bg-card) !important;
  border-color: var(--era-border) !important;
}


/* ===== Forms ===== */
.form-section .section-head {
  color: var(--era-text) !important;
  border-bottom-color: var(--era-slate-200) !important;
}

.form-group .control-label,
.frappe-control .control-label {
  color: var(--era-text-secondary) !important;
}

/* .form-control {
  border-color: var(--era-border) !important;
  color: var(--era-text) !important;
  background-color: var(--era-bg-card) !important;
} */

.form-control:focus,
.input-with-feedback:focus {
  border-color: var(--era-primary) !important;
}


/* ===== List View ===== */
.list-row-head {
  background-color: var(--era-slate-100) !important;
  border-bottom-color: var(--era-border) !important;
}

.list-row:hover {
  background-color: rgba(47, 84, 150, 0.03) !important;
}

.list-row .level-left .list-row--col .ellipsis a {
  color: var(--era-primary) !important;
}

.list-row .level-left .list-row--col .ellipsis a:hover {
  color: var(--era-primary-hover) !important;
}


/* ===== Widgets ===== */
.widget .widget-head .widget-title {
  color: var(--era-text) !important;
}

.number-widget-box .widget-head .number {
  color: var(--era-primary) !important;
}


/* ===== Status Indicators ===== */
.indicator-pill.green,
.indicator-pill[data-indicator="green"] {
  --indicator-color: var(--era-success);
}

.indicator-pill.red,
.indicator-pill[data-indicator="red"] {
  --indicator-color: var(--era-danger);
}

.indicator-pill.blue,
.indicator-pill[data-indicator="blue"] {
  --indicator-color: var(--era-primary);
}

.indicator-pill.orange,
.indicator-pill[data-indicator="orange"] {
  --indicator-color: var(--era-warning);
}


/* ===== Dropdowns ===== */
.dropdown-menu {
  background-color: var(--era-bg-card) !important;
  border-color: var(--era-border) !important;
}

.dropdown-item {
  color: var(--era-text-secondary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--era-slate-100) !important;
  color: var(--era-primary) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--era-primary) !important;
  color: #fff !important;
}


/* ===== Awesomebar ===== */
.awesomebar-container {
  background: var(--era-bg-card) !important;
  border-color: var(--era-border) !important;
}

.awesomebar-container .awesomebar-input {
  color: var(--era-text) !important;
}


/* ===== Modals ===== */
.modal-header {
  background-color: var(--era-primary) !important;
  color: #fff !important;
  border-bottom-color: var(--era-border) !important;
}

.modal-header .modal-title {
  color: #fff !important;
}

.modal-header .btn-close,
.modal-header .close {
  color: #fff !important;
}

.modal-body {
  background-color: var(--era-bg-card) !important;
  color: var(--era-text-secondary) !important;
}

.modal-footer {
  background-color: var(--era-bg-card) !important;
  border-top-color: var(--era-border) !important;
}


/* ===== Tabs ===== */
.nav-tabs .nav-link {
  color: var(--era-text-muted) !important;
}

.nav-tabs .nav-link:hover {
  color: var(--era-primary) !important;
}

.nav-tabs .nav-link.active {
  color: var(--era-primary) !important;
  border-bottom-color: var(--era-primary) !important;
}


/* ===== Charts ===== */
.progress-chart .progress .progress-bar {
  background-color: var(--era-primary) !important;
}

.frappe-chart .y-axis text,
.frappe-chart .x-axis text {
  fill: var(--era-text-muted) !important;
}


/* ===== Comments ===== */
.comment-input-control .ql-editor:focus {
  border-color: var(--era-primary) !important;
}

.like-active-item .like-action {
  color: var(--era-danger) !important;
}


/* ===== Tooltips ===== */
.tooltip-inner {
  background-color: var(--era-primary-deep) !important;
  color: #fff !important;
}


/* ===== Pagination ===== */
.pagination .page-item .page-link {
  color: var(--era-text-secondary) !important;
}

.pagination .page-item .page-link:hover {
  background-color: var(--era-slate-100) !important;
  color: var(--era-primary) !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--era-primary) !important;
  color: #fff !important;
}

.pagination .page-item.disabled .page-link {
  color: var(--era-text-muted) !important;
}


/* ===== Selection ===== */
::selection {
  background-color: rgba(47, 84, 150, 0.15);
  color: var(--era-text);
}


/* ==========================================================================
   MY MODE  —  deep-teal navigation sidebar on an otherwise light desk
   The page body stays light (pure white). Only the Frappe v16 desk sidebar
   (.body-sidebar) is recoloured.
   ========================================================================== */

[data-era-theme="my_mode"] {
  /* Keep the desk on the light palette, with a pure-white body... */
  --era-bg: #FFFFFF;

  /* ...and recolour only the sidebar. */
  --era-mymode-sidebar-bg: #0E2E2E;
  --era-mymode-sidebar-text: #EAF0F0;
  --era-mymode-sidebar-hover: #16403F;
  --era-mymode-sidebar-active-bg: #1C4F4E;
  --era-mymode-sidebar-active-accent: #D4A04C;
}

/* ----- Whole sidebar surface → deep teal ----- */
[data-era-theme="my_mode"] .body-sidebar,
[data-era-theme="my_mode"] .body-sidebar .standard-items-sections,
[data-era-theme="my_mode"] .body-sidebar .body-sidebar-top,
[data-era-theme="my_mode"] .body-sidebar .body-sidebar-cards,
[data-era-theme="my_mode"] .body-sidebar .body-sidebar-bottom,
[data-era-theme="my_mode"] .body-sidebar .sidebar-items {
  background-color: var(--era-mymode-sidebar-bg) !important;
  background: var(--era-mymode-sidebar-bg) !important;
}

/* ----- All sidebar text → light ----- */
[data-era-theme="my_mode"] .body-sidebar,
[data-era-theme="my_mode"] .body-sidebar a,
[data-era-theme="my_mode"] .body-sidebar span,
[data-era-theme="my_mode"] .body-sidebar .item-anchor,
[data-era-theme="my_mode"] .body-sidebar .standard-sidebar-item,
[data-era-theme="my_mode"] .body-sidebar .sidebar-item-label,
[data-era-theme="my_mode"] .body-sidebar .sidebar-item-icon,
[data-era-theme="my_mode"] .body-sidebar .collapse-sidebar-link,
[data-era-theme="my_mode"] .body-sidebar .onboarding-sidebar,
[data-era-theme="my_mode"] .body-sidebar .sidebar-user-button,
[data-era-theme="my_mode"] .body-sidebar [class*="text-ink-"],
[data-era-theme="my_mode"] .body-sidebar .text-secondary,
[data-era-theme="my_mode"] .body-sidebar .text-muted {
  color: var(--era-mymode-sidebar-text) !important;
}

/* SVG icons follow the light text colour (Frappe icons use currentColor). */
[data-era-theme="my_mode"] .body-sidebar svg {
  color: var(--era-mymode-sidebar-text) !important;
}

/* ----- Hover ----- */
[data-era-theme="my_mode"] .body-sidebar .item-anchor:hover,
[data-era-theme="my_mode"] .body-sidebar .standard-sidebar-item:hover,
[data-era-theme="my_mode"] .body-sidebar .sidebar-item-container:hover .item-anchor {
  background-color: var(--era-mymode-sidebar-hover) !important;
}

/* ----- Active / selected item ----- */
[data-era-theme="my_mode"] .body-sidebar .standard-sidebar-item.selected,
[data-era-theme="my_mode"] .body-sidebar .sidebar-item-container.selected .standard-sidebar-item,
[data-era-theme="my_mode"] .body-sidebar .standard-sidebar-item.selected .item-anchor,
[data-era-theme="my_mode"] .body-sidebar .item-anchor.active,
[data-era-theme="my_mode"] .body-sidebar .item-anchor.selected {
  background-color: var(--era-mymode-sidebar-active-bg) !important;
}

[data-era-theme="my_mode"] .body-sidebar .standard-sidebar-item.selected {
  border-left: 3px solid var(--era-mymode-sidebar-active-accent) !important;
}

/* ----- Search box / inputs inside the sidebar ----- */
[data-era-theme="my_mode"] .body-sidebar input,
[data-era-theme="my_mode"] .body-sidebar .form-control,
[data-era-theme="my_mode"] .body-sidebar .search-bar {
  background-color: var(--era-mymode-sidebar-hover) !important;
  color: var(--era-mymode-sidebar-text) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-era-theme="my_mode"] .body-sidebar input::placeholder {
  color: rgba(234, 240, 240, 0.5) !important;
}


/* ==========================================================================
   DESKTOP MODULE ICON COLORS (desk home)
   Frappe v16 renders each module icon as <img class="app-icon"> inside
   <a class="desktop-icon" data-id="<Module>">. The icon images have a blue
   rounded background baked in, so we shift each module's hue with a CSS
   filter to make every module visually distinct. data-id uses the internal
   module label (Buying, Stock), not the renamed display label.
   ========================================================================== */

.desktop-icon[data-id="Framework"] img.app-icon { filter: saturate(0); }
.desktop-icon[data-id="Accounting"] img.app-icon { filter: hue-rotate(270deg) saturate(1.2); }
.desktop-icon[data-id="Assets"] img.app-icon { filter: hue-rotate(180deg) saturate(1.3); }
.desktop-icon[data-id="Buying"] img.app-icon,
.desktop-icon[data-id="Procurement"] img.app-icon { filter: hue-rotate(70deg) saturate(1.3); }
.desktop-icon[data-id="Manufacturing"] img.app-icon { filter: hue-rotate(150deg) saturate(1.3); }
.desktop-icon[data-id="Projects"] img.app-icon { filter: hue-rotate(220deg) saturate(1.4); }
.desktop-icon[data-id="Quality"] img.app-icon { filter: hue-rotate(20deg) saturate(1.2); }
.desktop-icon[data-id="Selling"] img.app-icon { filter: hue-rotate(120deg) saturate(1.4); }
.desktop-icon[data-id="Stock"] img.app-icon,
.desktop-icon[data-id="Inventory"] img.app-icon { filter: hue-rotate(200deg) saturate(1.3); }
.desktop-icon[data-id="Subcontracting"] img.app-icon { filter: hue-rotate(60deg) saturate(1.2); }
.desktop-icon[data-id="ERP Settings"] img.app-icon,
.desktop-icon[data-id="ERPNext Settings"] img.app-icon { filter: saturate(0.3) brightness(0.7); }
.desktop-icon[data-id="Organization"] img.app-icon { filter: hue-rotate(190deg) saturate(1.4); }


/* ==========================================================================
   Hide Frappe's built-in "Toggle Theme" entry — ERA's sidebar theme
   switcher (Light / Dark / My Mode) is the only theme control.
   ========================================================================== */

.dropdown-item[data-label="Toggle Theme"],
.dropdown-item[data-label="Toggle%20Theme"],
[data-label="Toggle Theme"] {
  display: none !important;
}


/* ERA brand logo in the desk-home top-left corner. */
#brand-logo {
  object-fit: contain;
}