/* ────────────────────────────────────────────────────────────────
   ARABIC TOOLS — THE VISITOR'S DASHBOARD

   Tokens come from tools.css (arabtools-shell) by way of
   site-chrome.css, which is a declared dependency, so --at-* is always
   defined by the time this parses.

   House rule applies throughout: !important on any visual property a
   theme habitually hijacks — background, color, text-transform,
   list-style, ::marker. Astra sets all five on list and table markup,
   and PMPro adds its own table rules on top of that, which is why the
   table below restates borders and padding it would otherwise inherit.

   Changelog
   2026-08-14  Created.
   ──────────────────────────────────────────────────────────────── */

.at-dash {
    display: grid;
    gap: 22px;
    margin: 8px 0 0;
    font-family: var(--at-font);
    color: var(--at-ink) !important;
}

/* Two columns once there is room for them. The plan panel and the
   account panel are short; the tables are not, so they span. */
@media (min-width: 860px) {
    .at-dash {
        grid-template-columns: 1fr 1fr;
    }
    .at-dash__panel--wide,
    .at-dash__panel:nth-child(2) {
        grid-column: 1 / -1;
    }
}

.at-dash__panel {
    background: var(--at-surface) !important;
    border: 1px solid var(--at-line);
    border-radius: var(--at-radius);
    box-shadow: var(--at-shadow-xs);
    padding: 22px 24px 24px;
}

.at-dash__h {
    margin: 0 0 14px !important;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none !important;
    color: var(--at-ink-deep) !important;
}

/* ── Plan ──────────────────────────────────────────────────── */

.at-dash__panel--plan {
    background: var(--at-lilac) !important;
    border-color: var(--at-primary-soft);
}

.at-dash__plan-name {
    margin: 0 !important;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--at-primary-deep) !important;
}

.at-dash__plan-note {
    margin: 6px 0 0 !important;
    color: var(--at-ink-soft) !important;
    font-size: .93rem;
}

.at-dash__bar {
    margin-top: 14px;
    height: 9px;
    border-radius: var(--at-radius-pill);
    background: #FFFFFF !important;
    border: 1px solid var(--at-line);
    overflow: hidden;
}

.at-dash__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--at-primary), var(--at-primary-deep)) !important;
    transition: width .4s var(--at-ease);
}

.at-dash__cta {
    margin: 16px 0 0 !important;
}

.at-dash__hint {
    margin: 10px 0 0 !important;
    font-size: .85rem;
    color: var(--at-ink-muted) !important;
}

/* ── Headline statistics ───────────────────────────────────── */

.at-dash__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.at-dash__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px 16px;
    border-radius: var(--at-radius-sm);
    background: var(--at-paper) !important;
    border: 1px solid var(--at-line);
}

.at-dash__stat-icon {
    color: var(--at-primary) !important;
    font-size: 1.05rem;
    line-height: 1;
    margin-bottom: 4px;
}

.at-dash__stat-value {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--at-ink-deep) !important;
}

.at-dash__stat-label {
    font-size: .8rem;
    color: var(--at-ink-soft) !important;
}

/* ── The 30-day chart ──────────────────────────────────────── */

.at-dash__chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 72px;
    margin-top: 20px;
    padding: 0;
}

.at-dash__col {
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    height: 100%;
    background: var(--at-paper) !important;
    border-radius: 3px;
    overflow: hidden;
}

.at-dash__col > i {
    display: block;
    width: 100%;
    border-radius: 3px;
    background: var(--at-primary-soft) !important;
    transition: background .2s var(--at-ease);
}

.at-dash__col:hover > i {
    background: var(--at-primary) !important;
}

.at-dash__col.is-empty {
    background: transparent !important;
    border-bottom: 2px solid var(--at-line);
    border-radius: 0;
}

.at-dash__axis {
    display: flex;
    justify-content: space-between;
    margin: 6px 0 0 !important;
    font-size: .75rem;
    color: var(--at-ink-muted) !important;
}

/* ── Tables ────────────────────────────────────────────────── */

.at-dash__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.at-dash__table th,
.at-dash__table td {
    padding: 9px 10px !important;
    text-align: start;
    border: 0 !important;
    border-bottom: 1px solid var(--at-line) !important;
    background: transparent !important;
    color: var(--at-ink) !important;
    font-weight: 400;
}

.at-dash__table thead th {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase !important;
    letter-spacing: .06em;
    color: var(--at-ink-muted) !important;
    border-bottom: 1px solid var(--at-line-strong) !important;
}

.at-dash__table tbody th {
    font-weight: 600;
    color: var(--at-ink-deep) !important;
}

.at-dash__table tbody tr:last-child th,
.at-dash__table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.at-dash__num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* ── Activity feed ─────────────────────────────────────────── */

.at-dash__feed {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.at-dash__feed > li::marker {
    content: none !important;
}

.at-dash__feed-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--at-line);
    font-size: .92rem;
    list-style: none !important;
}

.at-dash__feed-item:last-child {
    border-bottom: 0;
}

.at-dash__verb {
    color: var(--at-ink-soft) !important;
}

.at-dash__feed-item.is-blocked .at-dash__verb {
    color: var(--at-accent-deep) !important;
}

.at-dash__feed-item > time {
    margin-inline-start: auto;
    font-size: .8rem;
    color: var(--at-ink-muted) !important;
    white-space: nowrap;
}

/* ── Locked tools ──────────────────────────────────────────── */

.at-dash__panel--locked {
    background: var(--at-accent-tint) !important;
    border-color: var(--at-accent);
}

.at-dash__locked {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.at-dash__locked > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(206, 112, 73, .18);
    list-style: none !important;
    font-size: .92rem;
}

.at-dash__locked > li::marker {
    content: none !important;
}

.at-dash__locked > li:last-child {
    border-bottom: 0;
}

.at-dash__locked-name {
    font-weight: 600;
    color: var(--at-ink-deep) !important;
}

.at-dash__locked-name i {
    color: var(--at-accent-deep) !important;
}

.at-dash__locked-need {
    font-size: .8rem;
    color: var(--at-ink-soft) !important;
}

.at-dash__locked-link {
    margin-inline-start: auto;
    font-weight: 700;
    font-size: .85rem;
    color: var(--at-accent-deep) !important;
    text-decoration: underline;
}

/* ── Account links ─────────────────────────────────────────── */

.at-dash__links {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid;
    gap: 2px;
}

.at-dash__links > li {
    list-style: none !important;
    padding: 0 !important;
}

.at-dash__links > li::marker {
    content: none !important;
}

.at-dash__links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--at-radius-sm);
    color: var(--at-ink) !important;
    text-decoration: none !important;
    transition: background .15s var(--at-ease);
}

.at-dash__links a:hover {
    background: var(--at-lilac) !important;
    color: var(--at-primary-deep) !important;
}

.at-dash__links i {
    color: var(--at-primary) !important;
}

/* ── Empty state ───────────────────────────────────────────── */

.at-dash__empty {
    margin: 0 !important;
    color: var(--at-ink-soft) !important;
    font-size: .93rem;
}

/* ── Arabic ────────────────────────────────────────────────── */

.at-dash[dir="rtl"],
[dir="rtl"] .at-dash {
    font-family: var(--at-font-ar);
}

/* The chart reads left-to-right as a timeline in both scripts: it is a
   number line, not prose, and mirroring it would put "today" on the
   left with the axis labels still saying otherwise. */
[dir="rtl"] .at-dash__chart {
    direction: ltr;
}