/* ============================================================
   DESIGN SYSTEM — EXTRAS
   Path: /assets/css/design-system/src/components/extras.css
   Components that only existed in the retired single-file
   /assets/css/design-system.css (hero, timeline, data rows,
   indicators, tooltips, spacing helpers …), moved here so that
   file can be a pointer to this design system. Tokens only.
   ============================================================ */

.ds-feat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-6);
}

.ds-feat {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-card);
    border: var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.2s ease;
}

.ds-feat:hover {
    border-color: var(--ds-indigo);
    background: var(--ds-indigo-light);
    transform: translateX(4px);
}

.ds-timeline-item {
    position: relative;
    padding-left: var(--space-8);
    padding-bottom: var(--space-6);
    border-left: 2px solid var(--border-color);
    margin-left: 7px;
}

.ds-timeline-item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--surface-page);
    border: 2px solid var(--ds-indigo);
    z-index: 1;
}

.ds-timeline-item--active::before {
    background: var(--ds-indigo);
    box-shadow: 0 0 0 4px var(--ds-indigo-light);
}

.ds-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.ds-dot--green { background: var(--color-green); box-shadow: 0 0 0 3px var(--color-green-light);
}

.ds-dot--red { background: var(--color-red);   box-shadow: 0 0 0 3px var(--color-red-light);
}

.ds-data-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 13.5px;
}

.ds-data-row:last-child { border-bottom: none;
}

.ds-data-label { color: var(--color-muted); font-weight: 500;
}

.ds-data-value { color: var(--color-heading); font-weight: 600; text-align: right;
}

.ds-user-menu {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-pill);
    border: var(--border);
    background: var(--surface-card);
    cursor: pointer;
    transition: all 0.2s;
}

.ds-user-menu:hover {
    border-color: var(--ds-indigo);
    background: var(--ds-indigo-light);
}

.ds-w-full { width: 100% !important;
}

.ds-font-mono { font-family: var(--font-mono) !important;
}

.ds-mt-0 { margin-top: 0 !important;
}

.ds-mb-0 { margin-bottom: 0 !important;
}

.ds-input--success:focus {
    border-color: var(--color-green);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.ds-hero {
    background: linear-gradient(135deg, var(--ds-indigo-dark), var(--color-purple));
    color: white;
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-8);
}

.ds-hero::after {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.ds-hero .ds-page-title,
.ds-hero .ds-page-sub {
    color: white !important;
}

.ds-table tr.is-selected td {
    background: var(--ds-indigo-light) !important;
    border-bottom-color: var(--ds-indigo-border);
}

[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-dark);
    color: white;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    white-space: nowrap;
    z-index: 10;
}

.ds-card--highlight {
    border-color: var(--ds-indigo);
}

.ds-mb-3 { margin-bottom: 12px;
}

.notif-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 20px 20px 24px;  
    border-bottom: 1px solid var(--border-color);
    transition: background .15s;
    position: relative;
}

.notif-row:last-child { border-bottom: none;
}

.notif-row:hover { background: var(--surface-subtle);
}

.notif-row.unread {
    background: color-mix(in srgb, var(--ds-indigo-light) 50%, white);
}

.notif-row.unread:hover { background: var(--ds-indigo-light);
}

.notif-message {
    font-size: 13px;
    color: var(--color-muted);
    margin: 6px 0 10px;   
    line-height: 1.6;
}

.intel-body {
    max-width: 75ch; 
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-body);
}

.ds-mt-1 { margin-top: var(--space-1) !important;
}

.ds-mt-8 { margin-top: var(--space-8) !important;
}

.ds-mt-auto { margin-top: auto !important;
}

.ds-mb-1 { margin-bottom: var(--space-1) !important;
}

.ds-mb-8 { margin-bottom: var(--space-8) !important;
}

.ds-p-1 { padding: var(--space-1) !important;
}

.ds-p-6 { padding: var(--space-6) !important;
}

.ds-flex-wrap { flex-wrap: wrap !important;
}

.ds-justify-between { justify-content: space-between !important;
}

.ds-justify-center { justify-content: center !important;
}

.ds-border-t { border-top: 1px solid var(--border-color) !important;
}

.ds-border-b { border-bottom: 1px solid var(--border-color) !important;
}

.ds-bg-subtle { background: var(--surface-subtle) !important;
}

.ds-bg-page { background: var(--surface-page) !important;
}

.ds-pointer { cursor: pointer !important;
}

.ds-no-select { user-select: none !important;
}

.ds-indicator {
    height: 4px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.ds-indicator--red { background: var(--color-red);
}

.ds-indicator--amber { background: var(--color-amber);
}

.ds-indicator--indigo { background: var(--ds-indigo);
}

.ds-indicator--green { background: var(--color-green);
}

.ds-readable {
    max-width: 75ch;
    line-height: 1.8;
}


/* ── Page header (client/staff app pages) ─────────────────────
   Eyebrow, title, one-line subtitle and right-aligned actions.
   Same look as the redesigned order, billing and monitoring pages.
     <header class="ds-pagehead">
       <div><p class="ds-pagehead__eyebrow">Billing</p>
            <h1 class="ds-pagehead__title">Wallet</h1>
            <p class="ds-pagehead__sub">…</p></div>
       <div class="ds-pagehead__actions">…buttons…</div>
     </header> */
.ds-pagehead {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5);
}
.ds-pagehead__eyebrow {
    margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ds-indigo);
}
.ds-pagehead__title {
    margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em;
    line-height: 1.2; color: var(--color-heading);
}
.ds-pagehead__sub { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--color-muted); max-width: 680px; }
.ds-pagehead__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
@media (max-width: 640px) {
    .ds-pagehead__title { font-size: 24px; }
    .ds-pagehead__actions { width: 100%; }
}