/* Practice-management screens: shell, light bar, treatment card */
body.pm { overflow: hidden; }
.pm-header { gap: 18px; }
html:has(body.pm) { overflow: hidden; }
@media (max-width: 1100px) { .pm-header { gap: 8px; } .pm-proto, .pm-username { display: none; } .pm-nav a, .pm-navbtn { padding: 6px 7px; } }
.pm-nav { display: flex; gap: 4px; }
.pm-nav a, .pm-navbtn { white-space: nowrap; }
.pm-nav a { color: var(--text2); text-decoration: none; padding: 6px 12px; border-radius: 7px; font-weight: 500; }
.pm-nav a:hover { background: var(--hover); }
.pm-nav a.on { background: var(--panel2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.pm-proto { font-size: 11px; color: var(--warn); border: 1px solid currentColor; border-radius: 999px; padding: 2px 9px; opacity: .85; }
.pm-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pm-office select { font-weight: 600; }
.pm-user { width: 30px; height: 30px; border-radius: 50%; background: var(--accent2); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.pm-app { display: flex; height: calc(100% - 48px); }
#pm-main { flex: 1; min-width: 0; overflow: hidden; }

/* ---------------------------------------------------------------- light bar */
#lightbar { width: 226px; min-width: 226px; border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; overflow: hidden; }
#lightbar.collapsed { width: 54px; min-width: 54px; align-items: center; padding-top: 8px; }
.lb-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 6px 4px 12px; flex-wrap: wrap; }
.lb-head b { font-size: 13.5px; }
.lb-qcount { font-size: 11px; color: var(--muted); flex: 1; }
.lb-collapse, .lb-expand { border: none; background: none; font-size: 18px; color: var(--muted); padding: 0 6px; }
/* where the doctors are, and who is next for each */
.lb-docs { display: flex; gap: 6px; padding: 2px 8px 8px; }
.lb-doc { flex: 1; border-radius: 8px; background: var(--dl); color: #232a36; padding: 4px 6px 5px; display: flex; flex-direction: column; gap: 1px; border-left: 4px solid var(--d); min-width: 0; }
.lb-doc-name { font-weight: 700; font-size: 12px; }
.lb-doc-at { font-size: 11px; }
.lb-doc-next { margin-top: 2px; padding: 1px 6px; font-size: 11px; background: var(--d); color: #fff; border: none; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-doc-next:disabled { background: rgba(0, 0, 0, .12); color: #555; }
.lb-body { overflow-y: auto; flex: 1; min-height: 0; padding: 0 8px 10px; display: flex; flex-direction: column; gap: 5px; }
.lb-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 6px 4px 0; }
/* a chair: always the same height */
.lb-chair { flex: 1 1 0; min-height: 64px; container-type: size; position: relative; border-radius: 10px; padding: 6px 8px 0 12px; background: var(--bg); color: var(--fg);
  border: 1px solid rgba(35, 42, 54, .07); box-shadow: 0 1px 2px rgba(35, 42, 54, .06); display: flex; flex-direction: column; gap: 1px; cursor: pointer; overflow: hidden; user-select: none; }
.lb-chair::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--appt); } /* appointment colour */
.lb-chair.empty { background: none; border: 1px dashed var(--line); color: var(--muted); flex-direction: row; justify-content: space-between; align-items: center; padding: 0 10px; }
.lb-chair.empty::before { display: none; }
.lb-chair.empty:hover { border-color: var(--accent); color: var(--text2); }
.lb-chair:not(.empty):hover { filter: brightness(.97); }
.lb-row1 { display: flex; align-items: center; gap: 6px; }
.lb-num { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; opacity: .7; }
.lb-q { min-width: 20px; height: 20px; border-radius: 999px; background: #111827; color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.lb-time { margin-left: auto; font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }
.lb-name { border: none; background: none; padding: 0; text-align: left; font-weight: 700; font-size: clamp(13px, 17cqh, 19px); color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-name:hover { text-decoration: underline; background: none; }
.lb-row3 { display: flex; flex-direction: column; font-size: clamp(11px, 11cqh, 13.5px); line-height: 1.3; }
.lb-appt { font-weight: 600; letter-spacing: .2px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-status { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-chair.st-light .lb-status { font-weight: 700; opacity: 1; }
/* the appointment running along the bottom, with the doctor-time window */
.lb-tl { position: absolute; left: 6px; right: 0; bottom: 0; height: 7px; background: rgba(35, 42, 54, .1); }
.lb-tl-fill { position: absolute; left: 0; top: 0; bottom: 0; transition: width .6s linear; }
.lb-tl-dr { position: absolute; top: -2px; bottom: 0; border: 1.5px solid rgba(35, 42, 54, .75); border-bottom: none; background: repeating-linear-gradient(45deg, rgba(35, 42, 54, .22) 0 3px, transparent 3px 6px); border-radius: 3px 3px 0 0; }
.st-doctor .lb-tl-dr { border-color: #fff; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 3px, transparent 3px 6px); }
.lb-tl-dr.due { animation: lb-pulse 1.1s ease-in-out infinite; border-color: #d2524e; }
@keyframes lb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* collapsed: a column of lights (queue number when lit) */
.lb-minis { display: flex; flex-direction: column; gap: 6px; align-items: center; margin-top: 8px; overflow-y: auto; }
.lb-dot { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); background: var(--bg); color: var(--fg); font-weight: 800; font-size: 12.5px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lb-dot.empty { border: 1px dashed var(--line); color: var(--muted); font-weight: 500; }
.lb-mini-sep { font-size: 9.5px; color: var(--muted); letter-spacing: .5px; margin-top: 4px; }
/* chair menu (click) and priority (right-click) */
.lb-menu { position: fixed; z-index: 70; width: 250px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 34px var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.lb-menu > button { text-align: left; border: none; background: none; padding: 6px 8px; border-radius: 6px; display: flex; flex-direction: column; }
.lb-menu > button:hover { background: var(--hover); }
.lb-menu small { color: var(--muted); font-size: 11px; }
.lb-mh { font-weight: 700; padding: 4px 8px 2px; }
.lb-msub { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 6px 8px 2px; }
.lb-mnone { color: var(--muted); padding: 4px 8px; font-size: 12px; }
.lb-mdanger { color: var(--danger) !important; }
.lb-lights { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 6px; }
.lb-lights button { background: var(--c); color: #1f2937; border: 1px solid rgba(0, 0, 0, .12); padding: 4px 8px; font-size: 12px; font-weight: 600; }
.lb-lights button.on { outline: 2px solid var(--accent); }
.lb-prio { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 6px 4px; }
.lb-prio button { width: 30px; height: 30px; padding: 0; border-radius: 50%; font-weight: 800; }
.lb-prio button.on { background: #111827; color: #fff; }

/* ---------------------------------------------------------------- treatment card */
.tc { display: flex; flex-direction: column; height: 100%; }
.tc-head { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--panel); }
.tc-photo { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--accent2), #8b5cf6); color: #fff; font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 2px 8px var(--shadow); }
.tc-id h1 { margin: 0; font-size: 22px; }
.tc-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text2); margin-top: 3px; font-size: 12.5px; }
.pill.status { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); border-radius: 999px; padding: 0 9px; font-weight: 600; }
.tc-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.flag { font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 3px 9px; }
.flag.danger { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.flag.info { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.tc-actions { margin-left: auto; display: flex; gap: 6px; }
.tc-body { flex: 1; min-height: 0; display: flex; }
.tc-left { width: 252px; min-width: 252px; overflow-y: auto; border-right: 1px solid var(--line); background: var(--panel); padding: 6px 12px 20px; }
.tc-box { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tc-box:last-child { border-bottom: none; }
.tc-box h3 { margin: 0 0 7px; border: none; padding: 0; display: flex; justify-content: space-between; align-items: center; }
.tiny { padding: 0 7px; font-size: 13px; line-height: 18px; }
.next-appt, .to-book, .fam { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.next-appt b { font-size: 13.5px; }
.to-book { border-top: 1px dashed var(--line); padding-top: 6px; }
.pin { background: var(--panel2); border-radius: 8px; padding: 6px 9px; margin-bottom: 6px; }
.pin small { color: var(--muted); font-size: 10.5px; }
.pin div { font-weight: 600; font-size: 13.5px; }
.pin.highlight div { background: #ffe94d; color: #111; display: inline; padding: 0 4px; box-decoration-break: clone; }
.details { display: grid; grid-template-columns: 76px 1fr; gap: 5px 8px; margin: 0; }
.details dt { color: var(--muted); }
.details dd { margin: 0; }
.tc-center { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tc-top { padding: 10px 16px 4px; border-bottom: 1px solid var(--line); }
.prog-label { font-size: 12.5px; margin-bottom: 5px; }
.prog-bar { position: relative; height: 10px; border-radius: 999px; background: var(--panel2); overflow: visible; border: 1px solid var(--line); }
.prog-fill { overflow: hidden; }
.prog-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 999px; }
.prog-window { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, var(--muted) 30%, transparent) 4px 6px); }
.imaging-strip { display: flex; gap: 8px; margin-top: 8px; }
.img-chip { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; text-align: left; }
.img-chip div { display: flex; flex-direction: column; }
.img-chip small { color: var(--muted); font-size: 11px; }
.ic { width: 30px; height: 22px; border-radius: 4px; background: #222; position: relative; flex: none; }
.ic.pano::after { content: ''; position: absolute; left: 4px; right: 4px; top: 8px; height: 6px; border-radius: 0 0 10px 10px; border: 2px solid #ddd; border-top: none; }
.ic.photo { background: linear-gradient(135deg, #f4c7a1, #c98b67); }
.ic.ceph::after { content: ''; position: absolute; right: 6px; top: 4px; width: 10px; height: 13px; border: 2px solid #ddd; border-left: none; border-radius: 0 8px 8px 0; }
.tc-chart { display: flex; gap: 12px; align-items: stretch; }
.od-wrap { flex: 1; min-width: 0; }
.odontogram { width: 100%; height: auto; display: block; }
.tc-chart > .od-wrap { align-self: center; }
.tc-side-info { width: 230px; min-width: 230px; padding: 6px 0; font-size: 12.5px; }
.tc-side-info h3 { margin: 0 0 6px; border: none; padding: 0; }
.ap-row { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--line); }
.ap-row > span:first-child { color: var(--muted); width: 74px; }
.od-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 10px 0 4px; font-size: 11.5px; color: var(--text2); }
.od-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lg { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.lg.bracket { background: #6b7280; } .lg.tube { background: #9ca3af; width: 18px; height: 7px; } .lg.band { border: 2px solid #9ca3af; }
.lg.watch { background: #ffd43b; } .lg.unerupted { border: 1.5px dashed #a8a29e; }
/* odontogram drawing */
.od-mid { stroke: rgba(60, 60, 67, .16); stroke-dasharray: 2 5; stroke-linecap: round; }
.od-side { fill: rgba(60, 60, 67, .45); font: 600 17px -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; }
.od-num { fill: rgba(60, 60, 67, .55); font: 500 14px -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; text-anchor: middle; }
.od-tooth { cursor: pointer; }
.od-crown { fill: url(#od-enamel); stroke: rgba(120, 100, 70, .32); stroke-width: 1; filter: url(#od-soft); }
.od-shine { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .75; pointer-events: none; }
.od-gums { pointer-events: none; }
.od-root { fill: url(#od-dentin); stroke: rgba(150, 120, 80, .28); stroke-width: 1; }
.od-tooth:hover .od-crown { stroke: #0a84ff; stroke-width: 2; }
.od-tooth { transition: transform .15s; }
.od-tooth.mark-watch .od-crown { fill: #ffe58f; }
.od-tooth.state-unerupted { opacity: .7; }
.od-tooth.state-unerupted .od-crown, .od-tooth.state-unerupted .od-root { stroke-dasharray: 4 3; }
.od-tooth.state-missing .od-crown, .od-tooth.state-missing .od-root, .od-tooth.state-extracted .od-crown, .od-tooth.state-extracted .od-root { fill: none; stroke-dasharray: 4 3; opacity: .55; }
.od-x { stroke: var(--danger); stroke-width: 2; }
.od-bracket rect { fill: url(#od-metal); stroke: rgba(60, 70, 85, .55); stroke-width: .8; }
.od-slot { fill: #5b6472 !important; stroke: none !important; }
.od-bracket line { stroke: rgba(80, 90, 105, .45); stroke-width: .8; }
.od-tube rect { fill: url(#od-metal); stroke: rgba(60, 70, 85, .55); stroke-width: .8; }

.od-band { fill: none; stroke: #aeb6c2; stroke-width: 3; }
.od-wire { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.od-wire-shine { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1; stroke-linecap: round; pointer-events: none; }
.od-wire-label text { fill: #fff; font: 600 14px -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; text-anchor: middle; letter-spacing: .02em; }
.od-wire-label rect { filter: url(#od-lift); }
.tooth-menu { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px var(--shadow); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.tm-row { display: flex; gap: 4px; }
.tm-row button { padding: 3px 8px; font-size: 12px; }
/* visit log */
.tc-visits { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tc-visits-bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.tc-visits-bar .seg { margin: 0; }
.tc-visits-bar .seg button { padding: 4px 12px; }
.tc-visit-head, .visit { display: grid; grid-template-columns: 120px 60px 120px 120px minmax(220px, 1fr) 190px; gap: 10px; }
.tc-visit-head { padding: 4px 16px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); border-bottom: 1px solid var(--line); }
.tc-visit-list { overflow-y: auto; flex: 1; padding: 6px 10px 20px; display: flex; flex-direction: column; gap: 6px; }
.visit { padding: 9px 8px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent2); font-size: 12.5px; }
.visit.latest { box-shadow: 0 0 0 1.5px var(--accent) inset; }
.visit.is-note { border-left-color: var(--muted); background: var(--panel2); }
.v-when { display: flex; flex-direction: column; gap: 1px; }
.v-when b { font-size: 13.5px; }
.v-when span { color: var(--text2); }
.v-type { font-size: 11px; font-weight: 600; color: var(--accent) !important; letter-spacing: .2px; }
.v-staff { display: flex; flex-direction: column; font-weight: 600; }
.stars { color: #f5b301; letter-spacing: 1px; }
.stars .off { color: var(--line); }
.v-wires div { white-space: nowrap; }
.arch { display: inline-block; width: 15px; color: var(--muted); font-weight: 700; font-size: 11px; }
.xr { color: var(--accent); font-weight: 600; font-size: 11.5px; margin-top: 2px; }
.v-notes { display: flex; flex-direction: column; gap: 2px; }
.v-notes b { color: var(--accent); font-weight: 600; }
.v-next { display: flex; flex-direction: column; gap: 1px; border-left: 1px dashed var(--line); padding-left: 10px; }
.v-next b { font-size: 12px; }
.v-next span { color: var(--text2); }
.lb-tech { font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 4px; background: rgba(35, 42, 54, .08); opacity: .85; }
.lb-chair.empty .lb-tech { margin-right: auto; margin-left: 8px; background: var(--panel2); }
.lb-chair .lb-tl { height: clamp(6px, 7cqh, 10px); }
.lb-doc.out { background: var(--panel2); color: var(--muted); border-left-color: var(--line); }
.lb-doc-toggle { font-size: 11px; color: inherit; opacity: .8; }
button.lb-doc-toggle { margin-top: 2px; padding: 1px 6px; border-radius: 5px; }
.pm-role { display: flex; align-items: center; gap: 6px; }
.pm-role select { max-width: 220px; }
.lb-chair, .lb-chair.empty { padding-top: 6px; padding-bottom: 13px; } /* same padding everywhere: equal heights when the chairs stretch */
/* what shows first when a chair is short: chair line, name, status; the appointment type clips last */
.lb-chair > .lb-row1, .lb-chair > .lb-name, .lb-chair > .lb-status { flex: none; }
.lb-chair > .lb-appt { flex: 0 1 auto; min-height: 0; }
.lb-chair .lb-status { font-size: clamp(11px, 12cqh, 14px); line-height: 1.25; }
.lb-chair .lb-appt { font-size: clamp(10.5px, 11cqh, 13px); line-height: 1.25; }
.lb-chair { min-height: 70px; }
/* the appointment line only when the chair is tall enough to show it whole */
.lb-chair > .lb-appt { display: none; }
@container (min-height: 88px) { .lb-chair > .lb-appt { display: block; } }
.lb-tech.none { background: none; border: 1px dashed currentColor; font-weight: 500; opacity: .6; }
.lb-techs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 0 6px 4px; }
.lb-techs button { padding: 4px 0; font-size: 11.5px; font-weight: 700; }
.lb-techs button.on { background: var(--accent2); border-color: var(--accent2); color: #fff; }
.lb-techs button:disabled { opacity: .35; }
/* the doctor order: a big number behind the chair, readable from across the room */
.lb-bigq { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 118cqh; font-weight: 900; line-height: .78; letter-spacing: -.05em;
  color: rgba(35, 42, 54, .38); pointer-events: none; z-index: 0; font-variant-numeric: tabular-nums; font-family: 'Helvetica Neue', Arial, sans-serif; }
.lb-chair > *:not(.lb-bigq):not(.lb-tl) { position: relative; z-index: 1; }
.lb-chair.mine { box-shadow: 0 0 0 2.5px var(--accent); }
/* technician sign-in: pick a chair */
.lb-pick { position: fixed; inset: 0; z-index: 80; background: var(--overlay); display: flex; align-items: center; justify-content: center; }
.lb-pick-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; width: min(520px, 92vw); box-shadow: 0 16px 40px var(--shadow); }
.lb-pick-card h2 { margin: 0 0 4px; }
.lb-pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 6px; }
.lb-pick-grid button { display: flex; flex-direction: column; gap: 2px; padding: 12px 6px; font-size: 14px; }
.lb-pick-grid button small { font-size: 11px; color: var(--muted); }
.lb-pick-grid button.usual { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.lb-pick-grid button:disabled { opacity: .45; }
.tc-photo { overflow: hidden; }
.tc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.pill.sample { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); border-radius: 999px; padding: 0 9px; font-weight: 600; }
.tc-empty { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 0; }
.tc-novisits { padding: 10px; }

/* ---------------------------------------------------------------- sign-in */
body.login { display: flex; align-items: center; justify-content: center; min-height: 100%; background: var(--bg); }
.login-wrap { width: 100%; display: flex; justify-content: center; padding: 24px; }
.login-card { width: min(420px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 30px 22px; box-shadow: 0 16px 44px var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.login-logo { display: block; text-align: center; margin-bottom: 6px; }
.login-logo img { width: 260px; max-width: 100%; height: auto; }
.login-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.login-field select, .login-field input { font-size: 15px; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--input); color: var(--text); text-transform: none; letter-spacing: 0; }
.login-field input:disabled { opacity: .6; }
.login-go { font-size: 15px; padding: 10px; border-radius: 8px; }
.login-note { text-align: center; margin: 0; }

/* ---------------------------------------------------------------- menu bar */
.pm-header .brand b { font-size: 18px; }
.pm-nav { align-items: center; }
.pm-navbtn { background: none; border: none; color: var(--text2); padding: 6px 12px; border-radius: 7px; font-weight: 500; font-size: 13px; }
.pm-navbtn:hover { background: var(--hover); }
.pm-navbtn.on { background: var(--panel2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.pm-menu { position: relative; }
.pm-drop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 75; min-width: 230px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.pm-drop.right { left: auto; right: 0; }
.pm-drop a, .pm-drop button, .pm-results button { text-align: left; padding: 7px 10px; border-radius: 6px; border: none; background: none; color: var(--text); text-decoration: none; font-size: 13px; }
.pm-drop a:hover, .pm-drop button:hover, .pm-results button:hover { background: var(--hover); }
.pm-drop-head { display: flex; flex-direction: column; padding: 6px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pm-soon { padding: 7px 10px; color: var(--muted); font-size: 13px; }
.pm-soon em { font-style: normal; font-size: 10.5px; border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.pm-search { width: 300px; }
.pm-search input { padding: 8px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--input); color: var(--text); font-size: 14px; }
.pm-results { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; margin: 4px 0; }
.pm-search p { margin: 2px 6px 4px; }
.pm-userbtn { display: flex; align-items: center; gap: 7px; background: none; border: none; padding: 2px 8px 2px 2px; border-radius: 999px; }
.pm-userbtn:hover { background: var(--hover); }
.pm-username { font-weight: 600; color: var(--text); }
.pm-gear { background: none; border: none; font-size: 18px; color: var(--text2); padding: 2px 8px; border-radius: 7px; line-height: 1; }
.pm-gear:hover, .pm-gear.on { background: var(--hover); color: var(--text); }

/* ---------------------------------------------------------------- dashboards, users */
.dash { padding: 28px 34px 40px; overflow-y: auto; height: 100%; }
.dash h1 { margin: 0 0 4px; font-size: 26px; }
.dash-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 22px 0 14px; }
.dash-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px 14px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.dash-card b { font-size: 14px; }
.dash-note { max-width: 640px; }
.users-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.u-table { width: 100%; max-width: 900px; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 14px; }
.u-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.u-table td { padding: 4px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.u-table tr:last-child td { border-bottom: none; }
.u-table input:not([type=checkbox]), .u-table select { background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 5px 6px; color: var(--text); font-size: 13px; width: 100%; }
.u-table input:not([type=checkbox]):hover:not(:disabled), .u-table select:hover:not(:disabled), .u-table input:focus, .u-table select:focus { border-color: var(--line); background: var(--input); }
.u-table .u-ini { width: 54px; font-weight: 700; }
.u-table tr.inactive td { opacity: .5; }
.u-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; max-width: 900px; }
.u-role { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.tc-chart { flex-wrap: wrap; }
.od-wrap { min-width: min(520px, 100%); }
.lb-cc { margin: 0 8px 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel2); font-size: 11.5px; text-align: left; }
.lb-cc span { color: var(--muted); }
.lb-cc b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-cc.none { border-style: dashed; justify-content: center; }
.lb-menu > button.on { background: var(--hover); font-weight: 700; }
.pm-cc-today { color: var(--accent); font-weight: 600; }
#l-table { width: 100%; }
#l-table td:nth-child(3) { width: 100%; }
#l-table td:nth-child(4) input { width: 130px; }
#l-table td:nth-child(5), #l-table td:nth-child(6) { white-space: nowrap; }
.l-move { white-space: nowrap; }
.l-move button { border: 1px solid var(--line); background: var(--panel); border-radius: 5px; padding: 0 5px; margin-right: 2px; cursor: pointer; color: var(--text2); }
.l-move button:disabled { opacity: .3; cursor: default; }

/* ---------------------------------------------------------------- messaging */
.pm-badge { display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; vertical-align: 1px; }
#pm-toasts { position: fixed; right: 240px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: 320px; }
.pm-toast { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 30px 10px 12px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; box-shadow: 0 6px 22px var(--shadow); cursor: pointer; font-size: 13px; }
.pm-toast.alert { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--panel)); }
.msg { display: flex; height: 100%; }
.msg-side { width: 270px; flex: none; border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.msg-list { flex: 1; overflow-y: auto; padding: 4px 8px 10px; }
.msg-search { padding: 10px 10px 4px; }
.msg-search input { width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font: inherit; font-size: 13px; }
.msg-sec { margin-bottom: 14px; }
.msg-sech { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text2); padding: 4px 8px; }
.msg-new { border: 0; background: none; color: var(--accent); font-size: 16px; cursor: pointer; padding: 0 4px; }
.msg-ch { display: grid; grid-template-columns: 1fr auto; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 7px; cursor: pointer; color: var(--text); font: inherit; font-size: 13.5px; }
.msg-ch:hover { background: var(--hover); }
.msg-ch.on { background: var(--panel2); color: var(--text); border-color: transparent; box-shadow: inset 3px 0 0 var(--accent); }
.msg-ch.unread .msg-chn { font-weight: 700; }
.msg-chl { grid-column: 1 / -1; font-size: 11.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-badge { background: var(--danger); color: #fff; border-radius: 999px; font-size: 10.5px; font-weight: 700; padding: 0 6px; line-height: 17px; align-self: center; }
.msg-empty { padding: 2px 8px; }
.msg-conv { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.msg-head h2 { margin: 0; font-size: 17px; }
.msg-back { display: none; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--accent); cursor: pointer; padding: 0 6px 2px 0; }
.msg-thread { flex: 1; overflow-y: auto; padding: 12px 16px; }
.msg-none { text-align: center; margin-top: 40px; }
.msg-day { text-align: center; margin: 14px 0 8px; font-size: 11.5px; color: var(--text2); }
.msg-day span { background: var(--panel2); padding: 2px 10px; border-radius: 999px; }
.msg-m { display: flex; gap: 10px; padding: 5px 6px; border-radius: 8px; }
.msg-m:hover { background: var(--hover); }
.msg-m.grouped { padding-top: 0; }
.msg-m.grouped .msg-av, .msg-m.grouped .msg-h { visibility: hidden; height: 0; }
.msg-m.grouped .msg-h { display: none; }
.msg-av { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--accent2); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.msg-av.sm { width: 24px; height: 24px; font-size: 10px; }
.msg-m.mine .msg-av { background: #8b5cf6; }
.msg-b { min-width: 0; }
.msg-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.msg-t { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.msg-alert { font-size: 10.5px; font-weight: 700; color: var(--danger); text-transform: uppercase; letter-spacing: .04em; }
.msg-chair { font-size: 11px; background: var(--panel2); border-radius: 5px; padding: 0 6px; }
.msg-pt { margin-top: 4px; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; cursor: pointer; color: var(--accent); }
.msg-compose { position: relative; border-top: 1px solid var(--line); padding: 10px 14px; }
.msg-row { display: flex; gap: 8px; align-items: flex-end; }
.msg-input textarea { flex: 1; resize: none; min-height: 38px; max-height: 160px; field-sizing: content; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 14px; }
.msg-row > button { height: 38px; }
.msg-ptchip { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; background: var(--panel2); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12.5px; }
.msg-ptchip button { border: 0; background: none; cursor: pointer; color: var(--text2); font-size: 14px; }
.msg-ptpick { position: absolute; bottom: 100%; left: 14px; width: 300px; max-width: calc(100% - 28px); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px var(--shadow); padding: 8px; }
.msg-ptpick input { width: 100%; box-sizing: border-box; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); }
#msg-ptres button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 6px; cursor: pointer; color: var(--text); }
#msg-ptres button:hover { background: var(--hover); }
.msg-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; z-index: 70; padding: 16px; }
.msg-dlg { background: var(--panel); border-radius: 12px; padding: 16px; width: 380px; max-width: 100%; max-height: 80vh; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 12px 40px var(--shadow); }
.msg-dlg h3 { margin: 0; }
.msg-dlg #dm-q { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); }
.dm-people { overflow-y: auto; display: flex; flex-direction: column; }
.dm-people label { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.dm-people label:hover { background: var(--hover); }
.dm-people label .muted { margin-left: auto; }
.dm-foot { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------------------------------------------------------------- phone width: no light bar; one pane at a time */
  html.app body.pm { display: flex; flex-direction: column; height: 100dvh; }
  html.app .pm-nav { flex-wrap: wrap; }
  html.app #lightbar { display: none; }
  html.app .pm-header { gap: 8px; flex-wrap: wrap; height: auto; }
  html.app .pm-proto, html.app .pm-office, html.app .pm-username { display: none; }
  html.app .pm-nav a, html.app .pm-navbtn { padding: 6px 8px; white-space: nowrap; }
  html.app .pm-app { flex: 1; min-height: 0; height: auto; }
  html.app #pm-toasts { right: 12px; left: 12px; max-width: none; }
/* Messages: one pane at a time only on a narrow phone; wider (unfolded Duo, iPad, computer) has the chats beside the chat */
@media (max-width: 600px) {
  .msg-side { width: 100%; border-right: 0; }
  .msg-conv { display: none; }
  .msg.thread-open .msg-side { display: none; }
  .msg.thread-open .msg-conv { display: flex; }
  .msg-back { display: block; }
}

.lb-alerts { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 8px 6px; }
.lb-menu .lb-alerts button { width: auto; padding: 4px 8px; font-size: 12px; border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); border-radius: 6px; }

.hash { color: var(--text2); font-weight: 600; display: inline-block; width: 12px; text-align: center; }
svg.lock { color: var(--text2); vertical-align: -1px; display: inline-block; width: 12px; }
.msg-head h2 svg.lock { width: 14px; height: 14px; }
.msg-tool { width: 38px; height: 38px; flex: none; border: 1px solid var(--line); background: var(--panel); border-radius: 9px; cursor: pointer; font-size: 16px; color: var(--text2); padding: 0; }
.msg-tool:hover { background: var(--hover); }
.msg-input { flex: 1; min-width: 0; display: flex; align-items: flex-end; position: relative; }
.msg-input textarea { padding-right: 40px !important; }
.msg-input #msg-emoji { position: absolute; right: 2px; bottom: 2px; border: 0; background: none; width: 34px; height: 34px; }
.emoji-pop { position: absolute; right: 0; bottom: calc(100% + 6px); width: 300px; max-width: 86vw; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px var(--shadow); z-index: 20; }
.emoji-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); }
.emoji-tabs button { flex: 1; border: 0; background: none; border-radius: 6px; font-size: 17px; padding: 3px; cursor: pointer; }
.emoji-tabs button.on { background: var(--panel2); }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); padding: 6px; max-height: 210px; overflow-y: auto; }
.emoji-grid button { border: 0; background: none; font-size: 21px; padding: 3px 0; border-radius: 6px; cursor: pointer; }
.emoji-grid button:hover { background: var(--hover); }
.msg-t.big { font-size: 34px; line-height: 1.2; }
.msg-moremenu { position: absolute; bottom: calc(100% - 4px); left: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px var(--shadow); padding: 5px; display: flex; flex-direction: column; z-index: 20; }
.msg-moremenu button { border: 0; background: none; text-align: left; padding: 7px 14px; border-radius: 7px; cursor: pointer; color: var(--text); font: inherit; font-size: 14px; }
.msg-moremenu button:hover { background: var(--hover); }
.msg-files { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.msg-fthumb { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.msg-fthumb img { width: 100%; height: 100%; object-fit: cover; }
.msg-fthumb.busy img { opacity: .45; }
.msg-fthumb button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; line-height: 18px; padding: 0; cursor: pointer; }
.msg-conv.drop { outline: 3px dashed var(--accent); outline-offset: -6px; }
.msg-fthumb.file { width: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; box-sizing: border-box; background: var(--panel2, #f2f2f7); }
.msg-fthumb.file small { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-fthumb.busy .msg-ficon { opacity: .45; }
.msg-ficon { display: inline-grid; place-items: center; width: 30px; height: 36px; border-radius: 5px; background: var(--fc); color: #fff; font: 700 9.5px -apple-system, system-ui, sans-serif; letter-spacing: .3px; flex: none; }
.msg-docs { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; max-width: 360px; }
.msg-doc { display: flex; align-items: center; gap: 4px; border: .5px solid var(--line); border-radius: 12px; background: var(--panel, #fff); padding: 6px 6px 6px 10px; }
.msg-doc > a:first-child { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.msg-doc span { display: flex; flex-direction: column; min-width: 0; }
.msg-doc b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-doc small { font-size: 11.5px; color: var(--muted); }
.msg-dl { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #007aff; text-decoration: none; font-size: 16px; flex: none; }
.msg-dl:hover { background: rgba(0, 122, 255, .1); }
.msg-video { display: block; max-width: 360px; width: 100%; border-radius: 12px; margin-top: 4px; background: #000; }
.msg-m.mine .msg-docs { align-items: flex-end; margin-left: auto; }
.msg-imgs { display: grid; gap: 4px; margin-top: 4px; max-width: 360px; }
.msg-imgs.n2, .msg-imgs.n4 { grid-template-columns: 1fr 1fr; }
.msg-imgs.n3 { grid-template-columns: 1fr 1fr 1fr; }
.msg-img { border: 0; padding: 0; background: var(--panel2); border-radius: 10px; overflow: hidden; cursor: zoom-in; display: block; }
.msg-img img { display: block; width: 100%; max-height: 320px; object-fit: cover; }
.msg-imgs:not(.n1) .msg-img img { aspect-ratio: 1; }
.lightbox { background: rgba(0,0,0,.85); cursor: zoom-out; }
.lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 6px; }
.lightbox button { position: absolute; top: 14px; right: 18px; border: 0; background: none; color: #fff; font-size: 30px; cursor: pointer; }
.msg-m { position: relative; }
.msg-acts { position: absolute; right: 8px; top: -10px; display: none; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 2px 8px var(--shadow); }
.msg-m:hover .msg-acts { display: flex; }
.msg-acts button { border: 0; background: none; padding: 3px 9px; font-size: 12px; cursor: pointer; color: var(--text2); }
.msg-acts button:hover { color: var(--text); }
.msg-m.flash { box-shadow: 0 0 0 2px var(--accent); border-radius: 12px; }
.msg-pinned { font-size: 11px; color: var(--warn); font-weight: 600; }
.msg-pins { position: relative; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--warn) 7%, var(--panel)); }
#msg-pinbtn { width: 100%; text-align: left; border: 0; background: none; padding: 7px 16px; cursor: pointer; font: inherit; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-pinlist { position: absolute; left: 8px; right: 8px; top: 100%; z-index: 15; max-height: 50vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px var(--shadow); padding: 6px; }
.msg-pinlist .msg-m { cursor: pointer; }
.ev-card { display: flex; gap: 12px; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); max-width: 440px; }
.ev-date { flex: none; width: 52px; border-radius: 9px; overflow: hidden; text-align: center; border: 1px solid var(--line); display: flex; flex-direction: column; align-self: flex-start; }
.ev-date span:first-child { background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 1px 0; }
.ev-date b { font-size: 22px; line-height: 1.2; }
.ev-date span:last-child { font-size: 10.5px; color: var(--text2); padding-bottom: 2px; }
.ev-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev-title { font-size: 15px; }
.ev-body a { color: var(--accent); text-decoration: none; }
.ev-notes { color: var(--text2); }
.ev-rsvp { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 2px; }
.ev-rsvp button, .poll-opt-b { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.ev-rsvp button.on { background: var(--accent2); border-color: var(--accent2); color: #fff; }
.ev-rsvp [data-ics] { color: var(--accent); }
.poll-card { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); max-width: 440px; }
.poll-opt-b { position: relative; overflow: hidden; display: flex; justify-content: space-between; gap: 10px; border-radius: 8px; padding: 7px 10px; text-align: left; }
.poll-opt-b:disabled { cursor: default; }
.poll-opt-b.mine { border-color: var(--accent); }
.poll-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 16%, transparent); transition: width .3s; }
.poll-l, .poll-n { position: relative; }
.poll-n { color: var(--text2); white-space: nowrap; }
.msg-dlg label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text2); }
.msg-dlg input:not([type=checkbox]), .msg-dlg select, .msg-dlg textarea { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font: inherit; font-size: 14px; }
.msg-dlg .dlg-row { display: flex; gap: 8px; }
.msg-dlg .dlg-row label { flex: 1; min-width: 0; }
.msg-dlg .dlg-check { flex-direction: row; align-items: center; gap: 7px; color: var(--text); font-size: 13.5px; }
.poll-opts { display: flex; flex-direction: column; gap: 6px; }
.poll-add { align-self: flex-start; border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0; font: inherit; font-size: 13px; }
.msg-dlg { overflow-y: auto; }
@media (max-width: 760px) { .msg-tool#msg-photo, .msg-tool#msg-link { display: none; } }

.msg-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.msg-react { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 1px 8px; font-size: 14px; cursor: pointer; color: var(--text); line-height: 22px; }
.msg-react span { font-size: 11.5px; color: var(--text2); }
.msg-react.mine { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.msg-react.add { font-size: 11px; color: var(--text2); opacity: 0; }
.msg-m:hover .msg-react.add { opacity: 1; }
.react-bar { position: absolute; right: 8px; top: -44px; z-index: 18; display: flex; gap: 2px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 6px 20px var(--shadow); }
.react-bar button { border: 0; background: none; font-size: 20px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.react-bar button:hover { background: var(--hover); transform: scale(1.15); }
.react-bar .emoji-pop { bottom: calc(100% + 6px); right: 0; }
.react-bar.below { top: auto; bottom: -44px; }
.react-bar.below .emoji-pop { bottom: auto; top: calc(100% + 6px); }
@media (max-width: 760px) { .msg-react.add { opacity: 1; } }

/* ---------------------------------------------------------------- floating windows (Messages, Tasks) */
.pm-iconbtn { position: relative; border: 1px solid transparent; background: none; font-size: 17px; width: 34px; height: 32px; border-radius: 8px; cursor: pointer; }
.pm-iconbtn:hover { background: var(--hover); }
.pm-iconbtn.on { background: var(--panel2); border-color: var(--line); }
.pm-iconbtn .pm-badge { position: absolute; top: -3px; right: -5px; margin: 0; }
.pm-float { position: fixed; z-index: 55; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.28); overflow: hidden; min-width: 300px; }
.pm-float.min { height: auto !important; }
.pm-float.min iframe, .pm-float.min .pf-grip { display: none; }
.pf-bar { display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; background: var(--panel2); border-bottom: 1px solid var(--line); cursor: grab; user-select: none; touch-action: none; }
.pm-float.moving .pf-bar { cursor: grabbing; }
.pf-title { flex: 1; font-weight: 600; font-size: 13.5px; }
.pf-bar button { border: 0; background: none; width: 28px; height: 26px; border-radius: 6px; cursor: pointer; color: var(--text2); font-size: 15px; }
.pf-bar button:hover { background: var(--hover); color: var(--text); }
.pm-float iframe { flex: 1; border: 0; width: 100%; background: var(--bg); }
.pf-grip { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, var(--line) 50%, var(--line) 60%, transparent 60%, transparent 70%, var(--line) 70%, var(--line) 80%, transparent 80%); }
.pf-shield { display: none; position: absolute; inset: 0; }
.pm-float.moving .pf-shield { display: block; }
body.embed { overflow: hidden; }
body.embed .pm-app, body.embed #pm-main { height: 100%; }
body.embed #pm-main { height: 100vh; }
.pm-popbar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--panel); }
.pm-popbar b { color: var(--accent); }
.pm-popbar button { margin-left: auto; border: 1px solid var(--line); background: var(--panel2); border-radius: 7px; padding: 3px 9px; cursor: pointer; font-size: 12.5px; color: var(--text); }
body.embed:has(.pm-popbar) #pm-main { height: calc(100vh - 41px); }
body.pip-on #pm-main::before { content: 'Messages is open in the always-on-top window.'; display: block; padding: 30px; text-align: center; color: var(--text2); }
body.pip-on #pm-main > * { display: none; }
@media (hover: none) { .msg-m:hover .msg-acts { display: none; } .msg-m.sel .msg-acts { display: flex; } .msg-acts { top: auto; bottom: -14px; } .msg-react.add { opacity: 1; } }

.msg-eye { color: var(--accent); }
.msg-eye.off { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.msg-eye svg { display: block; margin: auto; }
.msg-hid { color: var(--text2); display: inline-flex; }
.msg-hid svg { width: 14px; height: 14px; }

.pm-toast .pm-show { align-self: flex-start; margin-top: 4px; border: 1px solid var(--line); background: var(--panel2); color: var(--accent); border-radius: 7px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; }
.pm-toast .pm-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 16px; color: var(--text2); cursor: pointer; }
.pm-toast.hid { border-left-color: var(--warn); }
.pm-badge.calm { background: var(--accent2); }
.pm-chk { display: flex; align-items: center; gap: 7px; padding: 7px 12px; font-size: 13px; cursor: pointer; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- tasks */
.tk { height: 100%; display: flex; flex-direction: column; padding: 14px 18px 0; box-sizing: border-box; }
.tk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tk-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--panel); }
.tk-seg button { border: 0; background: none; padding: 6px 11px; font: inherit; font-size: 13px; cursor: pointer; color: var(--text2); white-space: nowrap; }
.tk-seg button + button { border-left: 1px solid var(--line); }
.tk-seg button.on { background: var(--panel2); color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
#tk-q { flex: 1; min-width: 140px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 13.5px; }
#tk-sort { padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; }
#tk-new { margin-left: auto; }
.tk-types { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 8px; }
.tk-types button { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px; padding: 3px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.tk-types button span { margin-left: 6px; color: var(--text2); font-size: 11.5px; }
.tk-types button.on { background: var(--accent2); border-color: var(--accent2); color: #fff; }
.tk-types button.on span { color: rgba(255,255,255,.8); }
.tk-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; }
.tk-empty { text-align: center; margin-top: 40px; }
.tk-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--prio); border-radius: 10px; cursor: pointer; }
.tk-row:hover { background: var(--hover); }
.tk-row.done { opacity: .65; }
.tk-row.done .tk-t b { text-decoration: line-through; }
.tk-done { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--ok); cursor: pointer; }
.tk-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tk-t { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.tk-prio { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--prio); }
.tk-meta { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.tk-type { background: var(--panel2); border-radius: 5px; padding: 0 7px; color: var(--text2); }
.tk-pt { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.tk-pt:hover, .tk-phone:hover { text-decoration: underline; }
.tk-phone, .tk-call { color: var(--accent); text-decoration: none; white-space: nowrap; }
.tk-due { color: var(--text2); }
.tk-due.today { color: var(--warn); font-weight: 600; }
.tk-due.late { color: var(--danger); font-weight: 600; }
.tk-who { margin-left: auto; color: var(--text2); white-space: nowrap; }
.tk-dlg { width: 520px; }
.tk-prios { display: flex; gap: 6px; }
.tk-prios label { flex: 1; flex-direction: row; }
.tk-prios input { position: absolute; opacity: 0; pointer-events: none; }
.tk-prios span { flex: 1; text-align: center; padding: 6px 0; border: 1px solid var(--line); border-radius: 8px; color: var(--text); cursor: pointer; border-top: 3px solid var(--prio); font-size: 13px; }
.tk-prios input:checked + span { background: color-mix(in srgb, var(--prio) 16%, var(--panel)); font-weight: 600; border-color: var(--prio); }
.tk-ptfield { display: flex; gap: 8px; align-items: center; }
.tk-ptfield input { flex: 1; min-width: 0; }
.tk-open { border: 1px solid var(--line); background: var(--panel); color: var(--accent); border-radius: 7px; padding: 6px 9px; cursor: pointer; white-space: nowrap; }
.tk-care { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.tk-care legend { font-size: 12px; font-weight: 700; color: var(--text2); padding: 0 4px; }
.tk-care[hidden] { display: none; }
body.embed .tk { padding: 10px 10px 0; }
body.embed .tk-bar #tk-sort { display: none; }
@media (max-width: 760px) { .tk { padding: 10px 10px 0; } .tk-who { margin-left: 0; } #tk-new { margin-left: 0; } .tk-dlg .dlg-row { flex-direction: column; } }
#tk-range { padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; }
.tk-custom { display: inline-flex; align-items: center; gap: 4px; }
.tk-custom input { padding: 5px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px; }
.tk-custom[hidden] { display: none; }
.tk-src { align-self: flex-start; border: 1px solid var(--line); background: var(--panel2); color: var(--accent); border-radius: 8px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: 13px; }

.msg-quote { display: block; box-sizing: border-box; text-align: left; max-width: min(420px, 100%); margin: 2px 0 3px; padding: 3px 9px; border: 0; border-left: 3px solid var(--accent); border-radius: 4px; background: var(--panel2); color: var(--text2); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-quote b { color: var(--text); margin-right: 4px; }
.msg-replybar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding: 5px 6px 5px 10px; border-left: 3px solid var(--accent); background: var(--panel2); border-radius: 6px; font-size: 13px; }
.msg-replybar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-replybar button { border: 0; background: none; font-size: 16px; color: var(--text2); cursor: pointer; }
.msg-ctx { position: fixed; z-index: 80; min-width: 230px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 36px var(--shadow); padding: 5px; display: flex; flex-direction: column; }
.msg-ctx > button { border: 0; background: none; text-align: left; padding: 8px 12px; border-radius: 7px; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.msg-ctx > button:hover { background: var(--hover); }
.msg-ctx-r { display: flex; justify-content: space-between; padding: 2px 4px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.msg-ctx-r button { border: 0; background: none; font-size: 20px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.msg-ctx-r button:hover { background: var(--hover); transform: scale(1.12); }
.msg-hit { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0; background: none; padding: 7px 8px; border-radius: 7px; cursor: pointer; color: var(--text); font: inherit; font-size: 13px; }
.msg-hit:hover { background: var(--hover); }
.msg-hit-h { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.msg-hit-t { color: var(--text2); overflow-wrap: anywhere; }
.msg-hit mark { background: color-mix(in srgb, var(--warn) 40%, transparent); color: inherit; border-radius: 3px; }
.msg-flashnote { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 8px 16px; border-radius: 999px; font-size: 13.5px; z-index: 90; }
.msg-m { -webkit-touch-callout: none; }

/* ---------------------------------------------------------------- iPhone-style bubbles: others left, yours right */
.msg-thread { --bubble-in: color-mix(in srgb, var(--text) 9%, var(--panel)); --bubble-out: #1f8bff; }
.msg-b { max-width: min(560px, 78%); display: flex; flex-direction: column; align-items: flex-start; }
.msg-t { display: inline-block; padding: 7px 13px; border-radius: 18px; background: var(--bubble-in); line-height: 1.38; max-width: 100%; box-sizing: border-box; }
.msg-m.grouped .msg-t { border-top-left-radius: 6px; }
.msg-m.mine { flex-direction: row-reverse; }
.msg-m.mine .msg-av { display: none; }
.msg-m.mine .msg-b { align-items: flex-end; }
.msg-m.mine .msg-h { flex-direction: row-reverse; }
.msg-m.mine .msg-h > b { display: none; }
.msg-m.mine .msg-t { background: var(--bubble-out); color: #fff; }
.msg-m.mine.grouped .msg-t { border-top-left-radius: 18px; border-top-right-radius: 6px; }
.msg-m.mine .msg-t a { color: #fff; }
.msg-m.mine .msg-reacts, .msg-m.mine .msg-imgs { justify-content: flex-end; }
.msg-m.mine .msg-quote { border-left: 0; border-right: 3px solid var(--bubble-out); text-align: right; }
.msg-m.mine .msg-acts { right: auto; left: 8px; }
.msg-m.mine .react-bar { right: auto; left: 8px; }
.msg-t.big { background: none !important; padding: 0; color: inherit !important; }
.msg-m.alert .msg-t { background: color-mix(in srgb, var(--danger) 18%, var(--panel)); color: var(--text); }
.msg-m.alert.mine .msg-t { background: var(--danger); color: #fff; }
.msg-m:hover { background: none; }
.msg-m.pinned .msg-t { box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 70%, transparent); }
.msg.self #msg-eye { display: none; }

.tct { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; margin-bottom: 5px; border-left: 3px solid var(--prio); background: var(--panel2); border-radius: 6px; cursor: pointer; font-size: 13px; }
.tct:hover { background: var(--hover); }
.tct.done { opacity: .6; }
.tct.done b { text-decoration: line-through; }
.tct-late { color: var(--danger); font-weight: 600; }
.tct-more { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 2px 0; font: inherit; font-size: 12.5px; }
.pm-nav a.soon { opacity: .7; }
.u-mods { border: 1px solid var(--line); background: var(--panel); color: var(--text2); border-radius: 7px; padding: 3px 9px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.u-mods.custom { color: var(--accent); border-color: var(--accent); }
.u-modlist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }

.mention { font-weight: 600; color: var(--accent); }
.mention.me { background: color-mix(in srgb, var(--warn) 35%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }
.msg-m.mine .mention { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.msg-m.at-me .msg-t { box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 80%, transparent); }
.msg-at { position: absolute; bottom: calc(100% - 4px); left: 60px; z-index: 25; min-width: 240px; max-width: calc(100% - 80px); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px var(--shadow); padding: 4px; display: flex; flex-direction: column; }
.msg-at[hidden] { display: none; }
.msg-at button { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 5px 8px; border-radius: 7px; cursor: pointer; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; }
.msg-at button.on, .msg-at button:hover { background: var(--hover); }
.msg-at .muted { margin-left: auto; }

/* ---------------------------------------------------------------- reports: practice monitor */
#pm-main:has(.rp) { overflow-y: auto; }
.rp { padding: 18px 22px 40px; max-width: 1400px; }
.rp-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.rp-head h1 { margin: 0 0 2px; }
.rp-ctrl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rp-ctrl > button, .rp-import { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 9px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.rp-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.rp-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-tl { font-size: 12.5px; color: var(--text2); }
.rp-tile b { font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.rp-tile.money b { font-size: 24px; }
.rp-tile.warn b { color: var(--danger); }
.rp-sub { font-size: 12px; color: var(--text2); }
.rp-delta { font-weight: 600; }
.rp-delta.up { color: var(--ok); }
.rp-delta.down { color: var(--danger); }
.rp-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.rp-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.rp-card.wide { grid-column: 1 / -1; }
.rp-card h3 { margin: 0 0 6px; font-size: 15px; border: 0; padding: 0; }
svg.chart { width: 100%; height: auto; display: block; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-ax { fill: var(--text2); font-size: 11px; }
.ch-ax.b { fill: var(--text); font-weight: 700; }
.ch-hi { fill: color-mix(in srgb, var(--accent) 8%, transparent); }
.ch-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text2); margin-bottom: 2px; }
.ch-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: var(--c); margin-right: 5px; vertical-align: -1px; }
.ch-legend i.lg-line, .ch-legend i.lg-dash { height: 0; border-top: 2.5px solid var(--c); background: none; border-radius: 0; width: 16px; vertical-align: 3px; }
.ch-legend i.lg-dash { border-top-style: dashed; }
.rp-detail .rp-tabs { margin-bottom: 10px; }
.rp-table { overflow-x: auto; }
.rp-t { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.rp-t th { text-align: right; font-weight: 600; color: var(--text2); font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rp-t td { text-align: right; padding: 5px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); white-space: nowrap; }
.rp-t th:first-child, .rp-t td:first-child { text-align: left; }
.rp-t tr.current td { background: color-mix(in srgb, var(--accent) 9%, transparent); font-weight: 600; }
.rp-t tr.future td { color: var(--text2); }
.rp-t tfoot td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: 0; }
.rp-neg { color: var(--danger); }
.rp-pos { color: var(--ok); }
.rp-ed { width: min(1200px, 96vw); }
.rp-edscroll { overflow: auto; max-height: 60vh; }
.rp-ed input[data-m] { width: 84px; padding: 4px 6px !important; font-size: 12.5px !important; text-align: right; }
@media (max-width: 1100px) { .rp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rp-charts { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .rp { padding: 12px; } .rp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rp-tile b { font-size: 26px; } .rp-tile.money b { font-size: 19px; } }

/* ---------------------------------------------------------------- team scheduling */
.ts-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ts-top h1 { margin: 0; }
.ts-mhead, .ts-dhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ts-mhead h2, .ts-dhead h2 { margin: 0; font-size: 20px; }
.ts-mhead > button, .ts-dhead > button { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 8px; width: 32px; height: 32px; font-size: 18px; cursor: pointer; }
.ts-legend { margin-left: auto; display: flex; gap: 12px; font-size: 13px; }
.ts-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; background: var(--c); }
.ts-legend .green, .ts-cell.green { --c: #2f9e6e; } .ts-legend .yellow, .ts-cell.yellow { --c: #e0a400; } .ts-legend .red, .ts-cell.red { --c: #e5484d; }
.ts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ts-dow { font-size: 12px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; padding: 0 4px; }
.ts-cell { min-height: 86px; text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; background: var(--panel); color: var(--text); font: inherit; display: flex; flex-direction: column; gap: 2px; }
.ts-cell.out { background: none; border: 0; }
.ts-cell.none, .ts-cell.closed { opacity: .6; }
button.ts-cell { cursor: pointer; border-left: 5px solid var(--c); background: color-mix(in srgb, var(--c) 10%, var(--panel)); }
button.ts-cell:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 50%, transparent); }
.ts-ch { display: flex; align-items: center; gap: 6px; }
.ts-ch .ts-dot { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.ts-tag { font-size: 10px; background: var(--panel2); border-radius: 4px; padding: 0 5px; color: var(--text2); }
.ts-off { font-size: 12px; display: flex; align-items: center; gap: 4px; }
.ts-off .bad { color: var(--danger); font-weight: 700; }
.ts-outs { font-size: 11px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-doc { font-size: 10.5px; font-weight: 700; border-radius: 4px; padding: 0 5px; color: #fff; }
.ts-doc.J { background: #2f9e6e; } .ts-doc.B { background: #e07b2e; }
.ts-status { font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; color: #fff; }
.ts-status.green { background: #2f9e6e; } .ts-status.yellow { background: #e0a400; } .ts-status.red { background: #e5484d; }
.linkbtn { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0; font: inherit; }
.ts-offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 12px; }
.ts-ocard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ts-ocard header { display: flex; align-items: center; gap: 6px; }
.ts-ocard h3 { margin: 0 6px 0 0; font-size: 16px; border: 0; padding: 0; }
.ts-shift { font-size: 13px; }
.ts-issue { font-size: 12.5px; color: var(--danger); font-weight: 600; }
.ts-note { font-size: 12.5px; color: #b07d00; }
.ts-slot { display: flex; flex-direction: column; gap: 4px; }
.ts-sl { font-size: 11.5px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .03em; }
.ts-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ts-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.ts-chip:disabled { cursor: default; }
.ts-chip:not(:disabled):hover { border-color: var(--accent); }
.ts-chip.off { background: none; border-style: dashed; cursor: default; }
.ts-tier { font-size: 10.5px; font-weight: 700; background: var(--accent2); color: #fff; border-radius: 4px; padding: 0 5px; }
.ts-tier.none { background: var(--panel2); color: var(--text2); border: 1px dashed var(--line); }
.ts-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ts-side section { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.ts-side h3, .ts-group h3 { margin: 0 0 8px; font-size: 14px; border: 0; padding: 0; }
.ts-menu .ts-mh { font-size: 12px; font-weight: 700; color: var(--text2); padding: 4px 12px 6px; }
.ts-group { margin-bottom: 18px; }
.ts-t td, .ts-t th { text-align: left !important; }
.ts-t tr.muted td { color: var(--text2); }
.ts-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.ts-tiercard { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; display: flex; flex-direction: column; }
.ts-tiercard ul { margin: 6px 0; padding-left: 18px; color: var(--text2); flex: 1; }
.ts-pay { font-weight: 700; color: var(--ok); }
.ts-days, .ts-prefs { display: flex; gap: 10px; flex-wrap: wrap; }
.ts-prefs label { flex: 1; min-width: 140px; }
.ts-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ts-reqform { display: flex; flex-direction: column; gap: 8px; }
.ts-reqform label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text2); }
.ts-reqform input, .ts-reqform select { padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font: inherit; font-size: 14px; }
.ts-reqform .dlg-row { display: flex; gap: 8px; } .ts-reqform .dlg-row label { flex: 1; }
.ts-req { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ts-req .ts-rs { margin-left: auto; font-size: 12px; color: var(--text2); }
.ts-req.requested .ts-rs { color: #b07d00; font-weight: 600; } .ts-req.approved .ts-rs { color: var(--ok); } .ts-req.denied .ts-rs, .ts-req.cancelled { opacity: .7; }
.ts-rules li { margin-bottom: 6px; font-size: 14px; }
.ts-q { font-size: 11px; font-weight: 700; color: #b07d00; border: 1px solid currentColor; border-radius: 999px; padding: 0 6px; }
@media (max-width: 760px) { .ts-twocol, .ts-side { grid-template-columns: 1fr; } .ts-cell { min-height: 70px; padding: 4px 5px; } .ts-off { font-size: 10.5px; } }
.ts-cell.out { min-height: 0; }
.pulse-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
.pulse-banner { margin: 4px 0 14px; padding: 8px 12px; border-radius: 9px; background: color-mix(in srgb, var(--warn) 18%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 50%, var(--line)); font-size: 13.5px; }
.pulse-h { margin: 20px 0 8px; }
.dash-card.detail { border-left: 3px solid var(--warn); }
.ts-chip.open { border-style: dashed; background: none; color: var(--text2); cursor: default; }

/* ---------------------------------------------------------------- shift: day view */
.tsd-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; margin-bottom: 14px; }
.tsd-center { display: flex; align-items: center; gap: 12px; }
.tsd-date { text-align: center; }
.tsd-date h2 { margin: 0 0 4px; font-size: 22px; }
.tsd-arrow { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 8px; width: 34px; height: 34px; font-size: 20px; cursor: pointer; }
.tsd-arrow:disabled { opacity: .35; cursor: default; }
.tsd-minibox { justify-self: end; }
.tsd-closed { text-align: center; font-size: 16px; margin-top: 30px; }
.mc { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; width: 214px; }
.mc-h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.mc-h button { border: 0; background: none; color: var(--text2); font-size: 16px; cursor: pointer; padding: 0 6px; }
.mc-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; }
.mc-g > span { font-size: 10px; color: var(--text2); font-weight: 700; }
.mc-d { border: 0; background: none; font: inherit; font-size: 12px; color: var(--text); padding: 3px 0 2px; border-radius: 5px; cursor: pointer; border-bottom: 3px solid transparent; }
.mc-d:disabled { color: var(--text2); opacity: .45; cursor: default; }
.mc-d.out { visibility: hidden; }
.mc-d.green { border-bottom-color: #2f9e6e; } .mc-d.yellow { border-bottom-color: #e0a400; } .mc-d.red { border-bottom-color: #e5484d; }
.mc-d.sel { background: var(--accent2); color: #fff; font-weight: 700; }
.mc-d.today:not(.sel) { font-weight: 700; color: var(--accent); }
.mc-d:not(:disabled):not(.sel):hover { background: var(--hover); }
.tsd-grid { display: grid; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.tsd-grid > div { padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent); min-width: 0; }
.tsd-corner, .tsd-rlabel { border-left: 0 !important; }
.tsd-rlabel { font-size: 11.5px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: flex-start; padding-top: 12px !important; }
.tsd-ohead { border-top: 4px solid var(--oc); display: flex; flex-direction: column; gap: 3px; }
.tsd-oname { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.tsd-oname b { color: var(--oc); }
.tsd-cell { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; min-height: 40px; }
.tsd-cell.empty { background: color-mix(in srgb, var(--panel2) 50%, transparent); }
.tsd-cell.over, .tsd-pool.over { outline: 2px dashed var(--accent); outline-offset: -3px; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.ts-chip.drag { cursor: grab; user-select: none; }
.ts-chip.dragging { opacity: .4; }
.ts-n { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--text2); background: var(--panel); border: 1px solid var(--line); border-radius: 50%; width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; margin-left: -4px; }
.ts-chip.open { color: var(--text2); }
/* ---------------------------------------------------------------- shift: week grid */
.wk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.wk-sp { flex: 1; }
.wk-bar select { padding: 4px 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; }
.wk-roles { display: flex; gap: 8px; flex-wrap: wrap; }
.wk-people { position: relative; }
.wk-plist { max-height: 60vh; overflow-y: auto; min-width: 240px; padding: 6px 10px !important; display: flex; flex-direction: column; gap: 2px; }
.wk-plist[hidden] { display: none; }
.wk-scroll { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
table.wk { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.wk th { font-size: 12px; font-weight: 600; padding: 6px 6px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; cursor: pointer; }
.wk th:first-child { text-align: left; cursor: default; }
.wk th.today { color: var(--accent); }
.wk td { border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); padding: 3px; }
.wk-name { white-space: nowrap; padding: 4px 10px !important; display: flex; flex-direction: column; }
.wk-c { min-width: 92px; text-align: center; background: var(--oc, transparent); color: #fff; border-left: 2px solid var(--panel); line-height: 1.25; }
.wk-c b { font-size: 12.5px; }
.wk-c .wk-r { font-size: 10.5px; opacity: .95; }
.wk-c .wk-t { display: block; font-weight: 600; }
.wk-c .wk-o { display: block; font-size: 10.5px; opacity: .85; }
.wk-c.none, .wk-c.closed, .wk-c.off { background: none; color: var(--text2); }
.wk-c.off { background: repeating-linear-gradient(45deg, var(--panel2), var(--panel2) 5px, var(--panel) 5px, var(--panel) 10px); color: var(--text); font-weight: 600; }
.wk-sep { border-left: 3px solid var(--line) !important; }
.wk-h { text-align: right; white-space: nowrap; padding: 4px 10px !important; }
/* ---------------------------------------------------------------- shift: my schedule */
.my-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.my-head h2 { margin: 0; }
.my-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 10px; }
.my-wk h3 { margin: 0 0 6px; font-size: 14px; border: 0; padding: 0; }
.my-t td { text-align: left !important; white-space: normal; }
.my-t tr.past td { opacity: .5; }
.my-t tr.today td { font-weight: 700; }
.my-off { display: inline-block; background: var(--oc); color: #fff; border-radius: 6px; padding: 1px 8px; font-weight: 600; font-size: 12.5px; }
@media (max-width: 760px) { .tsd-head { grid-template-columns: 1fr; } .tsd-minibox { justify-self: center; } .tsd-head > div:first-child { display: none; } }

/* date headings: click to go to today; how far away the date is */
.date-jump { border: 0; background: none; font: inherit; color: inherit; padding: 0; cursor: pointer; border-bottom: 1px dashed transparent; }
.date-jump:hover { border-bottom-color: var(--text2); }
.date-rel { font-size: 12.5px; color: var(--text2); margin: -2px 0 4px; }
.date-rel.now { color: var(--accent); font-weight: 700; }
/* one person per line in a cell */
.tsd-cell { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }

/* split days: halves share a line */
.ts-pair { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ts-pair > .ts-n { margin-left: 0; }
.ts-slash { color: var(--text2); font-weight: 700; }
.ts-half { font-size: 10px; font-weight: 700; color: var(--accent); }
.wk-c.split { background: none; color: var(--text); padding: 2px; }
.wk-half { display: inline-flex; flex-direction: column; width: calc(50% - 2px); background: var(--oc); color: #fff; border-radius: 4px; padding: 2px 0; margin: 0 1px; font-size: 11px; vertical-align: top; }
.wk-c.split .wk-t { display: block; font-size: 11px; color: var(--text2); }

.ts-x { border: 0; background: none; color: var(--text2); cursor: pointer; padding: 0 0 0 2px; font-size: 14px; }
.tsd-pool.sick h3 { color: var(--danger); }
.ts-side { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }

.ts-draft { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 2px 0 6px; padding: 4px 10px; border-radius: 9px; background: color-mix(in srgb, var(--warn) 16%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); font-size: 13px; }
.ts-draft.unsaved { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ts-draft .primary { padding: 3px 12px; }
.mc-d.draft { position: relative; }
.mc-d.draft::after { content: ''; position: absolute; top: 1px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--warn); }
.tsd-minibox { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.tsd-cell { position: relative; }
.ts-cnt { position: absolute; top: 6px; right: 8px; font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 999px; line-height: 17px; }
.ts-cnt.under { background: #e5484d; color: #fff; }
.ts-cnt.ok { background: color-mix(in srgb, #2f9e6e 18%, var(--panel)); color: #2f9e6e; }
.ts-cnt.over { background: #f08c2e; color: #fff; }
.ts-room { font-weight: 500; opacity: .8; }

button.ts-doc { border: 0; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 700; }
button.ts-doc:hover { outline: 2px solid color-mix(in srgb, var(--text) 30%, transparent); }
.ts-addoc { border: 1px dashed var(--line); background: none; color: var(--text2); border-radius: 5px; width: 20px; height: 18px; line-height: 14px; padding: 0; cursor: pointer; font-size: 13px; }
.ts-addoc:hover { border-color: var(--accent); color: var(--accent); }
/* the date is centred vertically beside the mini calendar */
.tsd-head { align-items: center; }
.tsd-center { align-self: center; padding-bottom: 0; }
.tsd-date h2 { margin-bottom: 2px; }
.ts-cnt.tight { background: #e0a400; color: #fff; }

.ts-note-txt { font-size: 11.5px; color: var(--text2); font-style: italic; }
.wk-c { position: relative; }
.wk-note { position: absolute; top: 1px; right: 3px; font-style: normal; font-size: 10px; opacity: .9; }

/* adjust shift: a two-handle slider over the whole shift */
.sh-dlg { width: 520px; }
.sh-track { position: relative; height: 34px; margin: 10px 8px 0; }
.sh-track::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 8px; border-radius: 4px; background: var(--panel2); border: 1px solid var(--line); }
.sh-fill { position: absolute; top: 13px; height: 8px; border-radius: 4px; background: var(--accent2); }
.sh-lunch { position: absolute; top: 9px; height: 16px; background: repeating-linear-gradient(45deg, transparent, transparent 3px, color-mix(in srgb, var(--text) 18%, transparent) 3px, color-mix(in srgb, var(--text) 18%, transparent) 5px); border-radius: 3px; z-index: 1; pointer-events: none; }
.sh-r { position: absolute; left: 0; width: 100%; top: 4px; margin: 0; pointer-events: none; background: none; -webkit-appearance: none; appearance: none; height: 26px; z-index: 2; }
.sh-r::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 26px; border-radius: 5px; background: var(--panel); border: 2px solid var(--accent2); cursor: ew-resize; box-shadow: 0 1px 4px var(--shadow); }
.sh-r::-moz-range-thumb { pointer-events: auto; width: 16px; height: 24px; border-radius: 5px; background: var(--panel); border: 2px solid var(--accent2); cursor: ew-resize; }
.sh-r::-webkit-slider-runnable-track { background: none; }
.sh-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text2); margin: 0 8px; }
.sh-out { text-align: center; font-size: 14px; margin-top: 4px; }

/* the shift slider's two handles */
.sh-track { margin: 22px 14px 0 !important; }
.sh-h { position: absolute; top: 4px; width: 18px; height: 26px; margin-left: -9px; border-radius: 6px; background: var(--panel); border: 2px solid var(--accent2); box-shadow: 0 1px 5px var(--shadow); cursor: ew-resize; z-index: 3; padding: 0; touch-action: none; }
.sh-h:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.sh-h::after { content: attr(data-t); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px; font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--text); }
.sh-scale { margin: 0 14px !important; }
.tsd-date .ts-lv { margin-top: 6px; }

/* the mini calendar lives in the grid's top-left corner; the date stands alone above */
.tsd-head { grid-template-columns: 1fr auto 1fr !important; margin-bottom: 10px !important; }
.tsd-corner.tsd-minibox { padding: 6px !important; display: block; }
.tsd-corner .mc { width: auto; border: 0; padding: 0; background: none; }
.tsd-corner .mc-d { font-size: 11px; padding: 2px 0 1px; }
.tsd-corner .mc-h { font-size: 12px; }
.tsd-closedcal { display: flex; justify-content: center; margin-top: 10px; }
/* the corner calendar fills its cell: full width, rows stretched to the cell's height */
.tsd-corner.tsd-minibox { display: flex !important; flex-direction: column; align-self: stretch; }
.tsd-corner .mc { flex: 1; display: flex; flex-direction: column; min-height: 100%; }
.tsd-corner .mc-g { flex: 1; grid-auto-rows: 1fr; align-items: stretch; gap: 2px; }
.tsd-corner .mc-d { display: flex; align-items: center; justify-content: center; font-size: 12.5px; min-height: 20px; }
.tsd-corner .mc-h { font-size: 13px; margin-bottom: 6px; }
.tsd-corner .mc-g > span { font-size: 10.5px; align-self: end; }
.tsd-corner.tsd-minibox { align-items: stretch !important; justify-self: stretch; }
.tsd-corner .mc { width: 100% !important; box-sizing: border-box; }
.mc-g { grid-template-columns: repeat(5, 1fr) !important; }

/* ±1 / ±6 week jumps beside the day arrows (Shift and Schedule) */
.sc-jump { border: 1px solid var(--line); background: var(--panel); color: var(--text2); border-radius: 8px; height: 30px; padding: 0 9px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sc-jump:hover, .tsd-arrow:hover { border-color: var(--accent); color: var(--text); }
/* patient info (demographics) editor and other chart dialogs */
.pi-back { position: fixed; inset: 0; background: rgba(15, 20, 30, .45); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pi { background: var(--panel); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); width: min(860px, 100%); max-height: min(760px, 100%); display: flex; flex-direction: column; }
/* the rounded corners hold at the top too (app.css gives every <header> a square background) */
.pi { overflow: hidden; } .pi > header { border-radius: 0; }
/* Patient info: one size whichever section is open (a long section scrolls inside) */
.pi.pi-patient { height: min(640px, 100%); }
.pi header, .pi footer { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.pi footer { border-bottom: 0; border-top: 1px solid var(--line); justify-content: flex-end; }
.pi footer .muted { margin-right: auto; }
.pi header h2 { margin: 0; font-size: 18px; flex: 1; }
.pi-x { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--text2); }
.pi-body { display: flex; min-height: 0; flex: 1; }
.pi-body nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-right: 1px solid var(--line); min-width: 150px; }
.pi-body nav button { text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 7px; cursor: pointer; color: var(--text); font: inherit; }
.pi-body nav button.on { background: var(--accent2); color: #fff; font-weight: 600; }
.pi-sec, .pi-scroll { flex: 1; overflow: auto; padding: 12px 16px 18px; }
.pi-sec h3, .pi-scroll h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text2); margin: 12px 0 6px; }
.pi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; margin-bottom: 8px; }
.pi-grid label, .pi-row label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text2); }
.pi-grid label.wide { grid-column: span 2; }
.pi-grid label.chk, .pi-row label.chk { flex-direction: row; align-items: center; gap: 6px; align-self: end; padding-bottom: 6px; color: var(--text); }
.pi input:not([type=checkbox]), .pi select, .pi textarea { font: inherit; font-size: 13px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg, #fff); color: var(--text); width: 100%; box-sizing: border-box; }
.pi-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.pi-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; padding: 8px 34px 8px 8px; border: 1px solid var(--line); border-radius: 8px; position: relative; }
.pi-row > label { flex: 1 1 150px; }
.pi-row > label.chk { flex: 0 0 auto; }
.pi-row > button { position: absolute; top: 6px; right: 6px; }
.pi-row.alert > label:first-child { flex: 3 1 260px; }
.pi-row.sib { align-items: center; background: var(--panel2); }
.pi-row > button { border: 0; background: none; color: var(--text2); cursor: pointer; font-size: 14px; }
.pi.appts { width: min(760px, 100%); }
.pi.appts tr.cancelled td, .pi.appts tr.no-show td { color: var(--danger); text-decoration: line-through; }
a.btn { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13px; background: var(--panel); }
.pm-newpt { color: var(--accent) !important; font-weight: 600; border-top: 1px solid var(--line) !important; border-radius: 0 !important; margin-top: 4px; }
/* odontogram: more states, marks and appliances */
.od-tooth.state-primary .od-crown { fill: #fffdf5; }
.od-num.primary { fill: #b45309; font-weight: 700; }
.od-tooth.state-impacted .od-crown, .od-tooth.state-impacted .od-root { stroke-dasharray: 4 3; fill: #f4ecd6; }
.od-tooth.state-implant .od-crown { fill: #e5e7eb; stroke: #6b7280; }
.od-tooth.state-implant .od-root { fill: #d1d5db; stroke: #6b7280; }
.od-implant { stroke: #4b5563; stroke-width: 2.4; }
.od-tooth.state-crown .od-crown { fill: #fde68a; stroke: #b45309; }
.od-tooth.state-to-extract .od-crown { stroke: var(--danger); stroke-dasharray: 5 3; stroke-width: 2; }
.od-x.plan { stroke-dasharray: 5 4; opacity: .8; }
.od-tooth.mark-reposition .od-crown { fill: #ffedd5; }
.od-tooth.mark-loose .od-crown { fill: #fee2e2; }
.od-decay { fill: #78350f; }
.od-attach { fill: #5eead4; stroke: #0f766e; stroke-width: 1.2; }
.od-button { fill: #e5e7eb; stroke: #4b5563; stroke-width: 1.4; }
.od-loose { fill: none; stroke: var(--danger); stroke-width: 2.4; stroke-dasharray: 4 2; }
.od-repo { fill: none; stroke: #ea580c; stroke-width: 2.4; stroke-linecap: round; }
.od-bonded { fill: none; stroke: #64748b; stroke-width: 2.6; stroke-dasharray: 2 0; opacity: .85; }
.od-bonded-dot { fill: #94a3b8; }
.od-ipr path { fill: #be123c; }
.od-ipr text, .od-space text { font-size: 13px; font-weight: 700; text-anchor: middle; fill: #be123c; }
.od-space line { stroke: #2563eb; stroke-width: 2; stroke-dasharray: 3 3; }
.od-space text { fill: #2563eb; }
.od-tad circle { fill: #94a3b8; stroke: #334155; stroke-width: 1.4; }
.od-tad line { stroke: #334155; stroke-width: 2.4; }
.tooth-menu .tm-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-top: 6px; }
.tooth-menu input.tm-note { width: 100%; box-sizing: border-box; margin-top: 4px; font: inherit; font-size: 12px; padding: 3px 6px; }
.ap-tools { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.ap-tools button { font-size: 11.5px; padding: 3px 7px; }
.ap-row select { font: inherit; font-size: 12px; }
.ap-row .x { border: 0; background: none; color: var(--text2); cursor: pointer; }
/* Pulse */
.pulse { display: flex; flex-direction: column; gap: 12px; }
.pu-ctrls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.pu-offices { display: flex; gap: 4px; }
.pu-offices button { border: 1px solid var(--line); border-top: 3px solid var(--oc); background: var(--panel); border-radius: 7px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; color: var(--text2); }
.pu-offices button.on { background: var(--oc); color: #fff; border-color: var(--oc); font-weight: 600; }
.pu-demo { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.pu-demobar { display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, #8b5cf6 10%, var(--panel)); border: 1px dashed #8b5cf6; border-radius: 10px; padding: 8px 12px; flex-wrap: wrap; }
.pu-demobar input[type=range] { flex: 1; min-width: 200px; }
.pu-clocklbl { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 52px; }
.pu-top { display: grid; grid-template-columns: minmax(280px, 2fr) repeat(4, minmax(120px, 1fr)); gap: 10px; }
.pu-status { border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; color: #fff; background: #2f9e6e; }
.pu-status.yellow { background: #d39b00; } .pu-status.red { background: #d9433f; } .pu-status.idle { background: #64748b; }
.pu-big { font-size: 30px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
.pu-day { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .3); margin: 6px 0 2px; overflow: hidden; }
.pu-day i { display: block; height: 100%; background: #fff; }
.pu-count { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 1px; border-top: 4px solid #2f9e6e; }
.pu-count.yellow { border-top-color: #d39b00; } .pu-count.red { border-top-color: #d9433f; }
.pu-count b { font-size: 34px; line-height: 1; }
.pu-count span { font-weight: 600; }
.pu-count small { color: var(--text2); }
.pu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pu-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.pu-card h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--text2); display: flex; justify-content: space-between; }
.pu-line { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; flex-wrap: wrap; }
.pu-line:first-of-type { border-top: 0; }
.pu-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pu-acts { display: flex; gap: 4px; }
.pu-acts button { font-size: 11.5px; padding: 2px 8px; }
.pu-f { font-style: normal; font-size: 10px; font-weight: 800; border-radius: 50%; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; }
.pu-f.alert { background: #fee2e2; color: #b91c1c; } .pu-f.bal { background: #dcfce7; color: #15803d; } .pu-f.first { background: #fef3c7; color: #a16207; } .pu-f.unconf { background: var(--panel2); color: var(--text2); }
.pu-red { color: #d9433f; } .pu-amber { color: #b7791f; } .pu-blue, .pu-doc { color: #2563eb; } .pu-green { color: #2f9e6e; }
.pu-calm { font-size: 14px; padding: 10px 0; }
.pu-chairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.pu-chair { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; min-height: 84px; border-left: 5px solid var(--line); }
.pu-chair.busy { border-left-color: #2f9e6e; } .pu-chair.long { border-left-color: #d9433f; } .pu-chair.doc { border-left-color: #2563eb; }
.pu-ch { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text2); font-weight: 700; }
.pu-cur { font-size: 13px; }
.pu-bar { height: 6px; background: var(--panel2); border-radius: 3px; overflow: hidden; }
.pu-bar i { display: block; height: 100%; background: #2f9e6e; }
.pu-bar.over i { background: #d9433f; }
.pu-next { color: var(--text2); border-top: 1px dashed var(--line); padding-top: 4px; margin-top: auto; }
.pu-empty { text-align: center; padding: 60px 20px; }
@media (max-width: 1100px) { .pu-top { grid-template-columns: repeat(2, 1fr); } .pu-status { grid-column: span 2; } .pu-cols { grid-template-columns: 1fr; } }
/* Shift: the chair someone is on that day (set on the Schedule) */
.ts-chair { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 0 6px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); margin-left: 3px; }
.rp-switch { margin-bottom: 10px; }
.ct-amber { color: #c27c00; font-weight: 600; } .ct-ok { color: #248a3d; }
/* light bar: waiting room, ready for check-out, planning view */
.lb-lists { display: flex; flex-direction: column; gap: 3px; padding: 0 10px 8px; }
.lb-lh { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 2px; font-size: 11.5px; font-weight: 600; color: var(--text2); cursor: pointer; text-align: left; }
.lb-lh span { margin-left: auto; background: var(--panel2); border-radius: 999px; padding: 0 7px; font-size: 11px; }
.lb-wp { display: grid; grid-template-columns: 1fr auto; text-align: left; border: 0; background: var(--panel); border-radius: 10px; padding: 6px 9px; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); font-size: 12px; color: var(--text); }
.lb-wp b { font-size: 12.5px; grid-column: 1; }
.lb-wp small { grid-column: 1; color: var(--muted); font-size: 11px; }
.lb-wp:hover { box-shadow: 0 0 0 2px var(--accent); }
.lb-wp.out { cursor: default; background: color-mix(in srgb, #34c759 10%, var(--panel)); }
.lb-wp.out button { grid-column: 2; grid-row: 1 / span 2; border: 0; background: #34c759; color: #fff; border-radius: 50%; width: 24px; height: 24px; padding: 0; cursor: pointer; }
.lb-confirm { display: flex; justify-content: flex-end; gap: 6px; padding: 6px 8px 2px; }
.lb-nodoc { flex: 1; text-align: center; font-size: 11.5px; color: var(--muted); padding: 8px; border: 1px dashed var(--line); border-radius: 10px; }
.lb-plannote { margin: 0 10px 8px; font-size: 11.5px; color: var(--muted); background: var(--panel2); border-radius: 9px; padding: 6px 9px; }
.lb-chair.plan { min-height: 40px; }
/* Settings: a System-Settings-style sidebar on every settings page */
#pm-main.st-page { display: flex; overflow: hidden; }
.st-nav { width: 230px; min-width: 230px; border-right: 1px solid var(--line); background: var(--panel); padding: 18px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.st-nav h2 { font-size: 20px; margin: 0 8px 12px; }
.st-nav a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; color: var(--text); text-decoration: none; }
.st-nav a:hover { background: var(--hover); }
.st-nav a.on { background: var(--accent); color: #fff; }
.st-nav a span { display: flex; flex-direction: column; font-size: 13px; font-weight: 500; line-height: 1.2; }
.st-nav a small { font-size: 11px; color: var(--muted); font-weight: 400; }
.st-nav a.on small { color: rgba(255, 255, 255, .8); }
.st-ico { width: 26px; height: 26px; border-radius: 7px; background: var(--ic); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 14px; flex: none; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12); }
.pm-drop .st-ico { width: 20px; height: 20px; border-radius: 5px; font-size: 11px; margin-right: 8px; vertical-align: middle; }
.st-content { flex: 1; min-width: 0; overflow: auto; }
.st-content > .dash { height: auto; min-height: 100%; }

/* the pano/repo benchmark on the treatment timeline */
.prog-tick { position: absolute; top: -5px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 2px #af52de; z-index: 2; }
.prog-tick.done { background: #af52de; box-shadow: 0 0 0 2px var(--panel); }
.prog-pano { margin-left: 8px; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 1px 9px; background: rgba(175, 82, 222, .1); color: #8a3db5; }
.prog-pano.done { background: #af52de; color: #fff; }
/* contact links (js/pm/links.js): call / text / email / map, the same everywhere */
.cx { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cx-v { margin-right: 2px; }
.cx-b, .cx-l { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 500; text-decoration: none; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.cx-l { background: none; padding: 0; font-size: inherit; }
.cx-b:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.cx-l:hover { text-decoration: underline; }
.fam .cx, .fam .cx-l { margin-top: 2px; } .ap-phone { display: block; margin-top: 3px; }
/* Shift: Viewing as */
/* "Viewing as" sits at the right of the title line when there's room; when it wraps, it goes under the title, on the left */
.ts-titlebox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; flex: 1 1 100%; }
.ts-titlebox.wrapped { justify-content: flex-start; }
.ts-titlebox h1 { margin: 0; }
.ts-viewas { display: flex; align-items: center; gap: 8px; font-size: 12.5px; flex-wrap: wrap; }
.ts-va-label { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.ts-viewas select { font: inherit; font-size: 13px; font-weight: 600; padding: 3px 8px; border-radius: 8px; }
.ts-va-note { color: #a05a00; font-size: 11.5px; }
body.ts-viewing-other .ts-titlebox { background: rgba(255, 149, 0, .1); border-radius: 12px; padding: 6px 12px 8px; margin: -6px -12px 0; }
.sc-sum { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; padding: 10px; border-radius: 10px; background: var(--panel2); }
.sc-sum-big { display: flex; align-items: center; gap: 8px; }
.sc-sum-big b { font-size: 26px; line-height: 1; }
.sc-sum-big span { font-size: 12px; line-height: 1.2; }
.sc-sum-big small { color: var(--muted); }
.sc-sum-dr { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.sc-sum-dr small { color: var(--muted); }
.sc-sum-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 20%, transparent); overflow: hidden; }
.sc-sum-bar i { display: block; height: 100%; background: #34c759; }
.sc-sum-bar.ok i { background: #ff9500; } .sc-sum-bar.over i { background: #ff3b30; }
.sc-sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; font-size: 11.5px; color: var(--muted); }
.sc-sum-grid b { font-size: 15px; color: var(--text); margin-right: 4px; }

/* the day's numbers in Shift's office headers: one compact row */
.sc-sum.compact { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0 4px; padding: 8px 10px; }
.sc-sum.compact .sc-sum-big b { font-size: 22px; }
.sc-sum.compact .sc-sum-dr { flex: 1 1 130px; min-width: 120px; }
.sc-sum.compact .sc-sum-grid { grid-template-columns: repeat(4, auto); gap: 2px 12px; flex-basis: 100%; }
.sc-sum.compact .sc-sum-grid b { font-size: 14px; }
/* Settings in its own window (opened from the ⚙): the settings alone */
body.st-window { height: 100vh; overflow: hidden; }
body.st-window #pm-main.st-page { height: 100vh; }

/* ---------------------------------------------------------------- Shifts: the day's header (computer · phone) */
.tsd-jb, .tsd-jf { display: flex; gap: 12px; }
.tsd-short, .tsd-calbtn, .tsd-sh { display: none; }
.tsd-oswitch.tk-seg { display: none !important; }
.tsd-meta .ts-lv { display: block; margin: 6px auto 0; }
@media (max-width: 600px) {
  /* the title line and the tabs: tabs scroll sideways rather than being cut off */
  .ts-top { gap: 10px; margin-bottom: 10px; }
  .ts-top .tk-seg { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ts-top .tk-seg::-webkit-scrollbar { display: none; }
  .ts-top .tk-seg button { flex: none; white-space: nowrap; padding: 6px 13px; font-size: 13.5px; }
  .ts-viewas select { max-width: 62vw; }
  /* ‹ Mon, Oct 5 ›  ·  in 3 days  ·  status  ·  −6 −1  📅  +1 +6 */
  .tsd-head { display: block; margin-bottom: 10px !important; }
  .tsd-head > div:first-child { display: none; }
  .tsd-center { display: grid; grid-template-columns: 44px 1fr auto 1fr 44px; grid-template-areas: "prev date date date next" "prev rel rel rel next" "meta meta meta meta meta" "jb jb cal jf jf"; align-items: center; gap: 0; row-gap: 2px;
    background: var(--ap-solid, var(--panel)); border-radius: 14px; padding: 10px 10px 12px; box-shadow: var(--ap-shadow, 0 1px 3px rgba(0, 0, 0, .08)); }
  .tsd-date { display: contents; }
  .tsd-date h2 { grid-area: date; text-align: center; font-size: 21px; margin: 0; }
  .tsd-long { display: none; } .tsd-short { display: inline; }
  .tsd-center .date-rel { grid-area: rel; text-align: center; margin: 0; font-size: 13px; }
  .tsd-prev { grid-area: prev; } .tsd-next { grid-area: next; justify-self: end; }
  .tsd-arrow { width: 40px; height: 40px; border-radius: 50%; font-size: 22px; border: 0; background: var(--ap-fill, var(--panel2)); color: #007aff; }
  .tsd-meta { grid-area: meta; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; margin: 8px 0 10px; font-size: 12px; }
  .tsd-meta .ts-lv { display: inline-block; margin: 0; }
  .tsd-meta .ts-draft { flex-basis: 100%; }
  .tsd-dragtip { display: none; }
  .tsd-jb { grid-area: jb; justify-self: start; gap: 6px; }
  .tsd-jf { grid-area: jf; justify-self: end; gap: 6px; }
  .tsd-center .sc-jump { height: 32px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--ap-fill, var(--panel2)); color: var(--text); }
  .tsd-calbtn { grid-area: cal; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: color-mix(in srgb, #007aff 12%, transparent); color: #007aff; cursor: pointer; margin: 0 6px; }
  /* the month calendar: from the 📅 button, not the grid's corner */
  /* one office at a time: swipe left/right (snaps to each office); the row labels stay put */
  .tsd-grid { --c0: 62px; --ocol: calc(100% - var(--c0)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--c0); overscroll-behavior-x: contain; scrollbar-width: none; }
  .tsd-grid::-webkit-scrollbar { display: none; }
  .tsd-ohead { scroll-snap-align: start; }
  .tsd-rlabel, .tsd-corner { position: sticky; left: 0; z-index: 4; background: var(--ap-solid, var(--panel)); box-shadow: .5px 0 0 var(--line); }
  .tsd-rlabel { font-size: 10.5px; padding: 12px 6px 8px !important; word-break: break-word; }
  .tsd-lg { display: none; } .tsd-sh { display: inline; }
  .tsd-oswitch.tk-seg { display: flex !important; width: 100%; margin: 0 0 8px; }
  .tsd-oswitch button { flex: 1; padding: 6px 4px !important; font-size: 13px !important; }
  .tsd-oswitch button.on { color: var(--oc) !important; }
  .tsd-corner.tsd-minibox > * { display: none; }
  body.tsd-cal-open .tsd-minibox { position: fixed; top: var(--top, 120px); left: 12px; right: 12px; z-index: 80; display: block !important; padding: 12px !important;
    background: var(--ap-solid, var(--panel)); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .08); }
  body.tsd-cal-open .tsd-minibox > * { display: block; }
  body.tsd-cal-open .tsd-minibox .mc-d { font-size: 15px; min-height: 36px; }
}

/* the permanent tooth developing beyond a baby tooth (odontogram successor) */
.od-bud path { fill: url(#od-enamel); stroke: rgba(120, 100, 70, .35); stroke-width: 1.2; opacity: .9; }
.od-cmiss { fill: #ff3b30; font: 700 30px -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; text-anchor: middle; }
/* stainless steel crown on a baby tooth */
.od-tooth.state-primary .od-crown.ssc { fill: url(#od-metal); stroke: #8e96a3; stroke-width: 1.2; }
.od-tooth.state-primary .od-crown.ssc ~ .od-shine { opacity: .95; }

/* Victory Series twin brackets and tubes (odontogram) */
.od-bracket .od-pad, .od-tube .od-pad { fill: #a7afba; stroke: rgba(60, 70, 85, .5); stroke-width: .6; }
.od-wing { fill: url(#od-metal); stroke: rgba(60, 70, 85, .6); stroke-width: .7; }
.od-chan { fill: #c3c9d2; stroke: none; }
.od-slot { fill: #4b5260 !important; stroke: none !important; }
.od-funnel { fill: #6b7380; stroke: none; }
.od-idmark { fill: #8a93a0; }
.od-hookwire { fill: none; stroke: #8e96a3; stroke-width: 2.4; stroke-linecap: round; }
.od-ball { fill: url(#od-metal); stroke: rgba(60, 70, 85, .6); stroke-width: .7; }

/* teeth picked together (⌘/Ctrl-click) */
.od-tooth.sel .od-crown { stroke: #0a84ff; stroke-width: 2.6; }
.od-tooth.sel .od-root { stroke: rgba(10, 132, 255, .55); stroke-width: 1.6; }
.tooth-menu .tm-sel { display: block; font-size: 11px; color: var(--muted); margin: 2px 0 2px; max-width: 320px; }
.tooth-menu .tm-tip { font-size: 10.5px; color: var(--muted); margin-top: 8px; }

/* a missing 3rd molar: nothing drawn, its number faint */
.od-num.gone { opacity: .35; }
.od-tooth.gone8.sel rect { fill: rgba(10, 132, 255, .08); stroke: #0a84ff; stroke-width: 1.5; stroke-dasharray: 4 3; }

/* Essix, RPE and the Class II correctors (odontogram) */
.od-essix { pointer-events: none; stroke-width: 1.4; }
.od-essix.cloudy { fill: rgba(255, 255, 255, .5); stroke: rgba(160, 170, 185, .7); }
.od-essix.clear { fill: rgba(170, 215, 255, .16); stroke: rgba(90, 160, 220, .75); }
.od-rpe-cap { fill: url(#od-metal); stroke: rgba(60, 70, 85, .55); stroke-width: .8; opacity: .92; }
.od-rpe-arm { fill: none; stroke: #8e96a3; stroke-width: 2.6; stroke-dasharray: 5 3; opacity: .85; }
.od-rpe rect { fill: url(#od-metal); stroke: rgba(60, 70, 85, .7); stroke-width: 1; }
.od-rpe .hole { fill: #4b5260; }
.od-rpe path { stroke: #6b7380; stroke-width: 2; }
.od-forsus .rod { stroke: #9aa3af; stroke-width: 2.6; stroke-linecap: round; }
.od-forsus .spring { stroke: #6b7380; stroke-width: 7; stroke-dasharray: 1.6 1.4; }
.od-herbst .tube { stroke: #8e96a3; stroke-width: 7; stroke-linecap: round; }
.od-herbst .plunger { stroke: #aeb6c2; stroke-width: 3.4; stroke-linecap: round; }
.od-herbst circle { fill: url(#od-metal); stroke: rgba(60, 70, 85, .7); }
.od-llha { fill: none; stroke: #8e96a3; stroke-width: 2.4; stroke-dasharray: 6 3; }

/* wire bends: CLAW teardrop loops, sliding-mechanics hooks and tiebacks */
.od-loop { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.od-slide .post { stroke: #5856d6; stroke-width: 3.2; stroke-linecap: round; }
.od-slide .ball { fill: #5856d6; stroke: #fff; stroke-width: 1.4; }
.od-slide .tie { fill: none; stroke: #5856d6; stroke-width: 4; stroke-linecap: round; opacity: .9; }
.od-slide .tie-core { fill: none; stroke: #fff; stroke-width: 1.2; stroke-dasharray: 3 2.4; opacity: .85; }

/* MARA (crowns, tube, elbow, cam arm), TPA, Dynaflex Class III springs */
.od-mara .cap { fill: url(#od-metal); stroke: #8e96a3; stroke-width: 1.1; }
.od-mara .tube { fill: #aeb6c2; stroke: rgba(60, 70, 85, .7); stroke-width: .8; }
.od-mara .elbow { fill: none; stroke: #5f6774; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.od-mara .camarm { stroke: #5f6774; stroke-width: 3.6; stroke-linecap: round; }
.od-mara .end { fill: url(#od-metal); stroke: rgba(60, 70, 85, .7); stroke-width: .7; }
.od-tpa { fill: none; stroke: #8e96a3; stroke-width: 2.6; stroke-dasharray: 6 3; }
.od-dynaflex .core { stroke: #9aa3af; stroke-width: 1.6; }
.od-dynaflex .coil { stroke: #30b0c7; stroke-width: 6.5; stroke-dasharray: 1.6 1.4; }
.od-dynaflex .tie { fill: none; stroke: #6b7380; stroke-width: 1.6; }

/* coil springs: open (orange, spaced turns) and closed (pink, tight, with eyelets) */
.od-coil .band { stroke-width: 17; stroke-linecap: round; opacity: .22; }
.od-coil .turns { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.od-coil.open .band, .od-coil.open .turns { stroke: #ff9500; }
.od-coil.closed .band, .od-coil.closed .turns { stroke: #ff2d55; }
.od-coil .eye { fill: #fff; stroke: #ff2d55; stroke-width: 2.4; }

/* elastics: a green rubber band (ring with a lighter middle) */
.od-elastic .band { fill: none; stroke: rgba(52, 199, 89, .9); stroke-width: 4.2; stroke-linejoin: round; stroke-linecap: round; }
.od-elastic .core { fill: none; stroke: rgba(220, 255, 228, .85); stroke-width: 1.3; stroke-linejoin: round; }
.od-elastic .od-hook { fill: #248a3d; }

/* power chain: a thick elastomeric band bracket to bracket, its modules under the tie-wings (colour per chain) */
.od-chain .band, .od-chain .module { fill: var(--chain); stroke: color-mix(in srgb, var(--chain) 70%, #000); stroke-width: .5; }
.od-chain .sheen { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; stroke-linecap: round; }

/* Clarity Advanced ceramic brackets (Hybrid): translucent, tooth-coloured, low profile */
.od-bracket.ceramic .od-pad { fill: rgba(255, 252, 245, .55); stroke: rgba(160, 150, 130, .45); stroke-width: .6; }
.od-bracket.ceramic .od-wing { fill: rgba(255, 253, 248, .78); stroke: rgba(150, 140, 120, .55); stroke-width: .7; }
.od-bracket.ceramic .od-chan { fill: rgba(235, 228, 214, .7); }
.od-bracket.ceramic .od-slot { fill: rgba(170, 160, 145, .55) !important; }
.od-bracket.ceramic .od-stress { stroke: rgba(150, 140, 120, .5); stroke-width: .8; }
.od-bracket.ceramic .od-hookwire { stroke: #b9b2a3; }
.od-bracket.ceramic .od-ball { fill: #f4efe4; stroke: rgba(150, 140, 120, .6); }

.od-bonded.gold { stroke: #c9a227; opacity: .95; }

/* the treatment timeline: a cell per month (numbered), done months filled, the finish window hatched, marks for
   unplanned visits (red), the pano/repo (yellow) and x-rays (blue) */
.txt { position: relative; margin: 6px 0 4px; }
.txt-bar { position: relative; height: 24px; border-radius: 12px; background: rgba(118, 118, 128, .14); overflow: hidden; }
.txt-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #34c759, #28a745); border-radius: 12px; }
.txt-win { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(118, 118, 128, .28) 4px 6px); }
.txt-label { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; font: 700 12.5px -apple-system, BlinkMacSystemFont, sans-serif; font-variant-numeric: tabular-nums; color: var(--text); text-shadow: 0 0 3px var(--panel), 0 0 6px var(--panel); pointer-events: none; }
/* the marks: a small dot riding on the bar's top edge (hover for what and when) */
.txt { padding-top: 5px; }
.txt-mark { position: absolute; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; z-index: 4; box-shadow: 0 0 0 2px var(--panel), 0 1px 3px rgba(0, 0, 0, .25); cursor: default; transition: transform .12s; }
.txt-mark:hover { transform: scale(1.35); }
.txt-mark.red { background: #ff3b30; }
.txt-mark.yellow { background: #ffcc00; }
.txt-mark.yellow.booked { background: var(--panel); box-shadow: inset 0 0 0 2px #e6b800, 0 0 0 2px var(--panel); }
.txt-mark.blue { background: #0a84ff; }

.od-offbr { fill: rgba(255, 59, 48, .06); stroke: #ff3b30; stroke-width: 1.4; stroke-dasharray: 3 2; }

/* past the estimate: the months over in orange, a notch where the estimate ended */
.txt-over { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, #ff9f0a, #f08c00); border-radius: 0 12px 12px 0; }
.txt-est { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--panel); z-index: 2; }
.txt-bar.over .txt-fill { border-radius: 12px 0 0 12px; }

/* an unplanned / repair visit: its type in red (numbered er1, er2… apart from the planned v1, v2…) */
.v-type.er { color: #ff3b30 !important; }
/* overtime: 1–6 months past the estimate yellow, more than 6 red */
.txt-over.slight { background: linear-gradient(180deg, #ffd60a, #f5c400); }
.txt-over.way { background: linear-gradient(180deg, #ff453a, #e0342a); }
/* MARA (redrawn): tube with a blue elastomeric tie, the elbow, the lower cam arm with its ball */
.od-mara .tube { fill: url(#od-metal); stroke: rgba(60, 70, 85, .7); stroke-width: .8; }
.od-mara .tie { fill: #0a84ff; stroke: rgba(0, 60, 140, .4); stroke-width: .6; }
.od-mara .elbow { stroke-width: 3.4; stroke: #6b7380; }
.od-mara .camarm { fill: none; stroke: #6b7380; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.od-mara .ball { fill: url(#od-metal); stroke: rgba(60, 70, 85, .7); stroke-width: .8; }
.od-mara .eye { fill: none; stroke: #6b7380; stroke-width: 2; }

/* Patient info → Referral: the general dentist from Contacts */
.pi-dds { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); }
.pi-dds > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pi-dds b { font-size: 14px; } .pi-dds small { color: var(--text2); font-size: 12px; }
.pi-dds-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 12px -apple-system, sans-serif; color: #fff; background: #5e8f2f; flex: none; }
.pi-ddsref { display: flex; align-items: center; gap: 8px; margin: 10px 2px 4px; font-size: 13px; color: var(--text); }
.pi-ddsref input:disabled + * , .pi-ddsref:has(input:disabled) { opacity: .5; }
.pi-ddswarn { margin: 0 0 8px; font-size: 12px; color: #ff9f0a; }
.pi-ddsres { display: flex; flex-direction: column; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pi-ddsres button { text-align: left; border: 0; border-bottom: 1px solid var(--line); background: var(--panel) !important; color: var(--text) !important; padding: 8px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font: 13px -apple-system, sans-serif; }
.pi-ddsres button:last-child { border-bottom: 0; }
.pi-ddsres button:hover { background: var(--panel2) !important; }
.pi-ddsres small { color: var(--text2); font-size: 11.5px; }
.pi-ddsres .pi-ddsnew { color: #007aff !important; font-weight: 500; }
.pi-ddsadd { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.pi-ddsadd label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text2); }
.pi-ddsacts { display: flex; justify-content: flex-end; gap: 8px; }

/* 🔔 notifications (js/pm/notices.js): in the header on every screen, phone included */
.pm-bellbtn { position: relative; border: 0; background: none; font-size: 17px; width: 34px; height: 32px; border-radius: 8px; cursor: pointer; }
.pm-bellbtn:hover { background: var(--hover); }
.pm-bellbtn .pm-badge { position: absolute; top: -2px; right: -2px; }
.nt-panel { width: min(360px, calc(100vw - 24px)); padding: 0; max-height: 70vh; overflow: auto; }
.nt-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: .5px solid var(--line); position: sticky; top: 0; background: inherit; }
.nt-list { display: flex; flex-direction: column; }
.nt-item { display: flex; gap: 10px; align-items: flex-start; text-align: left; border: 0; background: none; padding: 10px 14px; cursor: pointer; border-bottom: .5px solid var(--line); font: inherit; color: inherit; width: 100%; }
.nt-item:hover { background: var(--hover); }
.nt-item.new { background: rgba(0, 122, 255, .06); }
.nt-item.new .nt-txt b::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #007aff; margin-right: 6px; vertical-align: 1px; }
.nt-ico { font-size: 18px; line-height: 1.2; }
.nt-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nt-txt b { font-size: 13px; font-weight: 600; }
.nt-txt small { font-size: 12px; color: var(--muted); }
.nt-at { font-size: 11px; color: var(--muted); white-space: nowrap; }
.nt-empty { padding: 16px 14px; margin: 0; }
.ts-req.flash { animation: ts-flash 2.4s ease-out 1; border-radius: 10px; }
@keyframes ts-flash { 0%, 40% { background: rgba(0, 122, 255, .16); box-shadow: 0 0 0 2px rgba(0, 122, 255, .5); } 100% { background: transparent; box-shadow: none; } }
.ts-chip.swap-over { outline: 2px dashed #ff9500; outline-offset: 2px; background: rgba(255, 149, 0, .12); }
.ts-chip.swap-over::after { content: '⇄ swap'; margin-left: 6px; font-size: 11px; color: #ff9500; font-weight: 600; }
/* Shifts ⤢ Expand: only the schedule, using the whole screen */
.ts-expand { flex: none; border: .5px solid var(--line); background: var(--panel, #fff); border-radius: 8px; width: 32px; height: 30px; font-size: 16px; cursor: pointer; color: var(--muted); }
.ts-expand:hover { color: inherit; background: var(--hover); }
body.ts-full .pm-header, body.ts-full #lightbar, body.ts-full .pm-tabbar, body.ts-full #pm-toasts { display: none !important; }
body.ts-full .pm-app { display: block !important; }
body.ts-full #pm-main { max-width: none !important; width: 100vw; margin: 0; padding: 12px 16px; box-sizing: border-box; height: 100vh; overflow: auto; }
body.ts-full #pm-main > * { max-width: none !important; }
html.app .ts-expand { display: none; }
/* Shifts → My schedule: the next shift, at the top */
.my-next { display: flex; gap: 14px; align-items: center; margin: 0 0 14px; padding: 14px 18px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, #34c759 16%, var(--ap-solid, var(--panel))), color-mix(in srgb, #007aff 12%, var(--ap-solid, var(--panel)))); box-shadow: var(--ap-shadow, 0 1px 3px rgba(0,0,0,.08)); border-left: 4px solid var(--oc); }
.my-next.none { border-left-color: transparent; }
.my-next-ico { font-size: 30px; line-height: 1; }
.my-next-k { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; }
.my-next b { font-size: 16px; }
.my-next a { color: #007aff; text-decoration: none; font-weight: 600; }
.lb-snap { border: 0; background: none; color: var(--muted); font-size: 14px; width: 26px; height: 24px; border-radius: 6px; cursor: pointer; flex: none; }
.lb-snap:hover { background: var(--hover); color: inherit; }
/* the conversation only ever scrolls up and down (a long quote or link mustn't let it slide sideways on a phone) */
.msg-thread { overflow-x: hidden; }
.msg-b { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
/* My schedule: each day on one line — dates and hours never wrap (office names shorten instead: fitOfficeNames) */
.my-t td:first-child, .my-t td:last-child { white-space: nowrap; }
.my-t .my-off { white-space: nowrap; }
@media (max-width: 760px) { .my-lad-more { display: none; } .my-t td { padding-left: 6px; padding-right: 6px; } }
/* pull to refresh (js/pm/pull-refresh.js): in the gap the content leaves as it's pulled down */
.ptr { position: fixed; left: 50%; z-index: 5; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%;
  background: var(--ap-solid, var(--panel, #fff)); box-shadow: 0 1px 6px rgba(0,0,0,.2); display: grid; place-items: center; pointer-events: none;
  opacity: 0; transform: translateY(var(--y, 0px)); }
.ptr span { font-size: 20px; color: var(--muted); transform: rotate(var(--turn, 0deg)); display: block; line-height: 1; }
.ptr.on { opacity: 1; }
.ptr.ready span { color: #007aff; }
.ptr.spin span { color: #007aff; animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
/* Settings on a phone: one column — the list, or the page with ‹ Settings (shell.js) */
.st-back { display: none; }
@media (max-width: 760px) {
  #pm-main.st-page { display: block; overflow: auto; }
  #pm-main.st-page .st-nav { display: none; width: auto; min-width: 0; border-right: 0; padding: 12px 16px calc(80px + env(safe-area-inset-bottom)); background: transparent; }
  #pm-main.st-page.st-list .st-nav { display: flex; }
  #pm-main.st-page.st-list .st-content { display: none; }
  #pm-main.st-page .st-nav h2 { font-size: 30px; margin: 4px 4px 14px; }
  #pm-main.st-page .st-nav a { padding: 12px 10px; font-size: 16px; }
  #pm-main.st-page .st-nav a span { font-size: 16px; }
  #pm-main.st-page .st-nav a.on { background: transparent; color: var(--text); }
  #pm-main.st-page .st-nav a::after { content: '›'; margin-left: auto; color: var(--muted); font-size: 20px; }
  .st-back { display: inline-block; border: 0; background: none; color: #007aff; font-size: 17px; padding: 8px 4px 4px; margin: 0 0 4px; cursor: pointer; }
  #pm-main.st-page .st-content { width: 100%; min-width: 0; padding: 0 16px calc(80px + env(safe-area-inset-bottom)); box-sizing: border-box; }
  #pm-main.st-page .st-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
}
.st-nav .st-sec { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 14px 8px 4px; }
.st-nav h2 + .st-sec { margin-top: 2px; }
@media (max-width: 760px) { #pm-main.st-page .st-nav .st-sec { font-size: 13px; margin: 22px 10px 6px; } }
/* Settings icons, Apple style: a coloured rounded square with a white symbol, the same size everywhere */
.st-ico svg { width: 68%; height: 68%; display: block; }
.st-ico { border-radius: 22%; box-shadow: none; }
.st-group { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 760px) {
  /* inset grouped, as in iPhone Settings: each section a rounded card, thin lines between rows */
  #pm-main.st-page .st-nav { gap: 0; }
  #pm-main.st-page .st-group { gap: 0; background: var(--ap-solid, var(--panel2, #2c2c2e)); border-radius: 12px; overflow: hidden; }
  #pm-main.st-page .st-group a { border-radius: 0; padding: 9px 14px; gap: 14px; position: relative; }
  #pm-main.st-page .st-group a + a::before { content: ''; position: absolute; top: 0; right: 0; left: 58px; border-top: .5px solid var(--ap-line, var(--line)); }
  #pm-main.st-page .st-ico { width: 30px; height: 30px; border-radius: 7px; }
  #pm-main.st-page .st-nav .st-sec { margin: 22px 16px 7px; }
}
/* Messages: per-chat 🔔, channel editor, the agreement */
.msg-head { position: relative; }
.msg-headtools { margin-left: auto; display: flex; gap: 4px; }
.msg-hbtn { border: 0; background: none; font-size: 16px; min-width: 32px; height: 32px; border-radius: 8px; cursor: pointer; color: var(--text); font-weight: 600; }
.msg-hbtn:hover { background: var(--hover); }
.msg-ctxh { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 12px 2px; }
.msg-ctxlink { display: block; padding: 8px 12px; font-size: 13px; color: #007aff; text-decoration: none; border-top: .5px solid var(--line); margin-top: 4px; }
.msg-dlg { background: var(--ap-solid, var(--panel)); border-radius: 16px; padding: 20px; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 60px); overflow: auto; box-sizing: border-box; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.msg-dlg h3 { margin: 0 0 12px; }
.msg-dlg label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; margin: 10px 0; }
.msg-dlg label.chd-row { flex-direction: row; align-items: flex-start; gap: 8px; }
.chd-mh { font-size: 13px; font-weight: 600; margin-top: 12px; }
.chd-mem { max-height: 240px; overflow: auto; border: .5px solid var(--line); border-radius: 10px; padding: 4px 10px; margin-top: 6px; }
.chd-mem label { flex-direction: row; align-items: center; gap: 8px; margin: 6px 0; }
.chd-guest { font-size: 11px; background: rgba(255,149,0,.18); color: #ff9500; border-radius: 6px; padding: 0 6px; }
.msg-dlgb { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.msg-modal.agree, .msg-modal.chdlg { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 300; }
.agree-dlg ul { padding-left: 18px; margin: 8px 0 14px; line-height: 1.45; font-size: 14px; }
.agree-dlg li { margin: 6px 0; }
.agree-ico { font-size: 30px; }
body .msg-modal .agree-dlg h3 { font-size: 22px !important; font-weight: 700 !important; color: var(--text) !important; margin: 6px 0 4px !important; text-transform: none !important; letter-spacing: 0 !important; }
/* Shifts → My schedule: add to calendar */
.my-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-add { margin-left: auto; border: .5px solid var(--line); background: var(--panel); color: #007aff; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.msg-modal.cal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 300; }
.cal-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.cal-go { display: inline-block; padding: 9px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 14px; border: .5px solid var(--line); color: #007aff; }
.cal-go.primary { background: #007aff; color: #fff; border-color: #007aff; }
.cal-link { display: flex; gap: 6px; }
.cal-link input { flex: 1; min-width: 0; font: 12px ui-monospace, monospace; padding: 6px 8px; border-radius: 8px; }
.msg-hbtn#msg-bell { font-size: 19px; font-weight: 500; }
.msg-hbtn#msg-bell.off { opacity: .4; text-decoration: line-through; }   /* muted / nothing: the same @, faded and struck */
body .msg-modal .msg-dlg h3 { font-size: 20px !important; font-weight: 700 !important; color: var(--text) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 0 8px !important; }
/* Messages: press and hold a chat, drag it within its section */
.msg-ch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.msg-sec.sorting .msg-ch { position: relative; }
.msg-sec.sorting .msg-ch.lifted { transition: box-shadow .2s; z-index: 5; box-shadow: 0 8px 24px rgba(0,0,0,.35); background: var(--ap-solid, var(--panel)); border-radius: 12px; }
.msg-sec.sorting .msg-ch:not(.lifted) { transition: transform .2s ease; }
.msg-sec.still .msg-ch, .msg-sec.still .msg-ch.lifted { transition: none !important; }
.msg-sec:not(.sorting) .msg-ch { transition: transform .22s cubic-bezier(.2,.8,.2,1); }