:root {
  --eabhr-navy: #040f33;
  --eabhr-corporate-navy: #152b58;
  --eabhr-green: #275b17;
  --eabhr-accent-blue: #24589b;
  --eabhr-light-grey: #e0e2e7;
  --eabhr-white: #ffffff;
  --eabhr-gold: #c7a84b;
  --eabhr-font: Calibri, Cambria, "Segoe UI", Arial, sans-serif;
  --eabhr-login-image: url("/eabhr-assets/login/eab-login-theme-placeholder.svg");
}

html,
body,
#app {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  font-family: var(--eabhr-font);
}

body,
.oxd-text,
.oxd-input,
.oxd-select-text,
.oxd-button,
.oxd-label,
.oxd-table,
.oxd-main-menu-item,
.oxd-userdropdown-name {
  font-family: var(--eabhr-font);
  letter-spacing: 0;
}

/* Login: preserve OrangeHRM's form and security behavior; alter layout only. */
.orangehrm-login-layout {
  display: block !important;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--eabhr-white) !important;
}

.orangehrm-login-layout-blob {
  display: block !important;
  width: 100%;
  min-height: 100vh;
  background: none !important;
}

.orangehrm-login-layout-blob::before {
  content: none !important;
}

.orangehrm-login-container {
  display: block !important;
  width: 100% !important;
  min-height: 100vh;
  margin: 0 !important;
}

.orangehrm-login-slot-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 77fr) minmax(320px, 23fr);
  width: 100% !important;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
}

.orangehrm-login-branding {
  position: relative;
  grid-column: 1;
  min-width: 0;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--eabhr-navy) !important;
  background-image:
    linear-gradient(90deg, rgba(4, 15, 51, 0.08), rgba(4, 15, 51, 0.22)),
    var(--eabhr-login-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow: none !important;
}

.orangehrm-login-branding::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--eabhr-green), var(--eabhr-gold));
}

.orangehrm-login-branding img {
  display: none !important;
}

.orangehrm-login-slot {
  position: relative;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 100vh;
  margin: 0 !important;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 2.5vw, 3rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%) !important;
  box-shadow: -18px 0 48px rgba(4, 15, 51, 0.14);
}

.orangehrm-login-logo,
.orangehrm-login-logo-mobile {
  display: none !important;
}

.orangehrm-login-title {
  margin: 0 0 1.25rem !important;
  color: var(--eabhr-navy) !important;
  font-size: 0 !important;
  line-height: 1.2;
  text-align: left !important;
}

.orangehrm-login-title::before {
  content: "EABHR Pro";
  display: block;
  color: var(--eabhr-navy);
  font-size: clamp(1.9rem, 2.25vw, 2.65rem);
  font-weight: 700;
}

.orangehrm-login-title::after {
  content: "Kenya HR & Payroll Management System";
  display: block;
  margin-top: 0.35rem;
  color: var(--eabhr-green);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.orangehrm-login-form {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 !important;
}

.orangehrm-login-form::before {
  content: "Secure HR & Payroll Access";
  display: block;
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--eabhr-gold);
  border-radius: 4px;
  color: var(--eabhr-corporate-navy);
  background: #f1f3f7;
  font-size: 0.84rem;
  font-weight: 600;
}

.orangehrm-login-action {
  justify-content: stretch !important;
  margin-top: 1.5rem !important;
}

.orangehrm-login-button {
  flex: 1;
  padding: 0.9rem 0 !important;
  border-color: var(--eabhr-corporate-navy) !important;
  background: linear-gradient(
    135deg,
    var(--eabhr-corporate-navy),
    var(--eabhr-accent-blue)
  ) !important;
  box-shadow: 0 8px 18px rgba(21, 43, 88, 0.2);
}

.orangehrm-login-button:hover,
.orangehrm-login-button:focus {
  border-color: var(--eabhr-green) !important;
  background: linear-gradient(
    135deg,
    var(--eabhr-navy),
    var(--eabhr-green)
  ) !important;
}

.orangehrm-login-forgot-header {
  color: var(--eabhr-accent-blue) !important;
}

.orangehrm-login-footer {
  width: 100%;
  max-width: 420px;
  margin: 1.5rem 0 0 !important;
}

.orangehrm-login-footer::before {
  content: "Powered by East Africa Bookkeepers Co. Ltd";
  display: block;
  color: #5e687a;
  font-size: 0.76rem;
  line-height: 1.4;
  text-align: left;
}

.orangehrm-login-footer-sm {
  display: none !important;
}

.orangehrm-copyright-wrapper {
  margin-top: 0.65rem;
  opacity: 0.58;
}

.orangehrm-copyright {
  font-size: 0.67rem !important;
  text-align: left !important;
}

/* Reusable application theme base. */
.oxd-button--main,
.oxd-button--secondary {
  border-color: var(--eabhr-corporate-navy);
  background: linear-gradient(
    135deg,
    var(--eabhr-corporate-navy),
    var(--eabhr-accent-blue)
  );
  color: var(--eabhr-white);
}

.oxd-input:focus,
.oxd-select-text--focus,
.oxd-textarea:focus {
  border-color: var(--eabhr-accent-blue);
  box-shadow: 0 0 0 1px rgba(36, 88, 155, 0.18);
}

.oxd-sidepanel,
.oxd-main-menu {
  background: var(--eabhr-navy);
}

.oxd-main-menu-item {
  color: rgba(255, 255, 255, 0.92);
}

.oxd-main-menu-item:hover,
.oxd-main-menu-item.active,
.oxd-main-menu-item--active {
  background: rgba(199, 168, 75, 0.16);
  color: var(--eabhr-white);
}

.oxd-topbar-header,
.oxd-topbar-body {
  border-bottom: 1px solid rgba(199, 168, 75, 0.28);
  background: linear-gradient(
    90deg,
    var(--eabhr-navy),
    var(--eabhr-corporate-navy)
  );
}

.orangehrm-background-container,
.oxd-layout-context {
  background: #f4f6fa;
}

@media (max-width: 1024px) {
  .orangehrm-login-slot-wrapper {
    grid-template-columns: minmax(0, 68fr) minmax(330px, 32fr);
  }
}

@media (max-width: 799px) {
  .orangehrm-login-slot-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .orangehrm-login-branding {
    flex: 0 0 auto;
    width: 100%;
    min-height: clamp(190px, 34vh, 300px);
    background-position: center !important;
  }

  .orangehrm-login-slot {
    flex: 1 1 auto;
    width: 100%;
    min-height: auto;
    padding: 2rem clamp(1.25rem, 6vw, 3rem) !important;
    box-shadow: 0 -12px 32px rgba(4, 15, 51, 0.12);
  }

  .orangehrm-login-form,
  .orangehrm-login-footer {
    max-width: 520px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .orangehrm-login-title {
    width: 100%;
    max-width: 520px;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

@media (max-width: 420px) {
  .orangehrm-login-branding {
    min-height: 170px;
  }

  .orangehrm-login-slot {
    padding: 1.5rem 1.1rem 2rem !important;
  }

  .orangehrm-login-title::before {
    font-size: 1.8rem;
  }
}

@media print {
  .oxd-sidepanel,
  .oxd-topbar-header,
  .oxd-button {
    display: none !important;
  }
}