/* ============================================================
   aziPortal.css
   Client Portal and Profile pages.
   Uses tokens from aziBase.css throughout — no raw hex values.
   ============================================================ */


/* ============================================================
   PAGE WRAPPER
   ============================================================ */

.portal-page {
    background: var(--color-bg-page);
    padding-bottom: 48px;
    min-height: calc(100vh - 120px);
}


/* ============================================================
   TWO-COLUMN LAYOUT  (sidebar + main)
   ============================================================ */

.portal-layout {
    display:               grid;
    grid-template-columns: 205px 1fr;
    gap:                   24px;
    padding:               32px 0;
}


/* ============================================================
   SIDEBAR NAV
   ============================================================ */

.portal-nav {
    background:    var(--color-bg-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--card-radius);
    overflow:      hidden;
    align-self:    start;
    position:      sticky;
    top:           20px;
}

.portal-nav-link {
    display:       flex;
    align-items:   center;
    gap:           9px;
    padding:       11px 15px;
    font-size:     0.79rem;
    font-family:   var(--font-heading);
    font-weight:   500;
    color:         var(--color-text-body);
    text-decoration: none;
    border-left:   3px solid transparent;
    transition:    background 0.15s ease, color 0.15s ease;
}

.portal-nav-link:hover {
    background: var(--color-primary-bg);
    color:      var(--color-primary);
}

.portal-nav-link.active {
    border-left-color: var(--color-primary);
    color:             var(--color-primary);
    background:        var(--color-primary-bg);
}

.portal-nav-link i {
    width:     14px;
    font-size: 0.76rem;
    color:     var(--color-primary);
    flex-shrink: 0;
}

.portal-nav-link.sign-out {
    color:      var(--color-text-muted);
    border-top: 1px solid var(--color-border);
}

.portal-nav-link.sign-out i { color: var(--color-text-muted); }
.portal-nav-link.sign-out:hover { color: var(--color-text-body); background: var(--color-bg-page); }
.portal-nav-link.sign-out:hover i { color: var(--color-text-body); }


/* ============================================================
   PROFILE SUMMARY CARD
   Static 2px teal stripe — always visible, not hover-animated.
   ============================================================ */

.profile-summary-card {
    background:    var(--color-bg-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding:       18px;
    display:       flex;
    justify-content: space-between;
    align-items:   center;
    margin-bottom: 14px;
    position:      relative;
    overflow:      hidden;
    box-shadow:    var(--shadow-soft);
}

.profile-summary-card::before {
    content:    '';
    position:   absolute;
    top: 0; left: 0; right: 0;
    height:     2px;
    background: var(--color-primary);
}

/* Left — avatar + name/email/company */
.profile-summary-left {
    display:     flex;
    align-items: center;
    gap:         13px;
}

.profile-avatar {
    width:           46px;
    height:          46px;
    border-radius:   50%;
    background:      var(--color-primary-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-primary);
    font-size:       1.15rem;
    border:          2px solid rgba(2, 140, 197, 0.30);
    flex-shrink:     0;
}

.profile-name {
    font-family:   var(--font-heading);
    font-size:     0.95rem;
    font-weight:   500;
    color:         var(--color-text-primary);
    margin-bottom: 2px;
}

.profile-email,
.profile-company {
    font-size: 0.73rem;
    color:     var(--color-text-muted);
}

/* Right — summary metrics */
.profile-summary-right {
    display: flex;
    gap:     22px;
}

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

.summary-value {
    font-family: var(--font-heading);
    font-size:   1.3rem;
    font-weight: 300;
    color:       var(--color-primary);
    display:     block;
}

.summary-value.warn { color: var(--color-amber); }

.summary-label {
    font-size: 0.64rem;
    color:     var(--color-text-muted);
    display:   block;
}


/* ============================================================
   LICENCE TOOLBAR  (search + filter)
   ============================================================ */

.lic-toolbar {
    display:       flex;
    gap:           9px;
    margin-bottom: 14px;
    align-items:   center;
}

.lic-search {
    flex:     1;
    position: relative;
}

.lic-search input {
    width:         100%;
    border:        1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding:       7px 10px 7px 30px;
    font-size:     0.79rem;
    font-family:   var(--font-body);
    background:    var(--color-bg-surface);
    color:         var(--color-text-primary);
    outline:       none;
    transition:    border-color 0.2s ease;
}

.lic-search input:focus { border-color: var(--color-primary); }

.lic-search i {
    position:  absolute;
    left:      9px;
    top:       9px;
    font-size: 0.75rem;
    color:     var(--color-text-muted);
}

.lic-filter { display: flex; gap: 5px; }

.filter-btn {
    font-family:    var(--font-heading);
    font-size:      0.60rem;
    font-weight:    500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:        5px 10px;
    border-radius:  4px;
    border:         1px solid var(--color-border);
    background:     var(--color-bg-surface);
    color:          var(--color-text-muted);
    cursor:         pointer;
    transition:     all 0.15s ease;
}

.filter-btn.active {
    background:   var(--color-primary-bg);
    color:        var(--color-primary-h);
    border-color: var(--color-primary);
}


/* ============================================================
   LICENCE CARDS
   Status stripe 3px — intentionally thicker than standard 2px
   so the status colour is immediately legible at a glance.
   ============================================================ */

.license-card {
    background:    var(--color-bg-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding:       16px;
    margin-bottom: 10px;
    position:      relative;
    overflow:      hidden;
    box-shadow:    var(--shadow-soft);
}

.license-card::before {
    content:    '';
    position:   absolute;
    top: 0; left: 0; right: 0;
    height:     3px;
}

.license-card.active::before   { background: var(--lic-stripe-active);   }
.license-card.expiring::before { background: var(--lic-stripe-expiring); }
.license-card.expired::before  { background: var(--lic-stripe-expired);  }

/* Header row */
.license-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   8px;
}

.license-title {
    font-family: var(--font-heading);
    font-size:   0.92rem;
    font-weight: 500;
    color:       var(--color-text-primary);
}

.license-version {
    font-size:   0.73rem;
    color:       var(--color-text-muted);
    margin-left: 4px;
    font-weight: 300;
}

/* Summary 3-col grid */
.license-summary {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   4px 10px;
    border-bottom:         1px solid #f0f4f5;
    padding-bottom:        8px;
    margin-bottom:         8px;
}

.license-summary div  { font-size: 0.73rem; color: var(--color-text-body); }
.license-summary strong { color: var(--color-text-primary); font-weight: 600; }


/* ============================================================
   MACHINE ACCORDION
   Shows a one-line collapsed summary; expands to metadata grid.
   ============================================================ */

.machine-disclosure {
    border-bottom:  1px solid #f0f4f5;
    padding-bottom: 9px;
    margin-bottom:  9px;
    cursor:         pointer;
    user-select:    none;
}

.machine-disclosure-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       0.75rem;
    font-family:     var(--font-heading);
    font-weight:     600;
    color:           var(--color-text-primary);
}

/* Collapsed one-liner preview — machine name + last seen */
.machine-preview {
    font-family: var(--font-body);
    font-weight: 300;
    font-size:   0.72rem;
    color:       var(--color-text-muted);
    margin-left: 6px;
}

.machine-disclosure-header > i {
    font-size:  0.68rem;
    color:      var(--color-text-muted);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.machine-disclosure.open .machine-disclosure-header > i {
    transform: rotate(180deg);
}

/* Accordion body */
.machine-disclosure-body {
    max-height: 0;
    overflow:   hidden;
    transition: max-height 0.28s ease;
}

.machine-disclosure.open .machine-disclosure-body {
    max-height: 200px;
}

/* Metadata grid — 2 columns */
.machine-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   3px 16px;
    margin-top:            8px;
}

.machine-row {
    font-size: 0.71rem;
    color:     var(--color-text-body);
    display:   flex;
    gap:       4px;
}

.machine-label {
    color:       var(--color-text-muted);
    font-weight: 300;
    flex-shrink: 0;
}


/* ============================================================
   STATUS BADGES
   Set by code-behind as "status-badge " + license.Status.ToLower()
   ============================================================ */

/* Code-behind sets: lblStatus.Attributes["class"] = "status-badge " + statusText.ToLower()
   So final rendered class is e.g. "status-badge active" — target accordingly.          */
.status-badge {
    padding:       2px 8px;
    border-radius: 3px;
    font-size:     0.63rem;
    font-weight:   600;
    font-family:   var(--font-heading);
    white-space:   nowrap;
}

.status-badge.active            { color: var(--color-success); background: var(--color-success-bg); }
.status-badge.expiringsoon,
.status-badge.expiring,
.status-badge.fingerprintmismatch { color: var(--color-warning); background: var(--color-warning-bg); }
.status-badge.expired,
.status-badge.blocked           { color: var(--color-neutral); background: var(--color-neutral-bg); }
.status-badge.unbound           { color: var(--color-text-muted); background: var(--color-bg-page); }


/* ============================================================
   LICENCE ACTION BUTTONS
   ============================================================ */

.license-actions {
    display:   flex;
    gap:       6px;
    flex-wrap: wrap;
}


/* ============================================================
   PROFILE PAGE — FORM CARDS
   ============================================================ */

.portal-page-header {
    margin-bottom: 18px;
}

.portal-page-header h1 {
    font-family:   var(--font-heading);
    font-size:     1.4rem;
    font-weight:   300;
    color:         var(--color-text-primary);
    margin-bottom: 3px;
}

.portal-page-subtitle {
    font-size: 0.82rem;
    color:     var(--color-text-muted);
    margin:    0;
}

/* Profile form card — 2px stripe, same as auth cards */
.profile-form-card {
    background:    var(--color-bg-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding:       22px;
    margin-bottom: 16px;
    position:      relative;
    overflow:      hidden;
    box-shadow:    var(--shadow-soft);
}

.profile-form-card::before {
    content:    '';
    position:   absolute;
    top: 0; left: 0; right: 0;
    height:     2px;
    background: var(--color-primary);
}

.profile-form-card h2 {
    font-family:   var(--font-heading);
    font-size:     0.95rem;
    font-weight:   500;
    color:         var(--color-text-primary);
    margin-bottom: 18px;
}

/* 2-column form grid */
.profile-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   14px 24px;
    margin-bottom:         16px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .portal-layout {
        grid-template-columns: 1fr;
        gap:                   16px;
    }

    .portal-nav {
        position: static;
        display:  flex;
        flex-wrap: wrap;
    }

    .portal-nav-link {
        flex:         1;
        min-width:    100px;
        border-left:  none;
        border-bottom: 3px solid transparent;
    }

    .portal-nav-link.active {
        border-left-color:   transparent;
        border-bottom-color: var(--color-primary);
    }

    .profile-summary-card {
        flex-direction: column;
        align-items:    flex-start;
        gap:            16px;
    }

    .lic-toolbar    { flex-direction: column; align-items: stretch; }
    .lic-filter     { flex-wrap: wrap; }
    .profile-grid   { grid-template-columns: 1fr; }
    .machine-grid   { grid-template-columns: 1fr; }
    .license-summary { grid-template-columns: 1fr; }
}