/**
 * ==========================================================
 * TechPackHub Client Portal v2
 * Cards
 * File: assets/css/cards.css
 * ==========================================================
 */

/* ==========================================================
   Base Card
========================================================== */

.tph-card{
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    background:#ffffff;
    border:1px solid var(--tph-border,#e5e7eb);
    border-radius:18px;
    overflow:hidden;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
    box-shadow:0 8px 22px rgba(15,23,42,.05);
}

.tph-card:hover{
    transform:translateY(-4px);
    border-color:rgba(59,130,246,.20);
    box-shadow:0 18px 40px rgba(15,23,42,.10);
}

.tph-card--flat{
    box-shadow:none;
}

.tph-card--outlined{
    border:2px solid var(--tph-border,#e5e7eb);
}

.tph-card--shadow{
    box-shadow:0 20px 50px rgba(15,23,42,.12);
}

.tph-card--primary{
    border-top:4px solid var(--tph-primary,#2563eb);
}

.tph-card--success{
    border-top:4px solid #10b981;
}

.tph-card--warning{
    border-top:4px solid #f59e0b;
}

.tph-card--danger{
    border-top:4px solid #ef4444;
}

/* ==========================================================
   Card Header
========================================================== */

.tph-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:22px 24px;
    border-bottom:1px solid var(--tph-border,#e5e7eb);
    background:#ffffff;
}

.tph-card-title-group{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.tph-card-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    background:#eff6ff;
    color:var(--tph-primary,#2563eb);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.tph-card-icon svg,
.tph-card-icon i{
    width:34px;
    height:34px;
    font-size:34px;
}

.tph-card-title-wrap{
    min-width:0;
}

.tph-card-title{
    margin:0;
    font-size:1.1rem;
    font-weight:700;
    color:#111827;
    line-height:1.3;
}

.tph-card-subtitle{
    margin-top:4px;
    font-size:.875rem;
    color:#6b7280;
}

/* ==========================================================
   Body
========================================================== */

.tph-card-body{
    flex:1;
    padding:24px;
}

.tph-card-body > *:first-child{
    margin-top:0;
}

.tph-card-body > *:last-child{
    margin-bottom:0;
}

/* ==========================================================
   Footer
========================================================== */

.tph-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 24px;
    border-top:1px solid var(--tph-border,#e5e7eb);
    background:#fafafa;
}

/* ==========================================================
   Compact Card
========================================================== */

.tph-card--compact .tph-card-header{
    padding:18px;
}

.tph-card--compact .tph-card-body{
    padding:18px;
}

.tph-card--compact .tph-card-footer{
    padding:16px 18px;
}


/* ==========================================================
   Feature Card
========================================================== */

.tph-feature-card{
    text-align:center;
    background:#fff;
    border:1px solid var(--tph-border,#e5e7eb);
    border-radius:18px;
    padding:32px 24px;
    transition:.25s ease;
}

.tph-feature-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(15,23,42,.08);
}

.tph-feature-icon{
    width:70px;
    height:70px;
    border-radius:20px;
    background:#eff6ff;
    color:var(--tph-primary,#2563eb);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
}

.tph-feature-title{
    font-size:1.05rem;
    font-weight:700;
    margin-bottom:10px;
}

.tph-feature-description{
    color:#6b7280;
    line-height:1.7;
}


/* ==========================================================
   Stats Card
========================================================== */
.tph-stat-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
    background:#fff;
    border:1px solid var(--tph-border);
    border-radius:18px;
    box-shadow:0 8px 22px rgba(15,23,42,.05);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.tph-stat-card:hover{
    transform:translateY(-4px);
    border-color:var(--tph-primary);
    box-shadow:0 18px 40px rgba(15,23,42,.10);
}

.tph-stat-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eff6ff;
    font-size:28px;
    flex-shrink:0;
}

.tph-stat-content{
    flex:1;
}

.tph-stat-value{
    font-size:2rem;
    font-weight:700;
    color:var(--tph-heading);
    line-height:1;
}

.tph-stat-title{
    margin-top:6px;
    font-size:.875rem;
    color:var(--tph-text-light);
}

/* ==========================================================
   Notification Card
========================================================== */

.tph-notification-card{
    display:flex;
    gap:18px;
    padding:20px;
    border-radius:16px;
    border:1px solid var(--tph-border,#e5e7eb);
    background:#fff;
}

.tph-notification-card.success{
    border-left:5px solid #10b981;
}

.tph-notification-card.warning{
    border-left:5px solid #f59e0b;
}

.tph-notification-card.error{
    border-left:5px solid #ef4444;
}

.tph-notification-card.info{
    border-left:5px solid #2563eb;
}

/* ==========================================================
   Glass Card
========================================================== */

.tph-card--glass{
    background:rgba(255,255,255,.70);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.30);
}

/* ==========================================================
   Gradient Card
========================================================== */

.tph-card--gradient{
    color:#fff;
    border:none;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
}

.tph-card--gradient .tph-card-title,
.tph-card--gradient .tph-card-subtitle{
    color:#fff;
}

.tph-card--gradient .tph-card-footer{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.10);
}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:768px){

    .tph-card-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .tph-card-footer{
        flex-direction:column;
        align-items:stretch;
    }

    .tph-metric-card{
        flex-direction:column;
        text-align:center;
    }

    .tph-project-meta{
        flex-direction:column;
        align-items:flex-start;
    }

}

@media (max-width:480px){

    .tph-card-header,
    .tph-card-body,
    .tph-card-footer{
        padding:18px;
    }

    .tph-feature-card{
        padding:24px 18px;
    }

    .tph-metric-value,
    .tph-stat-number{
        font-size:1.6rem;
    }

}