/* Praetorian Aeronautics — Self Service Password theme
 * Derived from the Praetorian GTK 4 / libadwaita palette (monochrome, white accent, red errors).
 * Install:  /usr/share/self-service-password/htdocs/css/custom.css
 * Enable:   $custom_css = "css/custom.css";   (in /etc/self-service-password/config.inc.local.php)
 */

/* ---- palette (mirrors gtk4.css named colours) ---- */
:root {
  --pa-accent: #ffffff;
  --pa-accent-fg: #000000;
  --pa-accent-hover: #dcdcdc;

  --pa-window-bg: #0d0d0d;
  --pa-window-fg: #f2f2f2;
  --pa-view-bg: #050505;
  --pa-header-bg: #000000;
  --pa-header-border: rgba(255, 255, 255, 0.14);
  --pa-card-bg: #141414;
  --pa-card-border: rgba(255, 255, 255, 0.10);
  --pa-popover-bg: #111111;
  --pa-muted: rgba(242, 242, 242, 0.62);
  --pa-border: rgba(255, 255, 255, 0.12);
  --pa-focus: rgba(255, 255, 255, 0.6);

  --pa-warning: #d9d9d9;
  --pa-error: #ff6b6b;
  --pa-error-bg: #c01c28;
  --pa-error-fg: #ffffff;

  --pa-radius: 4px;
  --pa-font: "Inter", "Ubuntu", "Cantarell", system-ui, sans-serif;

  /* Bootstrap 5 variables, so stock components pick up the palette */
  --bs-body-bg: var(--pa-window-bg);
  --bs-body-color: var(--pa-window-fg);
  --bs-body-font-family: var(--pa-font);
  --bs-border-color: var(--pa-border);
  --bs-border-radius: var(--pa-radius);
  --bs-link-color: var(--pa-accent);
  --bs-link-color-rgb: 255, 255, 255;
  --bs-link-hover-color: var(--pa-accent-hover);
  --bs-link-hover-color-rgb: 220, 220, 220;
  --bs-secondary-color: var(--pa-muted);
  --bs-tertiary-bg: var(--pa-card-bg);
  --bs-emphasis-color: #ffffff;
  color-scheme: dark;
}

/* ---- page ---- */
html, body {
  background-color: var(--pa-window-bg);
  color: var(--pa-window-fg);
  font-family: var(--pa-font);
}

/* Artwork: faint flight-path horizon + fine grid, all in the monochrome palette */
body {
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 70%),
    linear-gradient(180deg, transparent 62%, rgba(255, 255, 255, 0.035) 62.1%, transparent 62.4%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  background-attachment: fixed;
}

h1, h2, h3, h4, .card-title, .panel-title {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 1px;
}

p, .text-muted, .form-text, .help-block, small { color: var(--pa-muted) !important; }

a, .btn-link { color: var(--pa-accent); text-underline-offset: 3px; }
a:hover, .btn-link:hover { color: var(--pa-accent-hover); }

/* ---- header / menu (headerbar) ---- */
.navbar, .navbar-default, header, #header {
  background-color: var(--pa-header-bg) !important;
  border: 0;
  border-bottom: 1px solid var(--pa-header-border);
  border-radius: 0;
}
.navbar .navbar-brand, .navbar-default .navbar-brand {
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: 1px;
}
.navbar .nav-link, .navbar-default .navbar-nav > li > a {
  color: var(--pa-muted) !important;
  border-radius: var(--pa-radius);
}
.navbar .nav-link:hover, .navbar-default .navbar-nav > li > a:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.10);
}
.navbar .nav-link.active, .navbar .active > .nav-link,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover {
  background-color: var(--pa-accent) !important;
  color: var(--pa-accent-fg) !important;
}
.navbar-toggler { border-color: var(--pa-border); }
.navbar-toggler-icon { filter: invert(1); }

/* Logo: SSP ships a light-background logo; keep yours white-on-transparent */
#logo, .logo, img[alt="logo" i] { max-height: 64px; }

/* ---- cards / panels ---- */
.card, .panel, .panel-default, .well, .jumbotron {
  background-color: var(--pa-card-bg);
  color: var(--pa-window-fg);
  border: 0;
  border-radius: var(--pa-radius);
  box-shadow: 0 0 0 1px var(--pa-card-border), 0 12px 32px rgba(0, 0, 0, 0.55);
}
.card-header, .panel-heading, .panel-default > .panel-heading {
  background-color: var(--pa-header-bg);
  color: #ffffff;
  border-bottom: 1px solid var(--pa-header-border);
  border-radius: var(--pa-radius) var(--pa-radius) 0 0;
}
.card-footer, .panel-footer {
  background-color: var(--pa-view-bg);
  border-top: 1px solid var(--pa-border);
}

/* ---- form fields (entries) ---- */
.form-control, .form-select, input[type="text"], input[type="password"], input[type="email"], select, textarea {
  background-color: var(--pa-view-bg);
  color: var(--pa-window-fg);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
}
.form-control::placeholder { color: rgba(242, 242, 242, 0.38); }
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  background-color: var(--pa-view-bg);
  color: #ffffff;
  border-color: var(--pa-focus);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
  outline: none;
}
.input-group-text, .input-group-addon {
  background-color: var(--pa-card-bg);
  color: var(--pa-muted);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
}
.form-label, label { color: var(--pa-window-fg); font-weight: 500; }

.form-check-input {
  background-color: var(--pa-view-bg);
  border-color: var(--pa-border);
}
.form-check-input:checked {
  background-color: var(--pa-accent);
  border-color: var(--pa-accent);
  filter: invert(0);
}
.form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e");
}

/* ---- buttons: white primary with black text ---- */
.btn { border-radius: var(--pa-radius); font-weight: 600; letter-spacing: 0.3px; }

.btn-primary, .btn-success, .btn-info, button[type="submit"].btn {
  background-color: var(--pa-accent) !important;
  border-color: var(--pa-accent) !important;
  color: var(--pa-accent-fg) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover, button[type="submit"].btn:hover,
.btn-primary:focus, .btn-success:focus, .btn-info:focus {
  background-color: var(--pa-accent-hover) !important;
  border-color: var(--pa-accent-hover) !important;
  color: var(--pa-accent-fg) !important;
}
.btn-default, .btn-secondary, .btn-light, .btn-outline-secondary {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border-color: var(--pa-border) !important;
  color: var(--pa-window-fg) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover {
  background-color: rgba(255, 255, 255, 0.16) !important;
}
.btn-danger {
  background-color: var(--pa-error-bg) !important;
  border-color: var(--pa-error-bg) !important;
  color: var(--pa-error-fg) !important;
}
.btn:focus-visible, a:focus-visible, *:focus-visible {
  outline: 2px solid var(--pa-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---- alerts (status colours: monochrome except errors) ---- */
.alert {
  border-radius: var(--pa-radius);
  border: 1px solid var(--pa-border);
  background-color: var(--pa-popover-bg);
  color: var(--pa-window-fg);
}
.alert-success {
  background-color: rgba(255, 255, 255, 0.92);
  border-color: #ffffff;
  color: #000000;
}
.alert-info {
  background-color: var(--pa-card-bg);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--pa-window-fg);
}
.alert-warning {
  background-color: var(--pa-warning);
  border-color: var(--pa-warning);
  color: #000000;
}
.alert-danger, .alert-error {
  background-color: var(--pa-error-bg);
  border-color: var(--pa-error-bg);
  color: var(--pa-error-fg);
}
.alert a, .alert .alert-link { color: inherit; text-decoration: underline; }
.text-danger, .has-error .help-block, .invalid-feedback { color: var(--pa-error) !important; }
.is-invalid, .has-error .form-control { border-color: var(--pa-error) !important; }
.text-success { color: #ffffff !important; }
.text-warning { color: var(--pa-warning) !important; }

/* Password policy checklist & strength meter */
.ppolicy, #ppolicy, .policy { color: var(--pa-muted); }
.progress { background-color: var(--pa-view-bg); border-radius: var(--pa-radius); box-shadow: inset 0 0 0 1px var(--pa-border); }
.progress-bar { background-color: var(--pa-accent); color: var(--pa-accent-fg); }
.progress-bar.bg-danger, .progress-bar-danger { background-color: var(--pa-error-bg); color: #fff; }
.progress-bar.bg-warning, .progress-bar-warning { background-color: var(--pa-warning); color: #000; }

/* ---- dropdowns / popovers (language picker) ---- */
.dropdown-menu {
  background-color: var(--pa-popover-bg);
  border: 0;
  border-radius: var(--pa-radius);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 18px rgba(0, 0, 0, 0.6);
}
.dropdown-item, .dropdown-menu > li > a { color: var(--pa-window-fg); }
.dropdown-item:hover, .dropdown-menu > li > a:hover {
  background-color: rgba(255, 255, 255, 0.92);
  color: #000000;
}

/* ---- selection ---- */
::selection { background-color: rgba(255, 255, 255, 0.85); color: #000000; }

/* ---- captcha image: keep legible on dark ---- */
img[src*="captcha"], .captcha img {
  background: #ffffff;
  border-radius: var(--pa-radius);
  padding: 4px;
}

/* ---- footer ---- */
footer, .footer, #footer {
  background: transparent;
  color: var(--pa-muted);
  border-top: 1px solid var(--pa-border);
}

/* ---- tables (e.g. SSH key / questions pages) ---- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--pa-window-fg);
  --bs-table-border-color: var(--pa-border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.08);
}