/* VetMora additions layered on top of the Dasher MIT theme. */
:root {
    --vetmora-accent-soft: rgba(0, 167, 111, .12);
}

body { min-height: 100vh; }

.vetmora-logo-mark {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--ds-primary, #00a76f);
    color: #fff;
    flex: 0 0 auto;
}

/* Keep Dasher's topbar out of normal document flow.
   The theme positions .navbar-glass as fixed; making it sticky adds the
   navbar height on top of #content's built-in 80px top padding and pushes
   the dashboard down by roughly one extra header height. */
.vetmora-topbar { position: fixed; top: 0; z-index: 1034; }
.vetmora-avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--ds-primary, #00a76f); color: #fff; font-weight: 700; }
.vetmora-tiny { font-size: .72rem; }
.vetmora-notification-count { font-size: .55rem; min-width: 17px; }
.vetmora-alert-dot { width: 10px; height: 10px; border-radius: 999px; margin-top: .35rem; flex: 0 0 auto; }
.vetmora-sidebar-footer { margin-top: auto; }
#miniSidebar { display: flex; flex-direction: column; }

.vetmora-hero {
    background:
        radial-gradient(circle at 85% 10%, rgba(0, 167, 111, .35), transparent 27%),
        linear-gradient(135deg, rgba(0, 167, 111, .16), rgba(0, 184, 217, .08));
    border: 1px solid rgba(0, 167, 111, .12);
}

.vetmora-stat-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.vetmora-kpi-number { letter-spacing: -.04em; }
.vetmora-table-status { white-space: nowrap; }
.vetmora-queue-avatar { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; background: var(--ds-gray-200); }

[data-bs-theme="dark"] .vetmora-hero {
    background:
        radial-gradient(circle at 85% 10%, rgba(0, 167, 111, .22), transparent 27%),
        linear-gradient(135deg, rgba(0, 167, 111, .10), rgba(0, 184, 217, .05));
}

@media (max-width: 767.98px) {
    .custom-container { padding-left: 1rem; padding-right: 1rem; }
}

/* Dasher's compiled CSS expects the Tabler icon font for dropdown carets, but
   the free package supplied to this project does not include that font file.
   Use a pure-CSS caret so controls never show missing-font glyph boxes. */
.dropdown-toggle::after {
    font-family: inherit !important;
    content: "" !important;
    display: inline-block !important;
    width: 0;
    height: 0;
    margin-left: .45rem !important;
    vertical-align: .15em !important;
    border-top: .3em solid currentColor !important;
    border-right: .3em solid transparent !important;
    border-bottom: 0 !important;
    border-left: .3em solid transparent !important;
    float: none !important;
}
.navbar-vertical .nav-link.dropdown-toggle::after { margin-left: auto !important; }

.vetmora-confirm-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--ds-danger, #ff5630);
    background: rgba(255, 86, 48, .12);
}

.vetmora-internal-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: .7rem;
    color: var(--ds-secondary-color, #8a94a6);
}

@media print {
    .vetmora-no-print, .navbar-vertical, .vetmora-topbar, .footer { display: none !important; }
    #content { margin-left: 0 !important; padding: 0 !important; }
    .custom-container { max-width: none !important; padding: 0 !important; }
}

/* ASP.NET Core renders validation-summary containers even when they contain no errors.
   Bootstrap's alert-danger styling otherwise leaves an empty red panel on initial GET.
   jquery-validation-unobtrusive switches this class to validation-summary-errors when
   there is something the user actually needs to see. */
.validation-summary-valid.alert {
    display: none;
}

/* Encounter treatment-plan fulfillment choice */
.vm-choice-card {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .65rem;
  cursor: pointer;
  background: rgba(var(--bs-body-bg-rgb), .18);
}
.vm-choice-card:hover { border-color: var(--bs-primary); }
.vm-choice-card input { margin-top: .2rem; }
.vm-choice-card span { display: grid; gap: .2rem; }
.vm-choice-card small { color: var(--bs-secondary-color); line-height: 1.35; }

/* Printable/customer-facing documents are physical white-paper surfaces.
   Dasher uses its own --ds-* theme variables in addition to Bootstrap's
   --bs-* variables. Reset BOTH variable families inside document surfaces so
   dark application chrome can never leak white headings/dark table headers
   into a receipt, prescription, or certificate preview. */
.vetmora-print-document,
.vetmora-receipt-paper {
    background: #fff !important;
    color: #1c252e !important;
    color-scheme: light;

    --ds-body-color: #1c252e;
    --ds-body-color-rgb: 28, 37, 46;
    --ds-body-bg: #fff;
    --ds-body-bg-rgb: 255, 255, 255;
    --ds-emphasis-color: #111827;
    --ds-emphasis-color-rgb: 17, 24, 39;
    --ds-secondary-color: #637381;
    --ds-secondary-color-rgb: 99, 115, 129;
    --ds-heading-color: #111827;
    --ds-border-color: #d7dee8;
    --ds-border-color-translucent: rgba(15, 23, 42, .14);
    --ds-gray-100: #f8fafc;
    --ds-gray-200: #f1f5f9;
    --ds-gray-300: #e2e8f0;
    --ds-gray-600: #64748b;
    --ds-table-color: #1c252e;
    --ds-table-bg: transparent;
    --ds-table-border-color: #e2e8f0;
    --ds-table-striped-color: #1c252e;
    --ds-table-striped-bg: #f8fafc;
    --ds-table-active-color: #1c252e;
    --ds-table-hover-color: #1c252e;

    --bs-body-color: #1c252e;
    --bs-emphasis-color: #111827;
    --bs-secondary-color: #64748b;
    --bs-secondary-color-rgb: 100, 116, 139;
    --bs-border-color: #d7dee8;
    --bs-border-color-translucent: rgba(15, 23, 42, .14);
    --bs-card-color: #1c252e;
    --bs-card-bg: #fff;
    --bs-table-color: #1c252e;
    --bs-table-bg: transparent;
    --bs-table-border-color: #e2e8f0;
}

.vetmora-print-document h1,
.vetmora-print-document h2,
.vetmora-print-document h3,
.vetmora-print-document h4,
.vetmora-print-document h5,
.vetmora-print-document h6,
.vetmora-receipt-paper h1,
.vetmora-receipt-paper h2,
.vetmora-receipt-paper h3,
.vetmora-receipt-paper h4,
.vetmora-receipt-paper h5,
.vetmora-receipt-paper h6 {
    color: #111827 !important;
}

.vetmora-print-document .text-secondary,
.vetmora-receipt-paper .text-secondary {
    color: #64748b !important;
}

.vetmora-print-document .table,
.vetmora-receipt-paper .table {
    --ds-table-color: #1c252e;
    --ds-table-bg: transparent;
    --ds-table-border-color: #e2e8f0;
    --bs-table-color: #1c252e;
    --bs-table-bg: transparent;
    --bs-table-border-color: #e2e8f0;
}

.vetmora-print-document .table > :not(caption) > * > *,
.vetmora-receipt-paper .table > :not(caption) > * > * {
    color: #1c252e !important;
}

/* alpha5.14 scheduling calendar */
.vm-calendar-weekdays,
.vm-calendar-grid,
.vm-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .75rem;
}
.vm-calendar-day {
    min-height: 150px;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-body-bg);
    padding: .75rem;
}
.vm-week-grid .vm-calendar-day { min-height: 340px; }
.vm-calendar-today { box-shadow: inset 0 0 0 2px var(--bs-primary); }
.vm-calendar-muted { opacity: .48; }
.vm-appointment-card {
    display: block;
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--bs-primary);
    border-radius: .5rem;
    padding: .55rem .6rem;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
}
.vm-appointment-card:hover { transform: translateY(-1px); }
.vm-appointment-emergency { border-left-color: var(--bs-danger); background: rgba(var(--bs-danger-rgb), .08); }
@media (max-width: 991.98px) {
    .vm-calendar-grid,
    .vm-week-grid { grid-template-columns: 1fr; }
    .vm-calendar-day,
    .vm-week-grid .vm-calendar-day { min-height: auto; }
}

/* alpha5.22.6 Dasher-scale typography pass
   The previous pass left normal application text at Dasher's compact 14px base,
   so the visual change was intentionally subtle. VetMora now uses a 15px app-shell
   base with 14px secondary/compact text. This keeps dense screens efficient while
   making the overall UI read at the larger scale requested. */
:root {
    --vetmora-text-base: 0.9375rem;  /* 15px */
    --vetmora-text-small: 0.875rem; /* 14px */
    --vetmora-sidebar-text: 0.9375rem; /* 15px */
    --ds-body-font-size: var(--vetmora-text-base);
}

/* Normal application copy */
body {
    font-size: var(--vetmora-text-base);
}

small,
.small {
    font-size: var(--vetmora-text-small);
    line-height: 1.5;
}

.form-text {
    font-size: var(--vetmora-text-small);
    line-height: 1.5;
}

.form-label {
    font-size: var(--vetmora-text-base);
    font-weight: 600;
}

/* Dasher hard-codes several standard controls to 14px. Lift the ordinary controls
   to the 15px app scale, while keeping compact controls at a readable 14px. */
.form-control,
.form-select {
    font-size: var(--vetmora-text-base);
}
.form-control-sm,
.form-select-sm {
    font-size: var(--vetmora-text-small);
}

.btn {
    --ds-btn-font-size: var(--vetmora-text-base);
}
.btn-sm,
.btn-group-sm > .btn {
    --ds-btn-font-size: var(--vetmora-text-small);
}

.dropdown-menu {
    --ds-dropdown-font-size: var(--vetmora-text-base);
}

/* Main and mobile navigation should visually match the larger app-shell scale. */
#miniSidebar .nav-link,
.offcanvasNav .nav-link {
    font-size: var(--vetmora-sidebar-text);
}

/* Data-heavy screens stay dense, but no longer read smaller than the surrounding UI. */
.table {
    font-size: var(--vetmora-text-base);
}
.table th {
    font-size: var(--vetmora-text-small);
    font-weight: 700;
}

/* Deliberately tiny UI remains tiny. */
.vetmora-tiny { font-size: .72rem; }
.vetmora-notification-count { font-size: .55rem; }
.vetmora-internal-id { font-size: .7rem; }

/* Printed/customer-facing documents keep their original physical-document
   typography instead of inheriting the app-shell scale. */
.vetmora-print-document,
.vetmora-receipt-paper {
    font-size: 0.875rem;
}
.vetmora-print-document small,
.vetmora-print-document .small,
.vetmora-receipt-paper small,
.vetmora-receipt-paper .small {
    font-size: .75rem;
}

/* alpha5.36.6 Encounter workspace redesign */
.vm-encounter-workspace {
    --vm-encounter-gap: 1rem;
}
.vm-encounter-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.vm-encounter-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.vm-encounter-tabs {
    display: flex;
    gap: .35rem;
    padding: .4rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .9rem;
    background: var(--bs-tertiary-bg);
    overflow-x: auto;
    scrollbar-width: thin;
}
.vm-encounter-tab {
    border: 0;
    border-radius: .65rem;
    background: transparent;
    color: var(--bs-secondary-color);
    font: inherit;
    font-weight: 600;
    padding: .72rem .9rem;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.vm-encounter-tab:hover {
    color: var(--bs-body-color);
    background: rgba(var(--bs-primary-rgb), .07);
}
.vm-encounter-tab.is-active {
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-body-bg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.vm-tab-count {
    display: inline-flex;
    margin-left: .3rem;
    padding: .1rem .4rem;
    border-radius: 999px;
    font-size: .72rem;
    line-height: 1.25;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}
.vm-encounter-tab.is-active .vm-tab-count {
    background: rgba(var(--bs-primary-rgb), .12);
    color: var(--bs-primary-text-emphasis);
}
.vm-encounter-panel[hidden] { display: none !important; }
.vm-panel-heading {
    margin-bottom: 1rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.vm-encounter-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .75rem;
}
.vm-summary-card {
    display: flex;
    min-width: 0;
    min-height: 118px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .2rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .9rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-align: left;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.vm-summary-card:hover {
    border-color: rgba(var(--bs-primary-rgb), .55);
    transform: translateY(-1px);
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .07);
}
.vm-summary-label,
.vm-module-kicker {
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.vm-summary-card strong {
    font-size: 1.15rem;
    line-height: 1.25;
}
.vm-summary-detail {
    color: var(--bs-secondary-color);
    font-size: .82rem;
    line-height: 1.35;
}
.vm-review-list {
    display: grid;
    gap: .5rem;
}
.vm-review-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem .85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .7rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-align: left;
}
.vm-review-row:hover { background: var(--bs-tertiary-bg); }
.vm-review-row > span:first-child {
    display: grid;
    gap: .1rem;
}
.vm-review-row small { color: var(--bs-secondary-color); }
.vm-quick-actions-card .btn { justify-content: center; }
.vm-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.vm-module-card {
    display: grid;
    gap: .35rem;
    min-height: 150px;
    padding: 1.2rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .9rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    align-content: center;
}
.vm-module-card strong { font-size: 1.05rem; }
.vm-module-card > span:last-child {
    color: var(--bs-secondary-color);
    line-height: 1.45;
}
.vm-module-card:hover {
    border-color: rgba(var(--bs-primary-rgb), .55);
    background: rgba(var(--bs-primary-rgb), .035);
    color: var(--bs-body-color);
}
.vm-finalize-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.vm-finalize-checks > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem .85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .7rem;
}
.vm-finalize-checks span { color: var(--bs-secondary-color); }

@media (max-width: 1399.98px) {
    .vm-encounter-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .vm-encounter-header { flex-direction: column; }
    .vm-encounter-header-actions { width: 100%; }
    .vm-encounter-tabs {
        margin-left: -.25rem;
        margin-right: -.25rem;
        border-radius: .75rem;
    }
    .vm-encounter-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vm-summary-card { min-height: 105px; }
    .vm-module-grid,
    .vm-finalize-checks { grid-template-columns: 1fr; }
    .vm-review-row { align-items: flex-start; }
}
@media (max-width: 479.98px) {
    .vm-encounter-summary-grid { grid-template-columns: 1fr; }
    .vm-summary-card { min-height: 0; }
}


/* alpha5.39 mobile, accessibility & UX polish */
.vm-skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 2000;
    transform: translateY(-180%);
    padding: .65rem .9rem;
    border-radius: .65rem;
    color: #fff;
    background: var(--ds-primary, #00a76f);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18);
    transition: transform .15s ease;
}
.vm-skip-link:focus { transform: translateY(0); color: #fff; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(0, 167, 111, .45) !important;
    outline-offset: 2px;
}

.vm-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-radius: inherit;
}
.vm-table-scroll:focus-visible {
    outline-offset: -3px;
}
.vm-table-scroll > .table { min-width: max-content; }
.vm-table-scroll > .table > :not(caption) > * > * { vertical-align: middle; }

.vm-submit-busy {
    position: relative;
    cursor: wait !important;
    opacity: .78;
}
.vm-submit-busy::before {
    content: "";
    display: inline-block;
    width: .9em;
    height: .9em;
    margin-right: .45em;
    vertical-align: -.08em;
    border: .14em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: vm-submit-spin .7s linear infinite;
}
@keyframes vm-submit-spin { to { transform: rotate(360deg); } }

/* Keep the clinical workspace navigation visible while the vet moves between sections. */
.vm-encounter-tabs {
    position: sticky;
    top: 84px;
    z-index: 1020;
    box-shadow: 0 .45rem 1rem rgba(15, 23, 42, .05);
}

@media (pointer: coarse) {
    .btn:not(.btn-link),
    .form-control,
    .form-select,
    .dropdown-item,
    .nav-link {
        min-height: 44px;
    }
    .btn-sm,
    .btn-group-sm > .btn { min-height: 40px; }
    .form-check-input { width: 1.25rem; height: 1.25rem; }
}

@media (max-width: 767.98px) {
    .custom-container { padding-left: .85rem; padding-right: .85rem; }

    /* Common page headers: keep actions reachable without tiny side-by-side controls. */
    .custom-container > .d-flex.flex-wrap.justify-content-between.align-items-center,
    .custom-container > .d-flex.flex-wrap.justify-content-between.align-items-start {
        align-items: stretch !important;
    }
    .custom-container > .d-flex.flex-wrap.justify-content-between > .d-flex.flex-wrap,
    .custom-container > .d-flex.flex-wrap.justify-content-between > .d-flex.gap-2 {
        width: 100%;
    }
    .custom-container > .d-flex.flex-wrap.justify-content-between > .d-flex.flex-wrap > .btn,
    .custom-container > .d-flex.flex-wrap.justify-content-between > .d-flex.gap-2 > .btn {
        flex: 1 1 10rem;
    }

    .card-body > form > .text-end.mt-3,
    .card-body > form > .d-flex.justify-content-end.mt-3,
    .card-footer > .text-end,
    .card-footer > .d-flex.justify-content-end {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: .5rem;
    }
    .card-body > form > .text-end.mt-3 > .btn,
    .card-body > form > .d-flex.justify-content-end.mt-3 > .btn,
    .card-footer > .text-end > .btn,
    .card-footer > .d-flex.justify-content-end > .btn {
        width: 100%;
    }

    .vm-table-scroll {
        margin-left: -.15rem;
        margin-right: -.15rem;
        width: calc(100% + .3rem);
    }
    .vm-table-scroll > .table { margin-bottom: 0; }

    /* Prevent iOS from zooming form controls while keeping the desktop scale intact. */
    .form-control,
    .form-select { font-size: 16px; }

    .vm-encounter-tabs {
        top: 72px;
        scroll-snap-type: x proximity;
    }
    .vm-encounter-tab { scroll-snap-align: start; min-height: 44px; }
    .vm-encounter-header-actions .btn { flex: 1 1 10rem; }
}

@media (max-width: 575.98px) {
    .card { border-radius: .85rem; }
    .card-body { padding: 1rem; }
    .btn-group[role="group"] { max-width: 100%; overflow-x: auto; }
    .input-group { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}