/**
 * Activity Feed Component
 * Modern expandable activity/transaction feed
 * Bootstrap-integrated, Sage theme compatible
 */

/* Container */
.activity-feed-container {
    background: var(--card-bg, #fff);
    overflow: hidden;
}

/* Header Row — matches .data-table thead th from style.css */
.activity-feed-header {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--secondary-color);
    border-bottom: 2px solid var(--border-color);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-color);
    white-space: nowrap;
    user-select: none;
}

.activity-feed-header .col-date {
    grid-column: span 2;
}

.activity-feed-header .col-details {
    grid-column: span 4;
}

.activity-feed-header .col-amount {
    grid-column: span 3;
    text-align: right;
}

.activity-feed-header .col-actions {
    grid-column: span 3;
}

/* Activity Item (Row) */
.activity-item {
    border-top: 1px solid var(--line, #e6ece8);
    transition: background-color 0.2s ease;
}

.activity-item:first-child {
    border-top: none;
}

/* Zebra striping — mirrors data-table even-row pattern */
.activity-item:nth-child(even) {
    background-color: var(--zebra-row, rgba(0, 0, 0, 0.02));
}

.activity-item:hover {
    background-color: var(--hover-row, var(--soft, #f7faf8)) !important;
}

/* Main Row Content */
.activity-item-main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.activity-item-main .col-date {
    grid-column: span 2;
}

.activity-item-main .col-details {
    grid-column: span 4;
}

.activity-item-main .col-amount {
    grid-column: span 3;
    text-align: right;
    min-width: 0;
}

.activity-item-main .col-actions {
    grid-column: span 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Date Column */
.activity-date-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted, #5b6b62);
    margin-bottom: 0.125rem;
}

.activity-time {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink, #1f2a24);
}

/* Details Column */
.activity-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink, #1f2a24);
    margin-bottom: 0.125rem;
}

.activity-subtitle {
    font-size: 0.875rem;
    color: var(--muted, #5b6b62);
}

.activity-subtitle .separator {
    margin: 0 0.5rem;
    opacity: 0.3;
}

/* Amount Column */
.activity-amount {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    display: block;          /* ensures text-align: right on parent works */
    white-space: nowrap;
}

.activity-amount.dark-blue {
    color: var(--primary-color, var(--primary, #00008B));
}

/* Action Buttons */
.activity-actions {
    display: flex;
    gap: 0.5rem;
    opacity: 1;
    transition: opacity 0.2s ease;
    align-items: center;
}

.activity-action-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--muted, #5b6b62);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.activity-action-btn:hover {
    background: var(--primary-soft, rgba(79, 114, 95, 0.1));
    color: var(--primary, #4f725f);
}

.activity-action-btn i {
    font-size: 1.125rem;
}

/* Expand/Collapse Toggle */
.activity-expand-btn {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--muted, #5b6b62);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.activity-item.expanded .activity-expand-btn {
    transform: rotate(180deg);
}

.activity-expand-btn i {
    font-size: 1.25rem;
}

.activity-expand-placeholder {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    display: inline-block;
}

/* Expandable Content */
.activity-expandable {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: var(--soft, #f7faf8);
}

.activity-item.expanded .activity-expandable {
    max-height: 800px;
}

/* Align expand content with the details column (mirrors activity-item-main grid) */
.activity-expandable-inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 1rem;
    padding: 0.85rem 1.5rem 1.25rem;
    border-top: 1px solid var(--line, #e6ece8);
}

/* Content cell: starts at col 3 (skips the 2-col date), runs 7 cols (same as col-details span 5 + col-amount span 2 = the usable middle zone) */
.activity-expandable-inner > * {
    grid-column: 3 / span 9;
}

.activity-expandable-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

.activity-expandable-grid .col-offset {
    grid-column: span 2;
}

.activity-expandable-grid .col-content {
    grid-column: span 10;
}

.activity-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activity-detail-item {
    padding: 0.25rem 0;
    font-size: 0.875rem;
    color: var(--text-color, var(--ink, #1f2a24));
}

.activity-detail-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--muted, #5b6b62);
}

.activity-detail-meta i {
    font-size: 1rem;
}

/* First row inside expandable: item list + inline edit/delete */
.activity-detail-first-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Edit / Delete action bar — inline on first row */
.activity-detail-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
    align-items: center;
}

/* Responsive (Mobile) — 991.98px matches the rest of the app's mobile UI */
@media (max-width: 991.98px) {
    .activity-feed-header {
        display: none;
    }

    .activity-item-main {
        grid-template-columns: 1fr auto;
        gap: 0.5rem 0.75rem;
        padding: 0.875rem 1rem;
    }

    /* Never let grid children force single-character wrapping */
    .activity-item-main > div {
        min-width: 0;
    }

    /* Date + time on one inline row */
    .activity-item-main .col-date,
    .activity-item-main .col-details {
        grid-column: 1 / -2;
    }
    .activity-item-main .col-date {
        display: flex;
        align-items: baseline;
        gap: 0.5rem;
        white-space: nowrap;
    }
    .activity-date-label {
        margin-bottom: 0;
    }
    .activity-time {
        font-size: 0.78rem;
    }

    .activity-title {
        font-size: 0.92rem;
    }

    /* Long transaction codes wrap at word level, never per-character */
    .activity-subtitle {
        font-size: 0.78rem;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .activity-item-main .col-amount {
        grid-column: 1 / -2;
        text-align: right;
        margin-top: 0.25rem;
        min-width: 0;
    }

    /* Package session pill: full width, content left-aligned */
    .col-amount .s-pill {
        width: 100%;
    }
    .s-pill-top {
        white-space: normal;
        flex-wrap: wrap;
    }
    .s-pill-sub {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .activity-item-main .col-actions {
        grid-column: -2 / -1;
        grid-row: 1 / 3;
    }

    .activity-actions {
        opacity: 1 !important;
        flex-direction: column;
    }

    /* On mobile: no grid offset — full width */
    .activity-expandable-inner {
        display: block;
        padding: 0.75rem 1rem 1rem;
    }

    .activity-expandable-inner > * {
        grid-column: unset;
    }

    .activity-expandable-grid .col-offset {
        display: none;
    }

    .activity-expandable-grid .col-content {
        grid-column: span 12;
    }
}

/* Safety net at ANY width (covers cached/odd viewports):
   transaction codes and pill text never wrap one character per line */
.activity-subtitle,
.s-pill-sub,
.activity-title {
    overflow-wrap: anywhere;
}

/* Empty State */
.activity-feed-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--muted, #5b6b62);
}

.activity-feed-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.activity-feed-empty-text {
    font-size: 0.875rem;
}

/* Loading State */
.activity-feed-loading {
    padding: 3rem 1.5rem;
    text-align: center;
}

.activity-feed-loading .spinner-border {
    color: var(--primary, #4f725f);
}

/* ── Recent Transactions: Expandable Rows (v4) ── */
.activity-item { position: relative; }
/* Left accent stripe per type */
.activity-item::before {
  content: ''; position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 0 3px 3px 0;
  opacity: 0; transition: opacity 0.15s;
}
.activity-item:hover::before, .activity-item.expanded::before { opacity: 1; }
.s-pkg::before     { background: var(--primary, #5a7a6a); }
.s-svc::before     { background: var(--info, var(--primary, #3a6ea8)); }
.s-topup::before   { background: var(--success, #1e7e44); }
.s-product::before { background: var(--accent-color, var(--primary-dark, #7c4daa)); }
.s-sale::before    { background: var(--warning, #d4882a); }

/* Expand panel animation overrides */
.activity-item.expanded .activity-item-main { background: var(--primary-soft, var(--soft, #eef5f0)); }
.activity-expand-btn { transition: transform 0.25s ease; }
.activity-item.expanded .activity-expand-btn { border-color: var(--primary, #5a7a6a); color: var(--primary, #5a7a6a); background: var(--primary-soft, rgba(90,122,106,0.10)); }

/* Package highlight badge */
.pkg-highlight {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-soft, rgba(90,122,106,0.10)); border: 1px solid var(--primary-light, rgba(90,122,106,0.25));
  color: var(--primary-dark, #4a6741); border-radius: 8px; padding: 4px 12px;
  font-size: 0.76rem; font-weight: 600;
}
.pkg-highlight.warn  { background: var(--danger-bg, rgba(192,57,43,0.07));  border-color: var(--danger, rgba(192,57,43,0.2));  color: var(--danger-text, #c0392b); }
.pkg-highlight.amber { background: var(--warning-bg, rgba(212,136,42,0.11)); border-color: var(--warning, rgba(212,136,42,0.25)); color: var(--warning-text, #7a5820); }

/* Item list */
.exp-list { display: flex; flex-direction: column; gap: 4px; }
.exp-list-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-color, #1f2a24); }
.exp-list-row .bul { color: var(--muted, #aaa); }

/* Type label badges */
.type-lbl {
  display: inline-flex; align-items: center;
  border-radius: 6px; padding: 2px 9px;
  font-size: 0.71rem; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
}
.tl-svc     { background: var(--info, var(--primary, #3a6ea8)); color: #fff; }
.tl-adhoc   { background: var(--primary-light, #5a9fd4); color: var(--on-primary, #fff); }
.tl-product { background: var(--success, #1e7e44); color: #fff; }
.tl-pkg     { background: var(--primary, #5a7a6a); color: var(--on-primary, #fff); }
.tl-topup   { background: var(--success, #1e7e44); color: #fff; }
.tl-bonus   { background: var(--warning, #d4882a); color: #fff; }

/* Sub info row */
.exp-subinfo {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 0.73rem; color: var(--muted, #6b7c74); margin-top: 10px;
}
.exp-subinfo span { display: inline-flex; align-items: center; gap: 4px; }
.exp-subinfo .hi-green { color: var(--success, #1e7e44); font-weight: 600; }
.exp-subinfo .hi-amber { color: var(--warning, #d4882a); font-weight: 600; }
.exp-subinfo .hi-red   { color: var(--danger, #c0392b); font-weight: 600; }

/* Session progress pill */
.s-pill { display: flex; flex-direction: column; gap: 3px; }
.s-pill-top { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.s-pill-icon { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0; }
.s-count { border-radius: 12px; padding: 1px 9px; font-size: 0.7rem; font-weight: 700; color: #fff; }
.s-count.bg-exhaust { background: var(--danger, #c0392b); }
.s-count.bg-sale { background: var(--warning, var(--amber, #d4882a)); }
.s-count.bg-pkg { background: var(--primary, #5a7a6a); }
.s-bar-wrap { height: 4px; border-radius: 10px; overflow: hidden; }
.s-bar-fill  { height: 100%; border-radius: 10px; }
.s-pill-sub  { font-size: 0.69rem; color: var(--muted, #6b7c74); }

/* Amount variants */
.amt-credit { color: var(--success, #1e7e44); font-weight: 700; font-size: 0.94rem; }
.amt-debit  { color: var(--danger, #c0392b); font-weight: 700; font-size: 0.94rem; }
.amt-sale   { font-weight: 700; font-size: 1.25rem; color: var(--primary, var(--primary-color, #00008B)); }
.pay-sub    { font-size: 0.72rem; color: var(--muted, #6b7c74); display: flex; align-items: center; gap: 4px; }

/* Exhausted row */
.activity-item.row-exhausted { background: var(--danger-bg, #fdf9f8); }
.activity-item.row-exhausted:hover,
.activity-item.row-exhausted.expanded .activity-item-main {
    background: var(--danger-bg, #fdf0ef) !important;
}