/* ============================================
   AlignUI Design System - Blade Components
   ============================================ */

/* Reset and Base Styles */
* {
    box-sizing: border-box;
}

/* Typography System */
.text-label-lg {
    font-size: 1.125rem;
    letter-spacing: -0.015em;
}
.text-label-lg,
.text-label-md {
    line-height: 1.5rem;
    font-weight: 500;
}
.text-label-md {
    font-size: 1rem;
    letter-spacing: -0.011em;
}
.text-label-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: -0.006em;
    font-weight: 500;
}
.text-label-xs {
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0;
    font-weight: 500;
}
.text-ln-docs-sm {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.006em;
    font-weight: 500;
}
.text-ln-label-lg {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
    font-weight: 500;
}
.text-ln-label-md {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.01em;
    font-weight: 500;
}
.text-ln-label-sm {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.006em;
    font-weight: 500;
}
.text-ln-label-xs {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
    font-weight: 500;
}
.text-ln-paragraph-lg {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.015em;
    font-weight: 400;
}
.text-ln-paragraph-md {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.01em;
    font-weight: 400;
}
.size-p-sm {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.006em;
    font-weight: 400;
}
.text-ln-paragraph-xs {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
    font-weight: 400;
}
.text-ln-special-13-desc {
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.006em;
    font-weight: 400;
}
.text-ln-subheading-xs {
    font-size: 11px;
    line-height: 10px;
    letter-spacing: 0;
    font-weight: 550;
}
.text-ln-title-h4 {
    font-size: 32px;
    line-height: 40px;
}
.text-ln-title-h4,
.text-ln-title-h5 {
    letter-spacing: -0.02em;
    font-weight: 550;
}
.text-ln-title-h5 {
    font-size: 24px;
    line-height: 32px;
}
.text-ln-title-h6 {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.02em;
    font-weight: 550;
}
.text-paragraph-md {
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: -0.011em;
    font-weight: 400;
}
.text-paragraph-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: -0.006em;
    font-weight: 400;
}
.text-paragraph-xs {
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0;
    font-weight: 400;
}
.text-subheading-2xs {
    font-size: 0.6875rem;
    line-height: 0.75rem;
    letter-spacing: 0.02em;
    font-weight: 500;
}
.text-subheading-xs {
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.text-title-h3 {
    font-size: 2.5rem;
    line-height: 3rem;
    letter-spacing: -0.01em;
    font-weight: 500;
}
.text-title-h5 {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-title-h5,
.text-title-h6 {
    letter-spacing: 0;
    font-weight: 500;
}
.text-title-h6 {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
/* ============================================
   Checkbox Component
   ============================================ */


/* ============================================
   Button Component
   ============================================ */
.align-button {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    white-space: nowrap;
    border-radius: 0.5rem;
    transition: all 0.2s ease-out;
    cursor: pointer;
    outline: none;
    border: 1px solid transparent;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.align-button:focus {
    outline: none;
    ring: 2px;
    ring-offset: 2px;
}

.dark .align-button:focus {
    ring-offset-color: #0a0a0a;
}

.align-button:disabled {
    pointer-events: none;
    background-color: #F5F5F5;
    color: #A3A3A3;
    border-color: transparent;
    cursor: not-allowed;
}

.dark .align-button:disabled {
    background-color: #171717;
    color: #525252;
}

/* Button Sizes */
.align-button-large {
    height: 2.5rem;
    gap: 0.75rem;
    padding: 0 0.75rem;
    min-width: 2.5rem;
}

.align-button-medium {
    height: 2.25rem;
    gap: 0.625rem;
    padding: 0 0.625rem;
    min-width: 2.25rem;
}

.align-button-small {
    height: 2rem;
    gap: 0.5rem;
    padding: 0 0.5rem;
    min-width: 2rem;
}

.align-button-xsmall {
    height: 1.75rem;
    gap: 0.5rem;
    padding: 0 0.375rem;
    min-width: 1.75rem;
}

/* Button Icon Sizes */
.align-button-icon-large,
.align-button-icon-medium {
    width: 1.25rem;
    height: 1.25rem;
}

.align-button-icon-small,
.align-button-icon-xsmall {
    width: 1rem;
    height: 1rem;
}

/* Button Variant: Default (Filled) */
.align-button-default {
    color: white;
}

.align-button-default.align-button-blue {
    background-color: #3B82F6;
}

.align-button-default.align-button-blue:hover {
    background-color: #2563EB;
}

.align-button-default.align-button-blue:focus {
    ring-color: #DBEAFE;
}

.dark .align-button-default.align-button-blue:focus {
    ring-color: #1E3A8A;
}

.align-button-default.align-button-neutral {
    background-color: #171717;
}

.dark .align-button-default.align-button-neutral {
    color: #FAFAFA;
}

.align-button-default.align-button-neutral:hover {
    background-color: #262626;
}

.align-button-default.align-button-neutral:focus {
    ring-color: #F5F5F5;
}

.dark .align-button-default.align-button-neutral:focus {
    ring-color: #171717;
}

.align-button-default.align-button-danger {
    background-color: #EF4444;
}

.dark .align-button-default.align-button-danger {
    background-color: #DC2626;
}

.align-button-default.align-button-danger:hover {
    background-color: #B91C1C;
}

.align-button-default.align-button-danger:focus {
    ring-color: #FEE2E2;
}

.dark .align-button-default.align-button-danger:focus {
    ring-color: #7F1D1D;
}

.align-button-default.align-button-success {
    background-color: #10B981;
}

.align-button-default.align-button-success:hover {
    background-color: #059669;
}

.align-button-default.align-button-success:focus {
    ring-color: #D1FAE5;
}

.dark .align-button-default.align-button-success:focus {
    ring-color: #064E3B;
}

/* Button Variant: Stroke */
.align-button-stroke {
    background-color: transparent;
}

.align-button-stroke.align-button-blue {
    color: #3B82F6;
    border-color: #BFDBFE;
}

.dark .align-button-stroke.align-button-blue {
    border-color: #1E40AF;
}

.align-button-stroke.align-button-blue:hover {
    background-color: #EFF6FF;
    border-color: transparent;
}

.dark .align-button-stroke.align-button-blue:hover {
    background-color: #1E3A8A;
}

.align-button-stroke.align-button-neutral {
    color: #525252;
    border-color: #E5E5E5;
}

.dark .align-button-stroke.align-button-neutral {
    color: #A3A3A3;
    border-color: #404040;
}

.align-button-stroke.align-button-neutral:hover {
    background-color: #F5F5F5;
    border-color: transparent;
}

.dark .align-button-stroke.align-button-neutral:hover {
    background-color: #171717;
}

/* Button Variant: Ghost */
.align-button-ghost {
    background-color: transparent;
    border-color: transparent;
}

.align-button-ghost.align-button-blue {
    color: #3B82F6;
}

.align-button-ghost.align-button-blue:hover {
    background-color: #EFF6FF;
}

.dark .align-button-ghost.align-button-blue:hover {
    background-color: #1E3A8A;
}

.align-button-ghost.align-button-neutral {
    color: #525252;
}

.dark .align-button-ghost.align-button-neutral {
    color: #A3A3A3;
}

.align-button-ghost.align-button-neutral:hover {
    background-color: #F5F5F5;
}

.dark .align-button-ghost.align-button-neutral:hover {
    background-color: #171717;
}

.align-button-ghost.align-button-danger {
    color: #EF4444;
}

.align-button-ghost.align-button-danger:hover {
    background-color: #FEF2F2;
}

.dark .align-button-ghost.align-button-danger:hover {
    background-color: #7F1D1D;
}

/* ============================================
   Input Component
   ============================================ */
.align-input-root {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
    transition: all 0.2s ease-out;
    border: 1px solid #E5E7EB;
}

.dark .align-input-root {
    border-color: #262626;
}

.align-input-root:hover {
    background-color: #F5F5F5;
    border-color: transparent;
}

.dark .align-input-root:hover {
    background-color: #262626;
}

.align-input-root:focus-within {
    border-color: #171717;
    background-color: transparent;
    outline: 2px solid #F5F5F5;
    outline-offset: 2px;
}

.dark .align-input-root:focus-within {
    border-color: #E5E5E5;
    outline-color: #262626;
}

.align-input-root:focus-within:hover {
    background-color: transparent;
}

/* Input Sizes */
.align-input-sm {
    height: 2rem;
}

.align-input-md {
    height: 2.25rem;
}

.align-input-lg {
    height: 2.5rem;
}

/* Input Error State */
.align-input-error {
    border-color: #EF4444;
}

.dark .align-input-error {
    border-color: #DC2626;
}

.align-input-error:hover {
    background-color: #FEF2F2;
    border-color: transparent;
}

.dark .align-input-error:hover {
    background-color: rgba(220, 38, 38, 0.2);
}

.align-input-error:focus-within {
    border-color: #EF4444;
    outline-color: #FEE2E2;
}

.dark .align-input-error:focus-within {
    border-color: #DC2626;
    outline-color: rgba(220, 38, 38, 0.3);
}

/* Input Wrapper */
.align-input-wrapper {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-align: center;
        align-items: center;
    cursor: text;
    transition: all 0.2s ease-out;
}

.align-input-wrapper-sm {
    gap: 0.375rem;
    padding: 0 0.5rem;
}

.align-input-wrapper-md {
    gap: 0.5rem;
    padding: 0 0.625rem;
}

.align-input-wrapper-lg {
    gap: 0.5rem;
    padding: 0 0.75rem;
}

/* Input Field */
.align-input {
    width: 100%;
    background-color: transparent;
    outline: none;
    border: none;
    color: #171717;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0;
}

.dark .align-input {
    color: #FAFAFA;
}

.align-input::-webkit-input-placeholder {
    color: #A3A3A3;
    -webkit-transition: color 0.2s ease-out;
    transition: color 0.2s ease-out;
}

.align-input::-moz-placeholder {
    color: #A3A3A3;
    -moz-transition: color 0.2s ease-out;
    transition: color 0.2s ease-out;
}

.align-input:-ms-input-placeholder {
    color: #A3A3A3;
    -ms-transition: color 0.2s ease-out;
    transition: color 0.2s ease-out;
}

.align-input::-ms-input-placeholder {
    color: #A3A3A3;
    -ms-transition: color 0.2s ease-out;
    transition: color 0.2s ease-out;
}

.align-input::placeholder {
    color: #A3A3A3;
    transition: color 0.2s ease-out;
}

.align-input:hover::-webkit-input-placeholder, .align-input:focus::-webkit-input-placeholder {
    color: #737373;
}

.align-input:hover::-moz-placeholder, .align-input:focus::-moz-placeholder {
    color: #737373;
}

.align-input:hover:-ms-input-placeholder, .align-input:focus:-ms-input-placeholder {
    color: #737373;
}

.align-input:hover::-ms-input-placeholder, .align-input:focus::-ms-input-placeholder {
    color: #737373;
}

.align-input:hover::placeholder,
.align-input:focus::placeholder {
    color: #737373;
}

.align-input:disabled {
    color: #A3A3A3;
    cursor: not-allowed;
}

.align-input:disabled::-webkit-input-placeholder {
    color: #D4D4D4;
}

.align-input:disabled::-moz-placeholder {
    color: #D4D4D4;
}

.align-input:disabled:-ms-input-placeholder {
    color: #D4D4D4;
}

.align-input:disabled::-ms-input-placeholder {
    color: #D4D4D4;
}

.align-input:disabled::placeholder {
    color: #D4D4D4;
}

/* Input Icon */
.align-input-icon {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    color: #A3A3A3;
    transition: color 0.2s ease-out;
}

.align-input-icon-sm {
    width: 0.875rem;
    height: 0.875rem;
}

.align-input-icon-md {
    width: 1rem;
    height: 1rem;
}

.align-input-icon-lg {
    width: 1.125rem;
    height: 1.125rem;
}

.align-input-wrapper:hover .align-input-icon {
    color: #737373;
}

.align-input-root:focus-within .align-input-icon {
    color: #171717;
}

.dark .align-input-root:focus-within .align-input-icon {
    color: #FAFAFA;
}

.align-input:not(:-moz-placeholder) ~ .align-input-icon, .align-input-wrapper:has(.align-input:not(:-moz-placeholder)) .align-input-icon {
    color: #171717;
}

.align-input:not(:-ms-input-placeholder) ~ .align-input-icon, .align-input-wrapper:has(.align-input:not(:-ms-input-placeholder)) .align-input-icon {
    color: #171717;
}

.align-input:not(:placeholder-shown) ~ .align-input-icon,
.align-input-wrapper:has(.align-input:not(:placeholder-shown)) .align-input-icon {
    color: #171717;
}

.dark .align-input:not(:-moz-placeholder) ~ .align-input-icon, .dark .align-input-wrapper:has(.align-input:not(:-moz-placeholder)) .align-input-icon {
    color: #FAFAFA;
}

.dark .align-input:not(:-ms-input-placeholder) ~ .align-input-icon, .dark .align-input-wrapper:has(.align-input:not(:-ms-input-placeholder)) .align-input-icon {
    color: #FAFAFA;
}

.dark .align-input:not(:placeholder-shown) ~ .align-input-icon,
.dark .align-input-wrapper:has(.align-input:not(:placeholder-shown)) .align-input-icon {
    color: #FAFAFA;
}

/* Input Icon Error State */
.align-input-error .align-input-icon {
    color: #EF4444;
}

.dark .align-input-error .align-input-icon {
    color: #DC2626;
}

/* ============================================
   Badge Component
   ============================================ */
.align-badge {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    transition: all 0.2s ease-out;
    border-radius: 0.375rem;
}

/* Badge Sizes */
.align-badge-small {
    height: 1rem;
    min-width: 1rem;
    gap: 0.375rem;
    padding: 0 0.25rem;
    font-size: 0.625rem;
    line-height: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.align-badge-medium {
    height: 1.25rem;
    min-width: 1.25rem;
    gap: 0.375rem;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    text-transform: capitalize;
}

.align-badge-lg {
    height: 1.5rem;
    min-width: 1.5rem;
    gap: 0.375rem;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    text-transform: capitalize;
}

/* Badge Rounded */
.align-badge-rounded {
    border-radius: 9999px;
}

/* Badge Icon Sizes */
.align-badge-icon-small {
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 -0.25rem;
}

.align-badge-icon-medium {
    width: 1rem;
    height: 1rem;
    margin: 0 -0.5rem;
}

.align-badge-icon-lg {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0 -0.5rem;
}

/* Badge Variant: Filled */
.align-badge-filled.align-badge-green {
    background-color: #10B981;
    color: white;
}

.dark .align-badge-filled.align-badge-green {
    background-color: #059669;
}

.align-badge-filled.align-badge-red {
    background-color: #EF4444;
    color: white;
}

.dark .align-badge-filled.align-badge-red {
    background-color: #DC2626;
}

.align-badge-filled.align-badge-blue {
    background-color: #3B82F6;
    color: white;
}

.dark .align-badge-filled.align-badge-blue {
    background-color: #2563EB;
}

.align-badge-filled.align-badge-yellow {
    background-color: #F59E0B;
    color: white;
}

.dark .align-badge-filled.align-badge-yellow {
    background-color: #D97706;
}

.align-badge-filled.align-badge-gray {
    background-color: #6B7280;
    color: white;
}

.dark .align-badge-filled.align-badge-gray {
    background-color: #4B5563;
}

/* Badge Variant: Light */
.align-badge-light.align-badge-green {
    background-color: #D1FAE5;
    color: #065F46;
}

.dark .align-badge-light.align-badge-green {
    background-color: #065F46;
    color: #6EE7B7;
}

.align-badge-light.align-badge-red {
    background-color: #FEE2E2;
    color: #991B1B;
}

.dark .align-badge-light.align-badge-red {
    background-color: #991B1B;
    color: #FCA5A5;
}

.align-badge-light.align-badge-blue {
    background-color: #DBEAFE;
    color: #1E40AF;
}

.dark .align-badge-light.align-badge-blue {
    background-color: #1E40AF;
    color: #93C5FD;
}

.align-badge-light.align-badge-yellow {
    background-color: #FEF3C7;
    color: #92400E;
}

.dark .align-badge-light.align-badge-yellow {
    background-color: #92400E;
    color: #FCD34D;
}

.align-badge-light.align-badge-gray {
    background-color: #F3F4F6;
    color: #374151;
}

.dark .align-badge-light.align-badge-gray {
    background-color: #374151;
    color: #D1D5DB;
}

/* Badge Variant: Lighter */
.align-badge-lighter.align-badge-green {
    background-color: #ECFDF5;
    color: #10B981;
}

.dark .align-badge-lighter.align-badge-green {
    background-color: #064E3B;
    color: #6EE7B7;
}

.align-badge-lighter.align-badge-red {
    background-color: #FEF2F2;
    color: #EF4444;
}

.dark .align-badge-lighter.align-badge-red {
    background-color: #7F1D1D;
    color: #FCA5A5;
}

.align-badge-lighter.align-badge-orange {
    background-color: #FFF7ED;
    color: #F97316;
}

.dark .align-badge-lighter.align-badge-orange {
    background-color: #7C2D12;
    color: #FDBA74;
}

.align-badge-lighter.align-badge-gray {
    background-color: #F9FAFB;
    color: #6B7280;
}

.dark .align-badge-lighter.align-badge-gray {
    background-color: #1F2937;
    color: #9CA3AF;
}

/* Badge Variant: Stroke */
.align-badge-stroke {
    border: 1px solid;
}

.align-badge-stroke.align-badge-green {
    border-color: #D1FAE5;
    color: #10B981;
}

.dark .align-badge-stroke.align-badge-green {
    border-color: #065F46;
    color: #6EE7B7;
}

.align-badge-stroke.align-badge-red {
    border-color: #FEE2E2;
    color: #EF4444;
}

.dark .align-badge-stroke.align-badge-red {
    border-color: #991B1B;
    color: #FCA5A5;
}

/* ============================================
   Kbd Component
   ============================================ */
.align-kbd {
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 1.25rem;
    -ms-flex-align: center;
        align-items: center;
    gap: 0.25rem;
    border-radius: 0.25rem;
    border: 1px solid #E5E5E5;
    background-color: #FAFAFA;
    padding: 0 0.375rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.625rem;
    line-height: 0.875rem;
    color: #737373;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.dark .align-kbd {
    border-color: #404040;
    background-color: #262626;
    color: #A3A3A3;
}

/* ============================================
   Table Component
   ============================================ */
.align-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Table Header */
/* .align-table thead tr th {
    background-color: #F9FAFB;
    padding: 0.75rem;
    text-align: left;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6B7280;
}

.dark .align-table thead tr th {
    background-color: rgba(38, 38, 38, 0.5);
    color: #9CA3AF;
}

.align-table thead tr th:first-child {
    border-top-left-radius: 0.75rem;
}

.align-table thead tr th:last-child {
    border-top-right-radius: 0.75rem;
} */

/* Table Header Sortable */
/* .align-table thead tr th.sortable {
    cursor: pointer;
    user-select: none;
}

.align-table thead tr th.sortable:hover {
    color: #1F2937;
}

.dark .align-table thead tr th.sortable:hover {
    color: #E5E7EB;
} */

/* Table Body */
.align-table tbody tr {
    transition: background-color 0.2s ease-out;
}

.align-table tbody tr:hover {
    background-color: #F9FAFB;
}

.dark .align-table tbody tr:hover {
    background-color: rgba(38, 38, 38, 0.5);
}

/* .align-table tbody tr td {
    height: 4rem;
    padding: 0.75rem;
} */

/* .align-table tbody tr td:first-child {
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
} */

/* .align-table tbody tr td:last-child {
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
} */

/* Table Row Separator */
.align-table-separator {
    height: 1px;
    background-color: #E5E7EB;
}

.dark .align-table-separator {
    background-color: #404040;
}

/* Table Row Selected State */
.align-table tbody tr.selected {
    background-color: #EFF6FF;
}

.dark .align-table tbody tr.selected {
    background-color: rgba(30, 58, 138, 0.2);
}

/* ============================================
   Scrollbar Styles
   ============================================ */
.align-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #E5E5E5 transparent;
}

.align-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.align-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.align-scrollbar::-webkit-scrollbar-thumb {
    background-color: #E5E5E5;
    border-radius: 3px;
}

.align-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #D4D4D4;
}

.dark .align-scrollbar {
    scrollbar-color: #262626 transparent;
}

.dark .align-scrollbar::-webkit-scrollbar-thumb {
    background-color: #262626;
}

.dark .align-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #404040;
}

/* ============================================
   Utility Classes
   ============================================ */

/* Shadow Utilities */
.shadow-x-small {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow-small {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.shadow-medium {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-large {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Ring Utilities */
.ring-focus {
    outline: 2px solid;
    outline-offset: 2px;
}

/* Transition Utilities */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* ============================================
   Responsive Utilities
   ============================================ */
@media (max-width: 640px) {
    .align-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

.align-dropdown-item {
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #374151;
    outline: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease-out;
    text-decoration: none;
    text-align: left;
    border: none;
    background: transparent;
    width: 100%;
}

.dark .align-dropdown-item {
    color: #E5E7EB;
}

.align-dropdown-item:hover {
    background-color: #F3F4F6;
    color: #111827;
}

.dark .align-dropdown-item:hover {
    background-color: #262626;
    color: #FAFAFA;
}

.align-dropdown-icon {
    width: 1rem;
    height: 1rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    color: #6B7280;
}

.dark .align-dropdown-icon {
    color: #9CA3AF;
}

.align-divider {
    height: 1px;
    background-color: #E5E7EB;
    margin: 0.25rem 0;
}

.dark .align-divider {
    background-color: #262626;
}

.align-dropdown-item-danger {
    color: #DC2626;
}

.dark .align-dropdown-item-danger {
    color: #F87171;
}

.align-dropdown-item-danger:hover {
    background-color: #FEE2E2;
    color: #991B1B;
}

.dark .align-dropdown-item-danger:hover {
    background-color: rgba(127, 29, 29, 0.5);
    color: #FCA5A5;
}

.align-dropdown-item-warning {
    color: #D97706;
}

.dark .align-dropdown-item-warning {
    color: #FBBF24;
}

.align-dropdown-item-warning:hover {
    background-color: #FEF3C7;
    color: #92400E;
}

.dark .align-dropdown-item-warning:hover {
    background-color: rgba(146, 64, 14, 0.35);
    color: #FDE68A;
}

.align-dropdown-item-success {
    color: #16A34A;
}

.dark .align-dropdown-item-success {
    color: #4ADE80;
}

.align-dropdown-item-success:hover {
    background-color: #DCFCE7;
    color: #166534;
}

.dark .align-dropdown-item-success:hover {
    background-color: rgba(20, 83, 45, 0.35);
    color: #BBF7D0;
}

.rounded-10 {
    border-radius: 10px;
}

.rounded-20 {
    border-radius: 20px;
}

.shadow-regular {
    box-shadow: 0px 2px 4px 0px rgba(27, 28, 29, 0.04);
}

[x-cloak] {
    display: none !important;
}