/*
 * Effektivflyt app styles. Load it in your app's page to look at home in Effektivflyt:
 *   <link rel="stylesheet" href="https://<effektivflyt address>/apps/ui.css">
 * The kit (sdk.js) fills the --ef-* colours with the ones the person sees (light, dark or
 * another theme), so your app follows them. These defaults have no weight (:where), so both
 * the kit's colours and yours override them. Make it your own by setting any --ef-* yourself
 * (e.g. --ef-accent for your brand colour) or adding your own classes. Guide: docs/apps.md.
 */
:where(:root) {
  --ef-canvas: #F7F8FA; --ef-surface: #FFFFFF; --ef-sunken: #F0F2F5; --ef-hover: rgba(16, 24, 40, .04); --ef-selected: rgba(62, 99, 221, .08);
  --ef-hairline: rgba(16, 24, 40, .08); --ef-border: rgba(16, 24, 40, .14); --ef-border-strong: rgba(16, 24, 40, .24);
  --ef-text: #101828; --ef-text-secondary: #475467; --ef-muted: #5E6878;
  --ef-accent: #3E63DD; --ef-accent-bg: rgba(62, 99, 221, .1); --ef-accent-text: #3451B2;
  --ef-success: #1F9D6B; --ef-success-bg: rgba(31, 157, 107, .1); --ef-success-text: #175C41;
  --ef-danger: #D92D20; --ef-danger-bg: rgba(217, 45, 32, .08); --ef-danger-text: #B42318;
  --ef-radius-input: 5px; --ef-radius-panel: 8px; --ef-radius-card: 12px;
  --ef-font: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ef-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* The background behind your content: transparent in a case's panel, the page colour in the sidebar. */
  --ef-page: transparent;
  color-scheme: light;
}
/* Shown outside Effektivflyt (while you build it), follow the computer's dark mode. */
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-ef-theme])) {
    --ef-canvas: #0F1115; --ef-surface: #16191F; --ef-sunken: #1C2027; --ef-hover: rgba(255, 255, 255, .045); --ef-selected: rgba(123, 147, 245, .14);
    --ef-hairline: rgba(255, 255, 255, .07); --ef-border: rgba(255, 255, 255, .12); --ef-border-strong: rgba(255, 255, 255, .2);
    --ef-text: #ECEEF2; --ef-text-secondary: #A9B1BD; --ef-muted: #838C9A;
    --ef-accent: #7B93F5; --ef-accent-bg: rgba(123, 147, 245, .14); --ef-accent-text: #A8B8FF;
    --ef-success: #3CCB8E; --ef-success-bg: rgba(60, 203, 142, .12); --ef-success-text: #7DD3A8;
    --ef-danger: #F97066; --ef-danger-bg: rgba(249, 112, 102, .12); --ef-danger-text: #FDA29B;
    color-scheme: dark;
  }
}
:root[data-ef-theme="dark"] { color-scheme: dark; }
:root[data-ef-location="sidebar"] { --ef-page: var(--ef-canvas); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--ef-page); }
body { font: 12.5px/1.45 var(--ef-font); color: var(--ef-text); -webkit-font-smoothing: antialiased; }
:root[data-ef-location="sidebar"] body { padding: 20px 24px; font-size: 13px; }
a { color: var(--ef-accent-text); }
code, .ef-mono { font-family: var(--ef-font-mono); font-size: .92em; }

/* Text */
.ef-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; }
.ef-heading { margin: 0; font-size: 12px; font-weight: 600; color: var(--ef-text-secondary); }
.ef-muted { color: var(--ef-muted); }
.ef-small { font-size: 11.5px; }
.ef-number { font-variant-numeric: tabular-nums; }
.ef-good { color: var(--ef-success-text); } .ef-bad { color: var(--ef-danger-text); font-weight: 600; }

/* Layout */
.ef-stack { display: flex; flex-direction: column; gap: 10px; }
.ef-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ef-spread { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ef-card { padding: 14px 16px; border: 1px solid var(--ef-hairline); border-radius: var(--ef-radius-card); background: var(--ef-surface); }
.ef-divider { height: 1px; border: 0; margin: 4px 0; background: var(--ef-hairline); }
.ef-empty { margin: 0; padding: 18px 0; text-align: center; color: var(--ef-muted); }

/* Facts: a two-column list of label and value. */
.ef-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.ef-facts dt { color: var(--ef-muted); }
.ef-facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* Badges */
.ef-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; line-height: 17px;
  white-space: nowrap; color: var(--ef-text-secondary); background: var(--ef-sunken); }
.ef-badge.accent { color: var(--ef-accent-text); background: var(--ef-accent-bg); }
.ef-badge.success { color: var(--ef-success-text); background: var(--ef-success-bg); }
.ef-badge.danger { color: var(--ef-danger-text); background: var(--ef-danger-bg); }

/* Buttons */
.ef-button { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px; border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius-input); background: var(--ef-surface); color: var(--ef-text); font: inherit; font-weight: 500; cursor: pointer; }
.ef-button:hover:not(:disabled) { background: var(--ef-hover); border-color: var(--ef-border-strong); }
.ef-button.primary { border-color: transparent; background: var(--ef-accent); color: #fff; }
.ef-button.primary:hover:not(:disabled) { background: var(--ef-accent); filter: brightness(1.08); }
.ef-button.danger { color: var(--ef-danger-text); }
.ef-button.link { min-height: 0; padding: 0; border: 0; background: none; color: var(--ef-accent-text); }
.ef-button:disabled { opacity: .5; cursor: default; }
.ef-button:focus-visible, .ef-input:focus-visible { outline: 2px solid var(--ef-accent); outline-offset: 1px; }

/* Fields */
.ef-label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.ef-input { width: 100%; min-height: 30px; padding: 4px 9px; border: 1px solid var(--ef-border); border-radius: var(--ef-radius-input);
  background: var(--ef-surface); color: var(--ef-text); font: inherit; }
textarea.ef-input { min-height: 64px; resize: vertical; }

/* Tables */
.ef-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ef-table th { padding: 6px 8px; text-align: left; font-size: 11px; font-weight: 600; color: var(--ef-muted); border-bottom: 1px solid var(--ef-border); }
.ef-table td { padding: 6px 8px; border-bottom: 1px solid var(--ef-hairline); }
.ef-table th:first-child, .ef-table td:first-child { padding-left: 0; }
.ef-table th:last-child, .ef-table td:last-child { padding-right: 0; }
.ef-table .ef-end { text-align: right; }
.ef-table tbody tr:hover { background: var(--ef-hover); }

/* A short message after an action. */
.ef-status { min-height: 1.4em; margin: 0; color: var(--ef-muted); }