:root {
  --ss-primary: #4e73df;
  --ss-primary-dark: color-mix(in srgb, var(--ss-primary) 86%, #000);
  --ss-secondary: #858796;
  --ss-success: #1cc88a;
  --ss-light: #f8f9fc;
  --ss-dark: #5a5c69;
  --ss-white: #ffffff;
  --ss-text-gray: #6e707e;
  --ss-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ss-font-size-base: 14px;
  --ss-sidebar-width: 220px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--ss-font);
  font-size: var(--ss-font-size-base);
  line-height: 1.42857143;
  background-color: var(--ss-light);
  color: var(--ss-text-gray);
}

button,
input,
select,
textarea {
  font: inherit;
}

a { color: var(--ss-primary); text-decoration: none; }
a:hover { color: var(--ss-primary-dark); }

.btn-primary {
  --bs-btn-bg: var(--ss-primary);
  --bs-btn-border-color: var(--ss-primary);
  --bs-btn-hover-bg: var(--ss-primary-dark);
  --bs-btn-hover-border-color: var(--ss-primary-dark);
  --bs-btn-active-bg: var(--ss-primary-dark);
  --bs-btn-active-border-color: var(--ss-primary-dark);
}

/* ===== LOGIN PAGE ===== */
.login-page {
  background-color: var(--ss-light);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.login-wrapper { width: 100%; max-width: 400px; }

.login-card {
  background: #fff;
  border: 1px solid #e3e6f0;
  border-radius: 0.5rem;
  padding: 2rem;
}

.login-logo-img { max-width: 170px; height: auto; }

.btn-toggle-pass {
  position: absolute;
  top: 50%; right: 0.75rem;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--ss-secondary);
  cursor: pointer;
  padding: 0.25rem;
  font-size: 1.1rem;
  z-index: 5;
}
.btn-toggle-pass:hover { color: var(--ss-primary); }

.form-control:focus, .form-select:focus {
  border-color: var(--ss-primary);
  box-shadow: 0 0 0 0.14rem color-mix(in srgb, var(--ss-primary) 18%, transparent);
}

@media (max-width: 768px) {
  .login-card { padding: 1.5rem; }
}