/* Rules of the pages that have no CSS file of their own yet (admin, and the subscription status also shown on admin pages).
   When you restyle one of these pages, move its rules to css/<area>.css and delete them here. Tokens: base.css. */

/* Subscription status (also on admin pages) */
.admin-block { margin-bottom: 16px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 12px; }
.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; text-align: start; }
.status-on { color: var(--link); font-weight: 500; }
.status-off { color: var(--text-muted); }
form .table .btn[type="submit"] { width: auto; }

/* Admin */
.admin-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.admin-stat h2 { font-size: 1rem; color: var(--text-muted); }
.admin-stat p { margin: 0; }
.stat-number { font-family: var(--font-title); font-size: 2rem; color: var(--text); }
.stat-list { list-style: none; margin: 0; padding: 0; }
.stat-list li { display: flex; justify-content: space-between; gap: 8px; }
.search-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-bottom: 12px; }
.search-form .field { flex: 1 1 240px; margin-bottom: 0; }
.search-form .btn[type="submit"] { width: auto; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }

/* «بيتفرجوا دلوقتي» on the admin home (Features/Capacity/CapacityCard.razor, js/capacity.js) */
.cap-card { display: block; margin-bottom: 16px; }
.cap-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; }
.cap-head h2 { margin: 0; }
.cap-head p { margin: 0; }
.cap-now, .cap-peaks { display: grid; gap: 12px; margin: 12px 0; }
.cap-now { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.cap-peaks { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-top: 4px; }
.cap-now dt, .cap-peaks dt { color: var(--text-muted); font-size: var(--fs-sm); }
.cap-now dd, .cap-peaks dd { margin: 0; }
.cap-main { grid-column: 1 / -1; }
.cap-value { font-family: var(--font-title); font-size: var(--fs-md); }
.cap-sub { font-size: 1rem; margin: 16px 0 0; }
.cap-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 12px; }
.cap-chart { margin: 0; min-width: 0; }
.cap-chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; font-size: var(--fs-sm); margin-bottom: 4px; }
.cap-max { color: var(--text-muted); }
.cap-chart svg { display: block; width: 100%; height: 64px; border-bottom: 1px solid var(--border-strong); }
.cap-hit { fill: transparent; }
.cap-bar { fill: var(--info); }
.cap-chart-egress .cap-bar { fill: var(--accent-text); }
.cap-chart g:hover .cap-bar { opacity: .65; }
.cap-axis { display: flex; justify-content: space-between; color: var(--text-muted); font-size: var(--fs-xs); margin-top: 2px; }

/* 404, denied and error pages (Components/StatusCard.razor) */
.status { max-width: 560px; margin: var(--space-4) auto; display: grid; justify-items: center; text-align: center; }
.status-art { position: relative; margin-bottom: var(--space-2); }
.status-code {
    position: absolute;
    bottom: -6px;
    inset-inline-start: -34px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: var(--console);
    color: var(--amber);
    box-shadow: 0 3px 0 var(--edge);
    font-size: 1.3rem;
    transform: rotate(-8deg);
}
.status-title { margin: var(--space-2) 0 var(--space-1); font-size: var(--fs-xl); }
.status-text { max-width: 40ch; color: var(--text-muted); }
.status-ref { overflow-wrap: anywhere; }
.status-ref code { padding: 2px 10px; border-radius: 8px; background: var(--surface-3); font-size: 1.05rem; letter-spacing: .08em; }
.status-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; width: 100%; margin-top: var(--space-2); }

/* A file input with an Arabic button (the browser's own button speaks the browser's language). */
.file-pick {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 18px;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    font-family: var(--font-title);
    cursor: pointer;
}
.file-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-pick:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.file-pick-done { display: none; color: var(--success); }
.file-pick:has(input:valid) { border-style: solid; border-color: var(--success-edge); background: var(--success-soft); }
.file-pick:has(input:valid) .file-pick-done { display: inline-flex; align-items: center; gap: 4px; }
.file-pick:has(input:valid) .file-pick-empty { display: none; }