/* DMC Level Up — mobile-first styles. DMC Blue #172e57 primary. */
:root {
  --dmc-blue: #172e57;
  --dmc-blue-dark: #0f1e3a;
  --dmc-blue-light: #2a4a86;
  --green: #36cb4c;
  --gold: #e2b959;
  --purple: #8980af;
  --bg: #f4f6fa;
  --card: #ffffff;
  --text: #1c2333;
  --muted: #6b768c;
  --danger: #c0392b;
  --radius: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--dmc-blue-light); }
.topbar {
  background: var(--dmc-blue); color: #fff;
  padding: 0.7rem 1rem; position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.topbar .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: #fff; }
.topbar .brand img { height: 34px; width: auto; border-radius: 6px; }
.topbar .brand .t1 { font-weight: 800; letter-spacing: .3px; }
.topbar .brand .t2 { font-size: .72rem; opacity: .85; }
.topbar .spacer { flex: 1; }
.topbar .who { font-size: .8rem; opacity: .9; text-align: right; }
/* Cleaner topbar on mobile: one line, no email/pill/tagline crowding the buttons */
.menuuser {
  display: none; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .82rem; color: #dfe6f2; padding: .1rem 0 .6rem;
}
@media (max-width: 640px) {
  .topbar { gap: .55rem; padding: .6rem .7rem; }
  .topbar .who { display: none; }
  .topbar .brand { flex: 1; min-width: 0; }
  .topbar .brand .t1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .brand .t2 { display: none; }
  .bellbtn, .menubtn, .avatarbtn { flex: 0 0 auto; }
  .menuuser { display: flex; }
}
.nav {
  display: flex; gap: .25rem; overflow-x: auto; background: var(--dmc-blue-dark);
  padding: .4rem .6rem; position: sticky; top: 57px; z-index: 49;
}
.nav a {
  color: #dfe6f2; text-decoration: none; font-size: .82rem; white-space: nowrap;
  padding: .45rem .7rem; border-radius: 999px;
}
.nav a.active, .nav a:hover { background: rgba(255,255,255,.16); color: #fff; }
/* Grouped mobile-first menu panel */
.menubtn {
  background: var(--green); color: #0f1e3a; border: 0; border-radius: 12px;
  font-size: 1.7rem; font-weight: 800; padding: .55rem 1rem; cursor: pointer;
  min-width: 60px; min-height: 60px; line-height: 1;
}
.menubtn:hover { background: #2db542; }
/* Notification bell in the topbar, with unread badge. Kept small so the menu button stays on screen. */
.bellbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: #0f1e3a; border: 0; border-radius: 50%;
  width: 44px; height: 44px; min-width: 44px; cursor: pointer; text-decoration: none;
}
.bellbtn:hover { background: #2db542; }
.bellbtn svg { width: 22px; height: 22px; }
/* Global back button in the topbar, present on every page so nobody gets
   stuck with no way back after tapping into a section. */
.backbtn {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #fff; border: 0; border-radius: 50%;
  width: 40px; height: 40px; min-width: 40px; cursor: pointer;
  margin-right: .25rem;
}
.backbtn:hover { background: rgba(255,255,255,.15); }
.backbtn svg { width: 26px; height: 26px; }
/* Training video thumbnail: contained 16:9 artwork inside the card,
   sized like the rest of the card content. */
.video-thumb-wrap { display: block; margin: 0 0 1rem; }
.video-thumb {
  display: block; width: 100%;
  aspect-ratio: 16 / 9; object-fit: cover; background: #0f1e3a;
  border-radius: 10px;
}
.bellbadge {
  position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px;
  padding: 0 6px; border-radius: 999px; background: #e2b959; color: #172e57;
  font-size: .8rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
/* Profile avatar button in the topbar, next to the bell and menu buttons.
   Shows the employee's uploaded photo; falls back to colored initials. */
.avatarbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); overflow: hidden;
  background: rgba(255,255,255,.08); cursor: pointer; text-decoration: none; padding: 0;
}
.avatarbtn:hover, .avatarbtn:focus-visible { border-color: #fff; }
/* The global .avatar rule (crew rows) sets margin-right:-8px and a white
   border; both must be reset here so the header photo sits exactly centered
   in the 44px button with no clipping or shift. */
.avatarbtn .avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  margin: 0; border: 0; flex: 0 0 auto; }
.avatarbtn .avatar img { display: block; }
/* One-tap upload button (shared _upload_button.html partial). The native
   file input is visually hidden but stays in the layout so keyboard focus
   and required-field validation keep working; the styled label is the
   visible button, so no raw "no file selected" text ever shows. */
.dmc-fileinput { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0; }
label.btn { cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; }
.dmc-filename { display: inline-block; margin-left: .5rem; }
/* Floating back button: opens the main menu from any page */
.backfab {
  position: fixed; left: 16px; bottom: 84px; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--dmc-blue); color: #fff; border: 0;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.backfab:hover { background: var(--dmc-blue-light); }
/* Ask Davi floating button: persistent on every screen, bottom-right
   above the tab bar. Mirrors .backfab placement on the left. */
.askdavidfab {
  position: fixed; right: 16px; bottom: 84px; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--green); color: #0f1e3a;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); text-decoration: none;
}
.askdavidfab svg { width: 26px; height: 26px; }
.askdavidfab:hover, .askdavidfab:focus-visible { filter: brightness(1.08); }
/* Slide-over menu drawer: full-height overlay ABOVE the app header so the
   MENU title and X are always visible on open. It stops above the bottom
   tab bar so the tab bar stays visible and tappable while the menu is open. */
.menupanel {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  bottom: calc(66px + env(safe-area-inset-bottom));
  background: var(--dmc-blue-dark); color: #dfe6f2;
  overflow-y: auto;
  padding: 0 .9rem 1.6rem; box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.menupanel[hidden] { display: none; }
.menubackdrop {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  bottom: calc(66px + env(safe-area-inset-bottom));
  background: rgba(8, 15, 30, .55);
}
.menubackdrop[hidden] { display: none; }
/* Sticky drawer header: the MENU title and X stay pinned at the top of the
   drawer and follow the scroll instead of scrolling away with the content. */
.menuhead {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--dmc-blue-dark);
  margin: 0 -.9rem; padding: .5rem .9rem .6rem;
  border-bottom: 1px solid rgba(226,185,89,.25);
}
.menutitle {
  color: var(--gold); font-size: .72rem; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase;
}
.menuclose {
  min-width: 52px; min-height: 52px; padding: 0 .9rem;
  font-size: 2rem; line-height: 1; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px; cursor: pointer;
}
.menuclose:hover { background: rgba(255,255,255,.22); }
.menusec { border-top: 1px solid rgba(226,185,89,.35); padding: .55rem 0 .2rem; }
.menusec:first-child { border-top: 0; }
.menulabel {
  color: var(--gold); font-size: .72rem; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; margin: .25rem 0 .35rem;
}
.menulabel.toggle {
  cursor: pointer; user-select: none; -webkit-user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: .35rem 0;
}
.menulabel.toggle .chev { font-size: 2rem; line-height: 1; padding: .35rem .7rem; transition: transform .15s; }
.menusec.collapsed .menulabel.toggle .chev { transform: rotate(-90deg); }
.menusec.collapsed .seclinks { display: none; }
.subgroup { margin: 0 0 .3rem; }
.sublabel {
  color: var(--purple); font-size: .66rem; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; margin: .3rem 0 .25rem;
}
.sublabel.toggle {
  cursor: pointer; user-select: none; -webkit-user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 44px; padding: .3rem 0 .3rem 1rem;
}
.sublabel.toggle .chev { font-size: 1.6rem; line-height: 1; padding: .35rem .7rem; transition: transform .15s; }
.subgroup.collapsed .sublabel.toggle .chev { transform: rotate(-90deg); }
.subgroup.collapsed .sublinks { display: none; }
.menupanel .sublinks { padding-left: 1rem; }
.menupanel a {
  display: flex; align-items: center; gap: .75rem;
  color: var(--purple); text-decoration: none; font-size: 1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.1px;
  padding: .85rem 1rem; border-radius: 12px; min-height: 52px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
  margin: 0 0 .5rem;
}
.menupanel a svg {
  width: 20px; height: 20px; flex: 0 0 20px; opacity: .92;
}
.menupanel a.active svg { opacity: 1; }
.menupanel a span { flex: 1; }
/* Pending-count badge on a menu link (e.g. Torre's proposal queue). */
.menupanel a .menubadge { flex: 0 0 auto; min-width: 26px; height: 26px;
  padding: 0 8px; border-radius: 999px; background: #e2b959; color: #172e57;
  font-size: .85rem; font-weight: 800; display: inline-flex; align-items: center;
  justify-content: center; }
.menupanel a.active { background: var(--green); color: #0f1e3a; font-weight: 700; }
.menupanel a:hover { background: rgba(255,255,255,.12); color: var(--purple); }
.menupanel a.active:hover { background: var(--green); color: #0f1e3a; }
.langtoggle { display: flex; gap: .5rem; margin: 0 0 .5rem; }
.langtoggle button {
  flex: 1; padding: .85rem .5rem; border-radius: 12px; min-height: 52px;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  background: #fff; border: 1px solid #d5dae3; color: #0f1e3a;
}
.langtoggle button.on { background: var(--green); color: #0f1e3a; }
/* Accent colors: green primary buttons, gold section header accents */
.btn { background: var(--green); color: #0f1e3a; }
.btn:hover { background: #2db542; color: #0f1e3a; }
/* Primary location action on the on-site check-in page (Torre 2026-10-02). */
.btn.primary { background: var(--dmc-blue); color: #fff; }
.btn.primary:hover { background: #1e3a6e; color: #fff; }
.btn.primary:disabled { opacity: .7; }
.card h2 {
  display: inline-block; padding-bottom: .25rem;
  border-bottom: 2px solid var(--gold); margin-bottom: .8rem;
}
.pill.ok { border: 1px solid #9edaa8; }
.pill.warn { border: 1px solid #ecc987; }
.wrap { max-width: 960px; margin: 0 auto; padding: 1rem 1rem 4rem; }
.card {
  background: var(--card); border-radius: var(--radius); padding: 1rem 1.1rem;
  margin-bottom: 1rem; box-shadow: 0 1px 4px rgba(23,46,87,.08);
}
.card h2, .card h3 { margin-top: 0; color: var(--dmc-blue); }
.muted { color: var(--muted); font-size: .9rem; }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 50%; color: #fff; font-weight: 800;
  font-size: .8rem; text-align: center; line-height: 1.15;
  box-shadow: 0 4px 10px rgba(0,0,0,.2); border: 3px solid rgba(255,255,255,.65);
  flex: 0 0 auto;
}
.badge.lg { width: 120px; height: 120px; min-width: 120px; min-height: 120px; max-width: 120px; max-height: 120px; aspect-ratio: 1; font-size: 1rem; }
.badge.sm { width: 52px; height: 52px; font-size: .62rem; }
.tier-row { display: flex; gap: .9rem; align-items: center; }
.progress { background: #e3e8f1; border-radius: 999px; height: 14px; overflow: hidden; }
.progress > div {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--dmc-blue-light), var(--green));
  transition: width .6s ease;
}
.btn {
  display: inline-block; background: var(--dmc-blue); color: #fff; border: 0;
  padding: .65rem 1.1rem; border-radius: 10px; font-size: .95rem; font-weight: 700;
  text-decoration: none; cursor: pointer; text-align: center;
}
.btn:hover { background: var(--dmc-blue-light); color: #fff; }
.btn.secondary { background: #e8edf5; color: var(--dmc-blue); }
.btn.warn { background: var(--gold); color: #3a2c05; }
.btn.danger { background: var(--danger); }
.btn.small { padding: .4rem .7rem; font-size: .82rem; }
.btn.block { display: block; width: 100%; }
/* Job status flow: big glove-friendly crew buttons. */
.btn-big {
  display: block; width: 100%; padding: 1.1rem; font-size: 1.25rem;
  border-radius: 14px; margin: .5rem 0;
}
.job-status-card { border-left: 5px solid var(--green); }
.job-status-btns { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0; }
.job-status-btns form { margin: 0; }
.job-status-btns .btn { width: 100%; }
.job-elapsed { font-size: 1.3rem; font-weight: 700; color: var(--dmc-blue); }
.job-msgs { margin-top: .75rem; border-top: 1px solid #e3e8f1; padding-top: .5rem; }
label { display: block; font-weight: 600; margin: .6rem 0 .25rem; font-size: .9rem; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=tel], select, textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid #c8d1e0; border-radius: 10px;
  font-size: 1rem; background: #fff;
}
textarea { min-height: 90px; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid #e7ebf2; }
th { color: var(--dmc-blue); font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; }
.table-wrap { overflow-x: auto; }
tr.rowlink { cursor: pointer; }
tr.rowlink:active { background: #f0f4fa; }
.notice {
  border-left: 4px solid var(--gold); background: #fdf6e3; padding: .8rem 1rem;
  border-radius: 0 10px 10px 0; font-size: .88rem; margin: 1rem 0;
}
.notice.blue { border-color: var(--dmc-blue-light); background: #eaf0fb; }
.pill {
  display: inline-block; padding: .2rem .65rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700;
}
.pill.ok { background: #e2f7e5; color: #1c7a2a; }
.pill.warn { background: #fdf0d5; color: #8a5a00; }
.pill.bad { background: #fbe3e0; color: #a02a1e; }
.pill.info { background: #e3ecfb; color: var(--dmc-blue); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; font-size: .92rem; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; }
.journey { display: flex; flex-direction: column; gap: .7rem; }
.tier-card { display: flex; gap: .8rem; align-items: flex-start; }
.tier-card.locked { opacity: .75; }
.tier-card.current { border: 2px solid var(--gold); }
.you-are-here {
  background: var(--gold); color: #3a2c05; font-weight: 800; font-size: .72rem;
  padding: .15rem .6rem; border-radius: 999px; text-transform: uppercase;
  letter-spacing: .5px;
}
.celebrate { text-align: center; padding: 2rem 1rem; }
.celebrate .big { font-size: 3rem; }
.flash { padding: .7rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-size: .92rem; }
.flash.ok { background: #e2f7e5; color: #1c7a2a; }
.flash.err { background: #fbe3e0; color: #a02a1e; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0;
  border-bottom: 1px solid #eef1f6;
}
.check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--dmc-blue-light);
  flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: .85rem; }
.check.done { background: var(--green); border-color: var(--green); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } .kv { grid-template-columns: 1fr; } }
.achv { display: inline-block; background: #eef3fc; border: 1px solid #d4def2;
  border-radius: 12px; padding: .5rem .8rem; margin: .25rem; font-size: .85rem; }
.achv .em { font-size: 1.2rem; margin-right: .3rem; }
.footer { text-align: center; color: var(--muted); font-size: .78rem; padding: 2rem 1rem; }
.hero {
  background: linear-gradient(135deg, var(--dmc-blue) 0%, var(--dmc-blue-light) 100%);
  color: #fff; border-radius: var(--radius); padding: 1.4rem 1.2rem; margin-bottom: 1rem;
}
.hero h1 { margin: 0 0 .3rem; font-size: 1.5rem; }
.hero p { margin: .2rem 0; opacity: .92; }
.login-wrap { max-width: 420px; margin: 3rem auto; }
.login-logo { text-align: center; margin-bottom: 1rem; }
.login-logo img { height: 64px; border-radius: 10px; }
details.faq { border-bottom: 1px solid #e7ebf2; padding: .6rem 0; }
details.faq summary { font-weight: 700; color: var(--dmc-blue); cursor: pointer; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.pop { animation: pop .5s ease both; }
.confetti { font-size: 2rem; letter-spacing: .4rem; }

/* Crew directory + messaging */
.dirlist { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.dirrow {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: rgba(23,46,87,.05); border: 1px solid rgba(23,46,87,.12);
  border-radius: 12px; padding: .7rem .85rem;
}
.dirinfo { display: flex; flex-direction: column; min-width: 0; }
.dirinfo .muted { font-size: .85rem; }
.dirbtns { display: flex; gap: .4rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.convrow {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: rgba(23,46,87,.05); border: 1px solid rgba(23,46,87,.12);
  border-radius: 12px; padding: .7rem .85rem; text-decoration: none; color: inherit;
}
.convrow .dirinfo { flex: 1; }
.msglist { display: flex; flex-direction: column; gap: .5rem; margin: .75rem 0; max-height: 55vh; overflow-y: auto; }
.msg { max-width: 85%; padding: .55rem .8rem; border-radius: 14px; }
.msg.mine { align-self: flex-end; background: var(--green); color: #0f1e3a; }
.msg.theirs { align-self: flex-start; background: rgba(23,46,87,.08); }
.msgbody { white-space: pre-wrap; word-break: break-word; }
.msgtime { font-size: .7rem; opacity: .65; margin-top: .2rem; }
.msgform { display: flex; gap: .5rem; }
.msgform input { flex: 1; }

/* Channel message attachments. */
.msgatts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.msgatt-img { max-width: 190px; max-height: 150px; border-radius: 10px; object-fit: cover; display: block; }
.msgatt-file { display: inline-flex; align-items: center; gap: .4rem; background: rgba(23,46,87,.08); border-radius: 10px; padding: .35rem .6rem; font-size: .8rem; color: inherit; text-decoration: none; max-width: 100%; }
.msghome .msg.mine .msgatt-file { background: rgba(255,255,255,.45); }
.msgatt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.msgatt-size { opacity: .65; font-size: .72rem; flex: 0 0 auto; }
.attach-btn { flex: 0 0 auto; width: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: #13244a; color: #fff; font-size: 1.2rem; cursor: pointer; }
.attach-menu { display: flex; gap: .5rem; margin-top: .4rem; }
.attach-menu[hidden] { display: none; }
.attach-menu button { flex: 1; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: #13244a; color: #fff; padding: .55rem .5rem; font-size: .85rem; cursor: pointer; }
.attach-preview { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
.attach-preview[hidden] { display: none; }
.attach-chip { display: inline-flex; align-items: center; gap: .35rem; background: #13244a; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: .25rem .45rem; font-size: .75rem; color: #fff; max-width: 100%; }
.attach-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.attach-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.attach-remove { border: 0; background: transparent; color: #9fb0cc; font-size: 1rem; line-height: 1; cursor: pointer; padding: .1rem .25rem; }

/* ---- Schedule features: availability, check-in, assignments, time clock ---- */
.cal-nav { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:.8rem 0; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem; }
.cal-head { text-align:center; font-weight:600; color:#6b7280; margin-bottom:.25rem; }
.day-form { margin:0; }
button.day { width:100%; aspect-ratio:1; border:1px solid #d9dee7; border-radius:.5rem; background:#fff; font-size:1rem; cursor:pointer; color:inherit; }
button.day:active { transform:scale(.96); }
button.day.off { background:#fde8e8; border-color:#e08a8a; color:#a33; font-weight:700; }
button.day.today { box-shadow:inset 0 0 0 2px #172e57; }
.day.blank { min-height:2.4rem; }
.cal-legend { display:flex; align-items:center; gap:.4rem; margin-top:.6rem; }
.swatch { display:inline-block; width:1rem; height:1rem; border-radius:.25rem; }
.swatch.off { background:#fde8e8; border:1px solid #e08a8a; }
.avail-note { display:block; margin-bottom:.5rem; }
.avail-day { border-top:1px solid #eee; padding:.5rem 0; }
.avail-date { font-weight:600; }
.avail-list { margin:.25rem 0 .5rem 1.2rem; }
.btn.big { display:block; width:100%; padding:1.1rem; font-size:1.25rem; text-align:center; }
.inline-form { display:flex; gap:.5rem; align-items:flex-end; flex-wrap:wrap; margin-bottom:.8rem; }
.nowrap { white-space:nowrap; }

/* ---- SiteOps: checklists + shift reports ---- */
.checkitem { border:1px solid #d9dee7; border-radius:.6rem; padding:.7rem .8rem; margin:.6rem 0; background:#fff; }
.checkitem.photoreq { border-left:4px solid #172e57; }
.checkitem-box { display:flex; align-items:flex-start; gap:.7rem; cursor:pointer; font-weight:600; }
.checkitem-box input[type=checkbox] { width:1.6rem; height:1.6rem; margin-top:.1rem; flex-shrink:0; }
.checkitem-label { flex:1; }
.checkitem-photo { display:block; margin-top:.6rem; font-weight:600; }
.checkitem-row { display:flex; align-items:center; justify-content:space-between; gap:.8rem; border:1px solid #d9dee7; border-radius:.6rem; padding:.8rem; margin:.6rem 0; background:#fff; }
.subblock { border-top:1px solid #e5e7eb; padding:.8rem 0; }
.subhead { display:flex; flex-wrap:wrap; gap:.4rem .8rem; align-items:baseline; margin-bottom:.4rem; }
.inlineform { margin:.6rem 0; }
.photofile { margin:.3rem 0; }

/* teamops */
.rowform { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.rowform input[type=text], .rowform input[type=number] { width: 9rem; }
.te-item { border-top: 1px solid #e3e8f2; padding: 1rem 0; }
.te-item:first-of-type { border-top: none; padding-top: 0; }
.checkline { display: flex; align-items: center; gap: .5rem; font-weight: 600; }

/* Onboarding pages */
.onboarding .progress { margin: .5rem 0 1.1rem; }

/* Schedule pages */
.sched-week { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 900px) {
  .sched-week { grid-template-columns: repeat(7, 1fr); }
}
.sched-day { margin: 0; }
.sched-day h3 { margin-top: 0; }
.sched-today { border-left: 4px solid #36cb4c; }
.sched-shift {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: .5rem; padding: .55rem 0; border-top: 1px solid #e6e6e6;
}
.sched-shift:first-of-type { border-top: none; padding-top: .25rem; }
.sched-time { color: #172e57; font-weight: 600; font-size: .95rem; }
.btnrow { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }

/* Customers + estimates */
.grid3 { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: .6rem; align-items: end; margin-bottom: .6rem; }
@media (max-width: 640px) { .grid3 { grid-template-columns: 1fr; } }
.itemrow { border: 1px solid var(--line); border-radius: .5rem; padding: .6rem; }
.printhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
@media print {
  .noprint, .topbar, #menupanel, .flash { display: none !important; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  body { background: #fff; }
}

/* Bottom tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; background: #0d1a33;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: .55rem .25rem .5rem; color: #aebad4; text-decoration: none;
  font-size: .7rem; font-weight: 600;
}
.tabbar a svg { width: 24px; height: 24px; }
.tabbar a.active { color: var(--green); }
body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

/* Integrations hub */
.intgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-top: 1rem; }
.intcard { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.intlogo { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: #fff; }
.intname { font-weight: 800; font-size: 1.05rem; color: var(--dmc-blue); }
.intstatus { display: inline-block; padding: .25rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.st-not_connected { background: #e8edf5; color: #5a6b8c; }
.st-configured { background: var(--gold); color: #3a2c05; }
.st-coming_soon { background: #efe9f7; color: #6a5b8f; }
.st-manual { background: #e8edf5; color: #5a6b8c; }
.st-live { background: var(--green); color: #0f1e3a; }
.intnote { margin: .25rem 0; }
.intaction { margin-top: auto; padding-top: .5rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 640px) { .intgrid { grid-template-columns: 1fr; } }

/* Email campaigns */
.email-frame {
  border: 1px solid #d9dee7; border-radius: 12px; background: #fff;
  overflow: hidden; max-width: 660px; margin: 0 auto;
}
.email-frame .email-subject {
  background: var(--dmc-blue); color: #fff; padding: .8rem 1rem;
  font-weight: 800; font-size: 1.05rem;
}
.email-frame .email-body { padding: 1rem; overflow-wrap: break-word; }
.email-frame .email-body img { max-width: 100%; height: auto; }
.btn.approve {
  display: block; width: 100%; padding: 1.15rem; font-size: 1.3rem;
  background: var(--green); color: #0f1e3a; border-radius: 14px;
  min-height: 64px;
}
.btn.approve:hover { background: #2db542; color: #0f1e3a; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.chip {
  background: #eef3fc; border: 1px solid #d4def2; color: var(--dmc-blue);
  border-radius: 999px; padding: .45rem .9rem; font-size: .85rem;
  font-weight: 600; cursor: pointer; font-family: inherit;
}
.chip:hover { background: var(--dmc-blue); color: #fff; }
.campaign-preview {
  border: 1px dashed #c8d1e0; border-radius: 10px; padding: .8rem;
  background: #fafbfe; min-height: 120px; margin-top: .5rem;
  overflow-wrap: break-word;
}
.campaign-preview img { max-width: 100%; height: auto; }
.campaign-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: .8rem 0; }
.campaign-stat .num { font-size: 1.5rem; font-weight: 800; color: var(--dmc-blue); }
.campaign-stat .lbl { font-size: .8rem; color: var(--muted); }
.job-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .5rem 0; }
.job-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .5rem; }
.job-form { margin-top: .75rem; }
.job-label { display: block; font-weight: 600; margin-bottom: .25rem; }
.job-notes { margin-top: .75rem; }
.job-note { border-top: 1px solid #e5e7eb; padding: .5rem 0; }
.job-note-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }

/* Schedule redesign: Housecall Pro style day/list views + filter panel */
.sched-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .6rem; }
.sched-title { margin: 0; font-size: 1.35rem; }
.sched-headbtns { display: flex; gap: .4rem; align-items: center; }
.viewtoggle { display: flex; background: #e6ebf3; border-radius: 999px; padding: 3px; margin-bottom: .7rem; }
.viewtoggle button { flex: 1; border: 0; background: transparent; border-radius: 999px;
  padding: .55rem; font-size: .95rem; font-weight: 700; color: var(--muted); cursor: pointer; font-family: inherit; }
.viewtoggle button.on { background: #fff; color: var(--dmc-blue); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.datestrip { display: flex; gap: .15rem; padding-bottom: .4rem; margin-bottom: .3rem; }
.dcell { flex: 1 1 0; text-align: center; text-decoration: none; color: var(--text);
  border-radius: 12px; padding: .35rem 0 .25rem; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.dcell .dnum { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700; line-height: 1; border-radius: 50%; }
.dcell.sel .dnum { background: var(--dmc-blue); color: #fff; }
.dcell .dow { font-size: .68rem; color: var(--muted); }
.dcell .dnum { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.dcell .ddot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.dcell .ddot.on { background: var(--dmc-blue-light); }
.dcell.sel .ddot.on { background: var(--gold); }
.daylabel { margin: .4rem 0 .6rem; font-size: 1.05rem; color: var(--dmc-blue); }
.daynav { display: flex; align-items: center; gap: .4rem; margin: .3rem 0 .6rem; }
.daynav .daylabel { margin: 0; flex: 1; text-align: center; }
.dayarrow { flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  background: #e6ebf3; color: var(--dmc-blue); border-radius: 12px; text-decoration: none;
  font-size: 1.6rem; line-height: 1; }
.dayarrow:active { background: #d5dcea; }
.untimed { margin-bottom: .6rem; }
.untimed-label { font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: .3rem; }
.ublock { display: flex; gap: .5rem; align-items: baseline; background: var(--card);
  border: 1px solid #e5e7eb; border-left: 4px solid var(--dmc-blue); border-radius: 10px;
  padding: .5rem .7rem; margin-bottom: .4rem; text-decoration: none; color: var(--text); }
.daygrid { display: flex; background: var(--card); border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden;
  transform: translateZ(0); /* own compositor layer: page scroll moves the layer instead of repainting the grid */ }
.hourlabels { flex: 0 0 34px; position: relative; color: var(--muted); font-size: .68rem; }
.hourlabel { position: absolute; left: 0; right: 4px; text-align: right; transform: translateY(-50%); }
.gridbody { flex: 1; position: relative; }
.gridline { position: absolute; left: 0; right: 0; border-top: 1px solid #eef1f6; }
.jobblock { position: absolute; border-radius: 10px; color: #fff; text-decoration: none;
  padding: .35rem .45rem; overflow: hidden; display: flex; flex-direction: column; gap: 1px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.jobblock .jb-site { font-weight: 700; font-size: .82rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jobblock .jb-crew { font-size: .72rem; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jobblock .jb-addr { font-size: .72rem; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jobblock .jb-svc { font-size: .72rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Current-time line on the day grid (Housecall Pro style): red rule with a
   dot at the gutter edge, drawn above blocks, never intercepting taps. */
.nowline { position: absolute; left: 0; right: 0; border-top: 2px solid #e5484d;
  z-index: 3; pointer-events: none; }
.nowline .nowdot { position: absolute; left: -4px; top: -6px; width: 10px; height: 10px;
  border-radius: 50%; background: #e5484d; }
/* Day strip stays pinned like Housecall Pro while the timeline scrolls
   beneath it; the solid background keeps scrolling content from showing
   through. */
.datestrip { position: -webkit-sticky; position: sticky; top: 0; z-index: 5;
  background: var(--bg); padding-top: .3rem; }
.jobrow { display: flex; gap: .7rem; background: var(--card); border: 1px solid #e5e7eb;
  border-radius: 14px; padding: .8rem; margin-bottom: .6rem; text-decoration: none; color: var(--text);
  content-visibility: auto; contain-intrinsic-size: auto 110px; /* skip rendering off-screen rows while scrolling */ }
.jobrow-time { flex: 0 0 64px; }
.jobrow-time .jt { font-weight: 700; font-size: .95rem; }
.jobrow-time .jdur { font-size: .8rem; }
.jobrow-main { flex: 1; border-left: 2px solid #e5e7eb; padding-left: .7rem; min-width: 0; }
.jsite { font-weight: 800; font-size: 1.02rem; }
.jaddr { font-size: .85rem; margin-top: .1rem; }
.jsvc { font-size: .82rem; color: var(--muted); margin-top: .1rem; }
.jrole { color: var(--text); }
.jwin { font-size: .82rem; margin-top: .1rem; }
.jcrew { display: flex; align-items: center; gap: .3rem; margin-top: .4rem; flex-wrap: wrap; }
.avatar { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: .68rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; margin-right: -8px; border: 2px solid #fff; }
.jcrew .avatar:last-of-type { margin-right: 2px; }
/* Filter slide-over */
.filterpanel { position: fixed; inset: 0; z-index: 80; background: rgba(15,30,58,.45); }
.filterpanel[hidden] { display: none; }
.fpsheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background: #fff;
  overflow-y: auto; padding: 1rem 1.1rem 2rem; box-shadow: -6px 0 24px rgba(0,0,0,.25); }
.fphead { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; font-size: 1.1rem; }
.fphead button { border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--muted); }
.fpsec { color: var(--muted); font-size: .85rem; margin: .8rem 0 .3rem; }
.fprow { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; font-size: 1rem; cursor: pointer; }
.fprow input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--dmc-blue); }
.fprow .dot { width: 18px; height: 18px; border-radius: 4px; flex: 0 0 auto; }
.fptag { margin-top: .5rem; }
.fptagrow { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--dmc-blue);
  padding: .35rem 0; cursor: pointer; }
.fptagrow input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--dmc-blue); }
.tagpill { font-size: .68rem; background: #eef1f6; color: var(--dmc-blue); border-radius: 999px;
  padding: .1rem .5rem; font-weight: 700; }
/* Schedule drawer: left slide-over with view selector + crew calendars */
.iconbtn { border: 0; background: none; color: var(--dmc-blue); font-size: 1.5rem; line-height: 1;
  cursor: pointer; padding: .35rem .45rem; border-radius: 10px; }
.iconbtn:active { background: #e6ebf3; }
.drawer { position: fixed; inset: 0; z-index: 90; background: rgba(15,30,58,.45); }
.drawer[hidden] { display: none; }
.drawersheet { position: absolute; top: 0; left: 0; bottom: 0; width: min(340px, 88vw);
  background: #fff; overflow-y: auto; padding: .6rem 1rem 2rem;
  box-shadow: 6px 0 24px rgba(0,0,0,.25); animation: drawer-in .22s ease-out; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.dviewrow { display: flex; align-items: center; gap: .75rem; width: 100%; border: 0; background: none;
  padding: .7rem .6rem; font-size: 1rem; color: var(--text); border-radius: 10px; cursor: pointer;
  font-family: inherit; text-align: left; }
.dviewrow svg { flex: 0 0 auto; width: 26px; height: 26px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dviewrow.sel { background: #e8effe; color: var(--dmc-blue); font-weight: 700; }
.dviewrow.sel svg { stroke: var(--dmc-blue); }
.dsec { color: var(--muted); font-size: .85rem; margin: .9rem .2rem .3rem; }
.drow { display: flex; align-items: center; gap: .6rem; padding: .5rem .2rem; font-size: 1rem;
  cursor: pointer; }
.drow input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; }
/* Day timeline view: single-column chronological job cards, color-coded */
.daytl { display: flex; flex-direction: column; gap: .6rem; }
.tlblock { display: block; border-radius: 12px; color: #fff; text-decoration: none;
  padding: .65rem .8rem; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  content-visibility: auto; contain-intrinsic-size: auto 96px; }
.tl-time { font-size: .75rem; font-weight: 700; opacity: .92; }
.tl-site { font-weight: 800; font-size: 1rem; line-height: 1.3; margin-top: .1rem; }
.tl-addr { font-size: .82rem; opacity: .94; margin-top: .15rem; line-height: 1.3; }
.tl-crew { font-size: .82rem; opacity: .94; margin-top: .15rem; }
.tl-svc { font-size: .78rem; opacity: .88; margin-top: .15rem; }
/* ---- Buttery scrolling (mobile): native-feel scroll performance. ---- */
/* Kill tap delay / double-tap zoom interference; panning and pinch still native. */
body { touch-action: manipulation; }
/* Schedule day view: vertical scroll takes the browser fast path immediately;
   horizontal swipes still reach the JS day-switch handler. Taps unaffected. */
#dayview { touch-action: pan-y; }
/* Nested scrollers: momentum scrolling, and no scroll chaining into the page
   when the sheet/list hits its end (feels native, no rubber-band bleed). */
.fpsheet, .sheet, .menupanel, .drawersheet, #crewmodal-list, .custac-drop, .msglist {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Repeated schedule blocks: skip rendering off-screen cards while scrolling.
   `auto` keeps the last rendered size so the scrollbar does not jump. */
.sched-shift, .ublock, .site-card, .crew-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 96px;
}
/* Schedule day/list timeline cards (Perf P4): same off-screen rendering
   skip as above; `auto` keeps the last rendered size so the scrollbar
   does not jump. */
.tl-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 150px;
}
/* Back-navigation scroll restore: the shell adds .dmc-measure-all to
   <main> for a single forced layout pass before applying the saved
   scroll position, so card heights are real instead of intrinsic-size
   estimates. contain-intrinsic-size:auto keeps the measured sizes for
   those elements once the class is removed, so nothing shifts after. */
.dmc-measure-all .tl-card { content-visibility: visible; }
/* Add sheet: bottom sheet for New job / New estimate */
.sheet-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(15,30,58,.45);
  display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop[hidden] { display: none; }
/* Housecall-style action menu: + opens "Create new" with Job / Estimate. */
.actionwrap { width: 100%; max-width: 560px; padding: 0 .6rem calc(.6rem + env(safe-area-inset-bottom)); }
.actionmenu { background: #fff; border-radius: 16px; overflow: hidden; margin-bottom: .6rem; }
.actionhead { text-align: center; color: #8e8e93; font-size: .85rem; padding: .9rem 1rem; border-bottom: 1px solid #e5e5ea; }
.actionitem { display: block; width: 100%; border: 0; background: #fff; color: #0a84ff;
  font-size: 1.15rem; padding: 1rem; border-bottom: 1px solid #e5e5ea; cursor: pointer; }
.actionitem:last-child { border-bottom: 0; }
.actionitem:active { background: #f2f2f7; }
.actioncancel { display: block; width: 100%; border: 0; background: #fff; color: #0a84ff;
  font-size: 1.15rem; font-weight: 600; padding: 1rem; border-radius: 16px; cursor: pointer; }
.actioncancel:active { background: #f2f2f7; }
.sheet { background: #fff; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  border-radius: 18px 18px 0 0; padding: 1rem 1.1rem 2rem; box-shadow: 0 -6px 24px rgba(0,0,0,.25); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.sheet-head .x { border: 0; background: none; font-size: 1.3rem; cursor: pointer; color: var(--muted); padding: .5rem; }
.sheet-title { margin: .25rem 0 .75rem; color: var(--dmc-blue); }
.seg { display: flex; background: #eef1f6; border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; border-radius: 999px; padding: .55rem 1.1rem;
  font-size: 1rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.seg button.on { background: #fff; color: var(--dmc-blue); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
/* On-site check-in: tappable site cards from the employee's schedule. */
.site-pick { border: 0; padding: 0; margin: 0 0 1rem; }
.site-pick legend { font-weight: 700; font-size: 1.05rem; color: var(--dmc-blue); padding: 0; margin-bottom: .25rem; }
.site-card { display: flex; align-items: flex-start; gap: .8rem; width: 100%;
  border: 2px solid #d9dee7; border-radius: 14px; padding: .9rem 1rem; margin: .6rem 0;
  cursor: pointer; min-height: 64px; background: #fff; }
.site-card input[type="radio"] { width: 26px; height: 26px; margin-top: .2rem;
  accent-color: var(--green); flex: 0 0 auto; }
.site-card:has(input:checked) { border-color: var(--green); background: #f0fdf3; }
.site-card-body { display: flex; flex-direction: column; gap: .15rem; }
button.site-card { font: inherit; text-align: left; color: inherit; }
button.site-card:active { border-color: var(--green); background: #f0fdf3; }
button.site-card:disabled { opacity: .6; }
/* Equipment barcode scanner viewport */
#reader { width: 100%; min-height: 240px; background: #111; border-radius: 12px;
  overflow: hidden; }
#reader video { width: 100% !important; border-radius: 12px; }
.site-card-title { color: var(--dmc-blue); font-size: 1rem; }
.site-card-name { font-weight: 700; font-size: 1.05rem; }
.site-card-addr, .site-card-time { color: var(--muted); font-size: .85rem; }
.site-manual { border-top: 1px solid #e7ebf2; margin-top: 1rem; padding-top: .75rem; }
.tier-card.fold .foldhead { cursor: pointer; user-select: none; -webkit-user-select: none; display: flex; align-items: center; gap: .6rem; width: 100%; }
.tier-card.fold .foldhead .chev { margin-left: auto; font-size: 1.6rem; line-height: 1; transition: transform .15s; }
.tier-card.fold .folddesc { display: none; }
.tier-card.fold.open .folddesc { display: block; }
.tier-card.fold.open .foldhead .chev { transform: rotate(180deg); }
/* Supply catalog picker */
.catgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: .5rem 0 1rem; }
.catbtn { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1.1rem .5rem; font-size: 1.15rem; font-weight: 700; border-radius: .9rem; border: 2px solid var(--dmc-blue); background: #fff; color: var(--dmc-blue); cursor: pointer; }
.catbtn.active { background: var(--dmc-blue); color: #fff; }
.caticon { font-size: 1.6rem; }
.catpanel .catfold { margin: .5rem 0; }
.catfoldhead { display: flex; align-items: center; cursor: pointer; user-select: none; -webkit-user-select: none; padding: .35rem 0; }
.catfoldhead .chev { margin-left: auto; font-size: 1.8rem; line-height: 1; transition: transform .15s; }
.catfold .catfolddesc { display: none; }
.catfold.open .catfolddesc { display: block; }
.catfold.open .catfoldhead .chev { transform: rotate(180deg); }
.itemrow { display: block; width: 100%; text-align: left; padding: .85rem .6rem; font-size: 1.05rem; background: #fff; border: 0; border-top: 1px solid #e5e7eb; cursor: pointer; color: inherit; }
.itemrow:first-child { border-top: 0; }
.itemrow:active { background: #f1f5f9; }
.picked { display: flex; align-items: center; gap: .6rem; background: #eef7ee; border: 1px solid #36cb4c; border-radius: .75rem; padding: .7rem .9rem; margin: .75rem 0; }
.picked[hidden] { display: none; }
.linklike { background: none; border: 0; color: var(--dmc-blue); text-decoration: underline; cursor: pointer; font-size: 1rem; padding: .5rem 0; }
.qtygrid { display: flex; flex-wrap: wrap; gap: .5rem; }
.qtypill input { position: absolute; opacity: 0; pointer-events: none; }
.qtypill span { display: inline-block; padding: .7rem .9rem; font-size: 1.05rem; font-weight: 600; border: 2px solid #cbd5e1; border-radius: 999px; background: #fff; cursor: pointer; }
.qtypill input:checked + span { border-color: var(--dmc-blue); background: #e8eefc; color: var(--dmc-blue); }
.locgrid { display: flex; flex-wrap: wrap; gap: .5rem; }
.locpill input { position: absolute; opacity: 0; pointer-events: none; }
.locpill span { display: inline-block; padding: .7rem 1rem; font-size: 1.05rem; font-weight: 600; border: 2px solid #cbd5e1; border-radius: 999px; background: #fff; cursor: pointer; }
.locpill input:checked + span { border-color: var(--dmc-green); background: #eefbee; color: #14532d; }
.req { color: #dc2626; }
/* Big, obvious file-picker buttons everywhere (issue reports, job photos, shift reports, admin uploads). */
input[type="file"] { font-size: 1.05rem; padding: .6rem 0; max-width: 100%; }
input[type="file"]::file-selector-button {
  font-size: 1.15rem; font-weight: 700; padding: 1rem 1.6rem;
  border-radius: .7rem; border: none; background: var(--dmc-green); color: #fff;
  margin-right: .8rem; cursor: pointer; -webkit-appearance: none; appearance: none;
}
input[type="file"]::-webkit-file-upload-button {
  font-size: 1.15rem; font-weight: 700; padding: 1rem 1.6rem;
  border-radius: .7rem; border: none; background: var(--dmc-green); color: #fff;
  margin-right: .8rem; cursor: pointer;
}
/* Job detail: property panel top-left beside the job summary. */
.job-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 640px) { .job-top-grid { grid-template-columns: 1fr; } }
.prop-panel { background: rgba(23,46,87,.04); border: 1px solid rgba(23,46,87,.12); border-radius: .8rem; padding: .9rem 1rem; }
.prop-panel h3 { margin-top: 0; }
.prop-facts { margin: .5rem 0; }
.prop-facts div { display: flex; gap: .6rem; padding: .25rem 0; }
.prop-facts dt { font-weight: 700; min-width: 6.5rem; color: var(--dmc-blue); }
.prop-facts dd { margin: 0; }

/* Multi-crew picker (Add Job form): big tap targets, mobile-first. */
.crew-picker { border: none; padding: 0; margin: 0 0 1rem; }
.crew-picker legend { font-weight: 700; margin-bottom: .4rem; padding: 0; }
.crew-list { display: grid; gap: .4rem; }
.crew-row { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem;
  border: 1px solid #d7dce5; border-radius: .7rem; cursor: pointer;
  font-size: 1.05rem; min-height: 3.2rem; }
.crew-row input[type="checkbox"] { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
.crew-row:has(input:checked) { border-color: var(--dmc-green); background: #f2fbf3; }

/* Profile header with avatar. */
.profile-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.profile-head h2 { margin: 0 0 .5rem; }

/* Team table cell with avatar. */
.teamcell { display: inline-flex; align-items: center; gap: .6rem; }

/* Avatars rendered by the avatar() helper keep inline sizing; this aligns them in rows. */
.jcrew .avatar, .dirrow .avatar, .convrow .avatar, .job-note-head .avatar, .teamcell .avatar {
  margin-right: .2rem;
}

/* Tappable tier card on the dashboard: looks identical, opens tier benefits. */
.tier-card-link { display: block; text-decoration: none; color: inherit; }
.tier-card-link .card { cursor: pointer; }

/* AI call summary block on lead call history. */
.ai-summary { margin-top: .6rem; padding: .7rem .8rem; border: 1px solid #d7e2f5; border-radius: .6rem; background: #f4f7fd; }
.ai-summary p { margin: .5rem 0; white-space: pre-line; }
.ai-summary details { margin-top: .4rem; }
.ai-summary summary { cursor: pointer; color: var(--dmc-blue); font-weight: 600; }

/* Customer autocomplete (schedule Add Job + estimate sheets). */
.custac { position: relative; margin-bottom: 1rem; }
.custac input[type="text"] { width: 100%; padding-right: 2.4rem; box-sizing: border-box; }
.custac [data-custac-clear] { position: absolute; right: .4rem; top: .55rem; border: none; background: none;
  font-size: 1.1rem; line-height: 1; cursor: pointer; color: #5a6b8c; padding: .3rem; }
.custac-drop { position: absolute; left: 0; right: 0; top: 100%; z-index: 90; background: #fff;
  border: 1px solid #d7e2f5; border-radius: .6rem; margin-top: .25rem; max-height: 17rem;
  overflow-y: auto; box-shadow: 0 10px 28px rgba(23,46,87,.18); }
.custac-row { display: block; width: 100%; text-align: left; padding: .75rem .85rem;
  border: none; border-bottom: 1px solid #eef2f9; background: #fff; cursor: pointer; font-size: 1rem; }
.custac-row.hi, .custac-row:hover { background: #f4f7fd; }
.custac-name { display: block; font-weight: 600; color: var(--dmc-blue); }
.custac-sub { display: block; font-size: .85rem; color: #5a6b8c; margin-top: .15rem; }
.custac-empty { padding: .75rem .85rem; color: #5a6b8c; }
.custac-new { color: var(--dmc-blue); font-weight: 700; text-decoration: none; }

/* Crew picker: button + chips in the sheet, full modal for selection. */
.crew-field { margin: 0 0 1rem; }
.crew-field .flabel { display: block; font-weight: 600; margin-bottom: .4rem; }
.crew-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; align-items: center; }
.crew-chip { display: inline-flex; }
.crew-sheet { max-height: 88vh; display: flex; flex-direction: column; }
#crewsearch { margin-bottom: .6rem; }
#crewmodal-list { overflow-y: auto; flex: 1 1 auto; min-height: 12rem; }
.crew-actions { display: flex; gap: .6rem; margin-top: .9rem; }
.crew-actions .btn { flex: 1; padding: .9rem; }

/* Quiet icon button (e.g. edit pencil next to a card heading). */
.with-edit { display: flex; align-items: center; gap: .4rem; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: .6rem; color: var(--dmc-blue);
  text-decoration: none; flex: 0 0 auto; }
.iconbtn:hover { background: #eef2f9; }
.iconbtn:active { background: #e2e9f7; }
.iconbtn:disabled { opacity: .45; cursor: default; }
.iconbtn svg { display: block; }

/* Quick-create FAB (dashboard hero) */
.hero-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fab-plus {
  width: 56px; height: 56px; border-radius: 50%; border: none; flex: 0 0 auto;
  background: var(--gold); color: #0f1e3a; font-size: 2rem; line-height: 1;
  font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25);
  display: inline-flex; align-items: center; justify-content: center;
}
.fab-plus:active { transform: scale(.94); }

/* Dashboard customize FAB (DMC Blue, every employee) */
.dash-plus {
  width: 56px; height: 56px; border-radius: 50%; border: none; flex: 0 0 auto;
  background: var(--dmc-blue); color: #fff; font-size: 2rem; line-height: 1;
  font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25);
  display: inline-flex; align-items: center; justify-content: center;
}
.dash-plus:active { transform: scale(.94); }
.hero-actions { display: flex; gap: .6rem; align-items: center; }

/* Custom dashboard widgets */
.dash-widget-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dash-widget-head h3 { margin: 0; }
.dash-widget-actions { display: flex; gap: .3rem; align-items: center; }
.dash-widget-actions form { margin: 0; }
.iconbtn.mini { width: 32px; height: 32px; border: 1px solid #e2e9f7; background: #fff; cursor: pointer; font-size: 1rem; }
.iconbtn.mini.danger { color: #b3261e; }
.widget-pick-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid #eef2f9; }
.widget-pick-row:last-child { border-bottom: none; }

/* New-message picker sheet (Messages card) */
.msgplus {
  width: 52px; height: 52px; border-radius: 50%; border: none; flex: 0 0 auto;
  background: var(--dmc-blue); color: #fff; font-size: 1.75rem; line-height: 1;
  font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.msgplus:active { transform: scale(.94); }
.msgcard-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.msgcard-head h2 { margin: 0; }

/* Customers page: create/import actions */
.cust-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.plusbtn {
  width: 52px; height: 52px; border-radius: 50%; border: none; flex: 0 0 auto;
  background: var(--dmc-blue); color: #fff; font-size: 1.75rem; line-height: 1;
  font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.plusbtn:active { transform: scale(.94); }

/* Supply quantity dropdown */
.qtyselect { font-size: 1.05rem; }

/* Equipment barcode labels */
.labelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.eqlabel { border: 1px solid #dfe5ef; border-radius: .5rem; padding: .75rem; text-align: center; background: #fff; }
.eqlabel .labelname { font-weight: 700; margin-top: .25rem; }
.eqlabel .labeltag { color: var(--muted); font-size: .85rem; }
@media print {
  .topbar, .menupanel, .menubackdrop, .no-print { display: none !important; }
  body { background: #fff; }
  .labelgrid { grid-template-columns: repeat(3, 1fr); gap: .2in; }
  .eqlabel { border: 1px dashed #999; page-break-inside: avoid; }
}

/* Item 18: crew directory picker + contact card */
.dir-picker { display: block; margin: .8rem 0 .2rem; font-weight: 600; color: var(--dmc-blue); }
.dir-picker select {
  margin-top: .35rem; min-height: 48px; font-size: 1.05rem;
  border: 2px solid var(--dmc-blue); border-radius: 12px;
}
.dircard {
  border: 1px solid #dbe3f0; border-radius: 14px; background: #fff;
  padding: 1rem; margin-top: .9rem;
}
.dircard-head { display: flex; gap: .8rem; align-items: center; }
.dircard-name { font-size: 1.15rem; color: var(--dmc-blue); }
.dircard-role { color: #5a6b8c; font-size: .9rem; margin-top: .15rem; }
.dircard-row { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; flex-wrap: wrap; }
.dircard-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Item 23: admin "Preview as" banner. Prominent gold bar pinned to the top
   of every page while a preview is active; wraps cleanly on small screens. */
.previewbanner {
  position: sticky;
  top: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .55rem .9rem;
  background: var(--gold);
  color: #172e57;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.previewbanner .btn {
  background: #172e57;
  color: #fff;
  border: none;
  white-space: nowrap;
}

/* Item 24: "Get the app on your phone" onboarding step. DMC blue header
   band with the logo, QR beside the steps on wide screens, stacked and
   centered on phones. */
.appstep-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--dmc-blue);
  color: #fff;
  margin: -1rem -1rem 1rem -1rem;
  padding: .8rem 1rem;
  border-radius: .5rem .5rem 0 0;
}
.appstep-head img { height: 2.2rem; width: auto; }
.appstep-head h2 { margin: 0; font-size: 1.15rem; }
.appstep-body { display: flex; gap: 1.25rem; align-items: flex-start; }
.appstep-qr { width: 9rem; height: 9rem; flex: none; border: 1px solid #dfe5ef; border-radius: .4rem; background: #fff; padding: .3rem; }
.appstep-list { margin: 0; padding-left: 1.2rem; }
.appstep-list li { margin-bottom: .55rem; }
.appstep-list ul { margin-top: .3rem; padding-left: 1.1rem; }
.appstep-list ul li { margin-bottom: .25rem; }
@media (max-width: 560px) {
  .appstep-body { flex-direction: column; align-items: center; }
  .appstep-qr { width: 11rem; height: 11rem; }
}

/* SOP library */
.sops-search input[type="search"] { width: 100%; font-size: 1.1rem; padding: .8rem; }
.sops-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; align-items: center; }
.sops-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.pillbtn { display: inline-block; padding: .45rem .9rem; border: 2px solid #172e57; border-radius: 999px; color: #172e57; text-decoration: none; font-weight: 600; font-size: .95rem; }
.pillbtn.on { background: #172e57; color: #fff; }
a.sops-folder { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; margin-bottom: .8rem; }
a.sops-folder:active { background: #f0f4fa; }
.sops-folder-main { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.sops-folder-title { font-weight: 800; font-size: 1.4rem; color: #172e57; }
.sops-folder-sub { font-size: .9rem; }
.sops-cat { margin-bottom: .2rem; }
.sops-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.sops-item { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border: 1px solid #d8dee9; border-radius: .6rem; text-decoration: none; color: inherit; background: #fff; }
.sops-item:active { background: #f0f4fa; }
.sops-item-title { font-weight: 700; font-size: 1.05rem; flex: 1; }
.sops-tags { display: block; font-size: .8rem; color: #6b7280; }
.sops-go { font-size: 1.6rem; color: #172e57; line-height: 1; }
.sops-crumb a { text-decoration: none; font-weight: 600; }
.sop-detail h2 { font-size: 1.5rem; }
.sop-video { margin: 1rem 0 .5rem; }
.sop-video video { width: 100%; border-radius: 10px; background: #0e1c38; display: block; }
.sop-video-cap { margin-top: .35rem; font-size: .85rem; }
.sop-pdf-link { margin: .75rem 0 1rem; }
.sop-body { font-size: 1.08rem; line-height: 1.65; }
.sop-body .sop-h { margin: 1.2em 0 .4em; color: #172e57; }
.sop-body h2.sop-h { font-size: 1.35rem; }
.sop-body h3.sop-h { font-size: 1.2rem; }
.sop-body h4.sop-h { font-size: 1.1rem; }
.sop-body ul.sop-list, .sop-body ol.sop-list { margin: .5em 0 .5em 1.2em; }
.sop-body ul.sop-list li, .sop-body ol.sop-list li { margin-bottom: .45em; }
.sop-body ul.sop-checklist { list-style: none; margin: .5em 0; padding: 0; }
.sop-body li.sop-check { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem .2rem; border-bottom: 1px solid #eef1f6; }
.sop-box { flex: 0 0 auto; width: 1.3rem; height: 1.3rem; border: 2px solid #172e57; border-radius: .25rem; margin-top: .15rem; }
.sop-hr { border: 0; border-top: 1px solid #d8dee9; margin: 1.2em 0; }

/* Lead source row on the Add Job sheet: current source plus picker link. */
.lead-source-row { display: flex; align-items: center; gap: .5rem;
  margin: .4rem 0 .8rem; font-size: .95rem; }
.lead-source-row[hidden] { display: none; }
.lead-source-row .flabel { font-weight: 600; }
/* Job tags: small chips on schedule blocks and the job detail page. */
.jb-tags, .jtags, .ublock-tags { display:flex; flex-wrap:wrap; gap:.25rem; margin:.15rem 0; }
.job-tags { margin:.4rem 0; display:flex; flex-wrap:wrap; gap:.35rem; }
.job-tags .tagpill { font-size:.78rem; }

/* ---- SPA shell (dmc-shell.js): native-feeling tab/menu transitions ---- */
@keyframes dmc-page-in {
  from { opacity: 0.15; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
main.wrap.dmc-enter { animation: dmc-page-in 180ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  main.wrap.dmc-enter { animation: none; }
}
/* Subtle loading shimmer at the top of the content while a tab is fetched. */
main.wrap.dmc-loading { position: relative; }
main.wrap.dmc-loading::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #e2b959, #36cb4c);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: dmc-load-slide 0.9s linear infinite;
  z-index: 5;
}
@keyframes dmc-load-slide {
  from { background-position: -40% 0; }
  to { background-position: 140% 0; }
}

/* ---------------------------------------------------------------------------
 * Slack-style Messages home (dark DMC theme: DMC Blue #172e57 primary,
 * dark navy background, gold labels, green badges).
 * ------------------------------------------------------------------------- */
.msghome {
  margin: -1rem -1rem -4rem;
  padding: .9rem .9rem 6rem;
  background: #0b1730;
  color: #fff;
  min-height: 60vh;
}
/* Top shortcut cards: horizontal scroll like Slack mobile home. */
.msgcards {
  display: flex; gap: .7rem; overflow-x: auto;
  padding: .2rem .1rem .9rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.msgcards::-webkit-scrollbar { display: none; }
.msgcard {
  flex: 0 0 8.6rem;
  background: linear-gradient(160deg, #1b3568 0%, #14294f 100%);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: .9rem 2.6rem .9rem .85rem;
  color: #fff; text-decoration: none;
  display: flex; flex-direction: column; gap: .3rem;
  position: relative; overflow: hidden;
}
.msgcard::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
}
/* Torre 2026-10-07: mockup accent glows per shortcut card. */
.msgcard-dms::after { background: #36cb4c; box-shadow: 0 -2px 14px rgba(54,203,76,.8); }
.msgcard-davi { background: linear-gradient(160deg, #3b2a6e 0%, #241b4d 100%); }
.msgcard-davi::after { background: #a855f7; box-shadow: 0 -2px 14px rgba(168,85,247,.8); }
.msgcard-tasks::after { background: #3b82f6; box-shadow: 0 -2px 14px rgba(59,130,246,.8); }
.msgcard:active { background: #1e3a6b; }
.msgcard-ic { color: #e2b959; line-height: 0; }
.msgcard-ic.sm { color: #8b98b8; flex: 0 0 auto; }
.msgcard-t { font-weight: 800; font-size: 1.05rem; }
.msgcard-s { color: #9fb0cc; font-size: .85rem; }
.msgcard-chev {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; line-height: 1;
}
/* Sections: Unread DMs, Unreads, Channels. */
.msgsec { margin-top: 1.2rem; }
.msgsec-head {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  background: none; border: 0; color: #fff;
  padding: .45rem .2rem; font-size: 1rem; text-align: left;
}
button.msgsec-head { cursor: pointer; font: inherit; }
.msgsec-head h3 { margin: 0; font-size: 1.08rem; font-weight: 800; color: #fff; }
.msgsec-head.gold h3 { color: #e2b959; }
.msgsec-head .spacer { flex: 1; }
.msgsec-ic { color: #8b98b8; line-height: 0; }
.msgsec-toggle .collapse-chev { transition: transform .15s; color: #8b98b8; font-size: 1.2rem; }
.msgsec-toggle[aria-expanded="false"] .collapse-chev { transform: rotate(180deg); }
.msgrows { display: flex; flex-direction: column; }
/* Hidden must win over layout display rules (e.g. .msgrows flex), or the
   section collapse toggles (Channels, DMs, Files, ...) silently do nothing. */
[hidden] { display: none !important; }
.msgrow {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .2rem;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.07);
  color: #fff; text-decoration: none; background: none;
  width: 100%; font: inherit; text-align: left;
}
a.msgrow:active, button.msgrow:active { background: rgba(255,255,255,.05); }
button.msgrow { cursor: pointer; }
.msgrow .avatar { flex: 0 0 auto; }
.msgrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msgrow-main strong { font-size: 1rem; font-weight: 700; }
.msgrow-main small {
  color: #9fb0cc; font-size: .85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msgbadge {
  background: #36cb4c; color: #0f1e3a;
  font-weight: 800; font-size: .8rem;
  min-width: 1.5rem; height: 1.5rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .4rem; flex: 0 0 auto;
}
.msgtag {
  font-size: .68rem; background: rgba(226,185,89,.18); color: #e2b959;
  border-radius: 999px; padding: .1rem .5rem; font-weight: 700;
  vertical-align: middle;
}
.chev { color: #8b98b8; font-size: 1.35rem; line-height: 1; flex: 0 0 auto; }
.hash { color: #8b98b8; font-size: 1.35rem; font-weight: 700; width: 40px; text-align: center; flex: 0 0 auto; }
.msgempty { color: #9fb0cc; padding: .7rem .2rem; margin: 0; }
.msgplus {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: none; color: #fff; font-size: 1.3rem; line-height: 1;
  cursor: pointer; flex: 0 0 auto;
}
.msgadd .plus {
  width: 40px; text-align: center; color: #8b98b8;
  font-size: 1.5rem; font-weight: 400; flex: 0 0 auto;
}
.msgfab {
  position: fixed; right: 1.1rem;
  bottom: calc(84px + env(safe-area-inset-bottom));
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: #36cb4c; color: #0f1e3a;
  font-size: 1.9rem; line-height: 1; border: 0; z-index: 60;
  box-shadow: 0 4px 14px rgba(0,0,0,.45); cursor: pointer;
}
/* Channel thread view. */
.msgthread-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .4rem; }
.msgback { color: #fff; font-size: 2rem; text-decoration: none; line-height: 1; padding: 0 .2rem; }
.msgthread-title { flex: 1; min-width: 0; }
.msgthread-title h2 { margin: 0; font-size: 1.15rem; }
.msgthread-title h2 .hash { width: auto; }
.msgthread-title small { color: #9fb0cc; }
.msgsender { display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem; font-size: .8rem; color: #9fb0cc; }
.msgsender strong { color: #dfe6f2; }
.msghome .msglist { background: transparent; }
.msghome .msg.theirs { background: #172e57; color: #fff; }
.msghome .msgtime { color: #8b98b8; }
.msghome .msgform input {
  background: #13244a; border: 1px solid rgba(255,255,255,.2); color: #fff;
}
.msghome .msgform input::placeholder { color: #8b98b8; }
/* Dark sheets inside the messages home. */
.msghome-sheet .sheet { background: #13244a; color: #fff; }
.msghome-sheet .sheet-head { border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: .5rem; }
.msghome-sheet .sheet-head .x { color: #9fb0cc; }
.msghome-sheet .input {
  background: #0b1730; border: 1px solid rgba(255,255,255,.2); color: #fff;
}
.msghome-sheet .input::placeholder { color: #8b98b8; }
.msghome-sheet .muted, .msghome-sheet .small.muted { color: #9fb0cc; }
.msghome-sheet .flabel { color: #fff; font-weight: 600; display: block; margin-bottom: .3rem; }
.msghome-sheet .dirrow { border-color: rgba(255,255,255,.08); }
.msghome-sheet .dirinfo strong { color: #fff; }

/* ---------------- Messages sub-views (Home/DMs/Activity/More) ---------------- */
.msgsubnav {
  display: flex; gap: .35rem; padding: .5rem .6rem; margin: 0 0 .8rem;
  background: #101c33; border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px; position: sticky; top: 0; z-index: 20;
}
.msgsubnav-link {
  flex: 1; text-align: center; padding: .5rem .25rem; border-radius: 999px;
  color: #9fb0cc; text-decoration: none; font-weight: 600; font-size: .85rem;
}
/* Torre 2026-10-07: thin dividers between tabs per mockup. */
.msgsubnav-link + .msgsubnav-link { border-left: 1px solid rgba(255,255,255,.08); border-radius: 0; }
.msgsubnav-link + .msgsubnav-link.active { border-radius: 999px; border-left-color: transparent; }
.msgsubnav-link.active {
  background: #e2b959; color: #101c33;
}
.msgview-head {
  display: flex; align-items: center; gap: .6rem; padding: 0 .2rem .7rem;
}
.msgview-head h2 { margin: 0; font-size: 1.25rem; }

/* DMs avatar carousel */
.dmcarousel {
  display: flex; gap: .8rem; overflow-x: auto; padding: .2rem .2rem .8rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.dmcarousel::-webkit-scrollbar { display: none; }
.dmcar-item {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  text-decoration: none; color: inherit; min-width: 60px;
}
.dmcar-item span {
  font-size: .7rem; color: #9fb0cc; max-width: 64px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* Filter pills */
.msgpills { display: flex; gap: .45rem; padding: 0 .2rem .8rem; flex-wrap: wrap; }
.msgpill {
  padding: .4rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: #101c33; border: 1px solid rgba(255,255,255,.12);
  color: #9fb0cc; text-decoration: none;
}
.msgpill.active { background: #172e57; border-color: #e2b959; color: #fff; }

/* Channel icons: lock (private), sparkle (AI) */
.chanic { color: #9fb0cc; display: inline-flex; align-items: center; }
.chanic.gold { color: #e2b959; }

/* Slack-style channel list: clean light rows like the Slack reference. */
.slackchan-body { background: #fff; border-radius: 14px; overflow: hidden; }
.slackchan-body .msgrow { color: #1d1c1d; border-bottom: 1px solid #ececec; padding: .8rem 1rem; }
.slackchan-body .msgrow:last-child { border-bottom: 0; }
.slackchan-body a.msgrow:active, .slackchan-body button.msgrow:active { background: #f4f4f4; }
.slackchan-body .msgrow-main strong { font-weight: 500; font-size: 1.02rem; }
.slackchan-body .msgrow-main small { display: none; }
.slackchan-body .hash { color: #616061; font-weight: 500; }
.slackchan-body .chanic { color: #b5892e; }
.slackchan-body .chanic.gold { color: #b5892e; }
/* Torre 2026-10-07: mockup shows chevrons on channel rows. */
.slackchan-body .chev { display: inline; color: #a0a0a0; }
.slackchan-body .msgbadge { background: #1264a3; color: #fff; }
.slackchan-body .msgempty { color: #616061; padding: .9rem 1rem; }
.slackchan-body .msgadd .plus { color: #616061; }
.slackchan-body .msgadd .msgrow-main strong { color: #616061; font-weight: 500; }

/* Member count badge on group rows */
.membercount {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4rem; height: 1.4rem; padding: 0 .3rem; border-radius: 999px;
  background: rgba(255,255,255,.1); color: #c7d2e8; font-size: .72rem;
  font-weight: 700;
}

/* Relative timestamps in rows */
.msgtime { font-size: .72rem; color: #8b98b8; white-space: nowrap; }
.msgdot {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: #36cb4c; flex: none;
}
.msgtag.green { background: rgba(54,203,76,.18); color: #36cb4c; }

/* Empty states */
.msgempty-card {
  background: #101c33; border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 1.4rem 1rem; text-align: center;
  margin: .4rem 0 1rem;
}
.msgempty-card p { margin: .2rem 0; }

/* Add-channel sheet extras */
.chancheck {
  display: flex; align-items: center; gap: .5rem; color: #fff;
  font-size: .9rem; margin-bottom: .5rem; cursor: pointer;
}
.chancheck input { width: 1.05rem; height: 1.05rem; accent-color: #e2b959; }
.chanmember-list {
  max-height: 12rem; overflow-y: auto; display: flex; flex-direction: column;
  gap: .15rem; border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
  padding: .4rem;
}
.chanmember {
  display: flex; align-items: center; gap: .5rem; color: #fff;
  font-size: .88rem; padding: .3rem .2rem; cursor: pointer;
}
.chanmember input { width: 1rem; height: 1rem; accent-color: #e2b959; }

/* Files view */
.filefilters {
  display: flex; gap: .5rem; align-items: center; padding: 0 .2rem .8rem;
  flex-wrap: wrap;
}
.filefilters .flabel { color: #9fb0cc; font-size: .78rem; font-weight: 600; }
.filefilters .input { width: auto; flex: 1; min-width: 7rem; }
.fileic { color: #9fb0cc; display: inline-flex; align-items: center; }
.fileic.red { color: #e06c75; }
.fileic.blue { color: #6aa9ff; }

/* Assigned-to-you checklist */
.taskrow {
  display: flex; align-items: center; gap: .7rem; padding: .7rem .4rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.taskcheck {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: none;
  border: 2px solid #e2b959; background: transparent; color: #101c33;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer; padding: 0;
}
.taskrow.done .taskcheck { background: #36cb4c; border-color: #36cb4c; color: #fff; }
.taskrow.done .msgrow-main strong { text-decoration: line-through; color: #8b98b8; }
.taskcheck-inline { width: 1.3rem; height: 1.3rem; accent-color: #e2b959; flex: none; }

/* External connections */
.conn-dot {
  width: .8rem; height: .8rem; border-radius: 50%; background: #5a6a86; flex: none;
}
.conn-dot.on { background: #36cb4c; }

/* Group-new form */
.msgform-col { display: flex; flex-direction: column; }
.msgform-col .msgrow { cursor: pointer; }

/* Schedule Day/Week/Month view toggle + week/month grids */
.sched-headbtns { flex-wrap: wrap; }
.segtoggle { display: inline-flex; background: #e6ebf3; border-radius: 999px; padding: 3px; }
.segtoggle a { padding: .45rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 700;
  color: var(--muted); text-decoration: none; white-space: nowrap; }
.segtoggle a.on { background: #fff; color: var(--dmc-blue); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.weekgrid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(148px, 1fr);
  gap: .5rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x proximity; }
.weekcol { background: var(--card); border: 1px solid #e5e7eb; border-radius: 12px;
  padding: .45rem; min-height: 140px; scroll-snap-align: start; }
.weekhead { display: flex; align-items: baseline; gap: .35rem; text-decoration: none;
  color: var(--text); padding: .15rem .2rem .4rem; border-bottom: 1px solid #eef1f6; margin-bottom: .4rem; }
.weekhead .dow { font-size: .72rem; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.weekhead .dnum { font-size: 1rem; font-weight: 800; width: 30px; height: 30px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 50%; }
.weekhead.istoday .dnum { background: var(--dmc-blue); color: #fff; }
.weekhead.issel .dnum { outline: 2px solid var(--dmc-blue-light); }
.weekblocks { display: flex; flex-direction: column; gap: .35rem; }
.wblock { display: block; background: #f6f8fc; border: 1px solid #e5e7eb; border-left: 4px solid var(--dmc-blue);
  border-radius: 8px; padding: .4rem .5rem; text-decoration: none; color: var(--text); }
.wblock .wb-time { display: block; font-size: .72rem; font-weight: 800; color: var(--dmc-blue); }
.wblock .wb-site { display: block; font-size: .82rem; font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wblock .wb-crew { display: block; font-size: .72rem; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.wblock .wb-svc { display: block; font-size: .72rem; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.monthgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mdow { text-align: center; font-size: .7rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; padding: .25rem 0; }
.mcell { background: var(--card); border: 1px solid #e5e7eb; border-radius: 8px; min-height: 64px;
  padding: .3rem .35rem; text-decoration: none; color: var(--text); display: flex;
  flex-direction: column; gap: 1px; overflow: hidden; }
.mcell.dim { opacity: .38; }
.mcell.istoday .mdnum { background: var(--dmc-blue); color: #fff; }
.mcell.issel { outline: 2px solid var(--dmc-blue-light); }
.mdnum { font-size: .8rem; font-weight: 800; width: 24px; height: 24px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 50%; }
.mcount { align-self: flex-start; font-size: .68rem; font-weight: 800; color: #fff;
  background: var(--dmc-blue-light); border-radius: 999px; padding: .05rem .4rem; margin-top: .15rem; }
.mtitle { font-size: .62rem; line-height: 1.25; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* ---- Slack-style thread views (channels, DMs, groups) ---- */
.slackthread { background: #fff; color: #1d1c1d; border-radius: 16px;
  margin: -0.5rem -0.5rem 0; padding: 0 0 1rem;
  display: flex; flex-direction: column;
  /* Chat layout: the thread fills the space between the top bar and the
     tab bar. The message list scrolls inside it while the composer stays
     pinned at the bottom, like iMessage or Slack. position:sticky on the
     composer never worked here because it is the last child and has no
     room to stick into, so it scrolled away with the page.
     210px ~= topbar 62 + wrap top pad 16 + wrap bottom pad 64 + body
     tabbar clearance 62, plus safe-area. Kept slightly generous so the
     page itself never scrolls; a few px of slack just leaves a hair of
     whitespace above the tab bar. */
  height: calc(100vh - 210px - env(safe-area-inset-bottom));
  height: calc(100dvh - 210px - env(safe-area-inset-bottom));
  min-height: 280px; }
.st-topbar { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem;
  border-bottom: 1px solid #e8e8e8; position: sticky; top: 0; background: #fff;
  z-index: 5; border-radius: 16px 16px 0 0; flex: none; }
.st-back { width: 40px; height: 40px; border-radius: 50%; background: #f5f5f5;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  color: #1d1c1d; text-decoration: none; line-height: 1; flex: none; }
.st-pill { flex: 1; background: #f5f5f5; border-radius: 999px; padding: .35rem 1rem;
  text-align: center; min-width: 0; }
.st-pill-name { font-weight: 800; font-size: 1.05rem; color: #1d1c1d;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-pill-name .hash { font-weight: 800; margin-right: .15rem; }
.st-pill-sub { font-size: .8rem; color: #616061; }
.st-markunread { background: #f5f5f5; border: none; border-radius: 999px;
  padding: .5rem .9rem; font-size: .85rem; font-weight: 700; color: #1d1c1d;
  white-space: nowrap; }
.st-intro { padding: 1.2rem 1rem .6rem; flex: none; }
.st-intro-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.st-intro-head h1 { margin: 0; }
.st-desc-edit { background: none; border: 0; cursor: pointer; padding: .4rem;
  color: #616061; border-radius: 8px; }
.st-desc-edit:hover { background: #f0f0f0; color: #1d1c1d; }
.st-desc-edit svg { width: 20px; height: 20px; display: block; }
.st-intro h1 { font-size: 1.7rem; font-weight: 800; margin: 0 0 .4rem; color: #1d1c1d; }
.st-intro h1 .hash { margin-right: .1rem; }
.st-intro-sub { color: #616061; font-size: .95rem; margin: 0 0 .8rem; }
.st-desc { color: #1d1c1d; font-size: .95rem; margin: 0 0 .8rem; }
.st-intro-btns { display: flex; gap: .7rem; }
.st-intro-btn { flex: 1; background: #fff; border: 1px solid #ddd; border-radius: 12px;
  padding: .8rem .5rem; font-size: .95rem; font-weight: 700; color: #1d1c1d;
  display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.st-intro-btn svg { width: 22px; height: 22px; }
.st-desc-form { margin-top: .8rem; }
.st-desc-form input[type="text"] { width: 100%; padding: .6rem; border: 1px solid #ccc;
  border-radius: 10px; font-size: .95rem; }
.st-desc-form .btnrow { display: flex; gap: .5rem; margin-top: .5rem; }
.st-list { flex: 1 1 auto; min-height: 0; padding: .4rem 1rem; overflow-y: auto; }
.st-day { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 .6rem; }
.st-day::before, .st-day::after { content: ""; flex: 1; height: 1px; background: #e8e8e8; }
.st-day span { font-weight: 800; font-size: .95rem; color: #1d1c1d; }
.st-msg { display: flex; gap: .6rem; padding: .45rem 0; }
.st-avatar { flex: none; width: 36px; }
.st-avatar img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.st-msg-main { min-width: 0; flex: 1; }
.st-msg-head { display: flex; align-items: baseline; gap: .45rem; }
.st-msg-head strong { font-size: .95rem; color: #1d1c1d; }
.st-time { font-size: .75rem; color: #616061; }
.st-body { font-size: .95rem; color: #1d1c1d; white-space: pre-wrap; word-wrap: break-word; }
.st-empty { color: #616061; padding: 1rem 0; }
.st-composer { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem;
  border-top: 1px solid #e8e8e8; background: #fff; flex: none; }
.st-plus { width: 42px; height: 42px; border-radius: 50%; background: #f5f5f5; border: none;
  font-size: 1.7rem; color: #1d1c1d; line-height: 1; flex: none; }
.st-input { flex: 1; background: #f5f5f5; border: none; border-radius: 999px;
  padding: .8rem 1.1rem; font-size: .95rem; color: #1d1c1d; min-width: 0; }
.st-input::placeholder { color: #8a8a8a; }
.st-send { background: #1264a3; color: #fff; border: none; border-radius: 10px;
  padding: .7rem 1.1rem; font-size: .95rem; font-weight: 700; flex: none; }
/* @mention autocomplete popup (sits above the composer) */
.mention { color: #0f1e3a; font-weight: 700; }
.mention-pop { flex: none; background: #fff; border-top: 1px solid #e8e8e8;
  max-height: 230px; overflow-y: auto; box-shadow: 0 -6px 18px rgba(0,0,0,.10); }
.mention-opt { display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .6rem .95rem; border: none; background: none; text-align: left;
  font-size: .95rem; color: #1d1c1d; cursor: pointer; }
.mention-opt + .mention-opt { border-top: 1px solid #f1f1f1; }
.mention-opt[aria-selected="true"] { background: #eef4fa; }
.mention-opt:active { background: #e2ecf5; }
.mention-at { color: #1264a3; font-weight: 800; }
/* @mentions rendered inside message bodies */
.st-body .mention { color: #1264a3; font-weight: 700; background: #e8f1fa;
  border-radius: 4px; padding: 0 3px; white-space: nowrap; }
/* Add-people sheet */
.st-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60;
  display: flex; align-items: flex-end; justify-content: center; }
.st-sheet { background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 560px;
  max-height: 82vh; display: flex; flex-direction: column; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
.st-sheet h3 { margin: 0 0 .6rem; font-size: 1.15rem; color: #1d1c1d; }
.st-search { width: 100%; padding: .7rem 1rem; border: 1px solid #ddd; border-radius: 999px;
  font-size: .95rem; margin-bottom: .6rem; background: #f5f5f5; border: none; }
.st-people { overflow-y: auto; flex: 1; }
.st-person { display: flex; align-items: center; gap: .7rem; padding: .55rem .2rem;
  border-bottom: 1px solid #f0f0f0; }
.st-person img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.st-person-info { flex: 1; min-width: 0; }
.st-person-name { font-weight: 700; color: #1d1c1d; font-size: .95rem; }
.st-person-pos { color: #616061; font-size: .8rem; }
.st-person input[type="checkbox"] { width: 22px; height: 22px; }
.st-sheet-actions { display: flex; gap: .6rem; margin-top: .8rem; }
.st-sheet-actions .btn { flex: 1; }
/* ---- Premium Tier Hero ---- */
.tier-hero-premium { border-radius:22px; padding:1.4rem 1.2rem 1.2rem; margin-bottom:1rem;
  background:linear-gradient(135deg, var(--tier), var(--tier-dark, var(--tier)));
  background:linear-gradient(135deg, color-mix(in srgb, var(--tier) 88%, #000),
    color-mix(in srgb, var(--tier) 55%, #000));
  color:#fff; box-shadow:0 6px 24px rgba(0,0,0,.18); position:relative; overflow:hidden; }
.tier-hero-premium.tier-black { border:2px solid #d4af37;
  box-shadow:0 6px 24px rgba(0,0,0,.18), 0 0 32px rgba(212,175,55,.25); }
.tier-hero-premium::before { content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 85% 10%, #ffffff22, transparent 55%); pointer-events:none; }
.th-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem;
  position:relative; }
.th-text { flex:1; min-width:0; }
.th-label { font-size:.68rem; font-weight:800; letter-spacing:3px; opacity:.75; margin-bottom:.3rem; }
.th-name { font-size:1.55rem; font-weight:900; margin:0; line-height:1.15;
  text-shadow:0 2px 12px rgba(0,0,0,.3); letter-spacing:-.01em; }
.th-name-link { color:inherit; text-decoration:none; }
.th-name-link .th-name::after { content:" ›"; font-weight:700; opacity:.7; }
.th-tagline { font-size:.72rem; font-weight:800; letter-spacing:2.5px; opacity:.85; margin:.35rem 0 .6rem; }
.th-msg { font-size:.9rem; line-height:1.5; opacity:.92; margin:0; max-width:16rem; }
.th-shield-wrap { flex:0 0 auto; }
.th-shield { width:7.2rem; height:9rem; display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.th-progress-card { background:rgba(0,0,0,.28); border:1px solid #ffffff22;
  border-radius:16px; padding:.9rem 1rem; margin-top:1.1rem; position:relative;
  backdrop-filter:blur(2px); }
.th-dos-label { font-size:.66rem; font-weight:800; letter-spacing:2.5px; opacity:.7;
  text-align:center; }
.th-dos-numbers { text-align:center; margin:.15rem 0 .5rem; }
.th-dos-big { font-size:2.2rem; font-weight:900; }
.th-dos-of { font-size:1.1rem; opacity:.6; font-weight:600; }
.th-bar { height:.6rem; background:rgba(255,255,255,.18); border-radius:999px;
  overflow:hidden; flex:1; }
.th-fill { height:100%; border-radius:999px; background:#fff; opacity:.92; }
.th-fill-gold { background:linear-gradient(90deg, #d4af37, #f4d03f, #d4af37); opacity:1; }
.th-bar { position:relative; }
.th-marker { position:absolute; top:50%; width:.42rem; height:.42rem; border-radius:50%;
  background:#fff; box-shadow:0 0 0 2px rgba(0,0,0,.28); transform:translate(-50%,-50%); z-index:2; }
.th-marker-end { transform:translate(-100%,-50%); }
/* tappable progress bar + milestone labels + "what it takes" sheet */
.th-tap { cursor:pointer; }
.th-tap:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.th-barcol { flex:1; min-width:0; }
.th-marks { position:relative; height:1rem; margin:.3rem .1rem 0; }
.th-marks span { position:absolute; transform:translateX(-50%); font-size:.58rem;
  font-weight:700; opacity:.65; white-space:nowrap; }
.th-sheet-ov { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:60; }
.th-sheet { position:fixed; left:0; right:0; bottom:0; z-index:61; background:#fff;
  color:#1a1a2e; border-radius:18px 18px 0 0; padding:.6rem 1.2rem calc(1.6rem + env(safe-area-inset-bottom));
  max-height:78vh; overflow:auto; box-shadow:0 -8px 30px rgba(0,0,0,.25); }
.th-sheet-handle { width:2.6rem; height:.28rem; border-radius:999px; background:#d8d8de; margin:.3rem auto .8rem; }
.th-sheet h3 { margin:.2rem 0 .8rem; font-size:1.05rem; }
.th-req { list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.7rem; }
.th-req li { display:flex; gap:.7rem; align-items:flex-start; background:#f6f6f8;
  border-radius:12px; padding:.7rem .8rem; }
.th-req-ico { font-size:1.3rem; flex:0 0 auto; }
.th-req b { display:block; font-size:.92rem; margin-bottom:.15rem; }
.th-req small { display:block; font-size:.8rem; color:#666; line-height:1.45; }
.th-sheet-close { width:100%; padding:.8rem; border:0; border-radius:12px;
  background:#1a1a2e; color:#fff; font-size:1rem; font-weight:700; }
.th-next-gold { color:#d4af37; }
.th-bar-wrap { display:flex; align-items:center; gap:.6rem; margin:.2rem 0; }
.th-crown { flex:0 0 auto; width:2.1rem; height:2.1rem; border-radius:50%;
  border:2px solid #ffffff55; display:flex; align-items:center; justify-content:center;
  font-size:1rem; }
.th-next { text-align:center; font-size:.85rem; margin-top:.5rem; opacity:.9; font-weight:600; }
/* Dashboard hero: the whole card is one big link to the tier page */
.th-stretch { position:absolute; inset:0; z-index:5; border-radius:inherit; }
/* Compact variant: dashboard hero only, slightly smaller than the tier page */
.tier-hero-premium.tier-compact { padding:1rem .95rem .9rem; }
.tier-hero-premium.tier-compact .th-name { font-size:1.35rem; }
.tier-hero-premium.tier-compact .th-tagline { margin:.3rem 0 .45rem; }
.tier-hero-premium.tier-compact .th-msg { font-size:.82rem; line-height:1.45; }
.tier-hero-premium.tier-compact .th-shield { width:6rem; height:7.5rem; }
.tier-hero-premium.tier-compact .th-progress-card { padding:.7rem .85rem; margin-top:.85rem; }
.tier-hero-premium.tier-compact .th-dos-big { font-size:1.9rem; }
.tier-hero-premium.tier-compact .th-next { font-size:.8rem; }

/* Anchored tier-page sections: keep clear of the sticky topbar on hash jumps. */
#dmc-bucks { scroll-margin-top: 76px; }

/* Signoff send buttons: side by side with spacing (Torre 2026-10-02) */
.signoff-send-row { display:flex; gap:.6rem; margin-top:.6rem; flex-wrap:wrap; }
.signoff-send-row form { margin:0; }

/* Price breakdown table on signoff page (Torre 2026-10-03) */
.price-table { width:100%; border-collapse:collapse; margin:.5rem 0; }
.price-table td { padding:.45rem .2rem; border-bottom:1px solid #f0f0f0; vertical-align:top; }
.price-table td.r { text-align:right; white-space:nowrap; }
.price-table tr.total td { border-bottom:0; border-top:2px solid #ddd; padding-top:.6rem; font-size:1.1rem; }

/* Signature pad: light DMC blue outline so customers know where to sign (Torre 2026-10-03) */
.sigpad { border:2px solid #a8c8f0; border-radius:12px; background:#f8fbff;
  width:100%; max-width:600px; height:220px; touch-action:none; cursor:crosshair; }
.sig-block { margin:.8rem 0; }

/* CC fee toggle on signoff price breakdown (Torre 2026-10-03) */
.cc-toggle { display:flex; align-items:center; gap:.5rem; margin:.4rem 0 .6rem;
  font-size:.9rem; cursor:pointer; }
.cc-toggle input { width:1.1rem; height:1.1rem; accent-color:#0a84ff; }
/* Torre 2026-10-07: visibly disabled tax toggle when nothing is taxable. */
.cc-toggle:has(input:disabled) { opacity:.55; cursor:default; }

/* Manual contact inputs on signoff send (Torre 2026-10-03) */
.send-form { display:flex; gap:.4rem; align-items:center; flex:1; }
.send-input { flex:1; min-width:0; padding:.5rem .6rem; border:1px solid #ddd;
  border-radius:8px; font-size:.9rem; }

/* Message long-press action sheet + reaction chips (Torre 2026-10-03) */
.msg-reacts { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.3rem; }
.msg-react { display:inline-flex; align-items:center; gap:.2rem; padding:.15rem .5rem;
  border:1px solid #d7dee8; border-radius:999px; background:#f4f6f9;
  font-size:.85rem; line-height:1.2; cursor:pointer; }
.msg-react span { font-size:.75rem; color:#5b6b7f; font-weight:600; }
.msg-react.mine { border-color:#2f7fd0; background:#e7f1fb; }
.msg-react.mine span { color:#2f7fd0; }
.ma-backdrop { position:fixed; inset:0; background:rgba(15,25,40,.45); z-index:900; }
.ma-sheet { position:fixed; left:0; right:0; bottom:0; z-index:901;
  background:#fff; border-radius:16px 16px 0 0; padding:.6rem 1rem calc(1rem + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .22s ease-out;
  box-shadow:0 -4px 24px rgba(0,0,0,.18); max-width:640px; margin:0 auto; }
.ma-sheet.open { transform:translateY(0); }
.ma-grab { width:40px; height:4px; border-radius:2px; background:#d5dce5; margin:0 auto .6rem; }
.ma-emoji-row { display:flex; justify-content:space-around; padding:.2rem 0 .6rem; }
.ma-emoji { font-size:1.7rem; background:none; border:none; cursor:pointer; padding:.2rem .3rem;
  border-radius:10px; }
.ma-emoji:active { background:#eef2f7; }
.ma-preview { font-size:.8rem; color:#5b6b7f; background:#f4f6f9; border-radius:8px;
  padding:.45rem .6rem; margin-bottom:.6rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ma-action { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left;
  background:none; border:none; border-top:1px solid #eef1f5; padding:.8rem .2rem;
  font-size:.95rem; cursor:pointer; color:#1c2b3a; }
.ma-action:active { background:#f4f6f9; }
.ma-action.ma-danger { color:#c0392b; }

/* Inline message editor (Torre 2026-10-03) */
.msg-edited { font-size:.72rem; color:#8a97a6; font-style:italic; }
.ma-editwrap { margin-top:.3rem; }
.ma-editbox { width:100%; min-height:64px; padding:.5rem .6rem; font-size:.9rem;
  border:1px solid #2f7fd0; border-radius:8px; resize:vertical; font-family:inherit; }
.ma-editrow { display:flex; gap:.5rem; margin-top:.4rem; }
.ma-editsave { padding:.45rem 1rem; border:none; border-radius:8px; background:#2f7fd0;
  color:#fff; font-size:.85rem; font-weight:600; cursor:pointer; }
.ma-editsave:disabled { opacity:.6; }
.ma-editcancel { padding:.45rem 1rem; border:1px solid #d7dee8; border-radius:8px;
  background:#fff; font-size:.85rem; cursor:pointer; }

/* Desktop login (Torre 2026-10-03): desktop-only styling for the login page.
   Everything is scoped inside the min-width media query, so the mobile
   login renders exactly as before. */
@media (min-width: 768px) {
  .login-wrap { max-width: 460px; margin: 9vh auto 3rem; }
  .login-logo img { height: 88px; }
  .login-wrap .card {
    padding: 2.4rem 2.6rem;
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(23,46,87,.16);
  }
  .login-wrap .card h2 { font-size: 1.7rem; }
  .login-wrap .btn.block { padding: .9rem; font-size: 1.05rem; }
}

/* Torre 2026-10-07: PTO day picker bottom sheet. */
.pto-days-btn { width: 100%; padding: .6rem .7rem; border: 1px solid #c8d1e0;
  border-radius: 10px; font-size: 1rem; background: #fff; text-align: left; color: #8a94a6; }
.pto-days-btn.picked { color: #1a2333; font-weight: 600; }
.sheet-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.5);
  z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop[hidden] { display: none; }
.sheet { background: #fff; width: 100%; max-width: 480px; border-radius: 18px 18px 0 0;
  padding: 1.1rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom)); box-shadow: 0 -8px 32px rgba(0,0,0,.2); }
.sheet-title { font-weight: 700; font-size: 1.05rem; margin-bottom: .8rem; }
.chip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; margin-bottom: .9rem; }
.chip { padding: .7rem 0; border: 1.5px solid #c8d1e0; border-radius: 12px;
  font-size: 1.05rem; font-weight: 600; background: #f6f8fc; color: #1a2333; }
.chip:active { background: #dbe4f5; }
.sheet-custom { display: block; margin-bottom: 1rem; }
.sheet-actions { display: flex; gap: .6rem; justify-content: flex-end; }
body.noscroll { overflow: hidden; }

/* Torre 2026-10-07: RingCentral text/call buttons styled as icon links. */
.icon-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #1a73e8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn svg {
  width: 24px;
  height: 24px;
}
.icon-btn:active {
  opacity: 0.6;
}