shad-m 1.0.0

package/dist/globals.css

@@ -0,0 +1,1179 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-balance {
+    -webkit-text-wrap: balance;
+    text-wrap: balance;
+  }
+
+  /* Hide scrollbar but keep scroll functionality */
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+    /* Chrome, Safari and Opera */
+  }
+
+  /* Custom native scrollbar styles for all pages */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: hsl(var(--border) / 0.5);
+    /* Using theme border color with 50% opacity for lighter appearance */
+    border-radius: 100px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--border) / 0.8);
+    /* Slightly darker on hover (80% opacity) */
+  }
+
+  /* Firefox scrollbar */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--border) / 0.5) transparent;
+  }
+
+  /* Disable sidebar transitions on initial load */
+  .sidebar-no-transition * {
+    transition: none !important;
+  }
+
+  /* Smooth sidebar hover expand animation */
+  [data-sidebar="sidebar"] {
+    transition: box-shadow 500ms ease-out;
+  }
+
+  /* Fast sheet slide animations to match sidebar speed - only apply to Sheet component 
+     Note: This selector targets only elements with BOTH role="dialog" AND data-radix-dialog-content 
+     which is specific to Sheet/Dialog components, not Popover/Tooltip/Dropdown */
+  [role="dialog"][data-radix-dialog-content][data-state="closed"],
+  [role="dialog"][data-radix-dialog-content][data-state="open"] {
+    animation-duration: 500ms !important;
+  }
+
+  /* Skeleton wave animation */
+  @keyframes wave {
+    0% {
+      transform: translateX(-100%);
+    }
+
+    50% {
+      transform: translateX(100%);
+    }
+
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  .animate-wave {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .animate-wave::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg,
+        transparent,
+        rgba(255, 255, 255, 0.4),
+        transparent);
+    animation: wave 2s ease-in-out infinite;
+  }
+
+  .ic-active svg path {
+    @apply fill-blue-500;
+  }
+
+  .ic-active path {
+    @apply fill-blue-500;
+  }
+
+  /* Override cho button disabled state */
+  /* button:disabled .ic-active svg path {
+    @apply fill-white !important;
+  }
+
+  button:disabled .ic-active path {
+    @apply fill-white !important;
+  }
+
+  button:disabled svg path {
+    @apply fill-white !important;
+  } */
+
+  .ic-white svg path {
+    @apply fill-white !important;
+  }
+
+  .ic-white path {
+    @apply fill-white !important;
+  }
+
+  .ic-orange svg path {
+    @apply fill-orange-500;
+  }
+
+  .ic-orange path {
+    @apply fill-orange-500;
+  }
+
+  .ic-green svg path {
+    @apply fill-green-500;
+  }
+
+  .ic-green path {
+    @apply fill-green-500;
+  }
+
+  .ic-green-700 svg path {
+    @apply fill-green-700;
+  }
+
+  .ic-green-700 path {
+    @apply fill-green-700;
+  }
+
+  .ic-default path {
+    @apply fill-gray-400;
+  }
+
+  .ic-error svg path {
+    @apply fill-red-500;
+  }
+
+  .ic-error path {
+    @apply fill-red-500;
+  }
+
+  .ic-red svg path {
+    @apply fill-red-500;
+  }
+
+  .ic-red path {
+    @apply fill-red-500;
+  }
+
+  .ic-disable path {
+    @apply fill-ink-200s;
+  }
+
+  .ic-ink-400s svg path {
+    @apply fill-ink-400s;
+  }
+
+  .ic-ink-400s path {
+    @apply fill-ink-400s;
+  }
+
+  .ic-ink-500s svg path {
+    @apply fill-ink-500s;
+  }
+
+  .ic-ink-500s path {
+    @apply fill-ink-500s;
+  }
+}
+
+@layer base {
+  :root {
+    /* ===== Màu sắc cơ bản (Background & Text) ===== */
+
+    /* Màu nền chính của toàn bộ app - dùng với class bg-background */
+    --background: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* Màu nền của Page components (page.tsx, page-v2.tsx) - dùng với class bg-background-pg */
+    --background-pg: 0 0% 96%;
+    /* COLORS.ink['50s'] - Light gray background cho pages (#f4f4f4) */
+
+    /* Màu chữ chính - dùng với class text-foreground */
+    --foreground: 0 0% 0%;
+    /* COLORS.ink['500s'] */
+
+    /* ===== Card & Popover ===== */
+
+    /* Màu nền của Card component - dùng với class bg-card */
+    --card: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* Màu chữ trong Card - dùng với class text-card-foreground */
+    --card-foreground: 0 0% 0%;
+    /* COLORS.ink['500s'] */
+
+    /* Màu nền của Popover, Dropdown, Tooltip - dùng với class bg-popover */
+    --popover: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* Màu chữ trong Popover - dùng với class text-popover-foreground */
+    --popover-foreground: 0 0% 0%;
+    /* COLORS.ink['500s'] */
+
+    /* ===== Màu chủ đạo (Primary) ===== */
+
+    /* Màu chính của brand - dùng cho Button primary, Link, CTA - dùng với class bg-primary */
+    --primary: 223 93% 50%;
+    /* COLORS.primary.DEFAULT */
+
+    /* Màu chữ trên nền primary - dùng với class text-primary-foreground */
+    --primary-foreground: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* ===== Màu thứ cấp (Secondary) ===== */
+
+    /* Màu phụ - dùng cho Button secondary, Badge, Chip - dùng với class bg-secondary */
+    --secondary: 0 0% 100%;
+    /* COLORS.white.DEFAULT - Pure white */
+
+    /* Màu chữ trên nền secondary - màu xanh primary - dùng với class text-secondary-foreground */
+    --secondary-foreground: 223 93% 50%;
+    /* COLORS.blue['500'] = COLORS.primary.DEFAULT */
+
+    /* ===== Màu Muted ===== */
+
+    /* Màu nền nhạt - dùng cho disabled state, background subtle - dùng với class bg-muted */
+    --muted: 0 0% 96%;
+    /* COLORS.ink['50s'] */
+
+    /* Màu chữ mờ - dùng cho placeholder, label, helper text - dùng với class text-muted-foreground */
+    --muted-foreground: 0 0% 44%;
+    /* COLORS.ink['400s'] */
+
+    /* ===== Màu Accent ===== */
+
+    /* Màu nền khi hover/focus - dùng cho hover effect - dùng với class bg-accent */
+    --accent: 225 100% 97%;
+    /* COLORS.blue['100'] */
+
+    /* Màu chữ trên nền accent - dùng với class text-accent-foreground */
+    --accent-foreground: 0 0% 0%;
+    /* COLORS.ink['500s'] */
+
+    /* ===== Màu Destructive ===== */
+
+    /* Màu cảnh báo nguy hiểm - dùng cho Button delete, Alert error - dùng với class bg-destructive */
+    --destructive: 4 79% 52%;
+    /* COLORS.red['500'] */
+
+    /* Màu chữ trên nền destructive - dùng với class text-destructive-foreground */
+    --destructive-foreground: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* ===== Màu Success ===== */
+
+    /* Màu thành công - dùng cho Toast success, Badge success - dùng với class bg-success */
+    --success: 144 84% 43%;
+    /* COLORS.green['500'] */
+
+    /* Màu chữ trên nền success - dùng với class text-success-foreground */
+    --success-foreground: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* ===== Màu Warning ===== */
+
+    /* Màu cảnh báo - dùng cho Toast warning, Badge warning - dùng với class bg-warning */
+    --warning: 27 89% 52%;
+    /* COLORS.orange - #f17818 */
+
+    /* Màu chữ trên nền warning - dùng với class text-warning-foreground */
+    --warning-foreground: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* ===== Màu Info ===== */
+
+    /* Màu thông tin - dùng cho Toast info, Badge info - dùng với class bg-info */
+    --info: 223 93% 50%;
+    /* COLORS.blue - #094bf4 */
+
+    /* Màu chữ trên nền info - dùng với class text-info-foreground */
+    --info-foreground: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* ===== Màu Error ===== */
+
+    /* Màu lỗi - dùng cho Toast error, Badge error - dùng với class bg-error */
+    --error: 4 79% 52%;
+    /* COLORS.red - #e52e22 */
+
+    /* Màu chữ trên nền error - dùng với class text-error-foreground */
+    --error-foreground: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* ===== Viền & Input ===== */
+
+    /* Màu viền mặc định - dùng cho border của Card, Divider - dùng với class border-border */
+    --border: 0 0% 87%;
+    /* COLORS.ink['200s'] */
+
+    /* Màu viền của Input - dùng với class border-input */
+    --input: 0 0% 87%;
+    /* COLORS.ink['200s'] */
+
+    /* ===== Bo góc ===== */
+
+    /* Độ bo góc mặc định - dùng với class rounded-lg, rounded-md, rounded-sm */
+    --radius: 0.5rem;
+
+    /* ===== Chart colors (Blue theme) ===== */
+
+    /* Màu chart 1 - Xanh dương rất nhạt - dùng cho nền, fill nhạt - dùng với class bg-chart-1 */
+    --chart-1: 225 100% 97%;
+    /* COLORS.blue['100'] - Lightest */
+
+    /* Màu chart 2 - Xanh dương nhạt - dùng cho data thứ cấp - dùng với class bg-chart-2 */
+    --chart-2: 224 100% 92%;
+    /* COLORS.blue['200'] */
+
+    /* Màu chart 3 - Xanh dương trung bình nhạt - dùng cho data phụ - dùng với class bg-chart-3 */
+    --chart-3: 223 100% 83%;
+    /* COLORS.blue['300'] */
+
+    /* Màu chart 4 - Xanh dương chính - dùng cho data quan trọng - dùng với class bg-chart-4 */
+    --chart-4: 223 90% 63%;
+    /* COLORS.blue['400'] */
+
+    /* Màu chart 5 - Xanh dương đậm - dùng cho highlight, emphasis - dùng với class bg-chart-5 */
+    --chart-5: 223 93% 50%;
+    /* COLORS.blue['500'] - Darkest */
+
+    /* ===== Sidebar ===== */
+
+    /* Màu nền của Sidebar component - dùng với class bg-sidebar */
+    --sidebar-background: 0 0% 100%;
+    /* COLORS.white.DEFAULT - Pure white for sidebar */
+
+    /* Màu nền của Sidebar component - dùng với class bg-sidebar-2 */
+    --sidebar-background-blue: 228 45% 98%;
+    /* Light blue for sidebar */
+  }
+
+  .dark {
+    /* ===== Màu sắc cơ bản (Background & Text) ===== */
+
+    /* Màu nền chính của toàn bộ app - dùng với class bg-background */
+    --background: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* Màu nền của Page components (page.tsx, page-v2.tsx) - dùng với class bg-background-pg */
+    --background-pg: 0 0% 96%;
+    /* COLORS.ink['50s'] - Light gray background cho pages (#f4f4f4) */
+
+    /* Màu chữ chính - dùng với class text-foreground */
+    --foreground: 0 0% 0%;
+    /* COLORS.ink['500s'] */
+
+    /* ===== Card & Popover ===== */
+
+    /* Màu nền của Card component - dùng với class bg-card */
+    --card: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* Màu chữ trong Card - dùng với class text-card-foreground */
+    --card-foreground: 0 0% 0%;
+    /* COLORS.ink['500s'] */
+
+    /* Màu nền của Popover, Dropdown, Tooltip - dùng với class bg-popover */
+    --popover: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* Màu chữ trong Popover - dùng với class text-popover-foreground */
+    --popover-foreground: 0 0% 0%;
+    /* COLORS.ink['500s'] */
+
+    /* ===== Màu chủ đạo (Primary) ===== */
+
+    /* Màu chính của brand - dùng cho Button primary, Link, CTA - dùng với class bg-primary */
+    --primary: 223 93% 50%;
+    /* COLORS.primary.DEFAULT */
+
+    /* Màu chữ trên nền primary - dùng với class text-primary-foreground */
+    --primary-foreground: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* ===== Màu thứ cấp (Secondary) ===== */
+
+    /* Màu phụ - dùng cho Button secondary, Badge, Chip - dùng với class bg-secondary */
+    --secondary: 0 0% 100%;
+    /* COLORS.white.DEFAULT - Pure white */
+
+    /* Màu chữ trên nền secondary - màu xanh primary - dùng với class text-secondary-foreground */
+    --secondary-foreground: 223 93% 50%;
+    /* COLORS.blue['500'] = COLORS.primary.DEFAULT */
+
+    /* ===== Màu Muted ===== */
+
+    /* Màu nền nhạt - dùng cho disabled state, background subtle - dùng với class bg-muted */
+    --muted: 0 0% 96%;
+    /* COLORS.ink['50s'] */
+
+    /* Màu chữ mờ - dùng cho placeholder, label, helper text - dùng với class text-muted-foreground */
+    --muted-foreground: 0 0% 44%;
+    /* COLORS.ink['400s'] */
+
+    /* ===== Màu Accent ===== */
+
+    /* Màu nền khi hover/focus - dùng cho hover effect - dùng với class bg-accent */
+    --accent: 225 100% 97%;
+    /* COLORS.blue['100'] */
+
+    /* Màu chữ trên nền accent - dùng với class text-accent-foreground */
+    --accent-foreground: 0 0% 0%;
+    /* COLORS.ink['500s'] */
+
+    /* ===== Màu Destructive ===== */
+
+    /* Màu cảnh báo nguy hiểm - dùng cho Button delete, Alert error - dùng với class bg-destructive */
+    --destructive: 4 79% 52%;
+    /* COLORS.red['500'] */
+
+    /* Màu chữ trên nền destructive - dùng với class text-destructive-foreground */
+    --destructive-foreground: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* ===== Màu Success ===== */
+
+    /* Màu thành công - dùng cho Toast success, Badge success - dùng với class bg-success */
+    --success: 144 84% 43%;
+    /* COLORS.green['500'] */
+
+    /* Màu chữ trên nền success - dùng với class text-success-foreground */
+    --success-foreground: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* ===== Màu Warning ===== */
+
+    /* Màu cảnh báo - dùng cho Toast warning, Badge warning - dùng với class bg-warning */
+    --warning: 27 89% 52%;
+    /* COLORS.orange - #f17818 */
+
+    /* Màu chữ trên nền warning - dùng với class text-warning-foreground */
+    --warning-foreground: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* ===== Màu Info ===== */
+
+    /* Màu thông tin - dùng cho Toast info, Badge info - dùng với class bg-info */
+    --info: 223 93% 50%;
+    /* COLORS.blue - #094bf4 */
+
+    /* Màu chữ trên nền info - dùng với class text-info-foreground */
+    --info-foreground: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* ===== Màu Error ===== */
+
+    /* Màu lỗi - dùng cho Toast error, Badge error - dùng với class bg-error */
+    --error: 4 79% 52%;
+    /* COLORS.red - #e52e22 */
+
+    /* Màu chữ trên nền error - dùng với class text-error-foreground */
+    --error-foreground: 0 0% 100%;
+    /* COLORS.white.DEFAULT */
+
+    /* ===== Viền & Input ===== */
+
+    /* Màu viền mặc định - dùng cho border của Card, Divider - dùng với class border-border */
+    --border: 0 0% 87%;
+    /* COLORS.ink['200s'] */
+
+    /* Màu viền của Input - dùng với class border-input */
+    --input: 0 0% 87%;
+    /* COLORS.ink['200s'] */
+
+    /* ===== Bo góc ===== */
+
+    /* Độ bo góc mặc định - dùng với class rounded-lg, rounded-md, rounded-sm */
+    --radius: 0.5rem;
+
+    /* ===== Chart colors (Blue theme) ===== */
+
+    /* Màu chart 1 - Xanh dương rất nhạt - dùng cho nền, fill nhạt - dùng với class bg-chart-1 */
+    --chart-1: 225 100% 97%;
+    /* COLORS.blue['100'] - Lightest */
+
+    /* Màu chart 2 - Xanh dương nhạt - dùng cho data thứ cấp - dùng với class bg-chart-2 */
+    --chart-2: 224 100% 92%;
+    /* COLORS.blue['200'] */
+
+    /* Màu chart 3 - Xanh dương trung bình nhạt - dùng cho data phụ - dùng với class bg-chart-3 */
+    --chart-3: 223 100% 83%;
+    /* COLORS.blue['300'] */
+
+    /* Màu chart 4 - Xanh dương chính - dùng cho data quan trọng - dùng với class bg-chart-4 */
+    --chart-4: 223 90% 63%;
+    /* COLORS.blue['400'] */
+
+    /* Màu chart 5 - Xanh dương đậm - dùng cho highlight, emphasis - dùng với class bg-chart-5 */
+    --chart-5: 223 93% 50%;
+    /* COLORS.blue['500'] - Darkest */
+
+    /* ===== Sidebar ===== */
+
+    /* Màu nền của Sidebar component - dùng với class bg-sidebar */
+    --sidebar-background: 0 0% 100%;
+    /* COLORS.white.DEFAULT - Pure white for sidebar */
+  }
+}
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+
+
+  body {
+    @apply bg-background text-foreground;
+    overscroll-behavior: none;
+    /* Chỉ set min-height thay vì height cố định */
+    min-height: 100svh;
+    letter-spacing: -0.01em;
+    /* -1% global letter-spacing */
+  }
+
+  /* Hoặc nếu cần control chặt chẽ layout */
+  html {
+    -webkit-font-smoothing: antialiased;
+    /* Safari, Chrome */
+    -moz-osx-font-smoothing: grayscale;
+    /* Firefox trên macOS */
+    height: 100%;
+    @apply bg-background;
+  }
+
+  body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    height: 100%;
+  }
+
+  /* Font optimization for variable font */
+  * {
+    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
+    font-variant-ligatures: contextual;
+    text-rendering: optimizeLegibility;
+  }
+
+  input[type='text'] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+
+  /* Firefox */
+
+  input[type='number'] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
+  /* ===== Remove all focus rings and outlines ===== */
+
+  /* Remove default browser focus outlines for all interactive elements */
+  input:focus,
+  textarea:focus,
+  button:focus,
+  select:focus,
+  [contenteditable]:focus,
+  [tabindex]:focus {
+    outline: none !important;
+    outline-offset: 0 !important;
+    box-shadow: none !important;
+  }
+
+  /* Remove Tailwind ring utilities globally */
+  input,
+  textarea,
+  button,
+  select,
+  [contenteditable],
+  [tabindex] {
+    box-shadow: none !important;
+  }
+
+  /* Remove ring utilities from focus states */
+  .focus\:ring-1:focus,
+  .focus\:ring-2:focus,
+  .focus\:ring-4:focus,
+  .focus\:ring:focus,
+  .focus-visible\:ring-1:focus-visible,
+  .focus-visible\:ring-2:focus-visible,
+  .focus-visible\:ring-4:focus-visible,
+  .focus-visible\:ring:focus-visible {
+    box-shadow: none !important;
+  }
+
+  /* Remove ring from any element with ring classes */
+  [class*="ring-"],
+  [class*="focus:ring"],
+  [class*="focus-visible:ring"] {
+    box-shadow: none !important;
+  }
+
+  /* Override any ring colors */
+  .ring-primary,
+  .ring-primary\/20,
+  .focus\:ring-primary:focus,
+  .focus\:ring-primary\/20:focus,
+  .focus-visible\:ring-primary:focus-visible,
+  .focus-visible\:ring-primary\/20:focus-visible,
+  .ring-destructive,
+  .ring-destructive\/20,
+  .focus\:ring-destructive:focus,
+  .focus\:ring-destructive\/20:focus,
+  .focus-visible\:ring-destructive:focus-visible,
+  .focus-visible\:ring-destructive\/20:focus-visible {
+    box-shadow: none !important;
+  }
+
+  /* Specifically target search input */
+  input[data-testid="home-search-input"]:focus {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  /* Remove any webkit focus rings */
+  input:focus,
+  textarea:focus,
+  button:focus,
+  select:focus {
+    -webkit-appearance: none !important;
+    -webkit-focus-ring-color: transparent !important;
+    appearance: none !important;
+  }
+
+  /* Override any focus-visible rings */
+  *:focus-visible {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  /* ===== End Remove focus rings ===== */
+
+  .input-wrapper:has(> input:focus) {
+    @apply border-primary;
+  }
+
+  .input-wrapper:has(> input:disabled) {
+    @apply cursor-not-allowed;
+  }
+
+  /* Support textarea focus states */
+  .input-wrapper:has(> textarea:focus) {
+    @apply border-primary;
+  }
+
+  .input-wrapper:has(> textarea:disabled) {
+    @apply cursor-not-allowed;
+  }
+
+  .input--floating input:not(:focus)::placeholder {
+    color: transparent;
+  }
+
+  .input--floating input~label {
+    transition: all 0.1s ease-in-out;
+  }
+
+  .input--floating input:focus~label,
+  .input--floating input:not(:placeholder-shown)~label {
+    @apply opacity-75 scale-75 -translate-y-3 translate-x-0.5;
+  }
+
+  /* Floating label support for textarea */
+  .input--floating textarea:not(:focus)::placeholder {
+    color: transparent;
+  }
+
+  .input--floating .input-container:has(input:focus),
+  .input--floating .input-container:has(input:not(:placeholder-shown)) {
+    @apply pt-0;
+  }
+
+  /* Apply styles to input-container when textarea has focus or content */
+  .input--floating .input-container:has(textarea:focus),
+  .input--floating .input-container:has(textarea:not(:placeholder-shown)) {
+    /* Don't change container padding to maintain consistent height */
+    /* Ensure proper scrolling behavior - content starts below label */
+    overflow-y: auto !important;
+    scroll-behavior: smooth;
+    /* Optimize scrolling performance */
+    /* Prevent scroll issues with transforms */
+    transform: translateZ(0);
+    will-change: scroll-position;
+    /* Ensure scroll content doesn't overlap with floating label */
+    scroll-padding-top: 2rem;
+  }
+
+  /* Adjust textarea padding when floating label is active */
+  .input--floating textarea:focus,
+  .input--floating textarea:not(:placeholder-shown) {
+    /* Maintain total padding: default py-3 = 12px + 12px = 24px total */
+    /* Redistribute to 24px top + 0px bottom = 24px total (same as original) */
+    /* Give more space between floating label and placeholder */
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+    margin-top: 24px !important;
+  }
+
+  /* Handle large size textarea - py-4 = 16px + 16px = 32px total */
+  .input--floating textarea.px-3.py-4:focus,
+  .input--floating textarea.px-3.py-4:not(:placeholder-shown) {
+    /* Maintain total padding: 28px top + 4px bottom = 32px total (same as original) */
+    /* Give more space between floating label and placeholder */
+    padding-top: 28px !important;
+    padding-bottom: 4px !important;
+  }
+
+  .input--floating textarea~label {
+    transition: all 0.1s ease-in-out;
+    /* Ensure label doesn't interfere with textarea scrolling */
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  .input--floating textarea:focus~label,
+  .input--floating textarea:not(:placeholder-shown)~label {
+    @apply opacity-75 scale-75 -translate-y-3 translate-x-0.5;
+    position: absolute !important;
+    top: 0.75rem !important;
+    left: 0 !important;
+    z-index: 10 !important;
+    pointer-events: none !important;
+    will-change: transform;
+    padding-right: 1rem;
+    padding-bottom: 0.25rem;
+    padding-top: 8px;
+  }
+
+
+
+  /* Adjust textarea padding when floating label is active */
+  .input--floating input:focus,
+  .input--floating input:not(:placeholder-shown) {
+    padding-top: 14px !important;
+    padding-bottom: 0px !important;
+  }
+
+  .input--floating input~label {
+    transition: all 0.1s ease-in-out;
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  .input--floating input:focus~label,
+  .input--floating input:not(:placeholder-shown)~label {
+    @apply opacity-75 scale-75 -translate-y-3 translate-x-0.5;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    z-index: 10 !important;
+    pointer-events: none !important;
+    will-change: transform;
+    padding-right: 1rem;
+    padding-bottom: 0.25rem;
+  }
+
+  .input-remove-icon path {
+    @apply fill-gray-200;
+    transition: fill 0.4s ease;
+  }
+
+  .input-remove-icon:hover path {
+    @apply fill-gray-400;
+    transition: fill 0.4s ease;
+  }
+
+  .input-placeholder::placeholder {
+    @apply text-ink-400;
+  }
+
+  .input-info-icon path {
+    @apply fill-gray-400;
+  }
+
+  /* Calendar full width styles */
+  .rdp {
+    width: 100% !important;
+  }
+
+  .rdp-table {
+    width: 100% !important;
+  }
+
+  .rdp-head_row,
+  .rdp-row {
+    width: 100% !important;
+    display: flex !important;
+  }
+
+  .rdp-head_cell,
+  .rdp-cell {
+    flex: 1 !important;
+    width: auto !important;
+    text-align: center !important;
+  }
+
+  .rdp-button {
+    width: 100% !important;
+  }
+
+  /* Carousel touch optimization - allow touchpad swipe while preserving vertical scroll */
+  .embla {
+    touch-action: pan-y pinch-zoom;
+  }
+
+  .embla__container {
+    touch-action: pan-y pinch-zoom;
+    backface-visibility: hidden;
+    display: flex;
+  }
+
+  .embla__slide {
+    touch-action: pan-y pinch-zoom;
+    flex: 0 0 100%;
+    min-width: 0;
+  }
+
+  /* More specific carousel touch handling */
+  [role="region"][aria-roledescription="carousel"] {
+    touch-action: pan-y pinch-zoom !important;
+  }
+
+  [role="region"][aria-roledescription="carousel"] * {
+    touch-action: pan-y pinch-zoom !important;
+  }
+
+  /* Carousel content specific styles */
+  .overflow-hidden>[role="region"][aria-roledescription="carousel"] {
+    touch-action: pan-y pinch-zoom !important;
+  }
+
+  /* Embla carousel specific overrides */
+  .embla__viewport {
+    touch-action: pan-y pinch-zoom !important;
+    overflow: hidden;
+  }
+
+  .embla__container {
+    touch-action: pan-y pinch-zoom !important;
+    display: flex;
+    backface-visibility: hidden;
+  }
+
+  .embla__slide {
+    touch-action: pan-y pinch-zoom !important;
+    flex: 0 0 100%;
+    min-width: 0;
+  }
+
+  /* Ensure horizontal carousels don't interfere with vertical scrolling */
+  [data-carousel-horizontal] {
+    touch-action: pan-y pinch-zoom !important;
+  }
+
+  [data-carousel-horizontal] * {
+    touch-action: pan-y pinch-zoom !important;
+  }
+
+  /* Allow horizontal pan only on carousel content when actively dragging */
+  [data-carousel-horizontal]:active,
+  [data-carousel-horizontal].is-dragging {
+    touch-action: pan-x pinch-zoom !important;
+  }
+
+  [data-carousel-horizontal]:active *,
+  [data-carousel-horizontal].is-dragging * {
+    touch-action: pan-x pinch-zoom !important;
+  }
+
+  /* Reset browser autofill styles */
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active,
+  input:-internal-autofill-selected,
+  input:-internal-autofill-previewed {
+    -webkit-box-shadow: 0 0 0 1000px white inset !important;
+    -webkit-text-fill-color: inherit !important;
+    background-color: transparent !important;
+    background-image: none !important;
+    color: inherit !important;
+    font-weight: 450;
+    /* Match the font-normal weight */
+  }
+
+  /* Additional reset for other autofill pseudo-classes */
+  input:-internal-autofill-selected {
+    background-color: transparent !important;
+    background-image: none !important;
+    color: fieldtext !important;
+  }
+
+  /* Ensure all disabled inputs and textareas use our theme color, not browser default */
+  input:disabled,
+  input[disabled],
+  textarea:disabled,
+  textarea[disabled] {
+    @apply !bg-muted;
+  }
+
+  /* Exception: OTP inputs should keep white background when disabled */
+  input[data-input-otp]:disabled,
+  input[data-input-otp][disabled] {
+    @apply !bg-transparent;
+  }
+
+  /* Specific styling for disabled chips */
+  .chip[data-disabled="true"],
+  .chip[disabled] {
+    @apply !bg-muted !border-ink-200s;
+    /* bg-muted (same as textarea/input disabled) */
+  }
+
+  /* Ensure disabled inputs with autofill still show the correct background */
+  input[disabled]:-webkit-autofill,
+  input[disabled]:-internal-autofill-selected,
+  textarea[disabled]:-webkit-autofill,
+  textarea[disabled]:-internal-autofill-selected {
+    @apply !bg-muted;
+    -webkit-box-shadow: 0 0 0 1000px rgb(244 244 244) inset !important;
+    /* bg-muted = 0 0% 96% = #f4f4f4 (ink-50s) */
+    font-weight: 450 !important;
+    /* Ensure consistent font-weight */
+  }
+
+  /* Disable ligatures for better character display (e.g., dashes in date inputs) */
+  .no-ligatures {
+    font-variant-ligatures: none;
+    font-feature-settings: "liga" 0, "calt" 0, "kern" 0, "dlig" 0, "hlig" 0;
+    -webkit-font-feature-settings: "liga" 0, "calt" 0, "kern" 0, "dlig" 0, "hlig" 0;
+    -moz-font-feature-settings: "liga" 0, "calt" 0, "kern" 0, "dlig" 0, "hlig" 0;
+    letter-spacing: 0.01em;
+  }
+
+  /* ===== Toast (Sonner) Styling ===== */
+
+  /* Normal/default toast */
+  [data-sonner-toast] {
+    background: var(--normal-bg) !important;
+    border: 1px solid var(--normal-border) !important;
+    color: var(--normal-text) !important;
+    width: calc(100% - 32px) !important;
+    /* Full width on mobile with 16px margin on each side */
+    max-width: 450px !important;
+  }
+
+  /* Align icon, title, and action buttons horizontally */
+  [data-sonner-toast]:has([data-description]) {
+    align-items: flex-start !important;
+  }
+
+  /* Add padding-top to icon for better visual alignment */
+  [data-sonner-toast]:has([data-description]) [data-icon] {
+    padding-top: 4px !important;
+  }
+
+  /* Auto width based on content on desktop (768px and larger) */
+  @media (min-width: 768px) {
+    [data-sonner-toast] {
+      width: max-content !important;
+      /* Toast width expands to fit content */
+      max-width: 450px !important;
+      /* Maximum width limit at 450px */
+    }
+  }
+
+  /* Success toast */
+  [data-sonner-toast][data-type="success"] {
+    background: var(--success-bg) !important;
+    border-color: var(--success-border) !important;
+    color: var(--success-text) !important;
+  }
+
+  /* Error toast */
+  [data-sonner-toast][data-type="error"] {
+    background: var(--error-bg) !important;
+    border-color: var(--error-border) !important;
+    color: var(--error-text) !important;
+  }
+
+  /* Warning toast */
+  [data-sonner-toast][data-type="warning"] {
+    background: var(--warning-bg) !important;
+    border-color: var(--warning-border) !important;
+    color: var(--warning-text) !important;
+  }
+
+  /* Info toast */
+  [data-sonner-toast][data-type="info"] {
+    background: var(--info-bg) !important;
+    border-color: var(--info-border) !important;
+    color: var(--info-text) !important;
+  }
+
+  /* Toast title and description colors */
+  [data-sonner-toast][data-type="success"] [data-title],
+  [data-sonner-toast][data-type="success"] [data-description] {
+    color: var(--success-text) !important;
+  }
+
+  [data-sonner-toast][data-type="error"] [data-title],
+  [data-sonner-toast][data-type="error"] [data-description] {
+    color: var(--error-text) !important;
+  }
+
+  [data-sonner-toast][data-type="warning"] [data-title],
+  [data-sonner-toast][data-type="warning"] [data-description] {
+    color: var(--warning-text) !important;
+  }
+
+  [data-sonner-toast][data-type="info"] [data-title],
+  [data-sonner-toast][data-type="info"] [data-description] {
+    color: var(--info-text) !important;
+  }
+
+  /* Title: allow 2 lines with ellipsis for all toasts */
+  [data-sonner-toast] [data-title] {
+    display: -webkit-box !important;
+    -webkit-line-clamp: 2 !important;
+    line-clamp: 2 !important;
+    -webkit-box-orient: vertical !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    line-height: 1.25rem !important;
+    /* 20px */
+    max-height: 2.5rem !important;
+    /* 40px = 2 lines */
+    word-break: break-word !important;
+    /* Allow breaking long words to utilize full width */
+  }
+
+  /* Description: limit to 2 lines with ellipsis */
+  [data-sonner-toast] [data-description] {
+    display: -webkit-box !important;
+    -webkit-line-clamp: 2 !important;
+    line-clamp: 2 !important;
+    -webkit-box-orient: vertical !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    line-height: 1.25rem !important;
+    /* 20px */
+    max-height: 2.5rem !important;
+    /* 40px = 2 lines */
+  }
+
+  /* Toast close button */
+  [data-sonner-toast] [data-close-button] {
+    background: transparent !important;
+    border: none !important;
+    color: currentColor !important;
+  }
+
+  /* ===== Remove all focus rings and outlines ===== */
+
+  /* Remove default browser focus outlines for all interactive elements */
+  input:focus,
+  textarea:focus,
+  button:focus,
+  select:focus,
+  [contenteditable]:focus,
+  [tabindex]:focus {
+    outline: none !important;
+    outline-offset: 0 !important;
+    box-shadow: none !important;
+  }
+
+  /* Remove Tailwind ring utilities globally */
+  input,
+  textarea,
+  button,
+  select,
+  [contenteditable],
+  [tabindex] {
+    box-shadow: none !important;
+  }
+
+  /* Remove ring utilities from focus states */
+  .focus\:ring-1:focus,
+  .focus\:ring-2:focus,
+  .focus\:ring-4:focus,
+  .focus\:ring:focus,
+  .focus-visible\:ring-1:focus-visible,
+  .focus-visible\:ring-2:focus-visible,
+  .focus-visible\:ring-4:focus-visible,
+  .focus-visible\:ring:focus-visible {
+    box-shadow: none !important;
+  }
+
+  /* Remove ring from any element with ring classes */
+  [class*="ring-"],
+  [class*="focus:ring"],
+  [class*="focus-visible:ring"] {
+    box-shadow: none !important;
+  }
+
+  /* Override any ring colors */
+  .ring-primary,
+  .ring-primary\/20,
+  .focus\:ring-primary:focus,
+  .focus\:ring-primary\/20:focus,
+  .focus-visible\:ring-primary:focus-visible,
+  .focus-visible\:ring-primary\/20:focus-visible,
+  .ring-destructive,
+  .ring-destructive\/20,
+  .focus\:ring-destructive:focus,
+  .focus\:ring-destructive\/20:focus,
+  .focus-visible\:ring-destructive:focus-visible,
+  .focus-visible\:ring-destructive\/20:focus-visible {
+    box-shadow: none !important;
+  }
+
+  /* Specifically target search input */
+  input[data-testid="home-search-input"]:focus {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  /* Remove any webkit focus rings */
+  input:focus,
+  textarea:focus,
+  button:focus,
+  select:focus {
+    -webkit-appearance: none !important;
+    -webkit-focus-ring-color: transparent !important;
+  }
+
+  /* Override any focus-visible rings */
+  *:focus-visible {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  /* ===== End Remove focus rings ===== */
+}