@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap');
: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-readonly-value {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.84);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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: 64px;
  height: 64px;
  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.superadmin {
  color: #d8c7ff !important;
  background: linear-gradient(135deg, rgba(120,74,255,.24), rgba(255,159,28,.14)) !important;
  border: 1px solid rgba(164,128,255,.38) !important;
  box-shadow: 0 10px 24px rgba(120,74,255,.12);
}

.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;
}

.permission-role-hint.superadmin {
  color: #d8c7ff !important;
  background: linear-gradient(135deg, rgba(120,74,255,.20), rgba(255,159,28,.10)) !important;
  border-color: rgba(164,128,255,.34) !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);
  gap: 14px;
  align-items: start;
}

.logs-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.logs-stat {
  min-width: 88px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  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-row.login-failed .log-action-icon {
  color: #ffb26b;
  background: rgba(255,159,28,.14);
  border-color: rgba(255,159,28,.28);
}

.log-row.login-blocked .log-action-icon {
  color: #ff6f7c;
  background: rgba(255,77,90,.14);
  border-color: rgba(255,77,90,.32);
}

.log-row.login-blocked {
  border-color: rgba(255,77,90,.24);
  background: rgba(255,77,90,.045);
}

.log-detail-summary {
  color: var(--muted);
  margin-top: 2px;
}

.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-toolbar,
  .log-row {
    grid-template-columns: 1fr;
  }

  .log-time {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .logs-stat-grid {
    gap: 8px;
  }

  .logs-stat {
    min-width: calc(50% - 4px);
  }
}


/* 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: 48px 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-switch {
  position: relative !important;
  width: 44px !important;
  height: 26px !important;
  display: block !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148,163,184,.28) !important;
  background: rgba(148,163,184,.20) !important;
  transition: background .16s ease, border-color .16s ease !important;
}

.activity-section-card-switch::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.90) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.28) !important;
  transition: transform .16s ease !important;
}

.activity-section-card input:checked + .activity-section-card-switch {
  border-color: rgba(255,159,28,.45) !important;
  background: rgba(255,159,28,.26) !important;
}

.activity-section-card input:checked + .activity-section-card-switch::after {
  transform: translateX(18px) !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);
}


/* Public roster header matches Activity Reports header
   Keep certificate icons/codes visible; only normalize the header shape/colors. */
.fr-roster-table thead {
  position: relative;
  z-index: 3;
}

.fr-roster-table thead tr {
  line-height: 1 !important;
}

.fr-roster-group-row th {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  vertical-align: middle !important;
  border: 1px solid var(--fh-table-head-border, rgba(255,255,255,.13)) !important;
  border-radius: 14px 14px 4px 4px !important;
  background: var(--fh-table-head-bg, linear-gradient(135deg, rgba(255,59,34,.17), rgba(255,159,28,.08)), #151d20) !important;
  color: var(--fh-table-head-main-text, var(--text)) !important;
  text-transform: uppercase !important;
  letter-spacing: .075em !important;
  font-size: .66rem !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.fr-roster-head-row th {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 7px !important;
  vertical-align: middle !important;
  border: 1px solid var(--fh-table-head-border, rgba(255,255,255,.13)) !important;
  border-radius: 4px 4px 12px 12px !important;
  background: var(--fh-table-subhead-bg, #111b20) !important;
  color: var(--fh-table-head-text, var(--brand2)) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-size: .55rem !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Slightly reduce the long grouped label so “Latest Promotion” does not get clipped. */
.fr-roster-group-row th:nth-child(5),
.fr-roster-head-row th:nth-child(13) {
  letter-spacing: .045em !important;
  font-size: .56rem !important;
}

/* Certificate headers keep the existing icon + code layout. */
.fr-roster-head-row th.fr-cert-head,
.fr-cert-head {
  padding: 2px 5px !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.fr-cert-head img {
  display: block !important;
  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: .78rem !important;
  line-height: 1 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.fr-cert-head strong {
  display: block !important;
  color: var(--fh-table-head-text, var(--brand2)) !important;
  font-size: .43rem !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Keep the public roster table aligned with the Activity table header spacing. */
.fr-roster-table {
  border-spacing: 0 6px !important;
}

/* Give latest promotion the same breathing room without touching certificate icons. */
.fr-roster-table th:nth-child(13),
.fr-roster-table td:nth-child(13) {
  width: 118px !important;
  min-width: 118px !important;
}


/* Direct admin login page */
.admin-login-body {
  min-height: 100vh;
}

.admin-login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,77,34,.13), transparent 28rem),
    radial-gradient(circle at 80% 85%, rgba(255,159,28,.08), transparent 28rem),
    var(--bg);
}

.admin-direct-login-card {
  position: relative;
  width: min(440px, 94vw);
  margin: 0;
}

.admin-direct-login-logo {
  width: 86px;
  height: 86px;
  object-fit: contain;
  display: block;
  margin: -8px auto 18px;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.38));
}

.admin-direct-login-card .flash {
  margin: 12px 0;
}


/* Roster2 wall-of-fame public roster */
.roster-wall-page .content,
.roster-wall-page .main,
.roster-wall-page main {
  overflow-x: hidden;
}

.roster-wall-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.11), transparent 26rem),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.025)),
    var(--panel);
  box-shadow: var(--shadow);
}

.roster-wall-toolbar h2 {
  margin: 6px 0;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
}

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

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

.roster-wall-section {
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.022)),
    var(--panel);
  box-shadow: var(--shadow);
}

.roster-wall-section-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.roster-wall-section-header small {
  justify-self: end;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font-weight: 900;
}

.roster-wall-section-title {
  min-width: min(560px, 86vw);
  display: grid;
  grid-template-columns: minmax(60px, 1fr) auto minmax(60px, 1fr);
  align-items: center;
  gap: 14px;
  color: var(--brand2);
}

.roster-wall-section-title span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,159,28,.74), transparent);
}

.roster-wall-section-title h2 {
  margin: 0;
  color: var(--brand2);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  text-align: center;
}

.roster-wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(18px, 2.2vw, 34px);
  align-items: start;
}

.roster-wall-card {
  appearance: none;
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0 8px 16px;
  border: 1px solid transparent;
  border-radius: 24px;
  background: transparent;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.roster-wall-card:hover,
.roster-wall-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255,159,28,.28);
  background: rgba(255,255,255,.045);
  box-shadow: 0 20px 48px rgba(0,0,0,.22);
  outline: none;
}

.roster-wall-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    #cfcfcf;
  border: 1px solid rgba(255,255,255,.10);
}

.roster-wall-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.roster-wall-no-image {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #d0d0d0;
  color: #050505;
}

.roster-wall-no-image strong {
  font-size: clamp(1.35rem, 2vw, 2rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 1000;
}

.roster-wall-card-rank {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-top: -18px;
  border-radius: 999px;
  background: rgba(255,159,28,.10);
  border: 1px solid rgba(255,159,28,.25);
  box-shadow: 0 16px 30px rgba(0,0,0,.24);
}

.roster-wall-card-rank img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.28));
}

.roster-wall-card-rank span {
  color: var(--brand2);
  font-weight: 1000;
}

.roster-wall-card strong {
  font-weight: 1000;
  line-height: 1.15;
}

.roster-wall-card small {
  color: var(--text);
  font-weight: 850;
  line-height: 1.25;
}

.roster-wall-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  padding: 22px;
}

.roster-wall-modal.open {
  display: grid;
}

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

.roster-wall-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1080px, 96vw);
  max-height: 92vh;
  overflow: auto;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid var(--line);
  border-radius: 32px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.12), transparent 28rem),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
    var(--panel);
  box-shadow: 0 34px 110px rgba(0,0,0,.55);
}

.roster-wall-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
  font-size: 1.55rem;
  font-weight: 900;
}

.roster-wall-modal-top {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: clamp(18px, 2.5vw, 34px);
  align-items: center;
}

.roster-wall-modal-photo {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.045);
}

.roster-wall-modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.roster-wall-modal-photo span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 5rem;
  font-weight: 1000;
  color: #111;
  background: #d0d0d0;
}

.roster-wall-modal-main h2 {
  margin: 8px 0 10px;
  font-size: clamp(2rem, 4vw, 4rem);
}

.roster-wall-modal-rank {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.roster-wall-modal-rank img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.roster-wall-modal-rank strong {
  font-size: 1.1rem;
}

.roster-wall-modal-rank span {
  color: var(--muted);
  font-weight: 900;
}

.roster-wall-status-badge {
  width: fit-content;
  display: inline-flex;
  margin-top: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #5df09b;
  background: rgba(34,197,94,.16);
  border: 1px solid rgba(34,197,94,.28);
  font-weight: 1000;
}

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

.roster-wall-status-badge.loa,
.roster-wall-status-badge.vacation {
  color: var(--brand2);
  background: rgba(255,159,28,.11);
  border-color: rgba(255,159,28,.26);
}

.roster-wall-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.roster-wall-detail-grid div,
.roster-wall-notes,
.roster-wall-modal-cert {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}

.roster-wall-detail-grid div {
  padding: 13px;
}

.roster-wall-detail-grid span,
.roster-wall-notes span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 6px;
}

.roster-wall-detail-grid strong {
  overflow-wrap: anywhere;
}

.roster-wall-notes {
  margin-top: 10px;
  padding: 14px;
}

.roster-wall-notes p {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}

.roster-wall-modal-certs-wrap {
  margin-top: 20px;
}

.roster-wall-modal-certs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.roster-wall-modal-cert {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 8px;
  align-items: center;
  padding: 10px;
  opacity: .55;
}

.roster-wall-modal-cert.earned {
  opacity: 1;
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.08);
}

.roster-wall-modal-cert img,
.roster-wall-modal-cert > span {
  grid-row: 1 / 3;
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: grid;
  place-items: center;
}

.roster-wall-modal-cert strong {
  color: var(--text);
  font-size: .78rem;
}

.roster-wall-modal-cert small {
  color: var(--muted);
  font-size: .70rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media(max-width: 900px) {
  .roster-wall-modal-top,
  .roster-wall-detail-grid {
    grid-template-columns: 1fr;
  }

  .roster-wall-section-header {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .roster-wall-section-header small {
    justify-self: center;
  }

  .roster-wall-section-title {
    min-width: 0;
    width: 100%;
  }
}


/* Roster2 card spacing/card background fix */
.roster-wall-section {
  padding: clamp(22px, 2.4vw, 34px) !important;
}

.roster-wall-section-header {
  margin-bottom: clamp(22px, 2.7vw, 36px) !important;
}

.roster-wall-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: clamp(24px, 2.7vw, 44px) clamp(24px, 3vw, 46px) !important;
  align-items: stretch !important;
}

.roster-wall-card {
  min-height: 372px !important;
  align-content: start !important;
  gap: 9px !important;
  padding: 18px 16px 20px !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--brand) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.12), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.072), rgba(255,255,255,.030)),
    var(--panel) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.18) !important;
}

.roster-wall-card:hover,
.roster-wall-card:focus-visible {
  transform: translateY(-4px) !important;
  border-color: rgba(255,159,28,.38) !important;
  border-left-color: var(--brand2) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.18), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.040)),
    var(--panel) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.28) !important;
}

.roster-wall-card-image {
  height: 210px !important;
  aspect-ratio: auto !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.090), rgba(255,255,255,.035)),
    var(--panel2, #162126) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.roster-wall-card-image img {
  object-fit: cover !important;
}

.roster-wall-card-rank {
  margin-top: -24px !important;
  width: 54px !important;
  height: 54px !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,159,28,.18), transparent 72%),
    rgba(255,159,28,.08) !important;
  border-color: rgba(255,159,28,.32) !important;
}

.roster-wall-card-rank img {
  width: 48px !important;
  height: 48px !important;
}

.roster-wall-card > strong {
  margin-top: 4px !important;
  font-size: .98rem !important;
}

.roster-wall-card > small {
  color: var(--text) !important;
  opacity: .92 !important;
}

.roster-wall-empty-personnel {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,159,28,.16), transparent 16rem),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    var(--panel2, #162126);
}

.roster-wall-empty-personnel::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255,159,28,.16);
  border-radius: 18px;
}

.roster-wall-empty-head {
  position: absolute;
  top: 42px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.06)),
    rgba(255,159,28,.12);
  border: 1px solid rgba(255,159,28,.24);
  box-shadow: 0 16px 34px rgba(0,0,0,.20);
}

.roster-wall-empty-body {
  position: absolute;
  top: 116px;
  width: 132px;
  height: 86px;
  border-radius: 64px 64px 18px 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.045)),
    rgba(255,159,28,.09);
  border: 1px solid rgba(255,159,28,.20);
  box-shadow: 0 18px 38px rgba(0,0,0,.20);
}

.roster-wall-empty-personnel small {
  position: absolute;
  bottom: 22px;
  color: var(--brand2);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .70rem;
}

/* Modal image placeholder uses the same empty personnel visual language. */
.roster-wall-modal-photo span {
  color: var(--brand2) !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,159,28,.16), transparent 16rem),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    var(--panel2, #162126) !important;
  border: 1px solid rgba(255,159,28,.18);
}

@media(max-width: 760px) {
  .roster-wall-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 22px !important;
  }

  .roster-wall-card {
    min-height: 340px !important;
  }

  .roster-wall-card-image {
    height: 185px !important;
  }
}


/* Roster2 image/badge/data layout fix
   - taller image box
   - rank badge no longer overlaps image
   - badge + name/rank sit below the image with small spacing
   - empty personnel icon is centered in the image box */
.roster-wall-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: clamp(28px, 3vw, 48px) !important;
}

.roster-wall-card {
  min-height: 430px !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 7px !important;
  padding: 18px 16px 22px !important;
}

.roster-wall-card-image {
  width: 100% !important;
  height: 255px !important;
  aspect-ratio: auto !important;
  margin-bottom: 8px !important;
}

.roster-wall-card-rank {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  position: relative !important;
  z-index: 2 !important;
  width: 54px !important;
  height: 54px !important;
}

.roster-wall-card > strong {
  margin-top: 0 !important;
  line-height: 1.15 !important;
}

.roster-wall-card > small {
  margin-top: 0 !important;
  line-height: 1.2 !important;
}

/* Center the empty personnel icon inside the image area. */
.roster-wall-empty-personnel {
  display: grid !important;
  place-items: center !important;
  position: relative !important;
}

.roster-wall-empty-head,
.roster-wall-empty-body {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.roster-wall-empty-head {
  top: 56px !important;
  width: 72px !important;
  height: 72px !important;
}

.roster-wall-empty-body {
  top: 138px !important;
  width: 150px !important;
  height: 94px !important;
}

.roster-wall-empty-personnel small {
  left: 0 !important;
  right: 0 !important;
  bottom: 22px !important;
  text-align: center !important;
}

/* Keep the modal image placeholder centered too. */
.roster-wall-modal-photo span {
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

@media(max-width: 760px) {
  .roster-wall-grid {
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)) !important;
    gap: 24px !important;
  }

  .roster-wall-card {
    min-height: 390px !important;
  }

  .roster-wall-card-image {
    height: 220px !important;
  }

  .roster-wall-empty-head {
    top: 48px !important;
  }

  .roster-wall-empty-body {
    top: 126px !important;
  }
}


/* Roster2 placeholder center and missing cert color fix */
.roster-wall-empty-personnel {
  display: grid !important;
  place-items: center !important;
  position: relative !important;
}

.roster-wall-empty-head,
.roster-wall-empty-body {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.roster-wall-empty-head {
  top: calc(50% - 76px) !important;
}

.roster-wall-empty-body {
  top: calc(50% + 6px) !important;
}

.roster-wall-empty-personnel small {
  display: none !important;
}

/* Modal certificate colors */
.roster-wall-modal-cert.missing {
  opacity: 1 !important;
  border-color: rgba(255,77,90,.34) !important;
  background:
    linear-gradient(145deg, rgba(255,77,90,.14), rgba(255,77,90,.055)),
    rgba(255,77,90,.06) !important;
}

.roster-wall-modal-cert.missing strong,
.roster-wall-modal-cert.missing small,
.roster-wall-modal-cert.missing > span {
  color: #ff8d96 !important;
}

.roster-wall-modal-cert.missing img {
  filter:
    grayscale(1)
    sepia(1)
    saturate(5)
    hue-rotate(300deg)
    brightness(1.05)
    drop-shadow(0 8px 14px rgba(255,77,90,.18)) !important;
}

.roster-wall-modal-cert.earned {
  border-color: rgba(34,197,94,.30) !important;
  background:
    linear-gradient(145deg, rgba(34,197,94,.14), rgba(34,197,94,.055)),
    rgba(34,197,94,.06) !important;
}


/* Roster2 rank icon clean style
   Remove the round background from the rank icon. */
.roster-wall-card-rank {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.roster-wall-card-rank img {
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.30)) !important;
}

.roster-wall-card-rank span {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* Roster2 wider modal certificate boxes */
.roster-wall-modal-certs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.roster-wall-modal-cert {
  min-height: 64px !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  padding: 12px !important;
}

.roster-wall-modal-cert strong,
.roster-wall-modal-cert small {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25 !important;
}

.roster-wall-modal-cert small {
  overflow-wrap: anywhere !important;
}

@media(max-width: 1050px) {
  .roster-wall-modal-certs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media(max-width: 760px) {
  .roster-wall-modal-certs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width: 520px) {
  .roster-wall-modal-certs {
    grid-template-columns: 1fr !important;
  }
}


/* Roster2 modal square image box */
.roster-wall-modal-top {
  grid-template-columns: minmax(260px, 360px) 1fr !important;
  align-items: start !important;
}

.roster-wall-modal-photo {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.090), rgba(255,255,255,.035)),
    var(--panel2, #162126) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.roster-wall-modal-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.roster-wall-modal-photo span {
  width: 100% !important;
  height: 100% !important;
}

@media(max-width: 900px) {
  .roster-wall-modal-top {
    grid-template-columns: 1fr !important;
  }

  .roster-wall-modal-photo {
    width: min(360px, 100%) !important;
    justify-self: center !important;
  }
}


/* Roster2 logged-in modal access control */
.roster-wall-card-static {
  cursor: default !important;
}

.roster-wall-card-static:hover,
.roster-wall-card-static:focus-visible {
  transform: none !important;
  border-color: var(--line) !important;
  border-left-color: var(--brand) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.12), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.072), rgba(255,255,255,.030)),
    var(--panel) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.18) !important;
  outline: none !important;
}


/* Page/link login-only visibility badge */
.status-pill.login-only {
  color: var(--brand2) !important;
  border-color: rgba(255,159,28,.32) !important;
  background: rgba(255,159,28,.10) !important;
}


/* Visibility modes + viewer role */
.status-pill.login-only,
.status-pill.viewer-only {
  color: var(--brand2);
  border-color: rgba(255,159,28,.28);
  background: rgba(255,159,28,.10);
}

.cms-user-role.viewer {
  color: #9bd7ff;
  border-color: rgba(155,215,255,.28);
  background: rgba(155,215,255,.10);
}

.permission-role-hint.viewer {
  color: #9bd7ff;
  border-color: rgba(155,215,255,.28);
  background: rgba(155,215,255,.10);
}

.cms-user-locked-note {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,159,28,.28);
  background: rgba(255,159,28,.08);
  color: var(--brand2);
  font-size: .72rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .05em;
}


/* Master user protected text removal */
.cms-user-locked-spacer {
  display: inline-flex;
  width: 32px;
  height: 32px;
}


/* User delete confirmation modal */
.user-delete-modal-panel {
  max-width: 560px;
}

.user-delete-modal-panel strong {
  color: var(--brand2);
}

.btn.danger {
  background: linear-gradient(135deg, rgba(255,77,90,.95), rgba(255,112,67,.95));
  color: #fff;
  box-shadow: 0 18px 38px rgba(255,77,90,.22);
}


/* Public roster modal categorized information layout */
.roster-wall-modal-section {
  margin-top: 22px;
}

.roster-wall-modal-section-title {
  display: grid;
  grid-template-columns: minmax(42px, 1fr) auto minmax(42px, 1fr);
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
}

.roster-wall-modal-section-title span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,159,28,.55), transparent);
}

.roster-wall-modal-section-title h3 {
  margin: 0;
  color: var(--brand2);
  text-transform: uppercase;
  letter-spacing: .075em;
  font-size: .82rem;
  font-weight: 1000;
  text-align: center;
}

.roster-wall-modal-section .roster-wall-detail-grid {
  margin-top: 0 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.roster-wall-modal-section .roster-wall-notes {
  margin-top: 0 !important;
}

.roster-wall-modal-certs-wrap {
  margin-top: 22px !important;
}

@media(max-width: 1050px) {
  .roster-wall-modal-section .roster-wall-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width: 620px) {
  .roster-wall-modal-section-title {
    grid-template-columns: 1fr;
  }

  .roster-wall-modal-section-title span {
    display: none;
  }

  .roster-wall-modal-section .roster-wall-detail-grid {
    grid-template-columns: 1fr;
  }
}


/* Public roster modal full background lock */
html.roster-wall-page-locked,
html.roster-wall-page-locked body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  height: 100% !important;
}

body.roster-wall-modal-open {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

/* Disable all background interaction while the modal is open. */
body.roster-wall-modal-open .sidebar,
body.roster-wall-modal-open .public-sidebar,
body.roster-wall-modal-open .content,
body.roster-wall-modal-open .main,
body.roster-wall-modal-open main {
  pointer-events: none !important;
}

/* Re-enable the modal itself. */
body.roster-wall-modal-open .roster-wall-modal,
body.roster-wall-modal-open .roster-wall-modal * {
  pointer-events: auto !important;
}

body.roster-wall-modal-open .roster-wall-modal {
  overflow: hidden !important;
  touch-action: none !important;
}

body.roster-wall-modal-open .roster-wall-modal-panel {
  max-height: calc(100vh - 44px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
}


/* SOG backend manager polish */
.sog-manager-card .page-admin-row-icon,
.sog-category-card .page-admin-row-icon {
  color: var(--brand2);
}

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

.sog-admin-row .page-admin-row-main small,
.sog-category-row .page-admin-row-main small {
  overflow-wrap: anywhere;
}

.priority-pill.priority-critical,
.tag.priority-critical {
  color: #ff8d96;
  border-color: rgba(255,77,90,.35);
  background: rgba(255,77,90,.12);
}

.priority-pill.priority-high,
.tag.priority-high {
  color: #ffb86b;
  border-color: rgba(255,159,28,.35);
  background: rgba(255,159,28,.12);
}

.priority-pill.priority-medium,
.tag.priority-medium {
  color: #9bd7ff;
  border-color: rgba(155,215,255,.30);
  background: rgba(155,215,255,.10);
}

.priority-pill.priority-low,
.tag.priority-low {
  color: #5df09b;
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.10);
}

.sog-body-content {
  line-height: 1.65;
}

.sog-body-content img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
}

.sog-body-content ul,
.sog-body-content ol {
  padding-left: 1.3rem;
}

.sog-body-content h2,
.sog-body-content h3 {
  color: var(--brand2);
}


/* SOG backend/frontend document view overhaul */
.sog-manager-card {
  overflow: visible;
}

.sog-manager-card .page-admin-rows {
  overflow: visible;
}

.sog-manager-card .page-admin-row.sog-admin-row {
  min-height: 86px;
  display: grid;
  grid-template-columns: 44px 46px minmax(0, 1fr) 120px 112px 88px;
  align-items: center;
  gap: 12px;
}

.sog-manager-card .page-admin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  position: static;
  transform: none;
}

.sog-category-legacy-tools {
  padding: 0;
}

.sog-category-legacy-tools > summary {
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 18px 22px;
  cursor: pointer;
  border-radius: 24px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.10), transparent 22rem),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    var(--panel);
}

.sog-category-legacy-tools > summary::-webkit-details-marker {
  display: none;
}

.sog-category-legacy-tools > summary strong {
  color: var(--text);
  font-size: 1.05rem;
}

.sog-category-legacy-tools > summary small {
  color: var(--muted);
  justify-self: end;
}

.sog-category-legacy-tools[open] > summary {
  border-radius: 24px 24px 0 0;
}

.sog-category-legacy-tools[open] > .personnel-manager-top,
.sog-category-legacy-tools[open] > .page-admin-rows {
  padding: 18px 22px;
}

.sog-body-content-editor-group .page-rich-editor,
.sog-body-content-editor-group .page-html-editor,
.sog-body-content-editor-group .page-rich-preview {
  min-height: 520px !important;
  font-size: 1.08rem !important;
  line-height: 1.75 !important;
}

.sog-body-content-editor-group .page-rich-editor {
  padding: 22px !important;
}

.sog-library-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 520px) 1fr;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    var(--panel);
}

.sog-library-toolbar input {
  width: 100%;
}

.sog-library-chips {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.sog-library-list {
  display: grid;
  gap: 14px;
}

.sog-list-row {
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.11), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.027)),
    var(--panel);
  box-shadow: 0 16px 36px rgba(0,0,0,.16);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.sog-list-row:hover {
  transform: translateY(-2px);
  border-left-color: var(--brand2);
  border-color: rgba(255,159,28,.26);
}

.sog-list-row > a {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
}

.sog-list-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--brand2);
  background: rgba(255,159,28,.10);
  border: 1px solid rgba(255,159,28,.24);
  font-weight: 1000;
}

.sog-list-main h2 {
  margin: 4px 0 6px;
  font-size: clamp(1.08rem, 1.6vw, 1.35rem);
}

.sog-list-main p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.sog-list-meta {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 8px;
}

.sog-list-meta small {
  color: var(--brand2);
  font-weight: 900;
}

.sog-reader-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 980px);
  align-items: start;
  justify-content: center;
  gap: 24px;
}

.sog-reader-sidebar {
  position: sticky;
  top: 18px;
  align-self: start;
}

.sog-reader-sidebar-card {
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.028)),
    var(--panel);
  box-shadow: var(--shadow);
}

.sog-reader-back {
  margin: 10px 0 14px;
}

.sog-reader-search-wrap {
  margin-bottom: 12px;
}

.sog-reader-search-wrap input {
  width: 100%;
}

.sog-reader-list {
  display: grid;
  gap: 4px;
}

.sog-reader-category {
  margin: 12px 0 4px;
  color: var(--brand2);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
}

.sog-reader-list a {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
}

.sog-reader-list a:hover,
.sog-reader-list a.active {
  color: var(--text);
  background: rgba(255,159,28,.10);
  border-color: rgba(255,159,28,.22);
}

.sog-reader-list a span {
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sog-reader-list a small {
  color: var(--muted);
}

.sog-document {
  min-height: 72vh;
  padding: clamp(28px, 4vw, 58px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,247,248,.96));
  color: #172026;
  box-shadow: 0 24px 70px rgba(0,0,0,.30);
}

body.light .sog-document {
  background: #fff;
}

.sog-document-header {
  padding-bottom: 22px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(15,23,42,.12);
  text-align: center;
}

.sog-document-header .eyebrow {
  color: #b25b00;
}

.sog-document-header h1 {
  margin: 10px 0;
  color: #111827;
  font-size: clamp(2rem, 4vw, 4rem);
  letter-spacing: -.04em;
}

.sog-document-header p {
  max-width: 760px;
  margin: 16px auto 0;
  color: #475569;
  line-height: 1.65;
}

.sog-document-meta {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sog-document .tag {
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.12);
  color: #172026;
}

.sog-document-body {
  max-width: 820px;
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.03rem, 1.25vw, 1.18rem);
  line-height: 1.85;
}

.sog-document-body h2,
.sog-document-body h3 {
  color: #111827;
  margin-top: 1.7em;
}

.sog-document-body p {
  margin: 0 0 1.1em;
}

.sog-document-body img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

.sog-document-checklist {
  max-width: 820px;
  margin: 34px auto 0;
  padding: 20px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 20px;
  background: rgba(15,23,42,.035);
}

.sog-document-checklist h2 {
  margin-top: 0;
  color: #111827;
}

.sog-document-checklist li {
  margin: 8px 0;
}

@media(max-width: 1100px) {
  .sog-reader-layout {
    grid-template-columns: 1fr;
  }

  .sog-reader-sidebar {
    position: static;
  }

  .sog-reader-sidebar-card {
    max-height: none;
  }

  .sog-library-toolbar {
    grid-template-columns: 1fr;
  }

  .sog-library-chips {
    justify-content: flex-start;
  }
}

@media(max-width: 760px) {
  .sog-manager-card .page-admin-row.sog-admin-row,
  .sog-list-row > a {
    grid-template-columns: 1fr;
  }

  .sog-list-meta {
    align-items: flex-start;
  }

  .sog-document {
    padding: 24px 18px;
  }
}


/* Manual SOG category tools reorder/delete fix */
.sog-category-toolbar {
  padding: 0 22px 14px;
}

.sog-category-legacy-tools .sog-category-row {
  min-height: 70px;
  display: grid;
  grid-template-columns: 44px 46px minmax(0, 1fr) 120px 88px;
  align-items: center;
  gap: 12px;
}

.sog-category-legacy-tools .page-admin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  position: static;
  transform: none;
}

.sog-category-legacy-tools .drag-handle {
  cursor: grab;
}

.sog-category-legacy-tools .sortable-row.dragging {
  opacity: .55;
}


/* SOG add-edit modal scroll fix */
.sog-modal.open,
#sogModal.open {
  overflow: hidden !important;
}

.sog-modal-panel {
  max-height: calc(100vh - 42px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.sog-modal-panel .personnel-modal-header {
  flex: 0 0 auto !important;
}

.sog-modal-panel form {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.sog-modal-panel .personnel-modal-body {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  padding-right: 18px !important;
}

.sog-modal-panel .personnel-modal-footer {
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  background:
    linear-gradient(180deg, rgba(19,29,34,.82), rgba(19,29,34,.98)),
    var(--panel) !important;
  border-top: 1px solid var(--line) !important;
}

/* Keep the large editor useful but not taller than the available modal space. */
.sog-body-content-editor-group .page-rich-editor,
.sog-body-content-editor-group .page-html-editor,
.sog-body-content-editor-group .page-rich-preview {
  min-height: min(520px, 46vh) !important;
}

/* Prevent body/page scrolling behind admin modals. */
body.modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}


/* SOG direct-link frontend/backend cleanup */
/* Backend SOG list: keep action buttons aligned on the right. */
.sog-manager-card .page-admin-row.sog-admin-row {
  grid-template-columns: 44px 46px minmax(0, 1fr) 120px 112px 92px !important;
  align-items: center !important;
}

.sog-manager-card .page-admin-actions {
  grid-column: auto !important;
  align-self: center !important;
  justify-self: end !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
}

/* No visible Manual SOG Category Tools in the new flow. */
.sog-category-legacy-tools {
  display: none !important;
}

/* Frontend SOG list search: revert to the simpler actions/search style. */
.sog-library-toolbar-classic {
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.sog-library-toolbar-classic .actions {
  justify-content: flex-start !important;
}

.sog-library-toolbar-classic input {
  max-width: 520px !important;
  width: min(520px, 100%) !important;
}

/* SOG document page: left navigation is document sections, not all SOGs. */
.sog-reader-document-layout {
  grid-template-columns: minmax(230px, 300px) minmax(0, 980px) !important;
}

.sog-document-toc {
  position: sticky;
  top: 18px;
  align-self: start;
}

.sog-document-toc-card {
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.028)),
    var(--panel);
  box-shadow: var(--shadow);
}

.sog-document-toc-card > strong {
  display: block;
  margin: 8px 0 14px;
  color: var(--text);
  line-height: 1.25;
}

#sogDocumentToc {
  display: grid;
  gap: 6px;
}

#sogDocumentToc a {
  display: block;
  padding: 9px 11px;
  border-radius: 12px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1.25;
  font-weight: 850;
}

#sogDocumentToc a:hover,
#sogDocumentToc a:focus {
  color: var(--text);
  background: rgba(255,159,28,.10);
  border-color: rgba(255,159,28,.22);
}

#sogDocumentToc a.is-subsection {
  margin-left: 12px;
  font-size: .92rem;
  opacity: .92;
}

.sog-document-body h2,
.sog-document-body h3,
.sog-document-checklist h2 {
  scroll-margin-top: 24px;
}

@media(max-width: 1100px) {
  .sog-reader-document-layout {
    grid-template-columns: 1fr !important;
  }

  .sog-document-toc {
    position: static;
  }

  .sog-document-toc-card {
    max-height: none;
  }
}

@media(max-width: 760px) {
  .sog-manager-card .page-admin-row.sog-admin-row {
    grid-template-columns: 44px 1fr !important;
  }

  .sog-manager-card .page-admin-row-icon,
  .sog-manager-card .priority-pill,
  .sog-manager-card .status-pill {
    display: none !important;
  }

  .sog-manager-card .page-admin-actions {
    justify-self: start !important;
    grid-column: 2 !important;
  }
}


/* Persistent login remember-me styling */
.remember-login-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.remember-login-toggle input {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--brand2);
}

.remember-login-toggle span {
  color: var(--text);
}


/* SOG multi-page document and heading TOC */
.sog-editor-help {
  margin: -4px 0 12px;
  line-height: 1.5;
}

.sog-editor-help strong {
  color: var(--brand2);
}

.sog-body-content-editor-group .page-editor-toolbar button[data-sog-insert-page],
.sog-body-content-editor-group .page-editor-toolbar button[data-sog-insert-section] {
  color: var(--brand2);
  background: rgba(255,159,28,.12);
  border-color: rgba(255,159,28,.24);
  font-weight: 1000;
}

.sog-reader-document-layout .sog-document {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sog-reader-document-layout .sog-document-header,
.sog-reader-document-layout .sog-doc-page,
.sog-reader-document-layout .sog-document-checklist {
  max-width: 920px;
  margin: 0 auto 28px;
  padding: clamp(30px, 4vw, 58px);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,250,.98));
  color: #172026;
  box-shadow: 0 18px 60px rgba(0,0,0,.24);
}

.sog-reader-document-layout .sog-document-header {
  min-height: 280px;
  display: grid;
  align-content: center;
}

.sog-reader-document-layout .sog-doc-page {
  min-height: min(980px, calc(100vh - 80px));
}

.sog-reader-document-layout .sog-document-body {
  max-width: none !important;
  margin: 0 !important;
  display: block;
}

.sog-reader-document-layout .sog-document-body > .sog-doc-page {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.03rem, 1.25vw, 1.18rem);
  line-height: 1.85;
}

.sog-reader-document-layout .sog-doc-page h2:first-child {
  margin-top: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15,23,42,.12);
}

.sog-reader-document-layout .sog-doc-page h2,
.sog-reader-document-layout .sog-doc-page h3,
.sog-reader-document-layout .sog-doc-page h4 {
  color: #111827;
}

.sog-reader-document-layout .sog-doc-page p {
  margin: 0 0 1.1em;
}

.sog-reader-document-layout .sog-doc-page img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

.sog-document-toc-card {
  counter-reset: sogPage;
}

#sogDocumentToc a.is-page-heading {
  color: var(--text);
  background: rgba(255,159,28,.08);
  border-color: rgba(255,159,28,.18);
}

#sogDocumentToc a.is-page-heading::before {
  counter-increment: sogPage;
  content: counter(sogPage) ". ";
  color: var(--brand2);
  font-weight: 1000;
}

#sogDocumentToc a.is-small-subsection {
  margin-left: 24px;
  font-size: .86rem;
  opacity: .82;
}

@media(max-width: 900px) {
  .sog-reader-document-layout .sog-document-header,
  .sog-reader-document-layout .sog-doc-page,
  .sog-reader-document-layout .sog-document-checklist {
    border-radius: 16px;
    margin-bottom: 18px;
    padding: 26px 20px;
  }

  .sog-reader-document-layout .sog-doc-page {
    min-height: auto;
  }
}


/* Rich SOG editor toolbar upgrade */
.rich-doc-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px !important;
  background: #101720 !important;
  border-bottom: 1px solid var(--line) !important;
}

.rich-doc-toolbar > button,
.rich-toolbar-popover > button,
.rich-toolbar-select,
.rich-doc-toolbar select {
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  color: var(--text);
  border-radius: 8px;
  font-weight: 850;
}

.rich-doc-toolbar > button,
.rich-toolbar-popover > button {
  min-width: 34px;
  padding: 0 10px;
  cursor: pointer;
}

.rich-doc-toolbar > button:hover,
.rich-toolbar-popover > button:hover,
.rich-toolbar-popover.open > button {
  background: rgba(255,159,28,.14);
  border-color: rgba(255,159,28,.28);
  color: var(--brand2);
}

.rich-toolbar-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
}

.rich-toolbar-select select,
.rich-doc-toolbar select {
  height: 32px;
  padding: 0 24px 0 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  outline: none;
  cursor: pointer;
}

.rich-toolbar-select select option,
.rich-doc-toolbar select option {
  background: #101720;
  color: var(--text);
}

.rich-toolbar-popover {
  position: relative;
  display: inline-flex;
}

.rich-toolbar-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  min-width: 210px;
  max-width: min(360px, 90vw);
  display: none;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: #101720;
  box-shadow: 0 22px 52px rgba(0,0,0,.38);
}

.rich-toolbar-popover.open .rich-toolbar-menu {
  display: grid;
  gap: 7px;
}

.rich-toolbar-menu button,
.rich-toolbar-menu label {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-weight: 850;
}

.rich-toolbar-menu button:hover {
  background: rgba(255,255,255,.06);
  color: var(--brand2);
}

.rich-toolbar-menu label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.rich-toolbar-menu input,
.rich-toolbar-menu select {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: #081016;
  color: var(--text);
}

.rich-color-dot {
  width: 15px;
  height: 15px;
  display: inline-block;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff3b22, #ffd166, #33d17a, #5cc8ff);
  box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}

.rich-color-grid {
  display: grid;
  grid-template-columns: repeat(7, 28px);
  gap: 0;
  overflow: hidden;
  border-radius: 8px;
}

.rich-color-grid button {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 0;
  background: var(--swatch);
  border: 0;
}

.rich-color-grid button:hover {
  transform: scale(1.08);
  outline: 2px solid rgba(255,255,255,.9);
  z-index: 2;
}

.rich-hex-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 10px;
}

.rich-hex-row button {
  justify-content: center;
  background: rgba(255,159,28,.14);
  color: var(--brand2);
}

.rich-emoji-menu {
  grid-template-columns: repeat(6, 34px);
  min-width: 230px;
}

.rich-emoji-menu button {
  min-width: 34px;
  justify-content: center;
  font-size: 1.15rem;
  padding: 4px;
}

.rich-table-menu {
  min-width: 220px;
}

.sog-body-content .inline-code,
.page-rich-editor .inline-code,
.page-rich-preview .inline-code {
  padding: .12em .35em;
  border-radius: .35em;
  background: rgba(15,23,42,.10);
  color: #bd2636;
  font-family: "Courier New", monospace;
  font-size: .92em;
}

.sog-body-content .inline-spoiler,
.page-rich-editor .inline-spoiler,
.page-rich-preview .inline-spoiler {
  padding: .08em .32em;
  border-radius: .35em;
  background: #111827;
  color: transparent;
  cursor: pointer;
}

.sog-body-content .inline-spoiler:hover,
.page-rich-editor .inline-spoiler:hover,
.page-rich-preview .inline-spoiler:hover {
  color: #fff;
}

.sog-doc-table,
.sog-body-content table,
.page-rich-editor table,
.page-rich-preview table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.sog-doc-table td,
.sog-doc-table th,
.sog-body-content table td,
.sog-body-content table th,
.page-rich-editor table td,
.page-rich-editor table th,
.page-rich-preview table td,
.page-rich-preview table th {
  border: 1px solid rgba(15,23,42,.22);
  padding: 10px;
  vertical-align: top;
}

.page-rich-editor blockquote,
.page-rich-preview blockquote,
.sog-body-content blockquote {
  margin: 1rem 0;
  padding: .85rem 1rem;
  border-left: 4px solid var(--brand2);
  background: rgba(255,159,28,.10);
  border-radius: 0 12px 12px 0;
}

@media(max-width: 760px) {
  .rich-toolbar-menu {
    left: auto;
    right: 0;
  }

  .rich-doc-toolbar {
    gap: 4px !important;
  }

  .rich-doc-toolbar > button,
  .rich-toolbar-popover > button {
    min-width: 32px;
    padding: 0 8px;
  }
}


/* Rich SOG editor dropdown fix */
.sog-modal-panel,
.sog-modal-panel form,
.sog-modal-panel .personnel-modal-body,
.sog-body-content-editor-group,
.sog-body-content-editor-group .page-editor-shell {
  overflow: visible !important;
}

.sog-modal-panel .personnel-modal-body {
  overflow-y: auto !important;
}

.rich-doc-toolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  overflow: visible !important;
}

.rich-toolbar-popover {
  position: relative !important;
  z-index: 90 !important;
}

.rich-toolbar-popover.open {
  z-index: 999 !important;
}

.rich-toolbar-popover.open .rich-toolbar-menu {
  display: grid !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

.rich-toolbar-menu {
  pointer-events: auto !important;
}

.rich-toolbar-menu select,
.rich-toolbar-menu input,
.rich-toolbar-menu button,
.rich-doc-toolbar select {
  pointer-events: auto !important;
}

/* Keep dropdowns readable above the editor surface. */
.rich-color-menu,
.rich-more-menu,
.rich-align-menu,
.rich-table-menu,
.rich-emoji-menu {
  max-height: min(420px, 72vh);
  overflow: auto;
}


/* Rich SOG editor selected-text apply fix */
.page-rich-editor strong,
.page-rich-preview strong,
.sog-body-content strong {
  font-weight: 900;
}

.page-rich-editor em,
.page-rich-preview em,
.sog-body-content em {
  font-style: italic;
}

.page-rich-editor u,
.page-rich-preview u,
.sog-body-content u {
  text-decoration: underline;
}

.page-rich-editor s,
.page-rich-preview s,
.sog-body-content s {
  text-decoration: line-through;
}


/* Rich SOG editor hard selection/action fix */
.page-rich-editor {
  user-select: text !important;
  -webkit-user-select: text !important;
  caret-color: var(--brand2) !important;
}

.page-rich-editor:focus {
  outline: 1px solid rgba(255,159,28,.32) !important;
}

.page-rich-editor ::selection {
  background: rgba(255,159,28,.38);
  color: inherit;
}

.rich-doc-toolbar button,
.rich-doc-toolbar select,
.rich-doc-toolbar input {
  user-select: none;
}

/* Make manually inserted formatting visible immediately inside the editor. */
.page-rich-editor strong {
  font-weight: 900 !important;
}

.page-rich-editor em {
  font-style: italic !important;
}

.page-rich-editor u {
  text-decoration: underline !important;
}

.page-rich-editor s {
  text-decoration: line-through !important;
}


/* Fresh isolated SOG iframe editor rebuild */
.sog-rich-frame {
  width: 100% !important;
  min-height: min(620px, 54vh) !important;
  height: min(720px, 58vh) !important;
  display: block;
  border: 0 !important;
  background: #081116 !important;
  border-radius: 0 0 18px 18px;
}

.sog-body-content-editor-group .page-editor-shell {
  overflow: visible !important;
}

.sog-body-content-editor-group .page-html-editor,
.sog-body-content-editor-group .page-rich-preview {
  min-height: min(620px, 54vh) !important;
  height: min(720px, 58vh) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
}

.rich-doc-toolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}


/* SOG GFS Didot default font */
.sog-rich-frame,
.sog-didot-editor,
.sog-body-content-editor-group .page-rich-editor,
.sog-body-content-editor-group .page-rich-preview,
.sog-document-body,
.sog-reader-document-layout .sog-document-body > .sog-doc-page {
  font-family: "GFS Didot", Georgia, "Times New Roman", serif !important;
}

.sog-document-header h1,
.sog-document-header p,
.sog-document-checklist {
  font-family: "GFS Didot", Georgia, "Times New Roman", serif;
}


/* SOG editor toggle button fix */
.rich-doc-toolbar button.is-active,
.rich-toolbar-popover button.is-active {
  background: rgba(255,159,28,.20) !important;
  border-color: rgba(255,159,28,.38) !important;
  color: var(--brand2) !important;
}


/* SOG indent/outdent and dark document mode fix */
.sog-body-content [style*="margin-left"],
.sog-body-content [style*="text-indent"] {
  background: transparent !important;
  background-color: transparent !important;
}

.sog-body-content li ul,
.sog-body-content li ol {
  margin-top: .35rem;
  margin-bottom: .35rem;
}

/* Dark mode SOG documents should match the CMS theme instead of white paper. */
body:not(.light) .sog-document {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.08), transparent 20rem),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.026)),
    var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

body:not(.light) .sog-reader-document-layout .sog-document-header,
body:not(.light) .sog-reader-document-layout .sog-doc-page,
body:not(.light) .sog-reader-document-layout .sog-document-checklist {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.10), transparent 24rem),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.026)),
    var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.28) !important;
}

body:not(.light) .sog-document-header h1,
body:not(.light) .sog-document-header p,
body:not(.light) .sog-document-body,
body:not(.light) .sog-document-body p,
body:not(.light) .sog-document-checklist,
body:not(.light) .sog-document-checklist li,
body:not(.light) .sog-reader-document-layout .sog-doc-page {
  color: var(--text) !important;
}

body:not(.light) .sog-document-body h1,
body:not(.light) .sog-document-body h2,
body:not(.light) .sog-document-body h3,
body:not(.light) .sog-document-body h4,
body:not(.light) .sog-document-checklist h2,
body:not(.light) .sog-reader-document-layout .sog-doc-page h1,
body:not(.light) .sog-reader-document-layout .sog-doc-page h2,
body:not(.light) .sog-reader-document-layout .sog-doc-page h3,
body:not(.light) .sog-reader-document-layout .sog-doc-page h4 {
  color: var(--brand2) !important;
}

body:not(.light) .sog-document .tag {
  color: var(--text) !important;
  background: rgba(255,255,255,.06) !important;
  border-color: var(--line) !important;
}

body:not(.light) .sog-reader-document-layout .sog-doc-page h2:first-child {
  border-bottom-color: rgba(255,159,28,.24) !important;
}

body.light .sog-reader-document-layout .sog-document-header,
body.light .sog-reader-document-layout .sog-doc-page,
body.light .sog-reader-document-layout .sog-document-checklist {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,250,.98));
  color: #172026;
}


/* SOG first-line indent/outdent fix */
.sog-body-content [style*="text-indent"],
.sog-document-body [style*="text-indent"],
.sog-doc-page [style*="text-indent"] {
  background: transparent !important;
  background-color: transparent !important;
  border-left: 0 !important;
  padding-left: 0 !important;
}

/* Backward compatibility for older SOG content saved with margin-left indent. */
.sog-body-content [style*="margin-left"],
.sog-document-body [style*="margin-left"],
.sog-doc-page [style*="margin-left"] {
  background: transparent !important;
  background-color: transparent !important;
}


/* SOG real separate page boxes */
.sog-document-body > hr.sog-page-break,
.sog-doc-page > hr.sog-page-break {
  display: none !important;
}

.sog-reader-document-layout .sog-document-body {
  display: grid !important;
  gap: 42px !important;
}

.sog-reader-document-layout .sog-doc-page {
  position: relative;
  margin-bottom: 0 !important;
  overflow: hidden;
}

.sog-reader-document-layout .sog-doc-page + .sog-doc-page {
  margin-top: 12px !important;
}

.sog-reader-document-layout .sog-doc-page::before {
  content: "Page " attr(data-page);
  position: absolute;
  top: 16px;
  right: 22px;
  color: rgba(255,159,28,.65);
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sog-reader-document-layout .sog-doc-page.starts-with-heading h2:first-child,
.sog-reader-document-layout .sog-doc-page.starts-after-break h2:first-child {
  text-align: center;
  color: var(--brand2) !important;
  border-bottom: 1px solid rgba(255,159,28,.28) !important;
  padding-bottom: 16px;
  margin-bottom: 28px;
}

body.light .sog-reader-document-layout .sog-doc-page.starts-with-heading h2:first-child,
body.light .sog-reader-document-layout .sog-doc-page.starts-after-break h2:first-child {
  color: #b25b00 !important;
  border-bottom-color: rgba(178,91,0,.22) !important;
}

@media(max-width: 900px) {
  .sog-reader-document-layout .sog-document-body {
    gap: 24px !important;
  }

  .sog-reader-document-layout .sog-doc-page::before {
    position: static;
    display: block;
    margin-bottom: 12px;
  }
}


/* SOG page icon and revision footer */
.sog-reader-document-layout .sog-doc-page::before {
  content: none !important;
  display: none !important;
}

.sog-reader-document-layout .sog-doc-page {
  padding-bottom: clamp(96px, 8vw, 132px) !important;
}

.sog-page-corner-icon {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: .88;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
  z-index: 2;
}

.sog-page-footer {
  position: absolute;
  left: clamp(30px, 4vw, 58px);
  bottom: 24px;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
}

.sog-page-footer strong {
  color: var(--text);
  font-weight: 900;
}

body.light .sog-page-footer {
  color: #64748b;
}

body.light .sog-page-footer strong {
  color: #172026;
}

body.light .sog-page-corner-icon {
  opacity: .95;
}

@media(max-width: 900px) {
  .sog-page-corner-icon {
    top: 14px;
    right: 16px;
    width: 52px;
    height: 52px;
  }

  .sog-page-footer {
    position: static;
    margin-top: 34px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }

  .sog-reader-document-layout .sog-doc-page {
    padding-bottom: 26px !important;
  }
}


/* SOG icon upload field */
.sog-icon-upload-preview {
  margin-top: 8px;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: .78rem;
  overflow: hidden;
}

.sog-icon-upload-preview img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 auto;
}

.sog-icon-upload-preview span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sog-icon-upload-preview em {
  color: var(--muted);
  font-style: normal;
}


/* SOG page icon 64x64 update */
.sog-page-corner-icon {
  width: 64px !important;
  height: 64px !important;
}

@media(max-width: 900px) {
  .sog-page-corner-icon {
    width: 52px !important;
    height: 52px !important;
  }
}


/* SOG stronger bold text */
.sog-body-content strong,
.sog-body-content b,
.sog-document-body strong,
.sog-document-body b,
.sog-doc-page strong,
.sog-doc-page b,
.page-rich-preview strong,
.page-rich-preview b {
  font-weight: 1000 !important;
  color: var(--text) !important;
  text-shadow: 0 0 .01px currentColor;
}

body:not(.light) .sog-body-content strong,
body:not(.light) .sog-body-content b,
body:not(.light) .sog-document-body strong,
body:not(.light) .sog-document-body b,
body:not(.light) .sog-doc-page strong,
body:not(.light) .sog-doc-page b {
  color: #ffffff !important;
}

body.light .sog-body-content strong,
body.light .sog-body-content b,
body.light .sog-document-body strong,
body.light .sog-document-body b,
body.light .sog-doc-page strong,
body.light .sog-doc-page b {
  color: #0f172a !important;
}


/* SOG editor toolbar full upgrade */
.rich-doc-toolbar {
  gap: 5px !important;
}

.rich-doc-toolbar > button,
.rich-toolbar-popover > button {
  min-width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
}

.toolbar-icon-strike {
  text-decoration: line-through;
  font-weight: 1000;
}

.rich-size-menu {
  min-width: 110px;
}

.rich-size-menu button {
  justify-content: center !important;
  font-size: .78rem;
}

.rich-font-family-select {
  max-width: 150px;
}

.rich-font-family-select select {
  max-width: 132px;
  font-size: .78rem;
}

.compact-text-menu {
  min-width: 180px;
}

.compact-text-menu button {
  display: grid !important;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 30px !important;
  font-size: .78rem !important;
  line-height: 1.15;
}

.compact-text-menu .menu-icon {
  width: 24px;
  min-width: 24px;
  text-align: center;
  color: var(--brand2);
  font-weight: 1000;
}

.rich-image-menu {
  min-width: 280px;
}

.rich-image-menu .rich-url-label {
  display: grid;
  gap: 7px;
}

.rich-image-menu button {
  justify-content: center;
}

.rich-emoji-categories {
  min-width: 300px;
  max-height: 460px;
  overflow: auto;
}

.rich-emoji-categories strong {
  display: block;
  margin: 6px 0 4px;
  color: var(--brand2);
  font-size: .70rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.rich-emoji-categories > div {
  display: grid;
  grid-template-columns: repeat(8, 32px);
  gap: 4px;
  margin-bottom: 8px;
}

.rich-emoji-categories > div button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  justify-content: center !important;
  padding: 0;
  font-size: 1.08rem;
}

.rich-check {
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 28px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: .78rem !important;
}

.rich-check input {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  accent-color: var(--brand2);
}

.sog-editor-dialog {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
}

.sog-editor-dialog.open {
  display: flex;
}

.sog-editor-dialog-panel {
  width: min(430px, 92vw);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.070), rgba(255,255,255,.030)),
    var(--panel);
  box-shadow: var(--shadow);
}

.sog-editor-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.sog-editor-dialog-head strong {
  color: var(--text);
  font-size: 1.05rem;
}

.sog-editor-dialog-head button {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
}

.sog-editor-dialog-panel label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 900;
}

.sog-editor-dialog-panel input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0,0,0,.24);
  color: var(--text);
}

.sog-editor-dialog-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Table options in editor/frontend */
.sog-body-content table.sog-table-autofit,
.page-rich-preview table.sog-table-autofit {
  width: auto !important;
  table-layout: auto !important;
}

.sog-body-content table.sog-table-borderless td,
.sog-body-content table.sog-table-borderless th,
.page-rich-preview table.sog-table-borderless td,
.page-rich-preview table.sog-table-borderless th {
  border-color: transparent !important;
}

.sog-doc-page table.sog-table-autofit {
  width: auto !important;
  table-layout: auto !important;
}

.sog-doc-page table.sog-table-borderless td,
.sog-doc-page table.sog-table-borderless th {
  border-color: transparent !important;
}

.sog-doc-page table.sog-table-autofit td,
.sog-doc-page table.sog-table-autofit th {
  white-space: nowrap;
}

/* Stronger bold override */
.sog-body-content strong,
.sog-body-content b,
.sog-document-body strong,
.sog-document-body b,
.sog-doc-page strong,
.sog-doc-page b {
  font-weight: 1100 !important;
  letter-spacing: .01em;
}


/* SOG section-based rich editors */
.sog-section-editor-group {
  position: relative;
}

.sog-hidden-body {
  display: none !important;
}

.sog-section-builder {
  display: grid;
  gap: 18px;
}

.sog-section-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: visible;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,59,34,.08), transparent 20rem),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.026)),
    var(--panel);
  box-shadow: 0 18px 42px rgba(0,0,0,.16);
}

.sog-section-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.035);
}

.sog-section-card-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.sog-section-number {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--brand2);
  background: rgba(255,159,28,.10);
  border: 1px solid rgba(255,159,28,.22);
  font-size: .72rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sog-section-card-title input {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  color: var(--text);
  font-weight: 1000;
}

.sog-section-card-actions {
  display: flex;
  gap: 6px;
}

.sog-section-card-actions button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.045);
  color: var(--muted);
  cursor: pointer;
  transition: .15s ease;
}

.sog-section-card-actions button:hover {
  color: var(--brand2);
  background: rgba(255,159,28,.12);
  border-color: rgba(255,159,28,.26);
}

.sog-section-toolbar {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(12,22,28,.98), rgba(12,22,28,.94)),
    var(--panel);
}

.sog-section-toolbar > button,
.sog-section-toolbar .rich-toolbar-popover > button {
  min-width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}

.sog-section-toolbar > button:hover,
.sog-section-toolbar .rich-toolbar-popover > button:hover,
.sog-section-toolbar .rich-toolbar-popover.open > button {
  color: var(--brand2);
  border-color: rgba(255,159,28,.30);
  background: rgba(255,159,28,.13);
}

.sog-section-toolbar .rich-toolbar-select {
  height: 34px;
}

.sog-section-toolbar .rich-toolbar-popover {
  position: relative;
}

.sog-section-toolbar [data-section-popover].open .rich-toolbar-menu {
  display: grid !important;
  z-index: 9999 !important;
}

.rich-menu-title {
  color: var(--brand2);
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 2px 2px 4px;
}

.rich-menu-title-spaced {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.rich-table-size-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.rich-table-size-row label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
}

.rich-table-size-row input,
.rich-hex-row input,
.rich-url-label input {
  min-height: 34px;
}

.rich-table-checks {
  display: grid;
  gap: 7px;
  padding: 6px 0;
}

.rich-primary-menu-action,
.rich-table-secondary-actions button,
.rich-image-align-grid button {
  min-height: 34px;
  border-radius: 10px;
}

.rich-primary-menu-action {
  color: #111827 !important;
  background: linear-gradient(135deg, #ff9f1c, #ffbf69) !important;
  border-color: rgba(255,159,28,.35) !important;
}

.rich-table-secondary-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.rich-image-align-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sog-section-editor-content {
  min-height: 280px;
  padding: 22px;
  outline: none;
  background: #081116;
  color: #e8f1f6;
  font-family: "GFS Didot", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.72;
  border-radius: 0 0 22px 22px;
  overflow-wrap: anywhere;
}

.sog-section-editor-content:focus {
  box-shadow: inset 0 0 0 1px rgba(255,159,28,.26);
}

.sog-section-editor-content:empty::before {
  content: "Write this section content here...";
  color: rgba(232,241,246,.34);
}

.sog-section-editor-content strong,
.sog-section-editor-content b {
  font-weight: 1100;
  color: #fff;
  letter-spacing: .01em;
}

.sog-section-editor-content h1,
.sog-section-editor-content h2,
.sog-section-editor-content h3,
.sog-section-editor-content h4 {
  color: var(--brand2);
}

.sog-section-editor-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.sog-section-editor-content table.sog-table-autofit {
  width: auto;
  table-layout: auto;
}

.sog-section-editor-content table.sog-table-borderless td,
.sog-section-editor-content table.sog-table-borderless th {
  border-color: transparent !important;
}

.sog-section-editor-content td,
.sog-section-editor-content th {
  border: 1px solid rgba(255,255,255,.16);
  padding: 10px;
  min-width: 80px;
  vertical-align: top;
}

.sog-section-editor-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0;
  border-radius: 14px;
}

.sog-section-editor-content img.sog-img-left,
.sog-reader-document-layout .sog-doc-page img.sog-img-left {
  float: left;
  max-width: min(48%, 520px);
  margin: .35rem 1.25rem .75rem 0;
}

.sog-section-editor-content img.sog-img-center,
.sog-reader-document-layout .sog-doc-page img.sog-img-center {
  float: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.sog-section-editor-content img.sog-img-right,
.sog-reader-document-layout .sog-doc-page img.sog-img-right {
  float: right;
  max-width: min(48%, 520px);
  margin: .35rem 0 .75rem 1.25rem;
}

.sog-section-editor-content ol,
.sog-reader-document-layout .sog-doc-page ol { list-style-type: decimal; }
.sog-section-editor-content ol ol,
.sog-reader-document-layout .sog-doc-page ol ol { list-style-type: lower-alpha; }
.sog-section-editor-content ol ol ol,
.sog-reader-document-layout .sog-doc-page ol ol ol { list-style-type: lower-roman; }
.sog-section-editor-content ol ol ol ol,
.sog-reader-document-layout .sog-doc-page ol ol ol ol { list-style-type: upper-alpha; }
.sog-section-editor-content ol ol ol ol ol,
.sog-reader-document-layout .sog-doc-page ol ol ol ol ol { list-style-type: upper-roman; }
.sog-section-editor-content ul,
.sog-reader-document-layout .sog-doc-page ul { list-style-type: disc; }
.sog-section-editor-content ul ul,
.sog-reader-document-layout .sog-doc-page ul ul { list-style-type: circle; }
.sog-section-editor-content ul ul ul,
.sog-reader-document-layout .sog-doc-page ul ul ul { list-style-type: square; }
.sog-section-editor-content ul ul ul ul,
.sog-reader-document-layout .sog-doc-page ul ul ul ul { list-style-type: disclosure-closed; }
.sog-section-editor-content ul ul ul ul ul,
.sog-reader-document-layout .sog-doc-page ul ul ul ul ul { list-style-type: disclosure-open; }

.sog-section-editor-content blockquote {
  margin: 1rem 0;
  padding: .85rem 1rem;
  border-left: 4px solid var(--brand2);
  background: rgba(255,159,28,.10);
  border-radius: 0 12px 12px 0;
}

.sog-section-editor-content .inline-code {
  padding: .12em .35em;
  border-radius: .35em;
  background: rgba(255,255,255,.10);
  color: #ffb86b;
  font-family: "Courier New", monospace;
  font-size: .92em;
}

.sog-section-editor-content .inline-spoiler {
  padding: .08em .32em;
  border-radius: .35em;
  background: #111827;
  color: transparent;
  cursor: pointer;
}

.sog-section-editor-content .inline-spoiler:hover {
  color: #fff;
}

.sog-section-builder-footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(12,22,28,.88), rgba(12,22,28,.98)),
    var(--panel);
}

.sog-section-html-preview {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,.18);
}

.sog-section-html-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.sog-section-html-preview-head button {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
}

.sog-section-html-preview textarea {
  width: 100%;
  min-height: 220px;
  border: 0;
  border-radius: 0;
  background: rgba(0,0,0,.24);
  color: var(--text);
  font-family: "Courier New", monospace;
  font-size: .82rem;
}

@media(max-width: 900px) {
  .sog-section-card-head {
    grid-template-columns: 1fr;
  }

  .sog-section-card-title {
    grid-template-columns: 1fr;
  }

  .sog-section-card-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .sog-section-toolbar {
    position: static;
  }

  .sog-section-builder-footer {
    position: static;
    flex-direction: column;
  }
}


/* SOG empty-page and full-size page fix */
.sog-reader-document-layout .sog-document-body {
  width: 100% !important;
  max-width: none !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}

.sog-reader-document-layout .sog-doc-page {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  min-height: min(980px, calc(100vh - 120px)) !important;
}

.sog-reader-document-layout .sog-doc-page:empty {
  display: none !important;
}

/* Keep footer clean on full-size pages */
.sog-reader-document-layout .sog-doc-page .sog-page-footer {
  max-width: calc(100% - 120px);
}

@media(max-width: 900px) {
  .sog-reader-document-layout .sog-doc-page {
    min-height: auto !important;
  }

  .sog-reader-document-layout .sog-doc-page .sog-page-footer {
    max-width: none;
  }
}


/* SOG page spacing and roster modal backdrop fix */
/* Extra breathing space at the top and bottom of every frontend SOG page. */
.sog-reader-document-layout .sog-doc-page {
  padding-top: clamp(86px, 7vw, 128px) !important;
  padding-bottom: clamp(140px, 11vw, 190px) !important;
}

.sog-reader-document-layout .sog-doc-page.starts-with-heading h2:first-child,
.sog-reader-document-layout .sog-doc-page.starts-after-break h2:first-child {
  margin-top: 0 !important;
  margin-bottom: 34px !important;
}

/* Keep content away from the top-right icon. */
.sog-reader-document-layout .sog-doc-page h2:first-child,
.sog-reader-document-layout .sog-doc-page > .sog-section-content:first-child,
.sog-reader-document-layout .sog-doc-page > p:first-child {
  padding-right: 96px;
}

/* Keep footer away from the text and make bottom spacing visible. */
.sog-page-footer {
  bottom: clamp(34px, 4.5vw, 58px) !important;
}

/* Modal backdrop must always cover the viewport, even when the page is scrolled.
   This prevents the roster/personnel modal background from turning solid black
   after opening a card lower down the page. */
.personnel-modal,
.roster-personnel-modal,
.roster-modal,
.public-roster-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  overflow: auto !important;
  background: transparent !important;
}

.personnel-modal-backdrop,
.roster-modal-backdrop,
.public-roster-modal-backdrop,
.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  background: rgba(0,0,0,.68) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.personnel-modal-panel,
.roster-modal-panel,
.public-roster-modal-panel {
  position: relative !important;
  z-index: 2 !important;
}

/* Avoid document/body black fallback showing through while a modal is open. */
body.modal-open {
  overflow: hidden !important;
}

@media(max-width: 900px) {
  .sog-reader-document-layout .sog-doc-page {
    padding-top: 72px !important;
    padding-bottom: 34px !important;
  }

  .sog-reader-document-layout .sog-doc-page h2:first-child,
  .sog-reader-document-layout .sog-doc-page > .sog-section-content:first-child,
  .sog-reader-document-layout .sog-doc-page > p:first-child {
    padding-right: 64px;
  }
}


/* FINAL SOG spacing/width + sticky TOC + roster fade backdrop */
/* Keep the SOG reader as a document-width layout, not forced full width. */
.sog-reader-document-layout {
  grid-template-columns: minmax(230px, 300px) minmax(0, 980px) !important;
  align-items: start !important;
}

.sog-reader-document-layout .sog-document {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 !important;
}

/* Page boxes should fill the document column but stay document-sized. */
.sog-reader-document-layout .sog-document-body {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 !important;
  display: grid !important;
  gap: 54px !important;
  justify-items: center !important;
}

.sog-reader-document-layout .sog-doc-page {
  width: 100% !important;
  max-width: 920px !important;
  min-height: min(980px, calc(100vh - 140px)) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;

  /* real breathing room */
  padding-top: clamp(92px, 7vw, 128px) !important;
  padding-right: clamp(34px, 4.5vw, 64px) !important;
  padding-bottom: clamp(150px, 11vw, 210px) !important;
  padding-left: clamp(34px, 4.5vw, 64px) !important;
}

/* Do not let older full-width override stretch the page. */
.sog-reader-document-layout .sog-doc-page[style] {
  max-width: 920px !important;
}

/* Keep headings below the top breathing area and away from the icon. */
.sog-reader-document-layout .sog-doc-page h2:first-child {
  margin-top: 0 !important;
  margin-bottom: 36px !important;
  padding-right: 96px !important;
}

/* Section content should not push against top/bottom edges. */
.sog-reader-document-layout .sog-doc-page > .sog-section-content {
  display: block;
  min-height: calc(100% - 160px);
}

.sog-reader-document-layout .sog-doc-page > .sog-section-content > :first-child {
  margin-top: 0 !important;
}

.sog-reader-document-layout .sog-doc-page > .sog-section-content > :last-child {
  margin-bottom: 34px !important;
}

/* Footer sits inside the bottom spacing, not glued to the edge. */
.sog-reader-document-layout .sog-page-footer {
  left: clamp(34px, 4.5vw, 64px) !important;
  right: clamp(34px, 4.5vw, 64px) !important;
  bottom: clamp(36px, 4.5vw, 64px) !important;
  max-width: none !important;
}

/* Icon stays clear of text. */
.sog-reader-document-layout .sog-page-corner-icon {
  top: clamp(22px, 3vw, 34px) !important;
  right: clamp(24px, 3.5vw, 42px) !important;
}

/* Sticky section list stays below the horizontal faded site/header bar. */
.sog-document-toc {
  position: sticky !important;
  top: 96px !important;
  align-self: start !important;
}

.sog-document-toc-card {
  max-height: calc(100vh - 120px) !important;
}

/* Roster/personnel modal: only a fade overlay, never solid black. */
.personnel-modal,
.roster-personnel-modal,
.roster-modal,
.public-roster-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  overflow: auto !important;
  background: transparent !important;
  isolation: isolate !important;
}

.personnel-modal::before,
.roster-personnel-modal::before,
.roster-modal::before,
.public-roster-modal::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(0,0,0,.46);
}

.personnel-modal-backdrop,
.roster-modal-backdrop,
.public-roster-modal-backdrop,
.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  background: rgba(0,0,0,.46) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.personnel-modal-panel,
.roster-modal-panel,
.public-roster-modal-panel {
  position: relative !important;
  z-index: 2 !important;
}

/* Prevent black fallbacks around modal while still letting the fade show the page. */
html:has(body.modal-open),
body.modal-open {
  background: var(--bg) !important;
}

body.modal-open {
  overflow: hidden !important;
}

/* Tablet/mobile still keeps real top and bottom spacing. */
@media(max-width: 1100px) {
  .sog-reader-document-layout {
    grid-template-columns: 1fr !important;
  }

  .sog-document-toc {
    position: sticky !important;
    top: 78px !important;
    z-index: 10;
  }

  .sog-document-toc-card {
    max-height: 42vh !important;
  }

  .sog-reader-document-layout .sog-document {
    max-width: 100% !important;
  }

  .sog-reader-document-layout .sog-document-body {
    max-width: 100% !important;
  }
}

@media(max-width: 760px) {
  .sog-reader-document-layout .sog-document-body {
    gap: 34px !important;
  }

  .sog-reader-document-layout .sog-doc-page {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding-top: 76px !important;
    padding-right: 22px !important;
    padding-bottom: 104px !important;
    padding-left: 22px !important;
  }

  .sog-reader-document-layout .sog-doc-page h2:first-child {
    padding-right: 70px !important;
  }

  .sog-reader-document-layout .sog-page-footer {
    position: static !important;
    margin-top: 48px !important;
    padding-top: 18px !important;
    border-top: 1px solid var(--line);
  }

  .sog-reader-document-layout .sog-page-corner-icon {
    top: 16px !important;
    right: 16px !important;
  }
}


/* SOG modal field cleanup + icon preview fix */
.sog-icon-upload-label {
  align-self: stretch;
}

.sog-icon-upload-field {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: 100%;
}

.sog-icon-upload-preview {
  width: 96px;
  min-height: 96px;
  margin-top: 0 !important;
  display: grid !important;
  place-items: center;
  gap: 6px;
  padding: 10px !important;
  border: 1px dashed var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,159,28,.12), transparent 5rem),
    rgba(255,255,255,.035);
  color: var(--muted);
  font-size: .72rem;
  text-align: center;
  overflow: hidden;
}

.sog-icon-upload-preview img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
  display: block;
}

.sog-icon-upload-preview span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sog-icon-upload-preview .sog-icon-empty {
  white-space: normal;
  line-height: 1.25;
}

.sog-icon-upload-controls {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sog-icon-upload-controls input[type="file"] {
  width: 100%;
}

.sog-icon-upload-controls small {
  color: var(--muted);
  line-height: 1.35;
}

/* Removed fields from Add/Edit SOG modal:
   - URL Slug: generated automatically from title
   - Sort Order: controlled only by drag/drop list order */
#sog_slug,
#sog_sort_order {
  display: none !important;
}

@media(max-width: 760px) {
  .sog-icon-upload-field {
    grid-template-columns: 1fr;
  }

  .sog-icon-upload-preview {
    width: 100%;
  }
}


/* SOG toolbar button icon cleanup + full emoji list */
.sog-section-toolbar [data-section-cmd="removeFormat"] {
  font-size: 1rem;
}

.sog-section-toolbar [data-section-popover-toggle][title="Font size"] {
  font-weight: 1000;
  font-family: Arial, sans-serif;
}

.sog-section-toolbar [data-section-popover-toggle][title="Font Family"] {
  font-size: 1.08rem;
  font-weight: 1000;
}

.rich-font-menu {
  min-width: 230px;
  max-height: min(420px, 70vh);
  overflow: auto;
}

.rich-font-menu button {
  display: grid !important;
  grid-template-columns: 34px 1fr;
  align-items: center;
}

.rich-font-menu .menu-icon {
  font-size: .82rem;
}

.rich-emoji-categories {
  width: min(560px, 92vw) !important;
  min-width: min(560px, 92vw) !important;
  max-height: min(560px, 76vh) !important;
  overflow: auto !important;
  grid-template-columns: 1fr !important;
}

.rich-emoji-categories strong {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 6px 0;
  background: #101720;
}

.rich-emoji-categories > div {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)) !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
}

.rich-emoji-categories > div button {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  justify-content: center !important;
  font-size: 1.08rem !important;
  line-height: 1 !important;
}


/* SOG color clear and table row/column tools */
.rich-clear-color-btn {
  display: grid !important;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding-top: 10px !important;
}

.rich-clear-color-btn .menu-icon {
  color: var(--brand2);
  font-weight: 1000;
}

.rich-table-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.rich-table-actions-grid button {
  justify-content: center !important;
  min-height: 32px !important;
  font-size: .78rem !important;
}

/* Tables should not get a colored/card background from the theme. */
.sog-section-editor-content table,
.sog-section-editor-content table td,
.sog-section-editor-content table th,
.sog-body-content table,
.sog-body-content table td,
.sog-body-content table th,
.sog-document-body table,
.sog-document-body table td,
.sog-document-body table th,
.sog-doc-page table,
.sog-doc-page table td,
.sog-doc-page table th,
.page-rich-preview table,
.page-rich-preview table td,
.page-rich-preview table th {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.sog-section-editor-content table.sog-table-borderless,
.sog-body-content table.sog-table-borderless,
.sog-document-body table.sog-table-borderless,
.sog-doc-page table.sog-table-borderless {
  background: transparent !important;
  background-color: transparent !important;
}


/* SOG table normal text color fix */
.sog-section-editor-content table,
.sog-section-editor-content table td,
.sog-section-editor-content table th,
.sog-body-content table,
.sog-body-content table td,
.sog-body-content table th,
.sog-document-body table,
.sog-document-body table td,
.sog-document-body table th,
.sog-doc-page table,
.sog-doc-page table td,
.sog-doc-page table th,
.page-rich-preview table,
.page-rich-preview table td,
.page-rich-preview table th {
  color: inherit !important;
}

.sog-section-editor-content table td,
.sog-section-editor-content table th {
  color: #e8f1f6 !important;
}

body:not(.light) .sog-body-content table,
body:not(.light) .sog-body-content table td,
body:not(.light) .sog-body-content table th,
body:not(.light) .sog-document-body table,
body:not(.light) .sog-document-body table td,
body:not(.light) .sog-document-body table th,
body:not(.light) .sog-doc-page table,
body:not(.light) .sog-doc-page table td,
body:not(.light) .sog-doc-page table th {
  color: var(--text) !important;
}

body.light .sog-body-content table,
body.light .sog-body-content table td,
body.light .sog-body-content table th,
body.light .sog-document-body table,
body.light .sog-document-body table td,
body.light .sog-document-body table th,
body.light .sog-doc-page table,
body.light .sog-doc-page table td,
body.light .sog-doc-page table th {
  color: #172026 !important;
}


/* SOG centered section title + independent icon alignment */
/* The title stays centered across the page box.
   The icon is absolutely positioned and does not reserve/steal title space. */
.sog-reader-document-layout .sog-doc-page.starts-with-heading h2:first-child,
.sog-reader-document-layout .sog-doc-page.starts-after-break h2:first-child {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Override older "keep content away from icon" rule for the title only. */
.sog-reader-document-layout .sog-doc-page h2:first-child {
  padding-right: 0 !important;
}

/* Icon stays top-right, visually level with the title line, without affecting title centering. */
.sog-reader-document-layout .sog-page-corner-icon {
  position: absolute !important;
  top: clamp(78px, 7vw, 112px) !important;
  right: clamp(28px, 3.5vw, 44px) !important;
  transform: translateY(-18%) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

.sog-reader-document-layout .sog-doc-page.starts-with-heading h2:first-child,
.sog-reader-document-layout .sog-doc-page.starts-after-break h2:first-child {
  padding-bottom: 18px !important;
  margin-bottom: 36px !important;
}

@media(max-width: 760px) {
  .sog-reader-document-layout .sog-page-corner-icon {
    top: 24px !important;
    right: 18px !important;
    transform: none !important;
  }

  .sog-reader-document-layout .sog-doc-page.starts-with-heading h2:first-child,
  .sog-reader-document-layout .sog-doc-page.starts-after-break h2:first-child,
  .sog-reader-document-layout .sog-doc-page h2:first-child {
    padding-right: 70px !important;
    text-align: center !important;
  }
}


/* SOG reduce page top empty space */
/* Reduce the large empty top area while keeping the title centered and the icon aligned. */
.sog-reader-document-layout .sog-doc-page {
  padding-top: clamp(52px, 4.5vw, 72px) !important;
}

/* Keep the title close to the top but still clean/readable. */
.sog-reader-document-layout .sog-doc-page.starts-with-heading h2:first-child,
.sog-reader-document-layout .sog-doc-page.starts-after-break h2:first-child,
.sog-reader-document-layout .sog-doc-page h2:first-child {
  margin-top: 0 !important;
  margin-bottom: 30px !important;
  padding-top: 0 !important;
  padding-bottom: 16px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}

/* Align the top-right icon with the title height, without pushing the title off-center. */
.sog-reader-document-layout .sog-page-corner-icon {
  top: clamp(42px, 4vw, 60px) !important;
  right: clamp(26px, 3vw, 40px) !important;
  transform: translateY(-10%) !important;
}

/* The content starts with a smaller but still visible gap after the title line. */
.sog-reader-document-layout .sog-doc-page > .sog-section-content > :first-child {
  margin-top: 0 !important;
}

/* Mobile: keep it compact too, without icon overlap. */
@media(max-width: 760px) {
  .sog-reader-document-layout .sog-doc-page {
    padding-top: 58px !important;
  }

  .sog-reader-document-layout .sog-page-corner-icon {
    top: 16px !important;
    right: 16px !important;
    transform: none !important;
  }

  .sog-reader-document-layout .sog-doc-page.starts-with-heading h2:first-child,
  .sog-reader-document-layout .sog-doc-page.starts-after-break h2:first-child,
  .sog-reader-document-layout .sog-doc-page h2:first-child {
    padding-right: 70px !important;
  }
}


/* SOG reduce page top empty space - tighter */
/* Tighter top spacing, but still enough room for title and icon. */
.sog-reader-document-layout .sog-doc-page {
  padding-top: clamp(34px, 3.4vw, 50px) !important;
}

.sog-reader-document-layout .sog-doc-page.starts-with-heading h2:first-child,
.sog-reader-document-layout .sog-doc-page.starts-after-break h2:first-child,
.sog-reader-document-layout .sog-doc-page h2:first-child {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  padding-top: 0 !important;
  padding-bottom: 14px !important;
}

/* Move icon up with the tighter title/header area. */
.sog-reader-document-layout .sog-page-corner-icon {
  top: clamp(28px, 3.1vw, 42px) !important;
  right: clamp(24px, 3vw, 40px) !important;
  transform: none !important;
}

@media(max-width: 760px) {
  .sog-reader-document-layout .sog-doc-page {
    padding-top: 48px !important;
  }

  .sog-reader-document-layout .sog-page-corner-icon {
    top: 14px !important;
    right: 14px !important;
  }
}


/* SOG icon real top-right inside page box */
/* Icon now sits in the actual top-right corner inside the SOG page box.
   It no longer follows the title height. */
.sog-reader-document-layout .sog-page-corner-icon {
  position: absolute !important;
  top: clamp(18px, 2vw, 28px) !important;
  right: clamp(18px, 2.4vw, 32px) !important;
  transform: none !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* Keep the title centered and independent from the icon. */
.sog-reader-document-layout .sog-doc-page.starts-with-heading h2:first-child,
.sog-reader-document-layout .sog-doc-page.starts-after-break h2:first-child,
.sog-reader-document-layout .sog-doc-page h2:first-child {
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}

@media(max-width: 760px) {
  .sog-reader-document-layout .sog-page-corner-icon {
    top: 12px !important;
    right: 12px !important;
  }

  .sog-reader-document-layout .sog-doc-page.starts-with-heading h2:first-child,
  .sog-reader-document-layout .sog-doc-page.starts-after-break h2:first-child,
  .sog-reader-document-layout .sog-doc-page h2:first-child {
    padding-right: 66px !important;
  }
}

/* SOG TOC active-state + compact one-line section preview */
#sogDocumentToc {
  gap: 4px !important;
}

#sogDocumentToc a,
#sogDocumentToc a.is-page-heading,
#sogDocumentToc a.is-subsection,
#sogDocumentToc a.is-small-subsection {
  display: block !important;
  min-width: 0 !important;
  padding: 7px 9px !important;
  border-radius: 11px !important;
  color: var(--muted) !important;
  background: transparent !important;
  border-color: transparent !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  line-height: 1.14 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#sogDocumentToc a.is-page-heading::before,
#sogDocumentToc a::before {
  content: none !important;
  display: none !important;
}

#sogDocumentToc a.is-subsection {
  margin-left: 10px !important;
  font-size: .76rem !important;
  opacity: .9 !important;
}

#sogDocumentToc a.is-small-subsection {
  margin-left: 18px !important;
  font-size: .74rem !important;
  opacity: .84 !important;
}

#sogDocumentToc a:hover,
#sogDocumentToc a:focus {
  color: var(--text) !important;
  background: rgba(255,159,28,.08) !important;
  border-color: rgba(255,159,28,.18) !important;
}

#sogDocumentToc a.active,
#sogDocumentToc a.active:hover,
#sogDocumentToc a.active:focus {
  color: var(--text) !important;
  background: rgba(255,159,28,.14) !important;
  border-color: rgba(255,159,28,.30) !important;
  box-shadow: inset 3px 0 0 var(--brand2) !important;
}

.sog-document-body h2,
.sog-document-body h3,
.sog-document-body h4,
.sog-document-checklist h2 {
  scroll-margin-top: 112px !important;
}

/* Public submenu emojis from backend menu links */
.sub .sub-menu-icon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  color: var(--brand2) !important;
  font-size: .92rem !important;
  line-height: 1 !important;
  text-align: center !important;
}

.sub .sub-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sog-manager-card .page-admin-row-icon {
  font-size: 1.12rem !important;
}

/* Backend weekly activity live search */
.activity-search-panel {
  margin: 0 0 14px !important;
  padding: 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.035) !important;
  display: grid !important;
  gap: 8px !important;
}

.activity-search-label {
  color: var(--faint) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.activity-search-input-wrap {
  display: grid !important;
  grid-template-columns: auto minmax(180px, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
}

.activity-search-input-wrap > span {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--accent) !important;
  background: rgba(255,154,26,.12) !important;
  border: 1px solid rgba(255,154,26,.24) !important;
  font-weight: 900 !important;
}

.activity-member-search {
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 14px !important;
}

.activity-search-count {
  color: var(--muted) !important;
  font-size: 12px !important;
}

.activity-admin-fd-roster-board .activity-search-hidden,
.activity-admin-fd-roster-board .activity-section-search-hidden {
  display: none !important;
}

.activity-admin-fd-roster-board .activity-search-empty[hidden] {
  display: none !important;
}

.activity-admin-fd-roster-board .activity-search-empty {
  margin-top: 10px !important;
}

@media (max-width: 720px) {
  .activity-search-input-wrap {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .activity-search-clear {
    grid-column: 2 !important;
    justify-self: start !important;
  }
}


/* Backend weekly activity search - match Personnel Management search bar */
.activity-personnel-toolbar {
  grid-template-columns: minmax(220px, 1fr) !important;
  margin: 0 0 18px !important;
}

.activity-personnel-toolbar .activity-member-search {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
}

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

/* SOG header editor: background image + creators */
.personnel-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sog-header-editor-group .sog-icon-upload-field,
.sog-creators-editor-group .sog-icon-upload-field {
  width: 100%;
}

.sog-header-bg-preview img {
  width: 72px !important;
  height: 42px !important;
  object-fit: cover !important;
  border-radius: 10px;
}

.sog-clear-upload-toggle {
  display: inline-flex !important;
  grid-template-columns: auto 1fr !important;
  align-items: center;
  gap: 8px !important;
  margin-top: 6px;
  color: var(--muted) !important;
  font-size: .78rem !important;
  font-weight: 850 !important;
}

.sog-clear-upload-toggle input {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  accent-color: var(--brand2);
}

.sog-creators-builder {
  display: grid;
  gap: 10px;
}

.sog-creator-row {
  display: grid;
  grid-template-columns: minmax(130px, .9fr) minmax(160px, 1.2fr) minmax(95px, .65fr) minmax(130px, .9fr) minmax(140px, .9fr) 38px;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}

.sog-creator-row label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
}

.sog-creator-row input,
.sog-creator-row select {
  min-height: 38px;
  border-radius: 12px;
}

.sog-creator-row [data-remove-sog-creator] {
  min-width: 38px;
  height: 38px;
  padding: 0 !important;
}

.sog-reader-document-layout .sog-document-header {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.sog-reader-document-layout .sog-document-header.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--sog-header-bg);
  background-size: cover;
  background-position: center;
  opacity: .24;
  filter: grayscale(.08) saturate(.9);
  transform: scale(1.02);
}

.sog-reader-document-layout .sog-document-header.has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.20), transparent 28rem),
    linear-gradient(180deg, rgba(8,17,22,.40), rgba(8,17,22,.70));
  pointer-events: none;
}

body.light .sog-reader-document-layout .sog-document-header.has-bg::after {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.45), transparent 28rem),
    linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.88));
}

.sog-document-creators {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 14px;
  margin: 20px auto 0;
  max-width: 920px;
}

.sog-document-creator-card {
  flex: 1 1 145px;
  max-width: 190px;
  min-width: 140px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 12px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(8,17,22,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--text);
  text-align: center;
}

body.light .sog-document-creator-card {
  background: rgba(255,255,255,.64);
  border-color: rgba(15,23,42,.10);
  color: #172026;
}

.sog-creator-rank-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  margin: 0 auto 5px;
}

.sog-document-creator-card .sog-creator-rank {
  color: inherit !important;
  font-size: .86rem;
  line-height: 1.15;
  font-weight: 900;
}

.sog-document-creator-card.ex .sog-creator-rank {
  color: var(--brand2) !important;
}

.sog-creator-badge {
  color: var(--brand2);
  font-size: .78rem;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .05em;
  margin-top: 8px;
}

.sog-creator-name {
  color: inherit;
  font-size: .82rem;
  line-height: 1.2;
  margin-top: 2px;
}

.sog-document-creator-card .sog-creator-vehicle {
  color: var(--brand2);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 8px;
}

.sog-document-header.has-bg p {
  max-width: 720px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(8,17,22,.22);
}

body.light .sog-document-header.has-bg p {
  background: rgba(255,255,255,.48);
}

@media(max-width: 980px) {
  .sog-creator-row {
    grid-template-columns: 1fr 1fr;
  }

  .sog-creator-row [data-remove-sog-creator] {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media(max-width: 760px) {
  .personnel-grid-2,
  .sog-creator-row {
    grid-template-columns: 1fr !important;
  }

  .sog-document-creators {
    gap: 8px;
  }

  .sog-document-creator-card {
    min-width: min(100%, 170px);
    flex-basis: calc(50% - 8px);
  }
}

/* SOG backend list without priority column */
.sog-manager-card .page-admin-row.sog-admin-row {
  grid-template-columns: 44px 46px minmax(0, 1fr) 112px 92px !important;
}

/* SOG creator backend modal + sortable creator rows */
.sog-creator-modal,
.sog-creator-delete-modal {
  z-index: 220 !important;
}

.sog-creator-modal-panel {
  width: min(760px, 94vw) !important;
}

.sog-creators-editor-group .sog-section-builder-footer {
  justify-content: flex-end;
}

.sog-creators-builder {
  display: grid !important;
  gap: 10px !important;
}

.sog-creators-empty {
  min-height: 54px !important;
  padding: 16px !important;
  border-radius: 16px !important;
}

.sog-creators-builder .sog-creator-row {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 118px 94px !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.035) !important;
  cursor: grab;
}

.sog-creators-builder .sog-creator-row.dragging {
  opacity: .55;
  cursor: grabbing;
}

.sog-creator-row-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.sog-creator-row-main strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .92rem;
  letter-spacing: -.01em;
}

.sog-creator-row-main small {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--muted);
  font-weight: 850;
}

.sog-creator-row-main small b {
  color: rgba(255,255,255,.28);
}

.sog-creator-row .page-admin-actions {
  justify-content: flex-end;
}

.sog-creator-row .status-pill {
  justify-self: stretch;
  text-align: center;
  padding-inline: 8px;
}

@media(max-width: 760px) {
  .sog-creators-builder .sog-creator-row {
    grid-template-columns: 38px minmax(0, 1fr) 86px !important;
  }

  .sog-creator-row .status-pill {
    grid-column: 2 / -1;
  }

  .sog-creator-row .page-admin-actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }
}

/* SOG frontend creator/header visual refinement */
.sog-reader-document-layout .sog-document-header.has-bg::before {
  opacity: .52 !important;
  filter: grayscale(.02) saturate(1.08) contrast(1.04) !important;
}

.sog-reader-document-layout .sog-document-header.has-bg::after {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.12), transparent 28rem),
    linear-gradient(180deg, rgba(8,17,22,.18), rgba(8,17,22,.48)) !important;
}

body.light .sog-reader-document-layout .sog-document-header.has-bg::after {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.26), transparent 28rem),
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.62)) !important;
}

.sog-document-creators {
  flex-wrap: nowrap !important;
  gap: 10px !important;
  max-width: min(100%, 900px) !important;
  width: min(100%, 900px) !important;
  overflow: visible !important;
}

.sog-document-creator-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 10px 8px !important;
  border-radius: 16px !important;
  gap: 3px !important;
}

.sog-creator-rank-icon {
  width: 30px !important;
  height: 30px !important;
  margin-bottom: 4px !important;
}

.sog-document-creator-card .sog-creator-rank,
.sog-document-creator-card.ex .sog-creator-rank {
  color: #fff !important;
  font-size: clamp(.62rem, .82vw, .80rem) !important;
  line-height: 1.12 !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sog-creator-badge {
  font-size: clamp(.58rem, .76vw, .72rem) !important;
  margin-top: 6px !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sog-creator-name {
  font-size: clamp(.70rem, .92vw, .88rem) !important;
  font-weight: 800 !important;
  margin-top: 3px !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sog-document-creator-card .sog-creator-vehicle {
  font-size: clamp(.52rem, .65vw, .64rem) !important;
  margin-top: 6px !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media(max-width: 760px) {
  .sog-document-creators {
    flex-wrap: wrap !important;
  }

  .sog-document-creator-card {
    flex: 1 1 calc(50% - 8px) !important;
  }
}

/* SOG global creators backend list */
.sog-creator-rank-list-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.sog-creator-picker-actions {
  justify-content: flex-start;
  gap: 10px;
}

.sog-creator-picker-actions .btn2 {
  text-decoration: none;
}

/* SOG frontend library card layout */
.sog-card-library-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

.sog-list-card {
  position: relative !important;
  min-height: 260px !important;
  border: 1px solid var(--line) !important;
  border-left: 1px solid var(--line) !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,159,28,.13), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.025)),
    var(--panel) !important;
  box-shadow: 0 20px 46px rgba(0,0,0,.18) !important;
}

.sog-list-card.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--sog-card-bg);
  background-size: cover;
  background-position: center;
  opacity: .48;
  filter: grayscale(.04) saturate(1.06) contrast(1.04);
  transform: scale(1.04);
  transition: opacity .18s ease, transform .18s ease;
}

.sog-list-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.12), transparent 15rem),
    linear-gradient(180deg, rgba(8,17,22,.34), rgba(8,17,22,.80));
}

body.light .sog-list-card::after {
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.34), transparent 15rem),
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.82));
}

.sog-list-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255,159,28,.34) !important;
  box-shadow: 0 26px 56px rgba(0,0,0,.24) !important;
}

.sog-list-card.has-bg:hover::before {
  opacity: .62;
  transform: scale(1.07);
}

.sog-list-card > a {
  position: relative !important;
  z-index: 1 !important;
  min-height: 260px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 32px 22px 24px !important;
  text-align: center !important;
}

.sog-list-card .sog-list-icon {
  width: 72px !important;
  height: 72px !important;
  margin: 0 auto 4px !important;
  border-radius: 22px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(8,17,22,.44) !important;
  border: 1px solid rgba(255,159,28,.28) !important;
  color: var(--brand2) !important;
  font-size: 2rem !important;
  line-height: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 28px rgba(0,0,0,.24) !important;
  overflow: hidden !important;
}

body.light .sog-list-card .sog-list-icon {
  background: rgba(255,255,255,.66) !important;
  border-color: rgba(255,159,28,.34) !important;
}

.sog-list-card .sog-list-icon img {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
  display: block !important;
}

.sog-list-card .sog-list-icon span {
  display: block;
  transform: translateY(-1px);
}

.sog-list-card .sog-list-main {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 6px !important;
}

.sog-list-card .sog-list-main .eyebrow {
  margin: 0 !important;
  color: var(--brand2) !important;
  text-align: center !important;
}

.sog-list-card .sog-list-main h2 {
  margin: 0 !important;
  max-width: 100% !important;
  color: var(--text) !important;
  font-size: clamp(1.18rem, 1.4vw, 1.55rem) !important;
  line-height: 1.16 !important;
  text-align: center !important;
  text-wrap: balance;
}

.sog-list-card .sog-list-main p {
  max-width: 34ch !important;
  margin: 2px auto 0 !important;
  color: rgba(232,241,246,.78) !important;
  font-size: .88rem !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

body.light .sog-list-card .sog-list-main p {
  color: rgba(23,32,38,.72) !important;
}

.sog-list-card .sog-list-meta {
  align-items: center !important;
  justify-content: center !important;
  margin-top: 6px !important;
}

.sog-list-card .sog-list-meta small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  color: var(--brand2) !important;
  background: rgba(255,159,28,.10) !important;
  border: 1px solid rgba(255,159,28,.24) !important;
  font-size: .74rem !important;
  letter-spacing: .03em !important;
}

@media(max-width: 760px) {
  .sog-card-library-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .sog-list-card,
  .sog-list-card > a {
    min-height: 230px !important;
  }
}


/* Frontend Firehouse Home Dashboard */
.firehouse-home {
  display: grid;
  gap: 28px;
}

.home-hero {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  align-items: center;
  gap: 24px;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid var(--line);
  border-radius: 34px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,59,34,.22), transparent 30rem),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    var(--panel);
  box-shadow: var(--shadow);
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(7,16,20,.92), rgba(7,16,20,.72), rgba(7,16,20,.92)),
    var(--home-hero-bg, none);
  background-size: cover;
  background-position: center;
  opacity: .92;
  z-index: 0;
}

.home-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5px;
  background: linear-gradient(90deg, var(--brand), var(--brand2), transparent);
  z-index: 1;
}

.home-hero-content,
.home-hero-logo {
  position: relative;
  z-index: 2;
}

.home-hero h1 {
  margin: 10px 0 8px;
  max-width: 900px;
  font-size: clamp(3rem, 7vw, 6.2rem);
  line-height: .88;
  letter-spacing: -.075em;
}

.home-hero p {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  font-weight: 1000;
}

.home-hero-text {
  max-width: 680px;
  margin-top: 14px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.65;
}

.home-hero-actions {
  margin-top: 24px;
}

.home-hero-logo {
  justify-self: center;
  width: min(320px, 70vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.09), transparent 68%);
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.34));
}

.home-hero-logo img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}

.home-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.home-quick-card,
.home-recent-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    var(--panel);
  color: var(--text);
  box-shadow: 0 18px 52px rgba(0,0,0,.18);
}

.home-quick-card::before,
.home-recent-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(15,29,35,.82), rgba(15,29,35,.95)),
    var(--home-card-bg, none);
  background-size: cover;
  background-position: center;
  opacity: .9;
}

.home-quick-card {
  min-height: 220px;
  display: grid;
  align-content: space-between;
  gap: 18px;
  padding: 22px;
}

.home-quick-card > *,
.home-recent-card > * {
  position: relative;
  z-index: 1;
}

.home-quick-card:hover,
.home-recent-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,159,28,.34);
}

.home-quick-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,159,28,.28);
  border-radius: 18px;
  background: rgba(255,159,28,.12);
  color: var(--brand2);
  font-size: 1.7rem;
  font-weight: 1000;
}

.home-quick-copy {
  display: grid;
  gap: 7px;
}

.home-quick-copy strong {
  font-size: 1.35rem;
  letter-spacing: -.035em;
}

.home-quick-copy small,
.home-recent-card small {
  color: var(--muted);
  line-height: 1.45;
  font-weight: 800;
}

.home-open-link {
  color: var(--brand2);
  font-weight: 1000;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.home-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 8px;
}

.home-section-head h2 {
  margin: 6px 0 0;
  letter-spacing: -.05em;
}

.home-recent-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.home-recent-card {
  min-height: 210px;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 20px;
}

.home-recent-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 14px;
}

.home-recent-icon-fallback {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,159,28,.28);
  background: rgba(255,159,28,.10);
  color: var(--brand2);
  font-size: 1.3rem;
  font-weight: 1000;
}

.home-recent-card strong {
  display: block;
  font-size: 1.12rem;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.home-notice-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: start;
  padding: 24px;
  border: 1px solid rgba(255,159,28,.20);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 0, rgba(255,159,28,.16), transparent 30rem),
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.024)),
    var(--panel);
  box-shadow: var(--shadow);
}

.home-notice-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(255,159,28,.26);
  background: rgba(255,159,28,.10);
  color: var(--brand2);
  font-size: 1.5rem;
}

.home-notice-card h2 {
  margin: 6px 0 8px;
}

.home-notice-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .home-quick-grid,
  .home-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero { grid-template-columns: 1fr; }
  .home-hero-logo { opacity: .42; position: absolute; right: 18px; bottom: 18px; width: min(260px, 55vw); }
}

@media (max-width: 680px) {
  .home-quick-grid,
  .home-recent-grid { grid-template-columns: 1fr; }
  .home-hero { min-height: 0; border-radius: 26px; }
  .home-hero h1 { font-size: clamp(2.65rem, 18vw, 4rem); }
  .home-hero-logo { display: none; }
  .home-notice-card { grid-template-columns: 1fr; }
}

/* Friendly admin settings page */
.settings-admin-form {
  display: grid;
  gap: 22px;
}

.settings-intro-card,
.admin-page-intro.settings-intro-card {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 0, rgba(255,59,34,.12), transparent 28rem),
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    var(--panel);
  box-shadow: var(--shadow);
}

.settings-intro-card h1 {
  margin: 8px 0 6px;
  font-size: clamp(2.2rem, 4vw, 4rem);
  letter-spacing: -.06em;
}

.settings-intro-card p {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
}

.settings-grid-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 22px;
  align-items: start;
}

.settings-main-column,
.settings-side-column {
  display: grid;
  gap: 18px;
}

.settings-side-column {
  position: sticky;
  top: 96px;
}

.settings-card {
  display: grid;
  gap: 18px;
}

.settings-card-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.settings-card h2 {
  margin: 7px 0 6px;
  letter-spacing: -.04em;
}

.settings-card p,
.settings-card .muted {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 800;
}

.settings-form-grid textarea {
  min-height: 104px;
}

.settings-image-list {
  display: grid;
  gap: 16px;
}

.settings-image-item {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.035);
}

.settings-image-upload-row {
  grid-template-columns: 116px 1fr;
  gap: 14px;
}

.settings-preview-box {
  min-height: 116px;
  border-radius: 18px;
}

.settings-preview-box .settings-preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

.settings-current-path {
  display: block;
  max-width: 100%;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(0,0,0,.18);
  color: var(--faint);
  font-size: .72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-other-list {
  display: grid;
  gap: 9px;
}

.settings-other-list div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.settings-other-list small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.settings-sticky-actions {
  position: sticky;
  bottom: 14px;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(15,29,35,.78);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}

@media (max-width: 1120px) {
  .settings-grid-layout { grid-template-columns: 1fr; }
  .settings-side-column { position: static; }
}

@media (max-width: 720px) {
  .settings-intro-card,
  .admin-page-intro.settings-intro-card { align-items: stretch; flex-direction: column; }
  .settings-image-upload-row { grid-template-columns: 1fr; }
}


/* Whole system faded background image from Settings
   Stronger visibility fix: applies to both frontend and backend layouts. */
body.system-bg-enabled{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 10% -10%,rgba(255,59,34,.18),transparent 32rem),
    linear-gradient(135deg,var(--bg),#030608 80%);
  background-attachment:fixed;
}
body.system-bg-enabled::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:var(--system-bg-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.34;
  filter:saturate(.95) contrast(.96);
  transform:translateZ(0);
}
body.system-bg-enabled::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 0%,rgba(255,59,34,.12),transparent 32rem),
    radial-gradient(circle at 88% 8%,rgba(255,159,28,.06),transparent 30rem),
    linear-gradient(135deg,rgba(7,16,20,.58),rgba(3,6,8,.82));
}
body.light.system-bg-enabled::after{
  background:
    radial-gradient(circle at 8% 0%,rgba(255,59,34,.08),transparent 32rem),
    linear-gradient(135deg,rgba(245,247,251,.58),rgba(245,247,251,.82));
}
body.system-bg-enabled > :not(script):not(style),
body.system-bg-enabled .drawer,
body.system-bg-enabled .bottom{
  position:relative;
  z-index:1;
}

/* Let the uploaded system background show through the app frame. */
body.system-bg-enabled .shell,
body.system-bg-enabled .admin-firehouse-shell,
body.system-bg-enabled .app-shell,
body.system-bg-enabled .main-shell,
body.system-bg-enabled .admin-main,
body.system-bg-enabled .public-main-shell,
body.system-bg-enabled .content,
body.system-bg-enabled .admin-content{
  background:transparent !important;
}

/* Keep readability, but reduce the solid dark panels that were hiding the system background. */
body.system-bg-enabled .sidebar,
body.system-bg-enabled .admin-sidebar,
body.system-bg-enabled .admin-nav{
  background:rgba(7,16,20,.58) !important;
  backdrop-filter:blur(18px);
}
body.system-bg-enabled .top,
body.system-bg-enabled .admin-head,
body.system-bg-enabled .topbar{
  background:rgba(7,16,20,.56) !important;
  backdrop-filter:blur(18px);
}
body.light.system-bg-enabled .sidebar,
body.light.system-bg-enabled .admin-sidebar,
body.light.system-bg-enabled .admin-nav,
body.light.system-bg-enabled .top,
body.light.system-bg-enabled .admin-head,
body.light.system-bg-enabled .topbar{
  background:rgba(245,247,251,.68) !important;
}

body.system-bg-enabled .hero,
body.system-bg-enabled .card,
body.system-bg-enabled .tablebox,
body.system-bg-enabled .admin-page-intro,
body.system-bg-enabled .settings-panel,
body.system-bg-enabled .settings-side-card,
body.system-bg-enabled .roster-shell{
  background:linear-gradient(145deg,rgba(13,23,29,.82),rgba(13,23,29,.66)) !important;
  backdrop-filter:blur(12px);
}
body.light.system-bg-enabled .hero,
body.light.system-bg-enabled .card,
body.light.system-bg-enabled .tablebox,
body.light.system-bg-enabled .admin-page-intro,
body.light.system-bg-enabled .settings-panel,
body.light.system-bg-enabled .settings-side-card,
body.light.system-bg-enabled .roster-shell{
  background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,255,255,.66)) !important;
}


/* Public friendly frontend dashboard update */
.public-home .home-hero {
  min-height: 500px;
}

.public-home .home-hero::before {
  background-image:
    linear-gradient(90deg, rgba(7,16,20,.88), rgba(7,16,20,.58), rgba(7,16,20,.90)),
    var(--home-hero-bg, none);
  opacity: .94;
}

.public-home .home-hero h1 {
  max-width: 980px;
}

.public-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 18px;
  align-items: stretch;
}

.public-about-main,
.public-mission-card,
.public-service-card {
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 0, rgba(255,59,34,.11), transparent 28rem),
    linear-gradient(145deg, rgba(255,255,255,.068), rgba(255,255,255,.025)),
    var(--panel);
  box-shadow: 0 18px 52px rgba(0,0,0,.16);
}

.public-about-main {
  padding: clamp(24px, 3vw, 34px);
}

.public-about-main h2,
.public-service-section h2 {
  margin: 7px 0 12px;
  font-size: clamp(2rem, 3.8vw, 3.6rem);
  line-height: .95;
  letter-spacing: -.06em;
}

.public-about-main p {
  max-width: 920px;
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-weight: 820;
}

.public-mission-card {
  padding: 24px;
  display: grid;
  align-content: center;
  gap: 10px;
  border-color: rgba(255,159,28,.23);
  background:
    radial-gradient(circle at 100% 0, rgba(255,159,28,.16), transparent 24rem),
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    var(--panel);
}

.public-mission-label {
  color: var(--brand2);
  font-size: .76rem;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.public-mission-card strong {
  display: block;
  color: var(--text);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.35;
  letter-spacing: -.025em;
}

.public-service-section {
  display: grid;
  gap: 16px;
}

.public-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.public-service-card {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  padding: 22px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.public-service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0 0, rgba(255,159,28,.11), transparent 18rem);
  opacity: .9;
  pointer-events: none;
}

.public-service-card > * {
  position: relative;
  z-index: 1;
}

.public-service-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,159,28,.28);
  border-radius: 18px;
  background: rgba(255,159,28,.11);
  color: var(--brand2);
  font-size: 1.6rem;
  font-weight: 1000;
}

.public-service-card h3 {
  margin: 6px 0 0;
  font-size: 1.28rem;
  letter-spacing: -.035em;
}

.public-service-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 800;
}

.public-home-quick-grid {
  margin-top: 2px;
}

.public-notice-card .home-notice-icon {
  font-family: ui-serif, Georgia, serif;
  font-style: italic;
  font-weight: 1000;
}

@media (max-width: 1180px) {
  .public-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .public-service-grid { grid-template-columns: 1fr; }
  .public-about-main,
  .public-mission-card,
  .public-service-card { border-radius: 22px; }
  .public-home .home-hero { min-height: 0; }
}

/* Frontend/system background visibility fix
   Uses absolute CMS-aware upload URLs and makes the public layout show the uploaded image. */
html body.public-layout-body.system-bg-enabled,
html body.admin-layout-body.system-bg-enabled{
  background-image:
    radial-gradient(circle at 10% -10%,rgba(255,59,34,.16),transparent 32rem),
    linear-gradient(135deg,rgba(3,6,8,.62),rgba(3,6,8,.86)),
    var(--system-bg-image) !important;
  background-size:auto, auto, cover !important;
  background-position:center, center, center !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}

html body.public-layout-body.system-bg-enabled::before,
html body.admin-layout-body.system-bg-enabled::before{
  opacity:.38 !important;
}

html body.public-layout-body.system-bg-enabled::after{
  background:
    radial-gradient(circle at 8% 0%,rgba(255,59,34,.10),transparent 32rem),
    linear-gradient(135deg,rgba(7,16,20,.52),rgba(3,6,8,.76)) !important;
}

html body.public-layout-body.system-bg-enabled .shell,
html body.public-layout-body.system-bg-enabled .public-main-shell,
html body.public-layout-body.system-bg-enabled .content,
html body.public-layout-body.system-bg-enabled .firehouse-home{
  background:transparent !important;
}

html body.public-layout-body.system-bg-enabled .public-about-main,
html body.public-layout-body.system-bg-enabled .public-mission-card,
html body.public-layout-body.system-bg-enabled .public-service-card,
html body.public-layout-body.system-bg-enabled .home-quick-card,
html body.public-layout-body.system-bg-enabled .home-recent-card,
html body.public-layout-body.system-bg-enabled .home-notice-card,
html body.public-layout-body.system-bg-enabled .public-notice-card,
html body.public-layout-body.system-bg-enabled .page-full,
html body.public-layout-body.system-bg-enabled .section{
  background-color:rgba(13,23,29,.66) !important;
  backdrop-filter:blur(11px);
}

html body.public-layout-body.system-bg-enabled .home-hero::before{
  opacity:.92 !important;
}


/* Applications System Big Update No1 */
.notification-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.06);color:#fff;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.18);transition:.18s ease;}
.notification-button:hover{transform:translateY(-1px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
.notification-button.has-notifications{background:rgba(255,128,48,.16);border-color:rgba(255,128,48,.42)}
.notification-bell{font-size:18px;line-height:1}.notification-badge{position:absolute;right:-6px;top:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#ff5f2e;color:white;font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid rgba(12,14,18,.95)}
.submenu-count{margin-left:auto;min-width:22px;height:22px;border-radius:999px;background:rgba(255,95,46,.22);color:#ffb38f;display:inline-flex;align-items:center;justify-content:center;font-size:12px;padding:0 7px}
.public-apply-hero{position:relative;overflow:hidden;border-radius:28px;padding:42px;background:linear-gradient(135deg,rgba(255,95,46,.18),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(0,0,0,.25)}
.public-apply-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 30%,rgba(255,116,43,.2),transparent 38%);pointer-events:none}.public-apply-hero h1{margin:.15rem 0;font-size:clamp(2rem,5vw,4rem)}.public-apply-hero p{max-width:760px;color:rgba(255,255,255,.76);font-size:1.05rem}
.application-form-card,.application-success-card,.application-admin-card{background:rgba(18,20,25,.72);backdrop-filter:blur(12px)}
.application-success-card{text-align:center;padding:44px}.application-success-icon{width:70px;height:70px;border-radius:24px;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.32);display:inline-flex;align-items:center;justify-content:center;color:#8ef0ad;font-size:34px;font-weight:900;margin-bottom:14px}
.application-form-section{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.08)}.application-form-section:last-of-type{border-bottom:0}.application-form-section h2{margin:.2rem 0 1rem}.application-default-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.application-default-grid label small,.application-question-card legend small{display:block;color:rgba(255,255,255,.5);font-size:12px;font-weight:500;margin-top:2px}
.application-question-list{display:grid;gap:14px}.application-question-card{border:1px solid rgba(255,255,255,.11);border-radius:20px;padding:18px;background:rgba(255,255,255,.035)}.application-question-card legend{padding:0 8px;font-weight:800;color:#fff}.application-choice-list{display:grid;gap:10px;margin-top:8px}.application-choice-list label{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);cursor:pointer}.application-choice-list input{width:auto}.application-question-card textarea{width:100%;min-height:110px}.application-submit-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:20px}
.application-status-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.application-status-tabs .active{background:rgba(255,95,46,.2);border-color:rgba(255,95,46,.35)}.application-status-tabs span{opacity:.8;margin-left:4px}.application-search-toolbar{margin-bottom:18px}.applications-list{display:grid;gap:16px}.application-review-card{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;padding:18px;border-radius:22px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1)}.application-review-card.is-new{border-color:rgba(255,95,46,.32);box-shadow:inset 3px 0 0 rgba(255,95,46,.85)}.application-review-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.application-review-title-row h3{margin:0;font-size:1.3rem}.application-status-pill,.application-disabled-pill,.application-enabled-pill{border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;letter-spacing:.02em}.application-status-pill{background:rgba(255,255,255,.09);color:#fff}.status-new{background:rgba(255,95,46,.2);color:#ffb38f}.status-accepted{background:rgba(34,197,94,.16);color:#9df5b6}.status-rejected{background:rgba(239,68,68,.16);color:#ff9b9b}.status-archived{background:rgba(148,163,184,.16);color:#cbd5e1}.application-disabled-pill{background:rgba(239,68,68,.12);color:#ff9b9b}.application-enabled-pill{background:rgba(34,197,94,.14);color:#9df5b6}.application-meta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}.application-meta-grid span{padding:11px;border-radius:16px;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.78);overflow:hidden;text-overflow:ellipsis}.application-meta-grid strong{display:block;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.application-details{margin-top:10px}.application-details summary{cursor:pointer;font-weight:800;color:#fff}.application-answer-list{display:grid;gap:10px;margin-top:12px}.application-answer{padding:12px;border-radius:16px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.06)}.application-answer strong{display:block;margin-bottom:5px}.application-answer p{margin:0;color:rgba(255,255,255,.74)}.application-review-actions{display:grid;gap:12px;align-content:start}.application-status-form{display:grid;gap:10px}.application-status-form textarea{min-height:80px}.application-question-main strong{white-space:normal}.application-question-sort-list{gap:10px}.empty-state{padding:30px;text-align:center;border-radius:22px;background:rgba(255,255,255,.045);color:rgba(255,255,255,.65);border:1px dashed rgba(255,255,255,.16)}
@media (max-width:1000px){.application-review-card{grid-template-columns:1fr}.application-meta-grid,.application-default-grid{grid-template-columns:1fr 1fr}}@media (max-width:650px){.application-meta-grid,.application-default-grid{grid-template-columns:1fr}.public-apply-hero{padding:28px}.application-submit-row{align-items:flex-start;flex-direction:column}}

/* Notification dropdown fix: bell opens a menu instead of redirecting */
.notification-menu{position:relative;display:inline-flex;align-items:center;justify-content:center;z-index:80}
.notification-button{cursor:pointer;font-family:inherit;padding:0}
.notification-dropdown{position:absolute;top:calc(100% + 12px);right:0;width:min(360px,calc(100vw - 28px));border:1px solid rgba(255,255,255,.14);border-radius:22px;background:rgba(16,20,26,.96);box-shadow:0 24px 70px rgba(0,0,0,.42);backdrop-filter:blur(18px);padding:10px;display:none;z-index:120;overflow:hidden}
.notification-menu.open .notification-dropdown{display:block;animation:accountDropIn .14s ease-out}
.notification-dropdown-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:12px 12px 10px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.notification-dropdown-head strong{display:block;color:#fff;font-size:.98rem}
.notification-dropdown-head small{display:block;color:rgba(255,255,255,.56);font-size:.78rem;text-align:right;line-height:1.25}
.notification-item{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:12px;padding:12px;border-radius:17px;color:#fff;text-decoration:none;border:1px solid transparent;background:rgba(255,255,255,.035);transition:.16s ease}
.notification-item:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.12);transform:translateY(-1px)}
.notification-item.is-unread{background:rgba(255,95,46,.12);border-color:rgba(255,95,46,.22)}
.notification-item.is-read{
  background:rgba(255,255,255,.028) !important;
  border-color:rgba(255,255,255,.055) !important;
  opacity:.72;
}
.notification-item.is-read:hover{
  opacity:.88;
  background:rgba(255,255,255,.05) !important;
}
.notification-item.is-read .notification-item-icon{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.10) !important;
  color:rgba(255,255,255,.62);
}
.notification-item.is-read .notification-item-body strong{
  color:rgba(255,255,255,.72);
}
.notification-item.is-read .notification-item-body small{
  color:rgba(255,255,255,.44);
}
.notification-read-spacer{
  grid-column:3;
  grid-row:1;
  width:22px;
  height:22px;
  display:block;
}
body.light .notification-item.is-read{
  background:rgba(15,23,42,.025) !important;
  border-color:rgba(15,23,42,.06) !important;
}
body.light .notification-item.is-read .notification-item-icon{
  background:rgba(15,23,42,.045) !important;
  border-color:rgba(15,23,42,.08) !important;
  color:rgba(17,24,39,.52);
}
body.light .notification-item.is-read .notification-item-body strong{
  color:rgba(17,24,39,.66);
}
body.light .notification-item.is-read .notification-item-body small{
  color:rgba(17,24,39,.45);
}

.notification-item-icon{width:42px;height:42px;border-radius:15px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,95,46,.16);border:1px solid rgba(255,95,46,.28);font-size:18px}
.notification-item-body{min-width:0;display:block}
.notification-item-body strong{display:block;color:#fff;font-size:.9rem;line-height:1.2;margin-bottom:3px;white-space:normal}
.notification-item-body small{display:block;color:rgba(255,255,255,.64);font-size:.78rem;line-height:1.28}
.notification-item-arrow{color:rgba(255,255,255,.5);font-size:24px;line-height:1}
.notification-empty{display:grid;place-items:center;text-align:center;gap:5px;padding:24px 14px;color:rgba(255,255,255,.62)}
.notification-empty span{width:42px;height:42px;border-radius:15px;display:inline-flex;align-items:center;justify-content:center;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.24);color:#9df5b6;font-weight:900;margin-bottom:4px}
.notification-empty strong{color:#fff}.notification-empty small{max-width:260px;line-height:1.35}
body.light .notification-dropdown{background:rgba(248,250,252,.98);border-color:rgba(15,23,42,.10);box-shadow:0 24px 70px rgba(15,23,42,.20)}
body.light .notification-dropdown-head{border-bottom-color:rgba(15,23,42,.08)}
body.light .notification-dropdown-head strong,
body.light .notification-item-body strong,
body.light .notification-empty strong{color:#111827}
body.light .notification-dropdown-head small,
body.light .notification-item-body small,
body.light .notification-empty{color:rgba(17,24,39,.62)}
body.light .notification-item{color:#111827;background:rgba(15,23,42,.035)}
body.light .notification-item:hover{background:rgba(15,23,42,.07);border-color:rgba(15,23,42,.1)}
@media (max-width:680px){.notification-dropdown{right:-64px;width:min(340px,calc(100vw - 20px))}.notification-dropdown-head{display:block}.notification-dropdown-head small{text-align:left;margin-top:3px}}
@keyframes notificationDropIn{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.notification-menu.open .notification-dropdown{animation:notificationDropIn .14s ease-out}

/* Logs filters / pagination update */
.logs-results-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 14px;
  color: var(--muted);
  font-size: .86rem;
}

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

.logs-active-filter {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,159,28,.20);
  background: rgba(255,159,28,.08);
  color: var(--brand2);
  font-weight: 900;
}

.logs-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 18px;
}

.logs-page-link,
.logs-page-ellipsis {
  min-width: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.045);
  color: var(--text);
  font-size: .86rem;
  font-weight: 900;
  text-decoration: none;
}

.logs-page-link.active {
  border-color: rgba(255,159,28,.38);
  background: linear-gradient(135deg, rgba(255,159,28,.24), rgba(255,77,90,.16));
  color: #fff;
}

.logs-page-link.disabled {
  pointer-events: none;
  opacity: .45;
}

.logs-page-ellipsis {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.log-row.application-action .log-action-icon {
  color: #d7b7ff;
  background: rgba(177,113,255,.12);
  border-color: rgba(177,113,255,.24);
}

.log-row.activity-action .log-action-icon {
  color: #9df2ff;
  background: rgba(74,216,255,.12);
  border-color: rgba(74,216,255,.24);
}

.log-row.sog-action .log-action-icon {
  color: #ffcd7a;
  background: rgba(255,188,82,.12);
  border-color: rgba(255,188,82,.24);
}

.log-row.page-action .log-action-icon {
  color: #b8f5c5;
  background: rgba(91,230,126,.10);
  border-color: rgba(91,230,126,.22);
}

.log-row.settings-action .log-action-icon {
  color: #c9d4ff;
  background: rgba(120,145,255,.12);
  border-color: rgba(120,145,255,.24);
}

@media (max-width: 1100px) {
  .logs-results-meta {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Account linking page */
.account-link-actions{gap:10px; flex-wrap:wrap; align-items:center}
.account-link-actions form{margin:0}
.account-link-stats{margin:18px 0}
.account-links-list .account-link-row{grid-template-columns:auto minmax(220px,1.3fr) auto minmax(190px,.9fr)}
.compact-user-main strong{font-size:.95rem}
.account-created-passwords{margin:18px 0; border:1px solid rgba(255,255,255,.12)}
.account-created-passwords code{user-select:all; background:rgba(0,0,0,.25); padding:4px 8px; border-radius:8px}
@media(max-width:900px){.account-links-list .account-link-row{grid-template-columns:auto 1fr}.account-links-list .account-link-row .cms-user-badge,.account-links-list .account-link-row .compact-user-main{grid-column:2}}


/* Login modal hard lock
   Keeps the shared login form as a real viewport modal even when page wrappers change. */
.login-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
  align-items: center !important;
  justify-items: center !important;
}
.login-modal.open {
  display: grid !important;
}
.login-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
}
.login-modal-card {
  position: relative !important;
  z-index: 100000 !important;
}

.linked-user-lock-note {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}
.locked-link-select {
  opacity: .72;
  cursor: not-allowed;
}

/* Settings → Admin Pages icon editor */
.admin-icons-card {
  overflow: hidden;
}

.admin-icons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.admin-icon-editor {
  display: grid;
  grid-template-columns: 54px 1fr 86px;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.045);
}

.admin-icon-live-preview {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(255,159,28,.22);
  background: rgba(255,159,28,.11);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 900;
}

.admin-icon-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-icon-copy strong {
  color: #fff;
  font-size: .98rem;
}

.admin-icon-copy small {
  color: var(--muted);
  line-height: 1.35;
}

.admin-icon-editor input {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 900;
}

.submenu-dot {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
}

/* Frontend My Profile readable view + modals */
.profile-view-card {
  position: relative;
  overflow: visible;
}

.profile-view-actions {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
}

.profile-dots-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.profile-dots-button:hover {
  border-color: rgba(255,159,28,.35);
  background: rgba(255,159,28,.12);
}

.profile-dots-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(280px, 86vw);
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(12,14,18,.96);
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: .16s ease;
}

.profile-view-actions.open .profile-dots-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.profile-dots-dropdown button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.profile-dots-dropdown button:hover {
  background: rgba(255,255,255,.07);
}

.profile-dots-dropdown button span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255,159,28,.12);
}

.profile-view-header {
  padding-right: 62px;
}

.profile-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.profile-status-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
}

.profile-readable-layout {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.profile-readable-section {
  padding: 18px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
}

.profile-readable-title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}

.profile-readable-title span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,159,28,.12);
  border: 1px solid rgba(255,159,28,.18);
}

.profile-readable-title h3 {
  margin: 0;
  color: #fff;
}

.profile-readable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.profile-readable-grid > div {
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.16);
}

.profile-readable-grid > div.full {
  grid-column: 1 / -1;
}

.profile-readable-grid small {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.profile-readable-grid strong {
  color: #fff;
  font-size: .98rem;
  line-height: 1.25;
  word-break: break-word;
}

.profile-rank-readable img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  margin-bottom: 2px;
}

.profile-page-modal .personnel-modal-panel {
  width: min(920px, 96vw);
}

@media (max-width: 720px) {
  .admin-icon-editor {
    grid-template-columns: 48px 1fr;
  }

  .admin-icon-editor input {
    grid-column: 1 / -1;
  }

  .profile-view-actions {
    top: 12px;
    right: 12px;
  }

  .profile-view-header {
    padding-right: 48px;
  }
}

/* Admin sidebar submenu icon revert
   Keep submenu entries using the original small round dot instead of the wider pill/line icon. */
.admin-layout-body .admin-side-nav .submenu-link .submenu-dot {
  display: inline-block !important;
  width: 5px !important;
  min-width: 5px !important;
  height: 5px !important;
  min-height: 5px !important;
  flex: 0 0 5px !important;
  padding: 0 !important;
  margin: 0 3px 0 0 !important;
  border-radius: 50% !important;
  line-height: 0 !important;
}

body.sidemenu-mini.admin-layout-body .admin-side-nav .submenu-link .submenu-dot,
body.sidebar-collapsed.admin-layout-body .admin-side-nav .submenu-link .submenu-dot {
  width: 6px !important;
  min-width: 6px !important;
  height: 6px !important;
  min-height: 6px !important;
  flex-basis: 6px !important;
  margin: 0 !important;
}

/* Strike Points - recommended points/profile tabs update */
.strike-points-card .personnel-toolbar,
.strike-reasons-card .manager-toolbar {
  margin: 16px 0 18px;
}

.strike-point-list {
  gap: 12px !important;
}

.strike-point-row {
  grid-template-columns: 46px minmax(180px, 1.15fr) 78px 105px minmax(170px, 1fr) 124px minmax(120px, .85fr) 88px 92px !important;
  gap: 10px !important;
  padding: 13px !important;
  min-height: 76px !important;
}

.strike-point-row .manager-icon,
.strike-reasons-card .manager-row .manager-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
}

.strike-point-row .manager-main strong,
.strike-point-row .manager-meta strong,
.strike-reasons-card .manager-main strong,
.strike-reasons-card .manager-meta strong {
  font-size: .88rem;
}

.strike-point-row .manager-main small,
.strike-reasons-card .manager-main small {
  font-size: .76rem;
}

.strike-point-row .manager-meta {
  min-width: 0;
}

.strike-point-row .manager-meta strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strike-point-row .strike-reason-meta {
  text-align: left;
}

.strike-point-row .strike-reason-meta span {
  text-align: left;
}

.strike-points-card .manager-pill,
.strike-reasons-card .manager-pill {
  min-height: 28px;
  padding: 0 9px;
  font-size: .72rem;
}

.strike-reasons-card .manager-row {
  grid-template-columns: 36px 46px minmax(220px, 1fr) 80px 88px 92px !important;
  gap: 10px !important;
  min-height: 72px !important;
}

.strike-reasons-card .manager-drag-handle {
  justify-self: center;
}

.strike-issue-grid {
  align-items: end;
}

.strike-issue-grid label {
  min-width: 0;
}

.strike-issue-grid select,
.strike-issue-grid input {
  min-width: 0;
}

.profile-page-tabs,
.roster-wall-modal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 14px;
}

.profile-page-tabs button,
.roster-wall-modal-tabs button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: var(--muted);
  min-height: 38px;
  padding: 0 15px;
  font-weight: 1000;
  cursor: pointer;
}

.profile-page-tabs button.active,
.roster-wall-modal-tabs button.active {
  color: #fff;
  border-color: rgba(255,159,28,.34);
  background: linear-gradient(135deg, rgba(255,159,28,.22), rgba(255,59,34,.10));
}

.profile-tab-panel[hidden],
.roster-wall-strikes-panel[hidden],
#rosterWallDetailsPanel[hidden] {
  display: none !important;
}

.strike-public-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.strike-public-summary > div,
.strike-public-row {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}

.strike-public-summary > div {
  padding: 14px;
  display: grid;
  gap: 5px;
}

.strike-public-summary small,
.strike-public-row span {
  color: var(--muted);
  font-size: .70rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.strike-public-summary strong {
  color: #fff;
  font-size: 1.45rem;
}

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

.strike-public-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 78px 110px 124px 124px 88px;
  gap: 10px;
  align-items: center;
  padding: 12px;
}

.strike-public-main {
  min-width: 0;
}

.strike-public-main strong,
.strike-public-main small,
.strike-public-row > div:not(.strike-public-main) strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strike-public-main strong {
  color: #fff;
  font-size: .92rem;
}

.strike-public-main small {
  color: var(--muted);
  font-size: .75rem;
  margin-top: 4px;
}

.strike-public-row > div:not(.strike-public-main) {
  display: grid;
  gap: 3px;
  text-align: center;
}

.strike-public-row > div:not(.strike-public-main) strong {
  color: #fff;
  font-size: .84rem;
}

.strike-public-status {
  justify-self: center;
  display: inline-grid !important;
  place-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 1000;
  text-align: center !important;
}

.strike-public-status.active {
  color: var(--ok);
  border: 1px solid rgba(51,209,122,.24);
  background: rgba(51,209,122,.12);
}

.strike-public-status.expired {
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
}

.roster-wall-strike-list {
  margin-top: 0;
}

@media(max-width: 1200px) {
  .strike-point-row,
  .strike-public-row {
    grid-template-columns: 46px minmax(200px, 1fr) 90px 105px;
  }

  .strike-point-row .manager-meta,
  .strike-point-row .manager-pill,
  .strike-point-row .manager-actions {
    grid-column: auto !important;
  }

  .strike-public-row {
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(90px, .35fr));
  }
}

@media(max-width: 760px) {
  .strike-point-row,
  .strike-reasons-card .manager-row,
  .strike-public-row {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  .strike-point-row .manager-icon,
  .strike-reasons-card .manager-icon,
  .strike-point-row .manager-actions,
  .strike-reasons-card .manager-actions,
  .strike-public-status {
    justify-self: center !important;
  }

  .strike-point-row .strike-reason-meta,
  .strike-point-row .strike-reason-meta span {
    text-align: center;
  }
}

/* Sidebar scrollbars: frontend + backend
   Keep the desktop sidebars usable when many menu categories are open. */
@media (min-width: 901px) {
  body:not(.sidemenu-mini) .sidebar,
  body:not(.sidemenu-mini) .admin-sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    padding-bottom: 92px !important;
  }

  body:not(.sidemenu-mini) .sidebar nav,
  body:not(.sidemenu-mini) .admin-sidebar nav,
  body:not(.sidemenu-mini) .side-nav,
  body:not(.sidemenu-mini) .admin-side-nav {
    padding-bottom: 36px;
  }
}

.sidebar,
.admin-sidebar,
.drawer-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 159, 28, .72) rgba(255,255,255,.045);
}

.sidebar::-webkit-scrollbar,
.admin-sidebar::-webkit-scrollbar,
.drawer-panel::-webkit-scrollbar {
  width: 10px;
}

.sidebar::-webkit-scrollbar-track,
.admin-sidebar::-webkit-scrollbar-track,
.drawer-panel::-webkit-scrollbar-track {
  background: rgba(255,255,255,.045);
  border-radius: 999px;
}

.sidebar::-webkit-scrollbar-thumb,
.admin-sidebar::-webkit-scrollbar-thumb,
.drawer-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255,59,34,.78), rgba(255,159,28,.78));
  border: 2px solid rgba(7,16,20,.72);
  border-radius: 999px;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.admin-sidebar::-webkit-scrollbar-thumb:hover,
.drawer-panel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255,59,34,.95), rgba(255,159,28,.95));
}

/* Mini sidebars need visible overflow for flyout submenus, so do not force the scrollbar there. */
body.sidemenu-mini .sidebar,
body.sidemenu-mini .admin-sidebar {
  overflow: visible !important;
  padding-bottom: 24px !important;
}

/* Sidebar invisible scroll
   Scroll sidebars only while the mouse/focus is over them, but do not show a visual scrollbar. */
@media (min-width: 901px) {
  body:not(.sidemenu-mini) .sidebar,
  body:not(.sidemenu-mini) .admin-sidebar {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scrollbar-gutter: auto !important;
  }

  body:not(.sidemenu-mini) .sidebar:hover,
  body:not(.sidemenu-mini) .sidebar:focus-within,
  body:not(.sidemenu-mini) .admin-sidebar:hover,
  body:not(.sidemenu-mini) .admin-sidebar:focus-within {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
}

.sidebar::-webkit-scrollbar,
.admin-sidebar::-webkit-scrollbar,
.drawer-panel::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.sidebar::-webkit-scrollbar-track,
.admin-sidebar::-webkit-scrollbar-track,
.drawer-panel::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-thumb,
.admin-sidebar::-webkit-scrollbar-thumb,
.drawer-panel::-webkit-scrollbar-thumb {
  background: transparent !important;
  border: 0 !important;
}

/* Personnel status manager */
.status-color-preview {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 10px 24px rgba(0,0,0,.18);
}
.status-modal-preview {
  display: grid;
  gap: 7px;
  align-content: end;
}
.status-modal-preview small {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}
.status-color-pill,
.profile-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: #fff;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.profile-status-badge {
  width: max-content;
}

/* Training Applications / Options - panel-friendly UI */
.training-admin-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:24px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:26px;
  background:linear-gradient(135deg,rgba(255,95,46,.13),rgba(18,20,25,.78));
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}
.training-admin-hero h2{margin:.15rem 0 .35rem;font-size:1.9rem}
.training-admin-hero p{max-width:760px;margin:0}
.training-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}
.training-stat-card{display:block;text-decoration:none;color:inherit;padding:18px;border-radius:22px;border:1px solid rgba(255,255,255,.09);background:rgba(18,20,25,.72);box-shadow:0 14px 32px rgba(0,0,0,.14)}
.training-stat-card.active{border-color:rgba(255,95,46,.42);box-shadow:inset 0 0 0 1px rgba(255,95,46,.18),0 14px 32px rgba(0,0,0,.14)}
.training-stat-card span{display:block;color:rgba(255,255,255,.62);font-size:12px;text-transform:uppercase;letter-spacing:.07em;font-weight:800}
.training-stat-card strong{display:block;color:#fff;font-size:2rem;margin:6px 0 2px}
.training-stat-card small{color:rgba(255,255,255,.56)}
.training-card-head{align-items:flex-start}.training-mini-help{padding:10px 13px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.045);color:rgba(255,255,255,.68);font-size:13px}
.training-options-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.training-option-card{border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(255,255,255,.04);padding:18px;scroll-margin-top:120px;display:grid;gap:16px}
.training-option-card:target,.training-application-card.selected{border-color:rgba(255,95,46,.42);box-shadow:inset 3px 0 0 rgba(255,95,46,.85)}
.training-option-card-top{display:flex;align-items:center;gap:12px}.training-option-card-top h3{margin:0;color:#fff;font-size:1.22rem}.training-option-card-top p{margin:3px 0 0;color:rgba(255,255,255,.52);font-size:13px}.training-option-icon,.training-avatar{width:46px;height:46px;border-radius:16px;background:rgba(255,95,46,.16);border:1px solid rgba(255,95,46,.26);display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;flex:0 0 auto}.training-status-pill{margin-left:auto;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:900;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);white-space:nowrap}.training-status-pill.is-visible,.application-status-pill.training-status-passed,.application-status-pill.training-status-accepted{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.28);color:#a7f3d0}.training-status-pill.is-hidden,.application-status-pill.training-status-rejected,.application-status-pill.training-status-failed{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.28);color:#fecaca}.application-status-pill.training-status-new{background:rgba(255,95,46,.18);border-color:rgba(255,95,46,.32);color:#ffbd99}.application-status-pill.training-status-in_progress{background:rgba(59,130,246,.16);border-color:rgba(59,130,246,.3);color:#bfdbfe}.training-option-description{margin:0;color:rgba(255,255,255,.72);line-height:1.55}.training-option-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.training-option-meta span,.training-readonly-grid span{padding:12px;border-radius:16px;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.75);min-width:0;overflow:hidden;text-overflow:ellipsis}.training-option-meta strong,.training-readonly-grid strong{display:block;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.training-question-panel{border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:14px;background:rgba(0,0,0,.12)}.training-question-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.training-question-list-admin{display:grid;gap:10px}.training-question-admin-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}.training-question-admin-row strong{display:block;color:#fff}.training-question-admin-row small{color:rgba(255,255,255,.56)}.training-row-actions{flex-wrap:nowrap}.training-empty-inline{padding:14px;border-radius:16px;border:1px dashed rgba(255,255,255,.14);color:rgba(255,255,255,.58);background:rgba(255,255,255,.025)}.training-option-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.training-checkbox-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}.training-checkbox-grid label{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);cursor:pointer}.training-checkbox-grid input{width:auto}.is-muted-field{opacity:.52}.training-modal .personnel-modal-panel{box-shadow:0 28px 70px rgba(0,0,0,.42)}.training-modal-panel{max-width:920px}.training-review-modal-panel{max-width:1040px}.btn2.success{border-color:rgba(34,197,94,.28);color:#a7f3d0;background:rgba(34,197,94,.11)}
.training-filter-toolbar{margin-bottom:18px}.training-application-list{display:grid;gap:12px}.training-application-card{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}.training-application-main{display:flex;align-items:center;gap:13px;min-width:0}.training-application-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.training-application-title-row h3{margin:0;color:#fff;font-size:1.12rem}.training-application-main p{margin:3px 0 0;color:rgba(255,255,255,.68)}.training-application-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.training-application-tags span{font-size:12px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.62)}.training-application-actions{flex:0 0 auto}.training-review-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);margin-bottom:16px}.training-review-summary .application-status-pill{margin-left:0;display:inline-flex}.training-review-summary p{margin:8px 0 0}.training-review-quick-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.training-readonly-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.training-pass-note{margin-top:14px}
.training-public-hero{position:relative;overflow:hidden}.training-public-profile-chip{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:10px 14px;border-radius:999px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);color:#fff}.training-public-profile-chip span{color:rgba(255,255,255,.68)}.training-public-card{padding:24px}.training-public-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:22px}.training-public-steps span{display:flex;align-items:center;gap:9px;padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.68);font-weight:800}.training-public-steps strong{width:26px;height:26px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#fff}.training-public-steps .active{border-color:rgba(255,95,46,.35);background:rgba(255,95,46,.13);color:#fff}.training-section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}.training-section-heading h2{margin:.15rem 0 0}.training-public-option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.training-public-option{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;text-decoration:none;color:inherit;padding:16px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);transition:transform .18s ease,border-color .18s ease,background .18s ease}.training-public-option:hover{transform:translateY(-1px);border-color:rgba(255,95,46,.32)}.training-public-option.selected{background:rgba(255,95,46,.13);border-color:rgba(255,95,46,.42)}.training-public-option.has-active{opacity:.76}.training-public-option strong{display:block;color:#fff}.training-public-option span{display:block;color:rgba(255,255,255,.6);font-size:13px;margin-top:4px}.training-public-option em{font-style:normal;font-size:12px;font-weight:900;color:#ffbd99;white-space:nowrap}.training-public-section{border-bottom:1px solid rgba(255,255,255,.08)}.training-public-readonly-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.selected-training-summary{padding:20px;border-radius:22px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);margin:18px 0}.training-public-question-card legend{display:flex;align-items:center;gap:10px}.training-public-question-card legend span{width:28px;height:28px;border-radius:10px;background:rgba(255,95,46,.15);border:1px solid rgba(255,95,46,.25);display:inline-flex;align-items:center;justify-content:center}.training-public-submit-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding:18px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.training-public-submit-panel p{margin:5px 0 0}.training-blocked-state{text-align:center;padding:42px 20px}.training-blocked-icon{width:72px;height:72px;border-radius:24px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,95,46,.13);border:1px solid rgba(255,95,46,.26);font-size:32px;margin-bottom:14px}.training-public-success{max-width:760px;margin-left:auto;margin-right:auto}
@media (max-width:1100px){.training-options-grid{grid-template-columns:1fr}.training-option-meta,.training-readonly-grid,.training-public-readonly-grid,.training-public-option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.training-stat-grid,.training-public-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.training-checkbox-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.training-admin-hero,.training-review-summary,.training-application-card,.training-public-submit-panel,.training-section-heading{flex-direction:column;align-items:stretch}.training-stat-grid,.training-public-steps,.training-option-meta,.training-readonly-grid,.training-public-readonly-grid,.training-public-option-grid,.training-checkbox-grid{grid-template-columns:1fr}.training-question-admin-row{flex-direction:column;align-items:stretch}.training-row-actions,.training-review-quick-actions,.training-option-actions{justify-content:flex-start;flex-wrap:wrap}.training-application-actions{width:100%}.training-application-actions .btn2{width:100%;justify-content:center}.training-public-card{padding:18px}}

/* Training options list/table style update */
.training-options-manager-card .manager-toolbar,
.training-manager-toolbar {
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
}

.training-option-list {
  gap: 14px;
}

.training-option-list-item {
  display: grid;
  gap: 10px;
  scroll-margin-top: 120px;
}

.training-option-list-item:target .training-option-manager-row {
  border-color: rgba(255,159,28,.42) !important;
  box-shadow: inset 3px 0 0 rgba(255,159,28,.9), 0 10px 26px rgba(0,0,0,.16);
}

.training-option-manager-row.manager-row,
.training-option-manager-row.manager-sort-row {
  grid-template-columns: 40px 54px minmax(230px, 1.35fr) 86px minmax(145px,.72fr) minmax(170px,.9fr) 92px auto !important;
  min-height: 78px;
  gap: 10px;
}

.training-option-main em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-style: normal;
  font-size: .78rem;
  line-height: 1.35;
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-wide-meta {
  text-align: left;
  min-width: 0;
}

.training-wide-meta strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-manager-actions {
  gap: 8px;
  flex-wrap: nowrap;
}

.training-add-question-action {
  min-height: 38px !important;
  white-space: nowrap;
}

.training-question-sublist {
  margin-left: 40px;
  display: grid;
  gap: 8px;
  padding: 10px 0 2px 18px;
  border-left: 1px dashed rgba(255,159,28,.22);
}

.training-question-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: .82rem;
  padding: 0 4px;
}

.training-question-subhead span {
  color: var(--text);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
}

.training-question-subhead small {
  color: var(--muted);
  font-weight: 800;
}

.training-question-subhead small.saving { color: var(--brand2); }
.training-question-subhead small.saved { color: var(--ok); }
.training-question-subhead small.error { color: var(--bad); }

.training-question-manager-row.manager-row,
.training-question-manager-row.manager-sort-row {
  grid-template-columns: 40px 46px minmax(220px,1fr) 90px minmax(125px,.72fr) 92px auto !important;
  min-height: 62px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.022)), var(--panel2, var(--panel));
  box-shadow: none;
}

.training-question-manager-row .manager-icon {
  width: 36px;
  height: 36px;
  border-radius: 13px;
  font-size: .95rem;
}

.training-question-icon {
  color: var(--brand2) !important;
}

.training-question-manager-row .manager-main strong {
  white-space: normal;
  line-height: 1.25;
}

.training-question-manager-row .manager-actions {
  gap: 7px;
}

.training-options-manager-card .empty,
.training-question-sublist .training-empty-inline {
  border-radius: 16px;
}

@media (max-width: 1280px) {
  .training-option-manager-row.manager-row,
  .training-option-manager-row.manager-sort-row {
    grid-template-columns: 40px 54px minmax(220px,1fr) 86px minmax(130px,.75fr) 92px auto !important;
  }
  .training-option-manager-row .training-wide-meta:nth-of-type(2) {
    display: none;
  }
}

@media (max-width: 1000px) {
  .training-options-manager-card .manager-toolbar,
  .training-manager-toolbar {
    grid-template-columns: 1fr;
  }
  .training-option-manager-row.manager-row,
  .training-option-manager-row.manager-sort-row,
  .training-question-manager-row.manager-row,
  .training-question-manager-row.manager-sort-row {
    grid-template-columns: 40px 54px minmax(0,1fr) !important;
  }
  .training-option-manager-row .manager-meta,
  .training-option-manager-row .manager-pill,
  .training-option-manager-row .manager-actions,
  .training-question-manager-row .manager-meta,
  .training-question-manager-row .manager-pill,
  .training-question-manager-row .manager-actions {
    grid-column: 3;
    justify-self: start;
  }
  .training-option-manager-row .training-wide-meta:nth-of-type(2) {
    display: grid;
  }
  .training-manager-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }
  .training-question-sublist {
    margin-left: 20px;
    padding-left: 14px;
  }
}

@media (max-width: 640px) {
  .training-option-manager-row.manager-row,
  .training-option-manager-row.manager-sort-row,
  .training-question-manager-row.manager-row,
  .training-question-manager-row.manager-sort-row {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .training-option-manager-row .manager-meta,
  .training-option-manager-row .manager-pill,
  .training-option-manager-row .manager-actions,
  .training-question-manager-row .manager-meta,
  .training-question-manager-row .manager-pill,
  .training-question-manager-row .manager-actions {
    grid-column: auto;
    justify-self: center;
  }
  .training-wide-meta {
    text-align: center;
  }
  .training-option-main em {
    white-space: normal;
  }
  .training-question-sublist {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
  .training-question-subhead {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Frontend training applications modal/card update */
.training-public-hero-v2 p { max-width: 860px; }
.training-public-card-v2 { padding: 26px; }
.training-public-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 22px;
}
.training-public-intro-copy,
.training-public-how-card {
  border-radius: 24px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  padding: 20px;
}
.training-public-intro-copy h2 { margin: .15rem 0 .45rem; }
.training-public-how-card strong { display:block; color:#fff; margin-bottom: 10px; font-size: 1.02rem; }
.training-public-how-card ol { margin:0; padding-left: 20px; color: rgba(255,255,255,.72); line-height: 1.72; }
.training-public-option-grid-v2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.training-public-option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  padding: 18px;
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(255,95,46,.16), transparent 36%),
    rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.training-public-option-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,95,46,.28);
  background:
    radial-gradient(circle at top right, rgba(255,95,46,.22), transparent 38%),
    rgba(255,255,255,.055);
}
.training-public-option-card.has-active { opacity: .86; }
.training-option-card-top { display: flex; align-items: center; gap: 10px; }
.training-public-option-card h3 { margin: 0; color: #fff; font-size: 1.22rem; }
.training-public-option-card p { margin: 0; color: rgba(255,255,255,.68); line-height: 1.55; }
.training-option-card-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: auto;
}
.training-option-card-meta span,
.training-last-status {
  padding: 10px 11px;
  border-radius: 15px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.70);
  min-width: 0;
  overflow-wrap: anywhere;
}
.training-option-card-meta strong {
  display: block;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 3px;
}
.training-last-status { font-size: 13px; }
.training-option-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.training-option-card-actions .btn,
.training-option-card-actions .btn2 { flex: 1 1 130px; justify-content: center; text-align: center; }
.training-option-card-actions .btn:disabled,
.training-option-card-actions .btn.disabled,
.training-modal-submit-panel .btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.28);
}
.training-status-pill.is-new { background:rgba(255,95,46,.18); border-color:rgba(255,95,46,.32); color:#ffbd99; }
.training-status-pill.is-accepted,
.training-status-pill.is-passed { background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.28); color:#a7f3d0; }
.training-status-pill.is-rejected,
.training-status-pill.is-failed { background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.28); color:#fecaca; }
.training-status-pill.is-in_progress { background:rgba(59,130,246,.16); border-color:rgba(59,130,246,.3); color:#bfdbfe; }
body.training-modal-open { overflow: hidden; }
.training-apply-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(8px);
  z-index: 9999;
}
.training-apply-modal.open { display: flex; }
.training-apply-dialog {
  position: relative;
  width: min(1080px, 100%);
  max-height: min(88vh, 980px);
  overflow: auto;
  border-radius: 28px;
  background: #1f1f1f;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 90px rgba(0,0,0,.52);
}
.training-modal-form { padding: 24px; }
.training-apply-close {
  position: sticky;
  top: 14px;
  float: right;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin: 14px 14px 0 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.training-apply-close:hover { background: rgba(255,95,46,.18); border-color: rgba(255,95,46,.32); }
.training-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  border-radius: 24px;
  background: radial-gradient(circle at top right, rgba(255,95,46,.18), transparent 38%), rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 16px;
}
.training-modal-header h2 { margin: .2rem 0 .35rem; color:#fff; }
.training-modal-section {
  padding: 18px;
  border-radius: 24px;
  background: rgba(255,255,255,.032);
  border: 1px solid rgba(255,255,255,.075);
  margin-top: 14px;
}
.training-modal-section .training-section-heading h3 { margin: .15rem 0 0; color:#fff; }
.training-modal-submit-panel { margin-bottom: 0; }
.training-apply-dialog input:disabled,
.training-apply-dialog textarea:disabled { opacity: .65; cursor: not-allowed; }
@media (max-width:1100px){
  .training-public-intro-grid,
  .training-public-option-grid-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:720px){
  .training-public-card-v2 { padding: 18px; }
  .training-public-intro-grid,
  .training-public-option-grid-v2 { grid-template-columns: 1fr; }
  .training-apply-modal { padding: 10px; align-items: stretch; }
  .training-apply-dialog { max-height: 96vh; border-radius: 22px; }
  .training-modal-form { padding: 16px; }
  .training-modal-header { flex-direction: column; }
  .training-option-card-actions .btn,
  .training-option-card-actions .btn2 { width: 100%; }
}

/* Training applications refinement: simpler frontend list + fixed centered modals */
.training-public-hero-simple {
  /* Keep the exact same hero/background style as the normal frontend application title. */
}

.training-public-simple-head {
  margin-bottom: 18px;
}

.training-public-simple-head h2 {
  margin: .15rem 0 .35rem;
}

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

.training-public-simple-option {
  min-height: auto !important;
  padding: 16px !important;
  gap: 10px !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: none !important;
}

.training-public-simple-option:hover {
  background: rgba(255,255,255,.055) !important;
}

.training-public-simple-option h3 {
  margin: 0 !important;
  font-size: 1.08rem !important;
}

.training-public-simple-option .training-option-card-actions {
  margin-top: 4px !important;
}

.training-public-simple-option .training-option-card-actions .btn2 {
  flex: 0 0 auto !important;
  min-width: 150px;
}

.training-apply-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  overflow-y: auto !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 3vw, 28px) !important;
}

.training-apply-modal.open {
  display: flex !important;
}

.training-apply-dialog {
  margin: auto !important;
  max-height: calc(100dvh - 56px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.training-apply-close {
  position: sticky !important;
  top: 12px !important;
}

/* Backend training add/edit/review modals: keep header/footer visible and scroll only the body. */
#trainingOptionModal.personnel-modal,
#trainingQuestionModal.personnel-modal,
#trainingApplicationModal.personnel-modal {
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

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

#trainingOptionForm,
#trainingQuestionForm,
#trainingApplicationForm {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}

#trainingOptionModal .personnel-modal-body,
#trainingQuestionModal .personnel-modal-body,
#trainingApplicationModal .personnel-modal-body {
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#trainingOptionModal .personnel-modal-footer,
#trainingQuestionModal .personnel-modal-footer,
#trainingApplicationModal .personnel-modal-footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
}

.training-review-action-panel .training-review-quick-actions {
  justify-content: flex-start !important;
}

.training-review-quick-actions .btn2.active {
  border-color: rgba(255,95,46,.45) !important;
  background: rgba(255,95,46,.18) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,95,46,.18);
}

@media (max-width: 720px) {
  .training-public-simple-grid {
    grid-template-columns: 1fr !important;
  }

  .training-apply-modal {
    align-items: center !important;
  }

  .training-apply-dialog {
    max-height: calc(100dvh - 24px) !important;
    width: min(100%, 1080px) !important;
  }

  #trainingOptionModal.personnel-modal,
  #trainingQuestionModal.personnel-modal,
  #trainingApplicationModal.personnel-modal {
    padding: 8px !important;
    align-items: center !important;
  }

  #trainingOptionModal .personnel-modal-panel,
  #trainingQuestionModal .personnel-modal-panel,
  #trainingApplicationModal .personnel-modal-panel {
    width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
  }
}


/* Final Training Applications frontend modal/title fixes */
.training-public-hero-simple {
  /* Use the same standard .hero background as the rest of the frontend pages. */
}
.training-apply-modal {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: clamp(12px, 3vw, 28px) !important;
  z-index: 100000 !important;
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(8px) !important;
}
.training-apply-modal.open {
  display: flex !important;
}
.training-apply-dialog {
  position: relative !important;
  float: none !important;
  margin: 0 auto !important;
  width: min(1080px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 56px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 28px !important;
}
.training-modal-form {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 24px !important;
}
.training-apply-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  float: none !important;
  margin: 0 !important;
  z-index: 5 !important;
}
.training-modal-header {
  padding-right: 64px !important;
}
@media (max-width: 720px) {
  .training-apply-modal {
    padding: 10px !important;
  }
  .training-apply-dialog {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 22px !important;
  }
  .training-modal-form {
    padding: 16px !important;
  }
  .training-modal-header {
    padding-right: 56px !important;
  }
}


/* Training application pass lock + backend review modal final scroll fixes */
#trainingApplicationModal.personnel-modal.open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#trainingApplicationModal .training-review-modal-panel {
  width: min(1040px, calc(100vw - 32px)) !important;
  height: min(900px, calc(100dvh - 48px)) !important;
  max-height: calc(100dvh - 48px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}
#trainingApplicationForm {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}
#trainingApplicationModal .personnel-modal-body {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  padding-bottom: 20px !important;
}
#trainingApplicationModal .personnel-modal-footer {
  flex: 0 0 auto !important;
}
.training-public-simple-option.has-passed {
  border-color: rgba(34,197,94,.24) !important;
}
@media (max-width: 720px) {
  #trainingApplicationModal .training-review-modal-panel {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
}


/* Application form polish + compact backend application rows */
.application-form-card {
  overflow: hidden;
}
.application-question-list-modern {
  gap: 16px;
}
.application-question-card-modern {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.application-question-card-modern::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(255,176,46,.95), rgba(255,95,46,.88));
}
.application-question-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px 14px 22px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: rgba(0,0,0,.12);
}
.application-question-number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,95,46,.18);
  border: 1px solid rgba(255,95,46,.34);
  color: #ffbd8d;
  font-weight: 900;
  line-height: 1;
}
.application-question-title-wrap {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.application-question-title-wrap h3 {
  margin: 3px 0 0;
  font-size: 1rem;
  line-height: 1.35;
  color: #fff;
}
.application-required-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255,95,46,.16);
  border: 1px solid rgba(255,95,46,.28);
  color: #ffbe91;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.application-choice-list-modern {
  padding: 16px 18px 18px 22px;
  margin-top: 0;
}
.application-choice-option {
  min-height: 48px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.application-choice-option:hover,
.application-choice-option:focus-within {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,95,46,.32);
  transform: translateY(-1px);
}
.application-choice-option input[type="radio"],
.application-choice-option input[type="checkbox"] {
  accent-color: #ff5f2e;
  inline-size: 16px;
  block-size: 16px;
  flex: 0 0 auto;
}
.application-choice-option span {
  font-weight: 700;
  color: rgba(255,255,255,.88);
}
.application-question-textarea {
  margin: 16px 18px 18px 22px;
  width: calc(100% - 40px) !important;
  min-height: 120px;
  resize: vertical;
}
.applications-list {
  gap: 10px;
}
.application-review-card-compact {
  display: block;
  padding: 12px 14px;
  border-radius: 18px;
}
.application-review-card-compact.is-new {
  box-shadow: inset 3px 0 0 rgba(255,95,46,.85);
}
.application-review-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.application-review-summary-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.application-review-summary-copy {
  min-width: 0;
}
.application-review-summary-copy h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}
.application-review-summary-copy p {
  margin: 4px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.application-review-summary-copy p strong {
  color: rgba(255,255,255,.82);
}
.application-review-summary-copy p span {
  color: rgba(255,255,255,.26);
  padding: 0 5px;
}
.application-review-summary-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.application-review-mini-meta {
  color: rgba(255,255,255,.55);
  font-size: 12px;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.application-review-drawer {
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 8px;
}
.application-review-drawer > summary {
  cursor: pointer;
  width: max-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  font-size: 12px;
}
.application-review-drawer[open] > summary {
  margin-bottom: 12px;
  background: rgba(255,95,46,.15);
  border-color: rgba(255,95,46,.28);
  color: #ffd0ba;
}
.application-review-drawer-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 280px;
  gap: 14px;
  align-items: start;
}
.application-meta-grid-compact {
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  margin: 0;
}
.application-meta-grid-compact span {
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
}
.application-meta-grid-compact strong {
  font-size: 10px;
  margin-bottom: 2px;
}
.application-details-compact {
  margin-top: 10px;
}
.application-details-compact summary {
  font-size: 12px;
}
.application-review-actions-compact {
  gap: 8px;
}
.application-activation-form-compact,
.application-status-form-compact {
  padding: 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.07);
}
.application-activation-form-compact .application-auto-password-note {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.35;
}
.application-status-form-compact textarea {
  min-height: 58px;
}
.application-status-form-compact .btn2,
.application-activation-form-compact .btn {
  width: 100%;
  min-height: 38px;
}
@media (max-width: 1000px) {
  .application-review-summary-row,
  .application-review-summary-left,
  .application-review-summary-right {
    align-items: flex-start;
  }
  .application-review-summary-row {
    flex-direction: column;
  }
  .application-review-drawer-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .application-question-head {
    padding: 16px;
  }
  .application-choice-list-modern {
    padding: 14px 14px 16px;
  }
  .application-question-textarea {
    margin: 14px;
    width: calc(100% - 28px) !important;
  }
  .application-meta-grid-compact {
    grid-template-columns: 1fr;
  }
  .application-review-summary-copy p {
    white-space: normal;
  }
}

/* Final account/profile menu position repair
   Keeps the top-right profile menu contained inside the frontend/admin topbar.
   This also neutralizes the generic .actions margin that was pushing it out of place. */
.top > .frontend-top-actions,
.admin-head.topbar > .topbar-actions,
.shared-admin-topbar > .topbar-actions {
  margin-top: 0 !important;
  flex-wrap: nowrap !important;
  align-self: center !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  min-width: max-content;
}

.top > .frontend-top-actions .account-menu,
.top > .frontend-top-actions .public-account-menu,
.admin-head.topbar > .topbar-actions .account-menu,
.admin-head.topbar > .topbar-actions .admin-account-menu,
.shared-admin-topbar > .topbar-actions .account-menu,
.shared-admin-topbar > .topbar-actions .admin-account-menu {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
  z-index: 1500 !important;
}

.top > .frontend-top-actions .account-menu-button,
.admin-head.topbar > .topbar-actions .account-menu-button,
.shared-admin-topbar > .topbar-actions .account-menu-button {
  flex: 0 0 42px !important;
  margin: 0 !important;
}

.top > .frontend-top-actions .account-dropdown,
.admin-head.topbar > .topbar-actions .account-dropdown,
.shared-admin-topbar > .topbar-actions .account-dropdown {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: 260px !important;
  max-width: calc(100vw - 28px) !important;
  z-index: 1700 !important;
}

.top > .frontend-top-actions .account-menu.open .account-dropdown,
.top > .frontend-top-actions .public-account-menu.open .account-dropdown,
.admin-head.topbar > .topbar-actions .account-menu.open .account-dropdown,
.shared-admin-topbar > .topbar-actions .account-menu.open .account-dropdown {
  display: grid !important;
  gap: 6px !important;
}

@media (max-width: 850px) {
  .top > .frontend-top-actions,
  .admin-head.topbar > .topbar-actions,
  .shared-admin-topbar > .topbar-actions {
    margin-left: auto !important;
    gap: 8px !important;
    min-width: 0;
  }

  .top > .frontend-top-actions .account-dropdown,
  .admin-head.topbar > .topbar-actions .account-dropdown,
  .shared-admin-topbar > .topbar-actions .account-dropdown {
    right: 0 !important;
    width: min(260px, calc(100vw - 20px)) !important;
  }
}


/* Compact two-column public application questions + dropdown answer type */
.application-question-list-modern {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px !important;
  align-items: start;
}
.application-question-card-modern {
  border-radius: 16px !important;
  min-width: 0;
}
.application-question-head {
  gap: 10px !important;
  padding: 12px 14px 10px 16px !important;
}
.application-question-number {
  flex-basis: 28px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}
.application-question-title-wrap {
  gap: 7px !important;
}
.application-question-title-wrap h3 {
  font-size: .92rem !important;
  line-height: 1.25 !important;
  margin-top: 2px !important;
}
.application-required-pill {
  height: 20px !important;
  padding: 0 7px !important;
  font-size: 9px !important;
}
.application-choice-list-modern {
  padding: 12px 14px 14px 16px !important;
  gap: 8px !important;
}
.application-choice-option {
  min-height: 40px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
}
.application-choice-option span {
  font-size: .92rem !important;
}
.application-dropdown-wrap {
  padding: 12px 14px 14px 16px;
}
.application-question-select {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  padding: 0 12px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.11);
  color: rgba(255,255,255,.9);
  font-weight: 800;
  outline: none;
}
.application-question-select:focus {
  border-color: rgba(255,95,46,.46);
  box-shadow: 0 0 0 3px rgba(255,95,46,.12);
}
.application-question-select option {
  background: #101820;
  color: #fff;
}
.application-question-textarea {
  margin: 12px 14px 14px 16px !important;
  width: calc(100% - 30px) !important;
  min-height: 86px !important;
  border-radius: 12px !important;
}
@media (max-width: 900px) {
  .application-question-list-modern {
    grid-template-columns: 1fr !important;
  }
}

/* Global no-reload form validation highlights */
.validation-error-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 77, 90, .38);
  border-radius: 16px;
  background: rgba(255, 77, 90, .10);
  color: #ff9aa2;
  font-weight: 900;
}
.validation-error-summary span {
  color: var(--muted);
  font-size: .86rem;
  font-weight: 800;
}
input.is-invalid,
select.is-invalid,
textarea.is-invalid,
.field-invalid > input,
.field-invalid > select,
.field-invalid > textarea {
  border-color: rgba(255, 77, 90, .88) !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 90, .14) !important;
}
.field-invalid,
.group-invalid {
  border-color: rgba(255, 77, 90, .55) !important;
}
label.field-invalid,
.form-grid label.field-invalid,
.personnel-form-group label.field-invalid {
  color: #ff9aa2 !important;
}
.application-question-card.field-invalid,
.training-public-question-card.field-invalid,
.group-invalid.application-choice-list,
.group-invalid.application-choice-list-modern {
  border-color: rgba(255, 77, 90, .62) !important;
  box-shadow: inset 3px 0 0 rgba(255, 77, 90, .9), 0 0 0 3px rgba(255, 77, 90, .08) !important;
}
.group-invalid.application-choice-list,
.group-invalid.application-choice-list-modern {
  border: 1px solid rgba(255, 77, 90, .52) !important;
  border-radius: 14px;
}
.field-error-note,
.validation-error-note {
  width: 100%;
  margin-top: 7px;
  color: #ff9aa2;
  font-size: .78rem;
  line-height: 1.35;
  font-weight: 900;
}
.application-question-card > .field-error-note,
.training-public-question-card > .field-error-note,
.application-choice-list > .field-error-note,
.application-choice-list-modern > .field-error-note {
  margin: 0 14px 12px 16px;
}
.field-invalid .application-required-pill {
  background: rgba(255, 77, 90, .24) !important;
  border-color: rgba(255, 77, 90, .56) !important;
  color: #ffb0b6 !important;
}


/* Required field markers: use only a simple star on the label/question title. */
.required-marker {
  color: inherit;
  font-weight: inherit;
  margin-left: 0;
}
.application-required-pill {
  display: none !important;
}
/* Inline validation now highlights only; no per-field required text under inputs. */
.field-error-note,
.validation-error-note {
  display: none !important;
}

/* Compact inline hints for public application default fields */
.application-default-grid label .field-inline-hint{
  display:inline;
  margin-left:6px;
  margin-top:0;
  color:rgba(255,255,255,.48);
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

/* Keep inline field hints on the same line as the label in application forms */
.application-default-grid label > .label-line{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.application-default-grid label > .label-line .field-inline-hint{
  display:inline !important;
  margin-left:0;
  white-space:nowrap;
}

.application-default-grid label > .label-line .required-marker{
  color:inherit;
  font-weight:inherit;
  margin-left:0;
  flex:0 0 auto;
}

/* Yes / No application question details */
.application-yesno-admin-settings{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.03);
  display:grid;
  gap:10px;
}
.application-yesno-dropdown-wrap{
  max-width:360px;
}
.application-yesno-details{
  margin-top:10px;
  padding:10px 12px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.application-yesno-details[hidden],
.application-yesno-details.hidden{
  display:none !important;
}
.application-yesno-details label,
.application-followup-field{
  display:grid;
  gap:8px;
  margin:0;
}
.application-followup-label{
  color:var(--muted);
  font-size:.86rem;
  font-weight:700;
  line-height:1.25;
}
.application-yesno-details .application-question-textarea{
  min-height:76px;
}

/* Public application question categories */
.application-question-category-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0 16px;
}
.application-question-category-tab{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.86);
  font-weight:900;
  font-size:.84rem;
  text-decoration:none;
}
.application-question-category-tab:hover,
.application-question-category-tab:focus{
  border-color:rgba(255,95,46,.38);
  background:rgba(255,95,46,.12);
  color:#fff;
}
.application-question-category-list{
  display:grid;
  gap:16px;
}
.application-question-category-block{
  scroll-margin-top:90px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.025);
  overflow:hidden;
}
.application-question-category-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg, rgba(255,95,46,.12), rgba(255,176,46,.045));
}
.application-question-category-kicker{
  color:var(--accent);
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.application-question-category-head h3{
  margin:0;
  color:#fff;
  font-size:1.05rem;
  line-height:1.25;
}
.application-question-category-block .application-question-list-modern{
  padding:14px;
}
.application-answer-category{
  margin:12px 0 8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
}
.application-answer-category span{
  color:var(--accent);
  font-size:.75rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
@media (max-width: 900px){
  .application-question-category-block .application-question-list-modern{
    padding:12px;
  }
}

/* Application question category manager */
.application-category-modal .personnel-modal-panel,
#applicationCategoryModal .personnel-modal-panel{
  max-width:760px;
  max-height:min(90vh,760px);
  display:flex;
  flex-direction:column;
}
.application-category-modal .personnel-modal-body,
#applicationCategoryModal .personnel-modal-body{
  overflow-y:auto;
  max-height:calc(90vh - 160px);
}
.application-category-row .sort-member-main small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.application-question-category-head p{
  margin:6px 0 0;
  color:rgba(255,255,255,.62);
  font-size:13px;
  line-height:1.45;
}
@media (max-width: 720px){
  .application-category-row .sort-member-main small{white-space:normal;}
}


/* Final application category/error safety + compact question UI polish */
.application-question-sort-list-clean{
  gap:8px !important;
}
.application-question-row-clean{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto auto auto;
  align-items:center !important;
  gap:10px !important;
  padding:10px 12px !important;
  min-height:0 !important;
  border-radius:16px !important;
}
.application-question-row-content{
  min-width:0;
  display:grid;
  gap:6px;
}
.application-question-row-title{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.application-question-row-title strong{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.94rem;
  line-height:1.25;
}
.application-question-row-no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
  width:28px;
  height:28px;
  border-radius:10px;
  background:rgba(255,95,46,.14);
  border:1px solid rgba(255,95,46,.26);
  color:rgba(255,255,255,.86);
  font-size:12px;
  font-weight:950;
}
.application-question-row-meta{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  min-width:0;
}
.question-meta-chip,
.application-question-row-type,
.application-question-row-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.72);
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.question-meta-category{
  color:rgba(255,214,170,.92);
  border-color:rgba(255,176,46,.20);
  background:rgba(255,176,46,.07);
}
.question-meta-chip.is-required{
  color:rgba(255,255,255,.86);
  border-color:rgba(255,95,46,.22);
  background:rgba(255,95,46,.08);
}
.question-meta-chip.is-hidden,
.application-question-row-state.is-hidden{
  color:rgba(255,255,255,.56);
  background:rgba(255,255,255,.025);
}
.application-question-row-type{
  min-width:122px;
}
.application-question-row-state{
  min-width:74px;
}
.application-question-row-state.is-visible{
  color:rgba(190,255,213,.88);
  border-color:rgba(34,197,94,.20);
  background:rgba(34,197,94,.07);
}
.application-question-row-actions{
  gap:6px !important;
  flex-wrap:nowrap !important;
}
.application-question-drag{
  width:30px;
  height:30px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Compact frontend multiple choice, checkboxes and dropdowns */
.application-question-card-modern .application-choice-list-modern{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap:7px !important;
  padding:10px 12px 12px 14px !important;
}
.application-question-card-modern .application-choice-option{
  min-height:34px !important;
  padding:6px 9px !important;
  gap:8px !important;
  border-radius:10px !important;
  align-items:center !important;
}
.application-question-card-modern .application-choice-option input[type="radio"],
.application-question-card-modern .application-choice-option input[type="checkbox"]{
  inline-size:14px !important;
  block-size:14px !important;
}
.application-question-card-modern .application-choice-option span{
  font-size:.86rem !important;
  line-height:1.2 !important;
}
.application-question-card-modern .application-dropdown-wrap,
.application-question-card-modern .application-yesno-dropdown-wrap{
  padding:10px 12px 12px 14px !important;
  max-width:330px !important;
}
.application-question-card-modern .application-question-select{
  min-height:38px !important;
  height:38px !important;
  border-radius:10px !important;
  padding:0 11px !important;
  font-size:.88rem !important;
}
.application-question-card-modern .application-question-textarea{
  min-height:74px !important;
  margin:10px 12px 12px 14px !important;
  width:calc(100% - 26px) !important;
}
.application-question-card-modern .application-yesno-details{
  margin:0 12px 12px 14px !important;
  padding:10px !important;
}
.application-question-card-modern .application-followup-label{
  display:block;
  margin:0 0 7px !important;
  padding:0 !important;
  color:rgba(255,255,255,.66) !important;
  font-size:.82rem !important;
  font-weight:800 !important;
  line-height:1.3 !important;
}
.application-question-card-modern .application-yesno-details .application-question-textarea{
  margin:0 !important;
  width:100% !important;
}
@media (max-width: 980px){
  .application-question-row-clean{
    grid-template-columns:auto minmax(0,1fr) auto;
  }
  .application-question-row-type,
  .application-question-row-state{
    display:none;
  }
}
@media (max-width: 640px){
  .application-question-row-clean{
    grid-template-columns:auto minmax(0,1fr);
  }
  .application-question-row-actions{
    grid-column:1 / -1;
    justify-content:flex-end !important;
  }
  .application-question-row-title strong{
    white-space:normal;
  }
  .application-question-card-modern .application-choice-list-modern{
    grid-template-columns:1fr !important;
  }
}

/* Question category manager polish + safer public category layout */
.application-category-manager-card .personnel-manager-top{
  align-items:flex-start;
}
.application-category-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:16px 0 14px;
}
.application-category-stat{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  padding:12px 14px;
  min-height:74px;
}
.application-category-stat span{
  display:block;
  color:rgba(255,255,255,.58);
  font-size:12px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.application-category-stat strong{
  display:block;
  margin-top:6px;
  color:#fff;
  font-size:1.5rem;
  line-height:1;
}
.application-category-toolbar{
  margin-top:8px;
}
.application-category-sort-list{
  gap:10px !important;
}
.application-category-row-clean{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:12px !important;
  align-items:center !important;
  padding:12px 14px !important;
  border-radius:18px !important;
  background:linear-gradient(135deg, rgba(255,255,255,.052), rgba(255,255,255,.025)) !important;
  border:1px solid rgba(255,255,255,.105) !important;
  position:relative;
  overflow:hidden;
}
.application-category-row-clean::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background:var(--accent);
  opacity:.85;
}
.application-category-row-clean:hover{
  border-color:rgba(255,95,46,.25) !important;
  background:linear-gradient(135deg, rgba(255,95,46,.07), rgba(255,255,255,.028)) !important;
}
.application-category-drag{
  width:30px;
  height:30px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:2px;
}
.application-category-row-main{
  min-width:0;
  display:grid;
  gap:5px;
}
.application-category-row-title{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex-wrap:wrap;
}
.application-category-row-title strong{
  color:#fff;
  font-size:1rem;
  line-height:1.22;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.application-category-row-main p{
  margin:0;
  color:rgba(255,255,255,.58);
  font-size:12px;
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.application-category-row-main p.muted{
  color:rgba(255,255,255,.38) !important;
}
.application-category-status{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.72);
  font-size:11px;
  font-weight:950;
}
.application-category-status.is-visible{
  color:rgba(190,255,213,.9);
  border-color:rgba(34,197,94,.22);
  background:rgba(34,197,94,.08);
}
.application-category-status.is-hidden{
  color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.025);
}
.application-category-count{
  display:grid;
  place-items:center;
  min-width:86px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
}
.application-category-count strong{
  color:#fff;
  font-size:1rem;
  line-height:1;
}
.application-category-count span{
  margin-top:3px;
  color:rgba(255,255,255,.54);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.application-category-actions{
  flex-wrap:nowrap !important;
  gap:6px !important;
}
.application-question-category-block.is-uncategorized{
  border:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.application-question-category-block.is-uncategorized .application-question-list-modern{
  padding:0 !important;
}
.application-question-category-head{
  background:linear-gradient(135deg, rgba(255,95,46,.13), rgba(255,176,46,.05)) !important;
}
.application-question-category-kicker{
  opacity:.9;
}
.application-question-category-tabs{
  padding:8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}
@media (max-width: 860px){
  .application-category-stats{grid-template-columns:1fr;}
  .application-category-row-clean{grid-template-columns:auto minmax(0,1fr) auto;}
  .application-category-actions{grid-column:1 / -1; justify-content:flex-end !important;}
}
@media (max-width: 560px){
  .application-category-row-clean{grid-template-columns:auto minmax(0,1fr);}
  .application-category-count{grid-column:2; place-items:start; min-width:0; width:max-content;}
  .application-category-row-title strong,
  .application-category-row-main p{white-space:normal;}
}

/* Public application submitted state */
.application-success-card .actions{
  justify-content:center;
  margin-top:28px;
}
.application-success-card p{
  max-width:920px;
  margin-left:auto;
  margin-right:auto;
}

/* Question numbers removed from frontend and backend question lists */
.application-question-number,
.application-question-row-no{
  display:none !important;
}
.application-question-head{
  gap:0 !important;
}
.application-question-title-wrap{
  width:100%;
}

/* Applications review modal */
.application-review-modal-panel{
  width:min(1040px, calc(100vw - 34px));
  max-height:calc(100vh - 48px);
  display:flex;
  flex-direction:column;
}
.application-review-modal-body{
  overflow:auto;
  padding-bottom:18px;
}
.application-review-modal-summary{
  margin-bottom:14px;
}
.application-review-info-grid,
.application-review-answer-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.application-review-answer-dropdown{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.12);
  border-radius:16px;
  overflow:hidden;
}
.application-review-answer-dropdown > summary{
  cursor:pointer;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:900;
  color:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.application-review-answer-dropdown > summary span{
  display:inline-flex;
  min-width:24px;
  height:24px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,95,46,.16);
  border:1px solid rgba(255,95,46,.26);
  color:#ffd0ba;
  font-size:12px;
}
.application-review-answer-grid{
  padding:12px;
  margin:0;
}
.application-review-answer-grid span,
.application-review-info-grid span{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.45;
}
.application-review-answer-grid em{
  display:inline-block;
  margin-bottom:5px;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.58);
  font-style:normal;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.application-review-action-panel{
  display:grid;
  gap:12px;
}
.application-status-form-modal,
.application-activation-form-modal{
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
}
.application-status-form-modal textarea{
  min-height:94px;
}
.application-activation-form-modal .application-auto-password-note{
  margin:0;
  line-height:1.45;
}
.application-review-modal-footer{
  gap:10px;
  flex-wrap:wrap;
}
.application-review-summary-right .btn2.small{
  min-height:32px;
  padding:7px 12px;
}
@media (max-width:900px){
  .application-review-info-grid,
  .application-review-answer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:650px){
  .application-review-info-grid,
  .application-review-answer-grid{
    grid-template-columns:1fr;
  }
  .application-review-modal-footer .btn,
  .application-review-modal-footer .btn2{
    width:100%;
  }
}


/* Application review modal and public application polish */
.application-review-modal-footer{
  justify-content:flex-end;
}
.application-review-answer-sections{
  display:grid;
  gap:14px;
  padding:14px;
}
.application-review-answer-section{
  display:grid;
  gap:10px;
}
.application-review-answer-section h4{
  margin:0;
  color:rgba(255,255,255,.88);
  font-size:.86rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.application-review-answer-box-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.application-review-answer-box{
  display:block;
  min-width:0;
  padding:12px 13px;
  border-radius:16px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.78);
  overflow:visible;
  text-overflow:clip;
  line-height:1.45;
}
.application-review-answer-box strong{
  display:block;
  margin:0 0 7px;
  color:rgba(255,255,255,.92);
  font-size:.78rem;
  line-height:1.35;
  letter-spacing:.02em;
  text-transform:none;
}
.application-review-answer-box b{
  display:block;
  color:rgba(255,255,255,.76);
  font-size:.9rem;
  line-height:1.45;
  font-weight:650;
}
.application-review-answer-dropdown > summary{
  position:sticky;
  top:0;
  z-index:1;
  background:rgba(15,22,28,.96);
}

.application-public-form .application-form-section{
  margin:0 0 18px;
  padding:20px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  background:rgba(255,255,255,.028);
}
.application-public-form .application-form-section:last-of-type{
  border-bottom:1px solid rgba(255,255,255,.10);
}
.application-public-form .application-form-section > h2{
  margin:0 0 16px;
  font-size:1.35rem;
}
.application-question-category-tabs{
  display:none !important;
}
.application-question-category-list{
  gap:18px;
}
.application-question-category-block{
  border:0;
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.application-question-category-head{
  margin:0 0 12px;
  padding:0 0 10px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:transparent;
}
.application-question-category-kicker{
  display:none;
}
.application-question-category-head h3{
  font-size:1.08rem;
}
.application-question-category-block .application-question-list-modern{
  padding:0;
}
.application-question-card-modern{
  border-radius:18px !important;
  background:rgba(255,255,255,.032) !important;
  box-shadow:none !important;
}
.application-question-card-modern::before{
  width:2px;
  opacity:.85;
}
.application-question-card-modern .application-question-head{
  padding:13px 14px 11px 16px !important;
  background:rgba(0,0,0,.08) !important;
}
.application-question-card-modern .application-question-title-wrap h3{
  font-size:.9rem !important;
  line-height:1.28 !important;
}
.application-question-card-modern .application-choice-list-modern{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
}
@media (max-width:900px){
  .application-review-answer-box-grid{
    grid-template-columns:1fr;
  }
  .application-public-form .application-form-section{
    padding:16px;
  }
}


/* Final public application category title cleanup
   Keeps category titles readable without the weird full-width dark strip. */
.application-public-form .application-question-category-list{
  display:grid !important;
  gap:22px !important;
}
.application-public-form .application-question-category-block{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  overflow:visible !important;
  scroll-margin-top:90px;
}
.application-public-form .application-question-category-head{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:5px !important;
  margin:2px 0 12px !important;
  padding:0 0 10px !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  background:transparent !important;
  box-shadow:none !important;
}
.application-public-form .application-question-category-kicker{
  display:none !important;
}
.application-public-form .application-question-category-head h3{
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:rgba(255,255,255,.94) !important;
  font-size:1.05rem !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
}
.application-public-form .application-question-category-head p{
  margin:0 !important;
  max-width:850px !important;
  color:rgba(207,218,227,.72) !important;
  font-size:.88rem !important;
  line-height:1.45 !important;
}
.application-public-form .application-question-category-block .application-question-list-modern{
  padding:0 !important;
}
.application-public-form .application-question-category-block.is-uncategorized{
  margin-top:0 !important;
}
.application-public-form .application-question-card-modern{
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.030) !important;
}

/* Live search feedback for server-filtered admin pages */
[data-live-get-search].live-search-loading{
  opacity:.72;
  transition:opacity .16s ease;
}


/* Users page role tabs */
.users-tabbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:-4px;
}
.users-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  color:var(--text);
  font-weight:1000;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.users-tab:hover{
  transform:translateY(-1px);
  border-color:rgba(255,159,28,.28);
}
.users-tab.active{
  background:rgba(255,159,28,.14);
  border-color:rgba(255,159,28,.36);
  color:#fff;
}
.users-tab span{
  display:inline-grid;
  place-items:center;
  min-width:24px;
  height:24px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
  color:var(--muted);
  font-size:.76rem;
  line-height:1;
}
.users-tab.active span{
  color:var(--brand2);
  background:rgba(0,0,0,.24);
}
.users-tab-empty{
  margin-top:4px;
}
@media (max-width:640px){
  .users-tabbar{
    display:grid;
    grid-template-columns:1fr;
  }
  .users-tab{
    width:100%;
    justify-content:space-between;
  }
}

/* Settings section tabs */
.settings-section-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.035);
}
.settings-section-tabs a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:var(--text);
  text-decoration:none;
  font-weight:900;
  font-size:.86rem;
}
.settings-section-tabs a:hover{
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.08);
}


/* Optional frontend sidebar highlight / flashing menu */
.sidebar-flash-option {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: auto;
  box-shadow: none;
}
.sidebar-flash-option input {
  width: 16px !important;
  height: 16px !important;
  min-height: auto !important;
  margin: 2px 0 0;
  flex: 0 0 auto;
}
.sidebar-flash-option span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar-flash-option strong {
  display: block;
  line-height: 1.2;
  font-size: .86rem;
  color: var(--text);
}
.sidebar-flash-option small {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.25;
}
.flash-mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 9px;
  border: 1px solid rgba(255,159,28,.28);
  background: rgba(255,159,28,.10);
  color: var(--brand2);
  font-size: .78rem;
  line-height: 1;
}
.sidebar .nav-link.is-flashing,
.sidebar .sub.is-flashing,
.drawer .nav-link.is-flashing,
.drawer .sub.is-flashing,
.bottom a.is-flashing {
  position: relative;
  overflow: hidden;
  color: var(--text) !important;
  border-color: rgba(255,159,28,.70) !important;
  background:
    radial-gradient(circle at 18px 50%, rgba(255,159,28,.32), transparent 38px),
    linear-gradient(90deg, rgba(255,59,34,.22), rgba(255,159,28,.12)) !important;
  box-shadow: 0 0 0 1px rgba(255,159,28,.18), 0 0 24px rgba(255,95,46,.26);
  animation: sidebarFlashSoftPulse 1.25s ease-in-out infinite;
}
.sidebar .nav-link.is-flashing::after,
.sidebar .sub.is-flashing::after,
.drawer .nav-link.is-flashing::after,
.drawer .sub.is-flashing::after,
.bottom a.is-flashing::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.20) 44%, transparent 74%);
  transform: translateX(-135%);
  animation: sidebarFlashSoftSweep 1.8s ease-in-out infinite;
}
.sidebar .nav-link.is-flashing .nav-icon,
.sidebar .sub.is-flashing .sub-menu-icon,
.drawer .nav-link.is-flashing .nav-icon,
.drawer .sub.is-flashing .sub-menu-icon,
.bottom a.is-flashing span {
  color: var(--brand2) !important;
}
@keyframes sidebarFlashSoftPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.24); }
}
@keyframes sidebarFlashSoftSweep {
  0% { transform: translateX(-135%); }
  55%, 100% { transform: translateX(135%); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-link.is-flashing,
  .sidebar .sub.is-flashing,
  .drawer .nav-link.is-flashing,
  .drawer .sub.is-flashing,
  .bottom a.is-flashing,
  .sidebar .nav-link.is-flashing::after,
  .sidebar .sub.is-flashing::after,
  .drawer .nav-link.is-flashing::after,
  .drawer .sub.is-flashing::after,
  .bottom a.is-flashing::after {
    animation: none !important;
  }
}


/* Mini sidebar flyout close fix: do not keep dropdowns open by CSS hover alone.
   JS opens them with .mini-flyout-open and closes them when the cursor leaves the sidebar/flyout area. */
body.sidemenu-mini .nav-item.has-submenu:hover:not(.mini-flyout-open) .submenu-links,
body.sidemenu-mini .nav-item.has-submenu:hover:not(.mini-flyout-open) .subs,
body.sidemenu-mini .sidebar .nav-item.has-submenu:hover:not(.mini-flyout-open) .submenu-links,
body.sidemenu-mini .sidebar .nav-item.has-submenu:hover:not(.mini-flyout-open) .subs,
body.sidemenu-mini .admin-sidebar .nav-item.has-submenu:hover:not(.mini-flyout-open) .submenu-links,
body.sidemenu-mini .admin-sidebar .nav-item.has-submenu:hover:not(.mini-flyout-open) .subs {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.sidemenu-mini .nav-item.has-submenu:hover:not(.mini-flyout-open) .sub-toggle::before,
body.sidemenu-mini .nav-item.has-submenu:hover:not(.mini-flyout-open) .submenu-toggle::before {
  content: "›" !important;
}

/* Application review action cleanup */
.application-review-modal-footer .application-accept-btn,
.btn2.success.application-accept-btn{
  background:rgba(34,197,94,.16) !important;
  border-color:rgba(34,197,94,.34) !important;
  color:#a7f3d0 !important;
}
.application-review-modal-footer .application-accept-btn:hover,
.btn2.success.application-accept-btn:hover{
  background:rgba(34,197,94,.24) !important;
  border-color:rgba(34,197,94,.48) !important;
}
.application-reject-form-modal{
  border-color:rgba(255,77,90,.18) !important;
  background:rgba(255,77,90,.045) !important;
}
.application-finalized-note{
  margin:8px 0 0;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}
.users-tab[data-user-tab-button="permissions"]{
  min-width:120px;
}

/* Application review reject / temporary password display */
.application-review-modal-footer #applicationRejectButton,
.btn2.danger#applicationRejectButton{
  background:rgba(239,68,68,.18) !important;
  border-color:rgba(239,68,68,.55) !important;
  color:#fecaca !important;
  box-shadow:0 0 0 1px rgba(239,68,68,.10) inset !important;
}
.application-review-modal-footer #applicationRejectButton:hover,
.btn2.danger#applicationRejectButton:hover{
  background:rgba(239,68,68,.28) !important;
  border-color:rgba(239,68,68,.75) !important;
  color:#fff !important;
}
.application-temp-password-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:7px 12px;
  border-radius:999px;
  color:#fde68a;
  border:1px solid rgba(245,158,11,.28);
  background:rgba(245,158,11,.08);
  font-size:.82rem;
  font-weight:800;
  white-space:nowrap;
}
.application-temp-password-box{
  border-color:rgba(245,158,11,.28) !important;
  background:rgba(245,158,11,.075) !important;
  display:grid !important;
  grid-template-columns:1fr auto;
  gap:8px 10px;
  align-items:center;
}
.application-temp-password-box strong{
  grid-column:1 / -1;
}
.application-temp-password-box code{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 10px;
  border-radius:12px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.08);
  color:#fde68a;
  font:800 .95rem/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
}
.btn2.tiny.application-temp-copy{
  min-height:34px;
  padding:7px 10px;
  font-size:.78rem;
  border-radius:12px;
}
@media (max-width: 760px){
  .application-temp-password-box{
    grid-template-columns:1fr;
  }
}


/* Notification read actions + finalized application buttons */
.notification-item-personal{
  position:relative;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) !important;
  align-items:center;
  gap:12px;
  padding:12px !important;
  overflow:hidden;
}
.notification-item-personal .notification-item-icon{
  grid-column:1;
  grid-row:1;
}
.notification-item-body-link{
  grid-column:2;
  grid-row:1;
  min-width:0;
  display:block;
  color:inherit;
  text-decoration:none;
  padding-right:2px;
}
.notification-item-body-link:hover strong{
  color:#fff;
}
.notification-item-personal .notification-item-body strong{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.notification-item-personal .notification-item-body small{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  max-width:100%;
}
.notification-mark-read{
  all:unset !important;
  box-sizing:border-box !important;
  grid-column:3;
  grid-row:1;
  justify-self:end;
  align-self:start;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.76) !important;
  font-size:10px !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  transition:.16s ease !important;
  box-shadow:0 6px 14px rgba(0,0,0,.18) !important;
}
.notification-mark-read:hover{
  background:rgba(34,197,94,.18) !important;
  border-color:rgba(34,197,94,.42) !important;
  color:#a7f3d0 !important;
  transform:translateY(-1px);
}
.notification-mark-read:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
  transform:none !important;
}
.notification-item-arrow-link{
  grid-column:4;
  grid-row:1;
  color:rgba(255,255,255,.5);
  text-decoration:none;
  font-size:24px;
  line-height:1;
  justify-self:end;
}
.notification-item-personal:hover .notification-item-arrow-link{
  color:rgba(255,255,255,.72);
}
.application-review-modal-footer .btn2:disabled,
.application-review-modal-footer .btn2.is-disabled,
.btn2#applicationRejectButton:disabled,
.btn2#applicationActivateButton:disabled{
  opacity:.46 !important;
  cursor:not-allowed !important;
  filter:grayscale(.55) !important;
  box-shadow:none !important;
  transform:none !important;
}
.application-review-modal-footer .btn2:disabled:hover,
.application-review-modal-footer .btn2.is-disabled:hover{
  transform:none !important;
}
body.light .notification-mark-read{
  background:rgba(22,163,74,.10) !important;
  border-color:rgba(22,163,74,.24) !important;
  color:#166534 !important;
}
body.light .notification-item-body-link:hover strong{
  color:#111827;
}
body.light .notification-item-arrow-link{
  color:rgba(17,24,39,.42);
}
@media (max-width:680px){
  .notification-item-personal{
    grid-template-columns:42px minmax(0,1fr) !important;
    gap:10px;
  }
  .notification-item-personal .notification-item-body strong{
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
}



/* Keep read notifications visible after mark-as-read; only dim their styling. */
.notification-item-personal.is-read{
  display:grid !important;
  visibility:visible !important;
}


/* Notification cards: clicking the card/link now marks personal notifications as read, so separate eye/read buttons and right arrows are not used. */
.notification-item{
  grid-template-columns:42px minmax(0,1fr) !important;
}
.notification-item-personal{
  grid-template-columns:42px minmax(0,1fr) !important;
}
.notification-mark-read,
.notification-read-spacer,
.notification-item-arrow,
.notification-item-arrow-link{
  display:none !important;
}
.notification-item-body-link{
  padding-right:0 !important;
}

/* Notification dropdown scroll limit */
.notification-list{
  max-height:min(470px, calc(100vh - 190px));
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
  scrollbar-gutter:stable;
}
.notification-list .notification-item + .notification-item{
  margin-top:6px;
}
.notification-list::-webkit-scrollbar{
  width:7px;
}
.notification-list::-webkit-scrollbar-track{
  background:rgba(255,255,255,.045);
  border-radius:999px;
}
.notification-list::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22);
  border-radius:999px;
}
.notification-list::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.34);
}
body.light .notification-list::-webkit-scrollbar-track{
  background:rgba(15,23,42,.06);
}
body.light .notification-list::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.22);
}
body.light .notification-list::-webkit-scrollbar-thumb:hover{
  background:rgba(15,23,42,.34);
}
@media (max-width:680px){
  .notification-list{
    max-height:min(430px, calc(100vh - 170px));
  }
}

/* Training applications: match the compact Applications List layout */
.training-applications-list-view .training-status-tabs{
  margin-top:18px;
}
.training-applications-list-view .training-filter-toolbar{
  margin-bottom:18px;
}
.training-application-list-compact{
  gap:10px;
}
.training-application-card-compact{
  display:block;
  padding:12px 14px;
  border-radius:18px;
}
.training-application-card-compact.selected{
  border-color:rgba(255,95,46,.42);
  box-shadow:inset 3px 0 0 rgba(255,95,46,.85);
}
.training-application-card-compact .application-status-pill{
  flex:0 0 auto;
  margin-left:0;
}
.training-review-summary-right .application-review-mini-meta{
  max-width:230px;
}
.training-applications-list-view .personnel-manager-top .btn{
  white-space:nowrap;
}
@media (max-width: 1000px){
  .training-application-card-compact .application-review-summary-row,
  .training-application-card-compact .application-review-summary-left,
  .training-application-card-compact .application-review-summary-right{
    align-items:flex-start;
  }
  .training-application-card-compact .application-review-summary-row{
    flex-direction:column;
  }
}
@media (max-width: 700px){
  .training-applications-list-view .training-filter-toolbar select,
  .training-applications-list-view .training-filter-toolbar .btn2{
    width:100%;
  }
  .training-review-summary-right .application-review-mini-meta{
    max-width:100%;
  }
}


/* 2026-05-21 UI polish: application manager spacing, dynamic account-link search, unified dropdowns */
.application-question-manager-card,
.application-category-manager-card{
  display:grid;
  gap:20px;
}
.application-question-manager-card > .personnel-manager-top,
.application-category-manager-card > .personnel-manager-top{
  margin-bottom:0;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.application-question-manager-card > .personnel-toolbar,
.application-category-manager-card > .personnel-toolbar{
  margin-top:0;
  margin-bottom:0;
}
.application-question-manager-card .application-question-sort-list-clean,
.application-category-manager-card .application-category-sort-list{
  margin-top:0;
}
.application-question-manager-card .personnel-manager-top .actions,
.application-category-manager-card .personnel-manager-top .actions{
  align-self:center;
}
@media (max-width: 760px){
  .application-question-manager-card > .personnel-manager-top,
  .application-category-manager-card > .personnel-manager-top{
    display:grid;
    align-items:start;
  }
  .application-question-manager-card > .personnel-toolbar,
  .application-category-manager-card > .personnel-toolbar{
    grid-template-columns:1fr;
  }
}

.account-link-search-toolbar{
  grid-template-columns:minmax(240px,1fr);
  margin-top:4px;
}
.account-link-row.is-hidden-by-search{
  display:none !important;
}
.account-link-search-empty{
  margin-top:10px;
}

/* Keep admin notifications visually identical to the frontend dropdown. */
.topbar-actions .notification-menu,
.frontend-top-actions .notification-menu{
  flex:0 0 auto;
}
.topbar-actions .notification-dropdown,
.frontend-top-actions .notification-dropdown{
  width:min(360px,calc(100vw - 28px));
  border-radius:22px;
  background:rgba(16,20,26,.96);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 24px 70px rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
}
.admin-head .notification-list,
.topbar-actions .notification-list,
.frontend-top-actions .notification-list{
  max-height:min(470px, calc(100vh - 190px));
}
body.light .topbar-actions .notification-dropdown,
body.light .frontend-top-actions .notification-dropdown{
  background:rgba(248,250,252,.98);
  border-color:rgba(15,23,42,.10);
  box-shadow:0 24px 70px rgba(15,23,42,.20);
}

/* Rounded, site-matching select/dropdown styling across frontend and backend. */
select,
.application-question-select,
.application-review-answer-dropdown > summary,
.rich-doc-toolbar select,
.rich-toolbar-select select{
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background-color:rgba(12,17,23,.78) !important;
  background-image:
    radial-gradient(circle at 18% 0%, rgba(255,95,46,.16), transparent 34px),
    linear-gradient(135deg, rgba(255,255,255,.070), rgba(255,255,255,.030)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.72)' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat,no-repeat,no-repeat !important;
  background-position:center,center,right 12px center !important;
  background-size:auto,auto,18px 18px !important;
  color:var(--text,#fff) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
select,
.application-question-select,
.rich-doc-toolbar select,
.rich-toolbar-select select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:42px !important;
  color-scheme:dark;
}
select:hover,
.application-question-select:hover,
.application-review-answer-dropdown > summary:hover,
.rich-doc-toolbar select:hover,
.rich-toolbar-select select:hover{
  border-color:rgba(255,95,46,.28) !important;
  background-color:rgba(18,24,32,.86) !important;
}
select:focus,
.application-question-select:focus,
.rich-doc-toolbar select:focus,
.rich-toolbar-select select:focus{
  border-color:rgba(255,95,46,.48) !important;
  box-shadow:0 0 0 3px rgba(255,95,46,.14), 0 10px 24px rgba(0,0,0,.14) !important;
}
select option,
.application-question-select option,
.rich-doc-toolbar select option,
.rich-toolbar-select select option{
  background:#111820 !important;
  color:#f8fafc !important;
}
body.light select,
body.light .application-question-select,
body.light .application-review-answer-dropdown > summary,
body.light .rich-doc-toolbar select,
body.light .rich-toolbar-select select{
  background-color:rgba(255,255,255,.96) !important;
  background-image:
    radial-gradient(circle at 18% 0%, rgba(255,95,46,.12), transparent 34px),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,245,249,.78)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='rgba(17,24,39,.70)' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") !important;
  border-color:rgba(15,23,42,.14) !important;
  color:#111827 !important;
  color-scheme:light;
}
body.light select option,
body.light .application-question-select option,
body.light .rich-doc-toolbar select option,
body.light .rich-toolbar-select select option{
  background:#ffffff !important;
  color:#111827 !important;
}

/* Business Registry module */
.manager-section-divider,
.business-public-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 6px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.manager-section-divider::after,
.business-public-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.business-info-panel {
  width: min(1180px, calc(100vw - 28px));
  max-height: min(90vh, 920px);
  overflow: hidden;
}

.business-info-panel .personnel-modal-body {
  max-height: calc(90vh - 165px);
  overflow: auto;
  padding-right: 10px;
}

.business-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.business-subhead h3 {
  margin: 0;
}

.business-repeat-list {
  display: grid;
  gap: 12px;
}

.business-repeat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

.business-section-checks {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.business-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.business-check-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  font-weight: 800;
}

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

.business-public-row {
  display: grid;
  grid-template-columns: 54px minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(255,159,28,.09), transparent 38%),
    rgba(255,255,255,.035);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.business-public-row.can-open {
  cursor: pointer;
}

.business-public-row.can-open:hover {
  transform: translateY(-1px);
  border-color: rgba(255,159,28,.28);
  background:
    radial-gradient(circle at top left, rgba(255,159,28,.14), transparent 42%),
    rgba(255,255,255,.055);
}

.business-public-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.business-public-main strong {
  font-size: 1.02rem;
}

.business-public-main small,
.business-public-status small {
  color: var(--muted);
  font-weight: 800;
}

.business-public-main p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.business-public-status {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.business-view-summary,
.business-view-person {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}

.business-view-summary small,
.business-view-person small,
.business-view-person span {
  color: var(--muted);
  font-weight: 800;
}

.business-view-people {
  display: grid;
  gap: 10px;
}

.business-view-equipment {
  display: grid;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.business-view-equipment li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.business-view-equipment li span {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,159,28,.12);
  color: var(--brand2);
  font-weight: 1000;
}

.business-view-notes {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
}

.empty.slim {
  padding: 12px;
  min-height: auto;
}

@media (max-width: 900px) {
  .business-public-row,
  .business-repeat-row {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .business-public-status {
    justify-items: start;
  }
}


/* Business Registry refinements */
.manager-pill.pending {
  background: rgba(148,163,184,.14);
  color: var(--muted);
  border-color: rgba(148,163,184,.22);
}

.business-info-row {
  grid-template-columns: 54px minmax(220px, 1fr) minmax(180px, .75fr) auto auto auto auto;
}

.business-info-row .business-owner-meta strong {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-visibility-list {
  display: grid;
  gap: 12px;
}

.business-visibility-row {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: radial-gradient(circle at top left, rgba(255,159,28,.08), transparent 34%), rgba(255,255,255,.035);
}

.business-visibility-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.business-visibility-title > div {
  display: grid;
  gap: 3px;
}

.business-visibility-title small {
  color: var(--muted);
  font-weight: 800;
}

.business-visibility-switches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.business-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  cursor: pointer;
  user-select: none;
}

.business-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.business-switch-slider {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(148,163,184,.20);
  border: 1px solid rgba(148,163,184,.25);
  transition: background .16s ease, border-color .16s ease;
}

.business-switch-slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  transition: transform .16s ease;
}

.business-switch input:checked + .business-switch-slider {
  background: rgba(255,159,28,.26);
  border-color: rgba(255,159,28,.45);
}

.business-switch input:checked + .business-switch-slider::after {
  transform: translateX(18px);
}

.business-switch strong {
  font-size: .88rem;
}

@media (max-width: 1100px) {
  .business-info-row {
    grid-template-columns: 54px minmax(220px, 1fr) auto auto;
  }

  .business-info-row .manager-meta {
    justify-self: start;
  }
}

@media (max-width: 900px) {
  .business-info-row {
    grid-template-columns: 1fr;
  }
}


/* Business Registry failed inspection + modal scroll refinements */
.manager-pill.failed {
  color: #ff6b6b;
  background: rgba(255, 77, 90, .14);
  border: 1px solid rgba(255, 77, 90, .32);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

.business-public-row .manager-pill.failed,
.business-info-row .manager-pill.failed,
.business-view-summary .manager-pill.failed {
  color: #ff6b6b;
  background:
    radial-gradient(circle at top left, rgba(255, 77, 90, .22), transparent 72%),
    rgba(255, 77, 90, .13);
  border-color: rgba(255, 77, 90, .36);
}

/* Keep add/edit modal headers and footers visible; scroll only the modal body when content is tall. */
.personnel-modal.open {
  overflow: hidden !important;
}

.personnel-modal-panel {
  max-height: calc(100dvh - 48px) !important;
  overflow: hidden !important;
}

.personnel-modal-panel > form {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.personnel-modal-body,
.manager-modal-body {
  min-height: 0 !important;
  max-height: calc(100dvh - 180px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.business-info-panel .personnel-modal-body,
.business-info-panel .manager-modal-body,
.business-view-modal .personnel-modal-body,
.business-view-modal .manager-modal-body {
  max-height: calc(100dvh - 180px) !important;
  overflow-y: auto !important;
}

@media (max-width: 760px) {
  .personnel-modal-panel {
    max-height: calc(100dvh - 16px) !important;
  }

  .personnel-modal-body,
  .manager-modal-body,
  .business-info-panel .personnel-modal-body,
  .business-info-panel .manager-modal-body,
  .business-view-modal .personnel-modal-body,
  .business-view-modal .manager-modal-body {
    max-height: calc(100dvh - 150px) !important;
  }
}


/* Business Registry follow-up refinements: aligned rows, notes box, failed status, and modal scrolling */
.business-list-row,
.business-types-row,
.business-equipment-row {
  grid-template-columns: 54px minmax(280px, 1fr) auto auto;
}

.business-info-row {
  grid-template-columns: 54px minmax(360px, 1fr) auto auto auto auto !important;
  align-items: center;
}

.business-info-row .manager-main small {
  max-width: 620px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-list-row .manager-actions,
.business-types-row .manager-actions,
.business-equipment-row .manager-actions,
.business-info-row .manager-actions {
  justify-self: end;
  min-width: max-content;
}

.business-list-row .manager-pill,
.business-info-row .manager-pill,
.business-types-row .manager-meta,
.business-equipment-row .manager-meta,
.business-info-row .manager-meta {
  justify-self: end;
  white-space: nowrap;
}

.business-view-notes-box {
  min-height: 46px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  line-height: 1.6;
}

.manager-pill.failed,
.application-status-pill.failed,
.business-public-status .failed,
.business-view-summary .failed {
  color: #fecaca !important;
  background: radial-gradient(circle at top left, rgba(239,68,68,.24), transparent 72%), rgba(239,68,68,.16) !important;
  border-color: rgba(239,68,68,.42) !important;
}

.business-public-row:has(.manager-pill.failed),
.business-info-row:has(.manager-pill.failed) {
  border-color: rgba(239,68,68,.24);
}

.business-visibility-row {
  grid-template-columns: minmax(250px, .32fr) minmax(360px, 1fr);
  align-items: center;
}

.business-visibility-title small {
  display: block;
}

.personnel-modal.open,
.business-view-modal.open,
.business-info-modal.open {
  overflow: hidden !important;
}

.personnel-modal-panel,
.manager-modal-panel,
.business-info-panel {
  max-height: calc(100dvh - 48px) !important;
  overflow: hidden !important;
}

.personnel-modal-panel > form,
.manager-modal-panel > form,
.business-info-panel > form {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.personnel-modal-body,
.manager-modal-body,
.business-view-modal .personnel-modal-body,
.business-view-modal .manager-modal-body,
.business-info-modal .personnel-modal-body,
.business-info-modal .manager-modal-body {
  min-height: 0 !important;
  max-height: calc(100dvh - 180px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

@media (max-width: 1100px) {
  .business-list-row,
  .business-types-row,
  .business-equipment-row,
  .business-info-row,
  .business-visibility-row {
    grid-template-columns: 1fr !important;
    justify-items: stretch;
  }

  .business-list-row .manager-actions,
  .business-types-row .manager-actions,
  .business-equipment-row .manager-actions,
  .business-info-row .manager-actions,
  .business-list-row .manager-pill,
  .business-info-row .manager-pill,
  .business-types-row .manager-meta,
  .business-equipment-row .manager-meta,
  .business-info-row .manager-meta {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .personnel-modal-panel,
  .manager-modal-panel,
  .business-info-panel {
    max-height: calc(100dvh - 16px) !important;
  }

  .personnel-modal-body,
  .manager-modal-body,
  .business-view-modal .personnel-modal-body,
  .business-view-modal .manager-modal-body,
  .business-info-modal .personnel-modal-body,
  .business-info-modal .manager-modal-body {
    max-height: calc(100dvh - 150px) !important;
  }
}

/* Business Registry sort-row alignment correction */
.business-types-row,
.business-equipment-row {
  grid-template-columns: 42px 54px minmax(280px, 1fr) auto auto !important;
}

.business-types-row .manager-drag-handle,
.business-equipment-row .manager-drag-handle {
  justify-self: center;
}

.business-types-row .manager-icon,
.business-equipment-row .manager-icon {
  justify-self: start;
}

@media (max-width: 1100px) {
  .business-types-row,
  .business-equipment-row {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }
  .business-types-row .manager-icon,
  .business-types-row .manager-main,
  .business-types-row .manager-meta,
  .business-types-row .manager-actions,
  .business-equipment-row .manager-icon,
  .business-equipment-row .manager-main,
  .business-equipment-row .manager-meta,
  .business-equipment-row .manager-actions {
    grid-column: 2;
  }
  .business-types-row .manager-drag-handle,
  .business-equipment-row .manager-drag-handle {
    grid-column: 1;
    grid-row: 1 / 5;
    align-self: start;
  }
}


/* Admin Pages sortable backend sidebar manager */
.admin-pages-list-form .admin-page-intro { margin-bottom: 18px; }
.admin-pages-order-card .page-admin-row,
.admin-submenu-sort-card .page-admin-row { align-items: center; }
.admin-pages-inline-icon { display:flex; align-items:center; gap:10px; margin:0; min-width:132px; }
.admin-pages-inline-icon .admin-icon-live-preview { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.admin-pages-inline-icon input { width:64px; text-align:center; }
.admin-submenu-sort-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; }
.admin-submenu-sort-card { padding:16px; }
.admin-submenu-sort-head { align-items:flex-start; gap:14px; }
.admin-submenu-sort-head .drag-hint.small { white-space:nowrap; margin-top:3px; }
.admin-submenu-sort-list { margin-top:12px; gap:10px; }
.admin-submenu-sort-row .status-pill { font-size:11px; }
.admin-submenu-sort-row .page-admin-row-main small { font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace); }
@media (max-width: 760px){
  .admin-pages-inline-icon { min-width:0; }
  .admin-submenu-sort-grid { grid-template-columns:1fr; }
}


/* Admin Pages nested list view */
.admin-pages-hero {
  margin-bottom: 18px;
}

.admin-pages-manager-card .manager-toolbar,
.admin-pages-toolbar {
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
}

.admin-pages-category-list {
  gap: 14px;
}

.admin-pages-category-item {
  display: grid;
  gap: 10px;
  scroll-margin-top: 120px;
}

.admin-pages-category-manager-row.manager-row,
.admin-pages-category-manager-row.manager-sort-row {
  grid-template-columns: 40px 96px minmax(260px,1.45fr) 92px minmax(120px,.55fr) 112px !important;
  min-height: 78px;
  gap: 10px;
}

.admin-pages-category-icon-field {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
}

.admin-pages-category-icon-field .manager-icon,
.admin-pages-icon-preview {
  width: 42px;
  height: 42px;
  border-radius: 15px;
}

.admin-pages-category-icon-field input {
  width: 46px;
  min-height: 36px;
  padding: 6px 7px;
  text-align: center;
  font-weight: 900;
}

.admin-pages-category-main small {
  white-space: normal;
  line-height: 1.35;
  max-width: 72ch;
}

.admin-pages-key-meta {
  text-align: left;
  min-width: 0;
}

.admin-pages-key-meta strong,
.admin-pages-submenu-page-meta strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: .78rem;
}

.admin-pages-submenu-sublist {
  margin-left: 40px;
  display: grid;
  gap: 8px;
  padding: 10px 0 2px 18px;
  border-left: 1px dashed rgba(255,159,28,.22);
}

.admin-pages-submenu-subhead {
  padding: 0 4px;
}

.admin-pages-submenu-row.manager-row,
.admin-pages-submenu-row.manager-sort-row {
  grid-template-columns: 40px 46px minmax(240px,1fr) minmax(150px,.62fr) 150px !important;
  min-height: 62px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.022)), var(--panel2, var(--panel));
  box-shadow: none;
}

.admin-pages-submenu-row .manager-main strong {
  line-height: 1.25;
}

.admin-pages-submenu-row .manager-main small {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

.admin-pages-submenu-icon {
  width: 36px;
  height: 36px;
  border-radius: 13px;
  font-size: .95rem;
}

.admin-pages-submenu-subhead small.saving,
.admin-pages-toolbar .manager-order-status.saving { color: var(--brand2); }
.admin-pages-submenu-subhead small.saved,
.admin-pages-toolbar .manager-order-status.saved { color: var(--ok); }
.admin-pages-submenu-subhead small.error,
.admin-pages-toolbar .manager-order-status.error { color: var(--bad); }

@media (max-width: 1280px) {
  .admin-pages-category-manager-row.manager-row,
  .admin-pages-category-manager-row.manager-sort-row {
    grid-template-columns: 40px 96px minmax(240px,1fr) 92px 112px !important;
  }
  .admin-pages-category-manager-row .admin-pages-key-meta {
    display: none;
  }
}

@media (max-width: 1000px) {
  .admin-pages-manager-card .manager-toolbar,
  .admin-pages-toolbar {
    grid-template-columns: 1fr;
  }
  .admin-pages-category-manager-row.manager-row,
  .admin-pages-category-manager-row.manager-sort-row,
  .admin-pages-submenu-row.manager-row,
  .admin-pages-submenu-row.manager-sort-row {
    grid-template-columns: 40px 54px minmax(0,1fr) !important;
  }
  .admin-pages-category-icon-field {
    grid-template-columns: 42px;
  }
  .admin-pages-category-icon-field input {
    width: 42px;
  }
  .admin-pages-category-manager-row .manager-meta,
  .admin-pages-category-manager-row .manager-pill,
  .admin-pages-submenu-row .manager-meta,
  .admin-pages-submenu-row .manager-pill {
    grid-column: 3;
    justify-self: start;
  }
  .admin-pages-submenu-sublist {
    margin-left: 20px;
    padding-left: 14px;
  }
}

@media (max-width: 680px) {
  .admin-pages-category-manager-row.manager-row,
  .admin-pages-category-manager-row.manager-sort-row,
  .admin-pages-submenu-row.manager-row,
  .admin-pages-submenu-row.manager-sort-row {
    grid-template-columns: 40px minmax(0,1fr) !important;
  }
  .admin-pages-category-icon-field,
  .admin-pages-category-main,
  .admin-pages-submenu-row .manager-icon,
  .admin-pages-submenu-row .manager-main,
  .admin-pages-category-manager-row .manager-meta,
  .admin-pages-category-manager-row .manager-pill,
  .admin-pages-submenu-row .manager-meta,
  .admin-pages-submenu-row .manager-pill {
    grid-column: 2;
  }
}


/* Admin Pages drag/drop + icon modal refinements */
.admin-pages-category-icon-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.admin-pages-category-manager-row.manager-row,
.admin-pages-category-manager-row.manager-sort-row {
  grid-template-columns: 40px 54px minmax(260px,1.45fr) 92px minmax(120px,.55fr) 112px 56px !important;
}

.admin-pages-category-actions {
  justify-content: end;
}

.admin-pages-category-actions .btn2 {
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.admin-pages-category-item[draggable="true"],
.admin-pages-submenu-row[draggable="true"],
.admin-pages-category-item .drag-handle,
.admin-pages-submenu-row .drag-handle {
  cursor: grab;
}

.admin-pages-category-item.dragging,
.admin-pages-submenu-row.dragging {
  opacity: .55;
  transform: scale(.995);
}

.admin-pages-submenu-sublist > .admin-pages-submenu-row {
  transition: transform .14s ease, opacity .14s ease, border-color .14s ease;
}

.admin-icon-modal-panel {
  max-width: 560px;
}

.admin-icon-modal-preview-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  margin-bottom: 14px;
}

.admin-icon-modal-preview {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  font-size: 1.25rem;
}

.admin-icon-modal-preview-wrap strong,
.admin-icon-modal-preview-wrap small {
  display: block;
}

@media (max-width: 1280px) {
  .admin-pages-category-manager-row.manager-row,
  .admin-pages-category-manager-row.manager-sort-row {
    grid-template-columns: 40px 54px minmax(240px,1fr) 92px 112px 56px !important;
  }
}

@media (max-width: 1000px) {
  .admin-pages-category-manager-row.manager-row,
  .admin-pages-category-manager-row.manager-sort-row,
  .admin-pages-submenu-row.manager-row,
  .admin-pages-submenu-row.manager-sort-row {
    grid-template-columns: 40px 54px minmax(0,1fr) !important;
  }
  .admin-pages-category-actions {
    grid-column: 3;
    justify-self: start;
  }
}

@media (max-width: 680px) {
  .admin-pages-category-manager-row.manager-row,
  .admin-pages-category-manager-row.manager-sort-row,
  .admin-pages-submenu-row.manager-row,
  .admin-pages-submenu-row.manager-sort-row {
    grid-template-columns: 40px minmax(0,1fr) !important;
  }
  .admin-pages-category-icon-view,
  .admin-pages-category-actions {
    grid-column: 2;
    justify-self: start;
  }
}


/* Admin submenu icons and menu-title editor */
.admin-side-nav .submenu-dot.submenu-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 8px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
  opacity: 1;
  display: inline-grid;
  place-items: center;
  font-size: .78rem;
  line-height: 1;
}

.admin-side-nav .submenu-link:hover .submenu-dot.submenu-icon,
.admin-side-nav .submenu-link.active .submenu-dot.submenu-icon {
  background: rgba(255,159,28,.12);
  border-color: rgba(255,159,28,.24);
}

.admin-pages-submenu-row.manager-row,
.admin-pages-submenu-row.manager-sort-row {
  grid-template-columns: 40px 46px minmax(240px,1fr) minmax(150px,.62fr) 150px 56px !important;
}

.admin-pages-submenu-actions {
  justify-content: end;
}

.admin-pages-submenu-actions .btn2 {
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

@media (max-width: 1000px) {
  .admin-pages-submenu-actions {
    grid-column: 3;
    justify-self: start;
  }
}

@media (max-width: 680px) {
  .admin-pages-submenu-actions {
    grid-column: 2;
    justify-self: start;
  }
}

body.sidebar-collapsed .submenu-link .submenu-dot.submenu-icon,
body.sidemenu-mini .submenu-dot.submenu-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  font-size: .78rem !important;
  margin: 0 !important;
}

/* Admin submenu icon cleanup
   Remove the old default round-dot styling now that submenu icons are configurable,
   and add a little breathing room between the icon box and the submenu title. */
.admin-layout-body .admin-side-nav .submenu-link {
  gap: 10px !important;
}

.admin-layout-body .admin-side-nav .submenu-link .submenu-dot.submenu-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  flex: 0 0 22px !important;
  padding: 0 !important;
  margin: 0 4px 0 0 !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: inherit !important;
  opacity: 1 !important;
  font-size: .78rem !important;
  line-height: 1 !important;
}

.admin-layout-body .admin-side-nav .submenu-link:hover .submenu-dot.submenu-icon,
.admin-layout-body .admin-side-nav .submenu-link.active .submenu-dot.submenu-icon {
  background: rgba(255,159,28,.12) !important;
  border-color: rgba(255,159,28,.24) !important;
}

body.sidebar-collapsed.admin-layout-body .admin-side-nav .submenu-link .submenu-dot.submenu-icon,
body.sidemenu-mini.admin-layout-body .admin-side-nav .submenu-link .submenu-dot.submenu-icon {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  flex-basis: 22px !important;
  margin: 0 !important;
}

/* Clean submenu icons: show only the configured icon glyph, no pill/box background. */
.admin-layout-body .admin-side-nav .submenu-link .submenu-dot.submenu-icon,
.admin-side-nav .submenu-dot.submenu-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  flex: 0 0 20px !important;
  margin: 0 6px 0 0 !important;
  padding: 0 !important;
}

.admin-layout-body .admin-side-nav .submenu-link:hover .submenu-dot.submenu-icon,
.admin-layout-body .admin-side-nav .submenu-link.active .submenu-dot.submenu-icon,
.admin-side-nav .submenu-link:hover .submenu-dot.submenu-icon,
.admin-side-nav .submenu-link.active .submenu-dot.submenu-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.sidebar-collapsed.admin-layout-body .admin-side-nav .submenu-link .submenu-dot.submenu-icon,
body.sidemenu-mini.admin-layout-body .admin-side-nav .submenu-link .submenu-dot.submenu-icon,
body.sidebar-collapsed .submenu-link .submenu-dot.submenu-icon,
body.sidemenu-mini .submenu-dot.submenu-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  flex-basis: 20px !important;
  margin: 0 !important;
}

.admin-pages-submenu-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}


/* Friendly Settings + Advanced Menu Links refinement */
.settings-helper-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.settings-helper-strip > div{
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  color:var(--muted);
  line-height:1.45;
  font-weight:800;
}
.settings-helper-strip strong{color:var(--text)}
.settings-section-tabs.settings-section-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;
  padding:0;
  border:0;
  background:transparent;
}
.settings-section-tabs.settings-section-cards a{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  justify-content:start;
  min-height:78px;
  padding:14px;
  text-align:left;
  border-radius:20px;
  background:
    radial-gradient(circle at 0 0, rgba(255,159,28,.10), transparent 12rem),
    rgba(255,255,255,.045);
}
.settings-section-tabs.settings-section-cards a > span{
  grid-row:1 / 3;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,159,28,.10);
}
.settings-section-tabs.settings-section-cards a > strong{font-size:.92rem;color:var(--text)}
.settings-section-tabs.settings-section-cards a > small{color:var(--muted);font-size:.74rem;line-height:1.35;font-weight:800}
.friendly-settings-grid label{
  border-radius:18px;
  background:rgba(255,255,255,.032);
  padding:10px;
}
.legacy-help-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.legacy-help-card{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:16px;
  border:1px solid var(--line);
  border-radius:22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.025)),
    var(--panel);
  box-shadow:var(--shadow);
}
.legacy-help-card > span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-weight:1000;
  background:rgba(255,255,255,.07);
}
.legacy-help-card strong{display:block;margin-bottom:4px;color:var(--text)}
.legacy-help-card small{display:block;color:var(--muted);line-height:1.45;font-weight:800}
.legacy-help-card.good > span{color:#5df09b;background:rgba(34,197,94,.12)}
.legacy-help-card.warn > span{color:var(--brand2);background:rgba(255,159,28,.12)}
.legacy-help-card.info > span{color:#7dd3fc;background:rgba(14,165,233,.12)}
.legacy-menu-list{display:grid;gap:10px}
.legacy-menu-row{
  grid-template-columns:48px minmax(0,1fr) 120px 96px 116px auto;
}
.legacy-menu-row .manager-main code{font-size:.78rem;color:var(--brand2);white-space:normal;overflow-wrap:anywhere}
.legacy-menu-child{
  margin-left:34px;
  border-left:3px solid rgba(255,159,28,.24);
  background:rgba(255,255,255,.030);
}
.legacy-menu-child.orphan{border-left-color:rgba(255,77,90,.38)}
.advanced-menu-modal-panel{max-width:min(880px,96vw)}
@media(max-width:1120px){
  .settings-helper-strip,.legacy-help-grid{grid-template-columns:1fr}
  .legacy-menu-row{grid-template-columns:44px minmax(0,1fr)}
  .legacy-menu-row .manager-meta,
  .legacy-menu-row .manager-pill,
  .legacy-menu-row .manager-actions{grid-column:2;justify-content:start}
  .legacy-menu-child{margin-left:0}
}

/* Settings page cleanup - simpler full-width layout */
.settings-admin-form{
  gap:18px;
}
.settings-intro-card,
.admin-page-intro.settings-intro-card{
  align-items:center;
  padding:22px;
  border-radius:24px;
}
.settings-intro-card h1{
  font-size:clamp(1.9rem,3vw,2.8rem);
  letter-spacing:-.045em;
}
.settings-helper-strip{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.settings-grid-layout{
  display:block;
}
.settings-main-column{
  display:grid;
  gap:18px;
}
.settings-side-column{
  position:static;
  display:block;
  margin-top:18px;
}
.settings-side-column .settings-images-card{
  margin-top:0;
}
.settings-card{
  border-radius:24px;
  padding:20px;
}
.settings-card-head{
  align-items:flex-start;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.settings-card h2{
  font-size:1.35rem;
}
.settings-form-grid.friendly-settings-grid{
  gap:14px;
}
.settings-section-tabs.settings-section-cards{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.settings-section-tabs.settings-section-cards a{
  min-height:68px;
}
.settings-image-list{
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
}
.settings-image-item{
  background:rgba(255,255,255,.026);
}
.permission-card.locked-off{
  opacity:.58;
}
.permission-card.locked-off .permission-toggle{
  filter:grayscale(1);
}
@media (max-width:720px){
  .settings-helper-strip{grid-template-columns:1fr}
  .settings-image-list{grid-template-columns:1fr}
}

/* Existing image optimizer */
.image-optimizer-hero .actions{align-items:center;gap:10px;flex-wrap:wrap}
.image-optimizer-hero form{margin:0}
.image-optimizer-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px}
.image-optimizer-stats>div{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:18px;padding:14px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.image-optimizer-stats span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
.image-optimizer-stats strong{font-size:24px;line-height:1}
.image-optimizer-result{margin-top:16px}
.image-optimizer-changes{margin-top:18px}
.image-optimizer-changes h3{margin:0 0 10px;font-size:16px}
.image-optimizer-change-list{gap:8px}
.image-optimizer-change-row{align-items:center}
.image-optimizer-change-row .manager-main small{word-break:break-word}
.image-optimizer-notes{display:grid;gap:10px;margin-top:14px}
.image-optimizer-notes>div{padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted)}
.image-optimizer-notes strong{color:var(--text)}
.clean-manager-icon{background:transparent!important;border:0!important;box-shadow:none!important}

/* ------------------------------------------------------------------
   Smooth scrolling performance patch - 2026-05-21
   Reduces expensive paint work from fixed backgrounds, blur filters,
   large shadows, and off-screen page sections.
------------------------------------------------------------------ */
:root {
  --shadow: 0 14px 42px rgba(0,0,0,.24);
}

/* Fixed background images + fixed overlay layers can make scrolling stutter,
   especially on long pages. Keep the same background image but let it scroll normally. */
html body.public-layout-body.system-bg-enabled,
html body.admin-layout-body.system-bg-enabled,
body.system-bg-enabled {
  background-attachment: scroll !important;
}

body.system-bg-enabled::before,
body.system-bg-enabled::after,
html body.public-layout-body.system-bg-enabled::before,
html body.public-layout-body.system-bg-enabled::after,
html body.admin-layout-body.system-bg-enabled::before,
html body.admin-layout-body.system-bg-enabled::after {
  display: none !important;
}

/* Backdrop blur on sticky headers/sidebars and many cards is one of the biggest
   causes of scroll lag. Use solid/translucent panels instead. */
.sidebar,
.admin-sidebar,
.admin-nav,
.top,
.admin-head,
.topbar,
.bottom,
.drawer-panel,
.notification-dropdown,
.account-dropdown,
.settings-sticky-actions,
.application-form-card,
.application-success-card,
.application-admin-card,
.business-public-modal,
.business-modal,
.page-modal-panel,
.personnel-modal,
.admin-modal-panel,
.modal-card,
.modal-content,
body.system-bg-enabled .sidebar,
body.system-bg-enabled .admin-sidebar,
body.system-bg-enabled .admin-nav,
body.system-bg-enabled .top,
body.system-bg-enabled .admin-head,
body.system-bg-enabled .topbar,
body.system-bg-enabled .hero,
body.system-bg-enabled .card,
body.system-bg-enabled .tablebox,
body.system-bg-enabled .admin-page-intro,
body.system-bg-enabled .settings-panel,
body.system-bg-enabled .settings-side-card,
body.system-bg-enabled .roster-shell,
html body.public-layout-body.system-bg-enabled .public-about-main,
html body.public-layout-body.system-bg-enabled .public-mission-card,
html body.public-layout-body.system-bg-enabled .public-service-card,
html body.public-layout-body.system-bg-enabled .home-quick-card,
html body.public-layout-body.system-bg-enabled .home-recent-card,
html body.public-layout-body.system-bg-enabled .home-notice-card,
html body.public-layout-body.system-bg-enabled .public-notice-card,
html body.public-layout-body.system-bg-enabled .page-full,
html body.public-layout-body.system-bg-enabled .section {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.sidebar,
.admin-sidebar,
.admin-nav {
  background: rgba(7,16,20,.94) !important;
}
.top,
.admin-head,
.topbar,
.bottom {
  background: rgba(7,16,20,.92) !important;
}
body.light .sidebar,
body.light .admin-sidebar,
body.light .admin-nav,
body.light .top,
body.light .admin-head,
body.light .topbar,
body.light .bottom {
  background: rgba(245,247,251,.96) !important;
}
body.system-bg-enabled .hero,
body.system-bg-enabled .card,
body.system-bg-enabled .tablebox,
body.system-bg-enabled .admin-page-intro,
body.system-bg-enabled .settings-panel,
body.system-bg-enabled .settings-side-card,
body.system-bg-enabled .roster-shell,
html body.public-layout-body.system-bg-enabled .public-about-main,
html body.public-layout-body.system-bg-enabled .public-mission-card,
html body.public-layout-body.system-bg-enabled .public-service-card,
html body.public-layout-body.system-bg-enabled .home-quick-card,
html body.public-layout-body.system-bg-enabled .home-recent-card,
html body.public-layout-body.system-bg-enabled .home-notice-card,
html body.public-layout-body.system-bg-enabled .public-notice-card,
html body.public-layout-body.system-bg-enabled .page-full,
html body.public-layout-body.system-bg-enabled .section {
  background-color: rgba(13,23,29,.86) !important;
}
body.light.system-bg-enabled .hero,
body.light.system-bg-enabled .card,
body.light.system-bg-enabled .tablebox,
body.light.system-bg-enabled .admin-page-intro,
body.light.system-bg-enabled .settings-panel,
body.light.system-bg-enabled .settings-side-card,
body.light.system-bg-enabled .roster-shell,
html body.light.public-layout-body.system-bg-enabled .public-about-main,
html body.light.public-layout-body.system-bg-enabled .public-mission-card,
html body.light.public-layout-body.system-bg-enabled .public-service-card,
html body.light.public-layout-body.system-bg-enabled .home-quick-card,
html body.light.public-layout-body.system-bg-enabled .home-recent-card,
html body.light.public-layout-body.system-bg-enabled .home-notice-card,
html body.light.public-layout-body.system-bg-enabled .public-notice-card,
html body.light.public-layout-body.system-bg-enabled .page-full,
html body.light.public-layout-body.system-bg-enabled .section {
  background-color: rgba(255,255,255,.90) !important;
}

/* Do not make the browser fully layout/paint large off-screen blocks while scrolling. */
@supports (content-visibility: auto) {
  .section,
  .card,
  .tablebox,
  .hero,
  .roster-shell,
  .roster-section,
  .fd-roster-section,
  .fd-roster-rank-section,
  .activity-section,
  .activity-fd-roster-board,
  .sog-library-card,
  .sog-content-card,
  .sog-section-card,
  .home-quick-card,
  .home-recent-card,
  .home-notice-card,
  .public-service-card,
  .public-mission-card,
  .public-about-main,
  .business-public-card,
  .business-admin-row,
  .application-review-card,
  .admin-page-intro,
  .settings-panel,
  .manager-list,
  .manager-row,
  .permission-card,
  .admin-pages-category-card {
    content-visibility: auto;
    contain-intrinsic-size: 1px 320px;
  }

  .hero,
  .home-hero {
    contain-intrinsic-size: 1px 520px;
  }

  .tablebox,
  .roster-shell,
  .fd-roster-scroll,
  .activity-table-scroll {
    contain-intrinsic-size: 1px 680px;
  }
}

/* Reduce hover movement on big repeated rows. It keeps the look but avoids repaint spikes. */
.manager-row,
.business-admin-row,
.application-review-card,
.notification-item,
.home-recent-card,
.public-service-card,
.home-quick-card {
  will-change: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------
   System background appearance fix - 2026-05-21
   Restores the uploaded background image layer after the scroll performance
   pass, while keeping the expensive blur filters disabled.
------------------------------------------------------------------ */
html body.public-layout-body.system-bg-enabled,
html body.admin-layout-body.system-bg-enabled,
body.system-bg-enabled {
  background-attachment: fixed !important;
}

body.system-bg-enabled::before,
html body.public-layout-body.system-bg-enabled::before,
html body.admin-layout-body.system-bg-enabled::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image: var(--system-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: .34 !important;
  filter: none !important;
  transform: none !important;
}

html body.public-layout-body.system-bg-enabled::before,
html body.admin-layout-body.system-bg-enabled::before {
  opacity: .38 !important;
}

body.system-bg-enabled::after,
html body.public-layout-body.system-bg-enabled::after,
html body.admin-layout-body.system-bg-enabled::after {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,59,34,.12), transparent 32rem),
    radial-gradient(circle at 88% 8%, rgba(255,159,28,.06), transparent 30rem),
    linear-gradient(135deg, rgba(7,16,20,.58), rgba(3,6,8,.82)) !important;
}

html body.public-layout-body.system-bg-enabled::after {
  background:
    radial-gradient(circle at 8% 0%, rgba(255,59,34,.10), transparent 32rem),
    linear-gradient(135deg, rgba(7,16,20,.52), rgba(3,6,8,.76)) !important;
}

body.light.system-bg-enabled::after,
html body.light.public-layout-body.system-bg-enabled::after,
html body.light.admin-layout-body.system-bg-enabled::after {
  background:
    radial-gradient(circle at 8% 0%, rgba(255,59,34,.08), transparent 32rem),
    linear-gradient(135deg, rgba(245,247,251,.58), rgba(245,247,251,.82)) !important;
}

/* Keep panels readable but transparent enough so the uploaded background still looks normal. */
body.system-bg-enabled .sidebar,
body.system-bg-enabled .admin-sidebar,
body.system-bg-enabled .admin-nav {
  background: rgba(7,16,20,.58) !important;
}

body.system-bg-enabled .top,
body.system-bg-enabled .admin-head,
body.system-bg-enabled .topbar,
body.system-bg-enabled .bottom {
  background: rgba(7,16,20,.56) !important;
}

body.light.system-bg-enabled .sidebar,
body.light.system-bg-enabled .admin-sidebar,
body.light.system-bg-enabled .admin-nav,
body.light.system-bg-enabled .top,
body.light.system-bg-enabled .admin-head,
body.light.system-bg-enabled .topbar,
body.light.system-bg-enabled .bottom {
  background: rgba(245,247,251,.68) !important;
}

body.system-bg-enabled .hero,
body.system-bg-enabled .card,
body.system-bg-enabled .tablebox,
body.system-bg-enabled .admin-page-intro,
body.system-bg-enabled .settings-panel,
body.system-bg-enabled .settings-side-card,
body.system-bg-enabled .roster-shell {
  background: linear-gradient(145deg, rgba(13,23,29,.82), rgba(13,23,29,.66)) !important;
}

body.light.system-bg-enabled .hero,
body.light.system-bg-enabled .card,
body.light.system-bg-enabled .tablebox,
body.light.system-bg-enabled .admin-page-intro,
body.light.system-bg-enabled .settings-panel,
body.light.system-bg-enabled .settings-side-card,
body.light.system-bg-enabled .roster-shell {
  background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,255,255,.66)) !important;
}

html body.public-layout-body.system-bg-enabled .public-about-main,
html body.public-layout-body.system-bg-enabled .public-mission-card,
html body.public-layout-body.system-bg-enabled .public-service-card,
html body.public-layout-body.system-bg-enabled .home-quick-card,
html body.public-layout-body.system-bg-enabled .home-recent-card,
html body.public-layout-body.system-bg-enabled .home-notice-card,
html body.public-layout-body.system-bg-enabled .public-notice-card,
html body.public-layout-body.system-bg-enabled .page-full,
html body.public-layout-body.system-bg-enabled .section {
  background-color: rgba(13,23,29,.66) !important;
}

html body.light.public-layout-body.system-bg-enabled .public-about-main,
html body.light.public-layout-body.system-bg-enabled .public-mission-card,
html body.light.public-layout-body.system-bg-enabled .public-service-card,
html body.light.public-layout-body.system-bg-enabled .home-quick-card,
html body.light.public-layout-body.system-bg-enabled .home-recent-card,
html body.light.public-layout-body.system-bg-enabled .home-notice-card,
html body.light.public-layout-body.system-bg-enabled .public-notice-card,
html body.light.public-layout-body.system-bg-enabled .page-full,
html body.light.public-layout-body.system-bg-enabled .section {
  background-color: rgba(255,255,255,.84) !important;
}

@media (max-width: 820px) {
  html body.public-layout-body.system-bg-enabled,
  html body.admin-layout-body.system-bg-enabled,
  body.system-bg-enabled {
    background-attachment: scroll !important;
  }
}

/* ------------------------------------------------------------------
   Sidebar / topbar opacity refinement - 2026-05-21
   Makes the frontend and backend navigation bars less faded while
   keeping the optimized non-blur background behavior from the previous
   performance pass.
------------------------------------------------------------------ */
.sidebar,
.admin-sidebar,
.admin-nav {
  background: rgba(7,16,20,.88) !important;
}

.top,
.admin-head,
.admin-head.topbar,
.topbar,
.bottom {
  background: rgba(7,16,20,.86) !important;
}

body.light .sidebar,
body.light .admin-sidebar,
body.light .admin-nav {
  background: rgba(245,247,251,.96) !important;
}

body.light .top,
body.light .admin-head,
body.light .admin-head.topbar,
body.light .topbar,
body.light .bottom {
  background: rgba(245,247,251,.96) !important;
}

body.system-bg-enabled .sidebar,
body.system-bg-enabled .admin-sidebar,
body.system-bg-enabled .admin-nav {
  background: rgba(7,16,20,.84) !important;
}

body.system-bg-enabled .top,
body.system-bg-enabled .admin-head,
body.system-bg-enabled .admin-head.topbar,
body.system-bg-enabled .topbar,
body.system-bg-enabled .bottom {
  background: rgba(7,16,20,.82) !important;
}

body.light.system-bg-enabled .sidebar,
body.light.system-bg-enabled .admin-sidebar,
body.light.system-bg-enabled .admin-nav,
body.light.system-bg-enabled .top,
body.light.system-bg-enabled .admin-head,
body.light.system-bg-enabled .admin-head.topbar,
body.light.system-bg-enabled .topbar,
body.light.system-bg-enabled .bottom {
  background: rgba(245,247,251,.92) !important;
}

.sidebar,
.admin-sidebar,
.admin-nav,
.top,
.admin-head,
.admin-head.topbar,
.topbar,
.bottom {
  border-color: rgba(255,255,255,.13) !important;
}

body.light .sidebar,
body.light .admin-sidebar,
body.light .admin-nav,
body.light .top,
body.light .admin-head,
body.light .admin-head.topbar,
body.light .topbar,
body.light .bottom {
  border-color: rgba(8,23,32,.12) !important;
}

/* ------------------------------------------------------------------
   Frontend layout-border cleanup - 2026-05-21
   The system-background pass added a translucent background to every
   generic .section wrapper. On layout-only frontend sections this looked
   like a pale/faded outside border around roster and SOG areas. Keep the
   real cards readable, but make those outer wrappers clean/transparent.
------------------------------------------------------------------ */
html body.public-layout-body.system-bg-enabled .roster-wall-board,
html body.public-layout-body.system-bg-enabled .sog-library-list,
html body.public-layout-body.system-bg-enabled .sog-card-library-list,
html body.public-layout-body.system-bg-enabled .sog-reader-layout,
html body.public-layout-body.system-bg-enabled .sog-reader-document-layout {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

html body.light.public-layout-body.system-bg-enabled .roster-wall-board,
html body.light.public-layout-body.system-bg-enabled .sog-library-list,
html body.light.public-layout-body.system-bg-enabled .sog-card-library-list,
html body.light.public-layout-body.system-bg-enabled .sog-reader-layout,
html body.light.public-layout-body.system-bg-enabled .sog-reader-document-layout {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Remove the pale outer halo from the public roster section cards while
   keeping their internal card structure and hover behavior intact. */
.roster-wall-section {
  box-shadow: none !important;
}

/* SOG list cards and SOG reader document keep their normal panel styling,
   but without the faded light outer glow/ring. */
.sog-list-card,
.sog-list-row,
.sog-document,
.sog-reader-document-layout .sog-document-header,
.sog-reader-document-layout .sog-doc-page,
.sog-reader-document-layout .sog-document-checklist,
.sog-document-toc-card {
  box-shadow: none !important;
}

body:not(.light) .sog-list-card,
body:not(.light) .sog-list-row,
body:not(.light) .sog-document,
body:not(.light) .sog-reader-document-layout .sog-document-header,
body:not(.light) .sog-reader-document-layout .sog-doc-page,
body:not(.light) .sog-reader-document-layout .sog-document-checklist,
body:not(.light) .sog-document-toc-card {
  box-shadow: none !important;
}


/* ------------------------------------------------------------------
   Frontend SOG search cleanup - 2026-05-21
   Remove the faded system-background wrapper around the SOG search area
   and let the search input use the full content width.
------------------------------------------------------------------ */
.sog-library-search-panel,
.sog-library-toolbar-classic {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body.public-layout-body.system-bg-enabled .sog-library-search-panel,
html body.public-layout-body.system-bg-enabled .sog-library-toolbar-classic,
html body.light.public-layout-body.system-bg-enabled .sog-library-search-panel,
html body.light.public-layout-body.system-bg-enabled .sog-library-toolbar-classic {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.sog-library-search-actions,
.sog-library-toolbar-classic .actions {
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: stretch !important;
  flex-wrap: nowrap !important;
}

.sog-library-search-panel #sogSearch,
.sog-library-toolbar-classic #sogSearch,
.sog-library-toolbar-classic .sog-search-input {
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

/* Frontend sidebar submenus: match backend behavior and let long submenu names break cleanly. */
.public-side-nav .subs,
.drawer-panel .public-side-nav .subs {
  margin-left: 40px !important;
  padding-left: 12px !important;
}

.public-side-nav .sub.public-submenu-link,
.drawer-panel .public-side-nav .sub.public-submenu-link {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-height: 32px !important;
  height: auto !important;
  padding: 7px 10px !important;
  line-height: 1.25 !important;
}

.public-side-nav .sub .sub-menu-icon,
.drawer-panel .public-side-nav .sub .sub-menu-icon {
  flex: 0 0 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  margin-top: 1px !important;
}

.public-side-nav .sub.can-break .sub-label,
.drawer-panel .public-side-nav .sub.can-break .sub-label {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

body.sidemenu-mini .sidebar .public-side-nav .sub.can-break .sub-label {
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Frontend selected submenu cleanup - 2026-05-21
   Keep selected submenu in the previous orange color, but do not make it bold. */
.public-layout-body .public-side-nav .subs .sub.active,
.public-layout-body .public-side-nav .submenu-links .sub.active,
.public-layout-body .public-side-nav .sub.public-submenu-link.active,
.drawer-panel .public-side-nav .subs .sub.active,
.drawer-panel .public-side-nav .submenu-links .sub.active,
.drawer-panel .public-side-nav .sub.public-submenu-link.active {
  color: var(--brand2) !important;
  font-weight: inherit !important;
}

.public-layout-body .public-side-nav .subs .sub.active .sub-label,
.public-layout-body .public-side-nav .submenu-links .sub.active .sub-label,
.public-layout-body .public-side-nav .sub.public-submenu-link.active .sub-label,
.drawer-panel .public-side-nav .subs .sub.active .sub-label,
.drawer-panel .public-side-nav .submenu-links .sub.active .sub-label,
.drawer-panel .public-side-nav .sub.public-submenu-link.active .sub-label {
  color: var(--brand2) !important;
  font-weight: inherit !important;
}

/* ------------------------------------------------------------------
   Frontend SOG hover border fix - 2026-05-21
   The SOG card hover lift could place the highlighted top edge too close
   to the grid/search boundary, making the rounded border look clipped.
   Keep the lift, but give the grid safe top space and draw the hover ring
   inside the card so it never gets cut off.
------------------------------------------------------------------ */
.sog-card-library-list {
  overflow: visible !important;
  padding-top: 8px !important;
}

.sog-library-toolbar-classic + .sog-card-library-list,
.sog-library-search-panel + .sog-card-library-list {
  margin-top: 20px !important;
}

.sog-card-library-list .sog-list-card {
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.sog-card-library-list .sog-list-card:hover,
.sog-card-library-list .sog-list-card:focus-within {
  position: relative !important;
  z-index: 4 !important;
  transform: translateY(-3px) !important;
  border-color: rgba(255,159,28,.46) !important;
  box-shadow: inset 0 0 0 1px rgba(255,159,28,.42) !important;
}

.sog-card-library-list .sog-list-card > a {
  border-radius: inherit !important;
  outline: none !important;
}

.sog-card-library-list .sog-list-card > a:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255,159,28,.58) !important;
}

/* 2026-05-21: expanded log action categories */
.log-row.account-action .log-action-icon {
  color: #ffd28a;
  background: rgba(255, 174, 66, .12);
  border-color: rgba(255, 174, 66, .24);
}

.log-row.business-action .log-action-icon {
  color: #8af0d2;
  background: rgba(65, 216, 176, .12);
  border-color: rgba(65, 216, 176, .24);
}

.log-row.strike-action .log-action-icon {
  color: #ff8f99;
  background: rgba(255, 77, 90, .12);
  border-color: rgba(255, 77, 90, .28);
}

/* ------------------------------------------------------------------
   Sticky topbar fix - 2026-05-21
   Keep frontend/backend top bars pinned even when the sidebar is set
   to mini/collapsed mode. Some older mini-sidebar rules added overflow
   to the main shell, which can stop CSS sticky from using the viewport.
------------------------------------------------------------------ */
.top,
.admin-head.topbar,
.shared-admin-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 10050 !important;
}

@media (min-width: 901px) {
  body.sidemenu-mini .main-shell,
  body.sidemenu-mini .public-main-shell,
  body.sidemenu-mini .admin-main,
  body.sidemenu-collapsed .main-shell,
  body.sidemenu-collapsed .public-main-shell,
  body.sidemenu-collapsed .admin-main {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  body.sidemenu-mini .top,
  body.sidemenu-mini .admin-head.topbar,
  body.sidemenu-mini .shared-admin-topbar,
  body.sidemenu-collapsed .top,
  body.sidemenu-collapsed .admin-head.topbar,
  body.sidemenu-collapsed .shared-admin-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 10050 !important;
  }
}

@supports not (overflow: clip) {
  @media (min-width: 901px) {
    body.sidemenu-mini .main-shell,
    body.sidemenu-mini .public-main-shell,
    body.sidemenu-mini .admin-main,
    body.sidemenu-collapsed .main-shell,
    body.sidemenu-collapsed .public-main-shell,
    body.sidemenu-collapsed .admin-main {
      overflow-x: visible !important;
      overflow-y: visible !important;
    }
  }
}

/* Trainings & Evaluations backend module */
.training-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.training-mini-pill{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--text);border-radius:999px;padding:8px 12px;font-size:.82rem;font-weight:800;letter-spacing:.02em}.training-config-summary{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 16px}.training-config-summary span{border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.16);border-radius:16px;padding:10px 12px;color:var(--muted);font-size:.9rem}.training-config-summary strong{color:var(--text)}.trainings-toolbar{margin-bottom:14px}.training-personnel-list{display:grid;gap:10px}.training-personnel-row{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border-radius:20px;padding:14px 16px;transition:transform .18s ease,border-color .18s ease,background .18s ease}.training-personnel-row:hover{transform:translateY(-1px);border-color:rgba(255,153,0,.32);background:linear-gradient(180deg,rgba(255,153,0,.08),rgba(255,255,255,.03))}.training-personnel-main{display:flex;align-items:center;gap:12px;min-width:0}.training-personnel-main strong{display:block;color:var(--text);font-size:1rem}.training-personnel-main small{display:block;color:var(--muted);margin-top:3px}.training-avatar{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(255,153,0,.12);border:1px solid rgba(255,153,0,.24);color:var(--accent);font-weight:900;flex:0 0 auto}.training-personnel-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.training-count-pill{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);border-radius:999px;padding:7px 10px;color:var(--muted);font-size:.82rem;font-weight:800}.training-details-panel{max-width:min(1180px,94vw)}.training-modal-body{display:grid;gap:14px}.training-modal-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.16);border-radius:18px;padding:12px}.training-entries-list{display:grid;gap:12px}.training-entry-row{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);border-radius:20px;padding:14px;transition:opacity .16s ease,border-color .16s ease}.training-entry-row.marked-delete{opacity:.48;border-color:rgba(255,80,80,.35)}.training-entry-grid{display:grid;grid-template-columns:minmax(220px,1.15fr) minmax(160px,.9fr) minmax(150px,.7fr) minmax(260px,1.5fr);gap:12px;align-items:start}.training-entry-grid label{display:grid;gap:7px;color:var(--muted);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.training-entry-grid input,.training-entry-grid select,.training-entry-grid textarea{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(0,0,0,.24);color:var(--text);padding:10px 12px;outline:none}.training-entry-grid textarea{min-height:44px;resize:vertical;text-transform:none;letter-spacing:normal;font-weight:600}.training-entry-grid input:focus,.training-entry-grid select:focus,.training-entry-grid textarea:focus{border-color:rgba(255,153,0,.5);box-shadow:0 0 0 3px rgba(255,153,0,.1)}.training-date-input[readonly]{opacity:.78;cursor:not-allowed}.training-entry-actions{display:flex;justify-content:flex-end;margin-top:10px}.training-delete-check{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.86rem;font-weight:800}.training-delete-check input{accent-color:var(--accent)}.training-settings-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.training-settings-panel{border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.14);border-radius:24px;padding:16px}.training-settings-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.training-settings-panel-head h3{margin:4px 0 6px}.training-switch-grid{display:grid;gap:10px}.training-switch-card{display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);border-radius:18px;padding:12px;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}.training-switch-card:hover{transform:translateY(-1px);border-color:rgba(255,153,0,.28)}.training-switch-card.selected{border-color:rgba(255,153,0,.38);background:rgba(255,153,0,.08)}.training-switch-card input{position:absolute;opacity:0;pointer-events:none}.training-switch-knob{width:46px;height:26px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);position:relative;flex:0 0 auto;transition:background .16s ease,border-color .16s ease}.training-switch-knob:after{content:"";position:absolute;width:18px;height:18px;border-radius:999px;background:rgba(255,255,255,.78);left:4px;top:3px;transition:transform .16s ease,background .16s ease}.training-switch-card.selected .training-switch-knob{background:rgba(255,153,0,.25);border-color:rgba(255,153,0,.55)}.training-switch-card.selected .training-switch-knob:after{transform:translateX(20px);background:var(--accent)}.training-switch-copy{display:grid;gap:2px}.training-switch-copy strong{color:var(--text)}.training-switch-copy small{color:var(--muted)}
@media (max-width:1100px){.training-entry-grid{grid-template-columns:1fr 1fr}.training-notes-label{grid-column:1/-1}.training-settings-panels{grid-template-columns:1fr}}
@media (max-width:720px){.training-personnel-row,.training-personnel-meta,.training-header-actions,.training-settings-panel-head{align-items:stretch;flex-direction:column}.training-personnel-meta{justify-content:flex-start}.training-entry-grid{grid-template-columns:1fr}.training-details-panel{max-width:96vw}.training-modal-toolbar{align-items:flex-start;flex-direction:column}}

/* Trainings & Evaluations UI refinement - 2026-05-22 */
.trainings-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  margin:18px 0 18px;
}
.trainings-toolbar .search-input{
  width:100%;
  min-height:48px;
  border-radius:18px;
}
.training-config-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:16px 0 4px;
}
.training-config-summary span{
  display:block;
  border-color:rgba(255,153,0,.16);
  background:linear-gradient(180deg,rgba(255,153,0,.075),rgba(0,0,0,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.training-personnel-list{
  gap:12px;
}
.training-personnel-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  min-height:74px;
  padding:14px 16px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(21,35,42,.88),rgba(15,26,32,.86));
  border-color:rgba(255,255,255,.105);
  box-shadow:0 10px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.035);
}
.training-personnel-row:hover{
  transform:translateY(-1px);
  border-color:rgba(255,153,0,.34);
  background:linear-gradient(180deg,rgba(33,44,48,.95),rgba(17,30,36,.92));
}
.training-personnel-main > div{
  min-width:0;
}
.training-personnel-main strong{
  line-height:1.25;
}
.training-personnel-main small{
  line-height:1.35;
}
.training-personnel-meta .btn2{
  min-height:38px;
  border-radius:14px;
  padding-inline:14px;
}
.training-count-pill{
  color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.055);
}
.training-details-modal.personnel-modal{
  align-items:center;
  padding:22px;
}
.training-details-panel{
  width:min(1220px,96vw);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:28px;
}
.training-details-panel .personnel-modal-header,
.training-details-panel .personnel-modal-footer{
  flex:0 0 auto;
}
.training-details-panel .personnel-modal-body{
  overflow:auto;
  min-height:0;
}
.training-modal-toolbar-modern{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,153,0,.075),rgba(0,0,0,.16));
  border:1px solid rgba(255,153,0,.14);
}
.training-modal-toolbar-modern > div{
  display:grid;
  gap:3px;
  min-width:0;
}
.training-modal-toolbar-modern strong{
  color:var(--text);
  font-size:1rem;
}
.training-modal-toolbar-modern small{
  color:var(--muted);
}
.training-entries-list{
  gap:14px;
}
.training-entry-row{
  padding:0;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.022));
  border-color:rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.training-entry-row.marked-delete{
  opacity:.58;
  border-color:rgba(255,77,90,.44);
  background:rgba(255,77,90,.055);
}
.training-entry-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:rgba(0,0,0,.14);
}
.training-entry-top > div:first-child{
  min-width:0;
}
.training-entry-top span{
  display:block;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  font-weight:900;
}
.training-entry-top strong{
  display:block;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:2px;
}
.training-entry-actions{
  margin-top:0;
  flex:0 0 auto;
}
.training-entry-grid{
  padding:14px;
  grid-template-columns:minmax(230px,1.05fr) minmax(180px,.9fr) minmax(155px,.7fr) minmax(300px,1.55fr);
  gap:13px;
}
.training-entry-grid label{
  gap:8px;
  min-width:0;
}
.training-label-line{
  display:inline-flex;
  align-items:center;
  gap:4px;
  line-height:1;
  min-height:16px;
  white-space:nowrap;
}
.training-label-line .required-marker{
  display:inline;
  margin-left:0;
  color:var(--accent);
  line-height:1;
  vertical-align:baseline;
}
.training-entry-grid input,
.training-entry-grid select,
.training-entry-grid textarea{
  border-radius:15px;
  background:rgba(5,12,16,.46);
  border-color:rgba(255,255,255,.13);
  min-height:44px;
}
.training-entry-grid textarea{
  min-height:78px;
  line-height:1.45;
}
.training-date-input[readonly]{
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.72);
}
.training-delete-check{
  min-height:36px;
  padding:8px 10px;
  border-radius:13px;
  background:rgba(255,77,90,.075);
  border:1px solid rgba(255,77,90,.16);
}
.training-settings-card .manager-top{
  align-items:flex-start;
}
.training-settings-panels{
  gap:18px;
}
.training-settings-panel{
  padding:18px;
  border-radius:26px;
  background:linear-gradient(180deg,rgba(21,35,42,.82),rgba(10,18,22,.72));
  border-color:rgba(255,255,255,.105);
  box-shadow:0 12px 26px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.035);
}
.training-settings-panel-head{
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.075);
}
.training-settings-panel-head h3{
  color:var(--text);
}
.training-settings-panel-head p{
  max-width:620px;
}
.training-switch-grid{
  margin-top:14px;
  gap:11px;
}
.training-switch-card{
  min-height:68px;
  border-radius:20px;
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.095);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.training-switch-card:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.052);
}
.training-switch-card.selected{
  border-color:rgba(255,153,0,.42);
  background:linear-gradient(180deg,rgba(255,153,0,.12),rgba(255,153,0,.055));
}
.training-switch-copy strong{
  line-height:1.25;
}
.training-switch-copy small{
  line-height:1.3;
}
#trainingSettingsStatus{
  min-height:38px;
  border-radius:999px;
  padding-inline:13px;
}
@media (max-width:1100px){
  .training-config-summary,
  .training-settings-panels{
    grid-template-columns:1fr;
  }
  .training-entry-grid{
    grid-template-columns:1fr 1fr;
  }
  .training-notes-label{
    grid-column:1/-1;
  }
}
@media (max-width:720px){
  .training-details-modal.personnel-modal{
    padding:10px;
    align-items:stretch;
  }
  .training-personnel-row{
    grid-template-columns:1fr;
  }
  .training-modal-toolbar-modern,
  .training-entry-top{
    align-items:stretch;
    flex-direction:column;
  }
  .training-entry-actions,
  .training-entry-actions .btn2,
  .training-delete-check{
    width:100%;
    justify-content:center;
  }
  .training-entry-grid{
    grid-template-columns:1fr;
  }
  .training-settings-panel-head{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Trainings modal field layout + conductor name cleanup - 2026-05-22 */
.training-entry-grid{
  grid-template-columns:minmax(230px,1.05fr) minmax(190px,.95fr) minmax(170px,.72fr) !important;
  align-items:start;
}
.training-entry-grid .training-notes-label{
  grid-column:1 / -1;
}
.training-entry-grid .training-notes-label textarea{
  min-height:92px;
}
@media (max-width:900px){
  .training-entry-grid{
    grid-template-columns:1fr !important;
  }
}


/* Trainings & Evaluations friendly compact UI - 2026-05-22 */
.trainings-card .manager-top,
.training-settings-card .manager-top{
  gap:14px;
}
.training-header-actions .btn2,
.trainings-card .btn,
.trainings-card .btn2,
.training-details-panel .btn,
.training-details-panel .btn2,
.training-settings-card .btn,
.training-settings-card .btn2{
  min-height:32px;
  padding:7px 11px;
  border-radius:11px;
  font-size:.78rem;
  line-height:1.15;
}
.training-header-actions{
  gap:8px;
}
.training-mini-pill{
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.76rem;
  color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.1);
}
.trainings-toolbar{
  margin:12px 0 12px;
}
.trainings-toolbar .search-input{
  min-height:40px;
  border-radius:13px;
  font-size:.9rem;
}
.training-config-summary{
  gap:8px;
  margin:12px 0 2px;
}
.training-config-summary span{
  padding:8px 10px;
  border-radius:13px;
  font-size:.82rem;
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.09);
  box-shadow:none;
}
.training-personnel-list{
  gap:7px;
}
.training-personnel-row{
  min-height:0;
  padding:9px 11px;
  border-radius:14px;
  gap:10px;
  background:rgba(255,255,255,.032);
  border-color:rgba(255,255,255,.085);
  box-shadow:none;
}
.training-personnel-row:hover{
  transform:none;
  background:rgba(255,153,0,.055);
  border-color:rgba(255,153,0,.24);
}
.training-personnel-main{
  gap:9px;
}
.training-avatar{
  width:34px;
  height:34px;
  border-radius:11px;
  font-size:.86rem;
  background:rgba(255,153,0,.095);
  border-color:rgba(255,153,0,.18);
}
.training-personnel-main strong{
  font-size:.92rem;
  line-height:1.15;
}
.training-personnel-main small{
  margin-top:2px;
  font-size:.78rem;
  line-height:1.25;
}
.training-personnel-meta{
  gap:7px;
}
.training-count-pill{
  padding:5px 8px;
  border-radius:999px;
  font-size:.74rem;
  min-height:29px;
}
.training-personnel-meta .btn2{
  min-height:30px;
  padding:6px 10px;
  border-radius:10px;
  font-size:.76rem;
}
.training-modal-toolbar-modern{
  padding:11px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.09);
}
.training-modal-toolbar-modern .btn{
  min-height:32px;
  padding:7px 11px;
  border-radius:11px;
}
.training-entry-top{
  padding:10px 12px;
}
.training-entry-grid{
  padding:12px;
  gap:10px;
}
.training-entry-grid input,
.training-entry-grid select,
.training-entry-grid textarea{
  min-height:38px;
  border-radius:12px;
  padding:8px 10px;
  font-size:.88rem;
}
.training-entry-grid textarea,
.training-entry-grid .training-notes-label textarea{
  min-height:74px;
}
.training-delete-check{
  min-height:30px;
  padding:6px 9px;
  border-radius:10px;
  font-size:.76rem;
}
.training-settings-panels{
  gap:14px;
  margin-top:14px;
}
.training-settings-panel{
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.028);
  border-color:rgba(255,255,255,.085);
  box-shadow:none;
}
.training-settings-panel-head{
  padding-bottom:11px;
  margin-bottom:10px;
  border-bottom-color:rgba(255,255,255,.065);
}
.training-settings-panel-head h3{
  margin:3px 0 4px;
  font-size:1rem;
}
.training-settings-panel-head p{
  font-size:.82rem;
  line-height:1.4;
}
.training-switch-grid{
  gap:7px;
  margin-top:10px;
}
.training-switch-card{
  min-height:0;
  padding:9px 10px;
  gap:10px;
  border-radius:14px;
  background:rgba(255,255,255,.028);
  border-color:rgba(255,255,255,.082);
  box-shadow:none;
}
.training-switch-card:hover{
  transform:none;
  background:rgba(255,255,255,.044);
  border-color:rgba(255,255,255,.14);
}
.training-switch-card.selected{
  background:rgba(34,197,94,.085);
  border-color:rgba(34,197,94,.28);
}
.training-switch-knob{
  width:40px;
  height:22px;
  background:rgba(100,116,139,.38);
  border-color:rgba(148,163,184,.22);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.2);
}
.training-switch-knob:after{
  width:16px;
  height:16px;
  left:3px;
  top:2px;
  background:rgba(226,232,240,.88);
}
.training-switch-card.selected .training-switch-knob{
  background:linear-gradient(135deg,rgba(34,197,94,.88),rgba(22,163,74,.78));
  border-color:rgba(74,222,128,.58);
}
.training-switch-card.selected .training-switch-knob:after{
  transform:translateX(18px);
  background:#fff;
}
.training-switch-copy strong{
  font-size:.9rem;
  line-height:1.15;
}
.training-switch-copy small{
  font-size:.75rem;
  line-height:1.2;
  color:rgba(255,255,255,.55);
}
.training-switch-card.selected .training-switch-copy strong{
  color:rgba(236,253,245,.96);
}
#trainingSettingsStatus{
  min-height:32px;
  padding:6px 10px;
  font-size:.76rem;
}
@media (max-width:720px){
  .training-personnel-row{
    padding:10px;
  }
  .training-personnel-meta .btn2,
  .training-count-pill{
    width:auto;
  }
}



/* Training Settings: remove selected-count pills and shorten rank list - 2026-05-22 */
.training-settings-panel-head .training-mini-pill{
  display:none !important;
}
.training-rank-switch-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.training-rank-switch-grid .training-switch-card{
  min-width:0;
}
@media (max-width:880px){
  .training-rank-switch-grid{
    grid-template-columns:1fr;
  }
}


/* Activity Section Selection cleanup: autosave, switch buttons, no faded card halo */
.activity-settings-form.is-autosaving {
  opacity: .88 !important;
  pointer-events: none !important;
}

.activity-settings-actions {
  display: none !important;
}

.activity-section-card {
  grid-template-columns: 48px minmax(0, 1fr) !important;
  background: rgba(10, 20, 26, .54) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.activity-section-card:hover {
  background: rgba(10, 20, 26, .64) !important;
  box-shadow: none !important;
}

.activity-section-card.selected {
  background: rgba(10, 20, 26, .54) !important;
  border-color: rgba(255,159,28,.34) !important;
  box-shadow: none !important;
}

.activity-section-card-switch {
  position: relative !important;
  width: 44px !important;
  height: 26px !important;
  display: block !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148,163,184,.30) !important;
  background: rgba(148,163,184,.18) !important;
  box-shadow: none !important;
  transition: background .16s ease, border-color .16s ease !important;
}

.activity-section-card-switch::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.32) !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: transform .16s ease !important;
}

.activity-section-card input:checked + .activity-section-card-switch {
  border-color: rgba(255,159,28,.58) !important;
  background: rgba(255,159,28,.30) !important;
}

.activity-section-card input:checked + .activity-section-card-switch::after {
  opacity: 1 !important;
  transform: translateX(18px) !important;
}

/* Modal topbar clearance
   Keeps every site modal below the sticky frontend/backend top bar instead of covering it. */
:root {
  --cms-modal-topbar-offset: 76px;
  --cms-modal-edge-gap: 18px;
  --cms-modal-panel-gap: 36px;
}

body.admin-layout-body {
  --cms-modal-topbar-offset: 74px;
}

@media (max-width: 850px) {
  :root {
    --cms-modal-topbar-offset: 76px;
    --cms-modal-edge-gap: 10px;
    --cms-modal-panel-gap: 20px;
  }
}

/* Modal overlays: start below the sticky top navigation. */
.personnel-modal,
.public-photo-modal,
.roster-wall-modal,
.cms-error-modal,
.activity-confirm-modal,
.login-modal,
.sog-editor-dialog,
.training-apply-modal,
.roster-personnel-modal,
.roster-modal,
.public-roster-modal {
  top: var(--cms-modal-topbar-offset) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: var(--cms-modal-topbar-offset) 0 0 0 !important;
  width: 100vw !important;
  height: calc(100vh - var(--cms-modal-topbar-offset)) !important;
  height: calc(100dvh - var(--cms-modal-topbar-offset)) !important;
  min-height: 0 !important;
  max-height: calc(100vh - var(--cms-modal-topbar-offset)) !important;
  max-height: calc(100dvh - var(--cms-modal-topbar-offset)) !important;
  box-sizing: border-box !important;
  padding: var(--cms-modal-edge-gap) !important;
}

/* Backdrops should cover only the modal area below the topbar. */
.personnel-modal-backdrop,
.public-photo-backdrop,
.roster-wall-modal-backdrop,
.roster-modal-backdrop,
.public-roster-modal-backdrop,
.cms-error-backdrop,
.activity-confirm-backdrop,
.login-modal-backdrop,
.modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Panels: fit inside the below-topbar modal viewport. */
.personnel-modal-panel,
.public-photo-panel,
.roster-wall-modal-panel,
.cms-error-panel,
.activity-confirm-panel,
.login-modal-card,
.sog-editor-dialog-panel,
.training-apply-dialog,
.modal-panel,
.modal-card {
  max-height: calc(100dvh - var(--cms-modal-topbar-offset) - var(--cms-modal-panel-gap)) !important;
}

/* Larger editor/review modals that use fixed heights need the same available-height limit. */
.sog-modal-panel,
#trainingOptionModal .personnel-modal-panel,
#trainingQuestionModal .personnel-modal-panel,
#trainingApplicationModal .personnel-modal-panel,
#trainingApplicationModal .training-review-modal-panel {
  max-height: calc(100dvh - var(--cms-modal-topbar-offset) - var(--cms-modal-panel-gap)) !important;
}

#trainingApplicationModal .training-review-modal-panel {
  height: min(900px, calc(100dvh - var(--cms-modal-topbar-offset) - var(--cms-modal-panel-gap))) !important;
}

.public-photo-body img {
  max-height: calc(100dvh - var(--cms-modal-topbar-offset) - 170px) !important;
}

@media (max-width: 720px) {
  .training-apply-dialog,
  #trainingApplicationModal .training-review-modal-panel {
    max-height: calc(100dvh - var(--cms-modal-topbar-offset) - var(--cms-modal-panel-gap)) !important;
  }
}

/* Keep legacy generated modal fade layers below the sticky topbar too. */
.personnel-modal::before,
.roster-personnel-modal::before,
.roster-modal::before,
.public-roster-modal::before {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Permission system */
.permissions-manager-card .manager-toolbar,
.permission-groups-manager-card .manager-toolbar { align-items: center; }
.permission-row-main,
.permission-group-item .manager-row { min-height: 72px; }
.permission-row-icon { width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); border: 1px solid var(--line); flex: 0 0 auto; }
.permission-sublist { margin-left: 54px; }
.permission-sub-row { min-height: 58px; }
.permission-capability-pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.permission-capability-pills span { border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.03); }
.permission-group-modal-panel { width: min(1180px, calc(100vw - 48px)); }
.permission-group-modal-body { max-height: min(72vh, 760px); overflow: auto; }
.permission-modal-toolbar { position: sticky; top: 0; z-index: 2; background: rgba(11,21,25,.96); padding: 8px 0 12px; backdrop-filter: blur(10px); }
.permission-matrix { display: grid; gap: 8px; }
.permission-matrix-row { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(84px, 108px)); gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 16px; padding: 9px; background: rgba(255,255,255,.025); }
.permission-matrix-parent { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); }
.permission-matrix-child { margin-left: 26px; }
.permission-matrix-main { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 8px 10px; align-items: center; min-width: 0; }
.permission-matrix-main span { grid-row: span 2; width: 32px; height: 32px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.permission-matrix-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.permission-matrix-main small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.permission-matrix-check { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: rgba(0,0,0,.14); font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.permission-matrix-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.permission-matrix-check:has(input:checked) { border-color: rgba(255,122,24,.45); background: rgba(255,122,24,.09); color: var(--text); }
.permission-matrix-check:has(input:disabled) { opacity: .7; }
@media (max-width: 900px) {
  .permission-matrix-row { grid-template-columns: 1fr 1fr; }
  .permission-matrix-main { grid-column: 1 / -1; }
  .permission-matrix-child { margin-left: 0; }
  .permission-sublist { margin-left: 0; }
}

/* Permission system UX refinements - 2026-05-22 */
.permissions-hero,
.permission-groups-hero {
  overflow: hidden;
}
.permission-groups-page .permission-group-list,
.permissions-page .permissions-list {
  gap: 12px;
}
.permission-group-item .manager-row {
  align-items: stretch;
  padding: 14px;
}
.permission-group-item .manager-main {
  justify-content: center;
}
.permission-group-item .manager-main strong {
  font-size: 1.02rem;
}
.permission-group-open-btn {
  min-width: 142px;
}
.permission-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.permission-modal-actions .btn2 {
  white-space: nowrap;
}
.btn2.danger-soft {
  border-color: rgba(239,68,68,.28);
  color: #fecaca;
  background: rgba(239,68,68,.1);
}
.permission-modal-help {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.permission-matrix-parent {
  position: relative;
}
.permission-matrix-parent::before {
  content: 'Category';
  position: absolute;
  top: -9px;
  left: 18px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,122,24,.25);
  background: rgba(21,31,35,.96);
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.permission-matrix-child {
  border-left: 3px solid rgba(255,122,24,.22);
}
.permission-matrix-check {
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.permission-matrix-check:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
}
.permission-matrix-check input {
  cursor: pointer;
}
.permission-matrix-check:has(input:disabled) input {
  cursor: not-allowed;
}
.permissions-category-item {
  overflow: hidden;
}
.permissions-category-item .permission-row-main {
  background: linear-gradient(135deg, rgba(255,122,24,.075), rgba(255,255,255,.02));
}
.permissions-sublist .permission-sub-row {
  border-left: 3px solid rgba(255,122,24,.18);
}
@media (max-width: 1100px) {
  .permission-group-item .manager-row {
    align-items: center;
  }
  .permission-modal-toolbar {
    align-items: stretch !important;
  }
  .permission-modal-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 720px) {
  .permission-group-open-btn {
    width: 100%;
  }
  .permission-matrix-check {
    min-height: 38px;
  }
}

/* Permission system polish - compact directory + switch matrix (2026-05-22 v3) */
.permissions-page-v2 {
  width: min(100%, 1540px);
  margin: 0 auto;
}
.permissions-hero-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, .9fr);
  gap: 18px;
  align-items: stretch;
}
.permission-hero-copy h2 {
  margin: 8px 0 8px;
  letter-spacing: -.03em;
}
.permission-hero-copy p {
  max-width: 760px;
}
.permission-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.permission-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.permission-stat-card {
  min-height: 96px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,159,28,.16), transparent 9rem),
    rgba(255,255,255,.045);
}
.permission-stat-card span,
.permission-stat-card small {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.permission-stat-card strong {
  display: block;
  margin: 6px 0 3px;
  font-size: 2rem;
  line-height: 1;
  color: var(--text);
}
.permissions-directory-card {
  padding: 22px;
}
.permission-directory-top {
  gap: 18px;
}
.permission-directory-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: max-content;
}
.permissions-toolbar-v2 {
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.permission-capability-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.permission-capability-legend span,
.permission-capability-pills.compact span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.permission-capability-legend span[data-cap="view"],
.permission-capability-pills.compact span[data-cap="view"] { color: var(--info); border-color: rgba(92,200,255,.24); background: rgba(92,200,255,.08); }
.permission-capability-legend span[data-cap="add"],
.permission-capability-pills.compact span[data-cap="add"] { color: var(--ok); border-color: rgba(51,209,122,.24); background: rgba(51,209,122,.08); }
.permission-capability-legend span[data-cap="edit"],
.permission-capability-pills.compact span[data-cap="edit"] { color: var(--brand2); border-color: rgba(255,159,28,.24); background: rgba(255,159,28,.08); }
.permission-capability-legend span[data-cap="delete"],
.permission-capability-pills.compact span[data-cap="delete"] { color: #ff8d96; border-color: rgba(255,77,90,.24); background: rgba(255,77,90,.08); }
.permission-directory {
  display: grid;
  gap: 14px;
}
.permission-directory-section {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.022)),
    var(--panel);
  box-shadow: 0 16px 46px rgba(0,0,0,.13);
}
.permission-directory-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background:
    linear-gradient(135deg, rgba(255,159,28,.105), rgba(255,255,255,.018));
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.permission-title-block {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.permission-directory-icon,
.permission-sub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--brand2);
  flex: 0 0 auto;
}
.permission-directory-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  font-size: 1.05rem;
}
.permission-title-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.permission-title-line h3 {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.15;
}
.permission-title-line code,
.permission-directory-subitem code {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.76);
  font-size: .72rem;
  font-weight: 900;
}
.permission-title-block p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: .87rem;
}
.permission-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 1000;
  white-space: nowrap;
}
.permission-count-pill.active {
  color: var(--ok);
  background: rgba(51,209,122,.10);
  border-color: rgba(51,209,122,.24);
}
.permission-directory-subgrid {
  display: grid;
  gap: 1px;
  padding: 8px;
  background: rgba(0,0,0,.08);
}
.permission-directory-subitem {
  display: grid;
  grid-template-columns: 36px minmax(220px, 1fr) minmax(150px, 260px) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 15px;
  background: rgba(255,255,255,.025);
  transition: background .16s ease, transform .16s ease;
}
.permission-directory-subitem:hover {
  background: rgba(255,255,255,.055);
  transform: translateY(-1px);
}
.permission-sub-icon {
  width: 34px;
  height: 34px;
  border-radius: 13px;
  font-size: .95rem;
}
.permission-sub-copy {
  min-width: 0;
}
.permission-sub-copy strong,
.permission-sub-copy small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.permission-sub-copy small {
  color: var(--muted);
  font-size: .78rem;
  margin-top: 2px;
}
.permission-capability-pills.compact {
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: nowrap;
}
.permission-directory-single-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 16px 74px;
}
.permission-empty-state {
  margin-top: 14px;
  padding: 18px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 18px;
  text-align: center;
  background: rgba(255,255,255,.025);
}
.permission-empty-state strong,
.permission-empty-state span { display: block; }

/* Compact permission group modal switches */
.permission-group-modal-panel {
  width: min(1280px, calc(100vw - 48px)) !important;
}
.permission-group-modal-body {
  max-height: min(72dvh, 760px) !important;
  overflow: auto !important;
}
.permission-modal-toolbar {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0 0 12px !important;
  margin-bottom: 0;
  background: color-mix(in srgb, var(--panel) 94%, transparent) !important;
  backdrop-filter: blur(14px);
}
.permission-modal-help {
  margin: 0 0 10px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  font-size: .82rem;
}
.permission-matrix-head,
.permission-matrix-row {
  display: grid !important;
  grid-template-columns: minmax(270px, 1fr) repeat(4, minmax(52px, 70px)) !important;
  gap: 8px !important;
  align-items: center !important;
}
.permission-matrix-head {
  position: sticky;
  top: 58px;
  z-index: 4;
  margin-bottom: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel2) 94%, transparent);
  backdrop-filter: blur(14px);
}
.permission-matrix-head span,
.permission-matrix-head strong {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.permission-matrix-head strong {
  text-align: center;
}
.permission-matrix {
  gap: 6px !important;
}
.permission-matrix-row {
  min-height: 46px;
  padding: 6px 8px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.024) !important;
}
.permission-matrix-parent {
  border-color: rgba(255,159,28,.18) !important;
  background: linear-gradient(135deg, rgba(255,159,28,.065), rgba(255,255,255,.024)) !important;
}
.permission-matrix-parent::before {
  display: none !important;
}
.permission-matrix-child {
  margin-left: 18px !important;
  border-left: 2px solid rgba(255,159,28,.18) !important;
}
.permission-matrix-main {
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 4px 9px !important;
}
.permission-matrix-main span {
  width: 30px !important;
  height: 30px !important;
  border-radius: 11px !important;
  font-size: .86rem;
}
.permission-matrix-main strong {
  font-size: .88rem;
  line-height: 1.1;
}
.permission-matrix-main small {
  font-size: .68rem !important;
  line-height: 1.1;
}
.permission-switch {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 28px;
  cursor: pointer;
  user-select: none;
}
.permission-switch input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
}
.permission-switch-track {
  position: relative;
  width: 42px;
  height: 22px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.permission-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,.68);
  box-shadow: 0 2px 7px rgba(0,0,0,.28);
  transition: transform .16s ease, background .16s ease;
}
.permission-switch:has(input:checked) .permission-switch-track {
  background: rgba(51,209,122,.34);
  border-color: rgba(51,209,122,.62);
  box-shadow: 0 0 0 3px rgba(51,209,122,.08);
}
.permission-switch:has(input:checked) .permission-switch-track::after {
  transform: translateX(20px);
  background: #eafff2;
}
.permission-switch:hover .permission-switch-track {
  border-color: rgba(255,255,255,.26);
}
.permission-switch:has(input:focus-visible) .permission-switch-track {
  outline: 2px solid rgba(51,209,122,.36);
  outline-offset: 3px;
}
.permission-switch:has(input:disabled) {
  cursor: not-allowed;
  opacity: .58;
}
.permission-switch:has(input:disabled) .permission-switch-track {
  filter: grayscale(.35);
}
.permission-group-item .manager-row {
  min-height: 66px !important;
  align-items: center !important;
}
.permission-group-item .manager-meta {
  min-width: 108px;
}

body.light .permission-title-line code,
body.light .permission-directory-subitem code {
  background: rgba(255,255,255,.72);
  color: #283842;
}
body.light .permission-modal-toolbar,
body.light .permission-matrix-head {
  background: rgba(255,255,255,.94) !important;
}
body.light .permission-directory-section,
body.light .permission-stat-card {
  box-shadow: 0 12px 34px rgba(8,23,32,.08);
}

@media (max-width: 1180px) {
  .permissions-hero-v2 {
    grid-template-columns: 1fr;
  }
  .permissions-toolbar-v2 {
    grid-template-columns: 1fr;
  }
  .permission-capability-legend {
    justify-content: flex-start;
  }
  .permission-directory-subitem {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .permission-directory-subitem code,
  .permission-directory-subitem .permission-capability-pills {
    grid-column: 2;
    justify-content: flex-start;
  }
}
@media (max-width: 900px) {
  .permission-modal-toolbar {
    grid-template-columns: 1fr !important;
  }
  .permission-matrix-head,
  .permission-matrix-row {
    grid-template-columns: minmax(180px, 1fr) repeat(4, minmax(46px, 1fr)) !important;
  }
  .permission-matrix-head {
    top: 132px;
  }
  .permission-matrix-child {
    margin-left: 0 !important;
  }
}
@media (max-width: 720px) {
  .permission-stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .permission-directory-section-head,
  .permission-directory-single-row {
    align-items: flex-start;
    flex-direction: column;
    padding-left: 14px;
  }
  .permission-title-block {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .permission-directory-icon {
    width: 38px;
    height: 38px;
  }
  .permission-capability-pills.compact {
    flex-wrap: wrap;
  }
  .permission-matrix-head span,
  .permission-matrix-main small {
    display: none;
  }
  .permission-matrix-head,
  .permission-matrix-row {
    grid-template-columns: minmax(138px, 1fr) repeat(4, 42px) !important;
    gap: 5px !important;
  }
  .permission-switch-track {
    width: 36px;
    height: 20px;
  }
  .permission-switch-track::after {
    width: 12px;
    height: 12px;
  }
  .permission-switch:has(input:checked) .permission-switch-track::after {
    transform: translateX(16px);
  }
}


/* Central permission action visibility fallback.
   Backend POST checks still enforce the real permission; these rules only keep the UI clean. */
body.admin-layout-body[data-can-add="0"] [data-permission-action="add"],
body.admin-layout-body[data-can-add="0"] [data-action-capability="add"],
body.admin-layout-body[data-can-add="0"] [data-add],
body.admin-layout-body[data-can-add="0"] [data-create],
body.admin-layout-body[data-can-add="0"] .manager-add-btn,
body.admin-layout-body[data-can-add="0"] .add-btn,
body.admin-layout-body[data-can-add="0"] .create-btn,
body.admin-layout-body[data-can-edit="0"] [data-permission-action="edit"],
body.admin-layout-body[data-can-edit="0"] [data-action-capability="edit"],
body.admin-layout-body[data-can-edit="0"] [data-edit],
body.admin-layout-body[data-can-edit="0"] .emoji-edit-action,
body.admin-layout-body[data-can-edit="0"] .edit-btn,
body.admin-layout-body[data-can-delete="0"] [data-permission-action="delete"],
body.admin-layout-body[data-can-delete="0"] [data-action-capability="delete"],
body.admin-layout-body[data-can-delete="0"] [data-delete],
body.admin-layout-body[data-can-delete="0"] .emoji-delete-action,
body.admin-layout-body[data-can-delete="0"] .delete-btn,
body.admin-layout-body[data-can-delete="0"] .danger-btn[data-delete],
body.admin-layout-body[data-can-delete="0"] form[data-delete-form] {
  display: none !important;
}

/* Custom Access submenu - 2026-05-22 */
.custom-access-page {
  width: min(100%, 1540px);
  margin: 0 auto;
}
.custom-access-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .7fr);
  gap: 18px;
  align-items: stretch;
}
.custom-access-stats {
  align-self: stretch;
}
.custom-access-manager-card {
  padding: 22px;
}
.custom-access-toolbar {
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
}
.custom-access-list {
  gap: 12px;
}
.custom-access-item .manager-row {
  min-height: 76px;
  padding: 13px 14px;
  align-items: center;
}
.custom-access-avatar {
  background: linear-gradient(135deg, rgba(255,122,24,.95), rgba(255,82,28,.9));
  color: #fff;
  border-color: rgba(255,122,24,.42);
  font-weight: 1000;
}
.custom-access-item .cms-user-badge {
  min-width: 92px;
  justify-content: center;
}
.custom-access-user-select-group {
  margin-bottom: 12px;
}
.custom-access-user-note {
  min-height: 74px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.custom-access-user-note p {
  margin: 5px 0 0;
}
.custom-access-modal-panel .permission-matrix-row {
  grid-template-columns: minmax(240px, 1fr) repeat(4, minmax(80px, 100px));
}
.custom-access-empty-main {
  border-style: dashed;
  background: rgba(255,255,255,.025);
}
@media (max-width: 1100px) {
  .custom-access-hero {
    grid-template-columns: 1fr;
  }
  .custom-access-toolbar {
    grid-template-columns: 1fr;
  }
  .custom-access-item .manager-row {
    align-items: stretch;
  }
}
@media (max-width: 760px) {
  .custom-access-modal-panel .permission-matrix-row {
    grid-template-columns: 1fr 1fr;
  }
  .custom-access-item .cms-user-badge,
  .custom-access-item .manager-meta,
  .custom-access-item .manager-actions {
    width: 100%;
  }
}


/* Sort / drag-drop permission visibility.
   If the active backend page does not allow Edit, sorting controls are hidden and drag/drop is blocked by assets/app.js. */
body.admin-layout-body[data-can-edit="0"] .drag-handle,
body.admin-layout-body[data-can-edit="0"] .manager-drag-handle,
body.admin-layout-body[data-can-edit="0"] .drag-hint,
body.admin-layout-body[data-can-edit="0"] [data-order-status],
body.admin-layout-body[data-can-edit="0"] [data-admin-pages-order-status],
body.admin-layout-body[data-can-edit="0"] .manager-order-status,
body.admin-layout-body[data-can-edit="0"] #personnelOrderStatus,
body.admin-layout-body[data-can-edit="0"] #applicationQuestionOrderStatus,
body.admin-layout-body[data-can-edit="0"] #applicationQuestionCategoryOrderStatus,
body.admin-layout-body[data-can-edit="0"] #sogOrderStatus,
body.admin-layout-body[data-can-edit="0"] #sogCreatorOrderStatus {
  display: none !important;
}
body.admin-layout-body[data-can-edit="0"] .sortable-row,
body.admin-layout-body[data-can-edit="0"] .personnel-sort-row,
body.admin-layout-body[data-can-edit="0"] [data-admin-pages-sort-row],
body.admin-layout-body[data-can-edit="0"] [data-page-admin-row],
body.admin-layout-body[data-can-edit="0"] [data-question-row],
body.admin-layout-body[data-can-edit="0"] [data-category-row] {
  cursor: default !important;
}
body.admin-layout-body[data-can-edit="0"] .sortable-list,
body.admin-layout-body[data-can-edit="0"] .personnel-sort-list,
body.admin-layout-body[data-can-edit="0"] [data-sort-list],
body.admin-layout-body[data-can-edit="0"] [data-admin-pages-sort-list],
body.admin-layout-body[data-can-edit="0"] [data-page-admin-rows] {
  touch-action: auto;
}
body.admin-layout-body[data-can-edit="0"] .sortable-row.sort-disabled-no-edit,
body.admin-layout-body[data-can-edit="0"] .personnel-sort-row.sort-disabled-no-edit,
body.admin-layout-body[data-can-edit="0"] [data-admin-pages-sort-row].sort-disabled-no-edit,
body.admin-layout-body[data-can-edit="0"] [data-page-admin-row].sort-disabled-no-edit {
  user-select: text;
}


/* List layout polish for permission-hidden controls - 2026-05-22
   Rows now collapse cleanly when Sort, Edit, or Delete controls are hidden by permissions. */
body.admin-layout-body .fh-list-fluid {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body.admin-layout-body .fh-list-fluid > * {
  min-width: 0;
}

body.admin-layout-body .fh-list-fluid .manager-icon,
body.admin-layout-body .fh-list-fluid .page-admin-row-icon,
body.admin-layout-body .fh-list-fluid .user-avatar,
body.admin-layout-body .fh-list-fluid .drag-handle,
body.admin-layout-body .fh-list-fluid .application-question-drag,
body.admin-layout-body .fh-list-fluid .application-category-drag,
body.admin-layout-body .fh-list-fluid .custom-access-avatar,
body.admin-layout-body .fh-list-fluid .training-avatar {
  flex: 0 0 auto !important;
}

body.admin-layout-body .fh-list-fluid .manager-main,
body.admin-layout-body .fh-list-fluid .page-admin-row-main,
body.admin-layout-body .fh-list-fluid .user-main,
body.admin-layout-body .fh-list-fluid .sort-member-main,
body.admin-layout-body .fh-list-fluid .application-question-row-content,
body.admin-layout-body .fh-list-fluid .application-category-row-main,
body.admin-layout-body .fh-list-fluid .training-personnel-main {
  flex: 1 1 280px !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

body.admin-layout-body .fh-list-fluid .manager-main strong,
body.admin-layout-body .fh-list-fluid .manager-main small,
body.admin-layout-body .fh-list-fluid .page-admin-row-main strong,
body.admin-layout-body .fh-list-fluid .page-admin-row-main small,
body.admin-layout-body .fh-list-fluid .user-main strong,
body.admin-layout-body .fh-list-fluid .user-main small,
body.admin-layout-body .fh-list-fluid .application-question-row-title strong,
body.admin-layout-body .fh-list-fluid .application-category-row-title strong,
body.admin-layout-body .fh-list-fluid .training-personnel-main strong,
body.admin-layout-body .fh-list-fluid .training-personnel-main small {
  text-align: left !important;
}

body.admin-layout-body .fh-list-fluid .manager-meta,
body.admin-layout-body .fh-list-fluid .manager-pill,
body.admin-layout-body .fh-list-fluid .status-pill,
body.admin-layout-body .fh-list-fluid .user-pill,
body.admin-layout-body .fh-list-fluid .cms-user-badge,
body.admin-layout-body .fh-list-fluid .application-question-row-type,
body.admin-layout-body .fh-list-fluid .application-question-row-state,
body.admin-layout-body .fh-list-fluid .application-category-count,
body.admin-layout-body .fh-list-fluid .training-count-pill,
body.admin-layout-body .fh-list-fluid .training-personnel-meta {
  flex: 0 0 auto !important;
  justify-self: auto !important;
  align-self: center !important;
  margin-left: 0 !important;
}

body.admin-layout-body .fh-list-fluid .manager-actions,
body.admin-layout-body .fh-list-fluid .page-admin-actions,
body.admin-layout-body .fh-list-fluid .user-actions,
body.admin-layout-body .fh-list-fluid .sort-actions,
body.admin-layout-body .fh-list-fluid .application-question-row-actions,
body.admin-layout-body .fh-list-fluid .application-category-actions,
body.admin-layout-body .fh-list-fluid [data-row-actions] {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

body.admin-layout-body .fh-empty-actions,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions .manager-actions,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions .page-admin-actions,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions .user-actions,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions .sort-actions,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions .application-question-row-actions,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions .application-category-actions,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions [data-row-actions],
body.admin-layout-body .user-actions:has(.cms-user-locked-spacer:only-child) {
  display: none !important;
}

body.admin-layout-body .fh-list-fluid.fh-list-no-actions .manager-meta:last-of-type,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions .manager-pill:last-of-type,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions .status-pill:last-of-type,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions .cms-user-badge:last-of-type,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions .application-question-row-state:last-of-type,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions .application-category-count:last-of-type {
  margin-right: 0 !important;
}

body.admin-layout-body .fh-list-fluid.fh-list-no-sort {
  cursor: default !important;
}

body.admin-layout-body .fh-list-fluid.fh-list-no-sort .drag-handle,
body.admin-layout-body .fh-list-fluid.fh-list-no-sort .manager-drag-handle,
body.admin-layout-body .fh-list-fluid.fh-list-no-sort .application-question-drag,
body.admin-layout-body .fh-list-fluid.fh-list-no-sort .application-category-drag {
  display: none !important;
}

body.admin-layout-body .fh-list-fluid .emoji-row-action,
body.admin-layout-body .fh-list-fluid .icon-btn,
body.admin-layout-body .fh-list-fluid .btn-icon,
body.admin-layout-body .fh-list-fluid .btn2.small {
  flex: 0 0 auto !important;
}

body.admin-layout-body .fh-list-fluid .cms-user-locked-spacer {
  display: none !important;
}

/* Keep lists balanced when only labels/status remain. */
body.admin-layout-body .fh-list-fluid.fh-list-no-actions.fh-list-no-sort {
  padding-right: 16px !important;
}

body.admin-layout-body .fh-list-fluid.fh-list-no-actions .page-admin-row-main,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions .manager-main,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions .user-main,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions .sort-member-main,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions .application-question-row-content,
body.admin-layout-body .fh-list-fluid.fh-list-no-actions .application-category-row-main {
  padding-right: 8px !important;
}

@media (max-width: 900px) {
  body.admin-layout-body .fh-list-fluid {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  body.admin-layout-body .fh-list-fluid .manager-main,
  body.admin-layout-body .fh-list-fluid .page-admin-row-main,
  body.admin-layout-body .fh-list-fluid .user-main,
  body.admin-layout-body .fh-list-fluid .sort-member-main,
  body.admin-layout-body .fh-list-fluid .application-question-row-content,
  body.admin-layout-body .fh-list-fluid .application-category-row-main,
  body.admin-layout-body .fh-list-fluid .training-personnel-main {
    flex: 1 1 calc(100% - 64px) !important;
  }
  body.admin-layout-body .fh-list-fluid .manager-meta,
  body.admin-layout-body .fh-list-fluid .manager-pill,
  body.admin-layout-body .fh-list-fluid .status-pill,
  body.admin-layout-body .fh-list-fluid .cms-user-badge,
  body.admin-layout-body .fh-list-fluid .application-question-row-type,
  body.admin-layout-body .fh-list-fluid .application-question-row-state,
  body.admin-layout-body .fh-list-fluid .application-category-count {
    margin-left: 54px !important;
  }
  body.admin-layout-body .fh-list-fluid .manager-actions,
  body.admin-layout-body .fh-list-fluid .page-admin-actions,
  body.admin-layout-body .fh-list-fluid .user-actions,
  body.admin-layout-body .fh-list-fluid .sort-actions,
  body.admin-layout-body .fh-list-fluid .application-question-row-actions,
  body.admin-layout-body .fh-list-fluid .application-category-actions {
    width: calc(100% - 54px) !important;
    margin-left: 54px !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 640px) {
  body.admin-layout-body .fh-list-fluid {
    gap: 10px !important;
    padding: 12px !important;
  }
  body.admin-layout-body .fh-list-fluid .manager-main,
  body.admin-layout-body .fh-list-fluid .page-admin-row-main,
  body.admin-layout-body .fh-list-fluid .user-main,
  body.admin-layout-body .fh-list-fluid .sort-member-main,
  body.admin-layout-body .fh-list-fluid .application-question-row-content,
  body.admin-layout-body .fh-list-fluid .application-category-row-main,
  body.admin-layout-body .fh-list-fluid .training-personnel-main {
    flex-basis: 100% !important;
  }
  body.admin-layout-body .fh-list-fluid .manager-meta,
  body.admin-layout-body .fh-list-fluid .manager-pill,
  body.admin-layout-body .fh-list-fluid .status-pill,
  body.admin-layout-body .fh-list-fluid .cms-user-badge,
  body.admin-layout-body .fh-list-fluid .application-question-row-type,
  body.admin-layout-body .fh-list-fluid .application-question-row-state,
  body.admin-layout-body .fh-list-fluid .application-category-count,
  body.admin-layout-body .fh-list-fluid .manager-actions,
  body.admin-layout-body .fh-list-fluid .page-admin-actions,
  body.admin-layout-body .fh-list-fluid .user-actions,
  body.admin-layout-body .fh-list-fluid .sort-actions,
  body.admin-layout-body .fh-list-fluid .application-question-row-actions,
  body.admin-layout-body .fh-list-fluid .application-category-actions {
    margin-left: 0 !important;
  }
}


/* Users List tab/search visibility fix. Older user row rules use display:grid!important,
   so hidden/filter states need an explicit important override. */
.user-row[hidden],
.users-tab-empty[hidden]{
  display:none !important;
}

/* Training options row wrap fix: keep right-side actions visible with long rank/question text */
.training-option-manager-row.manager-row,
.training-option-manager-row.manager-sort-row {
  grid-template-columns: 40px 52px minmax(160px,.9fr) 72px minmax(120px,.7fr) minmax(220px,1.25fr) 82px max-content !important;
  align-items: start !important;
}
.training-option-manager-row .training-wide-meta strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.28;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.training-option-manager-row .manager-pill {
  align-self: center;
  justify-self: start;
}
.training-option-manager-row .training-manager-actions,
.training-manager-actions {
  min-width: max-content;
  justify-self: end;
  align-self: center;
}
.training-add-question-action {
  min-width: 110px;
  justify-content: center;
  padding-left: 13px !important;
  padding-right: 13px !important;
}
.training-question-manager-row .manager-main strong {
  white-space: normal !important;
  overflow-wrap: anywhere;
}
@media (max-width: 1280px) {
  .training-option-manager-row.manager-row,
  .training-option-manager-row.manager-sort-row {
    grid-template-columns: 40px 52px minmax(150px,1fr) 72px minmax(180px,1.12fr) 82px max-content !important;
  }
  .training-option-manager-row .training-wide-meta:nth-of-type(2) {
    display: block !important;
  }
  .training-option-manager-row .training-wide-meta:first-of-type {
    display: none !important;
  }
}

/* Training options eligible-ranks layout fix: keep long rank lists out of the row grid */
.training-option-main .training-rank-summary {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 7px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,159,28,.20);
  background: rgba(255,159,28,.08);
  color: rgba(255,255,255,.70);
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}
.training-option-manager-row.manager-row,
.training-option-manager-row.manager-sort-row {
  grid-template-columns: 40px 52px minmax(220px,1fr) 72px minmax(150px,.72fr) 82px max-content !important;
  align-items: center !important;
}
.training-option-manager-row .training-wide-meta strong {
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.22;
}
@media (max-width: 1280px) {
  .training-option-manager-row.manager-row,
  .training-option-manager-row.manager-sort-row {
    grid-template-columns: 40px 52px minmax(190px,1fr) 72px minmax(130px,.68fr) 82px max-content !important;
  }
  .training-option-manager-row .training-wide-meta:first-of-type {
    display: block !important;
  }
}
@media (max-width: 1000px) {
  .training-option-manager-row.manager-row,
  .training-option-manager-row.manager-sort-row {
    grid-template-columns: 40px 54px minmax(0,1fr) !important;
  }
}

/* SOG font-size reader repair - keep default text readable while allowing editor sizes */
.sog-reader-document-layout .sog-doc-page > .sog-section-content {
  font-size: clamp(1.03rem, 1.18vw, 1.16rem);
  line-height: 1.85;
}

.sog-reader-document-layout .sog-doc-page > .sog-section-content p,
.sog-reader-document-layout .sog-doc-page > .sog-section-content li,
.sog-reader-document-layout .sog-doc-page > .sog-section-content td,
.sog-reader-document-layout .sog-doc-page > .sog-section-content th,
.sog-reader-document-layout .sog-doc-page > .sog-section-content blockquote {
  line-height: inherit;
}

.sog-reader-document-layout .sog-doc-page > .sog-section-content [style*="font-size"] {
  line-height: 1.45;
}

.sog-section-toolbar .rich-size-menu button[data-section-font-size] {
  min-width: 78px;
  justify-content: center;
}

/* ------------------------------------------------------------------
   Backend list final column alignment repair - 2026-05-24
   Replaces the broad list override with scoped, page-by-page grids.
   Main text stays left-aligned; meta, badges and actions are centered.
   The .fh-list-no-sort / .fh-list-no-actions classes are added by app.js
   when permissions hide drag handles or action buttons.
------------------------------------------------------------------ */
body.admin-layout-body .fh-empty-actions,
body.admin-layout-body .fh-list-no-actions .manager-actions,
body.admin-layout-body .fh-list-no-actions .page-admin-actions,
body.admin-layout-body .fh-list-no-actions .user-actions,
body.admin-layout-body .fh-list-no-actions .sort-actions,
body.admin-layout-body .fh-list-no-actions [data-row-actions] {
  display: none !important;
}

body.admin-layout-body .fh-list-no-sort .manager-drag-handle,
body.admin-layout-body .fh-list-no-sort .drag-handle,
body.admin-layout-body .fh-list-no-sort [data-drag-handle] {
  display: none !important;
}

body.admin-layout-body .manager-row,
body.admin-layout-body .page-admin-row,
body.admin-layout-body .user-row,
body.admin-layout-body .application-review-summary-row,
body.admin-layout-body .log-row {
  align-items: center !important;
}

body.admin-layout-body .manager-row > *,
body.admin-layout-body .page-admin-row > *,
body.admin-layout-body .user-row > *,
body.admin-layout-body .application-review-summary-row > *,
body.admin-layout-body .log-row > * {
  min-width: 0 !important;
  align-self: center !important;
}

body.admin-layout-body .manager-main,
body.admin-layout-body .page-admin-row-main,
body.admin-layout-body .user-main,
body.admin-layout-body .compact-user-main,
body.admin-layout-body .application-review-summary-copy,
body.admin-layout-body .log-main {
  min-width: 0 !important;
  text-align: left !important;
  justify-self: stretch !important;
}

body.admin-layout-body .manager-main strong,
body.admin-layout-body .manager-main small,
body.admin-layout-body .page-admin-row-main strong,
body.admin-layout-body .page-admin-row-main small,
body.admin-layout-body .user-main strong,
body.admin-layout-body .user-main small,
body.admin-layout-body .compact-user-main strong,
body.admin-layout-body .compact-user-main small,
body.admin-layout-body .application-review-summary-copy h3,
body.admin-layout-body .application-review-summary-copy p {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left !important;
}

body.admin-layout-body .manager-icon,
body.admin-layout-body .manager-drag-handle,
body.admin-layout-body .drag-handle,
body.admin-layout-body .page-admin-row-icon,
body.admin-layout-body .user-avatar,
body.admin-layout-body .log-action-icon,
body.admin-layout-body .manager-meta,
body.admin-layout-body .manager-pill,
body.admin-layout-body .status-pill,
body.admin-layout-body .cms-user-badge,
body.admin-layout-body .application-status-pill,
body.admin-layout-body .application-enabled-pill,
body.admin-layout-body .application-disabled-pill,
body.admin-layout-body .application-temp-password-chip,
body.admin-layout-body .application-review-mini-meta,
body.admin-layout-body .manager-actions,
body.admin-layout-body .page-admin-actions,
body.admin-layout-body .user-actions,
body.admin-layout-body .log-meta,
body.admin-layout-body .log-time {
  align-self: center !important;
  justify-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.admin-layout-body .manager-actions,
body.admin-layout-body .page-admin-actions,
body.admin-layout-body .user-actions,
body.admin-layout-body .actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

/* Applications List */
body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-review-card-compact {
  padding: 12px 14px !important;
}
body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-review-summary-row {
  display: grid !important;
  grid-template-columns: 102px minmax(0, 1fr) 144px 168px 126px 82px !important;
  column-gap: 12px !important;
  min-height: 48px !important;
}
body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-review-summary-left,
body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-review-summary-right {
  display: contents !important;
}
body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-status-pill {
  justify-self: start !important;
}
body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-review-summary-copy {
  align-self: center !important;
}
body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-review-summary-copy h3 {
  margin: 0 0 3px !important;
}
body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-review-summary-copy p {
  margin: 0 !important;
}
body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-enabled-pill,
body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-disabled-pill,
body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-temp-password-chip,
body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-review-mini-meta {
  justify-self: start !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-review-summary-right .btn2.small {
  justify-self: end !important;
  min-width: 76px !important;
  justify-content: center !important;
}
body.admin-layout-body .application-chip-placeholder {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Business Information */
body.admin-layout-body .business-info-row.manager-row,
body.admin-layout-body .business-info-row.fh-list-fluid {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 90px 150px 82px max-content !important;
  column-gap: 14px !important;
}
body.admin-layout-body .business-info-row.fh-list-no-actions {
  grid-template-columns: 52px minmax(0, 1fr) 90px 150px 82px !important;
}
body.admin-layout-body .business-info-row .manager-actions {
  justify-self: end !important;
}
body.admin-layout-body .business-info-row .manager-meta {
  text-align: center !important;
}

/* Business Types / Business Equipment */
body.admin-layout-body .business-types-row.manager-row,
body.admin-layout-body .business-types-row.fh-list-fluid,
body.admin-layout-body .business-equipment-row.manager-row,
body.admin-layout-body .business-equipment-row.fh-list-fluid {
  display: grid !important;
  grid-template-columns: 38px 48px minmax(0, 1fr) 86px max-content !important;
  column-gap: 12px !important;
}
body.admin-layout-body .business-types-row.fh-list-no-sort,
body.admin-layout-body .business-equipment-row.fh-list-no-sort {
  grid-template-columns: 48px minmax(0, 1fr) 86px max-content !important;
}
body.admin-layout-body .business-types-row.fh-list-no-actions,
body.admin-layout-body .business-equipment-row.fh-list-no-actions {
  grid-template-columns: 38px 48px minmax(0, 1fr) 86px !important;
}
body.admin-layout-body .business-types-row.fh-list-no-sort.fh-list-no-actions,
body.admin-layout-body .business-equipment-row.fh-list-no-sort.fh-list-no-actions {
  grid-template-columns: 48px minmax(0, 1fr) 86px !important;
}
body.admin-layout-body .business-types-row .manager-actions,
body.admin-layout-body .business-equipment-row .manager-actions {
  justify-self: end !important;
}

/* Built-in PHP Pages */
body.admin-layout-body .manager-row[data-builtin-row],
body.admin-layout-body .manager-row[data-builtin-row].fh-list-fluid {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 92px max-content !important;
  column-gap: 14px !important;
}
body.admin-layout-body .manager-row[data-builtin-row].fh-list-no-actions {
  grid-template-columns: 48px minmax(0, 1fr) 92px !important;
}
body.admin-layout-body .manager-row[data-builtin-row] .manager-actions {
  justify-self: end !important;
}

/* Generic page/admin rows */
body.admin-layout-body .page-admin-row,
body.admin-layout-body .page-admin-row.fh-list-fluid {
  display: grid !important;
  grid-template-columns: 38px 48px minmax(0, 1fr) 92px max-content !important;
  column-gap: 12px !important;
}
body.admin-layout-body .page-admin-row.fh-list-no-sort {
  grid-template-columns: 48px minmax(0, 1fr) 92px max-content !important;
}
body.admin-layout-body .page-admin-row.fh-list-no-actions {
  grid-template-columns: 38px 48px minmax(0, 1fr) 92px !important;
}
body.admin-layout-body .page-admin-row.fh-list-no-sort.fh-list-no-actions {
  grid-template-columns: 48px minmax(0, 1fr) 92px !important;
}
body.admin-layout-body .page-admin-row .page-admin-actions {
  justify-self: end !important;
}

/* Advanced Menu Links */
body.admin-layout-body .legacy-menu-row.manager-row,
body.admin-layout-body .legacy-menu-row.fh-list-fluid {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 120px 92px 110px max-content !important;
  column-gap: 12px !important;
}
body.admin-layout-body .legacy-menu-row.fh-list-no-actions {
  grid-template-columns: 48px minmax(0, 1fr) 120px 92px 110px !important;
}
body.admin-layout-body .legacy-menu-child {
  margin-left: 34px !important;
  width: calc(100% - 34px) !important;
}
body.admin-layout-body .legacy-menu-row .manager-actions {
  justify-self: end !important;
}
body.admin-layout-body .legacy-menu-row .manager-main small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Users List */
body.admin-layout-body .users-list .user-row:not(.account-link-row),
body.admin-layout-body .users-list .user-row.fh-list-fluid:not(.account-link-row) {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) 118px 108px max-content !important;
  column-gap: 14px !important;
}
body.admin-layout-body .users-list .user-row.fh-list-no-actions:not(.account-link-row) {
  grid-template-columns: 46px minmax(0, 1fr) 118px 108px !important;
}
body.admin-layout-body .users-list .user-actions {
  justify-self: end !important;
}
body.admin-layout-body .users-list .cms-user-locked-spacer,
body.admin-layout-body .users-list .user-actions:has(.cms-user-locked-spacer:only-child) {
  display: none !important;
}
body.admin-layout-body .cms-user-badge.cms-user-role.master {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(255,95,46,.96), rgba(255,159,28,.96)) !important;
  border: 1px solid rgba(255,159,28,.38) !important;
}
body.admin-layout-body .cms-user-badge.cms-user-role.superadmin {
  color: #d9c4ff !important;
  background: rgba(139,92,246,.18) !important;
  border: 1px solid rgba(167,139,250,.38) !important;
}

/* Account Links */
body.admin-layout-body .account-links-list .account-link-row,
body.admin-layout-body .account-links-list .account-link-row.fh-list-fluid {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) 106px minmax(0, 1fr) !important;
  column-gap: 14px !important;
}
body.admin-layout-body .account-links-list .account-link-row .cms-user-badge {
  justify-self: center !important;
}

/* Logs */
body.admin-layout-body .logs-list .log-row {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1.05fr) 124px minmax(0, 1fr) 150px !important;
  column-gap: 14px !important;
  min-height: 68px !important;
}
body.admin-layout-body .logs-list .log-main {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.admin-layout-body .logs-list .log-main strong,
body.admin-layout-body .logs-list .log-main span,
body.admin-layout-body .logs-list .log-main small {
  display: inline !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
body.admin-layout-body .logs-list .log-main span::before,
body.admin-layout-body .logs-list .log-main small::before {
  content: ' • ';
  color: var(--muted);
  font-weight: 700;
}
body.admin-layout-body .logs-list .log-meta {
  display: grid !important;
  gap: 2px !important;
  text-align: center !important;
  min-width: 0 !important;
}
body.admin-layout-body .logs-list .log-meta strong,
body.admin-layout-body .logs-list .log-meta span,
body.admin-layout-body .logs-list .log-time {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
body.admin-layout-body .logs-list .log-time {
  justify-self: end !important;
  text-align: right !important;
  color: var(--muted) !important;
}

@media (max-width: 1180px) {
  body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-review-summary-row,
  body.admin-layout-body .business-info-row.manager-row,
  body.admin-layout-body .business-info-row.fh-list-fluid,
  body.admin-layout-body .business-types-row.manager-row,
  body.admin-layout-body .business-types-row.fh-list-fluid,
  body.admin-layout-body .business-equipment-row.manager-row,
  body.admin-layout-body .business-equipment-row.fh-list-fluid,
  body.admin-layout-body .manager-row[data-builtin-row],
  body.admin-layout-body .manager-row[data-builtin-row].fh-list-fluid,
  body.admin-layout-body .page-admin-row,
  body.admin-layout-body .page-admin-row.fh-list-fluid,
  body.admin-layout-body .legacy-menu-row.manager-row,
  body.admin-layout-body .legacy-menu-row.fh-list-fluid,
  body.admin-layout-body .users-list .user-row:not(.account-link-row),
  body.admin-layout-body .users-list .user-row.fh-list-fluid:not(.account-link-row),
  body.admin-layout-body .account-links-list .account-link-row,
  body.admin-layout-body .account-links-list .account-link-row.fh-list-fluid,
  body.admin-layout-body .logs-list .log-row {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    row-gap: 10px !important;
  }

  body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-review-summary-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-review-summary-left,
  body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-review-summary-right {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  body.admin-layout-body .application-admin-card:not(.training-applications-card) .application-review-summary-right .btn2.small,
  body.admin-layout-body .business-info-row > :not(.manager-icon),
  body.admin-layout-body .business-types-row > :not(.manager-drag-handle):not(.manager-icon),
  body.admin-layout-body .business-equipment-row > :not(.manager-drag-handle):not(.manager-icon),
  body.admin-layout-body .manager-row[data-builtin-row] > :not(.manager-icon),
  body.admin-layout-body .page-admin-row > :not(.drag-handle):not(.page-admin-row-icon),
  body.admin-layout-body .legacy-menu-row > :not(.manager-icon),
  body.admin-layout-body .users-list .user-row:not(.account-link-row) > :not(.user-avatar),
  body.admin-layout-body .account-links-list .account-link-row > :not(.user-avatar),
  body.admin-layout-body .logs-list .log-row > :not(.log-action-icon) {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  body.admin-layout-body .legacy-menu-child {
    margin-left: 0 !important;
    width: 100% !important;
  }

  body.admin-layout-body .logs-list .log-time {
    text-align: left !important;
  }
}

/* Final alignment guard: old flex normalizer must not push grid items sideways. */
body.admin-layout-body .manager-meta,
body.admin-layout-body .manager-pill,
body.admin-layout-body .status-pill,
body.admin-layout-body .cms-user-badge,
body.admin-layout-body .application-status-pill,
body.admin-layout-body .application-enabled-pill,
body.admin-layout-body .application-disabled-pill,
body.admin-layout-body .application-temp-password-chip,
body.admin-layout-body .application-review-mini-meta,
body.admin-layout-body .manager-actions,
body.admin-layout-body .page-admin-actions,
body.admin-layout-body .user-actions,
body.admin-layout-body .log-meta,
body.admin-layout-body .log-time {
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ------------------------------------------------------------------
   Logs details under username - 2026-05-24
   Keeps the row in columns, but stacks the action/target details below
   the user name for cleaner reading.
------------------------------------------------------------------ */
body.admin-layout-body .logs-list .log-main {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: normal !important;
}

body.admin-layout-body .logs-list .log-user-name {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}

body.admin-layout-body .logs-list .log-details-line {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--muted) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

body.admin-layout-body .logs-list .log-details-line span,
body.admin-layout-body .logs-list .log-details-line small {
  display: inline !important;
  overflow: visible !important;
  white-space: nowrap !important;
  font: inherit !important;
  color: inherit !important;
}

body.admin-layout-body .logs-list .log-details-line span::before,
body.admin-layout-body .logs-list .log-details-line small::before,
body.admin-layout-body .logs-list .log-detail-summary::before {
  content: none !important;
}

body.admin-layout-body .logs-list .log-details-line small:not(:empty)::before {
  content: ' • ' !important;
  color: var(--muted) !important;
  font-weight: 800 !important;
}

body.admin-layout-body .logs-list .log-detail-summary {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--muted) !important;
  font-size: .78rem !important;
  line-height: 1.2 !important;
}

/* ------------------------------------------------------------------
   Logs detail color separation - 2026-05-24
   Removes heavy bullet/dash separators and uses square colored labels.
------------------------------------------------------------------ */
body.admin-layout-body .logs-list .log-details-line {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  color: var(--muted) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

body.admin-layout-body .logs-list .log-detail-chip {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 22px !important;
  padding: 0 8px !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-left: 2px solid rgba(255,255,255,.16) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .73rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body.admin-layout-body .logs-list .log-detail-chip::before,
body.admin-layout-body .logs-list .log-detail-chip::after,
body.admin-layout-body .logs-list .log-detail-summary::before {
  content: none !important;
}

body.admin-layout-body .logs-list .log-detail-chip.role {
  flex: 0 1 auto !important;
  color: #c7d2fe !important;
  background: rgba(129,140,248,.08) !important;
  border-left-color: rgba(129,140,248,.75) !important;
}

body.admin-layout-body .logs-list .log-detail-chip.action {
  flex: 0 1 auto !important;
  color: #fcd34d !important;
  background: rgba(255,159,28,.08) !important;
  border-left-color: rgba(255,159,28,.75) !important;
}

body.admin-layout-body .logs-list .log-detail-chip.target {
  flex: 1 1 auto !important;
  color: #9fb0bb !important;
  background: rgba(255,255,255,.025) !important;
  border-left-color: rgba(159,176,187,.55) !important;
}

body.admin-layout-body .logs-list .log-detail-summary {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--muted) !important;
  font-size: .76rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

body.admin-layout-body .logs-list .log-detail-summary span {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 20px !important;
  padding: 0 7px !important;
  border-radius: 0 !important;
  color: #67e8f9 !important;
  background: rgba(92,200,255,.07) !important;
  border: 0 !important;
  border-left: 2px solid rgba(92,200,255,.75) !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

@media (max-width: 1180px) {
  body.admin-layout-body .logs-list .log-details-line {
    flex-wrap: wrap !important;
  }
  body.admin-layout-body .logs-list .log-detail-chip.target {
    flex-basis: auto !important;
  }
}


/* ------------------------------------------------------------------
   Logs detail square labels - 2026-05-24
   Keep color separation but remove rounded chip styling.
------------------------------------------------------------------ */
body.admin-layout-body .logs-list .log-detail-chip,
body.admin-layout-body .logs-list .log-detail-summary span {
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.admin-layout-body .logs-list .log-detail-chip {
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left-width: 2px !important;
  border-left-style: solid !important;
}

/* ------------------------------------------------------------------
   Logs detail plain colored text - 2026-05-24
   Remove chip/label backgrounds and borders; keep only colored text.
------------------------------------------------------------------ */
body.admin-layout-body .logs-list .log-detail-chip,
body.admin-layout-body .logs-list .log-detail-summary span {
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.admin-layout-body .logs-list .log-details-line {
  gap: 8px !important;
}

body.admin-layout-body .logs-list .log-detail-summary {
  gap: 5px !important;
}

body.admin-layout-body .logs-list .log-detail-summary span {
  color: #67e8f9 !important;
}

/* Firehouse OS v2 reports module */
.reports-admin-card .manager-row,
.submitted-reports-card .manager-row,
.public-reports-card .manager-row {
  align-items: center;
}
.report-status-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin: 1rem 0;
}
.report-status-tabs .pill,
.filter-pills .pill {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.5rem .9rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:var(--text);
  text-decoration:none;
  font-weight:800;
}
.report-status-tabs .pill.active,
.filter-pills .pill.active {
  border-color:rgba(255,166,0,.45);
  background:rgba(255,166,0,.13);
  color:#fff;
}
.status-pill.info { background:rgba(56,189,248,.13); border-color:rgba(56,189,248,.28); color:#7dd3fc; }
.status-pill.warn { background:rgba(245,158,11,.13); border-color:rgba(245,158,11,.30); color:#facc15; }
.status-pill.ok { background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.30); color:#4ade80; }
.status-pill.muted,
.status-pill.muted-pill { background:rgba(148,163,184,.10); border-color:rgba(148,163,184,.20); color:#cbd5e1; }
.report-review-row,
.report-row-public {
  grid-template-columns: 52px minmax(240px, 1fr) minmax(130px, 170px) 90px minmax(130px, 180px) auto;
}
.report-review-body .report-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
}
.report-review-body .report-grid > div {
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  padding:.8rem;
  background:rgba(255,255,255,.035);
}
.report-review-body .report-grid span,
.report-review-body .manager-meta span {
  display:block;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  font-weight:900;
}
.report-review-list { margin:.25rem 0 0; padding-left:1.2rem; }
.report-review-list li { margin:.45rem 0; }
.report-text-block {
  white-space:normal;
  line-height:1.65;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:1rem;
  background:rgba(0,0,0,.12);
}
.report-review-actions form { display:inline-flex; }
.warn-btn { border-color:rgba(245,158,11,.35)!important; color:#facc15!important; }
.public-reports-card .report-form fieldset { border:0; padding:0; margin:0; }
.public-reports-card .personnel-modal-group {
  margin-top:1rem;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  padding:1rem;
  background:rgba(255,255,255,.025);
}
.report-extra-questions { margin-top:1rem; }
.report-unit-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.8rem;
}
.report-units-list {
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.report-unit-row {
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:.85rem;
  background:rgba(0,0,0,.14);
}
.report-unit-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) minmax(150px,220px);
  gap:.75rem;
  align-items:end;
}
.report-evidence-existing {
  display:grid;
  gap:.5rem;
  margin-top:.75rem;
}
.report-review-note {
  color:#facc15!important;
  margin-top:.25rem;
}
.report-config-row {
  grid-template-columns:auto 52px minmax(260px,1fr) minmax(90px,120px) minmax(110px,140px) auto;
}
.report-category-row {
  grid-template-columns:auto 52px minmax(260px,1fr) repeat(2,minmax(90px,120px)) minmax(110px,140px) auto;
}
.report-config-row .manager-main small,
.report-row-public .manager-main small,
.report-review-row .manager-main small {
  white-space:normal;
}
@media (max-width: 1100px){
  .report-review-row,
  .report-row-public,
  .report-config-row { grid-template-columns: 48px 1fr; }
  .report-review-row > .manager-meta,
  .report-row-public > .manager-meta,
  .report-config-row > .manager-meta,
  .report-review-row > .status-pill,
  .report-row-public > .status-pill,
  .report-config-row > .status-pill,
  .report-review-row > .actions,
  .report-row-public > .actions,
  .report-config-row > .actions { grid-column:2; justify-self:start; }
  .report-unit-grid { grid-template-columns:1fr; }
  .report-review-body .report-grid { grid-template-columns:1fr; }
}

/* Firehouse OS v2 reports polish - 2026-05-25 */
.reports-v2-card .report-row-public,
.submitted-reports-card .report-review-row {
  grid-template-columns: 52px minmax(280px,1fr) minmax(140px,190px) minmax(90px,120px) auto;
  align-items:center;
}
.report-list-row-v2 .manager-main,
.report-review-row .manager-main { align-self:center; }
.report-icon-actions { justify-content:flex-end; align-items:center; }
.report-type-icon { overflow:hidden; }
.report-type-icon img {
  width:100%; height:100%; max-width:34px; max-height:34px; object-fit:contain; display:block; margin:auto;
}
.report-editor-modal.open,
.report-review-modal.open,
.report-image-modal.open { display:flex; }
.report-editor-panel,
.report-review-panel { max-height:92vh; }
.report-editor-scroll,
.report-review-body {
  max-height: calc(92vh - 150px);
  overflow-y:auto;
  padding-right:.45rem;
}
.report-editor-scroll::-webkit-scrollbar,
.report-review-body::-webkit-scrollbar { width:10px; }
.report-editor-scroll::-webkit-scrollbar-thumb,
.report-review-body::-webkit-scrollbar-thumb { background:rgba(255,166,0,.35); border-radius:999px; }
.personnel-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.report-incident-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.report-incident-grid .full { grid-column:1/-1; }
.report-extra-questions.full { grid-column:1/-1; margin-top:.25rem; }
.report-extra-questions h4 { margin:.35rem 0 .8rem; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; }
.report-unit-vehicle-line {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.75rem;
  align-items:end;
  margin-bottom:.75rem;
}
.report-unit-assignment-grid {
  display:grid;
  grid-template-columns:minmax(190px,1.2fr) minmax(120px,.8fr) minmax(120px,.8fr);
  gap:.65rem;
  align-items:end;
}
.report-evidence-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.75rem;
  margin-top:.85rem;
}
.report-evidence-thumb {
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  border-radius:16px;
  padding:.5rem;
  color:var(--text);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  min-width:0;
}
button.report-evidence-thumb,
.report-evidence-thumb button {
  cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
  color:inherit;
  text-align:left;
  border-radius:14px;
  padding:.45rem;
}
.report-evidence-thumb img {
  width:100%; height:110px; object-fit:cover; border-radius:12px; display:block;
}
.report-evidence-thumb span,
.report-evidence-thumb label {
  font-size:.78rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.report-image-panel { width:min(980px,94vw); max-height:92vh; }
.report-image-panel img { display:block; width:100%; max-height:76vh; object-fit:contain; border-radius:18px; background:rgba(0,0,0,.2); }
.report-signatures {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  align-items:end;
}
.report-signatures > div {
  border-top:1px solid rgba(255,255,255,.32);
  padding-top:.75rem;
  min-height:72px;
}
.report-signatures > div:last-child { text-align:right; }
.report-signatures span { display:block; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:900; }
.report-signatures small { display:block; color:var(--muted); margin-top:.25rem; }
.report-review-body .report-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.report-review-stack { display:grid; gap:.65rem; }
.report-review-unit,
.report-question-answer {
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:rgba(255,255,255,.035);
  padding:.85rem;
}
.report-review-unit > div { margin-top:.4rem; color:var(--muted); }
.report-review-unit span { color:#fbbf24; font-weight:900; margin-right:.35rem; }
.report-question-answer p { margin:.35rem 0 0; white-space:pre-wrap; color:var(--muted); }
.report-evidence-url {
  color:#7dd3fc;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  display:block;
  border-bottom:1px dashed rgba(125,211,252,.25);
  padding:.45rem 0;
}
.report-note-history { display:grid; gap:.65rem; }
.report-note-history > div { border-left:3px solid rgba(255,166,0,.55); padding:.6rem .8rem; background:rgba(255,255,255,.025); }
.report-note-history strong { text-transform:capitalize; color:#fbbf24; }
.report-note-history span { float:right; color:var(--muted); font-size:.8rem; }
.report-note-history p { clear:both; margin:.45rem 0 0; white-space:pre-wrap; color:var(--muted); }
.report-category-row .report-type-icon img { max-width:30px; max-height:30px; }
@media (max-width: 1150px){
  .reports-v2-card .report-row-public,
  .submitted-reports-card .report-review-row { grid-template-columns:48px 1fr; }
  .reports-v2-card .report-row-public > .status-pill,
  .reports-v2-card .report-row-public > .manager-meta,
  .reports-v2-card .report-row-public > .actions,
  .submitted-reports-card .report-review-row > .manager-meta,
  .submitted-reports-card .report-review-row > .status-pill,
  .submitted-reports-card .report-review-row > .actions { grid-column:2; justify-self:start; }
  .personnel-grid-4,
  .report-incident-grid,
  .report-review-body .report-grid { grid-template-columns:1fr; }
  .report-unit-vehicle-line,
  .report-unit-assignment-grid,
  .report-signatures { grid-template-columns:1fr; }
  .report-signatures > div:last-child { text-align:left; }
}

/* Reports v2 modal width/spacing + post-fix polish - 2026-05-25 */
.report-editor-panel,
.report-review-panel {
  width: min(1380px, 97vw);
  max-width: 1380px;
}
.report-editor-scroll,
.report-review-body {
  padding: 1.15rem 1.25rem 1.35rem;
}
.report-editor-scroll .personnel-modal-group,
.report-review-body .personnel-modal-group {
  margin: 0 0 1.25rem;
  padding: 1.15rem;
}
.report-editor-scroll .personnel-modal-group + .personnel-modal-group,
.report-review-body .personnel-modal-group + .personnel-modal-group {
  margin-top: 1.35rem;
}
.report-editor-scroll .form-grid,
.report-review-body .report-grid,
.report-unit-assignment-grid,
.report-unit-vehicle-line {
  gap: 1rem;
}
.report-form label,
.report-form .field,
.report-review-body .report-grid > div {
  min-width: 0;
}
.report-form input,
.report-form select,
.report-form textarea {
  margin-top: .35rem;
}
.report-unit-row {
  padding: 1rem;
  margin-top: .75rem;
}
.report-unit-head {
  padding-bottom: .35rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.report-incident-grid label.full:first-child {
  grid-column: 1 / -1;
}
.report-incident-grid > label:not(.full) {
  align-self: end;
}
.report-extra-questions {
  padding-top: .9rem;
  border-top: 1px dashed rgba(255,255,255,.12);
}
.report-editor-panel .personnel-modal-footer,
.report-review-panel .personnel-modal-footer {
  gap: .75rem;
  padding: 1rem 1.25rem;
}
.report-review-body textarea#reviewNoteBox {
  min-height: 92px;
  resize: vertical;
}
@media (min-width: 1160px){
  .report-editor-panel .personnel-grid-4 { grid-template-columns: 1.25fr 1.15fr .8fr .8fr; }
  .report-editor-panel .personnel-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .report-incident-grid { grid-template-columns: 1.35fr .8fr .8fr; }
  .report-unit-assignment-grid { grid-template-columns: minmax(230px, 1.25fr) minmax(150px, .8fr) minmax(150px, .8fr); }
}
@media (max-width: 1150px){
  .report-editor-panel,
  .report-review-panel { width: min(98vw, 980px); }
  .report-editor-scroll,
  .report-review-body { padding: 1rem; }
}


/* Reports v2 document number + modal/list width/alignment polish - 2026-05-25 */
.report-editor-panel,
.report-review-panel {
  width: min(1580px, 98vw) !important;
  max-width: 1580px !important;
}
.report-editor-scroll,
.report-review-body {
  padding: 1.35rem 1.45rem 1.5rem !important;
}
.report-editor-scroll .personnel-modal-group,
.report-review-body .personnel-modal-group {
  padding: 1.3rem !important;
  margin-bottom: 1.45rem !important;
}
.report-modal-title-wrap {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.25rem;
  width:100%;
  min-width:0;
}
.report-modal-title-wrap h2 { margin-bottom:.15rem; }
.report-document-number {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(56,189,248,.35);
  background:rgba(56,189,248,.10);
  color:#7dd3fc;
  border-radius:999px;
  padding:.42rem .72rem;
  font-size:.78rem;
  line-height:1;
  font-weight:950;
  letter-spacing:.08em;
  white-space:nowrap;
  text-transform:uppercase;
}
.modal-doc-number { margin-top:.2rem; }
.report-doc-slot {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.report-doc-slot.empty { visibility:hidden; }
.reports-v2-card .report-row-public,
.submitted-reports-card .report-review-row {
  align-items:center !important;
  column-gap:1rem;
}
.reports-v2-card .report-row-public {
  grid-template-columns: 52px minmax(300px,1fr) minmax(118px,150px) minmax(135px,165px) minmax(88px,110px) auto !important;
}
.submitted-reports-card .report-review-row {
  grid-template-columns: 52px minmax(320px,1fr) minmax(145px,190px) minmax(82px,105px) minmax(135px,165px) minmax(145px,180px) auto !important;
}
.reports-v2-card .report-row-public > .manager-main,
.submitted-reports-card .report-review-row > .manager-main {
  min-width:0;
  align-self:center;
}
.reports-v2-card .report-row-public > .manager-main strong,
.submitted-reports-card .report-review-row > .manager-main strong,
.reports-v2-card .report-row-public > .manager-main small,
.submitted-reports-card .report-review-row > .manager-main small {
  overflow:hidden;
  text-overflow:ellipsis;
}
.reports-v2-card .report-row-public > .status-pill,
.submitted-reports-card .report-review-row > .status-pill,
.reports-v2-card .report-row-public > .manager-meta,
.submitted-reports-card .report-review-row > .manager-meta,
.reports-v2-card .report-row-public > .report-doc-slot,
.submitted-reports-card .report-review-row > .report-doc-slot,
.reports-v2-card .report-row-public > .actions,
.submitted-reports-card .report-review-row > .actions {
  align-self:center;
  justify-self:center;
}
.reports-v2-card .report-row-public > .actions,
.submitted-reports-card .report-review-row > .actions {
  justify-self:end;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:.5rem;
}
.submitted-reports-card .report-review-row .manager-actions form { display:inline-flex; margin:0; }
@media (max-width: 1250px){
  .reports-v2-card .report-row-public,
  .submitted-reports-card .report-review-row {
    grid-template-columns:48px 1fr !important;
  }
  .reports-v2-card .report-row-public > .status-pill,
  .reports-v2-card .report-row-public > .manager-meta,
  .reports-v2-card .report-row-public > .report-doc-slot,
  .reports-v2-card .report-row-public > .actions,
  .submitted-reports-card .report-review-row > .manager-meta,
  .submitted-reports-card .report-review-row > .report-doc-slot,
  .submitted-reports-card .report-review-row > .status-pill,
  .submitted-reports-card .report-review-row > .actions {
    grid-column:2;
    justify-self:start;
  }
  .report-doc-slot.empty { display:none; }
}
@media (max-width: 1150px){
  .report-editor-panel,
  .report-review-panel { width:min(98vw, 1040px) !important; }
  .report-editor-scroll,
  .report-review-body { padding:1rem !important; }
}


/* Reports v2 frontend spacing and modal repair - 2026-05-25 */
.public-reports-card.reports-v2-card {
  display: grid;
  gap: 1.15rem;
}
.public-reports-card .reports-public-top {
  margin-bottom: .15rem;
}
.public-reports-card .manager-add-btn {
  align-self: center;
}
.reports-public-toolbar {
  margin: .25rem 0 .35rem;
}
.reports-public-search {
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  color: var(--text);
  padding: 0 1.15rem;
  outline: none;
}
.reports-public-search:focus {
  border-color: rgba(255,159,28,.42);
  box-shadow: 0 0 0 4px rgba(255,159,28,.10);
}
.public-report-list {
  margin-top: .25rem;
  gap: .85rem;
}
.report-editor-modal,
.report-review-modal {
  padding: 18px;
}
.report-editor-panel,
.report-review-panel {
  width: min(1720px, 98.5vw) !important;
  max-width: 1720px !important;
  max-height: calc(100dvh - 36px) !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;
}
.report-editor-panel > .personnel-modal-header,
.report-review-panel > .personnel-modal-header {
  flex: 0 0 auto;
}
.report-editor-panel > .alert,
.report-review-panel > .alert {
  flex: 0 0 auto;
  margin: 1rem 1.45rem 0;
  border-radius: 16px;
  line-height: 1.45;
}
.report-editor-panel > .report-form,
.report-review-panel > form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.report-form fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.report-editor-scroll,
.report-review-body {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 1.45rem 1.55rem 1.65rem !important;
  display: grid;
  gap: 1.35rem;
}
.report-editor-scroll .personnel-modal-group,
.report-review-body .personnel-modal-group {
  margin: 0 !important;
  padding: 1.45rem !important;
  border-color: rgba(255,255,255,.105);
  background: rgba(255,255,255,.032);
}
.report-editor-scroll .personnel-modal-group + .personnel-modal-group,
.report-review-body .personnel-modal-group + .personnel-modal-group {
  margin-top: 0 !important;
}
.report-editor-scroll .form-grid,
.report-review-body .report-grid,
.report-unit-assignment-grid,
.report-unit-vehicle-line {
  gap: 1.15rem !important;
}
.report-form label,
.report-review-body .report-grid > div {
  display: grid;
  gap: .5rem;
}
.report-form label input,
.report-form label select,
.report-form label textarea {
  margin-top: 0 !important;
}
.report-unit-row {
  padding: 1.2rem !important;
  margin-top: 1rem !important;
}
.report-unit-row:first-child {
  margin-top: .35rem !important;
}
.report-editor-panel .personnel-modal-footer,
.report-review-panel .personnel-modal-footer {
  flex: 0 0 auto;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(8,18,22,.96);
}
.report-modal-title-wrap {
  align-items: center;
}
.report-document-number.modal-doc-number {
  margin-top: 0;
}
@media (min-width: 1320px){
  .report-editor-panel .personnel-grid-4 { grid-template-columns: 1.25fr 1.2fr .75fr .75fr; }
  .report-editor-panel .personnel-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-incident-grid { grid-template-columns: 1.35fr .75fr .75fr; }
  .report-unit-assignment-grid { grid-template-columns: minmax(260px, 1.35fr) minmax(160px, .75fr) minmax(160px, .75fr); }
}
@media (max-width: 900px){
  .report-editor-modal,
  .report-review-modal { padding: 8px; }
  .report-editor-panel,
  .report-review-panel {
    width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
  }
  .report-editor-scroll,
  .report-review-body {
    padding: 1rem !important;
  }
  .report-editor-scroll .personnel-modal-group,
  .report-review-body .personnel-modal-group {
    padding: 1rem !important;
  }
}


/* Reports v2 backend switch/apparatus polish 2026-05-25 */
.reports-admin-card {
  overflow: hidden;
}
.reports-admin-card .manager-top {
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 14px;
}
.reports-admin-card .manager-toolbar {
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 12px;
  margin-bottom: 14px;
}
.report-config-row {
  align-items: center;
  min-height: 76px;
  gap: 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.024));
  border: 1px solid rgba(255,255,255,.095);
}
.report-config-row:hover {
  border-color: rgba(255,153,0,.25);
  background: linear-gradient(180deg, rgba(255,153,0,.075), rgba(255,255,255,.025));
}
.report-config-row .manager-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255,153,0,.1);
  border: 1px solid rgba(255,153,0,.22);
  font-size: 1.25rem;
}
.report-config-row .manager-main {
  min-width: 0;
  align-self: center;
}
.report-config-row .manager-main strong {
  display: block;
  line-height: 1.25;
}
.report-config-row .manager-main small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-config-row .manager-meta,
.report-config-row .status-pill,
.report-config-row .manager-actions {
  align-self: center;
  justify-self: center;
}
.report-unit-number-meta strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.report-admin-modal-body {
  padding: 18px;
}
.report-admin-section {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
  border-radius: 22px;
  padding: 16px;
}
.report-admin-section .form-grid {
  gap: 14px;
}
.report-form-switch {
  min-height: 58px;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  cursor: pointer;
  user-select: none;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.report-form-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.report-switch-track {
  width: 44px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.16);
  position: relative;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.report-switch-track::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  transition: transform .16s ease, background .16s ease;
}
.report-form-switch input:checked + .report-switch-track {
  background: rgba(46, 204, 113, .26);
  border-color: rgba(46, 204, 113, .62);
  box-shadow: 0 0 0 3px rgba(46,204,113,.08);
}
.report-form-switch input:checked + .report-switch-track::after {
  transform: translateX(20px);
  background: #2ecc71;
}
.report-switch-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.report-switch-copy strong {
  color: var(--text);
  font-size: .92rem;
  font-weight: 900;
}
.report-switch-copy small {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}
.report-form-switch:has(input:focus-visible) {
  border-color: rgba(46,204,113,.48);
  box-shadow: 0 0 0 3px rgba(46,204,113,.1);
}
.report-form .btn.is-loading {
  opacity: .78;
  cursor: wait;
}
@media (max-width: 900px) {
  .report-config-row {
    grid-template-columns: auto 1fr;
  }
  .report-config-row .manager-meta,
  .report-config-row .status-pill,
  .report-config-row .manager-actions {
    justify-self: start;
  }
}

.form-field {
  display: grid;
  gap: 8px;
}
.report-icon-upload-field {
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
}
.reports-admin-modal-panel {
  max-width: min(820px, 94vw);
}

/* Reports v2 unit personnel preservation + extra personnel rows - 2026-05-25 */
.report-unit-assignment-list {
  display: grid;
  gap: .75rem;
}
.report-assignment-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(150px, .8fr) minmax(150px, .8fr);
  gap: 1rem;
  align-items: end;
}
.report-personnel-select-label > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
}
.report-remove-extra-personnel {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(248,113,113,.35);
  background: rgba(248,113,113,.08);
  color: #fca5a5;
  border-radius: 8px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}
.report-remove-extra-personnel:hover {
  background: rgba(248,113,113,.16);
  border-color: rgba(248,113,113,.55);
}
.report-unit-extra-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .9rem;
  padding-top: .85rem;
  border-top: 1px dashed rgba(255,255,255,.10);
}
.report-unit-extra-actions small {
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .02em;
}
.report-unit-extra-actions .btn2:disabled {
  opacity: .45;
  cursor: not-allowed;
}
@media (max-width: 1150px) {
  .report-assignment-row {
    grid-template-columns: 1fr;
  }
  .report-unit-extra-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Reports v2 apparatus/evidence/category cleanup - 2026-05-25 */
.report-apparatus-row.report-config-row {
  grid-template-columns: auto 52px minmax(320px, 1fr) minmax(90px, 120px) minmax(110px, 140px) auto;
}
.report-apparatus-row .manager-main strong {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  flex-wrap: wrap;
}
.report-inline-unit-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: .18rem .55rem;
  border-radius: 999px;
  color: #7dd3fc;
  background: rgba(56,189,248,.10);
  border: 1px solid rgba(56,189,248,.24);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
}
.report-apparatus-modal-grid {
  align-items: end;
}
.report-category-row.report-config-row {
  grid-template-columns: auto 52px minmax(320px, 1fr) minmax(90px, 120px) minmax(110px, 140px) auto;
}
.report-evidence-section {
  overflow: visible;
}
.report-upload-dropzone {
  position: relative;
  min-height: 158px;
  display: grid !important;
  place-items: center;
  text-align: center;
  gap: .35rem !important;
  padding: 1.2rem;
  border: 1px dashed rgba(125,211,252,.34);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(56,189,248,.07), rgba(255,255,255,.025));
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.report-upload-dropzone:hover {
  border-color: rgba(255,166,0,.55);
  background: linear-gradient(180deg, rgba(255,166,0,.10), rgba(255,255,255,.028));
  transform: translateY(-1px);
}
.report-upload-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.report-upload-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,166,0,.12);
  border: 1px solid rgba(255,166,0,.24);
  font-size: 1.45rem;
}
.report-upload-dropzone strong {
  font-size: 1rem;
  color: var(--text);
}
.report-upload-dropzone em,
.report-upload-dropzone small {
  color: var(--muted);
  font-style: normal;
  font-size: .8rem;
}
.report-evidence-section-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1rem;
  color: var(--text);
}
.report-evidence-section-head h4 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  color: #fbbf24;
}
.report-evidence-section-head span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}
.report-evidence-grid.report-evidence-new,
.report-evidence-grid.report-evidence-existing {
  align-items: stretch;
}
.report-evidence-card {
  padding: .6rem;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.report-evidence-card > button {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  padding: 0 !important;
  background: rgba(0,0,0,.22) !important;
}
.report-evidence-card > button img {
  height: 138px;
  transition: transform .18s ease, filter .18s ease;
}
.report-evidence-card > button:hover img {
  transform: scale(1.035);
  filter: brightness(1.08);
}
.report-evidence-open {
  position: absolute;
  right: .45rem;
  bottom: .45rem;
  padding: .22rem .5rem;
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff !important;
  font-size: .72rem !important;
  font-weight: 900;
  white-space: nowrap;
}
.report-evidence-info {
  display: grid;
  gap: .15rem;
  min-width: 0;
}
.report-evidence-info strong,
.report-evidence-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-evidence-info strong {
  color: var(--text);
  font-size: .86rem;
}
.report-evidence-info small {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
}
.report-remove-evidence {
  display: flex !important;
  align-items: center;
  gap: .45rem !important;
  margin-top: .15rem;
  color: #fca5a5 !important;
  font-size: .78rem !important;
  font-weight: 800;
}
@media (max-width: 900px){
  .report-apparatus-row.report-config-row,
  .report-category-row.report-config-row { grid-template-columns: auto 1fr; }
  .report-upload-dropzone { min-height: 132px; }
}

/* Reports v2 add/edit modal spacing polish - 2026-05-25 */
.report-editor-scroll {
  gap: 1.75rem !important;
}
.report-editor-scroll .personnel-modal-group {
  padding: 1.55rem !important;
  margin: 0 !important;
}
.report-editor-scroll .form-grid,
.report-editor-scroll .report-incident-grid,
.report-editor-scroll .personnel-grid-2,
.report-editor-scroll .personnel-grid-3,
.report-editor-scroll .personnel-grid-4 {
  gap: 1.55rem 1.7rem !important;
}
.report-editor-scroll .form-grid > label,
.report-editor-scroll .form-grid > .form-field {
  display: grid;
  gap: .7rem !important;
}
.report-editor-scroll .form-grid input,
.report-editor-scroll .form-grid select,
.report-editor-scroll .form-grid textarea {
  margin-top: 0 !important;
}
.report-editor-scroll .report-unit-head {
  margin-bottom: 1.1rem !important;
  padding-bottom: .75rem !important;
}
.report-editor-scroll .report-units-list {
  gap: 1.25rem !important;
}
.report-editor-scroll .report-unit-row {
  padding: 1.35rem !important;
  margin-top: 0 !important;
}
.report-editor-scroll .report-unit-vehicle-line,
.report-editor-scroll .report-unit-assignment-grid {
  gap: 1.25rem 1.45rem !important;
}
.report-editor-scroll .report-extra-questions {
  margin-top: 1.35rem !important;
  padding-top: 1.15rem !important;
}
.report-editor-scroll .report-evidence-section .form-grid {
  gap: 1.4rem 1.6rem !important;
}
@media (max-width: 900px) {
  .report-editor-scroll {
    gap: 1.1rem !important;
  }
  .report-editor-scroll .personnel-modal-group {
    padding: 1rem !important;
  }
  .report-editor-scroll .form-grid,
  .report-editor-scroll .report-incident-grid,
  .report-editor-scroll .personnel-grid-2,
  .report-editor-scroll .personnel-grid-3,
  .report-editor-scroll .personnel-grid-4,
  .report-editor-scroll .report-unit-vehicle-line,
  .report-editor-scroll .report-unit-assignment-grid {
    gap: 1rem !important;
  }
}

/* Reports v2 final modal/category-image/document-number fixes - 2026-05-25 */
#reportEditorModal.report-editor-modal.open,
.report-review-modal.open {
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(28px, 4vh, 44px) clamp(24px, 4vw, 56px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#reportEditorModal .report-editor-panel {
  width: min(1280px, 92vw) !important;
  max-width: 1280px !important;
  max-height: calc(100dvh - 88px) !important;
  border-radius: 26px !important;
}
.report-review-modal .report-review-panel {
  width: min(1180px, 92vw) !important;
  max-width: 1180px !important;
  max-height: calc(100dvh - 88px) !important;
}
#reportEditorModal .report-editor-panel > .personnel-modal-header,
.report-review-modal .report-review-panel > .personnel-modal-header {
  padding: 18px 22px !important;
}
#reportEditorModal .report-editor-scroll {
  padding: 1.25rem 1.35rem 1.35rem !important;
}
#reportEditorModal .report-editor-scroll fieldset {
  display: grid !important;
  gap: 1.35rem !important;
  width: 100% !important;
}
#reportEditorModal .report-editor-scroll .personnel-modal-group {
  margin: 0 !important;
  padding: 1.35rem !important;
  border-radius: 20px !important;
}
#reportEditorModal .report-editor-scroll .form-grid,
#reportEditorModal .report-editor-scroll .personnel-grid-2,
#reportEditorModal .report-editor-scroll .personnel-grid-3,
#reportEditorModal .report-editor-scroll .personnel-grid-4,
#reportEditorModal .report-editor-scroll .report-incident-grid {
  gap: 1.25rem 1.45rem !important;
}
#reportEditorModal .report-editor-scroll .form-grid > label,
#reportEditorModal .report-editor-scroll .form-grid > .form-field,
#reportEditorModal .report-editor-scroll .report-incident-grid > label {
  gap: .62rem !important;
}
#reportEditorModal .report-unit-row {
  margin-top: 0 !important;
  padding: 1.25rem !important;
}
#reportEditorModal .report-units-list,
#reportEditorModal .report-unit-assignment-list {
  gap: 1.1rem !important;
}
#reportEditorModal .report-unit-vehicle-line,
#reportEditorModal .report-unit-assignment-grid,
#reportEditorModal .report-assignment-row {
  gap: 1.1rem 1.3rem !important;
}
#reportEditorModal .report-evidence-section .form-grid {
  gap: 1.25rem 1.45rem !important;
}
#reportEditorModal .personnel-modal-footer {
  padding: 14px 22px 16px !important;
}
.report-modal-title-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
}
.report-category-preview-button,
.report-icon-preview-thumb,
.report-type-icon-button {
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.report-category-preview-button:hover,
.report-icon-preview-thumb:hover,
.report-type-icon-button:hover {
  transform: translateY(-1px);
  border-color: rgba(255,166,0,.42);
  background: rgba(255,166,0,.08);
}
.report-category-preview-button {
  min-width: 190px;
  max-width: 260px;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: .7rem;
  border-radius: 18px;
  padding: .5rem .7rem;
  text-align: left;
}
.report-category-preview-button[hidden],
.report-icon-preview[hidden] {
  display: none !important;
}
.report-category-preview-button img {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: contain;
  background: rgba(255,255,255,.045);
  flex: 0 0 auto;
}
.report-category-preview-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: .83rem;
  font-weight: 900;
}

.report-category-preview-static {
  cursor: default !important;
  pointer-events: none;
}
.report-category-preview-static:hover {
  transform: none !important;
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.18) !important;
}
.report-type-icon-button.manager-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
}
.report-type-icon-button.manager-icon img {
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}
.report-icon-preview {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .8rem;
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}
.report-icon-preview-thumb {
  width: 74px;
  height: 74px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.report-icon-preview-thumb img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  display: block;
}
.report-icon-preview strong,
.report-icon-preview small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-icon-preview strong {
  color: var(--text);
  font-weight: 950;
}
.report-icon-preview small {
  color: var(--muted);
  font-size: .8rem;
  margin-top: .18rem;
}
.report-image-modal.open {
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(22px, 4vh, 46px) !important;
}
.report-image-panel {
  width: min(920px, 92vw) !important;
  max-height: calc(100dvh - 88px) !important;
}
@media (min-width: 1180px){
  #reportEditorModal .report-editor-panel .personnel-grid-4 {
    grid-template-columns: 1.15fr 1.12fr .7fr .7fr !important;
  }
  #reportEditorModal .report-editor-panel .personnel-grid-3 {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
  #reportEditorModal .report-editor-panel .report-incident-grid {
    grid-template-columns: 1.45fr .78fr .78fr !important;
  }
}
@media (max-width: 900px){
  #reportEditorModal.report-editor-modal.open,
  .report-review-modal.open {
    padding: 10px !important;
    overflow: auto !important;
  }
  #reportEditorModal .report-editor-panel,
  .report-review-modal .report-review-panel {
    width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
  }
  #reportEditorModal .report-editor-scroll fieldset {
    gap: 1rem !important;
  }
  .report-modal-title-side {
    justify-content: flex-start;
  }
  .report-category-preview-button {
    width: 100%;
    max-width: none;
  }
}

/* Reports modal and category icon final hard-fix - 2026-05-25 */
#reportEditorModal.report-editor-modal.open {
  align-items: center !important;
  justify-content: center !important;
  padding: 42px 60px !important;
  overflow: hidden !important;
}
#reportEditorModal .report-editor-panel {
  width: min(1210px, calc(100vw - 120px)) !important;
  max-width: 1210px !important;
  max-height: calc(100dvh - 84px) !important;
  margin: 0 auto !important;
  border-radius: 28px !important;
}
#reportEditorModal .report-editor-panel > .personnel-modal-header {
  padding: 18px 22px !important;
  min-height: auto !important;
}
#reportEditorModal .report-editor-scroll {
  padding: 22px 24px 24px !important;
  gap: 22px !important;
}
#reportEditorModal .report-editor-scroll fieldset {
  display: grid !important;
  gap: 22px !important;
}
#reportEditorModal .report-editor-scroll .personnel-modal-group {
  padding: 20px !important;
  margin: 0 !important;
  border-radius: 22px !important;
}
#reportEditorModal .report-editor-scroll .personnel-modal-group h3 {
  margin-bottom: 18px !important;
}
#reportEditorModal .report-editor-scroll .form-grid,
#reportEditorModal .report-editor-scroll .personnel-grid-2,
#reportEditorModal .report-editor-scroll .personnel-grid-3,
#reportEditorModal .report-editor-scroll .personnel-grid-4,
#reportEditorModal .report-editor-scroll .report-incident-grid {
  gap: 20px 24px !important;
}
#reportEditorModal .report-editor-scroll .form-grid > label,
#reportEditorModal .report-editor-scroll .form-grid > .form-field,
#reportEditorModal .report-editor-scroll .report-incident-grid > label {
  display: grid !important;
  gap: 9px !important;
}
#reportEditorModal .report-editor-scroll input,
#reportEditorModal .report-editor-scroll select,
#reportEditorModal .report-editor-scroll textarea {
  margin-top: 0 !important;
}
#reportEditorModal .report-unit-head {
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
}
#reportEditorModal .report-units-list,
#reportEditorModal .report-unit-assignment-list {
  display: grid !important;
  gap: 18px !important;
}
#reportEditorModal .report-unit-row {
  margin-top: 0 !important;
  padding: 18px !important;
  border-radius: 18px !important;
}
#reportEditorModal .report-unit-vehicle-line,
#reportEditorModal .report-unit-assignment-grid,
#reportEditorModal .report-assignment-row {
  gap: 18px 22px !important;
}
#reportEditorModal .personnel-modal-footer {
  padding: 14px 22px 16px !important;
}
.reports-admin-modal-panel {
  width: min(760px, 92vw) !important;
  max-width: 760px !important;
}
.report-icon-upload-field input[type="file"] {
  cursor: pointer;
}
@media (max-width: 900px){
  #reportEditorModal.report-editor-modal.open {
    padding: 10px !important;
    overflow: auto !important;
  }
  #reportEditorModal .report-editor-panel {
    width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
  }
  #reportEditorModal .report-editor-scroll,
  #reportEditorModal .report-editor-scroll .personnel-modal-group {
    padding: 14px !important;
  }
  #reportEditorModal .report-editor-scroll,
  #reportEditorModal .report-editor-scroll fieldset,
  #reportEditorModal .report-units-list,
  #reportEditorModal .report-unit-assignment-list {
    gap: 14px !important;
  }
  #reportEditorModal .report-editor-scroll .form-grid,
  #reportEditorModal .report-editor-scroll .personnel-grid-2,
  #reportEditorModal .report-editor-scroll .personnel-grid-3,
  #reportEditorModal .report-editor-scroll .personnel-grid-4,
  #reportEditorModal .report-editor-scroll .report-incident-grid,
  #reportEditorModal .report-unit-vehicle-line,
  #reportEditorModal .report-unit-assignment-grid,
  #reportEditorModal .report-assignment-row {
    gap: 14px !important;
  }
}

/* Report Categories full rebuild - 2026-05-25 */
.report-category-manager .manager-list {
  gap: 14px;
}
.rc-category-row.report-config-row {
  grid-template-columns: auto 54px minmax(260px, 1fr) minmax(90px, 120px) minmax(100px, 130px) auto;
  gap: 14px;
  align-items: center;
}
.rc-icon-button.manager-icon,
.rc-icon-empty.manager-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.rc-icon-button.manager-icon img {
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
  display: block;
}
.rc-icon-empty.manager-icon {
  color: var(--muted);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
}
.rc-modal.open {
  padding: 24px;
  align-items: center;
}
.rc-modal-panel.reports-admin-modal-panel {
  width: min(760px, 92vw) !important;
  max-width: 760px !important;
  max-height: calc(100dvh - 48px) !important;
}
.rc-modal-body {
  display: grid;
  gap: 18px;
  padding: 20px 22px !important;
  overflow: auto;
}
.rc-form-section {
  display: grid;
  gap: 16px;
  margin: 0 !important;
  padding: 18px !important;
}
.rc-grid,
.rc-grid.form-grid,
.rc-form-section .form-grid {
  gap: 18px 20px !important;
}
.rc-visible-toggle {
  align-self: end;
  min-height: 46px;
}
.rc-image-layout {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.rc-image-preview {
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  border-radius: 20px;
  padding: 14px;
  min-height: 154px;
  display: grid;
  place-items: center;
  gap: 10px;
  color: var(--text);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.rc-image-preview:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(255,166,0,.42);
  background: rgba(255,166,0,.08);
}
.rc-image-preview:disabled {
  cursor: default;
  opacity: .78;
}
.rc-image-preview img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}
.rc-image-preview span {
  max-width: 132px;
  font-size: .78rem;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-image-controls {
  display: grid;
  gap: 12px;
  align-content: start;
}
.rc-image-controls input[type="file"] {
  cursor: pointer;
}
#rcRemoveWrap {
  justify-content: space-between;
}
.report-image-modal-panel {
  width: min(720px, 92vw);
  max-height: calc(100dvh - 48px);
}
.report-image-modal-body {
  display: grid;
  place-items: center;
  padding: 20px !important;
}
.report-image-modal-body img {
  max-width: 100%;
  max-height: 68vh;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 900px) {
  .rc-category-row.report-config-row {
    grid-template-columns: auto 48px minmax(0, 1fr);
  }
  .rc-category-row .manager-meta,
  .rc-category-row .status-pill,
  .rc-category-row .manager-actions {
    grid-column: 3;
    justify-self: start;
  }
  .rc-modal.open {
    padding: 10px;
  }
  .rc-modal-panel.reports-admin-modal-panel {
    width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
  }
  .rc-modal-body {
    padding: 14px !important;
    gap: 14px;
  }
  .rc-form-section {
    padding: 14px !important;
  }
  .rc-image-layout {
    grid-template-columns: 1fr;
  }
  .rc-image-preview {
    min-height: 130px;
  }
}

/* Report Categories image upload redesign - match report form upload/preview */
.rc-section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.rc-section-title-row h3 {
  margin-bottom: .25rem;
}
.rc-upload-shell {
  display: grid;
  gap: 1rem;
}
.rc-upload-dropzone.report-upload-dropzone {
  min-height: 170px;
  padding: 1.35rem;
  border-radius: 22px;
  border-color: rgba(56,189,248,.42);
  background:
    radial-gradient(circle at top, rgba(56,189,248,.11), transparent 58%),
    linear-gradient(180deg, rgba(15,23,42,.58), rgba(15,23,42,.26));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.rc-upload-dropzone.report-upload-dropzone.is-dragover,
.rc-upload-dropzone.report-upload-dropzone:hover {
  border-color: rgba(255,166,0,.68);
  background:
    radial-gradient(circle at top, rgba(255,166,0,.14), transparent 58%),
    linear-gradient(180deg, rgba(255,166,0,.08), rgba(15,23,42,.30));
}
.rc-upload-dropzone.report-upload-dropzone.has-preview {
  min-height: 140px;
  border-style: solid;
  border-color: rgba(125,211,252,.28);
}
.rc-upload-dropzone .report-upload-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  font-size: 1.55rem;
}
.rc-upload-dropzone strong {
  font-size: 1.05rem;
}
.rc-upload-dropzone em,
.rc-upload-dropzone small {
  max-width: 560px;
  line-height: 1.45;
}
.rc-image-preview-grid.report-evidence-grid {
  grid-template-columns: minmax(260px, 360px);
  gap: .9rem;
  margin-top: .15rem;
}
.rc-image-preview-card.report-evidence-card {
  display: grid;
  gap: .75rem;
  padding: .75rem;
  border-radius: 20px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.11);
}
.rc-image-preview-thumb.report-evidence-thumb {
  width: 100%;
  border-radius: 16px;
  min-height: 178px;
  background:
    linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.035) 75%),
    rgba(0,0,0,.20) !important;
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}
.rc-image-preview-thumb.report-evidence-thumb:disabled {
  cursor: default;
  opacity: .8;
}
.rc-image-preview-thumb.report-evidence-thumb img {
  width: 100%;
  height: 170px;
  object-fit: contain;
  padding: .65rem;
}
.rc-image-preview-info strong {
  font-size: .92rem;
}
.rc-image-preview-info small {
  white-space: normal;
  line-height: 1.35;
}
.rc-remove-current-image.report-remove-evidence {
  margin-top: 0;
  padding: .6rem .7rem;
  border-radius: 14px;
  background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.14);
}
@media (max-width: 900px) {
  .rc-upload-dropzone.report-upload-dropzone {
    min-height: 145px;
    padding: 1rem;
  }
  .rc-image-preview-grid.report-evidence-grid {
    grid-template-columns: 1fr;
  }
  .rc-image-preview-thumb.report-evidence-thumb img {
    height: 142px;
  }
}

/* Reports action confirmation modals */
.report-action-confirm-modal .report-action-panel {
  width: min(94vw, 460px);
  padding: 1.35rem;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 1rem;
  align-items: start;
}
.report-action-icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 1.65rem;
  background: linear-gradient(135deg, rgba(255,59,34,.16), rgba(255,159,28,.14));
  border: 1px solid rgba(255,159,28,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.22);
}
.report-action-content h2 {
  margin: .15rem 0 .45rem;
}
.report-action-content p {
  margin: 0;
  color: var(--muted, #9ca3af);
  line-height: 1.5;
}
.report-action-target {
  grid-column: 1 / -1;
  margin-top: .2rem;
  padding: .75rem .85rem;
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
}
.report-action-target span {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, #9ca3af);
  font-weight: 800;
  margin-bottom: .2rem;
}
.report-action-target strong {
  display: block;
  color: var(--text, #f8fafc);
  word-break: break-word;
}
.report-action-buttons {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: .65rem;
  margin-top: .35rem;
}
.report-action-confirm-danger {
  background: linear-gradient(135deg, #dc2626, #fb923c) !important;
  color: #fff !important;
}
@media (max-width: 560px) {
  .report-action-confirm-modal .report-action-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .report-action-icon {
    margin-inline: auto;
  }
  .report-action-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }
}


/* Reports: hide empty document number pills completely.
   This prevents the blue empty ID border from appearing on reports that are not signed/completed yet. */
.report-document-number[hidden],
.modal-doc-number[hidden] {
  display: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}


/* Dynamic search visibility helper - keeps filtered rows hidden even when older row rules use display:grid!important. */
.is-dynamic-search-hidden,
.dynamic-search-hidden {
  display: none !important;
}
.dynamic-search-empty[hidden],
.search-empty-state[hidden] {
  display: none !important;
}
.dynamic-search-empty,
.search-empty-state {
  margin-top: 12px;
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

/* Report category access ranks */
.report-category-ranks-grid,
.report-category-groups-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
  margin-top:12px;
}
.report-category-rank-option,
.report-category-group-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 13px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.035);
  cursor:pointer;
}
.report-category-rank-option:hover,
.report-category-group-option:hover{
  border-color:rgba(255,159,28,.38);
  background:rgba(255,159,28,.065);
}
.report-category-rank-option input,
.report-category-group-option input{margin-top:3px;accent-color:var(--accent,#ff9f1c)}
.report-category-rank-option span,
.report-category-group-option span{display:grid;gap:2px;line-height:1.25}
.report-category-rank-option strong,
.report-category-group-option strong{color:var(--text,#f7fafc);font-size:.95rem}
.report-category-rank-option small,
.report-category-group-option small{color:var(--muted,#9fb0bb);font-size:.78rem}

/* Form template visibility: hidden/disabled fields from inactive document/report templates should not take space. */
.report-form .is-form-mode-hidden,
.report-form [hidden].report-standard-only,
.report-form [hidden].report-medical-only {
  display: none !important;
}

/* Medical Examination dynamic document content fields */
.medical-fields-section .report-unit-head {
  align-items: center;
  margin-bottom: 10px;
}
.medical-fields-help {
  margin: 0 0 14px;
}
.medical-fields-list {
  display: grid;
  gap: 14px;
}
.medical-field-item {
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(3, 13, 17, 0.28);
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 12px;
}
.medical-field-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.medical-field-toolbar strong {
  color: var(--text, #eef5f8);
  font-size: 0.86rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.medical-field-item textarea {
  min-height: 125px;
  resize: vertical;
}
.btn2.tiny {
  min-height: 0;
  padding: 5px 10px;
  font-size: 0.76rem;
  border-radius: 999px;
}

/* Unified upload dropzones + cache-safe upload previews - 2026-05-29 */
.image-upload-fields > label:not(.remove-image-toggle),
.cms-upload-dropzone {
  position: relative;
  min-height: 136px;
  display: grid !important;
  place-items: center;
  align-content: center;
  gap: .42rem !important;
  text-align: center;
  padding: 1.05rem 1.15rem !important;
  border: 1px dashed rgba(125,211,252,.36) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at top, rgba(56,189,248,.10), transparent 58%),
    linear-gradient(180deg, rgba(56,189,248,.07), rgba(255,255,255,.025)) !important;
  cursor: pointer;
  overflow: hidden;
  color: var(--text, #f8fafc);
  font-weight: 900;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.image-upload-fields > label:not(.remove-image-toggle):hover,
.cms-upload-dropzone:hover,
.cms-upload-dropzone.is-dragover {
  border-color: rgba(255,166,0,.62) !important;
  background:
    radial-gradient(circle at top, rgba(255,166,0,.14), transparent 58%),
    linear-gradient(180deg, rgba(255,166,0,.10), rgba(255,255,255,.028)) !important;
  transform: translateY(-1px);
}
.image-upload-fields > label:not(.remove-image-toggle)::before,
.cms-upload-dropzone::before {
  content: "🖼️";
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,166,0,.12);
  border: 1px solid rgba(255,166,0,.24);
  font-size: 1.35rem;
}
.image-upload-fields > label:not(.remove-image-toggle)::after,
.cms-upload-dropzone::after {
  content: "Click to choose image - saved optimized";
  color: var(--muted, #9ca3af);
  font-size: .78rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
  max-width: 92%;
  overflow-wrap: anywhere;
}
.image-upload-fields > label:not(.remove-image-toggle).has-selected-file::after,
.cms-upload-dropzone.has-selected-file::after {
  content: attr(data-selected-file);
  color: #fbbf24;
}
.image-upload-fields > label:not(.remove-image-toggle) input[type="file"],
.cms-upload-dropzone input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  padding: 0 !important;
}
.sog-icon-upload-field {
  align-items: stretch;
}
.sog-icon-upload-controls {
  display: grid;
  gap: 10px;
}
.sog-icon-upload-controls .cms-upload-dropzone {
  min-height: 126px;
}
@media (max-width: 720px) {
  .image-upload-fields > label:not(.remove-image-toggle),
  .cms-upload-dropzone { min-height: 118px; }
}