/* Mobile-first custom styles for Gym Manager */

/* ===== ARISE BRAND COLOR SYSTEM ===== */
/* All colors derived from ARISE.svg gradients */
/* Purples: #4f068a, #6e068e, #720a8d, #7d147d, #8e04dd, #7a09b3, #6f1261 */
/* Warm tones: #7b1c5e, #f9826d, #fc9773, #ec766f */

:root, [data-bs-theme="dark"] {
    /* Primary - ARISE purple */
    --bs-primary: #7a09b3;
    --bs-primary-rgb: 122, 9, 179;

    /* Secondary - Dark purple */
    --bs-secondary: #4f068a;
    --bs-secondary-rgb: 79, 6, 138;

    /* Success - Peach (warm positive) */
    --bs-success: #fc9773;
    --bs-success-rgb: 252, 151, 115;

    /* Danger - Magenta */
    --bs-danger: #7b1c5e;
    --bs-danger-rgb: 123, 28, 94;

    /* Warning - Coral */
    --bs-warning: #f9826d;
    --bs-warning-rgb: 249, 130, 109;

    /* Info - Bright purple */
    --bs-info: #8e04dd;
    --bs-info-rgb: 142, 4, 221;

    /* Link colors - Light coral from palette */
    --bs-link-color: #ec766f;
    --bs-link-hover-color: #fc9773;
}

/* ===== BOOTSTRAP BUTTON OVERRIDES ===== */

.btn-primary {
    --bs-btn-bg: #7a09b3;
    --bs-btn-border-color: #7a09b3;
    --bs-btn-hover-bg: #6e068e;
    --bs-btn-hover-border-color: #6e068e;
    --bs-btn-active-bg: #4f068a;
    --bs-btn-active-border-color: #4f068a;
    --bs-btn-disabled-bg: #7a09b3;
    --bs-btn-disabled-border-color: #7a09b3;
}

.btn-outline-primary {
    --bs-btn-color: #7a09b3;
    --bs-btn-border-color: #7a09b3;
    --bs-btn-hover-bg: #7a09b3;
    --bs-btn-hover-border-color: #7a09b3;
    --bs-btn-active-bg: #6e068e;
    --bs-btn-active-border-color: #6e068e;
}

.btn-secondary {
    --bs-btn-bg: #4f068a;
    --bs-btn-border-color: #4f068a;
    --bs-btn-hover-bg: #6f1261;
    --bs-btn-hover-border-color: #6f1261;
    --bs-btn-active-bg: #6f1261;
    --bs-btn-active-border-color: #6f1261;
}

.btn-outline-secondary {
    --bs-btn-color: #720a8d;
    --bs-btn-border-color: #720a8d;
    --bs-btn-hover-bg: #720a8d;
    --bs-btn-hover-border-color: #720a8d;
    --bs-btn-hover-color: #fff;
}

.btn-success {
    --bs-btn-bg: #fc9773;
    --bs-btn-border-color: #fc9773;
    --bs-btn-hover-bg: #ec766f;
    --bs-btn-hover-border-color: #ec766f;
    --bs-btn-active-bg: #f9826d;
    --bs-btn-active-border-color: #f9826d;
    --bs-btn-color: #000;
    --bs-btn-hover-color: #000;
}

.btn-outline-success {
    --bs-btn-color: #fc9773;
    --bs-btn-border-color: #fc9773;
    --bs-btn-hover-bg: #fc9773;
    --bs-btn-hover-border-color: #fc9773;
    --bs-btn-hover-color: #000;
}

.btn-danger {
    --bs-btn-bg: #7b1c5e;
    --bs-btn-border-color: #7b1c5e;
    --bs-btn-hover-bg: #6f1261;
    --bs-btn-hover-border-color: #6f1261;
    --bs-btn-active-bg: #6f1261;
    --bs-btn-active-border-color: #6f1261;
}

.btn-outline-danger {
    --bs-btn-color: #7b1c5e;
    --bs-btn-border-color: #7b1c5e;
    --bs-btn-hover-bg: #7b1c5e;
    --bs-btn-hover-border-color: #7b1c5e;
}

.btn-warning {
    --bs-btn-bg: #f9826d;
    --bs-btn-border-color: #f9826d;
    --bs-btn-hover-bg: #ec766f;
    --bs-btn-hover-border-color: #ec766f;
    --bs-btn-color: #000;
    --bs-btn-hover-color: #000;
}

.btn-outline-warning {
    --bs-btn-color: #f9826d;
    --bs-btn-border-color: #f9826d;
    --bs-btn-hover-bg: #f9826d;
    --bs-btn-hover-border-color: #f9826d;
    --bs-btn-hover-color: #000;
}

.btn-info {
    --bs-btn-bg: #8e04dd;
    --bs-btn-border-color: #8e04dd;
    --bs-btn-hover-bg: #7a09b3;
    --bs-btn-hover-border-color: #7a09b3;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

.btn-outline-info {
    --bs-btn-color: #8e04dd;
    --bs-btn-border-color: #8e04dd;
    --bs-btn-hover-bg: #8e04dd;
    --bs-btn-hover-border-color: #8e04dd;
    --bs-btn-hover-color: #fff;
}

/* ===== BOOTSTRAP BADGE OVERRIDES ===== */

.bg-primary {
    background-color: #7a09b3 !important;
}

.bg-secondary {
    background-color: #4f068a !important;
}

.bg-success {
    background-color: #fc9773 !important;
    color: #000 !important;
}

.bg-danger {
    background-color: #7b1c5e !important;
}

.bg-warning {
    background-color: #f9826d !important;
    color: #000 !important;
}

.bg-info {
    background-color: #8e04dd !important;
}

/* ===== BOOTSTRAP TEXT COLOR OVERRIDES ===== */

.text-primary {
    color: #7a09b3 !important;
}

.text-secondary {
    color: #720a8d !important;
}

.text-success {
    color: #fc9773 !important;
}

.text-danger {
    color: #7b1c5e !important;
}

.text-warning {
    color: #f9826d !important;
}

.text-info {
    color: #8e04dd !important;
}

/* ===== BOOTSTRAP ALERT OVERRIDES ===== */

.alert-primary {
    --bs-alert-bg: rgba(122, 9, 179, 0.15);
    --bs-alert-border-color: #7a09b3;
    --bs-alert-color: #7a09b3;
}

.alert-secondary {
    --bs-alert-bg: rgba(79, 6, 138, 0.15);
    --bs-alert-border-color: #4f068a;
    --bs-alert-color: #720a8d;
}

.alert-success {
    --bs-alert-bg: rgba(252, 151, 115, 0.15);
    --bs-alert-border-color: #fc9773;
    --bs-alert-color: #fc9773;
}

.alert-danger {
    --bs-alert-bg: rgba(123, 28, 94, 0.15);
    --bs-alert-border-color: #7b1c5e;
    --bs-alert-color: #7b1c5e;
}

.alert-warning {
    --bs-alert-bg: rgba(249, 130, 109, 0.15);
    --bs-alert-border-color: #f9826d;
    --bs-alert-color: #f9826d;
}

.alert-info {
    --bs-alert-bg: rgba(142, 4, 221, 0.15);
    --bs-alert-border-color: #8e04dd;
    --bs-alert-color: #8e04dd;
}

/* ===== BOOTSTRAP BORDER OVERRIDES ===== */

.border-primary {
    border-color: #7a09b3 !important;
}

.border-secondary {
    border-color: #4f068a !important;
}

.border-success {
    border-color: #fc9773 !important;
}

.border-danger {
    border-color: #7b1c5e !important;
}

.border-warning {
    border-color: #f9826d !important;
}

.border-info {
    border-color: #8e04dd !important;
}

/* ===== BOOTSTRAP PROGRESS BAR OVERRIDES ===== */

.progress-bar.bg-primary {
    background-color: #7a09b3 !important;
}

.progress-bar.bg-success {
    background-color: #fc9773 !important;
}

.progress-bar.bg-info {
    background-color: #8e04dd !important;
}

.progress-bar.bg-warning {
    background-color: #f9826d !important;
}

.progress-bar.bg-danger {
    background-color: #7b1c5e !important;
}

/* Large touch targets (minimum 44x44px for mobile) */
.btn-touch {
    min-height: 48px;
    min-width: 48px;
    font-size: 1.1rem;
}

/* Large form inputs for easy mobile interaction */
.form-control-lg,
.form-select-lg {
    font-size: 1.25rem;
    min-height: 50px;
}

/* Exercise cards for logging interface */
.exercise-card {
    margin-bottom: 1rem;
    touch-action: manipulation;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.exercise-card:hover {
    border-color: var(--bs-primary);
}

/* Number stepper controls */
.input-group-stepper {
    display: flex;
    width: 100%;
}

.input-group-stepper .btn {
    min-width: 44px;
    max-width: 44px;
    flex: 0 0 44px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-group-stepper .form-control {
    flex: 1 1 auto;
    text-align: center;
    font-weight: bold;
    font-size: 1.25rem;
    min-width: 50px;
    padding: 0.5rem 0.25rem;
}

/* Ensure number inputs work properly on mobile */
.input-group-stepper input[type="number"] {
    -webkit-text-size-adjust: 100%;
    font-size: 16px; /* Prevents iOS zoom on focus */
}

/* Hide number input spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* Mobile-specific adjustments for logging inputs */
@media (max-width: 575.98px) {
    .input-group-stepper .btn {
        min-width: 38px;
        max-width: 38px;
        flex: 0 0 38px;
    }

    .input-group-stepper .form-control {
        font-size: 1rem;
        min-width: 40px;
    }
}

/* Save status indicators */
.save-status {
    display: inline-block;
    transition: all 0.3s ease;
}

/* Progress bar styling */
.progress {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Card styling for dark theme */
.card {
    background-color: var(--bs-dark);
    border-color: var(--bs-gray-dark);
}

/* Sticky footer */
.footer {
    margin-top: 3rem;
}

/* Navbar enhancements */
.navbar-brand {
    font-weight: bold;
    font-size: 1.3rem;
}

/* Badge enhancements */
.badge {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

/* List group improvements */
.list-group-item {
    background-color: var(--bs-dark);
    border-color: var(--bs-gray-dark);
    margin-bottom: 0.5rem;
    border-radius: 0.5rem !important;
}

.list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Card header styling */
.card-header {
    font-weight: bold;
}

/* Alert improvements */
.alert {
    border-radius: 0.5rem;
}

/* Responsive typography */
@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Make buttons full width on mobile */
    .btn-lg {
        padding: 0.75rem 1rem;
    }

    /* Reduce padding on cards for mobile */
    .card-body {
        padding: 1rem;
    }

    /* Stack exercise cards on mobile */
    .exercise-card {
        margin-bottom: 1.5rem;
    }
}

/* Loading spinner for AJAX operations */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15rem;
}

/* Success animation */
@keyframes checkmark {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.save-success {
    animation: checkmark 0.3s ease;
}

/* Focus states for accessibility - ARISE purple */
.form-control:focus,
.form-select:focus,
.btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(122, 9, 179, 0.5);
}

/* Dark theme optimizations */
body {
    background-color: #212529;
    color: #f8f9fa;
}

/* Link colors for dark theme - ARISE salmon/peach */
a {
    color: #ec766f;
}

a:hover {
    color: #fc9773;
}

/* Table styles for dark theme */
table {
    color: #f8f9fa;
}

/* Form label emphasis */
.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Exercise item hover effect */
.exercise-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.exercise-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Pagination styling */
.pagination .page-link {
    background-color: var(--bs-dark);
    border-color: var(--bs-gray-dark);
    color: #f8f9fa;
}

.pagination .page-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f8f9fa;
}

.pagination .page-item.active .page-link {
    background-color: #7a09b3;
    border-color: #7a09b3;
}

/* Dropdown menu dark theme */
.dropdown-menu {
    background-color: var(--bs-dark);
    border-color: var(--bs-gray-dark);
}

.dropdown-item {
    color: #f8f9fa;
}

.dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f8f9fa;
}

/* Sticky navbar enhancement */
.sticky-top {
    backdrop-filter: blur(10px);
    background-color: rgba(33, 37, 41, 0.95) !important;
}

/* Workout status badges - ARISE palette */
.badge.bg-planned {
    background-color: #4f068a !important;  /* ARISE dark purple */
}

.badge.bg-in-progress {
    background-color: #f9826d !important;  /* ARISE coral */
    color: #000 !important;
}

.badge.bg-completed {
    background-color: #fc9773 !important;  /* ARISE peach */
    color: #000 !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar for dark theme - ARISE palette */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #212529;
}

::-webkit-scrollbar-thumb {
    background: #4f068a;  /* ARISE dark purple */
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #7a09b3;  /* ARISE primary purple */
}

/* ===== STRAVA BRAND UTILITIES ===== */
/* Official Strava Orange: #FC4C02 */

.strava-brand {
    color: #FC4C02 !important;
}

.bg-strava {
    background-color: #FC4C02 !important;
    color: white !important;
}

.btn-strava {
    background-color: #FC4C02;
    border-color: #FC4C02;
    color: white;
}

.btn-strava:hover,
.btn-strava:focus {
    background-color: #e04402;
    border-color: #e04402;
    color: white;
}

.btn-outline-strava {
    color: #FC4C02;
    border-color: #FC4C02;
    background-color: transparent;
}

.btn-outline-strava:hover,
.btn-outline-strava:focus {
    background-color: #FC4C02;
    border-color: #FC4C02;
    color: white;
}

.alert-strava {
    background-color: rgba(252, 76, 2, 0.1);
    border: 1px solid #FC4C02;
    color: #FC4C02;
}

/* ===== EXERCISE METADATA BADGES ===== */
/* ARISE brand color system for exercise information */

.badge-category {
    background-color: #7a09b3 !important;  /* ARISE primary purple */
    color: white !important;
}

.badge-muscle-primary {
    background-color: #7b1c5e !important;  /* ARISE magenta */
    color: white !important;
}

.badge-muscle-secondary {
    background-color: #f9826d !important;  /* ARISE coral */
    color: white !important;
}

.badge-equipment {
    background-color: #6f1261 !important;  /* ARISE dark magenta */
    color: white !important;
}

.badge-target {
    background-color: #6e068e !important;  /* ARISE deep purple */
    color: white !important;
}

.badge-actual {
    background-color: #fc9773 !important;  /* ARISE peach */
    color: white !important;
}

/* ===== EXERCISE COMPONENT STYLES ===== */
/* Consistent exercise card and list item styling */

/* Exercise list item (compact view for browse/lists) */
.exercise-item-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.exercise-item-name {
    font-weight: 600;
    margin: 0;
}

.exercise-item-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.exercise-item-actions {
    display: flex;
    gap: 0.25rem;
}

/* Exercise card (detailed view for edit/detail pages) */
.exercise-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.exercise-metadata {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.exercise-targets {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Exercise log card (logging interface) */
.exercise-log-card {
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.exercise-log-card:hover {
    border-color: var(--bs-primary);
}

.exercise-log-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.exercise-log-inputs {
    margin-top: 1rem;
}

/* ===== UTILITY CLASSES ===== */

/* Scrollable exercise list (used in edit pages) */
.exercise-list-scroll {
    max-height: 400px;
    overflow-y: auto;
}

/* Thin progress bar (used in workout logging) */
.progress-thin {
    height: 5px;
}

/* Hidden by default (JavaScript will show when needed) */
.d-none-init {
    display: none;
}

/* ===== DESIGN SYSTEM DOCUMENTATION ===== */
/* Shadow usage standards:
 * - Use .shadow for elevated cards (main content)
 * - Use .shadow-sm for subtle depth (nested cards)
 */

/* Button standards:
 * Size:
 *   - Primary page actions: .btn-lg.btn-touch
 *   - Secondary actions: .btn.btn-touch (default)
 *   - Inline/compact actions: .btn-sm
 * Color:
 *   - Primary actions: .btn-primary
 *   - Success actions: .btn-success
 *   - Strava actions: .btn-strava or .btn-outline-strava
 *   - Destructive actions: .btn-danger
 *   - Navigation: .btn-outline-secondary
 *   - Information: .btn-info or .btn-outline-info
 */

/* ===== FONTAWESOME ICON ALIGNMENT FIXES ===== */
/* Fix vertical alignment of FontAwesome icons in buttons and links */

/* Use flexbox to properly center button content vertically */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Ensure FontAwesome icons have consistent sizing */
.btn i[class^="fa-"],
.btn i[class*=" fa-"] {
    line-height: 1;
    display: inline-block;
}

/* Remove the gap-based spacing when there's only an icon (no text) */
.btn i[class^="fa-"]:only-child,
.btn i[class*=" fa-"]:only-child {
    margin: 0;
}

/* Fix alignment in navigation links */
.nav-link i[class^="fa-"],
.nav-link i[class*=" fa-"],
.dropdown-item i[class^="fa-"],
.dropdown-item i[class*=" fa-"] {
    vertical-align: middle;
    line-height: 1;
    margin-right: 0.5rem;
}

/* Fix alignment in badges */
.badge i[class^="fa-"],
.badge i[class*=" fa-"] {
    vertical-align: middle;
    line-height: 1;
}

/* Fix alignment in list group items */
.list-group-item i[class^="fa-"],
.list-group-item i[class*=" fa-"] {
    vertical-align: middle;
    line-height: 1;
}

/* Fix alignment in headings */
h1 i[class^="fa-"],
h1 i[class*=" fa-"],
h2 i[class^="fa-"],
h2 i[class*=" fa-"],
h3 i[class^="fa-"],
h3 i[class*=" fa-"],
h4 i[class^="fa-"],
h4 i[class*=" fa-"],
h5 i[class^="fa-"],
h5 i[class*=" fa-"],
h6 i[class^="fa-"],
h6 i[class*=" fa-"] {
    vertical-align: middle;
    line-height: 1;
}

/* Fix alignment in alerts */
.alert i[class^="fa-"],
.alert i[class*=" fa-"] {
    vertical-align: middle;
    line-height: 1;
}

/* ===== SUPERSET STYLES ===== */
/* Visual grouping for exercises performed without rest */

/* Superset container - groups exercises visually */
.superset-group {
    border-left: 4px solid #7a09b3;  /* Purple accent */
    background-color: rgba(122, 9, 179, 0.1);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    position: relative;
}

/* Superset header with label and controls */
.superset-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(122, 9, 179, 0.3);
}

/* "Superset" label */
.superset-label {
    font-weight: 600;
    color: #7a09b3;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.superset-label i {
    font-size: 1rem;
}

/* Superset controls (move up/down, dissolve) */
.superset-controls {
    display: flex;
    gap: 0.25rem;
}

/* Purple badge for superset exercise numbers (2a, 2b, etc.) */
.badge-superset {
    background-color: #7a09b3 !important;
    color: white !important;
}

/* Purple buttons for superset actions */
.btn-superset {
    background-color: #7a09b3;
    border-color: #7a09b3;
    color: white;
}

.btn-superset:hover,
.btn-superset:focus {
    background-color: #6e068e;
    border-color: #6e068e;
    color: white;
}

.btn-outline-superset {
    color: #7a09b3;
    border-color: #7a09b3;
    background-color: transparent;
}

.btn-outline-superset:hover,
.btn-outline-superset:focus {
    background-color: #7a09b3;
    border-color: #7a09b3;
    color: white;
}

/* Exercise item within superset - reduced margin */
.superset-group .exercise-item,
.superset-group .list-group-item {
    margin-bottom: 0.5rem;
    border-radius: 0.375rem !important;
}

.superset-group .exercise-item:last-child,
.superset-group .list-group-item:last-child {
    margin-bottom: 0;
}

/* No rest indicator */
.superset-no-rest {
    font-size: 0.8rem;
    color: #7a09b3;
    font-style: italic;
    text-align: center;
    margin: 0.25rem 0;
}

/* Selection mode styling for creating supersets */
.exercise-selectable {
    cursor: pointer;
    position: relative;
}

.exercise-selectable:hover {
    background-color: rgba(122, 9, 179, 0.15) !important;
}

.exercise-selectable.selected {
    background-color: rgba(122, 9, 179, 0.25) !important;
    border-color: #7a09b3 !important;
}

/* Checkbox for exercise selection */
.exercise-checkbox {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    accent-color: #7a09b3;
}

/* Superset toolbar */
.superset-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: rgba(122, 9, 179, 0.1);
    border-radius: 0.5rem;
    align-items: center;
}

.superset-toolbar-label {
    color: #7a09b3;
    font-weight: 500;
    margin-right: auto;
}

/* Remove from superset button (small, inline) */
.btn-remove-superset {
    color: #7a09b3;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.btn-remove-superset:hover {
    color: #6e068e;
    background-color: rgba(122, 9, 179, 0.1);
}

/* Superset indicator in logging view */
.superset-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    background-color: rgba(122, 9, 179, 0.2);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: #7a09b3;
    margin: 0.25rem 0;
}

.superset-indicator i {
    margin-right: 0.25rem;
}

/* Exercise action dropdown menu */
.exercise-actions .dropdown-menu {
    min-width: 10rem;
}

.exercise-actions .dropdown-item {
    padding: 0.5rem 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exercise-actions .dropdown-item i {
    width: 1.25em;
    text-align: center;
}

/* ===== DRAG AND DROP STYLES ===== */

.drag-handle {
    cursor: grab;
    color: var(--bs-gray-500);
    opacity: 0.45;
    padding: 0 2px;
    touch-action: none;
    user-select: none;
    flex-shrink: 0;
}

.drag-handle:hover {
    opacity: 0.85;
    color: #7a09b3;
}

.drag-handle:active {
    cursor: grabbing;
}

/* Ghost placeholder shown during drag */
.sortable-ghost {
    opacity: 0.35;
    background-color: rgba(122, 9, 179, 0.15) !important;
    border: 2px dashed #7a09b3 !important;
}

/* Element currently being dragged */
.sortable-chosen {
    background-color: rgba(122, 9, 179, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Superset group ghost during drag */
.superset-group.sortable-ghost {
    border-left-color: rgba(122, 9, 179, 0.5) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .superset-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .superset-controls {
        width: 100%;
        justify-content: flex-end;
    }

    .superset-toolbar {
        flex-wrap: wrap;
    }

    .superset-toolbar-label {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}