/* Global admin UI fixes — loaded on every Backpack page via config/backpack/ui.php `styles`. */

/* Dashboard KPI tiles: a long value (e.g. revenue "26875,50 грн") must not break mid-number in the
   narrow column. Smaller than the default .h2 with a tight line-height so the number fits on one
   line; `overflow-wrap: normal` keeps the digits together and wraps only at the space before the
   currency (e.g. "26875,50" / "грн") instead of splitting the number. */
.dash-tile-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: normal;
}

/* Sidebar menu group labels: long localized titles (e.g. "Керування замовленнями",
   "Керування користувачами") were clipped on a single line in the narrow vertical sidebar.
   Let the label wrap onto a second line instead of being cut off, and top-align the row so the
   icon, badge and chevron sit next to the first line rather than floating between the two lines.
   `!important` overrides the `white-space: nowrap` from the Tabler core bundle (CDN, not editable
   here); the other rules win on selector specificity alone. */
aside .navbar-nav .nav-item .nav-link {
    white-space: normal !important;
    align-items: flex-start;
}

aside .navbar-nav .nav-item .nav-link > span:not(.badge) {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Optically center the 16px icon on the 20px first line (align-items: flex-start would sit it
   slightly high otherwise). */
aside .navbar-nav .nav-item .nav-link > i.nav-icon {
    margin-top: 2px;
}

/* Dropdown chevron alignment. The Tabler `.nav-link.dropdown-toggle::after` inherits the nav-link's
   `align-items: flex-start`, so the ~14px chevron sits ~3px above the first text line — and on a
   two-line item ("Керування замовленнями") it floats above the count badge it sits next to. Nudge it
   down onto the first line, the same optical-centering trick the icon uses: (20px line − 14px
   chevron) / 2 ≈ 3px. NOT `align-self: center`, which would drop it to the middle of the whole
   (56px) two-line block, below the icon and badge. */
aside .navbar-nav .nav-item.dropdown > .nav-link.dropdown-toggle::after {
    margin-top: 3px;
}

/* Space the count badge off the dropdown chevron — they touched otherwise. */
aside .navbar-nav .nav-item.dropdown .nav-link span.badge {
    margin-right: 8px;
}

/* Single-item (non-dropdown) count badge, e.g. "Звернення". The Tabler core bundle positions a
   nav-link badge as `position: absolute; top/right: 6px` with a translateY, which parks it in the
   top-right corner (meant for topbar icon badges). Put it back in the flex flow, push it to the right
   edge, and centre it vertically on the row. */
aside .navbar-nav .nav-item:not(.dropdown) .nav-link span.badge {
    position: static;
    transform: none;
    top: auto;
    right: auto;
    margin-left: auto;
    align-self: center;
    margin-right: 8px;
}

/* Noty toast overflowed the right edge on narrow screens; keep it inside the viewport. */
@media (max-width: 575.98px) {
    .noty_layout {
        max-width: 100% !important;
        width: auto !important;
        left: 8px !important;
        right: 8px !important;
    }

    .noty_layout .noty_bar,
    .noty_layout .noty_body {
        max-width: 100% !important;
        word-break: break-word;
    }
}

/* Softer look: the Tabler inputs ship with square (0 radius) corners, which read as harsh. Round the
   form controls, buttons and cards across the whole admin for a gentler, more consistent feel. */
.form-control,
textarea.form-control,
select.form-control,
.input-group-text,
.btn,
.card,
.well {
    border-radius: 5px !important;
}

/* select2 boxes need a higher-specificity rule: the theme forces square corners with
   `span.select2-selection.select2-selection--single { border-radius:0 !important }` (and an even more
   specific `[data-bs-theme="dark"] …` in dark mode), so match it with a stronger selector. */
.select2.select2-container--bootstrap span.select2-selection.select2-selection--single,
.select2.select2-container--bootstrap span.select2-selection.select2-selection--multiple {
    border-radius: 5px !important;
}

/* Keep an input group (prefix + field, e.g. "грн" + price) visually joined. */
.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group > *:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Order "Товари замовлення" (and "Платежі") tables on the order Show page carry many columns
   (товар, фасовка, помел, price, qty, discount type/size, discounted price, total, action). With the
   theme's 12px cell padding the 11-column table is ~90px wider than its card, so `.table-responsive`
   pushed the last column — the "Редагувати" action button — into a horizontal scroll where it was
   clipped at the card edge. Tighten the horizontal cell padding on these order widgets only; the
   full table then fits on standard admin widths and the action button is fully visible. */
.order-show-widget table.card-table > :not(caption) > * > * {
    padding-left: 6px;
    padding-right: 6px;
}

/* Switch (toggle) field alignment. The switch view adds a label-height top spacer so that when a
   toggle shares a form row with normal label-on-top fields, it drops onto the inputs' line instead of
   floating up at the labels' line. A full-width switch (col-*-12) has no row neighbour, so that spacer
   would just leave a lone gap above the toggle — collapse it there. Switches in a shared row
   (col-md-6 / col-md-4, e.g. Статус next to a select) keep the spacer and stay input-aligned. */
.form-group[class*="col-"][class*="-12"] > label[aria-hidden="true"] {
    display: none !important; /* beat the spacer's own `d-block` utility (display:block !important) */
}

/* Admin footer credits. The agency mark is the one thing down there that should read as a brand:
   the wordmark (inline SVG, see inc/brand_radevs.blade.php) inherits the footer's text colour but
   sits at full body contrast against the muted credit line around it, and picks up the RaDevs green
   on hover. `.9em` lines the wordmark's cap height up with the text it sits next to. */
/* The footer's own divider, drawn here rather than with Bootstrap's `border-top` utility: that
   utility paints `--tblr-border-color` with `!important`, and in the dark theme that variable is a
   near-black blue at 14% alpha which vanishes against the background. */
.app-footer {
    border-top: 1px solid rgba(0, 0, 0, .1);
}

[data-bs-theme="dark"] .app-footer {
    border-top-color: rgba(255, 255, 255, .08);
}

.app-footer .footer-credit-brand {
    color: var(--tblr-body-color);
    text-decoration: none;
    transition: color .15s ease-in-out;
}

.app-footer .footer-credit-brand:hover,
.app-footer .footer-credit-brand:focus {
    color: #71f049; /* the green of the RaDevs mark */
}

.app-footer .footer-credit-mark {
    height: .9em;
    width: auto;
    vertical-align: -.06em;
}