/* Shared application presentation. Public landing and authentication pages retain
   their own layouts; signed-in pages use the same typography and surface tokens. */
body.app-ui {
    --app-ink: #202939;
    --app-muted: #526174;
    --app-line: #dce2e9;
    --app-accent: #b94d12;
    --app-accent-dark: #963d0c;
    --app-accent-soft: #fff0e6;
    --app-surface: #fff;
    --app-subtle: #f3f5f8;
    background: #f6f7f9;
    background-image: none;
    color: var(--app-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}
html[data-bs-theme="dark"] body.app-ui {
    --app-ink: #f2f5fa;
    --app-muted: #b7c3d3;
    --app-line: #758397;
    --app-accent: #ffb083;
    --app-accent-dark: #ffc6a7;
    --app-accent-soft: #34261f;
    --app-surface: #111820;
    --app-subtle: #202832;
}
body.app-ui > .main-content {
    max-width: none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: clamp(1.25rem, 2vw, 2.5rem) clamp(1rem, 3vw, 4rem) 3rem;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
body.app-ui :is(.health-page, .reports-page) { max-width: none; }
body.app-ui .site-navbar > .container,
body.app-ui .footer > .container { max-width: none; padding-inline: clamp(1rem, 3vw, 4rem); }
body.app-ui > .main-content > main { width: 100%; min-width: 0; }
body.app-ui .app-responsive-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: 1rem;
    margin-inline: 0;
}
body.app-ui .app-responsive-card-grid > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
}
body.app-ui :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; line-height: 1.25; }
body.app-ui :is(.app-page-heading, .dashboard-heading) {
    border-bottom: 1px solid var(--app-line);
    padding: .25rem 0 1.5rem;
}
body.app-ui :is(.app-page-heading, .dashboard-heading) h1 {
    color: var(--app-ink) !important;
    font-size: clamp(2.1rem, 3.6vw, 3.5rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.035em;
}
body.app-ui :is(.app-eyebrow, .dashboard-kicker) { font-size: .75rem; letter-spacing: .08em; }
body.app-ui :is(.app-page-heading, .dashboard-heading) :is(.app-eyebrow, .dashboard-kicker) { margin-bottom: .4rem; color: var(--app-accent) !important; }
body.app-ui :is(.app-section-heading h2, .dashboard-section-heading h2, .health-section-heading) {
    font-size: clamp(1.35rem, 1.6vw, 1.75rem) !important;
    font-weight: 750 !important;
    letter-spacing: -.035em;
    color: var(--app-ink) !important;
}
body.app-ui :is(.app-page-heading, .dashboard-heading) { position: relative; }
body.app-ui :is(.app-page-heading, .dashboard-heading)::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: clamp(4rem, 9vw, 8rem);
    height: 4px;
    border-radius: 999px;
    background: var(--app-accent);
}
body.app-ui .med-status { display: inline-block; font-weight: 700; white-space: nowrap; }
body.app-ui .med-status-upcoming { color: var(--app-accent); }
body.app-ui .med-status-skipped { color: var(--app-muted); }
body.app-ui .med-status-taken { color: #19734b; }
body.app-ui .med-status-late { color: #b42332; }
html[data-bs-theme="dark"] body.app-ui .med-status-taken { color: #75d9a3; }
html[data-bs-theme="dark"] body.app-ui .med-status-late { color: #ff8791; }
body.app-ui :is(.text-secondary, .text-muted, .form-text) { color: var(--app-muted) !important; }
body.app-ui .small, body.app-ui small { font-size: .875rem; }
body.app-ui :is(.form-control, .form-select) {
    min-height: 44px;
    border: 1px solid var(--app-line) !important;
    border-radius: 9px !important;
    font-family: inherit;
    font-size: 1rem;
}
body.app-ui .form-label { font-size: .875rem; font-weight: 650; color: var(--app-ink); }
body.app-ui .btn { border-radius: 9px; font-family: inherit; font-weight: 650; min-height: 44px; padding: .55rem 1rem; }
body.app-ui .btn-sm { min-height: 38px; font-size: .875rem; padding: .4rem .75rem; }
body.app-ui :is(.btn-primary, .health-log-button) {
    background: #b94d12 !important;
    border-color: #b94d12 !important;
    color: #fff !important;
    box-shadow: none;
}
body.app-ui :is(.btn-primary, .health-log-button):hover { background: #963d0c !important; border-color: #963d0c !important; }
body.app-ui .btn-outline-primary { color: var(--app-accent); border-color: var(--app-accent); }
body.app-ui .btn-outline-primary:hover { background: #963d0c; color: #fff; }
body.app-ui :is(.btn-light, .btn-outline-secondary) { background: var(--app-surface); border: 1px solid var(--app-line); color: var(--app-ink); }
body.app-ui :is(.btn-light, .btn-outline-secondary):hover { background: var(--app-subtle); }
body.app-ui :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid #337cc3 !important;
    outline-offset: 3px;
}
body.app-ui :is(.card, .app-panel, .pet-card, .med-card, .task-log-card, .visit-card, .health-med-card, .health-vet-card, .health-filter, .vet-filter, .report-controls) {
    border: 1px solid var(--app-line) !important;
    border-radius: 14px !important;
    background: var(--app-surface);
    box-shadow: 0 3px 12px rgba(30, 41, 57, .035) !important;
}
body.app-ui :is(.card-header, .modal-header) { background: var(--app-subtle) !important; border-bottom: 1px solid var(--app-line) !important; }
body.app-ui .modal-content { border-radius: 16px; }
body.app-ui .modal-title { font-size: 1.3rem; color: var(--app-ink) !important; }
body.app-ui .modal-content { border: 1px solid var(--app-line); }
html[data-bs-theme="light"] body.app-ui .modal-header .btn-close { filter: none; }
body.app-ui :is(.empty-health, .vet-empty) { background: var(--app-surface); border: 1px dashed var(--app-line); border-radius: 14px; padding: 2rem; }
body.app-ui .table { font-size: .9375rem; }
body.app-ui .table :is(th, td) { vertical-align: middle; }
body.app-ui .site-navbar .navbar-nav { gap: .25rem; }
body.app-ui .site-navbar .nav-link { border-radius: 8px; padding: .6rem .8rem; }
body.app-ui .site-navbar .nav-link.active { background: rgba(0, 0, 0, .22); box-shadow: inset 0 -3px 0 #fff; color: #fff; }
.skip-link { position: fixed; left: 1rem; top: -6rem; z-index: 1100; background: #fff; color: #202939 !important; border: 2px solid #337cc3; border-radius: 8px; padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }

/* Shared range sliders for dashboard history and medication schedules. */
body.app-ui .seg-toggle {
    --toggle-thumb: var(--app-accent, #d96420);
    --toggle-active-text: #fff;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: var(--range-toggle-width, 240px);
    max-width: 100%;
    flex-shrink: 0;
    padding: 3px;
    gap: 0;
    border: 1px solid var(--app-line, #dce2e9);
    border-radius: 999px;
    background: var(--app-accent-soft, #fff0e6);
    isolation: isolate;
}
body.app-ui .seg-toggle::before {
    content: "";
    position: absolute;
    inset: 3px auto 3px 3px;
    width: calc((100% - 6px) / 2);
    border-radius: inherit;
    background: var(--toggle-thumb);
    transition: transform .18s ease;
    z-index: -1;
}
body.app-ui .seg-toggle.is-all-time::before { transform: translateX(100%); }
body.app-ui .seg-toggle form { margin: 0; min-width: 0; }
body.app-ui .seg-toggle .seg-option {
    width: 100%;
    min-height: 34px;
    padding: 5px 10px;
    background: transparent !important;
    border: 0;
    border-radius: 999px;
    box-shadow: none !important;
    color: var(--app-muted, #697386) !important;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    transition: color .18s ease;
}
body.app-ui .seg-toggle .seg-option.seg-active {
    color: var(--toggle-active-text) !important;
}
html[data-bs-theme="dark"] body.app-ui .seg-toggle {
    --toggle-thumb: #fff;
    --toggle-active-text: #090d12;
}
body.app-ui .home-dashboard .seg-toggle { --range-toggle-width: 196px; }
html[data-bs-theme="dark"] body.app-ui .seg-toggle .seg-option {
    background: transparent !important;
    color: #fff !important;
}
html[data-bs-theme="dark"] body.app-ui .seg-toggle .seg-option.seg-active {
    color: var(--toggle-active-text) !important;
}

/* Health: readable summaries, visible actions, and a clearly bounded history. */
body.app-ui .account-tabs { border-bottom: 1px solid var(--app-line); display: flex; flex-wrap: wrap; gap: .35rem; }
body.app-ui .account-tab { border-bottom: 2px solid transparent; color: var(--app-muted); font-size: .9375rem; padding: .65rem .8rem; text-decoration: none; }
body.app-ui .account-tab:hover, body.app-ui .account-tab:focus-visible { background: var(--app-accent-soft); color: var(--app-accent); }
body.app-ui .account-tab[aria-current="page"] { color: var(--app-ink); }
body.app-ui .health-stat-card { align-items: flex-start; padding: 1.15rem; background: var(--app-surface); }
body.app-ui .health-stat-body small { font-size: .8125rem; text-transform: none; letter-spacing: 0; color: var(--app-muted); }
body.app-ui .health-stat-body strong { font-size: 1.35rem; margin: .2rem 0; }
body.app-ui .health-stat-body em { font-size: .8125rem; color: var(--app-muted); }
body.app-ui .health-med-name { font-size: 1.125rem; }
body.app-ui :is(.health-med-meta, .health-med-dose-when, .health-timeline-summary) { font-size: .9375rem; }
body.app-ui .health-med-dose-label { font-size: .8125rem; letter-spacing: .025em; }
body.app-ui .health-badge { font-size: .8125rem; padding: .2rem .6rem; }
body.app-ui .health-badge-taken { color: #196c47; }
body.app-ui .health-section-toggle { height: 38px; width: 38px; color: var(--app-ink); background: var(--app-surface); }
body.app-ui .health-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
body.app-ui .health-filter-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--app-line); margin-top: 1.25rem; padding-top: 1rem; font-size: .875rem; }
body.app-ui .health-history-groups { margin-top: 1.25rem !important; }
body.app-ui .health-history-group { background: var(--app-surface); }
body.app-ui .health-history-group-toggle { background: var(--app-subtle); padding: 1rem 1.25rem; font-size: 1rem; }
body.app-ui .health-history-group-count { font-size: .8125rem; }
body.app-ui .health-history-group-toggle.collapsed .health-section-caret { transform: rotate(180deg); }
body.app-ui .health-chronological { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 14px; padding: 0 1.25rem 1rem; }
body.app-ui .health-date-pill { font-size: .8125rem; text-transform: none; letter-spacing: 0; }
body.app-ui .health-timeline-row { gap: 1rem; padding: 1rem 0; }
body.app-ui .health-timeline-title { font-size: 1rem; }
body.app-ui .health-timeline-meta { font-size: .875rem; margin-top: .25rem; }
body.app-ui .health-timeline-summary { color: var(--app-ink); overflow-wrap: anywhere; margin-top: .5rem; }
body.app-ui .health-timeline-actions { opacity: 1; }
body.app-ui .health-timeline-action-btn { width: auto; min-height: 38px; height: auto; border-radius: 8px; padding: .35rem .65rem; color: var(--app-muted); font-size: .8125rem; }
body.app-ui .health-timeline-delete { color: #ae3030; }
body.app-ui .health-vet-card small { font-size: .8125rem; }
body.app-ui .health-vet-card h3 { font-size: 1.125rem; }
body.app-ui .health-vet-card p { font-size: .9375rem; }
body.app-ui .vet-report-card { background: var(--app-surface); }
body.app-ui .vet-report-card h2 { font-size: 1.3rem; }
body.app-ui .profile-content { min-width: 0; }
body.app-ui .field-display { color: var(--app-ink); }
body.app-ui :is(.visit-meta, .history-item, .detail-block p) { font-size: .9375rem; }
body.app-ui :is(.visit-chip, .detail-block small, .visit-date b, .visit-date span) { font-size: .8125rem; }
body.app-ui .app-section-heading { flex-wrap: wrap; gap: 1rem; scroll-margin-top: 1rem; }
body.app-ui .app-section-heading > .d-flex { flex-wrap: wrap; }
body.app-ui .home-dashboard :is(.add-task-card-btn, .log-health-card-btn) { min-height: 44px; border-radius: 9px; font-size: .9375rem; }
body.app-ui .home-dashboard .log-health-card-btn { background: var(--app-surface); color: var(--app-accent); border: 1px solid var(--app-accent); box-shadow: none; }
body.app-ui .home-dashboard .log-health-card-btn:hover { background: var(--app-accent-soft); transform: none; }
body.app-ui .home-dashboard .pet-card-edit-btn { opacity: 1; width: 38px; height: 38px; }

@media (max-width: 767.98px) {
    body.app-ui > .main-content { padding: 1.25rem 1rem 2rem; }
    body.app-ui .health-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.app-ui .health-stat-card { flex-direction: column; gap: .5rem; padding: 1rem; }
    body.app-ui .health-stat-body strong { font-size: 1.2rem; }
    body.app-ui .health-timeline-row { flex-wrap: wrap; gap: .65rem; }
    body.app-ui .health-timeline-actions { margin-left: 42px; }
    body.app-ui .health-timeline-body { flex-basis: calc(100% - 48px); }
    body.app-ui .health-page section > .d-flex { flex-wrap: wrap; }
    body.app-ui .health-filter-footer > div { width: 100%; }
    body.app-ui .health-filter-footer .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
    .skip-link { display: none; }
    html[data-bs-theme] body.app-ui:has(.reports-page),
    html[data-bs-theme] body.app-ui:has(.reports-page) :is(.main-content, main),
    html[data-bs-theme] body.app-ui .reports-page,
    html[data-bs-theme] body.app-ui .reports-page .report-sheet,
    html[data-bs-theme] body.app-ui .reports-page .report-sheet * {
        background: #fff !important;
        color: #111 !important;
        border-color: #aaa !important;
        box-shadow: none !important;
    }
}