/* Procyon Systems override theme for PostfixAdmin 4.0.1
   - Designed to NOT break Bootstrap layout
   - Only visual overrides (colors, borders, shadows, focus)
*/

:root {
  /* Backgrounds */
  --procyon-bg: #050505;
  --procyon-surface: #0d0f12;
  --procyon-surface-2: #12151b;

  /* Text */
  --procyon-text: #e9eef6;
  --procyon-muted: #a9b4c3;

  /* Borders / lines */
  --procyon-border: rgba(255, 255, 255, 0.10);

  /* Brand accent (replace with your exact gradient stops if you want) */
  --procyon-a1: #bf2292;  /* magenta */
  --procyon-a2: #de6834;  /* orange */
  --procyon-accent: #bf2292;
  --procyon-accent-2: #de6834;

  /* Effects */
  --procyon-radius: 12px;
  --procyon-shadow: 0 10px 30px rgba(0,0,0,0.45);
  --procyon-focus: 0 0 0 .2rem rgba(124, 58, 237, 0.35);
}

/* ---- Global page feel (safe) ---- */
html, body {
  min-height: 100%;
  height: 100%;
}

body {
  margin: 0; /* ensures no white strip */
  background-color: var(--procyon-bg);
  background-image:
    radial-gradient(1100px 700px at 15% 10%, rgba(124,58,237,0.18), transparent 55%),
    radial-gradient(900px 600px at 85% 15%, rgba(6,182,212,0.14), transparent 60%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; /* covers viewport even when content is short */
  color: var(--procyon-text);
}

/* Don’t touch Bootstrap layout classes (.container/.row/etc). */

/* Links */
a {
  color: var(--procyon-accent-2);
  text-decoration: none;
}
a:hover, a:focus {
  color: var(--procyon-accent-2);
  text-decoration: underline;
}

/* ---- Common Bootstrap components ---- */
.card,
.alert,
.table,
.form-control,
.custom-select,
.dropdown-menu,
.modal-content {
  border-color: var(--procyon-border);
}

.card,
.modal-content,
.dropdown-menu {
  background: linear-gradient(180deg, var(--procyon-surface), var(--procyon-surface-2));
  border-radius: var(--procyon-radius);
  box-shadow: var(--procyon-shadow);
}

.card-header,
.modal-header {
  border-bottom-color: var(--procyon-border);
}

.card-footer,
.modal-footer {
  border-top-color: var(--procyon-border);
}

/* Center the login container */
#login.container {
  margin-top: 0 !important;      /* override inline style */
  min-height: 100vh;             /* full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center;       /* vertical centering */
}

/* Optional: tighten width for better aesthetics */
#login.container > .well {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

#login.container > h2 {
    text-align: center;
}

/* ---- Language selector (native <select>) ---- */

select,
select.form-control {
  background-color: rgba(14, 17, 22, 0.95) !important;
  color: var(--procyon-text) !important;
  border: 1px solid var(--procyon-border) !important;
  border-radius: 10px;
}

/* Dropdown options (best-effort; browser-dependent) */
select option {
  background-color: #0d0f12;
  color: var(--procyon-text);
}

/* Focus state */
select:focus {
  border-color: rgba(124,58,237,0.55) !important;
  box-shadow: var(--procyon-focus);
  outline: none;
}

.btn-block {
    width: fit-content;
}

/* Forms */
label {
  color: var(--procyon-muted);
}

.form-control,
.custom-select {
  background-color: rgba(255,255,255,0.02);
  color: var(--procyon-text);
  border-radius: 10px;
}

.form-control:focus,
.custom-select:focus {
  border-color: rgba(124,58,237,0.55);
  box-shadow: var(--procyon-focus);
  background-color: rgba(255,255,255,0.03);
  color: var(--procyon-text);
}

::placeholder {
  color: rgba(169, 180, 195, 0.65);
}

/* Tables */
.table {
  color: var(--procyon-text);
}
.table thead th {
  color: var(--procyon-muted);
  border-bottom-color: var(--procyon-border);
}
.table td, .table th {
  border-top-color: var(--procyon-border);
}

/* Alerts */
.alert {
  border-radius: var(--procyon-radius);
}
.alert-info {
  background: rgba(6,182,212,0.10);
  color: var(--procyon-text);
}
.alert-warning {
  background: rgba(245,158,11,0.10);
  color: var(--procyon-text);
}
.alert-danger {
  background: rgba(239,68,68,0.10);
  color: var(--procyon-text);
}

/* Buttons (keep Bootstrap sizing/spacing intact) */
.btn {
  border-radius: 12px;
}

.btn-primary {
  border: 0;
  background: linear-gradient(90deg, var(--procyon-a1), var(--procyon-a2));
  color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus {
  filter: brightness(1.05);
  box-shadow: var(--procyon-focus);
}

.btn-outline-primary {
  border-color: rgba(124,58,237,0.65);
  color: var(--procyon-text);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: rgba(124,58,237,0.15);
  box-shadow: var(--procyon-focus);
}

/* Badges */
.badge-primary {
  background: rgba(124,58,237,0.22);
  color: var(--procyon-text);
}

/* ---- Navbar/Header (best effort; doesn’t assume exact markup) ---- */
.navbar, .navbar-light, .navbar-dark {
  background: rgba(10, 12, 16, 0.70) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--procyon-border);
}

.navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Make dropdowns readable on dark */
.dropdown-menu {
  background-color: rgba(14, 17, 22, 0.95);
}
.dropdown-item {
  color: var(--procyon-text);
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(124,58,237,0.14);
  color: var(--procyon-text);
}

/* ---- Small “Procyon-ish” details ---- */
hr {
  border-top: 1px solid var(--procyon-border);
}

.text-muted {
  color: rgba(169, 180, 195, 0.75) !important;
}

/* Optional: selection glow */
::selection {
  background: rgba(124,58,237,0.35);
}