/* Branding (docs/branding.md): a site's or group's own logo, name and accent colour. Identical in HPMS and VPMS.
   The accent colour itself arrives as theme tokens in a small <style id="brand-tokens"> block (light, dark and print). */

/* ---- top bar: logo on a small white panel (so any artwork shows on the navy bar in light and dark), name shortened */
.topbar { border-bottom-color: var(--brand-stripe, var(--bs-gold)); }
.brand.brand-custom { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; max-width: min(30rem, 55vw); }
.brand-logo { display: inline-flex; align-items: center; flex: none; background: #fff; border-radius: 6px; padding: 3px 6px; line-height: 0; }
.brand-logo img { display: block; height: 30px; width: auto; max-width: 150px; object-fit: contain; }
.brand.brand-custom .brand-name { font-weight: 500; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 800px) {
  .brand.brand-custom { max-width: calc(100vw - 9.5rem); }
  .brand-logo img { height: 26px; max-width: 96px; }
}
@media (max-width: 420px) {
  .brand.brand-custom .brand-name { font-size: 1rem; }
}

/* ---- footer: the site's name, then "Powered by Blueshade" kept small */
.site-footer .powered { font-size: .75rem; opacity: .9; }

/* ---- sign-in page once a branded Site ID is known */
.login-brand .login-logo { display: block; max-width: min(300px, 100%); max-height: 160px; width: auto; height: auto; background: #fff;
  border-radius: 10px; padding: .6rem .9rem; box-shadow: var(--bs-shadow); }
.login-brand .login-brand-name { font-size: 2rem; line-height: 1.2; color: var(--bs-text); margin: .8rem 0 .3rem; overflow-wrap: anywhere; }
.login-brand .powered { font-size: .8rem; color: var(--muted); margin-top: .6rem; }
@media (max-width: 800px) { .login-brand .login-brand-name { font-size: 1.5rem; } .login-brand .login-logo { max-height: 110px; } }

/* ---- printouts: the logo above the name on bills, invoices and reports */
.hotel-logo { display: block; max-height: 64px; max-width: 220px; width: auto; height: auto; margin-bottom: .4rem; }
@media print { .hotel-logo { max-height: 18mm; max-width: 60mm; } }

/* ---- Settings > Branding */
.brand-split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 900px) { .brand-split { grid-template-columns: minmax(0, 1fr); } }
.brand-form .hint, .brand-resets .hint { font-size: .82rem; color: var(--muted); margin: .3rem 0 0; font-weight: 400; }
.brand-form input[type=file] { padding: .35rem; }
.brand-form label.check { display: inline-flex; gap: .4rem; align-items: center; margin: 0; font-weight: 400; }
.brand-form label.check input { width: auto; }
.brand-current { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .3rem 0 .5rem; }
.brand-thumb { display: block; max-height: 56px; max-width: min(220px, 100%); width: auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.brand-icon-thumb { display: block; width: 44px; height: 44px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.brand-colour { display: flex; gap: .5rem; align-items: center; }
.brand-colour input[type=color] { width: 3rem; min-width: 3rem; height: 2.5rem; padding: 2px; flex: none; cursor: pointer; }
.brand-colour input[type=text] { max-width: 10rem; font-family: var(--bs-font-mono); text-transform: uppercase; }
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .6rem; margin-top: .8rem; }
.swatch { border-radius: 8px; padding: .7rem .9rem; border: 1px solid var(--line); }
.swatch p { margin: .5rem 0; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.swatch .chip { display: inline-block; padding: .3rem .8rem; border-radius: 6px; font-weight: 600; }
.brand-notes { padding-left: 1.1rem; }
.brand-preview-bar { background: var(--bs-header-bg); color: var(--bs-header-text); border-bottom: 3px solid var(--brand-stripe, var(--bs-gold));
  border-radius: 8px; padding: .6rem .9rem; margin-bottom: 1.2rem; overflow: hidden; }
.brand-preview-bar a { color: var(--bs-header-text); text-decoration: none; }
.brand-preview-bar .brand.brand-custom { max-width: 100%; }
.brand-resets { margin-top: 1rem; }
.brand-resets h2 { margin-bottom: .3rem; }
.brand-resets form { margin: .6rem .6rem 0 0; }
.brand-scope a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }