/*
 * dc-karatelicensing.css — semantic layer for com_karatelicensing.
 * The plugin owns ALL component style. Add license-status / payment-state
 * badge variants and any KL-only stat-card colours here as ports surface them.
 * Base primitives (dc-card, dc-stat, dc-table, dc-badge, dc-btn) live in dc-system.css.
 */

/* License status badges (semantic aliases over dc-badge colours) */
.dc-badge--lic-active   { background: var(--dc-success-100, #e6f5ee); color: var(--dc-success-700, #0f7a48); }
.dc-badge--lic-expiring { background: var(--dc-warning-100, #fdf1dd); color: var(--dc-warning-700, #b46f00); }
.dc-badge--lic-expired  { background: var(--dc-danger-100, #fbe7e7);  color: var(--dc-danger-700, #b62626); }

/* =============================================================================
 * Primitives used by the KL shell migration not yet in dc-system.css
 * Used in: tmpl/bulkoperations/default.php, tmpl/dojoadmin/create.php,
 *          tmpl/dojoreports/default.php
 * ============================================================================= */

/* dc-alert--info
 * Info/blue colour modifier of .dc-alert. The base .dc-alert already uses info
 * colours by default; this modifier is an explicit alias so that the
 * semantic intent is unambiguous in templates and survives if the base default
 * ever shifts to a neutral tone. */
.dc-alert--info {
  border-color: var(--dc-info, #0ea5e9);
  background:   var(--dc-info-tint, #e0f2fe);
  color:        var(--dc-info-text, #075985);
}

/* dc-table--sm
 * Compact modifier of .dc-table — smaller cell padding and a reduced
 * font-size for dense data tables (e.g. the reports view). */
.dc-table--sm th,
.dc-table--sm td {
  padding:   0.45rem var(--dc-space-3, 0.75rem);
  font-size: var(--dc-text-sm, 0.875rem);
}

/* dc-stat__sub
 * Small muted sub-text rendered beneath a .dc-stat__value (e.g. a secondary
 * label or unit). Sits below the value without disrupting the stat card grid. */
.dc-stat__sub {
  margin-block-start: var(--dc-space-1, 0.25rem);
  font-size:          var(--dc-text-xs, 0.75rem);
  color:              var(--dc-ink-500, #64748b);
  line-height:        var(--dc-leading-normal, 1.5);
}

/* dc-dropdown
 * Wrapper for a toggle button + Bootstrap .dropdown-menu. position:relative
 * anchors the absolutely-positioned Bootstrap menu to this element so it
 * does not escape its container. display:inline-block keeps the wrapper
 * width tied to the button. */
.dc-dropdown {
  position:     relative;
  display:      inline-block;
}

/* dc-dropdown__toggle
 * The toggle button inside .dc-dropdown. Already carries .dc-btn classes so
 * this modifier only adds the flex layout needed to align an icon + label
 * side-by-side with a consistent gap. Never overrides dc-btn sizing or colour. */
.dc-dropdown__toggle {
  display:     inline-flex;
  align-items: center;
  gap:         var(--dc-space-2, 0.5rem);
}