/* ============================================================================
   LogiCenter – shared UI primitives
   ============================================================================
   Card, button, form, table, badge, tabs, progress bar, empty state, key/value
   list and status dot. Every module builds its screens from these classes.
   Lives in the `components` cascade layer (after `base`, before `modules`).
   ========================================================================== */
@layer components {

  /* --- Card ------------------------------------------------------------ */
  .card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 16px;
    min-width: 0;
  }
  .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  .card-head h2, .card-head h3 { margin: 0; }
  .card.pad-0 { padding: 0; overflow: hidden; }

  /* --- Buttons ----------------------------------------------------------
     .btn            neutral        .btn-primary / -danger / -success  coloured
     .btn-ghost      no background  .btn-sm / -lg / -block              sizes
     .btn-icon       icon-only button (always give it a title/aria-label)   */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    padding: 8px 14px; font-weight: 600; font-size: .88rem; cursor: pointer;
    background: var(--c-surface-2); color: var(--c-text); border-color: var(--c-border);
    transition: transform .12s var(--ease), background .15s, box-shadow .15s;
    white-space: nowrap; text-decoration: none;
  }
  .btn:hover { background: var(--c-border); }
  .btn:active { transform: translateY(1px) scale(.98); }
  .btn:disabled { opacity: .55; cursor: not-allowed; }
  .btn-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); box-shadow: 0 2px 0 var(--c-primary-600); }
  .btn-primary:hover { background: var(--c-primary-600); }
  .btn-danger { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
  .btn-danger:hover { filter: brightness(.95); background: var(--c-danger); }
  .btn-success { background: var(--c-success); color: #fff; border-color: var(--c-success); }
  .btn-success:hover { filter: brightness(.95); background: var(--c-success); }
  .btn-ghost { background: transparent; border-color: transparent; }
  .btn-ghost:hover { background: var(--c-primary-50); }
  .btn-sm { padding: 5px 10px; font-size: .8rem; }
  .btn-lg { padding: 12px 18px; font-size: 1rem; }
  .btn-block { width: 100%; }
  .btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 8px; background: transparent; border: none; cursor: pointer; border-radius: var(--radius-sm);
    color: var(--c-text-2);
  }
  .btn-icon:hover { background: var(--c-primary-50); color: var(--c-text); }
  .btn-icon:disabled { opacity: .35; cursor: not-allowed; }
  /* Delete/remove icon buttons turn red on hover (matched by their action attribute). */
  .btn-icon:is([data-action="delete"], [data-act="delete"], [data-route-action="delete"], [data-alert-action="delete"],
               [data-item-act="delete"], [data-stop-action="remove"], [data-reg-del]):hover { color: var(--c-danger); }

  /* --- Forms ----------------------------------------------------------- */
  .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
  .form-grid .full { grid-column: 1 / -1; }
  .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .field > span, .field > label { font-size: .78rem; font-weight: 600; color: var(--c-text-2); }
  /* :has() – highlight a field's label while its input has keyboard focus,
     and mark labels of required inputs. No JavaScript needed. */
  .field:has(:focus-visible) > span, .field:has(:focus-visible) > label { color: var(--c-primary); }
  .field:has(:is(input, select, textarea):required) > span::after { content: " *"; color: var(--c-danger); }
  .input, .select, .textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    background: var(--c-surface); min-height: 38px;
  }
  .input:focus, .select:focus, .textarea:focus { border-color: var(--c-primary); outline: none; box-shadow: 0 0 0 3px var(--c-primary-50); }
  .check { display: inline-flex; gap: 6px; align-items: center; font-size: .88rem; cursor: pointer; }
  .check:has(input:disabled) { opacity: .6; cursor: not-allowed; }  /* :has() – dim disabled options */
  .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }

  /* --- Tables ---------------------------------------------------------- */
  .table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
  table.table { width: 100%; border-collapse: collapse; font-size: .86rem; }
  .table th, .table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
  .table th { background: var(--c-surface-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--c-text-2); }
  .table tr:last-child td { border-bottom: none; }
  .table tbody tr:hover { background: var(--c-surface-2); }
  .table .actions { text-align: right; white-space: nowrap; }

  /* --- Badges (status pills) ------------------------------------------- */
  .badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; background: var(--c-surface-2); color: var(--c-text-2);
    border: 1px solid var(--c-border); white-space: nowrap;
  }
  .badge-success { background: var(--c-success-50); color: var(--c-success); border-color: transparent; }
  .badge-warning { background: var(--c-warning-50); color: var(--c-warning); border-color: transparent; }
  .badge-danger { background: var(--c-danger-50); color: var(--c-danger); border-color: transparent; }
  .badge-info { background: var(--c-primary-50); color: var(--c-primary); border-color: transparent; }
  .badge-gray { background: var(--c-surface-2); color: var(--c-text-3); }

  /* --- Tabs ------------------------------------------------------------ */
  .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-border); margin-bottom: 14px; overflow-x: auto; }
  .tab {
    padding: 8px 14px; background: none; border: none; border-bottom: 2px solid transparent;
    font-weight: 600; color: var(--c-text-2); cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }

  /* --- Progress bar: <div class="progress ok"><i style="width:40%"></i></div> */
  .progress { height: 8px; border-radius: 999px; background: var(--c-surface-2); border: 1px solid var(--c-border); overflow: hidden; }
  .progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-primary), #3b82f6); border-radius: inherit; transition: width .4s var(--ease); }
  .progress.ok > i { background: var(--c-success); }
  .progress.warn > i { background: var(--c-warning); }
  .progress.bad > i { background: var(--c-danger); }

  /* --- Empty states, lists, key/value pairs ---------------------------- */
  .empty { padding: 26px; text-align: center; color: var(--c-text-3); }
  .empty > .icon-xl { display: block; margin: 0 auto 8px; color: var(--c-text-3); }
  .list { display: flex; flex-direction: column; gap: 8px; }
  .kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: .86rem; }
  .kv dt { color: var(--c-text-2); display: inline-flex; align-items: center; gap: 6px; }
  .kv dd { margin: 0; font-weight: 600; }
  .divider { height: 1px; background: var(--c-border); margin: 12px 0; }

  /* --- Status dot: <span class="dot ok"></span> ------------------------ */
  .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--c-text-3); flex: none; }
  .dot.ok { background: var(--c-success); }
  .dot.warn { background: var(--c-warning); }
  .dot.bad { background: var(--c-danger); }
  .dot.info { background: var(--c-primary); }

  /* --- Shown when WebGL / Three.js is unavailable ---------------------- */
  .webgl-fallback { display: grid; place-items: center; height: 100%; min-height: 160px; color: var(--c-text-3); text-align: center; padding: 16px; font-size: .85rem; }
}