/* DocRounds — light clinical theme: navy ink, teal accent (matches the B logo) */
:root {
    --ink: #0F2438;
    --ink-2: #23405C;
    --teal: #1E6E7A;
    --teal-soft: #E3F0F1;
    --mist: #EEF3F4;
    --line: #D6E1E4;
    --bs-body-font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: var(--ink);
    --bs-border-color: var(--line);
}

.app-bg {
    background-color: var(--mist);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260' viewBox='0 0 420 260'%3E%3Cpath d='M20 70 Q210 250 400 70' fill='none' stroke='%231E6E7A' stroke-opacity='.08' stroke-width='2'/%3E%3Cg fill='%231E6E7A' fill-opacity='.08'%3E%3Crect x='58' y='106' width='16' height='14' rx='3'/%3E%3Crect x='112' y='140' width='16' height='14' rx='3'/%3E%3Crect x='170' y='155' width='16' height='14' rx='3'/%3E%3Crect x='232' y='155' width='16' height='14' rx='3'/%3E%3Crect x='290' y='140' width='16' height='14' rx='3'/%3E%3Crect x='344' y='106' width='16' height='14' rx='3'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    min-height: 100vh;
}

.app-nav { background: var(--ink); }
.brand-name { font-weight: 700; letter-spacing: .03em; font-size: .95rem; }
.brand-title { letter-spacing: .03em; font-weight: 700; color: var(--ink); }

.app-card { border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover, .btn-ink:focus { background: var(--ink-2); color: #fff; }
.btn-teal { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-teal:hover, .btn-teal:focus { background: #175863; color: #fff; }

.font-mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.letter-wide { letter-spacing: .08em; }

.tile { display: flex; flex-direction: column; gap: .25rem; padding: 1.25rem; background: #fff; border: 1px solid var(--line);
        border-radius: 14px; text-decoration: none; color: inherit; height: 100%; }
.tile:hover { border-color: var(--teal); }
.tile-title { font-weight: 700; font-size: 1.15rem; }

.search-box { max-width: 420px; }
.clinic-filter { max-width: 300px; }
tr.row-link { cursor: pointer; }

.badge-stage { background: var(--teal-soft); color: var(--teal); font-weight: 600; }
.chip { display: inline-flex; gap: .25rem; align-items: center; background: #F2F6F7; color: var(--ink-2);
        border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; }

.chair-summary { position: sticky; top: 76px; }
.kv { padding: .6rem 0; border-top: 1px solid var(--line); }
.kv-k { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #5B6C7A; font-weight: 700; }
.kv-v { font-size: .95rem; margin-top: .15rem; }
.money { background: #F4F8F9; border-radius: 10px; padding: .6rem .75rem; }
.money-v { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; font-weight: 600; font-size: 1.1rem; }
.add-today { border: 2px dashed #AFCBD0; background: rgba(255,255,255,.75); border-radius: 14px; padding: .9rem 1rem; }
.visit-note { line-height: 1.55; white-space: pre-line; }

.offcanvas-wide { --bs-offcanvas-width: min(560px, 100vw); }

.login-wrap { display: grid; place-items: center; min-height: calc(100vh - 160px); }
.login-card { width: min(420px, 100%); }

@media (max-width: 991.98px) { .chair-summary { position: static; } }

.validation-summary-valid { display: none; }
.otp-input { letter-spacing: .5em; }
.nav-clinic { background: rgba(255,255,255,.12); color: #fff; border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; }

/* Chair screen: tabs scroll sideways on phones instead of wrapping */
.chair-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.chair-tabs::-webkit-scrollbar { display: none; }
.chair-tabs .nav-link { white-space: nowrap; color: var(--ink-2); }
.chair-tabs .nav-link.active { color: var(--ink); font-weight: 600; }

/* Category chips (radio buttons) */
.btn-chip { border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 999px; }
.btn-check:checked + .btn-chip { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-check:focus-visible + .btn-chip { box-shadow: 0 0 0 .2rem rgba(30,110,122,.35); }

/* Thumbnails grouped by date */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; }
.media-tile { position: relative; }
.media-open { display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden;
              border: 1px solid var(--line); border-radius: 10px; background: #F4F8F9; }
.media-open img { width: 100%; height: 100%; object-fit: cover; }
.media-open:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.media-pdf { font-weight: 700; color: var(--teal); letter-spacing: .08em; }
.media-caption { display: block; font-size: .75rem; color: #5B6C7A; margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-archive { position: absolute; top: .3rem; right: .3rem; width: 2rem; height: 2rem; border: 0; border-radius: 999px;
                 background: rgba(15,36,56,.65); color: #fff; line-height: 1; }
.media-full { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; }
.visit-media { border: 1px dashed #AFCBD0; border-radius: 10px; padding: .6rem .75rem; background: #fff; }