/* ==========================================================================
   VYTALGUARD ENTITY CARD SYSTEM
   File: cards.css
   Purpose: Shared record cards used across all list pages
   ========================================================================== */

/* ==========================================================================
   01. CARD DESIGN TOKENS
   ========================================================================== */

:root{
  --vg-card-bg:#ffffff;
  --vg-card-bg-soft:#f8fafc;
  --vg-card-bg-hover:#fbfdff;
  --vg-card-border:#dbe4ef;
  --vg-card-border-soft:#edf2f7;

  --vg-card-text:#172033;
  --vg-card-text-muted:#64748b;
  --vg-card-text-soft:#8492a6;

  --vg-card-primary:#2563eb;
  --vg-card-primary-soft:rgba(37,99,235,.09);

  --vg-card-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 5px 16px rgba(15,23,42,.055);

  --vg-card-shadow-hover:
    0 4px 10px rgba(15,23,42,.06),
    0 14px 30px rgba(15,23,42,.09);

  --vg-card-radius:14px;
  --vg-card-radius-sm:9px;

  --vg-card-padding-x:14px;
  --vg-card-padding-y:12px;

  --vg-card-transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease,
    background-color .2s ease;
}

/* ==========================================================================
   02. ROOT ENTITY CARD
   ========================================================================== */

.entity-card{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  height:100%;
  padding:
    var(--vg-card-padding-y)
    var(--vg-card-padding-x);
  color:var(--vg-card-text);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98) 0%,
      rgba(248,251,255,.98) 100%
    );
  border:1px solid var(--vg-card-border);
  border-radius:var(--vg-card-radius);
  box-shadow:var(--vg-card-shadow);
  overflow:hidden;
  isolation:isolate;
  transition:var(--vg-card-transition);
}

/* Premium accent edge */

.entity-card::before{
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:3px;
  content:"";
  background:
    linear-gradient(
      90deg,
      #2563eb 0%,
      #38bdf8 52%,
      #14b8a6 100%
    );
  opacity:.8;
  pointer-events:none;
}

/* Soft internal highlight */

.entity-card::after{
  position:absolute;
  top:-70px;
  right:-55px;
  z-index:-1;
  width:150px;
  height:150px;
  content:"";
  background:
    radial-gradient(
      circle,
      rgba(59,130,246,.09) 0%,
      rgba(59,130,246,0) 70%
    );
  pointer-events:none;
}

/* ==========================================================================
   03. CARD INTERACTION
   ========================================================================== */

.entity-card:hover{
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      var(--vg-card-bg-hover) 100%
    );
  border-color:#c7d5e5;
  box-shadow:var(--vg-card-shadow-hover);
  transform:translateY(-2px);
}

.entity-card:focus-within{
  border-color:rgba(37,99,235,.55);
  box-shadow:
    0 0 0 3px var(--vg-card-primary-soft),
    var(--vg-card-shadow-hover);
}

/* Prevent card content from forcing horizontal overflow */

.entity-card,
.entity-card *{
  box-sizing:border-box;
}

.entity-card > *{
  min-width:0;
}

/* ==========================================================================
   04. REDUCED-MOTION SUPPORT
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .entity-card{
    transition:none;
  }

  .entity-card:hover{
    transform:none;
  }
}

/* ==========================================================================
   05. CARD HEADER
   ========================================================================== */

.entity-card-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  padding:3px 0 10px;
  border-bottom:1px solid var(--vg-card-border-soft);
}

.entity-card-header-main{
  display:flex;
  flex:1 1 auto;
  align-items:center;
  gap:10px;
  min-width:0;
}

/* ==========================================================================
   06. CARD ICON OR AVATAR
   ========================================================================== */

.entity-card-icon,
.entity-card-avatar{
  display:inline-flex;
  flex:0 0 38px;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  overflow:hidden;
  color:var(--vg-card-primary);
  font-size:19px;
  line-height:1;
  background:
    linear-gradient(
      145deg,
      rgba(37,99,235,.12),
      rgba(56,189,248,.08)
    );
  border:1px solid rgba(37,99,235,.14);
  border-radius:11px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 3px 8px rgba(37,99,235,.08);
}

.entity-card-avatar{
  border-radius:50%;
}

.entity-card-avatar img,
.entity-card-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ==========================================================================
   07. CARD HEADING GROUP
   ========================================================================== */

.entity-card-heading{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.entity-card-title{
  max-width:100%;
  margin:0;
  overflow:hidden;
  color:var(--vg-card-text);
  font-size:15px;
  font-weight:750;
  line-height:1.25;
  letter-spacing:-.015em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.entity-card-title a{
  color:inherit;
  text-decoration:none;
}

.entity-card-title a:hover{
  color:var(--vg-card-primary);
}

.entity-card-subtitle{
  max-width:100%;
  margin:0;
  overflow:hidden;
  color:var(--vg-card-text-muted);
  font-size:12px;
  font-weight:500;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ==========================================================================
   08. CARD IDENTIFIER
   ========================================================================== */

.entity-card-id,
.entity-card-code,
.entity-card-number{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  max-width:100%;
  min-height:21px;
  padding:3px 7px;
  overflow:hidden;
  color:#475569;
  font-size:10.5px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.025em;
  text-overflow:ellipsis;
  white-space:nowrap;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:6px;
}

/* ==========================================================================
   09. HEADER STATUS AREA
   ========================================================================== */

.entity-card-header-actions,
.entity-card-header-status{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:0;
}

/* Temporary base status shape.
   Status colors will be added in the dedicated status section. */

.entity-card-status,
.entity-status,
.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  max-width:130px;
  min-height:23px;
  padding:4px 8px;
  overflow:hidden;
  color:#475569;
  font-size:10.5px;
  font-weight:750;
  line-height:1.15;
  letter-spacing:.01em;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:999px;
}

.entity-card-status::before,
.entity-status::before,
.status-badge::before{
  flex:0 0 6px;
  width:6px;
  height:6px;
  content:"";
  background:currentColor;
  border-radius:50%;
  opacity:.75;
}

/* ==========================================================================
   10. COMPACT HEADER ACTION BUTTON
   ========================================================================== */

.entity-card-menu-btn,
.entity-card-action-btn{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  color:#64748b;
  font-size:16px;
  line-height:1;
  background:rgba(255,255,255,.8);
  border:1px solid #dbe4ef;
  border-radius:8px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  cursor:pointer;
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.entity-card-menu-btn:hover,
.entity-card-action-btn:hover{
  color:var(--vg-card-primary);
  background:#ffffff;
  border-color:rgba(37,99,235,.35);
  box-shadow:0 4px 10px rgba(37,99,235,.1);
  transform:translateY(-1px);
}

.entity-card-menu-btn:focus-visible,
.entity-card-action-btn:focus-visible{
  outline:0;
  border-color:var(--vg-card-primary);
  box-shadow:0 0 0 3px var(--vg-card-primary-soft);
}

/* ==========================================================================
   11. MOBILE HEADER
   ========================================================================== */

@media (max-width:575.98px){
  .entity-card-header{
    gap:8px;
    padding-bottom:9px;
  }

  .entity-card-header-main{
    gap:8px;
  }

  .entity-card-icon,
  .entity-card-avatar{
    flex-basis:35px;
    width:35px;
    height:35px;
    font-size:17px;
  }

  .entity-card-title{
    font-size:14px;
  }

  .entity-card-subtitle{
    font-size:11.5px;
  }

  .entity-card-status,
  .entity-status,
  .status-badge{
    max-width:100px;
    padding:4px 7px;
    font-size:10px;
  }

  .entity-card-menu-btn,
  .entity-card-action-btn{
    width:29px;
    height:29px;
  }
}

/* ==========================================================================
   12. CARD CONTEXT STRIP
   ========================================================================== */

.entity-card-context{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 10px;
  min-width:0;
  padding:8px 0;
  color:var(--vg-card-text-muted);
  font-size:11.5px;
  font-weight:550;
  line-height:1.35;
  border-bottom:1px solid var(--vg-card-border-soft);
}

.entity-card-context-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-width:0;
  max-width:100%;
}

.entity-card-context-item i{
  flex:0 0 auto;
  color:var(--vg-card-primary);
  font-size:13px;
}

.entity-card-context-item span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.entity-card-context-item + .entity-card-context-item::before{
  width:3px;
  height:3px;
  margin-right:5px;
  content:"";
  background:#cbd5e1;
  border-radius:50%;
}

/* ==========================================================================
   13. CARD BODY
   ========================================================================== */

.entity-card-body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-width:0;
  padding:10px 0 4px;
}

.entity-card-content{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.entity-card-section{
  min-width:0;
}

.entity-card-section + .entity-card-section{
  padding-top:9px;
  border-top:1px solid var(--vg-card-border-soft);
}

.entity-card-section-title{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 7px;
  color:#334155;
  font-size:11px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.045em;
  text-transform:uppercase;
}

.entity-card-section-title i{
  color:var(--vg-card-primary);
  font-size:13px;
}

/* ==========================================================================
   14. CARD DETAILS GRID
   ========================================================================== */

.entity-card-details,
.entity-card-fields,
.entity-card-info-grid{
  display:grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
  gap:8px 12px;
  min-width:0;
  margin:0;
}

.entity-card-field,
.entity-card-detail,
.entity-card-info-item{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  margin:0;
}

.entity-card-field.full-width,
.entity-card-detail.full-width,
.entity-card-info-item.full-width,
.entity-card-field--full,
.entity-card-detail--full{
  grid-column:1 / -1;
}

/* ==========================================================================
   15. FIELD LABELS
   ========================================================================== */

.entity-card-label,
.entity-card-field-label,
.entity-card-detail-label{
  display:block;
  margin:0;
  overflow:hidden;
  color:var(--vg-card-text-soft);
  font-size:10.5px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.02em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.entity-card-label::after,
.entity-card-field-label::after,
.entity-card-detail-label::after{
  content:"";
}

/* ==========================================================================
   16. FIELD VALUES
   ========================================================================== */

.entity-card-value,
.entity-card-field-value,
.entity-card-detail-value{
  display:block;
  min-width:0;
  margin:0;
  overflow-wrap:anywhere;
  color:var(--vg-card-text);
  font-size:12.5px;
  font-weight:650;
  line-height:1.4;
}

.entity-card-value a,
.entity-card-field-value a,
.entity-card-detail-value a{
  color:var(--vg-card-primary);
  font-weight:700;
  text-decoration:none;
}

.entity-card-value a:hover,
.entity-card-field-value a:hover,
.entity-card-detail-value a:hover{
  text-decoration:underline;
}

.entity-card-value.is-muted,
.entity-card-field-value.is-muted,
.entity-card-detail-value.is-muted{
  color:var(--vg-card-text-muted);
  font-weight:550;
}

.entity-card-value.is-empty,
.entity-card-field-value.is-empty,
.entity-card-detail-value.is-empty{
  color:#94a3b8;
  font-style:italic;
  font-weight:500;
}

/* ==========================================================================
   17. INLINE DETAIL ROWS
   ========================================================================== */

.entity-card-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  padding:6px 0;
}

.entity-card-row + .entity-card-row{
  border-top:1px dashed #e7edf4;
}

.entity-card-row .entity-card-label{
  flex:0 1 42%;
  padding-top:1px;
}

.entity-card-row .entity-card-value{
  flex:1 1 58%;
  text-align:right;
}

/* ==========================================================================
   18. PRIMARY VALUE HIGHLIGHT
   ========================================================================== */

.entity-card-primary-value,
.entity-card-amount,
.entity-card-total{
  display:block;
  color:#0f172a;
  font-size:15px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.015em;
}

.entity-card-amount.is-positive{
  color:#047857;
}

.entity-card-amount.is-negative{
  color:#b91c1c;
}

.entity-card-amount.is-pending{
  color:#b45309;
}

/* ==========================================================================
   19. TRUNCATED AND MULTILINE CONTENT
   ========================================================================== */

.entity-card-truncate{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.entity-card-clamp{
  display:-webkit-box;
  max-width:100%;
  overflow:hidden;
  line-height:1.45;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.entity-card-clamp-3{
  -webkit-line-clamp:3;
}

/* ==========================================================================
   20. MOBILE BODY AND DETAILS
   ========================================================================== */

@media (max-width:575.98px){
  .entity-card-context{
    gap:5px 8px;
    padding:7px 0;
    font-size:11px;
  }

  .entity-card-context-item + .entity-card-context-item::before{
    display:none;
  }

  .entity-card-body{
    padding-top:9px;
  }

  .entity-card-details,
  .entity-card-fields,
  .entity-card-info-grid{
    gap:8px 10px;
  }

  .entity-card-label,
  .entity-card-field-label,
  .entity-card-detail-label{
    font-size:10px;
  }

  .entity-card-value,
  .entity-card-field-value,
  .entity-card-detail-value{
    font-size:12px;
  }

  .entity-card-primary-value,
  .entity-card-amount,
  .entity-card-total{
    font-size:14px;
  }
}

@media (max-width:389.98px){
  .entity-card-details,
  .entity-card-fields,
  .entity-card-info-grid{
    grid-template-columns:1fr;
  }

  .entity-card-field.full-width,
  .entity-card-detail.full-width,
  .entity-card-info-item.full-width,
  .entity-card-field--full,
  .entity-card-detail--full{
    grid-column:auto;
  }

  .entity-card-row{
    flex-direction:column;
    gap:3px;
  }

  .entity-card-row .entity-card-label,
  .entity-card-row .entity-card-value{
    flex:auto;
    width:100%;
    text-align:left;
  }
}

/* ==========================================================================
   21. CARD MEDIA
   ========================================================================== */

.entity-card-media{
  position:relative;
  width:100%;
  min-width:0;
  margin-bottom:10px;
  overflow:hidden;
  background:
    linear-gradient(
      145deg,
      #f1f5f9,
      #e8eef6
    );
  border:1px solid var(--vg-card-border-soft);
  border-radius:10px;
}

.entity-card-media img{
  display:block;
  width:100%;
  height:150px;
  object-fit:cover;
}

.entity-card-thumbnail{
  display:block;
  flex:0 0 54px;
  width:54px;
  height:54px;
  overflow:hidden;
  background:#f1f5f9;
  border:1px solid var(--vg-card-border);
  border-radius:9px;
}

.entity-card-thumbnail img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ==========================================================================
   22. CARD TAGS AND CHIPS
   ========================================================================== */

.entity-card-tags,
.entity-card-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  min-width:0;
}

.entity-card-tag,
.entity-card-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  max-width:100%;
  min-height:22px;
  padding:3px 7px;
  overflow:hidden;
  color:#475569;
  font-size:10.5px;
  font-weight:650;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:999px;
}

.entity-card-tag i,
.entity-card-chip i{
  flex:0 0 auto;
  color:var(--vg-card-primary);
  font-size:11px;
}

/* ==========================================================================
   23. NOTES AND DESCRIPTIONS
   ========================================================================== */

.entity-card-notes,
.entity-card-description,
.entity-card-message{
  position:relative;
  min-width:0;
  margin:0;
  padding:9px 10px;
  overflow-wrap:anywhere;
  color:#475569;
  font-size:11.5px;
  font-weight:500;
  line-height:1.5;
  background:
    linear-gradient(
      145deg,
      #f8fafc,
      #f3f7fb
    );
  border:1px solid #e5ecf4;
  border-left:3px solid rgba(37,99,235,.55);
  border-radius:8px;
}

.entity-card-notes-title,
.entity-card-description-title{
  display:block;
  margin-bottom:4px;
  color:#334155;
  font-size:10.5px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.035em;
  text-transform:uppercase;
}

/* ==========================================================================
   24. ALERT AND INFORMATION BLOCKS
   ========================================================================== */

.entity-card-alert,
.entity-card-info,
.entity-card-warning,
.entity-card-error,
.entity-card-success{
  display:flex;
  align-items:flex-start;
  gap:7px;
  min-width:0;
  padding:8px 9px;
  color:#475569;
  font-size:11.5px;
  font-weight:550;
  line-height:1.4;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:8px;
}

.entity-card-alert i,
.entity-card-info i,
.entity-card-warning i,
.entity-card-error i,
.entity-card-success i{
  flex:0 0 auto;
  margin-top:1px;
  font-size:14px;
}

.entity-card-info{
  color:#1e40af;
  background:#eff6ff;
  border-color:#bfdbfe;
}

.entity-card-warning{
  color:#92400e;
  background:#fffbeb;
  border-color:#fde68a;
}

.entity-card-error{
  color:#991b1b;
  background:#fef2f2;
  border-color:#fecaca;
}

.entity-card-success{
  color:#166534;
  background:#f0fdf4;
  border-color:#bbf7d0;
}

/* ==========================================================================
   25. AUDIT INFORMATION
   ========================================================================== */

.entity-card-audit{
  display:grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
  gap:7px 12px;
  min-width:0;
  padding:9px 0;
  border-top:1px solid var(--vg-card-border-soft);
}

.entity-card-audit-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.entity-card-audit-label{
  overflow:hidden;
  color:var(--vg-card-text-soft);
  font-size:9.5px;
  font-weight:750;
  line-height:1.2;
  letter-spacing:.025em;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-transform:uppercase;
}

.entity-card-audit-value{
  overflow:hidden;
  color:var(--vg-card-text-muted);
  font-size:10.5px;
  font-weight:550;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ==========================================================================
   26. CARD FOOTER
   ========================================================================== */

.entity-card-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid var(--vg-card-border-soft);
}

.entity-card-footer-meta{
  display:flex;
  flex:1 1 auto;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 10px;
  min-width:0;
  color:var(--vg-card-text-muted);
  font-size:10.5px;
  font-weight:550;
  line-height:1.35;
}

.entity-card-footer-meta span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-width:0;
}

.entity-card-footer-meta i{
  flex:0 0 auto;
  color:var(--vg-card-text-soft);
  font-size:12px;
}

/* ==========================================================================
   27. FOOTER ACTIONS
   ========================================================================== */

.entity-card-actions{
  display:flex;
  flex:0 0 auto;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}

.entity-card-actions .btn,
.entity-card-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:29px;
  padding:5px 9px;
  color:#475569;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  background:#ffffff;
  border:1px solid #dbe4ef;
  border-radius:8px;
  box-shadow:0 1px 2px rgba(15,23,42,.035);
  cursor:pointer;
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.entity-card-actions .btn:hover,
.entity-card-btn:hover{
  color:var(--vg-card-primary);
  background:#f8fbff;
  border-color:rgba(37,99,235,.35);
  box-shadow:0 4px 10px rgba(37,99,235,.08);
  transform:translateY(-1px);
}

.entity-card-actions .btn-primary,
.entity-card-btn.is-primary{
  color:#ffffff;
  background:
    linear-gradient(
      135deg,
      #2563eb,
      #1d4ed8
    );
  border-color:#2563eb;
  box-shadow:0 4px 10px rgba(37,99,235,.18);
}

.entity-card-actions .btn-primary:hover,
.entity-card-btn.is-primary:hover{
  color:#ffffff;
  background:
    linear-gradient(
      135deg,
      #1d4ed8,
      #1e40af
    );
  border-color:#1d4ed8;
}

.entity-card-actions .btn-danger,
.entity-card-btn.is-danger{
  color:#b91c1c;
  background:#fffafa;
  border-color:#fecaca;
}

.entity-card-actions .btn-danger:hover,
.entity-card-btn.is-danger:hover{
  color:#991b1b;
  background:#fef2f2;
  border-color:#fca5a5;
}

/* ==========================================================================
   28. MOBILE MEDIA, AUDIT, AND FOOTER
   ========================================================================== */

@media (max-width:575.98px){
  .entity-card-media img{
    height:130px;
  }

  .entity-card-notes,
  .entity-card-description,
  .entity-card-message{
    padding:8px 9px;
    font-size:11px;
  }

  .entity-card-footer{
    align-items:stretch;
  }

  .entity-card-footer-meta,
  .entity-card-actions{
    width:100%;
  }

  .entity-card-actions{
    justify-content:flex-start;
  }

  .entity-card-actions .btn,
  .entity-card-btn{
    min-height:28px;
    padding:5px 8px;
    font-size:10.5px;
  }
}

@media (max-width:389.98px){
  .entity-card-audit{
    grid-template-columns:1fr;
  }

  .entity-card-actions .btn,
  .entity-card-btn{
    flex:1 1 auto;
  }
}

/* ==========================================================================
   29. ENTITY CARD GRID
   ========================================================================== */

.entity-card-grid,
.cards-grid,
.record-card-grid{
  display:grid;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(310px,1fr)
    );
  align-items:stretch;
  width:100%;
  min-width:0;
  gap:12px;
  margin:0;
  padding:0;
}

/* Prevent grid children from creating horizontal overflow */

.entity-card-grid > *,
.cards-grid > *,
.record-card-grid > *{
  min-width:0;
}

/* ==========================================================================
   30. GRID COLUMN OPTIONS
   ========================================================================== */

.entity-card-grid.is-single-column,
.entity-card-grid--one{
  grid-template-columns:1fr;
}

.entity-card-grid.is-two-columns,
.entity-card-grid--two{
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
}

.entity-card-grid.is-three-columns,
.entity-card-grid--three{
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );
}

.entity-card-grid.is-four-columns,
.entity-card-grid--four{
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );
}

/* ==========================================================================
   31. DENSE AND SPACIOUS GRID OPTIONS
   ========================================================================== */

.entity-card-grid.is-dense{
  gap:8px;
}

.entity-card-grid.is-spacious{
  gap:16px;
}

/* ==========================================================================
   32. COMPACT CARD VARIANT
   ========================================================================== */

.entity-card.is-compact,
.entity-card--compact{
  --vg-card-padding-x:11px;
  --vg-card-padding-y:10px;
  --vg-card-radius:11px;
}

.entity-card.is-compact .entity-card-header,
.entity-card--compact .entity-card-header{
  padding-top:2px;
  padding-bottom:8px;
}

.entity-card.is-compact .entity-card-icon,
.entity-card.is-compact .entity-card-avatar,
.entity-card--compact .entity-card-icon,
.entity-card--compact .entity-card-avatar{
  flex-basis:34px;
  width:34px;
  height:34px;
  font-size:16px;
  border-radius:9px;
}

.entity-card.is-compact .entity-card-title,
.entity-card--compact .entity-card-title{
  font-size:13.5px;
}

.entity-card.is-compact .entity-card-subtitle,
.entity-card--compact .entity-card-subtitle{
  font-size:11px;
}

.entity-card.is-compact .entity-card-context,
.entity-card--compact .entity-card-context{
  padding:6px 0;
  font-size:10.5px;
}

.entity-card.is-compact .entity-card-body,
.entity-card--compact .entity-card-body{
  padding-top:8px;
}

.entity-card.is-compact .entity-card-details,
.entity-card.is-compact .entity-card-fields,
.entity-card.is-compact .entity-card-info-grid,
.entity-card--compact .entity-card-details,
.entity-card--compact .entity-card-fields,
.entity-card--compact .entity-card-info-grid{
  gap:6px 10px;
}

.entity-card.is-compact .entity-card-label,
.entity-card.is-compact .entity-card-field-label,
.entity-card.is-compact .entity-card-detail-label,
.entity-card--compact .entity-card-label,
.entity-card--compact .entity-card-field-label,
.entity-card--compact .entity-card-detail-label{
  font-size:9.75px;
}

.entity-card.is-compact .entity-card-value,
.entity-card.is-compact .entity-card-field-value,
.entity-card.is-compact .entity-card-detail-value,
.entity-card--compact .entity-card-value,
.entity-card--compact .entity-card-field-value,
.entity-card--compact .entity-card-detail-value{
  font-size:11.5px;
}

.entity-card.is-compact .entity-card-footer,
.entity-card--compact .entity-card-footer{
  padding-top:8px;
}

/* ==========================================================================
   33. FEATURED CARD VARIANT
   ========================================================================== */

.entity-card.is-featured,
.entity-card--featured{
  border-color:rgba(37,99,235,.32);
  box-shadow:
    0 0 0 1px rgba(37,99,235,.04),
    0 8px 24px rgba(37,99,235,.1);
}

.entity-card.is-featured::before,
.entity-card--featured::before{
  height:4px;
  opacity:1;
}

/* ==========================================================================
   34. SELECTED CARD STATE
   ========================================================================== */

.entity-card.is-selected,
.entity-card[aria-selected="true"]{
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f3f8ff 100%
    );
  border-color:var(--vg-card-primary);
  box-shadow:
    0 0 0 3px var(--vg-card-primary-soft),
    var(--vg-card-shadow-hover);
}

.entity-card.is-selected::before,
.entity-card[aria-selected="true"]::before{
  height:4px;
  opacity:1;
}

/* ==========================================================================
   35. DISABLED CARD STATE
   ========================================================================== */

.entity-card.is-disabled,
.entity-card[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.62;
  filter:saturate(.75);
  pointer-events:none;
}

.entity-card.is-disabled:hover,
.entity-card[aria-disabled="true"]:hover{
  border-color:var(--vg-card-border);
  box-shadow:var(--vg-card-shadow);
  transform:none;
}

/* ==========================================================================
   36. LOADING CARD
   ========================================================================== */

.entity-card.is-loading{
  min-height:190px;
  pointer-events:none;
}

.entity-card.is-loading > *{
  visibility:hidden;
}

.entity-card.is-loading::after{
  position:absolute;
  top:50%;
  right:auto;
  left:50%;
  z-index:2;
  width:28px;
  height:28px;
  content:"";
  background:transparent;
  border:3px solid #dbeafe;
  border-top-color:var(--vg-card-primary);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:vg-card-spin .75s linear infinite;
}

@keyframes vg-card-spin{
  to{
    transform:
      translate(-50%,-50%)
      rotate(360deg);
  }
}

/* ==========================================================================
   37. CARD SKELETON
   ========================================================================== */

.entity-card-skeleton{
  position:relative;
  display:block;
  width:100%;
  height:12px;
  overflow:hidden;
  background:#e8eef5;
  border-radius:999px;
}

.entity-card-skeleton::after{
  position:absolute;
  inset:0;
  content:"";
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.75) 50%,
      transparent 100%
    );
  transform:translateX(-100%);
  animation:vg-card-shimmer 1.35s ease-in-out infinite;
}

.entity-card-skeleton.is-title{
  width:68%;
  height:15px;
}

.entity-card-skeleton.is-short{
  width:42%;
}

.entity-card-skeleton.is-medium{
  width:75%;
}

.entity-card-skeleton.is-full{
  width:100%;
}

@keyframes vg-card-shimmer{
  100%{
    transform:translateX(100%);
  }
}

/* ==========================================================================
   38. EMPTY CARD GRID
   ========================================================================== */

.entity-card-empty,
.entity-card-grid-empty{
  display:flex;
  grid-column:1 / -1;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:190px;
  padding:28px 20px;
  color:var(--vg-card-text-muted);
  text-align:center;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.94),
      rgba(248,250,252,.96)
    );
  border:1px dashed #cbd5e1;
  border-radius:var(--vg-card-radius);
}

.entity-card-empty-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin-bottom:10px;
  color:var(--vg-card-primary);
  font-size:22px;
  background:var(--vg-card-primary-soft);
  border-radius:12px;
}

.entity-card-empty-title{
  margin:0 0 4px;
  color:var(--vg-card-text);
  font-size:14px;
  font-weight:750;
  line-height:1.3;
}

.entity-card-empty-text{
  max-width:420px;
  margin:0;
  color:var(--vg-card-text-muted);
  font-size:12px;
  font-weight:500;
  line-height:1.5;
}

/* ==========================================================================
   39. RESPONSIVE CARD GRID
   ========================================================================== */

@media (max-width:1199.98px){
  .entity-card-grid.is-four-columns,
  .entity-card-grid--four{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }
}

@media (max-width:991.98px){
  .entity-card-grid,
  .cards-grid,
  .record-card-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
    gap:10px;
  }

  .entity-card-grid.is-three-columns,
  .entity-card-grid--three,
  .entity-card-grid.is-four-columns,
  .entity-card-grid--four{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }
}

@media (max-width:575.98px){
  .entity-card-grid,
  .cards-grid,
  .record-card-grid,
  .entity-card-grid.is-two-columns,
  .entity-card-grid--two,
  .entity-card-grid.is-three-columns,
  .entity-card-grid--three,
  .entity-card-grid.is-four-columns,
  .entity-card-grid--four{
    grid-template-columns:1fr;
    gap:9px;
  }

  .entity-card-empty,
  .entity-card-grid-empty{
    min-height:160px;
    padding:22px 14px;
  }
}

/* ==========================================================================
   40. REDUCED-MOTION GRID SUPPORT
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .entity-card.is-loading::after,
  .entity-card-skeleton::after{
    animation:none;
  }
}

/* ==========================================================================
   41. GLOBAL STATUS TOKENS
   ========================================================================== */

:root{
  --vg-status-neutral-text:#475569;
  --vg-status-neutral-bg:#f1f5f9;
  --vg-status-neutral-border:#cbd5e1;

  --vg-status-success-text:#047857;
  --vg-status-success-bg:#ecfdf5;
  --vg-status-success-border:#a7f3d0;

  --vg-status-warning-text:#b45309;
  --vg-status-warning-bg:#fffbeb;
  --vg-status-warning-border:#fde68a;

  --vg-status-danger-text:#b91c1c;
  --vg-status-danger-bg:#fef2f2;
  --vg-status-danger-border:#fecaca;

  --vg-status-info-text:#1d4ed8;
  --vg-status-info-bg:#eff6ff;
  --vg-status-info-border:#bfdbfe;

  --vg-status-purple-text:#7e22ce;
  --vg-status-purple-bg:#faf5ff;
  --vg-status-purple-border:#e9d5ff;

  --vg-status-cyan-text:#0e7490;
  --vg-status-cyan-bg:#ecfeff;
  --vg-status-cyan-border:#a5f3fc;

  --vg-status-dark-text:#334155;
  --vg-status-dark-bg:#e2e8f0;
  --vg-status-dark-border:#cbd5e1;
}

/* ==========================================================================
   42. MASTER STATUS BADGE
   ========================================================================== */

.entity-card-status,
.entity-status,
.status-badge,
.badge-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  max-width:145px;
  min-height:23px;
  padding:4px 8px;
  overflow:hidden;
  color:var(--vg-status-neutral-text);
  font-size:10.5px;
  font-weight:750;
  line-height:1.15;
  letter-spacing:.01em;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
  background:var(--vg-status-neutral-bg);
  border:1px solid var(--vg-status-neutral-border);
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

.entity-card-status::before,
.entity-status::before,
.status-badge::before,
.badge-status::before{
  flex:0 0 6px;
  width:6px;
  height:6px;
  content:"";
  background:currentColor;
  border-radius:50%;
  opacity:.8;
}

/* ==========================================================================
   43. SUCCESS STATUSES
   ========================================================================== */

.status-active,
.status-approved,
.status-completed,
.status-complete,
.status-success,
.status-paid,
.status-cleared,
.status-verified,
.status-confirmed,
.status-available,
.status-enabled,
.status-accepted,
.status-delivered,
.status-received,
.status-restored,
.status-valid,
.status-present,
.status-processed,
[data-status="active"],
[data-status="approved"],
[data-status="completed"],
[data-status="complete"],
[data-status="success"],
[data-status="paid"],
[data-status="cleared"],
[data-status="verified"],
[data-status="confirmed"],
[data-status="available"],
[data-status="enabled"],
[data-status="accepted"],
[data-status="delivered"],
[data-status="received"],
[data-status="restored"],
[data-status="valid"],
[data-status="present"],
[data-status="processed"]{
  color:var(--vg-status-success-text);
  background:var(--vg-status-success-bg);
  border-color:var(--vg-status-success-border);
}

/* ==========================================================================
   44. WARNING STATUSES
   ========================================================================== */

.status-pending,
.status-draft,
.status-warning,
.status-awaiting,
.status-in-progress,
.status-partial,
.status-partially-paid,
.status-low,
.status-due,
.status-review,
.status-under-review,
.status-scheduled,
.status-reserved,
.status-on-hold,
[data-status="pending"],
[data-status="draft"],
[data-status="warning"],
[data-status="awaiting"],
[data-status="in-progress"],
[data-status="in_progress"],
[data-status="partial"],
[data-status="partially-paid"],
[data-status="partially_paid"],
[data-status="low"],
[data-status="due"],
[data-status="review"],
[data-status="under-review"],
[data-status="under_review"],
[data-status="scheduled"],
[data-status="reserved"],
[data-status="on-hold"],
[data-status="on_hold"]{
  color:var(--vg-status-warning-text);
  background:var(--vg-status-warning-bg);
  border-color:var(--vg-status-warning-border);
}

/* ==========================================================================
   45. DANGER STATUSES
   ========================================================================== */

.status-inactive,
.status-rejected,
.status-cancelled,
.status-canceled,
.status-failed,
.status-error,
.status-danger,
.status-overdue,
.status-expired,
.status-voided,
.status-void,
.status-deleted,
.status-disabled,
.status-suspended,
.status-blocked,
.status-denied,
.status-unavailable,
.status-out-of-stock,
.status-absent,
.status-refunded,
[data-status="inactive"],
[data-status="rejected"],
[data-status="cancelled"],
[data-status="canceled"],
[data-status="failed"],
[data-status="error"],
[data-status="danger"],
[data-status="overdue"],
[data-status="expired"],
[data-status="voided"],
[data-status="void"],
[data-status="deleted"],
[data-status="disabled"],
[data-status="suspended"],
[data-status="blocked"],
[data-status="denied"],
[data-status="unavailable"],
[data-status="out-of-stock"],
[data-status="out_of_stock"],
[data-status="absent"],
[data-status="refunded"]{
  color:var(--vg-status-danger-text);
  background:var(--vg-status-danger-bg);
  border-color:var(--vg-status-danger-border);
}

/* ==========================================================================
   46. INFORMATION STATUSES
   ========================================================================== */

.status-info,
.status-new,
.status-open,
.status-submitted,
.status-created,
.status-issued,
.status-sent,
.status-invoiced,
.status-registered,
.status-admitted,
.status-assigned,
.status-running,
[data-status="info"],
[data-status="new"],
[data-status="open"],
[data-status="submitted"],
[data-status="created"],
[data-status="issued"],
[data-status="sent"],
[data-status="invoiced"],
[data-status="registered"],
[data-status="admitted"],
[data-status="assigned"],
[data-status="running"]{
  color:var(--vg-status-info-text);
  background:var(--vg-status-info-bg);
  border-color:var(--vg-status-info-border);
}

/* ==========================================================================
   47. PURPLE WORKFLOW STATUSES
   ========================================================================== */

.status-processing,
.status-authorized,
.status-authorised,
.status-queued,
.status-referred,
.status-escalated,
.status-transferred,
.status-returned,
[data-status="processing"],
[data-status="authorized"],
[data-status="authorised"],
[data-status="queued"],
[data-status="referred"],
[data-status="escalated"],
[data-status="transferred"],
[data-status="returned"]{
  color:var(--vg-status-purple-text);
  background:var(--vg-status-purple-bg);
  border-color:var(--vg-status-purple-border);
}

/* ==========================================================================
   48. CYAN WORKFLOW STATUSES
   ========================================================================== */

.status-in-service,
.status-in-use,
.status-checked-in,
.status-arrived,
.status-dispensed,
.status-applied,
.status-reconciled,
[data-status="in-service"],
[data-status="in_service"],
[data-status="in-use"],
[data-status="in_use"],
[data-status="checked-in"],
[data-status="checked_in"],
[data-status="arrived"],
[data-status="dispensed"],
[data-status="applied"],
[data-status="reconciled"]{
  color:var(--vg-status-cyan-text);
  background:var(--vg-status-cyan-bg);
  border-color:var(--vg-status-cyan-border);
}

/* ==========================================================================
   49. NEUTRAL AND CLOSED STATUSES
   ========================================================================== */

.status-neutral,
.status-unknown,
.status-none,
.status-closed,
.status-archived,
.status-discharged,
.status-not-started,
.status-not-applicable,
[data-status="neutral"],
[data-status="unknown"],
[data-status="none"],
[data-status="closed"],
[data-status="archived"],
[data-status="discharged"],
[data-status="not-started"],
[data-status="not_started"],
[data-status="not-applicable"],
[data-status="not_applicable"]{
  color:var(--vg-status-dark-text);
  background:var(--vg-status-dark-bg);
  border-color:var(--vg-status-dark-border);
}

/* ==========================================================================
   50. STATUS SIZE VARIANTS
   ========================================================================== */

.entity-card-status.is-small,
.entity-status.is-small,
.status-badge.is-small,
.badge-status.is-small,
.status-badge-sm{
  min-height:20px;
  padding:3px 6px;
  font-size:9.5px;
}

.entity-card-status.is-large,
.entity-status.is-large,
.status-badge.is-large,
.badge-status.is-large,
.status-badge-lg{
  min-height:27px;
  padding:5px 10px;
  font-size:11.5px;
}

.entity-card-status.is-square,
.entity-status.is-square,
.status-badge.is-square,
.badge-status.is-square{
  border-radius:7px;
}

/* ==========================================================================
   51. STATUS WITHOUT INDICATOR DOT
   ========================================================================== */

.entity-card-status.no-dot::before,
.entity-status.no-dot::before,
.status-badge.no-dot::before,
.badge-status.no-dot::before{
  display:none;
}

/* ==========================================================================
   52. PULSING LIVE STATUS
   ========================================================================== */

.status-live::before,
.status-online::before,
[data-status="live"]::before,
[data-status="online"]::before{
  color:var(--vg-status-success-text);
  background:currentColor;
  box-shadow:0 0 0 0 rgba(4,120,87,.35);
  animation:vg-status-pulse 1.8s ease-out infinite;
}

.status-live,
.status-online,
[data-status="live"],
[data-status="online"]{
  color:var(--vg-status-success-text);
  background:var(--vg-status-success-bg);
  border-color:var(--vg-status-success-border);
}

@keyframes vg-status-pulse{
  0%{
    box-shadow:0 0 0 0 rgba(4,120,87,.35);
  }

  70%{
    box-shadow:0 0 0 5px rgba(4,120,87,0);
  }

  100%{
    box-shadow:0 0 0 0 rgba(4,120,87,0);
  }
}

/* ==========================================================================
   53. MOBILE STATUS ADJUSTMENTS
   ========================================================================== */

@media (max-width:575.98px){
  .entity-card-status,
  .entity-status,
  .status-badge,
  .badge-status{
    max-width:110px;
    min-height:22px;
    padding:4px 7px;
    font-size:10px;
  }
}

/* ==========================================================================
   54. REDUCED-MOTION STATUS SUPPORT
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .status-live::before,
  .status-online::before,
  [data-status="live"]::before,
  [data-status="online"]::before{
    animation:none;
  }
}

/* ==========================================================================
   55. CARD ACTION MENU
   ========================================================================== */

.entity-card-menu{
  position:relative;
  display:inline-flex;
  flex:0 0 auto;
}

.entity-card-menu-panel{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:1050;
  display:none;
  width:max-content;
  min-width:170px;
  max-width:240px;
  padding:5px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid #dbe4ef;
  border-radius:10px;
  box-shadow:
    0 14px 35px rgba(15,23,42,.14),
    0 3px 10px rgba(15,23,42,.07);
}

.entity-card-menu.is-open .entity-card-menu-panel,
.entity-card-menu[aria-expanded="true"] .entity-card-menu-panel,
.entity-card-menu-panel.is-open,
.entity-card-menu-panel.show{
  display:block;
}

/* ==========================================================================
   56. ACTION MENU ITEMS
   ========================================================================== */

.entity-card-menu-item{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:32px;
  padding:6px 8px;
  color:#475569;
  font-size:11.5px;
  font-weight:650;
  line-height:1.25;
  text-align:left;
  text-decoration:none;
  white-space:nowrap;
  background:transparent;
  border:0;
  border-radius:7px;
  cursor:pointer;
  transition:
    color .16s ease,
    background-color .16s ease;
}

.entity-card-menu-item i{
  flex:0 0 16px;
  width:16px;
  color:#64748b;
  font-size:14px;
  line-height:1;
  text-align:center;
}

.entity-card-menu-item:hover,
.entity-card-menu-item:focus-visible{
  color:var(--vg-card-primary);
  background:#eff6ff;
  outline:0;
}

.entity-card-menu-item:hover i,
.entity-card-menu-item:focus-visible i{
  color:var(--vg-card-primary);
}

.entity-card-menu-item.is-danger{
  color:#b91c1c;
}

.entity-card-menu-item.is-danger i{
  color:#dc2626;
}

.entity-card-menu-item.is-danger:hover,
.entity-card-menu-item.is-danger:focus-visible{
  color:#991b1b;
  background:#fef2f2;
}

/* ==========================================================================
   57. ACTION MENU DIVIDER AND LABEL
   ========================================================================== */

.entity-card-menu-divider{
  height:1px;
  margin:4px 2px;
  background:#e8edf3;
  border:0;
}

.entity-card-menu-label{
  display:block;
  padding:5px 8px 3px;
  color:#94a3b8;
  font-size:9.5px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.05em;
  text-transform:uppercase;
}

/* ==========================================================================
   58. DISABLED MENU ITEMS
   ========================================================================== */

.entity-card-menu-item:disabled,
.entity-card-menu-item.is-disabled,
.entity-card-menu-item[aria-disabled="true"]{
  color:#94a3b8;
  background:transparent;
  cursor:not-allowed;
  opacity:.65;
  pointer-events:none;
}

.entity-card-menu-item:disabled i,
.entity-card-menu-item.is-disabled i,
.entity-card-menu-item[aria-disabled="true"] i{
  color:#94a3b8;
}

/* ==========================================================================
   59. CARD CHECKBOX AND SELECTION CONTROL
   ========================================================================== */

.entity-card-select{
  position:absolute;
  top:10px;
  left:10px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.entity-card-select input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--vg-card-primary);
  cursor:pointer;
}

.entity-card.has-selection-control{
  padding-left:
    calc(
      var(--vg-card-padding-x) + 22px
    );
}

.entity-card-select input:focus-visible{
  outline:2px solid rgba(37,99,235,.35);
  outline-offset:2px;
}

/* ==========================================================================
   60. CLICKABLE CARD
   ========================================================================== */

.entity-card.is-clickable,
.entity-card[data-card-link]{
  cursor:pointer;
}

.entity-card.is-clickable:active,
.entity-card[data-card-link]:active{
  transform:translateY(0);
}

.entity-card-link{
  color:inherit;
  text-decoration:none;
}

.entity-card-link::after{
  position:absolute;
  z-index:1;
  content:"";
  inset:0;
}

.entity-card a,
.entity-card button,
.entity-card input,
.entity-card select,
.entity-card textarea,
.entity-card [role="button"]{
  position:relative;
  z-index:2;
}

/* ==========================================================================
   61. CARD TOOLTIP
   ========================================================================== */

.entity-card-tooltip{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.entity-card-tooltip-text{
  position:absolute;
  right:0;
  bottom:calc(100% + 7px);
  z-index:1060;
  width:max-content;
  max-width:220px;
  padding:5px 7px;
  color:#ffffff;
  font-size:10px;
  font-weight:600;
  line-height:1.35;
  white-space:normal;
  background:#0f172a;
  border-radius:6px;
  box-shadow:0 5px 14px rgba(15,23,42,.22);
  opacity:0;
  visibility:hidden;
  transform:translateY(3px);
  transition:
    opacity .16s ease,
    visibility .16s ease,
    transform .16s ease;
  pointer-events:none;
}

.entity-card-tooltip-text::after{
  position:absolute;
  top:100%;
  right:8px;
  width:0;
  height:0;
  content:"";
  border:4px solid transparent;
  border-top-color:#0f172a;
}

.entity-card-tooltip:hover .entity-card-tooltip-text,
.entity-card-tooltip:focus-within .entity-card-tooltip-text{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* ==========================================================================
   62. EXPANDABLE CARD CONTENT
   ========================================================================== */

.entity-card-collapsible{
  display:none;
  min-width:0;
  padding-top:9px;
  border-top:1px solid var(--vg-card-border-soft);
}

.entity-card.is-expanded .entity-card-collapsible,
.entity-card[aria-expanded="true"] .entity-card-collapsible,
.entity-card-collapsible.show{
  display:block;
}

.entity-card-expand-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:27px;
  padding:4px 7px;
  color:var(--vg-card-primary);
  font-size:10.5px;
  font-weight:700;
  line-height:1.2;
  background:transparent;
  border:0;
  border-radius:6px;
  cursor:pointer;
}

.entity-card-expand-btn:hover{
  background:var(--vg-card-primary-soft);
}

.entity-card-expand-btn i{
  font-size:13px;
  transition:transform .18s ease;
}

.entity-card.is-expanded .entity-card-expand-btn i,
.entity-card[aria-expanded="true"] .entity-card-expand-btn i{
  transform:rotate(180deg);
}

/* ==========================================================================
   63. CARD PROGRESS
   ========================================================================== */

.entity-card-progress{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}

.entity-card-progress-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  color:var(--vg-card-text-muted);
  font-size:10.5px;
  font-weight:650;
  line-height:1.25;
}

.entity-card-progress-value{
  flex:0 0 auto;
  color:var(--vg-card-text);
  font-weight:750;
}

.entity-card-progress-track{
  position:relative;
  width:100%;
  height:6px;
  overflow:hidden;
  background:#e8eef5;
  border-radius:999px;
}

.entity-card-progress-bar{
  display:block;
  width:0;
  max-width:100%;
  height:100%;
  background:
    linear-gradient(
      90deg,
      #2563eb,
      #38bdf8
    );
  border-radius:inherit;
  transition:width .3s ease;
}

.entity-card-progress-bar.is-success{
  background:
    linear-gradient(
      90deg,
      #059669,
      #34d399
    );
}

.entity-card-progress-bar.is-warning{
  background:
    linear-gradient(
      90deg,
      #d97706,
      #fbbf24
    );
}

.entity-card-progress-bar.is-danger{
  background:
    linear-gradient(
      90deg,
      #dc2626,
      #fb7185
    );
}

/* ==========================================================================
   64. CARD COUNTERS
   ========================================================================== */

.entity-card-counters{
  display:grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(72px,1fr)
    );
  gap:6px;
  min-width:0;
}

.entity-card-counter{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  padding:7px 8px;
  background:#f8fafc;
  border:1px solid #e7edf4;
  border-radius:8px;
}

.entity-card-counter-value{
  overflow:hidden;
  color:#0f172a;
  font-size:14px;
  font-weight:800;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.entity-card-counter-label{
  overflow:hidden;
  color:#64748b;
  font-size:9.5px;
  font-weight:650;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ==========================================================================
   65. KEYBOARD FOCUS
   ========================================================================== */

.entity-card:focus-visible,
.entity-card.is-clickable:focus-visible,
.entity-card[data-card-link]:focus-visible{
  outline:0;
  border-color:var(--vg-card-primary);
  box-shadow:
    0 0 0 3px var(--vg-card-primary-soft),
    var(--vg-card-shadow-hover);
}

/* ==========================================================================
   66. MOBILE INTERACTION ADJUSTMENTS
   ========================================================================== */

@media (max-width:575.98px){
  .entity-card-menu-panel{
    min-width:160px;
    max-width:min(220px,calc(100vw - 24px));
  }

  .entity-card-menu-item{
    min-height:34px;
    font-size:11px;
  }

  .entity-card-select{
    top:9px;
    left:9px;
  }

  .entity-card.has-selection-control{
    padding-left:
      calc(
        var(--vg-card-padding-x) + 21px
      );
  }

  .entity-card-counters{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }
}

/* ==========================================================================
   67. REDUCED-MOTION INTERACTION SUPPORT
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .entity-card-tooltip-text,
  .entity-card-expand-btn i,
  .entity-card-progress-bar{
    transition:none;
  }
}

/* ==========================================================================
   68. TABLE-STYLE CARD LIST
   ========================================================================== */

.entity-card-list{
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  gap:8px;
}

.entity-card-list .entity-card{
  flex-direction:row;
  align-items:center;
  gap:12px;
}

.entity-card-list .entity-card-header{
  flex:1 1 260px;
  min-width:0;
  padding:0;
  border-bottom:0;
}

.entity-card-list .entity-card-body{
  flex:2 1 420px;
  padding:0;
}

.entity-card-list .entity-card-footer{
  flex:0 0 auto;
  margin:0;
  padding:0;
  border-top:0;
}

/* ==========================================================================
   69. HORIZONTAL CARD
   ========================================================================== */

.entity-card.is-horizontal,
.entity-card--horizontal{
  display:grid;
  grid-template-columns:minmax(180px,.8fr) minmax(0,1.5fr) auto;
  align-items:center;
  gap:14px;
}

.entity-card.is-horizontal .entity-card-header,
.entity-card--horizontal .entity-card-header{
  min-width:0;
  padding:0;
  border-bottom:0;
}

.entity-card.is-horizontal .entity-card-body,
.entity-card--horizontal .entity-card-body{
  min-width:0;
  padding:0;
}

.entity-card.is-horizontal .entity-card-footer,
.entity-card--horizontal .entity-card-footer{
  min-width:0;
  margin:0;
  padding:0;
  border-top:0;
}

/* ==========================================================================
   70. CARD SECTION
   ========================================================================== */

.entity-card-section{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  padding:10px 0;
}

.entity-card-section:first-child{
  padding-top:0;
}

.entity-card-section:last-child{
  padding-bottom:0;
}

.entity-card-section + .entity-card-section{
  border-top:1px solid var(--vg-card-border-soft);
}

.entity-card-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}

.entity-card-section-title{
  min-width:0;
  margin:0;
  overflow:hidden;
  color:var(--vg-card-text);
  font-size:11.5px;
  font-weight:750;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.entity-card-section-action{
  flex:0 0 auto;
  color:var(--vg-card-primary);
  font-size:10.5px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
}

.entity-card-section-action:hover{
  text-decoration:underline;
}

/* ==========================================================================
   71. DIVIDER
   ========================================================================== */

.entity-card-divider{
  width:100%;
  height:1px;
  margin:8px 0;
  background:var(--vg-card-border-soft);
  border:0;
}

.entity-card-divider.is-dashed{
  height:0;
  background:transparent;
  border-top:1px dashed #dbe4ef;
}

.entity-card-divider.is-strong{
  background:var(--vg-card-border);
}

/* ==========================================================================
   72. META LIST
   ========================================================================== */

.entity-card-meta-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 12px;
  min-width:0;
  margin:0;
  padding:0;
  color:var(--vg-card-text-muted);
  font-size:10.5px;
  font-weight:550;
  line-height:1.35;
  list-style:none;
}

.entity-card-meta-item{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-width:0;
  max-width:100%;
}

.entity-card-meta-item i{
  flex:0 0 auto;
  color:var(--vg-card-text-soft);
  font-size:12px;
}

.entity-card-meta-item span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ==========================================================================
   73. STAT CARDS
   ========================================================================== */

.entity-stat-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  padding:12px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid var(--vg-card-border);
  border-radius:var(--vg-card-radius);
  box-shadow:var(--vg-card-shadow);
}

.entity-stat-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}

.entity-stat-card-label{
  min-width:0;
  overflow:hidden;
  color:var(--vg-card-text-muted);
  font-size:10.5px;
  font-weight:700;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.entity-stat-card-icon{
  display:inline-flex;
  flex:0 0 30px;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  color:var(--vg-card-primary);
  font-size:15px;
  background:var(--vg-card-primary-soft);
  border-radius:8px;
}

.entity-stat-card-value{
  overflow:hidden;
  color:#0f172a;
  font-size:20px;
  font-weight:850;
  line-height:1.15;
  letter-spacing:-.025em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.entity-stat-card-meta{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  color:var(--vg-card-text-muted);
  font-size:10px;
  font-weight:550;
  line-height:1.3;
}

.entity-stat-card-change{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:2px;
  font-weight:750;
}

.entity-stat-card-change.is-positive{
  color:#047857;
}

.entity-stat-card-change.is-negative{
  color:#b91c1c;
}

.entity-stat-card-change.is-neutral{
  color:#64748b;
}

/* ==========================================================================
   74. STAT CARD GRID
   ========================================================================== */

.entity-stat-grid{
  display:grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(170px,1fr)
    );
  width:100%;
  min-width:0;
  gap:9px;
}

.entity-stat-grid > *{
  min-width:0;
}

/* ==========================================================================
   75. CARD COLOR ACCENTS
   ========================================================================== */

.entity-card.is-success,
.entity-stat-card.is-success{
  --vg-card-primary:#059669;
  --vg-card-primary-soft:rgba(5,150,105,.1);
}

.entity-card.is-warning,
.entity-stat-card.is-warning{
  --vg-card-primary:#d97706;
  --vg-card-primary-soft:rgba(217,119,6,.1);
}

.entity-card.is-danger,
.entity-stat-card.is-danger{
  --vg-card-primary:#dc2626;
  --vg-card-primary-soft:rgba(220,38,38,.1);
}

.entity-card.is-purple,
.entity-stat-card.is-purple{
  --vg-card-primary:#7c3aed;
  --vg-card-primary-soft:rgba(124,58,237,.1);
}

.entity-card.is-cyan,
.entity-stat-card.is-cyan{
  --vg-card-primary:#0891b2;
  --vg-card-primary-soft:rgba(8,145,178,.1);
}

/* ==========================================================================
   76. CARD RIBBON
   ========================================================================== */

.entity-card-ribbon{
  position:absolute;
  top:12px;
  right:-31px;
  z-index:3;
  width:110px;
  padding:4px 8px;
  overflow:hidden;
  color:#ffffff;
  font-size:9px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.04em;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-transform:uppercase;
  background:var(--vg-card-primary);
  box-shadow:0 3px 8px rgba(15,23,42,.14);
  transform:rotate(45deg);
}

.entity-card-ribbon.is-success{
  background:#059669;
}

.entity-card-ribbon.is-warning{
  background:#d97706;
}

.entity-card-ribbon.is-danger{
  background:#dc2626;
}

/* ==========================================================================
   77. RESPONSIVE LIST AND HORIZONTAL CARDS
   ========================================================================== */

@media (max-width:991.98px){
  .entity-card-list .entity-card{
    display:grid;
    grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);
    align-items:start;
  }

  .entity-card-list .entity-card-footer{
    grid-column:1 / -1;
    width:100%;
    padding-top:9px;
    border-top:1px solid var(--vg-card-border-soft);
  }

  .entity-card.is-horizontal,
  .entity-card--horizontal{
    grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);
    align-items:start;
  }

  .entity-card.is-horizontal .entity-card-footer,
  .entity-card--horizontal .entity-card-footer{
    grid-column:1 / -1;
    width:100%;
    padding-top:9px;
    border-top:1px solid var(--vg-card-border-soft);
  }
}

@media (max-width:575.98px){
  .entity-card-list .entity-card,
  .entity-card.is-horizontal,
  .entity-card--horizontal{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:9px;
  }

  .entity-card-list .entity-card-header,
  .entity-card-list .entity-card-body,
  .entity-card-list .entity-card-footer,
  .entity-card.is-horizontal .entity-card-header,
  .entity-card.is-horizontal .entity-card-body,
  .entity-card.is-horizontal .entity-card-footer,
  .entity-card--horizontal .entity-card-header,
  .entity-card--horizontal .entity-card-body,
  .entity-card--horizontal .entity-card-footer{
    width:100%;
  }

  .entity-card-list .entity-card-body,
  .entity-card.is-horizontal .entity-card-body,
  .entity-card--horizontal .entity-card-body{
    padding-top:8px;
    border-top:1px solid var(--vg-card-border-soft);
  }

  .entity-stat-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
    gap:8px;
  }

  .entity-stat-card{
    padding:10px;
  }

  .entity-stat-card-value{
    font-size:18px;
  }
}

@media (max-width:389.98px){
  .entity-stat-grid{
    grid-template-columns:1fr;
  }
}

/* ==========================================================================
   78. CARD AVATAR GROUP
   ========================================================================== */

.entity-card-avatar-group{
  display:flex;
  align-items:center;
  min-width:0;
  padding-left:6px;
}

.entity-card-avatar-group .entity-card-avatar{
  flex:0 0 30px;
  width:30px;
  height:30px;
  margin-left:-6px;
  font-size:10px;
  border:2px solid #ffffff;
  border-radius:50%;
  box-shadow:0 1px 3px rgba(15,23,42,.1);
}

.entity-card-avatar-group .entity-card-avatar:first-child{
  margin-left:0;
}

.entity-card-avatar-more{
  display:inline-flex;
  flex:0 0 30px;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  margin-left:-6px;
  color:#475569;
  font-size:9.5px;
  font-weight:800;
  background:#f1f5f9;
  border:2px solid #ffffff;
  border-radius:50%;
}

/* ==========================================================================
   79. CARD TIMELINE
   ========================================================================== */

.entity-card-timeline{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
  margin:0;
  padding:0;
  list-style:none;
}

.entity-card-timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:16px minmax(0,1fr);
  gap:8px;
  min-width:0;
  padding-bottom:10px;
}

.entity-card-timeline-item:last-child{
  padding-bottom:0;
}

.entity-card-timeline-item::before{
  position:absolute;
  top:15px;
  bottom:0;
  left:7px;
  width:1px;
  content:"";
  background:#dbe4ef;
}

.entity-card-timeline-item:last-child::before{
  display:none;
}

.entity-card-timeline-dot{
  position:relative;
  z-index:1;
  width:9px;
  height:9px;
  margin:3px 0 0 3px;
  background:#ffffff;
  border:2px solid var(--vg-card-primary);
  border-radius:50%;
}

.entity-card-timeline-content{
  min-width:0;
}

.entity-card-timeline-title{
  margin:0;
  overflow:hidden;
  color:var(--vg-card-text);
  font-size:11px;
  font-weight:700;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.entity-card-timeline-meta{
  margin-top:2px;
  color:var(--vg-card-text-soft);
  font-size:9.5px;
  font-weight:550;
  line-height:1.3;
}

/* ==========================================================================
   80. CARD DOCUMENT AND ATTACHMENT
   ========================================================================== */

.entity-card-attachment{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:7px 8px;
  color:inherit;
  text-decoration:none;
  background:#f8fafc;
  border:1px solid #e7edf4;
  border-radius:8px;
  transition:
    background-color .16s ease,
    border-color .16s ease;
}

.entity-card-attachment:hover{
  background:#eff6ff;
  border-color:#bfdbfe;
}

.entity-card-attachment-icon{
  display:inline-flex;
  flex:0 0 30px;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  color:var(--vg-card-primary);
  font-size:15px;
  background:var(--vg-card-primary-soft);
  border-radius:7px;
}

.entity-card-attachment-content{
  flex:1 1 auto;
  min-width:0;
}

.entity-card-attachment-name{
  display:block;
  overflow:hidden;
  color:var(--vg-card-text);
  font-size:10.75px;
  font-weight:700;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.entity-card-attachment-meta{
  display:block;
  margin-top:1px;
  overflow:hidden;
  color:var(--vg-card-text-soft);
  font-size:9.5px;
  font-weight:550;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.entity-card-attachment-action{
  flex:0 0 auto;
  color:#64748b;
  font-size:14px;
}

/* ==========================================================================
   81. CARD CONTACT LINKS
   ========================================================================== */

.entity-card-contact-list{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}

.entity-card-contact{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  color:#475569;
  font-size:10.75px;
  font-weight:600;
  line-height:1.35;
  text-decoration:none;
}

.entity-card-contact i{
  flex:0 0 15px;
  width:15px;
  color:var(--vg-card-primary);
  font-size:13px;
  text-align:center;
}

.entity-card-contact span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

a.entity-card-contact:hover{
  color:var(--vg-card-primary);
  text-decoration:underline;
}

/* ==========================================================================
   82. CARD QUICK ACTIONS
   ========================================================================== */

.entity-card-quick-actions{
  display:grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(90px,1fr)
    );
  gap:6px;
  min-width:0;
}

.entity-card-quick-action{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
  min-height:31px;
  padding:6px 8px;
  overflow:hidden;
  color:#475569;
  font-size:10.25px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:8px;
  cursor:pointer;
  transition:
    color .16s ease,
    background-color .16s ease,
    border-color .16s ease;
}

.entity-card-quick-action i{
  flex:0 0 auto;
  font-size:13px;
}

.entity-card-quick-action span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.entity-card-quick-action:hover{
  color:var(--vg-card-primary);
  background:#eff6ff;
  border-color:#bfdbfe;
}

/* ==========================================================================
   83. CARD NOTICE STRIP
   ========================================================================== */

.entity-card-notice{
  display:flex;
  align-items:flex-start;
  gap:7px;
  min-width:0;
  padding:7px 8px;
  color:#1e40af;
  font-size:10.5px;
  font-weight:600;
  line-height:1.4;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  border-radius:8px;
}

.entity-card-notice i{
  flex:0 0 auto;
  margin-top:1px;
  font-size:13px;
}

.entity-card-notice.is-success{
  color:#047857;
  background:#ecfdf5;
  border-color:#a7f3d0;
}

.entity-card-notice.is-warning{
  color:#b45309;
  background:#fffbeb;
  border-color:#fde68a;
}

.entity-card-notice.is-danger{
  color:#b91c1c;
  background:#fef2f2;
  border-color:#fecaca;
}

/* ==========================================================================
   84. CARD OVERFLOW PROTECTION
   ========================================================================== */

.entity-card,
.entity-card *{
  box-sizing:border-box;
}

.entity-card img,
.entity-card video,
.entity-card canvas,
.entity-card svg{
  max-width:100%;
}

.entity-card-title,
.entity-card-subtitle,
.entity-card-value,
.entity-card-field-value,
.entity-card-detail-value,
.entity-card-description,
.entity-card-message,
.entity-card-notes{
  overflow-wrap:anywhere;
}

.entity-card table{
  width:100%;
  max-width:100%;
}

.entity-card-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}

/* ==========================================================================
   85. DARK THEME SUPPORT
   ========================================================================== */

[data-theme="dark"] .entity-card,
body.dark-theme .entity-card{
  --vg-card-surface:#111827;
  --vg-card-surface-soft:#172033;
  --vg-card-border:#334155;
  --vg-card-border-soft:#273449;
  --vg-card-text:#f1f5f9;
  --vg-card-text-muted:#cbd5e1;
  --vg-card-text-soft:#94a3b8;
  background:
    linear-gradient(
      145deg,
      #111827 0%,
      #151f31 100%
    );
  box-shadow:0 4px 16px rgba(0,0,0,.22);
}

[data-theme="dark"] .entity-card-context,
[data-theme="dark"] .entity-card-counter,
[data-theme="dark"] .entity-card-attachment,
[data-theme="dark"] .entity-card-quick-action,
body.dark-theme .entity-card-context,
body.dark-theme .entity-card-counter,
body.dark-theme .entity-card-attachment,
body.dark-theme .entity-card-quick-action{
  color:#cbd5e1;
  background:#172033;
  border-color:#334155;
}

[data-theme="dark"] .entity-card-menu-panel,
body.dark-theme .entity-card-menu-panel{
  background:#111827;
  border-color:#334155;
}

[data-theme="dark"] .entity-card-menu-item,
body.dark-theme .entity-card-menu-item{
  color:#cbd5e1;
}

[data-theme="dark"] .entity-card-menu-item:hover,
body.dark-theme .entity-card-menu-item:hover{
  color:#93c5fd;
  background:#1e293b;
}

[data-theme="dark"] .entity-stat-card,
body.dark-theme .entity-stat-card{
  background:#111827;
  border-color:#334155;
}

[data-theme="dark"] .entity-stat-card-value,
[data-theme="dark"] .entity-card-counter-value,
body.dark-theme .entity-stat-card-value,
body.dark-theme .entity-card-counter-value{
  color:#f8fafc;
}

/* ==========================================================================
   86. HIGH-CONTRAST SUPPORT
   ========================================================================== */

@media (prefers-contrast:more){
  .entity-card,
  .entity-stat-card{
    border-width:2px;
    box-shadow:none;
  }

  .entity-card-status,
  .entity-status,
  .status-badge,
  .badge-status{
    border-width:2px;
  }

  .entity-card-actions .btn,
  .entity-card-btn,
  .entity-card-quick-action{
    border-width:2px;
  }
}

/* ==========================================================================
   87. PRINT SUPPORT
   ========================================================================== */

@media print{
  .entity-card-grid,
  .cards-grid,
  .record-card-grid{
    display:block;
  }

  .entity-card,
  .entity-stat-card{
    margin-bottom:10px;
    break-inside:avoid;
    background:#ffffff !important;
    border:1px solid #cbd5e1;
    box-shadow:none !important;
    transform:none !important;
  }

  .entity-card-menu,
  .entity-card-actions,
  .entity-card-quick-actions,
  .entity-card-expand-btn,
  .entity-card-select{
    display:none !important;
  }

  .entity-card-collapsible{
    display:block !important;
  }

  .entity-card-title,
  .entity-card-value,
  .entity-card-field-value,
  .entity-card-detail-value{
    color:#000000 !important;
  }
}

/* ==========================================================================
   88. FINAL MOBILE REFINEMENTS
   ========================================================================== */

@media (max-width:575.98px){
  .entity-card-avatar-group .entity-card-avatar,
  .entity-card-avatar-more{
    flex-basis:28px;
    width:28px;
    height:28px;
  }

  .entity-card-quick-actions{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .entity-card-quick-action{
    min-height:34px;
    font-size:10.5px;
  }

  .entity-card-attachment{
    padding:7px;
  }

  .entity-card-notice{
    font-size:10.25px;
  }
}

@media (max-width:389.98px){
  .entity-card-quick-actions{
    grid-template-columns:1fr;
  }
}

/* ==========================================================================
   89. FINAL REDUCED-MOTION SUPPORT
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .entity-card,
  .entity-stat-card,
  .entity-card-attachment,
  .entity-card-contact,
  .entity-card-quick-action,
  .entity-card-actions .btn,
  .entity-card-btn{
    scroll-behavior:auto;
    transition:none;
  }

  .entity-card:hover,
  .entity-stat-card:hover{
    transform:none;
  }
}

/* ==========================================================================
   90. LEGACY CARD COMPATIBILITY
   ========================================================================== */

.patient-card,
.employee-card,
.provider-card,
.organization-card,
.facility-card,
.applicant-card,
.student-card,
.registration-card,
.appointment-card,
.order-card,
.invoice-card,
.payment-card,
.deposit-card,
.claim-card,
.refund-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  background:var(--vg-card-surface,#ffffff);
  border:1px solid var(--vg-card-border,#dbe4ef);
  border-radius:var(--vg-card-radius,12px);
  box-shadow:var(--vg-card-shadow,0 3px 12px rgba(15,23,42,.06));
}

/* ==========================================================================
   91. BOOTSTRAP CARD NORMALIZATION
   ========================================================================== */

.entity-card.card{
  color:var(--vg-card-text);
  background:var(--vg-card-surface);
  border-color:var(--vg-card-border);
  border-radius:var(--vg-card-radius);
}

.entity-card .card-header,
.entity-card .card-body,
.entity-card .card-footer{
  color:inherit;
  background:transparent;
}

.entity-card .card-header{
  padding:var(--vg-card-padding-y) var(--vg-card-padding-x);
  border-bottom:1px solid var(--vg-card-border-soft);
}

.entity-card .card-body{
  padding:var(--vg-card-padding-y) var(--vg-card-padding-x);
}

.entity-card .card-footer{
  padding:var(--vg-card-padding-y) var(--vg-card-padding-x);
  border-top:1px solid var(--vg-card-border-soft);
}

/* ==========================================================================
   92. CARD LINK AND BUTTON NORMALIZATION
   ========================================================================== */

.entity-card a,
.entity-stat-card a{
  text-underline-offset:2px;
}

.entity-card button,
.entity-stat-card button{
  font:inherit;
}

.entity-card button:focus-visible,
.entity-stat-card button:focus-visible,
.entity-card a:focus-visible,
.entity-stat-card a:focus-visible{
  outline:2px solid rgba(37,99,235,.4);
  outline-offset:2px;
}

/* ==========================================================================
   93. LONG CONTENT SAFETY
   ========================================================================== */

.entity-card-header,
.entity-card-body,
.entity-card-footer,
.entity-card-content,
.entity-card-main,
.entity-card-info,
.entity-card-fields,
.entity-card-details,
.entity-card-actions{
  min-width:0;
  max-width:100%;
}

.entity-card-title,
.entity-card-subtitle,
.entity-card-description,
.entity-card-message,
.entity-card-notes,
.entity-card-value,
.entity-card-field-value,
.entity-card-detail-value{
  max-width:100%;
}

.entity-card-description,
.entity-card-message,
.entity-card-notes{
  white-space:normal;
}

/* ==========================================================================
   94. EMPTY VALUE DISPLAY
   ========================================================================== */

.entity-card-value:empty::after,
.entity-card-field-value:empty::after,
.entity-card-detail-value:empty::after{
  color:var(--vg-card-text-soft);
  font-weight:500;
  content:"—";
}

.entity-card-value.is-empty,
.entity-card-field-value.is-empty,
.entity-card-detail-value.is-empty{
  color:var(--vg-card-text-soft);
  font-style:italic;
  font-weight:500;
}

/* ==========================================================================
   95. CARD BADGE COLLECTION
   ========================================================================== */

.entity-card-badges{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  min-width:0;
}

.entity-card-badges .badge{
  max-width:145px;
  overflow:hidden;
  font-size:9.75px;
  font-weight:700;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ==========================================================================
   96. CARD ACTION ALIGNMENT
   ========================================================================== */

.entity-card-actions.is-start{
  justify-content:flex-start;
}

.entity-card-actions.is-center{
  justify-content:center;
}

.entity-card-actions.is-end{
  justify-content:flex-end;
}

.entity-card-actions.is-between{
  justify-content:space-between;
}

.entity-card-actions.is-full .btn,
.entity-card-actions.is-full .entity-card-btn{
  flex:1 1 0;
}

/* ==========================================================================
   97. COMPACT DENSITY MODE
   ========================================================================== */

.cards-density-compact .entity-card,
.entity-card.is-ultra-compact{
  --vg-card-padding-x:9px;
  --vg-card-padding-y:8px;
  --vg-card-gap:6px;
  --vg-card-radius:9px;
}

.cards-density-compact .entity-card-title,
.entity-card.is-ultra-compact .entity-card-title{
  font-size:11.5px;
}

.cards-density-compact .entity-card-subtitle,
.cards-density-compact .entity-card-field-label,
.cards-density-compact .entity-card-detail-label,
.entity-card.is-ultra-compact .entity-card-subtitle,
.entity-card.is-ultra-compact .entity-card-field-label,
.entity-card.is-ultra-compact .entity-card-detail-label{
  font-size:9.5px;
}

.cards-density-compact .entity-card-field-value,
.cards-density-compact .entity-card-detail-value,
.entity-card.is-ultra-compact .entity-card-field-value,
.entity-card.is-ultra-compact .entity-card-detail-value{
  font-size:10.5px;
}

/* ==========================================================================
   98. COMFORTABLE DENSITY MODE
   ========================================================================== */

.cards-density-comfortable .entity-card,
.entity-card.is-comfortable{
  --vg-card-padding-x:16px;
  --vg-card-padding-y:14px;
  --vg-card-gap:11px;
  --vg-card-radius:14px;
}

.cards-density-comfortable .entity-card-title,
.entity-card.is-comfortable .entity-card-title{
  font-size:14px;
}

.cards-density-comfortable .entity-card-subtitle,
.entity-card.is-comfortable .entity-card-subtitle{
  font-size:11.5px;
}

/* ==========================================================================
   99. RTL SUPPORT
   ========================================================================== */

[dir="rtl"] .entity-card-menu-panel{
  right:auto;
  left:0;
}

[dir="rtl"] .entity-card-select{
  right:10px;
  left:auto;
}

[dir="rtl"] .entity-card.has-selection-control{
  padding-right:
    calc(
      var(--vg-card-padding-x) + 22px
    );
  padding-left:var(--vg-card-padding-x);
}

[dir="rtl"] .entity-card-ribbon{
  right:auto;
  left:-31px;
  transform:rotate(-45deg);
}

[dir="rtl"] .entity-card-timeline-item::before{
  right:7px;
  left:auto;
}

[dir="rtl"] .entity-card-tooltip-text{
  right:auto;
  left:0;
}

[dir="rtl"] .entity-card-tooltip-text::after{
  right:auto;
  left:8px;
}

/* ==========================================================================
   100. FINAL RESPONSIVE OVERRIDES
   ========================================================================== */

@media (max-width:767.98px){
  .entity-card-grid,
  .cards-grid,
  .record-card-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .entity-card-actions{
    gap:5px;
  }

  .entity-card-actions .btn,
  .entity-card-btn{
    min-height:30px;
    padding:5px 8px;
    font-size:10.5px;
  }
}

@media (max-width:575.98px){
  .entity-card-grid,
  .cards-grid,
  .record-card-grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  .entity-card{
    --vg-card-padding-x:10px;
    --vg-card-padding-y:9px;
    --vg-card-gap:7px;
  }

  .entity-card-title{
    font-size:12px;
  }

  .entity-card-subtitle{
    font-size:10px;
  }

  .entity-card-actions.is-full-mobile{
    display:grid;
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
    width:100%;
  }

  .entity-card-actions.is-full-mobile .btn,
  .entity-card-actions.is-full-mobile .entity-card-btn{
    width:100%;
  }
}

@media (max-width:389.98px){
  .entity-card-actions.is-full-mobile{
    grid-template-columns:1fr;
  }

  .entity-card-badges .badge{
    max-width:110px;
  }
}

/* ==========================================================================
   101. TOUCH DEVICE SUPPORT
   ========================================================================== */

@media (hover:none) and (pointer:coarse){
  .entity-card:hover,
  .entity-stat-card:hover{
    transform:none;
  }

  .entity-card-actions .btn,
  .entity-card-btn,
  .entity-card-menu-item,
  .entity-card-quick-action{
    min-height:36px;
  }

  .entity-card-menu-panel{
    max-width:calc(100vw - 24px);
  }
}

/* ==========================================================================
   102. FORCED-COLORS SUPPORT
   ========================================================================== */

@media (forced-colors:active){
  .entity-card,
  .entity-stat-card,
  .entity-card-status,
  .entity-status,
  .status-badge,
  .badge-status,
  .entity-card-btn,
  .entity-card-quick-action{
    border:1px solid CanvasText;
    box-shadow:none;
    forced-color-adjust:auto;
  }

  .entity-card.is-selected{
    outline:2px solid Highlight;
  }

  .entity-card-status::before,
  .entity-status::before,
  .status-badge::before,
  .badge-status::before{
    background:currentColor;
  }
}

/* ==========================================================================
   103. FINAL CARD RESET
   ========================================================================== */

.entity-card h1,
.entity-card h2,
.entity-card h3,
.entity-card h4,
.entity-card h5,
.entity-card h6,
.entity-card p{
  max-width:100%;
}

.entity-card ul,
.entity-card ol{
  max-width:100%;
}

.entity-card input,
.entity-card select,
.entity-card textarea{
  max-width:100%;
}

.entity-card [hidden],
.entity-stat-card [hidden]{
  display:none !important;
}

/* ==========================================================================
   104. CARD SYSTEM COMPLETE
   ========================================================================== */

.entity-card-grid,
.cards-grid,
.record-card-grid,
.entity-stat-grid,
.entity-card-list{
  margin:0;
  padding:0;
}

.entity-card,
.entity-stat-card{
  isolation:isolate;
}

.entity-card::selection,
.entity-card *::selection,
.entity-stat-card::selection,
.entity-stat-card *::selection{
  color:#ffffff;
  background:var(--vg-card-primary,#2563eb);
}


/* ==========================================================================
   CARD ACTION BUTTON VISIBILITY
========================================================================== */

.entity-card-footer{
  overflow:visible !important;
}

.entity-card-footer > .d-inline-flex{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:5px !important;
  overflow:visible !important;
}

.entity-card-footer .btn{
  display:inline-flex !important;
  flex:0 0 auto !important;
  opacity:1 !important;
  visibility:visible !important;
}