/* Contractor Command branding: swap Contractor Command's logo and loading image. */
img[src*="akaunting-logo"],
img[src*="akaunting-loading"] {
    content: url("/modules/ContractorCommandSync/Resources/assets/contractor-command-logo.svg");
}
img[src*="akaunting-loading"] {
    animation: cc-pulse 1.1s ease-in-out infinite;
}
@keyframes cc-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.88); opacity: .6; }
}

/* Estimates and invoices, classic layout: the red number box grows to fit what's in it (a long
   number, the job's project name) instead of the words spilling out below it.
   Also sent with the PDFs (Services/InvoiceHeading::CLASSIC_FIT). */
.invoice-classic-frame, .invoice-classic-inline-frame { height: auto !important; }
.invoice-classic-frame { min-height: 60px; padding: 0.1px 0; }
.invoice-classic-inline-frame { min-height: 50px; padding-bottom: 7px; overflow-wrap: anywhere; }

/* Phones and tablets: button rows wrap instead of running off the screen, wide tables scroll
   inside their card. */
@media (max-width: 1100px) {
    /* Hidden tooltips no longer make the page wiggle sideways on a phone. */
    html, body { overflow-x: clip; }
    /* The hidden summary tooltips (Invoices, Customers, Transactions ...) sit past the right edge
       and still let the page slide sideways a little on a phone: take them out while hidden. */
    [id^="tooltip-"].invisible { display: none !important; }
    /* Estimate / invoice page title: the status badge (Invoiced, Sent ...) wraps under a long title. */
    #header .flex.items-center.space-y-4 { flex-wrap: wrap; row-gap: 6px; }
    #header .flex.items-center.space-y-4 > div:last-child { margin-top: 0; }
    .d-flex.gap-2 { flex-wrap: wrap; }
    .card-body > table.table, .card > table.table { display: block; overflow-x: auto; max-width: 100%; }
    /* Page title and its button row: buttons drop below the title instead of squeezing it. */
    .d-flex.justify-content-between:has(> .d-flex.gap-2) { flex-wrap: wrap; gap: 12px; }
}
@media (max-width: 767.98px) {
    /* Number cards (Open Follow-Ups, Overdue Actions ...) two per row on a phone. */
    .row > .col-md-2:has(> .card.h-100), .row > .col-md-3:has(> .card.h-100) { flex: 0 0 auto; width: 50%; }
}
@media (max-width: 600px) {
    .d-flex.justify-content-between:has(> .d-flex.gap-2) > * { flex: 1 1 100%; }
    .d-flex.gap-2 > a.btn, .d-flex.gap-2 > form > .btn { font-size: .85rem; padding: .35rem .6rem; }
}