/*
    Admin > App Releases (adr-*): the two platform heroes (live build, minimum build, waiting builds), the filter chips, the
    releases table with its row actions, the "what would a build see" preview, and the release editor sheet. Built on the
    Users page's tokens (--adu-*, light and dark via data-bs-theme on <html>) and its buttons, pills, fields and sheet.
    Platform hues: iOS uses the brand violet, Android the Investments green. Nothing animated carries a drop shadow.
*/

:root {
    --adr-ios: var(--adu-violet);
    --adr-ios-soft: var(--adu-violet-soft);
    --adr-android: #16A34A;
    --adr-android-soft: #DCFCE7;
    --adr-live-row: rgba(22, 163, 74, .05);
}

[data-bs-theme="dark"] {
    --adr-android: #34D399;
    --adr-android-soft: rgba(52, 211, 153, .16);
    --adr-live-row: rgba(52, 211, 153, .06);
}

/* ------------------------------------------------------------------ Platform heroes */

.adr-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: .9rem; margin-bottom: 1rem; }
.adr-platform { margin-bottom: 0; }
.adr-platform.is-android { border-color: color-mix(in srgb, var(--adr-android) 35%, transparent); background: linear-gradient(158deg, var(--adr-android-soft) 0%, var(--adu-surface) 45%, var(--adu-card) 100%); }
.adr-platform.is-android .adu-hero-watermark { color: var(--adr-android); }
.adr-platform-head { position: relative; display: flex; align-items: center; gap: .8rem; margin-bottom: .85rem; }
.adr-platform-head > div { min-width: 0; flex: 1 1 auto; display: grid; gap: .1rem; }
.adr-platform-glyph { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--adr-ios-soft); color: var(--adr-ios); font-size: 1.35rem; }
.adr-platform.is-android .adr-platform-glyph { background: var(--adr-android-soft); color: var(--adr-android); }
.adr-platform-version { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.adr-platform-version.is-empty { color: var(--adu-caution); font-size: 1.25rem; }
.adr-platform-build { margin-left: .35rem; color: var(--adu-muted); font-size: .85rem; font-weight: 600; letter-spacing: 0; }
.adr-platform-add { flex: 0 0 auto; }
.adr-platform-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.adr-stat-small { font-size: 1.1rem; }
.adr-link { color: var(--adu-muted); text-decoration: none; word-break: break-all; }
.adr-link:hover { color: var(--adu-violet); text-decoration: underline; }

/* ------------------------------------------------------------------ Filters and table */

.adr-filters { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0 1rem; }
.adr-table-card { padding: .35rem .5rem .5rem; margin-bottom: 1rem; }
.adr-table-wrap { overflow-x: auto; }
.adr-table { min-width: 860px; }
.adr-table td { vertical-align: middle; }
.adr-table tbody tr { transition: background-color .15s ease; }
.adr-table tbody tr:hover { background: var(--adu-surface); }
.adr-table tbody tr.is-live { background: var(--adr-live-row); }
.adr-table tbody tr.is-off .adu-cell-user-text strong { color: var(--adu-muted); }
.adr-row-glyph { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--adr-ios-soft); color: var(--adr-ios); font-size: 1rem; }
.adr-row-glyph.is-android { background: var(--adr-android-soft); color: var(--adr-android); }
.adr-notes-cell { max-width: 22rem; }
.adr-notes-cell > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; line-height: 1.35; }
.adr-actions { white-space: nowrap; text-align: right; }
.adr-actions .adu-btn { margin-left: .25rem; }
.adr-actions-head { width: 1%; }

/* ------------------------------------------------------------------ Preview */

.adr-preview { display: grid; gap: .7rem; padding: .95rem 1rem; margin-bottom: .75rem; }
.adr-preview-head { display: grid; gap: .2rem; }
.adr-card-title { margin: 0; font-size: 1rem; font-weight: 700; }
.adr-card-title i { color: var(--adu-violet); margin-right: .25rem; }
.adr-preview-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.adr-preview-form .adu-field { flex: 1 1 140px; max-width: 220px; }
.adr-preview-result { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; padding: .7rem .85rem; border-radius: 12px; border: 1px solid var(--adu-card-border); background: var(--adu-surface); }
.adr-preview-result.is-positive { border-color: var(--adu-positive-soft); }
.adr-preview-result.is-caution { border-color: var(--adu-caution-soft); }
.adr-preview-result.is-critical { border-color: var(--adu-critical-soft); }
.adr-preview-text { display: grid; gap: .1rem; min-width: 0; flex: 1 1 18rem; }
.adr-preview-text strong { font-size: .88rem; }
.adr-preview-text small { color: var(--adu-muted); font-size: .74rem; overflow-wrap: anywhere; }
.adr-foot { margin-bottom: 1rem; }

/* ------------------------------------------------------------------ Shared controls */

.adr-segment { display: inline-flex; gap: .2rem; padding: .2rem; border-radius: 12px; border: 1px solid var(--adu-card-border); background: var(--adu-surface); }
.adr-segment-item { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .8rem; border: 0; border-radius: 9px; background: transparent; color: var(--adu-muted); font-size: .84rem; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.adr-segment-item:hover:not(:disabled) { color: var(--adu-text); }
.adr-segment-item.is-active { background: var(--adu-card); color: var(--adu-violet); box-shadow: 0 0 0 1px var(--adu-violet-line); }
.adr-segment-item:focus-visible { outline: none; box-shadow: var(--adu-focus); }
.adr-segment-item:disabled { opacity: .55; cursor: not-allowed; }
.adu-mono-input { font-family: var(--adu-mono); font-variant-numeric: tabular-nums; }
.adr-input-group { display: flex; align-items: center; gap: .4rem; }
.adr-input-group .adu-input { flex: 1 1 auto; min-width: 0; }
.adr-input-group .adu-btn { flex: 0 0 auto; white-space: nowrap; text-decoration: none; }

/* ------------------------------------------------------------------ Editor sheet */

section.dbs-sheet.adr-sheet { width: min(760px, calc(100vw - 1rem)); }
.adr-sheet-glyph { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--adr-ios-soft); color: var(--adr-ios); font-size: 1.3rem; }
.adr-sheet-glyph.is-android { background: var(--adr-android-soft); color: var(--adr-android); }
.adr-form { display: grid; gap: .85rem; }
.adr-field-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.adr-field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.adr-field-grid > .adu-field:last-child { grid-column: 1 / -1; }
.adr-notes { min-height: 5.5rem; }

.adr-switch { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .75rem; border-radius: 12px; border: 1px solid var(--adu-card-border); background: var(--adu-surface); cursor: pointer; }
.adr-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.adr-switch-track { position: relative; flex: 0 0 auto; width: 40px; height: 22px; border-radius: 999px; background: var(--adu-neutral-soft); transition: background-color .15s ease; }
.adr-switch-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--adu-card); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease; }
.adr-switch input:checked + .adr-switch-track { background: var(--adu-positive); }
.adr-switch input:checked + .adr-switch-track .adr-switch-thumb { transform: translateX(18px); }
.adr-switch input:focus-visible + .adr-switch-track { box-shadow: var(--adu-focus); }
.adr-switch input:disabled + .adr-switch-track { opacity: .55; }
.adr-switch-text { display: grid; gap: .05rem; }
.adr-switch-text strong { font-size: .86rem; }
.adr-switch-text small { color: var(--adu-muted); font-size: .72rem; }

/* The mobile banner as it will read (violet attention recipe from the app). */
.adr-banner-preview { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--adu-violet) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--adu-violet) 22%, transparent), color-mix(in srgb, var(--adu-violet) 6%, transparent) 55%, transparent); }
.adr-banner-icon { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--adu-violet) 22%, transparent); color: var(--adu-violet); }
.adr-banner-text { display: grid; gap: .05rem; min-width: 0; flex: 1 1 auto; }
.adr-banner-text strong { font-size: .86rem; }
.adr-banner-text small { color: var(--adu-muted); font-size: .72rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adr-banner-actions { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.adr-banner-later { color: var(--adu-light); font-size: .8rem; font-weight: 700; padding: 0 .35rem; }
.adr-banner-update { padding: .3rem .8rem; border-radius: 12px; background: var(--adu-violet); color: #fff; font-size: .8rem; font-weight: 700; }

.adr-problems { margin: 0; padding: .6rem .8rem; list-style: none; display: grid; gap: .3rem; border-radius: 12px; background: var(--adu-critical-soft); color: var(--adu-critical); font-size: .82rem; }
.adr-problems i { margin-right: .4rem; }

@media (max-width: 640px) {
    .adr-field-grid { grid-template-columns: minmax(0, 1fr); }
    .adr-platform-head { flex-wrap: wrap; }
    .adr-platform-add { width: 100%; }
    .adr-preview-form .adu-field { max-width: none; }
}