@kerkhoff-ict/solora 1.0.0 → 2.0.0

package/dist/index.css

@@ -1,755 +1,606 @@
-.btn-primary {
-  background: #0071e3;
-  color: #fff;
+/* ======================
+   Root kleurvariabelen (fallbacks)
+====================== */
+:root {
+  --color-primary: #0071e3;
+  --color-secondary: #f5f5f5;
+  --color-success: #28a745;
+  --color-warning: #ffc107;
+  --color-danger: #dc3545;
+  --color-text-light: #ffffff;
+  --color-text-dark: #000000;
+}
+/* ======================
+   Basis button styles
+====================== */
+.btn {
   font-weight: 600;
   border: none;
-  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
-  transition: background 0.2s;
+  border-radius: 9999px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  border-radius: 9999px;
   cursor: pointer;
-}
-
-.btn-primary:hover {
-  background: #005bb5;
-}
-
+  transition: background 0.2s, filter 0.2s;
+}
+.btn-sm { padding: 0.1875rem 1rem; font-size: 0.9375rem; }
+.btn-md { padding: 0.5rem 1.2rem; font-size: 1rem; }
+.btn-lg { padding: 0.8125rem 1.5625rem; font-size: 1.0625rem; }
+.btn-xl { padding: 0.9375rem 1.875rem; font-size: 1.3125rem; }
+.btn.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+/* ======================
+   Predefined color buttons met fallback
+====================== */
+.btn-primary { 
+  background: var(--color-primary, #0071e3); 
+  color: var(--color-text-light, #fff); 
+}
+.btn-primary:hover { filter: brightness(0.85); }
+.btn-secondary { 
+  background: var(--color-secondary, #f5f5f5); 
+  color: var(--color-text-dark, #000); 
+  border: 2px solid rgba(0,0,0,0.1); 
+}
+.btn-secondary.active,
+.btn-secondary:hover { filter: brightness(0.9); }
+.btn-success { 
+  background: var(--color-success, #28a745); 
+  color: var(--color-text-light, #fff); 
+}
+.btn-success:hover { filter: brightness(0.85); }
+.btn-warning { 
+  background: var(--color-warning, #ffc107); 
+  color: var(--color-text-dark, #000); 
+}
+.btn-warning:hover { filter: brightness(0.85); }
+.btn-danger { 
+  background: var(--color-danger, #dc3545); 
+  color: var(--color-text-light, #fff); 
+}
+.btn-danger:hover { filter: brightness(0.85); }
+/* ======================
+   Glass button (special)
+====================== */
 .btn-glass {
-  background: rgba(255, 255, 255, 0.2);
-  color: #000;
-  font-weight: 600;
+  position: relative;
+  background: rgba(255,255,255,0.2);
+  color: var(--color-text-dark, #000);
   border: 1px solid rgba(255,255,255,0.3);
-  backdrop-filter: blur(8px);
-  transition: background 0.2s, box-shadow 0.2s;
-  cursor: pointer;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(255,255,255,0.1);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+.btn-glass::before {
+  content:"";
+  position:absolute;
+  top:4px; left:4px; right:4px; bottom:0;
+  background: rgba(0,0,0,0.084);
+  filter: blur(16px);
+  z-index:-1;
+  border-radius: inherit;
+  pointer-events: none;
 }
-
 .btn-glass:hover {
-  background: rgba(255,255,255,0.3);
-}
-
-.btn-sm {
-  padding: 0.1875rem 1rem;
-  font-size: 0.9375rem;
-}
-
-.btn-md {
-  padding: 0.5rem 1.25rem;
-  font-size: 1rem;
-}
-
-.btn-lg {
-  padding: 0.8125rem 1.5625rem;
-  font-size: 1.0625rem;
-}
-
-.btn-xl {
-  padding: 0.9375rem 1.875rem;
-  font-size: 1.3125rem;
+  background: rgba(255,255,255,0.35);
+  box-shadow: 0 12px 28px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.15);
+}
+.btn-glass:active {
+  background: rgba(255,255,255,0.25);
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(255,255,255,0.2);
+  transform: translateY(1px);
+}
+/* ======================
+   Custom color button helper
+   Usage: .btn-[#ff6600] of .btn-[rgba(255,0,0,0.5)]
+====================== */
+[class*="btn-["] {
+  color: var(--color-text-light, #fff);
+  transition: all 0.2s ease;
+}
+[class*="btn-["]:hover {
+  filter: brightness(0.85);
+}
+/* ======================
+   Dark mode support
+====================== */
+@media (prefers-color-scheme: dark) {
+  .btn-primary { background: #0558be; color: var(--color-text-light, #fff); box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
+  .btn-primary:hover { background: #2b76d2; }
+
+  .btn-secondary { background: #1c1c1e; color: #f0f0f0; border: 2px solid rgba(255,255,255,0.2); box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
+  .btn-secondary.active,
+  .btn-secondary:hover { background-color: #2a2a2c; }
+
+  .btn-success { background: #1c3e23; }
+  .btn-success:hover { filter: brightness(1.2); }
+
+  .btn-warning { background: #664d03; }
+  .btn-warning:hover { filter: brightness(1.2); }
+
+  .btn-danger { background: #7a1f1f; }
+  .btn-danger:hover { filter: brightness(1.2); }
+
+  .btn-glass { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 8px 32px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.05); }
+  .btn-glass::before { background: rgba(255,255,255,0.04); }
+  .btn-glass:hover { background: rgba(255,255,255,0.1); box-shadow: 0 12px 28px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.08); }
+  .btn-glass:active { background: rgba(255,255,255,0.07); box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.1); }
+}
+.codeblock {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  font-family: "SF Mono", "Menlo", monospace;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  background: #fefefe55;
+  backdrop-filter: blur(8px);
 }
-
-.block {
+.pre-content {
+  margin: 0;
+  backdrop-filter: blur(12px);
+  color: #000000;
+  padding-left: 16px;
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  /* white-space: pre-wrap; */
+  word-break: break-word;
   display: block;
-}
-
-.inline-block {
-  display: inline-block;
-}
-
-.inline {
-  display: inline;
-}
-
-.flex {
-  display: flex;
-}
-
-.inline-flex {
-  display: inline-flex;
-}
-
-.grid {
-  display: grid;
-}
-
-.inline-grid {
-  display: inline-grid;
-}
-
-.hidden {
-  display: hidden;
-}
-
-.flex-row {
+  background: transparent;
+  color: inherit;
+  position: relative;
+  transition:
+    max-height 0.3s ease,
+    opacity 0.3s ease;
+  opacity: 1;
+}
+.pre-content.collapsed {
+  max-height: 0;
+  opacity: 0;
+}
+/* .codeblock.fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  z-index: 9999;
+} */
+.pre-copy-btn {
+  justify-self: end;
+  transition:
+    background 0.2s ease,
+    color 0.2s ease;
+}
+.pre-copy-btn.btn-in-pre {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  /* padding: 4px 10px; */
+  /* font-size: 0.8rem; */
+  /* border-radius: 6px; */
+  /* background: rgba(255, 255, 255, 0.15); */
+  /* color: #000; */
+  /* border: 1px solid rgba(255, 255, 255, 0.3); */
+  /* backdrop-filter: blur(8px); */
+  /* transition: background 0.2s, transform 0.1s; */
+  z-index: 5;
+}
+/* .pre-copy-btn.btn-in-pre:hover {
+  background: rgba(255, 255, 255, 0.25);
+  transform: scale(1.05);
+} */
+.pre-top {
+  background: rgb(74, 74, 74);
   display: flex;
+  width: 100%;
   flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 9px;
+  padding-left: 20px;
 }
-
-.flex-row-reverse {
-  display: flex;
-  flex-direction: row-reverse;
-}
-
-.flex-col {
-  display: flex;
-  flex-direction: column;
-}
-
-.flex-col-reverse {
-  display: flex;
-  flex-direction: column-reverse;
-}
-
-.flex-wrap {
+.pre-top-btns {
   display: flex;
-  flex-direction: wrap;
+  gap: 8px;
+  z-index: 10;
+  cursor: pointer !important;
+}
+.pre-top-btns span {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  display: inline-block;
 }
-
-.flex-nowrap {
+.pre-btn-red {
+  background: #ff5f57;
+  position: relative;
+}
+.pre-btn-orange {
+  background: #ffbd2e;
+  position: relative;
+}
+.pre-btn-green {
+  background: #28c940;
+  position: relative;
+}
+/* Iconen toevoegen */
+.pre-btn-red::before {
+  content: '×';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 13px;
+  color: black;
+  font-weight: bold;
+  opacity: 0;
+  pointer-events: none;
+}
+.pre-btn-orange::before {
+  content: '–';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 13px;
+  color: black;
+  font-weight: bold;
+  opacity: 0;
+  pointer-events: none;
+}
+.pre-btn-green::before {
+  content: "⛶";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 10px;
+  color: black;
+  font-weight: bold;
+  opacity: 0;
+  pointer-events: none;
+}
+.pre-top-btns span:hover::before { opacity: 1; }
+.pre-btn-red:hover {
+  filter: brightness(1.2);
+}
+.pre-btn-orange:hover {
+  filter: brightness(1.2);
+}
+.pre-btn-green:hover {
+  filter: brightness(1.2);
+}
+.codeblock .token.comment,
+.codeblock .token.prolog,
+.codeblock .token.doctype,
+.codeblock .token.cdata {
+  color: #7f8c8d;
+  font-style: italic;
+}
+.codeblock .token.punctuation {
+  color: #2c3e50;
+}
+.codeblock .token.operator,
+.codeblock .token.boolean,
+.codeblock .token.symbol,
+.codeblock .token.entity {
+  color: #2c3e50;
+}
+.codeblock .token.number {
+  color: #d35400;
+}
+.codeblock .token.property,
+.codeblock .token.tag,
+.codeblock .token.constant,
+.codeblock .token.class-name,
+.codeblock .token.function {
+  color: #2980b9;
+  font-weight: 500;
+}
+.codeblock .token.selector,
+.codeblock .token.attr-name,
+.codeblock .token.string,
+.codeblock .token.char,
+.codeblock .token.builtin,
+.codeblock .token.inserted {
+  color: #27ae60;
+}
+.codeblock .token.keyword,
+.codeblock .token.atrule,
+.codeblock .token.attr-value,
+.codeblock .token.deleted,
+.codeblock .token.regex,
+.codeblock .token.important {
+  color: #e67e22;
+  font-weight: 500;
+}
+.codeblock .token.entity {
+  cursor: help;
+}
+.codeblock .token.important,
+.codeblock .token.bold {
+  font-weight: bold;
+}
+.codeblock .token.italic {
+  font-style: italic;
+}
+/* Optional: highlight background for selected text */
+.codeblock ::selection {
+  background: rgba(46, 204, 113, 0.2);
+}
+.codeblock pre::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+}
+.codeblock pre::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}
+.codeblock pre::-webkit-scrollbar-track {
+  background: transparent;
+}
+/* --- Dark mode via media query --- */
+@media (prefers-color-scheme: dark) {
+
+  .codeblock {
+    background: #1e1e2f88; /* donkere blur achtergrond */
+    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+  }
+
+  .pre-content {
+    color: #f0f0f0;
+  }
+
+  .pre-top {
+    background: #2c2c3e;
+  }
+
+  /* Prism tokens dark */
+  .codeblock .token.comment,
+  .codeblock .token.prolog,
+  .codeblock .token.doctype,
+  .codeblock .token.cdata {
+    color: #95a5a6;
+    font-style: italic;
+  }
+
+  .codeblock .token.punctuation {
+    color: #ecf0f1;
+  }
+
+  .codeblock .token.operator,
+  .codeblock .token.boolean,
+  .codeblock .token.symbol,
+  .codeblock .token.entity {
+    color: #ecf0f1;
+  }
+
+  .codeblock .token.number {
+    color: #e67e22;
+  }
+
+  .codeblock .token.property,
+  .codeblock .token.tag,
+  .codeblock .token.constant,
+  .codeblock .token.class-name,
+  .codeblock .token.function {
+    color: #3498db;
+    font-weight: 500;
+  }
+
+  .codeblock .token.selector,
+  .codeblock .token.attr-name,
+  .codeblock .token.string,
+  .codeblock .token.char,
+  .codeblock .token.builtin,
+  .codeblock .token.inserted {
+    color: #2ecc71;
+  }
+
+  .codeblock .token.keyword,
+  .codeblock .token.atrule,
+  .codeblock .token.attr-value,
+  .codeblock .token.deleted,
+  .codeblock .token.regex,
+  .codeblock .token.important {
+    color: #f39c12;
+    font-weight: 500;
+  }
+
+}
+/* ======================
+   Basis dropdown container
+====================== */
+.dropdown {
+  position: relative;
+  display: inline-block;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+    sans-serif;
+  cursor: pointer;
+  user-select: none;
+}
+/* ======================
+   Dropdown button
+====================== */
+.dropdown-btn {
+  padding: 0.3rem 0.4rem;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: var(--color-bg, #fefefe);
+  color: var(--color-text-dark, #000);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
   display: flex;
-  flex-direction: nowrap;
-}
-
-.items-start {
-  align-items: flex-start;
-}
-
-.items-center {
   align-items: center;
-}
-
-.items-end {
-  align-items: flex-end;
-}
-
-.justify-start {
-  justify-content: flex-start;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.justify-end {
-  justify-content: flex-end;
-}
-
-.justify-between {
   justify-content: space-between;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-
-.justify-around {
-  justify-content: space-around;
-}
-
-.justify-evenly {
-  justify-content: space-evenly;
-}
-
-.h-sm {
-  height: 8rem;
-}
-
-.h-md {
-  height: 16rem;
-}
-
-.h-lg {
-  height: 24rem;
-}
-
-.h-xl {
-  height: 32rem;
-}
-
-.h-2xl {
-  height: 48rem;
-}
-
-.h-full {
-  height: 100%;
-}
-
-.h-screen {
-  height: 100vh;
-}
-
-.max-h-sm {
-  max-height: 8rem;
-}
-
-.max-h-md {
-  max-height: 16rem;
-}
-
-.max-h-lg {
-  max-height: 24rem;
-}
-
-.max-h-xl {
-  max-height: 32rem;
-}
-
-.max-h-2xl {
-  max-height: 48rem;
-}
-
-.max-h-full {
-  max-height: 100%;
-}
-
-.max-h-screen {
-  max-height: 100vh;
-}
-
-.max-w-sm {
-  max-width: 8rem;
-}
-
-.max-w-md {
-  max-width: 16rem;
-}
-
-.max-w-lg {
-  max-width: 24rem;
-}
-
-.max-w-xl {
-  max-width: 32rem;
-}
-
-.max-w-2xl {
-  max-width: 48rem;
-}
-
-.max-w-full {
-  max-width: 100%;
-}
-
-.max-w-screen {
-  max-width: 100vh;
-}
-
-.mb-sm {
-  margin-bottom: 0.25rem;
-}
-
-.mb-md {
-  margin-bottom: 0.5rem;
-}
-
-.mb-lg {
-  margin-bottom: 1rem;
-}
-
-.mb-xl {
-  margin-bottom: 2rem;
-}
-
-.mb-2xl {
-  margin-bottom: 4rem;
-}
-
-.mb-auto {
-  margin-bottom: auto;
-}
-
-.mb-full {
-  margin-bottom: 100%;
-}
-
-.m-sm {
-  margin: 0.25rem;
-}
-
-.m-md {
-  margin: 0.5rem;
-}
-
-.m-lg {
-  margin: 1rem;
-}
-
-.m-xl {
-  margin: 2rem;
+.dropdown-btn:hover {
+  background: var(--color-bg-hover, rgba(0, 0, 0, 0.05));
 }
-
-.m-2xl {
-  margin: 4rem;
-}
-
-.m-auto {
-  margin: auto;
-}
-
-.m-full {
-  margin: 100%;
-}
-
-.min-h-sm {
-  min-height: 8rem;
-}
-
-.min-h-md {
-  min-height: 16rem;
-}
-
-.min-h-lg {
-  min-height: 24rem;
-}
-
-.min-h-xl {
-  min-height: 32rem;
-}
-
-.min-h-2xl {
-  min-height: 48rem;
-}
-
-.min-h-full {
-  min-height: 100%;
-}
-
-.min-h-screen {
-  min-height: 100vh;
-}
-
-.min-w-sm {
-  min-width: 8rem;
-}
-
-.min-w-md {
-  min-width: 16rem;
-}
-
-.min-w-lg {
-  min-width: 24rem;
-}
-
-.min-w-xl {
-  min-width: 32rem;
-}
-
-.min-w-2xl {
-  min-width: 48rem;
-}
-
-.min-w-full {
-  min-width: 100%;
-}
-
-.min-w-screen {
-  min-width: 100vh;
-}
-
-.ml-sm {
-  margin-left: 0.25rem;
-}
-
-.ml-md {
+.dropdown-btn:after {
+  content: "▾";
   margin-left: 0.5rem;
-}
-
-.ml-lg {
-  margin-left: 1rem;
-}
-
-.ml-xl {
-  margin-left: 2rem;
-}
-
-.ml-2xl {
-  margin-left: 4rem;
-}
-
-.ml-auto {
-  margin-left: auto;
-}
-
-.ml-full {
-  margin-left: 100%;
-}
-
-.mr-sm {
-  margin-right: 0.25rem;
-}
-
-.mr-md {
-  margin-right: 0.5rem;
-}
-
-.mr-lg {
-  margin-right: 1rem;
-}
-
-.mr-xl {
-  margin-right: 2rem;
-}
-
-.mr-2xl {
-  margin-right: 4rem;
-}
-
-.mr-auto {
-  margin-right: auto;
-}
-
-.mr-full {
-  margin-right: 100%;
-}
-
-.mt-sm {
-  margin-top: 0.25rem;
-}
-
-.mt-md {
+  font-size: 0.75rem;
+  transition: transform 0.2s ease;
+}
+.dropdown.open .dropdown-btn:after {
+  transform: rotate(180deg);
+}
+.dropdown-btn:focus {
+  outline: 2px solid var(--color-primary, #0071e3);
+  outline-offset: 2px;
+}
+/* ======================
+   Dropdown content
+====================== */
+.dropdown-content {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  min-width: 10rem;
+  border-radius: 12px;
   margin-top: 0.5rem;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
+  max-height: 15rem;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0,0,0,0.2) transparent;
+  opacity: 0;
+  transform: translateY(-10px) scale(0.95);
+  pointer-events: none;
+  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+  z-index: 1000;
+}
+.dropdown-content::-webkit-scrollbar {
+  width: 6px;
+}
+.dropdown-content::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,0.2);
+  border-radius: 3px;
+}
+.dropdown-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+/* Show dropdown */
+.dropdown.open .dropdown-content {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+}
+/* ======================
+   Dropdown items
+====================== */
+.dropdown-item {
+  padding: 0.3rem 0.4rem;
+  color: var(--color-text-dark, #000);
+  transition: background 0.2s, color 0.2s;
+  cursor: pointer;
 }
-
-.mt-lg {
-  margin-top: 1rem;
-}
-
-.mt-xl {
-  margin-top: 2rem;
-}
-
-.mt-2xl {
-  margin-top: 4rem;
-}
-
-.mt-auto {
-  margin-top: auto;
-}
-
-.mt-full {
-  margin-top: 100%;
-}
-
-.mx-sm {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.mx-md {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
-
-.mx-lg {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-
-.mx-xl {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-.mx-2xl {
-  margin-left: 4rem;
-  margin-right: 4rem;
-}
-
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.mx-full {
-  margin-left: 100%;
-  margin-right: 100%;
-}
-
-.my-sm {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
-.my-md {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.my-lg {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
-.my-xl {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-
-.my-2xl {
-  margin-top: 4rem;
-  margin-bottom: 4rem;
-}
-
-.my-auto {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.my-full {
-  margin-top: 100%;
-  margin-bottom: 100%;
-}
-
-.pb-sm {
-  padding-bottom: 0.25rem;
-}
-
-.pb-md {
-  padding-bottom: 0.5rem;
-}
-
-.pb-lg {
-  padding-bottom: 1rem;
-}
-
-.pb-xl {
-  padding-bottom: 2rem;
-}
-
-.pb-2xl {
-  padding-bottom: 4rem;
-}
-
-.pb-auto {
-  padding-bottom: auto;
-}
-
-.pb-full {
-  padding-bottom: 100%;
-}
-
-.p-sm {
-  padding: 0.25rem;
-}
-
-.p-md {
-  padding: 0.5rem;
-}
-
-.p-lg {
-  padding: 1rem;
-}
-
-.p-xl {
-  padding: 2rem;
-}
-
-.p-2xl {
-  padding: 4rem;
-}
-
-.p-auto {
-  padding: auto;
-}
-
-.p-full {
-  padding: 100%;
-}
-
-.pl-sm {
-  padding-left: 0.25rem;
-}
-
-.pl-md {
-  padding-left: 0.5rem;
-}
-
-.pl-lg {
-  padding-left: 1rem;
-}
-
-.pl-xl {
-  padding-left: 2rem;
-}
-
-.pl-2xl {
-  padding-left: 4rem;
-}
-
-.pl-auto {
-  padding-left: auto;
-}
-
-.pl-full {
-  padding-left: 100%;
-}
-
-.pr-sm {
-  padding-right: 0.25rem;
-}
-
-.pr-md {
-  padding-right: 0.5rem;
-}
-
-.pr-lg {
-  padding-right: 1rem;
-}
-
-.pr-xl {
-  padding-right: 2rem;
-}
-
-.pr-2xl {
-  padding-right: 4rem;
-}
-
-.pr-auto {
-  padding-right: auto;
-}
-
-.pr-full {
-  padding-right: 100%;
-}
-
-.pt-sm {
-  padding-top: 0.25rem;
-}
-
-.pt-md {
-  padding-top: 0.5rem;
-}
-
-.pt-lg {
-  padding-top: 1rem;
-}
-
-.pt-xl {
-  padding-top: 2rem;
-}
-
-.pt-2xl {
-  padding-top: 4rem;
-}
-
-.pt-auto {
-  padding-top: auto;
-}
-
-.pt-full {
-  padding-top: 100%;
-}
-
-.px-sm {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
-.px-md {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.px-lg {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.px-xl {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-
-.px-2xl {
-  padding-left: 4rem;
-  padding-right: 4rem;
-}
-
-.px-auto {
-  padding-left: auto;
-  padding-right: auto;
-}
-
-.px-full {
-  padding-left: 100%;
-  padding-right: 100%;
-}
-
-.py-sm {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
-.py-md {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
-.py-lg {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.py-xl {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
-.py-2xl {
-  padding-top: 4rem;
-  padding-bottom: 4rem;
-}
-
-.py-auto {
-  padding-top: auto;
-  padding-bottom: auto;
-}
-
-.py-full {
-  padding-top: 100%;
-  padding-bottom: 100%;
-}
-
-.rounded-sm {
-  border-radius: 0.125rem;
-}
-
-.rounded-md {
-  border-radius: 0.25rem;
-}
-
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
-.rounded-xl {
-  border-radius: 1rem;
-}
-
-.rounded-2xl {
-  border-radius: 1.5rem;
-}
-
-.rounded-3xl {
-  border-radius: 2rem;
-}
-
-.rounded-full {
-  border-radius: 9999px;
+.dropdown-item:hover {
+  background: rgba(0, 0, 0, 0.05);
 }
-
-.text-left { text-align: left; }
-
-.text-center { text-align: center; }
-
-.text-right { text-align: right; }
-
-.text-justify { text-align: justify; }
-
-.w-sm { width: 8rem; }
-
-.w-md { width: 16rem; }
-
-.w-lg { width: 24rem; }
-
-.w-xl { width: 32rem; }
-
-.w-2xl { width: 48rem; }
-
-.w-full { width: 100%; }
-
-.w-screen { width: 100vh; }
+.dropdown-item.active {
+  font-weight: 600;
+  background: rgba(0, 0, 0, 0.1);
+}
+.dropdown-item:focus {
+  outline: 2px solid var(--color-primary, #0071e3);
+  outline-offset: 2px;
+}
+/* Placeholder or disabled items */
+.dropdown-item[aria-disabled="true"],
+.dropdown-item.placeholder {
+  color: rgba(0, 0, 0, 0.4);
+  cursor: default;
+  pointer-events: none;
+}
+/* ======================
+   Hidden input styling
+====================== */
+.dropdown input[type="hidden"] {
+  display: none;
+}
+/* ======================
+   Dividers
+====================== */
+.dropdown-divider {
+  height: 1px;
+  margin: 0.25rem 0;
+  background: rgba(0, 0, 0, 0.1);
+}
+/* ======================
+   Option group labels
+====================== */
+.dropdown-label {
+  padding: 0.3rem 0.4rem;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.6);
+  cursor: default;
+}
+/* ======================
+   Dark mode support
+====================== */
+@media (prefers-color-scheme: dark) {
+  .dropdown-btn {
+    background: #1c1c1e;
+    color: #f0f0f0;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+  }
+
+  .dropdown-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .dropdown-content {
+    background: rgba(28, 28, 30, 0.8);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
+  }
+
+  .dropdown-item {
+    color: #f0f0f0;
+  }
+
+  .dropdown-item:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  .dropdown-item.active {
+    background: rgba(255, 255, 255, 0.12);
+  }
+
+  .dropdown-divider {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .dropdown-item[aria-disabled="true"],
+  .dropdown-item.placeholder {
+    color: rgba(255, 255, 255, 0.4);
+  }
+
+  .dropdown-label {
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  .dropdown-content::-webkit-scrollbar-thumb {
+    background: rgba(255,255,255,0.2);
+  }
+}