/* ============================================================
   aziCards.css
   Every card component used across the site, in one file.

   LOAD ORDER: after aziBase.css, before all page files.

   CARD INVENTORY
   ─────────────────────────────────────────────────────────
   1.  Base .card system        — generic reusable primitive
   2.  Pillar cards (.e-card)   — Default.aspx Why Azimuth
   3.  Mini cards (.smini)      — Default.aspx services preview
   4.  Service cards            — Services.aspx
   5.  Enquiry bands            — Services.aspx + Products.aspx
   6.  Software catalogue rows  — Products.aspx
   7.  Hardware feature cards   — Products.aspx
   8.  Product feature cards    — product sub-pages
   9.  Side panel cards         — product sub-pages
   10. Profile summary card     — portal
   11. License cards            — portal
   12. Profile form cards       — portal

   COLOUR CONTRACT
   ─────────────────────────────────────────────────────────
   All card hover borders use --color-border-hover (light teal).
   All card accents use --color-primary (teal) on public pages.
   Portal status stripes use dedicated tokens (lic-stripe-*).
   No raw hex values — all colours via tokens from aziBase.css.
   ============================================================ */


/* ============================================================
   1. BASE CARD SYSTEM
   Generic primitive used directly in portal and auth pages.
   Page-specific cards (2–12) are self-contained below.
   ============================================================ */

.card {
    background:     var(--card-bg);
    border:         1px solid var(--card-border);
    border-radius:  var(--card-radius);
    box-shadow:     var(--card-shadow);
    display:        flex;
    flex-direction: column;
    transition:     border-color 0.2s ease, box-shadow 0.2s ease,
                    transform    0.2s ease;
}

/* Colour themes */
.card-primary {
    --card-accent: var(--card-accent-primary);
    --card-hover:  var(--card-hover-primary);
    --icon-bg:     var(--card-icon-bg-primary);
    --icon-color:  var(--card-icon-primary);
}

.card-hw {
    --card-accent: var(--card-accent-hw);
    --card-hover:  var(--card-hover-hw);
    --icon-bg:     var(--card-icon-bg-hw);
    --icon-color:  var(--card-icon-hw);
}

/* Accent stripe variants */
.card.accent-top {
    position: relative;
    overflow: hidden;
}

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

.card.accent-left {
    border-left: 2px solid var(--card-accent, var(--color-primary));
}

.card.accent-bottom {
    position: relative;
    overflow: hidden;
}

.card.accent-bottom::after {
    content:          '';
    position:         absolute;
    bottom: 0; left: 0; right: 0;
    height:           2px;
    background-color: var(--card-accent, var(--color-primary));
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform 0.3s ease;
}

/* Hover variants */
.card.hover-lift:hover {
    transform:    translateY(-3px);
    border-color: var(--color-border-hover);
    box-shadow:   var(--card-shadow-hover);
}

.card.hover-border:hover {
    border-color: var(--color-border-hover);
    box-shadow:   var(--card-shadow-hover);
}

.card.hover-border:hover.accent-bottom::after {
    transform: scaleX(1);
}

/* Generic card icon box */
.card-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    border-radius:   6px;
    background:      var(--icon-bg,    var(--color-primary-bg));
    color:           var(--icon-color, var(--color-primary));
    font-size:       0.88rem;
    margin-bottom:   0.85rem;
    flex-shrink:     0;
}


/* ============================================================
   2. PILLAR CARDS  (.e-card)
   Three-column "Why Azimuth" cards on Default.aspx.
   Accent stripe on top, animates in from left on hover.
   ============================================================ */

.e-card {
    background:    var(--color-bg-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding:       26px 22px;
    position:      relative;
    overflow:      hidden;
    transition:    border-color 0.2s ease, box-shadow 0.2s ease;
}

.e-card::before {
    content:          '';
    position:         absolute;
    top: 0; left: 0; right: 0;
    height:           2px;
    background:       var(--color-primary);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform 0.3s ease;
}

.e-card:hover::before { transform:     scaleX(1); }
.e-card:hover         { border-color:  var(--color-border-hover);
                        box-shadow:    var(--shadow-medium); }

/* Decorative background ordinal number */
.e-num {
    font-family:    var(--font-heading);
    font-size:      2.8rem;
    font-weight:    200;
    color:          #ECF2F5;
    position:       absolute;
    top:            12px;
    right:          16px;
    line-height:    1;
    user-select:    none;
    pointer-events: none;
}

/* Icon box */
.e-ico {
    width:           30px;
    height:          30px;
    background:      var(--color-primary-bg);
    border-radius:   6px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-primary);
    font-size:       0.82rem;
    margin-bottom:   12px;
}

.e-card h3 {
    font-family:   var(--font-heading);
    font-size:     0.92rem;
    font-weight:   500;
    color:         var(--color-text-primary);
    margin-bottom: 0.6rem;
}

.e-card p {
    font-size:   0.83rem;
    color:       var(--color-text-body);
    line-height: 1.68;
    margin:      0;
}


/* ============================================================
   3. MINI CARDS  (.smini)
   Services preview 2×2 grid on Default.aspx.
   Simple border-only hover — no stripe, no shadow.
   ============================================================ */

.smini {
    background:    var(--color-bg-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding:       20px 22px;
    display:       flex;
    gap:           12px;
    align-items:   flex-start;
    transition:    border-color 0.2s ease;
}

.smini:hover { border-color: var(--color-primary); }

.smini-dot {
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    var(--color-primary);
    margin-top:    8px;
    flex-shrink:   0;
}

.smini h4 {
    font-family:   var(--font-heading);
    font-size:     0.86rem;
    font-weight:   500;
    color:         var(--color-text-primary);
    margin-bottom: 4px;
}

.smini p {
    font-size:   0.80rem;
    color:       var(--color-text-body);
    line-height: 1.58;
    margin:      0;
}


/* ============================================================
   4. SERVICE CARDS  (.service-card)
   Used on Services.aspx.
   Accent stripe on BOTTOM — intentionally different from
   pillar cards (top) to suit the text-heavy, taller layout.
   Animates in from left on hover.
   ============================================================ */

.service-card {
    background:     var(--color-bg-surface);
    border:         1px solid var(--color-border);
    border-radius:  var(--card-radius);
    padding:        20px 22px;
    display:        flex;
    flex-direction: column;
    position:       relative;
    overflow:       hidden;
    transition:     border-color 0.2s ease, box-shadow 0.2s ease;
}

.service-card::after {
    content:          '';
    position:         absolute;
    bottom: 0; left: 0; right: 0;
    height:           2px;
    background:       var(--color-primary);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform 0.3s ease;
}

.service-card.card-primary:hover {
    border-color: var(--color-border-hover);
    box-shadow:   var(--shadow-soft);
}

.service-card.card-primary:hover::after { transform: scaleX(1); }

/* Larger 2-col dev cards get a stronger shadow */
.services-grid-2 .service-card.card-primary:hover {
    box-shadow: var(--shadow-medium);
}

/* Icon box */
.service-card-icon {
    width:           30px;
    height:          30px;
    border-radius:   5px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.82rem;
    margin-bottom:   11px;
    background:      var(--color-primary-bg);
    color:           var(--color-primary);
}

.service-card h3 {
    font-family:   var(--font-heading);
    font-size:     0.88rem;
    font-weight:   500;
    color:         var(--color-text-primary);
    margin-bottom: 0.45rem;
}

.service-card p {
    font-size:   0.79rem;
    color:       var(--color-text-body);
    line-height: 1.68;
    flex:        1;
    font-weight: 300;
    margin:      0;
}

.service-card-list {
    list-style:  none;
    padding:     0;
    margin:      10px 0 0;
}

.service-card-list li {
    font-size:   0.72rem;
    color:       var(--color-text-muted);
    display:     flex;
    align-items: center;
    gap:         6px;
    padding:     2px 0;
}

.service-card-list li::before {
    content:       '';
    width:         3px;
    height:        3px;
    border-radius: 50%;
    background:    var(--color-primary);
    flex-shrink:   0;
}

/* Development tag — full width banner above card title */
.service-dev-tag {
    display:        flex;
    align-items:    center;
    gap:            5px;
    font-family:    var(--font-heading);
    font-size:      0.60rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    border-radius:  3px;
    padding:        3px 8px;
    margin-bottom:  10px;
    font-weight:    600;
    color:          var(--color-primary-h);
    background:     var(--color-primary-bg);
}

.service-dev-tag i { font-size: 0.62rem; }


/* ============================================================
   5. ENQUIRY BANDS  (.enquiry-band)
   Full-width tinted call-to-action bands.
   Used on Services.aspx and Products.aspx.
   ============================================================ */

.enquiry-band {
    border-radius:   var(--card-radius);
    padding:         18px 22px;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             16px;
    border:          1px solid transparent;
}

.enquiry-band.primary {
    background:   var(--color-primary-bg);
    border-color: rgba(2, 140, 197, 0.20);
}

.enquiry-band h4 {
    font-family:   var(--font-heading);
    font-size:     0.83rem;
    font-weight:   500;
    color:         var(--color-primary-h);
    margin-bottom: 2px;
}

.enquiry-band p {
    font-size:   0.75rem;
    font-weight: 300;
    color:       var(--color-text-body);
    margin:      0;
}

@media (max-width: 768px) {
    .enquiry-band {
        flex-direction: column;
        align-items:    flex-start;
    }
}



/* ============================================================
   6. PRODUCT CARDS  (.product-card)
   Unified card base used by BOTH software rows and hardware
   cards on Products.aspx.
   Same border, radius, hover shadow, and 2px bottom accent
   stripe as every other card on the site.
   Layout distinction comes from the inner grid only —
   .sw-card for software rows, .hw-card for hardware cards.
   ============================================================ */

/* Shared card shell */
.product-card {
    background:    var(--color-bg-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--card-radius);
    position:      relative;
    overflow:      hidden;
    transition:    border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-card::after {
    content:          '';
    position:         absolute;
    bottom: 0; left: 0; right: 0;
    height:           2px;
    background:       var(--color-primary);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform 0.3s ease;
}

.product-card:hover {
    border-color: var(--color-border-hover);
    box-shadow:   var(--shadow-soft);    /* matches service-card hover */
}

.product-card:hover::after { transform: scaleX(1); }


/* ── 6a. SOFTWARE CARD LAYOUT  (.sw-card) ───────────────────
   Two-column grid:
   Left  — icon (30px, mb 11px) → title → description
   Right — Learn More button (top) → Download link (below)
   Actions column is top-aligned and flush right.            */

.sw-catalogue {
    display:        flex;
    flex-direction: column;
    gap:            13px;
    margin-bottom:  13px;
}

.sw-card {
    padding:                20px 22px;
    display:                grid;
    grid-template-columns:  1fr auto;
    grid-template-areas:
        "ico  ."
        "info acts";
    column-gap:             20px;
}

/* Icon — top-left, same 30px as service-card-icon */
.sw-ico {
    grid-area:       ico;
    align-self:      start;
    width:           30px;
    height:          30px;
    background:      var(--color-primary-bg);
    border-radius:   5px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-primary);
    font-size:       0.82rem;
    flex-shrink:     0;
    margin-bottom:   11px;          /* space between icon and title row */
}

/* Title + description — left column, below icon */
.sw-info {
    grid-area:   info;
    align-self:  start;
}

.sw-info h4 {
    font-family:   var(--font-heading);
    font-size:     0.88rem;         /* matches service-card h3 */
    font-weight:   500;
    color:         var(--color-text-primary);
    margin-bottom: 0.45rem;
}

.sw-info p {
    font-size:   0.79rem;           /* matches service-card p */
    color:       var(--color-text-body);
    line-height: 1.68;
    font-weight: 300;
    margin:      0;
}

/* Actions — right column, button top-aligned, download below */
.sw-actions {
    grid-area:      acts;
    align-self:     start;
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            6px;
}

/* Download link */
.sw-dl {
    font-family:     var(--font-heading);
    font-size:       0.63rem;
    font-weight:     500;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    color:           var(--color-text-muted);
    text-decoration: none;
    white-space:     nowrap;
    transition:      color 0.2s ease;
}

.sw-dl:hover { color: var(--color-primary); }


/* ── 6b. HARDWARE CARD LAYOUT  (.hw-card) ───────────────────
   Same 2-column grid as .sw-card:
   Left  — icon (own row) → title + desc + bullets
   Right — Learn More button aligned with title row
   Icon row has empty right cell so button starts at title. */

.hw-catalogue {
    display:        flex;
    flex-direction: column;
    gap:            13px;
    margin-bottom:  13px;
}

.hw-card {
    padding:                20px 22px;
    display:                grid;
    grid-template-columns:  1fr auto;
    grid-template-areas:
        "ico  ."
        "main acts";
    column-gap:             20px;
}

/* Icon box — identical to .sw-ico */
.hw-ico {
    grid-area:       ico;
    align-self:      start;
    width:           30px;
    height:          30px;
    background:      var(--color-primary-bg);
    border-radius:   5px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-primary);
    font-size:       0.82rem;
    flex-shrink:     0;
    margin-bottom:   11px;
}

/* Main content — title, description, bullets */
.hw-main {
    grid-area:  main;
    align-self: start;
}

.hw-main h3 {
    font-family:   var(--font-heading);
    font-size:     0.88rem;
    font-weight:   500;
    color:         var(--color-text-primary);
    margin-bottom: 0.45rem;
}

/* Description paragraph */
.hw-sub {
    font-size:     0.79rem;
    color:         var(--color-text-body);
    line-height:   1.68;
    font-weight:   300;
    margin-bottom: 0.75rem;
}

/* Bullet list — same dot as .service-card-list */
.hw-list {
    list-style: none;
    padding:    0;
    margin:     0;
}

.hw-list li {
    font-size:   0.72rem;
    color:       var(--color-text-muted);
    display:     flex;
    align-items: center;
    gap:         6px;
    padding:     2px 0;
    font-weight: 400;
}

.hw-list li::before {
    content:       '';
    width:         3px;
    height:        3px;
    border-radius: 50%;
    background:    var(--color-primary);
    flex-shrink:   0;
}

/* Button — right column, aligned with title row, top-pinned */
.hw-aside {
    grid-area:  acts;
    align-self: start;
}


/* ============================================================
   8. PRODUCT FEATURE CARDS  (.product-feature-card)
   "Key Features" and "Technical Specifications" cards on
   individual product sub-pages. Left accent stripe.
   ============================================================ */

.product-feature-card {
    background:    var(--color-bg-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding:       20px;
    margin-bottom: 18px;
    position:      relative;
    overflow:      hidden;
}

.product-feature-card::before {
    content:    '';
    position:   absolute;
    top: 0; left: 0; bottom: 0;
    width:      2px;
    background: var(--color-primary);
}

.product-feature-card h3 {
    font-family:     var(--font-heading);
    font-size:       0.9rem;
    font-weight:     500;
    color:           var(--color-text-primary);
    margin-bottom:   12px;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}

.feature-card-icon {
    width:           24px;
    height:          24px;
    border-radius:   4px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.7rem;
    flex-shrink:     0;
    background:      var(--color-primary-bg);
    color:           var(--color-primary);
}

.product-feature-card ul {
    list-style: none;
    padding:    0;
    margin:     0;
}

.product-feature-card li {
    font-size:   0.82rem;
    color:       var(--color-text-body);
    padding:     4px 0;
    border-top:  1px solid #f5f7f8;
    display:     flex;
    align-items: center;
    gap:         8px;
    line-height: 1.5;
}

.product-feature-card li:first-child { border-top: none; }

.product-feature-card li::before {
    content:     '•';
    color:       var(--color-primary);
    font-size:   0.95rem;
    flex-shrink: 0;
}


/* ============================================================
   9. SIDE PANEL CARDS  (.side-panel-card)
   Sticky aside panel on product sub-pages.
   Tinted header strip, spec rows, CTA buttons.
   ============================================================ */

.side-panel-card {
    background:    var(--color-bg-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--card-radius);
    overflow:      hidden;
    margin-bottom: 13px;
}

.side-panel-header {
    padding:       13px 16px;
    display:       flex;
    align-items:   center;
    gap:           9px;
    border-bottom: 1px solid transparent;
    background:    var(--color-primary-bg);
    border-color:  rgba(2, 140, 197, 0.18);
}

.side-panel-header h3 {
    font-family: var(--font-heading);
    font-size:   0.85rem;
    font-weight: 500;
    margin:      0;
    color:       var(--color-primary-h);
}

.side-panel-header i {
    font-size: 0.84rem;
    color:     var(--color-primary-h);
}

.side-panel-body { padding: 12px 16px; }

.side-panel-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         5px 0;
    border-bottom:   1px solid #f0f4f5;
    font-size:       0.76rem;
}

.side-panel-row:last-child { border-bottom: none; }

.side-panel-label {
    color:       var(--color-text-muted);
    font-weight: 300;
}

.side-panel-value {
    font-family: var(--font-heading);
    font-size:   0.76rem;
    font-weight: 500;
    color:       var(--color-text-primary);
    text-align:  right;
}

.side-panel-value.accent { color: var(--color-primary-h); }

.side-panel-cta {
    padding:        12px 16px;
    border-top:     1px solid var(--color-border);
    display:        flex;
    flex-direction: column;
    gap:            7px;
}

.side-panel-cta .btn { text-align: center; }

.side-panel-body p {
    font-size:   0.76rem;
    color:       var(--color-text-body);
    line-height: 1.62;
    font-weight: 300;
    margin:      0;
}

.side-panel-body a { color: var(--color-primary); }


/* ============================================================
   10. PROFILE SUMMARY CARD  (.profile-summary-card)
   Top-of-portal welcome card with avatar, name, and stats.
   ============================================================ */

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

/* Teal top stripe */
.profile-summary-card::before {
    content:    '';
    position:   absolute;
    top: 0; left: 0; right: 0;
    height:     2px;
    background: var(--portal-summary-accent);
}

@media (max-width: 768px) {
    .profile-summary-card {
        flex-direction: column;
        align-items:    flex-start;
        gap:            16px;
    }
}


/* ============================================================
   11. LICENSE CARDS  (.license-card)
   Portal license list — status stripe, summary grid,
   machine row, collapsible disclosure, action buttons.
   ============================================================ */

.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);
}

/* Status stripe — colour driven by state class */
.license-card::before {
    content:    '';
    position:   absolute;
    top: 0; left: 0; right: 0;
    height:     3px;          /* intentionally 3px — status must be clearly visible */
}

.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);  }

.license-card-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.72rem;
    color:       var(--color-text-muted);
    font-weight: 300;
    margin-left: 4px;
}

.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; }

.license-machine-row {
    font-size:     0.73rem;
    color:         var(--color-text-muted);
    margin-bottom: 9px;
    display:       flex;
    align-items:   center;
    gap:           6px;
}

.license-machine-row i {
    color:     var(--color-primary);
    font-size: 0.72rem;
}

/* Collapsible machine detail */
.machine-disclosure {
    border-bottom:  1px solid #f0f4f5;
    padding-bottom: 9px;
    margin-bottom:  9px;
    cursor:         pointer;
}

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

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

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

.machine-disclosure-body {
    max-height: 0;
    overflow:   hidden;
    transition: max-height 0.25s ease;
    margin-top: 0;
}

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

.machine-disclosure-body p {
    margin:    2px 0;
    font-size: 0.8rem;
    color:     var(--color-text-muted);
}

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

@media (max-width: 480px) {
    .license-summary    { grid-template-columns: 1fr; }
    .license-actions .btn { flex: 1; min-width: 80px; }
}


/* ============================================================
   12. PROFILE FORM CARDS  (.profile-form-card)
   Card wrapper for profile edit forms in the portal.
   ============================================================ */

.profile-form-card {
    background:    var(--color-bg-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding:       22px;
    margin-bottom: 18px;
    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:     1rem;
    font-weight:   500;
    color:         var(--color-text-primary);
    margin-bottom: 18px;
}