/* ================================================================
 * Terhal brand polish layer.
 * Loaded after brand-override.css (which recolors the vendor theme's
 * primary purple to coral). This file is for hand-authored refinements:
 * spacing, shadows, radii, and brand-specific components (login page,
 * sidebar logo) that aren't simple color swaps.
 * ================================================================ */

:root {
    --brand-primary: #e2704a;
    --brand-primary-dark: #b8532f;
    --brand-primary-light: #f4b79a;
    --brand-bg-peach: #fff3ec;
}

/* ---------- Sidebar logo ----------
 * The uploaded logo (Settings -> site logo) can be any aspect ratio.
 * Constrain it to a sane box instead of a fixed 180px height that can
 * overflow the fixed-width sidebar. */
.main-menu .navbar-header {
    height: auto;
    min-height: 75px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
}
.main-menu .navbar-header .brand-logo.img-logo {
    height: auto !important;
    max-height: 46px !important;
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
}

/* ================================================================
 * Top navbar
 * Presentation only — the theme still owns the navbar's own background,
 * so these rules add affordances (hit areas, hover states) rather than
 * fighting dark-layout.css for the surface colour.
 * ================================================================ */
.header-navbar {
    --nav-surface: #ffffff;
    --nav-ink: #4b3b35;
    --nav-ink-muted: #8a7972;
    --nav-hairline: rgba(34, 20, 15, 0.1);
    --nav-hover-bg: rgba(226, 112, 74, 0.12);
}
body.dark-layout .header-navbar {
    --nav-surface: #161616;
    --nav-ink: #d0d2d8;
    --nav-ink-muted: #9a9ca4;
    --nav-hairline: rgba(255, 255, 255, 0.1);
    --nav-hover-bg: rgba(226, 112, 74, 0.18);
}

.header-navbar.floating-nav {
    border: 1px solid var(--nav-hairline);
    border-radius: 0.75rem;
}
.header-navbar .navbar-container .nav.navbar-nav {
    align-items: center;
    gap: 0.15rem;
}

/* Icon actions (theme toggle, fullscreen, notifications) were bare glyphs
 * with no hit area or hover feedback.
 * :not(.dropdown-user-link) matters — the user block is also an
 * `li.nav-item > a.nav-link`, and forcing it to 38px square collapses the
 * name + avatar out of the navbar. */
.header-navbar .nav.navbar-nav > li.nav-item > a.nav-link:not(.dropdown-user-link) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 0.55rem;
    color: var(--nav-ink);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.header-navbar .nav.navbar-nav > li.nav-item > a.nav-link:not(.dropdown-user-link):hover,
.header-navbar .nav.navbar-nav > li.nav-item > a.nav-link:not(.dropdown-user-link):focus {
    background-color: var(--nav-hover-bg);
    color: var(--brand-primary);
}
.header-navbar .nav.navbar-nav > li.nav-item > a.nav-link:not(.dropdown-user-link) i {
    font-size: 1.05rem;
    line-height: 1;
    margin: 0;
    float: none;
}

/* Notification count */
.header-navbar .nav-link .badge.badge-up {
    top: 4px;
    right: 4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    line-height: 17px;
    font-size: 0.62rem;
    font-weight: 700;
    background-color: var(--brand-primary) !important;
    border: 2px solid var(--nav-surface);
    box-shadow: 0 0 0 2px rgba(226, 112, 74, 0.25);
}

/* User block */
.header-navbar .dropdown-user-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 0.6rem;
    transition: background-color 0.15s ease;
}
.header-navbar .dropdown-user-link:hover {
    background-color: var(--nav-hover-bg);
}
.header-navbar .dropdown-user-link .user-nav {
    margin: 0;
}
.header-navbar .dropdown-user-link .user-name {
    color: var(--nav-ink);
    font-size: 0.88rem;
    line-height: 1.2;
}
.header-navbar .dropdown-user-link img.round {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 50%;
}

/* User dropdown panel */
.header-navbar .dropdown-user .dropdown-menu {
    border-radius: 0.7rem;
    border: 1px solid var(--nav-hairline);
    box-shadow: 0 8px 26px 0 rgba(34, 20, 15, 0.18);
    padding: 0.4rem;
    min-width: 190px;
}
.header-navbar .dropdown-user .dropdown-menu .dropdown-item {
    border-radius: 0.45rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.header-navbar .dropdown-user .dropdown-menu .dropdown-item i {
    float: none;
    margin: 0;
    font-size: 1rem;
}
.header-navbar .dropdown-user .dropdown-menu .dropdown-item:hover {
    background-color: var(--nav-hover-bg);
    color: var(--brand-primary);
}
.header-navbar .dropdown-user .dropdown-menu #logoutDashboard:hover {
    background-color: rgba(208, 59, 59, 0.12);
    color: #d03b3b;
}

/* "الرئيسية" home link — was bare text with no affordance. */
.header-navbar .header-home-link a {
    display: inline-flex;
    align-items: center;
    border-radius: 0.55rem;
    padding: 0.4rem 0.8rem;
    color: var(--nav-ink);
    border: 1px solid var(--nav-hairline);
    transition: background-color 0.15s ease, color 0.15s ease,
        border-color 0.15s ease;
}
.header-navbar .header-home-link a:hover {
    background-color: var(--nav-hover-bg);
    border-color: rgba(226, 112, 74, 0.4);
    color: var(--brand-primary);
}
.header-navbar .header-home-link .user-name {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: inherit;
}
.header-navbar .header-home-link i {
    float: none;
    margin: 0;
    font-size: 1rem;
}

/* ---------- Sidebar scrollbar (PerfectScrollbar) ----------
 * app-menu.js runs `new PerfectScrollbar('.main-menu-content')`, and the
 * vendor default paints the rail #eee with a #999 thumb that widens to 11px
 * on hover — a light-grey slab against the dark sidebar. Replace it with a
 * slim always-visible coral thumb over a transparent rail.
 * Selectors are two levels deep (.main-menu .main-menu-content …) so they
 * outrank the vendor's `.ps .ps__rail-y:hover` without needing !important. */
.main-menu .main-menu-content .ps__rail-y {
    width: 10px;
    background-color: transparent;
    opacity: 1;
}
.main-menu .main-menu-content .ps__rail-y:hover,
.main-menu .main-menu-content .ps__rail-y:focus,
.main-menu .main-menu-content .ps__rail-y.ps--clicking {
    background-color: transparent;
    opacity: 1;
}
.main-menu .main-menu-content .ps__thumb-y {
    width: 4px;
    right: auto;
    left: 3px;
    border-radius: 999px;
    background-color: rgba(226, 112, 74, 0.4);
    transition: background-color 0.18s ease, width 0.18s ease;
}
.main-menu .main-menu-content:hover .ps__thumb-y {
    background-color: rgba(226, 112, 74, 0.65);
}
.main-menu .main-menu-content .ps__rail-y:hover > .ps__thumb-y,
.main-menu .main-menu-content .ps__rail-y:focus > .ps__thumb-y,
.main-menu .main-menu-content .ps__rail-y.ps--clicking > .ps__thumb-y {
    width: 6px;
    background-color: var(--brand-primary);
}
/* Fallback for the native scrollbar, in case PerfectScrollbar hasn't
 * initialised yet (or is disabled on touch layouts). */
.main-menu .main-menu-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(226, 112, 74, 0.5) transparent;
}
.main-menu .main-menu-content::-webkit-scrollbar {
    width: 6px;
}
.main-menu .main-menu-content::-webkit-scrollbar-track {
    background: transparent;
}
.main-menu .main-menu-content::-webkit-scrollbar-thumb {
    background-color: rgba(226, 112, 74, 0.45);
    border-radius: 999px;
}
.main-menu .main-menu-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-primary);
}

/* ---------- Cards & general surfaces ----------
 * Softer corners and a lighter, warmer shadow instead of the stock
 * template's flat/heavy card look. */
.card {
    border-radius: 0.75rem;
    box-shadow: 0 2px 14px 0 rgba(34, 20, 15, 0.08);
}
.card .card-header {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}
.btn {
    border-radius: 0.5rem;
}
.form-control {
    border-radius: 0.5rem;
}

/* Dashboard stat tiles (admin/dashboard/index.ejs) */
#data-list-view .card,
.content-body .row.align-center .card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.content-body .row.align-center a:hover .card {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px 0 rgba(226, 112, 74, 0.18);
}

/* ---------- Scrollbar accent (subtle, Chromium/WebKit only) ---------- */
::-webkit-scrollbar-thumb {
    background-color: var(--brand-primary-light);
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-primary);
}

/* ---------- Login page ---------- */
.blank-page .app-content {
    background: linear-gradient(
        160deg,
        var(--brand-bg-peach) 0%,
        #ffffff 55%
    );
}
.bg-authentication {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 60px 0 rgba(184, 83, 47, 0.18);
}
.bg-authentication .card {
    box-shadow: none;
    border-radius: 0;
}
.bg-authentication .col-lg-6.d-lg-block {
    background: radial-gradient(
        circle at 30% 30%,
        var(--brand-bg-peach) 0%,
        #ffe3d5 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem !important;
}
.bg-authentication .col-lg-6.d-lg-block img {
    max-width: 320px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(184, 83, 47, 0.15));
}
#loginForm .card-title h4 {
    color: var(--brand-primary-dark);
    font-weight: 700;
}
#loginForm .btn-primary {
    padding: 0.7rem 2rem;
    font-weight: 600;
}

/* ================================================================
 * Sidebar navigation sections
 * ================================================================ */
.main-menu.menu-light .navigation .navigation-header {
    color: var(--brand-primary-dark);
    opacity: 0.75;
    font-size: 0.72rem;
    letter-spacing: 0.06rem;
    text-transform: uppercase;
}
.main-menu.menu-light .navigation .navigation-header:not(:first-child) {
    margin-top: 1.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(226, 112, 74, 0.12);
}
.main-menu .navigation > li > a {
    border-radius: 0.5rem;
    margin: 0 0.6rem;
}
.main-menu .navigation > li.active > a {
    box-shadow: 0 6px 14px 0 rgba(226, 112, 74, 0.3);
}

/* ================================================================
 * Breadcrumbs
 * ================================================================ */
.breadcrumb-wrapper .breadcrumb-item + .breadcrumb-item::before {
    content: "\2039";
    font-weight: 700;
}
.breadcrumb-wrapper .breadcrumb-item.active {
    color: var(--brand-primary-dark);
    font-weight: 600;
}

/* ================================================================
 * List / DataTable pages
 * We intentionally leave DataTables' own generated DOM structure and
 * classes untouched (.data-list-view, #min/#max, .dataTables_paginate,
 * .bottom, select[name=DataTables_Table_0_length]) since JS in
 * dataTableScripts.ejs is wired directly to them across ~15 pages we
 * can't visually re-verify here — this is presentation-only, zero DOM
 * changes, so it can't break that JS.
 * ================================================================ */
/* Surface tokens. The dashboard has a light/dark toggle (body.dark-layout),
 * so every colour below is a token with a dark override rather than a
 * hardcoded light value. Everything is scoped under #data-list-view so it
 * outranks the vendor theme's class-only rules without needing !important. */
#data-list-view {
    --tbl-surface: #ffffff;
    --tbl-head-bg: #fff3ec;
    --tbl-head-ink: #b8532f;
    --tbl-ink: #4b3b35;
    --tbl-ink-muted: #8a7972;
    --tbl-hairline: rgba(34, 20, 15, 0.08);
    --tbl-row-hover: #fffaf7;
    --tbl-shadow: 0 1px 3px 0 rgba(34, 20, 15, 0.06);
    --tbl-control-bg: #ffffff;
    --tbl-control-border: rgba(34, 20, 15, 0.14);
}
body.dark-layout #data-list-view {
    --tbl-surface: #1f1f1f;
    --tbl-head-bg: #272727;
    --tbl-head-ink: #f0a97e;
    --tbl-ink: #d0d2d8;
    --tbl-ink-muted: #9a9ca4;
    --tbl-hairline: rgba(255, 255, 255, 0.08);
    --tbl-row-hover: #282524;
    --tbl-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    --tbl-control-bg: #242424;
    --tbl-control-border: rgba(255, 255, 255, 0.14);
}

/* ---------- Top toolbar: page actions + date filter ---------- */
#data-list-view .all-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
#data-list-view .table_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
#data-list-view .table_buttons .btn {
    margin: 0 !important;
    border-radius: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.5rem 0.95rem;
    box-shadow: none;
}
#data-list-view .filter {
    gap: 0.5rem;
}
#data-list-view .filter .form-control {
    margin: 0 !important;
    min-width: 150px;
    max-width: 190px;
}

/* ---------- DataTables chrome (export buttons, length, search) ---------- */
#data-list-view .dataTables_wrapper .top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
#data-list-view .dataTables_wrapper .action-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
#data-list-view .dataTables_wrapper .dataTables_length,
#data-list-view .dataTables_wrapper .dataTables_filter {
    margin: 0;
}
#data-list-view .dataTables_wrapper .dataTables_length label,
#data-list-view .dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.82rem;
    color: var(--tbl-ink-muted);
}
/* The stock theme blows these controls up into oversized pills. */
#data-list-view .dataTables_wrapper .dataTables_length .form-control,
#data-list-view .dataTables_wrapper .dataTables_filter .form-control,
#data-list-view .filter .form-control {
    height: 38px;
    padding: 0.35rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid var(--tbl-control-border);
    background-color: var(--tbl-control-bg);
    color: var(--tbl-ink);
    font-size: 0.85rem;
    box-shadow: none;
}
#data-list-view .dataTables_wrapper .dataTables_length .form-control {
    width: 84px;
    padding-right: 0.6rem;
    background-position: left 0.6rem center;
}
#data-list-view .dataTables_wrapper .dataTables_filter .form-control {
    width: 230px;
}
#data-list-view .dataTables_wrapper .form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.15rem rgba(226, 112, 74, 0.15);
}

/* Export buttons (Copy / PDF / Excel / JSON / Print) render as bare text in
 * the stock theme — give them a real segmented-button look. */
#data-list-view .dataTables_wrapper .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
#data-list-view .dataTables_wrapper .dt-buttons .btn {
    margin: 0;
    border-radius: 0.5rem;
    border: 1px solid var(--tbl-control-border);
    background: var(--tbl-control-bg);
    color: var(--tbl-ink);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.42rem 0.85rem;
    box-shadow: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#data-list-view .dataTables_wrapper .dt-buttons .btn span {
    color: inherit;
}
#data-list-view .dataTables_wrapper .dt-buttons .btn:hover,
#data-list-view .dataTables_wrapper .dt-buttons .btn:focus,
#data-list-view .dataTables_wrapper .dt-buttons .btn:active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    box-shadow: none;
}

/* ---------- The table itself ---------- */
#data-list-view .table.data-list-view {
    border-collapse: separate;
    border-spacing: 0 0.35rem;
    color: var(--tbl-ink);
}
#data-list-view .table.data-list-view thead th {
    border: none;
    background: var(--tbl-head-bg);
    color: var(--tbl-head-ink);
    font-size: 0.75rem;
    letter-spacing: 0.02rem;
    font-weight: 700;
    text-transform: none;
    white-space: nowrap;
    padding: 0.7rem 0.9rem;
    vertical-align: middle;
}
#data-list-view .table.data-list-view thead th:first-child {
    border-top-right-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
}
#data-list-view .table.data-list-view thead th:last-child {
    border-top-left-radius: 0.6rem;
    border-bottom-left-radius: 0.6rem;
}
#data-list-view .table.data-list-view tbody tr {
    background: var(--tbl-surface);
    box-shadow: var(--tbl-shadow);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
#data-list-view .table.data-list-view tbody td,
#data-list-view .table.data-list-view tbody th {
    background: transparent;
    border: none;
    border-top: 1px solid var(--tbl-hairline);
    border-bottom: 1px solid var(--tbl-hairline);
    /* Was 0.85rem — the tall rows came from this plus the checkbox's margin. */
    padding: 0.6rem 0.9rem;
    vertical-align: middle;
    color: var(--tbl-ink);
    font-size: 0.85rem;
    white-space: nowrap;
}
#data-list-view .table.data-list-view tbody td:first-child,
#data-list-view .table.data-list-view tbody th:first-child {
    border-right: 1px solid var(--tbl-hairline);
    border-top-right-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
}
#data-list-view .table.data-list-view tbody td:last-child,
#data-list-view .table.data-list-view tbody th:last-child {
    border-left: 1px solid var(--tbl-hairline);
    border-top-left-radius: 0.6rem;
    border-bottom-left-radius: 0.6rem;
}
#data-list-view .table.data-list-view tbody tr:hover {
    background: var(--tbl-row-hover);
    box-shadow: 0 3px 12px 0 rgba(226, 112, 74, 0.16);
}

/* ---------- Thumbnails ----------
 * The views set width="100px" height="50px" attributes, which stretch any
 * non-2:1 image; cover-crop them into a consistent circular avatar instead. */
#data-list-view .table.data-list-view tbody td img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--tbl-hairline);
    background: var(--tbl-head-bg);
}
#data-list-view .table.data-list-view tbody td img.img-placeholder {
    /* The placeholder SVG is 4:3, so contain-fit it and let the tinted
       background fill the circle rather than cropping the glyph. */
    object-fit: contain;
    padding: 7px;
    background: rgba(226, 112, 74, 0.10);
}

/* ---------- Row action icons ---------- */
#data-list-view .table.data-list-view td.product-action {
    white-space: nowrap;
}
#data-list-view .table.data-list-view .product-action > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 0.45rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
#data-list-view .table.data-list-view .product-action > span:hover {
    background: rgba(226, 112, 74, 0.14);
}
#data-list-view .table.data-list-view .product-action i {
    font-size: 0.95rem;
    padding: 0;
}

/* ---------- Status pills ----------
 * Markup reuses .btn.btn-sm.round.btn-outline-* for read-only status text;
 * strip the button affordance so they read as badges, not clickable. */
#data-list-view .table.data-list-view tbody .btn.btn-sm.round {
    cursor: default;
    pointer-events: none;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.28rem 0.7rem;
    line-height: 1.4;
}
#data-list-view .table.data-list-view tbody .btn.btn-sm.round i {
    display: none;
}

/* ---------- Checkboxes ----------
 * style.css renders .checkmark as a 25px solid #d9d5d5 block that turns
 * #2196F3 blue when checked — off-brand, oversized, and the container's
 * 35px padding / 12px margin is what inflates every row. */
#data-list-view .container-checkbox {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    font-size: 0;
    vertical-align: middle;
}
#data-list-view .container-checkbox .checkmark {
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 0.28rem;
    background-color: transparent;
    border: 2px solid var(--tbl-control-border);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
#data-list-view .container-checkbox:hover input ~ .checkmark {
    background-color: rgba(226, 112, 74, 0.12);
    border-color: var(--brand-primary);
}
#data-list-view .container-checkbox input:checked ~ .checkmark {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
#data-list-view .container-checkbox .checkmark:after {
    left: 4px;
    top: 0px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
}

/* ---------- Pagination ---------- */
#data-list-view .dataTables_wrapper .bottom {
    margin-top: 0.5rem;
}
.pagination .page-item .page-link,
#data-list-view .dataTables_paginate .paginate_button .page-link {
    border-radius: 0.5rem !important;
    margin: 0 0.15rem;
    border: none;
    min-width: 34px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--brand-primary-dark);
}
.pagination .page-item.active .page-link,
#data-list-view .dataTables_paginate .paginate_button.active .page-link {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px 0 rgba(226, 112, 74, 0.35);
}

/* ---------- Empty state ---------- */
#data-list-view .table-responsive > .d-flex.flex-column img {
    max-width: 220px;
    height: auto;
    opacity: 0.85;
}
#data-list-view .table-responsive > .d-flex.flex-column span {
    color: var(--tbl-ink-muted);
    font-size: 0.95rem;
}

/* ================================================================
 * Gradient buttons
 * palette-gradient.css is the one vendor sheet the brand-override
 * generator didn't cover, so .bg-gradient-primary was still shipping the
 * stock purple (#7367F0) next to coral chrome.
 * ================================================================ */
.bg-gradient-primary {
    background: var(--brand-primary);
    background-image: linear-gradient(-30deg, #e2704a, #f0a97e) !important;
}
.bg-gradient-primary:hover,
.bg-gradient-primary:active,
.bg-gradient-primary:focus {
    background-image: linear-gradient(-30deg, #b8532f, #e2704a) !important;
}

/* ================================================================
 * Forms (create/edit pages)
 * ================================================================ */
.form-label-group label,
.card-body > .form-group > label {
    font-weight: 600;
    color: #6b5750;
}
.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.15rem rgba(226, 112, 74, 0.15);
}
.imagesUploadBlock .uploadImg {
    border: 2px dashed rgba(226, 112, 74, 0.35);
    border-radius: 0.75rem;
    background: var(--brand-bg-peach);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.imagesUploadBlock .uploadImg:hover {
    border-color: var(--brand-primary);
    background: #ffe8db;
}

/* ================================================================
 * Status badges — consistent pill look wherever "status" text appears
 * ================================================================ */
.badge {
    border-radius: 999px;
    padding: 0.35em 0.85em;
    font-weight: 600;
}