/* 1.2.140 🎨 New app design — a skin. Every rule here starts with html.design-new, so with the class absent (Old design,
   the default) nothing in this file applies and the app looks and behaves exactly as before. The class is set by design.js:
   the admin's org design (switch designNew, Admin → System → 🎨 App design) or, while "Members can choose design" (designChoice)
   is on, the person's own choice in Settings. Brand: #2C542F green, #DEAA14 gold, #183318 dark green. */

/* ---------- colours ---------- */
html.design-new.light{--background:100 12% 95%;--card:0 0% 100%;--border:100 8% 89%;--input:100 8% 86%;--secondary:100 10% 92%;--muted:100 10% 92%;--muted-foreground:130 6% 42%;--accent:100 10% 90%;--primary:124 31% 25%;--dn-accent:#2C542F;--dn-accent-soft:rgba(44,84,47,.10);--dn-bar:rgba(250,251,249,.92);--dn-hair:rgba(20,32,26,.12);--dn-shadow:0 1px 2px rgba(20,32,26,.05),0 2px 10px rgba(20,32,26,.05)}
html.design-new.dark{--background:130 16% 6%;--card:130 13% 10%;--popover:130 13% 10%;--border:130 9% 17%;--input:130 9% 19%;--secondary:130 9% 15%;--muted:130 9% 15%;--muted-foreground:110 8% 64%;--accent:130 9% 17%;--primary:124 31% 38%;--dn-accent:#DEAA14;--dn-accent-soft:rgba(222,170,20,.14);--dn-bar:rgba(17,25,18,.9);--dn-hair:rgba(255,255,255,.1);--dn-shadow:0 1px 2px rgba(0,0,0,.4)}
html.design-new body{background:hsl(var(--background))}

/* ---------- top bar: a quiet app bar, no browser-looking bits ---------- */
html.design-new .topbar{background:hsl(var(--background)/.88);border-bottom:0;box-shadow:none}
html.design-new .topbar-in{height:52px}
html.design-new .topbar .brand{font-size:15px;font-weight:700;letter-spacing:-.01em}
html.design-new .topbar .pill.duty,html.design-new .topbar .eyebrow{display:none!important}
html.design-new .topbar .avatar{width:30px;height:30px}
html.design-new .topbar .iconbtn{border:0;background:hsl(var(--secondary));border-radius:999px;width:36px;height:36px}

/* ---------- large titles ---------- */
html.design-new .page{padding-top:6px}
html.design-new .page-head{margin-bottom:14px}
html.design-new .page-head h1{font-size:32px;line-height:38px;font-weight:800;letter-spacing:-.03em}
html.design-new .page-head.panel h1{font-size:26px;line-height:32px}
html.design-new .page-head .mini.muted,html.design-new .page-head .sub{font-size:13px}
html.design-new .page-head.panel .back,html.design-new .page-head>a.back{border:0;background:hsl(var(--secondary));box-shadow:none;border-radius:999px}

/* ---------- cards ---------- */
html.design-new .card{border-color:transparent;box-shadow:var(--dn-shadow);border-radius:18px}
html.design-new.dark .card{border-color:hsl(var(--border)/.6)}
html.design-new .call-card{border-radius:18px;overflow:hidden}
html.design-new .call-card .call-title{font-size:16px;font-weight:700;letter-spacing:-.01em}
html.design-new .call-actions .btn,html.design-new .page-head .btn,html.design-new .page-head .chip{border-radius:999px}
html.design-new .btn-emerald,html.design-new .btn-primary{background:#2C542F;border-color:#2C542F;color:#fff}
html.design-new .btn-emerald:hover,html.design-new .btn-primary:hover{background:#183318;border-color:#183318}
html.design-new.dark .btn-emerald,html.design-new.dark .btn-primary{background:#3b6e3f;border-color:#3b6e3f}
html.design-new .banner{border-radius:16px;border:0;box-shadow:var(--dn-shadow)}
html.design-new #pushBanner{margin:8px 12px 0}
html.design-new .more-card{padding:0;overflow:hidden}
html.design-new .side-post .btn-post{background:#2C542F;color:#fff;border-radius:14px;padding:12px}
html.design-new .side-post .btn-post:hover{background:#183318}
html.design-new.dark .side-post .btn-post{background:#DEAA14;color:#183318}
html.design-new .more-eyebrow{text-transform:uppercase;letter-spacing:.06em;font-size:12px;padding-inline-start:6px}
html.design-new .toggle.on{background:#2C542F}
html.design-new.dark .toggle.on{background:#DEAA14}
html.design-new .input,html.design-new .select,html.design-new textarea{border-radius:12px}

/* ---------- segmented Open / Active / Closed on the calls screens ---------- */
html.design-new .dn-seg{display:flex;gap:2px;padding:2px;margin:0 0 14px;border-radius:11px;background:hsl(var(--secondary))}
html.design-new .dn-seg a{flex:1 1 0;min-width:0;text-align:center;padding:7px 4px;border-radius:9px;font-size:13.5px;font-weight:600;color:hsl(var(--muted-foreground));text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.design-new .dn-seg a.on{background:hsl(var(--card));color:hsl(var(--foreground));box-shadow:0 1px 4px rgba(0,0,0,.12)}
html.design-new .dn-seg a:focus-visible{outline:2px solid #DEAA14;outline-offset:1px}

/* ---------- bottom sheets (call details, forms, every dialog) ---------- */
@keyframes dnUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
html.design-new .modal-bg{background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
html.design-new .modal{border:0;box-shadow:0 -10px 34px rgba(0,0,0,.22);animation:dnUp .26s cubic-bezier(.2,.8,.2,1)}
html.design-new .modal-head h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
html.design-new .modal-head [data-close],html.design-new .modal-head .iconbtn{border-radius:999px;background:hsl(var(--secondary));border:0}
html.design-new .dn-tabbar{display:none}

@media (max-width:1023.98px){
  /* the tab bar replaces the ☰ menu button; "Me" opens the same menu as a sheet */
  html.design-new .topbar [data-act="menu"],html.design-new .topbar [data-act="account"],html.design-new .topbar .ch-topb{display:none!important} /* Chat has its own tab (with the unread badge) */
  html.design-new .content{padding-bottom:calc(66px + var(--sab))}
  html.design-new .fab-chat{bottom:calc(78px + var(--sab))}
  html.design-new .nc-bar,html.design-new .rdz-dock{bottom:calc(72px + var(--sab,0px))}
  html.design-new .dn-tabbar{display:block;position:fixed;inset:auto 0 0 0;z-index:36;background:var(--dn-bar);-webkit-backdrop-filter:saturate(1.6) blur(20px);backdrop-filter:saturate(1.6) blur(20px);border-top:.5px solid var(--dn-hair);padding:0 env(safe-area-inset-right,0px) var(--sab) env(safe-area-inset-left,0px)}
  html.design-new .dn-tabbar nav{display:flex;max-width:640px;margin:0 auto;height:58px}
  html.design-new .dn-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px 4px;color:hsl(var(--muted-foreground));text-decoration:none;font-size:10.5px;font-weight:600;line-height:1.1;background:none;border:0;-webkit-tap-highlight-color:transparent;position:relative}
  html.design-new .dn-tab .dn-ic{position:relative;display:block;width:26px;height:26px}
  html.design-new .dn-tab svg{width:26px;height:26px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  html.design-new .dn-tab .dn-l{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.design-new .dn-tab.on{color:var(--dn-accent)}
  html.design-new .dn-tab.on svg{stroke-width:2.3}
  html.design-new .dn-tab.on .dn-ic::after{content:"";position:absolute;inset:-3px -12px;border-radius:999px;background:var(--dn-accent-soft);z-index:-1}
  html.design-new .dn-tab:active{opacity:.6}
  html.design-new .dn-tab:focus-visible{outline:2px solid #DEAA14;outline-offset:-4px;border-radius:12px}
  html.design-new .dn-badge{position:absolute;top:-5px;inset-inline-end:-11px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e5483a;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;border:2px solid hsl(var(--card));box-sizing:content-box}
  /* the ☰ menu as a bottom sheet (opened by "Me") */
  html.design-new body .drawer{inset:auto 0 0 0;width:100%;max-height:86vh;border:0;border-radius:22px 22px 0 0;transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);padding-top:6px;padding-bottom:var(--sab);box-shadow:0 -10px 34px rgba(0,0,0,.25)}
  html.design-new body.drawer-open .drawer{transform:none}
  html.design-new body .drawer::before{content:"";display:block;width:38px;height:5px;border-radius:3px;background:hsl(var(--muted-foreground)/.35);margin:2px auto 0;flex:none}
  html.design-new .drawer .side-head{border-bottom:0;height:56px}
  html.design-new .drawer .drawer-x{display:inline-flex!important;border-radius:999px;background:hsl(var(--secondary))}
  html.design-new .drawer .side-nav .nav-link{border-radius:12px;padding-block:11px}
  html.design-new .drawer-bg{background:rgba(0,0,0,.42)}
  /* a top-level tab (Chat / Map opened from the tab bar) has no back arrow */
  html.design-new.dn-tabroot .page-head>a.back{display:none}
  html.design-new.dn-tabroot .page-head.has-back{padding-inline-start:0}
}
@media (max-width:639.98px){
  html.design-new .page{padding-inline:14px}
  html.design-new .modal{border-radius:22px 22px 0 0;padding-top:10px}
  html.design-new .modal::before{content:"";display:block;width:38px;height:5px;border-radius:3px;background:hsl(var(--muted-foreground)/.35);margin:0 auto 10px}
}
@media (min-width:1024px){
  html.design-new .sidebar{border-inline-end:0;box-shadow:1px 0 0 var(--dn-hair)}
  html.design-new .sidebar .nav-link{border-radius:12px}
  html.design-new .sidebar .nav-link.active{background:var(--dn-accent-soft);color:var(--dn-accent)}
}
@media (prefers-reduced-motion:reduce){html.design-new .modal{animation:none}html.design-new body .drawer{transition:none}}
/* 🎨 App design card (Settings) and the admin tab (Admin → System) */
.ds-opts{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;border:1px solid hsl(var(--border))}
.ds-opt{display:flex;align-items:center;gap:10px;padding:12px 14px;background:hsl(var(--card));border:0;border-top:1px solid hsl(var(--border));text-align:start;width:100%;font-size:15px;cursor:pointer;color:inherit}
.ds-opt:first-child{border-top:0}
.ds-opt .ds-r{width:22px;height:22px;border-radius:50%;border:2px solid hsl(var(--muted-foreground)/.6);flex:none;display:grid;place-items:center}
.ds-opt[aria-checked="true"] .ds-r{border-color:#2C542F;background:#2C542F}
.ds-opt[aria-checked="true"] .ds-r::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
html.dark .ds-opt[aria-checked="true"] .ds-r{border-color:#DEAA14;background:#DEAA14}
html.dark .ds-opt[aria-checked="true"] .ds-r::after{background:#183318}
.ds-opt:focus-visible{outline:2px solid #DEAA14;outline-offset:-2px}
.ds-opt .ds-t{flex:1;min-width:0}.ds-opt .ds-t small{display:block;color:hsl(var(--muted-foreground));font-size:12.5px;margin-top:1px}
.ds-adm .switch-row{margin-top:14px}