:root {
  --square-hrm-navy: #1a407d;
  --square-hrm-navy-deep: #0f397f;
  --square-hrm-cyan: #2aa9e1;
  --square-hrm-cyan-soft: #e1effe;
  --square-hrm-bg: #f0f7ff;
  --square-hrm-surface: #ffffff;
  --square-hrm-ink: #0f397f;
  --square-hrm-muted: #3f6fc6;
  --square-hrm-border: rgba(26, 64, 125, 0.1);
  --square-hrm-border-strong: rgba(26, 64, 125, 0.18);
  --square-hrm-shadow-sm: 0 4px 12px rgba(26, 64, 125, 0.04);
  --square-hrm-shadow-md: 0 12px 32px rgba(26, 64, 125, 0.06);
  --square-hrm-focus: 0 0 0 3px rgba(42, 169, 225, 0.22);
  --square-hrm-gradient: linear-gradient(135deg, #1a407d 0%, #2aa9e1 100%);
  --square-hrm-accent: var(--square-hrm-navy);
  --primary: var(--square-hrm-navy);
  --primary-color: var(--square-hrm-navy);
  --brand-color: var(--square-hrm-navy);
  --btn-primary: var(--square-hrm-navy);
  --border-primary: var(--square-hrm-navy);
  --bg-color: var(--square-hrm-bg);
  --fg-color: var(--square-hrm-surface);
  --navbar-bg: rgba(255, 255, 255, 0.94);
  --text-color: var(--square-hrm-ink);
  --text-muted: var(--square-hrm-muted);
  --control-bg: #eef7ff;
  --control-bg-on-gray: #e1effe;
  --btn-default-bg: #ffffff;
  --btn-default-hover-bg: #e1effe;
  --btn-ghost-hover-bg: rgba(42, 169, 225, 0.1);
  --sidebar-select-color: rgba(42, 169, 225, 0.12);
  --highlight-color: rgba(42, 169, 225, 0.08);
  --highlight-shadow: 0 0 0 3px rgba(42, 169, 225, 0.18);
  --blue-50: #f0f7ff;
  --blue-100: #e1effe;
  --blue-200: #c3ddfd;
  --blue-300: #a4cafe;
  --blue-400: #2aa9e1;
  --blue-500: #1a407d;
  --blue-600: #0f397f;
  --blue-700: #0f397f;
  --blue-800: #0b2b62;
  --blue-900: #071f48;
  --bg-blue: rgba(42, 169, 225, 0.12);
  --bg-light-blue: rgba(42, 169, 225, 0.08);
  --bg-dark-blue: rgba(26, 64, 125, 0.18);
  --text-on-blue: var(--square-hrm-navy-deep);
  --text-on-light-blue: var(--square-hrm-navy-deep);
  --text-on-dark-blue: var(--square-hrm-navy-deep);
}

:root,
[data-theme="light"] {
  --primary: var(--square-hrm-navy) !important;
  --primary-color: var(--square-hrm-navy) !important;
  --brand-color: var(--square-hrm-navy) !important;
  --btn-primary: var(--square-hrm-navy) !important;
  --border-primary: var(--square-hrm-navy) !important;
  --bg-light-gray: var(--square-hrm-bg) !important;
  --text-color: var(--square-hrm-ink) !important;
}

[data-theme="dark"] {
  --square-hrm-bg: #071f48;
  --square-hrm-surface: #092b5a;
  --square-hrm-ink: #f0f7ff;
  --square-hrm-muted: #a4cafe;
  --square-hrm-border: rgba(164, 202, 254, 0.18);
  --primary: #2aa9e1;
  --primary-color: #2aa9e1;
  --brand-color: #2aa9e1;
  --btn-primary: #2aa9e1;
  --border-primary: #2aa9e1;
  --bg-color: #071f48;
  --fg-color: #092b5a;
  --navbar-bg: rgba(7, 31, 72, 0.94);
  --text-color: #f0f7ff;
  --control-bg: rgba(164, 202, 254, 0.12);
  --control-bg-on-gray: rgba(164, 202, 254, 0.16);
  --btn-default-bg: rgba(255, 255, 255, 0.08);
  --btn-default-hover-bg: rgba(42, 169, 225, 0.16);
  --btn-ghost-hover-bg: rgba(42, 169, 225, 0.16);
  --sidebar-select-color: rgba(42, 169, 225, 0.18);
}

html,
body,
.web-body,
.page-container {
  background: var(--square-hrm-bg) !important;
  color: var(--square-hrm-ink);
}

a,
.link-content,
.page-title .title-text,
.form-dashboard-section .section-head {
  color: var(--square-hrm-navy-deep);
}

a:hover,
.link-content:hover {
  color: var(--square-hrm-cyan);
}

.navbar,
.navbar-home,
.navbar-default {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 247, 255, 0.96) 100%) !important;
  border-bottom: 1px solid var(--square-hrm-border) !important;
  box-shadow: 0 8px 24px rgba(26, 64, 125, 0.08);
  backdrop-filter: blur(14px);
}

[data-theme="dark"] .navbar,
[data-theme="dark"] .navbar-home,
[data-theme="dark"] .navbar-default {
  background: linear-gradient(90deg, rgba(7, 31, 72, 0.98) 0%, rgba(9, 43, 90, 0.96) 100%) !important;
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .dropdown-toggle,
.navbar .navbar-text {
  color: var(--square-hrm-ink) !important;
}

.navbar .form-control,
.navbar .search-bar input,
.awesomplete input,
.form-control,
.input-with-feedback,
.ace-editor-target,
.ql-editor {
  background-color: var(--square-hrm-surface) !important;
  border-color: var(--square-hrm-border) !important;
  color: var(--square-hrm-ink) !important;
}

.form-control:focus,
.input-with-feedback:focus,
.awesomplete input:focus {
  border-color: var(--square-hrm-cyan) !important;
  box-shadow: var(--square-hrm-focus) !important;
}

.btn.btn-primary,
.btn-primary,
.btn-primary:not(:disabled):not(.disabled),
button.btn-primary {
  background: var(--square-hrm-gradient) !important;
  border-color: var(--square-hrm-navy) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(26, 64, 125, 0.16);
}

.btn.btn-primary:hover,
.btn-primary:hover,
.btn.btn-primary:focus,
.btn-primary:focus {
  background: linear-gradient(135deg, #0f397f 0%, #1a407d 100%) !important;
  border-color: var(--square-hrm-navy-deep) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(26, 64, 125, 0.2);
}

.btn.btn-primary:active,
.btn-primary:active {
  background: var(--square-hrm-navy-deep) !important;
  color: #ffffff !important;
}

.btn.btn-secondary,
.btn.btn-default,
.btn-secondary,
.btn-default {
  background-color: #ffffff !important;
  border: 1px solid var(--square-hrm-border) !important;
  color: var(--square-hrm-navy-deep) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.btn.btn-secondary:hover,
.btn.btn-default:hover,
.btn-secondary:hover,
.btn-default:hover {
  background-color: var(--square-hrm-cyan-soft) !important;
  border-color: var(--square-hrm-border-strong) !important;
  color: var(--square-hrm-navy-deep) !important;
}

.page-card,
.frappe-card,
.widget,
.dashboard-widget-box,
.number-widget-box,
.report-summary,
.form-dashboard,
.list-row-container,
.kanban-column,
.modal-content,
.dropdown-menu,
.popover {
  background-color: var(--square-hrm-surface) !important;
  border-color: var(--square-hrm-border) !important;
  box-shadow: var(--square-hrm-shadow-md);
}

.page-head,
.page-head .page-head-content,
.layout-main-section,
.layout-side-section,
.standard-sidebar,
.desk-sidebar,
.workspace-sidebar {
  background-color: transparent;
}

.standard-sidebar,
.desk-sidebar,
.layout-side-section {
  border-right-color: var(--square-hrm-border) !important;
}

.standard-sidebar-item,
.sidebar-item,
.desk-sidebar-item,
.list-sidebar .sidebar-menu a {
  color: var(--square-hrm-muted) !important;
}

.standard-sidebar-item:hover,
.sidebar-item:hover,
.desk-sidebar-item:hover,
.list-sidebar .sidebar-menu a:hover {
  background: rgba(42, 169, 225, 0.08) !important;
  color: var(--square-hrm-navy-deep) !important;
}

.standard-sidebar-item.selected,
.standard-sidebar-item.active,
.sidebar-item.selected,
.sidebar-item.active,
.desk-sidebar-item.selected,
.desk-sidebar-item.active,
.list-sidebar .sidebar-menu a.active {
  background: linear-gradient(135deg, rgba(42, 169, 225, 0.16) 0%, rgba(26, 64, 125, 0.1) 100%) !important;
  color: var(--square-hrm-navy-deep) !important;
  font-weight: 700;
}

.indicator-pill.blue,
.indicator.blue,
.badge-primary,
.progress-bar {
  background: var(--square-hrm-gradient) !important;
  color: #ffffff !important;
}

.indicator-pill.blue::before,
.indicator.blue::before {
  background-color: var(--square-hrm-cyan) !important;
}

.for-login .page-card,
.login-content .page-card,
.page-card.login-card {
  border: 1px solid var(--square-hrm-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 48px rgba(26, 64, 125, 0.1) !important;
}

.for-login .page-card::before,
.login-content .page-card::before {
  content: "";
  display: block;
  height: 4px;
  margin: -1px -1px 18px;
  border-radius: 16px 16px 0 0;
  background: var(--square-hrm-gradient);
}

.app-logo,
.navbar-home img,
.login-content img,
.page-card-head img,
.sidebar-item-icon .header-logo img {
  object-fit: contain;
}

.login-content img.app-logo,
.page-card-head img.app-logo {
  width: min(180px, 70vw);
  max-height: 64px;
}

.navbar-home img {
  max-width: 132px;
  max-height: 32px;
}

.square-hrm-web-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--square-hrm-ink);
}

.square-hrm-web-brand img {
  width: 96px;
  height: auto;
  display: inline-block;
}

.square-hrm-web-brand__suffix {
  font-size: 14px;
  letter-spacing: 0;
}

.login-content .page-card-head h4,
.page-card-head h4 {
  font-weight: 700;
}

.square-hrm-about .modal-title,
.square-hrm-about h4 {
  color: var(--square-hrm-ink);
}

.web-footer {
  display: none !important;
}