/* Custom styles for Hog Production Management System */

/* Pink pig icons */
.bi-piggy-bank {
    color: #ff69b4 !important;
}

/* Smooth transitions. Deliberately not `all`: transitioning a layout or
   geometry property is what turns a hover effect into a flicker loop. */
.btn, .card, .alert {
    transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out,
                border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Card hover effect — shadow, never transform. A transform moves the card's
   hit area along with its pixels, so a cursor near the bottom edge lifts the
   card out from under itself: :hover drops, the card falls back, :hover
   returns. That loop flashes several times a second and makes the card's text
   impossible to select or click (worst on card-dense pages like
   /checkouts/new/). box-shadow gives the same lift with a fixed hit area. */
.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Table row hover for better readability */
.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

/* Badge styling improvements */
.badge {
    font-weight: 500;
}

/* Form control focus state */
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
}

/* Navbar brand styling */
.navbar-brand {
    font-weight: 600;
}

/* Footer link styling */
footer a {
    color: rgba(255, 255, 255, 0.7);
}

footer a:hover {
    color: white;
}

/* Loading indicator for AJAX */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Inbox notification pulse */
.inbox-pulse {
    animation: pulse-ring 1.5s ease-out infinite;
}

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.6); }
    70% { box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

/* =========================================================================
   Help Chat Widget
   ========================================================================= */

.help-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 1080;
    padding: 0;
    border: none;
}

.help-fab:hover {
    transform: scale(1.08);
}

.help-panel {
    position: fixed;
    bottom: 92px;
    right: 24px;
    width: 380px;
    height: 500px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.help-panel-header {
    background: #0d6efd;
    color: #fff;
    padding: 12px 16px;
    flex-shrink: 0;
}

.help-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.help-panel-footer {
    padding: 10px 12px;
    border-top: 1px solid #dee2e6;
    flex-shrink: 0;
}

.help-msg {
    max-width: 88%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.875rem;
    line-height: 1.45;
    word-wrap: break-word;
}

.help-msg ol, .help-msg ul {
    margin: 4px 0;
    padding-left: 20px;
}

.help-msg pre {
    background: #f1f3f5;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    overflow-x: auto;
    margin: 4px 0;
}

.help-msg code {
    font-size: 0.82rem;
}

.help-msg-user {
    align-self: flex-end;
    background: #0d6efd;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.help-msg-assistant {
    align-self: flex-start;
    background: #f1f3f5;
    color: #212529;
    border-bottom-left-radius: 4px;
}

/* Typing indicator */
.help-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
}

.help-typing .dot {
    width: 8px;
    height: 8px;
    background: #adb5bd;
    border-radius: 50%;
    animation: help-bounce 1.2s infinite;
}

.help-typing .dot:nth-child(2) { animation-delay: 0.2s; }
.help-typing .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes help-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

/* Mobile responsive */
@media (max-width: 480px) {
    .help-panel {
        width: calc(100vw - 24px);
        right: 12px;
        bottom: 84px;
        height: 60vh;
    }

    .help-fab {
        right: 16px;
        bottom: 16px;
    }
}

/* Print styles */
@media print {
    .navbar, footer, .btn, .help-fab, .help-panel {
        display: none !important;
    }

    .card {
        border: 1px solid #dee2e6 !important;
        box-shadow: none !important;
    }
}

/* General Ledger register (core/general_ledger.html). The table is laid out
   with fixed column widths so it never grows past its box however long a
   payee or memo is: text cells stay on one line and trail off, with the full
   text in the cell's title, so every row is the same height. Tabular figures
   keep the amount columns in line; the scroll box is what lets older rows load
   as the reader scrolls up, so the header sticks to it, not to the page. */
.ledger-scroll {
    max-height: calc(100vh - 21rem);
    min-height: 20rem;
    overflow-y: auto;
    overflow-x: hidden;
}
.ledger-table {
    table-layout: fixed;
    width: 100%;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}
.ledger-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bs-light);
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
    white-space: nowrap;
    overflow: hidden;
}
.ledger-table .col-toggle  { width: 1.75rem; }
.ledger-table .col-date    { width: 5.75rem; }
.ledger-table .col-type    { width: 6.5rem; }
.ledger-table .col-num     { width: 6rem; }
.ledger-table .col-name    { width: 15%; }
.ledger-table .col-split   { width: 12%; }
.ledger-table .col-tick    { width: 4rem; }
.ledger-table .col-amount  { width: 6.5rem; }
.ledger-table .col-balance { width: 7.5rem; }
.ledger-table .col-actions { width: 0.75rem; }
/* Stripes by transaction. Bootstrap's table-striped counts every <tr>, and a
   transaction's collapsed detail rows are <tr>s too, so the odd/even pattern
   landed on whichever rows happened to be odd — a whole stretch grey. Each
   transaction is its own <tbody>, and the stripe alternates by tbody. */
.ledger-table > tbody.ledger-txn:nth-of-type(even) > tr.ledger-row > td {
    --bs-table-bg-type: var(--bs-table-striped-bg);
}
.ledger-table > tbody {
    border-top: 0;
}
.ledger-table tr.ledger-row > td,
.ledger-table tr.ledger-balance-row > td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.ledger-table .ledger-amount {
    white-space: nowrap;
}
.ledger-table .ledger-toggle .bi {
    transition: transform 0.15s ease-in-out;
}
.ledger-table .ledger-toggle [aria-expanded="true"] .bi {
    transform: rotate(90deg);
}
.ledger-table tr.ledger-detail > td {
    --bs-table-bg-type: rgba(var(--bs-primary-rgb), 0.04);
    box-shadow: inset 3px 0 0 rgba(var(--bs-primary-rgb), 0.35);
}
.ledger-table .ledger-lines {
    table-layout: auto;
}
.ledger-table .ledger-lines td {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    font-size: 0.85rem;
}
.ledger-table .ledger-lines .ledger-line-account {
    width: 30%;
}
.ledger-table .ledger-sentinel td {
    background-color: transparent;
}
/* The Journal (core/journal_report.html) shares the register's table; an
   entry's first line carries its header fields and a total row closes it. */
.journal-table .col-account   { width: 16%; }
.journal-table .col-line-memo { width: 14%; }
.journal-table tr.journal-total > td {
    border-bottom: 2px solid var(--bs-border-color);
    padding-top: 0;
}
@media (max-width: 991.98px) {
    /* On a narrow screen let it scroll sideways rather than squeeze to nothing */
    .ledger-scroll { overflow-x: auto; }
    .ledger-table { min-width: 64rem; }
}