/**
 * 대시보드 전용 — Midnight Metal Aurora 보강 스타일.
 * 공통 디자인 시스템(common/layout/header.php @layer components)을 우선 사용하되,
 * 페이지 고유 컴포넌트만 여기에 정의합니다.
 */

/* ═══════════════════════════════════════════════════════════════
   KPI 카드 — 상단 뱃지 + 숫자 + sparkline 슬롯
   ═══════════════════════════════════════════════════════════════ */
.kpi {
    position: relative;
    overflow: hidden;
}
.kpi::after {
    content: '';
    position: absolute;
    inset: -1px -1px auto auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--accent, transparent);
    filter: blur(48px);
    opacity: 0.18;
    pointer-events: none;
}
.kpi__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.kpi__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 14px;
    flex-shrink: 0;
}
.kpi__value {
    margin-top: 12px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.kpi__sub {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════
   Quick Action — 사이드 카드 안의 링크 행
   ═══════════════════════════════════════════════════════════════ */
/* 빠른 작업 카드 — Tailwind CDN 은 링크 CSS 의 @apply 를 처리하지 못하므로 순수 CSS */
.quick-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 12px;
    background: var(--card-hover);
    border: 1px solid var(--border);
    transition: background var(--t-base, .18s) var(--ease, ease),
                border-color var(--t-base, .18s) var(--ease, ease),
                transform var(--t-base, .18s) var(--ease, ease);
}
.quick-action:hover {
    background: var(--card-active);
    border-color: var(--accent, var(--brand));
    transform: translateY(-1px);
}
.quick-action__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 16px;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05);
}
/* 본문 텍스트 영역 (HTML 의 flex-1/min-w-0 utility 가 CDN 으로 처리되지만, 안전하게 보강) */
.quick-action > .flex-1 { flex: 1 1 auto; min-width: 0; }
.quick-action__arrow {
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
    transition: color var(--t-base, .18s) var(--ease, ease),
                transform var(--t-base, .18s) var(--ease, ease);
}
.quick-action:hover .quick-action__arrow {
    color: var(--accent, var(--brand));
    transform: translateX(2px);
}

/* ═══════════════════════════════════════════════════════════════
   Pending list 행
   ═══════════════════════════════════════════════════════════════ */
.pending-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid rgb(255 255 255 / 0.04);
    transition: background-color var(--t-fast) var(--ease);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.pending-row:last-child { border-bottom: none; }
.pending-row:hover { background-color: rgb(255 255 255 / 0.03); }
.pending-row__avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgb(36 41 60), rgb(22 25 36));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), inset 0 0 0 1px var(--border);
    color: var(--brand-light);
    font-family: var(--en);
}
.pending-row__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pending-row__meta {
    font-size: 11px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pending-row__meta i { font-size: 9px; }

/* ═══════════════════════════════════════════════════════════════
   Activity timeline
   ═══════════════════════════════════════════════════════════════ */
.activity {
    position: relative;
    padding-left: 28px;
}
.activity::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg,
        transparent,
        rgb(255 255 255 / 0.08) 12%,
        rgb(255 255 255 / 0.08) 88%,
        transparent);
}
.activity__item {
    position: relative;
    padding-bottom: 16px;
}
.activity__item:last-child { padding-bottom: 0; }
.activity__dot {
    position: absolute;
    left: -22px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--card);
    box-shadow: 0 0 0 2px var(--accent, var(--brand-light));
}
.activity__time {
    font-family: var(--en);
    font-size: 11px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
}
.activity__text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.4;
}
.activity__text b { color: var(--brand-light); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   미니 리스트 행 — 재고 부족 품목 / 유효기간 임박 로트
   ═══════════════════════════════════════════════════════════════ */
.mini-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    border-bottom: 1px solid rgb(255 255 255 / 0.04);
}
.mini-row:last-child { border-bottom: none; }
/* S5: 클릭 가능한 행(앵커) — 색상 상속 + hover 어포던스 */
.mini-row--link {
    text-decoration: none;
    color: inherit;
    transition: background-color 0.12s ease;
}
.mini-row--link:hover { background-color: rgb(255 255 255 / 0.03); }
.mini-row__main { flex: 1; min-width: 0; }
.mini-row__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-row__sub {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 3px;
    font-family: var(--en);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-row__right {
    text-align: right;
    flex-shrink: 0;
}
.mini-row__val {
    font-size: 11px;
    font-family: var(--en);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   미니 sparkline (svg 자리표시자)
   ═══════════════════════════════════════════════════════════════ */
.sparkline {
    width: 100%;
    height: 36px;
    margin-top: 8px;
    opacity: 0.7;
}
.sparkline path { fill: none; stroke: var(--accent, var(--brand-light)); stroke-width: 1.5; }
.sparkline .area { fill: var(--accent, var(--brand-light)); fill-opacity: 0.12; stroke: none; }