:root {
  --brand: #de2a1b;
  --brand-dark: #bd2216;
  --bs-primary: #de2a1b;
  --bs-primary-rgb: 222, 42, 27;
  --bs-link-color: #de2a1b;
  --bs-link-color-rgb: 222, 42, 27;
}

body { background: #f6f4f4; }
.min-w-0 { min-width: 0; }

.app-nav { background: #fff; border-bottom: 1px solid #e3e6ec; box-shadow: 0 1px 3px rgba(222, 42, 27, .06); }
.app-logo { height: 1.75rem; width: auto; }
.brand-pill { background: #fdeceb; color: var(--brand); font-size: .7rem; }
.app-nav .nav-link { color: #4a5160; font-weight: 500; }
.app-nav .nav-link:hover { color: var(--brand); }
.app-nav .nav-link.active { color: var(--brand); font-weight: 600; }
.auth-logo { height: 2.5rem; width: auto; }
.bni-logo { height: 2.5rem; width: auto; }
.brand-divider { width: 1px; height: 1.6rem; background: #e3e6ec; }

.btn-primary {
  --bs-btn-bg: #de2a1b; --bs-btn-border-color: #de2a1b;
  --bs-btn-hover-bg: #bd2216; --bs-btn-hover-border-color: #bd2216;
  --bs-btn-active-bg: #9e1c12; --bs-btn-active-border-color: #9e1c12;
  --bs-btn-disabled-bg: #de2a1b; --bs-btn-disabled-border-color: #de2a1b;
}
.btn-outline-primary {
  --bs-btn-color: #de2a1b; --bs-btn-border-color: #de2a1b;
  --bs-btn-hover-bg: #de2a1b; --bs-btn-hover-border-color: #de2a1b;
  --bs-btn-active-bg: #de2a1b; --bs-btn-active-border-color: #de2a1b;
}
.form-control:focus, .form-select:focus { border-color: #ee8c83; box-shadow: 0 0 0 .2rem rgba(222, 42, 27, .15); }
.card-header { background: #fff; }

.empty-state {
  background: #fff; border: 1px dashed #c5ccd6; border-radius: .5rem;
  padding: 2rem 1rem; text-align: center; color: #5b6573;
}

/* QR codes */
.qr-box { width: 112px; height: 112px; background: #fff; border: 1px solid #e3e6ec; border-radius: .4rem; padding: 2px; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.modal .qr-box { width: 200px; height: 200px; }
.qr-card .form-text { font-size: .75rem; }

.print-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5cm, 1fr)); gap: .6cm; }
.print-tile { background: #fff; border: 1px dashed #c5ccd6; border-radius: .3rem; padding: .5cm; text-align: center; break-inside: avoid; }
.qr-box.qr-print { width: 4cm; height: 4cm; margin: 0 auto .25cm; border: 0; padding: 0; }
.print-name { font-weight: 600; font-size: 11pt; }
.print-code { font-family: ui-monospace, monospace; font-size: 8pt; color: #6b7280; }

/* Profile photo */
.photo-thumb {
  width: 5rem; height: 5rem; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #f9d6d1, #fdf1ef);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand); font-weight: 700; font-size: 1.5rem;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb-sm { width: 3rem; height: 3rem; font-size: 1rem; }

/* Editor */
.editor { padding-bottom: 1rem; }
body:has(.save-bar) { padding-bottom: 4.5rem; } /* keep the page end clear of the fixed Save bar */
.preview-sticky { position: sticky; top: 1rem; }
.phone {
  position: relative; margin: 0 auto;
  width: 100%; max-width: 380px; height: min(760px, calc(100vh - 7rem)); min-height: 560px;
  border-radius: 44px; padding: 12px; background: #111322;
  box-shadow: 0 30px 60px -25px rgba(17, 19, 34, .55), inset 0 0 0 2px #2a2d44;
}
.phone iframe { width: 100%; height: 100%; border: 0; border-radius: 34px; background: #fff; display: block; }
.phone-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 110px; height: 22px; background: #111322; border-radius: 0 0 14px 14px; z-index: 1; }

.editor-toggle { display: flex; background: #e7e8f0; border-radius: .6rem; padding: .25rem; }
.editor-toggle button { flex: 1; border: 0; background: transparent; padding: .45rem; border-radius: .45rem; font-weight: 600; color: #4a5160; }
.editor-toggle button.active { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
@media (max-width: 991.98px) {
  .editor .editor-preview { display: none; }
  .editor.show-preview .editor-preview { display: block; }
  .editor.show-preview .editor-form > :not(form), .editor.show-preview #profile-form > .card { display: none; }
  .phone { height: calc(100vh - 12rem); min-height: 520px; }
}

.save-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  background: rgba(255, 255, 255, .97); border-top: 1px solid #dee2e6;
  padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom));
  box-shadow: 0 -.25rem .75rem rgba(0, 0, 0, .05);
}

@media print {
  body { background: #fff; }
  .app-nav, .d-print-none, .alert { display: none !important; }
  main.container { max-width: none; padding: 0; }
  .print-tile { border-color: #ddd; }
}

/* Member portal footer, kept at the bottom of short pages */
body.has-footer { min-height: 100vh; display: flex; flex-direction: column; }
body.has-footer > main { flex: 1 0 auto; }
.site-footer {
  background: #fff; border-top: 1px solid #e3e6ec;
  padding: .9rem 0; font-size: .85rem; color: #5b6573;
}
.footer-logo { height: 1.6rem; width: auto; }
@media print { .site-footer { display: none; } }

/* Hopper logo links to the company website */
.logo-link { display: inline-flex; line-height: 0; }