/*
  TrapWatch's thin brand layer (TRAP-62/AC-5.1). Shared structural styling (page hero, cards,
  filter bar, states, MultiSelectFilter, tables) now ships in the Starruk.Platform.Blazor.*
  packages as s-* classes — see _content/Starruk.Platform.Blazor.DesignSystem/starruk-components.css
  and _content/Starruk.Platform.Blazor.Components/starruk-multiselect-filter.css, both linked in
  App.razor. This file only covers page-authored markup that isn't rendered through a shared
  component (kv-rows, compact list rows, the customer identity card, form-section labels), kept
  under the historical tw-* class names so pages don't need to be rewritten. Every value reads
  from the registered --s-* design tokens — no hardcoded brand hex.
*/

/* Detail/summary cards authored directly in page markup (outside EntityDetailLayout). */
.tw-d-card {
    background: var(--s-surface, #fff);
    border-radius: var(--s-r-card, 12px);
    border: 1px solid var(--s-line, rgba(0, 0, 0, 0.08));
    box-shadow: var(--s-shadow-card, var(--s-shadow-1));
    position: relative;
    overflow: hidden;
}

.tw-d-card.padded {
    padding: 18px 20px;
}

.tw-d-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
}

.tw-d-card-head .title {
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    color: var(--s-ink-900);
}

.tw-d-card-head .meta {
    font-size: 0.78rem;
    color: var(--s-muted);
}

.tw-d-card-head .link {
    font-size: 0.78rem;
    color: var(--s-secondary);
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
}

/* MudDataGrid/table wrapped in a card (Alerts/Usage/Billing/DeviceHealth). */
.tw-grid-card {
    padding: 0;
    overflow: hidden;
}

.tw-grid-card .mud-table-container {
    background: transparent;
}

.tw-grid-card .mud-table-cell {
    border-bottom-color: var(--s-line, rgba(0, 0, 0, 0.08));
    font-size: 0.86rem;
}

.tw-grid-card .mud-table-head .mud-table-cell {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    color: var(--s-muted);
    font-weight: 600;
    background: var(--s-fill-faint);
}

.tw-grid-card .mud-table-row:hover {
    background: color-mix(in srgb, var(--s-secondary) 6%, transparent) !important;
}

/* Filter bar growth utility (children of the shared FilterBar component). */
.tw-filter-grow {
    flex: 1 1 240px;
    min-width: 220px;
}

/* Key/value rows (detail sidebars). */
.tw-kv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--s-line, rgba(0, 0, 0, 0.08));
    font-size: 0.86rem;
}

.tw-kv-row:last-child {
    border-bottom: 0;
}

.tw-kv-row .k {
    color: var(--s-muted);
    font-weight: 500;
}

.tw-kv-row .v {
    color: var(--s-ink-900);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

.tw-kv-row .v a {
    color: var(--s-secondary);
    text-decoration: none;
}

.tw-kv-row .v a:hover {
    text-decoration: underline;
}

/* Stat grid (customer identity card + compact detail summaries). */
.tw-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.tw-stat-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tw-stat-block .v {
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1;
    color: var(--s-ink-900);
}

.tw-stat-block .l {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--s-muted);
    font-weight: 600;
}

.tw-stat-block .s {
    font-size: 0.78rem;
    color: var(--s-muted);
    margin-top: 2px;
}

/* Compact list rows (recent-activity style widgets inside a card). */
.tw-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid var(--s-line, rgba(0, 0, 0, 0.08));
    cursor: pointer;
    transition: background 0.12s;
    text-decoration: none;
    color: inherit;
}

.tw-list-item:hover {
    background: color-mix(in srgb, var(--s-secondary) 6%, transparent);
}

.tw-list-item:first-child {
    border-top: 0;
}

.tw-li-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--s-fill);
    color: var(--s-ink-900);
    font-weight: 600;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.tw-li-main {
    flex: 1;
    min-width: 0;
}

.tw-li-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--s-ink-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tw-li-sub {
    font-size: 0.78rem;
    color: var(--s-muted);
    margin-top: 2px;
}

.tw-li-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.tw-li-meta .time {
    font-size: 0.78rem;
    color: var(--s-muted);
    font-weight: 500;
}

.tw-li-meta .time.danger { color: var(--s-error); }
.tw-li-meta .time.warn { color: var(--s-tertiary); }
.tw-li-meta .time.info { color: var(--s-info); }

/* Form section labels (edit pages). */
.tw-form-section-label {
    display: block;
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--s-line-strong, rgba(0, 0, 0, 0.14));
    margin-bottom: 2px;
}

/* Customer identity card — brand-gradient sidebar header, always renders white-on-gradient
   regardless of theme (same treatment as the shared PageHero). */
.tw-identity-card {
    background: linear-gradient(145deg, var(--s-brand-primary) 0%, var(--s-brand-primary-deep) 100%);
    color: white;
    border-radius: var(--s-r-card, 12px);
    padding: 20px;
    box-shadow: var(--s-shadow-card, var(--s-shadow-1));
    margin-bottom: 12px;
}

.tw-avatar-initials {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 1.3rem;
    color: white;
    flex-shrink: 0;
    margin-bottom: 12px;
}

.tw-identity-name {
    font-family: var(--s-font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: white;
    margin-bottom: 4px;
    line-height: 1.25;
    word-break: break-word;
}

.tw-identity-sub {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 14px;
}

.tw-identity-card .tw-stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 14px;
    margin-top: 6px;
    margin-bottom: 0;
}

.tw-identity-card .tw-stat-block .v { color: white; }
.tw-identity-card .tw-stat-block .l { color: rgba(255, 255, 255, 0.65); }
.tw-identity-card .tw-stat-block .s { color: rgba(255, 255, 255, 0.55); }

/* Detail-panel quick actions inside the identity card. */
.tw-identity-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* Detail section card (sidebar detail/kv groupings). */
.tw-detail-section {
    margin-bottom: 12px;
}

.tw-detail-section:last-child {
    margin-bottom: 0;
}

.tw-detail-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--s-muted);
    padding: 0 2px 8px;
}

.tw-detail-tabs .mud-tab {
    font-weight: 600;
    font-size: 0.86rem;
}