/* DBS Branding for Firezone VPN 0.7.x (Bulma-based UI)
 * Overrides default Firezone styles with DBS corporate theme.
 * Managed by Ansible — do not edit manually.
 */

/* === Font (served locally) === */
@font-face {
  font-family: "Manrope";
  font-display: swap;
  font-style: normal;
  font-weight: 200 800;
  src: url("/branding/manrope-variable.woff2") format("woff2-variations");
}

/* === CSS Variables === */
:root {
  --dbs-dark: #1C1C1C;
  --dbs-surface: #252525;
  --dbs-surface-hover: #2E2E2E;
  --dbs-border: rgba(255, 255, 255, 0.10);
  --dbs-accent: #FF6300;
  --dbs-accent-hover: #E55A00;
  --dbs-light: #F2F1F0;
  --dbs-gray: #A0A0A0;
  --dbs-text: #D0CFCE;
  --dbs-text-secondary: #9A9998;
  --dbs-input-bg: #1A1A1A;
  --dbs-input-border: #404040;
  --dbs-error: #FF4D4D;
  --dbs-success: #34C759;
  --dbs-grad-top: oklch(55% 0.09 50);
  --dbs-grad-mid: oklch(35% 0.04 50);
  --dbs-grad-bottom: oklch(20% 0.002 17);
}

/* === Global === */
html, body {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  letter-spacing: -0.005em !important;
  font-weight: 450 !important;
}

body {
  background: var(--dbs-dark) !important;
  color: var(--dbs-text) !important;
}

/* === Hero section (full page background) === */
.hero.is-fullheight,
section.hero {
  background: linear-gradient(180deg, var(--dbs-grad-top) 0%, var(--dbs-grad-mid) 40%, var(--dbs-grad-bottom) 100%) !important;
  min-height: 100vh !important;
}

.hero-body {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 16px !important;
}

/* === Login card === */
.hero-body .column.is-one-third-widescreen {
  background: var(--dbs-surface) !important;
  border: 1px solid var(--dbs-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5) !important;
  padding: 32px !important;
  max-width: 420px !important;
}

/* === Inner pages card === */
.hero-body .columns > .column:not(.is-one-third-widescreen) {
  background: var(--dbs-surface) !important;
  border: 1px solid var(--dbs-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5) !important;
  padding: 32px !important;
  max-width: 1200px !important;
}

/* === Hide Firezone logo, show DBS logo === */
.hero-body .block .has-text-centered img {
  display: none !important;
}

.hero-body .block .has-text-centered {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}

.hero-body .block .has-text-centered::before {
  content: "" !important;
  display: inline-block !important;
  width: 100px !important;
  height: 24px !important;
  background: url("/branding/logo.svg") no-repeat center / contain !important;
}

.hero-body .block .has-text-centered::after {
  content: "VPN" !important;
  color: var(--dbs-text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding-left: 12px !important;
}

/* === Title (login page) === */
.hero-body .column.is-one-third-widescreen h3.title,
.hero-body .column.is-one-third-widescreen .title {
  color: var(--dbs-light) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 8px !important;
}

/* Title (any page) */
.hero-body .title {
  color: var(--dbs-light) !important;
  font-family: "Manrope", sans-serif !important;
}

/* === Divider (hr) === */
.hero-body hr {
  background-color: var(--dbs-border) !important;
  border: none !important;
  height: 1px !important;
  margin: 20px 0 !important;
}

/* === Content text (login page) === */
.hero-body .column.is-one-third-widescreen .content p {
  color: var(--dbs-text-secondary) !important;
  font-size: 14px !important;
  text-align: center !important;
}

/* === SSO button — KEYCLOAK (primary, accented) === */
.hero-body a.button[href*="/auth/oidc"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 14px 24px !important;
  height: auto !important;
  background: var(--dbs-accent) !important;
  border: none !important;
  border-radius: 9999px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.hero-body a.button[href*="/auth/oidc"]:hover {
  background: var(--dbs-accent-hover) !important;
  color: #fff !important;
}

/* === Email button (secondary, outline) === */
.hero-body a.button[href*="/auth/identity"],
.hero-body .content a.button:not([href*="/auth/oidc"]) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 14px 24px !important;
  height: auto !important;
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 9999px !important;
  color: var(--dbs-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.hero-body a.button[href*="/auth/identity"]:hover {
  border-color: var(--dbs-accent) !important;
  color: var(--dbs-accent) !important;
  background: rgba(255, 99, 0, 0.06) !important;
}

/* === Form inputs === */
input[type="email"],
input[type="password"],
input[type="text"],
.input,
textarea,
select {
  background: var(--dbs-input-bg) !important;
  border: 2px solid var(--dbs-input-border) !important;
  border-radius: 8px !important;
  color: var(--dbs-light) !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 15px !important;
  font-weight: 450 !important;
  padding: 12px 14px !important;
  height: auto !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

input::placeholder,
.input::placeholder {
  color: #666 !important;
}

input:focus,
.input:focus {
  border-color: var(--dbs-accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 99, 0, 0.15) !important;
}

/* === Labels === */
.hero-body label,
.hero-body .label {
  color: var(--dbs-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* === Submit button === */
button[type="submit"],
input[type="submit"],
.hero-body .button.is-primary,
.hero-body button.button {
  display: block !important;
  width: 100% !important;
  background: var(--dbs-accent) !important;
  border: none !important;
  border-radius: 9999px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 24px !important;
  height: auto !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
  box-shadow: none !important;
}

button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--dbs-accent-hover) !important;
}

/* === Links === */
.hero-body a:not(.button) {
  color: var(--dbs-accent) !important;
}

.hero-body a:not(.button):hover {
  color: var(--dbs-accent-hover) !important;
}

/* === Flash messages === */
.notification.is-danger {
  background: rgba(255, 77, 77, 0.1) !important;
  border: 1px solid rgba(255, 77, 77, 0.3) !important;
  color: var(--dbs-error) !important;
  border-radius: 8px !important;
}

.notification.is-info,
.notification.is-success {
  background: rgba(52, 199, 89, 0.1) !important;
  border: 1px solid rgba(52, 199, 89, 0.3) !important;
  color: var(--dbs-success) !important;
  border-radius: 8px !important;
}

/* ============================================
   INNER PAGES (user_devices, user_account)
   ============================================ */

.section,
.section.is-main-section {
  background: transparent !important;
}

/* All text */
.is-main-section,
.is-main-section p,
.is-main-section span,
.is-main-section div,
.is-main-section li,
.is-main-section .block,
.is-main-section .level,
.is-main-section .level-left,
.is-main-section .level-right {
  color: var(--dbs-text) !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Headings */
.is-main-section h1,
.is-main-section h2,
.is-main-section h3,
.is-main-section h4,
.is-main-section .title,
.is-main-section strong {
  color: var(--dbs-light) !important;
  font-family: "Manrope", sans-serif !important;
}

.is-main-section .title.is-4 {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
}

/* Links */
.is-main-section a:not(.button) {
  color: var(--dbs-accent) !important;
}

.is-main-section a:not(.button):hover {
  color: var(--dbs-accent-hover) !important;
}

/* Buttons on inner pages */
.is-main-section a.button,
.is-main-section .button {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  color: var(--dbs-light) !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.is-main-section a.button:hover,
.is-main-section .button:hover {
  border-color: var(--dbs-accent) !important;
  color: var(--dbs-accent) !important;
  background: rgba(255, 99, 0, 0.06) !important;
}

/* Tables */
.table {
  background: transparent !important;
  color: var(--dbs-text) !important;
  border-radius: 8px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  font-size: 14px !important;
}

.table.is-bordered,
.table.is-bordered td,
.table.is-bordered th {
  border-color: var(--dbs-border) !important;
}

.table.is-striped tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03) !important;
}

.table.is-striped tbody tr:not(:nth-child(even)),
.table tbody tr {
  background: transparent !important;
}

.table.is-hoverable tbody tr:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.table th {
  color: var(--dbs-light) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--dbs-border) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.table td {
  color: var(--dbs-text) !important;
  border-color: var(--dbs-border) !important;
  line-height: 1.5 !important;
}

.table td a {
  color: var(--dbs-accent) !important;
}

.table td.code,
.table td code,
.table .code {
  color: var(--dbs-text-secondary) !important;
  font-size: 13px !important;
  font-family: "SF Mono", "Cascadia Code", "Fira Code", monospace !important;
}

/* Inner page hr */
.is-main-section hr {
  background-color: var(--dbs-border) !important;
  border: none !important;
  height: 1px !important;
}

/* ============================================
   ADMIN PAGES (sidebar layout)
   ============================================ */

/* Navbar */
.navbar,
nav.navbar {
  background: var(--dbs-dark) !important;
  border-bottom: 1px solid var(--dbs-border) !important;
}

.navbar-item,
.navbar-link {
  color: var(--dbs-text) !important;
  font-family: "Manrope", sans-serif !important;
}

.navbar-item:hover,
.navbar-link:hover {
  color: #fff !important;
  background: transparent !important;
}

.navbar-item.is-active {
  color: var(--dbs-light) !important;
}

/* Hide Firezone logo in navbar */
.navbar-item img[alt*="firezone"],
.navbar-brand img {
  display: none !important;
}

.navbar-brand .navbar-item:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.navbar-brand .navbar-item:first-child::before {
  content: "" !important;
  display: inline-block !important;
  width: 100px !important;
  height: 17px !important;
  background: url("/branding/logo.svg") no-repeat center / contain !important;
}

.navbar-brand .navbar-item:first-child::after {
  content: "VPN" !important;
  color: var(--dbs-text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding-left: 12px !important;
}

/* Sidebar */
aside,
aside.aside {
  background: var(--dbs-dark) !important;
  border-right: 1px solid var(--dbs-border) !important;
}

.aside-tools {
  background: var(--dbs-dark) !important;
  color: var(--dbs-light) !important;
  border-bottom: 1px solid var(--dbs-border) !important;
}

.menu-list a {
  color: var(--dbs-text) !important;
  font-family: "Manrope", sans-serif !important;
  border-radius: 6px !important;
}

.menu-list a:hover {
  background: var(--dbs-surface-hover) !important;
  color: var(--dbs-light) !important;
}

.menu-list a.is-active {
  background: rgba(255, 99, 0, 0.1) !important;
  color: var(--dbs-accent) !important;
}

.menu-label {
  color: var(--dbs-text-secondary) !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

.menu-list .icon {
  color: inherit !important;
}

/* Modal (Add Device, etc.) */
.modal-background {
  background: rgba(0, 0, 0, 0.7) !important;
}

.modal-card,
.modal-card-head,
.modal-card-body,
.modal-card-foot {
  background: var(--dbs-surface) !important;
  color: var(--dbs-text) !important;
  font-family: "Manrope", sans-serif !important;
}

.modal-card-head {
  border-bottom: 1px solid var(--dbs-border) !important;
}

.modal-card-head .modal-card-title {
  color: var(--dbs-light) !important;
  font-weight: 700 !important;
}

.modal-card-foot {
  border-top: 1px solid var(--dbs-border) !important;
}

/* ============================================
   MISC
   ============================================ */

*:focus {
  outline-color: var(--dbs-accent) !important;
}

::selection {
  background: rgba(255, 99, 0, 0.3) !important;
  color: #fff !important;
}

/* Bulma box/card overrides */
.box {
  background: var(--dbs-surface) !important;
  border: 1px solid var(--dbs-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  color: var(--dbs-text) !important;
}

/* Tags */
.tag {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--dbs-text) !important;
}

/* Progress bars */
.progress {
  background: rgba(255, 255, 255, 0.08) !important;
}

.progress::-webkit-progress-value {
  background: var(--dbs-accent) !important;
}

/* Responsive */
@media (max-width: 480px) {
  .hero-body .column.is-one-third-widescreen {
    padding: 24px 20px !important;
  }
}