/* Global base styles (style reference from login page) */

/* Layout resilience */
*, *::before, *::after { box-sizing: border-box }

:root{
  --ry-yellow:#FFD400;
  --ry-green:#1C6E2E;
  --ry-black:#111;
  --card-shadow:0 10px 30px rgba(0,0,0,.08)
}

html, body {
  height:100%;
  min-height:100vh; /* ensure background covers full scroll height */
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:linear-gradient(180deg,#fff 0%, #fff9d6 70%, #fff5c2 100%);
  background-color:#fff5c2;
  background-attachment: fixed; /* avoid bottom seam on some browsers */
}
/* Make footer stick to bottom when content is short */
body { display:flex; flex-direction:column; min-height:100svh }

/* Let the content size naturally; account for sticky topnav so no extra white strip appears */
.wrap {
  flex: 1 0 auto; /* occupy remaining height so footer stays in view */
  min-height: auto;
  display:grid;
  place-items: start center; /* top-align content to prevent bottom whitespace feel */
  padding:18px 18px 28px; /* give breathing room at bottom */
  box-sizing:border-box;
  overflow:visible; /* let the page scroll, not the wrapper */
  position:relative; z-index:1
}
/* Allow wrap to take remaining space so footer sits at bottom */
.topnav + .wrap { flex:1 0 auto }
/* Remove forced min-height that pushed footer off-screen on short pages */

.card { position:relative; background:white; width:min(500px, 92vw); padding:24px; border-radius:14px; box-shadow:var(--card-shadow); border:1px solid #f1e489 }
.card-wide { width:min(960px, 92vw) }
.card.card-wide { width:min(960px, 92vw) }
/* Make sure wide cards override base width even with combined classes */
.card.card-wide { width:min(960px, 92vw) }

h1 { margin:0 0 12px 0; font-size:22px; color:var(--ry-black) }
label { display:block; font-weight:600; margin:10px 0 6px; color:#333 }
input { display:block; width:100%; max-width:100%; padding:12px 12px; border:1px solid #d2d6de; border-radius:10px; font-size:15px }
button { display:block; width:100%; max-width:100%; margin-top:16px; padding:12px 12px; border:0; border-radius:10px; background:var(--ry-green); color:#fff; font-weight:800; cursor:pointer; letter-spacing:.2px }
button:hover { filter:brightness(1.23) }

.msg { color:#b30000; font-size:13px; margin: 8px 0 }
.brand { display:flex; align-items:center; gap:10px; font-weight:900; color:var(--ry-green); margin-bottom:10px }
.brand-logo { height:34px; width:auto }
.brand-routerunner { height:34px; width:auto }
.brand-sub { display:flex; justify-content:center; margin:10px 0 22px }
.brand-rynkeby { height:46px; width:auto }
.hint { font-size:12px; color:#666; margin-top:10px }
.center { text-align:center }
.title { margin-top:10px; margin-bottom:22px }
.icon-img { height:16px; width:auto; vertical-align:-2px; margin-right:0; opacity:.9 }
.icon-tree { height:14px; width:auto; vertical-align:-2px; margin-left:4px; opacity:.95 }

.meta { margin-top:12px; font-size:12px; color:#666; text-align:center }
/* Classic green links, a touch bolder; stronger hover color (no underline movement) */
.meta a { color: var(--ry-green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: currentColor; font-weight:600; transition: color .12s ease }
.meta a:hover, .meta a:visited:hover, .meta a:focus-visible { color:#0aa84b }
.meta a:active { color:#07823a }
.meta a:focus-visible { outline:2px solid rgba(28,110,46,.30); outline-offset:2px; border-radius:4px }
/* Keep the first meta line on one line when there is room */
@media (min-width: 520px){
  .meta .access-line{ white-space: nowrap }
}

.divider { height:1px; background:#eee; margin:12px 0 6px }
.brandline { color:#888; font-weight:700 }
.brandrow { display:flex; align-items:center; justify-content:center; gap:3px; margin-top:4px; color:#666 }
.brandrow .brandname {
  color:#555;
  font-weight:800;
  /* Web‑safe, bold/condensed‑leaning stack resembling the logo */
  font-family: "Arial Black", "Segoe UI Black", Impact, Haettenschweiler,
               "Arial Narrow Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .2px;
  display:inline-block;
  /* Gentle shear to evoke the logo’s dynamic feel (kept subtle) */
  transform: skewX(-10deg);
  transform-origin: bottom left;
}
/* Slightly smaller inner segments */
.brandrow .brandname-sub{
  font-size:.84em;
  letter-spacing: .1px;
}
/* Add a touch more space between the stopwatch icon and punchline only */
.brandrow .icon-img { margin-right: 2px }

/* Subtle shear for stopwatch icon: top slightly to the right */
.icon-shear { transform: skewX(-12deg); transform-origin: bottom left }

/* Subtle snow canvas behind content */
#snow { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.8 }
@media (prefers-reduced-motion: reduce) { #snow { display:none } }

/* Decorative mistletoe hanging from the top-right corner */
.mistletoe { position:absolute; top:-10px; right:-3px; height:40px; width:auto; transform:rotate(8deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.22)); pointer-events:none; z-index:2 }
/* Soft oval shadow below mistletoe for subtle 3D effect */
.mistletoe-shadow { position:absolute; top:18px; right:-2px; width:34px; height:14px; pointer-events:none; z-index:1; background: radial-gradient(ellipse at center, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.14) 40%, rgba(0,0,0,0.06) 65%, rgba(0,0,0,0) 80%); filter: blur(1.2px); opacity:.45; transform: rotate(4deg) }
@media (max-width: 420px){
  .mistletoe{ height:44px; top:-12px; right:-10px }
  .mistletoe-shadow{ width:52px; height:12px; top:24px; right:-4px }
}

/* Admin page helpers */
.section-title { margin: 18px 0 10px; font-size: 18px; font-weight:800; color: var(--ry-black) }
.form-row { display:grid; grid-template-columns: minmax(260px, 560px) 140px; gap:12px; align-items:center }
.table { width:100%; border-collapse: collapse }
.table th, .table td { padding:10px 8px; border-bottom:1px solid #eee; text-align:left }
.table thead th { font-weight:800; color:#222; position:sticky; top:0; background:#fff; z-index:1 }
.row-form { display:grid; grid-template-columns: minmax(240px, 520px) 140px 100px; gap:12px; align-items:center }
.row-form-admin { display:grid; grid-template-columns: minmax(180px, 340px) minmax(240px, 420px) 140px; gap:12px; align-items:center }
.row-form-admin-top { display:grid; grid-template-columns: 160px 160px minmax(220px, 1fr) 150px 120px; gap:12px; align-items:center }
.row-form-admin-top .btn { justify-self:start }
@media (max-width: 980px){
  .row-form-admin-top{ grid-template-columns: 1fr 1fr; }
  .row-form-admin-top select{ grid-column: span 1 }
  .row-form-admin-top input{ grid-column: span 1 }
  .row-form-admin-top .btn{ grid-column: span 2; justify-self:start }
}
select { height:44px; padding:10px 12px; border:1px solid #d2d6de; border-radius:10px; font-size:15px; background:#fff }
.table-container { max-height: 60vh; overflow:auto; border:1px solid #f3e9a1; border-radius:10px }
.table tbody tr:nth-child(odd) { background: #fafafa }

/* Buttons (admin context) */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 14px; font-weight:800; border-radius:10px; border:1px solid transparent; cursor:pointer; box-shadow: 0 1px 0 rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.35); transition: filter .12s ease, transform .02s ease, box-shadow .12s ease; user-select:none; margin:0; width:auto; line-height:1; font-size:14px }
.btn:hover { box-shadow: 0 2px 0 rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.5) }
.btn:active { transform: translateY(1px) }
.btn-primary { color:#fff; background: linear-gradient(180deg, #228f45 0%, #187037 100%); border-color:#0f5c2b }
.btn-primary:hover { filter:brightness(1.18) }
.btn-primary[disabled]{ opacity:.55; filter:grayscale(.2); cursor:not-allowed }
.btn-secondary { color:#fff; background: linear-gradient(180deg, #586a85 0%, #405068 100%); border-color:#39465a }
.btn-secondary:hover { filter:brightness(1.14) }
.btn-danger { color:#fff; background: linear-gradient(180deg, #d33a3a 0%, #b21f1f 100%); border-color:#961717 }
.btn-danger:hover { filter:brightness(1.14) }
.btn-ghost { background:#fff; color:#1c6e2e; border-color:#bfe6cd }
.btn-ghost:hover { background:#f3fbf5; border-color:#95d6ad }
/* Tiny square icon button helper */
.btn-mini { width:28px; height:28px; padding:0; border-radius:8px; font-size:16px; line-height:1; display:inline-flex; align-items:center; justify-content:center }
/* Extra‑small button for dense tables */
.btn-tiny { width:20px; height:20px; padding:0; border-radius:6px; font-size:12px; line-height:1; display:inline-flex; align-items:center; justify-content:center }

.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 10px }
.toolbar .search { flex:1 }
.toolbar input { width:100% }

/* Top navigation */
.topnav { position:sticky; top:0; z-index:5; background:#fff; border-bottom:1px solid #f1e489; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.topnav-inner { max-width: min(1000px, 92vw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:8px 6px }
.topnav .brand { display:flex; align-items:center; gap:10px; font-weight:900; color:var(--ry-green) }
.topnav .nav { display:flex; gap:8px; align-items:center }
.topnav .nav a,
.topnav .nav a:visited { color: var(--ry-green); text-decoration:none; font-weight:800; display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:8px; transition: background .12s ease, color .12s ease }
.topnav .nav a:hover { background: rgba(28,110,46,.10); color:#0a5a2a; text-decoration: underline; text-underline-offset: 2px }
.topnav .nav a i { font-size:14px }
.topnav .nav .navbtn{
  appearance:none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ry-green);
  text-decoration:none;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  margin:0;
  width:auto;
  box-shadow:none;
  line-height:1;
  font-size:14px;
}
.topnav .nav .navbtn:hover{
  background: rgba(28,110,46,.10);
  color:#0a5a2a;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.topnav .nav .navbtn:focus-visible{
  outline:2px solid rgba(28,110,46,.30);
  outline-offset:2px;
}
.brand-rr { height:26px; width:auto; display:inline-block; object-fit:contain }
.brand-ry { height:22px; width:auto; opacity:.95; display:inline-block; object-fit:contain }

/* Ensure inputs and buttons share the same height inside grids */
.form-row input,
.row-form input,
.form-row button,
.row-form button { height:44px }
.row-form input { justify-self:start }
.row-form .btn, .form-row .btn { justify-self:start }

/* Fixed button width helpers for tidy alignment */
.w-140 { width:120px }
.w-100 { width:92px }

/* Small text next to toolbar (count) */
#team-count { color:#555; font-size:13px; white-space:nowrap }
.flash { margin:10px 0; padding:10px; border-radius:8px; font-size:14px }
.flash.error{ background:#ffe9e9; color:#7a0000; border:1px solid #f2b0b0 }
.flash.success{ background:#eaf8ee; color:#0a5a2a; border:1px solid #a8dbb9 }
.flash.warning{ background:#fff8e5; color:#7a5200; border:1px solid #f0d79a }
.flash.warning ul.warn-list{ margin:0; padding-left:18px }
.flash.warning ul.warn-list li{ margin:4px 0 }

/* ===== Superadmin layout refinements ===== */
.subtle{ color:#666; font-size:13px; margin-bottom:10px }
.toolbar-sticky{ position:sticky; top:56px; background:#fff; z-index:2; padding-top:6px; padding-bottom:6px; border-bottom:1px solid #f5efc7; margin:-6px -6px 10px -6px; padding-left:6px; padding-right:6px }
.toolbar-actions{ display:flex; gap:10px }
.btn-xs{ padding:6px 10px; font-size:12px }

.panel-collapsible{ border:1px solid #f3e9a1; border-radius:10px; background:#fff; margin:10px 0 }
.panel-collapsible[open]{ background:#fffef8 }
.panel-collapsible > summary{ cursor:pointer; list-style:none; padding:12px 14px; border-radius:10px; font-weight:700 }
.panel-collapsible > summary::-webkit-details-marker{ display:none }

.accordion{ display:flex; flex-direction:column; gap:10px }
.team-item{ border:1px solid #f3e9a1; border-radius:10px; background:#fff; box-shadow: var(--card-shadow) }
.team-item[open]{ background:#fffef8 }
.team-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:10px }
.team-item summary::-webkit-details-marker{ display:none }
.team-head{ display:flex; align-items:baseline; gap:10px }
.team-name{ font-weight:800; color:#222 }
.team-meta{ color:#666; font-size:13px }
.team-actions{ display:flex; gap:8px }
.team-body{ padding:0 14px 14px 14px }

/* Flat team list layout */
.grid-create{ display:grid; grid-template-columns: 1fr; gap:8px; margin:6px 0 10px }
@media (min-width: 880px){ .grid-create{ grid-template-columns: 1fr 1fr } }
.row-compact{ display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center }
.input-sm{ height:36px; padding:8px 10px; font-size:14px; border-radius:8px; transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease }
.input-sm::placeholder{ color:#8a8f98 }
.input-sm:focus{ outline:none; border-color:#60a84f; box-shadow:0 0 0 3px rgba(96,168,79,.15); background:#fbfff9 }
.btn-sm{ padding:8px 12px; font-size:13px; border-radius:8px }

.team-card{ border:1px solid #f3e9a1; border-radius:10px; background:#fff; padding:10px; margin:10px 0; box-shadow: var(--card-shadow) }
.team-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px }
.admins-block{ margin-top:4px }
.compact-table th, .compact-table td{ padding:8px 8px; border-bottom:1px solid #eee; vertical-align: middle }
.compact-table thead th{ background:#fff; position:sticky; top:0; z-index:1 }
.compact-table tbody tr:hover td{ background:#fffef6 }
/* Disable hover background for the members table */
.members-table.compact-table tbody tr:hover td{ background: transparent }
/* Sticky first column for wide, scrollable tables */
.table-sticky thead th.sticky{ position:sticky; left:0; z-index:3; box-shadow: 2px 0 0 #f5f5f5 }
.table-sticky tbody td.sticky{ position:sticky; left:0; z-index:2; background:#fff; box-shadow: 2px 0 0 #f5f5f5 }
.row-admin-inline{ display:grid; grid-template-columns: minmax(160px, 1fr) minmax(220px, 1fr) minmax(180px, 1fr) auto; gap:8px; align-items:center }
@media (max-width: 920px){ .row-admin-inline{ grid-template-columns: 1fr 1fr; } .row-admin-inline .btn{ grid-column: span 2; justify-self:start } }
.muted{ color:#666; font-size:13px }

/* Professional global-create panel */
.global-create{ margin:8px 0 12px; background:#fff; border:1px solid #efe7b8; border-radius:12px; padding:12px }
.global-grid{ display:grid; grid-template-columns: 1fr; gap:12px }
@media (min-width: 900px){ .global-grid{ grid-template-columns: 1fr 1fr } }
.section-sub{ font-weight:800; color:#222; margin:0 0 6px }
.input-group{ display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center }
.global-admin{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap:8px; align-items:center }
@media (max-width: 900px){ .global-admin{ grid-template-columns: 1fr 1fr; } .global-admin .btn{ grid-column: span 2 } }

/* Team card polish */
.team-card{ border:1px solid #efe7b8; border-radius:12px; background:#fff; padding:12px; margin:12px 0; box-shadow: var(--card-shadow) }
.team-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px }
.team-title{ flex:1 }
.team-tools{ display:flex; gap:10px; align-items:center }
.badge{ display:inline-block; padding:4px 8px; font-size:12px; border-radius:999px; background:#f5f8f5; color:#1b6f2e; border:1px solid #e0f0e6 }
.team-name-input{ font-weight:700 }

/* ===== Member (driver) route list ===== */
.driver-stop{ margin:4px 0 6px 0; padding:6px 8px; border-radius:10px; border:1px solid #efe7b8; background:#fffef8 }
.driver-stop-row{ display:flex; align-items:flex-start; gap:8px }
.driver-stop-check{
  width:26px;
  height:26px;
  border-radius:999px;
  border:2px solid #d2d6de;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  margin-top:2px;
  padding:0;
}
.driver-stop-check i{
  color:transparent;
  font-size:14px;
}
.driver-stop.is-complete .driver-stop-check{
  background:#1c6e2e;
  border-color:#1c6e2e;
}
.driver-stop.is-complete .driver-stop-check i{
  color:#fff;
}
.driver-stop-body{
  flex:1;
  cursor:pointer;
  padding:6px 10px;
  border-radius:10px;
  background:#ffffff;
  border:1px solid #d2d6de;
  box-shadow:0 1px 0 rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.4);
  transition: background .12s ease, box-shadow .12s ease, transform .02s ease;
}
.driver-stop-body:hover{
  background:#f3fbf5;
  box-shadow:0 2px 4px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
}
.driver-stop.is-complete .driver-stop-body{ opacity:.55; text-decoration:line-through }

/* Tree pickup summary on member page */
.tree-progress{
  display:grid;
  grid-template-columns: repeat(var(--tree-cols, 8), 22px);
  gap:4px;
  margin:2px auto 8px auto;
  justify-content:center;
}
.tree-icon{
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid #d2d6de;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f4f4f5;
  color:#9aa0a6;
  font-size:11px;
  opacity:0.7;
}
.tree-icon.is-complete{
  background:#1c6e2e;
  color:#ffffff;
  border-color:#1c6e2e;
  opacity:1;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
}

/* Member header tools */
.member-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.member-tools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.member-tools .btn{
  width:auto;
  margin-top:0;
}

.maint-banner{
  position:relative;
  z-index:4;
  border-top:2px solid #f1b24a;
  border-bottom:2px solid #f1b24a;
  background: repeating-linear-gradient(
    135deg,
    #fff7d6,
    #fff7d6 10px,
    #ffe08a 10px,
    #ffe08a 20px
  );
  color:#5a3b00;
  padding:6px 10px;
  font-size:13px;
}
.maint-banner .maint-inner{
  max-width:min(960px, 92vw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.maint-banner .icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  background:#f1b24a;
  color:#fff;
}
.maint-banner .text{
  font-weight:600;
}

/* Floating clipboard panel on route planning page */
.clipboard-float{
  position:fixed;
  top:90px;
  right:18px;
  width:260px;
  max-height:70vh;
  overflow:auto;
  border-radius:12px;
  border:1px solid #efe7b8;
  background:#fffef8;
  box-shadow:var(--card-shadow);
  z-index:4;
}
@media (max-width: 900px){
  .clipboard-float{ display:none !important; }
}

/* Drag-and-drop visual hints for customized routes */
.custom-board.custom-drop-target{
  border-color:#60a84f !important;
  box-shadow:0 0 0 1px rgba(96,168,79,.35), 0 4px 10px rgba(0,0,0,.08);
  background:#f3fbf5 !important;
}
.custom-stops.custom-drop-list-active{
  background:rgba(96,168,79,.06);
  border-radius:8px;
}
.custom-stop.custom-drop-item-active{
  background:#e9f7ea !important;
  box-shadow:0 0 0 2px #60a84f inset;
}
/* Make draggable custom stops feel grabbable */
.custom-stop[draggable="true"]{
  cursor:grab;
  transition: transform .08s ease, box-shadow .08s ease, background-color .08s ease;
}
.custom-stop[draggable="true"]:hover{
  transform: translateY(-1px);
  box-shadow:0 2px 5px rgba(0,0,0,.08);
}
.custom-stop[draggable="true"]:active{
  cursor:grabbing;
  transform: translateY(0);
  box-shadow:0 0 0 rgba(0,0,0,0);
}

/* Saved routes – make title look clickable */
.sr-title{
  display:inline-block;
  margin-top:2px;
  padding:4px 8px;
  border-radius:8px;
  border:1px dashed #d6d6d6;
  cursor:pointer;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.sr-title:hover{
  background:#f3fbf5;
  border-style:solid;
  border-color:#60a84f;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}

/* ===== Superadmin – Quick Actions compact styling ===== */
aside.panel.qa { padding:14px }
aside.panel.qa h2 { font-size:15px; color:#0a2e57; margin:0 0 8px }
aside.panel.qa .section-sub { color:#0a2e57; margin-top:8px; margin-bottom:6px }
aside.panel.qa .input-sm, aside.panel.qa select.input-sm {
  height:34px; padding:7px 10px; font-size:14px; border-radius:8px
}
aside.panel.qa .btn-sm { height:36px; padding:8px 12px; font-size:13px }
aside.panel.qa .input-group { grid-template-columns: 1fr auto; gap:8px }
/* Force vertical stack for admin creator in the narrow aside */
#global-create-admin { grid-template-columns: 1fr; gap:8px }
#global-create-admin .btn { width:100% }

/* ===== Admin – Manage members layout improvements ===== */
.create-member-grid{ display:grid; gap:8px; align-items:center;
  grid-template-columns: 1.6fr 1.2fr 1fr 1.6fr 0.9fr 1.1fr 1.1fr auto }
@media (max-width: 1100px){
  .create-member-grid{ grid-template-columns: 1.6fr 1.2fr 1fr 1.6fr 1.1fr auto }
  .create-member-grid input[name="address_city"],
  .create-member-grid input[name="address_country"]{ grid-column: span 2 }
}
@media (max-width: 720px){
  .create-member-grid{ grid-template-columns: 1fr 1fr; }
  .create-member-grid .btn{ grid-column: span 2 }
}
.create-member-grid .fld{ display:flex; flex-direction:column; gap:4px }
.field-label{ font-size:12px; color:#666; font-weight:700 }
.addr-grid{ display:grid; grid-template-columns: minmax(120px, 140px) minmax(220px, 1fr); gap:6px; align-items:center; max-width:100%; justify-items:start }
.addr-grid .input-sm{ min-width:120px }
.addr-grid input[name="address_street"]{ min-width:220px }
/* Placement: street spans both columns, postal + city side-by-side, country spans both */
.addr-grid .gp-street{ grid-column: 1 / span 2 }
.addr-grid .gp-postal{ grid-column: 1 }
.addr-grid .gp-city{ grid-column: 2 }
.addr-grid .gp-country{ grid-column: 1 / span 2 }
.addr-grid select.input-sm{ width:100% }
.addr-grid .fld-sm{ display:flex; flex-direction:column; gap:2px }
.addr-grid .label-sm{ display:none; font-size:11px; color:#666; font-weight:700 }
@media (max-width: 720px){
  .addr-grid{ grid-template-columns: 1fr; }
  .addr-grid .gp-street,
  .addr-grid .gp-country{ grid-column: 1 }
}

/* Scroll framing for wide tables */
.table-scroll{ overflow-x:hidden; overflow-y:visible; border:1px solid #efe7b8; border-radius:12px; background:#fff; padding:6px; }
.table-scroll .table{ width:100%; min-width:0; margin:0 }
.table-scroll .table tbody::after{ content:""; display:block; height:0 }
/* Member identity column (two-line stack) */
.member-cell{ min-width:220px }
.member-stack{ display:grid; grid-template-columns: 1fr; gap:2px; justify-items:start }
.member-stack .mini-label{ font-size:11px; color:#666; font-weight:700 }
.member-stack .input-sm{ width:auto }
.member-stack input[name="full_name"]{ font-weight:700 }
.member-stack input[name="email"]{ color:#333 }
.w-name{ width: min(100%, 240px) }
.w-email{ width: min(100%, 240px) }
.w-pass{ width: min(100%, 200px) }
.w-street{ width: min(100%, 260px) }
.w-postal{ width: min(100%, 100px) }
.w-city{ width: min(100%, 180px) }
.w-country{ width: min(100%, 180px) }
.member-row td{ padding-top:6px; padding-bottom:6px }

/* Member meta (Active) at top of column */
.member-meta{ display:flex; justify-content:flex-start; align-items:center; gap:6px; margin-bottom:2px; flex-wrap: wrap }
.member-meta .active-form{ flex: 0 0 100% }
.member-meta .active-label{ font-size:12px; color:#2d663d; font-weight:700 }

/* Density toggle removed */
/* Toggle switch look for Active */
.switch-btn{ --w:48px; --h:28px; position:relative; display:inline-block; width:var(--w); height:var(--h); border-radius:999px; border:1px solid #cbd5e1; background:linear-gradient(180deg,#f3f6f9 0%, #e9eef4 100%); cursor:pointer; padding:0; margin:0 !important; box-sizing:border-box; box-shadow: inset 0 1px 1px rgba(0,0,0,.05); transition: border-color .15s ease, background .15s ease, box-shadow .12s ease; vertical-align: middle }
.switch-btn .knob{ position:absolute; top:50%; transform: translateY(-50%); left:2px; width:calc(var(--h) - 4px); height:calc(var(--h) - 4px); border-radius:999px; background:linear-gradient(180deg,#ffffff 0%, #e9edf2 100%); box-shadow:0 1px 2px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.85); transition:left .18s ease, background .18s ease, box-shadow .18s ease, transform .12s ease }
.switch-btn:hover{ border-color:#9fb3c8; box-shadow: inset 0 1px 1px rgba(0,0,0,.06), 0 0 0 3px rgba(28,110,46,.08) }
.switch-btn:hover .knob{ box-shadow:0 2px 3px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.95) }
.switch-btn:focus-visible{ outline:2px solid rgba(28,110,46,.35); outline-offset:2px }
.switch-btn.active{ background:linear-gradient(180deg,#e8f8ef 0%, #dff5ea 100%); border-color:#8ed0ac; box-shadow: inset 0 1px 1px rgba(0,0,0,.04) }
.switch-btn.active .knob{ left:calc(var(--w) - var(--h) + 2px); background:linear-gradient(180deg,#33d17a 0%, #1c8f54 100%); box-shadow:0 2px 3px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.55) }
.switch-btn:active .knob{ transform: translateY(-50%) scale(.96) }
.switch-btn[disabled]{ opacity:.6; cursor:not-allowed }
/* Cancel global button:hover filter so switch doesn't wash out */
.switch-btn, .switch-btn:hover, .switch-btn:active{ filter:none !important }

/* Keep pointer cursor even while busy (we avoid disabling to keep cursor consistent) */
.switch-btn.busy{ cursor:pointer }

/* Make the Active label feel connected to the switch */
.active-form{ display:inline-flex; align-items:center; gap:10px; height:28px }
.active-form .active-label{ font-weight:600; color:#475569; font-size:14px; height:28px; line-height:28px; display:inline-flex; align-items:center; white-space:nowrap; margin:0; cursor: default; pointer-events:none; position: static }
.active-form .active-label.on{ color:#1c6e2e; font-weight:700 }
.active-form .active-label.off{ color:#6b7280; font-weight:600 }

/* Search input polish */
.toolbar .search input[type="search"]{ height:40px; padding:10px 12px; border-radius:10px }

/* Keep inline action forms tight */
td.actions form{ display:inline }
.addr-grid{ justify-items:start }
.addr-grid select.input-sm{ width:auto }

/* ===== New members grid (non-table) ===== */
.members-list{ border:1px solid #efe7b8; border-radius:12px; background:#fff; padding:8px; display:flex; flex-direction:column; gap:10px }
.member-item{ border:1px solid #f3e9a1; border-radius:10px; background:#fff; padding:10px }
.member-item-grid{ display:grid; grid-template-columns: minmax(360px, 420px) 1fr; gap:16px; align-items:start }
@media (max-width: 900px){ .member-item-grid{ grid-template-columns: 1fr } }
.col-member{ display:grid; grid-template-columns: 150px 1fr; gap:12px }
@media (max-width: 520px){ .col-member{ grid-template-columns: 1fr } }
.left-rail{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; padding-top:6px }
.left-rail .actions{ display:flex; gap:10px; align-items:center }
.member-fields{ display:grid; grid-template-columns: 1fr; gap:8px }
.col-address{ background:transparent; border:0; padding:0 }

/* ===== Global footer ===== */
.site-footer{ width:100%; margin-top:auto; margin-bottom:0 }
.sf-inner{ background:#fff; border:1px solid #efe7b8; border-radius:12px 12px 0 0; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#666; box-shadow: var(--card-shadow); max-width:min(1000px, 92vw); margin:0 auto }
.sf-link{ color: var(--ry-green); font-weight:700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; font-size:12.5px }
.sf-left, .sf-right{ font-size:12px }
.sf-right .brandname{ color:#555; font-weight:800; font-family: "Arial Black", "Segoe UI Black", Impact, Haettenschweiler, "Arial Narrow Bold", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing:.2px; display:inline-block; transform: skewX(-10deg); transform-origin: bottom left }
.sf-right .brandname-sub{ font-size:.84em; letter-spacing:.1px }
.sf-right .brandname a{ color:#555; text-decoration:none }
.sf-right .brandname a:hover{ color:#0aa84b }

/* ===== Route planning upload ===== */
.drop{ margin-top:6px; background:#fff; border:2px dashed #1c6e2e; border-radius:10px; padding:16px; text-align:center; color:#1c6e2e; font-weight:800; cursor:pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; display:flex; align-items:center; justify-content:center; gap:8px }
.drop:hover{ background:rgba(28,110,46,.06); border-color:#0a5a2a; color:#0a5a2a; text-decoration: underline; text-underline-offset: 3px }
.drop:focus-visible{ outline:2px solid rgba(28,110,46,.35); outline-offset:2px }
.drop:active{ transform: translateY(1px) }
.drop.over{ background:rgba(28,110,46,.10); border-color:#0a5a2a }
.drop .upload-ic{ font-size:18px }
.progressbar{ height:6px; background:#f0f0e4; border-radius:999px; overflow:hidden; margin-top:8px }
.progressbar > div{ height:100%; width:0%; background:linear-gradient(90deg,#2ecc71,#1c6e2e) }

/* Route planning parameters */
.rp-params{ display:grid; grid-template-columns: repeat(3, minmax(160px, 220px)); gap:10px; align-items:end; max-width:720px }
.rp-label .field-label{ font-weight:800; color:#0a2e57 }
.rp-params .input-sm{ height:40px }
/* Quick pick chips and meta */
/* helper buttons removed */

/* Team list mini */
.team-mini{ list-style:none; padding-left:0; margin:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:8px }
.team-mini .tl-item{ background:#fff; border:1px solid #efe7b8; border-radius:10px; padding:8px 10px; cursor:pointer }
.team-mini .tl-item.inactive{ opacity:.55 }
.team-mini .tl-item .nm{ font-weight:800; color:#0a2e57; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.team-mini .tl-item .addr{ color:#444; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* Editable grid affordances */
.rp-grid{ font-size:13px }
.rp-grid td[contenteditable]{
  background:#fff; border:1px dashed #cfd8bf; border-radius:8px; padding:6px 8px; outline:none; cursor:text;
}
.rp-grid td[contenteditable]:hover{ background:#fbfff9; border-color:#9ec28e }
.rp-grid td[contenteditable]:focus{ background:#f4fff0; border-color:#60a84f; box-shadow: inset 0 0 0 1px #60a84f }
.rp-grid td.invalid{ background:#fff6f6; border-color:#d33a3a; box-shadow: inset 0 0 0 1px #d33a3a }
.rp-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px }
.rp-grid th, .rp-grid td{ vertical-align: top }
.rp-grid td[contenteditable]{
  /* show up to ~3 lines; avoid layout glitches by keeping td as table-cell */
  white-space: normal; overflow: hidden; line-height:1.2; max-height:3.6em;
}
.rp-grid td[contenteditable]:focus{
  max-height:none; white-space: nowrap; overflow: visible;
}

/* Pen cursor for editable cells */
.rp-grid td[contenteditable]{
  cursor: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>\
    <path fill='%230a5a2a' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z'/>\
  </svg>") 0 24, text;
}

/* ===== Dark mode ===== */
html[data-theme="dark"]{
  color-scheme: dark;
  background:#070b12;
  --ry-black:#e5e7eb;
  --card-shadow:0 14px 40px rgba(0,0,0,.55);
  --dm-bg:#070b12;
  --dm-bg2:#0b1020;
  --dm-surface:#0f172a;
  --dm-surface2:#0b1220;
  --dm-border: rgba(255,255,255,.12);
  --dm-text:#e5e7eb;
  --dm-muted:#9ca3af;
  --dm-link:#e5e7eb;
  --dm-link-hover:#ffffff;
  --dm-link-bg: rgba(255,255,255,.06);
}

html[data-theme="dark"] body{
  background:
    radial-gradient(900px 600px at 18% -10%, rgba(34,197,94,.16), transparent 60%),
    radial-gradient(900px 600px at 88% -12%, rgba(255,212,0,.14), transparent 60%),
    linear-gradient(180deg, var(--dm-bg2) 0%, var(--dm-bg) 100%) !important;
  background-color: var(--dm-bg) !important;
  color: var(--dm-text);
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] .subtle,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .team-meta{
  color: var(--dm-muted) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] label{
  color: var(--dm-text) !important;
}

html[data-theme="dark"] .section-sub,
html[data-theme="dark"] .team-mini .tl-item .nm,
html[data-theme="dark"] .rp-label .field-label,
html[data-theme="dark"] .team-name{
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .team-mini .tl-item .addr{ color:#cbd5e1 !important; }

html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-collapsible,
html[data-theme="dark"] details.team-item,
html[data-theme="dark"] .team-item,
html[data-theme="dark"] .team-mini .tl-item,
html[data-theme="dark"] .clipboard-float{
  background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(11,18,32,.96)) !important;
  border-color: var(--dm-border) !important;
  box-shadow: var(--card-shadow) !important;
}
html[data-theme="dark"] details.team-item[open],
html[data-theme="dark"] .panel-collapsible[open]{ background: linear-gradient(180deg, rgba(17,27,47,.98), rgba(11,18,32,.98)) !important; }

html[data-theme="dark"] .stat{
  background: rgba(11,18,32,.9) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .stat .num{ color:#a7f3d0 !important; }

html[data-theme="dark"] .topnav{
  background: rgba(11,18,32,.92) !important;
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--dm-border) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] .topnav .nav a,
html[data-theme="dark"] .topnav .nav a:visited{
  color: var(--dm-link) !important;
}
html[data-theme="dark"] .topnav .nav a:hover{
  background: var(--dm-link-bg) !important;
  color: var(--dm-link-hover) !important;
}
html[data-theme="dark"] .topnav .nav .navbtn{
  color: var(--dm-link) !important;
  border-color: rgba(148,163,184,.26) !important;
}
html[data-theme="dark"] .topnav .nav .navbtn:hover{
  background: var(--dm-link-bg) !important;
  color: var(--dm-link-hover) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background: rgba(11,18,32,.92) !important;
  border-color: rgba(148,163,184,.28) !important;
  color: var(--dm-text) !important;
}
html[data-theme="dark"] .input-sm:focus{
  border-color:#34d399 !important;
  box-shadow:0 0 0 3px rgba(52,211,153,.18) !important;
  background: rgba(11,18,32,.92) !important;
}

html[data-theme="dark"] pre{
  background: rgba(11,18,32,.92) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

html[data-theme="dark"] .flash.error{ background: rgba(239,68,68,.14) !important; color:#fecaca !important; border-color: rgba(239,68,68,.35) !important; }
html[data-theme="dark"] .flash.success{ background: rgba(34,197,94,.12) !important; color:#bbf7d0 !important; border-color: rgba(34,197,94,.30) !important; }
html[data-theme="dark"] .flash.warning{ background: rgba(245,158,11,.14) !important; color:#fde68a !important; border-color: rgba(245,158,11,.35) !important; }

html[data-theme="dark"] .btn-ghost{
  background: transparent !important;
  color: var(--dm-link) !important;
  border-color: rgba(148,163,184,.28) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .btn-ghost:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(148,163,184,.40) !important;
}
html[data-theme="dark"] .btn-secondary{ background: linear-gradient(180deg, #475569 0%, #334155 100%) !important; border-color:#334155 !important; }
html[data-theme="dark"] .btn-danger{ background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%) !important; border-color:#7f1d1d !important; }

html[data-theme="dark"] button:hover{ filter:brightness(1.05) !important; }

html[data-theme="dark"] .maint-banner{
  border-top:2px solid rgba(245,158,11,.55) !important;
  border-bottom:2px solid rgba(245,158,11,.55) !important;
  background: repeating-linear-gradient(
    135deg,
    rgba(245,158,11,.10),
    rgba(245,158,11,.10) 10px,
    rgba(245,158,11,.18) 10px,
    rgba(245,158,11,.18) 20px
  ) !important;
  color:#fde68a !important;
}
html[data-theme="dark"] .maint-banner .icon{
  background: rgba(245,158,11,.65) !important;
  color:#111827 !important;
}

html[data-theme="dark"] .terms-shell{
  background: rgba(11,18,32,.92) !important;
  border-color: var(--dm-border) !important;
}