/* ==================================================================
   Buttons
   ================================================================== */
.btn {
    --bs-btn-font-family: var(--font-display);
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-padding-x: 1.05rem;
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-focus-box-shadow: var(--ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    letter-spacing: -0.005em;
    transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease);
}

.btn:active { transform: translateY(1px); }
.btn i { font-size: 0.95em; }

.btn-sm {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.35rem;
    --bs-btn-font-size: 0.8125rem;
    min-height: 36px;
}

.btn-lg {
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-padding-y: 0.8rem;
    --bs-btn-font-size: 1rem;
    min-height: 52px;
}

.btn-primary, .btn-success {
    --bs-btn-bg: var(--green-700);
    --bs-btn-border-color: var(--green-700);
    --bs-btn-hover-bg: var(--green-800);
    --bs-btn-hover-border-color: var(--green-800);
    --bs-btn-active-bg: var(--green-900);
    --bs-btn-active-border-color: var(--green-900);
    --bs-btn-disabled-bg: var(--green-600);
    --bs-btn-disabled-border-color: var(--green-600);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, var(--shadow-sm);
}

.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary, .btn-info {
    --bs-btn-bg: var(--surface);
    --bs-btn-color: var(--ink-2);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-bg: var(--green-50);
    --bs-btn-hover-color: var(--green-800);
    --bs-btn-hover-border-color: var(--green-500);
    --bs-btn-active-bg: var(--green-100);
    --bs-btn-active-color: var(--green-900);
    --bs-btn-active-border-color: var(--green-600);
    --bs-btn-disabled-color: var(--subtle);
    --bs-btn-disabled-bg: var(--surface-2);
    --bs-btn-disabled-border-color: var(--border);
}

.btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: #A33024;
    --bs-btn-hover-border-color: #A33024;
    --bs-btn-active-bg: #8C281E;
    --bs-btn-active-border-color: #8C281E;
}

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: #E8B4AD;
    --bs-btn-hover-bg: var(--danger-bg);
    --bs-btn-hover-color: #A33024;
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-bg: var(--danger-bg);
    --bs-btn-active-color: #8C281E;
    --bs-btn-active-border-color: var(--danger);
}

.btn-warning {
    --bs-btn-bg: var(--harvest);
    --bs-btn-border-color: var(--harvest);
    --bs-btn-color: var(--ink);
    --bs-btn-hover-bg: #DDA704;
    --bs-btn-hover-border-color: #DDA704;
    --bs-btn-hover-color: var(--ink);
}

.btn-ghost {
    --bs-btn-color: var(--ink-2);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--green-50);
    --bs-btn-hover-color: var(--green-800);
    --bs-btn-active-bg: var(--green-100);
}

.btn-icon {
    --bs-btn-padding-x: 0;
    width: 44px;
    padding-inline: 0;
}

.btn-icon.btn-sm { width: 36px; }

/* ==================================================================
   Panels (content surfaces)
   ================================================================== */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--border);
}

.panel-title {
    font-size: var(--fs-md);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.panel-title i { color: var(--green-600); }

.panel-subtitle {
    margin: 2px 0 0;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.panel-body { padding: var(--s-5); }
.panel-body.flush { padding: 0; }
.panel-footer {
    padding: var(--s-3) var(--s-5);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

@media (min-width: 768px) {
    .panel-body { padding: var(--s-6); }
    .panel-header { padding: var(--s-4) var(--s-6); }
    .panel-footer { padding: var(--s-3) var(--s-6); }
}

.card {
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--radius-md);
    --bs-card-inner-border-radius: calc(var(--radius-md) - 1px);
    --bs-card-cap-bg: var(--surface-2);
    box-shadow: var(--shadow-sm);
}

/* ==================================================================
   Stat tiles
   ================================================================== */
.stat-grid {
    display: grid;
    gap: var(--s-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) { .stat-grid { gap: var(--s-4); } }
@media (min-width: 1200px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 359.98px) { .stat-grid { grid-template-columns: minmax(0, 1fr); } }

.stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    min-width: 0;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}

@media (min-width: 768px) { .stat { padding: var(--s-5); } }

a.stat:hover {
    color: inherit;
    border-color: var(--green-500);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
}

.stat-label {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--muted);
    overflow-wrap: break-word;
    hyphens: auto;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .stat { padding: var(--s-3) var(--s-3) var(--s-4); }
    .stat-label { font-size: 0.8125rem; }
    .stat-icon { width: 32px; height: 32px; border-radius: 9px; font-size: 0.9rem; }
}

.stat-value {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.stat-value small {
    font-size: 0.5em;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0;
}

.stat-meta {
    font-size: var(--fs-xs);
    color: var(--muted);
}

.stat-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 1.05rem;
}

.tone-green { background: var(--green-100); color: var(--green-700); }
.tone-leaf { background: var(--leaf-100); color: #4F7A24; }
.tone-harvest { background: var(--harvest-100); color: #8A6400; }
.tone-clay { background: var(--clay-100); color: var(--clay); }
.tone-sky { background: var(--sky-100); color: var(--sky); }

/* ==================================================================
   Pills & badges
   ================================================================== */
.pill, .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--ink-2);
    border: 1px solid var(--border);
}

.pill::before, .status-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .8;
}

.pill.no-dot::before { display: none; }

.pill-success, .status-pill.status-approved, .status-pill.status-completed, .status-pill.status-delivered, .status-pill.status-accepted, .status-pill.status-active {
    background: var(--success-bg); color: var(--success); border-color: transparent;
}
.pill-warning, .status-pill.status-pending, .status-pill.status-processing, .status-pill.status-new {
    background: var(--warning-bg); color: var(--warning); border-color: transparent;
}
.pill-danger, .status-pill.status-rejected, .status-pill.status-cancelled, .status-pill.status-inactive {
    background: var(--danger-bg); color: var(--danger); border-color: transparent;
}
.pill-info, .status-pill.status-shipped {
    background: var(--info-bg); color: var(--info); border-color: transparent;
}

.badge {
    --bs-badge-font-weight: 700;
    --bs-badge-border-radius: var(--radius-pill);
    font-family: var(--font-display);
}

.count-badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: #fff;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.medal { font-size: 1.1rem; }
.badge-gold, .medal-gold { color: #D4A106; }
.badge-silver, .medal-silver { color: #8E9AA3; }
.badge-bronze, .medal-bronze { color: #B06A34; }

/* ==================================================================
   Tables
   ================================================================== */
.table-shell {
    position: relative;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.panel .table-shell { border: 0; border-radius: 0; box-shadow: none; }
.panel > .table-shell:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }

.table-shell.is-scrollable {
    background:
        linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center / 32px 100% no-repeat local,
        linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) right center / 32px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(23,35,27,.14), transparent) left center / 12px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(23,35,27,.14), transparent) right center / 12px 100% no-repeat scroll,
        var(--surface);
}

.data-table, .custom-table, .leaderboard-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
    background: transparent;
}

.data-table th, .custom-table th, .leaderboard-table th {
    position: sticky;
    top: 0;
    padding: 12px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    white-space: nowrap;
}

.data-table td, .custom-table td, .leaderboard-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--ink-2);
    vertical-align: middle;
    background: transparent;
}

.data-table tbody tr:last-child td, .custom-table tbody tr:last-child td, .leaderboard-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr, .custom-table tbody tr, .leaderboard-table tbody tr { transition: background-color .15s; }
.data-table tbody tr:hover, .custom-table tbody tr:hover, .leaderboard-table tbody tr:hover { background: var(--green-50); }
.data-table .num, .data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .cell-strong { font-weight: 600; color: var(--ink); }
.data-table .cell-actions, .custom-table .cell-actions { white-space: nowrap; }
.cell-actions .actions, .table-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.table-empty {
    padding: var(--s-10) var(--s-4) !important;
    text-align: center !important;
    color: var(--muted) !important;
}

/* Stacked rows on phones: every <td> gets a data-label from its <th>
   (static/js/responsive-tables.js), so a row reads as a labelled card. */
@media (max-width: 767.98px) {
    table[data-stack] thead { display: none; }
    table[data-stack], table[data-stack] tbody, table[data-stack] tr, table[data-stack] td { display: block; width: 100%; }
    table[data-stack] tbody tr {
        padding: var(--s-3) var(--s-4);
        border-bottom: 1px solid var(--border);
    }
    table[data-stack] tbody tr:last-child { border-bottom: 0; }
    table[data-stack] td {
        display: grid;
        grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
        gap: var(--s-3);
        align-items: start;
        padding: 6px 0;
        border: 0;
        text-align: left !important;
        overflow-wrap: anywhere;
    }
    table[data-stack] td::before {
        content: attr(data-label);
        font-family: var(--font-display);
        font-size: var(--fs-xs);
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--subtle);
        padding-top: 2px;
    }
    table[data-stack] td[data-label=""]::before { content: none; }
    table[data-stack] td > .pill, table[data-stack] td > .status-pill, table[data-stack] td > .badge { justify-self: start; }
    table[data-stack] td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
    table[data-stack] td.cell-actions, table[data-stack] td[data-role="actions"] {
        grid-template-columns: minmax(0, 1fr);
        padding-top: var(--s-3);
    }
    table[data-stack] td.cell-actions::before, table[data-stack] td[data-role="actions"]::before { content: none; }
    table[data-stack] td.cell-actions .actions, table[data-stack] td.cell-actions .table-actions { display: flex; }
    table[data-stack] td.cell-actions .btn, table[data-stack] td.cell-actions form { flex: 1 1 auto; }
    table[data-stack] td.cell-actions form .btn { width: 100%; }
    table[data-stack] td.table-empty { display: block; }
    table[data-stack] td.table-empty::before { content: none; }
    table[data-stack] td.cell-title {
        grid-template-columns: minmax(0, 1fr);
        font-family: var(--font-display);
        font-size: var(--fs-base);
        font-weight: 700;
        color: var(--ink);
        padding-bottom: 4px;
    }
    table[data-stack] td.cell-title::before { content: none; }
}

/* ==================================================================
   Toolbar (search / filters above lists)
   ================================================================== */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}

.panel > .toolbar {
    margin: 0;
    padding: var(--s-3) var(--s-5);
    border-bottom: 1px solid var(--border);
}

.search-field {
    position: relative;
    flex: 1 1 240px;
    min-width: 0;
}

.search-field > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--subtle);
    pointer-events: none;
}

.search-field .form-control { padding-left: 40px; }

.toolbar .form-select { flex: 0 1 220px; width: auto; min-width: 0; }

@media (max-width: 575.98px) {
    .toolbar .form-select, .toolbar .btn { flex: 1 1 100%; }
}

.chip-row {
    display: flex;
    gap: var(--s-2);
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.chip-row::-webkit-scrollbar { display: none; }

.chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink-2);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.chip:hover { border-color: var(--green-500); color: var(--green-800); }
.chip.active, .chip[aria-current="page"], .chip[aria-selected="true"] {
    background: var(--green-700);
    border-color: var(--green-700);
    color: #fff;
}

/* ==================================================================
   Forms
   ================================================================== */
.form-label {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 6px;
}

.form-label .required, .required-mark { color: var(--danger); margin-left: 2px; }

.form-control, .form-select {
    min-height: 46px;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--ink);
    font-size: var(--fs-base);
    transition: border-color .15s, box-shadow .15s;
}

.form-select { padding-right: 2.4rem; }
textarea.form-control { min-height: 110px; }
.form-control-sm, .form-select-sm { min-height: 38px; font-size: var(--fs-sm); }

.form-control::placeholder { color: var(--subtle); }

.form-control:focus, .form-select:focus {
    border-color: var(--green-600);
    box-shadow: var(--ring);
}

.form-control[type="file"] { padding: 0; line-height: 44px; }
.form-control[type="file"]::file-selector-button {
    height: 44px;
    padding: 0 16px;
    margin-right: 12px;
    border: 0;
    border-right: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--ink-2);
    font-family: var(--font-display);
    font-weight: 600;
}

.form-check-input:checked { background-color: var(--green-700); border-color: var(--green-700); }
.form-check-input:focus { box-shadow: var(--ring); border-color: var(--green-600); }
.form-check-label { color: var(--ink-2); }

.form-text, .help-text { font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; }

.invalid-feedback, .errorlist, .error-list, .form-errors {
    color: var(--danger);
    font-size: var(--fs-sm);
}

.errorlist, .error-list { list-style: none; padding: 0; margin: 6px 0 0; }

.is-invalid, .form-control.is-invalid { border-color: var(--danger) !important; }

.form-panel {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
}

.form-section + .form-section {
    margin-top: var(--s-6);
    padding-top: var(--s-6);
    border-top: 1px solid var(--border);
}

.form-section-title {
    font-size: var(--fs-md);
    margin: 0 0 var(--s-1);
}

.form-section-help {
    margin: 0 0 var(--s-4);
    font-size: var(--fs-sm);
    color: var(--muted);
}

.form-grid {
    display: grid;
    gap: 0 var(--s-5);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid > .span-2 { grid-column: 1 / -1; }
}

.form-actions {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    gap: var(--s-2);
    margin-top: var(--s-6);
}

@media (max-width: 575.98px) {
    .form-actions > .btn, .form-actions > a.btn, .form-actions > button { flex: 1 1 100%; }
}

.checkbox-grid {
    display: grid;
    gap: var(--s-2);
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.checkbox-grid .form-check {
    margin: 0;
    padding: 10px 12px 10px 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.checkbox-grid .form-check:has(input:checked) { border-color: var(--green-500); background: var(--green-50); }

.input-with-icon { position: relative; }
.input-with-icon > i {
    position: absolute;
    left: 14px;
    top: 23px;
    transform: translateY(-50%);
    color: var(--subtle);
    pointer-events: none;
}
.input-with-icon .form-control, .input-with-icon .form-select { padding-left: 42px; }

.image-preview {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    max-width: 320px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--subtle);
    overflow: hidden;
}

.image-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ==================================================================
   Empty states
   ================================================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-2);
    padding: var(--s-10) var(--s-5);
    color: var(--muted);
}

.empty-state-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--s-2);
    border-radius: 16px;
    background: var(--green-50);
    color: var(--green-600);
    font-size: 1.4rem;
}

.empty-state h3, .empty-state .empty-state-title {
    font-size: var(--fs-md);
    margin: 0;
    color: var(--ink);
}

.empty-state p { margin: 0; max-width: 42ch; }
.empty-state .btn { margin-top: var(--s-3); }

/* ==================================================================
   Detail lists (label / value)
   ================================================================== */
.detail-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
}

.detail-list > div {
    display: grid;
    grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
    gap: var(--s-4);
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--muted);
}
.detail-list dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

@media (min-width: 768px) {
    .detail-list.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); }
    .detail-list.cols-2 > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* ==================================================================
   Avatars
   ================================================================== */
.avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--green-100);
    color: var(--green-800);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-sm);
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 32px; height: 32px; font-size: var(--fs-xs); }
.avatar-lg { width: 72px; height: 72px; font-size: var(--fs-lg); }
.avatar-xl { width: 112px; height: 112px; font-size: var(--fs-xl); border: 4px solid var(--surface); box-shadow: var(--shadow-md); }

/* ==================================================================
   Media cards (products, posts, gallery)
   ================================================================== */
.card-grid {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

@media (min-width: 768px) { .card-grid { gap: var(--s-5); } }

.media-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s;
    min-width: 0;
}

a.media-card:hover, .media-card.is-link:hover {
    color: inherit;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.media-card-image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--surface-2);
    overflow: hidden;
}

.media-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

a.media-card:hover .media-card-image img { transform: scale(1.04); }

.media-card-image .pill { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.94); }

.media-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    padding: var(--s-4);
}

.media-card-title {
    font-size: var(--fs-base);
    margin: 0;
    overflow-wrap: anywhere;
}

.media-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    color: var(--muted);
    min-width: 0;
}

.media-card-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.media-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    margin-top: auto;
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
}

.price {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--green-800);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.price small { font-weight: 600; color: var(--muted); font-size: 0.75em; }
.price-strike { color: var(--subtle); text-decoration: line-through; font-size: var(--fs-sm); margin-left: 6px; }

/* ==================================================================
   Confirmation card (approve / reject / delete)
   ================================================================== */
.confirm-action-card, .confirm-panel {
    width: 100%;
    max-width: 520px;
    margin: var(--s-8) auto;
    padding: var(--s-8) var(--s-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.confirm-action-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--s-4);
    border-radius: 20px;
    font-size: 1.6rem;
    background: var(--green-100);
    color: var(--green-700);
}

.confirm-action-icon.delete, .confirm-action-icon.reject { background: var(--danger-bg); color: var(--danger); }
.confirm-action-icon.approve { background: var(--success-bg); color: var(--success); }
.confirm-action-card h2, .confirm-panel h2 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.confirm-action-card p, .confirm-panel p { color: var(--muted); }
.confirm-action-card form, .confirm-panel form {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
    gap: var(--s-2);
    margin-top: var(--s-6);
}

.confirm-action-card form .form-group, .confirm-action-card form .mb-3, .confirm-action-card form > div:not(.form-actions) {
    flex: 1 1 100%;
    text-align: left;
}

@media (max-width: 575.98px) {
    .confirm-action-card form .btn, .confirm-action-card form > a { flex: 1 1 100%; }
}

/* ==================================================================
   Tabs / segmented control
   ================================================================== */
.segmented {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.segmented::-webkit-scrollbar { display: none; }

.segmented > button, .segmented > a {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.segmented > button:hover, .segmented > a:hover { color: var(--green-800); background: var(--green-50); }
.segmented > [aria-selected="true"], .segmented > .active {
    background: var(--green-700);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

/* ==================================================================
   Pagination
   ================================================================== */
.pagination {
    --bs-pagination-color: var(--ink-2);
    --bs-pagination-border-color: var(--border);
    --bs-pagination-hover-bg: var(--green-50);
    --bs-pagination-hover-color: var(--green-800);
    --bs-pagination-hover-border-color: var(--border-strong);
    --bs-pagination-active-bg: var(--green-700);
    --bs-pagination-active-border-color: var(--green-700);
    --bs-pagination-focus-box-shadow: var(--ring);
    --bs-pagination-disabled-color: var(--subtle);
    --bs-pagination-border-radius: var(--radius-sm);
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination .page-link {
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-display);
    font-weight: 600;
}

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-6);
}

.pager-status { font-size: var(--fs-sm); color: var(--muted); text-align: center; }

/* ==================================================================
   Alerts, toasts, dropdowns, modals
   ================================================================== */
.alert {
    --bs-alert-border-radius: var(--radius-md);
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    border-width: 1px;
}

.alert-success { --bs-alert-bg: var(--success-bg); --bs-alert-color: #145C33; --bs-alert-border-color: #BFE3CC; }
.alert-danger, .alert-error { --bs-alert-bg: var(--danger-bg); --bs-alert-color: #8C281E; --bs-alert-border-color: #F2C3BC; }
.alert-warning { --bs-alert-bg: var(--warning-bg); --bs-alert-color: #6E4D00; --bs-alert-border-color: #F4DC98; }
.alert-info, .alert-debug { --bs-alert-bg: var(--info-bg); --bs-alert-color: #1F4F75; --bs-alert-border-color: #C3D9EA; }

.toast-region {
    position: fixed;
    z-index: 1090;
    right: 16px;
    bottom: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s-2);
    pointer-events: none;
}

@media (min-width: 576px) { .toast-region { left: auto; top: calc(var(--header-h) + 12px); bottom: auto; } }

.app-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    width: 100%;
    max-width: 400px;
    padding: 14px 14px 14px 16px;
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs-sm);
    animation: toast-in .35s var(--ease) both;
}

.app-toast .toast-icon { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; margin-top: 1px; }
.app-toast.success .toast-icon { background: #3FB870; color: var(--ink); }
.app-toast.error .toast-icon, .app-toast.danger .toast-icon { background: #F07565; color: var(--ink); }
.app-toast.warning .toast-icon { background: var(--harvest); color: var(--ink); }
.app-toast.info .toast-icon, .app-toast.debug .toast-icon { background: #7FB5DE; color: var(--ink); }
.app-toast .toast-text { flex: 1; min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }
.app-toast button {
    flex: none;
    width: 28px;
    height: 28px;
    margin: -4px -4px 0 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.7);
}
.app-toast button:hover { background: rgba(255,255,255,.1); color: #fff; }
.app-toast.is-leaving { animation: toast-out .25s var(--ease) both; }

@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

.dropdown-menu {
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-border-radius: var(--radius-md);
    --bs-dropdown-link-active-bg: var(--green-100);
    --bs-dropdown-link-active-color: var(--green-900);
    --bs-dropdown-link-hover-bg: var(--green-50);
    --bs-dropdown-item-padding-y: 0.55rem;
    --bs-dropdown-padding-x: 6px;
    --bs-dropdown-padding-y: 6px;
    box-shadow: var(--shadow-lg);
}

.dropdown-item { border-radius: 8px; display: flex; align-items: center; gap: 10px; }
.dropdown-item i { width: 18px; text-align: center; color: var(--muted); }
.dropdown-item.text-danger i { color: inherit; }

.modal-content {
    --bs-modal-border-radius: var(--radius-lg);
    --bs-modal-border-color: var(--border);
    box-shadow: var(--shadow-lg);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--green-700);
    --bs-nav-pills-border-radius: var(--radius-pill);
}

.progress { --bs-progress-bar-bg: var(--green-600); --bs-progress-bg: var(--green-50); }

/* Chart containers */
.chart-box { position: relative; height: 280px; }
@media (min-width: 768px) { .chart-box { height: 320px; } }

/* Legacy helpers still referenced by a few templates */
.section-margin-top { margin-top: var(--s-6); }
.card-link { color: inherit; text-decoration: none; }