:root {
  --flat-primary: #2563eb;
  --flat-primary-dark: #1d4ed8;
  --flat-border: #d7dee8;
  --flat-muted: #64748b;
  --flat-text: #1e293b;
  --flat-surface: #ffffff;
  --flat-soft: #f4f8ff;
}

body.login-page {
  color: var(--flat-text);
  background:
    linear-gradient(180deg, #f4f8ff 0%, #e8f2ff 100%) !important;
}

.bg-auth-blue {
  background-color: #eaf3ff !important;
}

.login-box {
  width: 380px;
  max-width: calc(100% - 32px);
}

.login-logo {
  color: var(--flat-text);
  font-weight: 700;
  letter-spacing: 0;
}

.login-box-msg {
  color: var(--flat-muted);
  font-weight: 500;
}

.app-card,
.card {
  border: 1px solid var(--flat-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background-color: var(--flat-surface) !important;
}

.card-body {
  padding: 1.5rem;
}

.form-control,
.input-group-text {
  height: 42px;
  border-color: var(--flat-border);
  border-radius: 6px;
  color: var(--flat-text);
  background-color: #fff;
  box-shadow: none !important;
}

.form-control {
  border-right: 0;
}

.input-group-text {
  color: var(--flat-muted);
  border-left: 0;
}

.input-group > .form-control:not(:last-child) {
  border-radius: 6px 0 0 6px;
}

.input-group > .input-group-append > .input-group-text {
  border-radius: 0 6px 6px 0;
}

.form-control:focus {
  border-color: var(--flat-primary);
  box-shadow: none;
}

.form-control:focus + .input-group-append .input-group-text {
  border-color: var(--flat-primary);
}

.btn {
  border-radius: 6px;
  font-weight: 600;
  box-shadow: none !important;
}

.btn-primary {
  border-color: var(--flat-primary);
  background-color: var(--flat-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: var(--flat-primary-dark);
  background-color: var(--flat-primary-dark);
}

.btn-link {
  color: var(--flat-primary);
  font-weight: 500;
  text-decoration: none;
}

.btn-link:hover {
  color: var(--flat-primary-dark);
  text-decoration: underline;
}

.alert {
  border-radius: 6px;
  box-shadow: none;
}

.swal2-popup,
.toast {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.process-overlay {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background-color: rgba(15, 23, 42, 0.56);
}