@import "./theme.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Satoshi Font for Flare Landing Page */
@font-face {
    font-family: 'Satoshi';
    font-display: swap;
    font-style: normal;
    font-feature-settings: "calt" 1, "rlig" 1, "rvrn" 1, "kern" 1, "rclt" 1;
    font-weight: 200 900;
    src: local("Satoshi"), url(/flare-landing/fonts/eTsEhXB8AWsr.woff2) format("woff2");
}

@font-face {
    font-family: 'Satoshi';
    font-display: swap;
    font-style: italic;
    font-feature-settings: "calt" 1, "rlig" 1, "rvrn" 1, "kern" 1, "rclt" 1;
    font-weight: 200 900;
    src: local("Satoshi"), url(/flare-landing/fonts/PsyQVZdsWXf5.woff2) format("woff2");
}

* {
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
}

.main-gradient {
  background-image: linear-gradient(135deg, rgb(var(--twc-primary) / 0.02) 0%, rgb(var(--twc-secondary) / 0.05) 100%);
  min-height: 100vh;
}

html {
  scroll-behavior: smooth;
}

/* Tailwind Stepper (UI + behavior) */
.wizard {
    @apply w-full;
}
.wizard-steps {
    @apply flex items-center justify-between gap-2 bg-white rounded-lg border border-gray-200 p-3 md:p-4 shadow-sm;
}
.wizard-step {
    @apply flex-1 flex items-center min-w-0;
}
.wizard-step-button {
    @apply w-full flex items-center gap-3 md:gap-4 text-left px-2 py-2 rounded-lg transition-colors duration-200 hover:bg-gray-50;
}
.wizard-step-index {
    @apply flex h-8 w-8 items-center justify-center rounded-full border border-gray-300 bg-white text-sm font-semibold text-gray-700 transition-all duration-200;
}
.wizard-step-texts {
    @apply flex flex-col min-w-0;
}
.wizard-step-title {
    @apply text-gray-700 font-semibold truncate;
}
.wizard-step-subtitle {
    @apply text-gray-500 text-xs truncate;
}
.wizard-sep {
    @apply px-2 text-gray-300 hidden sm:block;
}
.wizard-content {
    @apply mt-4 md:mt-6;
}
.wizard-card {
    @apply rounded-lg bg-white border border-gray-200 p-4 md:p-5 shadow-sm;
}
.wizard-card-title {
    @apply flex items-center gap-2 text-gray-800 font-semibold mb-3;
}
.wizard-actions {
    @apply flex items-center justify-between pt-3 mt-3 border-t border-gray-200;
}
.wizard-actions .btn-prev {
    @apply btn btn-outline-secondary;
}
.wizard-actions .btn-next {
    @apply btn btn-primary;
}

/* Active/completed states driven by bs-stepper classes */
.step.active .wizard-step-index {
    @apply bg-green-600 border-green-600 text-white;
}
.step.crossed .wizard-step-index {
    @apply bg-green-600 border-green-600 text-white;
}

/* Hide inactive content when vendor CSS is removed */
.bs-stepper .bs-stepper-content .content {
    display: none;
}
.bs-stepper .bs-stepper-content .content.active,
.bs-stepper .bs-stepper-content .content.dstepper-block {
    display: block;
}

/* Enhanced Component Styles */
.btn {
    @apply inline-flex items-center justify-center rounded-lg h-10 px-4 text-sm font-medium transition-all duration-200 focus:outline-none;
}
.btn-primary {
    @apply text-white whitespace-nowrap shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
    background: var(--color-primary);
}
.btn-secondary {
    @apply text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
    background: var(--color-secondary);
}
.btn-primary:hover {
    background: var(--color-primary-700);
}
.btn-secondary:hover {
    background: var(--color-secondary-700);
}
.btn-outline-primary {
    @apply border text-primary hover:text-white hover:shadow-md transform hover:-translate-y-0.5;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn-outline-primary:hover {
    background-color: rgb(var(--twc-primary) / 1);
}

.btn-outline-secondary {
    @apply border text-secondary hover:text-white hover:shadow-md transform hover:-translate-y-0.5;
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}
.btn-outline-secondary:hover {
    background-color: rgb(var(--twc-secondary) / 1);
}

.btn-outline-success {
    @apply border border-green-500 text-green-500 hover:bg-green-500 hover:text-white hover:shadow-md transform hover:-translate-y-0.5;
}
.btn-outline-warning {
    @apply border border-yellow-600 text-yellow-600 hover:bg-yellow-600 hover:text-white hover:shadow-md transform hover:-translate-y-0.5;
}
.btn-outline-info {
    @apply border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white hover:shadow-md transform hover:-translate-y-0.5;
}

.btn-outline-danger {
    @apply border border-red-500 text-red-500 hover:bg-red-500 hover:text-white hover:shadow-md transform hover:-translate-y-0.5;
}
.btn-outline-danger:hover {
    @apply hover:bg-red-600;
}
.btn-sm {
    @apply px-3 py-1.5 text-xs h-9;
}

/* Enhanced Cards */
.card {
    @apply rounded-lg bg-white transition-all duration-300;
}

.card-header {
    @apply border-b px-6 py-4 font-semibold rounded-sm;
    border-color: var(--color-surface-2);
    color: var(--color-primary-700);
    background: linear-gradient(135deg, var(--color-card-gradient-start) 0%, var(--color-surface-1) 100%);
}
.card-body {
    @apply p-0;
}

/* Enhanced Forms */
.form-control {
    @apply w-full rounded-lg bg-transparent text-gray-700 border border-gray-300 px-4 py-3 text-sm transition-all duration-200 focus:outline-none disabled:bg-gray-100;
    /* border-color: var(--color-surface-2); */
}
.form-control:focus {
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 0.2rem rgb(var(--twc-primary) / 0.15);
}
.form-label {
    @apply text-sm font-medium mb-2 block;
    color: var(--color-primary-700);
}
.invalid-feedback {
    @apply text-red-500 text-sm mt-1;
}
.is-invalid {
    @apply border-red-500;
}

/* Hide number input spinners for reminder controls */
[data-reminder-input]::-webkit-outer-spin-button,
[data-reminder-input]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
[data-reminder-input] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Clean Tailwind Tables */
.table-responsive {
    @apply overflow-x-auto bg-white rounded-lg border border-gray-200;
}
.table {
    @apply w-full text-sm text-left;
}
.table-simple {
    @apply bg-white rounded-lg overflow-hidden;
}
.table-simple .table thead th {
    @apply bg-white text-gray-700 whitespace-nowrap font-semibold px-6 py-3 border-b border-gray-200;
}
.table-simple .table tbody td {
    @apply px-6 py-4 text-gray-700 align-middle;
}
.table-simple .table tbody tr {
    @apply hover:bg-gray-50 border-b border-gray-300;
}
.table-simple .table tfoot td,
.table-simple .table tfoot th {
    @apply bg-white px-6 py-3 text-gray-700 border-t border-gray-200;
}

.table thead th {
    @apply px-4 py-3 font-semibold uppercase tracking-wide text-gray-700 bg-gray-50 border-b border-gray-400;
}
.table tbody td {
    @apply px-4 py-3 align-middle text-gray-700 border-b border-gray-100;
}
.table tbody tr {
    @apply transition-colors duration-150;
}
.table tbody tr:nth-child(odd) {
    @apply bg-gray-50;
}
/* .table tbody tr:hover {
    @apply bg-gray-100;
} */
.table tfoot td,
.table tfoot th {
    @apply px-4 py-3 border-t border-gray-200 bg-gray-50 text-gray-700;
}

.table-actions {
    @apply flex items-center gap-2;
}

/* Bordered tables (opt-in) */
.table-bordered {
    @apply bg-white rounded-lg border border-gray-200 overflow-hidden;
}
.table-bordered .table {
    border-collapse: separate;
    border-spacing: 0;
}
.table-bordered .table thead th,
.table-bordered .table tbody td,
.table-bordered .table tfoot td,
.table-bordered .table tfoot th {
    @apply border border-gray-200;
}
.table-bordered .table thead th {
    @apply bg-gray-50;
}

/* Enhanced Badges */
.badge {
    @apply inline-flex items-center px-3 py-1 text-xs font-semibold rounded-lg transition-all duration-200;
}
.bg-success {
    @apply bg-green-500 text-white shadow-sm;
}
.bg-warning {
    @apply bg-yellow-500 text-white shadow-sm;
}
.bg-info {
    @apply bg-blue-500 text-white shadow-sm;
}
.bg-light-success {
    @apply bg-green-50 text-green-700 border border-green-200;
}
.bg-light-secondary {
    @apply bg-gray-50 text-gray-700 border border-gray-200;
}
.bg-light-warning {
    @apply bg-yellow-50 text-yellow-700 border border-yellow-200;
}
.bg-light-danger {
    @apply bg-red-50 text-red-700 border border-red-200;
}
.bg-light-primary {
    background: linear-gradient(
        135deg,
        rgb(var(--twc-primary) / 0.1) 0%,
        rgb(var(--twc-primary) / 0.05) 100%
    );
    color: var(--color-primary);
    border: 1px solid rgb(var(--twc-primary) / 0.2);
}
.bg-light-info {
    @apply bg-blue-50 text-blue-700 border border-blue-200;
}

/* Enhanced Alerts */
.alert {
    @apply rounded-lg p-4 border-l-4;
}
.alert-success {
    @apply bg-green-50 text-green-700 border-green-200 border-l-green-500;
}
.alert-danger {
    @apply bg-red-50 text-red-700 border-red-200 border-l-red-500;
}

/* Enhanced Modals */
.modal {
    @apply fixed inset-0 z-[9999] hidden bg-black bg-opacity-50 backdrop-blur-sm;
}
.modal.show {
    @apply !flex items-center justify-center p-4;
}
.modal-dialog {
    @apply relative w-full max-w-2xl mx-auto;
}
.modal-dialog.modal-narrow {
    @apply max-w-lg;
}
.modal-content {
    @apply bg-white rounded-lg shadow-2xl border border-gray-200 overflow-hidden flex flex-col;
    animation: modalSlideIn 0.3s ease-out;
    max-height: calc(100vh - 4rem);
}

@media (max-width: 768px) {
    .modal.show {
        @apply items-start justify-center pt-6 pb-6;
    }

    .modal-dialog {
        max-height: calc(100vh - 3rem);
    }

    .modal-content {
        max-height: calc(100vh - 3rem);
    }
}
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.modal-header {
    @apply flex items-center justify-between p-6 border-b bg-gradient-to-r from-primary/5 to-transparent flex-none;
    border-color: var(--color-surface-2);
}
.modal-header h5 {
    @apply text-xl font-semibold;
    color: var(--color-primary-700);
}
.modal-body {
    @apply p-6 flex-1 overflow-y-auto;
}
.modal-footer {
    @apply flex items-center justify-end gap-3 p-6 border-t bg-gray-50 flex-none;
    border-color: var(--color-surface-2);
}
.btn-close {
    @apply text-gray-400 hover:text-gray-600 transition-colors duration-200;
}

/* Enhanced Progress Bars */
.progress {
    @apply w-full bg-gray-200 rounded-lg overflow-hidden;
}
.progress-bar {
    @apply h-full rounded-lg transition-all duration-500;
}
.progress-bar.bg-primary {
    background: linear-gradient(135deg, rgb(var(--twc-primary) / 1) 0%, rgb(var(--twc-primary-400) / 1) 100%);
}
.progress-bar.bg-success {
    @apply bg-green-500;
}
.progress-bar.bg-danger {
    @apply bg-red-500;
}

/* Tailwind DataTables Look */
.dataTables_wrapper {
    @apply bg-white rounded-lg shadow-sm;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    /* @apply px-4 py-3; */
}
.dataTables_wrapper .dataTables_filter input {
    @apply border rounded-lg px-4 py-2 text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/20;
    border-color: var(--color-surface-2);
}
.dataTables_wrapper .dataTables_length select {
    @apply border rounded-lg px-3 py-2 text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/20;
    border-color: var(--color-surface-2);
}
.dataTables_wrapper table.dataTable {
    @apply w-full text-sm;
}
.dataTables_wrapper table.dataTable thead th {
    @apply bg-gray-50 text-gray-700 font-semibold uppercase tracking-wide border-b border-t border-gray-200 px-4 py-3;
}
.dataTables_wrapper table.dataTable tbody td {
    @apply px-4 py-3 border-b border-gray-200;
}
.dataTables_wrapper table.dataTable tbody tr:nth-child(odd) {
    @apply bg-gray-50/60;
}
.dataTables_wrapper table.dataTable.no-footer {
    border-bottom: 0;
}
.page-link {
    @apply border rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 hover:shadow-md;
    color: var(--color-primary-700);
    border-color: var(--color-surface-2);
}
.page-item.active .page-link {
    @apply text-white shadow-md;
    background: linear-gradient(135deg, rgb(var(--twc-primary) / 1) 0%, rgb(var(--twc-primary-400) / 1) 100%);
    border-color: var(--color-primary);
}
.page-link:hover {
    color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-surface-2) 0%, var(--color-card-gradient-alt) 100%);
    border-color: var(--color-primary);
}

/* Compact density modifier */
.table-compact .table thead th {
    @apply px-3 py-2;
}
.table-compact .table tbody td {
    @apply px-3 py-2;
}

/* Enhanced Avatar Styles */
.avatar {
    @apply min-w-8 h-8 rounded-full flex items-center justify-center shadow-sm;
}
.avatar-content {
    @apply w-8 h-8 flex items-center justify-center;
}
.avatar-icon {
    @apply text-sm;
}

/* Enhanced Action Buttons */
.action-buttons {
    @apply flex items-center gap-2;
}
.btn-action {
    @apply p-2 rounded-lg transition-all duration-200 hover:shadow-md transform hover:-translate-y-0.5;
}

/* Enhanced Statistics Cards */
.statistics-card {
    @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
    border: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.statistics-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* DataTables Pagination Styling */
.dataTables_wrapper .dataTables_paginate {
    @apply flex items-center gap-1;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    @apply rounded text-sm bg-white hover:bg-gray-50 transition-colors;
    min-width: 40px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    @apply bg-primary text-white border-primary;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
    @apply bg-gray-50 border-gray-400;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Action Buttons - Same Size */
.action-buttons {
    @apply flex items-center gap-2;
}

.btn-action {
    @apply w-8 h-8 p-0 flex items-center justify-center rounded-lg transition-all duration-200 hover:shadow-md transform hover:-translate-y-0.5;
    min-width: 32px;
    min-height: 32px;
}

/* Tooltip Styling */
.tooltip {
    @apply text-xs;
    margin-bottom: 8px !important;
}

.tooltip .tooltip-inner {
    @apply bg-gray-900 text-white px-2 py-1 rounded;
}

.tooltip .tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.tooltip.bs-tooltip-top .tooltip-arrow {
    bottom: -4px;
    left: 50%;
    margin-left: -4px;
    border-width: 4px 4px 0;
    border-color: var(--color-gray-800) transparent transparent;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow {
    top: -4px;
    left: 50%;
    margin-left: -4px;
    border-width: 0 4px 4px;
    border-color: transparent transparent var(--color-gray-800);
}

.tooltip.bs-tooltip-start .tooltip-arrow {
    right: -4px;
    top: 50%;
    margin-top: -4px;
    border-width: 4px 0 4px 4px;
    border-color: transparent transparent transparent var(--color-gray-800);
}

.tooltip.bs-tooltip-end .tooltip-arrow {
    left: -4px;
    top: 50%;
    margin-top: -4px;
    border-width: 4px 4px 4px 0;
    border-color: transparent var(--color-gray-800) transparent transparent;
}

/* Custom tooltip positioning */
.tooltip.bs-tooltip-top {
    transform: translateY(-8px);
}

/* Enhanced Dropdown Styling */
.dataTables_wrapper .dataTables_length select {
    @apply border rounded-lg px-3 py-1.5 mx-2 text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/20 bg-white min-w-[70px];
    border-color: var(--color-surface-2);
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgb(var(--twc-primary) / 0.15);
}

/* Custom Tooltip Styles */
.custom-tooltip {
    position: fixed !important;
    z-index: 99999 !important;
    padding: 4px 12px;
    font-size: 12px;
    color: white !important;
    background-color: var(--color-gray-800) !important;
    border-radius: 4px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
    max-width: 200px;
    word-wrap: break-word;
    line-height: 1.5;
    display: block !important;
    visibility: visible !important;
}

.custom-tooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Tooltip arrows */
.custom-tooltip[data-placement="top"]::before {
    top: 100%;
    left: 50%;
    margin-left: -4px;
    border-width: 4px 4px 0;
    border-color: var(--color-gray-800) transparent transparent;
}

.custom-tooltip[data-placement="bottom"]::before {
    bottom: 100%;
    left: 50%;
    margin-left: -4px;
    border-width: 0 4px 4px;
    border-color: transparent transparent var(--color-gray-800);
}

.custom-tooltip[data-placement="left"]::before {
    left: 100%;
    top: 50%;
    margin-top: -4px;
    border-width: 4px 0 4px 4px;
    border-color: transparent transparent transparent var(--color-gray-800);
}

.custom-tooltip[data-placement="right"]::before {
    right: 100%;
    top: 50%;
    margin-top: -4px;
    border-width: 4px 4px 4px 0;
    border-color: transparent var(--color-gray-800) transparent transparent;
}

/* Custom Date Picker Styles - Theme Colors */
.custom-datepicker {
    animation: datepickerSlideIn 0.2s ease-out;
    @apply flex md:flex-row flex-col max-h-[450px] overflow-auto;
}

@keyframes datepickerSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-datepicker .datepicker-header {
    @apply !flex !items-center !justify-between !p-3 !border-b;
    border-color: var(--color-surface-2) !important;
}

.custom-datepicker .datepicker-title {
    @apply !text-lg !font-semibold;
    color: var(--color-primary-700) !important;
}

.custom-datepicker .datepicker-nav {
    @apply !flex !items-center !gap-1;
}

.custom-datepicker .datepicker-nav-btn {
    @apply !py-1 !px-3 !rounded !transition-colors text-2xl;
    color: var(--color-primary);
}

.custom-datepicker .datepicker-nav-btn:hover {
    background-color: var(--color-surface-2) !important;
}

.custom-datepicker .datepicker-weekdays {
    @apply !grid !grid-cols-7 !gap-1 !p-2;
}

.custom-datepicker .datepicker-weekday {
    @apply !text-center !text-sm !font-medium !py-2;
    color: var(--color-primary) !important;
}

.custom-datepicker .datepicker-days {
    @apply !grid !grid-cols-7 !gap-1 !p-2;
}

.custom-datepicker .datepicker-day {
    @apply !text-center !py-2 !px-1 !rounded !cursor-pointer !transition-colors !text-sm;
    color: var(--color-gray-800) !important;
}

.custom-datepicker .datepicker-day.other-month {
    color: var(--color-primary-400) !important;
}

.custom-datepicker .datepicker-day.today {
    background-color: var(--color-primary-400) !important;
    color: var(--color-primary-700) !important;
    font-weight: 600 !important;
}

.custom-datepicker .datepicker-day.selected {
    background-color: var(--color-primary) !important;
    color: white !important;
    font-weight: 600 !important;
}

.custom-datepicker .datepicker-day:hover:not(.selected) {
    background-color: var(--color-surface-2) !important;
}

.custom-datepicker .datepicker-actions {
    @apply !flex !items-center !justify-between !p-3 !border-t;
    border-color: var(--color-surface-2) !important;
}

.custom-datepicker .datepicker-btn {
    @apply !px-4 !py-2 !text-sm !font-medium !rounded !transition-colors;
}

.custom-datepicker .datepicker-btn-clear {
    color: var(--color-primary) !important;
    background-color: var(--color-surface-2) !important;
}

.custom-datepicker .datepicker-btn-clear:hover {
    background-color: var(--color-primary-400) !important;
    color: white !important;
}

.custom-datepicker .datepicker-btn-done {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.custom-datepicker .datepicker-btn-done:hover {
    background-color: var(--color-primary-700) !important;
}

.custom-datepicker .datepicker-btn-today {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.custom-datepicker .datepicker-btn-today:hover {
    background-color: var(--color-primary-700) !important;
}

/* Mobile Bottom Navigation Styles */
.mobile-nav-item {
    @apply flex flex-col items-center justify-center px-3 py-2 rounded-lg transition-all duration-200 min-w-0 flex-1;
}

.mobile-nav-item.active {
    @apply text-primary;
}

.mobile-nav-item:not(.active) {
    @apply text-gray-500 hover:text-primary;
}

.mobile-nav-icon {
    @apply text-lg mb-1;
}

.mobile-nav-label {
    @apply text-sm font-medium truncate;
}

/* Mobile Navigation Active State Enhancement */
.mobile-nav-item.active .mobile-nav-icon {
    @apply transform scale-110;
}

.mobile-nav-item.active .mobile-nav-label {
    @apply font-semibold;
}

/* Mobile Navigation Hover Effects */
.mobile-nav-item:hover:not(.active) {
    @apply bg-gray-50;
}

.mobile-nav-item.active {
    @apply bg-primary/5;
}

/* Mobile Navigation Animation */
@keyframes mobileNavPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.mobile-nav-item.active .mobile-nav-icon {
    animation: mobileNavPulse 0.3s ease-in-out;
}

/* Mobile and Tablet Responsive Card Layouts */
/* Keep tables visible on all screens with horizontal scroll; show cards on small screens */
@media (max-width: 1350px) {
    /* Ensure tables remain visible and scrollable */
    .table-responsive {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-cards-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1rem;
    }
}

/* Hide mobile cards on desktop */
@media (min-width: 1351px) {
    .mobile-cards-container {
        display: none;
    }
}

/* Mobile Cards Container */

/* Individual Mobile Card */
.mobile-card {
    @apply bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-all duration-200 p-4;
}

.mobile-card-header {
    @apply flex items-center justify-between mb-2 pb-3 border-b border-gray-100;
    min-width: 0;
}

.mobile-card-title {
    @apply text-lg font-semibold text-gray-700 truncate;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-card-subtitle {
    @apply text-sm text-gray-500;
}


.mobile-card-row {
    @apply flex items-center justify-between py-2;
}

.mobile-card-label {
    @apply text-sm font-medium text-gray-600 flex items-center space-x-2;
}

.mobile-card-value {
    @apply text-sm text-gray-700 font-medium truncate;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-card-actions {
    @apply flex items-center justify-end gap-2 mt-2 pt-3 border-t border-gray-100;
}

/* Status badges for mobile cards */
.mobile-status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.mobile-status-connected {
    @apply bg-green-100 text-green-800;
}

.mobile-status-disconnected {
    @apply bg-yellow-100 text-yellow-800;
}

.mobile-status-delivered {
    @apply bg-green-100 text-green-800;
}

.mobile-status-failed {
    @apply bg-red-100 text-red-800;
}

.mobile-status-progress {
    @apply bg-blue-100 text-blue-800;
}

/* Mobile card icons */
.mobile-card-icon {
    @apply min-w-10 h-10 rounded-full flex items-center justify-center;
}

.mobile-card-icon-primary {
    @apply bg-primary/10 text-primary;
}

.mobile-card-icon-success {
    @apply bg-green-100 text-green-600;
}

.mobile-card-icon-warning {
    @apply bg-yellow-100 text-yellow-600;
}

.mobile-card-icon-danger {
    @apply bg-red-100 text-red-600;
}

.mobile-card-icon-info {
    @apply bg-blue-100 text-blue-600;
}

/* Mobile card action buttons */
.mobile-card-btn {
    @apply w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-200 hover:shadow-md transform hover:-translate-y-0.5;
}

.mobile-card-btn-primary {
    @apply bg-primary/10 text-primary hover:bg-primary hover:text-white;
}

.mobile-card-btn-success {
    @apply bg-green-100 text-green-600 hover:bg-green-500 hover:text-white;
}

.mobile-card-btn-warning {
    @apply bg-yellow-100 text-yellow-600 hover:bg-yellow-500 hover:text-white;
}

.mobile-card-btn-info {
    @apply bg-blue-100 text-blue-600 hover:bg-blue-500 hover:text-white;
}

/* Empty state for mobile cards */
.mobile-empty-state {
    @apply text-center py-12;
}

.mobile-empty-icon {
    @apply w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-4;
}

.mobile-empty-title {
    @apply text-lg font-medium text-gray-700 mb-2;
}

.mobile-empty-description {
    @apply text-gray-500 mb-4;
}

/* Responsive grid for mobile cards */
@media (max-width: 640px) {
    /* .mobile-cards-container {
        @apply space-y-3;
    } */
    
    .mobile-card {
        @apply p-3;
    }
    
    .mobile-card-title {
        @apply text-base;
        max-width: 110px;
    }
    
    .mobile-card-value {
        max-width: 140px;
    }
    
    .mobile-card-actions {
        @apply flex-wrap gap-2;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .mobile-cards-container {
        @apply grid grid-cols-2 gap-4;
    }
}

/* Mobile Stepper Animations */
.mobile-step-circle {
    transition: all 0.3s ease;
}

.mobile-step-circle:hover {
    transform: scale(1.05);
}

.step-dot {
    transition: all 0.3s ease;
}

.step-dot.active {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Mobile Stepper Slide Animation */
.mobile-stepper-slide {
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile Stepper Progress Animation */
.mobile-progress-bar {
    position: relative;
    overflow: hidden;
}

.mobile-progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, rgb(var(--twc-primary) / 1), rgb(var(--twc-primary-400) / 1));
    transition: width 0.5s ease;
    border-radius: 4px;
}

/* Flare Landing Page Custom Utilities */
@layer utilities {
    .text-dark-purple {
        background-image: linear-gradient(135deg, var(--color-brand-purple-extra-dark), var(--color-brand-purple-deep-accent));
        -webkit-background-clip: text;
        background-clip: text;
        padding-bottom: 0.5rem;
        color: transparent;
    }
    
    .text-bleak-purple {
        background-image: linear-gradient(90deg, var(--color-brand-purple-bleak-alt), var(--color-brand-purple-muted));
        -webkit-background-clip: text;
        background-clip: text;
        padding-bottom: 0.5rem;
        color: transparent;
    }
    
    .text-uppercase-semibold {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1136em;
    }
    
    .heading-1 {
        font-size: 3rem;
        line-height: 1.05;
        letter-spacing: -0.0375em;
    }
    
    @media (min-width: 768px) {
        .heading-1 {
            font-size: 3.75rem;
            line-height: 1.05;
        }
    }
    
    .heading-2 {
        font-size: 2.25rem;
        line-height: 1.05;
        letter-spacing: -0.025em;
    }
    
    @media (min-width: 768px) {
        .heading-2 {
            font-size: 3rem;
            line-height: 1.05;
        }
    }
    
    .heading-3 {
        font-size: 1.875rem;
        line-height: 1.125;
        letter-spacing: -0.025em;
    }
    
    .heading-4 {
        font-size: 24px;
        line-height: 1.125;
        letter-spacing: -0.025em;
    }
    
    .heading-5 {
        font-size: 20px;
        line-height: 1.125;
        letter-spacing: -0.025em;
    }
    
    .button-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(180deg, var(--color-brand-purple-accent), var(--color-brand-purple-bright));
        padding-left: 18px;
        padding-right: 18px;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
        font-weight: 500;
        line-height: 1.25;
        color: rgb(255 255 255);
        text-shadow: 0px 0.75px 0.25px rgba(0, 0, 0, 0.5);
        box-shadow: 0 2px 24px rgb(var(--twc-primary) / 0), inset 0 2px 2px rgb(var(--twc-surface-1) / 0.05), inset 0 -2px 2px rgb(0 0 0 / 0.2);
        transition: box-shadow 0.15s ease-in-out;
        text-wrap: nowrap;
    }
    
    .button-primary:hover {
        box-shadow: 0 2px 24px rgb(var(--twc-primary) / 0.3), inset 0 2px 2px rgb(var(--twc-surface-1) / 0.05), inset 0 -2px 2px rgb(0 0 0 / 0.2);
    }
    
    .button-secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        border-width: 1px;
        border-color: var(--color-surface-1);
        padding-left: 18px;
        padding-right: 18px;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
        font-weight: 500;
        line-height: 1.25;
        color: var(--color-brand-gray-dark);
        filter: drop-shadow(0 0 rgb(0 0 0 / 0));
        background: linear-gradient(180deg, var(--color-surface-3), rgb(var(--twc-surface-3) / 0.6));
        box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
        transition: background-color 0.15s ease-in-out;
        text-wrap: nowrap;
    }
    
    .button-secondary:hover {
        background-color: rgb(var(--twc-surface-1) / 0.8);
    }
    
    .text-green-to-transparent {
        line-height: 1;
        color: var(--color-brand-green-dark);
        opacity: 0.25;
        -webkit-mask-image: linear-gradient(0deg, transparent 8rem, white 24rem);
        mask-image: linear-gradient(0deg, transparent 8rem, white 24rem);
    }
    
    @media (min-width: 768px) {
        .text-green-to-transparent {
            font-size: 240px;
        }
    }
    
    @media (min-width: 1024px) {
        .text-huge {
            font-size: 320px;
        }
    }
    
    @media (min-width: 1280px) {
        .text-huge {
            font-size: 420px;
        }
    }
}

/* Custom Gray Scrollbar Styles */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}