/* Codavi — Apple-style look for every practice-management page (macOS / iPadOS feel).
   shell.js loads this and puts "ap" on <body>. It works mostly by re-defining the app's colour tokens (so every page
   picks them up), then refines the shared pieces: frosted header, segmented controls, buttons, fields, cards, tables,
   dialogs and scroll bars. The Schedule adds its own details in schedule-apple.css.
   To go back: remove the two lines in js/pm/shell.js marked "Apple look". */
body.ap {
  color-scheme: light;
  --ap-blue: #007aff; --ap-green: #34c759; --ap-orange: #ff9500; --ap-red: #ff3b30; --ap-yellow: #ffcc00; --ap-purple: #af52de; --ap-teal: #30b0c7;
  --ap-bg: #f5f5f7; --ap-panel: rgba(255, 255, 255, .78); --ap-solid: #ffffff; --ap-line: rgba(60, 60, 67, .14); --ap-line2: rgba(60, 60, 67, .07);
  --ap-text: #1d1d1f; --ap-text2: #6e6e73; --ap-text3: #aeaeb2; --ap-fill: rgba(118, 118, 128, .12); --ap-fill2: rgba(118, 118, 128, .2);
  --ap-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06); --ap-shadow-lg: 0 24px 70px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .08);
  /* the app's own tokens, Apple-style */
  --bg: var(--ap-bg); --panel: var(--ap-solid); --panel2: #f2f2f7; --line: var(--ap-line); --text: var(--ap-text); --muted: #8e8e93; --text2: #515154;
  --brand: var(--ap-text); --input: #ffffff; --hover: var(--ap-fill); --hover-line: var(--ap-fill2); --float: rgba(255, 255, 255, .85); --shadow: rgba(0, 0, 0, .14);
  --overlay: rgba(0, 0, 0, .25); --accent: var(--ap-blue); --accent2: var(--ap-blue); --danger: var(--ap-red); --ok: #248a3d; --warn: #c27c00;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: -.01em; background: var(--ap-bg);
}
@media (prefers-color-scheme: dark) {
  body.ap:not([data-theme="light"]) {
    color-scheme: dark;
    --ap-blue: #0a84ff; --ap-green: #30d158; --ap-orange: #ff9f0a; --ap-red: #ff453a;
    --ap-bg: #1c1c1e; --ap-panel: rgba(44, 44, 46, .72); --ap-solid: #2c2c2e; --ap-line: rgba(84, 84, 88, .6); --ap-line2: rgba(84, 84, 88, .3);
    --ap-text: #f5f5f7; --ap-text2: #a1a1a6; --ap-text3: #636366; --ap-fill: rgba(118, 118, 128, .24); --ap-fill2: rgba(118, 118, 128, .34);
    --ap-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    --panel2: #3a3a3c; --muted: #8e8e93; --text2: #c7c7cc; --input: #1c1c1e; --float: rgba(44, 44, 46, .88); --ok: #30d158; --warn: #ff9f0a;
  }
}
body.ap #pm-main { background: var(--ap-bg); }

/* ---------- header: frosted bar, pill navigation */
body.ap > header, body.ap .pm-header { background: var(--ap-panel); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--ap-line); position: relative; z-index: 20; }
body.ap .brand b { color: var(--ap-text); font-weight: 700; letter-spacing: -.02em; }
body.ap .pm-nav a, body.ap .pm-navbtn { color: var(--ap-text2); border-radius: 8px; padding: 5px 11px; font-weight: 500; border: 0; background: transparent; font-size: 13px; }
body.ap .pm-nav a:hover, body.ap .pm-navbtn:hover { background: var(--ap-fill); color: var(--ap-text); }
body.ap .pm-nav a.on, body.ap .pm-navbtn.on { background: var(--ap-fill); color: var(--ap-text); box-shadow: none; font-weight: 600; }
body.ap .pm-proto { border-radius: 999px; }
body.ap .pm-drop { background: var(--float); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); border: .5px solid var(--ap-line); border-radius: 12px; box-shadow: var(--ap-shadow-lg); }

/* ---------- controls */
:where(body.ap) button { border: 0; background: var(--ap-fill); color: var(--ap-text); border-radius: 8px; font-weight: 500; transition: background .15s, transform .08s, box-shadow .15s; }
:where(body.ap) button:hover { background: var(--ap-fill2); border-color: transparent; }
:where(body.ap) button:active:not(:disabled) { transform: scale(.97); }
:where(body.ap) button.primary { background: var(--ap-blue); color: #fff; border: 0; }
:where(body.ap) button.primary:hover { background: color-mix(in srgb, var(--ap-blue) 88%, #000); }
:where(body.ap) button.on:not(.tk-seg button):not(.seg button) { background: var(--ap-blue); color: #fff; }
body.ap button.danger { color: var(--ap-red); }
body.ap button.linkbtn, body.ap .linkbtn { background: none; color: var(--ap-blue); padding: 0; }
body.ap a { color: var(--ap-blue); }
body.ap a.btn { border: 0; background: var(--ap-fill); border-radius: 8px; color: var(--ap-text); font-weight: 500; }
:where(body.ap) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
  border: .5px solid var(--ap-line); border-radius: 8px; background: var(--input); color: var(--ap-text); font-family: inherit; }
body.ap input:focus, body.ap select:focus, body.ap textarea:focus { outline: none; border-color: var(--ap-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-blue) 28%, transparent); }
body.ap input[type=checkbox], body.ap input[type=radio], body.ap input[type=range] { accent-color: var(--ap-blue); }
/* segmented controls */
body.ap .tk-seg, body.ap .seg { background: var(--ap-fill); border-radius: 9px; padding: 2px; display: inline-flex; gap: 0; border: 0; }
body.ap .tk-seg button, body.ap .seg button { border: 0 !important; background: transparent; color: var(--ap-text); font-size: 12.5px; font-weight: 500; padding: 4px 12px; border-radius: 7px; }
body.ap .tk-seg button.on, body.ap .seg button.on { background: var(--ap-solid); color: var(--ap-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }
body.ap .u-mods { border: 0; background: var(--ap-fill); border-radius: 8px; }

/* ---------- type */
body.ap h1 { font-weight: 700; letter-spacing: -.025em; }
body.ap h2 { font-weight: 600; letter-spacing: -.02em; }
body.ap h3 { border-top: 0; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--ap-text2); }
body.ap .muted { color: var(--ap-text2); }

/* ---------- cards: white, rounded, soft shadow, no outline */
body.ap .dash-card, body.ap .rp-card, body.ap .rp-tile, body.ap .fin-card, body.ap .fin-tile, body.ap .fin-con, body.ap .fin-find,
body.ap .pu-card, body.ap .pu-count, body.ap .tk-card, body.ap .tc-box-card, body.ap .ss fieldset, body.ap .u-card, body.ap .mc {
  border: 0; border-radius: 14px; background: var(--ap-solid); box-shadow: var(--ap-shadow); }
body.ap .fin-tile, body.ap .pu-count { border-top: 0; position: relative; overflow: hidden; }
body.ap .fin-tile::before, body.ap .pu-count::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ap-blue); }
body.ap .fin-tile.warn::before, body.ap .pu-count.red::before { background: var(--ap-red); }
body.ap .fin-tile.ok::before, body.ap .pu-count::before { background: var(--ap-green); }
body.ap .pu-count.yellow::before { background: var(--ap-orange); }
body.ap .fin-card h3, body.ap .pu-card h3, body.ap .rp-card h3 { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ap-text); }
body.ap .pu-status { border-radius: 18px; background: var(--ap-green); box-shadow: 0 8px 24px color-mix(in srgb, var(--ap-green) 30%, transparent); }
body.ap .pu-status.yellow { background: var(--ap-orange); box-shadow: 0 8px 24px color-mix(in srgb, var(--ap-orange) 30%, transparent); }
body.ap .pu-status.red { background: var(--ap-red); box-shadow: 0 8px 24px color-mix(in srgb, var(--ap-red) 30%, transparent); }
body.ap .pu-chair { border: 0; background: var(--ap-bg); border-radius: 12px; }
body.ap .pu-demobar { border-radius: 14px; border: 0; background: color-mix(in srgb, var(--ap-purple) 10%, var(--ap-solid)); box-shadow: var(--ap-shadow); }
body.ap .pu-offices button { border: 0; border-radius: 8px; background: var(--ap-fill); }
body.ap .pu-offices button.on { background: var(--oc); color: #fff; }

/* ---------- tables: hairlines, quiet headers */
body.ap .u-table { border-collapse: separate; border-spacing: 0; background: var(--ap-solid); border-radius: 14px; box-shadow: var(--ap-shadow); overflow: hidden; border: 0; }
body.ap .u-table th { background: transparent; color: var(--ap-text2); font-weight: 600; font-size: 11.5px; text-transform: none; letter-spacing: 0; border-bottom: .5px solid var(--ap-line); }
body.ap .u-table td { border-bottom: .5px solid var(--ap-line2); }
body.ap .u-table tr:last-child td { border-bottom: 0; }

/* ---------- pills, flags */
body.ap .pill, body.ap .flag { border-radius: 999px; }
body.ap .flag.danger { background: color-mix(in srgb, var(--ap-red) 14%, transparent); color: var(--ap-red); }
body.ap .flag.info { background: color-mix(in srgb, var(--ap-blue) 13%, transparent); color: var(--ap-blue); }

/* ---------- dialogs and menus: big radius, frosted, deep shadow */
body.ap .pi-back { background: rgba(0, 0, 0, .22); backdrop-filter: blur(3px); }
body.ap .pi { border-radius: 18px; box-shadow: var(--ap-shadow-lg); background: var(--ap-solid); }
body.ap .pi header, body.ap .pi footer { border-color: var(--ap-line); }
body.ap .pi-body nav button.on { background: var(--ap-blue); }
body.ap .tooth-menu, body.ap .lb-menu, body.ap .ctx-menu, body.ap .float-win { border-radius: 14px; border: .5px solid var(--ap-line); box-shadow: var(--ap-shadow-lg); background: var(--float); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); }

/* ---------- side panels: macOS source-list feel */
body.ap .tc-head { background: var(--ap-panel); backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid var(--ap-line); }
body.ap .tc-left { background: var(--ap-panel); border-right: .5px solid var(--ap-line); }
body.ap .tc-box { border-bottom: .5px solid var(--ap-line); }
body.ap .tc-photo { box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
body.ap .visit { border-radius: 12px; border: 0; box-shadow: var(--ap-shadow); background: var(--ap-solid); }
body.ap .pin { border-radius: 10px; }

/* ---------- thin overlay-style scroll bars everywhere */
body.ap ::-webkit-scrollbar { width: 9px; height: 9px; }
body.ap ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .2); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
body.ap ::-webkit-scrollbar-track { background: transparent; }
@media (prefers-color-scheme: dark) { body.ap ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); background-clip: padding-box; } }

/* list-style buttons stay flat (Messages channels, icon buttons) */
body.ap .msg-ch { background: transparent; border-radius: 8px; }
body.ap .msg-ch:hover { background: var(--ap-fill); }
body.ap .msg-ch.on { background: var(--ap-blue); color: #fff; }
body.ap .msg-tool, body.ap .pm-iconbtn, body.ap .pm-gear, body.ap .msg-eye, body.ap .pm-userbtn { background: transparent; }
body.ap .msg-tool:hover, body.ap .pm-iconbtn:hover, body.ap .pm-gear:hover, body.ap .msg-eye:hover, body.ap .pm-userbtn:hover { background: var(--ap-fill); }

/* ---------- breathing room: forms and dialogs */
body.ap .pi header { padding: 16px 22px; }
body.ap .pi footer { padding: 14px 22px; gap: 12px; }
body.ap .pi-sec, body.ap .pi-scroll { padding: 18px 22px 22px; }
body.ap .pi-grid { gap: 16px 18px; margin-bottom: 14px; }
body.ap .pi-grid label, body.ap .pi-row label { gap: 6px; }
body.ap .pi-sec h3, body.ap .pi-scroll h3 { margin: 18px 0 10px; }
body.ap .pi-rows { gap: 12px; }
body.ap .pi-row { padding: 12px 40px 12px 12px; gap: 12px 14px; }
body.ap .pi input:not([type=checkbox]), body.ap .pi select, body.ap .pi textarea { padding: 7px 10px; }

/* ---------- the light bar: frosted sidebar, widget-style chair cards */
body.ap #lightbar { background: var(--ap-panel); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); border-left: .5px solid var(--ap-line); width: 238px; min-width: 238px; }
body.ap #lightbar.collapsed { width: 58px; min-width: 58px; }
body.ap .lb-head { padding: 14px 10px 6px 14px; align-items: center; }
body.ap .lb-head b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
body.ap .lb-qcount { font-size: 11.5px; color: var(--ap-text2); }
body.ap .lb-collapse, body.ap .lb-expand { width: 24px; height: 24px; border-radius: 50%; background: var(--ap-fill); color: var(--ap-text2); font-size: 14px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
body.ap .lb-cc { margin: 2px 10px 8px; border: 0; border-radius: 10px; background: var(--ap-fill); padding: 6px 10px; }
body.ap .lb-cc.none { background: transparent; border: 1px dashed var(--ap-line); }
/* doctors: two soft widgets with a coloured dot */
body.ap .lb-docs { gap: 8px; padding: 0 10px 10px; }
body.ap .lb-doc { border-left: 0; border-radius: 12px; padding: 8px 9px 8px; background: color-mix(in srgb, var(--d) 13%, var(--ap-solid)); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); gap: 2px; color: var(--ap-text); }
body.ap .lb-doc-name { display: flex; align-items: center; gap: 5px; font-size: 12.5px; }
body.ap .lb-doc-name::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--d); }
body.ap .lb-doc-at { color: var(--ap-text2); font-size: 11px; }
body.ap .lb-doc-next { border-radius: 999px; padding: 2px 8px; margin-top: 4px; font-weight: 600; background: var(--d); }
body.ap .lb-doc-next:disabled { background: var(--ap-fill); color: var(--ap-text3); }
body.ap .lb-doc.out { background: var(--ap-fill); }
body.ap .lb-doc.out .lb-doc-name::before { background: var(--ap-text3); }
/* chairs */
body.ap .lb-body { padding: 0 10px 12px; gap: 7px; }
body.ap .lb-group { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; color: var(--ap-text2); margin: 10px 4px 2px; }
body.ap .lb-chair { border: 0; border-radius: 14px; padding: 7px 10px 14px 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 14px rgba(0, 0, 0, .05); }
body.ap .lb-chair::before { left: 5px; top: 8px; bottom: 8px; width: 3.5px; border-radius: 2px; }
body.ap .lb-chair:not(.empty):hover { filter: none; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 8px 20px rgba(0, 0, 0, .08); }
body.ap .lb-chair { transition: transform .15s, box-shadow .15s; }
body.ap .lb-chair.empty { border: 0; background: var(--ap-fill); box-shadow: none; padding: 0 12px; min-height: 44px; }
body.ap .lb-chair.empty:hover { background: var(--ap-fill2); color: var(--ap-text); }
body.ap .lb-open { font-size: 11.5px; font-weight: 500; color: var(--ap-text3); }
body.ap .lb-num { font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .6; }
body.ap .lb-tech { border-radius: 999px; padding: 0 7px; font-size: 10px; font-weight: 700; background: rgba(0, 0, 0, .07); opacity: 1; }
body.ap .lb-tech.none { border: 0; background: rgba(0, 0, 0, .05); opacity: .55; font-weight: 500; }
body.ap .lb-chair.empty .lb-tech { background: var(--ap-solid); }
body.ap .lb-time { font-weight: 600; opacity: .55; }
body.ap .lb-name { font-weight: 650; letter-spacing: -.02em; }
body.ap .lb-status { opacity: .75; font-weight: 500; }
body.ap .lb-chair.st-light .lb-status { font-weight: 700; opacity: .95; }
body.ap .lb-bigq { color: rgba(0, 0, 0, .14); font-weight: 800; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; letter-spacing: -.06em; }
body.ap .lb-bigq.doc { color: rgba(0, 0, 0, .2); }
body.ap .lb-chair.mine { box-shadow: 0 0 0 2.5px var(--ap-blue), 0 4px 14px rgba(0, 122, 255, .18); }
/* the appointment progress: a thin rounded track inside the card */
body.ap .lb-chair .lb-tl { left: 14px; right: 10px; bottom: 6px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .08); overflow: visible; }
body.ap .lb-tl-fill { border-radius: 2px; }
body.ap .lb-tl-dr { top: -2px; bottom: -2px; border: 0; border-radius: 3px; background: rgba(0, 0, 0, .22); }
body.ap .lb-tl-dr.due { background: var(--ap-red); }
/* collapsed: round widgets */
body.ap .lb-minis { gap: 8px; }
body.ap .lb-dot { border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); width: 38px; height: 38px; font-weight: 700; }
body.ap .lb-dot.empty { box-shadow: none; background: var(--ap-fill); border: 0; }
body.ap .lb-mini-sep { font-weight: 600; letter-spacing: 0; }
/* the menu and the sign-in chair picker */
body.ap .lb-menu { padding: 8px; width: 262px; }
body.ap .lb-menu > button { border-radius: 8px; padding: 7px 9px; }
body.ap .lb-mh { font-size: 14px; letter-spacing: -.01em; }
body.ap .lb-msub { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11.5px; color: var(--ap-text2); }
body.ap .lb-lights button { border: 0; border-radius: 999px; padding: 5px 10px; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .1); }
body.ap .lb-lights button.on { outline: 0; box-shadow: 0 0 0 2px var(--ap-blue); }
body.ap .lb-prio button { background: var(--ap-fill); }
body.ap .lb-prio button.on { background: var(--ap-text); color: var(--ap-solid); }
body.ap .lb-techs { gap: 5px; }
body.ap .lb-techs button { border-radius: 8px; background: var(--ap-fill); }
body.ap .lb-techs button.on { background: var(--ap-blue); color: #fff; }
body.ap .lb-pick { background: rgba(0, 0, 0, .25); backdrop-filter: blur(4px); }
body.ap .lb-pick-card { border: 0; border-radius: 20px; padding: 26px 28px; box-shadow: var(--ap-shadow-lg); }
body.ap .lb-pick-grid button { border-radius: 12px; background: var(--ap-fill); border: 0; }
body.ap .lb-pick-grid button.usual { box-shadow: 0 0 0 2px var(--ap-blue); }
body.ap .st-doctor .lb-tl-dr { background: rgba(0, 0, 0, .22); border: 0; }
/* settings */
body.ap .st-nav { background: var(--ap-panel); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-right: .5px solid var(--ap-line); }
body.ap .st-nav a.on { background: var(--ap-blue); }
body.ap .st-content { background: var(--ap-bg); }
body.ap .st-content .u-table { margin-top: 6px; }
body.ap .users-head h1, body.ap .ss h1 { font-size: 26px; }

/* ================================================================ native feel: floating windows, Messages, Tasks */
/* a Mac window */
body.ap .pm-float { border: .5px solid rgba(0, 0, 0, .18); border-radius: 14px; overflow: hidden; background: var(--ap-solid);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .06); }
body.ap .pf-bar { position: relative; height: 38px; padding: 0 12px; display: flex; align-items: center; gap: 0; border-bottom: .5px solid var(--ap-line);
  background: var(--ap-panel); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); cursor: grab; }
body.ap .pf-title { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; font-size: 13px; font-weight: 600; color: var(--ap-text); }
body.ap .pf-lights { display: flex; gap: 8px; position: relative; z-index: 1; }
body.ap .pf-bar .pf-l { width: 12px; height: 12px; border-radius: 50%; padding: 0; border: .5px solid rgba(0, 0, 0, .15); display: inline-flex; align-items: center; justify-content: center; }
body.ap .pf-l i { font-style: normal; font-size: 9px; font-weight: 800; color: rgba(0, 0, 0, .55); opacity: 0; line-height: 1; }
body.ap .pf-lights:hover .pf-l i { opacity: 1; }
body.ap .pf-bar .pf-l.close { background: #ff5f57; } body.ap .pf-bar .pf-l.min { background: #febc2e; } body.ap .pf-bar .pf-l.pop { background: #28c840; }
body.ap .pf-bar .pf-l:hover { filter: brightness(.95); }
body.ap .pm-float.min { border-radius: 12px; }
body.ap .pf-grip { width: 18px; height: 18px; }

/* Messages, iMessage-style */
body.ap .msg-side { background: var(--ap-panel); backdrop-filter: saturate(180%) blur(20px); border-right: .5px solid var(--ap-line); }
body.ap .msg-search input { border: 0; background: var(--ap-fill); border-radius: 10px; padding: 7px 12px; }
body.ap .msg-sech { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ap-text2); }
body.ap .msg-ch { border-radius: 10px; padding: 8px 10px; position: relative; }
body.ap .msg-ch.on { background: var(--ap-blue); color: #fff; box-shadow: none; }
body.ap .msg-ch.on .msg-chl, body.ap .msg-ch.on .hash, body.ap .msg-ch.on svg.lock { color: rgba(255, 255, 255, .85); }
body.ap .msg-ch.unread:not(.on)::before { content: ''; position: absolute; left: -2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--ap-blue); }
body.ap .msg-badge { background: var(--ap-blue); }
body.ap .msg-head { background: var(--ap-panel); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid var(--ap-line); justify-content: center; }
body.ap .msg-head h2 { font-size: 15px; font-weight: 600; }
body.ap .msg-thread { --bubble-in: #e9e9eb; --bubble-out: #0b84ff; background: var(--ap-solid); }
@media (prefers-color-scheme: dark) { body.ap .msg-thread { --bubble-in: #3a3a3c; } }
body.ap .msg-t { border-radius: 19px; padding: 7px 13px; font-size: 14.5px; }
body.ap .msg-m:hover { background: transparent; }
body.ap .msg-day span { background: none; color: var(--ap-text2); font-size: 11px; font-weight: 600; }
body.ap .msg-compose { border-top: 0; background: var(--ap-solid); padding: 8px 12px 12px; }
body.ap .msg-input textarea { border-radius: 19px; border: .5px solid var(--ap-line); background: var(--ap-solid); padding: 8px 40px 8px 14px; min-height: 36px; }
body.ap .msg-tool { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--ap-fill); color: var(--ap-text2); }
body.ap #msg-send { width: 34px; height: 34px; min-width: 34px; padding: 0; border-radius: 50%; font-size: 0; background: var(--ap-blue); position: relative; }
body.ap #msg-send::before { content: '↑'; font-size: 18px; font-weight: 700; color: #fff; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
body.ap .msg-acts { border: 0; border-radius: 12px; box-shadow: var(--ap-shadow-lg); background: var(--float); backdrop-filter: blur(20px); }
body.ap .msg-react { border: 0; background: var(--ap-fill); }
body.ap .msg-av { background: linear-gradient(160deg, #8e8e93, #636366); }

/* Tasks, Reminders-style: round check circles in an inset list */
body.ap .tk-list { gap: 0; background: var(--ap-solid); border-radius: 14px; box-shadow: var(--ap-shadow); padding: 4px 0; flex: 0 1 auto; margin-bottom: 14px; overflow: auto; }
body.ap .tk-row { border: 0; border-radius: 0; background: transparent; padding: 10px 14px 10px 12px; border-bottom: .5px solid var(--ap-line2); margin-left: 0; align-items: flex-start; }
body.ap .tk-row:last-child { border-bottom: 0; }
body.ap .tk-row:hover { background: var(--ap-fill); }
body.ap .tk-done { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--prio) 70%, #c7c7cc); margin: 0; position: relative; background: transparent; transition: background .15s; }
body.ap .tk-done:checked { background: var(--prio); border-color: var(--prio); }
body.ap .tk-done:checked::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; }
body.ap .tk-row.done { opacity: .5; }
body.ap .tk-row.done .tk-t b { text-decoration: none; }
body.ap .tk-t b { font-weight: 500; font-size: 14.5px; }
body.ap .tk-prio { text-transform: none; letter-spacing: 0; font-size: 12px; }
body.ap .tk-type { background: none; padding: 0; color: var(--ap-text2); }
body.ap .tk-types button { border: 0; background: var(--ap-fill); padding: 4px 12px; }
body.ap .tk-types button.on { background: var(--ap-blue); }

/* ================================================================ the phone app (iPhone-size screens) */
.pm-tabbar { display: none; }
/* phone & tablet: html.app (shell.js) — on a phone or iPad, in Settings → Phone preview, or any window under 760 px */
  html.app body.ap { -webkit-tap-highlight-color: transparent; }
  html.app body.ap .pm-header { padding-top: env(safe-area-inset-top); height: auto; min-height: 44px; }
  html.app body.ap .pm-nav, html.app body.ap .pm-iconbtn, html.app body.ap .pm-office, html.app body.ap .pm-proto { display: none !important; }
  html.app body.ap .pm-app { padding-bottom: calc(52px + env(safe-area-inset-bottom)); box-sizing: border-box; }
  /* the tab bar, as on iPhone */
  html.app body.ap .pm-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: calc(50px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--ap-panel); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); border-top: .5px solid var(--ap-line); }
  html.app .pm-tabbar a, html.app .pm-tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: #8e8e93; font-size: 10px; font-weight: 500; border: 0 !important; background: none !important; padding: 0 !important; position: relative; }
  html.app .pm-tabbar .ti { font-size: 22px; line-height: 1; filter: grayscale(1) opacity(.75); }
  html.app .pm-tabbar .on { color: var(--ap-blue); }
  html.app .pm-tabbar .on .ti { filter: none; }
  html.app .pm-tabbar .tb-badge { position: absolute; top: 3px; left: calc(50% + 6px); background: #ff3b30; color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; min-width: 16px; height: 16px; padding: 0 4px; display: flex; align-items: center; justify-content: center; }
  html.app .pm-more { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .25); display: flex; align-items: flex-end; }
  html.app .pm-more-sheet { width: 100%; background: var(--ap-bg); border-radius: 14px 14px 0 0; padding: 8px 12px calc(20px + env(safe-area-inset-bottom)); }
  html.app .pm-more-sheet .grab { width: 36px; height: 5px; border-radius: 3px; background: #c7c7cc; margin: 2px auto 10px; }
  html.app .pm-more-sheet a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: var(--ap-solid); color: var(--ap-text); text-decoration: none; font-size: 16px; border-bottom: .5px solid var(--ap-line2); }
  html.app .pm-more-sheet a:first-of-type { border-radius: 12px 12px 0 0; } html.app .pm-more-sheet a:last-of-type { border-radius: 0 0 12px 12px; border-bottom: 0; }
  /* big, comfortable touch targets and iOS type sizes */
  html.app body.ap .msg-ch { padding: 12px 12px; }
  html.app body.ap .msg-ch .msg-chn { font-size: 16px; }
  html.app body.ap .msg-chl { font-size: 14px; }
  html.app body.ap .msg-t { font-size: 16px; }
  html.app body.ap .msg-input textarea { font-size: 16px; }   /* 16px: iPhone doesn't zoom in while typing */
  html.app body.ap .msg-head { min-height: 44px; }
  html.app body.ap .msg-back { font-size: 30px; color: var(--ap-blue); position: absolute; left: 8px; }
  html.app body.ap .msg-side::before { content: 'Messages'; display: block; font-size: 32px; font-weight: 700; letter-spacing: -.02em; padding: 8px 16px 2px; }
  html.app body.ap .tk { padding: 6px 12px 0; }
  html.app body.ap .tk-row { padding: 13px 14px 13px 12px; }
  html.app body.ap .tk-t b { font-size: 16px; }
  html.app body.ap input, html.app body.ap select, html.app body.ap textarea { font-size: 16px; }

/* the unfolded Duo and iPads: Messages with the chats beside the open chat */
@media (min-width: 601px) { html.app .msg-side { width: clamp(240px, 36%, 340px); } }
/* a challenging patient: an orange heads-up flag */
.flag.warn, body.ap .flag.warn { background: color-mix(in srgb, #ff9500 16%, transparent); color: #c25e00; }
/* Settings sidebar: just the names, like System Settings */
body.ap .st-nav a { padding: 5px 8px; font-size: 13.5px; }
body.ap .st-nav a:not(.on) { color: var(--ap-text); }

/* ---------------------------------------------------------------- sign in: the Jorgensen Orthodontics logo, password, Face ID / Touch ID */
body.login.ap { background: radial-gradient(circle at 50% 0%, color-mix(in srgb, #7aa83a 12%, var(--ap-bg)), var(--ap-bg) 60%); min-height: 100dvh; }
body.ap .login-card { border: 0; border-radius: 20px; padding: 26px 26px 18px; gap: 12px; background: var(--ap-solid); box-shadow: 0 20px 60px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .05); }
.login-brand { display: flex; justify-content: center; margin: 0 0 6px; }
/* the logo file has wide white margins: show just the artwork (and on white, even in dark mode) */
.login-jo { width: 280px; max-width: 100%; aspect-ratio: 1800 / 870; overflow: hidden; border-radius: 12px; background: #fff; }
.login-jo img { display: block; width: 111.1%; margin: -6.1% 0 0 -5.56%; }
@media (prefers-color-scheme: dark) { .login-jo { padding: 6px 10px; box-sizing: content-box; } }
body.ap .login-field { font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ap-text2); }
body.ap .login-field select, body.ap .login-field input { font-size: 16px; padding: 11px 12px; border-radius: 11px; border: 0; background: var(--ap-fill); }
body.ap .login-go { font-size: 16px; font-weight: 600; padding: 12px; border-radius: 12px; width: 100%; margin-top: 4px; }
#login-step { display: flex; flex-direction: column; gap: 10px; }
.login-intro { margin: 0; font-size: 14px; color: var(--ap-text2); }
.login-bio { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px !important; border-radius: 12px !important; border: 0 !important; background: var(--ap-blue) !important; color: #fff !important; font-size: 16px; font-weight: 600; cursor: pointer; }
.login-bio-ico { display: inline-flex; }
.login-bio-ico.big svg { width: 44px; height: 44px; color: var(--ap-blue); }
.login-days { margin: 0; text-align: center; }
.login-alt { align-self: center; font-size: 14px; }
.login-offer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.login-offer b { font-size: 17px; }
.login-offer p { margin: 0 0 6px; }
.login-msg { margin: 0; min-height: 1em; text-align: center; font-size: 13.5px; color: var(--ap-red); }
.login-msg:empty { display: none; }
.login-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 0; }
.login-note img { width: 16px; height: 16px; border-radius: 4px; }
/* sign in: everything centred; the password's eye on the right (the text stays centred) */
body.ap .login-field { align-items: stretch; text-align: center; }
body.ap .login-field select { text-align: center; text-align-last: center; -webkit-appearance: none; appearance: none; }
body.ap .login-field input { text-align: center; }
.login-intro { text-align: center; }
.login-pw { position: relative; display: flex; }
.login-pw input { flex: 1; min-width: 0; padding-left: 44px !important; padding-right: 44px !important; }
.login-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0 !important; background: none !important; color: var(--ap-text2) !important; padding: 0 !important; cursor: pointer; border-radius: 50% !important; }
.login-eye:hover { color: var(--ap-blue) !important; }
body.ap .login-field select { padding-left: 36px; padding-right: 36px; cursor: pointer;
  background: var(--ap-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M1.5 5 5 1.5 8.5 5M1.5 9 5 12.5 8.5 9' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
/* the name picker */
.login-pick { position: relative; display: flex; justify-content: center; }
.login-name { width: 100%; font: inherit; font-size: 16px !important; font-weight: 500; color: var(--ap-text) !important; padding: 11px 36px !important; border-radius: 11px !important; border: 0 !important; cursor: pointer; text-align: center;
  background: var(--ap-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M1.5 5 5 1.5 8.5 5M1.5 9 5 12.5 8.5 9' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center !important; }
.login-name:focus-visible { outline: 2px solid var(--ap-blue); outline-offset: 2px; }
.login-menu { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 50; width: max-content; min-width: 150px; max-height: min(60vh, 460px); overflow-y: auto;
  padding: 5px; border-radius: 12px; background: var(--ap-solid); box-shadow: 0 14px 40px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .1); display: flex; flex-direction: column; }
.login-menu button { position: relative; border: 0 !important; background: none !important; color: var(--ap-text) !important; font: inherit; font-size: 15px; text-align: center; padding: 6px 30px !important; border-radius: 7px !important; cursor: pointer; white-space: nowrap; }
.login-menu button:hover, .login-menu button:focus { background: var(--ap-blue) !important; color: #fff !important; outline: none; }
.login-menu button.on::before { content: '✓'; position: absolute; left: 10px; font-weight: 600; }
/* the tab bar's selected tab (incl. More, when the page is one of its modules): blue, never the generic white-on-blue */
html.app body.ap .pm-tabbar a.on, html.app body.ap .pm-tabbar button.on { color: var(--ap-blue) !important; background: none !important; }

/* ---------------------------------------------------------------- patient hover card (js/pm/patient-peek.js) */
.pk { position: fixed; z-index: 120; width: 272px; padding: 14px; border-radius: 16px; pointer-events: auto;
  background: color-mix(in srgb, var(--ap-solid, #fff) 86%, transparent); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .1); color: var(--ap-text, var(--text)); font-size: 13px;
  animation: pk-in .14s ease-out; }
.pk[hidden] { display: none; }
@keyframes pk-in { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
.pk-top { display: flex; gap: 12px; align-items: center; }
.pk-photo { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #a8c7fa, #6e9ef0); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08); }
.pk-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pk-photo span { color: #fff; font-size: 22px; font-weight: 600; letter-spacing: .02em; }
.pk-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-id b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-id span { color: var(--ap-text2, var(--text2)); font-size: 12.5px; }
.pk-status { align-self: flex-start; font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-top: 2px; background: var(--ap-fill, #eee); color: var(--ap-text2, #555); }
.pk-status.st-active { background: color-mix(in srgb, #34c759 18%, transparent); color: #248a3d; }
.pk-status.st-retention { background: color-mix(in srgb, #5856d6 15%, transparent); color: #5856d6; }
.pk-status.st-pending, .pk-status.st-new { background: color-mix(in srgb, #ff9500 16%, transparent); color: #c25e00; }
.pk-status.st-observation { background: color-mix(in srgb, #007aff 14%, transparent); color: #007aff; }
.pk-rows { margin-top: 12px; display: flex; flex-direction: column; border-radius: 11px; background: var(--ap-fill, rgba(0,0,0,.04)); overflow: hidden; }
.pk-row { display: grid; grid-template-columns: 78px 1fr; gap: 8px; padding: 8px 10px; align-items: baseline; }
.pk-row + .pk-row { border-top: .5px solid var(--ap-line2, rgba(0,0,0,.08)); }
.pk-row > span { font-size: 11.5px; color: var(--ap-text2, var(--text2)); }
.pk-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-row b { font-weight: 600; font-size: 13px; }
.pk-row small { color: var(--ap-text2, var(--text2)); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-bar { height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .08); overflow: hidden; margin-top: 3px; }
.pk-bar i { display: block; height: 100%; border-radius: 3px; background: #34c759; }
.pk-none { color: #ff3b30; }
.pk-foot, .pk-hint { margin-top: 8px; font-size: 11px; color: var(--ap-text2, var(--text2)); text-align: center; }
.pk-hint { margin-top: 6px; }
/* menus from the top bar (patient search, your name…): opaque, not see-through */
body.ap .pm-drop { background: var(--ap-solid, #fff); backdrop-filter: none; -webkit-backdrop-filter: none; }
.pm-res-h { font-size: 11px; font-weight: 600; color: var(--ap-text2); text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px 2px; }

/* Installed as an app (Chrome "Install page as app", Safari "Add to Dock"): no browser bar. In Chrome the top bar
   shares the title-bar strip with the window buttons (window-controls-overlay) — keep clear of them, and drag the
   window by the empty parts of the bar. */
@media (display-mode: window-controls-overlay) {
  body.ap .pm-header { padding-left: calc(env(titlebar-area-x, 0px) + 10px); padding-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 10px);
    min-height: env(titlebar-area-height, 44px); -webkit-app-region: drag; app-region: drag; }
  body.ap .pm-header a, body.ap .pm-header button, body.ap .pm-header select, body.ap .pm-header input, body.ap .pm-header .pm-menu { -webkit-app-region: no-drag; app-region: no-drag; }
  body.chart-window .cw-bar { padding-left: calc(env(titlebar-area-x, 0px) + 10px); padding-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 10px); -webkit-app-region: drag; app-region: drag; }
  body.chart-window .cw-bar button { -webkit-app-region: no-drag; app-region: no-drag; }
}
/* call · text · email · map icons (links.js contactIcons) */
.cxis { display: inline-flex; gap: 5px; flex: none; }
.cxi { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ap-blue, #007aff) 12%, transparent); color: var(--ap-blue, #007aff); text-decoration: none; }
.cxi.call { background: color-mix(in srgb, #34c759 16%, transparent); color: #248a3d; }
.cxi:hover { filter: brightness(.92); }
.cxi.off { background: var(--ap-fill, rgba(0,0,0,.05)); color: var(--ap-text3, #c7c7cc); cursor: default; }
/* the chart's Family box */
.fam2 { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: .5px solid var(--ap-line2, var(--line)); }
.fam2:first-child { border-top: 0; }
.fam2-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fam2-id a { text-decoration: none; color: var(--ap-blue, #007aff); }
.fam2-id b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fam2-id small { font-size: 11.5px; color: var(--ap-text2, var(--text2)); }
.fam2-id .fam2-next { color: var(--ap-text, var(--text)); }
.fam2-more { display: block; font-size: 12px; color: var(--ap-blue, #007aff); text-decoration: none; padding-top: 6px; }

/* phone header and tab bar: line icons, no labels, even spacing (icons.js) */
.ui-ic { width: 24px; height: 24px; display: block; background: none; }
body.ap .pm-bellbtn, body.ap .pm-gear { color: var(--ap-blue); display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; }
body.ap .pm-gear.on { background: none; color: var(--ap-blue); }
@media all {
  html.app body.ap .pm-header { padding: env(safe-area-inset-top) 12px 0 16px; min-height: 48px; align-items: center; gap: 4px; }
  html.app body.ap .pm-header .brand b { font-size: 22px; letter-spacing: -.02em; }
  html.app body.ap .pm-right { gap: 2px; align-items: center; }
  html.app body.ap .pm-userbtn { padding: 0; margin: 0 2px; }
  html.app body.ap .pm-user { width: 30px; height: 30px; font-size: 12px; }
  html.app body.ap .pm-username { display: none; }
  html.app body.ap .pm-tabbar { height: calc(52px + env(safe-area-inset-bottom)); }
  html.app .pm-tabbar a, html.app .pm-tabbar button { gap: 0; }
  html.app .pm-tabbar .ti { filter: none; color: #8e8e93; }
  html.app .pm-tabbar .ti .ui-ic { width: 27px; height: 27px; }
  html.app .pm-tabbar .on .ti { color: var(--ap-blue); }
  html.app .pm-tabbar .on .ti .ui-ic { stroke-width: 2.2; }
  html.app body.ap .pm-tabbar .tb-badge { top: 6px; left: calc(50% + 8px); }
}
/* icons sit on nothing (no button fill), and each tap target is 44 × 44 — Apple's minimum — around a 24 px icon */
html.app body.ap .pm-tabbar a, html.app body.ap .pm-tabbar button, html.app body.ap .pm-tabbar .ti,
body.ap .pm-bellbtn, body.ap .pm-gear, body.ap .pm-userbtn { background: transparent !important; box-shadow: none !important; border: 0 !important; }
body.ap .pm-bellbtn:hover, body.ap .pm-gear:hover, body.ap .pm-userbtn:hover { background: transparent !important; opacity: .7; }
html.app body.ap .pm-bellbtn, html.app body.ap .pm-gear, html.app body.ap .pm-userbtn { width: 44px; height: 44px; min-width: 44px; display: inline-grid; place-items: center; margin: 0; }
html.app body.ap .pm-tabbar a, html.app body.ap .pm-tabbar button { min-height: 50px; }
html.app body.ap .pm-tabbar a:active .ti, html.app body.ap .pm-tabbar button:active .ti, html.app body.ap .pm-bellbtn:active, html.app body.ap .pm-gear:active { opacity: .5; }
html.app body.ap .pm-tabbar #pm-tbmore, html.app body.ap .pm-tabbar #pm-tbmore:hover, html.app body.ap .pm-tabbar #pm-tbmore:focus { background: transparent !important; box-shadow: none !important; }
/* the conversation header on a phone, as iOS: ‹ back | title (centred) | 🔔 ⋯ — three slots, nothing overlapping */
html.app body.ap .msg-head { display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px; align-items: center; padding: 4px 8px; gap: 4px; }
html.app body.ap .msg-back { position: static; justify-self: start; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: transparent !important; }
html.app body.ap .msg-head > div:not(.msg-headtools) { text-align: center; min-width: 0; }
html.app body.ap .msg-head h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 17px; margin: 0; }
html.app body.ap #msg-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
html.app body.ap .msg-headtools { justify-self: end; margin: 0; }
html.app body.ap .msg-hbtn { width: 36px; height: 44px; background: transparent !important; color: var(--ap-blue); }