/*
 * AccountDetailView — scoped styles for the in-place account detail / create surface.
 * CSS prefix: .acctdv-
 * Extends the shared .dv-* foundation from css/detail-view.css.
 *
 * (c) Adrian Ranta. All rights reserved. Unauthorised use, reproduction and or distribution is strictly prohibited.
 */

/* Tab bar ----------------------------------------------------------------- */
.acctdv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 2px solid #e2e8f0;
    /* .dv-hero removed: pull the tab strip up near the header, keep a small
       breathing gap below the meta strip. White bg so tabs sit on white. */
    margin: 4px 0 24px;
    padding: 0 4px;
    background: #fff;
    border-top-left-radius: var(--radius-sm, 6px);
    border-top-right-radius: var(--radius-sm, 6px);
}

.acctdv-tab {
    background: none;
    border: none;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0;
    transition: color 0.15s, border-color 0.15s;
}
.acctdv-tab:hover {
    color: #334155;
    background: #f1f5f9;
}
.acctdv-tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
    font-weight: 600;
}

/* Compact auto-save hint -- right-aligned on the tab row, small + muted.
   Replaces the removed .dv-hero "Changes save automatically." subtitle
   without reintroducing a vertical title block. */
.acctdv-autosave-hint {
    margin-left: auto;
    align-self: center;
    padding-right: 4px;
    font-size: 12px;
    font-style: italic;
    color: #94a3b8;
    white-space: nowrap;
    user-select: none;
}

/* Tab panels -------------------------------------------------------------- */
.acctdv-panel {
    display: none;
}
.acctdv-panel.active {
    display: block;
}

/* Related-entity list tables (Users/Assets/Inventory/Tickets/Licenses/Diagrams) */
.dv-rel-table {
    width: 100%;
    /* separate (not collapse) so border-radius is not defeated; overflow
       hidden clips the rounded corners over the header/last row. */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    margin: 4px 0 8px;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
}
.dv-rel-table thead th {
    text-align: left;
    padding: 8px 12px;
    font-weight: 600;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}
.dv-rel-table tbody td {
    padding: 8px 12px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}
.dv-rel-table tbody tr:hover td {
    background: #f8fafc;
}
/* Drop the final row's bottom border so it doesn't bisect the rounded
   bottom corners of the wrapper (border-separate keeps cell borders). */
.dv-rel-table tbody tr:last-child td {
    border-bottom: none;
}
.dv-rel-table a.acctdv-rel-link {
    color: #667eea;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}
.dv-rel-table a.acctdv-rel-link:hover {
    text-decoration: underline;
}

/* Read-only badge strip (account_code, health, scores) -------------------- */
.acctdv-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
}
.acctdv-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.acctdv-meta-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}
.acctdv-meta-value {
    font-weight: 600;
    color: #334155;
}

/* Section badges (MSP, status colour, etc.) ------------------------------- */
.acctdv-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #e2e8f0;
    color: #475569;
}
.acctdv-badge-msp  { background: #dbeafe; color: #1d4ed8; }
.acctdv-badge-active { background: #dcfce7; color: #166534; }
.acctdv-badge-inactive { background: #fee2e2; color: #991b1b; }
.acctdv-badge-prospect { background: #fef9c3; color: #854d0e; }
.acctdv-badge-trial    { background: #fef9c3; color: #854d0e; }

/* Contacts display in the in-place surface -------------------------------- */
.acctdv-contact-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 10px;
    font-size: 13px;
}
.acctdv-contact-card h5 {
    margin: 0 0 8px;
    color: #334155;
    font-size: 13px;
}
.acctdv-contact-row {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}
.acctdv-contact-key {
    font-weight: 600;
    color: #64748b;
    min-width: 70px;
}

/* Lazy-load placeholder --------------------------------------------------- */
.acctdv-loading {
    color: #94a3b8;
    font-size: 13px;
    padding: 20px 0;
}