/*
 * App V2 record workspaces.
 *
 * Purpose-built Account View and Asset View presentation using the same
 * operational hierarchy as Index2 and the Ticket workspace. This layer is
 * intentionally CSS-only: existing Yii2 views, data, actions and RBAC remain
 * authoritative.
 */

.app-controller-account.app-action-view .account-view,
.app-controller-asset.app-action-view .asset-view {
    width: min(1580px, 100%);
    margin-inline: auto;
    padding-bottom: 2rem;
}

/* Command / identity header ------------------------------------------------ */
.app-controller-account.app-action-view .account-view > .content-toolbar,
.app-controller-asset.app-action-view .asset-view > .content-toolbar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    align-items: center;
    gap: clamp(1.25rem, 3vw, 3rem);
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid rgba(var(--itx-brand-rgb), .16);
    border-radius: var(--itx-radius-xl);
    background:
        radial-gradient(circle at 92% 8%, rgba(var(--itx-accent-rgb), .15), transparent 17rem),
        radial-gradient(circle at 64% 118%, rgba(var(--itx-brand-rgb), .10), transparent 21rem),
        linear-gradient(135deg, var(--itx-surface), color-mix(in srgb, var(--itx-surface) 92%, var(--itx-brand)));
    padding: clamp(1.35rem, 2.6vw, 2.35rem);
    box-shadow: var(--itx-shadow-card);
}

.app-controller-account.app-action-view .account-view > .content-toolbar::before,
.app-controller-asset.app-action-view .asset-view > .content-toolbar::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(var(--itx-brand-rgb), .18) .55px, transparent .55px);
    background-size: 8px 8px;
    opacity: .11;
    content: "";
}

.app-controller-account.app-action-view .account-view > .content-toolbar > *,
.app-controller-asset.app-action-view .asset-view > .content-toolbar > * {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.app-controller-account.app-action-view .content-toolbar .eyebrow,
.app-controller-asset.app-action-view .content-toolbar .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .55rem;
    color: var(--itx-brand);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.app-controller-account.app-action-view .content-toolbar h2,
.app-controller-asset.app-action-view .content-toolbar h2 {
    margin: 0;
    color: var(--itx-ink);
    font-family: var(--itx-font-display);
    font-size: clamp(1.65rem, 2.6vw, 2.55rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.05;
}

.app-controller-asset.app-action-view .content-toolbar h2 i {
    color: var(--itx-brand);
}

.app-controller-asset.app-action-view .content-toolbar .text-muted.small {
    margin-top: .65rem;
    color: var(--itx-body) !important;
    font-size: .82rem;
}

/* Header KPI chips --------------------------------------------------------- */
.app-controller-account.app-action-view .content-toolbar > div:first-child > .d-flex {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(112px, 1fr));
    max-width: 720px;
    gap: .55rem !important;
    margin-top: 1.15rem !important;
}

.app-controller-account.app-action-view .content-toolbar > div:first-child > .d-flex > .badge {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid var(--itx-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--itx-surface) 90%, transparent) !important;
    color: var(--itx-body) !important;
    padding: .65rem .75rem;
    font-size: .76rem;
    font-weight: 750;
    box-shadow: var(--itx-shadow-xs);
}

/* Action rail -------------------------------------------------------------- */
.app-controller-account.app-action-view .content-toolbar .toolbar-actions,
.app-controller-asset.app-action-view .content-toolbar .toolbar-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: .55rem !important;
    margin: 0;
}

.app-controller-account.app-action-view .content-toolbar .toolbar-actions .btn,
.app-controller-asset.app-action-view .content-toolbar .toolbar-actions .btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: 0 !important;
    border-radius: 10px;
    padding: .55rem .75rem;
    font-size: .73rem;
    font-weight: 750;
    white-space: normal;
    text-align: center;
}

.app-controller-account.app-action-view .content-toolbar .toolbar-actions .btn-primary,
.app-controller-asset.app-action-view .content-toolbar .toolbar-actions .btn-primary {
    box-shadow: 0 10px 24px -18px rgba(var(--itx-brand-rgb), .8);
}

/* Shared workspace surfaces ------------------------------------------------ */
.app-controller-account.app-action-view .account-view .content-card,
.app-controller-asset.app-action-view .asset-view .content-card {
    border: 1px solid var(--itx-border);
    border-radius: var(--itx-radius-lg);
    background: var(--itx-surface);
    box-shadow: var(--itx-shadow-xs);
    padding: 1rem;
}

.app-controller-account.app-action-view .account-view .content-card:hover,
.app-controller-asset.app-action-view .asset-view .content-card:hover {
    border-color: var(--itx-border-strong);
}

.app-controller-account.app-action-view .account-section-header,
.app-controller-asset.app-action-view .asset-view .content-card > .d-flex.justify-content-between {
    gap: 1rem;
}

.app-controller-account.app-action-view .account-section-header h3,
.app-controller-asset.app-action-view .asset-view .content-card h3,
.app-controller-asset.app-action-view .asset-view .content-card .h6 {
    color: var(--itx-ink);
    font-family: var(--itx-font-display);
    font-weight: 750;
    letter-spacing: -.02em;
}

.app-controller-account.app-action-view .content-card .eyebrow,
.app-controller-asset.app-action-view .content-card .text-uppercase.small {
    color: var(--itx-muted) !important;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .09em;
}

.app-controller-account.app-action-view .content-card .table-responsive,
.app-controller-asset.app-action-view .content-card .table-responsive {
    border: 1px solid var(--itx-border);
    border-radius: 12px;
    overflow: auto;
}

.app-controller-account.app-action-view .content-card .table,
.app-controller-asset.app-action-view .content-card .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--itx-surface-soft);
    --bs-table-hover-bg: rgba(var(--itx-brand-rgb), .045);
    margin-bottom: 0;
}

.app-controller-account.app-action-view .content-card .table thead th,
.app-controller-asset.app-action-view .content-card .table thead th {
    border-bottom-color: var(--itx-border);
    background: var(--itx-surface-soft);
    color: var(--itx-muted);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-controller-account.app-action-view .content-card .table td,
.app-controller-asset.app-action-view .content-card .table td {
    border-color: var(--itx-border);
    color: var(--itx-body);
    font-size: .78rem;
    vertical-align: middle;
}

/* Account workspace -------------------------------------------------------- */
.app-controller-account.app-action-view .account-view > .content-toolbar + * {
    margin-top: 0 !important;
}

.app-controller-account.app-action-view .account-related-dossier-toolbar {
    position: sticky;
    top: .75rem;
    z-index: 6;
    border: 1px solid var(--itx-border);
    border-radius: var(--itx-radius);
    background: color-mix(in srgb, var(--itx-surface) 95%, transparent);
    padding: .8rem 1rem;
    box-shadow: 0 14px 34px -30px rgba(15, 23, 42, .48);
}

.app-controller-account.app-action-view .account-related-dossier-toolbar .btn-group {
    flex-shrink: 0;
}

.app-controller-account.app-action-view .account-related-dossier-toolbar .btn {
    min-height: 36px;
    border-radius: 9px;
    font-size: .7rem;
    font-weight: 750;
}

.app-controller-account.app-action-view .related-view[data-view="tab"] > .nav,
.app-controller-account.app-action-view .content-card .nav-pills {
    position: sticky;
    top: 5.35rem;
    z-index: 5;
    gap: .35rem !important;
    margin: 0 -1rem 1rem;
    border-top: 1px solid var(--itx-border);
    border-bottom: 1px solid var(--itx-border);
    background: var(--itx-surface);
    padding: .65rem 1rem;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: thin;
}

.app-controller-account.app-action-view .content-card .nav-pills .nav-link {
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--itx-muted);
    padding: .42rem .7rem;
    font-size: .71rem;
    font-weight: 750;
    white-space: nowrap;
}

.app-controller-account.app-action-view .content-card .nav-pills .nav-link.active {
    border-color: rgba(var(--itx-brand-rgb), .18);
    background: rgba(var(--itx-brand-rgb), .09);
    color: var(--itx-brand);
}

.app-controller-account.app-action-view .account-view .detail-view th,
.app-controller-account.app-action-view .account-view .detail-view td {
    padding: .75rem .9rem;
}

.app-controller-account.app-action-view .account-view .detail-view th {
    width: min(32%, 250px);
    background: var(--itx-surface-soft);
    color: var(--itx-muted);
    font-size: .7rem;
    font-weight: 750;
}

.app-controller-account.app-action-view .account-view .detail-view td {
    color: var(--itx-ink);
    font-size: .8rem;
    word-break: break-word;
}

/* Asset workspace ---------------------------------------------------------- */
.app-controller-asset.app-action-view .asset-view > .content-toolbar + .content-card {
    position: relative;
    z-index: 3;
    width: calc(100% - clamp(1rem, 3vw, 2.5rem));
    margin: -1.65rem auto 1rem !important;
    border-color: rgba(var(--itx-brand-rgb), .2);
    box-shadow: var(--itx-shadow-card);
}

.app-controller-asset.app-action-view .asset-view > .content-toolbar + .content-card .avatar {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(var(--itx-brand-rgb), .18);
    border-radius: 13px;
    background: rgba(var(--itx-brand-rgb), .09) !important;
    color: var(--itx-brand) !important;
    font-size: 1.15rem;
}

.app-controller-asset.app-action-view .asset-view > .content-toolbar + .content-card .h5 {
    color: var(--itx-ink);
    font-family: var(--itx-font-display);
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -.02em;
}

.app-controller-asset.app-action-view .asset-view > .content-toolbar + .content-card .badge {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--itx-border);
    border-radius: 999px;
    background: var(--itx-surface-soft) !important;
    color: var(--itx-body) !important;
    padding: .3rem .55rem;
    font-size: .68rem;
    font-weight: 700;
}

.app-controller-asset.app-action-view .asset-view .content-card .col-xl-8 .border.rounded {
    border-color: var(--itx-border) !important;
    border-radius: 12px !important;
    background: var(--itx-surface-soft);
    box-shadow: none;
}

.app-controller-asset.app-action-view .asset-view .content-card .col-xl-8 .border.rounded .text-muted.small {
    color: var(--itx-muted) !important;
    font-size: .67rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.app-controller-asset.app-action-view .asset-view .content-card .col-xl-8 .border.rounded .h4 {
    margin-top: .25rem;
    color: var(--itx-ink);
    font-family: var(--itx-font-display);
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -.04em;
}

.app-controller-asset.app-action-view .asset-view > .nav-tabs {
    position: sticky;
    top: .75rem;
    z-index: 7;
    display: flex;
    gap: .3rem;
    margin: 1rem 0 !important;
    border: 1px solid var(--itx-border);
    border-radius: var(--itx-radius);
    background: color-mix(in srgb, var(--itx-surface) 96%, transparent);
    padding: .45rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    box-shadow: 0 14px 34px -30px rgba(15, 23, 42, .5);
    scrollbar-width: thin;
}

.app-controller-asset.app-action-view .asset-view > .nav-tabs .nav-item {
    flex: 0 0 auto;
}

.app-controller-asset.app-action-view .asset-view > .nav-tabs .nav-link {
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--itx-muted);
    padding: .45rem .72rem;
    font-size: .7rem;
    font-weight: 750;
    white-space: nowrap;
}

.app-controller-asset.app-action-view .asset-view > .nav-tabs .nav-link:hover {
    border-color: var(--itx-border);
    color: var(--itx-ink);
}

.app-controller-asset.app-action-view .asset-view > .nav-tabs .nav-link.active {
    border-color: rgba(var(--itx-brand-rgb), .18);
    background: rgba(var(--itx-brand-rgb), .09);
    color: var(--itx-brand);
}

.app-controller-asset.app-action-view .asset-view > .content-card .detail-view th,
.app-controller-asset.app-action-view .asset-view > .content-card .detail-view td {
    padding: .72rem .9rem;
}

.app-controller-asset.app-action-view .asset-view > .content-card .detail-view th {
    width: min(32%, 250px);
    background: var(--itx-surface-soft);
    color: var(--itx-muted);
    font-size: .7rem;
    font-weight: 750;
}

.app-controller-asset.app-action-view .asset-view > .content-card .detail-view td {
    color: var(--itx-ink);
    font-size: .8rem;
    word-break: break-word;
}

.app-controller-asset.app-action-view #asset-tab-pages > .content-card {
    margin-top: .85rem;
}

/* Buttons and secondary utility surfaces ---------------------------------- */
.app-controller-account.app-action-view .account-view .btn-sm,
.app-controller-asset.app-action-view .asset-view .btn-sm {
    min-height: 34px;
    border-radius: 8px;
    font-size: .69rem;
    font-weight: 700;
}

.app-controller-account.app-action-view #account-data-insight,
.app-controller-asset.app-action-view #asset-data-insight {
    border-style: dashed;
    background: var(--itx-surface-soft);
    color: var(--itx-muted);
}

/* Dark theme --------------------------------------------------------------- */
html[data-bs-theme="dark"] .app-controller-account.app-action-view .account-view > .content-toolbar,
html[data-bs-theme="dark"] .app-controller-asset.app-action-view .asset-view > .content-toolbar {
    background:
        radial-gradient(circle at 92% 8%, rgba(var(--itx-accent-rgb), .12), transparent 17rem),
        radial-gradient(circle at 64% 118%, rgba(var(--itx-brand-rgb), .11), transparent 21rem),
        linear-gradient(135deg, var(--itx-surface), color-mix(in srgb, var(--itx-surface) 94%, var(--itx-brand)));
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .app-controller-account.app-action-view .account-view > .content-toolbar,
    .app-controller-asset.app-action-view .asset-view > .content-toolbar {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .app-controller-account.app-action-view .content-toolbar .toolbar-actions,
    .app-controller-asset.app-action-view .content-toolbar .toolbar-actions {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .app-controller-account.app-action-view .account-related-dossier-toolbar,
    .app-controller-asset.app-action-view .asset-view > .nav-tabs {
        top: .5rem;
    }

    .app-controller-account.app-action-view .related-view[data-view="tab"] > .nav,
    .app-controller-account.app-action-view .content-card .nav-pills {
        top: 4.7rem;
    }
}

@media (max-width: 767.98px) {
    .app-controller-account.app-action-view .account-view,
    .app-controller-asset.app-action-view .asset-view {
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    }

    .app-controller-account.app-action-view .account-view > .content-toolbar,
    .app-controller-asset.app-action-view .asset-view > .content-toolbar {
        border-radius: var(--itx-radius-lg);
        padding: 1rem;
    }

    .app-controller-account.app-action-view .content-toolbar h2,
    .app-controller-asset.app-action-view .content-toolbar h2 {
        font-size: 1.55rem;
    }

    .app-controller-account.app-action-view .content-toolbar > div:first-child > .d-flex {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-controller-account.app-action-view .content-toolbar .toolbar-actions,
    .app-controller-asset.app-action-view .content-toolbar .toolbar-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-controller-account.app-action-view .content-toolbar .toolbar-actions .btn,
    .app-controller-asset.app-action-view .content-toolbar .toolbar-actions .btn {
        min-height: 44px;
        padding-inline: .55rem;
        font-size: .69rem;
    }

    .app-controller-account.app-action-view .account-view .content-card,
    .app-controller-asset.app-action-view .asset-view .content-card {
        border-radius: var(--itx-radius);
        padding: .85rem;
    }

    .app-controller-asset.app-action-view .asset-view > .content-toolbar + .content-card {
        width: calc(100% - .75rem);
        margin-top: -.65rem !important;
    }

    .app-controller-account.app-action-view .account-related-dossier-toolbar {
        position: static;
        align-items: stretch !important;
        flex-direction: column;
    }

    .app-controller-account.app-action-view .account-related-dossier-toolbar .btn-group {
        width: 100%;
    }

    .app-controller-account.app-action-view .account-related-dossier-toolbar .btn {
        flex: 1 1 0;
    }

    .app-controller-account.app-action-view .related-view[data-view="tab"] > .nav,
    .app-controller-account.app-action-view .content-card .nav-pills,
    .app-controller-asset.app-action-view .asset-view > .nav-tabs {
        position: static;
        margin-inline: -.85rem;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .app-controller-account.app-action-view .account-view .detail-view th,
    .app-controller-account.app-action-view .account-view .detail-view td,
    .app-controller-asset.app-action-view .asset-view > .content-card .detail-view th,
    .app-controller-asset.app-action-view .asset-view > .content-card .detail-view td {
        display: block;
        width: 100%;
    }

    .app-controller-account.app-action-view .account-view .detail-view th,
    .app-controller-asset.app-action-view .asset-view > .content-card .detail-view th {
        border-bottom: 0;
        padding-bottom: .2rem;
    }

    .app-controller-account.app-action-view .account-view .detail-view td,
    .app-controller-asset.app-action-view .asset-view > .content-card .detail-view td {
        padding-top: .2rem;
    }
}

@media (max-width: 479.98px) {
    .app-controller-account.app-action-view .content-toolbar .toolbar-actions,
    .app-controller-asset.app-action-view .content-toolbar .toolbar-actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-controller-account.app-action-view .account-view *,
    .app-controller-asset.app-action-view .asset-view * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}