/* eVote CMS — gov.il / marketing design language overlay */

:root {
  --gov-primary: #003e80;
  --gov-primary-dark: #002d5c;
  --gov-action: #0061a8;
  --gov-action-hover: #004d87;
  --gov-surface: #ffffff;
  --gov-surface-muted: #f3f4f6;
  --gov-surface-alt: #e8eef4;
  --gov-text: #111827;
  --gov-text-muted: #374151;
  --gov-text-subtle: #6b7280;
  --gov-border: #d1d5db;
  --gov-border-light: #e5e7eb;
  --gov-success: #16a34a;
  --gov-success-hover: #15803d;
  --gov-focus: #0061a8;
  --gov-radius-sm: 4px;
  --gov-radius-md: 8px;
  --gov-radius-lg: 12px;
  --gov-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --gov-shadow-md: 0 2px 8px rgba(0, 62, 128, 0.08);
  --gov-shadow-lg: 0 4px 16px rgba(0, 62, 128, 0.1);
  --gov-font: 'Heebo', 'Inter', 'Arial', sans-serif;
}

/* Top accent strip */
body::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--gov-primary) 0%, var(--gov-action) 100%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
}

html, body {
  font-family: var(--gov-font) !important;
  color: var(--gov-text);
  background: var(--gov-surface-muted) !important;
  -webkit-font-smoothing: antialiased;
}

body {
  padding-top: 0;
}

h1, h2, h3, h4, h5,
.login-form, .register-form,
.menu, .toolbar, button, input, select, textarea {
  font-family: var(--gov-font) !important;
}

a { color: var(--gov-action); }
a:hover { color: var(--gov-action-hover); }

/* ——— Auth header ——— */
header .logo {
  background-color: var(--gov-surface) !important;
  padding: 18px 0 14px !important;
  border-bottom: 1px solid var(--gov-border-light);
}

header .language {
  background: var(--gov-primary) !important;
  color: #fff !important;
}

header .language .language-switcher {
  font-family: var(--gov-font) !important;
  font-weight: 500 !important;
}

header .language .language-switcher a,
header .language .language-switcher span {
  color: #fff !important;
}

header .language .language-switcher a:hover,
header .language .language-switcher span:hover,
header .language .language-switcher span.active {
  color: #fff !important;
  opacity: 0.85;
  text-decoration: underline;
}

/* ——— Login / register cards ——— */
.login-form,
.register-form {
  background: var(--gov-surface) !important;
  border: 1px solid var(--gov-border) !important;
  border-radius: var(--gov-radius-lg) !important;
  box-shadow: var(--gov-shadow-md) !important;
  padding-top: 20px !important;
}

.login-form .diamond,
.register-form .diamond {
  display: none !important;
}

.login-form .line,
.register-form .line,
.register-form .register-form-content {
  border-color: var(--gov-border-light) !important;
}

.register-form .title {
  color: var(--gov-primary) !important;
  font-family: var(--gov-font) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.login-form .login-form-content .input input,
.register-form .register-form-content .input input,
.login-form .form-input,
input.form-input {
  background: var(--gov-surface) !important;
  border: 1px solid var(--gov-border) !important;
  border-radius: var(--gov-radius-sm) !important;
  color: var(--gov-text) !important;
  font-family: var(--gov-font) !important;
}

.login-form .login-form-content .input input:focus,
.register-form .register-form-content .input input:focus {
  border-color: var(--gov-focus) !important;
  outline: 2px solid rgba(0, 97, 168, 0.2);
  outline-offset: 0;
}

.register-form .register-form-content .input .text,
.login-form .login-form-content .input .forgot,
.login-form .login-form-content .input .forgot a,
.register-form .register-form-content .input.country .select .default,
.register-form .register-form-content .input.country .select ul li,
.register-form .register-form-content .terms,
.register-form .login,
.login-form .signup,
.login-form .no-account,
.login-form .remember_me-submit .remember_me,
.turnstile-label {
  color: var(--gov-text-muted) !important;
}

.register-form .register-form-content .input.country .select .default,
.register-form .register-form-content .input.country .select ul {
  background: var(--gov-surface) !important;
  border: 1px solid var(--gov-border);
  border-radius: var(--gov-radius-sm);
}

.register-form .register-form-content .input.country .select ul li:hover {
  background: var(--gov-action) !important;
  color: #fff !important;
}

.register-form .login span:nth-of-type(2),
.login-form .no-account a,
.login-form .signup span {
  color: var(--gov-action) !important;
  font-weight: 600 !important;
}

/* Primary CTAs — green like marketing */
.login-form .remember_me-submit .submit input,
.login-form .submit-renew input,
.login-form .submit input,
.register-form .register-form-content .submit input,
.register-form .register-form-content .submit input.active {
  background: var(--gov-success) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--gov-radius-sm) !important;
  text-transform: none !important;
  font-family: var(--gov-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: var(--gov-shadow-sm);
}

.login-form .remember_me-submit .submit input:hover,
.register-form .register-form-content .submit input.active:hover {
  background: var(--gov-success-hover) !important;
}

.register-form .register-form-content .submit input:disabled,
.register-form .register-form-content .submit input:not(.active) {
  background: var(--gov-border) !important;
  color: var(--gov-text-subtle) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

.hasErrors {
  background: rgba(220, 38, 38, 0.12) !important;
  border-color: #dc2626 !important;
}

/* ——— App chrome / toolbar ——— */
.menu {
  background-color: var(--gov-primary) !important;
  color: #fff !important;
  font-family: var(--gov-font) !important;
  font-weight: 500 !important;
}

.more-options:hover ul,
.more-options:hover {
  background-color: var(--gov-surface-alt) !important;
  color: var(--gov-primary) !important;
}

.more-options ul li {
  border-bottom-color: var(--gov-border) !important;
}

.menu .more-options li:hover {
  background-color: var(--gov-primary-dark) !important;
  color: #fff !important;
}

.language .more-options li:hover,
.dash-header .more-options:hover {
  background-color: var(--gov-action) !important;
  color: #fff !important;
}

/* Common dashboard blues → gov tokens */
.dash-header,
.toolbar,
.subheader,
.side-menu,
.panel-heading {
  background-color: var(--gov-primary) !important;
}

/* Soft surfaces */
.reg-container {
  background-color: var(--gov-surface-muted) !important;
}
.reg-label {
  background-color: var(--gov-surface-alt) !important;
  border-color: var(--gov-border) !important;
}
.reg-title {
  color: var(--gov-primary) !important;
}

/* Buttons / links in app */
.btn-primary,
button.mat-primary,
.mat-raised-button.mat-primary {
  background-color: var(--gov-success) !important;
  color: #fff !important;
}

/* Focus ring */
input:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gov-focus);
  outline-offset: 2px;
}

/* Broad remaps for leftover legacy blues in compiled component styles */
[style*="#4a82a8"],
[style*="#4982a8"],
[style*="#005582"] {
  /* inline styles left alone; class overrides below cover most UI */
}

.username-text,
.start-here-text,
.content .title,
.modal-body,
.mat-tab-label,
.mat-button,
.mat-icon-button {
  font-family: var(--gov-font) !important;
}

/* Soft page chrome */
app-root,
.dashboard,
.activities,
.settings {
  background: var(--gov-surface-muted);
}

/* Cards / tables in app */
.mat-card,
.card,
.panel,
.box {
  border-radius: var(--gov-radius-md);
  box-shadow: var(--gov-shadow-sm);
  border-color: var(--gov-border-light);
}

/* Hide obsolete diamond ornaments if present in DOM */
.diamond {
  display: none !important;
}