/* The admin's own styles, on unfold's colour variables (both themes).
   Unfold ships only the utility classes its own templates use, so the
   front page layout lives here — and the news editor, whose lists and
   headings unfold's reset would otherwise flatten. */

.dash {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.dash-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .dash-kpis { grid-template-columns: minmax(0, 1fr); }
}

.dash-kpi-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-base-500);
}

.dash-kpi-value {
    margin-top: 6px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-base-900);
}

.dash-kpi-note {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--color-base-500);
}

.dash-link {
    font-weight: 600;
    color: var(--color-primary-600);
}

.dash-link:hover {
    text-decoration: underline;
}

.dash-empty {
    margin: 0;
    color: var(--color-base-500);
}

.dark .dash-kpi-value { color: var(--color-base-100); }
.dark .dash-kpi-label,
.dark .dash-kpi-note,
.dark .dash-empty { color: var(--color-base-400); }
.dark .dash-link { color: var(--color-primary-400); }

/* The AI statistics page (panel/templates/panel/ai_stats.html). */
.ai-periods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ai-periods a:not(.ai-periods-list) {
    padding: 6px 14px;
    border: 1px solid var(--color-base-200);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-base-600);
}

.ai-periods a.current {
    border-color: var(--color-primary-600);
    background: var(--color-primary-600);
    color: #fff;
}

.ai-periods-list { margin-left: auto; font-size: 13px; }

.ai-row2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ai-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 1200px) {
    .ai-row2 { grid-template-columns: minmax(0, 1fr); }
}

.ai-share {
    display: flex;
    align-items: center;
    gap: 10px;
    font-variant-numeric: tabular-nums;
}

.ai-bar {
    width: 72px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-base-100);
    overflow: hidden;
}

.ai-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--color-primary-600);
}

.dark .ai-periods a:not(.ai-periods-list) {
    border-color: var(--color-base-700);
    color: var(--color-base-300);
}

.dark .ai-periods a.current {
    border-color: var(--color-primary-500);
    background: var(--color-primary-500);
    color: var(--color-base-950);
}

.dark .ai-bar { background: var(--color-base-800); }
.dark .ai-bar span { background: var(--color-primary-500); }

/* The news editor (django-prose-editor) in unfold's colours. */
.prose-editor {
    --prose-editor-background: #fff;
    --prose-editor-foreground: var(--color-base-900);
    --prose-editor-border-color: var(--color-base-200);
    --prose-editor-active-color: var(--color-primary-600);
}

.dark .prose-editor {
    --prose-editor-background: var(--color-base-900);
    --prose-editor-foreground: var(--color-base-100);
    --prose-editor-border-color: var(--color-base-700);
}

.prose-editor .ProseMirror {
    min-height: 260px;
    padding: 10px 14px;
    border-radius: 6px;
    line-height: 1.6;
}

.prose-editor .ProseMirror p { margin: 0.45em 0; }
.prose-editor .ProseMirror h2 { font-size: 1.3em; font-weight: 700; margin: 0.7em 0 0.3em; }
.prose-editor .ProseMirror h3 { font-size: 1.12em; font-weight: 700; margin: 0.6em 0 0.25em; }
.prose-editor .ProseMirror ul { list-style: disc; padding-left: 1.5em; }
.prose-editor .ProseMirror ol { list-style: decimal; padding-left: 1.5em; }
.prose-editor .ProseMirror li { margin: 0.15em 0; }
.prose-editor .ProseMirror blockquote {
    border-left: 3px solid var(--color-primary-600);
    padding-left: 12px;
    color: var(--color-base-500);
    font-style: italic;
}
.prose-editor .ProseMirror hr { border-top: 1px solid var(--color-base-300); margin: 1em 0; }
.prose-editor .ProseMirror a { color: var(--color-primary-600); text-decoration: underline; }

/* The shop page's card (panel/templates/panel/shop_card.html). */
.shop-card {
    margin-bottom: 24px;
    padding: 20px;
    border: 1px solid var(--color-base-200);
    border-radius: 8px;
    background: #fff;
}

.shop-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    margin-bottom: 16px;
}

.shop-card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-base-900);
}

.shop-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 13px;
    color: var(--color-base-500);
}

/* A person with several shops: the others, one click away. */
.shop-card-shops {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
}

.shop-card-shops-label { color: var(--color-base-500); }

.shop-card-shops a,
.shop-card-shops .current {
    padding: 2px 10px;
    border: 1px solid var(--color-base-200);
    border-radius: 999px;
}

.shop-card-shops a { color: var(--color-primary-700); }
.shop-card-shops a:hover { border-color: var(--color-primary-500); }

.shop-card-shops .current {
    background: var(--color-primary-50);
    border-color: var(--color-primary-200);
    color: var(--color-primary-800);
    font-weight: 600;
}

.dark .shop-card-shops-label { color: var(--color-base-400); }
.dark .shop-card-shops a,
.dark .shop-card-shops .current { border-color: var(--color-base-700); }
.dark .shop-card-shops a { color: var(--color-primary-300); }
.dark .shop-card-shops .current {
    background: var(--color-primary-950);
    color: var(--color-primary-200);
}

.shop-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1200px) {
    .shop-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.shop-tile {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--color-base-200);
    border-radius: 8px;
    border-left: 4px solid var(--color-base-200);
}

a.shop-tile:hover { border-color: var(--color-base-300); }
.shop-tile.good { border-left-color: var(--color-primary-600); }
.shop-tile.info { border-left-color: #3b82f6; }
.shop-tile.bad { border-left-color: #ef4444; }

.shop-tile-label { font-size: 12.5px; color: var(--color-base-500); }

.shop-tile-value {
    margin-top: 4px;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-base-900);
}

.shop-tile-note { margin-top: 2px; font-size: 12.5px; color: var(--color-base-500); }

.shop-entries { margin-top: 18px; }

.shop-entries-title {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-base-700);
}

.shop-entries table { width: 100%; border-collapse: collapse; font-size: 13px; }
.shop-entries td { padding: 6px 8px; border-top: 1px solid var(--color-base-200); }
.shop-entry-when { white-space: nowrap; color: var(--color-base-500); }
.shop-entry-amount { white-space: nowrap; font-variant-numeric: tabular-nums; color: #dc2626; }
.shop-entry-amount.plus { color: var(--color-primary-600); }
.shop-entry-note { color: var(--color-base-500); }

.dark .shop-card { background: var(--color-base-900); border-color: var(--color-base-800); }
.dark .shop-tile { border-color: var(--color-base-800); }
.dark .shop-tile.good { border-left-color: var(--color-primary-500); }
.dark .shop-card-title,
.dark .shop-tile-value { color: var(--color-base-100); }
.dark .shop-card-facts,
.dark .shop-tile-label,
.dark .shop-tile-note,
.dark .shop-entry-when,
.dark .shop-entry-note { color: var(--color-base-400); }
.dark .shop-entries-title { color: var(--color-base-300); }
.dark .shop-entries td { border-top-color: var(--color-base-800); }

/* Every list's header: how many rows it holds (unfold/helpers/welcomemsg.html). */
.list-count {
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--color-primary-50);
    color: var(--color-primary-800);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.list-count-total { color: var(--color-base-500); font-weight: 500; }
.list-count-total a { color: inherit; text-decoration: underline; }

.dark .list-count {
    background: var(--color-primary-950);
    color: var(--color-primary-200);
}
.dark .list-count-total { color: var(--color-base-400); }

/* Row numbers in every list (admin/change_list_results.html). */
#result_list .row-number {
    width: 1px;
    padding: 8px 4px 8px 14px;
    text-align: right;
    white-space: nowrap;
    color: var(--color-base-500);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.dark #result_list .row-number { color: var(--color-base-400); }