/**
 * Perfex CRM — local UI overrides.
 *
 * Loaded automatically by Perfex when this file exists (see
 * application/helpers/assets_helper.php), after app-css. Keeping local fixes
 * here instead of editing core views/stylesheets means a Perfex upgrade does
 * not overwrite them.
 */

/* ---------------------------------------------------------------------------
 * Dashboard "Payment records" widget — header overflowed on narrow screens.
 *
 * The widget header is a non-wrapping flex row: title on the left, and on the
 * right a currency <select>, the "Full report" link and the weekly/monthly
 * dropdown. The currency control is a bootstrap-select, which sizes its button
 * to the widest option *including* each option's data-subtext (the currency
 * name) — so it rendered ~200px wide just to display a single symbol like "$".
 *
 * On a 375px viewport that made the header need 436px against 323px available:
 * 113px of overflow, which pushed the whole document to 462px and gave the
 * dashboard a horizontal scrollbar. Only installs using multiple currencies hit
 * this, since the select is rendered by is_using_multiple_currencies().
 *
 * Fix: cap the *button* (not the .bootstrap-select container — that would
 * squeeze the option menu too) and let the header wrap when it must.
 * ------------------------------------------------------------------------- */

#payments .panel-body > .tw-flex {
    flex-wrap: wrap;
}

#payments .panel-body > .tw-flex > div {
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

#payments .bootstrap-select {
    width: auto !important;
}

/* Cap the button so it cannot blow the header out again. The widest label
 * ("CA$ CAD") comes to 111px, so 120px leaves headroom for a longer currency
 * name or translation without ever pinning; measured at 375px the header
 * still fits with no overflow. 96px was too tight once the view started
 * showing each option's subtext — five of nine currencies sat exactly on the
 * cap.
 *
 * The caret must be repositioned along with the cap. The theme parks it at
 * right:18px, which was clear of the text while the button was ~197px wide;
 * once capped, the button shrinks to its label and the caret lands on top of
 * it (the "$" glyph and the arrow rendered in exactly the same 10px). So pull
 * the caret in and reserve room for it in the button's padding.
 *
 * No button chrome either — it reads better as a plain label plus caret in a
 * header row that is otherwise text and links. The caret still signals the
 * control, and the focus ring below keeps it keyboard-visible without the box.
 */
#payments .bootstrap-select > .dropdown-toggle {
    max-width: 120px;
    padding-right: 26px;
    padding-left: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#payments .bootstrap-select > .dropdown-toggle .caret {
    right: 8px;
}

#payments .bootstrap-select > .dropdown-toggle:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

/* The menu is a child of the (now narrow) container, so give it its own width
   or the "$ USD" / "PKR PKR" option labels get clipped. */
#payments .bootstrap-select .dropdown-menu {
    min-width: 180px;
}

/* Same problem in the totals pickers (invoices / estimates / expenses summary
   bars): the menu inherited the 79px button width, so any option whose symbol
   is more than a character or two - "PKR PKR", "AED AED", "CA$ CAD" - wrapped
   its currency code onto a second line. Items came out 32px or 52px tall at
   random, which is what made the open list look broken. */
.simple-bootstrap-select .bootstrap-select .dropdown-menu {
    min-width: 180px;
}

.simple-bootstrap-select .bootstrap-select .dropdown-menu li a {
    white-space: nowrap;
}

/* A floated child inside a flex row does nothing except add a stray 10px. */
#payments .dropdown.pull-right.mright10 {
    float: none;
    margin-right: 0;
}

/* ---------------------------------------------------------------------------
 * Dashboard "Finance overview" widget.
 * ------------------------------------------------------------------------- */

/* The divider is meant to be full-bleed, but -tw-mx-8 (32px) overshoots the
   panel's 24px padding, so it stuck out 8px past the card on each side - which
   was also the widget's entire horizontal overflow. Match the padding exactly. */
#widget-finance_overview .panel-body > hr {
    margin-left: -24px;
    margin-right: -24px;
}

/* Invoice / Estimate / Proposal groups sat flush against each other: 0px
   between them, so a heading butted straight onto the previous group's last
   progress bar. Give them real separation - space plus a hairline, following
   whichever way the Bootstrap grid has wrapped them at each breakpoint. */
#widget-finance_overview .home-summary > div {
    margin-bottom: 24px;
}

#widget-finance_overview .home-summary > div:last-child {
    margin-bottom: 0;
}

/* < 768px: all three stack. */
@media (max-width: 767px) {
    #widget-finance_overview .home-summary > div + div {
        border-top: 1px solid rgba(0, 0, 0, .09);
        padding-top: 24px;
    }
}

/* 768-1199px: invoices|estimates share a row, proposals wraps below it. */
@media (min-width: 768px) and (max-width: 1199px) {
    #widget-finance_overview .home-summary > div:nth-child(3) {
        border-top: 1px solid rgba(0, 0, 0, .09);
        padding-top: 24px;
    }
}

/* Vertical rule between groups that are genuinely side by side. It lands in
   the middle of the grid gutter, and Bootstrap's border-box sizing keeps the
   1px inside the column, so no wrapping is triggered. */
@media (min-width: 768px) {
    #widget-finance_overview .home-summary > div:nth-child(2) {
        border-left: 1px solid rgba(0, 0, 0, .09);
    }
}

@media (min-width: 1200px) {
    #widget-finance_overview .home-summary > div:nth-child(3) {
        border-left: 1px solid rgba(0, 0, 0, .09);
    }
}

/* ---------------------------------------------------------------------------
 * Shared "totals" selectpicker (invoices / estimates / expenses summary bars,
 * via the *_total_template views).
 *
 * tailwind.css parks the caret at right:-6px, i.e. *outside* the button, while
 * .filter-option carries no right padding and text-overflow:clip. So the arrow
 * hung off the control's edge and the label ran straight underneath it, hard-
 * cut mid-glyph, as soon as it grew (a wider currency label, a longer
 * translation, a different font).
 *
 * Scoped to .fit-width - the class bootstrap-select adds for data-width="fit"
 * - so this only reaches these narrow pickers. The same wrapper is used for
 * full-width selects in the task view, which must stay untouched.
 * ------------------------------------------------------------------------- */

/* Do NOT set a min-width here. data-width="fit" sizes the button to its own
   content, so reserving the padding below is enough - it grows to ~72px and
   still sits inside the markup's existing 79px floor. Widening it to 104px
   made the two controls overflow their fixed-width flex bar by 8px instead. */
.simple-bootstrap-select .bootstrap-select.fit-width .dropdown-toggle .caret {
    right: 8px;
}

.simple-bootstrap-select .bootstrap-select.fit-width .dropdown-toggle .filter-option {
    padding-right: 20px;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
 * Dashboard DataTables search boxes on narrow screens — Staff tickets report
 * and the My tasks / My Projects / My Reminders tabs.
 *
 * DataTables renders the filter as label > .input-group > [icon] + input.
 * Two separate things left the search box short of the table beneath it:
 * .input-group is display:table with an auto width so it shrank to its own
 * content (198px inside a 307px card), and the input itself does not fill the
 * group. Stretch both so the search outline lines up with the table.
 *
 * The selector has to outrank vendor-admin.css's
 *   div.dataTables_wrapper div.dataTables_filter input { width: auto }
 * which scores (0,2,3). A plain `.widget .dataTables_filter input` is (0,2,1)
 * and silently loses — it appeared to work on the tickets card only because
 * that rule had been written with an #id. Repeating the vendor's own
 * div-qualified path plus .widget gives (0,3,3) and covers every dashboard
 * card without depending on generated widget ids.
 *
 * Mobile only - on desktop a search box spanning the full card width would
 * look stretched, and it already sits comfortably beside the table controls.
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .widget div.dataTables_wrapper div.dataTables_filter label {
        display: block;
        width: 100%;
    }

    .widget div.dataTables_wrapper div.dataTables_filter .input-group {
        width: 100%;
    }

    .widget div.dataTables_wrapper div.dataTables_filter input {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
 * Dashboard "My tasks / My Projects / My Reminders" widget — content sat
 * further from the right edge than the left.
 *
 * style.css gives .home-activity .tab-content a fixed height with
 * overflow-y:auto and a bare `padding-right: 15px`, with no matching
 * padding-left — an old way of keeping content clear of the scrollbar. It is
 * the only asymmetric card on the dashboard: measured at 375px, every control
 * inside (search box, buttons, DataTables wrapper) sat at 25px left / 40px
 * right, while every other card measured 0px asymmetry.
 *
 * Worse, where scrollbars consume layout width the padding is counted *on top
 * of* the scrollbar: 25px left / 55px right, a 30px difference.
 *
 * scrollbar-gutter does the same job properly — the browser reserves gutter
 * space only if its scrollbars actually take width, so overlay scrollbars get
 * none. Dropping the padding alone would also work; the gutter additionally
 * stops the layout shifting as content grows past the fixed height.
 *
 * `both-edges` rather than plain `stable`: where scrollbars are overlay (most
 * phones) the gutter is zero either way and content sits symmetrically. Where
 * they consume layout width, plain `stable` reserves on the end edge only and
 * the old 15px asymmetry returns — measured identical to the original core
 * styling at 1280px. Reserving on both edges keeps the card symmetric at every
 * size, at the cost of matching that gutter on the leading edge.
 * ------------------------------------------------------------------------- */

.home-activity .tab-content {
    padding-right: 0;
    scrollbar-gutter: stable both-edges;
}

/* style.css mirrors the padding onto the left for RTL — clear that too. */
[dir="rtl"] .home-activity .tab-content {
    padding-left: 0;
}