:root{--bg:#071014;--panel:#0d171d;--panel2:#111f27;--text:#f3f7f9;--muted:#9fb0bb;--faint:#657984;--line:rgba(255,255,255,.1);--brand:#ff3b22;--brand2:#ff9f1c;--brand3:#ffd166;--brand-2:#ff9f1c;--brand-3:#ffd166;--ok:#33d17a;--success:#33d17a;--info:#5cc8ff;--bad:#ff4d5a;--r:20px;--side:286px;--shadow:0 22px 80px rgba(0,0,0,.32);font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scrollbar-width:thin;scrollbar-color:var(--brand) var(--panel2)}*::-webkit-scrollbar{width:12px;height:12px}*::-webkit-scrollbar-track{background:var(--panel2);border-radius:999px}*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--brand),var(--brand2));border:3px solid var(--panel2);border-radius:999px}
body{margin:0;background:radial-gradient(circle at 10% -10%,rgba(255,59,34,.22),transparent 32rem),linear-gradient(135deg,var(--bg),#030608 80%);color:var(--text);font-family:var(--font);min-height:100vh}body.light{--bg:#f5f7fb;--panel:#fff;--panel2:#f1f4f8;--text:#18252d;--muted:#50616c;--line:rgba(8,23,32,.12);background:#f5f7fb}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}code{color:var(--brand3)}
.shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;overflow:auto;padding:24px;border-right:1px solid var(--line);background:rgba(7,16,20,.78);backdrop-filter:blur(18px)}body.light .sidebar{background:rgba(255,255,255,.78)}
.brand{display:flex;gap:14px;align-items:center}.brand img{width:52px;height:52px;border-radius:16px;object-fit:contain;box-shadow:0 10px 28px rgba(255,59,34,.25)}.brand strong{display:block;font-size:1.15rem}.brand span{display:block;color:var(--muted);font-size:.82rem}
.side-card{margin:24px 0;padding:16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}.eyebrow{color:var(--brand2);text-transform:uppercase;letter-spacing:.14em;font-weight:900;font-size:.72rem}.tiny{color:var(--muted);font-size:.82rem}
.nav-group{margin:18px 0}.nav-group-title{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px;font-weight:900}.nav-item{display:grid;gap:4px}.nav-row{position:relative}.nav-link{display:flex;gap:12px;align-items:center;min-height:44px;padding:10px 52px 10px 12px;border-radius:14px;color:var(--muted);transition:.18s}.nav-link:hover,.nav-link.active{color:var(--text);background:linear-gradient(90deg,rgba(255,59,34,.18),rgba(255,159,28,.05))}.nav-link.active{box-shadow:inset 3px 0 0 var(--brand)}.nav-icon{width:24px;text-align:center;color:var(--brand2)}
.sub-toggle{position:absolute;right:12px;top:0;bottom:0;width:28px;height:100%;display:grid;place-items:center;border:0;background:transparent;color:var(--brand2);cursor:pointer}.sub-toggle:hover{color:var(--brand3)}.chev{width:18px;height:18px;transition:transform .18s}.chev path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.nav-item.open .chev{transform:rotate(180deg)}
.subs{display:grid;gap:2px;margin:0 0 8px 40px;padding-left:12px;border-left:1px solid var(--line);overflow:hidden;max-height:0;opacity:0;transform:translateY(-4px);transition:max-height .24s,opacity .18s,transform .18s}.nav-item.open .subs{max-height:520px;opacity:1;transform:none}.sub{display:flex;gap:8px;align-items:center;min-height:32px;padding:6px 10px;border-radius:12px;color:var(--muted);font-size:.84rem}.sub:hover,.sub.active{color:var(--brand2);background:rgba(255,159,28,.08)}.dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.top{position:sticky;top:0;z-index:20;min-height:76px;padding:16px 26px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:center;background:rgba(7,16,20,.72);backdrop-filter:blur(18px)}body.light .top{background:rgba(245,247,251,.8)}.top small{display:block;color:var(--muted)}
.content{width:min(100%,1280px);margin:auto;padding:28px}.hero,.card,.tablebox{border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025)),var(--panel);box-shadow:var(--shadow)}.hero{padding:30px}.hero h1{font-size:clamp(2rem,5vw,4.4rem);line-height:.95;letter-spacing:-.06em;margin:10px 0 14px}.hero p,.card p{color:var(--muted);line-height:1.65}.section{margin-top:28px}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.card{padding:20px}.stat strong{display:block;font-size:2.1rem;margin:8px 0}.tag,.badge{display:inline-flex;min-height:26px;align-items:center;padding:0 10px;border-radius:999px;background:rgba(255,159,28,.12);color:var(--brand2);border:1px solid rgba(255,159,28,.22);font-size:.76rem;font-weight:900}.priority-critical{color:#ff8d96;background:rgba(255,77,90,.13);border-color:rgba(255,77,90,.25)}.priority-high{color:var(--brand2)}.priority-medium{color:#5cc8ff;background:rgba(92,200,255,.13)}.priority-low{color:var(--ok);background:rgba(51,209,122,.13)}
.btn,.btn2,.chip{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-weight:900;cursor:pointer}.btn{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}.btn2,.chip{background:rgba(255,255,255,.04);color:var(--text)}.btn.small,.btn2.small{min-height:34px;font-size:.84rem}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.chip.active,.chip:hover{background:rgba(255,59,34,.16);border-color:rgba(255,59,34,.24)}
input,select,textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);outline:none}textarea{min-height:130px;resize:vertical}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid label{display:grid;gap:7px;color:var(--muted);font-weight:800;font-size:.86rem}.full{grid-column:1/-1}.alert{padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,159,28,.12);color:var(--brand2);font-weight:800}.alert.ok{background:rgba(51,209,122,.12);color:var(--ok)}.alert.err{background:rgba(255,77,90,.12);color:#ff8d96}
table{width:100%;border-collapse:collapse;min-width:760px;background:var(--panel)}.tablebox{overflow:auto}th,td{padding:13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{color:var(--brand2);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em}tr:last-child td{border-bottom:0}
.admin{display:grid;grid-template-columns:240px 1fr;min-height:100vh}.admin-nav{padding:22px;border-right:1px solid var(--line);background:rgba(7,16,20,.78)}.admin-nav a{display:flex;gap:10px;margin-top:6px;padding:12px;border-radius:14px;color:var(--muted)}.admin-nav a:hover,.admin-nav a.active{color:var(--text);background:rgba(255,59,34,.14)}.admin-main{min-width:0}.admin-head{min-height:74px;padding:18px 26px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.admin-content{padding:26px;width:min(100%,1240px);margin:auto}.inline{display:inline}.footer{display:flex;justify-content:space-between;gap:16px;padding:28px;color:var(--muted);border-top:1px solid var(--line)}
.mobile-btn,.drawer,.bottom{display:none}
@media(max-width:1000px){.grid.four,.grid.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.shell,.admin{grid-template-columns:1fr}.sidebar,.admin-nav{display:none}.mobile-btn{display:inline-flex}.top{padding:12px 14px}.content,.admin-content{padding:18px 14px 96px}.grid.two,.grid.three,.grid.four,.form-grid{grid-template-columns:1fr}.hero{border-radius:24px}.drawer{position:fixed;inset:0;z-index:80;display:none;background:rgba(0,0,0,.55)}body.drawer-open .drawer{display:block}.drawer-panel{width:min(360px,92vw);height:100%;padding:18px;background:var(--panel);overflow:auto}.bottom{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px;border:1px solid var(--line);border-radius:22px;background:rgba(7,16,20,.84);backdrop-filter:blur(18px)}.bottom a{display:grid;place-items:center;gap:2px;min-height:52px;border-radius:16px;color:var(--muted)}.bottom a.active{background:rgba(255,59,34,.15);color:var(--text)}.bottom small{font-size:.68rem;font-weight:800}}

.page-full{width:100%;padding:0;background:transparent;border:0;box-shadow:none;color:var(--text)}.page-full h2:first-child{margin-top:0}.content:has(.roster-shell){width:100%;max-width:none}.roster-shell{padding:22px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.02));box-shadow:var(--shadow)}.roster-toolbar{display:grid;grid-template-columns:1fr minmax(240px,420px);gap:16px;align-items:end;margin-bottom:18px}.roster-toolbar h2{margin:8px 0 0}.roster-scroll{width:100%;overflow:auto;border:1px solid var(--line);border-radius:18px;background:transparent}.roster-table{width:100%;min-width:1680px;border-collapse:collapse;background:transparent;color:#fff;font-size:.84rem;font-weight:800}.roster-table th,.roster-table td{padding:7px 9px;border:1px solid rgba(255,255,255,.55);text-align:center;vertical-align:middle;white-space:nowrap}.roster-table thead th{background:rgba(255,255,255,.035);color:#fff;text-transform:uppercase;letter-spacing:.04em;font-size:.78rem}.roster-head th{background:#4d5050!important;border-top:1px solid rgba(255,255,255,.9)}.section-row td{background:#3d3f3f;color:#fff;text-transform:uppercase;letter-spacing:.06em;font-weight:1000;padding:12px 8px}.roster-member td{background:rgba(255,255,255,.045);color:#090909}.roster-member:nth-child(odd) td{background:rgba(255,255,255,.055)}.member-name{font-weight:1000}.roster-status{display:inline-flex;justify-content:center;min-width:78px;padding:3px 8px;border-radius:2px;color:#fff;background:#24591d;font-weight:1000}.roster-status.active{background:#24591d}.roster-status.vacation{background:#1d4d8f}.roster-status.inactive{background:#444}.roster-status.loa{background:#8a5a0a}.roster-status.suspended{background:#8c1020}.cert-cell{min-width:34px;font-size:1rem}.cert-yes{display:inline-grid;place-items:center;width:18px;height:18px;background:#00f000;color:#111;font-weight:1000;line-height:1}.cert-no{color:#5a3312;font-size:1.15rem;font-weight:1000}.cert-editor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0 18px}.cert-edit-box{display:grid;grid-template-columns:auto 28px 1fr;grid-template-rows:auto auto;gap:2px 8px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04);color:var(--text)}.cert-edit-box input{grid-row:1/3;width:auto;min-height:auto}.cert-edit-box span{grid-row:1/3;font-size:1.2rem}.cert-edit-box strong,.cert-edit-box small{display:block}.cert-edit-box small{color:var(--muted);font-size:.76rem;line-height:1.2}@media(max-width:850px){.roster-toolbar{grid-template-columns:1fr}}


.full-width-section {
  width: 100%;
}

.page-content-full {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.roster-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.roster-toolbar-card {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 440px);
  gap: 18px;
  align-items: end;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  box-shadow: 0 14px 44px rgba(0,0,0,.14);
}

.roster-toolbar-card h2 {
  margin: 8px 0 6px;
}

.roster-toolbar-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.roster-board {
  display: grid;
  gap: 26px;
}

.roster-section {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.10), transparent 28rem),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  box-shadow: var(--shadow);
}

.roster-section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.roster-section-header h2 {
  margin: 8px 0 0;
  letter-spacing: -.04em;
}

.roster-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.roster-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    var(--panel);
  box-shadow: 0 16px 44px rgba(0,0,0,.18);
}

.roster-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand), var(--brand2));
}

.roster-card-top {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.roster-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  font-weight: 1000;
  font-size: 1.25rem;
  box-shadow: 0 12px 28px rgba(255,59,34,.22);
}

.roster-identity {
  min-width: 0;
}

.roster-identity h3 {
  margin: 0;
  letter-spacing: -.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-identity p {
  margin: 3px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.roster-status {
  display: inline-flex;
  justify-content: center;
  min-width: 76px;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: white;
  background: #24591d;
  border: 1px solid rgba(255,255,255,.12);
  font-size: .78rem;
  font-weight: 1000;
}

.roster-status.active {
  background: rgba(51,209,122,.18);
  color: var(--ok);
  border-color: rgba(51,209,122,.25);
}

.roster-status.vacation,
.roster-status.loa {
  background: rgba(92,200,255,.14);
  color: var(--info);
  border-color: rgba(92,200,255,.25);
}

.roster-status.inactive {
  background: rgba(255,255,255,.08);
  color: var(--muted);
}

.roster-status.suspended {
  background: rgba(255,77,90,.14);
  color: #ff8d96;
  border-color: rgba(255,77,90,.25);
}

.roster-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.roster-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.roster-info-grid div,
.roster-note {
  padding: 11px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
}

.roster-info-grid span,
.roster-note span {
  display: block;
  margin-bottom: 4px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 900;
  font-size: .66rem;
}

.roster-info-grid strong,
.roster-note strong {
  display: block;
  color: var(--text);
  font-size: .88rem;
  overflow-wrap: anywhere;
}

.roster-note {
  margin-top: 10px;
}

.roster-cert-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.cert-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--faint);
  background: rgba(255,255,255,.035);
  font-size: .75rem;
  font-weight: 900;
}

.cert-chip.earned {
  color: var(--ok);
  background: rgba(51,209,122,.10);
  border-color: rgba(51,209,122,.22);
}

.cert-chip.missing {
  opacity: .52;
}

.cert-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0 18px;
}

.cert-edit-box {
  display: grid;
  grid-template-columns: auto 28px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  color: var(--text);
}

.cert-edit-box input {
  grid-row: 1 / 3;
  width: auto;
  min-height: auto;
}

.cert-edit-box span {
  grid-row: 1 / 3;
  font-size: 1.2rem;
}

.cert-edit-box strong,
.cert-edit-box small {
  display: block;
}

.cert-edit-box small {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.2;
}

@media (max-width: 1200px) {
  .roster-dashboard,
  .roster-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .roster-dashboard,
  .roster-toolbar-card,
  .roster-card-grid {
    grid-template-columns: 1fr;
  }

  .roster-section-header {
    align-items: start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .roster-card-top {
    grid-template-columns: 44px 1fr;
  }

  .roster-status {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .roster-info-grid {
    grid-template-columns: 1fr;
  }
}

.status-pill{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px;border-radius:999px;background:rgba(51,209,122,.12);color:var(--ok);border:1px solid rgba(51,209,122,.25);font-weight:900;font-size:.82rem}

.search-input{width:100%;min-height:48px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);outline:none}.search-input:focus{border-color:rgba(255,159,28,.48);box-shadow:0 0 0 4px rgba(255,159,28,.1)}

.empty{padding:24px;color:var(--muted);text-align:center}


/* Line-style themed roster */
.roster-line-board {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.10), transparent 28rem),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  box-shadow: var(--shadow);
}

.roster-line-scroll {
  width: 100%;
  overflow-x: auto;
  display: grid;
  gap: 12px;
  padding-bottom: 4px;
}

.roster-line-grid {
  display: grid;
  grid-template-columns:
    minmax(210px, 1.35fr)
    minmax(150px, .9fr)
    minmax(82px, .45fr)
    minmax(106px, .55fr)
    minmax(110px, .6fr)
    minmax(108px, .6fr)
    minmax(155px, .85fr)
    minmax(106px, .55fr)
    minmax(120px, .7fr)
    minmax(128px, .75fr)
    minmax(112px, .6fr)
    minmax(108px, .55fr)
    minmax(180px, 1fr);
  gap: 8px;
  min-width: 1660px;
  align-items: center;
}

.roster-line-title {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,59,34,.18), rgba(255,159,28,.08)),
    var(--panel);
  color: var(--brand2);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
  font-weight: 1000;
}

.roster-line-section {
  display: grid;
  gap: 8px;
}

.roster-line-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 1000;
}

.roster-line-section-title small {
  color: var(--muted);
  font-size: .72rem;
  text-transform: none;
  letter-spacing: 0;
}

.roster-line {
  position: relative;
  overflow: hidden;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    var(--panel);
  box-shadow: 0 14px 38px rgba(0,0,0,.13);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.roster-line::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand), var(--brand2));
}

.roster-line:hover {
  transform: translateY(-1px);
  border-color: rgba(255,159,28,.26);
  background:
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035)),
    var(--panel);
}

.roster-line-member {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 4px;
}

.roster-mini-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: white;
  font-weight: 1000;
  box-shadow: 0 10px 22px rgba(255,59,34,.20);
}

.roster-line-member strong,
.roster-line-member small {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-line-member small {
  color: var(--muted);
  font-size: .72rem;
  margin-top: 2px;
}

.roster-line-value {
  min-width: 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-line-value.strong {
  color: var(--text);
  font-weight: 1000;
}

.roster-line-value.email {
  text-transform: none;
}

.roster-line-certs {
  display: flex;
  gap: 5px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.cert-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 1000;
  color: var(--ok);
  background: rgba(51,209,122,.10);
  border: 1px solid rgba(51,209,122,.22);
  white-space: nowrap;
}

.roster-line-board .roster-status {
  min-width: 0;
  min-height: 28px;
  padding: 0 10px;
  font-size: .72rem;
}

@media (max-width: 900px) {
  .roster-line-board {
    padding: 14px;
  }

  .roster-line-title {
    display: none;
  }

  .roster-line-grid {
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .roster-line {
    padding: 14px;
  }

  .roster-line-value,
  .roster-line-certs {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--line);
    white-space: normal;
    overflow: visible;
  }

  .roster-line-value::before,
  .roster-line-certs::before {
    content: attr(data-label);
    color: var(--brand2);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .66rem;
    font-weight: 1000;
  }

  .roster-line-member {
    margin-bottom: 4px;
  }

  .roster-line-certs {
    display: flex;
    flex-wrap: wrap;
  }

  .roster-line-certs::before {
    width: 100%;
  }
}


/* Full-width roster page override */
body.roster-fullwidth-page .content {
  width: 100%;
  max-width: none;
  padding-left: clamp(14px, 1.6vw, 26px);
  padding-right: clamp(14px, 1.6vw, 26px);
}

body.roster-fullwidth-page .main {
  min-width: 0;
}

body.roster-fullwidth-page .hero,
body.roster-fullwidth-page .roster-dashboard,
body.roster-fullwidth-page .roster-toolbar-card,
body.roster-fullwidth-page .roster-line-board {
  width: 100%;
}

body.roster-fullwidth-page .roster-line-board {
  overflow: hidden;
}

body.roster-fullwidth-page .roster-line-scroll {
  overflow-x: visible;
}

body.roster-fullwidth-page .roster-line-grid {
  min-width: 0;
  width: 100%;
  grid-template-columns:
    minmax(170px, 1.25fr)
    minmax(120px, .82fr)
    minmax(64px, .42fr)
    minmax(86px, .52fr)
    minmax(80px, .5fr)
    minmax(82px, .52fr)
    minmax(120px, .82fr)
    minmax(86px, .52fr)
    minmax(92px, .58fr)
    minmax(96px, .62fr)
    minmax(84px, .52fr)
    minmax(86px, .52fr)
    minmax(128px, .9fr);
  gap: 6px;
}

body.roster-fullwidth-page .roster-line-title {
  font-size: .60rem;
  padding: 8px;
}

body.roster-fullwidth-page .roster-line {
  padding: 8px;
}

body.roster-fullwidth-page .roster-line-value {
  font-size: .76rem;
}

body.roster-fullwidth-page .roster-line-member {
  gap: 8px;
}

body.roster-fullwidth-page .roster-mini-avatar {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: .86rem;
}

body.roster-fullwidth-page .roster-line-member strong {
  font-size: .86rem;
}

body.roster-fullwidth-page .roster-line-member small {
  font-size: .68rem;
}

body.roster-fullwidth-page .roster-line-certs {
  flex-wrap: wrap;
  gap: 4px;
}

body.roster-fullwidth-page .cert-mini {
  min-height: 22px;
  padding: 0 6px;
  font-size: .62rem;
}

body.roster-fullwidth-page .roster-line-board .roster-status {
  min-height: 24px;
  padding: 0 8px;
  font-size: .66rem;
}

/* On medium desktop screens, hide less-critical columns instead of forcing a scrollbar. */
@media (max-width: 1500px) and (min-width: 901px) {
  body.roster-fullwidth-page .roster-line-grid {
    grid-template-columns:
      minmax(180px, 1.35fr)
      minmax(128px, .9fr)
      minmax(70px, .45fr)
      minmax(90px, .55fr)
      minmax(90px, .55fr)
      minmax(92px, .58fr)
      minmax(100px, .62fr)
      minmax(100px, .62fr)
      minmax(88px, .54fr)
      minmax(128px, 1fr);
  }

  body.roster-fullwidth-page .roster-line-title > div:nth-child(4),
  body.roster-fullwidth-page .roster-line-title > div:nth-child(7),
  body.roster-fullwidth-page .roster-line-title > div:nth-child(8),
  body.roster-fullwidth-page .roster-line-value[data-label="Birth Date"],
  body.roster-fullwidth-page .roster-line-value[data-label="E-Mail"],
  body.roster-fullwidth-page .roster-line-value[data-label="Join Date"] {
    display: none;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  body.roster-fullwidth-page .roster-line-grid {
    grid-template-columns:
      minmax(180px, 1.45fr)
      minmax(130px, 1fr)
      minmax(70px, .5fr)
      minmax(90px, .65fr)
      minmax(92px, .7fr)
      minmax(100px, .75fr)
      minmax(86px, .62fr)
      minmax(128px, 1fr);
  }

  body.roster-fullwidth-page .roster-line-title > div:nth-child(5),
  body.roster-fullwidth-page .roster-line-title > div:nth-child(6),
  body.roster-fullwidth-page .roster-line-value[data-label="Phone"],
  body.roster-fullwidth-page .roster-line-value[data-label="Citizen ID"] {
    display: none;
  }
}


/* Centered roster + certificate columns update */
.roster-line-grid {
  grid-template-columns:
    minmax(180px, 1.2fr)
    minmax(135px, .9fr)
    minmax(74px, .45fr)
    minmax(96px, .55fr)
    minmax(94px, .55fr)
    minmax(96px, .58fr)
    minmax(140px, .85fr)
    minmax(96px, .55fr)
    minmax(104px, .6fr)
    minmax(112px, .66fr)
    minmax(94px, .56fr)
    minmax(96px, .56fr)
    repeat(var(--cert-count, 8), minmax(54px, .34fr));
}

.roster-line-title > div,
.roster-line-value,
.roster-line-member,
.roster-cert-cell {
  text-align: center;
  justify-content: center;
  align-items: center;
}

.roster-line-member {
  padding-left: 0;
}

.roster-line-member > div {
  min-width: 0;
  width: 100%;
}

.roster-line-member strong,
.roster-line-member small {
  text-align: center;
}

.roster-mini-avatar {
  display: none !important;
}

.roster-cert-title {
  display: grid;
  place-items: center;
  gap: 1px;
  min-width: 0;
  text-align: center;
  line-height: 1.05;
}

.roster-cert-title span,
.roster-cert-title strong {
  display: block;
}

.roster-cert-title span {
  font-size: .95rem;
}

.roster-cert-title strong {
  font-size: .58rem;
  letter-spacing: .05em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-cert-cell {
  display: grid;
  place-items: center;
  min-height: 30px;
  border-radius: 12px;
  font-weight: 1000;
}

.roster-cert-cell.earned span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: rgba(51,209,122,.16);
  color: var(--ok);
  border: 1px solid rgba(51,209,122,.28);
}

.roster-cert-cell.missing span {
  color: var(--faint);
  opacity: .52;
}

.roster-line-certs,
.cert-mini {
  display: none !important;
}

body.roster-fullwidth-page .roster-line-grid {
  grid-template-columns:
    minmax(168px, 1.15fr)
    minmax(118px, .82fr)
    minmax(64px, .42fr)
    minmax(82px, .50fr)
    minmax(78px, .48fr)
    minmax(82px, .50fr)
    minmax(116px, .76fr)
    minmax(82px, .50fr)
    minmax(88px, .52fr)
    minmax(92px, .56fr)
    minmax(82px, .50fr)
    minmax(82px, .50fr)
    repeat(var(--cert-count, 8), minmax(44px, .28fr));
}

body.roster-fullwidth-page .roster-line-title {
  font-size: .58rem;
}

body.roster-fullwidth-page .roster-cert-title span {
  font-size: .88rem;
}

body.roster-fullwidth-page .roster-cert-title strong {
  font-size: .52rem;
}

/* Cert-aware desktop breakpoints */
@media (max-width: 1500px) and (min-width: 901px) {
  body.roster-fullwidth-page .roster-line-grid {
    grid-template-columns:
      minmax(174px, 1.25fr)
      minmax(122px, .85fr)
      minmax(66px, .42fr)
      minmax(84px, .52fr)
      minmax(86px, .54fr)
      minmax(90px, .58fr)
      minmax(88px, .54fr)
      minmax(82px, .50fr)
      repeat(var(--cert-count, 8), minmax(42px, .27fr));
  }

  body.roster-fullwidth-page .roster-line-title > div:nth-child(4),
  body.roster-fullwidth-page .roster-line-title > div:nth-child(7),
  body.roster-fullwidth-page .roster-line-title > div:nth-child(8),
  body.roster-fullwidth-page .roster-line-title > div:nth-child(9),
  body.roster-fullwidth-page .roster-line-value[data-label="Birth Date"],
  body.roster-fullwidth-page .roster-line-value[data-label="E-Mail"],
  body.roster-fullwidth-page .roster-line-value[data-label="Join Date"],
  body.roster-fullwidth-page .roster-line-value[data-label="Division"] {
    display: none;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  body.roster-fullwidth-page .roster-line-grid {
    grid-template-columns:
      minmax(178px, 1.35fr)
      minmax(124px, .95fr)
      minmax(64px, .48fr)
      minmax(86px, .62fr)
      minmax(84px, .62fr)
      minmax(82px, .58fr)
      repeat(var(--cert-count, 8), minmax(40px, .28fr));
  }

  body.roster-fullwidth-page .roster-line-title > div:nth-child(5),
  body.roster-fullwidth-page .roster-line-title > div:nth-child(6),
  body.roster-fullwidth-page .roster-line-title > div:nth-child(10),
  body.roster-fullwidth-page .roster-line-title > div:nth-child(12),
  body.roster-fullwidth-page .roster-line-value[data-label="Phone"],
  body.roster-fullwidth-page .roster-line-value[data-label="Citizen ID"],
  body.roster-fullwidth-page .roster-line-value[data-label="Station"],
  body.roster-fullwidth-page .roster-line-value[data-label="Promotion"] {
    display: none;
  }
}

@media (max-width: 900px) {
  .roster-line-grid {
    grid-template-columns: 1fr;
  }

  .roster-cert-cell {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--line);
  }

  .roster-cert-cell::before {
    content: attr(data-label);
    color: var(--brand2);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .66rem;
    font-weight: 1000;
  }

  .roster-line-member,
  .roster-line-member strong,
  .roster-line-member small {
    text-align: left;
  }
}


/* Grouped two-row roster header update */
.roster-line-grid {
  grid-template-columns:
    minmax(170px, 1.15fr)
    minmax(128px, .86fr)
    minmax(70px, .42fr)
    minmax(92px, .52fr)
    minmax(88px, .50fr)
    minmax(94px, .54fr)
    minmax(128px, .78fr)
    minmax(92px, .52fr)
    minmax(100px, .56fr)
    minmax(106px, .60fr)
    minmax(112px, .66fr)
    minmax(86px, .48fr)
    minmax(92px, .52fr)
    repeat(var(--cert-count, 8), minmax(48px, .30fr));
}

.roster-header-block {
  position: sticky;
  top: 0;
  z-index: 6;
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,59,34,.16), rgba(255,159,28,.07)),
    var(--panel);
  box-shadow: 0 16px 42px rgba(0,0,0,.20);
}

.roster-group-row,
.roster-column-row {
  min-width: 0;
}

.roster-title-group,
.roster-column-row > div {
  min-height: 30px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.055);
  color: var(--text);
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 1000;
  line-height: 1.05;
}

.roster-title-group {
  min-height: 28px;
  color: var(--text);
  font-size: .72rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
}

.roster-column-row > div {
  min-height: 28px;
  color: var(--brand2);
  font-size: .60rem;
}

.group-general { grid-column: 1 / 4; }
.group-personal { grid-column: 4 / 8; }
.group-misc { grid-column: 8 / 12; }
.group-status { grid-column: 12 / 13; }
.group-promotion { grid-column: 13 / 14; }
.group-certs { grid-column: 14 / -1; }

.roster-cert-title {
  min-height: 28px;
  display: grid;
  place-items: center;
  gap: 1px;
  line-height: 1.05;
}

.roster-cert-title span {
  font-size: .82rem;
  line-height: 1;
}

.roster-cert-title strong {
  font-size: .48rem;
  letter-spacing: .04em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-line-member,
.roster-line-value,
.roster-cert-cell {
  min-height: 34px;
}

.roster-line-value.notes {
  color: var(--muted);
}

/* Disable old one-row title styles if cached class exists somewhere */
.roster-line-title {
  display: none !important;
}

body.roster-fullwidth-page .roster-line-grid {
  grid-template-columns:
    minmax(160px, 1.10fr)
    minmax(112px, .78fr)
    minmax(60px, .38fr)
    minmax(80px, .46fr)
    minmax(74px, .42fr)
    minmax(78px, .46fr)
    minmax(108px, .68fr)
    minmax(80px, .46fr)
    minmax(82px, .48fr)
    minmax(86px, .50fr)
    minmax(92px, .56fr)
    minmax(74px, .42fr)
    minmax(78px, .46fr)
    repeat(var(--cert-count, 8), minmax(38px, .24fr));
}

body.roster-fullwidth-page .roster-title-group {
  font-size: .66rem;
}

body.roster-fullwidth-page .roster-column-row > div {
  font-size: .54rem;
}

body.roster-fullwidth-page .roster-cert-title span {
  font-size: .74rem;
}

body.roster-fullwidth-page .roster-cert-title strong {
  font-size: .44rem;
}

/* Grouped header desktop breakpoints */
@media (max-width: 1500px) and (min-width: 901px) {
  body.roster-fullwidth-page .roster-line-grid {
    grid-template-columns:
      minmax(168px, 1.25fr)
      minmax(112px, .82fr)
      minmax(62px, .42fr)
      minmax(76px, .48fr)
      minmax(84px, .54fr)
      minmax(82px, .52fr)
      minmax(90px, .60fr)
      minmax(76px, .48fr)
      repeat(var(--cert-count, 8), minmax(38px, .26fr));
  }

  body.roster-fullwidth-page .roster-column-row > div:nth-child(4),
  body.roster-fullwidth-page .roster-column-row > div:nth-child(7),
  body.roster-fullwidth-page .roster-column-row > div:nth-child(8),
  body.roster-fullwidth-page .roster-column-row > div:nth-child(9),
  body.roster-fullwidth-page .roster-column-row > div:nth-child(11),
  body.roster-fullwidth-page .roster-line-value[data-label="Birth Date"],
  body.roster-fullwidth-page .roster-line-value[data-label="E-Mail"],
  body.roster-fullwidth-page .roster-line-value[data-label="Join Date"],
  body.roster-fullwidth-page .roster-line-value[data-label="Division"],
  body.roster-fullwidth-page .roster-line-value[data-label="Notes"] {
    display: none;
  }

  body.roster-fullwidth-page .group-personal { grid-column: 4 / 7; }
  body.roster-fullwidth-page .group-misc { grid-column: 7 / 8; }
  body.roster-fullwidth-page .group-status { grid-column: 8 / 9; }
  body.roster-fullwidth-page .group-promotion { grid-column: 9 / 10; }
  body.roster-fullwidth-page .group-certs { grid-column: 10 / -1; }
}

@media (max-width: 1200px) and (min-width: 901px) {
  body.roster-fullwidth-page .roster-line-grid {
    grid-template-columns:
      minmax(172px, 1.38fr)
      minmax(118px, .95fr)
      minmax(62px, .50fr)
      minmax(80px, .64fr)
      minmax(78px, .62fr)
      repeat(var(--cert-count, 8), minmax(36px, .30fr));
  }

  body.roster-fullwidth-page .roster-column-row > div:nth-child(5),
  body.roster-fullwidth-page .roster-column-row > div:nth-child(6),
  body.roster-fullwidth-page .roster-column-row > div:nth-child(10),
  body.roster-fullwidth-page .roster-column-row > div:nth-child(13),
  body.roster-fullwidth-page .roster-line-value[data-label="Phone"],
  body.roster-fullwidth-page .roster-line-value[data-label="Citizen ID"],
  body.roster-fullwidth-page .roster-line-value[data-label="Station"],
  body.roster-fullwidth-page .roster-line-value[data-label="Promotion"] {
    display: none;
  }

  body.roster-fullwidth-page .group-personal { grid-column: 4 / 4; display: none; }
  body.roster-fullwidth-page .group-misc { grid-column: 4 / 5; }
  body.roster-fullwidth-page .group-status { grid-column: 5 / 6; }
  body.roster-fullwidth-page .group-promotion { display: none; }
  body.roster-fullwidth-page .group-certs { grid-column: 6 / -1; }
}

@media (max-width: 900px) {
  .roster-header-block {
    display: none;
  }
}


/* Header groups as one big block per category */
.roster-header-block {
  position: sticky;
  top: 0;
  z-index: 6;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.roster-header-group {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
    var(--panel);
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

.roster-header-group-title {
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  text-align: center;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .70rem;
  font-weight: 1000;
  background: linear-gradient(135deg, rgba(255,59,34,.16), rgba(255,159,28,.08));
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.roster-header-fields {
  display: grid;
  gap: 0;
  min-height: 28px;
}

.fields-general { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fields-personal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fields-misc { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fields-single { grid-template-columns: 1fr; }
.fields-certs { grid-template-columns: repeat(var(--cert-count, 8), minmax(0, 1fr)); }

.roster-header-fields > div {
  min-height: 28px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--brand2);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .58rem;
  font-weight: 1000;
  background: rgba(255,255,255,.04);
  border-right: 1px solid rgba(255,255,255,.10);
}

.roster-header-fields > div:last-child {
  border-right: 0;
}

.roster-cert-title {
  gap: 1px;
  line-height: 1.05;
}

.roster-cert-title span,
.roster-cert-title strong {
  display: block;
}

.roster-cert-title span {
  font-size: .78rem;
  line-height: 1;
}

.roster-cert-title strong {
  font-size: .46rem;
  letter-spacing: .04em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.roster-fullwidth-page .roster-header-group-title {
  font-size: .64rem;
}

body.roster-fullwidth-page .roster-header-fields > div {
  font-size: .52rem;
}

body.roster-fullwidth-page .roster-cert-title span {
  font-size: .70rem;
}

body.roster-fullwidth-page .roster-cert-title strong {
  font-size: .42rem;
}

/* Hide old row-based grouped header styling */
.roster-group-row,
.roster-column-row,
.roster-title-group {
  display: none !important;
}

/* Responsive desktop sync with hidden row columns */
@media (max-width: 1500px) and (min-width: 901px) {
  body.roster-fullwidth-page .field-birth,
  body.roster-fullwidth-page .field-email,
  body.roster-fullwidth-page .field-join,
  body.roster-fullwidth-page .field-division,
  body.roster-fullwidth-page .field-notes {
    display: none;
  }

  body.roster-fullwidth-page .fields-personal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.roster-fullwidth-page .fields-misc {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  body.roster-fullwidth-page .field-phone,
  body.roster-fullwidth-page .field-citizen,
  body.roster-fullwidth-page .field-station,
  body.roster-fullwidth-page .field-promotion {
    display: none;
  }

  body.roster-fullwidth-page .group-promotion {
    display: none;
  }

  body.roster-fullwidth-page .fields-personal {
    display: none;
  }
}

@media (max-width: 900px) {
  .roster-header-block,
  .roster-header-group {
    display: none !important;
  }
}


/* Alignment fix: make grouped headers use the same proportional column widths as the data rows */
.fields-general {
  grid-template-columns: 1.15fr .86fr .42fr;
}

.fields-personal {
  grid-template-columns: .52fr .50fr .54fr .78fr;
}

.fields-misc {
  grid-template-columns: .52fr .56fr .60fr .66fr;
}

.fields-single {
  grid-template-columns: 1fr;
}

.fields-certs {
  grid-template-columns: repeat(var(--cert-count, 8), minmax(0, 1fr));
}

.roster-header-group {
  min-width: 0;
}

.roster-header-fields {
  min-width: 0;
}

.roster-header-fields > div {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-header-group-title,
.roster-header-fields > div,
.roster-line-member,
.roster-line-value,
.roster-cert-cell {
  box-sizing: border-box;
}

/* Full-width roster page ratios */
body.roster-fullwidth-page .fields-general {
  grid-template-columns: 1.10fr .78fr .38fr;
}

body.roster-fullwidth-page .fields-personal {
  grid-template-columns: .46fr .42fr .46fr .68fr;
}

body.roster-fullwidth-page .fields-misc {
  grid-template-columns: .46fr .48fr .50fr .56fr;
}

/* Medium desktop sync when some columns are hidden */
@media (max-width: 1500px) and (min-width: 901px) {
  body.roster-fullwidth-page .fields-general {
    grid-template-columns: 1.25fr .82fr .42fr;
  }

  body.roster-fullwidth-page .fields-personal {
    grid-template-columns: .48fr .54fr;
  }

  body.roster-fullwidth-page .fields-misc {
    grid-template-columns: .52fr;
  }
}

/* Smaller desktop sync when more columns are hidden */
@media (max-width: 1200px) and (min-width: 901px) {
  body.roster-fullwidth-page .fields-general {
    grid-template-columns: 1.38fr .95fr .50fr;
  }

  body.roster-fullwidth-page .fields-misc {
    grid-template-columns: .64fr;
  }
}

/* Keep mobile stacked mode unaffected */
@media (max-width: 900px) {
  .fields-general,
  .fields-personal,
  .fields-misc,
  .fields-single,
  .fields-certs {
    grid-template-columns: 1fr !important;
  }
}


/* Horizontal + vertical roster data centering */
.roster-line {
  align-items: stretch;
}

.roster-line > .roster-line-member,
.roster-line > .roster-line-value,
.roster-line > .roster-cert-cell {
  min-height: 38px;
  height: 100%;
  display: grid;
  place-items: center;
  align-self: stretch;
  text-align: center;
}

.roster-line-member {
  justify-content: center !important;
  align-items: center !important;
  padding-left: 0 !important;
}

.roster-line-member > div {
  width: 100%;
  display: grid;
  place-items: center;
  text-align: center;
}

.roster-line-member strong,
.roster-line-member small,
.roster-line-value,
.roster-cert-cell {
  text-align: center !important;
}

.roster-line-value {
  justify-content: center;
  align-content: center;
}

.roster-line-value .roster-status,
.roster-status {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
}

.roster-cert-cell span {
  margin: auto;
}

/* Keep certificate columns perfectly centered */
.roster-cert-cell.earned span,
.roster-cert-cell.missing span {
  display: grid;
  place-items: center;
}

/* Mobile stacked view: keep labels readable, center the actual value side */
@media (max-width: 900px) {
  .roster-line > .roster-line-member {
    min-height: 44px;
  }

  .roster-line > .roster-line-value,
  .roster-line > .roster-cert-cell {
    display: grid;
    grid-template-columns: 120px 1fr;
    place-items: center;
    text-align: center;
  }

  .roster-line-value::before,
  .roster-cert-cell::before {
    justify-self: start;
    text-align: left;
  }

  .roster-line-member,
  .roster-line-member strong,
  .roster-line-member small {
    text-align: center !important;
  }
}

/* Certificate header/data alignment fix */
.roster-line-scroll {
  --cert-col-width: clamp(42px, 2.95vw, 58px);
}

/*
  Keep the normal data grid and the grouped certificate header on the exact same
  fixed certificate column width. This prevents the cert title icons from drifting
  away from the checkmark cells.
*/
.roster-line-grid,
body.roster-fullwidth-page .roster-line-grid {
  grid-template-columns:
    minmax(160px, 1.10fr)
    minmax(112px, .78fr)
    minmax(60px, .38fr)
    minmax(80px, .46fr)
    minmax(74px, .42fr)
    minmax(78px, .46fr)
    minmax(108px, .68fr)
    minmax(80px, .46fr)
    minmax(82px, .48fr)
    minmax(86px, .50fr)
    minmax(92px, .56fr)
    minmax(74px, .42fr)
    minmax(78px, .46fr)
    repeat(var(--cert-count, 8), var(--cert-col-width));
}

.fields-certs {
  grid-template-columns: repeat(var(--cert-count, 8), var(--cert-col-width)) !important;
}

.group-certs {
  width: 100%;
}

.roster-cert-title,
.roster-cert-cell {
  width: var(--cert-col-width);
  min-width: var(--cert-col-width);
  max-width: var(--cert-col-width);
  justify-self: center;
  align-self: stretch;
}

.roster-cert-title {
  padding-left: 0;
  padding-right: 0;
}

.roster-cert-cell {
  display: grid !important;
  place-items: center !important;
  padding-left: 0;
  padding-right: 0;
}

.roster-cert-cell.earned span,
.roster-cert-cell.missing span {
  margin: 0 auto;
}

/* The cert header should not use flexible distribution different from rows. */
.roster-header-group.group-certs .roster-header-fields {
  justify-content: center;
}

/* Medium desktop: keep cert columns fixed and aligned even when some info columns are hidden. */
@media (max-width: 1500px) and (min-width: 901px) {
  .roster-line-scroll {
    --cert-col-width: clamp(40px, 3.05vw, 54px);
  }

  body.roster-fullwidth-page .roster-line-grid {
    grid-template-columns:
      minmax(168px, 1.25fr)
      minmax(112px, .82fr)
      minmax(62px, .42fr)
      minmax(76px, .48fr)
      minmax(84px, .54fr)
      minmax(82px, .52fr)
      minmax(90px, .60fr)
      minmax(76px, .48fr)
      repeat(var(--cert-count, 8), var(--cert-col-width));
  }

  body.roster-fullwidth-page .fields-certs {
    grid-template-columns: repeat(var(--cert-count, 8), var(--cert-col-width)) !important;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .roster-line-scroll {
    --cert-col-width: clamp(38px, 3.15vw, 50px);
  }

  body.roster-fullwidth-page .roster-line-grid {
    grid-template-columns:
      minmax(172px, 1.38fr)
      minmax(118px, .95fr)
      minmax(62px, .50fr)
      minmax(80px, .64fr)
      minmax(78px, .62fr)
      repeat(var(--cert-count, 8), var(--cert-col-width));
  }

  body.roster-fullwidth-page .fields-certs {
    grid-template-columns: repeat(var(--cert-count, 8), var(--cert-col-width)) !important;
  }
}

/* Mobile stacked view should not inherit fixed cert widths. */
@media (max-width: 900px) {
  .roster-cert-title,
  .roster-cert-cell {
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .fields-certs {
    grid-template-columns: 1fr !important;
  }
}


/* Roster certificate alignment final: header and row use the same cert wrapper grid */
.roster-cert-row {
  grid-column: 14 / -1;
  display: grid;
  grid-template-columns: repeat(var(--cert-count, 8), minmax(0, 1fr));
  gap: 0;
  align-self: stretch;
  min-width: 0;
  width: 100%;
}

.fields-certs {
  grid-template-columns: repeat(var(--cert-count, 8), minmax(0, 1fr)) !important;
  width: 100%;
  justify-content: stretch !important;
}

.group-certs .roster-header-fields {
  justify-content: stretch !important;
}

.roster-cert-title,
.roster-cert-cell {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

.roster-cert-cell {
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  min-height: 38px;
  padding: 0;
}

.roster-cert-cell span {
  margin: auto !important;
}

/* Keep all roster data centered horizontally and vertically */
.roster-line {
  align-items: stretch;
}

.roster-line > .roster-line-member,
.roster-line > .roster-line-value,
.roster-line > .roster-cert-row {
  min-height: 38px;
  height: 100%;
  align-self: stretch;
}

.roster-line > .roster-line-member,
.roster-line > .roster-line-value {
  display: grid;
  place-items: center;
  text-align: center;
}

.roster-line-member {
  justify-content: center !important;
  align-items: center !important;
  padding-left: 0 !important;
}

.roster-line-member > div {
  width: 100%;
  display: grid;
  place-items: center;
  text-align: center;
}

.roster-line-member strong,
.roster-line-member small,
.roster-line-value {
  text-align: center !important;
}

.roster-status {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
}

/* Sync certificate wrapper span with responsive hidden-column layouts */
@media (max-width: 1500px) and (min-width: 901px) {
  body.roster-fullwidth-page .roster-cert-row {
    grid-column: 10 / -1;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  body.roster-fullwidth-page .roster-cert-row {
    grid-column: 6 / -1;
  }
}

/* Mobile: cert wrapper becomes stacked rows like the other values */
@media (max-width: 900px) {
  .roster-cert-row {
    grid-column: auto;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .roster-cert-cell {
    display: grid !important;
    grid-template-columns: 120px 1fr;
    place-items: center;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--line);
  }

  .roster-cert-cell::before {
    content: attr(data-label);
    justify-self: start;
    text-align: left;
    color: var(--brand2);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .66rem;
    font-weight: 1000;
  }
}

/* Admin roster category submenus */
.admin-nav-category {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}

.admin-nav-category-title {
  padding: 8px 10px;
  color: var(--brand2);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: .68rem;
  font-weight: 1000;
}

.admin-subnav {
  display: grid;
  gap: 4px;
}

.admin-subnav a {
  margin-top: 0 !important;
  padding: 10px 12px 10px 18px !important;
  font-size: .9rem;
}

.admin-subnav a::before {
  content: "•";
  color: var(--brand2);
  margin-right: 2px;
}


/* Admin menu redesigned to match public Firehouse OS sidebar */
.admin-firehouse-shell {
  grid-template-columns: var(--side, 286px) 1fr;
}

.admin-sidebar {
  display: block;
}

.admin-sidebar .brand img {
  background: rgba(255,255,255,.04);
}

.admin-user-card {
  margin-top: 24px;
  margin-bottom: 24px;
}

.admin-side-nav {
  display: grid;
  gap: 22px;
}

.admin-side-nav .nav-group {
  display: grid;
  gap: 4px;
}

.admin-side-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--muted);
  transition: .18s ease;
}

.admin-side-nav .nav-link:hover,
.admin-side-nav .nav-link.active {
  color: var(--text);
  background: linear-gradient(90deg, rgba(255,59,34,.18), rgba(255,159,28,.05));
}

.admin-side-nav .nav-link.active {
  box-shadow: inset 3px 0 0 var(--brand);
}

.admin-side-nav .nav-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--brand2);
}

.admin-side-nav .nav-parent-row {
  position: relative;
  display: block;
}

.admin-side-nav .nav-parent-row .nav-link {
  padding-right: 52px;
}

.admin-side-nav .submenu-toggle {
  position: absolute;
  right: 12px;
  top: 0;
  bottom: 0;
  width: 28px;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand2);
  cursor: pointer;
}

.admin-side-nav .submenu-chevron {
  width: 18px;
  height: 18px;
  display: block;
  transform-origin: 50% 50%;
  transition: transform .18s ease, color .18s ease;
}

.admin-side-nav .submenu-chevron path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-side-nav .nav-item.submenu-open .submenu-chevron {
  transform: rotate(180deg);
}

.admin-side-nav .submenu-links {
  display: grid;
  gap: 2px;
  margin: 0 0 8px 40px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .24s ease, opacity .18s ease, transform .18s ease;
}

.admin-side-nav .nav-item.submenu-open .submenu-links {
  max-height: 520px;
  opacity: 1;
  transform: translateY(0);
}

.admin-side-nav .submenu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 12px;
  color: var(--muted);
  font-size: .84rem;
  transition: .18s ease;
}

.admin-side-nav .submenu-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

.admin-side-nav .submenu-link:hover,
.admin-side-nav .submenu-link.active {
  color: var(--brand2);
  background: rgba(255,159,28,.08);
}

.admin-head.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
}

.admin-content.content {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 28px;
}

.admin-content .card {
  border-radius: var(--r);
}

.admin-mobile-menu-button {
  display: none;
}

.admin-mobile-drawer {
  display: none;
}

.admin-mobile-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.admin-mobile-actions .btn2 {
  justify-content: flex-start;
}

/* Override older admin-nav category styling so it no longer looks separate from the front-end menu */
.admin-nav-category {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-nav-category-title,
.admin-subnav {
  display: none;
}

@media (max-width: 900px) {
  .admin-firehouse-shell {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    display: none;
  }

  .admin-mobile-menu-button {
    display: inline-flex;
  }

  .admin-content.content {
    padding: 18px 14px 96px;
  }

  .admin-mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    background: rgba(0,0,0,.55);
  }

  body.admin-drawer-open .admin-mobile-drawer {
    display: block;
  }

  .admin-view-site {
    display: none;
  }
}


/* Roster layout stabilization: prevent cert-heavy headers from clipping/weird stretching */
body.roster-fullwidth-page .roster-line-board {
  overflow: visible !important;
}

body.roster-fullwidth-page .roster-line-scroll,
.roster-line-scroll {
  overflow-x: auto !important;
  overflow-y: visible;
  padding-bottom: 10px;
}

/*
  Use a consistent minimum roster width. It can scroll horizontally only when
  there are too many columns to physically fit, instead of clipping/warping.
*/
.roster-header-block,
.roster-line {
  min-width: max(1320px, calc(1040px + (var(--cert-count, 8) * 44px)));
}

.roster-line-grid,
body.roster-fullwidth-page .roster-line-grid {
  grid-template-columns:
    minmax(150px, 1.05fr)
    minmax(110px, .75fr)
    minmax(58px, .36fr)
    minmax(78px, .44fr)
    minmax(72px, .40fr)
    minmax(76px, .44fr)
    minmax(104px, .64fr)
    minmax(78px, .44fr)
    minmax(78px, .46fr)
    minmax(82px, .48fr)
    minmax(86px, .50fr)
    minmax(72px, .40fr)
    minmax(76px, .44fr)
    minmax(calc(var(--cert-count, 8) * 44px), calc(var(--cert-count, 8) * 44px));
}

.roster-cert-row,
.fields-certs {
  grid-template-columns: repeat(var(--cert-count, 8), 44px) !important;
}

.group-certs {
  min-width: calc(var(--cert-count, 8) * 44px);
}

.roster-cert-title,
.roster-cert-cell {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
}

.roster-cert-cell {
  display: grid !important;
  place-items: center !important;
}

/* Cleaner compact header so it does not look warped */
.roster-header-block {
  gap: 6px;
}

.roster-header-group-title {
  white-space: nowrap;
}

.roster-header-fields > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep desktop scroll stable; do not hide random columns and break header/data alignment */
@media (max-width: 1500px) and (min-width: 901px) {
  body.roster-fullwidth-page .roster-line-grid {
    grid-template-columns:
      minmax(150px, 1.05fr)
      minmax(110px, .75fr)
      minmax(58px, .36fr)
      minmax(78px, .44fr)
      minmax(72px, .40fr)
      minmax(76px, .44fr)
      minmax(104px, .64fr)
      minmax(78px, .44fr)
      minmax(78px, .46fr)
      minmax(82px, .48fr)
      minmax(86px, .50fr)
      minmax(72px, .40fr)
      minmax(76px, .44fr)
      minmax(calc(var(--cert-count, 8) * 44px), calc(var(--cert-count, 8) * 44px));
  }

  body.roster-fullwidth-page .roster-column-row > div,
  body.roster-fullwidth-page .roster-line-value,
  body.roster-fullwidth-page .group-personal,
  body.roster-fullwidth-page .group-misc,
  body.roster-fullwidth-page .group-status,
  body.roster-fullwidth-page .group-promotion,
  body.roster-fullwidth-page .field-birth,
  body.roster-fullwidth-page .field-email,
  body.roster-fullwidth-page .field-join,
  body.roster-fullwidth-page .field-division,
  body.roster-fullwidth-page .field-notes,
  body.roster-fullwidth-page .field-phone,
  body.roster-fullwidth-page .field-citizen,
  body.roster-fullwidth-page .field-station,
  body.roster-fullwidth-page .field-promotion {
    display: grid;
  }

  body.roster-fullwidth-page .fields-personal {
    grid-template-columns: .44fr .40fr .44fr .64fr;
  }

  body.roster-fullwidth-page .fields-misc {
    grid-template-columns: .44fr .46fr .48fr .50fr;
  }

  body.roster-fullwidth-page .group-personal { grid-column: 4 / 8; }
  body.roster-fullwidth-page .group-misc { grid-column: 8 / 12; }
  body.roster-fullwidth-page .group-status { grid-column: 12 / 13; }
  body.roster-fullwidth-page .group-promotion { grid-column: 13 / 14; }
  body.roster-fullwidth-page .group-certs { grid-column: 14 / -1; }
  body.roster-fullwidth-page .roster-cert-row { grid-column: 14 / -1; }
}

@media (max-width: 1200px) and (min-width: 901px) {
  body.roster-fullwidth-page .roster-line-grid {
    grid-template-columns:
      minmax(150px, 1.05fr)
      minmax(110px, .75fr)
      minmax(58px, .36fr)
      minmax(78px, .44fr)
      minmax(72px, .40fr)
      minmax(76px, .44fr)
      minmax(104px, .64fr)
      minmax(78px, .44fr)
      minmax(78px, .46fr)
      minmax(82px, .48fr)
      minmax(86px, .50fr)
      minmax(72px, .40fr)
      minmax(76px, .44fr)
      minmax(calc(var(--cert-count, 8) * 44px), calc(var(--cert-count, 8) * 44px));
  }

  body.roster-fullwidth-page .group-promotion {
    display: grid;
  }

  body.roster-fullwidth-page .fields-personal {
    display: grid;
  }

  body.roster-fullwidth-page .roster-cert-row {
    grid-column: 14 / -1;
  }
}
/* FINAL roster fit fix: no forced horizontal scrollbar / no layout warping */
body.roster-fullwidth-page .roster-line-board,
.roster-line-board {
  overflow: hidden !important;
}

body.roster-fullwidth-page .roster-line-scroll,
.roster-line-scroll {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding-bottom: 0 !important;
}

/*
  Remove the previous forced min-width. The header and rows now use the exact
  same full-width grid and shrink inside the page.
*/
.roster-header-block,
.roster-line {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/*
  13 information columns + one certificates wrapper column.
  Certificates wrapper contains the actual cert columns.
*/
.roster-line-grid,
body.roster-fullwidth-page .roster-line-grid {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-template-columns:
    minmax(90px, 1.30fr)   /* Name */
    minmax(82px, .95fr)    /* Rank */
    minmax(44px, .45fr)    /* Badge */
    minmax(64px, .58fr)    /* Birth */
    minmax(58px, .54fr)    /* Phone */
    minmax(60px, .56fr)    /* CID */
    minmax(80px, .80fr)    /* Email */
    minmax(64px, .58fr)    /* Join */
    minmax(58px, .56fr)    /* Division */
    minmax(58px, .56fr)    /* Station */
    minmax(58px, .56fr)    /* Notes */
    minmax(58px, .54fr)    /* Status */
    minmax(64px, .58fr)    /* Promotion */
    minmax(190px, calc(var(--cert-count, 8) * 1fr)); /* Certificates */
  gap: 6px !important;
}

/* Keep grouped blocks aligned with data columns */
.group-general { grid-column: 1 / 4 !important; }
.group-personal { grid-column: 4 / 8 !important; }
.group-misc { grid-column: 8 / 12 !important; }
.group-status { grid-column: 12 / 13 !important; }
.group-promotion { grid-column: 13 / 14 !important; }
.group-certs { grid-column: 14 / -1 !important; }

.roster-cert-row {
  grid-column: 14 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(var(--cert-count, 8), minmax(0, 1fr)) !important;
  gap: 4px !important;
  align-self: stretch;
}

.fields-certs {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(var(--cert-count, 8), minmax(0, 1fr)) !important;
  gap: 0 !important;
}

.group-certs {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.roster-cert-title,
.roster-cert-cell {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

/* Make every cell shrink cleanly instead of expanding the row */
.roster-header-group,
.roster-header-fields,
.roster-header-fields > div,
.roster-line > div,
.roster-line-member,
.roster-line-value,
.roster-cert-cell {
  min-width: 0 !important;
}

.roster-line-member strong,
.roster-line-member small,
.roster-line-value,
.roster-header-fields > div,
.roster-cert-title strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact cert visuals so the cert block does not dominate the roster */
.roster-cert-title span {
  font-size: .68rem !important;
}

.roster-cert-title strong {
  font-size: .40rem !important;
}

.roster-cert-cell.earned span {
  width: 20px !important;
  height: 20px !important;
  border-radius: 7px !important;
}

/* Compact row/header typography for full-width fit */
body.roster-fullwidth-page .roster-title-group,
body.roster-fullwidth-page .roster-header-group-title,
.roster-header-group-title {
  font-size: .58rem !important;
  min-height: 28px !important;
}

body.roster-fullwidth-page .roster-column-row > div,
body.roster-fullwidth-page .roster-header-fields > div,
.roster-header-fields > div {
  font-size: .48rem !important;
  min-height: 26px !important;
}

body.roster-fullwidth-page .roster-line-value,
.roster-line-value {
  font-size: .72rem !important;
}

body.roster-fullwidth-page .roster-line-member strong,
.roster-line-member strong {
  font-size: .76rem !important;
}

body.roster-fullwidth-page .roster-line {
  padding: 8px !important;
}

/*
  Medium screens: hide less-critical fields while keeping the same group/data
  alignment. This prevents the layout from collapsing.
*/
@media (max-width: 1500px) and (min-width: 901px) {
  body.roster-fullwidth-page .roster-line-grid,
  .roster-line-grid {
    grid-template-columns:
      minmax(100px, 1.35fr)
      minmax(86px, .95fr)
      minmax(46px, .45fr)
      minmax(58px, .54fr)
      minmax(58px, .56fr)
      minmax(58px, .56fr)
      minmax(56px, .54fr)
      minmax(60px, .58fr)
      minmax(190px, 2.3fr);
  }

  .group-general { grid-column: 1 / 4 !important; }
  .group-personal { grid-column: 4 / 6 !important; }
  .group-misc { grid-column: 6 / 7 !important; }
  .group-status { grid-column: 7 / 8 !important; }
  .group-promotion { grid-column: 8 / 9 !important; }
  .group-certs { grid-column: 9 / -1 !important; }
  .roster-cert-row { grid-column: 9 / -1 !important; }

  .field-birth,
  .field-email,
  .field-join,
  .field-division,
  .field-notes,
  .roster-line-value[data-label="Birth Date"],
  .roster-line-value[data-label="E-Mail"],
  .roster-line-value[data-label="Join Date"],
  .roster-line-value[data-label="Division"],
  .roster-line-value[data-label="Notes"] {
    display: none !important;
  }

  .fields-personal {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .fields-misc {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  body.roster-fullwidth-page .roster-line-grid,
  .roster-line-grid {
    grid-template-columns:
      minmax(100px, 1.40fr)
      minmax(86px, 1fr)
      minmax(46px, .45fr)
      minmax(56px, .56fr)
      minmax(56px, .56fr)
      minmax(190px, 2.5fr);
  }

  .group-general { grid-column: 1 / 4 !important; }
  .group-personal { grid-column: 4 / 4 !important; display: none !important; }
  .group-misc { grid-column: 4 / 5 !important; }
  .group-status { grid-column: 5 / 6 !important; }
  .group-promotion { display: none !important; }
  .group-certs { grid-column: 6 / -1 !important; }
  .roster-cert-row { grid-column: 6 / -1 !important; }

  .field-phone,
  .field-citizen,
  .field-station,
  .field-promotion,
  .roster-line-value[data-label="Phone"],
  .roster-line-value[data-label="Citizen ID"],
  .roster-line-value[data-label="Station"],
  .roster-line-value[data-label="Promotion"] {
    display: none !important;
  }
}

/* Mobile remains stacked/readable */
@media (max-width: 900px) {
  .roster-line-scroll {
    overflow-x: hidden !important;
  }

  .roster-header-block {
    display: none !important;
  }

  .roster-line,
  .roster-line-grid {
    min-width: 0 !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .roster-cert-row {
    grid-column: auto !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}


/* CLEAN PUBLIC ROSTER GRID - overrides previous experimental roster layouts */
body.roster-fullwidth-page .content {
  width: 100% !important;
  max-width: none !important;
  padding-left: clamp(14px, 1.4vw, 24px) !important;
  padding-right: clamp(14px, 1.4vw, 24px) !important;
}

.fd-roster-board {
  width: 100%;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.10), transparent 28rem),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.fd-roster-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  display: grid;
  gap: 12px;
  padding-bottom: 6px;
}

.fd-roster-grid {
  display: grid !important;
  grid-template-columns:
    minmax(110px, 1.18fr)
    minmax(100px, .95fr)
    minmax(58px, .48fr)
    minmax(82px, .62fr)
    minmax(74px, .56fr)
    minmax(78px, .58fr)
    minmax(96px, .82fr)
    minmax(82px, .62fr)
    minmax(76px, .58fr)
    minmax(76px, .58fr)
    minmax(76px, .58fr)
    minmax(74px, .56fr)
    minmax(82px, .62fr)
    repeat(var(--cert-count, 8), minmax(42px, .34fr));
  gap: 6px;
  min-width: 0;
  width: 100%;
  align-items: stretch;
}

.fd-roster-header {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0;
}

.fd-roster-group,
.fd-roster-field {
  min-width: 0;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}

.fd-roster-group {
  min-height: 30px;
  padding: 0 8px;
  border-radius: 14px 14px 4px 4px;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(255,59,34,.16), rgba(255,159,28,.08)),
    rgba(255,255,255,.035);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .66rem;
  font-weight: 1000;
  white-space: nowrap;
}

.fd-roster-field {
  min-height: 30px;
  padding: 0 5px;
  border-radius: 4px 4px 12px 12px;
  color: var(--brand2);
  background: rgba(255,255,255,.045);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .54rem;
  font-weight: 1000;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fd-group-general { grid-column: 1 / 4; }
.fd-group-personal { grid-column: 4 / 8; }
.fd-group-misc { grid-column: 8 / 12; }
.fd-group-status { grid-column: 12 / 13; }
.fd-group-promotion { grid-column: 13 / 14; }
.fd-group-certs { grid-column: 14 / -1; }

.fd-roster-section {
  display: grid;
  gap: 8px;
}

.fd-roster-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.025)),
    var(--panel);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 1000;
}

.fd-roster-section-title small {
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: .72rem;
}

.fd-roster-row {
  position: relative;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    var(--panel);
  box-shadow: 0 14px 38px rgba(0,0,0,.13);
  overflow: hidden;
}

.fd-roster-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand), var(--brand2));
}

.fd-roster-cell {
  min-width: 0;
  min-height: 36px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 900;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fd-roster-cell > * {
  min-width: 0;
  max-width: 100%;
}

.fd-roster-name {
  color: var(--text);
  font-weight: 1000;
}

.fd-roster-name strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fd-cert-head {
  gap: 1px;
  line-height: 1;
}

.fd-cert-head span,
.fd-cert-head strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fd-cert-head span {
  font-size: .76rem;
}

.fd-cert-head strong {
  font-size: .42rem;
  letter-spacing: .04em;
}

.fd-cert-cell span {
  display: grid;
  place-items: center;
}

.fd-cert-cell.earned span {
  width: 21px;
  height: 21px;
  border-radius: 8px;
  color: var(--ok);
  background: rgba(51,209,122,.14);
  border: 1px solid rgba(51,209,122,.28);
}

.fd-cert-cell.missing span {
  color: var(--faint);
  opacity: .55;
}

.fd-roster-cell .roster-status {
  margin: auto;
}

/* Fit common desktop widths without breaking alignment */
@media (max-width: 1500px) and (min-width: 901px) {
  .fd-roster-grid {
    grid-template-columns:
      minmax(112px, 1.25fr)
      minmax(94px, .95fr)
      minmax(54px, .48fr)
      minmax(72px, .58fr)
      minmax(72px, .58fr)
      minmax(72px, .58fr)
      minmax(70px, .56fr)
      minmax(72px, .58fr)
      minmax(76px, .62fr)
      repeat(var(--cert-count, 8), minmax(40px, .34fr));
  }

  .fd-group-general { grid-column: 1 / 4; }
  .fd-group-personal { grid-column: 4 / 6; }
  .fd-group-misc { grid-column: 6 / 7; }
  .fd-group-status { grid-column: 7 / 8; }
  .fd-group-promotion { grid-column: 8 / 9; }
  .fd-group-certs { grid-column: 9 / -1; }

  .fd-roster-field:nth-of-type(4),
  .fd-roster-field:nth-of-type(7),
  .fd-roster-field:nth-of-type(8),
  .fd-roster-field:nth-of-type(9),
  .fd-roster-field:nth-of-type(11),
  .fd-roster-cell[data-label="Birth Date"],
  .fd-roster-cell[data-label="E-Mail"],
  .fd-roster-cell[data-label="Join Date"],
  .fd-roster-cell[data-label="Division"],
  .fd-roster-cell[data-label="Notes"] {
    display: none;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .fd-roster-grid {
    grid-template-columns:
      minmax(116px, 1.30fr)
      minmax(92px, .98fr)
      minmax(54px, .50fr)
      minmax(72px, .62fr)
      minmax(70px, .60fr)
      repeat(var(--cert-count, 8), minmax(38px, .36fr));
  }

  .fd-group-general { grid-column: 1 / 4; }
  .fd-group-personal { display: none; }
  .fd-group-misc { grid-column: 4 / 5; }
  .fd-group-status { grid-column: 5 / 6; }
  .fd-group-promotion { display: none; }
  .fd-group-certs { grid-column: 6 / -1; }

  .fd-roster-field:nth-of-type(5),
  .fd-roster-field:nth-of-type(6),
  .fd-roster-field:nth-of-type(10),
  .fd-roster-field:nth-of-type(13),
  .fd-roster-cell[data-label="Phone"],
  .fd-roster-cell[data-label="Citizen ID"],
  .fd-roster-cell[data-label="Station"],
  .fd-roster-cell[data-label="Promotion"] {
    display: none;
  }
}

/* Mobile stacked view */
@media (max-width: 900px) {
  .fd-roster-board {
    padding: 14px;
  }

  .fd-roster-scroll {
    overflow-x: hidden;
  }

  .fd-roster-header {
    display: none !important;
  }

  .fd-roster-grid,
  .fd-roster-row {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr !important;
  }

  .fd-roster-row {
    padding: 14px;
  }

  .fd-roster-cell {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 12px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--line);
    white-space: normal;
  }

  .fd-roster-cell::before {
    content: attr(data-label);
    justify-self: start;
    text-align: left;
    color: var(--brand2);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .66rem;
    font-weight: 1000;
  }

  .fd-roster-section-title {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Roster scroll-width lock:
   Header and personnel rows now keep the same width when the viewport is smaller.
   The whole roster scrolls together instead of the rows shrinking under a wider header. */
.fd-roster-scroll {
  --fd-roster-min-width: max(1180px, calc(980px + (var(--cert-count, 8) * 46px)));
  overflow-x: auto !important;
  overflow-y: visible;
}

.fd-roster-header,
.fd-roster-row {
  width: var(--fd-roster-min-width) !important;
  min-width: var(--fd-roster-min-width) !important;
  max-width: none !important;
}

.fd-roster-grid {
  width: var(--fd-roster-min-width) !important;
  min-width: var(--fd-roster-min-width) !important;
  max-width: none !important;
}

/* Keep the section title the same scroll width too, so it lines up visually. */
.fd-roster-section-title {
  width: var(--fd-roster-min-width) !important;
  min-width: var(--fd-roster-min-width) !important;
  max-width: none !important;
}

/* On wide screens, allow it to fill the page instead of being stuck at the minimum. */
@media (min-width: 1600px) {
  .fd-roster-scroll {
    --fd-roster-min-width: 100%;
  }

  .fd-roster-header,
  .fd-roster-row,
  .fd-roster-grid,
  .fd-roster-section-title {
    width: 100% !important;
    min-width: 100% !important;
  }
}

/* Mobile keeps the stacked layout and should not use the desktop scroll lock. */
@media (max-width: 900px) {
  .fd-roster-scroll {
    --fd-roster-min-width: 100%;
    overflow-x: hidden !important;
  }

  .fd-roster-header,
  .fd-roster-row,
  .fd-roster-grid,
  .fd-roster-section-title {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


/* TRUE roster scroll lock:
   The header and every personnel row use the same PHP-calculated pixel width.
   Nothing shrinks when the viewport is smaller; the whole roster scrolls as one grid. */
.fd-roster-board {
  overflow: hidden !important;
}

.fd-roster-scroll {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 8px !important;
}

/* Force all desktop header/row grids to the same fixed width. */
@media (min-width: 901px) {
  .fd-roster-header,
  .fd-roster-row,
  .fd-roster-grid,
  .fd-roster-section-title {
    width: var(--roster-grid-width) !important;
    min-width: var(--roster-grid-width) !important;
    max-width: var(--roster-grid-width) !important;
  }

  .fd-roster-grid {
    grid-template-columns:
      150px  /* Name */
      130px  /* Rank */
      70px   /* Badge */
      92px   /* Birth Date */
      82px   /* Phone */
      90px   /* Citizen ID */
      130px  /* E-Mail */
      92px   /* Join Date */
      90px   /* Division */
      90px   /* Station */
      90px   /* Notes */
      90px   /* Status */
      96px   /* Promotion */
      repeat(var(--cert-count), 54px) !important;
    gap: 6px !important;
  }

  .fd-group-general { grid-column: 1 / 4 !important; display: grid !important; }
  .fd-group-personal { grid-column: 4 / 8 !important; display: grid !important; }
  .fd-group-misc { grid-column: 8 / 12 !important; display: grid !important; }
  .fd-group-status { grid-column: 12 / 13 !important; display: grid !important; }
  .fd-group-promotion { grid-column: 13 / 14 !important; display: grid !important; }
  .fd-group-certs { grid-column: 14 / -1 !important; display: grid !important; }

  .fd-roster-field,
  .fd-roster-cell,
  .fd-cert-cell,
  .fd-cert-head {
    display: grid !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .fd-roster-field,
  .fd-roster-cell {
    place-items: center !important;
    text-align: center !important;
  }

  /* Undo older responsive hiding rules on desktop. The fixed scroll grid can show all columns. */
  .fd-roster-field:nth-of-type(4),
  .fd-roster-field:nth-of-type(5),
  .fd-roster-field:nth-of-type(6),
  .fd-roster-field:nth-of-type(7),
  .fd-roster-field:nth-of-type(8),
  .fd-roster-field:nth-of-type(9),
  .fd-roster-field:nth-of-type(10),
  .fd-roster-field:nth-of-type(11),
  .fd-roster-field:nth-of-type(13),
  .fd-roster-cell[data-label="Birth Date"],
  .fd-roster-cell[data-label="Phone"],
  .fd-roster-cell[data-label="Citizen ID"],
  .fd-roster-cell[data-label="E-Mail"],
  .fd-roster-cell[data-label="Join Date"],
  .fd-roster-cell[data-label="Division"],
  .fd-roster-cell[data-label="Station"],
  .fd-roster-cell[data-label="Notes"],
  .fd-roster-cell[data-label="Promotion"] {
    display: grid !important;
  }

  .fd-roster-field,
  .fd-roster-cell,
  .fd-roster-name strong,
  .fd-cert-head strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .fd-cert-head,
  .fd-cert-cell {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
  }

  .fd-cert-cell span {
    margin: auto !important;
  }
}

/* Mobile keeps the stacked layout only. */
@media (max-width: 900px) {
  .fd-roster-scroll {
    overflow-x: hidden !important;
  }

  .fd-roster-header {
    display: none !important;
  }

  .fd-roster-header,
  .fd-roster-row,
  .fd-roster-grid,
  .fd-roster-section-title {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .fd-roster-grid,
  .fd-roster-row {
    grid-template-columns: 1fr !important;
  }
}


/* Full-width desktop roster expansion:
   Keep the fixed minimum width for smaller desktop windows,
   but expand the roster grid to 100% on wider screens. */
@media (min-width: 901px) {
  .fd-roster-header,
  .fd-roster-row,
  .fd-roster-grid,
  .fd-roster-section-title {
    width: max(100%, var(--roster-grid-width)) !important;
    min-width: var(--roster-grid-width) !important;
    max-width: none !important;
  }

  .fd-roster-grid {
    grid-template-columns:
      minmax(150px, 1.18fr)  /* Name */
      minmax(130px, .98fr)   /* Rank */
      minmax(70px, .48fr)    /* Badge */
      minmax(92px, .62fr)    /* Birth Date */
      minmax(82px, .56fr)    /* Phone */
      minmax(90px, .60fr)    /* Citizen ID */
      minmax(130px, .90fr)   /* E-Mail */
      minmax(92px, .62fr)    /* Join Date */
      minmax(90px, .60fr)    /* Division */
      minmax(90px, .60fr)    /* Station */
      minmax(90px, .60fr)    /* Notes */
      minmax(90px, .58fr)    /* Status */
      minmax(96px, .62fr)    /* Promotion */
      repeat(var(--cert-count), minmax(54px, .38fr)) !important;
  }

  .fd-cert-head,
  .fd-cert-cell {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* On very wide screens, give the public roster more breathing room but keep alignment. */
@media (min-width: 1700px) {
  .fd-roster-grid {
    grid-template-columns:
      minmax(170px, 1.20fr)
      minmax(145px, 1fr)
      minmax(82px, .50fr)
      minmax(106px, .64fr)
      minmax(96px, .58fr)
      minmax(104px, .62fr)
      minmax(150px, .92fr)
      minmax(106px, .64fr)
      minmax(104px, .62fr)
      minmax(104px, .62fr)
      minmax(104px, .62fr)
      minmax(104px, .60fr)
      minmax(112px, .64fr)
      repeat(var(--cert-count), minmax(64px, .40fr)) !important;
  }
}


/* Personnel Management drag/drop ordering */
.personnel-order-card {
  display: grid;
  gap: 18px;
}

.personnel-order-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.personnel-order-header h2 {
  margin: 6px 0 4px;
}

.personnel-order-header p {
  margin: 0;
}

.personnel-order-sections {
  display: grid;
  gap: 18px;
}

.personnel-sort-section {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    var(--panel);
}

.personnel-sort-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,159,28,.08);
  border: 1px solid rgba(255,159,28,.14);
}

.personnel-sort-section-title strong {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82rem;
}

.personnel-sort-section-title span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}

.personnel-sort-list {
  display: grid;
  gap: 8px;
  min-height: 20px;
}

.personnel-sort-row {
  display: grid;
  grid-template-columns: 40px minmax(180px, 1.6fr) 100px minmax(110px, .8fr) 82px auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    var(--panel2, var(--panel));
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  cursor: grab;
  transition: transform .14s ease, border-color .14s ease, opacity .14s ease;
}

.personnel-sort-row:hover {
  border-color: rgba(255,159,28,.25);
  transform: translateY(-1px);
}

.personnel-sort-row.dragging {
  opacity: .48;
  cursor: grabbing;
  border-color: rgba(255,159,28,.50);
}

.drag-handle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--brand2);
  background: rgba(255,159,28,.10);
  border: 1px solid rgba(255,159,28,.16);
  font-weight: 1000;
  cursor: grab;
}

.sort-member-main {
  min-width: 0;
}

.sort-member-main strong,
.sort-member-main small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sort-member-main small {
  color: var(--muted);
  margin-top: 2px;
  font-size: .78rem;
}

.sort-pill {
  display: inline-grid;
  place-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(51,209,122,.12);
  border: 1px solid rgba(51,209,122,.22);
  color: var(--ok);
  font-size: .78rem;
  font-weight: 1000;
}

.sort-meta,
.sort-visible {
  color: var(--muted);
  font-weight: 800;
  font-size: .84rem;
  text-align: center;
}

.sort-actions {
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .personnel-order-header {
    align-items: stretch;
    flex-direction: column;
  }

  .personnel-sort-row {
    grid-template-columns: 40px 1fr;
  }

  .sort-pill,
  .sort-meta,
  .sort-visible,
  .sort-actions {
    grid-column: 2;
    justify-self: start;
  }

  .sort-actions {
    justify-content: flex-start;
  }
}


/* Personnel auto-save status */
.personnel-autosave-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font-size: .88rem;
}

.autosave-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--muted);
  box-shadow: 0 0 0 0 rgba(255,255,255,.2);
}

.personnel-autosave-box.saving {
  color: var(--brand2);
  border-color: rgba(255,159,28,.28);
  background: rgba(255,159,28,.08);
}

.personnel-autosave-box.saving .autosave-dot {
  background: var(--brand2);
  animation: autosavePulse 1s infinite;
}

.personnel-autosave-box.saved {
  color: var(--ok);
  border-color: rgba(51,209,122,.28);
  background: rgba(51,209,122,.08);
}

.personnel-autosave-box.saved .autosave-dot {
  background: var(--ok);
}

.personnel-autosave-box.error {
  color: var(--bad);
  border-color: rgba(255,77,90,.28);
  background: rgba(255,77,90,.08);
}

.personnel-autosave-box.error .autosave-dot {
  background: var(--bad);
}

@keyframes autosavePulse {
  70% { box-shadow: 0 0 0 9px rgba(255,159,28,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,159,28,0); }
}

@media (max-width: 900px) {
  .personnel-autosave-box {
    width: 100%;
    justify-content: center;
    border-radius: 16px;
    padding: 10px 14px;
  }
}


/* Personnel Management full-width editor redesign */
.personnel-editor-section {
  margin-top: 28px;
}

.personnel-editor-card {
  display: grid;
  gap: 22px;
  padding: clamp(20px, 2vw, 30px);
}

.personnel-editor-head,
.personnel-editor-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.personnel-editor-head h2 {
  margin: 8px 0 6px;
  letter-spacing: -.04em;
}

.personnel-editor-head p,
.personnel-editor-footer .muted {
  margin: 0;
  line-height: 1.55;
}

.personnel-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.personnel-form-layout {
  display: grid;
  gap: 18px;
}

.personnel-form-group {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    var(--panel);
}

.personnel-form-group-title {
  display: flex;
  align-items: center;
  gap: 13px;
}

.personnel-form-group-title > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 12px 28px rgba(255,59,34,.22);
}

.personnel-form-group-title h3 {
  margin: 0;
  letter-spacing: -.025em;
}

.personnel-form-group-title p {
  margin: 3px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.personnel-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.personnel-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.personnel-notes-field {
  grid-column: 1 / -1;
}

.personnel-visible-toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.personnel-visible-toggle input {
  width: 22px;
  min-height: 22px;
}

.personnel-cert-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.personnel-cert-grid .cert-edit-box {
  min-height: 74px;
}

/* Make the ordering section line up visually with the new full-width editor */
.personnel-order-card {
  padding: clamp(20px, 2vw, 30px);
}

@media (max-width: 1200px) {
  .personnel-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personnel-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .personnel-editor-head,
  .personnel-editor-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .personnel-editor-actions {
    justify-content: stretch;
  }

  .personnel-editor-actions .btn,
  .personnel-editor-actions .btn2 {
    width: 100%;
  }

  .personnel-grid-3,
  .personnel-grid-4 {
    grid-template-columns: 1fr;
  }

  .personnel-form-group {
    padding: 14px;
  }

  .personnel-form-group-title {
    align-items: flex-start;
  }
}


/* Modal-based Personnel Management */
.personnel-manager-card {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 2vw, 30px);
}

.personnel-manager-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.personnel-manager-top h2 {
  margin: 8px 0 6px;
  letter-spacing: -.04em;
}

.personnel-manager-top p {
  margin: 0;
  line-height: 1.55;
}

.personnel-add-btn {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  white-space: nowrap;
}

.personnel-add-btn span {
  font-size: 1.25rem;
  line-height: 1;
}

.personnel-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.personnel-list-row {
  grid-template-columns: 40px minmax(220px, 1.7fr) 110px minmax(120px, .8fr) 90px auto;
}

.btn2.danger {
  color: #ff8d96;
  border-color: rgba(255,77,90,.25);
  background: rgba(255,77,90,.08);
}

.danger-btn {
  background: linear-gradient(135deg, #ff4d5a, #ff7a3d) !important;
}

.personnel-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.personnel-modal.open {
  display: flex;
}

.personnel-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(8px);
}

.personnel-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1180px, 96vw);
  max-height: min(90vh, 980px);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.12), transparent 24rem),
    var(--panel);
  box-shadow: 0 28px 90px rgba(0,0,0,.50);
}

.confirm-panel {
  width: min(520px, 94vw);
  padding-bottom: 18px;
}

.personnel-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.035);
}

.personnel-modal-header h2 {
  margin: 6px 0 0;
  letter-spacing: -.04em;
}

.personnel-modal-body {
  max-height: calc(90vh - 170px);
  overflow-y: auto;
  display: grid;
  gap: 16px;
  padding: 20px 22px;
}

.personnel-modal-group {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.03);
}

.personnel-modal-group h3 {
  margin: 0;
  letter-spacing: -.02em;
}

.personnel-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.025);
}

.confirm-panel > .muted {
  padding: 0 22px;
  line-height: 1.6;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 22px;
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 1000px) {
  .personnel-toolbar {
    grid-template-columns: 1fr;
  }

  .personnel-list-row {
    grid-template-columns: 40px 1fr;
  }

  .personnel-list-row .sort-pill,
  .personnel-list-row .sort-meta,
  .personnel-list-row .sort-visible,
  .personnel-list-row .sort-actions {
    grid-column: 2;
    justify-self: start;
  }

  .personnel-manager-top {
    align-items: stretch;
    flex-direction: column;
  }

  .personnel-add-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .personnel-modal {
    padding: 10px;
  }

  .personnel-modal-panel {
    width: 100%;
    max-height: 94vh;
    border-radius: 20px;
  }

  .personnel-modal-body {
    max-height: calc(94vh - 160px);
    padding: 14px;
  }

  .personnel-modal-header,
  .personnel-modal-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .personnel-modal-footer,
  .confirm-actions {
    flex-direction: column;
  }

  .personnel-modal-footer .btn,
  .personnel-modal-footer .btn2,
  .confirm-actions .btn,
  .confirm-actions .btn2 {
    width: 100%;
  }
}


/* Better modal close button */
.modal-close-button {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(255,255,255,.035);
  color: var(--muted);
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
  transition:
    transform .16s ease,
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.modal-close-button span {
  display: block;
  line-height: 1;
  font-size: 1.55rem;
  font-weight: 900;
  transform: translateY(-1px);
}

.modal-close-button:hover {
  transform: translateY(-1px);
  color: #fff;
  border-color: rgba(255,77,90,.34);
  background:
    linear-gradient(135deg, rgba(255,77,90,.22), rgba(255,159,28,.12)),
    rgba(255,255,255,.05);
  box-shadow: 0 14px 34px rgba(255,77,90,.16);
}

.modal-close-button:active {
  transform: translateY(0) scale(.97);
}

.modal-close-button:focus-visible {
  outline: none;
  border-color: rgba(255,159,28,.65);
  box-shadow:
    0 0 0 4px rgba(255,159,28,.12),
    0 14px 34px rgba(255,77,90,.16);
}

/* Keep delete confirmation close button visually consistent but slightly danger-tinted */
.confirm-modal .modal-close-button:hover {
  border-color: rgba(255,77,90,.45);
  background:
    linear-gradient(135deg, rgba(255,77,90,.28), rgba(255,59,34,.14)),
    rgba(255,255,255,.05);
}


/* Modal scroll fix: keep header/footer visible and scroll only the content body */
.personnel-modal {
  overflow: hidden;
}

.personnel-modal-panel {
  height: auto;
  max-height: calc(100vh - 48px) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

#personnelModalForm {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.personnel-modal-body {
  min-height: 0;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--brand) var(--panel2, var(--panel));
}

.personnel-modal-body::-webkit-scrollbar {
  width: 12px;
}

.personnel-modal-body::-webkit-scrollbar-track {
  background: var(--panel2, var(--panel));
  border-radius: 999px;
}

.personnel-modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brand), var(--brand2));
  border: 3px solid var(--panel2, var(--panel));
  border-radius: 999px;
}

.personnel-modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex-shrink: 0;
}

/* Delete confirmation modal does not need internal scrolling, but should stay within screen */
.confirm-panel {
  max-height: calc(100vh - 48px) !important;
  overflow-y: auto !important;
}

/* Small screens: use almost the whole viewport and keep the form scrollable */
@media (max-width: 760px) {
  .personnel-modal {
    padding: 8px !important;
    align-items: stretch;
  }

  .personnel-modal-panel {
    width: 100% !important;
    max-height: calc(100vh - 16px) !important;
  }

  #personnelModalForm {
    min-height: 0;
  }

  .personnel-modal-body {
    min-height: 0;
    padding-bottom: 18px;
  }

  .personnel-modal-footer {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}


/* Shared modal manager style for Certificates / Sections / Ranks */
.manager-card {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 2vw, 30px);
}

.manager-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.manager-top h2 {
  margin: 8px 0 6px;
  letter-spacing: -.04em;
}

.manager-top p {
  margin: 0;
  line-height: 1.55;
}

.manager-add-btn {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  white-space: nowrap;
}

.manager-add-btn span {
  font-size: 1.25rem;
  line-height: 1;
}

.manager-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr);
  gap: 14px;
}

.manager-list {
  display: grid;
  gap: 10px;
}

.manager-row {
  display: grid;
  grid-template-columns: 54px minmax(220px, 1.5fr) 90px 110px 100px auto;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    var(--panel2, var(--panel));
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.manager-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--brand2);
  background: rgba(255,159,28,.10);
  border: 1px solid rgba(255,159,28,.16);
  font-weight: 1000;
  font-size: 1.15rem;
}

.manager-main {
  min-width: 0;
}

.manager-main strong,
.manager-main small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-main small {
  color: var(--muted);
  margin-top: 3px;
}

.manager-meta {
  display: grid;
  gap: 2px;
  text-align: center;
}

.manager-meta span {
  color: var(--faint, var(--muted));
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .64rem;
  font-weight: 1000;
}

.manager-meta strong {
  color: var(--text);
}

.manager-pill {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 1000;
  justify-self: center;
}

.manager-pill.active {
  color: var(--ok);
  background: rgba(51,209,122,.12);
  border: 1px solid rgba(51,209,122,.22);
}

.manager-pill.inactive {
  color: var(--muted);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
}

.manager-actions {
  justify-content: flex-end;
}

.manager-modal-panel {
  width: min(780px, 96vw);
}

.manager-modal-body {
  max-height: none !important;
}

@media (max-width: 1000px) {
  .manager-top {
    align-items: stretch;
    flex-direction: column;
  }

  .manager-add-btn {
    width: 100%;
    justify-content: center;
  }

  .manager-row {
    grid-template-columns: 54px 1fr;
  }

  .manager-meta,
  .manager-pill,
  .manager-actions {
    grid-column: 2;
    justify-self: start;
  }

  .manager-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .manager-row {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .manager-icon,
  .manager-pill,
  .manager-actions,
  .manager-meta {
    grid-column: auto;
    justify-self: center;
  }

  .manager-actions {
    width: 100%;
  }

  .manager-actions .btn2 {
    flex: 1;
  }
}


/* Uploaded image icons for roster certificates/ranks */
.manager-icon.image-capable {
  overflow: hidden;
}

.manager-icon.image-capable img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}

.fd-cert-head img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  margin-bottom: 1px;
}

.image-upload-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: stretch;
}

.image-preview-box {
  min-height: 140px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(255,255,255,.02);
  color: var(--muted);
  text-align: center;
  overflow: hidden;
}

.image-preview-box img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
}

.image-upload-fields {
  display: grid;
  gap: 12px;
  align-content: start;
}

.image-upload-fields input[type="file"] {
  padding-top: 10px;
}

.remove-image-toggle {
  width: 100%;
}

@media (max-width: 700px) {
  .image-upload-row {
    grid-template-columns: 1fr;
  }

  .image-preview-box {
    min-height: 120px;
  }
}


/* Empty image placeholder + preview bug fix */
.image-preview-box {
  position: relative;
  gap: 8px;
  padding: 16px;
}

.image-preview-box img[hidden],
.image-preview-box span[hidden] {
  display: none !important;
}

.image-preview-box .empty-icon-preview {
  width: 82px;
  height: 82px;
  object-fit: contain;
  opacity: .78;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.22));
}

.image-preview-box #certPreviewImage,
.image-preview-box #rankPreviewImage {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
  border-radius: 14px;
}

.image-preview-box span {
  color: var(--muted);
  font-size: .84rem;
  font-weight: 800;
}

/* Public roster rank image icon */
.fd-rank-cell {
  display: inline-grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.fd-rank-cell span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fd-rank-icon {
  width: 23px;
  height: 23px;
  object-fit: contain;
  display: block;
  justify-self: end;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.28));
}

/* In tighter desktop widths, keep rank icons readable but compact. */
@media (max-width: 1500px) and (min-width: 901px) {
  .fd-rank-cell {
    gap: 5px;
  }

  .fd-rank-icon {
    width: 20px;
    height: 20px;
  }
}

/* Mobile stacked roster keeps icon + rank text centered on the value side. */
@media (max-width: 900px) {
  .fd-rank-cell {
    grid-template-columns: 118px 1fr !important;
  }

  .fd-rank-cell::before {
    grid-column: 1;
  }

  .fd-rank-cell .fd-rank-icon,
  .fd-rank-cell span {
    grid-column: 2;
  }

  .fd-rank-cell {
    justify-items: center;
  }
}


/* Drag/drop auto-ordering for Certificates / Sections / Ranks */
.manager-order-status {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font-size: .86rem;
}

.manager-order-status.saving {
  color: var(--brand2);
  border-color: rgba(255,159,28,.28);
  background: rgba(255,159,28,.08);
}

.manager-order-status.saving .autosave-dot {
  background: var(--brand2);
  animation: autosavePulse 1s infinite;
}

.manager-order-status.saved {
  color: var(--ok);
  border-color: rgba(51,209,122,.28);
  background: rgba(51,209,122,.08);
}

.manager-order-status.saved .autosave-dot {
  background: var(--ok);
}

.manager-order-status.error {
  color: var(--bad);
  border-color: rgba(255,77,90,.28);
  background: rgba(255,77,90,.08);
}

.manager-order-status.error .autosave-dot {
  background: var(--bad);
}

.manager-sort-row {
  grid-template-columns: 40px 54px minmax(220px, 1.5fr) 90px 110px 100px auto;
  cursor: grab;
  transition: transform .14s ease, border-color .14s ease, opacity .14s ease;
}

.manager-sort-row:hover {
  border-color: rgba(255,159,28,.25);
  transform: translateY(-1px);
}

.manager-sort-row.dragging {
  opacity: .48;
  cursor: grabbing;
  border-color: rgba(255,159,28,.50);
}

.manager-drag-handle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--brand2);
  background: rgba(255,159,28,.10);
  border: 1px solid rgba(255,159,28,.16);
  font-weight: 1000;
  cursor: grab;
}

@media (max-width: 1000px) {
  .manager-order-status {
    width: 100%;
    justify-content: center;
    border-radius: 16px;
    padding: 10px 14px;
  }

  .manager-sort-row {
    grid-template-columns: 40px 54px 1fr;
  }

  .manager-sort-row .manager-meta,
  .manager-sort-row .manager-pill,
  .manager-sort-row .manager-actions {
    grid-column: 3;
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .manager-sort-row {
    grid-template-columns: 40px 1fr;
  }

  .manager-sort-row .manager-icon,
  .manager-sort-row .manager-main,
  .manager-sort-row .manager-meta,
  .manager-sort-row .manager-pill,
  .manager-sort-row .manager-actions {
    grid-column: 2;
  }

  .manager-drag-handle {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
  }
}


/* Personnel image upload preview */
.personnel-image-upload-row .image-preview-box,
.personnel-photo-preview {
  min-height: 170px;
}

.personnel-photo-preview #personnelPreviewImage {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 22px;
  display: block;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 16px 36px rgba(0,0,0,.22);
}

.personnel-photo-preview img[hidden],
.personnel-photo-preview span[hidden] {
  display: none !important;
}

/* Public roster personnel photo next to name */
.fd-personnel-name-cell {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.fd-personnel-name-cell strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fd-personnel-photo-button,
.fd-personnel-photo-placeholder {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  flex: 0 0 auto;
}

.fd-personnel-photo-button {
  padding: 0;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.fd-personnel-photo-button:hover {
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(255,159,28,.45);
  box-shadow: 0 10px 24px rgba(255,159,28,.12);
}

.fd-personnel-photo-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fd-personnel-photo-placeholder {
  color: var(--brand2);
  background: rgba(255,159,28,.10);
  border: 1px solid rgba(255,159,28,.16);
  font-size: .78rem;
  font-weight: 1000;
}

/* Public personnel image modal */
.public-photo-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.public-photo-modal.open {
  display: flex;
}

.public-photo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
}

.public-photo-panel {
  position: relative;
  z-index: 1;
  width: min(760px, 94vw);
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.12), transparent 24rem),
    var(--panel);
  box-shadow: 0 28px 90px rgba(0,0,0,.50);
}

.public-photo-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.035);
}

.public-photo-header h2 {
  margin: 6px 0 0;
  letter-spacing: -.04em;
}

.public-photo-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(255,255,255,.035);
  color: var(--muted);
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
  transition: transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease;
}

.public-photo-close span {
  display: block;
  line-height: 1;
  font-size: 1.55rem;
  font-weight: 900;
  transform: translateY(-1px);
}

.public-photo-close:hover {
  transform: translateY(-1px);
  color: #fff;
  border-color: rgba(255,77,90,.34);
  background:
    linear-gradient(135deg, rgba(255,77,90,.22), rgba(255,159,28,.12)),
    rgba(255,255,255,.05);
}

.public-photo-body {
  min-height: 0;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 20px;
}

.public-photo-body img {
  max-width: 100%;
  max-height: calc(100vh - 170px);
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.30);
}

body.photo-modal-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .fd-personnel-name-cell {
    grid-template-columns: 118px 1fr !important;
  }

  .fd-personnel-name-cell::before {
    grid-column: 1;
  }

  .fd-personnel-photo-button,
  .fd-personnel-photo-placeholder,
  .fd-personnel-name-cell strong {
    grid-column: 2;
  }

  .fd-personnel-name-cell {
    justify-items: center;
  }

  .public-photo-modal {
    padding: 10px;
  }

  .public-photo-panel {
    width: 100%;
    max-height: calc(100vh - 20px);
    border-radius: 20px;
  }

  .public-photo-body img {
    max-height: calc(100vh - 150px);
  }
}


/* Personnel image display fix */
.personnel-list-row {
  grid-template-columns: 40px 42px minmax(220px, 1.7fr) 110px minmax(120px, .8fr) 90px auto !important;
}

.sort-member-photo {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,159,28,.10);
  border: 1px solid rgba(255,159,28,.16);
  color: var(--brand2);
  font-weight: 1000;
}

.sort-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Public roster image stays left of name and never collapses to text when image exists. */
.fd-personnel-name-cell {
  grid-template-columns: 32px minmax(0, 1fr) !important;
  gap: 8px !important;
}

.fd-personnel-photo-button,
.fd-personnel-photo-placeholder {
  width: 32px !important;
  height: 32px !important;
  justify-self: center;
}

.fd-personnel-photo-button img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.fd-personnel-photo-button img[src=""],
.fd-personnel-photo-button img:not([src]) {
  display: none !important;
}

@media (max-width: 1000px) {
  .personnel-list-row {
    grid-template-columns: 40px 42px 1fr !important;
  }

  .personnel-list-row .sort-pill,
  .personnel-list-row .sort-meta,
  .personnel-list-row .sort-visible,
  .personnel-list-row .sort-actions {
    grid-column: 3 !important;
  }
}

@media (max-width: 900px) {
  .fd-personnel-name-cell {
    grid-template-columns: 118px 1fr !important;
  }

  .fd-personnel-photo-button,
  .fd-personnel-photo-placeholder,
  .fd-personnel-name-cell strong {
    grid-column: 2 !important;
  }
}


/* Tighter public roster spacing between personnel image and name */
.fd-personnel-name-cell {
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 4px !important;
}

.fd-personnel-photo-button,
.fd-personnel-photo-placeholder {
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
}

/* Users Administration UI */
.users-manager-card {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 2vw, 30px);
}

.users-manager-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.users-manager-top h2 {
  margin: 8px 0 6px;
  letter-spacing: -.04em;
}

.users-manager-top p {
  margin: 0;
  line-height: 1.55;
}

.users-add-btn {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  white-space: nowrap;
}

.users-add-btn span {
  font-size: 1.25rem;
  line-height: 1;
}

.users-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr);
  gap: 14px;
}

.users-list {
  display: grid;
  gap: 10px;
}

.user-row {
  display: grid;
  grid-template-columns: 52px minmax(220px, 1.5fr) 96px 104px 110px auto;
  gap: 12px;
  align-items: center;
  min-height: 70px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    var(--panel2, var(--panel));
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.user-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  font-weight: 1000;
  box-shadow: 0 12px 28px rgba(255,59,34,.18);
}

.user-main {
  min-width: 0;
}

.user-main strong,
.user-main small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-main small {
  color: var(--muted);
  margin-top: 3px;
}

.user-pill {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 1000;
  justify-self: center;
  text-transform: capitalize;
}

.user-pill.role.admin {
  color: var(--brand2);
  background: rgba(255,159,28,.12);
  border: 1px solid rgba(255,159,28,.22);
}

.user-pill.role.editor {
  color: var(--info, #5cc8ff);
  background: rgba(92,200,255,.10);
  border: 1px solid rgba(92,200,255,.20);
}

.user-pill.active {
  color: var(--ok);
  background: rgba(51,209,122,.12);
  border: 1px solid rgba(51,209,122,.22);
}

.user-pill.inactive {
  color: var(--muted);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
}

.user-perm-summary {
  display: grid;
  gap: 2px;
  text-align: center;
}

.user-perm-summary span {
  color: var(--faint, var(--muted));
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .64rem;
  font-weight: 1000;
}

.user-perm-summary strong {
  color: var(--text);
}

.user-actions {
  justify-content: flex-end;
}

.user-modal-panel {
  width: min(1080px, 96vw);
}

.user-modal-body {
  max-height: none !important;
}

.permissions-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.permissions-head h3 {
  margin: 0 0 4px;
}

.permissions-head p {
  margin: 0;
}

.permission-role-hint {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--info, #5cc8ff);
  background: rgba(92,200,255,.10);
  border: 1px solid rgba(92,200,255,.20);
  font-size: .78rem;
  font-weight: 1000;
  white-space: nowrap;
}

.permission-role-hint.admin {
  color: var(--brand2);
  background: rgba(255,159,28,.12);
  border-color: rgba(255,159,28,.22);
}

.permission-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.permission-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 52px;
  gap: 12px;
  align-items: center;
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.050), rgba(255,255,255,.018)),
    rgba(255,255,255,.02);
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.permission-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255,159,28,.22);
}

.permission-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.permission-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--brand2);
  background: rgba(255,159,28,.10);
  border: 1px solid rgba(255,159,28,.16);
  font-weight: 1000;
  font-size: 1.12rem;
}

.permission-copy {
  min-width: 0;
}

.permission-copy strong,
.permission-copy small {
  display: block;
}

.permission-copy strong {
  color: var(--text);
}

.permission-copy small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.permission-toggle {
  width: 48px;
  height: 28px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid var(--line);
  transition: background .16s ease, border-color .16s ease;
}

.permission-toggle::before {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .16s ease, background .16s ease;
}

.permission-card:has(input:checked) {
  border-color: rgba(51,209,122,.25);
  background:
    linear-gradient(145deg, rgba(51,209,122,.075), rgba(255,255,255,.018)),
    rgba(255,255,255,.02);
}

.permission-card:has(input:checked) .permission-toggle {
  background: rgba(51,209,122,.18);
  border-color: rgba(51,209,122,.28);
}

.permission-card:has(input:checked) .permission-toggle::before {
  transform: translateX(20px);
  background: var(--ok);
}

.permission-card.forced-on {
  border-color: rgba(255,159,28,.26);
  background:
    linear-gradient(145deg, rgba(255,159,28,.08), rgba(255,255,255,.018)),
    rgba(255,255,255,.02);
}

.permission-card.forced-on .permission-toggle {
  background: rgba(255,159,28,.18);
  border-color: rgba(255,159,28,.28);
}

.permission-card.forced-on .permission-toggle::before {
  transform: translateX(20px);
  background: var(--brand2);
}

.user-active-toggle {
  max-width: 320px;
}

.user-password-note {
  margin: 0;
}

@media (max-width: 1050px) {
  .user-row {
    grid-template-columns: 52px minmax(180px, 1fr) 96px 104px;
  }

  .user-perm-summary,
  .user-actions {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .user-actions {
    justify-content: flex-start;
  }

  .permission-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .users-manager-top,
  .permissions-head {
    align-items: stretch;
    flex-direction: column;
  }

  .users-add-btn {
    width: 100%;
    justify-content: center;
  }

  .user-row {
    grid-template-columns: 52px 1fr;
  }

  .user-pill,
  .user-perm-summary,
  .user-actions {
    grid-column: 2;
    justify-self: start;
  }

  .permission-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .permission-toggle {
    grid-column: 2;
    justify-self: start;
  }
}


/* Users page compact sizing fix */
.users-manager-card {
  width: min(100%, 1120px);
  margin-left: auto;
  margin-right: auto;
}

.users-manager-top {
  align-items: center;
}

.users-toolbar {
  margin-top: -4px;
}

.user-row {
  grid-template-columns: 46px minmax(220px, 1fr) auto auto 92px 68px !important;
  min-height: 62px !important;
  padding: 10px 12px !important;
  gap: 10px !important;
}

.user-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  font-size: .95rem;
}

.user-main strong {
  font-size: .92rem;
}

.user-main small {
  font-size: .82rem;
}

.user-pill {
  width: auto !important;
  max-width: max-content !important;
  min-width: 72px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  justify-self: end !important;
  font-size: .74rem !important;
}

.user-pill.role.admin,
.user-pill.role.editor {
  min-width: 78px !important;
}

.user-perm-summary {
  justify-self: end !important;
  min-width: 78px;
}

.user-perm-summary span {
  font-size: .58rem !important;
}

.user-perm-summary strong {
  font-size: .88rem;
}

.user-actions {
  justify-self: end !important;
}

.user-actions .btn2.small {
  min-height: 32px;
  padding: 0 12px;
}

/* Prevent any pill from visually merging with the next column */
.user-row .user-pill + .user-pill {
  margin-left: 0 !important;
}

/* Medium screens keep a neat two-line row instead of stretching cells */
@media (max-width: 1050px) {
  .users-manager-card {
    width: 100%;
  }

  .user-row {
    grid-template-columns: 46px minmax(180px, 1fr) auto auto !important;
  }

  .user-perm-summary,
  .user-actions {
    grid-column: auto !important;
    justify-self: end !important;
  }
}

@media (max-width: 760px) {
  .user-row {
    grid-template-columns: 42px 1fr !important;
    gap: 8px 10px !important;
  }

  .user-avatar {
    width: 36px !important;
    height: 36px !important;
  }

  .user-pill,
  .user-perm-summary,
  .user-actions {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  .user-actions .btn2.small {
    width: auto;
  }
}


/* Users equal-sized pills + action columns */
.user-row {
  grid-template-columns: 46px minmax(220px, 1fr) 96px 96px 96px 68px !important;
}

.user-pill {
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  justify-self: center !important;
  text-align: center;
}

.user-pill.role.admin,
.user-pill.role.editor,
.user-pill.active,
.user-pill.inactive {
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
}

.user-perm-summary {
  width: 88px;
  min-width: 88px;
  justify-self: center !important;
}

.user-actions {
  width: 68px;
  min-width: 68px;
  justify-self: center !important;
}

.user-actions .btn2.small {
  width: 60px;
  min-width: 60px;
  justify-content: center;
}

@media (max-width: 1050px) {
  .user-row {
    grid-template-columns: 46px minmax(180px, 1fr) 88px 88px !important;
  }

  .user-perm-summary,
  .user-actions {
    width: auto;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .user-pill,
  .user-perm-summary,
  .user-actions,
  .user-actions .btn2.small {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* Users badge isolation fix:
   Use unique classes so old .user-pill/.role/.active rules cannot split text from background. */
.user-row {
  grid-template-columns: 46px minmax(220px, 1fr) 96px 96px 96px 68px !important;
  align-items: center !important;
}

.cms-user-badge {
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  height: 30px !important;
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  line-height: 1 !important;
  text-align: center !important;
  font-size: .74rem !important;
  font-weight: 1000 !important;
  text-transform: capitalize !important;
  position: static !important;
  transform: none !important;
}

.cms-user-badge.cms-user-role.admin {
  color: var(--brand2) !important;
  background: rgba(255,159,28,.12) !important;
  border: 1px solid rgba(255,159,28,.28) !important;
}

.cms-user-badge.cms-user-role.editor {
  color: var(--info, #5cc8ff) !important;
  background: rgba(92,200,255,.10) !important;
  border: 1px solid rgba(92,200,255,.22) !important;
}

.cms-user-badge.cms-user-status.active {
  color: var(--ok) !important;
  background: rgba(51,209,122,.12) !important;
  border: 1px solid rgba(51,209,122,.24) !important;
}

.cms-user-badge.cms-user-status.inactive {
  color: var(--muted) !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--line) !important;
}

/* Stop older user-pill rules from applying to the new badges by layout position. */
.user-row > .cms-user-badge + .cms-user-badge {
  margin-left: 0 !important;
}

@media (max-width: 1050px) {
  .user-row {
    grid-template-columns: 46px minmax(180px, 1fr) 88px 88px !important;
  }
}

@media (max-width: 760px) {
  .cms-user-badge {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    justify-self: start !important;
    grid-column: 2 !important;
  }
}


/* Remove sidebar category headings from public + admin */
.sidebar .nav-group-title,
.side-nav .nav-group-title,
.admin-side-nav .nav-group-title,
.admin-nav-category-title {
  display: none !important;
}

.side-nav,
.admin-side-nav {
  gap: 8px !important;
}

.side-nav .nav-group,
.admin-side-nav .nav-group,
.admin-side-nav .nav-group-flat {
  gap: 4px !important;
  margin: 0 !important;
}

.side-nav .nav-group + .nav-group,
.admin-side-nav .nav-group + .nav-group {
  margin-top: 4px !important;
}

/* Parent menu with submenu should be a button/no-link but visually identical */
.nav-parent-button,
button.nav-link {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nav-parent-button:hover,
button.nav-link:hover,
.nav-parent-button.active,
button.nav-link.active {
  color: var(--text);
  background: linear-gradient(90deg, rgba(255,59,34,.18), rgba(255,159,28,.05));
}

/* Admin roster parent uses button, keep arrow aligned */
.admin-side-nav .nav-parent-row .nav-parent-button {
  padding-right: 52px;
}

.admin-side-nav .nav-parent-row .nav-link {
  min-height: 44px;
}

/* Public menu: parent anchors converted to button behavior should not look like links */
.side-nav .has-submenu > .nav-parent-row > a.nav-link[href="#"],
.side-nav .has-submenu > a.nav-link[href="#"] {
  cursor: pointer;
}

/* Remove excess spacing left behind by deleted headings */
.admin-user-card {
  margin-bottom: 16px !important;
}

.admin-side-nav {
  padding-top: 0 !important;
}


/* Backend submenu toggle fix */
.admin-side-nav .nav-item.has-submenu .submenu-links {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

.admin-side-nav .nav-item.has-submenu.submenu-open .submenu-links {
  max-height: 520px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.admin-side-nav .nav-item.has-submenu .submenu-chevron {
  transform: rotate(0deg);
}

.admin-side-nav .nav-item.has-submenu.submenu-open .submenu-chevron {
  transform: rotate(180deg);
}

.admin-side-nav .nav-parent-button {
  appearance: none;
  -webkit-appearance: none;
}


/* Collapsible side menu: frontend + backend */
.sidebar-brand-row {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 12px;
}

.sidebar-brand-row .brand-copy {
  min-width: 0;
  flex: 1;
}

.sidebar-collapse-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(255,255,255,.035);
  color: var(--brand2);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

.sidebar-collapse-btn:hover {
  transform: translateY(-1px);
  color: #fff;
  border-color: rgba(255,159,28,.32);
  background:
    linear-gradient(135deg, rgba(255,59,34,.18), rgba(255,159,28,.10)),
    rgba(255,255,255,.04);
}

.sidebar-collapse-btn .collapse-icon {
  display: block;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 1000;
  transform: translateX(-1px);
}

/* When collapsed, make the whole app sidebar icon-only. */
body.sidebar-collapsed .app-shell,
body.sidebar-collapsed.admin-layout-body .admin-firehouse-shell {
  grid-template-columns: 82px 1fr !important;
}

body.sidebar-collapsed .sidebar,
body.sidebar-collapsed .admin-sidebar {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  overflow-x: hidden;
}

body.sidebar-collapsed .sidebar .brand,
body.sidebar-collapsed .admin-sidebar .brand {
  justify-content: center;
}

body.sidebar-collapsed .sidebar .brand img,
body.sidebar-collapsed .admin-sidebar .brand img {
  width: 44px;
  height: 44px;
}

body.sidebar-collapsed .sidebar .brand-copy,
body.sidebar-collapsed .admin-sidebar .brand-copy,
body.sidebar-collapsed .sidebar .brand div:not(.brand-copy),
body.sidebar-collapsed .admin-sidebar .brand div:not(.brand-copy),
body.sidebar-collapsed .sidebar-card,
body.sidebar-collapsed .nav-link span:not(.nav-icon),
body.sidebar-collapsed .submenu-link span:not(.submenu-dot),
body.sidebar-collapsed .nav-group-title,
body.sidebar-collapsed .admin-nav-category-title {
  display: none !important;
}

body.sidebar-collapsed .sidebar-collapse-btn {
  position: absolute;
  right: -8px;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  z-index: 6;
  border-radius: 999px;
}

body.sidebar-collapsed .sidebar-collapse-btn:hover {
  transform: translateY(-50%) translateX(1px);
}

body.sidebar-collapsed .sidebar-collapse-btn .collapse-icon {
  transform: rotate(180deg) translateX(-1px);
  font-size: 1.25rem;
}

body.sidebar-collapsed .side-nav,
body.sidebar-collapsed .admin-side-nav {
  gap: 8px !important;
}

body.sidebar-collapsed .nav-link,
body.sidebar-collapsed .admin-side-nav .nav-link {
  width: 52px !important;
  min-width: 52px !important;
  height: 46px !important;
  min-height: 46px !important;
  justify-content: center !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 16px !important;
}

body.sidebar-collapsed .nav-icon,
body.sidebar-collapsed .admin-side-nav .nav-icon {
  width: 100% !important;
  height: 100% !important;
  font-size: 1rem;
}

body.sidebar-collapsed .nav-parent-row {
  width: 52px;
}

body.sidebar-collapsed .submenu-toggle {
  right: -3px !important;
  top: -3px !important;
  bottom: auto !important;
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  border-radius: 999px;
  background: rgba(255,159,28,.16) !important;
  border: 1px solid rgba(255,159,28,.22) !important;
}

body.sidebar-collapsed .submenu-toggle .submenu-chevron {
  width: 14px;
  height: 14px;
}

body.sidebar-collapsed .submenu-links {
  margin-left: 0 !important;
  padding-left: 0 !important;
  border-left: 0 !important;
}

body.sidebar-collapsed .submenu-link {
  width: 52px !important;
  height: 34px !important;
  min-height: 34px !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 14px !important;
}

body.sidebar-collapsed .submenu-link .submenu-dot {
  width: 6px;
  height: 6px;
  margin: 0 !important;
}

/* Tooltips for collapsed menu labels */
body.sidebar-collapsed .nav-link,
body.sidebar-collapsed .submenu-link {
  position: relative;
}

body.sidebar-collapsed .nav-link span:not(.nav-icon),
body.sidebar-collapsed .submenu-link span:last-child {
  pointer-events: none;
}

body.sidebar-collapsed .nav-link:hover::after,
body.sidebar-collapsed .submenu-link:hover::after {
  content: attr(data-label);
}

/* Since most existing nav links do not have data-label, use title fallback where browser supports native tooltip. */
body.sidebar-collapsed .nav-link,
body.sidebar-collapsed .submenu-link {
  overflow: visible;
}

/* Keep collapsed mode desktop-only; mobile already uses drawer behavior. */
@media (max-width: 900px) {
  body.sidebar-collapsed .app-shell,
  body.sidebar-collapsed.admin-layout-body .admin-firehouse-shell {
    grid-template-columns: 1fr !important;
  }

  body.sidebar-collapsed .sidebar,
  body.sidebar-collapsed .admin-sidebar {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .sidebar-collapse-btn {
    display: none !important;
  }
}


/* Clean slide-hide side menu fix: frontend + backend
   Replaces the previous ugly icon-only collapsed mode. */
.sidebar-collapse-btn,
.public-floating-collapse {
  display: none !important;
}

.sidemenu-toggle-button {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 1600;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.03)),
    var(--panel);
  color: var(--brand2);
  cursor: pointer;
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
  transition:
    transform .16s ease,
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    left .22s ease;
}

.sidemenu-toggle-button span {
  display: block;
  line-height: 1;
  font-size: 1.25rem;
  font-weight: 1000;
  transform: translateY(-1px);
}

.sidemenu-toggle-button:hover {
  transform: translateY(-1px);
  color: #fff;
  border-color: rgba(255,159,28,.34);
  background:
    linear-gradient(135deg, rgba(255,59,34,.20), rgba(255,159,28,.12)),
    var(--panel);
}

/* Expanded state: keep the hamburger at the bottom-left edge of the sidebar area. */
body:not(.sidemenu-collapsed) .sidemenu-toggle-button {
  left: 18px;
}

/* Collapsed state: sidebar completely hides and content becomes full width. */
body.sidemenu-collapsed .shell,
body.sidemenu-collapsed.admin-layout-body .admin-firehouse-shell {
  grid-template-columns: 0 1fr !important;
}

body.sidemenu-collapsed .sidebar,
body.sidemenu-collapsed .admin-sidebar {
  transform: translateX(-110%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Do NOT use the previous icon-only sidebar behavior. */
body.sidemenu-collapsed .sidebar .brand-copy,
body.sidemenu-collapsed .admin-sidebar .brand-copy,
body.sidemenu-collapsed .sidebar-card,
body.sidemenu-collapsed .nav-link span:not(.nav-icon),
body.sidemenu-collapsed .submenu-link span:not(.submenu-dot) {
  display: initial;
}

/* Smooth sidebar movement. */
.sidebar,
.admin-sidebar,
.shell,
.admin-firehouse-shell {
  transition:
    grid-template-columns .22s ease,
    transform .22s ease,
    opacity .18s ease;
}

/* Parent menu buttons look exactly like nav links. */
.nav-parent-button,
button.nav-link {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nav-parent-button:hover,
button.nav-link:hover,
.nav-parent-button.active,
button.nav-link.active {
  color: var(--text);
  background: linear-gradient(90deg, rgba(255,59,34,.18), rgba(255,159,28,.05));
}

.nav-row .nav-parent-button {
  padding-right: 52px;
}

/* Backend submenu toggle stability. */
.admin-side-nav .nav-item.has-submenu .submenu-links {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

.admin-side-nav .nav-item.has-submenu.submenu-open .submenu-links {
  max-height: 520px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Mobile already has drawer / bottom navigation, so hide this desktop toggle. */
@media (max-width: 900px) {
  .sidemenu-toggle-button {
    display: none !important;
  }

  body.sidemenu-collapsed .shell,
  body.sidemenu-collapsed.admin-layout-body .admin-firehouse-shell {
    grid-template-columns: 1fr !important;
  }

  body.sidemenu-collapsed .sidebar,
  body.sidemenu-collapsed .admin-sidebar {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}


/* Mini icon sidebar mode: compact bar with flyout submenus.
   Overrides the previous full slide-hide behavior. */
.sidemenu-toggle-button {
  left: 16px !important;
  bottom: 16px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
}

body:not(.sidemenu-mini) .sidemenu-toggle-button {
  left: 18px !important;
}

body.sidemenu-mini .sidemenu-toggle-button {
  left: 16px !important;
}

body.sidemenu-mini .sidemenu-toggle-button span {
  transform: none !important;
}

/* Keep a small sidebar instead of fully hiding it. */
body.sidemenu-mini .shell,
body.sidemenu-mini.admin-layout-body .admin-firehouse-shell {
  grid-template-columns: 76px 1fr !important;
}

body.sidemenu-mini .sidebar,
body.sidemenu-mini .admin-sidebar {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Hide text/content from mini sidebar, keep only icons. */
body.sidemenu-mini .sidebar .brand-copy,
body.sidemenu-mini .admin-sidebar .brand-copy,
body.sidemenu-mini .sidebar-card,
body.sidemenu-mini .nav-link span:not(.nav-icon),
body.sidemenu-mini .submenu-link span:not(.submenu-dot),
body.sidemenu-mini .sub span:not(.dot),
body.sidemenu-mini .nav-group-title,
body.sidemenu-mini .admin-nav-category-title {
  display: none !important;
}

body.sidemenu-mini .sidebar .brand,
body.sidemenu-mini .admin-sidebar .brand {
  justify-content: center !important;
}

body.sidemenu-mini .sidebar .brand img,
body.sidemenu-mini .admin-sidebar .brand img {
  width: 44px !important;
  height: 44px !important;
}

/* Mini nav icon buttons. */
body.sidemenu-mini .side-nav,
body.sidemenu-mini .admin-side-nav {
  align-items: center !important;
  gap: 8px !important;
}

body.sidemenu-mini .nav-group,
body.sidemenu-mini .nav-group-flat {
  align-items: center !important;
}

body.sidemenu-mini .nav-row,
body.sidemenu-mini .nav-parent-row {
  width: 52px !important;
  position: relative !important;
}

body.sidemenu-mini .nav-link,
body.sidemenu-mini .admin-side-nav .nav-link {
  width: 52px !important;
  min-width: 52px !important;
  height: 46px !important;
  min-height: 46px !important;
  display: grid !important;
  place-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 16px !important;
}

body.sidemenu-mini .nav-link.active,
body.sidemenu-mini .admin-side-nav .nav-link.active {
  box-shadow: inset 0 0 0 1px rgba(255,59,34,.42) !important;
}

body.sidemenu-mini .nav-icon,
body.sidemenu-mini .admin-side-nav .nav-icon {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  font-size: 1rem;
}

/* Small dropdown indicator on parent icons. */
body.sidemenu-mini .submenu-toggle,
body.sidemenu-mini .sub-toggle {
  position: absolute !important;
  right: -5px !important;
  bottom: -3px !important;
  top: auto !important;
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255,159,28,.18) !important;
  border: 1px solid rgba(255,159,28,.28) !important;
  color: var(--brand2) !important;
  z-index: 5 !important;
}

body.sidemenu-mini .submenu-toggle .submenu-chevron,
body.sidemenu-mini .sub-toggle .chev {
  width: 13px !important;
  height: 13px !important;
}

/* Hide inline submenu in mini mode; show as flyout next to icon bar. */
body.sidemenu-mini .submenu-links,
body.sidemenu-mini .subs {
  position: fixed !important;
  left: 82px !important;
  z-index: 1550 !important;
  width: 220px !important;
  max-height: none !important;
  display: none !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.12), transparent 14rem),
    var(--panel) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.36) !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* For admin flyout: because it uses submenu-links under .nav-item. */
body.sidemenu-mini .admin-sidebar .nav-item.mini-flyout-open .submenu-links,
body.sidemenu-mini .admin-sidebar .nav-item.submenu-open .submenu-links,
body.sidemenu-mini .sidebar .nav-item.mini-flyout-open .subs,
body.sidemenu-mini .sidebar .nav-item.active-parent .subs {
  display: grid !important;
}

/* Approximate flyout vertical placement by item order; works cleanly for current menu. */
body.sidemenu-mini .nav-item:nth-of-type(1) .submenu-links,
body.sidemenu-mini .nav-item:nth-of-type(1) .subs { top: 120px !important; }
body.sidemenu-mini .nav-item:nth-of-type(2) .submenu-links,
body.sidemenu-mini .nav-item:nth-of-type(2) .subs { top: 170px !important; }
body.sidemenu-mini .nav-item:nth-of-type(3) .submenu-links,
body.sidemenu-mini .nav-item:nth-of-type(3) .subs { top: 220px !important; }
body.sidemenu-mini .nav-item:nth-of-type(4) .submenu-links,
body.sidemenu-mini .nav-item:nth-of-type(4) .subs { top: 270px !important; }
body.sidemenu-mini .nav-item:nth-of-type(5) .submenu-links,
body.sidemenu-mini .nav-item:nth-of-type(5) .subs { top: 320px !important; }
body.sidemenu-mini .nav-item:nth-of-type(6) .submenu-links,
body.sidemenu-mini .nav-item:nth-of-type(6) .subs { top: 370px !important; }
body.sidemenu-mini .nav-item:nth-of-type(7) .submenu-links,
body.sidemenu-mini .nav-item:nth-of-type(7) .subs { top: 420px !important; }

body.sidemenu-mini .submenu-link,
body.sidemenu-mini .sub {
  width: 100% !important;
  height: auto !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  color: var(--muted) !important;
  font-size: .84rem !important;
}

body.sidemenu-mini .submenu-link span:not(.submenu-dot),
body.sidemenu-mini .sub span:not(.dot) {
  display: inline !important;
}

body.sidemenu-mini .submenu-dot,
body.sidemenu-mini .dot {
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 auto !important;
}

/* Disable previous full-hide behavior. */
body.sidemenu-mini .sidebar,
body.sidemenu-mini .admin-sidebar {
  transform: none !important;
  opacity: 1 !important;
}

/* Mobile stays drawer-based. */
@media (max-width: 900px) {
  body.sidemenu-mini .shell,
  body.sidemenu-mini.admin-layout-body .admin-firehouse-shell {
    grid-template-columns: 1fr !important;
  }

  body.sidemenu-mini .sidebar,
  body.sidemenu-mini .admin-sidebar {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* Dynamic flyout position + cleaner mini sidebar content */
body.sidemenu-mini .sidebar,
body.sidemenu-mini .admin-sidebar {
  overflow: visible !important;
}

/* In mini mode, keep only the logo/brand and the actual navigation. Hide all cards/info blocks. */
body.sidemenu-mini .sidebar > *:not(.brand):not(.side-nav):not(nav),
body.sidemenu-mini .admin-sidebar > *:not(.brand):not(.side-nav):not(nav) {
  display: none !important;
}

body.sidemenu-mini .sidebar .brand,
body.sidemenu-mini .admin-sidebar .brand {
  display: flex !important;
  margin-bottom: 18px !important;
}

body.sidemenu-mini .sidebar-card,
body.sidemenu-mini .admin-user-card,
body.sidemenu-mini .status-pill,
body.sidemenu-mini .tiny,
body.sidemenu-mini .eyebrow {
  display: none !important;
}

/* Mini flyouts now use JS-calculated top from the clicked parent. */
body.sidemenu-mini .submenu-links,
body.sidemenu-mini .subs {
  top: var(--mini-flyout-top, 120px) !important;
  left: 84px !important;
  max-height: min(420px, calc(100vh - 24px)) !important;
  overflow-y: auto !important;
}

/* Remove old static nth-of-type top behavior by overriding it with the CSS variable. */
body.sidemenu-mini .nav-item:nth-of-type(1) .submenu-links,
body.sidemenu-mini .nav-item:nth-of-type(1) .subs,
body.sidemenu-mini .nav-item:nth-of-type(2) .submenu-links,
body.sidemenu-mini .nav-item:nth-of-type(2) .subs,
body.sidemenu-mini .nav-item:nth-of-type(3) .submenu-links,
body.sidemenu-mini .nav-item:nth-of-type(3) .subs,
body.sidemenu-mini .nav-item:nth-of-type(4) .submenu-links,
body.sidemenu-mini .nav-item:nth-of-type(4) .subs,
body.sidemenu-mini .nav-item:nth-of-type(5) .submenu-links,
body.sidemenu-mini .nav-item:nth-of-type(5) .subs,
body.sidemenu-mini .nav-item:nth-of-type(6) .submenu-links,
body.sidemenu-mini .nav-item:nth-of-type(6) .subs,
body.sidemenu-mini .nav-item:nth-of-type(7) .submenu-links,
body.sidemenu-mini .nav-item:nth-of-type(7) .subs {
  top: var(--mini-flyout-top, 120px) !important;
}

/* Make the mini bar visually cleaner: logo + centered icons only. */
body.sidemenu-mini .side-nav,
body.sidemenu-mini .admin-side-nav {
  width: 52px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.sidemenu-mini .nav-group,
body.sidemenu-mini .nav-group-flat {
  width: 52px !important;
}

body.sidemenu-mini .brand img {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep the bottom-left menu button clean and always available. */
body.sidemenu-mini .sidemenu-toggle-button {
  left: 16px !important;
  bottom: 16px !important;
}


/* Frontend mini-sidebar polish:
   - logo only at the top
   - no brand text/card leftovers
   - submenu indicator becomes a left/right arrow aligned with the menu icon */
body.public-layout-body.sidemenu-mini .sidebar .brand,
body.sidemenu-mini .sidebar .brand {
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}

body.public-layout-body.sidemenu-mini .sidebar .brand img,
body.sidemenu-mini .sidebar .brand img {
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
}

body.public-layout-body.sidemenu-mini .sidebar .brand-copy,
body.public-layout-body.sidemenu-mini .sidebar .brand > div,
body.public-layout-body.sidemenu-mini .sidebar .brand strong,
body.public-layout-body.sidemenu-mini .sidebar .brand span,
body.public-layout-body.sidemenu-mini .sidebar .sidebar-card,
body.public-layout-body.sidemenu-mini .sidebar .tiny,
body.public-layout-body.sidemenu-mini .sidebar .status-pill,
body.public-layout-body.sidemenu-mini .sidebar .eyebrow,
body.sidemenu-mini .sidebar .brand-copy,
body.sidemenu-mini .sidebar .brand > div,
body.sidemenu-mini .sidebar .brand strong,
body.sidemenu-mini .sidebar .brand span,
body.sidemenu-mini .sidebar .sidebar-card,
body.sidemenu-mini .sidebar .tiny,
body.sidemenu-mini .sidebar .status-pill,
body.sidemenu-mini .sidebar .eyebrow {
  display: none !important;
}

/* Make every frontend parent item a horizontal icon + arrow row in mini mode. */
body.public-layout-body.sidemenu-mini .sidebar .nav-row,
body.sidemenu-mini .sidebar .nav-row {
  width: 52px !important;
  height: 46px !important;
  display: grid !important;
  grid-template-columns: 1fr 16px !important;
  align-items: center !important;
  gap: 0 !important;
  position: relative !important;
}

body.public-layout-body.sidemenu-mini .sidebar .nav-row .nav-link,
body.public-layout-body.sidemenu-mini .sidebar .nav-row .nav-parent-button,
body.sidemenu-mini .sidebar .nav-row .nav-link,
body.sidemenu-mini .sidebar .nav-row .nav-parent-button {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 52px !important;
  height: 46px !important;
  padding: 0 16px 0 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
}

body.public-layout-body.sidemenu-mini .sidebar .nav-icon,
body.sidemenu-mini .sidebar .nav-icon {
  width: 36px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
}

/* Replace up/down chevron bubble with a right-side left/right arrow. */
body.public-layout-body.sidemenu-mini .sidebar .sub-toggle,
body.sidemenu-mini .sidebar .sub-toggle {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: static !important;
  width: 16px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--brand2) !important;
  z-index: 8 !important;
}

body.public-layout-body.sidemenu-mini .sidebar .sub-toggle svg,
body.public-layout-body.sidemenu-mini .sidebar .sub-toggle .chev,
body.sidemenu-mini .sidebar .sub-toggle svg,
body.sidemenu-mini .sidebar .sub-toggle .chev {
  display: none !important;
}

body.public-layout-body.sidemenu-mini .sidebar .sub-toggle::before,
body.sidemenu-mini .sidebar .sub-toggle::before {
  content: "›";
  display: block;
  font-size: 1rem;
  line-height: 1;
  font-weight: 1000;
  transform: translateY(-1px);
}

body.public-layout-body.sidemenu-mini .sidebar .nav-item.mini-flyout-open .sub-toggle::before,
body.public-layout-body.sidemenu-mini .sidebar .nav-item.active-parent .sub-toggle::before,
body.sidemenu-mini .sidebar .nav-item.mini-flyout-open .sub-toggle::before,
body.sidemenu-mini .sidebar .nav-item.active-parent .sub-toggle::before {
  content: "‹";
}

/* Keep the frontend mini flyout aligned next to the parent row. */
body.public-layout-body.sidemenu-mini .sidebar .subs,
body.sidemenu-mini .sidebar .subs {
  left: 82px !important;
}

/* Remove any old round/bottom arrow styling from frontend mini mode. */
body.public-layout-body.sidemenu-mini .sidebar .sub-toggle:hover,
body.sidemenu-mini .sidebar .sub-toggle:hover {
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
}


/* Backend mini-sidebar arrow polish + flyout overlay fix */

/* Make sidebar/flyout containers overflow above page content */
body.sidemenu-mini .sidebar,
body.sidemenu-mini .admin-sidebar,
body.sidemenu-mini .side-nav,
body.sidemenu-mini .admin-side-nav,
body.sidemenu-mini .nav-group,
body.sidemenu-mini .nav-group-flat,
body.sidemenu-mini .nav-item,
body.sidemenu-mini .nav-parent-row,
body.sidemenu-mini .nav-row {
  overflow: visible !important;
}

/* Keep sidebars above main content when flyouts are open */
body.sidemenu-mini .sidebar,
body.sidemenu-mini .admin-sidebar {
  position: relative !important;
  z-index: 5000 !important;
}

body.sidemenu-mini .main-shell,
body.sidemenu-mini .admin-main,
body.sidemenu-mini .content,
body.sidemenu-mini .admin-content {
  position: relative;
  z-index: 1;
}

/* Force flyout boxes above everything in the page content */
body.sidemenu-mini .submenu-links,
body.sidemenu-mini .subs,
body.sidemenu-mini .admin-sidebar .submenu-links,
body.sidemenu-mini .sidebar .subs {
  z-index: 99999 !important;
  position: fixed !important;
  isolation: isolate;
  box-shadow: 0 22px 70px rgba(0,0,0,.56) !important;
}

/* Backend mini mode: keep only logo + menu icons */
body.admin-layout-body.sidemenu-mini .admin-sidebar .brand {
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}

body.admin-layout-body.sidemenu-mini .admin-sidebar .brand img {
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
}

body.admin-layout-body.sidemenu-mini .admin-sidebar .brand-copy,
body.admin-layout-body.sidemenu-mini .admin-sidebar .brand > div,
body.admin-layout-body.sidemenu-mini .admin-sidebar .brand strong,
body.admin-layout-body.sidemenu-mini .admin-sidebar .brand span,
body.admin-layout-body.sidemenu-mini .admin-sidebar .sidebar-card,
body.admin-layout-body.sidemenu-mini .admin-sidebar .admin-user-card,
body.admin-layout-body.sidemenu-mini .admin-sidebar .tiny,
body.admin-layout-body.sidemenu-mini .admin-sidebar .status-pill,
body.admin-layout-body.sidemenu-mini .admin-sidebar .eyebrow {
  display: none !important;
}

/* Backend parent item = icon + right-side arrow in the same horizontal line */
body.admin-layout-body.sidemenu-mini .admin-sidebar .nav-parent-row {
  width: 52px !important;
  height: 46px !important;
  display: grid !important;
  grid-template-columns: 1fr 16px !important;
  align-items: center !important;
  gap: 0 !important;
  position: relative !important;
}

body.admin-layout-body.sidemenu-mini .admin-sidebar .nav-parent-row .nav-link,
body.admin-layout-body.sidemenu-mini .admin-sidebar .nav-parent-row .nav-parent-button {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 52px !important;
  height: 46px !important;
  padding: 0 16px 0 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
}

body.admin-layout-body.sidemenu-mini .admin-sidebar .nav-icon {
  width: 36px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
}

/* Replace backend up/down chevron bubble with left/right arrow */
body.admin-layout-body.sidemenu-mini .admin-sidebar .submenu-toggle {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: static !important;
  width: 16px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--brand2) !important;
  z-index: 8 !important;
}

body.admin-layout-body.sidemenu-mini .admin-sidebar .submenu-toggle svg,
body.admin-layout-body.sidemenu-mini .admin-sidebar .submenu-toggle .submenu-chevron {
  display: none !important;
}

body.admin-layout-body.sidemenu-mini .admin-sidebar .submenu-toggle::before {
  content: "›";
  display: block;
  font-size: 1rem;
  line-height: 1;
  font-weight: 1000;
  transform: translateY(-1px);
}

body.admin-layout-body.sidemenu-mini .admin-sidebar .nav-item.mini-flyout-open .submenu-toggle::before,
body.admin-layout-body.sidemenu-mini .admin-sidebar .nav-item.submenu-open .submenu-toggle::before,
body.admin-layout-body.sidemenu-mini .admin-sidebar .nav-item.active-parent .submenu-toggle::before {
  content: "‹";
}

body.admin-layout-body.sidemenu-mini .admin-sidebar .submenu-toggle:hover {
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
}

/* Backend mini flyout alignment */
body.admin-layout-body.sidemenu-mini .admin-sidebar .submenu-links {
  left: 82px !important;
  top: var(--mini-flyout-top, 120px) !important;
}

/* Flyout text must always show even though sidebar labels are hidden */
body.sidemenu-mini .submenu-links span:not(.submenu-dot),
body.sidemenu-mini .subs span:not(.dot) {
  display: inline !important;
}

/* Add a tiny arrow notch pointing to the parent icon */
body.sidemenu-mini .submenu-links::before,
body.sidemenu-mini .subs::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 18px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: var(--panel);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  z-index: -1;
}

/* Make sure roster cards/tables never cover flyout */
.fd-roster-board,
.fd-roster-scroll,
.fd-roster-row,
.fd-roster-section,
.card,
.manager-card,
.personnel-manager-card,
.users-manager-card {
  position: relative;
  z-index: auto;
}


/* Fixed + aligned sidebar final pass
   Frontend and backend sidebars now behave the same:
   - sidebar stays fixed/sticky and does not scroll away with page content
   - mini mode keeps logo + menu icons only
   - submenu arrow is horizontally aligned on the right side of the parent icon
*/

/* Keep sidebars visible while the main page scrolls */
@media (min-width: 901px) {
  .sidebar,
  .admin-sidebar {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
  }

  .sidebar::-webkit-scrollbar,
  .admin-sidebar::-webkit-scrollbar {
    width: 6px;
  }

  .sidebar::-webkit-scrollbar-track,
  .admin-sidebar::-webkit-scrollbar-track {
    background: transparent;
  }

  .sidebar::-webkit-scrollbar-thumb,
  .admin-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,159,28,.22);
    border-radius: 999px;
  }

  /* Mini sidebars need visible overflow for flyout boxes */
  body.sidemenu-mini .sidebar,
  body.sidemenu-mini .admin-sidebar {
    overflow: visible !important;
  }

  body.sidemenu-mini .main-shell,
  body.sidemenu-mini .admin-main {
    min-width: 0;
  }
}

/* Shared mini menu dimensions */
body.sidemenu-mini .sidebar,
body.sidemenu-mini .admin-sidebar {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

body.sidemenu-mini .side-nav,
body.sidemenu-mini .admin-side-nav,
body.sidemenu-mini .nav-group,
body.sidemenu-mini .nav-group-flat {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: center !important;
  justify-items: center !important;
}

/* Every mini nav row has identical icon/arrow geometry */
body.sidemenu-mini .nav-item,
body.sidemenu-mini .nav-row,
body.sidemenu-mini .nav-parent-row {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
}

body.sidemenu-mini .nav-row,
body.sidemenu-mini .nav-parent-row {
  height: 46px !important;
  min-height: 46px !important;
  display: grid !important;
  grid-template-columns: 36px 16px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  position: relative !important;
}

/* Non-parent links still use full icon box */
body.sidemenu-mini .nav-item:not(.has-submenu) > .nav-link,
body.sidemenu-mini .nav-row > a.nav-link:not(.nav-parent-button),
body.sidemenu-mini .admin-side-nav > .nav-link,
body.sidemenu-mini .nav-group > .nav-link,
body.sidemenu-mini .nav-group-flat > .nav-link {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 46px !important;
  min-height: 46px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  padding: 0 !important;
}

/* Parent link/button occupies the full row but reserves 16px on the right for arrow */
body.sidemenu-mini .nav-row > .nav-link,
body.sidemenu-mini .nav-row > .nav-parent-button,
body.sidemenu-mini .nav-parent-row > .nav-link,
body.sidemenu-mini .nav-parent-row > .nav-parent-button {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 46px !important;
  min-height: 46px !important;
  display: grid !important;
  grid-template-columns: 36px 16px !important;
  align-items: center !important;
  justify-items: center !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Icon always sits in the left 36px cell */
body.sidemenu-mini .nav-icon,
body.sidemenu-mini .admin-side-nav .nav-icon {
  grid-column: 1 !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 46px !important;
  min-height: 46px !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
}

/* Hide text in mini mode */
body.sidemenu-mini .nav-link span:not(.nav-icon),
body.sidemenu-mini .nav-parent-button span:not(.nav-icon),
body.sidemenu-mini .submenu-link span:not(.submenu-dot),
body.sidemenu-mini .sub span:not(.dot) {
  display: none !important;
}

/* Arrow button uses the right 16px cell, not a floating bubble */
body.sidemenu-mini .sub-toggle,
body.sidemenu-mini .submenu-toggle,
body.admin-layout-body.sidemenu-mini .admin-sidebar .submenu-toggle,
body.public-layout-body.sidemenu-mini .sidebar .sub-toggle {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  inset: auto !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--brand2) !important;
  transform: none !important;
  z-index: 20 !important;
}

/* Kill old svg chevrons/bubbles */
body.sidemenu-mini .sub-toggle svg,
body.sidemenu-mini .sub-toggle .chev,
body.sidemenu-mini .submenu-toggle svg,
body.sidemenu-mini .submenu-toggle .submenu-chevron {
  display: none !important;
}

/* Uniform left/right arrows */
body.sidemenu-mini .sub-toggle::before,
body.sidemenu-mini .submenu-toggle::before {
  content: "›" !important;
  display: block !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  transform: translateY(-1px) !important;
  color: currentColor !important;
}

body.sidemenu-mini .nav-item.mini-flyout-open .sub-toggle::before,
body.sidemenu-mini .nav-item.active-parent .sub-toggle::before,
body.sidemenu-mini .nav-item.mini-flyout-open .submenu-toggle::before,
body.sidemenu-mini .nav-item.submenu-open .submenu-toggle::before,
body.sidemenu-mini .nav-item.active-parent .submenu-toggle::before {
  content: "‹" !important;
}

/* Flyout is always above page content and aligned next to the 76px mini bar */
body.sidemenu-mini .submenu-links,
body.sidemenu-mini .subs,
body.sidemenu-mini .admin-sidebar .submenu-links,
body.sidemenu-mini .sidebar .subs {
  left: 84px !important;
  z-index: 999999 !important;
  position: fixed !important;
}

/* Make the page content never cover the flyout */
body.sidemenu-mini .sidebar,
body.sidemenu-mini .admin-sidebar {
  z-index: 999998 !important;
}

body.sidemenu-mini .main-shell,
body.sidemenu-mini .admin-main,
body.sidemenu-mini .content,
body.sidemenu-mini .admin-content {
  z-index: 1 !important;
}

/* Bottom-left toggle stays aligned with mini bar and does not scroll with content */
.sidemenu-toggle-button {
  position: fixed !important;
  left: 16px !important;
  bottom: 16px !important;
  z-index: 1000000 !important;
}

body:not(.sidemenu-mini) .sidemenu-toggle-button {
  left: 18px !important;
}

/* Expanded sidebar still keeps its own scroll if menu is taller than screen,
   but it does not scroll away with main content. */
body:not(.sidemenu-mini) .sidebar,
body:not(.sidemenu-mini) .admin-sidebar {
  overflow-y: auto !important;
}

/* Mobile remains unchanged */
@media (max-width: 900px) {
  .sidebar,
  .admin-sidebar {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* Sidebar no-scroll + backend flyout text fix */

/*
  Sidebar should stay static/fixed and should NOT have its own vertical scrollbar.
  Page content can scroll, but the sidebar itself stays in place.
*/
@media (min-width: 901px) {
  .sidebar,
  .admin-sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    scrollbar-width: none !important;
  }

  .sidebar::-webkit-scrollbar,
  .admin-sidebar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body:not(.sidemenu-mini) .sidebar,
  body:not(.sidemenu-mini) .admin-sidebar,
  body.sidemenu-mini .sidebar,
  body.sidemenu-mini .admin-sidebar {
    overflow-y: visible !important;
    overflow-x: visible !important;
  }
}

/*
  In mini mode, hide main sidebar labels, but DO NOT hide flyout submenu labels.
  This fixes backend submenu options showing dots only with no text.
*/
body.sidemenu-mini .sidebar > nav .nav-link > span:not(.nav-icon),
body.sidemenu-mini .admin-sidebar > nav .nav-link > span:not(.nav-icon),
body.sidemenu-mini .sidebar > nav .nav-parent-button > span:not(.nav-icon),
body.sidemenu-mini .admin-sidebar > nav .nav-parent-button > span:not(.nav-icon) {
  display: none !important;
}

body.sidemenu-mini .submenu-links .submenu-link span:not(.submenu-dot),
body.sidemenu-mini .admin-sidebar .submenu-links .submenu-link span:not(.submenu-dot),
body.sidemenu-mini .sidebar .subs .sub span:not(.dot),
body.sidemenu-mini .subs .sub span:not(.dot) {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

body.sidemenu-mini .admin-sidebar .submenu-links .submenu-link,
body.sidemenu-mini .sidebar .subs .sub {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 34px !important;
  padding: 8px 10px !important;
  text-align: left !important;
}

/* Keep flyout panels independent from sidebar clipping/scrolling */
body.sidemenu-mini .submenu-links,
body.sidemenu-mini .subs {
  overflow-y: visible !important;
  overflow-x: visible !important;
}


/* FINAL mini sidebar no-scroll fix
   In minimized mode the sidebar becomes fixed, so it never scrolls with the page
   and never creates its own vertical scrolling area. */
@media (min-width: 901px) {
  body.sidemenu-mini .sidebar,
  body.sidemenu-mini .admin-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    transform: none !important;
    overscroll-behavior: none !important;
    scrollbar-width: none !important;
    z-index: 999998 !important;
  }

  body.sidemenu-mini .sidebar::-webkit-scrollbar,
  body.sidemenu-mini .admin-sidebar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Keep the mini bar compact enough to avoid internal/page scrolling. */
  body.sidemenu-mini .side-nav,
  body.sidemenu-mini .admin-side-nav {
    height: auto !important;
    max-height: calc(100vh - 92px) !important;
    overflow: visible !important;
    gap: 5px !important;
  }

  body.sidemenu-mini .nav-group,
  body.sidemenu-mini .nav-group-flat {
    gap: 5px !important;
  }

  body.sidemenu-mini .nav-link,
  body.sidemenu-mini .admin-side-nav .nav-link,
  body.sidemenu-mini .nav-row,
  body.sidemenu-mini .nav-parent-row {
    height: 40px !important;
    min-height: 40px !important;
  }

  body.sidemenu-mini .nav-icon,
  body.sidemenu-mini .admin-side-nav .nav-icon,
  body.sidemenu-mini .sub-toggle,
  body.sidemenu-mini .submenu-toggle {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  body.sidemenu-mini .sidebar .brand,
  body.sidemenu-mini .admin-sidebar .brand {
    height: 48px !important;
    min-height: 48px !important;
    margin-bottom: 12px !important;
  }

  body.sidemenu-mini .sidebar .brand img,
  body.sidemenu-mini .admin-sidebar .brand img {
    width: 42px !important;
    height: 42px !important;
  }

  /*
    Because the minimized sidebar is fixed, keep the layout's first grid column
    as the reserved 76px space so content does not slide under the icon bar.
  */
  body.sidemenu-mini .shell,
  body.sidemenu-mini.admin-layout-body .admin-firehouse-shell {
    grid-template-columns: 76px 1fr !important;
  }
}

/* Mobile/drawer behavior remains unchanged. */
@media (max-width: 900px) {
  body.sidemenu-mini .sidebar,
  body.sidemenu-mini .admin-sidebar {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }
}


/* SAFE MINI SIDEBAR REPAIR
   Undo the broken fixed mini-sidebar behavior.
   The mini sidebar stays inside the grid, so it never overlays/cuts the page content.
*/
@media (min-width: 901px) {
  body.sidemenu-mini .shell,
  body.sidemenu-mini.admin-layout-body .admin-firehouse-shell,
  body.sidemenu-mini .app-shell {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  body.sidemenu-mini .sidebar,
  body.sidemenu-mini .admin-sidebar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding: 18px 12px !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 60 !important;
  }

  body.sidemenu-mini .main-shell,
  body.sidemenu-mini .admin-main {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }

  body.sidemenu-mini .content,
  body.sidemenu-mini .admin-content {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Keep only the logo and menu icons visible in mini mode. */
  body.sidemenu-mini .sidebar > *:not(.brand):not(.side-nav):not(nav),
  body.sidemenu-mini .admin-sidebar > *:not(.brand):not(.side-nav):not(nav),
  body.sidemenu-mini .sidebar-card,
  body.sidemenu-mini .admin-user-card,
  body.sidemenu-mini .status-pill,
  body.sidemenu-mini .tiny,
  body.sidemenu-mini .eyebrow,
  body.sidemenu-mini .brand-copy,
  body.sidemenu-mini .brand > div,
  body.sidemenu-mini .brand strong,
  body.sidemenu-mini .brand span {
    display: none !important;
  }

  body.sidemenu-mini .sidebar .brand,
  body.sidemenu-mini .admin-sidebar .brand {
    width: 52px !important;
    height: 52px !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
  }

  body.sidemenu-mini .sidebar .brand img,
  body.sidemenu-mini .admin-sidebar .brand img {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }

  body.sidemenu-mini .side-nav,
  body.sidemenu-mini .admin-side-nav,
  body.sidemenu-mini .nav-group,
  body.sidemenu-mini .nav-group-flat {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  body.sidemenu-mini .nav-item,
  body.sidemenu-mini .nav-row,
  body.sidemenu-mini .nav-parent-row {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: grid !important;
    grid-template-columns: 36px 16px !important;
    align-items: center !important;
    gap: 0 !important;
    position: relative !important;
  }

  body.sidemenu-mini .nav-link,
  body.sidemenu-mini .nav-parent-button,
  body.sidemenu-mini .admin-side-nav .nav-link {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: grid !important;
    grid-template-columns: 36px 16px !important;
    align-items: center !important;
    justify-items: center !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 14px !important;
  }

  body.sidemenu-mini .nav-icon,
  body.sidemenu-mini .admin-side-nav .nav-icon {
    grid-column: 1 !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
  }

  body.sidemenu-mini .nav-link span:not(.nav-icon),
  body.sidemenu-mini .nav-parent-button span:not(.nav-icon) {
    display: none !important;
  }

  /* Arrow aligned in the right-side 16px cell. */
  body.sidemenu-mini .sub-toggle,
  body.sidemenu-mini .submenu-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--brand2) !important;
    display: grid !important;
    place-items: center !important;
    z-index: 5 !important;
  }

  body.sidemenu-mini .sub-toggle svg,
  body.sidemenu-mini .sub-toggle .chev,
  body.sidemenu-mini .submenu-toggle svg,
  body.sidemenu-mini .submenu-toggle .submenu-chevron {
    display: none !important;
  }

  body.sidemenu-mini .sub-toggle::before,
  body.sidemenu-mini .submenu-toggle::before {
    content: "›" !important;
    display: block !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    transform: translateY(-1px) !important;
  }

  body.sidemenu-mini .nav-item.mini-flyout-open .sub-toggle::before,
  body.sidemenu-mini .nav-item.active-parent .sub-toggle::before,
  body.sidemenu-mini .nav-item.mini-flyout-open .submenu-toggle::before,
  body.sidemenu-mini .nav-item.submenu-open .submenu-toggle::before,
  body.sidemenu-mini .nav-item.active-parent .submenu-toggle::before {
    content: "‹" !important;
  }

  /* Flyout can escape sidebar without making sidebar scroll. */
  body.sidemenu-mini .submenu-links,
  body.sidemenu-mini .subs {
    position: fixed !important;
    left: 84px !important;
    top: var(--mini-flyout-top, 120px) !important;
    z-index: 999999 !important;
    display: none !important;
    width: 220px !important;
    max-height: min(420px, calc(100vh - 24px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 0% 0%, rgba(255,59,34,.12), transparent 14rem),
      var(--panel) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.56) !important;
  }

  body.sidemenu-mini .nav-item.mini-flyout-open .submenu-links,
  body.sidemenu-mini .nav-item.submenu-open .submenu-links,
  body.sidemenu-mini .nav-item.mini-flyout-open .subs,
  body.sidemenu-mini .nav-item.active-parent .subs {
    display: grid !important;
  }

  body.sidemenu-mini .submenu-links .submenu-link,
  body.sidemenu-mini .subs .sub {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 34px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }

  body.sidemenu-mini .submenu-links .submenu-link span:not(.submenu-dot),
  body.sidemenu-mini .subs .sub span:not(.dot) {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
  }

  /* Toggle button stays fixed but no longer affects layout. */
  .sidemenu-toggle-button {
    position: fixed !important;
    left: 16px !important;
    bottom: 16px !important;
    z-index: 1000000 !important;
  }

  body:not(.sidemenu-mini) .sidemenu-toggle-button {
    left: 18px !important;
  }
}

/* Restore mobile behavior. */
@media (max-width: 900px) {
  body.sidemenu-mini .sidebar,
  body.sidemenu-mini .admin-sidebar {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }

  body.sidemenu-mini .main-shell,
  body.sidemenu-mini .admin-main {
    grid-column: auto !important;
  }
}


/* FINAL mini submenu click/display fix */

/* Parent menu items must be clickable in mini mode. */
body.sidemenu-mini .nav-item.has-submenu,
body.sidemenu-mini .nav-item.has-submenu .nav-row,
body.sidemenu-mini .nav-item.has-submenu .nav-parent-row,
body.sidemenu-mini .nav-item.has-submenu .nav-link,
body.sidemenu-mini .nav-item.has-submenu .nav-parent-button,
body.sidemenu-mini .nav-item.has-submenu .sub-toggle,
body.sidemenu-mini .nav-item.has-submenu .submenu-toggle {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Hide all mini flyouts by default, regardless of old active/open classes. */
body.sidemenu-mini .nav-item.has-submenu .submenu-links,
body.sidemenu-mini .nav-item.has-submenu .subs {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Show ONLY when our final JS adds mini-flyout-open. */
body.sidemenu-mini .nav-item.has-submenu.mini-flyout-open .submenu-links,
body.sidemenu-mini .nav-item.has-submenu.mini-flyout-open .subs {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: 84px !important;
  top: var(--mini-flyout-top, 120px) !important;
  z-index: 1000002 !important;
  width: 220px !important;
  max-height: min(420px, calc(100vh - 24px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Make flyout option text visible in both frontend/backend. */
body.sidemenu-mini .nav-item.has-submenu.mini-flyout-open .submenu-links .submenu-link span:not(.submenu-dot),
body.sidemenu-mini .nav-item.has-submenu.mini-flyout-open .subs .sub span:not(.dot) {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: nowrap !important;
}

/* Arrow direction is controlled by mini-flyout-open only. */
body.sidemenu-mini .nav-item.has-submenu .sub-toggle::before,
body.sidemenu-mini .nav-item.has-submenu .submenu-toggle::before {
  content: "›" !important;
}

body.sidemenu-mini .nav-item.has-submenu.mini-flyout-open .sub-toggle::before,
body.sidemenu-mini .nav-item.has-submenu.mini-flyout-open .submenu-toggle::before {
  content: "‹" !important;
}

/* Ensure the flyout is not clipped by the mini bar or page cards. */
body.sidemenu-mini .sidebar,
body.sidemenu-mini .admin-sidebar,
body.sidemenu-mini .side-nav,
body.sidemenu-mini .admin-side-nav,
body.sidemenu-mini .nav-group,
body.sidemenu-mini .nav-group-flat,
body.sidemenu-mini .nav-item.has-submenu {
  overflow: visible !important;
}


/* Mini submenu hover behavior:
   Flyouts show on hover and close when the mouse leaves.
   They do not stay open after reload/page change. */

/* Reset any active/open state from normal full sidebar while minimized. */
body.sidemenu-mini .nav-item.has-submenu:not(.mini-flyout-open) .submenu-links,
body.sidemenu-mini .nav-item.has-submenu:not(.mini-flyout-open) .subs {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hover opens the flyout too, even before JS class is applied. */
body.sidemenu-mini .nav-item.has-submenu:hover .submenu-links,
body.sidemenu-mini .nav-item.has-submenu:hover .subs,
body.sidemenu-mini .nav-item.has-submenu.mini-flyout-open .submenu-links,
body.sidemenu-mini .nav-item.has-submenu.mini-flyout-open .subs {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: 84px !important;
  top: var(--mini-flyout-top, 120px) !important;
  z-index: 1000002 !important;
  width: 220px !important;
  max-height: min(420px, calc(100vh - 24px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Arrow only flips while hovering/open. */
body.sidemenu-mini .nav-item.has-submenu .sub-toggle::before,
body.sidemenu-mini .nav-item.has-submenu .submenu-toggle::before {
  content: "›" !important;
}

body.sidemenu-mini .nav-item.has-submenu:hover .sub-toggle::before,
body.sidemenu-mini .nav-item.has-submenu:hover .submenu-toggle::before,
body.sidemenu-mini .nav-item.has-submenu.mini-flyout-open .sub-toggle::before,
body.sidemenu-mini .nav-item.has-submenu.mini-flyout-open .submenu-toggle::before {
  content: "‹" !important;
}

/* Ensure active/current parent does not force the flyout open in mini mode. */
body.sidemenu-mini .nav-item.has-submenu.active-parent:not(:hover):not(.mini-flyout-open) .submenu-links,
body.sidemenu-mini .nav-item.has-submenu.submenu-open:not(:hover):not(.mini-flyout-open) .submenu-links,
body.sidemenu-mini .nav-item.has-submenu.active-parent:not(:hover):not(.mini-flyout-open) .subs,
body.sidemenu-mini .nav-item.has-submenu.submenu-open:not(:hover):not(.mini-flyout-open) .subs {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Flyout text always visible while hover/open. */
body.sidemenu-mini .nav-item.has-submenu:hover .submenu-links .submenu-link span:not(.submenu-dot),
body.sidemenu-mini .nav-item.has-submenu:hover .subs .sub span:not(.dot),
body.sidemenu-mini .nav-item.has-submenu.mini-flyout-open .submenu-links .submenu-link span:not(.submenu-dot),
body.sidemenu-mini .nav-item.has-submenu.mini-flyout-open .subs .sub span:not(.dot) {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: nowrap !important;
}


/* Mini submenu hover timing fix
   - frontend closes when the mouse leaves
   - backend stays open long enough to move into the submenu
   - active/current parent no longer keeps flyout open forever */

/* Never let active/submenu-open alone keep a mini flyout visible. */
body.sidemenu-mini .nav-item.has-submenu.active-parent:not(:hover):not(.mini-flyout-open) .submenu-links,
body.sidemenu-mini .nav-item.has-submenu.active-parent:not(:hover):not(.mini-flyout-open) .subs,
body.sidemenu-mini .nav-item.has-submenu.submenu-open:not(:hover):not(.mini-flyout-open) .submenu-links,
body.sidemenu-mini .nav-item.has-submenu.submenu-open:not(:hover):not(.mini-flyout-open) .subs {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Show while JS keeps the class, or while directly hovering the parent. */
body.sidemenu-mini .nav-item.has-submenu.mini-flyout-open .submenu-links,
body.sidemenu-mini .nav-item.has-submenu.mini-flyout-open .subs,
body.sidemenu-mini .nav-item.has-submenu:hover .submenu-links,
body.sidemenu-mini .nav-item.has-submenu:hover .subs {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: 84px !important;
  top: var(--mini-flyout-top, 120px) !important;
  z-index: 1000002 !important;
}

/* The flyout itself must accept hover; otherwise it closes before selecting options. */
body.sidemenu-mini .submenu-links,
body.sidemenu-mini .subs {
  pointer-events: auto !important;
}

/* Arrow flips only on actual hover/open, not just active page. */
body.sidemenu-mini .nav-item.has-submenu .sub-toggle::before,
body.sidemenu-mini .nav-item.has-submenu .submenu-toggle::before {
  content: "›" !important;
}

body.sidemenu-mini .nav-item.has-submenu:hover .sub-toggle::before,
body.sidemenu-mini .nav-item.has-submenu:hover .submenu-toggle::before,
body.sidemenu-mini .nav-item.has-submenu.mini-flyout-open .sub-toggle::before,
body.sidemenu-mini .nav-item.has-submenu.mini-flyout-open .submenu-toggle::before {
  content: "‹" !important;
}


/* FINAL frontend hover fix:
   Public submenu parents must use has-submenu, and active/current page must not keep flyout open forever. */

/* Force frontend flyouts closed unless the parent is hovered or JS has mini-flyout-open. */
body.sidemenu-mini .sidebar .nav-item.has-submenu:not(:hover):not(.mini-flyout-open) .subs,
body.sidemenu-mini .sidebar .nav-item.has-submenu:not(:hover):not(.mini-flyout-open) .submenu-links,
body.sidemenu-mini .sidebar .nav-item.has-submenu.active-parent:not(:hover):not(.mini-flyout-open) .subs,
body.sidemenu-mini .sidebar .nav-item.has-submenu.active-parent:not(:hover):not(.mini-flyout-open) .submenu-links {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Frontend hover opens immediately. */
body.sidemenu-mini .sidebar .nav-item.has-submenu:hover .subs,
body.sidemenu-mini .sidebar .nav-item.has-submenu:hover .submenu-links,
body.sidemenu-mini .sidebar .nav-item.has-submenu.mini-flyout-open .subs,
body.sidemenu-mini .sidebar .nav-item.has-submenu.mini-flyout-open .submenu-links {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: 84px !important;
  top: var(--mini-flyout-top, 120px) !important;
  z-index: 1000002 !important;
}

/* Frontend arrow is closed by default, open only on hover or JS-open. */
body.sidemenu-mini .sidebar .nav-item.has-submenu .sub-toggle::before {
  content: "›" !important;
}

body.sidemenu-mini .sidebar .nav-item.has-submenu:hover .sub-toggle::before,
body.sidemenu-mini .sidebar .nav-item.has-submenu.mini-flyout-open .sub-toggle::before {
  content: "‹" !important;
}


/* Division / Station manager polish */
.manager-row .manager-icon {
  user-select: none;
}

.manager-order-status {
  margin-top: -6px;
}


/* Duplicate option error flash polish */
.flash.error,
.alert.error,
.notice.error {
  border-color: rgba(255,77,90,.34) !important;
  background: rgba(255,77,90,.10) !important;
  color: #ffb3ba !important;
}


/* CMS AJAX error modal */
.cms-error-modal {
  position: fixed;
  inset: 0;
  z-index: 2000000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.cms-error-modal.open {
  display: flex;
}

.cms-error-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(8px);
}

.cms-error-panel {
  position: relative;
  z-index: 1;
  width: min(560px, 94vw);
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 44px;
  gap: 16px;
  align-items: start;
  padding: 20px;
  border: 1px solid rgba(255,77,90,.34);
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,77,90,.18), transparent 18rem),
    var(--panel);
  box-shadow: 0 28px 90px rgba(0,0,0,.56);
}

.cms-error-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 1000;
  background: linear-gradient(135deg, #ff4d5a, #ff9f1c);
  box-shadow: 0 14px 34px rgba(255,77,90,.20);
}

.cms-error-copy h2 {
  margin: 5px 0 8px;
  letter-spacing: -.035em;
}

.cms-error-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.cms-error-close {
  justify-self: end;
}

body.cms-error-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .cms-error-panel {
    grid-template-columns: 48px minmax(0, 1fr) 40px;
    gap: 12px;
    padding: 16px;
  }

  .cms-error-icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }
}


/* Reverted clean emoji action buttons
   Built from the last working text-button version, then changed text to emojis only. */
.manager-actions,
.sort-actions,
.user-actions,
.actions.manager-actions,
.actions.sort-actions,
.actions.user-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  justify-self: center !important;
  gap: 8px !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.manager-row,
.personnel-list-row,
.user-row {
  align-items: center !important;
}

.manager-row .manager-actions,
.personnel-list-row .sort-actions,
.user-row .user-actions {
  align-self: center !important;
  justify-self: center !important;
}

.emoji-row-action,
button.emoji-row-action,
.btn2.emoji-row-action,
.btn2.small.emoji-row-action {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  font-size: 16px !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", Arial, sans-serif !important;
  border-radius: 13px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.emoji-row-action.emoji-edit-action {
  color: var(--brand2) !important;
  background: rgba(255,159,28,.10) !important;
  border-color: rgba(255,159,28,.22) !important;
}

.emoji-row-action.emoji-delete-action {
  color: #ff8d96 !important;
  background: rgba(255,77,90,.09) !important;
  border-color: rgba(255,77,90,.24) !important;
}

.emoji-row-action.emoji-edit-action:hover,
.emoji-row-action.emoji-delete-action:hover {
  color: #fff !important;
  transform: translateY(-1px);
}

.emoji-row-action.emoji-edit-action:hover {
  background:
    linear-gradient(135deg, rgba(255,159,28,.24), rgba(255,59,34,.12)),
    rgba(255,255,255,.04) !important;
  border-color: rgba(255,159,28,.42) !important;
}

.emoji-row-action.emoji-delete-action:hover {
  background:
    linear-gradient(135deg, rgba(255,77,90,.26), rgba(255,159,28,.10)),
    rgba(255,255,255,.04) !important;
  border-color: rgba(255,77,90,.42) !important;
}

@media (max-width: 1000px) {
  .manager-row .manager-actions,
  .personnel-list-row .sort-actions,
  .user-row .user-actions {
    justify-self: start !important;
    align-self: center !important;
    height: auto !important;
  }
}

@media (max-width: 640px) {
  .manager-actions,
  .sort-actions,
  .user-actions {
    justify-content: center !important;
    align-self: center !important;
  }
}


/* Profile page */
.profile-card {
  display: grid;
  gap: 22px;
  padding: clamp(20px, 2vw, 30px);
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 18px;
}

.profile-avatar-large {
  width: 86px;
  height: 86px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 26px;
  overflow: hidden;
  color: #fff;
  font-size: 2rem;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 18px 45px rgba(255,59,34,.16);
}

.profile-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-header h2 {
  margin: 6px 0 6px;
  letter-spacing: -.04em;
}

.profile-header p {
  margin: 0;
}

.profile-form {
  display: grid;
  gap: 18px;
}

.profile-preview-box {
  min-height: 160px;
}

.profile-preview-box img {
  width: 128px;
  height: 128px;
  display: block;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 16px 36px rgba(0,0,0,.22);
}

.profile-actions {
  display: flex;
  justify-content: flex-end;
}

/* Top-right account dropdown */
.account-menu {
  position: relative;
  z-index: 1200;
}

.account-menu-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(255,255,255,.035);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
}

.account-menu-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-menu-button span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 230px;
  display: none;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.12), transparent 14rem),
    var(--panel);
  box-shadow: 0 22px 70px rgba(0,0,0,.42);
}

.account-menu.open .account-dropdown {
  display: grid;
  gap: 6px;
}

.account-dropdown-head {
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.account-dropdown-head strong,
.account-dropdown-head small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-dropdown-head small {
  color: var(--muted);
  margin-top: 3px;
}

.account-dropdown a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
}

.account-dropdown a:hover {
  background: rgba(255,255,255,.07);
}

.account-dropdown a.danger {
  color: #ff9aa3;
}

.account-dropdown a span {
  display: grid;
  place-items: center;
}

.public-account-menu {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 1300;
}

.public-login-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(255,255,255,.035);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  text-decoration: none;
}

.public-login-button:hover {
  border-color: rgba(255,159,28,.34);
  background:
    linear-gradient(135deg, rgba(255,59,34,.18), rgba(255,159,28,.10)),
    rgba(255,255,255,.04);
}

.topbar-actions {
  align-items: center;
}

@media (max-width: 760px) {
  .profile-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-actions {
    justify-content: stretch;
  }

  .profile-actions .btn {
    width: 100%;
  }

  .public-account-menu {
    top: 10px;
    right: 10px;
  }

  .account-dropdown {
    right: 0;
    width: min(230px, calc(100vw - 20px));
  }
}


/* Three-option appearance mode selector */
.theme-mode-menu {
  display: grid;
  gap: 10px;
  padding: 10px;
  margin: 4px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.theme-mode-label {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: var(--text);
}

.theme-mode-label span {
  display: grid;
  place-items: center;
}

.theme-mode-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.theme-mode-options button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font: inherit;
  font-size: .76rem;
  font-weight: 900;
  cursor: pointer;
}

.theme-mode-options button:hover {
  color: var(--text);
  border-color: rgba(255,159,28,.28);
  background: rgba(255,159,28,.08);
}

.theme-mode-options button.active,
.theme-mode-options button[aria-pressed="true"] {
  color: #fff;
  border-color: rgba(255,159,28,.42);
  background: linear-gradient(135deg, rgba(255,59,34,.78), rgba(255,159,28,.72));
  box-shadow: 0 10px 24px rgba(255,59,34,.16);
}

.public-account-menu .account-dropdown {
  right: 0;
}

html[data-theme-mode="system"] .theme-mode-options button[data-theme-choice="system"],
html[data-theme-mode="light"] .theme-mode-options button[data-theme-choice="light"],
html[data-theme-mode="dark"] .theme-mode-options button[data-theme-choice="dark"] {
  color: #fff;
}


/* Frontend account menu positioning fix */
.frontend-top-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.frontend-top-actions .public-account-menu {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 1400 !important;
  display: inline-grid !important;
  place-items: center !important;
}

.frontend-top-actions .public-account-menu .account-dropdown {
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
}

/* Disable the old fixed public account positioning when inside the topbar. */
.public-account-menu {
  line-height: 1;
}

body > .public-account-menu {
  position: fixed !important;
  top: 14px !important;
  right: 16px !important;
  left: auto !important;
}

/* Make sure account dropdown is above frontend cards but below admin modals. */
.public-account-menu,
.account-menu {
  z-index: 1400 !important;
}

.public-account-menu .account-dropdown,
.account-menu .account-dropdown {
  z-index: 1401 !important;
}

/* Mobile: keep it inside the topbar instead of covering the page. */
@media (max-width: 760px) {
  .frontend-top-actions {
    gap: 8px !important;
  }

  .frontend-top-actions .public-account-menu {
    position: relative !important;
    top: auto !important;
    right: auto !important;
  }

  .frontend-top-actions .account-dropdown {
    right: 0 !important;
    width: min(230px, calc(100vw - 20px)) !important;
  }
}


/* Reverted frontend account menu: backend-style topbar dropdown */
.frontend-top-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  position: relative !important;
}

.frontend-top-actions .public-account-menu,
.frontend-top-actions .account-menu {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 1400 !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
}

/* If an older body-level public menu somehow remains, hide it so it cannot destroy layout. */
body > .public-account-menu:not(.account-menu) {
  display: none !important;
}

/* Account dropdown opens exactly like backend: under the person button, right aligned. */
.frontend-top-actions .account-dropdown,
.frontend-top-actions .public-account-menu .account-dropdown {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  width: 230px !important;
  z-index: 1600 !important;
}

/* Prevent the frontend dropdown from stretching or becoming full-width. */
.frontend-top-actions .account-menu.open .account-dropdown,
.frontend-top-actions .public-account-menu.open .account-dropdown {
  display: grid !important;
  gap: 6px !important;
}

/* Stop previous fixed public account menu rule from applying inside the topbar. */
.frontend-top-actions .public-account-menu {
  transform: none !important;
}

@media (max-width: 760px) {
  .frontend-top-actions {
    gap: 8px !important;
  }

  .frontend-top-actions .account-dropdown,
  .frontend-top-actions .public-account-menu .account-dropdown {
    right: 0 !important;
    width: min(230px, calc(100vw - 20px)) !important;
  }
}


/* Frontend body-tag/account safety fix */
.public-layout-body .frontend-top-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  position: relative !important;
}

.public-layout-body .frontend-top-actions .account-menu.public-account-menu {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  display: inline-grid !important;
  place-items: center !important;
  z-index: 1500 !important;
}

.public-layout-body .frontend-top-actions .account-menu.public-account-menu .account-dropdown {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  width: 230px !important;
  z-index: 1600 !important;
}

/* If a body-level account menu ever remains from an older broken version, hide only that one. */
body.public-layout-body > .public-account-menu {
  display: none !important;
}


/* Shared merged layout + backend faded topbar */
.admin-head.topbar,
.shared-admin-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  min-height: 76px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(7,16,20,.92), rgba(7,16,20,.72)),
    radial-gradient(circle at 15% -20%, rgba(255,59,34,.16), transparent 22rem);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.admin-head.topbar::after,
.shared-admin-topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -34px;
  height: 34px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7,16,20,.56), rgba(7,16,20,0));
}

body.light .admin-head.topbar,
body.light .shared-admin-topbar {
  background:
    linear-gradient(180deg, rgba(245,247,251,.95), rgba(245,247,251,.80)),
    radial-gradient(circle at 15% -20%, rgba(255,159,28,.13), transparent 22rem);
}

body.light .admin-head.topbar::after,
body.light .shared-admin-topbar::after {
  background: linear-gradient(180deg, rgba(245,247,251,.70), rgba(245,247,251,0));
}

/* Keep frontend/backend account dropdowns identical and contained in topbars */
.frontend-top-actions,
.topbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  position: relative !important;
}

.frontend-top-actions .account-menu,
.topbar-actions .account-menu {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 1500 !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
}

.frontend-top-actions .account-dropdown,
.topbar-actions .account-dropdown {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  width: 230px !important;
  z-index: 1600 !important;
}

/* Hide old body-injected public account menus from previous broken packages. */
body.public-layout-body > .public-account-menu:not(.account-menu) {
  display: none !important;
}

/* Public shell uses same main-shell class now */
.public-main-shell {
  min-width: 0;
}


/* Final image preview centering fix
   Applies to profile image, personnel image, certificate icon, rank icon,
   and any other admin upload preview box. */
.image-preview-box,
.profile-preview-box,
.personnel-image-preview,
.cert-preview-box,
.rank-preview-box,
.icon-preview-box,
.upload-preview-box {
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  text-align: center !important;
}

.image-preview-box img,
.profile-preview-box img,
.personnel-image-preview img,
.cert-preview-box img,
.rank-preview-box img,
.icon-preview-box img,
.upload-preview-box img {
  display: block !important;
  margin: auto !important;
  align-self: center !important;
  justify-self: center !important;
  max-width: calc(100% - 20px) !important;
  max-height: calc(100% - 20px) !important;
}

/* Profile/personnel photos should stay nicely cropped as square portraits. */
.profile-preview-box img,
.personnel-image-preview img {
  object-fit: cover !important;
}

/* Small uploaded icons should not be stretched. */
.cert-preview-box img,
.rank-preview-box img,
.icon-preview-box img,
.upload-preview-box img {
  object-fit: contain !important;
}

/* Empty/no-image text should also be centered. */
.image-preview-box span,
.profile-preview-box span,
.personnel-image-preview span,
.cert-preview-box span,
.rank-preview-box span,
.icon-preview-box span,
.upload-preview-box span {
  justify-self: center !important;
  align-self: center !important;
  text-align: center !important;
  margin: 0 auto !important;
}


/* Profile/personnel preview image full-box fill
   Photos now use the whole preview box instead of sitting as a small centered image.
   Icon previews still remain contained and not stretched. */
.profile-preview-box,
.personnel-image-preview {
  padding: 0 !important;
  overflow: hidden !important;
}

.profile-preview-box img,
.personnel-image-preview img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep empty text centered with normal inner spacing. */
.profile-preview-box span,
.personnel-image-preview span {
  padding: 16px !important;
}

/* Icon upload previews should stay safely contained. */
.cert-preview-box img,
.rank-preview-box img,
.icon-preview-box img,
.upload-preview-box img {
  width: auto !important;
  height: auto !important;
  max-width: calc(100% - 20px) !important;
  max-height: calc(100% - 20px) !important;
  object-fit: contain !important;
}


/* Manager toolbar autosave alignment
   Places "Drag a row to auto-save order" on the right side of the search bar,
   matching Personnel Management. */
.manager-toolbar {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
}

.manager-toolbar .search-input {
  min-width: 0 !important;
  width: 100% !important;
}

.manager-toolbar .manager-order-status {
  justify-self: end !important;
  align-self: center !important;
  margin-top: 0 !important;
  white-space: nowrap !important;
}

/* Remove old standalone spacing if any manager-order-status remains outside a toolbar. */
.manager-card > .manager-order-status,
.section.card > .manager-order-status {
  margin-top: 0 !important;
}

/* Mobile/tablet: stack search and autosave pill cleanly. */
@media (max-width: 820px) {
  .manager-toolbar {
    grid-template-columns: 1fr !important;
  }

  .manager-toolbar .manager-order-status {
    justify-self: start !important;
    width: fit-content !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
}


/* Subcategory permission cards */
.permission-tree-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 10px !important;
}

.permission-parent-card {
  grid-column: 1 / -1;
  border-color: rgba(255,159,28,.24) !important;
  background:
    linear-gradient(135deg, rgba(255,159,28,.10), rgba(255,59,34,.05)),
    rgba(255,255,255,.035) !important;
}

.permission-sub-card {
  margin-left: 22px;
  position: relative;
}

.permission-sub-card::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 999px;
  background: rgba(255,159,28,.30);
}

.permission-sub-card .permission-icon {
  opacity: .92;
}

.permission-card.partial-on {
  border-color: rgba(255,159,28,.42) !important;
  background:
    linear-gradient(135deg, rgba(255,159,28,.14), rgba(255,255,255,.035)),
    rgba(255,255,255,.035) !important;
}

.permission-card.partial-on .permission-toggle {
  border-color: rgba(255,159,28,.65) !important;
  background: rgba(255,159,28,.20) !important;
}

.permission-card.partial-on .permission-toggle::before {
  content: "−";
  color: #fff;
  font-weight: 1000;
}

@media (max-width: 720px) {
  .permission-sub-card {
    margin-left: 0;
  }

  .permission-sub-card::before {
    display: none;
  }
}


/* Styled backend access denied page */
.access-denied-card {
  min-height: min(620px, calc(100vh - 160px));
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: clamp(24px, 3vw, 42px);
  border-color: rgba(255,77,90,.24);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,77,90,.16), transparent 22rem),
    radial-gradient(circle at 100% 0%, rgba(255,159,28,.10), transparent 22rem),
    var(--panel);
}

.access-denied-icon {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 1000;
  background: linear-gradient(135deg, #ff4d5a, #ff9f1c);
  box-shadow: 0 20px 55px rgba(255,77,90,.20);
}

.access-denied-copy {
  max-width: 820px;
}

.access-denied-copy h1 {
  margin: 8px 0 12px;
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: .95;
  letter-spacing: -.07em;
}

.access-denied-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 1rem;
}

.access-denied-copy p strong {
  color: var(--text);
}

.access-denied-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 12px;
  margin: 22px 0;
}

.access-denied-meta div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}

.access-denied-meta span,
.access-denied-meta strong {
  display: block;
}

.access-denied-meta span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.access-denied-meta strong {
  margin-top: 5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-denied-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.access-denied-note {
  margin-top: 18px !important;
  font-size: .92rem !important;
}

@media (max-width: 720px) {
  .access-denied-card {
    grid-template-columns: 1fr;
  }

  .access-denied-meta {
    grid-template-columns: 1fr;
  }

  .access-denied-actions .btn,
  .access-denied-actions .btn2 {
    width: 100%;
    justify-content: center;
  }
}


/* Permission UI v2: all top-level areas are parent cards, children are boxed under them */
.permission-tree-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.permission-group-block {
  display: grid !important;
  gap: 10px !important;
}

.permission-group-block .permission-parent-card {
  grid-column: 1 / -1 !important;
  min-height: 76px !important;
  margin: 0 !important;
  border-color: rgba(255,159,28,.22) !important;
  background:
    linear-gradient(135deg, rgba(255,159,28,.10), rgba(255,59,34,.045)),
    rgba(255,255,255,.035) !important;
}

.permission-group-block.no-children .permission-parent-card {
  min-height: 72px !important;
}

.permission-sub-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 10px !important;
  padding-left: 22px !important;
  margin-left: 10px !important;
  border-left: 2px solid rgba(255,159,28,.28) !important;
}

.permission-sub-grid .permission-sub-card {
  margin-left: 0 !important;
  min-height: 112px !important;
}

.permission-sub-grid .permission-sub-card::before {
  display: none !important;
}

.permission-parent-card.partial-on {
  border-color: rgba(255,159,28,.48) !important;
  background:
    linear-gradient(135deg, rgba(255,159,28,.18), rgba(255,255,255,.04)),
    rgba(255,255,255,.035) !important;
}

.permission-parent-card.partial-on .permission-toggle {
  border-color: rgba(255,159,28,.70) !important;
  background: rgba(255,159,28,.22) !important;
}

.permission-parent-card.partial-on .permission-toggle::before {
  content: "−";
  color: #fff;
  font-weight: 1000;
}

.permission-card-grid.permission-tree-grid {
  max-height: min(52vh, 560px);
  overflow-y: auto;
  padding-right: 4px;
}

.permission-card-grid.permission-tree-grid::-webkit-scrollbar {
  width: 8px;
}

.permission-card-grid.permission-tree-grid::-webkit-scrollbar-track {
  background: rgba(255,255,255,.035);
  border-radius: 999px;
}

.permission-card-grid.permission-tree-grid::-webkit-scrollbar-thumb {
  background: rgba(255,159,28,.35);
  border-radius: 999px;
}

@media (max-width: 720px) {
  .permission-sub-grid {
    padding-left: 0 !important;
    margin-left: 0 !important;
    border-left: 0 !important;
  }
}


/* Master / Administrator / Editor role system */
.cms-user-badge.cms-user-role.master {
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(255,59,34,.92), rgba(255,159,28,.84)) !important;
  border: 1px solid rgba(255,159,28,.46) !important;
  box-shadow: 0 10px 24px rgba(255,59,34,.16);
}

.cms-user-badge.cms-user-role.administrator,
.cms-user-badge.cms-user-role.admin {
  color: var(--brand2) !important;
  background: rgba(255,159,28,.12) !important;
  border: 1px solid rgba(255,159,28,.28) !important;
}

.cms-user-badge.cms-user-role.editor {
  color: var(--info, #5cc8ff) !important;
  background: rgba(92,200,255,.10) !important;
  border: 1px solid rgba(92,200,255,.22) !important;
}

.permission-role-hint.master {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(255,59,34,.82), rgba(255,159,28,.70)) !important;
  border-color: rgba(255,159,28,.45) !important;
}

.inline-delete-user-form {
  display: inline-grid;
  place-items: center;
  margin: 0;
}

.user-actions {
  align-items: center !important;
}


/* Master role UI protection + horizontal user action buttons */
.user-actions,
.actions.user-actions,
.cms-user-row .user-actions,
.user-row .user-actions,
.manager-row .user-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  height: auto !important;
  min-height: 38px !important;
}

.inline-delete-user-form {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.user-actions .emoji-row-action,
.actions.user-actions .emoji-row-action,
.inline-delete-user-form .emoji-row-action {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

#user_role:disabled,
#user_active:disabled {
  opacity: .78 !important;
  cursor: not-allowed !important;
  filter: saturate(.85);
}

#user_role option[data-master-option][hidden] {
  display: none !important;
}

/* Make Master protection visually clear in the modal. */
#user_role:disabled {
  border-color: rgba(255,159,28,.40) !important;
  background:
    linear-gradient(135deg, rgba(255,159,28,.12), rgba(255,59,34,.06)),
    rgba(255,255,255,.035) !important;
}


/* Users modal JS repair + user action horizontal lock */
.user-actions,
.actions.user-actions,
.user-row .user-actions,
.cms-user-row .user-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.inline-delete-user-form {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.user-actions .emoji-row-action,
.inline-delete-user-form .emoji-row-action {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

#user_role:disabled,
#user_active:disabled {
  cursor: not-allowed !important;
  opacity: .78 !important;
}

#user_role option[data-master-option][hidden] {
  display: none !important;
}


/* User password requirements helper */
.password-requirements-box {
  margin-top: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(255,159,28,.22);
  border-radius: 13px;
  background: rgba(255,159,28,.075);
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}

.password-requirements-box strong {
  color: var(--text);
}



/* Cleaner password label hint */
.label-hint {
  color: var(--muted);
  font-size: .78em;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}


/* Hide the old bulky helper if an older cached modal block still appears. */
.password-requirements-box {
  display: none !important;
}


/* Keep compact field titles on one line without affecting the input below */
.field-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  max-width: 100% !important;
}

.nowrap-field-title {
  white-space: nowrap !important;
}

.nowrap-field-title .label-hint {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}


/* Master-only Logs page */
.logs-admin-card {
  display: grid;
  gap: 18px;
}

.logs-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
}

.logs-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(86px, 1fr));
  gap: 10px;
}

.logs-stat {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  text-align: center;
}

.logs-stat span,
.logs-stat strong {
  display: block;
}

.logs-stat span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.logs-stat strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 1.45rem;
  line-height: 1;
}

.logs-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 160px auto auto;
  gap: 10px;
  align-items: center;
}

.logs-toolbar input,
.logs-toolbar select {
  width: 100%;
}

.logs-list {
  display: grid;
  gap: 9px;
}

.log-row {
  display: grid;
  grid-template-columns: 42px minmax(160px, 1.1fr) minmax(110px, .55fr) minmax(220px, 1.2fr) 170px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

.log-action-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-weight: 1000;
  background: rgba(255,159,28,.12);
  color: var(--brand2);
  border: 1px solid rgba(255,159,28,.22);
}

.log-row.login .log-action-icon {
  color: #4be38b;
  background: rgba(75,227,139,.12);
  border-color: rgba(75,227,139,.22);
}

.log-row.logout .log-action-icon {
  color: #ff9aa3;
  background: rgba(255,77,90,.10);
  border-color: rgba(255,77,90,.22);
}

.log-main strong,
.log-main span,
.log-meta span,
.log-meta strong,
.log-time {
  display: block;
  min-width: 0;
}

.log-main strong {
  color: var(--text);
}

.log-main span,
.log-meta span {
  color: var(--muted);
  font-size: .78rem;
}

.log-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: .88rem;
}

.log-time {
  justify-self: end;
  color: var(--muted);
  font-size: .82rem;
  white-space: nowrap;
}

.empty-state {
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  color: var(--muted);
  display: grid;
  gap: 5px;
}

.empty-state strong {
  color: var(--text);
}

.code-block {
  white-space: pre-wrap;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  color: var(--text);
}

@media (max-width: 1100px) {
  .logs-head,
  .logs-toolbar,
  .log-row {
    grid-template-columns: 1fr;
  }

  .logs-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .log-time {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .logs-stat-grid {
    grid-template-columns: 1fr;
  }
}


/* Roster action logs */
.log-row.roster-action .log-action-icon {
  color: var(--brand2);
  background: rgba(255,159,28,.12);
  border-color: rgba(255,159,28,.24);
}

.log-main small {
  display: block;
  margin-top: 2px;
  color: var(--text);
  opacity: .88;
  font-size: .78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logs-toolbar select optgroup {
  color: var(--text);
  background: var(--panel);
}


/* Activity Reports */
.activity-admin-card,
.activity-public-card {
  display: grid;
  gap: 18px;
}

.activity-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
}

.activity-week-pill {
  display: grid;
  gap: 4px;
  min-width: 220px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255,255,255,.035);
}

.activity-week-pill span {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.activity-week-pill strong {
  color: var(--text);
  white-space: nowrap;
}

.activity-week-pill.current {
  border-color: rgba(75,227,139,.25);
  background: rgba(75,227,139,.08);
}

.activity-week-pill.history {
  border-color: rgba(255,159,28,.28);
  background: rgba(255,159,28,.08);
}

.activity-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.activity-side-panel,
.activity-table-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.035);
}

.activity-side-panel {
  padding: 16px;
  position: sticky;
  top: 96px;
}

.activity-filter-form,
.activity-public-filter {
  display: grid;
  gap: 10px;
}

.activity-sections-box {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0,0,0,.10);
}

.activity-sections-box > strong {
  color: var(--text);
}

.activity-sections-box > span,
.activity-history-mini span,
.activity-table-toolbar span {
  color: var(--muted);
  font-size: .84rem;
}

.activity-section-check {
  display: grid;
  grid-template-columns: 18px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  color: var(--text);
}

.activity-history-mini {
  display: grid;
  gap: 3px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(255,159,28,.20);
  border-radius: 16px;
  background: rgba(255,159,28,.06);
}

.activity-table-card {
  min-width: 0;
  overflow: hidden;
}

.activity-table-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.activity-table-toolbar strong,
.activity-table-toolbar span {
  display: block;
}

.activity-history-warning {
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--brand2) !important;
  border: 1px solid rgba(255,159,28,.24);
  background: rgba(255,159,28,.08);
  font-weight: 900;
}

.activity-table-scroll {
  overflow: auto;
}

.activity-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
}

.activity-table th,
.activity-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid rgba(255,255,255,.04);
  text-align: center;
  vertical-align: middle;
}

.activity-table th {
  color: var(--brand2);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(255,159,28,.08);
}

.activity-table th span,
.activity-table th small {
  display: block;
}

.activity-table th small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .72rem;
}

.activity-table td {
  background: rgba(255,255,255,.025);
}

.activity-table .sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left;
  background: var(--panel);
}

.activity-table th.sticky-col {
  z-index: 4;
}

.member-name-cell strong,
.member-name-cell span {
  display: block;
}

.member-name-cell span {
  margin-top: 3px;
  color: var(--muted);
  font-size: .78rem;
}

.activity-check-cell {
  width: 74px;
}

.activity-check {
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.activity-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.activity-check span,
.activity-public-mark {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.16);
  color: var(--muted);
  font-weight: 1000;
}

.activity-check input:checked + span,
.activity-public-mark.on {
  color: #fff;
  border-color: rgba(75,227,139,.36);
  background: rgba(75,227,139,.20);
}

.activity-check input:checked + span::before {
  content: "✓";
}

.activity-public-mark.off {
  color: rgba(255,255,255,.35);
}

.activity-empty {
  padding: 26px !important;
  color: var(--muted);
  text-align: center !important;
}

.activity-confirm-modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 2600;
}

.activity-confirm-modal.open {
  display: grid;
}

.activity-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(7px);
}

.activity-confirm-panel {
  position: relative;
  width: min(520px, calc(100vw - 28px));
  display: grid;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,159,28,.16), transparent 18rem),
    var(--panel);
  box-shadow: 0 28px 90px rgba(0,0,0,.50);
}

.activity-confirm-panel h2 {
  margin: 0;
}

.activity-confirm-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.activity-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.activity-public-filter {
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: end;
}

@media (max-width: 1100px) {
  .activity-head,
  .activity-layout {
    grid-template-columns: 1fr;
  }

  .activity-side-panel {
    position: static;
  }
}

@media (max-width: 680px) {
  .activity-table-toolbar,
  .activity-confirm-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .activity-public-filter {
    grid-template-columns: 1fr;
  }
}


/* Activity table section grouping + historical snapshots */
.activity-section-row td {
  background:
    linear-gradient(135deg, rgba(255,159,28,.16), rgba(255,59,34,.05)),
    rgba(255,255,255,.035) !important;
  color: var(--text);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-top: 1px solid rgba(255,159,28,.24);
  border-bottom: 1px solid rgba(255,159,28,.24);
}

.activity-section-row td strong,
.activity-section-row td span {
  display: inline-flex;
  align-items: center;
}

.activity-section-row td span {
  margin-left: 10px;
  color: var(--muted);
  font-size: .75rem;
  text-transform: none;
  letter-spacing: 0;
}

.activity-snapshot-member td {
  opacity: .86;
  background: rgba(255,159,28,.025) !important;
}

.activity-snapshot-member .member-name-cell span {
  color: var(--brand2);
}


/* Activity section member loading fix */
.activity-section-check.no-members {
  opacity: .62;
}

.activity-section-check span small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .72rem;
}

.activity-section-row td {
  background:
    linear-gradient(135deg, rgba(255,159,28,.16), rgba(255,59,34,.05)),
    rgba(255,255,255,.035) !important;
  color: var(--text);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-top: 1px solid rgba(255,159,28,.24);
  border-bottom: 1px solid rgba(255,159,28,.24);
}

.activity-section-row td strong,
.activity-section-row td span {
  display: inline-flex;
  align-items: center;
}

.activity-section-row td span {
  margin-left: 10px;
  color: var(--muted);
  font-size: .75rem;
  text-transform: none;
  letter-spacing: 0;
}

.activity-snapshot-member td {
  opacity: .86;
  background: rgba(255,159,28,.025) !important;
}

.activity-snapshot-member .member-name-cell span {
  color: var(--brand2);
}


/* Password change log rows */
.log-row.password-action .log-action-icon {
  color: #8fd6ff;
  background: rgba(92,200,255,.12);
  border-color: rgba(92,200,255,.24);
}
/* Activity Reports forced backend submenu */
.admin-activity-nav .submenu-links {
  margin-top: 4px !important;
}

.admin-activity-nav .submenu-link {
  display: flex !important;
}

/* Activity pages now use real backend sidebar submenus, not tabs. */
.activity-tabs {
  display: none !important;
}
/* The activity table uses the roster list/card appearance, not spreadsheet styling. */
.activity-table {
  width: 100% !important;
  min-width: 1040px !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  background: transparent !important;
  color: var(--text) !important;
}

.activity-table thead {
  position: relative !important;
  z-index: 5 !important;
}

.activity-table thead tr {
  display: table-row !important;
}

.activity-table th {
  padding: 8px 10px !important;
  border: 1px solid var(--line) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: rgba(255,255,255,.035) !important;
  color: var(--brand2) !important;
  font-size: .68rem !important;
  font-weight: 1000 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}

.activity-table th:first-child {
  border-left: 1px solid var(--line) !important;
  border-radius: 10px 0 0 10px !important;
}

.activity-table th:last-child {
  border-right: 1px solid var(--line) !important;
  border-radius: 0 10px 10px 0 !important;
}

.activity-table th span,
.activity-table th small {
  display: block !important;
}

.activity-table th small {
  margin-top: 2px !important;
  color: var(--muted) !important;
  font-size: .67rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.activity-table td {
  padding: 13px 10px !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--text) !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  font-weight: 900 !important;
}

.activity-table tbody tr:not(.activity-section-row) td:first-child {
  border-left: 1px solid var(--line) !important;
  border-radius: 16px 0 0 16px !important;
}

.activity-table tbody tr:not(.activity-section-row) td:last-child {
  border-right: 1px solid var(--line) !important;
  border-radius: 0 16px 16px 0 !important;
}

.activity-table tbody tr:not(.activity-section-row):hover td {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,159,28,.20) !important;
}

.activity-table .sticky-col {
  position: sticky !important;
  left: 0 !important;
  z-index: 3 !important;
  text-align: left !important;
  background: rgba(255,255,255,.055) !important;
}

.activity-table thead .sticky-col,
.activity-table th.sticky-col {
  z-index: 6 !important;
  background: rgba(255,255,255,.045) !important;
}

.activity-table .member-name-cell {
  min-width: 220px !important;
}

.activity-table .member-name-cell strong {
  display: block !important;
  color: var(--text) !important;
  font-weight: 1000 !important;
}

.activity-table .member-name-cell span {
  display: block !important;
  margin-top: 3px !important;
  color: var(--brand2) !important;
  font-size: .74rem !important;
  font-weight: 900 !important;
}

/* Section rows copy the same grouped roster section look. */
.activity-section-row td,
.activity-section-row .sticky-col {
  padding: 10px 12px !important;
  border: 1px solid rgba(255,159,28,.16) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(255,159,28,.10), rgba(255,59,34,.035)),
    rgba(255,255,255,.035) !important;
  color: var(--text) !important;
  text-align: left !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 1000 !important;
}

.activity-section-row td span {
  margin-left: 10px !important;
  color: var(--muted) !important;
  font-size: .76rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.activity-snapshot-member td {
  background: rgba(255,159,28,.045) !important;
  border-color: rgba(255,159,28,.14) !important;
}

.activity-check-cell {
  width: 66px !important;
  min-width: 66px !important;
}

.activity-check {
  display: inline-grid !important;
  place-items: center !important;
}

.activity-check span,
.activity-public-mark {
  width: 22px !important;
  height: 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(75,227,139,.18) !important;
  background: rgba(75,227,139,.08) !important;
  color: rgba(255,255,255,.35) !important;
  font-size: .82rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

.activity-check input:checked + span,
.activity-public-mark.on {
  color: #5dff9b !important;
  border-color: rgba(75,227,139,.26) !important;
  background: rgba(75,227,139,.14) !important;
}

.activity-public-mark.off {
  color: rgba(255,255,255,.28) !important;
  border-color: transparent !important;
  background: transparent !important;
}

.activity-empty {
  padding: 28px !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.035) !important;
  color: var(--muted) !important;
  text-align: center !important;
}

.public-activity-table .sticky-col {
  text-align: left !important;
}

@media (max-width: 780px) {
  .activity-table-toolbar {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .activity-week-form {
    grid-template-columns: 1fr !important;
  }
}
/* Add the same orange left accent feeling as Department Roster rows */
.activity-table tbody tr:not(.activity-section-row) td:first-child {
  position: sticky !important;
  left: 0 !important;
  overflow: hidden !important;
  padding-left: 22px !important;
}

.activity-table tbody tr:not(.activity-section-row) td:first-child::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 5px !important;
  border-radius: 16px 0 0 16px !important;
  background: linear-gradient(180deg, var(--brand2), var(--brand)) !important;
  box-shadow: 0 0 20px rgba(255,111,28,.18) !important;
}

/* Center member names now that section subtitles were removed */
.activity-table .member-name-cell {
  min-width: 250px !important;
  text-align: center !important;
}

.activity-table .member-name-cell strong,
.activity-table .member-name-cell span {
  text-align: center !important;
}

/* More horizontal breathing room between identity columns and week days */
.activity-table th:nth-child(1),
.activity-table td:nth-child(1) {
  min-width: 250px !important;
}

.activity-table th:nth-child(2),
.activity-table td:nth-child(2) {
  min-width: 155px !important;
}

.activity-table th:nth-child(3),
.activity-table td:nth-child(3) {
  min-width: 105px !important;
  padding-right: 34px !important;
}

.activity-table th:nth-child(4),
.activity-table td:nth-child(4) {
  padding-left: 34px !important;
  border-left: 1px solid rgba(255,159,28,.18) !important;
}

/* Match the roster's rounded green activity/check badge look */
.activity-check span,
.activity-public-mark {
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(75,227,139,.20) !important;
  background: rgba(75,227,139,.08) !important;
  color: rgba(255,255,255,.35) !important;
}

.activity-check input:checked + span,
.activity-public-mark.on {
  border-radius: 999px !important;
  color: #5dff9b !important;
  border-color: rgba(75,227,139,.30) !important;
  background: rgba(75,227,139,.16) !important;
  box-shadow: inset 0 0 0 1px rgba(75,227,139,.05) !important;
}

.activity-public-mark.off {
  border-radius: 999px !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* Keep section headers centered only for their member count, while the title remains clean */
.activity-section-row td {
  text-align: left !important;
}


/* Activity Reports: true Personnel Roster layout/css usage */
.activity-fd-roster-board {
  --activity-day-width: 64px;
  width: 100% !important;
}

.activity-fd-roster-board .fd-roster-scroll {
  --fd-roster-min-width: max(100%, var(--roster-grid-width)) !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Activity does not use the mobile stacked roster layout; it should scroll horizontally like the roster. */
.activity-fd-roster-board .fd-roster-header,
.activity-fd-roster-board .fd-roster-row,
.activity-fd-roster-board .fd-roster-grid,
.activity-fd-roster-board .fd-roster-section-title {
  width: var(--fd-roster-min-width) !important;
  min-width: var(--fd-roster-min-width) !important;
  max-width: none !important;
}

.activity-fd-roster-board .fd-roster-header,
.activity-fd-roster-board .fd-roster-row,
.activity-fd-roster-board .fd-roster-grid {
  display: grid !important;
  grid-template-columns:
    minmax(180px, 1.25fr)
    minmax(150px, .95fr)
    minmax(90px, .55fr)
    repeat(var(--activity-day-count), minmax(64px, .42fr))
    repeat(var(--activity-extra-count), minmax(70px, .45fr)) !important;
  gap: 6px !important;
  align-items: stretch !important;
}

.activity-fd-roster-board .fd-activity-group-info {
  grid-column: 1 / 4 !important;
}

.activity-fd-roster-board .fd-activity-group-week {
  grid-column: 4 / calc(4 + var(--activity-day-count)) !important;
}

.activity-public-fd-roster-board .fd-activity-group-total {
  grid-column: calc(4 + var(--activity-day-count)) / -1 !important;
}

/* Section title rows were removed; hide any stale cached section title if present. */
.activity-fd-roster-board .fd-roster-section-title {
  display: none !important;
}

.activity-fd-roster-board .fd-roster-section {
  gap: 8px !important;
}

.activity-fd-roster-board .fd-roster-field,
.activity-fd-roster-board .fd-roster-cell {
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

.activity-fd-roster-board .fd-roster-name strong,
.activity-fd-roster-board .fd-roster-name small {
  display: block !important;
  text-align: center !important;
}

.activity-fd-roster-board .fd-roster-name small {
  margin-top: 3px !important;
  color: var(--brand2) !important;
  font-size: .68rem !important;
}

.activity-fd-roster-board .fd-activity-day-head {
  gap: 1px !important;
  line-height: 1 !important;
}

.activity-fd-roster-board .fd-activity-day-head small {
  color: var(--muted) !important;
  font-size: .66rem !important;
}

/* Activity checkboxes should visually be the same as roster certificate cells. */
.activity-cert-check {
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer !important;
}

.activity-cert-check input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.activity-cert-check span {
  cursor: pointer !important;
}

.activity-cert-check input:disabled + span {
  opacity: .55 !important;
  cursor: wait !important;
}

.activity-fd-roster-board .fd-cert-cell.earned span {
  width: 21px !important;
  height: 21px !important;
  border-radius: 8px !important;
  color: var(--ok) !important;
  background: rgba(51,209,122,.14) !important;
  border: 1px solid rgba(51,209,122,.28) !important;
}

.activity-fd-roster-board .fd-cert-cell.missing span {
  width: 21px !important;
  height: 21px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--faint) !important;
  opacity: .55 !important;
  background: transparent !important;
  border: 0 !important;
}

.activity-roster-toolbar {
  margin: 8px 0 14px !important;
}

.activity-total-cell strong {
  color: var(--text) !important;
}

/* Override global roster mobile stacking for Activity only. */
@media (max-width: 900px) {
  .activity-fd-roster-board .fd-roster-scroll {
    --fd-roster-min-width: max(100%, var(--roster-grid-width)) !important;
    overflow-x: auto !important;
  }

  .activity-fd-roster-board .fd-roster-header,
  .activity-fd-roster-board .fd-roster-row,
  .activity-fd-roster-board .fd-roster-grid {
    width: var(--fd-roster-min-width) !important;
    min-width: var(--fd-roster-min-width) !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns:
      minmax(180px, 1.25fr)
      minmax(150px, .95fr)
      minmax(90px, .55fr)
      repeat(var(--activity-day-count), minmax(64px, .42fr))
      repeat(var(--activity-extra-count), minmax(70px, .45fr)) !important;
  }

  .activity-fd-roster-board .fd-roster-group,
  .activity-fd-roster-board .fd-roster-field {
    display: grid !important;
  }

  .activity-fd-roster-board .fd-roster-cell::before {
    content: none !important;
  }
}


/* Restore Section Selection UI */
.activity-settings-form {
  display: grid !important;
  gap: 16px !important;
}

.activity-settings-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 12px !important;
}

.activity-section-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 88px !important;
  padding: 15px !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.035) !important;
  cursor: pointer !important;
  transition: border-color .16s ease, background .16s ease, transform .16s ease !important;
}

.activity-section-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,159,28,.28) !important;
  background: rgba(255,255,255,.05) !important;
}

.activity-section-card.selected {
  border-color: rgba(75,227,139,.30) !important;
  background: rgba(75,227,139,.08) !important;
}

.activity-section-card.no-members {
  opacity: .68 !important;
}

.activity-section-card input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.activity-section-card-check {
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(0,0,0,.18) !important;
}

.activity-section-card input:checked + .activity-section-card-check {
  border-color: rgba(75,227,139,.38) !important;
  background: rgba(75,227,139,.18) !important;
}

.activity-section-card input:checked + .activity-section-card-check::before {
  content: "✓" !important;
  color: #5dff9b !important;
  font-weight: 1000 !important;
}

.activity-section-card-copy {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.activity-section-card-copy strong {
  color: var(--text) !important;
  font-weight: 1000 !important;
}

.activity-section-card-copy small {
  color: var(--muted) !important;
  line-height: 1.35 !important;
}

.activity-settings-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}


/* Activity backend grid fix:
   Backend has no Total column, so do NOT use repeat(var(--activity-extra-count), ...)
   because repeat(0, ...) breaks the whole grid in the browser. */
.activity-admin-fd-roster-board .fd-roster-scroll {
  --fd-roster-min-width: max(100%, var(--roster-grid-width)) !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.activity-admin-fd-roster-board .fd-roster-header,
.activity-admin-fd-roster-board .fd-roster-row,
.activity-admin-fd-roster-board .fd-roster-grid {
  width: var(--fd-roster-min-width) !important;
  min-width: var(--fd-roster-min-width) !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns:
    minmax(180px, 1.25fr)
    minmax(150px, .95fr)
    minmax(90px, .55fr)
    repeat(var(--activity-day-count), minmax(64px, .42fr)) !important;
  gap: 6px !important;
  align-items: stretch !important;
}

.activity-admin-fd-roster-board .fd-activity-group-info {
  grid-column: 1 / 4 !important;
}

.activity-admin-fd-roster-board .fd-activity-group-week {
  grid-column: 4 / -1 !important;
}

.activity-admin-fd-roster-board .fd-roster-cell,
.activity-admin-fd-roster-board .fd-roster-field {
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

.activity-admin-fd-roster-board .fd-roster-cell::before {
  content: none !important;
}

/* Keep Activity rows as horizontal roster rows even at narrower backend widths. */
@media (max-width: 900px) {
  .activity-admin-fd-roster-board .fd-roster-header,
  .activity-admin-fd-roster-board .fd-roster-row,
  .activity-admin-fd-roster-board .fd-roster-grid {
    width: var(--fd-roster-min-width) !important;
    min-width: var(--fd-roster-min-width) !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns:
      minmax(180px, 1.25fr)
      minmax(150px, .95fr)
      minmax(90px, .55fr)
      repeat(var(--activity-day-count), minmax(64px, .42fr)) !important;
  }

  .activity-admin-fd-roster-board .fd-roster-group,
  .activity-admin-fd-roster-board .fd-roster-field {
    display: grid !important;
  }

  .activity-admin-fd-roster-board .fd-roster-cell {
    grid-template-columns: 1fr !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    white-space: nowrap !important;
  }
}


/* Backend Activity week selector: buttons right side of date dropdown */
.activity-week-form-inline {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: min(100%, 560px) !important;
}

.activity-week-form-inline select {
  min-width: 0 !important;
  width: 100% !important;
}

.activity-week-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.activity-week-actions .btn2 {
  min-height: 40px !important;
}

@media (max-width: 720px) {
  .activity-week-form-inline {
    grid-template-columns: 1fr !important;
  }

  .activity-week-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}




/* Safe wider content containers
   Only widens the existing main content wrappers.
   Does not target cards/sections directly, so backend component layouts stay intact. */
.content {
  width: min(100%, 1440px) !important;
}

.admin-content.content {
  width: min(100%, 1440px) !important;
}

/* Keep roster/activity roster boards using their own full-width behavior. */
.fd-roster-board,
.activity-fd-roster-board {
  width: 100% !important;
  max-width: none !important;
}


/* Hide mobile drawer brand header */
.mobile-drawer-brand {
  display: none !important;
}


/* Public roster table restructure
   Uses isolated fr-* classes so old fd-roster grid rules and Activity pages cannot interfere. */
.fr-roster-board {
  width: 100%;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.10), transparent 28rem),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.fr-roster-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.fr-roster-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  table-layout: fixed;
}

.fr-roster-table th,
.fr-roster-table td {
  box-sizing: border-box;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
}

.fr-roster-table th:nth-child(1),
.fr-roster-table td:nth-child(1) { width: 150px; min-width: 150px; }
.fr-roster-table th:nth-child(2),
.fr-roster-table td:nth-child(2) { width: 130px; min-width: 130px; }
.fr-roster-table th:nth-child(3),
.fr-roster-table td:nth-child(3) { width: 70px; min-width: 70px; }
.fr-roster-table th:nth-child(4),
.fr-roster-table td:nth-child(4) { width: 92px; min-width: 92px; }
.fr-roster-table th:nth-child(5),
.fr-roster-table td:nth-child(5) { width: 82px; min-width: 82px; }
.fr-roster-table th:nth-child(6),
.fr-roster-table td:nth-child(6) { width: 90px; min-width: 90px; }
.fr-roster-table th:nth-child(7),
.fr-roster-table td:nth-child(7) { width: 130px; min-width: 130px; }
.fr-roster-table th:nth-child(8),
.fr-roster-table td:nth-child(8) { width: 92px; min-width: 92px; }
.fr-roster-table th:nth-child(9),
.fr-roster-table td:nth-child(9) { width: 90px; min-width: 90px; }
.fr-roster-table th:nth-child(10),
.fr-roster-table td:nth-child(10) { width: 90px; min-width: 90px; }
.fr-roster-table th:nth-child(11),
.fr-roster-table td:nth-child(11) { width: 90px; min-width: 90px; }
.fr-roster-table th:nth-child(12),
.fr-roster-table td:nth-child(12) { width: 90px; min-width: 90px; }
.fr-roster-table th:nth-child(13),
.fr-roster-table td:nth-child(13) { width: 96px; min-width: 96px; }

.fr-roster-table th:nth-child(n+14),
.fr-roster-table td:nth-child(n+14) {
  width: 54px;
  min-width: 54px;
}

.fr-roster-group-row th {
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px 14px 4px 4px;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(255,59,34,.16), rgba(255,159,28,.08)),
    rgba(255,255,255,.035);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .66rem;
  font-weight: 1000;
}

.fr-roster-head-row th {
  height: 30px;
  padding: 0 5px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px 4px 12px 12px;
  color: var(--brand2);
  background: rgba(255,255,255,.045);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .54rem;
  font-weight: 1000;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fr-cert-head {
  line-height: 1;
}

.fr-cert-head img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  margin: 0 auto 1px;
}

.fr-cert-head span,
.fr-cert-head strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fr-cert-head span {
  font-size: .76rem;
}

.fr-cert-head strong {
  font-size: .42rem;
  letter-spacing: .04em;
}

.fr-section-row td {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.025)),
    var(--panel);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 1000;
  text-align: left;
}

.fr-section-row td span {
  display: inline-block;
}

.fr-section-row td small {
  float: right;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: .72rem;
}

.fr-member-row {
  position: relative;
}

.fr-member-row td {
  height: 56px;
  padding: 0 8px;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    var(--panel);
}

.fr-member-row td:first-child {
  border-left: 1px solid var(--line);
  border-radius: 18px 0 0 18px;
  position: relative;
}

.fr-member-row td:first-child::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand), var(--brand2));
}

.fr-member-row td:last-child {
  border-right: 1px solid var(--line);
  border-radius: 0 18px 18px 0;
}

.fr-name-wrap {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.fr-name-wrap strong {
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

.fr-rank-cell {
  overflow: hidden;
  text-overflow: ellipsis;
}

.fr-rank-cell .fd-rank-icon {
  vertical-align: middle;
  margin-right: 5px;
}

.fr-cert-cell span {
  display: inline-grid;
  place-items: center;
}

.fr-cert-cell.earned span {
  width: 21px;
  height: 21px;
  border-radius: 8px;
  color: var(--ok);
  background: rgba(51,209,122,.14);
  border: 1px solid rgba(51,209,122,.28);
}

.fr-cert-cell.missing span {
  color: var(--faint);
  opacity: .55;
}

.fr-roster-scroll::-webkit-scrollbar {
  height: 10px;
}

.fr-roster-scroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,.035);
  border-radius: 999px;
}

.fr-roster-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,77,34,.85);
  border-radius: 999px;
}

@media (max-width: 900px) {
  .fr-roster-board {
    padding: 14px;
  }

  .fr-roster-scroll {
    overflow-x: hidden;
  }

  .fr-roster-table,
  .fr-roster-table thead,
  .fr-roster-table tbody,
  .fr-roster-table tr,
  .fr-roster-table th,
  .fr-roster-table td {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
  }

  .fr-roster-table {
    border-spacing: 0;
  }

  .fr-roster-table thead {
    display: none;
  }

  .fr-section-row td {
    margin: 12px 0 8px;
  }

  .fr-section-row td small {
    float: none;
    display: block;
    margin-top: 4px;
  }

  .fr-member-row {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
      var(--panel);
  }

  .fr-member-row td {
    height: auto;
    min-height: 40px;
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 12px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 12px !important;
    background: rgba(255,255,255,.035);
    white-space: normal;
  }

  .fr-member-row td:first-child::before {
    content: none;
  }

  .fr-member-row td::before {
    content: attr(data-label);
    justify-self: start;
    text-align: left;
    color: var(--brand2);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .66rem;
    font-weight: 1000;
  }

  .fr-name-wrap {
    grid-template-columns: 34px minmax(0,1fr);
  }
}


/* Public roster old style restore
   Keeps the working fr-* table structure, but maps the old roster styling/colors to it. */
.fr-roster-board {
  padding: 18px !important;
  border: 1px solid var(--line) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.10), transparent 28rem),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022)) !important;
  box-shadow: var(--shadow) !important;
}

.fr-roster-scroll {
  border-radius: 20px !important;
  background: transparent !important;
}

.fr-roster-table {
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  background: transparent !important;
}

/* Old-style grouped headers */
.fr-roster-group-row th {
  height: 30px !important;
  padding: 0 8px !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px 16px 5px 5px !important;
  background:
    linear-gradient(135deg, rgba(255,59,34,.16), rgba(255,159,28,.08)),
    var(--panel) !important;
  color: var(--text) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-size: .70rem !important;
  font-weight: 1000 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35) !important;
}

.fr-roster-head-row th {
  height: 28px !important;
  padding: 0 6px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 5px 5px 12px 12px !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--brand2) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  font-size: .58rem !important;
  font-weight: 1000 !important;
}

.fr-cert-head {
  line-height: 1.05 !important;
}

.fr-cert-head img {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
  margin: 0 auto 2px !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.22)) !important;
}

.fr-cert-head span {
  display: block !important;
  font-size: .82rem !important;
  line-height: 1 !important;
}

.fr-cert-head strong {
  display: block !important;
  color: var(--brand2) !important;
  font-size: .46rem !important;
  letter-spacing: .04em !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Old-style section bar */
.fr-section-row td {
  padding: 10px 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--text) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 1000 !important;
  box-shadow: none !important;
}

.fr-section-row td small {
  color: var(--muted) !important;
  font-size: .72rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Old line/card row style */
.fr-member-row td {
  height: 56px !important;
  padding: 0 8px !important;
  color: var(--muted) !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    var(--panel) !important;
  box-shadow: none !important;
}

.fr-member-row:hover td {
  background:
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035)),
    var(--panel) !important;
}

.fr-member-row td:first-child {
  border-left: 1px solid var(--line) !important;
  border-radius: 18px 0 0 18px !important;
  position: relative !important;
}

.fr-member-row td:first-child::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, var(--brand), var(--brand2)) !important;
}

.fr-member-row td:last-child {
  border-right: 1px solid var(--line) !important;
  border-radius: 0 18px 18px 0 !important;
}

/* Very soft separators, not harsh spreadsheet grid lines */
.fr-member-row td + td {
  box-shadow: inset 1px 0 0 rgba(255,255,255,.018) !important;
}

/* Name/photo follows old compact line style */
.fr-name-wrap {
  display: grid !important;
  grid-template-columns: 36px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.fr-name-wrap strong {
  color: var(--text) !important;
  font-weight: 1000 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
}

/* Rank icon: old spacing, icon left of rank name, always one line */
.fr-rank-cell {
  text-align: center !important;
}

.fr-rank-cell .fd-rank-cell {
  display: inline-grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 7px !important;
  justify-content: center !important;
  align-content: center !important;
  align-items: center !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  margin: 0 auto !important;
}

.fr-rank-cell .fd-rank-cell span {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.fr-rank-cell .fd-rank-icon {
  width: 23px !important;
  height: 23px !important;
  object-fit: contain !important;
  display: block !important;
  justify-self: end !important;
  margin: 0 !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.28)) !important;
}

/* Certificates keep the old green/muted badge look */
.fr-cert-cell {
  text-align: center !important;
}

.fr-cert-cell span {
  display: inline-grid !important;
  place-items: center !important;
}

.fr-cert-cell.earned span {
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
  color: var(--ok) !important;
  background: rgba(51,209,122,.16) !important;
  border: 1px solid rgba(51,209,122,.28) !important;
  font-weight: 1000 !important;
}

.fr-cert-cell.missing span {
  color: var(--faint) !important;
  opacity: .52 !important;
  font-weight: 1000 !important;
}

/* Status pill keeps the old modern pill style */
.fr-roster-table .roster-status {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 76px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  font-size: .78rem !important;
  font-weight: 1000 !important;
}

.fr-roster-table .roster-status.active {
  background: rgba(51,209,122,.18) !important;
  color: var(--ok) !important;
  border-color: rgba(51,209,122,.25) !important;
}

.fr-roster-table .roster-status.vacation,
.fr-roster-table .roster-status.loa {
  background: rgba(92,200,255,.14) !important;
  color: var(--info) !important;
  border-color: rgba(92,200,255,.25) !important;
}

.fr-roster-table .roster-status.inactive {
  background: rgba(255,255,255,.08) !important;
  color: var(--muted) !important;
}

.fr-roster-table .roster-status.suspended {
  background: rgba(255,77,90,.14) !important;
  color: #ff8d96 !important;
  border-color: rgba(255,77,90,.25) !important;
}

.fr-roster-scroll::-webkit-scrollbar {
  height: 12px !important;
}

.fr-roster-scroll::-webkit-scrollbar-track {
  background: var(--panel2) !important;
  border-radius: 999px !important;
}

.fr-roster-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--brand), var(--brand2)) !important;
  border: 3px solid var(--panel2) !important;
  border-radius: 999px !important;
}

@media (max-width: 1500px) and (min-width: 901px) {
  .fr-rank-cell .fd-rank-cell {
    gap: 5px !important;
  }

  .fr-rank-cell .fd-rank-icon {
    width: 20px !important;
    height: 20px !important;
  }
}

@media (max-width: 900px) {
  .fr-member-row {
    background:
      linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
      var(--panel) !important;
  }

  .fr-member-row td {
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.035) !important;
  }

  .fr-rank-cell .fd-rank-cell {
    grid-template-columns: auto auto !important;
    justify-content: center !important;
  }
}


/* Public roster old unified line style
   Keep table structure, but visually restore the old single-card row look.
   This removes the spreadsheet/column-stripe look from the table rows. */
.fr-roster-table {
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  background: transparent !important;
}

.fr-member-row {
  isolation: isolate !important;
}

/* One continuous row/card color. No column stripe background. */
.fr-member-row td {
  height: 56px !important;
  padding: 0 8px !important;
  color: var(--muted) !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
  background: #132027 !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
}

/* Kill the hard vertical grid/striping completely. */
.fr-member-row td + td,
.fr-member-row td:nth-child(even),
.fr-member-row td:nth-child(odd) {
  box-shadow: none !important;
  background: #132027 !important;
}

/* Slight hover like the old row-card, still unified across all cells. */
.fr-member-row:hover td,
.fr-member-row:hover td:nth-child(even),
.fr-member-row:hover td:nth-child(odd) {
  background: #16252d !important;
}

.fr-member-row td:first-child {
  border-left: 1px solid var(--line) !important;
  border-radius: 18px 0 0 18px !important;
  position: relative !important;
  overflow: hidden !important;
}

.fr-member-row td:first-child::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, var(--brand), var(--brand2)) !important;
}

.fr-member-row td:last-child {
  border-right: 1px solid var(--line) !important;
  border-radius: 0 18px 18px 0 !important;
}

/* Softer section lines like the old file */
.fr-section-row td {
  padding: 10px 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: #121d23 !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

/* Header: keep the old brown/orange style, but not harsh */
.fr-roster-group-row th {
  background:
    linear-gradient(135deg, rgba(255,59,34,.17), rgba(255,159,28,.075)),
    #151d20 !important;
  border-color: rgba(255,255,255,.13) !important;
}

.fr-roster-head-row th {
  background: #111b20 !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Rank icon: exactly one line, icon left of rank name with old compact gap */
.fr-rank-cell .fd-rank-cell {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.fr-rank-cell .fd-rank-icon {
  flex: 0 0 auto !important;
  width: 23px !important;
  height: 23px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.28)) !important;
}

.fr-rank-cell .fd-rank-cell span {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Keep the name/photo old-line spacing */
.fr-name-wrap {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
}

.fr-name-wrap strong {
  text-align: left !important;
}

/* Certificates: old muted green checkboxes, no square table feel */
.fr-cert-cell {
  background: #132027 !important;
}

.fr-cert-cell.earned span {
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
  color: var(--ok) !important;
  background: rgba(51,209,122,.16) !important;
  border: 1px solid rgba(51,209,122,.28) !important;
}

.fr-cert-cell.missing span {
  color: var(--faint) !important;
  opacity: .52 !important;
}

/* Keep mobile card mode readable and do not force table-row styling there. */
@media (max-width: 900px) {
  .fr-member-row td,
  .fr-member-row td:nth-child(even),
  .fr-member-row td:nth-child(odd),
  .fr-cert-cell {
    background: rgba(255,255,255,.035) !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
  }

  .fr-rank-cell .fd-rank-cell {
    justify-content: center !important;
  }
}


/* Public roster fixed-width table scroll fix
   Keeps the old visual style, but prevents the table from shrinking on window resize.
   The table width is calculated in roster.php from static columns + certificate columns. */
@media (min-width: 901px) {
  .fr-roster-board {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .fr-roster-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 8px !important;
  }

  .fr-roster-table {
    width: var(--fr-roster-table-width) !important;
    min-width: var(--fr-roster-table-width) !important;
    max-width: none !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    flex: 0 0 auto !important;
  }

  .fr-roster-table col {
    min-width: inherit !important;
  }

  .fr-roster-table th,
  .fr-roster-table td {
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .fr-roster-table th,
  .fr-roster-table td,
  .fr-name-wrap,
  .fr-rank-cell .fd-rank-cell {
    min-width: 0 !important;
  }

  .fr-roster-table th {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .fr-member-row td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .fr-member-row td:first-child {
    overflow: hidden !important;
  }

  .fr-rank-cell .fd-rank-cell {
    max-width: 100% !important;
  }
}

/* Mobile keeps the stacked card layout from the previous version. */
@media (max-width: 900px) {
  .fr-roster-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


/* Public roster full-width table expansion
   Keep the fixed minimum width for resized/windowed mode, but let the roster
   expand to the full available page width on wider screens. */
@media (min-width: 901px) {
  .fr-roster-table {
    width: max(100%, var(--fr-roster-table-width)) !important;
    min-width: var(--fr-roster-table-width) !important;
    max-width: none !important;
  }

  .fr-roster-scroll {
    width: 100% !important;
  }
}


/* Unified Firehouse color system
   Makes public roster, Activity Reports, roster management/admin lists,
   logs, users, tables, cards, rows, headers, statuses, and checkmarks
   share the same visual colors. Layout/width rules are not changed. */
:root {
  --fh-bg: #071014;
  --fh-panel: #101b22;
  --fh-panel-2: #14232b;
  --fh-panel-3: #192a33;
  --fh-row: #132027;
  --fh-row-hover: #16252d;
  --fh-head: #211d18;
  --fh-head-2: #291f1a;
  --fh-border: rgba(255,255,255,.10);
  --fh-border-soft: rgba(255,255,255,.075);
  --fh-text: var(--text);
  --fh-muted: var(--muted);
  --fh-faint: var(--faint);
  --fh-orange: var(--brand2);
  --fh-red: var(--brand);
  --fh-yellow: var(--brand3);
  --fh-green: var(--ok);
  --fh-blue: var(--info);
  --fh-danger: var(--bad);
  --fh-radius-lg: 24px;
  --fh-radius-md: 18px;
  --fh-radius-sm: 12px;
  --fh-shadow: 0 18px 55px rgba(0,0,0,.18);
}

body.light {
  --fh-bg: #f5f7fb;
  --fh-panel: #ffffff;
  --fh-panel-2: #f1f4f8;
  --fh-panel-3: #e8edf3;
  --fh-row: #ffffff;
  --fh-row-hover: #fff7ed;
  --fh-head: #fff2df;
  --fh-head-2: #ffe7c4;
  --fh-border: rgba(8,23,32,.12);
  --fh-border-soft: rgba(8,23,32,.08);
  --fh-text: var(--text);
  --fh-muted: var(--muted);
  --fh-faint: #7b8b96;
  --fh-shadow: 0 18px 45px rgba(20,35,43,.10);
}

/* Page and main surfaces */
.hero,
.card,
.tablebox,
.section.card,
.admin-card,
.roster-management-card,
.activity-admin-card,
.activity-public-card,
.activity-table-card,
.activity-table-scroll,
.activity-settings-form,
.fr-roster-board,
.roster-line-board,
.roster-section,
.roster-toolbar-card,
.permission-card,
.user-form-card,
.log-row,
.modal-card,
.modal-panel,
.admin-content .section,
.admin-content .card {
  border-color: var(--fh-border) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.08), transparent 28rem),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022)),
    var(--fh-panel) !important;
  color: var(--fh-text) !important;
  box-shadow: var(--fh-shadow) !important;
}

/* Inputs/search/selects */
input,
select,
textarea,
.search-input,
.activity-public-filter select,
.activity-week-form select,
.activity-filter-form select {
  border-color: var(--fh-border) !important;
  background: #081216 !important;
  color: var(--fh-text) !important;
}

body.light input,
body.light select,
body.light textarea,
body.light .search-input,
body.light .activity-public-filter select,
body.light .activity-week-form select,
body.light .activity-filter-form select {
  background: #fff !important;
}

/* Buttons */
.btn,
button.btn,
a.btn {
  background: linear-gradient(135deg, var(--fh-red), var(--fh-orange)) !important;
  color: #fff !important;
  border-color: rgba(255,159,28,.25) !important;
}

.btn2,
button.btn2,
a.btn2,
.chip {
  background: rgba(255,255,255,.045) !important;
  color: var(--fh-text) !important;
  border-color: var(--fh-border) !important;
}

.btn2:hover,
.chip:hover {
  background: rgba(255,159,28,.10) !important;
  border-color: rgba(255,159,28,.26) !important;
}

/* Generic tables across admin pages */
table:not(.fr-roster-table),
.table,
.admin-table,
.data-table {
  background: transparent !important;
  color: var(--fh-text) !important;
}

table:not(.fr-roster-table) th,
.admin-table th,
.data-table th {
  color: var(--fh-orange) !important;
  background:
    linear-gradient(135deg, rgba(255,59,34,.12), rgba(255,159,28,.06)),
    var(--fh-head) !important;
  border-color: var(--fh-border) !important;
}

table:not(.fr-roster-table) td,
.admin-table td,
.data-table td {
  color: var(--fh-muted) !important;
  background: var(--fh-row) !important;
  border-color: var(--fh-border-soft) !important;
}

table:not(.fr-roster-table) tr:hover td,
.admin-table tr:hover td,
.data-table tr:hover td {
  background: var(--fh-row-hover) !important;
}

/* Public roster table */
.fr-roster-table {
  background: transparent !important;
  color: var(--fh-text) !important;
}

.fr-roster-group-row th,
.fr-roster-head-row th {
  border-color: var(--fh-border) !important;
}

.fr-roster-group-row th {
  background:
    linear-gradient(135deg, rgba(255,59,34,.16), rgba(255,159,28,.08)),
    var(--fh-head) !important;
  color: var(--fh-text) !important;
}

.fr-roster-head-row th {
  background: #111b20 !important;
  color: var(--fh-orange) !important;
}

.fr-section-row td {
  background: var(--fh-panel-2) !important;
  color: var(--fh-text) !important;
  border-color: var(--fh-border) !important;
}

.fr-member-row td,
.fr-member-row td:nth-child(even),
.fr-member-row td:nth-child(odd),
.fr-cert-cell {
  background: var(--fh-row) !important;
  color: var(--fh-muted) !important;
  border-color: var(--fh-border) !important;
}

.fr-member-row:hover td,
.fr-member-row:hover td:nth-child(even),
.fr-member-row:hover td:nth-child(odd) {
  background: var(--fh-row-hover) !important;
}

.fr-name-wrap strong,
.fr-rank-cell .fd-rank-cell span {
  color: var(--fh-text) !important;
}

.fr-member-row td:first-child::before {
  background: linear-gradient(180deg, var(--fh-red), var(--fh-orange)) !important;
}

/* Activity Reports table + rows */
.activity-table,
.public-activity-table {
  background: transparent !important;
  color: var(--fh-text) !important;
}

.activity-table th,
.public-activity-table th {
  background:
    linear-gradient(135deg, rgba(255,59,34,.12), rgba(255,159,28,.06)),
    var(--fh-head) !important;
  color: var(--fh-orange) !important;
  border-color: var(--fh-border) !important;
}

.activity-table td,
.public-activity-table td {
  background: var(--fh-row) !important;
  color: var(--fh-muted) !important;
  border-color: var(--fh-border-soft) !important;
}

.activity-table tbody tr:not(.activity-section-row):hover td,
.public-activity-table tbody tr:not(.activity-section-row):hover td {
  background: var(--fh-row-hover) !important;
}

.activity-section-row td {
  background:
    linear-gradient(135deg, rgba(255,59,34,.16), rgba(255,159,28,.08)),
    var(--fh-head) !important;
  color: var(--fh-text) !important;
  border-color: rgba(255,159,28,.20) !important;
}

.activity-table .sticky-col,
.public-activity-table .sticky-col {
  background: var(--fh-row) !important;
}

/* Activity settings/selection cards */
.activity-section-card,
.activity-sections-box,
.activity-history-mini,
.activity-week-pill {
  border-color: var(--fh-border) !important;
  background: var(--fh-panel-2) !important;
  color: var(--fh-text) !important;
}

.activity-section-card.selected,
.activity-week-pill.current {
  border-color: rgba(51,209,122,.28) !important;
  background: rgba(51,209,122,.10) !important;
}

.activity-week-pill.history {
  border-color: rgba(255,159,28,.22) !important;
  background: rgba(255,159,28,.08) !important;
}

/* Roster management/admin list rows/cards */
.roster-row,
.roster-member-row,
.personnel-row,
.admin-list-row,
.user-row,
.member-row,
.sortable-row,
.sortable-item,
.management-row,
.roster-management-row,
.permission-child-card,
.permission-tile,
.allowed-edit-card,
.activity-section-card {
  border-color: var(--fh-border) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    var(--fh-row) !important;
  color: var(--fh-text) !important;
}

.roster-row:hover,
.roster-member-row:hover,
.personnel-row:hover,
.admin-list-row:hover,
.user-row:hover,
.member-row:hover,
.sortable-row:hover,
.sortable-item:hover,
.management-row:hover,
.roster-management-row:hover,
.permission-child-card:hover,
.permission-tile:hover,
.allowed-edit-card:hover {
  background:
    linear-gradient(145deg, rgba(255,159,28,.055), rgba(255,255,255,.032)),
    var(--fh-row-hover) !important;
}

.roster-section-title,
.section-title-bar,
.management-section-title,
.permission-parent-card,
.card-section-title,
.roster-list-section,
.list-section-title {
  border-color: rgba(255,159,28,.20) !important;
  background:
    linear-gradient(135deg, rgba(255,59,34,.16), rgba(255,159,28,.08)),
    var(--fh-head) !important;
  color: var(--fh-text) !important;
}

/* Logs/users/admin row icon blocks */
.log-action-icon,
.row-icon,
.drag-handle,
.action-icon,
.admin-icon,
.nav-icon {
  color: var(--fh-orange) !important;
}

/* Shared status/check/danger styling */
.roster-status.active,
.status-pill.active,
.badge.active,
.fr-roster-table .roster-status.active,
.activity-public-mark.on,
.activity-check input:checked + span,
.fr-cert-cell.earned span,
.cert-cell.earned span,
.cert-yes,
.check-pill,
.ok-pill {
  background: rgba(51,209,122,.16) !important;
  color: var(--fh-green) !important;
  border-color: rgba(51,209,122,.28) !important;
}

.activity-public-mark.off,
.fr-cert-cell.missing span,
.cert-no,
.muted-pill {
  color: var(--fh-faint) !important;
  opacity: .62 !important;
}

.badge.editor,
.role-editor,
.info-pill {
  background: rgba(92,200,255,.12) !important;
  color: var(--fh-blue) !important;
  border-color: rgba(92,200,255,.25) !important;
}

.badge.admin,
.badge.master,
.role-admin,
.role-master {
  background: linear-gradient(135deg, rgba(255,59,34,.90), rgba(255,159,28,.92)) !important;
  color: #fff !important;
  border-color: rgba(255,159,28,.26) !important;
}

.delete-btn,
.btn-danger,
.danger,
.badge.inactive,
.status-inactive,
.status-suspended {
  background: rgba(255,77,90,.12) !important;
  color: #ff8d96 !important;
  border-color: rgba(255,77,90,.24) !important;
}

/* Edit/delete/icon buttons on management pages */
.icon-btn,
.edit-btn,
.delete-btn,
.action-btn,
.row-action,
.btn-icon {
  border-color: var(--fh-border) !important;
}

.edit-btn,
.action-edit {
  background: rgba(255,159,28,.12) !important;
  color: var(--fh-orange) !important;
  border-color: rgba(255,159,28,.24) !important;
}

.delete-btn,
.action-delete {
  background: rgba(255,77,90,.12) !important;
  color: #ff8d96 !important;
  border-color: rgba(255,77,90,.24) !important;
}

/* Rank icon one-line safety */
.fr-rank-cell .fd-rank-cell {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
}

.fr-rank-cell .fd-rank-icon {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.fr-rank-cell .fd-rank-cell span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Scrollbars */
.fr-roster-scroll::-webkit-scrollbar-thumb,
.activity-table-scroll::-webkit-scrollbar-thumb,
.tablebox::-webkit-scrollbar-thumb,
.admin-content::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--fh-red), var(--fh-orange)) !important;
}

/* Text hierarchy */
.muted,
.card p,
.hero p,
.activity-table-toolbar span,
.activity-history-mini span,
.activity-section-card-copy small,
.fr-section-row td small {
  color: var(--fh-muted) !important;
}

.eyebrow,
th,
.fr-roster-head-row th,
.activity-table th,
.public-activity-table th {
  color: var(--fh-orange) !important;
}


/* Unified Firehouse table headers
   Strong final layer for every table/header style across frontend + backend. */
:root {
  --fh-table-head-bg:
    linear-gradient(135deg, rgba(255,59,34,.17), rgba(255,159,28,.08)),
    #151d20;
  --fh-table-subhead-bg: #111b20;
  --fh-table-head-text: var(--brand2);
  --fh-table-head-main-text: var(--text);
  --fh-table-head-border: rgba(255,255,255,.13);
}

body.light {
  --fh-table-head-bg:
    linear-gradient(135deg, rgba(255,59,34,.10), rgba(255,159,28,.18)),
    #fff2df;
  --fh-table-subhead-bg: #fff7ec;
  --fh-table-head-border: rgba(8,23,32,.12);
}

/* Standard HTML tables */
table thead th,
.tablebox table thead th,
.admin-content table thead th,
.admin-table thead th,
.data-table thead th,
.permissions-table thead th,
.users-table thead th,
.logs-table thead th,
.management-table thead th {
  background: var(--fh-table-subhead-bg) !important;
  color: var(--fh-table-head-text) !important;
  border-color: var(--fh-table-head-border) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 1000 !important;
}

/* First / grouped header rows */
table thead tr:first-child th,
.tablebox table thead tr:first-child th,
.admin-content table thead tr:first-child th,
.admin-table thead tr:first-child th,
.data-table thead tr:first-child th,
.management-table thead tr:first-child th {
  background: var(--fh-table-head-bg) !important;
  color: var(--fh-table-head-main-text) !important;
}

/* Public roster table headers */
.fr-roster-group-row th {
  background: var(--fh-table-head-bg) !important;
  color: var(--fh-table-head-main-text) !important;
  border-color: var(--fh-table-head-border) !important;
}

.fr-roster-head-row th,
.fr-cert-head {
  background: var(--fh-table-subhead-bg) !important;
  color: var(--fh-table-head-text) !important;
  border-color: var(--fh-table-head-border) !important;
}

/* Activity Reports headers */
.activity-table thead th,
.public-activity-table thead th,
.activity-table th,
.public-activity-table th {
  background: var(--fh-table-subhead-bg) !important;
  color: var(--fh-table-head-text) !important;
  border-color: var(--fh-table-head-border) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 1000 !important;
}

.activity-section-row td {
  background: var(--fh-table-head-bg) !important;
  color: var(--fh-table-head-main-text) !important;
  border-color: var(--fh-table-head-border) !important;
}

/* Div/grid headers used by roster management and custom admin lists */
.roster-header-block,
.roster-header-group,
.roster-group-row,
.roster-column-row,
.roster-line-title,
.list-header,
.table-header,
.management-header,
.admin-list-header,
.user-list-header,
.permissions-header,
.logs-header,
.sortable-header,
.roster-management-header {
  background: var(--fh-table-head-bg) !important;
  color: var(--fh-table-head-main-text) !important;
  border-color: var(--fh-table-head-border) !important;
}

.roster-header-group-title,
.roster-title-group,
.section-title-bar,
.management-section-title,
.permission-parent-card,
.card-section-title,
.roster-list-section,
.list-section-title {
  background: var(--fh-table-head-bg) !important;
  color: var(--fh-table-head-main-text) !important;
  border-color: var(--fh-table-head-border) !important;
}

.roster-header-fields > div,
.roster-column-row > div,
.list-header > *,
.table-header > *,
.management-header > *,
.admin-list-header > *,
.user-list-header > *,
.permissions-header > *,
.logs-header > *,
.sortable-header > *,
.roster-management-header > * {
  background: var(--fh-table-subhead-bg) !important;
  color: var(--fh-table-head-text) !important;
  border-color: var(--fh-table-head-border) !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  font-weight: 1000 !important;
}

/* Header icons/images inherit consistent color feel */
th .nav-icon,
th .row-icon,
th svg,
.fr-cert-head svg,
.roster-cert-title svg {
  color: var(--fh-table-head-text) !important;
}

.fr-cert-head img,
.roster-cert-title img,
th img {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
}

/* Sticky columns/header cells should not use a different color */
.activity-table th.sticky-col,
.public-activity-table th.sticky-col,
table th.sticky-col,
.fr-roster-table th.sticky-col {
  background: var(--fh-table-subhead-bg) !important;
  color: var(--fh-table-head-text) !important;
}


/* Unified centered table data
   Centers table/list data everywhere.
   Public roster personnel images stay left-aligned inside the name cell.
   Activity checkboxes/marks are centered on frontend + backend. */

/* Standard tables */
table td,
table th,
.tablebox td,
.tablebox th,
.admin-content table td,
.admin-content table th,
.admin-table td,
.admin-table th,
.data-table td,
.data-table th,
.management-table td,
.management-table th,
.users-table td,
.users-table th,
.logs-table td,
.logs-table th {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Public roster table data */
.fr-roster-table th,
.fr-roster-table td {
  text-align: center !important;
  vertical-align: middle !important;
}

.fr-member-row td {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Name cell: image/photo stays left, name text is centered in the remaining space. */
.fr-name-cell {
  text-align: center !important;
}

.fr-name-wrap {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
}

.fr-name-wrap .fd-personnel-photo-button,
.fr-name-wrap .fd-personnel-photo-placeholder {
  justify-self: start !important;
  margin-left: 0 !important;
}

.fr-name-wrap strong {
  justify-self: center !important;
  width: 100% !important;
  text-align: center !important;
}

/* Rank stays icon-left/name-right on a single centered line. */
.fr-rank-cell {
  text-align: center !important;
}

.fr-rank-cell .fd-rank-cell {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

.fr-rank-cell .fd-rank-icon {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.fr-rank-cell .fd-rank-cell span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Activity Reports: center the checkbox columns and visual marks. */
.activity-check-cell,
.activity-table .activity-check-cell,
.public-activity-table .activity-check-cell {
  text-align: center !important;
  vertical-align: middle !important;
  place-items: center !important;
}

.activity-check {
  display: inline-grid !important;
  place-items: center !important;
  margin: 0 auto !important;
  vertical-align: middle !important;
}

.activity-check span,
.activity-public-mark {
  display: inline-grid !important;
  place-items: center !important;
  margin: 0 auto !important;
  vertical-align: middle !important;
}

.activity-table td,
.public-activity-table td,
.activity-table th,
.public-activity-table th {
  text-align: center !important;
  vertical-align: middle !important;
}

.activity-table .member-name-cell,
.public-activity-table .member-name-cell {
  text-align: center !important;
}

.activity-table .member-name-cell strong,
.activity-table .member-name-cell span,
.public-activity-table .member-name-cell strong,
.public-activity-table .member-name-cell span {
  text-align: center !important;
}

/* Custom grid/list data rows used in management pages */
.roster-row,
.roster-member-row,
.personnel-row,
.admin-list-row,
.user-row,
.member-row,
.sortable-row,
.sortable-item,
.management-row,
.roster-management-row,
.permission-child-card,
.permission-tile,
.allowed-edit-card,
.log-row {
  text-align: center !important;
}

.roster-row > *,
.roster-member-row > *,
.personnel-row > *,
.admin-list-row > *,
.user-row > *,
.member-row > *,
.sortable-row > *,
.sortable-item > *,
.management-row > *,
.roster-management-row > *,
.permission-child-card > *,
.permission-tile > *,
.allowed-edit-card > *,
.log-row > * {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Keep photo/image preview boxes visually centered, but don't override roster name photo left alignment. */
.image-preview,
.preview-box,
.upload-preview,
.personnel-image-preview {
  display: grid !important;
  place-items: center !important;
}

.fr-name-wrap .image-preview,
.fr-name-wrap .preview-box,
.fr-name-wrap .upload-preview,
.fr-name-wrap .personnel-image-preview {
  place-items: start center !important;
}

/* Mobile stacked view: labels stay readable on the left, values centered on the right. */
@media (max-width: 900px) {
  .fr-member-row td {
    text-align: center !important;
  }

  .fr-member-row td::before,
  .activity-table td::before,
  .public-activity-table td::before {
    justify-self: start !important;
    text-align: left !important;
  }

  .fr-name-wrap strong {
    text-align: left !important;
    justify-self: start !important;
  }
}


/* Rank icon and checkbox final alignment
   CSS-only. Keeps roster rank image left-aligned and centers all roster/activity checks. */

/* Public roster rank: icon pinned left, rank name centered in remaining space. */
.fr-rank-cell {
  text-align: center !important;
  vertical-align: middle !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.fr-rank-cell .fd-rank-cell {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 6px !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.fr-rank-cell .fd-rank-icon {
  width: 23px !important;
  height: 23px !important;
  object-fit: contain !important;
  display: block !important;
  justify-self: start !important;
  align-self: center !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.fr-rank-cell .fd-rank-cell span {
  width: 100% !important;
  min-width: 0 !important;
  justify-self: center !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Public roster certificate/check cells: force true center. */
.fr-cert-cell,
.fr-roster-table td.fr-cert-cell,
.fr-roster-table th.fr-cert-head {
  text-align: center !important;
  vertical-align: middle !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.fr-cert-cell {
  display: table-cell !important;
}

.fr-cert-cell > span,
.fr-cert-cell.earned > span,
.fr-cert-cell.missing > span {
  display: inline-grid !important;
  place-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  vertical-align: middle !important;
  text-align: center !important;
}

.fr-cert-head,
.fr-cert-head > *,
.fr-cert-head img,
.fr-cert-head span,
.fr-cert-head strong {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Activity frontend/backend checkbox cells: center the label itself, not only the inner mark. */
.activity-table td.activity-check-cell,
.activity-table th.activity-check-cell,
.public-activity-table td.activity-check-cell,
.public-activity-table th.activity-check-cell,
td.activity-check-cell,
th.activity-check-cell {
  text-align: center !important;
  vertical-align: middle !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.activity-check-cell {
  text-align: center !important;
  vertical-align: middle !important;
}

.activity-check-cell .activity-check,
.activity-check {
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

.activity-check input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.activity-check span,
.activity-public-mark,
.activity-check-cell .activity-public-mark {
  display: inline-grid !important;
  place-items: center !important;
  margin: 0 auto !important;
  vertical-align: middle !important;
  text-align: center !important;
  float: none !important;
}

/* Activity table cells with totals/marks also center consistently. */
.activity-table td,
.activity-table th,
.public-activity-table td,
.public-activity-table th {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Backend roster management certificate editor checkboxes/cards. */
.cert-edit-box {
  align-items: center !important;
}

.cert-edit-box input[type="checkbox"],
.roster-management-card input[type="checkbox"],
.admin-content input[type="checkbox"],
.activity-section-card input[type="checkbox"] {
  justify-self: center !important;
  align-self: center !important;
  margin: 0 auto !important;
}

/* Native checkbox columns in admin tables/lists. */
td input[type="checkbox"],
th input[type="checkbox"],
.tablebox input[type="checkbox"],
.admin-table input[type="checkbox"],
.data-table input[type="checkbox"],
.management-table input[type="checkbox"] {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mobile keeps labels readable but still centers the value/check side. */
@media (max-width: 900px) {
  .fr-rank-cell .fd-rank-cell {
    grid-template-columns: 26px minmax(0, 1fr) !important;
  }

  .activity-check-cell .activity-check,
  .activity-check {
    min-width: 0 !important;
  }
}


/* True checkbox/checkmark center fix
   Targets the actual classes used now:
   - activity-cert-check in Activity Reports
   - fd-cert-cell in Activity/old roster grids
   - fr-cert-cell in public roster table
   - cert-edit-box in backend roster member modal
*/

/* Activity frontend/backend: center the whole cert/check cell. */
.activity-fd-roster-board .fd-cert-cell,
.activity-fd-roster-board .activity-check-cell,
.fd-roster-cell.fd-cert-cell.activity-check-cell {
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  justify-content: center !important;
  align-content: center !important;
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Activity clickable checkbox label. */
.activity-cert-check {
  width: 100% !important;
  height: 100% !important;
  min-height: 34px !important;
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  justify-content: center !important;
  align-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

.activity-cert-check input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.activity-cert-check span,
.activity-fd-roster-board .fd-cert-cell > span,
.fd-roster-cell.fd-cert-cell.activity-check-cell > span {
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 0 auto !important;
  float: none !important;
  text-align: center !important;
}

/* Public roster certificate/checkmark table cells. */
.fr-cert-cell,
.fr-roster-table td.fr-cert-cell {
  text-align: center !important;
  vertical-align: middle !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.fr-cert-cell > span,
.fr-cert-cell.earned > span,
.fr-cert-cell.missing > span {
  display: inline-grid !important;
  place-items: center !important;
  margin: 0 auto !important;
  float: none !important;
  text-align: center !important;
}

/* Old/general roster certificate cells, if present anywhere. */
.fd-cert-cell {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
}

.fd-cert-cell > span,
.fd-cert-cell.earned > span,
.fd-cert-cell.missing > span {
  display: grid !important;
  place-items: center !important;
  margin: 0 auto !important;
}

/* Backend roster modal certificate checkboxes. Keep the old label layout,
   but center the actual native checkbox inside its own column. */
.cert-edit-box {
  grid-template-columns: 28px 28px minmax(0,1fr) !important;
  align-items: center !important;
}

.cert-edit-box input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 auto !important;
}

.cert-edit-box span {
  justify-self: center !important;
  align-self: center !important;
  margin: 0 auto !important;
}

/* Any native checkbox inside roster/admin/activity tables. */
.fr-roster-table input[type="checkbox"],
.activity-table input[type="checkbox"],
.public-activity-table input[type="checkbox"],
.activity-fd-roster-board input[type="checkbox"],
.admin-content table input[type="checkbox"],
.tablebox input[type="checkbox"],
td input[type="checkbox"],
th input[type="checkbox"] {
  display: block !important;
  margin: 0 auto !important;
  justify-self: center !important;
  align-self: center !important;
}

/* Rank icon remains left-aligned inside rank cell. */
.fr-rank-cell .fd-rank-cell {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 26px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 6px !important;
}

.fr-rank-cell .fd-rank-icon {
  justify-self: start !important;
  margin: 0 !important;
}

.fr-rank-cell .fd-rank-cell span {
  justify-self: center !important;
  text-align: center !important;
}


/* Exact checkbox center alignment
   Targets the real rendered markup, not guessed table classes.

   Current markup:
   Frontend activity:
     .activity-fd-roster-board .fd-roster-cell.fd-cert-cell.activity-check-cell > span

   Backend activity:
     .activity-fd-roster-board .fd-roster-cell.fd-cert-cell.activity-check-cell > label.activity-cert-check > span

   Public roster:
     .fr-roster-table td.fr-cert-cell > span

   Backend roster management:
     .cert-edit-box > input[type=checkbox]
*/

/* 1) Activity frontend/back: parent grid cell gets true centered content */
.activity-fd-roster-board .fd-roster-cell.fd-cert-cell.activity-check-cell,
.fd-roster-cell.fd-cert-cell.activity-check-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  align-content: center !important;
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  min-width: 0 !important;
}

/* 2) Backend activity clickable label fills the whole cell and centers its mark */
.fd-roster-cell.fd-cert-cell.activity-check-cell > label.activity-cert-check,
.activity-fd-roster-board .fd-roster-cell.fd-cert-cell.activity-check-cell > label.activity-cert-check,
label.activity-cert-check {
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  align-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  cursor: pointer;
}

/* 3) The actual checkmark/span mark */
.fd-roster-cell.fd-cert-cell.activity-check-cell > span,
.fd-roster-cell.fd-cert-cell.activity-check-cell > label.activity-cert-check > span,
.activity-fd-roster-board .fd-roster-cell.fd-cert-cell.activity-check-cell > span,
.activity-fd-roster-board .fd-roster-cell.fd-cert-cell.activity-check-cell > label.activity-cert-check > span,
label.activity-cert-check > span {
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 0 auto !important;
  float: none !important;
  text-align: center !important;
  transform: none !important;
}

/* 4) Hide input without it affecting label centering */
label.activity-cert-check > input[type="checkbox"],
.activity-cert-check input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 5) Public roster certificate/check cells */
.fr-roster-table td.fr-cert-cell,
.fr-cert-cell {
  text-align: center !important;
  vertical-align: middle !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.fr-roster-table td.fr-cert-cell > span,
.fr-cert-cell > span,
.fr-cert-cell.earned > span,
.fr-cert-cell.missing > span {
  display: inline-grid !important;
  place-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* 6) Backend roster management cert editor checkbox column */
.cert-editor-grid .cert-edit-box,
.personnel-cert-grid .cert-edit-box,
label.cert-edit-box {
  grid-template-columns: 28px 28px minmax(0, 1fr) !important;
  align-items: center !important;
}

.cert-editor-grid .cert-edit-box > input[type="checkbox"],
.personnel-cert-grid .cert-edit-box > input[type="checkbox"],
label.cert-edit-box > input[type="checkbox"] {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  justify-self: center !important;
  align-self: center !important;
  display: block !important;
}

/* 7) Native checkbox fallback anywhere in admin/activity tables */
.activity-fd-roster-board input[type="checkbox"],
.admin-content table input[type="checkbox"],
.tablebox input[type="checkbox"],
td input[type="checkbox"],
th input[type="checkbox"] {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep rank image left-aligned as requested */
.fr-rank-cell .fd-rank-cell {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
}

.fr-rank-cell .fd-rank-icon {
  justify-self: start !important;
  margin: 0 !important;
}

.fr-rank-cell .fd-rank-cell span {
  justify-self: center !important;
  text-align: center !important;
}


/* Frontend active submenu dot fix
   Parent submenu can stay open when a child is selected, but the orange active
   indicator belongs only to the selected submenu item. */
.public-layout-body .nav-item.has-submenu.child-active > .nav-row > .nav-parent-button,
.public-layout-body .nav-item.has-submenu.child-active > .nav-row > .nav-link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--muted) !important;
}

.public-layout-body .nav-item.has-submenu.child-active > .nav-row > .nav-parent-button .nav-icon,
.public-layout-body .nav-item.has-submenu.child-active > .nav-row > .nav-link .nav-icon {
  color: var(--brand2) !important;
}

.public-layout-body .nav-item.has-submenu.self-active > .nav-row > .nav-parent-button,
.public-layout-body .nav-item.has-submenu.self-active > .nav-row > .nav-link,
.public-layout-body .nav-link.active:not(.nav-parent-button) {
  background: rgba(255,77,34,.12) !important;
  border-color: rgba(255,77,34,.34) !important;
  color: var(--text) !important;
}

.public-layout-body .subs .sub .dot,
.public-layout-body .submenu-links .sub .dot {
  background: var(--muted) !important;
  opacity: .65 !important;
  box-shadow: none !important;
}

.public-layout-body .subs .sub.active,
.public-layout-body .submenu-links .sub.active {
  color: var(--text) !important;
  font-weight: 900 !important;
}

.public-layout-body .subs .sub.active .dot,
.public-layout-body .submenu-links .sub.active .dot {
  background: var(--brand2) !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 4px rgba(255,159,28,.10) !important;
}

/* Keep hover temporary only; it should not look selected after mouse leaves. */
.public-layout-body .subs .sub:hover .dot,
.public-layout-body .submenu-links .sub:hover .dot {
  background: var(--brand2) !important;
  opacity: .9 !important;
}


/* Backend active submenu dot fix
   Same behavior as frontend:
   - parent admin group can stay open for the selected child
   - only the selected submenu item gets the orange dot
   - non-selected submenu dots stay muted/gray */
.admin-layout-body .submenu-links .sub .dot,
.admin-layout-body .subs .sub .dot {
  background: var(--muted) !important;
  opacity: .65 !important;
  box-shadow: none !important;
}

.admin-layout-body .submenu-links .sub.active,
.admin-layout-body .subs .sub.active {
  color: var(--text) !important;
  font-weight: 900 !important;
}

.admin-layout-body .submenu-links .sub.active .dot,
.admin-layout-body .subs .sub.active .dot {
  background: var(--brand2) !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 4px rgba(255,159,28,.10) !important;
}

.admin-layout-body .submenu-links .sub:hover .dot,
.admin-layout-body .subs .sub:hover .dot {
  background: var(--brand2) !important;
  opacity: .9 !important;
}

/* When a submenu child is active, keep the parent group open but do not make
   every child dot look active. */
.admin-layout-body .nav-item.has-submenu.submenu-open > .submenu-links .sub:not(.active) .dot,
.admin-layout-body .nav-item.has-submenu.submenu-open > .subs .sub:not(.active) .dot {
  background: var(--muted) !important;
  opacity: .65 !important;
  box-shadow: none !important;
}


/* Remove static orange submenu dot
   Dots are muted by default. Only the actual selected submenu item has orange. */

/* Frontend + backend default submenu dots */
.public-layout-body .subs .sub:not(.active) .dot,
.public-layout-body .submenu-links .sub:not(.active) .dot,
.admin-layout-body .subs .sub:not(.active) .dot,
.admin-layout-body .submenu-links .sub:not(.active) .dot,
.subs .sub:not(.active) .dot,
.submenu-links .sub:not(.active) .dot {
  background: var(--muted) !important;
  opacity: .65 !important;
  box-shadow: none !important;
}

/* Parent-active/open states must not color every child dot orange */
.public-layout-body .nav-item.active-parent .subs .sub:not(.active) .dot,
.public-layout-body .nav-item.child-active .subs .sub:not(.active) .dot,
.public-layout-body .nav-item.submenu-open .subs .sub:not(.active) .dot,
.admin-layout-body .nav-item.active-parent .submenu-links .sub:not(.active) .dot,
.admin-layout-body .nav-item.child-active .submenu-links .sub:not(.active) .dot,
.admin-layout-body .nav-item.submenu-open .submenu-links .sub:not(.active) .dot,
.admin-layout-body .nav-item.mini-flyout-open .submenu-links .sub:not(.active) .dot {
  background: var(--muted) !important;
  opacity: .65 !important;
  box-shadow: none !important;
}

/* Selected submenu only */
.public-layout-body .subs .sub.active .dot,
.public-layout-body .submenu-links .sub.active .dot,
.admin-layout-body .subs .sub.active .dot,
.admin-layout-body .submenu-links .sub.active .dot,
.subs .sub.active .dot,
.submenu-links .sub.active .dot {
  background: var(--brand2) !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 4px rgba(255,159,28,.10) !important;
}

/* Hover may preview orange, but it should not stay after hover */
.public-layout-body .subs .sub:not(.active):hover .dot,
.public-layout-body .submenu-links .sub:not(.active):hover .dot,
.admin-layout-body .subs .sub:not(.active):hover .dot,
.admin-layout-body .submenu-links .sub:not(.active):hover .dot {
  background: var(--brand2) !important;
  opacity: .85 !important;
  box-shadow: none !important;
}


/* Login modal and menu route UI */
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  place-items: center;
  padding: 18px;
}

.login-modal.open {
  display: grid;
}

.login-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.64);
  backdrop-filter: blur(10px);
}

.login-modal-card {
  position: relative;
  z-index: 1;
  width: min(440px, 94vw);
  display: grid;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.12), transparent 24rem),
    linear-gradient(145deg, rgba(255,255,255,.070), rgba(255,255,255,.030)),
    var(--panel);
  box-shadow: var(--shadow);
}

.login-modal-card h2 {
  margin: 0;
  font-size: 1.8rem;
}

.login-modal-card p {
  margin: 0 0 4px;
  color: var(--muted);
}

.login-modal-card label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 900;
  font-size: .86rem;
}

.login-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
}

[data-menu-link-field] small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}

[data-menu-link-field] code {
  color: var(--brand2);
}


/* Final submenu dot active-only safeguard
   Fixes old hardcoded roster_ranks.php orange-dot styling.
   A submenu dot can be orange only when its own submenu link is active. */

/* Default every submenu dot to muted, including old backend class names. */
.sub:not(.active) .dot,
.submenu-link:not(.active) .submenu-dot,
.submenu-link:not(.active) .dot,
.public-layout-body .sub:not(.active) .dot,
.admin-layout-body .sub:not(.active) .dot,
.admin-side-nav .submenu-link:not(.active) .submenu-dot,
.admin-side-nav .submenu-link:not(.active) .dot {
  background: var(--muted) !important;
  color: var(--muted) !important;
  opacity: .65 !important;
  box-shadow: none !important;
}

/* Parent open/active states must not color child dots. */
.nav-item.open .sub:not(.active) .dot,
.nav-item.child-active .sub:not(.active) .dot,
.nav-item.self-active .sub:not(.active) .dot,
.nav-item.active-parent .sub:not(.active) .dot,
.nav-item.submenu-open .sub:not(.active) .dot,
.admin-side-nav .submenu-link:not(.active)[href$="roster_ranks.php"] .submenu-dot,
.admin-side-nav .submenu-link:not(.active)[href$="roster_ranks"] .submenu-dot,
a.submenu-link:not(.active)[href$="roster_ranks.php"] .submenu-dot,
a.submenu-link:not(.active)[href$="roster_ranks"] .submenu-dot,
a.sub:not(.active)[href$="roster_ranks.php"] .dot,
a.sub:not(.active)[href$="roster_ranks"] .dot {
  background: var(--muted) !important;
  color: var(--muted) !important;
  opacity: .65 !important;
  box-shadow: none !important;
}

/* Only selected submenu item gets orange. */
.sub.active .dot,
.submenu-link.active .submenu-dot,
.submenu-link.active .dot,
.public-layout-body .sub.active .dot,
.admin-layout-body .sub.active .dot,
.admin-side-nav .submenu-link.active .submenu-dot,
.admin-side-nav .submenu-link.active .dot {
  background: var(--brand2) !important;
  color: var(--brand2) !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 4px rgba(255,159,28,.10) !important;
}


/* Sidebar scroll and merged page-menu UI */
.sidebar,
.admin-sidebar,
.admin-nav {
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 120px !important;
  scrollbar-width: thin;
  scrollbar-color: var(--brand2) var(--panel2);
}

.sidebar::-webkit-scrollbar,
.admin-sidebar::-webkit-scrollbar,
.admin-nav::-webkit-scrollbar {
  width: 10px;
}

.sidebar::-webkit-scrollbar-track,
.admin-sidebar::-webkit-scrollbar-track,
.admin-nav::-webkit-scrollbar-track {
  background: var(--panel2);
  border-radius: 999px;
}

.sidebar::-webkit-scrollbar-thumb,
.admin-sidebar::-webkit-scrollbar-thumb,
.admin-nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brand), var(--brand2));
  border: 2px solid var(--panel2);
  border-radius: 999px;
}

.soft-separator {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  margin: 18px 0;
}

.check-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--text) !important;
  font-weight: 900 !important;
}

.check-row input {
  width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
}

/* Exact submenu active check, including query-string menu links */
.sub:not(.active) .dot,
.submenu-link:not(.active) .submenu-dot,
.submenu-link:not(.active) .dot {
  background: var(--muted) !important;
  color: var(--muted) !important;
  opacity: .65 !important;
  box-shadow: none !important;
}

.sub.active .dot,
.submenu-link.active .submenu-dot,
.submenu-link.active .dot {
  background: var(--brand2) !important;
  color: var(--brand2) !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 4px rgba(255,159,28,.10) !important;
}


/* Final sidebar overflow scrollbar
   Sidebars scroll only when their content is taller than the screen. */
.sidebar,
.admin-sidebar,
.admin-nav {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--brand2) var(--panel2) !important;
  padding-bottom: 120px !important;
}

.sidebar::-webkit-scrollbar,
.admin-sidebar::-webkit-scrollbar,
.admin-nav::-webkit-scrollbar {
  width: 10px !important;
}

.sidebar::-webkit-scrollbar-track,
.admin-sidebar::-webkit-scrollbar-track,
.admin-nav::-webkit-scrollbar-track {
  background: var(--panel2) !important;
  border-radius: 999px !important;
}

.sidebar::-webkit-scrollbar-thumb,
.admin-sidebar::-webkit-scrollbar-thumb,
.admin-nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brand), var(--brand2)) !important;
  border: 2px solid var(--panel2) !important;
  border-radius: 999px !important;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.admin-sidebar::-webkit-scrollbar-thumb:hover,
.admin-nav::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--brand2), var(--brand3)) !important;
}

/* Mobile drawers should scroll internally too. */
.drawer-panel,
.admin-drawer-panel {
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}


/* Pages submenu admin UI and editor */
.pages-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}

.page-admin-card,
.page-admin-row,
.page-editor-card,
.page-admin-list {
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.08), transparent 24rem),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.025)),
    var(--panel);
  box-shadow: var(--shadow);
}

.page-admin-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 22px;
  align-items: center;
}

.page-admin-card h2,
.page-editor-card h2,
.page-admin-list h2 {
  margin: 4px 0 8px;
}

.page-admin-card p {
  color: var(--muted);
  line-height: 1.55;
}

.page-admin-card strong {
  color: var(--brand2);
}

.page-admin-icon,
.page-admin-row-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,159,28,.12);
  color: var(--brand2);
  border: 1px solid rgba(255,159,28,.24);
  font-weight: 1000;
}

.pages-admin-layout {
  display: grid;
  grid-template-columns: minmax(380px, 520px) minmax(0,1fr);
  gap: 18px;
  align-items: start;
}

.page-create-layout {
  grid-template-columns: minmax(520px, 760px) minmax(0,1fr);
}

.page-editor-card,
.page-admin-list {
  padding: 20px;
}

.page-admin-list-head {
  display: flex;
  gap: 14px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 14px;
}

.page-admin-search {
  max-width: 360px;
}

.page-admin-rows {
  display: grid;
  gap: 10px;
}

.page-admin-row {
  min-height: 72px;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) 120px auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
}

.page-admin-row-main {
  display: grid;
  gap: 3px;
}

.page-admin-row-main strong {
  color: var(--text);
}

.page-admin-row-main small {
  color: var(--muted);
}

.page-admin-actions {
  display: inline-flex;
  gap: 8px;
  justify-content: end;
}

.status-pill.inactive {
  background: rgba(255,255,255,.045) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

.page-check-row {
  align-self: end;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  justify-content: space-between;
}

.page-editor-shell {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--panel);
}

.page-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  min-height: 48px;
  padding: 6px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.035);
}

.page-editor-toolbar button {
  min-width: 36px;
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
}

.page-editor-toolbar button:hover,
.editor-html-toggle,
.editor-preview-toggle {
  background: rgba(255,159,28,.12) !important;
  color: var(--brand2) !important;
}

.rich-editor,
.html-editor,
.rich-preview {
  min-height: 360px;
  padding: 18px;
  background: rgba(255,255,255,.92);
  color: #12202a;
  outline: none;
  overflow: auto;
}

.html-editor {
  display: none;
  width: 100%;
  border: 0;
  border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
}

.rich-preview {
  display: none;
}

.rich-editor h2,
.rich-preview h2 {
  font-size: 1.7rem;
}

.rich-editor blockquote,
.rich-preview blockquote {
  margin: 12px 0;
  padding: 10px 14px;
  border-left: 4px solid var(--brand2);
  background: rgba(255,159,28,.10);
}

@media(max-width:1100px){
  .pages-admin-grid,
  .pages-admin-layout,
  .page-create-layout {
    grid-template-columns: 1fr;
  }
  .page-admin-row {
    grid-template-columns: 48px 1fr;
  }
  .page-admin-row .status-pill,
  .page-admin-actions {
    grid-column: 2;
    justify-content: start;
  }
}


/* Page modals and reorder final */
.page-manager-card {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 2vw, 30px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.08), transparent 24rem),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.025)),
    var(--panel);
  box-shadow: var(--shadow);
}

.page-admin-rows.sortable-list {
  display: grid;
  gap: 10px;
}

.page-admin-row.sortable-row {
  grid-template-columns: 42px 52px minmax(0,1fr) 120px auto;
  cursor: default;
}

.page-admin-row.dragging {
  opacity: .55;
  transform: scale(.995);
}

.drag-handle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--brand2);
  background: rgba(255,159,28,.10);
  border: 1px solid rgba(255,159,28,.20);
  cursor: grab;
  user-select: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.drag-hint {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font-weight: 900;
  font-size: .82rem;
}

.drag-hint span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
}

.page-modal-panel {
  width: min(820px, 96vw);
}

.page-builder-modal-panel {
  width: min(1240px, 97vw);
}

.page-builder-modal-panel .personnel-modal-body {
  max-height: calc(90vh - 154px);
}

.page-builder-modal-panel .rich-editor,
.page-builder-modal-panel .html-editor,
.page-builder-modal-panel .rich-preview {
  min-height: 330px;
}

.page-admin-actions .icon-btn {
  border: 1px solid var(--line);
}

.page-admin-actions .edit-btn {
  background: rgba(255,159,28,.12);
  color: var(--brand2);
  border-color: rgba(255,159,28,.25);
}

.page-admin-actions .delete-btn {
  background: rgba(255,77,90,.10);
  color: #ff8d96;
  border-color: rgba(255,77,90,.25);
}

@media(max-width:1100px){
  .page-admin-row.sortable-row {
    grid-template-columns: 42px 48px 1fr;
  }
  .page-admin-row.sortable-row .status-pill,
  .page-admin-row.sortable-row .page-admin-actions {
    grid-column: 3;
    justify-self: start;
  }
}


/* Page reorder save feedback and roster-style buttons */
.page-admin-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.page-admin-actions .emoji-row-action {
  width: 42px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  padding: 0 !important;
  border-radius: 14px;
  font-size: 1.05rem;
  line-height: 1;
}

.page-admin-actions .emoji-edit-action {
  border-color: rgba(255,159,28,.28) !important;
  background: rgba(255,159,28,.12) !important;
  color: var(--brand2) !important;
}

.page-admin-actions .emoji-delete-action {
  border-color: rgba(255,77,90,.28) !important;
  background: rgba(255,77,90,.10) !important;
  color: #ff8d96 !important;
}

.sortable-list.saving-order {
  outline: 1px solid rgba(255,159,28,.45);
  outline-offset: 4px;
  border-radius: 18px;
}

.sortable-list.order-saved {
  outline: 2px solid rgba(40,210,120,.55);
  outline-offset: 4px;
  border-radius: 18px;
}

.sortable-list.order-error {
  outline: 2px solid rgba(255,77,90,.70);
  outline-offset: 4px;
  border-radius: 18px;
}

.sortable-row.dragging {
  opacity: .55;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.drag-handle {
  transition: transform .15s ease, background .15s ease;
}

.drag-handle:hover {
  transform: translateY(-1px);
  background: rgba(255,159,28,.18);
}


/* Category optional slug helper */
.personnel-modal-group label small {
  display: block;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
}


/* Frontend menu vertical spacing
   Normal categories and dropdown categories use the same outside spacing. */
.public-layout-body .sidebar nav .nav-group {
  display: grid;
  gap: 6px;
}

.public-layout-body .sidebar nav .nav-item,
.public-layout-body .sidebar nav .nav-item.has-submenu {
  margin-bottom: 5px !important;
}

.public-layout-body .sidebar nav .subs {
  margin-top: 5px;
  display: grid;
  gap: 4px;
}

.public-layout-body .sidebar nav .sub {
  min-height: 32px;
}

/* Frontend active parent/category fix
   - parent-only categories do not self-highlight
   - selected submenu highlights both itself and its parent category
   - dashboard does not highlight unrelated parent-only categories */
.public-layout-body .nav-item.child-active > .nav-row > .nav-parent-button.active,
.public-layout-body .nav-item.self-active > .nav-row > .nav-parent-button.active,
.public-layout-body .nav-link.active {
  background: rgba(255,77,34,.12) !important;
  border-color: rgba(255,77,34,.34) !important;
  color: var(--text) !important;
}

.public-layout-body .nav-item.child-active > .nav-row > .nav-parent-button.active .nav-icon,
.public-layout-body .nav-item.self-active > .nav-row > .nav-parent-button.active .nav-icon,
.public-layout-body .nav-link.active .nav-icon {
  color: var(--brand2) !important;
}

/* If a parent is open manually but no child is active, keep it neutral. */
.public-layout-body .nav-item.has-submenu.open:not(.child-active):not(.self-active) > .nav-row > .nav-parent-button {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--muted) !important;
}




/* Grouped page/category lists and roster-style reorder status */
.page-admin-group-block {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.page-admin-group-block:first-child {
  margin-top: 0;
}

.page-admin-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
}

.page-admin-group-title span {
  color: var(--text);
  font-weight: 1000;
}

.page-admin-group-title small {
  color: var(--muted);
  font-weight: 900;
}

.drag-hint[data-order-status] {
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.drag-hint[data-order-status].saving {
  color: var(--brand2) !important;
  border-color: rgba(255,159,28,.28) !important;
  background: rgba(255,159,28,.08) !important;
}

.drag-hint[data-order-status].saving span {
  background: var(--brand2) !important;
}

.drag-hint[data-order-status].saved {
  color: #5df09b !important;
  border-color: rgba(93,240,155,.28) !important;
  background: rgba(93,240,155,.08) !important;
}

.drag-hint[data-order-status].saved span {
  background: #5df09b !important;
}

.drag-hint[data-order-status].error {
  color: #ff8d96 !important;
  border-color: rgba(255,77,90,.28) !important;
  background: rgba(255,77,90,.10) !important;
}

.drag-hint[data-order-status].error span {
  background: #ff8d96 !important;
}


/* Final dashboard active bleed safeguard */
.public-layout-body .nav-item.has-submenu:not(.child-active):not(.self-active) > .nav-row > .nav-parent-button.active {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--muted) !important;
}

.public-layout-body .nav-item.has-submenu.child-active > .nav-row > .nav-parent-button.active,
.public-layout-body .nav-item.has-submenu.self-active > .nav-row > .nav-parent-button.active {
  background: rgba(255,77,34,.12) !important;
  border-color: rgba(255,77,34,.34) !important;
  color: var(--text) !important;
}


/* Final frontend false-active category fix */
.public-layout-body .nav-item.has-submenu:not(.child-active):not(.self-active) > .nav-row > .nav-parent-button,
.public-layout-body .nav-item.has-submenu:not(.child-active):not(.self-active) > .nav-row > .nav-parent-button.active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
}

.public-layout-body .nav-item.has-submenu:not(.child-active):not(.self-active) > .nav-row > .nav-parent-button .nav-icon {
  color: var(--brand2) !important;
}

.public-layout-body .nav-item.has-submenu.child-active > .nav-row > .nav-parent-button,
.public-layout-body .nav-item.has-submenu.child-active > .nav-row > .nav-parent-button.active,
.public-layout-body .nav-item.has-submenu.self-active > .nav-row > .nav-parent-button,
.public-layout-body .nav-item.has-submenu.self-active > .nav-row > .nav-parent-button.active {
  background: rgba(255,77,34,.12) !important;
  border-color: rgba(255,77,34,.34) !important;
  color: var(--text) !important;
}

.sortable-row[draggable="true"] .drag-handle,
.sortable-row[draggable="true"] {
  cursor: grab;
}

.sortable-row.dragging {
  cursor: grabbing;
  user-select: none;
}


/* Page link type panels */
[data-page-link-panel] small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.4;
}

[data-page-link-panel] code {
  color: var(--brand2);
}