/* ============================================================
   Recer Reseller Tracker – Report Styles
   Aesthetic: refined editorial, warm neutrals, materials brand
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* ── Custom properties ────────────────────────────────────── */
.rrt-wrap {
    --rrt-sand:      #f5f0e8;
    --rrt-sand-dark: #e8dfd0;
    --rrt-clay:      #c8a87a;
    --rrt-clay-dark: #a0804a;
    --rrt-ink:       #1a1612;
    --rrt-ink-mid:   #5a4f44;
    --rrt-ink-soft:  #9a8f82;
    --rrt-white:     #fdfaf6;
    --rrt-view:      #2d6a4f;
    --rrt-view-bg:   #eaf4ef;
    --rrt-stock:     #1d4e89;
    --rrt-stock-bg:  #eaf0f8;
    --rrt-radius:    10px;
    --rrt-shadow:    0 1px 3px rgba(26,22,18,.08), 0 4px 16px rgba(26,22,18,.05);

    font-family: 'DM Sans', sans-serif;
    color: var(--rrt-ink);
    background: var(--rrt-sand);
    min-height: 100vh;
    padding: 0 0 4rem;
}

/* ── Header ──────────────────────────────────────────────── */

.rrt-header {
    background: var(--rrt-ink);
    padding: 2.5rem 2rem 2rem;
    margin-bottom: 2rem;
}
.rrt-header__inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.rrt-header__eyebrow {
    display: block;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rrt-clay);
    margin-bottom: .35rem;
}
.rrt-header__h1 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 400;
    color: var(--rrt-white);
    margin: 0;
    line-height: 1.15;
}
.rrt-header__meta {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.rrt-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .75rem;
    border-radius: 100px;
    font-size: .75rem;
    font-weight: 500;
}
.rrt-badge--resellers { background: rgba(200,168,122,.18); color: var(--rrt-clay); }
.rrt-badge--events    { background: rgba(253,250,246,.1);  color: var(--rrt-white); }

/* ── Inner container ─────────────────────────────────────── */
.rrt-wrap > *:not(.rrt-header) {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* ── Filters ─────────────────────────────────────────────── */
.rrt-filters {
    background: var(--rrt-white);
    border: 1px solid var(--rrt-sand-dark);
    border-radius: var(--rrt-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--rrt-shadow);
}
.rrt-filters__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem 1rem;
    align-items: end;
}
.rrt-label {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--rrt-ink-soft);
    margin-bottom: .35rem;
}
.rrt-input,
.rrt-select {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--rrt-sand-dark);
    border-radius: 6px;
    background: var(--rrt-sand);
    color: var(--rrt-ink);
    font-family: inherit;
    font-size: .875rem;
    transition: border-color .15s, box-shadow .15s;
    appearance: none;
    -webkit-appearance: none;
}
.rrt-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a8f82' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    padding-right: 2rem;
}
.rrt-input:focus,
.rrt-select:focus {
    outline: none;
    border-color: var(--rrt-clay);
    box-shadow: 0 0 0 3px rgba(200,168,122,.18);
}
.rrt-field--actions {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
}




.rrt-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem 1.1rem;
    border-radius: 6px;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, transform .1s;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}
.rrt-btn--primary {
    background: var(--rrt-ink);
    color: var(--rrt-white);
}
.rrt-btn--primary:hover {
    background: var(--rrt-clay-dark);
    color: #fff;
}
.rrt-btn--ghost {
    background: transparent;
    color: var(--rrt-ink-soft);
    border-color: var(--rrt-sand-dark);
}
.rrt-btn--ghost:hover {
    background: var(--rrt-sand);
    color: var(--rrt-ink);
}

/* ── Timeline ────────────────────────────────────────────── */
.rrt-timeline {
    position: relative;
    padding-left: 2rem;
}
.rrt-timeline::before {
    content: '';
    position: absolute;
    left: .65rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--rrt-sand-dark);
}

/* ── Day marker ──────────────────────────────────────────── */
.rrt-day-marker {
    position: relative;
    margin: 1.75rem 0 .75rem -2rem;
    padding-left: 2rem;
}
.rrt-day-marker span {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rrt-ink-soft);
    background: var(--rrt-sand);
    padding: .2rem .6rem;
    border-radius: 100px;
    border: 1px solid var(--rrt-sand-dark);
}
.rrt-day-marker::before {
    content: '';
    position: absolute;
    left: .5rem;
    top: 50%;
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background: var(--rrt-clay);
    transform: translateY(-50%);
}

/* ── Event card ──────────────────────────────────────────── */
.rrt-event {
    position: relative;
    margin-bottom: .75rem;
    padding-left: .5rem;
}
.rrt-event__dot {
    position: absolute;
    left: -1.65rem;
    top: 1rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    border: 2px solid var(--rrt-white);
    box-shadow: 0 0 0 1px var(--rrt-sand-dark);
    background: var(--rrt-clay);
    transition: transform .15s;
}
.rrt-event--stock_check .rrt-event__dot  { background: var(--rrt-stock); }
.rrt-event--product_view .rrt-event__dot { background: var(--rrt-view); }

.rrt-event__card {
    background: var(--rrt-white);
    border: 1px solid var(--rrt-sand-dark);
    border-radius: var(--rrt-radius);
    padding: .9rem 1.1rem;
    box-shadow: var(--rrt-shadow);
    transition: box-shadow .15s, transform .15s;
}
.rrt-event__card:hover {
    box-shadow: 0 2px 8px rgba(26,22,18,.1), 0 8px 24px rgba(26,22,18,.07);
    transform: translateY(-1px);
}
.rrt-event__card:hover + .rrt-event__dot,
.rrt-event:hover .rrt-event__dot {
    transform: scale(1.3);
}

.rrt-event__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}
.rrt-event__type {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .2rem .6rem;
    border-radius: 100px;
}
.rrt-event--product_view .rrt-event__type {
    color: var(--rrt-view);
    background: var(--rrt-view-bg);
}
.rrt-event--stock_check .rrt-event__type {
    color: var(--rrt-stock);
    background: var(--rrt-stock-bg);
}
.rrt-event__time {
    font-size: .72rem;
    color: var(--rrt-ink-soft);
    font-variant-numeric: tabular-nums;
}

.rrt-event__body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: .6rem;
}
.rrt-event__product {
    font-size: .9375rem;
    font-weight: 500;
    color: var(--rrt-ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-bottom: 1px solid transparent;
    transition: border-color .15s, color .15s;
}
.rrt-event__product:hover {
    color: var(--rrt-clay-dark);
    border-bottom-color: var(--rrt-clay-dark);
}
.rrt-event__qty {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--rrt-stock);
    background: var(--rrt-stock-bg);
    padding: .2rem .6rem;
    border-radius: 6px;
}

.rrt-event__footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-top: .55rem;
    border-top: 1px solid var(--rrt-sand-dark);
}
.rrt-event__user {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--rrt-ink-soft);
}
.rrt-event__user img {
    border-radius: 50%;
    width: 18px !important;
    height: 18px !important;
}

/* ── Pagination ──────────────────────────────────────────── */
.rrt-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 2rem;
    justify-content: center;
}
.rrt-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .6rem;
    border-radius: 6px;
    border: 1px solid var(--rrt-sand-dark);
    background: var(--rrt-white);
    color: var(--rrt-ink);
    font-size: .875rem;
    font-family: inherit;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.rrt-page-btn:hover { background: var(--rrt-sand-dark); }
.rrt-page-btn.is-active {
    background: var(--rrt-ink);
    color: var(--rrt-white);
    border-color: var(--rrt-ink);
}

/* ── Empty / notice states ───────────────────────────────── */
.rrt-empty,
.rrt-notice {
    background: var(--rrt-white);
    border: 1px dashed var(--rrt-sand-dark);
    border-radius: var(--rrt-radius);
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--rrt-ink-mid);
    font-size: .9375rem;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
    .rrt-filters__grid { grid-template-columns: 1fr 1fr; }
    .rrt-timeline      { padding-left: 1.5rem; }
    .rrt-event__card   { padding: .75rem .9rem; }
    .rrt-header        { padding: 1.5rem 1rem 1.25rem; }
}

/* ── Reseller table (Level 1) ────────────────────────────── */
.rrt-table-wrap {
    background: var(--rrt-white);
    border: 1px solid var(--rrt-sand-dark);
    border-radius: var(--rrt-radius);
    box-shadow: var(--rrt-shadow);
    overflow-x: auto;
}
.rrt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.rrt-table thead {
    border-bottom: 2px solid var(--rrt-sand-dark);
}
.rrt-table th {
    padding: .75rem 1rem;
    text-align: left;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--rrt-ink-soft);
    white-space: nowrap;
}
.rrt-th--center { text-align: center; }
.rrt-table td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--rrt-sand-dark);
    vertical-align: middle;
    color: var(--rrt-ink);
}
.rrt-row:last-child td { border-bottom: none; }
.rrt-row:hover td { background: var(--rrt-sand); }
.rrt-row { transition: background .12s; }

.rrt-td--name img {
    width: 32px !important;
    height: 32px !important;
}


.rrt-row td {
    vertical-align: middle;  /* ADD THIS */
}

.rrt-td--email { color: var(--rrt-ink-mid); }
.rrt-td--center { text-align: center; }
.rrt-td--last {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.rrt-last-date { font-size: .8125rem; font-weight: 500; }
.rrt-last-ago  { font-size: .72rem; color: var(--rrt-ink-soft); }
.rrt-td--action { white-space: nowrap; }
.rrt-nil { color: var(--rrt-ink-soft); }

.rrt-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    padding: .15rem .5rem;
    border-radius: 100px;
    font-size: .75rem;
    font-weight: 600;
}
.rrt-pill--view  { background: var(--rrt-view-bg);  color: var(--rrt-view); }
.rrt-pill--stock { background: var(--rrt-stock-bg); color: var(--rrt-stock); }

/* ── Back link ───────────────────────────────────────────── */
.rrt-back {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--rrt-clay);
    text-decoration: none;
    margin-bottom: .35rem;
    opacity: .85;
    transition: opacity .15s;
}
.rrt-back:hover { opacity: 1; color: var(--rrt-clay); }
.rrt-header__email {
    display: block;
    font-size: .8rem;
    color: var(--rrt-ink-soft);
    margin-top: .2rem;
}

/* ── Small button variant ────────────────────────────────── */
.rrt-btn--small {
    padding: .35rem .75rem;
    font-size: .78rem;
    background: var(--rrt-sand);
    color: var(--rrt-ink);
    border: 1px solid var(--rrt-sand-dark);
}
.rrt-btn--small:hover {
    background: var(--rrt-ink);
    color: var(--rrt-white);
    border-color: var(--rrt-ink);
}

/* ── Inner wrapper ───────────────────────────────────────── */
.rrt-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.25rem 4rem;
}

/* ============================================================
   Collection – pill & active-filter bar
   ============================================================ */

/* Collection pill – neutral teal tone, distinct from view/stock */
.rrt-pill--collection {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    background: #e0f2f1;
    color: #00695c;
    white-space: nowrap;
}

/* Dark-mode override */
@media (prefers-color-scheme: dark) {
    .rrt-pill--collection {
        background: #004d40;
        color: #80cbc4;
    }
}

/* Event top row: push collection pill + time to the right together */
.rrt-event__meta {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Active-filter banner shown below the filter form */
.rrt-active-filter {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    font-size: .8rem;
    color: #166534;
}

@media (prefers-color-scheme: dark) {
    .rrt-active-filter {
        background: #14532d22;
        border-color: #166534;
        color: #86efac;
    }
}

.rrt-active-filter__label {
    font-weight: 600;
}

.rrt-active-filter__clear {
    margin-left: auto;
    display: flex;
    align-items: center;
    color: inherit;
    opacity: .6;
    transition: opacity .15s;
}

.rrt-active-filter__clear:hover {
    opacity: 1;
}