/* ============================================================================
   standard.css
   ----------------------------------------------------------------------------
   Standard, global stylesheet for TRANSACTION pages (voucher/day-book style
   listing screens), the same role masters-forms.css plays for master pages.

   Source of truth: extracted verbatim from Daybook.razor + its
   FiltersActionPanel.razor filter/action drawer (the reference build for
   this pattern). Any new transaction page should reuse these classes
   instead of re-declaring its own copies.

   Load this file globally (next to masters-forms.css) so every transaction
   page — Daybook, OrderGrid, ChallanEntry, etc. — gets this look for free:

       <link rel="stylesheet" href="css/standard.css" />

   Classes are still "db-" prefixed (legacy Daybook origin) but are no
   longer Daybook-specific — treat "db-" here the same way "mu-" is treated
   in masters-forms.css: a shared, page-agnostic prefix.
   ============================================================================ */


/* ============================================================
   1. PAGE SHELL, TAB BAR, SUMMARY VIEW, GRID/TABLE, PAGINATION
      (was: Daybook.razor's 2nd <style> block)
   ============================================================ */

.db-wrap {
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f3f3f4;
}

.db-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    padding: 12px 16px 8px;
}

.db-tabbar {
    display: flex;
    gap: 4px;
    background: #fff;
    border-bottom: 1px solid #e7eaec;
    padding: 8px 16px 6px;
    flex-shrink: 0;
}

.db-tab {
    background: #fff;
    color: #555;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    padding: 5px 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: all .12s;
}

    .db-tab:hover {
        background: #f5f5f5;
    }

    .db-tab.active {
        background: #1ab394;
        color: #fff;
        border-color: #1ab394;
    }

.db-summary-tabbar {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.db-summary-tabs-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.db-summary-tab {
    background: #fff;
    color: #555;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    padding: 5px 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: all .12s;
}

    .db-summary-tab:hover {
        background: #f5f5f5;
    }

    .db-summary-tab.active {
        background: #1ab394;
        color: #fff;
        border-color: #1ab394;
    }

.db-tab-short {
    display: none;
}

@media (max-width: 767px) {
    .db-summary-tabbar {
        gap: 6px;
    }

    .db-summary-tabs-group {
        row-gap: 5px;
        gap: 4px;
    }

    .db-summary-tab {
        padding: 4px 7px;
        font-size: 10.5px;
    }

    .db-tab-full {
        display: none;
    }

    .db-tab-short {
        display: inline;
    }

    .db-value-toggle {
        padding: 2px;
        flex-shrink: 0;
    }

    .db-value-btn {
        padding: 4px 7px;
        font-size: 10px;
        gap: 2px;
    }

        .db-value-btn i {
            font-size: 9px;
        }
}

@media (max-width: 420px) {
    .db-summary-tab {
        padding: 4px 6px;
        font-size: 10px;
    }

    .db-value-label {
        display: none;
    }

    .db-value-btn {
        padding: 5px 8px;
    }

        .db-value-btn i {
            font-size: 10.5px;
        }
}

.db-value-toggle {
    position: relative;
    display: flex;
    flex-shrink: 0;
    background: #eef1f5;
    border: 1px solid #dde3ec;
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.db-value-slider {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    background: linear-gradient(135deg, #1ab394, #16a085);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(22, 160, 133, .35);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
    z-index: 0;
}

.db-value-toggle[data-active="value"] .db-value-slider {
    transform: translateX(100%);
}

.db-value-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 0;
    background: transparent;
    border: none;
    color: #64748b;
    padding: 6px 16px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .2px;
    border-radius: 999px;
    transition: color .18s;
    white-space: nowrap;
}

    .db-value-btn i {
        font-size: 11px;
        opacity: .85;
    }

    .db-value-btn:hover:not(.active) {
        color: #334155;
    }

    .db-value-btn.active {
        color: #fff;
    }

.db-grid-area {
    border: 1px solid #eee;
}

.db-content .mu-table-wrap {
    height: auto;
    flex: 1;
    min-height: 0;
}

.db-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .db-table th {
        text-align: left;
        padding: 8px 10px;
        border-bottom: 1px solid #ddd;
        position: sticky;
        top: 0;
        z-index: 3;
    }

    .db-table td {
        padding: 6px 10px;
        border-bottom: 1px solid #f2f2f2;
    }

        .db-table th.right, .db-table td.right {
            text-align: right;
        }

    .db-table th.db-sort {
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
    }

    .db-table th.chk, .db-table td.chk {
        width: 28px;
        text-align: center;
    }

    .db-table tfoot td {
        position: sticky;
        bottom: 0;
        z-index: 3;
        background: #e8e8e8;
    }

.db-total-row td {
    border-top: 2px solid #d0d0d0;
}

.db-pagination {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 10px 4px;
}

.db-page-btn {
    background: #fff;
    border: 1px solid #ddd;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 13px;
    border-radius: 3px;
}

    .db-page-btn.active {
        background: #16a085;
        color: #fff;
        border-color: #16a085;
    }

    .db-page-btn:disabled {
        opacity: .4;
        cursor: default;
    }

.db-loading {
    padding: 40px;
    text-align: center;
    color: #888;
}

.db-row-even {
    background: #ffffff;
}

.db-row-odd {
    background: #f5fafa;
}

.db-table tbody tr:hover {
    background: #e8f5f0;
}

.db-wa-icon {
    color: #25d366;
    font-size: 15px;
    margin-right: 4px;
    vertical-align: middle;
    cursor: pointer;
}

.bspl-footer-count {
    font-size: 12px;
    color: #666;
    margin-left: 4px;
}

.bspl-footer .db-pagination {
    padding: 0;
    gap: 4px;
}

.bspl-footer .db-page-btn {
    padding: 3px 8px;
    font-size: 12px;
}

/* ============================================================
   2. REPORT FLYOUT ("Print Report" menu)
      (was: Daybook.razor's 1st <style> block)
   ============================================================ */

.db-report-row {
    padding: 8px 14px;
    cursor: pointer;
    color: #1a2537;
}

    .db-report-row:hover {
        background: #eef4fb;
    }

.db-report-flyout-list {
    scrollbar-width: thin;
    scrollbar-color: #1ab99a transparent;
}

    .db-report-flyout-list::-webkit-scrollbar {
        width: 8px;
    }

    .db-report-flyout-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .db-report-flyout-list::-webkit-scrollbar-thumb {
        background: #1ab99a;
        border-radius: 999px;
    }

        .db-report-flyout-list::-webkit-scrollbar-thumb:hover {
            background: #159e83;
        }

/* ============================================================
   3. FILTERS / ACTION DRAWER (FiltersActionPanel.razor)
      - tab switcher, VType grid, action-item list, section bars,
        expandable subpanels, clear-date icon button, group-search
        button row, and the "set default invoice format" modal
      (was: FiltersActionPanel.razor's <style> block)
   ============================================================ */

.mu-fld-locked {
    pointer-events: none;
    opacity: .5;
}

/* Overlay, panel/drawer, header, body scroll, footer, form fields, and
                                           checkboxes now come from the shared masters-forms.css classes
                                           (.mu-drawer-overlay, .mu-drawer, .mu-drawer-hdr, .mu-drawer-body,
                                           .mu-fld, .le-chk, .mu-drawer-foot, .mu-btn) — same as MLedger.
                                           Only the Filters/Action tab switcher, the voucher-type grid, and the
                                           Action-tab item list remain page-specific below. */

/* masters-forms.css's .mu-drawer already provides position:fixed;
                                           top:0; right:0; height:100vh; display:flex; flex-direction:column
                                           with no overflow:hidden and nothing else fighting it - confirmed
                                           once the actual file was available. The real blockers were
                                           .db-action-body's own bad max-height calc and a stray inline
                                           height:600px on the first group (both already removed above);
                                           no override needed here after all. */

/* ── Filters / Action tab switcher ── */
.db-drawer-tabbar {
    display: flex;
    gap: 8px;
    padding: 10px 18px;
    border-bottom: 1px solid #eef2f7;
    flex-shrink: 0;
}

.db-drawer-tab {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid #dde3ed;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .db-drawer-tab:hover {
        background: #f8fafc;
        border-color: #c3ccdb;
        color: #334155;
    }

    .db-drawer-tab.active {
        background: #fff;
        color: #14b8a6;
        border: 1.5px solid #14b8a6;
    }

/* ── VType grid ── */
.db-vtype-toolbar {
    display: flex;
    margin-bottom: 8px;
}

.db-vtype-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    row-gap: 8px;
    column-gap: 2px;
}

.db-vtype-item {
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ── Action tab ── */
/* mu-drawer-body is a flex child of .mu-drawer (flex column) — flex
                                           children default to min-height:auto, which silently blocks
                                           overflow/scrolling even when content is taller than the drawer.
                                           Same gotcha as elsewhere in this app (modal body clipping) —
                                           min-height:0 + explicit overflow-y is what actually lets this
                                           scroll instead of just getting cut off at the drawer's bottom. */
.mu-drawer-body {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #1ab99a transparent;
}

    .mu-drawer-body::-webkit-scrollbar {
        width: 8px;
    }

    .mu-drawer-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .mu-drawer-body::-webkit-scrollbar-thumb {
        background: #1ab99a;
        border-radius: 999px;
    }

        .mu-drawer-body::-webkit-scrollbar-thumb:hover {
            background: #159e83;
        }

.db-action-body {
    /* Was: max-height: calc(100vh - 100px) - a guessed magic number that
                                               overshot the real flex-allocated space, so this box grew past
                                               its flex slot and got clipped by .mu-drawer's overflow:hidden
                                               before its OWN content ever exceeded ITS OWN box - so its
                                               overflow-y never triggered. .mu-drawer-body's flex:1/min-height:0
                                               (already proven working - it's what makes Filters scroll on the
                                               exact same parent) sizes this instead; no separate max-height
                                               needed once the box isn't fighting its flex parent for space. */
    overflow-y: auto !important;
    padding: 8px 10px 20px;
}

/* Groups of items get a card with soft border/shadow, replacing the old
                                           flat full-bleed list — this is what actually removes the "too much
                                           empty space" look, since each group now reads as one compact block
                                           instead of a long uninterrupted column. */
.db-action-group {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    flex-shrink: 0;
}

    /* GreenCalendarPicker's own popup (.gcp-panel) is position:absolute
                               relative to something inside this card - the overflow:hidden above
                               (needed for the card's rounded corners) was clipping that popup
                               wherever it extended past the card's own edge, which is what
                               looked like it was rendering "behind"/cut-off. Open the clip up
                               only while a popup is actually present, closed the rest of the
                               time so rounded corners stay intact normally. */
    .db-action-group:has(.gcp-panel) {
        overflow: visible;
    }

.db-action-item {
    padding: 9px 12px;
    border-bottom: 1px solid #f2f4f7;
    font-size: 12.5px;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1.3;
    transition: background .12s;
}

    .db-action-item span:first-of-type {
        flex: 1;
        min-width: 0;
    }

    .db-action-item:last-child {
        border-bottom: none;
    }

    .db-action-item:hover {
        background: #f8fafc;
    }

.db-action-icon {
    flex: 0 0 15px;
    font-size: 14px;
    color: #9ca3af;
}

.db-gear-sm {
    color: #c7ccd4;
    font-size: 12px;
    flex: 0 0 auto;
}

/* ── Section bars inside Action tab — solid pill bar, same visual
                                           weight as the original design (not just thin caption text),
                                           but rounded/inset to match the new card-grouped layout. ── */
.db-action-section-bar {
    background: #16a085;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 6px;
    margin: 4px 0 6px;
    flex-shrink: 0;
}

/* ── Expandable action row (Recently Updated / Show Deleted) ── */
.db-action-expand {
    position: relative;
}

    .db-action-expand.open {
        background: #f0fdf9;
    }

.db-action-chev {
    font-size: 10px;
    color: #aaa;
    flex: 0 0 auto;
    transition: transform .15s;
}

    .db-action-chev.open {
        transform: rotate(180deg);
    }

.db-action-subpanel {
    background: #fafbfc;
    border-top: 1px solid #eef1f5;
    padding: 10px 12px;
    position: relative;
}

    /* Safety net once the clip above stops cutting the popup off - make
                               sure it actually paints on top of the groups/rows below it (higher
                               than GreenCalendarPicker's own default z-index:41, which is only
                               high enough to beat its own immediate siblings, not everything
                               further down this drawer). */
    .db-action-subpanel .gcp-panel {
        z-index: 2000;
    }

.db-action-radio-row {
    display: flex;
    gap: 8px;
    margin-bottom: 9px;
}

.db-action-radio {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #4b5563;
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #fff;
    transition: all .12s;
}

    .db-action-radio input {
        accent-color: #16a085;
        margin: 0;
    }

    .db-action-radio.active {
        border-color: #16a085;
        background: #f0fdf9;
        color: #0d7a63;
        font-weight: 600;
    }

.db-action-date-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

    .db-action-date-row:last-child {
        margin-bottom: 0;
    }

.db-action-date-input {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    font-size: 12.5px;
    background: #fff;
}

.db-action-dp-wrap {
    flex: 1;
    min-width: 0;
}

.db-action-cal-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    color: #666;
    font-size: 13px;
}

.db-action-go-btn {
    width: 34px;
    height: 30px;
    flex: 0 0 34px;
    border: none;
    border-radius: 4px;
    background: #27ae60;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
}

    .db-action-go-btn:hover {
        background: #219150;
    }

.db-action-cf-btn {
    flex: 0 0 44px;
    height: 30px;
    border: none;
    border-radius: 4px;
    background: #8e6fce;
    color: #fff;
    font-weight: 700;
    font-size: 11.5px;
    cursor: pointer;
}

    .db-action-cf-btn:hover {
        background: #7a5cb8;
    }

/* ── Clear-date icon button (To Date row) — plain <img> reusing the
                                           GreenCalendarPicker's class names, but that component's own scoped
                                           CSS doesn't apply here, so it needs its own sizing to match the
                                           calendar trigger button next to it in the From Date row. Same block
                                           as DocumentGrid.razor.css / BSPL.razor.css. ── */
.gcp-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .gcp-trigger:hover {
        background: #f5f5f5;
        border-color: #bbb;
    }

.gcp-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

/* ── Row for a select/input paired with a small square button beside
                                           it (currently just Group's "G" advanced-search button). ── */
.db-led-row {
    display: flex;
    gap: 6px;
}

    .db-led-row input,
    .db-led-row select {
        flex: 1;
        min-width: 0;
    }

.db-led-btn {
    flex: 0 0 36px;
    border-radius: 8px;
    border: 1px solid #1a56a7;
    background: #1a56a7;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .db-led-btn:hover {
        background: #0f3d82;
    }

/* ── Set default invoice printing format modal ── */
.db-fmt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 100000;
}

.db-fmt-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, 92vw);
    height: min(640px, 88vh);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    z-index: 100001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.db-fmt-hdr {
    flex: 0 0 auto;
    background: #2f5a8a;
    color: #fff;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 14px;
}

    .db-fmt-hdr .db-fmt-period {
        margin-left: auto;
        font-weight: 500;
        font-size: 12.5px;
        opacity: .9;
    }

.db-fmt-x {
    background: #e5484d;
    color: #fff;
    border: none;
    border-radius: 4px;
    width: 26px;
    height: 26px;
    line-height: 1;
    font-size: 16px;
    cursor: pointer;
}

.db-fmt-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
}

.db-fmt-select {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    min-width: 120px;
}

.db-fmt-set-btn {
    background: #1a56a7;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

    .db-fmt-set-btn:disabled {
        background: #94a3b8;
        cursor: not-allowed;
    }

.db-fmt-saved {
    color: #16a34a;
    font-size: 12.5px;
    font-weight: 600;
}

.db-fmt-preview {
    flex: 1;
    min-height: 0;
    background: #525659;
}

.db-fmt-frame {
    width: 100%;
    height: 100%;
    border: none;
}

.db-fmt-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #cbd5e1;
    font-size: 13px;
}