/* PetroFuel360 customer access: graphite surfaces, instrument-green signals. */
:root {
  color-scheme: dark;
  --pf-bg: #0b100e;
  --pf-panel: #111915;
  --pf-card: #151f19;
  --pf-card-raised: #1a261f;
  --pf-line: #344239;
  --pf-line-soft: #28352d;
  --pf-text: #edf4ef;
  --pf-muted: #a9b8ae;
  --pf-dim: #84958a;
  --pf-green: #6fe09b;
  --pf-green-strong: #35c879;
  --pf-green-ink: #082313;
  --pf-warn: #f4cd75;
  --pf-red: #ffaaa4;
  --pf-font: "Aptos", "Segoe UI", system-ui, sans-serif;
}

html { min-height: 100%; background: var(--pf-bg); }
body {
  font-family: var(--pf-font) !important;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(53, 200, 121, .09), transparent 38rem),
    linear-gradient(145deg, #0c120f, var(--pf-bg) 68%) !important;
  color: var(--pf-text) !important;
}
button, input, textarea { font: inherit; }
a { color: var(--pf-green); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--pf-green) !important;
  outline-offset: 3px !important;
}

/* Account profile and access management */
body:has(main > header) { padding: clamp(24px, 5vw, 58px) 20px 72px !important; }
main { max-width: 1020px !important; }
main > header {
  align-items: center !important;
  margin-bottom: 30px !important;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--pf-line-soft);
}
.eyebrow { color: var(--pf-green) !important; font-size: .7rem !important; letter-spacing: .17em !important; }
main > header h1 { font-size: clamp(1.8rem, 4vw, 2.65rem) !important; line-height: 1.12; letter-spacing: -.04em !important; }
main > header p { font-size: .96rem; }
.logout {
  border: 1px solid var(--pf-line) !important; border-radius: 9px !important;
  padding: 10px 15px !important; color: var(--pf-text) !important;
  background: var(--pf-card) !important; cursor: pointer;
}
.logout:hover { border-color: var(--pf-green) !important; color: var(--pf-green) !important; }
.card {
  background: linear-gradient(150deg, rgba(23, 34, 27, .98), rgba(17, 25, 21, .98)) !important;
  border: 1px solid var(--pf-line-soft) !important; border-radius: 15px !important;
  padding: clamp(20px, 3.2vw, 30px) !important; margin: 18px 0 !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.17) !important;
}
.card-head { margin-bottom: 22px !important; }
.card h2 { margin-top: 3px; font-size: 1.24rem !important; letter-spacing: -.02em; }
.role {
  color: #aaf1c2 !important; background: rgba(53,200,121,.11) !important;
  border: 1px solid rgba(111,224,155,.28) !important; padding: 5px 10px !important;
  font-size: .72rem !important; letter-spacing: .025em;
}
.grid { gap: 18px !important; }
main label { color: #c2d0c7 !important; font-size: .84rem !important; font-weight: 650 !important; }
main input:not([type="hidden"]), main textarea {
  margin-top: 7px !important; min-height: 46px;
  color: var(--pf-text) !important; background: #0d1510 !important;
  border: 1px solid #3a4b40 !important; border-radius: 8px !important;
  padding: 11px 12px !important;
}
main textarea { min-height: 92px; }
main input::placeholder, main textarea::placeholder { color: var(--pf-dim); }
main input:focus, main textarea:focus { border-color: var(--pf-green) !important; box-shadow: 0 0 0 3px rgba(111,224,155,.14); }
.readonly { gap: 0 24px !important; }
.readonly > div { padding: 15px 0; border-bottom: 1px solid var(--pf-line-soft); }
.readonly dt { color: var(--pf-dim) !important; font-size: .74rem !important; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.readonly dd { color: var(--pf-text); font-size: .96rem; }
.actions { margin-top: 20px !important; }
main button {
  border: 1px solid var(--pf-green-strong) !important; border-radius: 8px !important;
  padding: 10px 15px !important; color: var(--pf-green-ink) !important;
  background: var(--pf-green) !important; font-weight: 750 !important;
  cursor: pointer; transition: background-color .16s ease, border-color .16s ease;
}
main button:hover { background: #8debb0 !important; border-color: #8debb0 !important; }
main button.secondary { color: #d5e5da !important; background: #202d25 !important; border-color: #465a4c !important; }
main button.secondary:hover { color: var(--pf-green) !important; border-color: var(--pf-green) !important; background: #26382c !important; }
main button.danger { color: #ffc0bb !important; background: #342020 !important; border-color: #74423e !important; }
main button.danger:hover { background: #492725 !important; border-color: var(--pf-red) !important; }
.member { border-color: var(--pf-line-soft) !important; padding: 17px 0 !important; }
.member-name { color: var(--pf-text); font-size: .96rem; }
.member-meta { color: var(--pf-muted) !important; line-height: 1.6; }
.member-role { color: #d2e0d6; }
.member-status {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin: 3px 0 0 5px; padding: 2px 8px; border: 1px solid var(--pf-line);
  border-radius: 999px; font-size: .7rem; font-weight: 700; line-height: 1.5;
}
.status-active { color: #a8efc0; border-color: #34684a; background: #14291c; }
.status-pending { color: var(--pf-warn); border-color: #6a582d; background: #2c2618; }
.status-inactive { color: #ffc0bb; border-color: #70413d; background: #301d1b; }
.member-actions { gap: 9px !important; }
.empty {
  border: 1px dashed #435449; border-radius: 9px; margin-top: 16px !important;
  padding: 18px !important; color: var(--pf-muted) !important; background: rgba(9,16,11,.34);
}
.flash, .alert {
  border-radius: 9px !important; padding: 12px 15px !important;
  font-size: .87rem !important; line-height: 1.5;
}
.flash.success, .alert-success, .alert-info { color: #a8efc0 !important; border-color: #34684a !important; background: #14291c !important; }
.flash.warning, .alert-warning { color: var(--pf-warn) !important; border-color: #6a582d !important; background: #2c2618 !important; }
.flash.error, .alert-danger { color: var(--pf-red) !important; border-color: #70413d !important; background: #301d1b !important; }

/* Shared customer sign-in and credential screens */
.brand-panel {
  flex-basis: min(43vw, 520px) !important; padding: clamp(30px, 5vw, 62px) !important;
  background: linear-gradient(155deg, #131e17, #0d1410 78%) !important;
  border-color: var(--pf-line-soft) !important;
}
.brand-panel::before { background: radial-gradient(circle, rgba(53,200,121,.15), transparent 68%) !important; }
.brand-panel::after { background: radial-gradient(circle, rgba(111,224,155,.08), transparent 68%) !important; }
.brand-logo-wrap img { height: 31px !important; }
.brand-logo-wrap span { color: var(--pf-text) !important; }
.brand-hero h2 { font-size: clamp(1.9rem, 3.5vw, 2.55rem) !important; line-height: 1.13 !important; }
.brand-hero h2 .accent { background: linear-gradient(90deg, #6fe09b, #b2edc6) !important; -webkit-text-fill-color: transparent; }
.term-badge { color: var(--pf-green) !important; border-color: rgba(111,224,155,.3) !important; background: rgba(53,200,121,.08) !important; }
.brand-hero p { color: #b4c2b8 !important; }
.brand-features { gap: 14px !important; }
.bf-icon { color: var(--pf-green) !important; background: rgba(53,200,121,.08) !important; border-color: rgba(111,224,155,.2) !important; }
.bf-text strong { color: var(--pf-text) !important; }
.bf-text span, .brand-footer { color: var(--pf-muted) !important; }
.form-panel { padding: 38px clamp(24px, 6vw, 90px) !important; }
.login-box { max-width: 430px !important; }
.login-box-header { margin-bottom: 30px !important; }
.login-box-header h1 { font-size: 1.8rem !important; letter-spacing: -.04em !important; }
.login-box-header p { color: var(--pf-muted) !important; }
.form-label { color: #c5d2c9 !important; font-size: .76rem !important; letter-spacing: .075em !important; }
.form-control {
  min-height: 48px; color: var(--pf-text) !important; background: #121b15 !important;
  border: 1px solid #3b4b40 !important; border-radius: 9px !important;
  font-family: var(--pf-font) !important; font-size: .94rem !important;
}
.form-control:focus { border-color: var(--pf-green) !important; box-shadow: 0 0 0 3px rgba(111,224,155,.14) !important; }
.form-control::placeholder { color: #829188 !important; }
.input-wrap > i, .input-icon { color: #91a398 !important; }
.input-wrap:focus-within > i { color: var(--pf-green) !important; }
.pw-toggle, .toggle-pw { color: #a9b8ae !important; }
.pw-toggle:hover, .toggle-pw:hover { color: var(--pf-green) !important; }
.remember-text, .forgot-link { color: var(--pf-muted) !important; }
.forgot-link:hover, .back-link:hover { color: var(--pf-green) !important; }
.check-box { background: #121b15 !important; border-color: #526258 !important; }
.remember-label input:checked ~ .check-box { background: var(--pf-green-strong) !important; border-color: var(--pf-green-strong) !important; }
.btn-signin, .btn-primary {
  border: 1px solid var(--pf-green-strong) !important; border-radius: 9px !important;
  color: var(--pf-green-ink) !important; background: var(--pf-green) !important;
  font-family: var(--pf-font) !important; font-weight: 750 !important;
  box-shadow: 0 7px 20px rgba(35,150,82,.17) !important;
}
.btn-signin:hover, .btn-primary:hover { background: #91e9af !important; box-shadow: 0 8px 22px rgba(35,150,82,.22) !important; }
.btn-signin:active { transform: translateY(1px) !important; }
.login-footnote { color: var(--pf-dim) !important; }
.container { max-width: 470px !important; }
.card {
  background: linear-gradient(150deg, #17221b, #111915) !important;
  border: 1px solid var(--pf-line-soft) !important; border-radius: 15px !important;
  padding: clamp(26px, 6vw, 42px) !important; box-shadow: 0 24px 70px rgba(0,0,0,.3);
}
.card-header { margin-bottom: 27px !important; }
.card-header h1 { color: var(--pf-text); font-size: 1.55rem !important; letter-spacing: -.035em; }
.card-header p { color: var(--pf-muted) !important; }
.card-icon { background: rgba(53,200,121,.09) !important; border-color: rgba(111,224,155,.24) !important; }
.card-icon i { color: var(--pf-green) !important; }
.back-link { color: var(--pf-muted) !important; }
.hint, .policy-hint { color: var(--pf-muted) !important; }
.policy-hint { background: rgba(5,12,8,.38) !important; border-color: var(--pf-line-soft) !important; }
.policy-hint strong { color: var(--pf-text) !important; }
.username-chip { color: #b1f0c5 !important; background: rgba(53,200,121,.11) !important; border-color: rgba(111,224,155,.25) !important; }
.strength-label { color: var(--pf-muted) !important; }
.match-ok { color: #8ee5aa !important; }
.match-err { color: #ffaaa4 !important; }
.strength-bar { background: var(--pf-line) !important; }
.loading-overlay { background: rgba(7,12,9,.96) !important; }
.loading-text { color: var(--pf-muted) !important; }
.spinner .ring:nth-child(1) { border-top-color: #27874e !important; }
.spinner .ring:nth-child(2) { border-top-color: #43bd70 !important; }
.spinner .ring:nth-child(3) { border-top-color: #83e5a5 !important; }
@media (max-width: 820px) {
  .brand-panel { display: none !important; }
  .form-panel { min-height: 100dvh; padding: 30px 22px !important; }
  .login-box-header { text-align: left !important; }
}
@media (max-width: 640px) {
  body:has(main > header) { padding: 22px 14px 42px !important; }
  main > header { align-items: flex-start !important; flex-direction: column; gap: 16px !important; }
  .card-head { align-items: flex-start !important; flex-wrap: wrap; }
  .grid, .readonly { grid-template-columns: 1fr !important; }
  .span-2 { grid-column: auto !important; }
  .member { align-items: flex-start !important; flex-direction: column; gap: 12px !important; }
  .member-actions { justify-content: flex-start !important; }
  .form-row { gap: 12px; flex-wrap: wrap; }
  .card { padding: 25px 21px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}