@k2b/cloud 0.6.0-rc.0

package/src/styles/utilities-buttons.css

@@ -0,0 +1,405 @@
+/* Button and input utility classes — flat, solid */
+@utility focus-ui {
+  @apply focus-visible:outline-none;
+
+  &:focus-visible {
+    box-shadow: var(--ui-focus);
+  }
+}
+
+@utility btn-base {
+  border-radius: var(--ui-radius-control);
+  @apply inline-flex cursor-pointer items-center justify-center gap-1.5 select-none font-medium border;
+  @apply transition-[background-color,color,border-color,box-shadow,opacity] duration-150 ease-out;
+  @apply focus-ui;
+  @apply disabled:cursor-not-allowed disabled:opacity-40 disabled:transition-none disabled:shadow-none;
+}
+
+@utility btn-sm {
+  min-height: var(--ui-control-sm);
+  padding: var(--ui-input-padding-y) 0.75rem;
+  @apply text-xs;
+}
+
+@utility btn-md {
+  min-height: var(--ui-control-md);
+  @apply px-4 py-2 text-sm;
+}
+
+/* Simple: ghost — no bg, no border, text only, bg on hover */
+@utility btn-simple {
+  @apply btn-base bg-transparent text-zinc-600 border-transparent;
+  @apply hover:bg-zinc-100 hover:text-zinc-800;
+  @apply active:bg-zinc-200;
+  @apply dark:text-zinc-400 dark:border-transparent;
+  @apply dark:hover:bg-zinc-800 dark:hover:text-zinc-200;
+  @apply dark:active:bg-zinc-700;
+}
+
+/* Primary: semantic forward/write action; sinks (inset) on press. */
+@utility btn-primary {
+  @apply btn-base;
+  border-color: var(--ui-action-primary-border);
+  background: var(--ui-action-primary-surface);
+  color: var(--ui-action-primary-text);
+  box-shadow:
+    inset 0 1px 0 0 rgb(255 255 255 / 0.26),
+    inset 0 -1px 1px 0 rgb(0 0 0 / 0.16);
+  &:hover {
+    border-color: var(--ui-action-primary-hover-border);
+    background: var(--ui-action-primary-hover);
+  }
+  &:active {
+    border-color: var(--ui-action-primary-hover-border);
+    background: var(--ui-action-primary-active);
+    box-shadow: var(--ui-control-press);
+  }
+  &:disabled:hover {
+    border-color: var(--ui-action-primary-border);
+    background: var(--ui-action-primary-surface);
+  }
+}
+
+/* Secondary: filled zinc + soft bevel; sinks on press */
+@utility btn-secondary {
+  @apply btn-base bg-zinc-100 text-zinc-700 border-transparent;
+  @apply hover:bg-zinc-200;
+  @apply active:bg-zinc-300;
+  @apply dark:bg-zinc-800 dark:text-zinc-200 dark:border-transparent;
+  @apply dark:hover:bg-zinc-700;
+  @apply dark:active:bg-zinc-600;
+  box-shadow: var(--ui-control-bevel);
+  &:active {
+    box-shadow: var(--ui-control-press);
+  }
+}
+
+/* Success: filled emerald + soft bevel; sinks on press */
+@utility btn-success {
+  @apply btn-base bg-emerald-500 text-white border-emerald-600;
+  @apply hover:bg-emerald-600 hover:border-emerald-700;
+  @apply active:bg-emerald-700 active:border-emerald-700;
+  @apply dark:bg-emerald-500 dark:text-white dark:border-emerald-600;
+  @apply dark:hover:bg-emerald-600 dark:hover:border-emerald-700;
+  @apply dark:active:bg-emerald-700;
+  box-shadow:
+    inset 0 1px 0 0 rgb(255 255 255 / 0.26),
+    inset 0 -1px 1px 0 rgb(0 0 0 / 0.16);
+  &:active {
+    box-shadow: var(--ui-control-press);
+  }
+}
+
+/* Success, quiet: same geometry as secondary controls, with state carried by
+   a low-chroma fill instead of a louder outline or solid action surface. */
+@utility btn-success-subtle {
+  @apply btn-base border-transparent bg-emerald-500/10 text-emerald-700;
+  @apply hover:bg-emerald-500/15 hover:text-emerald-800;
+  @apply active:bg-emerald-500/20;
+  @apply dark:bg-emerald-400/12 dark:text-emerald-300;
+  @apply dark:hover:bg-emerald-400/18 dark:hover:text-emerald-200;
+  @apply dark:active:bg-emerald-400/22;
+  box-shadow: none;
+}
+
+/* Danger: filled red + soft bevel; sinks on press */
+@utility btn-danger {
+  @apply btn-base bg-red-500 text-white border-red-600;
+  @apply hover:bg-red-600 hover:border-red-700;
+  @apply active:bg-red-700 active:border-red-700;
+  @apply dark:bg-red-500 dark:text-white dark:border-red-600;
+  @apply dark:hover:bg-red-600 dark:hover:border-red-700;
+  @apply dark:active:bg-red-700;
+  box-shadow:
+    inset 0 1px 0 0 rgb(255 255 255 / 0.26),
+    inset 0 -1px 1px 0 rgb(0 0 0 / 0.16);
+  &:active {
+    box-shadow: var(--ui-control-press);
+  }
+}
+
+@utility btn-input {
+  border-radius: var(--ui-radius-control);
+  @apply inline-flex items-center justify-center gap-1.5 px-2.5 py-1 text-xs font-medium leading-5 select-none cursor-pointer;
+  @apply transition-[background-color,color,border-color,box-shadow] duration-150 border;
+  @apply bg-zinc-100 text-zinc-600 border-zinc-100;
+  @apply hover:bg-zinc-200/70 hover:text-zinc-800 hover:border-zinc-200/70;
+  @apply active:bg-zinc-200;
+  @apply focus-visible:outline-none focus-visible:bg-white focus-visible:border-blue-400;
+  @apply focus-ui;
+  @apply dark:bg-zinc-800 dark:text-zinc-300 dark:border-zinc-800;
+  @apply dark:hover:bg-zinc-700 dark:hover:text-zinc-100 dark:hover:border-zinc-700;
+  @apply dark:active:bg-zinc-700;
+  @apply dark:focus-visible:bg-zinc-900 dark:focus-visible:border-blue-400;
+  @apply disabled:cursor-not-allowed disabled:opacity-40 disabled:transition-none;
+  box-shadow: var(--ui-control-bevel);
+  &:active {
+    box-shadow: var(--ui-control-press);
+  }
+  &:disabled {
+    box-shadow: none;
+  }
+}
+
+/* Recessed sibling of `btn-input`. Same filled surface + hover / focus /
+   disabled states, but sunk in (inset recess) instead of raised (bevel) — for
+   select / dropdown / picker triggers that should read as form fields rather
+   than press-buttons. Sinks deeper on :active. Compose with `btn-input-sm/-md`
+   for sizing, like `btn-input`. */
+@utility btn-input-recessed {
+  @apply btn-input;
+  box-shadow: var(--ui-control-recess);
+  &:active {
+    box-shadow: var(--ui-control-press);
+  }
+  &:disabled {
+    box-shadow: none;
+  }
+}
+
+@utility btn-input-sm {
+  min-height: var(--ui-control-sm);
+  padding: var(--ui-input-padding-y) 0.75rem;
+  @apply text-xs;
+}
+
+@utility btn-input-md {
+  @apply min-h-9 px-3 py-1.5 text-sm;
+}
+
+@utility btn-input-active {
+  @apply bg-blue-50 text-blue-600 border-blue-200;
+  @apply hover:bg-blue-100 hover:border-blue-200;
+  @apply dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800;
+  @apply dark:hover:bg-blue-900 dark:hover:border-blue-700;
+}
+
+@utility btn-segment {
+  @apply inline-flex cursor-pointer items-center justify-center gap-1 rounded-lg border border-zinc-300/50 bg-zinc-100/55 px-2.5 py-1 text-xs font-medium leading-4 text-zinc-700 select-none;
+  @apply transition-[background-color,color,border-color] duration-150 ease-out;
+  @apply hover:bg-zinc-50/65 hover:text-zinc-900;
+  @apply active:bg-zinc-200/80;
+  @apply focus-ui;
+  @apply dark:border-zinc-700/50 dark:bg-zinc-900/50 dark:text-zinc-500;
+  @apply dark:hover:bg-zinc-800/35 dark:hover:text-zinc-300;
+  @apply dark:active:bg-zinc-800/95;
+  @apply disabled:pointer-events-none disabled:opacity-50;
+}
+
+@utility btn-segment-icon {
+  @apply btn-segment h-7 w-7 px-0;
+}
+
+@utility btn-input-primary {
+  @apply btn-input bg-white text-blue-600 border-blue-400;
+  @apply hover:bg-blue-50 hover:text-blue-700 hover:border-blue-500;
+  @apply active:bg-blue-100 active:border-blue-500;
+  @apply focus-visible:bg-white focus-visible:border-blue-500;
+  @apply dark:bg-transparent dark:text-blue-400 dark:border-blue-400;
+  @apply dark:hover:bg-blue-950 dark:hover:text-blue-300 dark:hover:border-blue-400;
+  @apply dark:active:bg-blue-900;
+  @apply dark:focus-visible:bg-zinc-900 dark:focus-visible:border-blue-400;
+}
+
+@utility btn-input-success {
+  @apply btn-input bg-white text-emerald-600 border-emerald-400;
+  @apply hover:bg-emerald-50 hover:text-emerald-700 hover:border-emerald-500;
+  @apply active:bg-emerald-100 active:border-emerald-500;
+  @apply focus-visible:bg-white focus-visible:border-emerald-500;
+  @apply dark:bg-transparent dark:text-emerald-400 dark:border-emerald-400;
+  @apply dark:hover:bg-emerald-950 dark:hover:text-emerald-300 dark:hover:border-emerald-400;
+  @apply dark:active:bg-emerald-900;
+  @apply dark:focus-visible:bg-zinc-900 dark:focus-visible:border-emerald-400;
+}
+
+/* Input: grey bg + matching border unfocused, white bg + blue border on focus */
+@utility input {
+  padding: var(--ui-input-padding-y) var(--ui-input-padding-x);
+  border-radius: var(--ui-radius-control);
+  @apply border text-sm leading-5 focus-visible:outline-none;
+  border-color: var(--ui-field-border);
+  background: var(--ui-field);
+  @apply text-zinc-800 dark:text-zinc-200;
+  @apply disabled:bg-zinc-50 disabled:text-zinc-400 disabled:border-zinc-50 disabled:cursor-not-allowed;
+  @apply dark:disabled:bg-zinc-900 dark:disabled:text-zinc-500 dark:disabled:border-zinc-900;
+  @apply transition-[background-color,border-color,box-shadow] duration-150;
+  /* Recessed well (clip-safe). Stays recessed on focus while bg→white + blue border. */
+  box-shadow: var(--ui-control-recess);
+  &:hover {
+    border-color: var(--ui-field-hover-border);
+    background: var(--ui-field-hover);
+  }
+  &:focus,
+  &:focus-within {
+    border-color: var(--ui-field-focus-border) !important;
+    background: var(--ui-field-focus) !important;
+  }
+  &:disabled {
+    box-shadow: none;
+  }
+  &:disabled,
+  &:disabled:hover {
+    @apply bg-zinc-50 text-zinc-400 border-zinc-50 dark:bg-zinc-900 dark:text-zinc-500 dark:border-zinc-900;
+  }
+}
+
+@utility icon-btn {
+  border-radius: var(--ui-radius-control);
+  @apply inline-flex h-8 w-8 items-center justify-center p-1;
+  @apply text-zinc-400 dark:text-zinc-500;
+  @apply transition-[color,background-color] duration-150 ease-out;
+  @apply bg-transparent border-0 shadow-none;
+  @apply hover:text-zinc-700 hover:bg-zinc-100;
+  @apply dark:hover:text-zinc-200 dark:hover:bg-zinc-800;
+  @apply focus-ui;
+  @apply active:bg-zinc-200 dark:active:bg-zinc-700;
+  @apply disabled:cursor-not-allowed disabled:opacity-40 disabled:transition-none;
+}
+
+/* Active / pressed state — set `aria-pressed="true"` on an `icon-btn`
+   to mark it as the currently-selected option (active filter, toggled
+   toolbar mode, etc.). Same blue tint as the markdown-editor toolbar's
+   active state so the platform reads consistently for "this is on". */
+.icon-btn[aria-pressed="true"] {
+  @apply text-blue-600 bg-blue-50;
+  @apply dark:text-blue-400 dark:bg-blue-950/40;
+}
+
+.icon-btn[aria-pressed="true"]:hover {
+  @apply bg-blue-100 text-blue-700;
+  @apply dark:bg-blue-900/40 dark:text-blue-300;
+}
+
+/* Final shared control states. Semantic roles carry hierarchy; controls avoid
+   decorative gloss and double focus borders. */
+:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-input, .btn-input-recessed) {
+  box-shadow: none;
+}
+
+:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-input, .btn-input-recessed):active {
+  box-shadow: var(--ui-control-press);
+}
+
+:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-input, .btn-input-recessed):focus-visible {
+  box-shadow: var(--ui-focus);
+}
+
+:is(.btn-secondary, .btn-input, .btn-input-recessed) {
+  border-color: transparent;
+}
+
+.input {
+  box-shadow: none;
+}
+
+.input:hover {
+  border-color: var(--ui-border);
+  background: var(--ui-hover);
+}
+
+.input:focus,
+.input:focus-within,
+.input[data-state="open"] {
+  border-color: var(--ui-field-focus-border) !important;
+  background: var(--ui-field-focus) !important;
+  box-shadow: var(--ui-focus);
+}
+
+.checkbox-card {
+  border-color: transparent;
+  background: var(--ui-field);
+}
+
+.checkbox-card:hover {
+  border-color: var(--ui-field-hover-border);
+  background: var(--ui-field-hover);
+}
+
+.checkbox-card[data-state="checked"] {
+  border-color: transparent;
+  background: var(--ui-selected);
+}
+
+.checkbox-card[data-state="invalid"] {
+  border-color: color-mix(in srgb, var(--color-red-500) 28%, transparent);
+  background: color-mix(in srgb, var(--color-red-500) 7%, var(--ui-surface));
+}
+
+.file-dropzone {
+  border-color: var(--ui-border);
+  background: var(--ui-field);
+}
+
+.file-dropzone:hover {
+  border-color: var(--ui-field-hover-border);
+  background: var(--ui-field-hover);
+}
+
+.file-dropzone[data-state="dragging"] {
+  border-color: color-mix(in srgb, var(--color-blue-500) 32%, transparent);
+  background: color-mix(in srgb, var(--color-blue-500) 7%, var(--ui-surface));
+}
+
+.file-dropzone[data-state="invalid"] {
+  border-color: color-mix(in srgb, var(--color-red-500) 32%, transparent);
+  background: color-mix(in srgb, var(--color-red-500) 7%, var(--ui-surface));
+}
+
+.file-dropzone-icon {
+  background: var(--ui-surface-raised);
+  color: var(--color-zinc-600);
+  box-shadow: none;
+}
+
+.dark .file-dropzone-icon {
+  color: var(--color-zinc-300);
+}
+
+.color-input-swatch {
+  border-color: var(--ui-border-strong);
+  box-shadow: none;
+}
+
+.ui-switch-track {
+  background: var(--ui-field);
+  box-shadow: none;
+}
+
+.ui-switch-track[data-state="checked"] {
+  background: var(--color-blue-500);
+}
+
+.ui-slider {
+  box-shadow: none;
+}
+
+.image-input-preview,
+.image-cropper-stage {
+  border-color: transparent;
+  background: var(--ui-field);
+}
+
+.image-input-placeholder {
+  background: var(--ui-surface-subtle);
+}
+
+.image-cropper-frame {
+  background: var(--ui-surface-subtle);
+  box-shadow: none;
+}
+
+.filter-chip-trigger {
+  border-color: transparent;
+  background: var(--ui-field);
+  box-shadow: none;
+}
+
+.filter-chip-trigger:hover {
+  background: var(--ui-hover);
+}
+
+.filter-chip-trigger[data-state="active"] {
+  border-color: transparent;
+  background: var(--ui-selected);
+  box-shadow: none;
+}

package/src/styles/utilities-data.css

@@ -0,0 +1,33 @@
+/* Dense data surfaces. Colour roles stay separate from domain status and
+   category colours so tables remain scannable across app themes. */
+
+@utility data-table-header {
+  background: var(--ui-data-header);
+}
+
+@utility data-table-divider {
+  border-color: var(--ui-data-divider);
+}
+
+@utility data-table-row-divider {
+  border-color: var(--ui-data-row-divider);
+}
+
+@utility data-table-row-hover {
+  &:hover {
+    background: var(--ui-data-row-hover);
+  }
+}
+
+@utility data-table-row-selected {
+  background: var(--ui-data-row-selected);
+}
+
+@utility data-table-column-hover {
+  background: var(--ui-data-column-hover);
+}
+
+[aria-label="Data table"] {
+  border-color: var(--ui-border);
+  box-shadow: none;
+}

package/src/styles/utilities-feedback.css

@@ -0,0 +1,232 @@
+/* Feedback blocks, badges, and chips. */
+@utility status-dot {
+  @apply w-2 h-2 rounded-full shrink-0;
+}
+
+@utility badge {
+  @apply rounded inline-flex items-center gap-1 px-1.5 py-0.5 text-xs;
+}
+
+/*
+ * Tone modifiers. Four apps were already asking for these — a status badge is
+ * the one place a colour carries the whole meaning — but only the shape utility
+ * above existed, so every `badge badge-success` rendered in body text and no
+ * status anywhere was distinguishable by colour.
+ */
+@utility badge-neutral {
+  @apply badge;
+  @apply bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300;
+}
+
+@utility badge-success {
+  @apply badge;
+  @apply bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300;
+}
+
+@utility badge-warning {
+  @apply badge;
+  @apply bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300;
+}
+
+@utility badge-danger {
+  @apply badge;
+  @apply bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300;
+}
+
+/** Smaller variant for dense rows; tone-independent. */
+@utility badge-sm {
+  @apply px-1 py-0 text-[0.6875rem];
+}
+
+@utility chip {
+  border-radius: var(--ui-radius-surface);
+  @apply inline-flex items-center gap-1.5 text-xs transition-colors cursor-pointer px-2 py-1;
+  @apply border border-zinc-200 dark:border-zinc-700;
+}
+
+@utility thumbnail {
+  border-radius: var(--ui-radius-surface);
+  @apply overflow-hidden;
+}
+
+@utility popup {
+  border: 1px solid var(--ui-border-strong);
+  border-radius: var(--ui-radius-surface);
+  background: var(--ui-surface);
+  @apply text-zinc-900 dark:text-zinc-100;
+  /* Floating layer (portaled) — outer shadow is fine here. */
+  box-shadow: var(--ui-shadow-float);
+}
+
+@utility context-menu-surface {
+  border: 0;
+  border-radius: var(--ui-context-menu-radius);
+  background: var(--ui-context-menu-surface);
+  box-shadow: var(--ui-context-menu-shadow);
+}
+
+@utility dropdown-menu-surface {
+  border: 0;
+  border-radius: var(--ui-dropdown-menu-radius);
+  background: var(--ui-dropdown-menu-surface);
+  box-shadow: var(--ui-dropdown-menu-shadow);
+  backdrop-filter: blur(14px) saturate(1.12);
+  -webkit-backdrop-filter: blur(14px) saturate(1.12);
+}
+
+@utility menu-item {
+  @apply flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors;
+
+  &:hover,
+  &:focus-visible {
+    background: var(--ui-menu-hover);
+  }
+}
+
+@utility menu-section {
+  @apply mt-1 pt-1;
+}
+
+@utility menu-label {
+  @apply px-4 pt-3 pb-1 text-xs font-medium uppercase tracking-wider text-zinc-500;
+}
+
+@utility state-placeholder-icon {
+  @apply flex shrink-0 items-center justify-center text-zinc-400 dark:text-zinc-500;
+}
+
+@utility state-placeholder-icon-panel {
+  width: 3rem;
+  height: 3rem;
+  border: 1px solid var(--ui-state-icon-border);
+  border-radius: var(--ui-radius-surface);
+  background: var(--ui-state-icon-surface);
+}
+
+@utility state-placeholder-icon-error {
+  border-color: var(--ui-state-error-icon-border);
+  background: var(--ui-state-error-icon-surface);
+  @apply text-red-600 dark:text-red-400;
+}
+
+@utility progress-track {
+  background: var(--ui-progress-track);
+  box-shadow: var(--ui-progress-track-shadow);
+}
+
+@utility progress-fill-primary {
+  background: var(--ui-progress-primary);
+}
+
+@utility progress-fill-success {
+  background: var(--ui-progress-success);
+}
+
+@utility progress-fill-danger {
+  background: var(--ui-progress-danger);
+}
+
+@utility tooltip-surface {
+  position: fixed;
+  z-index: 100;
+  max-width: min(18rem, calc(100vw - 1rem));
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--ui-tooltip-border);
+  border-radius: var(--ui-tooltip-radius);
+  background: var(--ui-tooltip-surface);
+  color: var(--ui-tooltip-text);
+  box-shadow: var(--ui-tooltip-shadow);
+  @apply pointer-events-auto text-[11px] leading-4 whitespace-normal;
+}
+
+@utility tag {
+  @apply rounded-full inline-flex items-center gap-1 px-1.5 py-0.5 text-[11px] leading-4 font-medium;
+}
+
+/* Stat cards are component-owned by StatGrid/StatCell. See
+   `skills/cloud-app/references/frontend.md` § Stats and the live demos in
+   the Fibel UI catalog. Do not reintroduce
+   the earlier `.stat-grid / .stat-cell / .stat-value / .stat-label / .stat-sub`
+   utilities; app code should import the shared components instead. */
+
+.menu-item {
+  gap: 0.625rem;
+  padding: 0.4375rem 0.75rem;
+  font-size: 0.8125rem;
+}
+
+.menu-label {
+  padding: 0.625rem 0.75rem 0.25rem;
+  font-size: 0.625rem;
+  letter-spacing: 0.06em;
+}
+
+.state-placeholder[data-variant="panel"] {
+  min-height: 13rem;
+  padding: 1.5rem;
+}
+
+.state-placeholder-icon-panel {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--ui-radius-control);
+}
+
+.prompt-panel,
+.prompt-search-surface {
+  border: 1px solid var(--ui-dialog-border);
+  border-radius: var(--ui-dialog-radius);
+  background: var(--ui-dialog-surface);
+  box-shadow: var(--ui-shadow-float) !important;
+}
+
+.prompt-search-surface {
+  --prompt-search-focus-accent: var(--color-blue-500);
+}
+
+.dark .prompt-search-surface {
+  --prompt-search-focus-accent: var(--color-blue-400);
+}
+
+.prompt-panel-danger {
+  border-color: color-mix(in srgb, var(--color-red-500) 28%, var(--ui-dialog-border));
+}
+
+.prompt-panel-success {
+  border-color: color-mix(in srgb, var(--color-green-500) 24%, var(--ui-dialog-border));
+}
+
+.prompt-search-surface > label {
+  background: var(--ui-field);
+}
+
+.prompt-search-surface > label:focus-within {
+  background: color-mix(in srgb, var(--prompt-search-focus-accent) 4%, var(--ui-field-focus));
+  box-shadow: none;
+}
+
+.prompt-search-surface > label > i {
+  transition: color 150ms ease-out;
+}
+
+.prompt-search-surface > label:focus-within > i {
+  color: var(--prompt-search-focus-accent);
+}
+
+.prompt-search-surface input {
+  caret-color: var(--prompt-search-focus-accent);
+}
+
+@media (forced-colors: active) {
+  .prompt-search-surface:focus-within {
+    outline: 2px solid CanvasText;
+    outline-offset: -2px;
+  }
+}
+
+#ui-toast-container > div {
+  border: 1px solid var(--ui-border-strong);
+  border-radius: var(--ui-radius-surface);
+  background: var(--ui-surface-raised);
+  box-shadow: var(--ui-shadow-float) !important;
+}