/* Page-level layout: cards, tables, stat tiles, thumbnails, flags. */
.card { background: var(--net-bg-card); border: 1px solid var(--net-border); border-radius: var(--net-border-radius-md); padding: var(--net-spacing-lg); margin-bottom: var(--net-spacing-lg); box-shadow: var(--net-shadow-base); }
.card h2 { display: flex; align-items: center; gap: 0.5rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--net-spacing-lg); }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--net-spacing-md); margin-bottom: var(--net-spacing-lg); }
.stat-tile { background: var(--net-bg-card); border: 1px solid var(--net-border); border-radius: var(--net-border-radius-md); padding: var(--net-spacing-md); }
.stat-tile .value { font-size: var(--net-font-size-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-tile .label { font-size: var(--net-font-size-xs); color: var(--net-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--net-bg-card); border: 1px solid var(--net-border); border-radius: var(--net-border-radius-md); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--net-font-size-sm); }
table.data th, table.data td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--net-border); text-align: left; vertical-align: middle; white-space: nowrap; }
table.data th { background: var(--net-bg-accent); font-weight: 600; position: sticky; top: 0; z-index: var(--net-z-raised); }
table.data td.wrap, table.data th.wrap { white-space: normal; min-width: 220px; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: var(--net-bg-accent); }
table.data tbody tr.is-picked { background: rgba(79, 143, 247, 0.18); }
table.data tbody tr[data-href] { cursor: pointer; }
table.data .grip { cursor: grab; color: var(--net-text-muted); user-select: none; }
table.data tr.is-dragging { opacity: 0.4; }
table.data tr.drop-before td { box-shadow: inset 0 2px 0 var(--net-color-primary); }
table.data tr.drop-after  td { box-shadow: inset 0 -2px 0 var(--net-color-primary); }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--net-spacing-sm); align-items: center; margin-bottom: var(--net-spacing-md); }
.toolbar .ctrl-wrapper { margin: 0; flex: 0 1 220px; }
.toolbar .spacer { flex: 1 1 auto; }
.summary-line { font-size: var(--net-font-size-sm); color: var(--net-text-muted); margin: var(--net-spacing-sm) 0; }

.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: var(--net-border-radius-xl); font-size: var(--net-font-size-xs); font-weight: 600; background: var(--net-bg-accent); color: var(--net-text-primary); }
.badge.is-damaged   { background: rgba(224, 82, 82, 0.22); color: #ff9e9e; }
.badge.is-destroyed { background: rgba(224, 82, 82, 0.35); color: #ffb3b3; }
.badge.is-undamaged { background: rgba(47, 179, 106, 0.22); color: #7fe0a6; }
.badge.is-cleanable { background: rgba(240, 173, 78, 0.22); color: #ffd27a; }
.badge.is-missing   { background: rgba(154, 165, 180, 0.22); color: #c3cad4; }
.flag-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.25); vertical-align: middle; margin-right: 0.3rem; }

.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--net-spacing-md); }
.thumb { background: var(--net-bg-card); border: 1px solid var(--net-border); border-radius: var(--net-border-radius-md); padding: 0.4rem; cursor: pointer; position: relative; }
.thumb.is-selected { outline: 3px solid var(--net-color-primary); }
.thumb img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--net-border-radius-sm); background: var(--net-bg-accent); display: block; }
.thumb .noimg { height: 120px; display: flex; align-items: center; justify-content: center; color: var(--net-text-muted); background: var(--net-bg-accent); border-radius: var(--net-border-radius-sm); font-size: var(--net-font-size-sm); }
.thumb .cap { font-size: var(--net-font-size-xs); margin-top: 0.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb .sub { font-size: 0.68rem; color: var(--net-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb .type-tag { position: absolute; top: 0.6rem; left: 0.6rem; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 3px; text-transform: uppercase; }

.dropzone { border: 2px dashed var(--net-border-accent); border-radius: var(--net-border-radius-md); padding: var(--net-spacing-xl); text-align: center; color: var(--net-text-muted); background: var(--net-bg-primary); transition: border-color var(--net-transition-fast), background var(--net-transition-fast); }
.dropzone.is-over { border-color: var(--net-color-primary); background: rgba(79, 143, 247, 0.12); }
.dropzone input[type="file"] { display: none; }
.progress { height: 6px; background: var(--net-bg-accent); border-radius: 3px; overflow: hidden; margin-top: var(--net-spacing-sm); }
.progress > span { display: block; height: 100%; width: 0; background: var(--net-color-primary); transition: width 0.2s ease; }

.alert { padding: var(--net-spacing-md); border-radius: var(--net-border-radius-base); margin-bottom: var(--net-spacing-md); border: 1px solid transparent; }
.alert-info { background: rgba(79, 143, 247, 0.15); border-color: rgba(79, 143, 247, 0.45); color: #b9d2ff; }
.alert-warn { background: rgba(240, 173, 78, 0.15); border-color: rgba(240, 173, 78, 0.5); color: #ffe0a3; }
.alert-error { background: rgba(224, 82, 82, 0.15); border-color: rgba(224, 82, 82, 0.5); color: #ffb3b3; }
.alert-ok { background: rgba(47, 179, 106, 0.15); border-color: rgba(47, 179, 106, 0.5); color: #9fe6bd; }
.empty { padding: var(--net-spacing-xl); text-align: center; color: var(--net-text-muted); }
.sign-in-box { max-width: 420px; margin: 8vh auto; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; font-size: var(--net-font-size-sm); }
.kv dt { color: var(--net-text-muted); }
.kv dd { margin: 0; }

.flag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.25rem var(--net-spacing-lg); }
.flag-row { display: flex; align-items: center; gap: 0.6rem; }
.flag-row .flag-color { flex: 0 0 64px; font-size: var(--net-font-size-sm); }
.flag-row .ctrl-wrapper { flex: 1 1 auto; margin-bottom: 0.4rem; }
.flag-swatch-lg { width: 18px; height: 18px; margin: 0; }
.claim-card .claim-cover { width: 100%; height: 140px; object-fit: cover; border-radius: var(--net-border-radius-sm); margin-bottom: var(--net-spacing-sm); display: block; background: var(--net-bg-accent); }
.claim-card .claim-cover.noimg { display: flex; align-items: center; justify-content: center; font-size: 2.5rem; opacity: 0.5; }
.cover-row { display: flex; flex-wrap: wrap; gap: var(--net-spacing-lg); align-items: flex-start; }
.cover-preview { width: 320px; max-width: 100%; height: 220px; object-fit: cover; border-radius: var(--net-border-radius-md); background: var(--net-bg-accent); display: block; }
.cover-preview.noimg { display: flex; align-items: center; justify-content: center; color: var(--net-text-muted); }
.cover-form { flex: 1 1 260px; }