/*
 * Admin UI
 * ----------------------------------------------------------------------------
 * Admin screens render inside structure/layouts/shop.blade.php -- the storefront
 * layout -- so they inherit the storefront's marketing styling. The worst of it
 * is buttons: rhino-premium-theme.css turns every .btn-primary into the hero CTA
 * (uppercase, 1rem, 0.875rem/2rem padding, 50px radius, orange glow), which on an
 * admin page produced 52px-tall action buttons wider than the heading beside them.
 *
 * Everything here re-establishes plain Bootstrap 5 inside .admin-ui so an admin
 * tool looks like an admin tool. It started life as an inline <style> partial
 * used by the five RMA views only (resources/views/admin/rma/partials/
 * admin-ui-css.blade.php); .rma-admin is kept as an alias so that markup keeps
 * working, and so the two never drift apart again.
 *
 * Everything is scoped. Loading this file on a storefront page is a no-op.
 *
 * THE SCALE -- two sizes, deliberately:
 *   .btn          page-level actions          ~34px
 *   .btn.btn-sm   table row / inline actions  ~30px
 * btn-lg, btn-xl, btn-xs, btn-3d and btn-modern are all folded into those two,
 * so legacy markup does not have to be rewritten before it stops shouting.
 */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.admin-ui .btn,
.rma-admin .btn {
    font-family: inherit;
    font-weight: 400;
    font-size: 0.9375rem;
    text-transform: none;
    letter-spacing: normal;
    padding: 0.5rem 0.875rem;
    border-radius: var(--bs-border-radius, 0.375rem);
    box-shadow: none;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* The storefront lifts and glows buttons on hover. Admin tables are dense; a
   row of actions that jumps on hover reads as broken rather than responsive. */
.admin-ui .btn:hover,
.admin-ui .btn:focus,
.admin-ui .btn:active,
.rma-admin .btn:hover,
.rma-admin .btn:focus,
.rma-admin .btn:active {
    transform: none;
    box-shadow: none;
}

.admin-ui .btn-sm,
.rma-admin .btn-sm {
    font-size: 0.8125rem;
    padding: 0.375rem 0.625rem;
    min-height: 34px;
}

/* Legacy sizes folded into the scale rather than chased through 50 templates.
   btn-xl came from the Porto theme (0.8rem/2rem); btn-lg and btn-xs are
   Bootstrap's. Inside admin they are all just "a button". */
.admin-ui .btn-lg,
.admin-ui .btn-xl,
.rma-admin .btn-lg,
.rma-admin .btn-xl {
    font-size: 1rem;
    padding: 0.625rem 1.125rem;
}

.admin-ui .btn-xs,
.rma-admin .btn-xs {
    font-size: 0.8125rem;
    padding: 0.375rem 0.625rem;
}

/* btn-3d adds a 3px bottom border and btn-modern a pill radius -- both Porto
   leftovers that make an admin toolbar look like three different toolbars. */
.admin-ui .btn-3d,
.admin-ui .btn-modern,
.rma-admin .btn-3d,
.rma-admin .btn-modern {
    border-bottom-width: 1px;
    border-radius: var(--bs-border-radius, 0.375rem);
}

/* Keep the brand orange for primary actions, just without the hero treatment */
.admin-ui .btn-primary,
.rma-admin .btn-primary {
    background-color: var(--rhino-primary-orange, #c7782b);
    border: 1px solid var(--rhino-primary-orange, #c7782b);
}

.admin-ui .btn-primary:hover,
.admin-ui .btn-primary:focus,
.rma-admin .btn-primary:hover,
.rma-admin .btn-primary:focus {
    background-color: var(--rhino-primary-orange-hover, #b06a24);
    border-color: var(--rhino-primary-orange-hover, #b06a24);
}

/* Restore Bootstrap's grouped-button radii, which the .btn reset above flattens */
.admin-ui .btn-group > .btn:not(:first-child),
.rma-admin .btn-group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.admin-ui .btn-group > .btn:not(:last-child),
.rma-admin .btn-group > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* A toolbar of actions beside a heading. Wraps instead of overflowing on narrow
   screens, and keeps its buttons off the heading's baseline. */
.admin-ui .admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   Forms and cards
   -------------------------------------------------------------------------- */
.admin-ui .form-label,
.rma-admin .form-label {
    font-weight: 500;
    margin-bottom: 0.35rem;
}

.admin-ui .card,
.rma-admin .card {
    border-radius: var(--bs-border-radius, 0.375rem);
}

@media (max-width: 768px) {
    .admin-ui .btn,
    .rma-admin .btn {
        min-height: 44px; /* touch target */
    }

    .admin-ui .form-control,
    .admin-ui .form-select,
    .rma-admin .form-control,
    .rma-admin .form-select {
        font-size: 16px; /* stops iOS from zooming on focus */
    }
}