/* crm-skeleton.css - what a CRM+ screen shows while its numbers are on the way.
 *
 * Owner, 2026-10-02: no screen with numbers may open empty or with a lone
 * "Loading…". It opens with its own layout, and every number, row and chart
 * that has not arrived yet is a grey box with a shine moving across it; the
 * real value takes the box's place when it comes. One look for the whole
 * platform, so it is defined here once:
 *
 *   .crm-sk             one shining box (a line of text, a number, a circle)
 *   crm.skel('kpis:4 chart rows:5')   a whole screen's shape, from crm-core.js
 *
 * The shine is the gradient of the reference the owner sent: a darker band
 * between two light ones, 300% wide, slid from right to left.
 */
:root {
  --crm-sk-base: rgba(16, 24, 40, .06);
  --crm-sk-shine: rgba(16, 24, 40, .13);
  --crm-sk-card: #fff;
  --crm-sk-line: rgba(16, 24, 40, .08);
}
.dark,
[data-theme="dark"] {
  --crm-sk-base: rgba(255, 255, 255, .06);
  --crm-sk-shine: rgba(255, 255, 255, .13);
  --crm-sk-card: transparent;
  --crm-sk-line: rgba(255, 255, 255, .09);
}

.crm-sk {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--crm-sk-base) 33%, var(--crm-sk-shine) 50%, var(--crm-sk-base) 66%);
  background-size: 300% 100%;
  animation: crm-sk 1.2s infinite linear;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
@keyframes crm-sk { 0% { background-position: right; } }
@media (prefers-reduced-motion: reduce) { .crm-sk { animation: none; } }

/* Sizes a screen can put straight where its value will be. */
.crm-sk--num { height: 22px; width: 46%; margin-top: 4px; }
.crm-sk--sm { height: 10px; }
.crm-sk--dot { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.crm-sk--block { height: 180px; border-radius: 8px; }
span.crm-sk, b.crm-sk, strong.crm-sk, em.crm-sk { display: inline-block; vertical-align: middle; min-width: 3em; }

/* ---- whole shapes, built by crm.skel() --------------------------------- */
.crm-skw { display: grid; gap: 16px; width: 100%; }
.crm-skw-box {
  background: var(--crm-sk-card);
  border: 1px solid var(--crm-sk-line);
  border-radius: 8px;
  padding: 14px 16px;
  min-width: 0;
}
.crm-skw-kpis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; }
.crm-skw-kpis .crm-sk:first-child { width: 58%; }
.crm-skw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.crm-skw-card { display: grid; gap: 10px; }
.crm-skw-card .crm-skw-btns { display: flex; gap: 8px; margin-top: 4px; }
.crm-skw-card .crm-skw-btns .crm-sk { height: 30px; width: 84px; border-radius: 8px; }
.crm-skw-table { padding: 0; }
.crm-skw-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--crm-sk-line);
}
.crm-skw-row:first-child { border-top: 0; }
.crm-skw-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crm-skw-who > div { flex: 1; display: grid; gap: 6px; min-width: 0; }
.crm-skw-list .crm-skw-row { grid-template-columns: minmax(0, 1fr) auto; }
.crm-skw-list .crm-skw-row > .crm-sk { width: 56px; }
.crm-skw-form { display: grid; gap: 14px; }
.crm-skw-field { display: grid; gap: 8px; }
.crm-skw-field .crm-sk:last-child { height: 36px; border-radius: 8px; }
.crm-skw-cols { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(220px, 1fr)); gap: 12px; overflow: hidden; }
.crm-skw-col { display: grid; gap: 10px; align-content: start; }
.crm-skw-col .crm-skw-box { display: grid; gap: 8px; }
@media (max-width: 760px) {
  .crm-skw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-skw-row { grid-template-columns: minmax(0, 1fr) auto; }
  .crm-skw-row > .crm-sk:nth-child(n+3) { display: none; }
}