@limpiolux/ui-styles 1.0.0 → 1.0.2

package/components.css

@@ -442,4 +442,665 @@
     backdrop-filter: blur(40px) saturate(1.8);
     -webkit-backdrop-filter: blur(40px) saturate(1.8);
   }
+
+  /* ── Legacy bridge: forms ── */
+
+  .form-control,
+  .form-select {
+    @apply w-full rounded-lg border border-zinc-800 bg-zinc-900 px-3 py-2.5 text-sm text-zinc-100 outline-none transition-colors;
+    box-shadow: none;
+  }
+
+  .form-control::placeholder {
+    color: rgb(var(--color-zinc-600));
+  }
+
+  .form-control:focus,
+  .form-select:focus {
+    border-color: rgba(var(--color-brand) / 0.52);
+    box-shadow: 0 0 0 1px rgba(var(--color-brand) / 0.18);
+  }
+
+  .form-control-sm {
+    @apply rounded-md px-2.5 py-1.5 text-xs;
+  }
+
+  .form-check {
+    @apply flex items-center gap-2;
+  }
+
+  .form-check-input {
+    width: 1.125rem;
+    height: 1.125rem;
+    border: 2px solid rgb(var(--color-zinc-600));
+    border-radius: 0.35rem;
+    background-color: transparent;
+    cursor: pointer;
+    transition: all 140ms ease;
+  }
+
+  .form-check-input[type="radio"] {
+    border-radius: 999px;
+  }
+
+  .form-check-input:checked {
+    border-color: rgb(var(--color-brand));
+    background-color: rgb(var(--color-brand));
+  }
+
+  .form-check-label {
+    @apply text-sm text-zinc-300;
+  }
+
+  .form-switch {
+    @apply inline-flex items-center gap-2;
+  }
+
+  .form-switch .form-check-input,
+  .form-switch input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 2.8rem;
+    height: 1.55rem;
+    border: none;
+    border-radius: 999px;
+    background: rgb(var(--color-zinc-700));
+    position: relative;
+    cursor: pointer;
+    transition: background-color 180ms ease;
+  }
+
+  .form-switch .form-check-input::before,
+  .form-switch input[type="checkbox"]::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 1.2rem;
+    height: 1.2rem;
+    border-radius: 999px;
+    background: #fff;
+    transition: transform 180ms ease;
+  }
+
+  .form-switch .form-check-input:checked,
+  .form-switch input[type="checkbox"]:checked {
+    background: rgb(var(--color-brand));
+  }
+
+  .form-switch .form-check-input:checked::before,
+  .form-switch input[type="checkbox"]:checked::before {
+    transform: translateX(1.25rem);
+  }
+
+  /* ── Legacy bridge: buttons ── */
+
+  .btn {
+    @apply inline-flex items-center justify-center gap-2 rounded-lg border border-transparent px-3.5 py-2 text-sm font-medium transition-colors;
+  }
+
+  .btn-sm {
+    @apply rounded-md px-2.5 py-1.5 text-xs;
+  }
+
+  .btn-link {
+    border: none;
+    background: transparent;
+    color: rgb(var(--color-zinc-400));
+    padding: 0;
+  }
+
+  .btn-link:hover {
+    color: rgb(var(--color-zinc-200));
+  }
+
+  .btn-outline-primary {
+    border-color: rgba(var(--color-brand) / 0.38);
+    color: rgb(var(--color-brand-soft));
+    background: rgba(var(--color-brand) / 0.08);
+  }
+
+  .btn-outline-primary:hover {
+    background: rgba(var(--color-brand) / 0.15);
+  }
+
+  .btn-outline-secondary {
+    border-color: rgba(var(--color-zinc-500) / 0.5);
+    color: rgb(var(--color-zinc-300));
+    background: rgba(var(--color-zinc-800) / 0.45);
+  }
+
+  .btn-outline-secondary:hover {
+    background: rgba(var(--color-zinc-700) / 0.55);
+  }
+
+  .btn-outline-success,
+  .btn-success {
+    border-color: rgba(34, 197, 94, 0.45);
+    color: #86efac;
+    background: rgba(34, 197, 94, 0.14);
+  }
+
+  .btn-outline-success:hover,
+  .btn-success:hover {
+    background: rgba(34, 197, 94, 0.22);
+  }
+
+  .btn-outline-danger,
+  .btn-danger {
+    border-color: rgba(248, 113, 113, 0.45);
+    color: #fca5a5;
+    background: rgba(248, 113, 113, 0.14);
+  }
+
+  .btn-outline-danger:hover,
+  .btn-danger:hover {
+    background: rgba(248, 113, 113, 0.22);
+  }
+
+  .btn-outline-warning,
+  .btn-warning {
+    border-color: rgba(251, 191, 36, 0.45);
+    color: #fcd34d;
+    background: rgba(251, 191, 36, 0.14);
+  }
+
+  .btn-outline-warning:hover,
+  .btn-warning:hover {
+    background: rgba(251, 191, 36, 0.22);
+  }
+
+  .btn-outline-info,
+  .btn-info {
+    border-color: rgba(96, 165, 250, 0.45);
+    color: #93c5fd;
+    background: rgba(96, 165, 250, 0.14);
+  }
+
+  .btn-outline-info:hover,
+  .btn-info:hover {
+    background: rgba(96, 165, 250, 0.22);
+  }
+
+  .btn-close {
+    position: relative;
+    width: 1.8rem;
+    height: 1.8rem;
+    border: none;
+    border-radius: 0.5rem;
+    background: transparent;
+    color: rgb(var(--color-zinc-400));
+    cursor: pointer;
+    transition: color 150ms ease, background-color 150ms ease;
+  }
+
+  .btn-close::before {
+    content: '×';
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-size: 1.25rem;
+    line-height: 1;
+  }
+
+  .btn-close:hover {
+    color: rgb(var(--color-zinc-200));
+    background: rgba(39, 39, 42, 0.72);
+  }
+
+  /* ── Legacy bridge: alerts & badges ── */
+
+  .alert {
+    @apply relative rounded-xl border px-3 py-2.5 text-sm;
+  }
+
+  .alert-dismissible {
+    padding-right: 2.7rem;
+  }
+
+  .alert-dismissible .btn-close {
+    position: absolute;
+    top: 0.45rem;
+    right: 0.45rem;
+  }
+
+  .alert-success {
+    border-color: rgba(34, 197, 94, 0.42);
+    background: rgba(34, 197, 94, 0.14);
+    color: #86efac;
+  }
+
+  .alert-warning {
+    border-color: rgba(251, 191, 36, 0.42);
+    background: rgba(251, 191, 36, 0.14);
+    color: #fcd34d;
+  }
+
+  .alert-danger {
+    border-color: rgba(248, 113, 113, 0.42);
+    background: rgba(248, 113, 113, 0.14);
+    color: #fca5a5;
+  }
+
+  .alert-info,
+  .alert-primary {
+    border-color: rgba(var(--color-brand) / 0.38);
+    background: rgba(var(--color-brand) / 0.12);
+    color: rgb(var(--color-brand-soft));
+  }
+
+  .badge {
+    @apply inline-flex items-center rounded-lg px-2 py-0.5 text-[11px] font-semibold;
+  }
+
+  .rounded-pill {
+    border-radius: 999px !important;
+  }
+
+  .text-bg-primary,
+  .table-primary {
+    color: #d7f1fb;
+    background: rgba(var(--color-brand) / 0.22) !important;
+    border-color: rgba(var(--color-brand) / 0.34) !important;
+  }
+
+  .text-bg-success,
+  .table-success {
+    color: #d1fae5;
+    background: rgba(16, 185, 129, 0.24) !important;
+    border-color: rgba(16, 185, 129, 0.38) !important;
+  }
+
+  .text-bg-warning,
+  .table-warning {
+    color: #fef3c7;
+    background: rgba(245, 158, 11, 0.24) !important;
+    border-color: rgba(245, 158, 11, 0.38) !important;
+  }
+
+  .text-bg-danger,
+  .table-danger {
+    color: #fee2e2;
+    background: rgba(239, 68, 68, 0.24) !important;
+    border-color: rgba(239, 68, 68, 0.38) !important;
+  }
+
+  .text-bg-info,
+  .table-info {
+    color: #dbeafe;
+    background: rgba(59, 130, 246, 0.24) !important;
+    border-color: rgba(59, 130, 246, 0.38) !important;
+  }
+
+  .text-bg-light,
+  .table-light {
+    color: rgb(var(--color-zinc-200));
+    background: rgba(var(--color-zinc-700) / 0.25) !important;
+    border-color: rgba(var(--color-zinc-600) / 0.32) !important;
+  }
+
+  .bg-warning {
+    background: rgba(251, 191, 36, 0.14) !important;
+    color: #fcd34d !important;
+  }
+
+  .bg-danger {
+    background: rgba(248, 113, 113, 0.14) !important;
+    color: #fecaca !important;
+  }
+
+  .bg-success {
+    background: rgba(34, 197, 94, 0.14) !important;
+    color: #bbf7d0 !important;
+  }
+
+  .bg-info {
+    background: rgba(96, 165, 250, 0.14) !important;
+    color: #bfdbfe !important;
+  }
+
+  /* ── Legacy bridge: tables ── */
+
+  .table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.82rem;
+    color: rgb(var(--color-zinc-300));
+  }
+
+  .table thead {
+    font-size: 0.75rem;
+  }
+
+  .table th {
+    padding: 0.65rem 0.75rem;
+    text-align: left;
+    font-weight: 600;
+    color: rgb(var(--color-zinc-400));
+    border-bottom: 1px solid rgb(var(--color-zinc-800));
+    white-space: nowrap;
+    background: rgb(var(--color-zinc-900));
+  }
+
+  .table td {
+    padding: 0.65rem 0.75rem;
+    border-bottom: 1px solid rgb(var(--color-zinc-800) / 0.5);
+    vertical-align: middle;
+  }
+
+  .table-responsive {
+    overflow-x: auto;
+    border-radius: 0.75rem;
+    border: 1px solid rgb(var(--color-zinc-800));
+  }
+
+  .table-hover tbody tr:hover {
+    background-color: rgb(var(--color-zinc-800) / 0.3);
+  }
+
+  .table-bordered th,
+  .table-bordered td {
+    border: 1px solid rgb(var(--color-zinc-800) / 0.75);
+  }
+
+  .table-striped > tbody > tr:nth-child(odd) {
+    background: rgba(var(--color-zinc-800) / 0.28);
+  }
+
+  .table-dark {
+    background: rgb(var(--color-zinc-900));
+    color: rgb(var(--color-zinc-200));
+  }
+
+  .table-secondary {
+    color: rgb(var(--color-zinc-200));
+    background: rgba(var(--color-zinc-700) / 0.2) !important;
+    border-color: rgba(var(--color-zinc-600) / 0.32) !important;
+  }
+
+  /* ── Legacy bridge: cards & helpers ── */
+
+  .card {
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 0.9rem;
+    background: rgba(24, 24, 27, 0.45);
+    box-shadow:
+      0 8px 28px -14px rgba(0, 0, 0, 0.34),
+      inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  }
+
+  .card-header {
+    @apply px-4 py-3 text-sm font-semibold;
+    border-bottom: 1px solid rgba(63, 63, 70, 0.85);
+    background: rgba(9, 9, 11, 0.38);
+    color: rgb(var(--color-zinc-200));
+  }
+
+  .card-body {
+    @apply px-4 py-4;
+  }
+
+  .modal-content {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 0.9rem;
+    background: linear-gradient(
+      160deg,
+      rgba(24, 24, 27, 0.88) 0%,
+      rgba(9, 9, 11, 0.92) 100%
+    );
+    box-shadow:
+      0 32px 64px -16px rgba(0, 0, 0, 0.5),
+      inset 0 1px 0 rgba(255, 255, 255, 0.08),
+      inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(40px) saturate(1.8);
+    -webkit-backdrop-filter: blur(40px) saturate(1.8);
+  }
+
+  .modal-header {
+    @apply flex items-center justify-between px-4 py-3;
+    border-bottom: 1px solid rgba(63, 63, 70, 0.85);
+  }
+
+  .modal-body {
+    @apply px-4 py-4;
+  }
+
+  .modal-footer {
+    @apply flex items-center justify-end gap-2 px-4 py-3;
+    border-top: 1px solid rgba(63, 63, 70, 0.85);
+  }
+
+  .btn-orange {
+    border-color: rgba(234, 88, 12, 0.45);
+    color: #fdba74;
+    background: rgba(234, 88, 12, 0.14);
+  }
+
+  .btn-orange:hover {
+    background: rgba(234, 88, 12, 0.22);
+  }
+
+  .btn-purple {
+    border-color: rgba(168, 85, 247, 0.45);
+    color: #d8b4fe;
+    background: rgba(168, 85, 247, 0.14);
+  }
+
+  .btn-purple:hover {
+    background: rgba(168, 85, 247, 0.22);
+  }
+
+  .btn-brown {
+    border-color: rgba(161, 98, 7, 0.42);
+    color: #fcd34d;
+    background: rgba(161, 98, 7, 0.15);
+  }
+
+  .btn-brown:hover {
+    background: rgba(161, 98, 7, 0.24);
+  }
+
+  .text-brown {
+    color: #d97706 !important;
+  }
+
+  .text-success-emphasis {
+    color: #86efac !important;
+  }
+
+  .text-danger-emphasis {
+    color: #fca5a5 !important;
+  }
+
+  .border-success {
+    border-color: rgba(34, 197, 94, 0.42) !important;
+  }
+
+  .border-danger {
+    border-color: rgba(248, 113, 113, 0.42) !important;
+  }
+
+  .rounded-2 {
+    border-radius: 0.65rem !important;
+  }
+
+  .cursor-pointer {
+    cursor: pointer !important;
+  }
+
+  .text-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .btn-check {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+
+  .btn-check:checked + .btn-outline-success,
+  .btn-check:checked + .btn-outline-danger,
+  .btn-check:checked + .btn-outline-secondary,
+  .btn-check:checked + .btn-outline-primary,
+  .btn-check:checked + .btn-outline-warning,
+  .btn-check:checked + .btn-outline-info {
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
+    filter: saturate(1.12);
+  }
+
+  .btn-check:checked + .btn-outline-success {
+    background: rgba(34, 197, 94, 0.26);
+  }
+
+  .btn-check:checked + .btn-outline-danger {
+    background: rgba(248, 113, 113, 0.26);
+  }
+
+  .btn-check:checked + .btn-outline-warning {
+    background: rgba(251, 191, 36, 0.26);
+  }
+
+  .btn-check:checked + .btn-outline-info {
+    background: rgba(96, 165, 250, 0.26);
+  }
+
+  .btn-check:checked + .btn-outline-primary {
+    background: rgba(var(--color-brand) / 0.24);
+  }
+
+  .fw-bold {
+    font-weight: 700 !important;
+  }
+
+  .fw-semibold {
+    font-weight: 600 !important;
+  }
+
+  .border-secondary {
+    border-color: rgba(var(--color-zinc-600) / 0.5) !important;
+  }
+
+  .text-secondary {
+    color: rgb(var(--color-zinc-400)) !important;
+  }
+
+  .text-start {
+    text-align: left !important;
+  }
+
+  .text-center {
+    text-align: center !important;
+  }
+
+  .text-left {
+    text-align: left !important;
+  }
+
+  .text-right,
+  .text-end {
+    text-align: right !important;
+  }
+
+  .align-items-center {
+    align-items: center !important;
+  }
+
+  .align-items-end {
+    align-items: flex-end !important;
+  }
+
+  .align-items-stretch {
+    align-items: stretch !important;
+  }
+
+  .justify-content-center {
+    justify-content: center !important;
+  }
+
+  .justify-content-between {
+    justify-content: space-between !important;
+  }
+
+  .justify-content-end {
+    justify-content: flex-end !important;
+  }
+
+  .justify-content-stretch {
+    justify-content: stretch !important;
+  }
+
+  .form-group {
+    margin-bottom: 0.75rem;
+  }
+
+  .form-label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: rgb(var(--color-zinc-300));
+    margin-bottom: 0.35rem;
+  }
+
+  .form-select-sm {
+    padding: 0.35rem 0.55rem;
+    font-size: 0.78rem;
+    border-radius: 0.45rem;
+  }
+
+  .rounded {
+    border-radius: 0.5rem !important;
+  }
+
+  .rounded-circle {
+    border-radius: 999px !important;
+  }
+
+  .bg-primary {
+    background: rgba(var(--color-brand) / 0.18) !important;
+    color: #d7f1fb !important;
+  }
+
+  .bg-secondary {
+    background: rgba(var(--color-zinc-700) / 0.35) !important;
+    color: rgb(var(--color-zinc-200)) !important;
+  }
+
+  .border-brand {
+    border-color: rgba(var(--color-brand) / 0.45) !important;
+  }
+
+  .border-warning {
+    border-color: rgba(245, 158, 11, 0.42) !important;
+  }
+
+  .border-muted {
+    border-color: rgba(var(--color-zinc-600) / 0.5) !important;
+  }
+
+  .text-orange {
+    color: #fb923c !important;
+  }
+
+  .alert-heading {
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin: 0 0 0.25rem;
+  }
+
+  .fade {
+    opacity: 0;
+    transition: opacity 160ms ease;
+  }
+
+  .fade.show {
+    opacity: 1;
+  }
 }

package/light.css

@@ -312,3 +312,186 @@
     inset 0 1px 0 rgba(255, 255, 255, 0.9),
     inset 0 -1px 0 rgba(0, 0, 0, 0.03);
 }
+
+/* ── Legacy bridge: forms ── */
+
+.light .form-control,
+.light .form-select {
+  background: rgb(var(--color-zinc-900));
+  border-color: rgb(var(--color-zinc-800));
+  color: rgb(var(--color-zinc-200));
+}
+
+.light .form-control::placeholder {
+  color: rgb(var(--color-zinc-500));
+}
+
+.light .form-check-input {
+  border-color: rgb(var(--color-zinc-500));
+}
+
+.light .form-check-label {
+  color: rgb(var(--color-zinc-300));
+}
+
+.light .form-switch .form-check-input,
+.light .form-switch input[type='checkbox'] {
+  background: rgb(var(--color-zinc-600));
+}
+
+.light .form-switch .form-check-input:checked,
+.light .form-switch input[type='checkbox']:checked {
+  background: rgb(var(--color-brand));
+}
+
+/* ── Legacy bridge: buttons ── */
+
+.light .btn-link {
+  color: rgb(var(--color-zinc-500));
+}
+
+.light .btn-link:hover {
+  color: rgb(var(--color-zinc-200));
+}
+
+.light .btn-close {
+  color: rgb(var(--color-zinc-500));
+}
+
+.light .btn-close:hover {
+  color: rgb(var(--color-zinc-200));
+  background: rgba(228, 228, 231, 0.9);
+}
+
+/* ── Legacy bridge: alerts & badges ── */
+
+.light .text-bg-light,
+.light .table-light {
+  color: rgb(var(--color-zinc-300));
+  background: rgba(var(--color-zinc-700) / 0.2) !important;
+  border-color: rgba(var(--color-zinc-600) / 0.3) !important;
+}
+
+/* ── Legacy bridge: tables ── */
+
+.light .table {
+  color: rgb(var(--color-zinc-300));
+}
+
+.light .table th {
+  color: rgb(var(--color-zinc-400));
+  border-color: rgb(var(--color-zinc-700));
+  background: rgb(var(--color-zinc-900));
+}
+
+.light .table td {
+  border-color: rgb(var(--color-zinc-700));
+}
+
+.light .table-hover tbody tr:hover {
+  background-color: rgba(var(--color-zinc-700) / 0.22);
+}
+
+.light .table-responsive {
+  border-color: rgb(var(--color-zinc-700));
+}
+
+.light .text-dark {
+  color: rgb(var(--color-zinc-300)) !important;
+}
+
+.light .text-muted {
+  color: rgb(var(--color-zinc-500)) !important;
+}
+
+.light .text-primary {
+  color: rgb(var(--color-brand-strong)) !important;
+}
+
+.light .text-info {
+  color: #1d4ed8 !important;
+}
+
+.light .text-success {
+  color: #15803d !important;
+}
+
+.light .text-warning {
+  color: #a16207 !important;
+}
+
+.light .text-danger {
+  color: #b91c1c !important;
+}
+
+.light .bg-light {
+  background: rgba(var(--color-zinc-900) / 0.85) !important;
+}
+
+.light .table-secondary {
+  color: rgb(var(--color-zinc-300));
+  background: rgba(var(--color-zinc-700) / 0.18) !important;
+  border-color: rgba(var(--color-zinc-600) / 0.28) !important;
+}
+
+.light .card {
+  border-color: rgba(0, 0, 0, 0.09);
+  background: rgba(255, 255, 255, 0.66);
+  box-shadow:
+    0 8px 24px -16px rgba(15, 23, 42, 0.14),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+.light .card-header {
+  border-bottom-color: rgba(212, 212, 216, 0.95);
+  background: rgba(255, 255, 255, 0.78);
+  color: rgb(var(--color-zinc-200));
+}
+
+.light .modal-content {
+  border-color: rgba(0, 0, 0, 0.08);
+  background: linear-gradient(
+    160deg,
+    rgba(255, 255, 255, 0.92) 0%,
+    rgba(244, 244, 245, 0.88) 100%
+  );
+  box-shadow:
+    0 32px 64px -16px rgba(15, 23, 42, 0.18),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
+}
+
+.light .modal-header,
+.light .modal-footer {
+  border-color: rgba(212, 212, 216, 0.95);
+}
+
+.light .text-brown {
+  color: #92400e !important;
+}
+
+.light .text-success-emphasis {
+  color: #166534 !important;
+}
+
+.light .text-danger-emphasis {
+  color: #991b1b !important;
+}
+
+.light .form-label {
+  color: rgb(var(--color-zinc-300));
+}
+
+.light .bg-primary {
+  background: rgba(var(--color-brand) / 0.12) !important;
+  color: rgb(var(--color-brand-strong)) !important;
+}
+
+.light .bg-secondary {
+  background: rgba(var(--color-zinc-700) / 0.24) !important;
+  color: rgb(var(--color-zinc-300)) !important;
+}
+
+.light .text-orange {
+  color: #c2410c !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limpiolux/ui-styles",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Shared design system — Preventores liquid glass theme with dark/light mode support",
   "type": "module",
   "exports": {

package/utilities.css

@@ -37,3 +37,258 @@
 .light .date-filter-input {
   color-scheme: light;
 }
+
+/* ── Legacy utility bridge ── */
+
+.text-dark {
+  color: rgb(var(--color-zinc-200)) !important;
+}
+
+.text-white {
+  color: #fff !important;
+}
+
+.text-muted {
+  color: rgb(var(--color-zinc-500)) !important;
+}
+
+.text-primary {
+  color: rgb(var(--color-brand-soft)) !important;
+}
+
+.text-info {
+  color: #93c5fd !important;
+}
+
+.text-success {
+  color: #86efac !important;
+}
+
+.text-warning {
+  color: #fcd34d !important;
+}
+
+.text-danger {
+  color: #fca5a5 !important;
+}
+
+.bg-light {
+  background: rgba(var(--color-zinc-800) / 0.38) !important;
+}
+
+.w-25 {
+  width: min(100%, 16rem) !important;
+}
+
+.w-50 {
+  width: min(100%, 30rem) !important;
+}
+
+.w-75 {
+  width: min(100%, 42rem) !important;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.fs-10 {
+  font-size: 0.625rem !important;
+}
+
+.fs-8 {
+  font-size: 0.78rem !important;
+}
+
+.fs-7 {
+  font-size: 0.875rem !important;
+}
+
+.fs-6 {
+  font-size: 0.95rem !important;
+}
+
+.d-none {
+  display: none !important;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.d-inline-flex {
+  display: inline-flex !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.d-sm-flex,
+.d-sm-block,
+.d-lg-inline {
+  display: inherit;
+}
+
+@media (min-width: 576px) {
+  .d-sm-flex { display: flex !important; }
+  .d-sm-block { display: block !important; }
+}
+
+@media (min-width: 992px) {
+  .d-lg-inline { display: inline !important; }
+}
+
+.float-start {
+  float: left !important;
+}
+
+.float-end {
+  float: right !important;
+}
+
+.mr-1 { margin-right: 0.25rem !important; }
+.mr-2 { margin-right: 0.5rem !important; }
+.mr-3 { margin-right: 0.75rem !important; }
+.mr-auto { margin-right: auto !important; }
+
+.ml-0\.5 { margin-left: 0.125rem !important; }
+.ml-1 { margin-left: 0.25rem !important; }
+.ml-2 { margin-left: 0.5rem !important; }
+.ml-3 { margin-left: 0.75rem !important; }
+.ml-4 { margin-left: 1rem !important; }
+.ml-auto { margin-left: auto !important; }
+
+.me-1 { margin-inline-end: 0.25rem !important; }
+.me-2 { margin-inline-end: 0.5rem !important; }
+.me-3 { margin-inline-end: 0.75rem !important; }
+
+.ms-1 { margin-inline-start: 0.25rem !important; }
+.ms-2 { margin-inline-start: 0.5rem !important; }
+.ms-3 { margin-inline-start: 0.75rem !important; }
+.ms-auto { margin-inline-start: auto !important; }
+
+.px-0\.5 { padding-left: 0.125rem !important; padding-right: 0.125rem !important; }
+.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
+.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
+.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
+.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
+
+.py-0\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
+.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
+.py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
+.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
+.py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
+.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
+.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
+.py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
+
+.mx-auto { margin-left: auto !important; margin-right: auto !important; }
+.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
+.mx-3 { margin-left: 0.75rem !important; margin-right: 0.75rem !important; }
+.mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
+
+.mt-0 { margin-top: 0 !important; }
+.mt-1 { margin-top: 0.25rem !important; }
+.mt-2 { margin-top: 0.5rem !important; }
+.mt-3 { margin-top: 0.75rem !important; }
+
+.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
+.my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
+
+.mb-0 { margin-bottom: 0 !important; }
+.mb-1 { margin-bottom: 0.25rem !important; }
+.mb-2 { margin-bottom: 0.5rem !important; }
+.mb-3 { margin-bottom: 0.75rem !important; }
+
+.pt-2 { padding-top: 0.5rem !important; }
+
+.h-2 { height: 0.5rem !important; }
+.h-3 { height: 0.75rem !important; }
+.h-4 { height: 1rem !important; }
+.h-7 { height: 1.75rem !important; }
+.h-8 { height: 2rem !important; }
+.h-10 { height: 2.5rem !important; }
+.h-14 { height: 3.5rem !important; }
+.h-16 { height: 4rem !important; }
+.h-full { height: 100% !important; }
+
+.w-auto { width: auto !important; }
+
+.pl-2 { padding-left: 0.5rem !important; }
+.pl-3 { padding-left: 0.75rem !important; }
+.pl-4 { padding-left: 1rem !important; }
+.pl-5 { padding-left: 1.25rem !important; }
+
+/* Bootstrap-like grid bridge */
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.row > * {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.col-1 { flex: 0 0 auto; width: 8.333333%; }
+.col-2 { flex: 0 0 auto; width: 16.666667%; }
+.col-3 { flex: 0 0 auto; width: 25%; }
+.col-4 { flex: 0 0 auto; width: 33.333333%; }
+.col-5 { flex: 0 0 auto; width: 41.666667%; }
+.col-6 { flex: 0 0 auto; width: 50%; }
+.col-7 { flex: 0 0 auto; width: 58.333333%; }
+.col-8 { flex: 0 0 auto; width: 66.666667%; }
+.col-9 { flex: 0 0 auto; width: 75%; }
+.col-10 { flex: 0 0 auto; width: 83.333333%; }
+.col-11 { flex: 0 0 auto; width: 91.666667%; }
+.col-12 { flex: 0 0 auto; width: 100%; }
+
+@media (min-width: 576px) {
+  .col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
+  .col-sm-6 { flex: 0 0 auto; width: 50%; }
+  .col-sm-12 { flex: 0 0 auto; width: 100%; }
+}
+
+@media (min-width: 768px) {
+  .col-md-2 { flex: 0 0 auto; width: 16.666667%; }
+  .col-md-3 { flex: 0 0 auto; width: 25%; }
+  .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
+  .col-md-5 { flex: 0 0 auto; width: 41.666667%; }
+  .col-md-6 { flex: 0 0 auto; width: 50%; }
+  .col-md-7 { flex: 0 0 auto; width: 58.333333%; }
+  .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
+}
+
+@media (min-width: 992px) {
+  .col-lg-6 { flex: 0 0 auto; width: 50%; }
+}
+
+@media (min-width: 1200px) {
+  .col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
+}
+
+/* typo compatibility (present in codebase) */
+.col-sx-4,
+.col-xs-4 {
+  flex: 0 0 auto;
+  width: 33.333333%;
+}
+
+.col-sx-8,
+.col-xs-8 {
+  flex: 0 0 auto;
+  width: 66.666667%;
+}
+
+.col-sx-12,
+.col-xs-12 {
+  flex: 0 0 auto;
+  width: 100%;
+}