/* ==========================================================================
   Rage — Admin Login
   home.css is loaded by the view after this file; reuses its colour tokens, logo,
   eyebrow and buttons (rules on .rg-logo / .rg-btn are doubled up to win over it).
   Phones and tablets get a centred card; desktop adds a dark brand panel.
   ========================================================================== */

.rg-auth {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 100% 0, var(--rg-copper-soft), transparent 45%),
        var(--rg-cotton);
}

/* Brand panel ------------------------------------------------------------ */

.rg-auth__brand { display: none; }

@media (min-width: 1024px) {
    .rg-auth { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }

    .rg-auth__brand {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 56px;
        overflow: hidden;
        background:
            radial-gradient(circle at 0 100%, rgba(151, 117, 79, .32), transparent 55%),
            linear-gradient(160deg, var(--rg-indigo), var(--rg-raw) 70%);
        color: var(--rg-cotton);
    }

    /* Faint bronze rings echo the round bull mark */
    .rg-auth__brand::after {
        content: "";
        position: absolute;
        top: -140px;
        right: -140px;
        width: 420px;
        height: 420px;
        border: 1px solid rgba(205, 174, 134, .18);
        border-radius: 50%;
        box-shadow: 0 0 0 60px rgba(205, 174, 134, .04), 0 0 0 120px rgba(205, 174, 134, .03);
    }

    .rg-auth__brand-inner { position: relative; margin-block: auto; max-width: 420px; }
    .rg-auth__brand .rg-eyebrow { color: var(--rg-copper-light); }

    .rg-auth__brand-title {
        margin-top: 16px;
        font: 700 clamp(2rem, 1.2rem + 1.6vw, 2.6rem)/1.15 var(--rg-sans);
        letter-spacing: -.02em;
        text-wrap: balance;
    }

    .rg-auth__brand-text {
        margin-top: 16px;
        color: rgba(245, 245, 243, .72);
        font-size: 16px;
    }

    .rg-auth__brand-foot {
        position: relative;
        color: rgba(245, 245, 243, .5);
        font-size: 13px;
    }
}

/* Form side -------------------------------------------------------------- */

.rg-auth__main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px 16px 40px;
}

.rg-auth__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    color: var(--rg-muted);
    font-size: 14px;
    font-weight: 500;
    transition: color .2s;
}

.rg-auth__back svg { width: 18px; height: 18px; }
.rg-auth__back:hover { color: var(--rg-indigo); }

.rg-auth__card {
    width: 100%;
    max-width: 440px;
    padding: 28px 20px;
    border: 1px solid var(--rg-line);
    border-radius: 20px;
    background: var(--rg-paper);
    box-shadow: 0 24px 48px -28px rgba(23, 32, 43, .28);
}

@media (min-width: 640px) {
    .rg-auth__main { padding: 32px var(--rg-pad) 56px; }
    .rg-auth__back { position: absolute; top: 28px; left: var(--rg-pad); }
    .rg-auth__card { padding: 40px; }
}

@media (min-width: 1024px) {
    .rg-auth__back { top: 32px; left: 40px; }

    /* Plain panel beside the brand side instead of a floating card */
    .rg-auth__card { border: 0; background: none; box-shadow: none; }
}

.rg-logo.rg-auth__logo { display: flex; justify-content: center; }
.rg-auth__logo .rg-logo__img { height: 72px; }

.rg-auth__head { margin-top: 20px; text-align: center; }

.rg-auth__title {
    color: var(--rg-indigo);
    font: 700 clamp(1.5rem, 1.3rem + .6vw, 1.85rem)/1.2 var(--rg-sans);
    letter-spacing: -.02em;
}

.rg-auth__lead { margin-top: 6px; color: var(--rg-muted); font-size: 14.5px; }

/* Fields ----------------------------------------------------------------- */

.rg-auth__form { display: grid; gap: 18px; margin-top: 28px; }

.rg-auth__field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 600;
}

.rg-auth__control { position: relative; }

.rg-auth__control > svg {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--rg-muted);
    transform: translateY(-50%);
    pointer-events: none;
    transition: color .2s;
}

.rg-auth__control input {
    width: 100%;
    height: 48px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--rg-line-strong);
    border-radius: 12px;
    background: var(--rg-paper);
    color: var(--rg-ink);
    font: 400 15px/1.5 var(--rg-sans); /* 15px+ keeps iOS from zooming on focus */
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s, box-shadow .2s;
}

.rg-auth__control input[type="password"],
.rg-auth__control:has(.rg-auth__reveal) input { padding-right: 50px; }

.rg-auth__control input::placeholder { color: #8D98A7; }

.rg-auth__control input:focus {
    border-color: var(--rg-indigo);
    outline: none;
    box-shadow: 0 0 0 3px rgba(29, 51, 84, .12);
}

.rg-auth__control:focus-within > svg { color: var(--rg-indigo); }

/* Show / hide password */
.rg-auth__reveal {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--rg-muted);
    transition: background-color .2s, color .2s;
}

.rg-auth__reveal:hover { background: var(--rg-chambray); color: var(--rg-ink); }
.rg-auth__reveal svg { width: 20px; height: 20px; }
.rg-auth__reveal .rg-auth__eye-off,
.rg-auth__reveal[aria-pressed="true"] .rg-auth__eye { display: none; }
.rg-auth__reveal[aria-pressed="true"] .rg-auth__eye-off { display: block; }

/* Remember me */
.rg-auth__remember {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: start;
    font-size: 14px;
    cursor: pointer;
}

.rg-auth__remember input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--rg-indigo);
    cursor: pointer;
}

.rg-btn.rg-auth__submit { min-height: 50px; margin-top: 4px; font-size: 15px; }

.rg-auth__control input[aria-invalid="true"] { border-color: var(--rg-copper-dark); }

/* Messages --------------------------------------------------------------- */

/* Errors use the bronze tone the checkout uses for validation messages */
.rg-auth__alert {
    padding: 12px 14px;
    border: 1px solid #E2CDB4;
    border-radius: 10px;
    background: var(--rg-copper-soft);
    color: var(--rg-copper-dark);
    font-size: 14px;
}

.rg-auth__error { margin-top: 6px; color: var(--rg-copper-dark); font-size: 13px; }

/* ==========================================================================
   Homepage Sections (list, add and edit)
   The admin list / form markup (card, form-group, btn …) in the storefront look.
   Every rule is scoped to .rg-hs so no other admin page is affected. Masters ›
   Categories reuses it (.rg-hs.rg-cat), with its own additions further below.
   ========================================================================== */

.rg-hs { padding: 28px 0 56px; }
.rg-hs [hidden] { display: none !important; }

/* Page header and messages ----------------------------------------------- */

.rg-hs .page-header { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 20px; }

.rg-hs .h3 {
    margin: 0;
    color: var(--rg-indigo);
    font: 700 clamp(1.5rem, 1.3rem + .6vw, 1.9rem)/1.2 var(--rg-sans);
    letter-spacing: -.02em;
}

.rg-hs__flash,
.rg-hs__alert {
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid #CFE3D6;
    border-radius: 10px;
    background: #EFF7F2;
    color: #1E5E38;
    font-size: 14px;
}

.rg-hs__alert,
.rg-hs__flash.is-error { border-color: #E9D8C4; background: var(--rg-copper-soft); color: var(--rg-copper-dark); }

/* Cards ------------------------------------------------------------------ */

.rg-hs .card { margin-bottom: 20px; border: 1px solid var(--rg-line); border-radius: 18px; background: var(--rg-paper); }
.rg-hs .card-header { padding: 16px 20px; border-bottom: 1px solid var(--rg-line); }
.rg-hs .card-header h4 { margin: 0; font-size: 16px; font-weight: 700; }
.rg-hs .card-header .rg-hs__hint { margin-top: 4px; }
.rg-hs .card-body { padding: 20px; }

@media (min-width: 640px) {
    .rg-hs .card-header { padding: 18px 24px; }
    .rg-hs .card-body { padding: 24px; }
}

/* Grid: columns stack on phones, sit side by side from 768px ------------- */

.rg-hs .row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }

@media (min-width: 768px) {
    .rg-hs .row { display: flex; flex-wrap: wrap; }
    .rg-hs .row.align-items-end { align-items: flex-end; }
    .rg-hs .row > [class^="col-"] { min-width: 0; }
    .rg-hs .col-md-2 { flex: 0 0 calc(16.666% - 13.4px); }
    .rg-hs .col-md-3 { flex: 0 0 calc(25% - 12px); }
    .rg-hs .col-md-6 { flex: 0 0 calc(50% - 8px); }
    .rg-hs .col-md-auto { flex: 0 0 auto; }
}

/* Fields ----------------------------------------------------------------- */

.rg-hs .form-group { margin-bottom: 16px; }
.rg-hs .col-md-auto .form-group { display: flex; flex-wrap: wrap; gap: 8px; }
.rg-hs .form-label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; }
.rg-hs__req { color: var(--rg-copper-dark); }

.rg-hs .form-control {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--rg-line-strong);
    border-radius: 10px;
    background: var(--rg-paper);
    color: var(--rg-ink);
    font: 400 15px/1.5 var(--rg-sans); /* 15px+ keeps iOS from zooming on focus */
}

.rg-hs .form-control:focus { border-color: var(--rg-indigo); outline: none; box-shadow: 0 0 0 3px rgba(29, 51, 84, .12); }
.rg-hs .form-control.is-invalid { border-color: var(--rg-copper-dark); }

/* Date inputs: mobile browsers (iOS Safari, Android Chrome) give the native control an
   intrinsic min-width and centred value, so it overflows its column. Let it shrink to fit. */
.rg-hs input[type="date"].form-control { display: block; min-width: 0; max-width: 100%; }
.rg-hs input[type="date"].form-control::-webkit-calendar-picker-indicator { margin-left: 4px; cursor: pointer; }

@media (max-width: 767px) {
    .rg-hs input[type="date"].form-control { -webkit-appearance: none; appearance: none; }
    .rg-hs input[type="date"].form-control::-webkit-date-and-time-value { margin: 0; text-align: left; }
    .rg-hs input[type="date"].form-control::-webkit-datetime-edit { padding: 0; }
}

.rg-hs__hint { margin-top: 6px; color: var(--rg-muted); font-size: 13px; }
.rg-hs .invalid-feedback,
.rg-hs__error { margin-top: 6px; color: var(--rg-copper-dark); font-size: 13px; }

.rg-hs__check { display: inline-flex; align-items: center; gap: 10px; height: 44px; font-size: 14px; font-weight: 600; cursor: pointer; }
.rg-hs__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--rg-indigo); cursor: pointer; }

/* Buttons ---------------------------------------------------------------- */

.rg-hs .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    color: var(--rg-ink);
    font: 600 14px/1.2 var(--rg-sans);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
}

.rg-hs .btn svg { width: 16px; height: 16px; flex: none; }
.rg-hs .btn:disabled { opacity: .5; cursor: not-allowed; }
.rg-hs .btn-primary { background: var(--rg-indigo); color: var(--rg-cotton); }
.rg-hs .btn-primary:hover { background: var(--rg-raw); }
.rg-hs .btn-success { background: var(--rg-wa); color: #FFFFFF; }
.rg-hs .btn-success:hover { background: #17733F; }
.rg-hs .btn-danger { border-color: var(--rg-line-strong); color: var(--rg-copper-dark); }
.rg-hs .btn-danger:hover { border-color: var(--rg-copper-dark); background: var(--rg-copper-soft); }
.rg-hs .btn-outline { border-color: var(--rg-line-strong); }
.rg-hs .btn-outline:hover { border-color: var(--rg-indigo); color: var(--rg-indigo); }
.rg-hs .btn-outline-danger:hover { border-color: var(--rg-copper-dark); color: var(--rg-copper-dark); }
.rg-hs .btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; }

.rg-hs__form-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* DataTable -------------------------------------------------------------- */

.rg-hs table.dataTable { width: 100% !important; margin: 0 !important; border-collapse: collapse; font-size: 14px; }

.rg-hs table.dataTable thead th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--rg-line-strong);
    color: var(--rg-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rg-hs table.dataTable tbody td { padding: 12px; border-top: 1px solid var(--rg-line); vertical-align: middle; }
.rg-hs table.dataTable.no-footer { border-bottom: 0; }
.rg-hs table.dataTable .text-center { text-align: center; }
.rg-hs table.dataTable tbody tr:hover { background: var(--rg-cotton); }

.rg-hs .dataTables_wrapper { color: var(--rg-ink); font-size: 14px; }
.rg-hs .dataTables_wrapper .dataTables_length { margin-bottom: 14px; }
.rg-hs .dataTables_wrapper .dataTables_length select { height: 36px; margin: 0 6px; padding: 0 8px; border: 1px solid var(--rg-line-strong); border-radius: 8px; background: var(--rg-paper); }
.rg-hs .dataTables_wrapper .dataTables_info { padding-top: 16px; color: var(--rg-muted); font-size: 13px; }
.rg-hs .dataTables_wrapper .dataTables_paginate { padding-top: 12px; }

.rg-hs .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 36px;
    margin-left: 4px;
    padding: 6px 10px;
    border: 1px solid var(--rg-line) !important;
    border-radius: 8px;
    background: var(--rg-paper) !important;
    color: var(--rg-ink) !important;
}

.rg-hs .dataTables_wrapper .dataTables_paginate .paginate_button:hover { border-color: var(--rg-indigo) !important; }
.rg-hs .dataTables_wrapper .dataTables_paginate .paginate_button.current { border-color: var(--rg-indigo) !important; background: var(--rg-indigo) !important; color: var(--rg-cotton) !important; }
.rg-hs .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .45; }

.rg-hs .dataTables_wrapper .dataTables_processing {
    border: 1px solid var(--rg-line);
    border-radius: 10px;
    background: var(--rg-paper);
    box-shadow: 0 8px 24px rgba(22, 24, 29, .08);
}

.rg-hs__name { display: block; font-weight: 600; }
.rg-hs__meta { display: block; margin-top: 4px; color: var(--rg-muted); font-size: 12.5px; }
.rg-hs__meta--warn { color: var(--rg-copper-dark); }

.rg-hs__badge {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--rg-line-strong);
    border-radius: 999px;
    background: var(--rg-cotton);
    color: var(--rg-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.rg-hs__badge.is-active { border-color: #CFE3D6; background: #EFF7F2; color: #1E5E38; }

.rg-hs__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rg-hs__actions form { margin: 0; }

/* Responsive child rows (columns hidden on narrow screens) */
.rg-hs table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
.rg-hs table.dataTable > tbody > tr.child span.dtr-title { min-width: 110px; color: var(--rg-muted); font-weight: 600; }
.rg-hs table.dataTable > tbody > tr.child .rg-hs__actions { justify-content: flex-start; }

/* Homepage sections list — phones: each section is a card. Title and status on
   top, type and display order in a labelled strip, then the actions full width. */
@media (max-width: 767px) {
    .rg-hs table.rg-hs__sections thead { display: none; }
    .rg-hs table.rg-hs__sections { display: block; }
    .rg-hs table.rg-hs__sections tbody { display: grid; gap: 12px; }

    .rg-hs table.rg-hs__sections tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title   status"
            "type    order"
            "actions actions";
        align-items: center;
        padding: 16px;
        border: 1px solid var(--rg-line);
        border-radius: 14px;
        background: var(--rg-paper);
    }

    .rg-hs table.rg-hs__sections tbody tr:hover { background: var(--rg-paper); }

    .rg-hs table.rg-hs__sections tbody td { display: block; padding: 0; border: 0; text-align: left; }

    .rg-hs table.rg-hs__sections tbody td:nth-child(1) { grid-area: title; min-width: 0; overflow-wrap: anywhere; }
    .rg-hs table.rg-hs__sections tbody td:nth-child(1) .rg-hs__name { font-size: 15px; }
    .rg-hs table.rg-hs__sections tbody td:nth-child(4) { grid-area: status; align-self: start; padding-left: 12px; }

    /* Type and order strip, between two hairlines */
    .rg-hs table.rg-hs__sections tbody td:nth-child(2),
    .rg-hs table.rg-hs__sections tbody td:nth-child(3) {
        align-self: stretch;
        margin-top: 14px;
        padding: 10px 0;
        border-top: 1px solid var(--rg-line);
        border-bottom: 1px solid var(--rg-line);
        font-weight: 500;
    }

    .rg-hs table.rg-hs__sections tbody td:nth-child(2) { grid-area: type; }
    .rg-hs table.rg-hs__sections tbody td:nth-child(3) { grid-area: order; padding-left: 12px; text-align: right; }

    .rg-hs table.rg-hs__sections tbody td[data-label]::before {
        content: attr(data-label);
        margin-right: 8px;
        color: var(--rg-muted);
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    /* Actions share the full width */
    .rg-hs table.rg-hs__sections tbody td:nth-child(5) { grid-area: actions; padding-top: 14px; }
    .rg-hs table.rg-hs__sections .rg-hs__actions { flex-wrap: nowrap; gap: 8px; }
    .rg-hs table.rg-hs__sections .rg-hs__actions > * { flex: 1 1 0; min-width: 0; }
    .rg-hs table.rg-hs__sections .rg-hs__actions .btn { width: 100%; padding: 0 8px; }

    /* "No sections found" row */
    .rg-hs table.rg-hs__sections tbody td.dataTables_empty { grid-column: 1 / -1; color: var(--rg-muted); text-align: center; }
}

/* Form: products + categories pickers ------------------------------------ */

.rg-hs__assign { display: grid; gap: 0 20px; }

@media (min-width: 1024px) {
    .rg-hs__assign { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.rg-hs__picker-filter { margin-bottom: 12px; }

.rg-hs__picker-list {
    max-height: 420px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--rg-line);
    border-radius: 12px;
    list-style: none;
}

.rg-hs__picker-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--rg-line); }
.rg-hs__picker-item:first-child { border-top: 0; }
.rg-hs__picker-item.is-checked { background: var(--rg-cotton); }
.rg-hs__picker-item label { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; font-size: 14px; cursor: pointer; }
.rg-hs__picker-item input { width: 18px; height: 18px; margin: 0; accent-color: var(--rg-indigo); cursor: pointer; }
.rg-hs__picker-label { min-width: 0; overflow-wrap: anywhere; }
.rg-hs__picker-meta { color: var(--rg-muted); font-size: 12.5px; }
.rg-hs__picker-inactive { margin-left: 4px; color: var(--rg-copper-dark); font-weight: 600; }
.rg-hs__picker-move { display: inline-flex; gap: 4px; }

.rg-hs__icon-btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--rg-line-strong);
    border-radius: 8px;
    background: var(--rg-paper);
    color: var(--rg-ink);
    cursor: pointer;
}

/* The storefront's left / right chevrons, turned to point up / down */
.rg-hs__icon-btn svg { width: 16px; height: 16px; transform: rotate(90deg); }
.rg-hs__icon-btn:hover:not(:disabled) { border-color: var(--rg-indigo); color: var(--rg-indigo); }
.rg-hs__icon-btn:disabled { opacity: .35; cursor: default; }

/* ==========================================================================
   Masters › Categories (list, add and edit)
   Built on the .rg-hs list / form styles above; only the image bits are added.
   ========================================================================== */

/* List: image column */
.rg-cat__thumb {
    display: inline-block;
    width: 48px;
    height: 48px;
    border: 1px solid var(--rg-line);
    border-radius: 10px;
    background: var(--rg-cotton);
    object-fit: cover;
    vertical-align: middle;
}

.rg-cat__thumb--empty { border-style: dashed; }

/* List — phones: each category is a card. Image beside the name and status,
   product count and display order in a labelled strip, then the actions full width. */
@media (max-width: 767px) {
    .rg-hs table.rg-cat__list thead { display: none; }
    .rg-hs table.rg-cat__list { display: block; }
    .rg-hs table.rg-cat__list tbody { display: grid; gap: 12px; }

    .rg-hs table.rg-cat__list tbody tr {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas:
            "image    name     status"
            "products products order"
            "actions  actions  actions";
        align-items: center;
        column-gap: 14px;
        padding: 16px;
        border: 1px solid var(--rg-line);
        border-radius: 14px;
        background: var(--rg-paper);
    }

    .rg-hs table.rg-cat__list tbody tr:hover { background: var(--rg-paper); }

    .rg-hs table.rg-cat__list tbody td { display: block; padding: 0; border: 0; text-align: left; }

    .rg-hs table.rg-cat__list tbody td:nth-child(1) { grid-area: image; }
    .rg-hs table.rg-cat__list .rg-cat__thumb { display: block; width: 56px; height: 56px; border-radius: 12px; }
    .rg-hs table.rg-cat__list tbody td:nth-child(2) { grid-area: name; min-width: 0; overflow-wrap: anywhere; }
    .rg-hs table.rg-cat__list tbody td:nth-child(2) .rg-hs__name { font-size: 15px; }
    .rg-hs table.rg-cat__list tbody td:nth-child(5) { grid-area: status; align-self: start; }

    /* Products and order strip, between two hairlines */
    .rg-hs table.rg-cat__list tbody td:nth-child(3),
    .rg-hs table.rg-cat__list tbody td:nth-child(4) {
        align-self: stretch;
        margin-top: 14px;
        padding: 10px 0;
        border-top: 1px solid var(--rg-line);
        border-bottom: 1px solid var(--rg-line);
        font-weight: 500;
    }

    .rg-hs table.rg-cat__list tbody td:nth-child(3) { grid-area: products; }
    .rg-hs table.rg-cat__list tbody td:nth-child(4) { grid-area: order; text-align: right; }

    .rg-hs table.rg-cat__list tbody td[data-label]::before {
        content: attr(data-label);
        margin-right: 8px;
        color: var(--rg-muted);
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    /* Actions share the full width */
    .rg-hs table.rg-cat__list tbody td:nth-child(6) { grid-area: actions; padding-top: 14px; }
    .rg-hs table.rg-cat__list .rg-hs__actions { flex-wrap: nowrap; gap: 8px; }
    .rg-hs table.rg-cat__list .rg-hs__actions > * { flex: 1 1 0; min-width: 0; }
    .rg-hs table.rg-cat__list .rg-hs__actions .btn { width: 100%; padding: 0 8px; }

    /* "No categories found" row */
    .rg-hs table.rg-cat__list tbody td.dataTables_empty { grid-column: 1 / -1; color: var(--rg-muted); text-align: center; }
}

/* Form: file picker and the current image */
.rg-cat .rg-cat__file { height: auto; padding: 9px 12px; font-size: 14px; }
.rg-cat__current { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }

.rg-cat__preview {
    width: 96px;
    height: 96px;
    border: 1px solid var(--rg-line);
    border-radius: 12px;
    background: var(--rg-cotton);
    object-fit: cover;
}

/* ==========================================================================
   Masters › Products (list, add and edit)
   Built on the .rg-hs list / form styles and the .rg-cat image bits above;
   only the gallery on the edit form is added.
   ========================================================================== */

.rg-prod .rg-hs__alert a { color: inherit; font-weight: 700; text-decoration: underline; }

/* List — tablets: seven columns can outgrow the card, so the table scrolls inside it */
@media (min-width: 768px) and (max-width: 1023px) {
    .rg-prod .dataTables_wrapper { overflow-x: auto; }
}

/* List — phones: each product is a card. Image beside the name and status,
   price and stock in a strip, the category under it, then the actions full width. */
@media (max-width: 767px) {
    .rg-hs table.rg-prod__list thead { display: none; }
    .rg-hs table.rg-prod__list { display: block; }
    .rg-hs table.rg-prod__list tbody { display: grid; gap: 12px; }

    .rg-hs table.rg-prod__list tbody tr {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas:
            "image    name     status"
            "price    price    stock"
            "category category category"
            "actions  actions  actions";
        align-items: center;
        column-gap: 14px;
        padding: 16px;
        border: 1px solid var(--rg-line);
        border-radius: 14px;
        background: var(--rg-paper);
    }

    .rg-hs table.rg-prod__list tbody tr:hover { background: var(--rg-paper); }

    .rg-hs table.rg-prod__list tbody td { display: block; padding: 0; border: 0; text-align: left; }

    .rg-hs table.rg-prod__list tbody td:nth-child(1) { grid-area: image; align-self: start; }
    .rg-hs table.rg-prod__list .rg-cat__thumb { display: block; width: 56px; height: 56px; border-radius: 12px; }
    .rg-hs table.rg-prod__list tbody td:nth-child(2) { grid-area: name; min-width: 0; overflow-wrap: anywhere; }
    .rg-hs table.rg-prod__list tbody td:nth-child(2) .rg-hs__name { font-size: 15px; line-height: 1.35; }
    .rg-hs table.rg-prod__list tbody td:nth-child(6) { grid-area: status; align-self: start; }

    /* Price and stock strip, above a hairline */
    .rg-hs table.rg-prod__list tbody td:nth-child(4),
    .rg-hs table.rg-prod__list tbody td:nth-child(5) {
        align-self: stretch;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--rg-line);
    }

    .rg-hs table.rg-prod__list tbody td:nth-child(4) { grid-area: price; }
    .rg-hs table.rg-prod__list tbody td:nth-child(4) .rg-hs__name { display: inline; font-size: 16px; }
    .rg-hs table.rg-prod__list tbody td:nth-child(4) .rg-hs__meta:has(> s) { display: inline; margin-left: 8px; }
    .rg-hs table.rg-prod__list tbody td:nth-child(5) { grid-area: stock; font-weight: 500; text-align: right; }

    .rg-hs table.rg-prod__list tbody td:nth-child(3) { grid-area: category; padding-top: 8px; font-weight: 500; }
    .rg-hs table.rg-prod__list tbody td:nth-child(3):empty { display: none; }
    .rg-hs table.rg-prod__list tbody td:nth-child(3) .rg-hs__meta { display: inline; margin-left: 8px; }

    .rg-hs table.rg-prod__list tbody td[data-label]::before {
        content: attr(data-label);
        margin-right: 8px;
        color: var(--rg-muted);
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    /* Actions share the full width, below a hairline */
    .rg-hs table.rg-prod__list tbody td:nth-child(7) { grid-area: actions; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rg-line); }
    .rg-hs table.rg-prod__list .rg-hs__actions { flex-wrap: nowrap; gap: 8px; }
    .rg-hs table.rg-prod__list .rg-hs__actions > * { flex: 1 1 0; min-width: 0; }
    .rg-hs table.rg-prod__list .rg-hs__actions .btn { width: 100%; padding: 0 8px; }

    /* "No products found" row */
    .rg-hs table.rg-prod__list tbody td.dataTables_empty { grid-column: 1 / -1; color: var(--rg-muted); text-align: center; }
}

/* Edit form: current gallery images, each with its own remove box */
.rg-prod__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.rg-prod__gallery-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rg-prod__gallery-item .rg-cat__preview { width: 100%; height: auto; aspect-ratio: 1; }
.rg-prod__gallery-item .rg-hs__check { height: 36px; font-size: 13px; }

/* ==========================================================================
   Orders (list and order details)
   Built on the .rg-hs list / form styles and the .rg-cat thumbnail above;
   adds the status badges, the detail cards and the ordered items table.
   ========================================================================== */

/* Status badges: one colour per status slug, matching the seeded order and payment
   statuses (the dashboard and storefront colours). Other slugs use the neutral badge.
   Each colour is a variable so the phone cards can reuse it as text. */
.rg-ord__badge {
    --rg-ord-badge: #5E6470;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--rg-ord-badge);
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.rg-ord__badge--pending { --rg-ord-badge: #B45309; }
.rg-ord__badge--confirmed { --rg-ord-badge: #1D4ED8; }
.rg-ord__badge--processing { --rg-ord-badge: #6D28D9; }
.rg-ord__badge--shipped { --rg-ord-badge: #0E7490; }
.rg-ord__badge--delivered,
.rg-ord__badge--paid { --rg-ord-badge: #15803D; }
.rg-ord__badge--cancelled { --rg-ord-badge: #B91C1C; }
.rg-ord__badge--refunded { --rg-ord-badge: #475569; }

/* Details: order, customer and status cards side by side on wide screens */
.rg-ord__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; }

@media (min-width: 992px) {
    .rg-ord__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

.rg-ord__details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; font-size: 14px; }
.rg-ord__details dt { color: var(--rg-muted); font-size: 12.5px; font-weight: 600; }
.rg-ord__details dd { margin: 0 0 10px; overflow-wrap: anywhere; }
.rg-ord__details dd:last-child { margin-bottom: 0; }
.rg-ord__details a { color: var(--rg-indigo); font-weight: 600; }
.rg-ord__address { white-space: pre-line; }

/* Ordered items */
.rg-ord__table-wrap { overflow-x: auto; }
.rg-ord__items { width: 100%; border-collapse: collapse; font-size: 14px; }

.rg-ord__items th {
    padding: 12px;
    border-bottom: 1px solid var(--rg-line);
    color: var(--rg-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.rg-ord__items td { padding: 12px; border-top: 1px solid var(--rg-line); vertical-align: middle; }
.rg-ord__items tbody tr:first-child td { border-top: 0; }
.rg-ord__items .rg-ord__num { text-align: right; white-space: nowrap; }
.rg-ord__product { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.rg-ord__product a.rg-hs__name { color: var(--rg-ink); }
.rg-ord__product a.rg-hs__name:hover { color: var(--rg-indigo); text-decoration: underline; }

/* Totals, right-aligned under the items */
.rg-ord__totals {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
    gap: 8px 32px;
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--rg-line);
    font-size: 14px;
}

.rg-ord__totals dt { color: var(--rg-muted); }
.rg-ord__totals dd { margin: 0; text-align: right; }
.rg-ord__totals .rg-ord__grand { color: var(--rg-ink); font-size: 16px; font-weight: 700; }

/* Details page header buttons: Print and Back to list */
.rg-ord__head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rg-hs .btn.is-loading { opacity: .7; pointer-events: none; }

/* Admin note: a multi-line .form-control on the details page, and its preview in the list,
   kept narrow and wrapping so long words or text never widen the table */
.rg-hs .form-control.rg-ord__note-input { height: auto; min-height: 112px; padding: 10px 12px; resize: vertical; }
.rg-ord__note-preview { display: block; max-width: 220px; color: var(--rg-muted); font-size: 13px; overflow-wrap: anywhere; }

/* List — wider screens: eight columns can outgrow the card, so the table scrolls inside it */
@media (min-width: 768px) {
    .rg-ord .dataTables_wrapper { overflow-x: auto; }
}

/* List — phones: each order is a card. Order number and status on top, the
   customer below, date and total in a strip, then payment, note and the View button. */
@media (max-width: 767px) {
    .rg-hs table.rg-ord__list thead { display: none; }
    .rg-hs table.rg-ord__list { display: block; }
    .rg-hs table.rg-ord__list tbody { display: grid; gap: 12px; }

    .rg-hs table.rg-ord__list tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "order    status"
            "customer customer"
            "date     total"
            "payment  payment"
            "note     note"
            "actions  actions";
        align-items: center;
        padding: 16px;
        border: 1px solid var(--rg-line);
        border-radius: 14px;
        background: var(--rg-paper);
    }

    .rg-hs table.rg-ord__list tbody tr:hover { background: var(--rg-paper); }

    .rg-hs table.rg-ord__list tbody td { display: block; padding: 0; border: 0; text-align: left; }

    /* Order number with its item count beside it */
    .rg-hs table.rg-ord__list tbody td:nth-child(1) { grid-area: order; min-width: 0; }
    .rg-hs table.rg-ord__list tbody td:nth-child(1) .rg-hs__name { display: inline; font-size: 15px; }
    .rg-hs table.rg-ord__list tbody td:nth-child(1) .rg-hs__meta { display: inline; margin-left: 6px; }
    .rg-hs table.rg-ord__list tbody td:nth-child(1) .rg-hs__meta::before { content: "· "; }
    .rg-hs table.rg-ord__list tbody td:nth-child(6) { grid-area: status; padding-left: 12px; }

    .rg-hs table.rg-ord__list tbody td:nth-child(2) { grid-area: customer; min-width: 0; margin-top: 10px; overflow-wrap: anywhere; }
    .rg-hs table.rg-ord__list tbody td:nth-child(2) .rg-hs__meta { margin-top: 2px; }

    /* Date and total strip, above a hairline */
    .rg-hs table.rg-ord__list tbody td:nth-child(3),
    .rg-hs table.rg-ord__list tbody td:nth-child(4) {
        align-self: stretch;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--rg-line);
    }

    .rg-hs table.rg-ord__list tbody td:nth-child(3) { grid-area: date; }
    .rg-hs table.rg-ord__list tbody td:nth-child(3) .rg-hs__meta { margin-top: 2px; }
    .rg-hs table.rg-ord__list tbody td:nth-child(4) { grid-area: total; padding-left: 12px; text-align: right; }
    .rg-hs table.rg-ord__list tbody td:nth-child(4) .rg-hs__name { font-size: 16px; font-weight: 700; }
    .rg-hs table.rg-ord__list tbody td:nth-child(4) .rg-hs__meta { margin-top: 2px; }

    .rg-hs table.rg-ord__list tbody td:nth-child(5) { grid-area: payment; display: flex; align-items: center; margin-top: 12px; }

    /* Payment status as coloured text with a dot, so only the order status is a pill */
    .rg-hs table.rg-ord__list tbody td:nth-child(5) .rg-ord__badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        background: none;
        color: var(--rg-ord-badge);
        font-size: 13.5px;
    }

    .rg-hs table.rg-ord__list tbody td:nth-child(5) .rg-ord__badge::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
    }
    .rg-hs table.rg-ord__list tbody td:nth-child(7) { grid-area: note; margin-top: 10px; }
    .rg-hs table.rg-ord__list tbody td:nth-child(7).is-empty { display: none; }
    .rg-hs table.rg-ord__list .rg-ord__note-preview { display: inline; max-width: none; }

    .rg-hs table.rg-ord__list tbody td[data-label]::before {
        content: attr(data-label);
        flex: none;
        margin-right: 8px;
        color: var(--rg-muted);
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    /* View button full width, below a hairline */
    .rg-hs table.rg-ord__list tbody td:nth-child(8) { grid-area: actions; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rg-line); }
    .rg-hs table.rg-ord__list .rg-hs__actions .btn { width: 100%; }

    /* "No orders found" row */
    .rg-hs table.rg-ord__list tbody td.dataTables_empty { grid-column: 1 / -1; color: var(--rg-muted); text-align: center; }
}

/* ==========================================================================
   Dashboard — responsive refinements
   dashboard.css loads after this file, so each rule is scoped under .rg-dash
   to win over it. Desktop is unchanged; phones get tighter cards and order rows,
   tablets get a full-width orders table, and long names wrap instead of widening.
   ========================================================================== */

/* Long names or numbers wrap inside their cell or row */
.rg-dash .rg-dash__table td { overflow-wrap: anywhere; }
.rg-dash .rg-dash__status-name { min-width: 0; overflow-wrap: anywhere; }
.rg-dash .rg-dash__status-count { flex: none; }

/* Tablets: the table fills its card (its cells wrap, so it no longer needs to scroll) */
@media (min-width: 768px) and (max-width: 1023px) {
    .rg-dash .rg-dash__table { display: table; }
}

/* Phones: compact summary cards and order rows */
@media (max-width: 559px) {
    .rg-dash.rg-page { padding: 24px 0 40px; }
    .rg-dash .rg-dash__stats { gap: 10px; margin-top: 20px; }
    .rg-dash .rg-dash__stat { gap: 14px; padding: 14px 16px; border-radius: 16px; }
    .rg-dash .rg-dash__stat-icon { width: 44px; height: 44px; border-radius: 12px; }
    .rg-dash .rg-dash__stat-icon svg { width: 22px; height: 22px; }
    .rg-dash .rg-dash__grid { gap: 16px; margin-top: 20px; }
    .rg-dash .rg-dash__card-head { align-items: center; }
}

/* Phones: each order is a small tinted card — order number and status on top,
   the customer below, then date and total in a footer row. The values speak
   for themselves, so the column labels are dropped. */
@media (max-width: 767px) {
    .rg-dash .rg-dash__table { margin-top: 16px; }
    .rg-dash .rg-dash__table tbody { display: grid; gap: 10px; }

    .rg-dash .rg-dash__table tr,
    .rg-dash .rg-dash__table tr:last-child {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "order    status"
            "customer customer"
            "date     total";
        align-items: center;
        gap: 10px 0; /* no column gap, so the footer hairline runs unbroken */
        padding: 14px 16px;
        border: 1px solid var(--rg-line);
        border-radius: 14px;
        background: var(--rg-cotton);
    }

    .rg-dash .rg-dash__table td { display: block; padding: 0; }
    .rg-dash .rg-dash__table td[data-label]::before { content: none; }

    .rg-dash .rg-dash__table td:nth-child(1) { grid-area: order; font-size: 15px; }
    .rg-dash .rg-dash__table td:nth-child(2) { grid-area: customer; font-weight: 500; }
    .rg-dash .rg-dash__table td:nth-child(5) { grid-area: status; justify-self: end; padding-left: 12px; }

    /* Footer row: date on the left, total on the right, above a hairline */
    .rg-dash .rg-dash__table td:nth-child(3),
    .rg-dash .rg-dash__table td:nth-child(4) { align-self: stretch; padding-top: 10px; border-top: 1px solid var(--rg-line); }

    .rg-dash .rg-dash__table td:nth-child(3) { grid-area: date; }
    .rg-dash .rg-dash__table td:nth-child(3) time,
    .rg-dash .rg-dash__table td:nth-child(3) .rg-dash__sub { display: inline; }
    .rg-dash .rg-dash__table td:nth-child(3) .rg-dash__sub::before { content: "· "; }

    .rg-dash .rg-dash__table td.rg-dash__num {
        grid-area: total;
        padding-left: 12px;
        color: var(--rg-ink);
        font-size: 15px;
        font-weight: 700;
        text-align: right;
    }

    .rg-dash .rg-dash__table td .rg-dash__sub { margin-top: 2px; }
}

/* Very small phones: a little more room for content */
@media (max-width: 359px) {
    .rg-dash .rg-dash__card { padding: 16px; }
    .rg-dash .rg-dash__table tr,
    .rg-dash .rg-dash__table tr:last-child { padding: 12px 14px; }
}