/* ============================================================
   FILE: aziPortal.css
   Shared layout styling for Client Portal, Profile, Dashboard pages
   (All visuals come from aziBase.css and aziInputs.css)
   ============================================================ */


/* ---------------------------------------------
   PAGE WRAPPER & HEADER
---------------------------------------------- */

.page-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
}

.page-header {
    margin-bottom: 32px;
}

    .page-header h1 {
        font-size: 2rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 6px;
    }

.page-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}


/* ---------------------------------------------
   DASHBOARD CARD LAYOUT (layout only)
---------------------------------------------- */

.dashboard-card {
    margin-bottom: 32px; /* Visuals handled by global .card */
}


/* ---------------------------------------------
   PROFILE SUMMARY HEADER
---------------------------------------------- */

.profile-summary-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px; /* matches global card padding */
}

.profile-summary-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--card-accent);
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-bg); /* subtle background */
}

    .profile-avatar i {
        font-size: 56px; /* fills the circle nicely */
        color: var(--card-accent);
        line-height: 1;
    }


    .profile-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.profile-summary-text .profile-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.profile-summary-text .profile-email,
.profile-summary-text .profile-company {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 2px 0;
}

/* RIGHT SIDE METRICS */
.profile-summary-right {
    display: flex;
    gap: 32px;
}

.summary-item {
    text-align: center;
}

.summary-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--sapphire-accent);
    display: block;
}

.summary-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}


/* ---------------------------------------------
   PROFILE & PASSWORD CARDS (layout only)
---------------------------------------------- */

.profile-card,
.password-card {
    /* No visual styling — global .card handles visuals */
}


/* ---------------------------------------------
   SECTION TITLES
---------------------------------------------- */

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-primary);
}


/* ---------------------------------------------
   GRID LAYOUTS
---------------------------------------------- */

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px 32px;
    margin-bottom: 24px;
}


    /* ---------------------------------------------
   INPUT FIELDS — LAYOUT ONLY
   (All visuals come from aziInputs.css)
---------------------------------------------- */

    .profile-grid .input-field {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
    }

    .profile-grid .input-label {
        margin-bottom: 6px;
    }

    .profile-grid .input-wrapper {
        width: 100%;
    }


/* ---------------------------------------------
   BUTTON LAYOUT ONLY
   (Visuals come from aziBase.css)
---------------------------------------------- */

.profile-card .btn,
.password-card .btn {
    margin-top: 12px;
}

/* ---------------------------------------------
   LICENSE DETAIL REPEATER CARD CONTENT
---------------------------------------------- */

.status-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
}

    .status-badge.active {
        color: #2ecc71;
    }

    .status-badge.expired {
        color: #e74c3c;
    }

    .status-badge.expiring-soon {
        color: #e67e22;
    }

    .status-badge.blocked {
        color: #c0392b;
    }

    .status-badge.fingerprint-mismatch {
        color: #d35400;
    }

.machine-info {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 6px;
}