:root{
  --bg:#eef4fb;
  --panel:#ffffff;
  --panel-soft:#f7fbff;
  --panel-dark:#0c1a31;
  --line:#d8e2ee;
  --line-strong:#c3d2e3;
  --text:#112034;
  --muted:#5f7189;
  --brand:#1d4ed8;
  --brand-2:#0ea5e9;
  --brand-3:#14b8a6;
  --good:#16a34a;
  --warn:#f59e0b;
  --danger:#dc2626;
  --shadow:0 18px 42px rgba(15, 23, 42, .08);
  --radius:22px;
  --radius-sm:16px;
  --max:1520px;
  --ecrf-topbar-offset:96px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--ecrf-topbar-offset) + 18px)}
body{
  margin:0;
  color:var(--text);
  font-family:Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(29, 78, 216, .12), transparent 23%),
    radial-gradient(circle at top right, rgba(14, 165, 233, .10), transparent 18%),
    linear-gradient(180deg, #eef4fb 0%, #f7fbff 40%, #eef5fb 100%);
}
a{color:inherit;text-decoration:none}
.container{
  width:min(calc(100% - 28px), var(--max));
  margin:0 auto;
}
.hero-shell{
  background:linear-gradient(135deg, #081120 0%, #10213f 55%, #0c3150 100%);
  color:#f8fbff;
  overflow:hidden;
  position:relative;
}
.hero-shell::before,
.hero-shell::after{
  content:"";
  position:absolute;
  border-radius:999px;
  filter:blur(18px);
}
.hero-shell::before{
  width:360px;height:360px;right:-120px;top:-110px;
  background:rgba(14, 165, 233, .18);
}
.hero-shell::after{
  width:280px;height:280px;left:-90px;bottom:-120px;
  background:rgba(20, 184, 166, .12);
}
.hero{
  position:relative;
  z-index:1;
  padding:28px 0 30px;
}
.hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.eyebrow,
.author-credit{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
  font-size:12px;
  letter-spacing:.03em;
}
.author-credit{
  color:#dbeafe;
  font-weight:700;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) minmax(300px, .92fr);
  gap:18px;
  align-items:stretch;
}
.hero-copy h1{
  margin:0 0 12px;
  font-size:clamp(30px, 4.2vw, 46px);
  letter-spacing:-.03em;
  line-height:1.03;
}
.hero-copy p{
  margin:0;
  max-width:900px;
  line-height:1.75;
  font-size:15px;
  color:#d8e7f4;
}
.hero-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.hero-meta-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.09);
  color:#dbeafe;
  font-size:12px;
}
.panel,
.panel-dark{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(216,226,238,.96);
  backdrop-filter:blur(12px);
}
.panel-dark{
  padding:18px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 60px rgba(2,8,23,.28);
}
.hero-stat{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:14px 16px;
}
.hero-stat .label{
  font-size:12px;
  color:#c6d8eb;
  margin-bottom:6px;
}
.hero-stat .value{
  font-size:26px;
  font-weight:800;
  letter-spacing:-.03em;
}

.dashboard-shell{
  display:grid;
  grid-template-columns:minmax(280px, 20vw) minmax(0, 1fr);
  gap:22px;
  padding:22px 0 34px;
  align-items:start;
}
.control-rail{
  position:sticky;
  top:calc(var(--ecrf-topbar-offset) + 12px);
  max-height:calc(100vh - var(--ecrf-topbar-offset) - 24px);
  overflow:auto;
  padding:18px;
}
.control-rail::-webkit-scrollbar{width:10px}
.control-rail::-webkit-scrollbar-thumb{
  background:#c9d6e5;
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.rail-head h2,
.section-title h3,
.card-head h3{
  margin:0;
  font-size:20px;
  letter-spacing:-.02em;
}
.rail-head p,
.section-title p,
.card-head p{
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.65;
  font-size:14px;
}
.jump-links{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin:18px 0 14px;
}
.jump-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#f8fbff;
  font-size:13px;
  font-weight:700;
  color:#294a78;
}
.rail-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:16px;
}
.btn{
  border:none;
  border-radius:14px;
  padding:11px 14px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  color:#fff;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 14px 28px rgba(29,78,216,.22);
}
.btn.secondary{
  color:#18427f;
  background:#edf4ff;
  border:1px solid #d8e7ff;
}
.control-group{
  margin-top:14px;
}
.control-label-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.control-label{
  display:block;
  margin:0 0 8px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#274a78;
  font-weight:800;
}
.control-hint{
  font-size:11px;
  color:var(--muted);
}
select,
input[type="search"]{
  width:100%;
  height:48px;
  border-radius:14px;
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--text);
  font:inherit;
  padding:0 14px;
  outline:none;
}
select:focus,
input[type="search"]:focus{
  border-color:#7cb3ff;
  box-shadow:0 0 0 4px rgba(29,78,216,.10);
}
.site-chip-list{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.site-chip{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border:1px solid #d7e7ff;
  border-radius:16px;
  padding:11px 12px;
  background:linear-gradient(180deg, #f8fbff, #edf5ff);
  color:#18427f;
  cursor:pointer;
  font:inherit;
  font-weight:800;
}
.site-chip small{
  font-size:11px;
  font-weight:700;
  color:#38649e;
}
.site-chip.active{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 12px 24px rgba(29,78,216,.18);
}
.site-chip.active small{color:#e8f3ff}
.rail-note{
  margin-top:16px;
  padding:14px 15px;
  border-radius:16px;
  background:#f5f9ff;
  border:1px solid #dce8f7;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}

.dashboard-main{
  display:grid;
  gap:20px;
}
#overview,
#trends,
#sites,
#catalogue{
  scroll-margin-top:calc(var(--ecrf-topbar-offset) + 18px);
}

.active-panel,
#sites,
.table-panel{
  padding:18px;
}
.active-filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}
.filter-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:#edf5ff;
  border:1px solid #d6e7ff;
  color:#18427f;
  font-size:12px;
  font-weight:700;
}
.filter-pill.neutral{
  background:#f6f8fb;
  border-color:#e3e9f1;
  color:#5d7089;
}
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:16px;
}
.kpi-card{
  padding:18px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.88);
  border:1px solid rgba(216,226,238,.96);
  box-shadow:var(--shadow);
}
.kpi-card .label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#5a7396;
  font-weight:800;
  margin-bottom:10px;
}
.kpi-card .value{
  font-size:36px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
  margin-bottom:10px;
}
.kpi-card p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  font-size:14px;
}
.chart-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:18px;
}
.chart-card{
  padding:18px;
}
.span-12{grid-column:span 12}
.span-7{grid-column:span 7}
.span-6{grid-column:span 6}
.span-5{grid-column:span 5}
.span-4{grid-column:span 4}
.card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}
.chart{
  width:100%;
  height:330px;
}
.chart.heatmap{
  height:380px;
}
.site-card-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin-top:16px;
}
.site-card{
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, #fbfdff 0%, #f3f8ff 100%);
}
.site-card-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:12px;
}
.site-card h4{
  margin:0;
  font-size:18px;
  letter-spacing:-.02em;
}
.site-card .site-name{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.site-badge{
  min-width:54px;
  text-align:center;
  padding:8px 10px;
  border-radius:999px;
  background:#e8f3ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:800;
}
.site-metrics{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.site-metric{
  padding:12px;
  border-radius:14px;
  background:#fff;
  border:1px solid #dde7f2;
}
.site-metric .mini-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#6880a0;
  font-weight:800;
  margin-bottom:6px;
}
.site-metric .mini-value{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.03em;
}
.site-metric .mini-sub{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.table-panel .table-title{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
}
.table-meta{
  display:flex;
  align-items:baseline;
  gap:8px;
  color:#274a78;
}
.table-meta strong{
  font-size:28px;
  line-height:1;
}
.table-wrap{
  margin-top:16px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:18px;
}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:1120px;
}
thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:#f3f8ff;
  color:#274a78;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.05em;
  text-align:left;
  padding:14px 14px;
  border-bottom:1px solid var(--line);
}
tbody td{
  padding:14px;
  border-bottom:1px solid #edf2f7;
  vertical-align:top;
  font-size:14px;
  line-height:1.55;
}
tbody tr:hover{background:#fbfdff}
td .mono{
  font-size:12px;
  color:#59718f;
}
.badge-inline{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  margin-right:6px;
  margin-bottom:6px;
}
.badge-major{background:rgba(220,38,38,.12); color:#b91c1c}
.badge-minor{background:rgba(245,158,11,.16); color:#b45309}
.badge-standard{background:rgba(29,78,216,.12); color:#1d4ed8}
.badge-pending{background:rgba(245,158,11,.18); color:#b45309}
.badge-resolved{background:rgba(22,163,74,.14); color:#15803d}
.table-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}
.table-meta-left{
  color:var(--muted);
  font-size:14px;
}
.pagination{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.page-btn{
  min-width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font:inherit;
  font-size:13px;
  font-weight:800;
  color:#24466f;
  cursor:pointer;
}
.page-btn.active{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color:transparent;
  color:#fff;
}
.empty-state{
  min-height:320px;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:14px;
  text-align:center;
  padding:18px;
}
@media (max-width: 1280px){
  .kpi-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .site-card-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .span-7,.span-6,.span-5,.span-4{grid-column:span 6}
}
@media (max-width: 1100px){
  .dashboard-shell{
    grid-template-columns:1fr;
  }
  .control-rail{
    position:relative;
    top:0;
    max-height:none;
    overflow:visible;
  }
}
@media (max-width: 820px){
  .container{width:min(calc(100% - 18px), var(--max))}
  .hero-grid{grid-template-columns:1fr}
  .panel-dark{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .kpi-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .chart-grid{grid-template-columns:1fr}
  .span-12,.span-7,.span-6,.span-5,.span-4{grid-column:span 1}
  .site-card-grid{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .hero{padding:22px 0 24px}
  .hero-copy h1{font-size:30px}
  .panel-dark{grid-template-columns:1fr 1fr}
  .kpi-grid{grid-template-columns:1fr}
  .jump-links{grid-template-columns:1fr 1fr}
  .table-panel,.active-panel,#sites{padding:14px}
}


/* --- Mobile & tablet fit refinements (desktop preserved) --- */
.ecrf-page,
.ecrf-page main,
.ecrf-page .dashboard-shell,
.ecrf-page .dashboard-main,
.ecrf-page .panel,
.ecrf-page .chart-card,
.ecrf-page .table-wrap,
.ecrf-page .kpi-card,
.ecrf-page .site-card{
  min-width:0;
  max-width:100%;
}
.ecrf-page img,
.ecrf-page svg,
.ecrf-page canvas{
  max-width:100%;
  height:auto;
}

.ecrf-page #main-header .logo img,
.ecrf-page .header-container .logo img{
  height:1.7cm;
  width:auto;
  max-width:none;
  display:block;
}

.ecrf-page .hero-copy p,
.ecrf-page .site-name,
.ecrf-page .mini-sub,
.ecrf-page td,
.ecrf-page .table-meta-left,
.ecrf-page .active-filters,
.ecrf-page .filter-pill,
.ecrf-page .rail-note{
  overflow-wrap:anywhere;
}
.ecrf-page .table-wrap{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

@media (max-width: 1024px){
  .dashboard-shell{
    grid-template-columns:1fr;
    gap:18px;
  }
  .control-rail{
    position:static;
    top:auto;
    max-height:none;
    overflow:visible;
  }
  .site-chip-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px){
  .ecrf-page .hero-shell > .container.hero,
  .ecrf-page main > .container.dashboard-shell,
  .ecrf-page .dashboard-shell.container{
    width:min(calc(100% - 16px), var(--max));
  }
  .hero-top{
    align-items:flex-start;
    gap:10px;
  }
  .eyebrow,
  .author-credit{
    flex:1 1 100%;
    justify-content:center;
    text-align:center;
    max-width:100%;
  }
  .hero-meta-item{
    flex:1 1 100%;
    justify-content:center;
    text-align:center;
  }
  .site-chip-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .card-head,
  .table-panel .table-title{
    flex-direction:column;
    align-items:flex-start;
  }
  .table-meta{
    width:100%;
    justify-content:flex-start;
  }
  .chart{
    height:300px;
  }
  .chart.heatmap{
    height:340px;
  }
  table{
    min-width:900px;
  }
}

@media (max-width: 560px){
  .ecrf-page .hero-shell > .container.hero,
  .ecrf-page main > .container.dashboard-shell,
  .ecrf-page .dashboard-shell.container{
    width:min(calc(100% - 14px), var(--max));
  }
  .hero{
    padding:20px 0 22px;
  }
  .hero-copy h1{
    font-size:clamp(28px, 9vw, 34px);
    line-height:1.06;
  }
  .hero-copy p{
    font-size:14px;
    line-height:1.65;
  }
  .hero-meta{
    gap:8px;
  }
  .hero-meta-item{
    width:100%;
  }
  .panel-dark{
    grid-template-columns:1fr;
    gap:10px;
  }
  .hero-stat{
    padding:12px 14px;
  }
  .hero-stat .value{
    font-size:24px;
  }
  .dashboard-shell{
    gap:16px;
    padding:16px 0 26px;
  }
  .control-rail,
  .table-panel,
  .active-panel,
  #sites,
  .chart-card,
  .kpi-card{
    padding:14px;
  }
  .control-rail{
    border-radius:18px;
  }
  .jump-links{
    grid-template-columns:1fr;
  }
  .jump-links a,
  .ecrf-page .dashboard-shell .btn{
    min-height:44px;
  }
  .site-chip-list{
    grid-template-columns:1fr;
  }
  .kpi-card .value{
    font-size:30px;
  }
  .chart{
    height:280px;
  }
  .chart.heatmap{
    height:320px;
  }
  .site-card-head{
    flex-direction:column;
  }
  .site-badge{
    align-self:flex-start;
  }
  .site-metrics{
    grid-template-columns:1fr;
  }
  thead th,
  tbody td{
    padding:12px 10px;
    font-size:13px;
  }
  table{
    min-width:760px;
  }
}

@media (max-width: 400px){
  .ecrf-page .hero-shell > .container.hero,
  .ecrf-page main > .container.dashboard-shell,
  .ecrf-page .dashboard-shell.container{
    width:min(calc(100% - 12px), var(--max));
  }
  .hero{
    padding:18px 0 20px;
  }
  .rail-head h2,
  .section-title h3,
  .card-head h3{
    font-size:18px;
  }
  table{
    min-width:680px;
  }
}

@media (max-width: 820px){
  .ecrf-page .chart .js-plotly-plot,
  .ecrf-page .chart .js-plotly-plot *,
  .ecrf-page .chart .plot-container,
  .ecrf-page .chart .svg-container,
  .ecrf-page .chart .main-svg,
  .ecrf-page .chart .draglayer,
  .ecrf-page .chart .nsewdrag{
    pointer-events:none !important;
    touch-action:pan-y !important;
  }

  .ecrf-page .chart .modebar{
    display:none !important;
  }
}


/* --- Slim professional header & minimal footer for eCRF page --- */
.ecrf-topbar{
  position:sticky;
  top:0;
  z-index:1200;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ecrf-topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:78px;
  padding:10px 0;
}
.ecrf-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  cursor:default;
  user-select:none;
}
.ecrf-brand img{
  height:50px;
  width:auto;
  display:block;
  flex:0 0 auto;
}
.ecrf-brand-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.ecrf-brand-text strong{
  color:#fff;
  font-size:1rem;
  line-height:1.2;
  letter-spacing:-.01em;
}
.ecrf-brand-text span{
  color:rgba(255,255,255,.7);
  font-size:.84rem;
  line-height:1.35;
}
.ecrf-topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.ecrf-link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:12px;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.01em;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.ecrf-link-btn:hover{transform:translateY(-1px)}
.ecrf-link-btn.secondary{
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
}
.ecrf-link-btn.primary{
  color:#fff;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 14px 28px rgba(29,78,216,.22);
}
.ecrf-footer-minimal{
  background:#050a12;
  border-top:1px solid rgba(255,255,255,.08);
}
.ecrf-footer-inner{
  display:grid;
  grid-template-columns:1.15fr 1fr auto;
  gap:18px;
  align-items:center;
  padding:18px 0;
}
.ecrf-footer-left,
.ecrf-footer-center{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ecrf-footer-left strong,
.ecrf-footer-right a{
  color:#fff;
}
.ecrf-footer-left span,
.ecrf-footer-center span{
  color:rgba(255,255,255,.68);
  font-size:.92rem;
  line-height:1.5;
}
.ecrf-footer-right{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
}
.ecrf-footer-right a{
  font-size:.92rem;
  font-weight:700;
}
.ecrf-footer-right a:hover{
  opacity:.92;
}


@media (max-width: 900px){
  .ecrf-topbar-inner,
  .ecrf-footer-inner{
    grid-template-columns:1fr;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .ecrf-topbar-inner{min-height:auto;padding:12px 0}
  .ecrf-topbar-actions,
  .ecrf-footer-right{
    width:100%;
    justify-content:flex-start;
  }
}

@media (max-width: 560px){
  .ecrf-brand{align-items:flex-start}
  .ecrf-brand img{height:42px}
  .ecrf-brand-text strong{font-size:.94rem}
  .ecrf-brand-text span{font-size:.78rem}
  .ecrf-link-btn{width:100%}
  .ecrf-topbar-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .ecrf-footer-inner{padding:16px 0}
}


/* --- Strong mobile fix for the slim eCRF header --- */
.ecrf-topbar .ecrf-brand,
.ecrf-topbar .ecrf-topbar-actions,
.ecrf-topbar .ecrf-link-btn{
  min-width:0;
}

.ecrf-topbar .ecrf-brand{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
}

.ecrf-topbar .ecrf-brand img{
  height:50px !important;
  width:auto !important;
  max-width:none !important;
  object-fit:contain;
  flex:0 0 auto;
}

.ecrf-topbar .ecrf-link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
}

@media (max-width: 560px){
  .ecrf-topbar .container.ecrf-topbar-inner{
    padding-top: 10px;
    padding-bottom: 10px;
    align-items: flex-start;
    gap: 10px;
  }

  .ecrf-topbar .ecrf-brand{
    width: 100%;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
  }

  .ecrf-topbar .ecrf-brand img{
    width: 82px !important;
    height: auto !important;
    max-width: 82px !important;
    display: block;
    justify-self: start;
  }

  .ecrf-topbar .ecrf-brand-text{
    min-width: 0;
    padding-left: 2px;
  }

  .ecrf-topbar .ecrf-brand-text strong{
    display: block;
    font-size: 0.92rem;
    line-height: 1.14;
    white-space: normal;
  }

  .ecrf-topbar .ecrf-brand-text span{
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    line-height: 1.2;
    white-space: normal;
  }

  .ecrf-topbar .ecrf-topbar-actions{
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ecrf-topbar .ecrf-link-btn{
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
  }
}

@media (max-width: 380px){
  .ecrf-topbar .ecrf-brand{
    grid-template-columns: 74px minmax(0, 1fr);
    column-gap: 8px;
  }

  .ecrf-topbar .ecrf-brand img{
    width: 74px !important;
    max-width: 74px !important;
  }

  .ecrf-topbar .ecrf-brand-text strong{
    font-size: 0.84rem;
  }

  .ecrf-topbar .ecrf-brand-text span{
    font-size: 0.68rem;
  }
}