/* Boshqaruv's palette, and the few things only this panel needs.
 *
 * panel.css is shared byte for byte with the four project panels and is NOT
 * edited here: <body data-service="boshqaruv"> picks this palette.
 * Levels map onto the same three meanings the other panels use:
 *   ok -> --ok      attention -> --warn      problem, down -> --no
 * Text is Inter everywhere, log lines included; figures use tabular digits.
 */

body[data-service="boshqaruv"] {
  --paper: #f2f4f6;
  --line: #d9dee5;
  --ink: #141a22;
  --muted: #5b6676;

  --accent: #1f5f8b;
  --accent-soft: rgba(31, 95, 139, 0.1);
  --accent-ink: #1f5f8b;
  --button: #1f5f8b;
  --on-button: #fff;

  --ok: #2f8f5a;
  --ok-soft: rgba(47, 143, 90, 0.1);
  --ok-ink: #297850;
  --warn: #c9791b;
  --warn-soft: rgba(201, 121, 27, 0.12);
  --warn-ink: #925c1e;
  --no: #c8394f;
  --no-soft: rgba(200, 57, 79, 0.1);
  --no-ink: #bb374c;

  --shadow-sm: 0 1px 2px rgba(20, 26, 34, 0.05);
}

.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.tiles .card { margin: 0; }
.figure { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.spark { display: block; width: 100%; height: 40px; margin-top: 8px; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark .limit { stroke: var(--warn); stroke-dasharray: 3 3; stroke-width: 1; }

.projects { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.projects .card { margin: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-head h2, .card-head h3 { margin: 0; }
.numbers { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.numbers span b { font-weight: 600; }

.reasons { list-style: none; margin: 8px 0 0; padding: 0; }
.reasons li { margin: 2px 0; }

.links-list { list-style: none; margin: 0; padding: 0; }
.links-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                 padding: 8px 0; border-top: 1px solid var(--line); }
.links-list li:first-child { border-top: 0; }

.log-box { height: 380px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px;
           padding: 8px 12px; background: var(--surface); font-size: 14px; line-height: 1.45;
           font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* pre-wrap: a message with line breaks (a traceback) shows them. */
.log-line { padding: 1px 0; color: var(--ink); white-space: pre-wrap; }
.log-line.warning { color: var(--warn-ink); }
.log-line.error { color: var(--no-ink); font-weight: 600; }
.log-box.only-errors .log-line:not(.error):not(.warning) { display: none; }
.log-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }

dialog.confirm { border: 1px solid var(--line); border-radius: 12px; padding: 20px; max-width: 420px; }
dialog.confirm::backdrop { background: rgba(20, 26, 34, 0.35); }
/* "Working..." under an action's buttons while its request runs: htmx puts
   htmx-request on the form for that time. */
.working { display: none; }
.htmx-request .working { display: block; }
.actions-row { display: flex; gap: 8px; flex-wrap: wrap; }