/* Shared responsive layout. Keep overflow contained at the component that needs it;
   never hide document overflow, which would make controls and content unreachable. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.dark { color-scheme: dark; }
body { overflow-wrap: break-word; overflow-wrap: anywhere; }
*, *::before, *::after { box-sizing: border-box; }
.flex > *, .inline-flex > *, .grid > * { min-width: 0; }
input, select, textarea { min-width: 0; max-width: 100%; }
textarea { resize: vertical; }
img, video, canvas, iframe { max-width: 100%; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
button, [role="button"], summary, a { touch-action: manipulation; }
button, summary { -webkit-tap-highlight-color: transparent; }
input[type="checkbox"], input[type="radio"] { flex-shrink: 0; }
:focus-visible { outline: 3px solid #059669; outline-offset: 3px; }
.dark :focus-visible { outline-color: #34d399; }

.tf-main { width: 100%; min-width: 0; max-width: 112rem; margin: 0 auto; }
.tf-main > *, .tf-main form { min-width: 0; }
.tf-main .overflow-x-auto, .tf-nav-tabs, .tf-table-scroll {
    max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.tf-nav-tabs > a { flex: 0 0 auto; min-height: 44px; }
.tf-property-filters { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; }
.tf-property-filters::-webkit-scrollbar { height: 4px; }
.tf-property-filters::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 999px; }
.tf-property-filters > a { display: inline-flex; align-items: center; min-width: 0; min-height: 44px; max-width: min(78vw, 22rem); flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-page-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.tf-page-heading > h1, .tf-page-heading > h2 { flex: 1 1 16rem; }
.tf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tf-actions > a, .tf-actions > button { max-width: 100%; }
.tf-filter-form { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; }
.tf-filter-form > input:not([type="hidden"]), .tf-filter-form > select { flex: 1 1 12rem; }
.tf-card-heading { display: flex; flex-wrap: wrap; gap: .75rem; }
.tf-card-heading > :first-child { flex: 1 1 12rem; }
.tf-card-meta { flex: 0 1 auto; margin-left: 0; }
.tf-amount-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.tf-amount-row > :last-child { margin-left: auto; text-align: right; }
.tf-item-media { flex: 0 0 5rem; width: 5rem; max-width: 5rem; }
.tf-table-scroll { overflow-x: auto; }
.tf-table-scroll table { min-width: 42rem; }
.tf-table-hint { margin: 0 0 .5rem; font-size: .75rem; color: #64748b; }
.dark .tf-table-hint { color: #94a3b8; }
.tf-table-hint[hidden] { display: none; }

.tf-header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.tf-brand-group { flex: 1 1 auto; min-width: 0; }
.tf-brand { flex-shrink: 0; }
.tf-header-tools { flex: 0 1 auto; min-width: 0; }
.tf-header-tools > * { min-width: 0; }
.tf-header-context { max-width: 16rem; }
.tf-header-tools select { width: 11rem; }
.tf-desktop-search input { width: 10rem; }
.tf-user-link { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-icon-button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-width: 44px; flex: 0 0 44px;
}
.tf-message-inbox { position: relative; flex-shrink: 0; }
.tf-message-inbox-panel { width: min(24rem, calc(100vw - 1rem)); max-height: min(70dvh, 36rem); }
.tf-notification-list { max-height: min(52dvh, 26rem); overflow-y: auto; overscroll-behavior: contain; }
.tf-message-inbox-empty { padding: 1rem !important; }
.tf-push-settings { min-width: 0; }
.tf-account { position: relative; flex-shrink: 0; }
.tf-account summary { list-style: none; cursor: pointer; }
.tf-account summary::-webkit-details-marker { display: none; }
.tf-account-panel {
    position: absolute; right: 0; top: calc(100% + .5rem); z-index: 70;
    width: 20rem; max-width: calc(100vw - 2rem); max-height: 65vh;
    overflow-y: auto; padding: 1rem; border: 1px solid #e2e8f0;
    border-radius: .75rem; background: #fff; box-shadow: 0 10px 30px #0f172a26;
}
.tf-code { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.dark .tf-account-panel { background: #1e293b; border-color: #475569; }
.tf-account-panel a { display: flex; align-items: center; min-height: 44px; padding: .5rem .75rem; border-radius: .5rem; }
.tf-skip-link { position: fixed; left: 1rem; top: .5rem; z-index: 100; padding: .75rem 1rem;
    background: #047857; color: white; border-radius: .5rem; transform: translateY(-200%); }
.tf-skip-link:focus { transform: translateY(0); }
.tf-dialog-panel { min-height: 0; max-height: calc(100vh - 2rem); }
.tf-dialog-panel > :first-child { flex-shrink: 0; gap: .75rem; }
.tf-dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
@supports (height: 100dvh) { .tf-dialog-panel { max-height: calc(100dvh - 2rem); } }

/* The external order's item name needs a full row on phones. */
.tf-external-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.tf-external-item .tf-item-name { grid-column: 1 / -1; }
.tf-external-item label { display: block; font-size: .875rem; }
.tf-external-item label > span:first-child { display: block; margin-bottom: .25rem; }
.tf-external-item input { width: 100%; }
.tf-photo-control { grid-column: 1 / -1; }
.tf-photo-control input[type="file"] { font-size: .875rem; }
.tf-photo-control input::file-selector-button { min-height: 44px; margin-right: .5rem; }
.tf-edit-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.tf-edit-item input[type="file"] { width: 100%; }
.tf-photo-delete { min-width: 44px; min-height: 44px; opacity: 1; }

@media (min-width: 1024px) {
    .tf-edit-item { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
}

@media (min-width: 640px) {
    .tf-external-item { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
    .tf-external-item .tf-item-name { grid-column: auto; }
}
@media (min-width: 1280px) {
    .tf-header-tools select { width: 14rem; }
    .tf-desktop-search input { width: 12rem; }
    .tf-user-link { max-width: 12rem; }
}
@media (max-width: 1023px) {
    /* A three-row sticky header consumes too much of a phone/landscape screen. */
    nav.tf-site-nav { position: relative; }
    .tf-header { flex-wrap: nowrap; padding-left: 1rem; padding-right: 1rem; gap: .5rem; }
    .tf-header-tools { gap: .25rem; }
}
@media (max-width: 380px) {
    .tf-header { padding-left: .5rem; padding-right: .5rem; }
    .tf-header-tools { gap: .125rem; }
    .tf-brand > span { display: none; }
}
@media (max-width: 639px) {
    .tf-message-inbox-panel {
        position: fixed !important;
        top: calc(env(safe-area-inset-top, 0px) + 4.5rem) !important;
        right: max(.5rem, env(safe-area-inset-right, 0px)) !important;
        left: auto !important;
        width: min(24rem, calc(100vw - 1rem)) !important;
        max-height: min(58dvh, 30rem) !important;
        display: flex;
        flex-direction: column;
        border-radius: 1rem !important;
    }
    .tf-notification-list { flex: 1 1 auto; min-height: 0; max-height: min(32dvh, 18rem) !important; }
    .tf-message-inbox-empty { flex: 0 0 auto; padding: .875rem !important; }
    .tf-push-settings { flex: 0 0 auto; padding: .75rem !important; }
    .tf-message-inbox-panel #push-toggle-status { max-width: 15rem; overflow-wrap: anywhere; }
    .tf-main > [class*="max-w-"][class~="px-4"], .tf-main > .w-full[class~="px-4"] {
        padding-left: 0; padding-right: 0;
    }
    .tf-main > [class*="max-w-"][class~="py-8"] { padding-top: .5rem; padding-bottom: 1rem; }
    .tf-main .tf-page-heading { align-items: flex-start; }
    .tf-page-heading > .tf-actions { width: 100%; }
    .tf-page-heading > .tf-actions > a { flex: 1 1 auto; text-align: center; }
    .tf-card-meta { text-align: left; }
    .tf-main .tf-filter-form { width: 100%; }
    .tf-main .tf-filter-form > input:not([type="hidden"]), .tf-main .tf-filter-form > select { flex-basis: 100%; }
    .tf-main .tf-panel, .tf-main .bg-white.p-6, .tf-main .bg-white.p-8 { padding: 1rem; }
    .tf-main .tf-stack { flex-direction: column; align-items: stretch; }
    .tf-main .tf-stack > * { width: 100%; }
    .tf-main .tf-stack .tf-actions { justify-content: flex-start; }
    .tf-main .tf-fields { grid-template-columns: minmax(0, 1fr); }
    .tf-main .tf-fields > * { grid-column: auto; }
    .tf-main .tf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .tf-main .tf-stats > * { padding: .875rem; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
        font-size: 16px !important; min-height: 44px;
    }
    input[type="date"], input[type="datetime-local"], input[type="time"] { display: block; width: 100%; }
    input::-webkit-date-and-time-value { min-width: 0; text-align: left; }
    .tf-main button, .tf-main a[class*="rounded"], .tf-main label.cursor-pointer {
        min-height: 44px;
    }
    .tf-main button[title="Copy"], .tf-main button[title="Copy reference"] { min-width: 44px; flex-shrink: 0; }
    .tf-auth-shell { min-height: 0; padding: .5rem 0 1rem; }
    .tf-public-header { height: auto; min-height: 4rem; flex-wrap: wrap; gap: .5rem; padding-top: .5rem; padding-bottom: .5rem; }
    .tf-public-brand { gap: .375rem; font-size: 1.125rem; }
    .tf-public-actions { gap: .25rem; }
    .tf-public-actions a { display: flex; align-items: center; min-height: 44px; padding-left: .625rem; padding-right: .625rem; }
    .tf-mobile-full { width: 100%; }
    .tf-mobile-stack { flex-direction: column; align-items: stretch; }
    .tf-mobile-stack > * { width: 100%; }
}
@media (max-height: 500px) {
    nav.tf-site-nav { position: relative; }
    .tf-main .tf-submit-bar { position: static; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}