:root{--navy:#102744;--blue:#173b62;--red:#d52232;--yellow:#ffca28;--bg:#eef2f7}
*{box-sizing:border-box}
body{max-width:none!important;margin:0!important;padding:0!important;background:var(--bg)!important;font-family:Arial,system-ui,sans-serif!important}
header{position:fixed;left:0;top:0;bottom:0;width:255px;overflow-y:auto;background:var(--navy)!important;border-radius:0!important;padding:24px 16px!important;box-shadow:4px 0 20px #10274420;z-index:10}
header img{width:100%!important;max-height:115px!important;background:white!important;object-fit:contain}
header strong{display:block;color:white;font-size:19px;margin:18px 0;padding-bottom:16px;border-bottom:2px solid var(--yellow)}
header nav{display:flex;flex-direction:column;gap:5px}
header nav a{display:block!important;margin:0!important;padding:11px 13px!important;color:#e8f0ff!important;text-decoration:none;border-radius:8px;font-weight:600;font-size:14px}
header nav a:hover{background:var(--blue);color:var(--yellow)!important}
header nav form{display:block!important;margin-top:20px}
header nav button{width:100%;background:var(--red)!important}
main{margin:22px 28px 22px 283px!important;padding:30px!important;max-width:none!important;min-height:calc(100vh - 44px);border-radius:16px!important;box-shadow:0 5px 25px #1027440d}
h1{font-size:29px;color:var(--navy);border-bottom:4px solid var(--yellow);padding-bottom:16px}
button{background:var(--blue)!important}
button:hover{filter:brightness(1.1)}
table{display:table!important;width:100%;background:white}
th{background:var(--navy);color:white}
td,th{padding:13px!important}
tr:nth-child(even){background:#f4f7fb}
.warn{border-left:5px solid var(--yellow)}
@media(max-width:850px){header{position:relative;width:100%;height:auto}header nav{flex-direction:row;flex-wrap:wrap}main{margin:12px!important;padding:16px!important}table{display:block!important;overflow-x:auto}}
.bgfc-welcome{display:flex;align-items:center;justify-content:space-between;gap:25px;background:linear-gradient(110deg,#102744,#194a77);color:white;padding:30px;border-radius:16px;margin-bottom:24px;border-bottom:6px solid #ffca28}
.bgfc-welcome h2{font-size:30px;color:white;margin:10px 0}
.bgfc-welcome p{color:#dce8f5}
.bgfc-welcome img{width:190px;max-height:110px;object-fit:contain;background:white;border-radius:12px;padding:10px}
.bgfc-eyebrow{color:#ffca28;font-weight:800;letter-spacing:2px;font-size:12px}
.bgfc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:24px 0}
.bgfc-stat{background:white;border:1px solid #e2e8f0;border-top:5px solid #d52232;border-radius:14px;padding:24px;box-shadow:0 6px 18px #10274410}
.bgfc-stat:nth-child(2){border-top-color:#ffca28}
.bgfc-stat:nth-child(3){border-top-color:#194a77}
.bgfc-stat:nth-child(4){border-top-color:#18a477}
.bgfc-stat span{display:block;color:#506079;font-weight:700;font-size:14px}
.bgfc-stat strong{display:block;color:#102744;font-size:42px;margin:12px 0}
.bgfc-stat small{color:#69788c}
.bgfc-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0 32px}
.bgfc-actions a{display:block;background:#173b62;color:white!important;padding:20px;text-align:center;border-radius:12px;text-decoration:none;font-weight:700}
.bgfc-actions a:nth-child(2),.bgfc-actions a:nth-child(5){background:#d52232}
.bgfc-actions a:nth-child(3),.bgfc-actions a:nth-child(6){background:#f4c327;color:#102744!important}
.bgfc-actions a:hover{filter:brightness(1.1);transform:translateY(-2px)}
@media(max-width:1200px){.bgfc-stats{grid-template-columns:repeat(2,1fr)}.bgfc-actions{grid-template-columns:repeat(2,1fr)}}

/* BGFC COMPLETE DESKTOP ADMIN DESIGN */
main h2{color:#102744;font-size:22px;margin-top:30px}
main h3{color:#173b62}
main p{line-height:1.6}
main a:not(.bgfc-actions a){font-weight:600}
main form{margin:16px 0}
main input,main select,main textarea{
 background:#fff;border:1px solid #cbd5e1;
 border-radius:8px;padding:12px;
}
main input:focus,main select:focus,main textarea:focus{
 outline:2px solid #ffca28;border-color:#173b62;
}
main button,main input[type=submit]{
 background:#173b62!important;color:white;
 border:0;border-radius:9px;padding:12px 20px;
 font-weight:700;cursor:pointer;
}
main table{
 border-collapse:separate;border-spacing:0;
 border-radius:12px;overflow:hidden;
 box-shadow:0 4px 16px #10274412;
 margin:18px 0 28px;
}
main th{background:#173b62!important;color:white}
main tr:hover td{background:#fff9e4}
main .ok{border-left:5px solid #16a34a}
main .warn{background:#fff8df;border-left:5px solid #ffca28}
header nav a:focus-visible,main a:focus-visible{
 outline:3px solid #ffca28;outline-offset:2px;
}
header nav a[href="/dashboard"]{border-left:3px solid #ffca28}
header nav a[href="/incidents"]{border-left:3px solid #d52232}
header nav a[href="/volunteers"]{border-left:3px solid #3288d1}
header nav a[href="/equipment"]{border-left:3px solid #ffca28}
@media(min-width:1200px){
 main{padding:36px!important}
}

.bgfc-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0}
.bgfc-panel{background:white;border:1px solid #dce4ee;border-radius:14px;padding:24px;box-shadow:0 5px 18px #10274412;border-top:5px solid #173b62}
.bgfc-panel:nth-child(2){border-top-color:#ffca28}
.bgfc-panel:nth-child(3){border-top-color:#d52232}
.bgfc-panel h2{margin-top:0;color:#102744}
.bgfc-panel p{color:#52627b}
.bgfc-big-number{font-size:48px;font-weight:800;color:#102744}
.bgfc-meter{height:18px;background:#e8edf5;border-radius:20px;overflow:hidden;margin:22px 0}
.bgfc-meter span{display:block;height:100%;background:linear-gradient(90deg,#d52232,#ffca28);border-radius:20px}
.bgfc-panel a{color:#173b62;font-weight:800}
@media(max-width:1250px){.bgfc-panels{grid-template-columns:1fr}}

.bgfc-mobile-welcome{background:linear-gradient(120deg,#102744,#194a77);color:white;padding:24px;border-radius:16px;text-align:center;border-bottom:5px solid #ffca28}
.bgfc-mobile-welcome img{max-width:200px;max-height:100px;background:white;padding:10px;border-radius:10px}
.bgfc-mobile-welcome h2{color:white}
.bgfc-mobile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}
.bgfc-mobile-card{display:block;text-decoration:none;background:white;border:1px solid #dce4ee;border-left:5px solid #d52232;padding:20px;border-radius:12px;box-shadow:0 4px 14px #10274414}
.bgfc-mobile-card:nth-child(even){border-left-color:#ffca28}
.bgfc-mobile-card strong{display:block;color:#102744;font-size:17px}
.bgfc-mobile-card small{display:block;color:#52627b;margin-top:8px}
@media(max-width:850px){
 body:has(.bgfc-mobile-grid) header{position:relative;width:100%;padding:12px!important}
 body:has(.bgfc-mobile-grid) header nav{display:none}
 body:has(.bgfc-mobile-grid) main{margin:0!important;border-radius:0!important;padding:14px!important}
 .bgfc-mobile-grid{grid-template-columns:1fr}
}

/* BGFC-PROFESSIONAL-HUB-V1 */

:root{
 --bgfc-navy:#102744;
 --bgfc-blue:#173b62;
 --bgfc-gold:#d7b75b;
 --bgfc-border:#dce4ee;
}

/* Navigation buttons */
.sidebar a,
.bgfc-sidebar a,
nav a{
 text-align:center;
}

/* Dashboard thumbnails and cards */
.bgfc-card,
.bgfc-tile,
.bgfc-mobile-card,
.bgfc-stat,
.bgfc-panel{
 text-align:center;
 border-radius:14px;
}

/* Centre icons and labels inside thumbnails */
.bgfc-card img,
.bgfc-tile img,
.bgfc-mobile-card img{
 display:block;
 margin-left:auto;
 margin-right:auto;
}

.bgfc-card strong,
.bgfc-tile strong,
.bgfc-mobile-card strong{
 display:block;
 text-align:center;
}

/* Consistent card spacing */
.bgfc-card,
.bgfc-tile,
.bgfc-mobile-card{
 padding:18px;
}

/* Headings */
h1,h2,h3{
 line-height:1.3;
}

/* Tables */
table th{
 text-align:center;
 vertical-align:middle;
}

table td{
 text-align:center;
 vertical-align:middle;
}

/* Buttons */
button,
.button,
a.btn{
 border-radius:9px;
 text-align:center;
 font-weight:600;
}

/* Keep editable forms readable */
form label,
form input,
form textarea,
form select{
 text-align:left;
}

/* Long notes remain readable */
textarea,
.bgfc-incident-description,
.bgfc-notes{
 text-align:left;
}

/* Responsive spacing */
@media(max-width:700px){
 .bgfc-card,
 .bgfc-tile,
 .bgfc-mobile-card,
 .bgfc-stat,
 .bgfc-panel{
  padding:14px;
 }

 table{
  font-size:13px;
 }
}


/* BGFC-DASHBOARD-STACKED-ALERTS-V1 */

/* Stack Live Notifications above Incident Alerts */
.bgfc-dashboard-alerts,
.bgfc-alert-panels,
.bgfc-notification-panels {
 display:grid!important;
 grid-template-columns:minmax(0,1fr)!important;
 gap:18px!important;
}

.bgfc-dashboard-alerts > *,
.bgfc-alert-panels > *,
.bgfc-notification-panels > * {
 width:100%!important;
 max-width:none!important;
 min-width:0!important;
 box-sizing:border-box;
}




/* BGFC-RESPONSIVE-HUB-CARNIVAL-2026 */

@media (max-width: 850px) {

 html {
  -webkit-text-size-adjust:100%;
 }

 body {
  overflow-x:hidden;
 }

 body > header {
  padding:14px!important;
 }

 main {
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box;
  padding:14px!important;
 }

 .bgfc-card,
 .bgfc-panel,
 .bgfc-mobile-card,
 .bgfc-tile,
 .bgfc-stat {
  max-width:100%;
  box-sizing:border-box;
 }

 input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea,
 button {
  min-height:44px;
  max-width:100%;
  box-sizing:border-box;
 }

 input,
 select,
 textarea {
  font-size:16px!important;
 }

 button,
 .bgfc-button,
 a.bgfc-button {
  touch-action:manipulation;
 }

 table {
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
 }

 img,
 video,
 canvas {
  max-width:100%;
  height:auto;
 }

 #video {
  width:100%;
  max-width:100%;
  height:auto;
 }

 .bgfc-grid,
 .bgfc-mobile-grid {
  grid-template-columns:1fr;
 }

}

@media (max-width:480px) {

 main {
  padding:10px!important;
 }

 .bgfc-card,
 .bgfc-panel,
 .bgfc-mobile-card,
 .bgfc-tile {
  padding:12px;
 }

 h1 {
  font-size:clamp(22px,6vw,30px);
 }

 h2 {
  font-size:clamp(19px,5vw,25px);
 }

}



/* BGFC-MOBILE-COLLAPSIBLE-NAV-V1 */

@media(max-width:850px){

 body > header{
  position:relative!important;
  display:block!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  padding:12px 14px!important;
 }

 body > header nav{
  display:none!important;
 }

 body.bgfc-menu-open > header nav{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  width:100%!important;
  max-height:65vh!important;
  overflow-y:auto!important;
  margin-top:12px!important;
  padding:10px 0!important;
 }

 body > header nav a,
 body > header nav button{
  min-height:44px!important;
  box-sizing:border-box!important;
 }

 #bgfc-mobile-menu-toggle{
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:46px;
  margin-top:10px;
  padding:10px 16px;
  background:#d7b75b;
  color:#172d47;
  border:0;
  border-radius:9px;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
 }

 body > main{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:12px!important;
 }

}

@media(min-width:851px){
 #bgfc-mobile-menu-toggle{
  display:none!important;
 }
}



/* BGFC-ADMIN-MOBILE-NAV-FINAL-V1 */

/* Desktop Administrator Hub remains unchanged */
@media screen and (max-width:850px) {

 html body > header {
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  padding:12px 14px!important;
 }

 html body > header #bgfc-mobile-menu-toggle {
  display:block!important;
  width:100%!important;
  min-height:46px!important;
  margin:12px 0 0!important;
  padding:12px!important;
  background:#d7b75b!important;
  color:#172d47!important;
  border-radius:9px!important;
  font-size:16px!important;
  font-weight:800!important;
 }

 /* Hide the existing navigation until Menu is pressed */
 html body:not(.bgfc-menu-open) > header nav,
 html body:not(.bgfc-menu-open) > header #bgfc-main-nav {
  display:none!important;
  visibility:hidden!important;
 }

 /* Display the original Administrator navigation */
 html body.bgfc-menu-open > header nav,
 html body.bgfc-menu-open > header #bgfc-main-nav {
  display:flex!important;
  visibility:visible!important;
  position:relative!important;
  flex-direction:column!important;
  width:100%!important;
  max-width:100%!important;
  max-height:65vh!important;
  overflow-y:auto!important;
  gap:6px!important;
  padding:10px 0!important;
  margin:10px 0 0!important;
 }

 html body > header nav a {
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  min-height:44px!important;
  margin:0!important;
  padding:12px 14px!important;
 }

 /* Administrator dashboard below the compact header */
 html body > main {
  display:block!important;
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:12px!important;
  box-sizing:border-box!important;
 }

 html body > main > * {
  max-width:100%;
  box-sizing:border-box;
 }

}


/* BGFC-MOBILE-DASHBOARD-BANNER-FIX-V1 */

@media screen and (max-width:850px) {

 body .bgfc-welcome {
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  gap:18px!important;
  padding:22px 18px!important;
 }

 body .bgfc-welcome > div {
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
 }

 body .bgfc-welcome h2 {
  font-size:clamp(25px,7vw,34px)!important;
  line-height:1.15!important;
  overflow-wrap:break-word!important;
 }

 body .bgfc-welcome p {
  overflow-wrap:break-word!important;
 }

 body .bgfc-welcome > img {
  display:block!important;
  position:static!important;
  float:none!important;
  transform:none!important;
  width:100%!important;
  max-width:320px!important;
  height:auto!important;
  max-height:110px!important;
  object-fit:contain!important;
  align-self:center!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
 }

}

/* BGFC-REGISTER-BUTTON-SPACING-V1 */
.bgfc-record-tabs {
 display:flex!important;
 flex-direction:column!important;
 align-items:stretch!important;
 gap:14px!important;
 width:100%!important;
 max-width:100%!important;
 margin:20px 0!important;
}
.bgfc-record-tabs > button {
 display:block!important;
 width:100%!important;
 max-width:100%!important;
 min-height:56px!important;
 margin:0!important;
 box-sizing:border-box!important;
 text-align:center!important;
}
