/*
 * ERA ERP — Professional Theme
 * Primary: #2f5496 (Deep Royal Blue)
 * Built for Cloud Bhutan
 *
 * Supports: Light, Dark, Auto (system preference)
 * Hooks into Frappe's [data-theme="dark"] / [data-theme="light"]
 */

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

:root,
[data-theme="light"] {
  --era-primary: #2f5496;
  --era-primary-dark: #1B3564;
  --era-primary-deep: #122346;
  --era-primary-hover: #3A6ABF;
  --era-primary-light: #4A7FD4;

  --era-accent: #E8B84B;
  --era-accent-dark: #D4A43A;
  --era-accent-muted: #C49530;

  --era-slate-50: #F7F9FC;
  --era-slate-100: #EEF2F8;
  --era-slate-200: #DDE4EF;
  --era-slate-300: #B8C6DA;
  --era-slate-400: #94A5BE;
  --era-slate-500: #6B7B95;
  --era-slate-600: #506380;
  --era-slate-700: #3D4F6A;

  --era-text: #1A2640;
  --era-text-secondary: #3D4F6A;
  --era-text-muted: #6B7B95;

  --era-bg: #F7F9FC;
  --era-bg-card: #FFFFFF;
  --era-border: #DDE4EF;
  --era-border-light: #EEF2F8;

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

  --era-radius-sm: 6px;
  --era-radius: 8px;
  --era-radius-lg: 12px;

  --era-shadow-xs: 0 1px 2px rgba(27, 53, 100, 0.05);
  --era-shadow-sm: 0 1px 4px rgba(27, 53, 100, 0.08);
  --era-shadow: 0 4px 12px rgba(27, 53, 100, 0.08);
  --era-shadow-lg: 0 8px 24px rgba(27, 53, 100, 0.1);
  --era-shadow-xl: 0 16px 48px rgba(27, 53, 100, 0.14);

  --era-navbar-bg: transparent;
  --era-navbar-text: var(--era-text-secondary);
  --era-navbar-text-hover: var(--era-text);
  --era-navbar-search-bg: var(--era-slate-100);
  --era-navbar-search-border: var(--era-border);
  --era-navbar-shadow: none;
  --era-navbar-border: 1px solid var(--era-border);

  --era-modal-header-bg: #2f5496;
  --era-modal-header-text: #fff;

  --era-scrollbar-track: #F7F9FC;
  --era-scrollbar-thumb: #B8C6DA;
  --era-scrollbar-thumb-hover: #94A5BE;

  --era-selection-bg: rgba(47, 84, 150, 0.15);
  --era-focus-ring: rgba(47, 84, 150, 0.12);
  --era-focus-ring-strong: rgba(47, 84, 150, 0.25);

  --era-sidebar-active-bg: rgba(47, 84, 150, 0.08);
  --era-list-hover-bg: rgba(47, 84, 150, 0.03);
}


/* ==========================================================================
   DARK MODE — Frappe's [data-theme="dark"]
   ========================================================================== */

[data-theme="dark"] {
  --era-primary: #4A7FD4;
  --era-primary-dark: #3A6ABF;
  --era-primary-deep: #2f5496;
  --era-primary-hover: #6A9AE8;
  --era-primary-light: #83AEF0;

  --era-accent: #F0CA5E;
  --era-accent-dark: #E8B84B;
  --era-accent-muted: #D4A43A;

  --era-slate-50: #0F1723;
  --era-slate-100: #141D2E;
  --era-slate-200: #1A2538;
  --era-slate-300: #253348;
  --era-slate-400: #3D5068;
  --era-slate-500: #6B7F9C;
  --era-slate-600: #8D9DB5;
  --era-slate-700: #B0BFD4;

  --era-text: #E4E9F1;
  --era-text-secondary: #B0BFD4;
  --era-text-muted: #6B7F9C;

  --era-bg: #0B1120;
  --era-bg-card: #111827;
  --era-border: #1E2D42;
  --era-border-light: #1A2538;

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

  --era-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --era-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.25);
  --era-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  --era-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
  --era-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.45);

  --era-navbar-bg: #0B1120;
  --era-navbar-text: #B0BFD4;
  --era-navbar-text-hover: #E4E9F1;
  --era-navbar-search-bg: #141D2E;
  --era-navbar-search-border: #1E2D42;
  --era-navbar-shadow: none;
  --era-navbar-border: 1px solid #1E2D42;

  --era-modal-header-bg: #141D2E;
  --era-modal-header-text: #E4E9F1;

  --era-scrollbar-track: #0B1120;
  --era-scrollbar-thumb: #253348;
  --era-scrollbar-thumb-hover: #3D5068;

  --era-selection-bg: rgba(74, 127, 212, 0.2);
  --era-focus-ring: rgba(74, 127, 212, 0.15);
  --era-focus-ring-strong: rgba(74, 127, 212, 0.3);

  --era-sidebar-active-bg: rgba(74, 127, 212, 0.1);
  --era-list-hover-bg: rgba(74, 127, 212, 0.05);
}


/* ==========================================================================
   AUTO MODE — @media prefers-color-scheme for [data-theme-mode="automatic"]
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  [data-theme-mode="automatic"] {
    --era-primary: #4A7FD4;
    --era-primary-dark: #3A6ABF;
    --era-primary-deep: #2f5496;
    --era-primary-hover: #6A9AE8;
    --era-primary-light: #83AEF0;

    --era-accent: #F0CA5E;
    --era-accent-dark: #E8B84B;
    --era-accent-muted: #D4A43A;

    --era-slate-50: #0F1723;
    --era-slate-100: #141D2E;
    --era-slate-200: #1A2538;
    --era-slate-300: #253348;
    --era-slate-400: #3D5068;
    --era-slate-500: #6B7F9C;
    --era-slate-600: #8D9DB5;
    --era-slate-700: #B0BFD4;

    --era-text: #E4E9F1;
    --era-text-secondary: #B0BFD4;
    --era-text-muted: #6B7F9C;

    --era-bg: #0B1120;
    --era-bg-card: #111827;
    --era-border: #1E2D42;
    --era-border-light: #1A2538;

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

    --era-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --era-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.25);
    --era-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --era-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
    --era-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.45);

    --era-navbar-bg: #0B1120;
    --era-navbar-text: #B0BFD4;
    --era-navbar-text-hover: #E4E9F1;
    --era-navbar-search-bg: #141D2E;
    --era-navbar-search-border: #1E2D42;
    --era-navbar-shadow: none;
    --era-navbar-border: 1px solid #1E2D42;

    --era-modal-header-bg: #141D2E;
    --era-modal-header-text: #E4E9F1;

    --era-scrollbar-track: #0B1120;
    --era-scrollbar-thumb: #253348;
    --era-scrollbar-thumb-hover: #3D5068;

    --era-selection-bg: rgba(74, 127, 212, 0.2);
    --era-focus-ring: rgba(74, 127, 212, 0.15);
    --era-focus-ring-strong: rgba(74, 127, 212, 0.3);

    --era-sidebar-active-bg: rgba(74, 127, 212, 0.1);
    --era-list-hover-bg: rgba(74, 127, 212, 0.05);
  }
}


/* ==========================================================================
   COMPONENT STYLES (uses variables — adapts automatically per theme)
   ========================================================================== */

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


/* ===== NAVBAR ===== */
.navbar {
  background-color: var(--era-navbar-bg) !important;
  border-bottom: 1px solid var(--era-border) !important;
  box-shadow: var(--era-navbar-shadow) !important;
}

.navbar .navbar-brand .app-logo {
  filter: none !important;
}

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

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

.navbar .search-bar {
  background-color: var(--era-navbar-search-bg) !important;
  border: 1px solid var(--era-navbar-search-border) !important;
  border-radius: var(--era-radius) !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 .avatar-frame {
  border: 2px solid var(--era-border) !important;
}

.navbar .badge,
.navbar .notifications-icon .badge {
  background-color: var(--era-accent) !important;
  color: var(--era-primary-deep) !important;
  font-weight: 700;
  font-size: 0.68rem;
}


/* ===== SIDEBAR ===== */
.desk-sidebar,
.sidebar-menu {
  background-color: var(--era-bg-card) !important;
  border-right: 1px solid var(--era-border) !important;
}

.desk-sidebar .sidebar-menu .sidebar-label {
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 1.2px;
  color: var(--era-text-muted) !important;
  font-weight: 700;
  padding: 4px 12px;
}

.desk-sidebar .sidebar-menu a {
  color: var(--era-text-secondary) !important;
  border-radius: var(--era-radius-sm);
  transition: all 0.15s ease;
}

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

.desk-sidebar .sidebar-menu a.active,
.desk-sidebar .sidebar-menu a.selected {
  background-color: var(--era-sidebar-active-bg) !important;
  color: var(--era-primary) !important;
  font-weight: 600;
  border-left: 3px solid var(--era-primary) !important;
}

/* Workspace sidebar */
.workspace-sidebar-item.selected {
  background-color: var(--era-sidebar-active-bg) !important;
  color: var(--era-primary) !important;
  border-left: 3px solid var(--era-primary) !important;
  font-weight: 600;
}


/* ===== BUTTONS ===== */
.btn-primary,
.btn-primary-dark {
  background-color: var(--era-primary) !important;
  border: 1px solid var(--era-primary) !important;
  color: #fff !important;
  font-weight: 500;
  border-radius: var(--era-radius) !important;
  box-shadow: var(--era-shadow-xs) !important;
  transition: all 0.15s ease !important;
}

.btn-primary:hover,
.btn-primary-dark:hover {
  background-color: var(--era-primary-hover) !important;
  border-color: var(--era-primary-hover) !important;
  box-shadow: var(--era-shadow-sm) !important;
  transform: translateY(-1px);
}

.btn-primary:active,
.btn-primary-dark:active {
  background-color: var(--era-primary-dark) !important;
  border-color: var(--era-primary-dark) !important;
  transform: translateY(0);
  box-shadow: none !important;
}

.btn-primary:focus,
.btn-primary-dark:focus {
  box-shadow: 0 0 0 3px var(--era-focus-ring-strong) !important;
}

.btn-secondary,
.btn-default {
  background-color: var(--era-bg-card) !important;
  border: 1px solid var(--era-border) !important;
  color: var(--era-text) !important;
  border-radius: var(--era-radius) !important;
  font-weight: 500;
  transition: all 0.15s ease !important;
}

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

.btn-secondary:focus,
.btn-default:focus {
  box-shadow: 0 0 0 3px var(--era-focus-ring) !important;
}


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

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

/* Don't override navbar/button links */
.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: 1px solid var(--era-border) !important;
}

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

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

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


/* ===== CARDS / CONTAINERS ===== */
.frappe-card,
.widget.widget-shadow,
.page-form,
.comment-box,
.timeline-item {
  background-color: var(--era-bg-card) !important;
  border: 1px solid var(--era-border) !important;
  border-radius: var(--era-radius-lg) !important;
  box-shadow: var(--era-shadow-xs) !important;
}

.frappe-card:hover,
.widget.widget-shadow:hover {
  box-shadow: var(--era-shadow-sm) !important;
}


/* ===== FORMS ===== */
.form-section .section-head {
  color: var(--era-text) !important;
  font-weight: 600;
  font-size: 0.92rem;
  border-bottom: 2px solid var(--era-slate-200) !important;
  padding-bottom: 8px;
}

.form-group .control-label,
.frappe-control .control-label {
  color: var(--era-text-secondary) !important;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.form-control {
  border: 1px solid var(--era-border) !important;
  border-radius: var(--era-radius-sm) !important;
  color: var(--era-text) !important;
  background-color: var(--era-bg-card) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-control:focus,
.input-with-feedback:focus {
  border-color: var(--era-primary) !important;
  box-shadow: 0 0 0 3px var(--era-focus-ring) !important;
}


/* ===== LIST VIEW ===== */
.list-row-head {
  background-color: var(--era-slate-50) !important;
  border-bottom: 2px solid var(--era-border) !important;
}

.list-row:hover {
  background-color: var(--era-list-hover-bg) !important;
}

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

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


/* ===== WORKSPACE / WIDGETS ===== */
.widget .widget-head .widget-title {
  color: var(--era-text) !important;
  font-weight: 600;
}

.shortcut-widget-box {
  border: none !important;
  border-radius: var(--era-radius) !important;
  transition: all 0.15s ease;
}

.shortcut-widget-box:hover {
  box-shadow: var(--era-shadow) !important;
  transform: translateY(-1px);
}

.number-widget-box {
  border-radius: var(--era-radius-lg) !important;
  border: 1px solid var(--era-border) !important;
}

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


/* ===== 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: 1px solid var(--era-border) !important;
  border-radius: var(--era-radius) !important;
  box-shadow: var(--era-shadow-lg) !important;
  padding: 4px !important;
}

.dropdown-item {
  border-radius: var(--era-radius-sm) !important;
  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: 1px solid var(--era-border) !important;
  border-radius: var(--era-radius-lg) !important;
  box-shadow: var(--era-shadow-xl) !important;
}

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


/* ===== MODALS ===== */
.modal-content {
  border-radius: var(--era-radius-lg) !important;
  border: none !important;
  box-shadow: var(--era-shadow-xl) !important;
  overflow: hidden;
}

.modal-header {
  background-color: var(--era-modal-header-bg) !important;
  color: var(--era-modal-header-text) !important;
  border-bottom: 1px solid var(--era-border) !important;
  padding: 16px 20px !important;
}

.modal-header .modal-title {
  color: var(--era-modal-header-text) !important;
  font-weight: 600;
}

.modal-header .btn-close,
.modal-header .close {
  color: var(--era-modal-header-text) !important;
  opacity: 0.7;
}

.modal-header .btn-close:hover,
.modal-header .close:hover {
  opacity: 1;
}

.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: 1px solid var(--era-border) !important;
}


/* ===== TABS ===== */
.nav-tabs .nav-link {
  color: var(--era-text-muted) !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.15s ease;
}

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

.nav-tabs .nav-link.active {
  color: var(--era-primary) !important;
  border-bottom: 2px solid var(--era-primary) !important;
  font-weight: 600;
}


/* ===== PROGRESS / 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 / TIMELINE ===== */
.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;
  border-radius: var(--era-radius-sm);
}


/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: var(--era-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--era-scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--era-scrollbar-thumb-hover);
}


/* ===== PAGINATION ===== */
.pagination .page-item .page-link {
  border: none !important;
  background-color: transparent !important;
  color: var(--era-text-secondary) !important;
  border-radius: var(--era-radius-sm) !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;
  opacity: 0.5;
}

/* Frappe list pagination */
.list-paging-area,
.frappe-list .list-paging-area {
  border: none !important;
}

.btn-paging {
  border: none !important;
}


/* ===== SELECTION ===== */
::selection {
  background-color: var(--era-selection-bg);
  color: var(--era-text);
}