/* JPBSerwis Identity Server — Custom Branding (Dark + Gold) */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap');

:root {
  --jpb-gold: #c9a84c;
  --jpb-gold-dark: #b0912e;
  --jpb-gold-light: #d4b85c;
  --jpb-bg-dark: #181818;
  --jpb-bg-nav: rgba(0, 0, 0, 0.35);
  --jpb-bg-card: #222222;
  --jpb-text: #eeeeee;
  --jpb-text-muted: #aaaaaa;
}

/* Typography */
h1, h2, h3, h4, h5, h6,
.navbar-brand {
  font-family: 'Jost', sans-serif;
}

body,
p, a, span, label, input, select, textarea,
.form-control, .btn, .nav-link, .card-body {
  font-family: 'Poppins', sans-serif;
}

body {
  color: var(--jpb-text);
}

/* Navbar */
.navbar {
  background: var(--jpb-bg-nav) !important;
  border-bottom: 3px solid var(--jpb-gold);
  backdrop-filter: blur(8px);
}

.navbar-brand,
.navbar-brand:hover {
  color: var(--jpb-gold) !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--jpb-gold) !important;
}

/* Logo sizing */
.navbar-brand img {
  max-height: 36px;
  margin-right: 10px;
}

/* Home page logo */
.welcome-block img,
.page-header img {
  max-width: 120px;
  height: auto;
}

/* Page headings */
.login-page .page-header h1,
.page-header h1 {
  color: var(--jpb-gold);
  font-weight: 700;
}

/* Primary buttons — gold with dark text */
.btn-primary {
  background-color: var(--jpb-gold) !important;
  border-color: var(--jpb-gold) !important;
  color: var(--jpb-bg-dark) !important;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--jpb-gold-dark) !important;
  border-color: var(--jpb-gold-dark) !important;
  color: var(--jpb-bg-dark) !important;
}

.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--jpb-gold-dark) !important;
  border-color: var(--jpb-gold-dark) !important;
  color: var(--jpb-bg-dark) !important;
}

/* Cards */
.card {
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.card-header {
  background: var(--jpb-gold) !important;
  color: var(--jpb-bg-dark) !important;
  font-weight: 600;
}

/* Links — gold */
a {
  color: var(--jpb-gold);
}

a:hover {
  color: var(--jpb-gold-light);
}

/* Form inputs focus — gold glow */
.form-control:focus {
  border-color: var(--jpb-gold);
  box-shadow: 0 0 0 0.2rem rgba(201, 168, 76, 0.35);
}

/* Outline buttons — ensure gold text/border on dark background */
.btn-outline-primary {
  color: var(--jpb-gold) !important;
  border-color: var(--jpb-gold) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--jpb-gold) !important;
  border-color: var(--jpb-gold) !important;
  color: var(--jpb-bg-dark) !important;
}

.btn-outline-secondary,
.btn-outline-light,
.btn-outline-info,
.btn-outline-warning {
  color: var(--jpb-text) !important;
  border-color: var(--jpb-gold) !important;
}

.btn-outline-secondary:hover,
.btn-outline-light:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover {
  background-color: var(--jpb-gold) !important;
  border-color: var(--jpb-gold) !important;
  color: var(--jpb-bg-dark) !important;
}

/* Navbar buttons — ensure readable text */
.navbar .btn {
  color: var(--jpb-gold) !important;
  border-color: var(--jpb-gold) !important;
}

.navbar .btn:hover {
  background-color: var(--jpb-gold) !important;
  color: var(--jpb-bg-dark) !important;
}

/* Secondary/dark buttons — light text */
.btn-secondary,
.btn-dark {
  color: var(--jpb-text) !important;
}

/* Dropdown menus */
.dropdown-menu {
  background-color: #2d2d2d;
  border-color: var(--jpb-gold);
}

.dropdown-item {
  color: var(--jpb-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--jpb-gold) !important;
  color: var(--jpb-bg-dark) !important;
}

/* Consent page */
.consent-buttons .btn-success {
  background-color: var(--jpb-gold) !important;
  border-color: var(--jpb-gold) !important;
  color: var(--jpb-bg-dark) !important;
}

/* Footer — hide theme selector and language selector */
footer {
  border-top: 2px solid var(--jpb-gold);
}

footer #SelectTheme,
footer #selectLanguageForm {
  display: none !important;
}

footer .col-md-3 {
  display: none !important;
}