/* Global font + background */
body,
.layout-main-section {
  font-family: "Inter", "Segoe UI", Roboto, sans-serif;
  background-color: #ffffff;
  color: #333333;
}

html,
body {
  min-height: 100%;
  background: #e7f3ff !important;
}

body > div:not(.modal-backdrop),
.page-content-wrapper,
main.container,
.page_content,
.desk-container,
.layout-main,
.layout-main-section,
.layout-main-section-wrapper,
.for-login,
.for-forgot,
.for-login-with-email-link {
  background-color: #e7f3ff !important;
}

.page-content-wrapper {
  min-height: calc(100vh - 42px) !important;
}

.web-footer {
  background-color: #e7f3ff !important;
}

/* Primary brand color */
:root {
  --brand-blue: #086bff;
  --brand-cyan: #00d9ff;
  --brand-navy: #061d4f;
  --brand-light: #eff7ff;
  --primary: #086bff !important;
  --primary-color: #086bff !important;
  --primary-light: #d9ebff !important;
  --primary-dark: #0456d6 !important;
  --fg-color: #ffffff;
  --control-bg: #f4f9ff;
  --subtle-accent: #eaf4ff;
  --sidebar-select-color: #dcecff;
  --navbar-bg: #061d4f;
}

/* Navbar / Header - FIXED */
.navbar {
  background: linear-gradient(90deg, var(--brand-navy), var(--brand-blue)) !important;
  border-bottom: 2px solid var(--brand-cyan);
}

/* FIXED: Removed problematic filter that was causing white square */
.navbar .navbar-brand img {
  max-height: 40px;
  width: auto;
  display: block;
  /* No filters applied to preserve original logo appearance */
}

/* Only apply white color to text elements, not images */
.navbar .navbar-brand {
  color: #ffffff !important;
}

.navbar .navbar-nav > li > a {
  color: #ffffff !important;
}
.navbar .navbar-nav > li > a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.navbar .btn,
.navbar .nav-link,
.navbar .navbar-home,
.navbar .navbar-brand,
.navbar .navbar-brand a,
.navbar .dropdown-toggle,
.navbar svg {
  color: #ffffff !important;
  fill: currentColor;
}

.navbar .app-logo {
  max-height: 42px !important;
  width: auto !important;
}

/* Sidebar */
.layout-side-section {
  background: var(--brand-light);
  border-right: 1px solid #c9e2ff;
}
.desk-sidebar,
.standard-sidebar,
.standard-sidebar-section,
.list-sidebar {
  background: var(--brand-light) !important;
}

.standard-sidebar-item.selected,
.standard-sidebar-item:hover,
.desk-sidebar-item.selected,
.desk-sidebar-item:hover,
.list-sidebar .list-link.active {
  background: var(--sidebar-select-color) !important;
  color: var(--brand-blue) !important;
}
.sidebar-item a {
  color: #444 !important;
  border-radius: 6px;
}
.sidebar-item a:hover,
.sidebar-item a.active {
  background: var(--brand-blue) !important;
  color: #fff !important;
}

/* Primary Buttons */
.btn-primary {
  background-color: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background-color: #0456d6 !important;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: #034bbd !important;
  border-color: #034bbd !important;
  box-shadow: 0 0 0 0.2rem rgba(8, 107, 255, 0.24) !important;
}

.btn-link,
.text-primary,
a:not(.btn) {
  color: var(--brand-blue);
}

/* Secondary Buttons */
.btn-secondary {
  background: #ffffff !important;
  border: 1px solid var(--brand-blue) !important;
  color: var(--brand-blue) !important;
}
.btn-secondary:hover {
  background: var(--brand-light) !important;
}

/* Form Controls */
.form-control {
  border-radius: 8px;
  border: 1px solid #b9d8ff;
}
.form-control:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 0.2rem rgba(8, 107, 255, 0.2);
}

.control-input,
.form-control,
.input-with-feedback,
.awesomplete > input {
  background-color: #f8fbff !important;
}

/* Cards & Sections */
.widget,
.dashboard-section,
.list-row,
.form-section {
  border-radius: 12px;
  border: 1px solid #d7eaff;
  box-shadow: 0 1px 4px rgba(8, 107, 255, 0.15);
}

.page-head,
.page-head .page-head-content,
.form-dashboard-section,
.form-tabs-list,
.modal-header,
.modal-footer {
  border-color: #d7eaff !important;
}

.page-head {
  box-shadow: 0 1px 0 #d7eaff;
}

.widget:hover,
.list-row:hover,
.form-section:hover {
  border-color: #b9d8ff;
}

.indicator-pill.blue,
.indicator-pill.blue-bg,
.indicator-pill.primary,
.badge-primary {
  background: #dcecff !important;
  color: #0456d6 !important;
}

.nav-tabs .nav-link.active,
.form-tabs-list .form-tabs .nav-item .nav-link.active {
  color: var(--brand-blue) !important;
  border-bottom-color: var(--brand-cyan) !important;
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:hover {
  background-color: var(--brand-light) !important;
  color: var(--brand-blue) !important;
}

.pagination .page-item.active .page-link,
.frappe-control .checkbox input:checked + label::before {
  background-color: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
}

.modal-content,
.popover,
.dropdown-menu {
  border-color: #d7eaff !important;
  box-shadow: 0 8px 30px rgba(6, 29, 79, 0.14) !important;
}

/* Desk Icons (Module tiles) */
.desk-sidebar .sidebar-label,
.module-section .module-item {
  color: var(--brand-blue) !important;
}
.module-item {
  border: 1px solid #d7eaff;
  border-radius: 12px;
  background: #ffffff;
  transition: transform 0.15s ease;
}
.module-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(8, 107, 255, 0.2);
}

/* Login Page */
.login-content.page-card {
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(8, 107, 255, 0.2);
}
.page-card-head {
  background: transparent !important;
  color: var(--brand-navy) !important;
  border-radius: 16px 16px 0 0;
}

.for-login,
.for-forgot,
.for-login-with-email-link {
  background: #e7f3ff !important;
}

.page-card-head .app-logo {
  width: 96px !important;
  height: 96px !important;
  max-height: 96px !important;
  object-fit: contain;
}

.page-card-head h4 {
  color: var(--brand-navy) !important;
  font-weight: 700;
}

.login-content.page-card {
  border-top: 3px solid var(--brand-cyan);
}

/* Footer */
.footer-powered {
  display: none; /* hide "Powered by Frappe/ERPNext" */
}

/* Checkbox styling */
input[type="checkbox"]:checked {
  accent-color: var(--brand-blue);
}

/* Fallback checkbox styling */
.frappe-checkbox-class:checked {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}