/* put your own styles to customize and override the theme */

/* select2 hides the real <select> and renders its own box, so Bootstrap's
   .is-invalid on the control is not visible. Carry the invalid state onto the
   select2 widget that sits right after it, so a required empty multi-select
   reads as an error the same as a plain input. */
.is-invalid + .select2-container .select2-selection {
    border-color: #dc3545;
}

/* select2 appends its dropdown to <body> with z-index 1051 (theme.css) --
   above .app-header's 1030 (fixed top bar), so a dropdown that flips upward
   near the top of a long page renders over the header instead of under it.
   Modal-hosted select2 instances (coupons/subscriptions) already opt out via
   dropdownParent, so this only affects the plain-page case. */
.select2-dropdown {
    z-index: 1029;
}

/* Many report/list tables carry .sticky-header but no rule ever backed it, so
   a long unpaginated table scrolled its column headers out of view. The skin
   is chosen purely from prefers-color-scheme (app.twig resets it every load),
   so the same media query supplies the header background that matches the card
   in each skin -- #fff light, #222230 dark -- and rows do not bleed through. */
.sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #fff;
}

@media (prefers-color-scheme: dark) {
    .sticky-header thead th {
        background-color: #222230;
    }
}

/* Accessibility -- contrast. The theme's muted text (#888c9b) is ~3.1:1 on
   white, below WCAG AA; darken it in the light skin. On the dark skin it sits
   on the dark card and already passes, so lighten it slightly there instead.
   The subtle status badges (Unpaid, Expired, Rejected, Unchecked) render their
   tint colour as text at ~1.9-4.4:1 on the near-white fill -- darken that text
   in the light skin only, since on the dark skin's fill the original colour is
   already legible. Skin follows prefers-color-scheme (app.twig). */
.text-muted {
    color: #6b7180 !important;
}

.badge-subtle.badge-warning {
    color: #8a6100 !important;
}

.badge-subtle.badge-danger {
    color: #9c3d80 !important;
}

@media (prefers-color-scheme: dark) {
    .text-muted {
        color: #9aa0b0 !important;
    }

    .badge-subtle.badge-warning {
        color: #f6ba54 !important;
    }

    .badge-subtle.badge-danger {
        color: #af5a98 !important;
    }
}


/* The .sticky-header rule above never took effect on a list page: every table
   carrying the class sits inside .table-responsive, whose overflow-x:auto makes
   the wrapper a scroll container (overflow-y computes to auto too). A sticky
   header sticks to the nearest scrolling ancestor, and this wrapper is only as
   tall as its content, so it never scrolls vertically and the header left with
   the page. Cap the wrapper at the viewport instead: once the page has scrolled
   the table under the top bar, the wrapper scrolls and the header holds. Wide
   tables keep their horizontal scroll. Not applied on phones, where a nested
   scroll area fights the page scroll and the tables are hidden-column
   fallbacks anyway. 9.5rem = the 3.5rem fixed header plus the title bar and
   card padding above a table. */
@media (min-width: 768px) {
    .table-responsive:has(> .sticky-header) {
        max-height: calc(100vh - 9.5rem);
        overflow-y: auto;
    }
}

/* A labelled section break for a long form -- two hr halves either side of
   the name, rather than a bare rule with no indication of what comes next.
   Used by the offer form (add / edit / copy share one partial). */
.hr-text {
    display: flex;
    align-items: center;
    margin: 1.75rem 0 1.25rem;
}

.hr-text hr {
    flex: 1 1 auto;
    margin: 0;
}

.hr-text span {
    padding: 0 .75rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #888c9b;
    white-space: nowrap;
}

/* Owner AI chat panel (resources/views/_layouts/app/_partials/chatPanel.twig).
   Phones: the panel covers the right of the screen. Desktop (768px and up): a
   centred window over a dimmed page. Closed is hidden by opacity and
   visibility, never by sliding; the page itself is never padded or shifted. */
.chat-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    background: var(--white, #fff);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s;
    z-index: 1040;
}
.chat-panel.open { opacity: 1; visibility: visible; pointer-events: auto; }
.chat-panel.chat-no-transition { transition: none; }
.chat-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1039; }
@media (min-width: 768px) {
    body.chat-open .chat-backdrop { display: block; }
    .chat-panel {
        top: 4vh; bottom: 4vh; left: 50%; right: auto;
        width: min(1040px, 94vw); max-width: 94vw;
        transform: translateX(-50%);
        border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 12px; overflow: hidden;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    }
    .chat-messages { padding: 16px 20px; }
    .chat-msg { max-width: 88%; }
    .chat-msg.chat-has-table { max-width: 100%; }
    /* There is room for whole names here, so the underscore break points are switched off. */
    .chat-table wbr { display: none; }
}
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.chat-head .chat-usage { font-size: 12px; flex: 1; }
.chat-head-actions { display: flex; gap: 4px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 12px; }
.chat-msg { margin-bottom: 10px; max-width: 92%; }
.chat-user { margin-left: auto; text-align: right; }
.chat-bubble { display: inline-block; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.05); text-align: left; white-space: pre-wrap; word-break: break-word; font-family: inherit; }
.chat-user .chat-bubble { background: #3063A0; color: #fff; }
.chat-time { font-size: 11px; margin-top: 2px; }
/* A scheduled summary written by the system: a small label above the bubble and an accent edge. */
.chat-summary-label { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 2px; }
.chat-summary .chat-bubble { border-left: 3px solid #3063A0; }
.chat-bubble ul, .chat-bubble ol { margin: 4px 0 4px 18px; padding: 0; white-space: normal; }
.chat-bubble li { margin: 2px 0; }
.chat-bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 0 3px; border-radius: 3px; background: rgba(0, 0, 0, 0.06); }
.chat-bubble strong { font-weight: 600; }
.chat-table { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: 13px; white-space: normal; }
.chat-table th, .chat-table td { border: 1px solid rgba(0, 0, 0, 0.12); padding: 3px 6px; vertical-align: top; }
.chat-table th { font-weight: 600; background: rgba(0, 0, 0, 0.04); text-align: left; }
.chat-table td.num { white-space: nowrap; }
/* A table never breaks a word mid-word (the bubble's break-anywhere rule
   stops here); long names wrap at the <wbr> after each underscore, and a
   table wider than the panel scrolls sideways inside its wrapper. */
.chat-msg.chat-has-table { max-width: 100%; }
.chat-msg.chat-has-table .chat-bubble { display: block; }
.chat-table-wrap { overflow-x: auto; margin: 6px 0; }
.chat-table-wrap .chat-table { margin: 0; }
.chat-table th, .chat-table td { word-break: normal; overflow-wrap: normal; }
/* A long group label wraps at its spaces; forcing it onto one line squeezed the other columns. */
.chat-table th:first-child, .chat-table td:first-child { min-width: 5.5em; }
/* In a real table the first column is left, every other column centred. Inside the
   min-width query so the card layout below 768px never sees it. */
@media (min-width: 768px) {
    .chat-table th:first-child, .chat-table td:first-child { text-align: left; }
    .chat-table th:not(:first-child), .chat-table td:not(:first-child) { text-align: center; }
}
@media (prefers-color-scheme: dark) { .chat-table th, .chat-table td { border-color: rgba(255, 255, 255, 0.15); } .chat-table th { background: rgba(255, 255, 255, 0.06); } }
/* Card layout: each row is a card, the first cell its title, the rest "label: value" pairs.
   Phones only; from 768px up a table is always a real table. */
@media (max-width: 767px) {
    .chat-table, .chat-table tbody, .chat-table tr, .chat-table td { display: block; }
    .chat-table { border: 0; width: 100%; }
    .chat-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .chat-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 8px 10px; margin: 0 0 8px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; background: rgba(0, 0, 0, 0.02); }
    .chat-table tr:last-child { margin-bottom: 0; }
    .chat-table td { border: 0; padding: 0; text-align: left; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
    .chat-table td:first-child { grid-column: 1 / -1; min-width: 0; font-weight: 600; font-size: 14px; }
    .chat-table td:not(:first-child)::before { content: attr(data-label); display: block; font-size: 11px; line-height: 1.3; font-weight: 400; opacity: 0.65; text-transform: none; }
    .chat-table td.chat-cell-long { grid-column: 1 / -1; }
    .chat-table td.chat-cell-empty { display: none; }
    .chat-table td.num { text-align: left; white-space: normal; }
}
.chat-action { margin-top: 6px; padding: 8px 10px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; background: rgba(48, 99, 160, 0.06); text-align: left; }
.chat-action-confirmed { border-color: #00a28a; }
.chat-action-cancelled, .chat-action-undone, .chat-action-failed { opacity: 0.7; }
.chat-action-summary { margin-bottom: 6px; }
.chat-export { margin-top: 6px; padding: 8px 10px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; background: rgba(48, 99, 160, 0.06); text-align: left; }
.chat-export-label { margin-bottom: 6px; overflow-wrap: anywhere; }
@media (max-width: 767px) { .chat-export .btn { display: block; width: 100%; } }
.chat-blocked { padding: 6px 12px; font-size: 13px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.chat-shortcuts { display: flex; flex-wrap: nowrap; gap: 6px; padding: 6px 12px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.chat-shortcuts::-webkit-scrollbar { display: none; }
.chat-shortcut { flex: 0 0 auto; white-space: nowrap; border-radius: 999px; font-size: 12px; line-height: 1.4; }
.chat-shortcuts:not(.d-none) + .chat-form { border-top: 0; padding-top: 6px; }
.chat-shortcut { --sc: 48, 99, 160; --st: #24507f; --sd: #a9c8ee; }
.chat-shortcut:nth-child(2) { --sc: 201, 122, 0; --st: #8a5300; --sd: #f2c577; }
.chat-shortcut:nth-child(3) { --sc: 30, 142, 82; --st: #17683d; --sd: #8fd9b0; }
.chat-shortcut:nth-child(4) { --sc: 123, 82, 171; --st: #5a3a85; --sd: #cbb1ec; }
.chat-shortcut:nth-child(5) { --sc: 14, 138, 150; --st: #0a626b; --sd: #86d6de; }
.chat-shortcuts .chat-shortcut { padding: 3px 12px; font-weight: 500; background: rgba(var(--sc), 0.12); border: 1px solid rgba(var(--sc), 0.35); color: var(--st); }
.chat-shortcuts .chat-shortcut:hover, .chat-shortcuts .chat-shortcut:focus-visible { background: rgba(var(--sc), 0.24); border-color: rgba(var(--sc), 0.6); color: var(--st); }
@media (min-width: 768px) { .chat-shortcuts { flex-wrap: wrap; overflow-x: visible; } }
.chat-form { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.chat-form textarea { resize: none; }
.chat-empty { font-size: 13px; padding: 8px; }
@media (prefers-color-scheme: dark) {
    .chat-panel { background: #222230; border-color: rgba(255, 255, 255, 0.08); }
    @media (max-width: 767px) { .chat-panel { box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4); } }
    @media (min-width: 768px) { .chat-panel { border-color: rgba(255, 255, 255, 0.12); } }
    .chat-bubble { background: rgba(255, 255, 255, 0.08); }
    .chat-summary .chat-bubble { border-left-color: #7fa7d6; }
    .chat-head, .chat-form, .chat-blocked, .chat-shortcuts { border-color: rgba(255, 255, 255, 0.08); }
    .chat-shortcut { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.12); color: #e6e6ee; }
    .chat-shortcut:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
    .chat-shortcuts .chat-shortcut { background: rgba(var(--sc), 0.22); border-color: rgba(var(--sc), 0.5); color: var(--sd); }
    .chat-shortcuts .chat-shortcut:hover, .chat-shortcuts .chat-shortcut:focus-visible { background: rgba(var(--sc), 0.36); color: #fff; }
    .chat-action, .chat-export { border-color: rgba(255, 255, 255, 0.15); background: rgba(48, 99, 160, 0.18); }
    @media (max-width: 767px) { .chat-table tr { border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.04); } }
}