/* Shared visual system for Razor Pages and MVC views. Tabler provides Bootstrap 5 components. */
:root {
    --app-font-sans: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    --tblr-font-sans-serif: var(--app-font-sans);
    --tblr-body-font-family: var(--app-font-sans);
    --bs-font-sans-serif: var(--app-font-sans);
    --bs-body-font-family: var(--app-font-sans);
    --app-brand-teal: #7ac1c7;
    --app-brand-slate: #3f5666;
    --app-nav-bg: #e8f4f5;
    --app-nav-hover: #d9ebed;
    --app-nav-active: #cae5e8;
    --app-ink: #3f5666;
    --app-muted: #617782;
    --app-accent: #2e7e87;
    --app-accent-hover: #276b74;
    --app-line: #dce6ea;
    --app-surface: #fff;
    --app-surface-muted: #f5f9fa;
    --app-radius: .75rem;
    --tblr-primary: #2e7e87;
    --tblr-primary-rgb: 46, 126, 135;
    --bs-primary: #2e7e87;
    --bs-primary-rgb: 46, 126, 135;
    --bs-body-color: #3f5666;
    --bs-border-color: #dce6ea;
}

html body { color: var(--app-ink); font-family: var(--app-font-sans); }
a { color: var(--app-accent); }
a:hover { color: var(--app-accent-hover); }
:focus-visible { outline: 3px solid #52b6c3; outline-offset: 2px; }

.app-skip-link {
    position: absolute;
    z-index: 1080;
    top: -4rem;
    left: 1rem;
    padding: .6rem 1rem;
    border-radius: .5rem;
    background: #fff;
    color: var(--app-ink);
    box-shadow: 0 .25rem 1rem #17313a26;
}
.app-skip-link:focus { top: .75rem; }

.bg-brand { background-color: var(--app-brand-slate) !important; color: #fff; }
.patient-summary-label { background: #e3f2f3; color: var(--app-brand-slate); font-weight: 700; }
.patient-list-item-active { background: #edf7f7; box-shadow: inset 3px 0 0 var(--app-accent); }
.patient-case-page .patient-summary-card { overflow: hidden; }
.patient-summary-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.2rem; border-bottom: 1px solid var(--app-line); background: #f8fcfc; }
.patient-summary-header h1 { margin: 0; color: var(--app-ink); font-size: 1.05rem; font-weight: 700; }
.patient-case-page #leftPanel .card-header { display: flex; align-items: center; min-height: 3.25rem; padding: .85rem 1.2rem; border-bottom: 1px solid var(--app-line); background: #f8fcfc !important; color: var(--app-ink) !important; }
.patient-case-page #leftPanel .card-header h2 { color: var(--app-ink) !important; font-size: 1.05rem; font-weight: 700; }
.patient-summary-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.5fr .65fr; gap: .75rem 1.25rem; padding: .9rem 1.2rem 1rem; }
.patient-summary-item { display: flex; flex-direction: column; min-width: 0; gap: .2rem; }
.patient-summary-item > span { color: var(--app-muted); font-size: .78rem; }
.patient-summary-item strong { color: var(--app-ink); font-size: .96rem; font-weight: 700; overflow-wrap: anywhere; }
.patient-summary-item small { color: var(--app-muted); font-size: .8rem; font-weight: 400; white-space: nowrap; }
.patient-case-page .nav-tabs { margin-top: .15rem; }
.patient-section-title { margin: .25rem 0 .75rem; color: var(--app-ink); font-size: 1rem; font-weight: 700; }
.patient-data-card { padding: 1rem 1.2rem .85rem; }
.patient-data-card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem 1rem; margin-bottom: .85rem; padding-bottom: .8rem; border-bottom: 1px solid var(--app-line); }
.patient-data-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.5rem; }
.patient-data-meta > span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.patient-data-meta strong { color: var(--app-ink); font-weight: 650; }
.patient-meta-label { color: var(--app-muted); font-size: .8rem; }
.patient-data-tags { gap: .35rem !important; }
.patient-status { display: inline-flex; align-items: center; min-height: 1.5rem; padding: .15rem .5rem; border: 1px solid #d4e1e4; border-radius: .35rem; background: #f0f5f6; color: #405d68; font-size: .78rem; font-weight: 700; }
.patient-status.is-not-dilated { border-color: #b6d9d7; background: #e6f4f1; color: #24645e; }
.patient-status.is-dilated { border-color: #e8d1ab; background: #fff3df; color: #795314; }
.patient-eye-title { margin: 0 0 .45rem; color: #2b6570; font-size: .9rem; font-weight: 700; }
.patient-eye-table { min-width: 22rem; }
.patient-eye-table th { color: #415b66; font-size: .84rem; }
.patient-eye-table td { color: var(--app-ink); font-size: .95rem; font-weight: 600; }
.patient-results-actions { display: flex; justify-content: flex-end; margin-top: .25rem; }
.patient-empty-state { padding: 1.25rem; border: 1px solid var(--app-line); border-radius: var(--app-radius); background: #fff; color: var(--app-muted); text-align: center; }
.app-header { background: var(--app-nav-bg); border-bottom: 1px solid #c5dfe2; box-shadow: 0 2px 8px #263b4a14; }
.app-header .navbar { min-height: 4rem; padding: .4rem 0; background: var(--app-nav-bg) !important; }
.app-header .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    flex: none;
    margin-right: .7rem;
    padding-right: .75rem;
    border-right: 1px solid #bdd8dc;
    color: var(--app-ink) !important;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
.app-brand-mark {
    position: relative;
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
    overflow: hidden;
    flex: none;
}
.app-brand-mark img { position: absolute; width: 7.2rem; max-width: none; height: auto; left: -.15rem; top: -.15rem; filter: brightness(.82) saturate(1.15); }
.app-header .navbar-brand:hover,
.app-header .navbar-brand:focus { color: var(--app-ink); }
.app-brand-subtitle { display: block; color: var(--app-muted); font-size: .68rem; font-weight: 500; letter-spacing: .06em; }
.app-header .navbar-toggler { border-color: #a9cbd0; color: var(--app-ink); }
.app-header .nav-link {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    gap: .25rem;
    padding: .45rem .4rem !important;
    border-radius: .45rem;
    color: #345360 !important;
    font-size: .82rem;
    font-weight: 500;
    white-space: nowrap;
}
.app-header .nav-link:hover,
.app-header .nav-link:focus-visible { color: #1f5660 !important; background: var(--app-nav-hover); }
.app-header .nav-link.active,
.app-header .dropdown.show > .nav-link { color: #194f59 !important; background: var(--app-nav-active); }
.app-header .nav-link .ti { font-size: 1.1rem; }
.app-header .dropdown-menu {
    min-width: 13rem;
    padding: .35rem;
    border: 1px solid var(--app-line);
    border-radius: .6rem;
    background: #fff;
    box-shadow: 0 .6rem 1.5rem #17313a20;
}
.app-header .dropdown-item { padding: .55rem .7rem; border-radius: .35rem; color: var(--app-ink); }
.app-header .dropdown-item:hover,
.app-header .dropdown-item:focus { color: var(--app-accent); background: #edf6f7; }
.app-header .dropdown-divider { border-color: var(--app-line); }
.app-user-nav { align-items: center; gap: .5rem; }
.app-user-name { display: flex; align-items: center; gap: .35rem; color: var(--app-ink); font-size: .84rem; white-space: nowrap; }
.app-user-name .ti { font-size: 1.25rem; }
.app-header .btn-outline-light { border-color: #76aeb5; color: #245b64; }
.app-header .btn-outline-light:hover,
.app-header .btn-outline-light:focus-visible { border-color: var(--app-accent); color: #fff; background: var(--app-accent); }

.app-content { width: 100%; padding: 1.5rem clamp(1rem, 2vw, 2rem) 2.5rem; }
.app-content > main { width: 100%; min-width: 0; }
.brand-footer { border-top: 1px solid var(--app-line); background: #fff; color: var(--app-muted); font-size: .8rem; }
.brand-footer .container-fluid { padding-inline: clamp(1rem, 2vw, 2rem); }

/* Common page patterns, used by both new and existing Razor views. */
.app-page-header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .8rem 1.5rem; margin-bottom: 1.25rem; }
.app-page-title { margin: 0; color: var(--app-ink); font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 700; line-height: 1.3; }
.app-page-description { margin: .35rem 0 0; color: var(--app-muted); }
.app-page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.app-page-actions .btn { margin: 0 !important; }
.app-panel,
.app-filter-card,
.app-data-card,
.card { border: 1px solid var(--app-line); border-radius: var(--app-radius); background: var(--app-surface); box-shadow: 0 2px 9px #17313a0a; }
.app-filter-card { padding: 1rem 1.25rem; margin-bottom: 1rem; }
.app-data-card { overflow: hidden; }
.app-content > main > .table-responsive { border: 1px solid var(--app-line); border-radius: var(--app-radius); background: #fff; }
.app-cell-description { max-width: 15rem; }
.app-table-hint { margin: -.15rem 0 .45rem; color: var(--app-muted); font-size: .8rem; }
.app-table-hint .ti { margin-right: .25rem; }
.app-message-panel { max-width: 42rem; }
.app-welcome-icon { display: inline-grid; flex: none; place-items: center; width: 3rem; height: 3rem; border-radius: .75rem; background: #e7f3f5; color: var(--app-accent); font-size: 1.5rem; }

.form-label { margin-bottom: .4rem; color: var(--app-ink); font-weight: 600; }
.form-control,
.form-select { min-height: 2.4rem; border-color: #cad8dd; border-radius: .45rem; }
.form-control:focus,
.form-select:focus { border-color: #58a6b0; box-shadow: 0 0 0 .2rem #58a6b033; }
.form-text { color: var(--app-muted); }
.form-check-input { border-color: #9fb4bc; }
.form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); }
.btn { border-radius: .45rem; font-weight: 600; }
.btn-primary { background: var(--app-accent); border-color: var(--app-accent); color: #fff; }
.btn-primary:hover { background: var(--app-accent-hover); border-color: var(--app-accent-hover); color: #fff; }
.btn-outline-primary { color: var(--app-accent); border-color: var(--app-accent); }
.btn-outline-primary:hover { background: var(--app-accent); border-color: var(--app-accent); color: #fff; }
.btn .ti { margin-right: .2rem; font-size: 1.1em; vertical-align: -.1em; }

.table-responsive { scrollbar-color: #b7c9d0 transparent; }
.app-data-card .table-responsive,
.app-content > main > .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { margin-bottom: 0; color: var(--app-ink); }
.table th { color: #435b66; font-size: .875rem; font-weight: 700; white-space: nowrap; }
.table > :not(caption) > * > * { padding: .7rem .8rem; border-bottom-color: var(--app-line); }
.table thead,
.table thead.table-light { background: var(--app-surface-muted); }
.table-hover > tbody > tr:hover > * { background: #edf6f7; }
.table td { vertical-align: middle; }
.table .btn-sm { white-space: nowrap; }
.table .case-date-row > th {
    --bs-table-bg: #e8f7f8;
    --bs-table-bg-type: transparent;
    background-color: #e8f7f8;
    color: #245b63;
    box-shadow: none;
    font-weight: 700;
    text-align: left;
}
.badge { font-weight: 600; letter-spacing: .01em; }
.pagination { flex-wrap: wrap; gap: .25rem; }
.app-content > main > nav:has(.pagination) { margin-top: 1rem; }
.page-link { border-radius: .4rem; }
.page-item.active .page-link { background: var(--app-accent); border-color: var(--app-accent); color: #fff; }
.nav-tabs { gap: .2rem; }
.nav-tabs .nav-link.active { color: var(--app-accent); font-weight: 700; }
.modal-content { border: 1px solid var(--app-line); border-radius: .8rem; box-shadow: 0 1rem 3rem #17313a25; }
.modal-header,
.modal-footer { border-color: var(--app-line); }
.alert { border-radius: .55rem; }

@media (min-width: 1400px) {
    .app-header .navbar > .container-fluid { flex-wrap: nowrap; }
    .app-header .navbar-collapse { min-width: 0; }
    .app-header .navbar-nav.me-auto { flex-wrap: nowrap; }
}
@media (max-width: 1399.98px) {
    .app-header .navbar-brand { border-right: 0; }
    .app-header .navbar-collapse { margin-top: .75rem; padding: .65rem; border-top: 1px solid #c5dfe2; }
    .app-header .navbar-nav { align-items: stretch; }
    .app-header .nav-link { width: 100%; }
    .app-header .dropdown-menu { width: 100%; margin: .15rem 0 .5rem; box-shadow: none; }
    .app-user-nav { align-items: flex-start; padding-top: .75rem; border-top: 1px solid #c5dfe2; }
}
@media (max-width: 1199.98px) {
    .patient-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .patient-summary-header { align-items: flex-start; }
    .patient-summary-grid { gap: .75rem; }
    .patient-data-card { padding: .85rem; }
    .patient-data-card-header > .btn { width: 100%; }
    .app-content { padding: 1rem .75rem 2rem; }
    .app-page-actions { width: 100%; }
    .app-page-actions .btn { flex: 1 1 auto; }
    .app-filter-card { padding: .85rem; }
    .table > :not(caption) > * > * { padding: .55rem .6rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}