/**
 * AutoParts Pro CEO Dashboard
 * UI Components
 * EDESSIS SRL - 2026
 */

/* ===== HERO CARD ===== */
.hero {
    border-radius: var(--radius-5xl);
    padding: var(--sp-10);
    margin-bottom: var(--sp-8);
    position: relative;
    overflow: hidden;
    background: var(--gradient-hero);
}

.hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.hero * {
    position: relative;
    z-index: 1;
    color: #fff;
}

.hero h2 {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-extrabold);
    margin-bottom: var(--sp-1);
}

.hero p {
    font-size: var(--fs-base);
    opacity: 0.8;
    margin-bottom: var(--sp-5);
    color: #fff;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: rgba(255, 255, 255, 0.14);
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}

/* ===== SECTION HEADER ===== */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: var(--sp-9) 0 var(--sp-5);
}

.section-header h3 {
    font-weight: var(--fw-bold);
    font-size: var(--fs-xl);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.section-header a {
    color: var(--pl);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
}

/* ===== KPI SCROLL ===== */
.kpi-scroll {
    display: flex;
    gap: var(--sp-4);
    overflow-x: auto;
    margin: 0 calc(-1 * var(--sp-6));
    padding: 0 var(--sp-6) var(--sp-3);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.kpi-scroll::-webkit-scrollbar {
    display: none;
}

/* ===== KPI CARD ===== */
.kpi-card {
    min-width: 150px;
    padding: var(--sp-7);
    border-radius: var(--radius-3xl);
    background: var(--sf2);
    border: 1px solid var(--gb);
    scroll-snap-align: start;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow: var(--card-sh);
    transition: background var(--transition-smooth), border var(--transition-smooth);
}

.kpi-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
}

.kpi-card.v1::after { background: var(--kpi-v1); }
.kpi-card.v2::after { background: var(--kpi-v2); }
.kpi-card.v3::after { background: var(--kpi-v3); }
.kpi-card.v4::after { background: var(--kpi-v4); }
.kpi-card.v5::after { background: var(--kpi-v5); }
.kpi-card.v6::after { background: var(--kpi-v6); }

.kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-2xl);
    margin-bottom: var(--sp-4);
}

.kpi-card.v1 .kpi-icon { background: rgba(124, 111, 255, 0.12); color: var(--pl); }
.kpi-card.v2 .kpi-icon { background: var(--ok-light); color: var(--ok); }
.kpi-card.v3 .kpi-icon { background: var(--wrn-light); color: var(--wrn); }
.kpi-card.v4 .kpi-icon { background: var(--err-light); color: var(--err); }
.kpi-card.v5 .kpi-icon { background: var(--info-light); color: var(--info); }
.kpi-card.v6 .kpi-icon { background: var(--accent-purple-light); color: var(--accent-purple); }

.kpi-label {
    font-size: var(--fs-xs);
    color: var(--t2);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--sp-1);
}

.kpi-value {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-extrabold);
    line-height: 1.1;
}

.kpi-delta {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    margin-top: var(--sp-2);
    padding: 2px 7px;
    border-radius: var(--radius-sm);
}

.kpi-delta.up { background: var(--ok-light); color: var(--ok); }
.kpi-delta.down { background: var(--err-light); color: var(--err); }

/* ===== CARD ===== */
.card {
    background: var(--sf2);
    border-radius: var(--radius-4xl);
    border: 1px solid var(--gb);
    overflow: hidden;
    box-shadow: var(--card-sh);
    margin-bottom: var(--sp-5);
    transition: background var(--transition-smooth), border var(--transition-smooth);
}

.card-header {
    padding: var(--sp-7) var(--sp-7) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h4 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    margin: 0;
}

.card-body {
    padding: var(--sp-7);
}

/* ===== CHIP GROUP ===== */
.chip-group {
    display: flex;
    gap: 3px;
    background: var(--bg);
    border-radius: var(--radius-md);
    padding: 3px;
}

.chip {
    border: none;
    background: none;
    color: var(--t3);
    font-size: var(--fs-sm);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: var(--fw-semibold);
    transition: var(--transition-base);
    font-family: inherit;
}

.chip.active {
    background: var(--p);
    color: #fff;
}

/* ===== TABS ===== */
.tabs {
    display: flex;
    gap: 3px;
    margin-bottom: var(--sp-6);
    background: var(--bg);
    border-radius: var(--radius-lg);
    padding: 3px;
    overflow-x: auto;
    scrollbar-width: none;
    transition: background var(--transition-smooth);
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
    flex: 1;
    text-align: center;
    padding: var(--sp-3) var(--sp-1);
    border: none;
    background: none;
    color: var(--t3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    min-width: 65px;
    transition: var(--transition-base);
    font-family: inherit;
}

.tab.active {
    background: var(--p);
    color: #fff;
}

/* ===== ALERT ITEM ===== */
.alert-item {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-5);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--sp-3);
    background: var(--sf2);
    border: 1px solid var(--gb);
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: var(--card-sh);
}

.alert-item:active {
    transform: scale(0.98);
}

.alert-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.alert-icon.danger { background: var(--err-light); color: var(--err); }
.alert-icon.warning { background: var(--wrn-light); color: var(--wrn); }
.alert-icon.info { background: var(--info-light); color: var(--info); }
.alert-icon.success { background: var(--ok-light); color: var(--ok); }

.alert-content {
    flex: 1;
    min-width: 0;
}

.alert-content h6 {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    margin: 0 0 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-content p {
    font-size: var(--fs-sm);
    color: var(--t2);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-time {
    font-size: var(--fs-xs);
    color: var(--t3);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== PRODUCT ITEM ===== */
.product-item {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--sp-2);
    background: var(--sf2);
    border: 1px solid var(--gb);
    box-shadow: var(--card-sh);
}

.product-rank {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-extrabold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.product-rank.gold { background: linear-gradient(135deg, #ffaa00, #ff8a00); }
.product-rank.silver { background: linear-gradient(135deg, #8892b0, #5a6380); }
.product-rank.bronze { background: linear-gradient(135deg, #cd7f32, #8b5e3c); }
.product-rank.normal { background: var(--bg5); color: var(--t2); }

.product-info {
    flex: 1;
    min-width: 0;
}

.product-info h6 {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    margin: 0 0 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-info p {
    font-size: var(--fs-sm);
    color: var(--t2);
    margin: 0;
}

.product-value {
    text-align: right;
    flex-shrink: 0;
}

.product-value strong {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    display: block;
}

.product-value small {
    font-size: var(--fs-xs);
    color: var(--ok);
}

/* ===== PROGRESS BAR ===== */
.progress-bar {
    height: 5px;
    background: var(--bg4);
    border-radius: 3px;
    overflow: hidden;
    transition: background var(--transition-smooth);
}

.progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== ACCOUNT CARD ===== */
.account-card {
    background: var(--sf2);
    border-radius: var(--radius-3xl);
    padding: var(--sp-7);
    border: 1px solid var(--gb);
    margin-bottom: var(--sp-4);
    box-shadow: var(--card-sh);
    transition: background var(--transition-smooth);
}

.account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-5);
}

.account-header h4 {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    margin: 0;
}

.account-badge {
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}

.account-badge.success { background: var(--ok-light); color: var(--ok); }
.account-badge.danger { background: var(--err-light); color: var(--err); }

.account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--gb);
}

.account-row:last-child { border: none; }

.account-row-left {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex: 1;
    min-width: 0;
}

.account-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
    flex-shrink: 0;
}

.account-name {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-desc {
    font-size: var(--fs-xs);
    color: var(--t3);
}

.account-amount {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    flex-shrink: 0;
}

/* ===== SEARCH BAR ===== */
.search-bar {
    display: flex;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.search-bar input {
    flex: 1;
    background: var(--bg3);
    border: 1px solid var(--gb);
    border-radius: var(--radius-xl);
    padding: var(--sp-4) var(--sp-6);
    color: var(--tx);
    font-size: var(--fs-md);
    outline: none;
    font-family: inherit;
    transition: background var(--transition-smooth), border var(--transition-smooth), color var(--transition-smooth);
}

.search-bar input::placeholder { color: var(--t3); }

.search-bar button {
    width: 44px;
    border: none;
    background: var(--p);
    border-radius: var(--radius-xl);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}

/* ===== FILTER ROW ===== */
.filter-row {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    margin-bottom: var(--sp-6);
    scrollbar-width: none;
}

.filter-row::-webkit-scrollbar { display: none; }

.filter-btn {
    border: 1px solid var(--gb);
    background: var(--bg3);
    color: var(--t2);
    padding: var(--sp-3) var(--sp-6);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-base);
    font-family: inherit;
}

.filter-btn.active {
    background: var(--p);
    color: #fff;
    border-color: var(--p);
}

/* ===== STAT GRID ===== */
.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.stat-box {
    background: var(--sf2);
    border-radius: var(--radius-2xl);
    padding: var(--sp-7);
    border: 1px solid var(--gb);
    text-align: center;
    box-shadow: var(--card-sh);
    transition: background var(--transition-smooth);
}

.stat-box i {
    font-size: 22px;
    margin-bottom: var(--sp-2);
    display: block;
}

.stat-box .stat-value {
    font-size: 22px;
    font-weight: var(--fw-extrabold);
}

.stat-box .stat-label {
    font-size: var(--fs-sm);
    color: var(--t2);
    margin-top: 2px;
}

/* ===== STAT HERO ===== */
.stat-hero {
    background: linear-gradient(135deg, var(--sf2), var(--bg3));
    border-radius: var(--radius-5xl);
    padding: var(--sp-10);
    border: 1px solid var(--gb);
    margin-bottom: var(--sp-5);
    text-align: center;
    box-shadow: var(--card-sh);
    transition: background var(--transition-smooth);
}

.stat-hero .stat-value {
    font-size: var(--fs-6xl);
    font-weight: var(--fw-black);
    margin: var(--sp-2) 0;
    background: var(--pg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-hero .stat-label {
    font-size: var(--fs-sm);
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: var(--fw-semibold);
}

/* ===== QUICK ACTIONS ===== */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-7);
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-1);
    border-radius: var(--radius-2xl);
    background: var(--sf2);
    border: 1px solid var(--gb);
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--card-sh);
}

.quick-action:active {
    transform: scale(0.93);
}

.quick-action i {
    font-size: 20px;
}

.quick-action span {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--t2);
    text-align: center;
}

/* ===== LIST CARD ===== */
.list-card {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-6);
    background: var(--sf2);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--sp-3);
    border: 1px solid var(--gb);
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: var(--card-sh);
}

.list-card:active {
    transform: scale(0.98);
}

.list-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-xl);
    flex-shrink: 0;
}

.list-info {
    flex: 1;
    min-width: 0;
}

.list-info h6 {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    margin: 0 0 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-info p {
    font-size: var(--fs-sm);
    color: var(--t2);
    margin: 0;
}

.list-right {
    text-align: right;
    flex-shrink: 0;
}

.list-right strong {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    display: block;
}

.list-right small {
    font-size: var(--fs-xs);
    color: var(--t2);
}

/* ===== BADGE ===== */
.badge {
    font-size: var(--fs-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: var(--fw-bold);
    display: inline-block;
}

.badge.success { background: var(--ok-light); color: var(--ok); }
.badge.warning { background: var(--wrn-light); color: var(--wrn); }
.badge.danger { background: var(--err-light); color: var(--err); }
.badge.info { background: var(--info-light); color: var(--info); }
.badge.muted { background: var(--bg4); color: var(--t2); }

/* ===== TOGGLE ===== */
.toggle {
    width: 42px;
    height: 23px;
    border-radius: 12px;
    background: var(--bg5);
    position: relative;
    cursor: pointer;
    transition: var(--transition-slow);
    flex-shrink: 0;
}

.toggle.active {
    background: var(--p);
}

.toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    transition: var(--transition-slow);
}

.toggle.active::after {
    left: 22px;
}

/* ===== FIN METRIC ===== */
.fin-metric {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-6);
    background: var(--sf2);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--sp-3);
    border: 1px solid var(--gb);
    box-shadow: var(--card-sh);
}

.fin-metric .fm-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.fin-metric .fm-info {
    flex: 1;
}

.fin-metric .fm-info h6 {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--t2);
    margin: 0 0 2px;
}

.fin-metric .fm-val {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
}

.fin-metric .fm-delta {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}