:root {
    --rf-ink: #211915;
    --rf-charcoal: #33261f;
    --rf-ember: #d8531f;
    --rf-ember-dark: #b8441a;
    --rf-cream: #faf6f2;
    --rf-panel: #ffffff;
    --rf-border: #ece3db;
    --rf-muted: #8a7b71;
}

body {
    background: var(--rf-cream);
    color: var(--rf-ink);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Top bar ---------- */
.rf-topbar {
    background: linear-gradient(90deg, var(--rf-charcoal), #1c1512);
    color: #fff;
    padding: 14px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.rf-topbar-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.rf-brand { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.rf-brand-mark {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--rf-ember), #f0904a);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
}
.rf-brand-text strong { color: var(--rf-ember); font-weight: 700; }
.rf-topbar-sub { color: #cbb9ad; font-size: .85rem; letter-spacing: .03em; }

.rf-main { max-width: 1320px; margin: 0 auto; padding: 28px 24px 60px; }

/* ---------- Summary cards ---------- */
.rf-cards { --bs-gutter-x: 1rem; }
.rf-card {
    background: var(--rf-panel);
    border: 1px solid var(--rf-border);
    border-radius: 14px;
    padding: 16px 16px 14px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.rf-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(33,25,21,.08); }
.rf-card-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; margin-bottom: 10px;
}
.rf-card-value { font-size: 1.55rem; font-weight: 700; line-height: 1; }
.rf-card-label { color: var(--rf-muted); font-size: .8rem; margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }

.rf-icon-total { background: #efe6de; color: var(--rf-charcoal); }
.rf-icon-pending { background: #eceff1; color: #607d8b; }
.rf-icon-processing { background: #e3f0fd; color: #1976d2; }
.rf-icon-confirmed { background: #e0f7fa; color: #00838f; }
.rf-icon-shipped { background: #fff1e0; color: #e07b00; }
.rf-icon-outfordelivery { background: #ece3fb; color: #5e35b1; }
.rf-icon-delivered { background: #e5f6e8; color: #2e7d32; }
.rf-icon-cancelled { background: #fdeaea; color: #c62828; }

/* ---------- Panel / table ---------- */
.rf-panel {
    background: var(--rf-panel);
    border: 1px solid var(--rf-border);
    border-radius: 14px;
    padding: 20px;
}
.rf-panel-header h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 14px; }

#ordersTable thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rf-muted);
    border-bottom: 2px solid var(--rf-border);
    white-space: nowrap;
}
#ordersTable tbody td { vertical-align: middle; font-size: .9rem; }
#ordersTable td.no-sort, #ordersTable th.no-sort { white-space: nowrap; }

/* DataTables control row spacing */
.dataTables_wrapper .dataTables_filter input {
    border-radius: 8px;
    border: 1px solid var(--rf-border);
    padding: 5px 10px;
    margin-left: 8px;
}
.dataTables_wrapper .dataTables_length select {
    border-radius: 8px;
    border: 1px solid var(--rf-border);
    padding: 3px 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--rf-ember) !important;
    border-color: var(--rf-ember) !important;
    color: #fff !important;
    border-radius: 6px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px;
}

/* ---------- Status badges ---------- */
.rf-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: .74rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.rf-badge-pending          { background: #eceff1; color: #546e7a; }
.rf-badge-processing       { background: #e3f0fd; color: #1565c0; }
.rf-badge-confirmed        { background: #e0f7fa; color: #00838f; }
.rf-badge-packed           { background: #f1e6fb; color: #7b1fa2; }
.rf-badge-shipped          { background: #fff1e0; color: #e07b00; }
.rf-badge-outfordelivery   { background: #ece3fb; color: #5e35b1; }
.rf-badge-delivered        { background: #e5f6e8; color: #2e7d32; }
.rf-badge-cancelled        { background: #fdeaea; color: #c62828; }
.rf-badge-returned         { background: #eaeaea; color: #2b2b2b; }

/* ---------- Action buttons ---------- */
.rf-action-btn {
    border: 1px solid var(--rf-border);
    background: #fff;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--rf-charcoal);
    margin-right: 4px;
    transition: background .15s ease, color .15s ease;
}
.rf-action-btn:hover { background: var(--rf-ember); color: #fff; border-color: var(--rf-ember); }

.btn-danger-rf {
    background: var(--rf-ember);
    border-color: var(--rf-ember);
    color: #fff;
}
.btn-danger-rf:hover { background: var(--rf-ember-dark); border-color: var(--rf-ember-dark); color: #fff; }

/* ---------- Details modal ---------- */
.rf-detail-section { margin-bottom: 18px; }
.rf-detail-section h6 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--rf-muted);
    border-bottom: 1px solid var(--rf-border);
    padding-bottom: 6px;
    margin-bottom: 10px;
}
.rf-detail-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: .9rem; gap: 10px; }
.rf-detail-row span:first-child { color: var(--rf-muted); }
.rf-detail-row span:last-child { text-align: right; font-weight: 500; }

/* ---------- Timeline (history) ---------- */
.rf-timeline { position: relative; padding-left: 24px; }
.rf-timeline::before {
    content: "";
    position: absolute; left: 6px; top: 4px; bottom: 4px;
    width: 2px; background: var(--rf-border);
}
.rf-timeline-item { position: relative; padding-bottom: 20px; }
.rf-timeline-item:last-child { padding-bottom: 0; }
.rf-timeline-dot {
    position: absolute; left: -24px; top: 3px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--rf-ember);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--rf-ember);
}
.rf-timeline-date { font-size: .76rem; color: var(--rf-muted); margin-top: 2px; }
.rf-timeline-notes { font-size: .86rem; margin-top: 4px; color: #4a3a30; background: #faf6f2; border: 1px solid var(--rf-border); border-radius: 8px; padding: 8px 10px; }
.rf-timeline-empty { color: var(--rf-muted); font-size: .9rem; }

.rf-loading { color: var(--rf-muted); }

@media (max-width: 576px) {
    .rf-topbar-inner { flex-direction: column; align-items: flex-start; gap: 2px; }
    .rf-main { padding: 18px 14px 40px; }
}