/* Apply Inter font to the entire body */
body {
    font-family: 'Inter', sans-serif;
}

/* Custom scrollbar changes - strictly for containers that might still need it, 
   but main bars container will now wrap */
.bars::-webkit-scrollbar {
    height: 8px;
}

.bars::-webkit-scrollbar-track {
    background: #f0f4f8;
    border-radius: 10px;
}

.bars::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 10px;
}

.bars::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Hide default number input arrows */
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;
    appearance: textfield;
}

/* Selected bar style */
.bar.selected {
    border: 2px solid #3b82f6;
    /* blue-500 */
    background-color: #e0f2fe;
    /* sky-100 */
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.5);
    transform: translateY(-2px);
}

/* Line break element styles */
.line-break {
    flex-basis: 100%;
    height: 24px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: #f1f5f9;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.75rem;
    cursor: grab;
    position: relative;
    transition: all 0.2s;
}

.line-break:hover {
    border-color: #94a3b8;
    background-color: #e2e8f0;
    color: #64748b;
}

.line-break:active {
    cursor: grabbing;
}

.line-break .remove-break {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    color: #ef4444;
    opacity: 0;
    transition: opacity 0.2s;
}

.line-break:hover .remove-break {
    opacity: 1;
}

/* Mobile Menu Styles */
.mobile-menu {
    display: none;
}

.mobile-menu.active {
    display: flex;
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

@media (max-width: 768px) {

    /* Body padding adjustment */
    body {
        padding: 1rem !important;
    }

    /* Main container */
    .max-w-6xl {
        padding: 0;
    }

    /* Song details card */
    .bg-white.rounded-3xl {
        padding: 1rem !important;
        margin-bottom: 1.5rem !important;
        border-radius: 1.5rem !important;
    }

    /* Title adjustments */
    h1 {
        font-size: 1.875rem !important;
        /* 30px */
        margin-bottom: 1.5rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
        /* 24px */
        margin-bottom: 1rem !important;
    }

    /* Section spacing */
    .space-y-6> :not([hidden])~ :not([hidden]) {
        margin-top: 1rem !important;
    }

    /* Section cards */
    #sections>div {
        padding: 1rem !important;
        border-radius: 1.5rem !important;
    }

    /* Section title input */
    .section-title {
        font-size: 1.25rem !important;
        padding: 0.5rem !important;
    }

    /* Section buttons container */
    #sections .flex.items-center.gap-4 {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }

    /* Section action buttons */
    .add-bar,
    .add-break,
    .paste-bars {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
    }

    /* Bars container */
    .bars {
        gap: 0.75rem !important;
        padding: 0.75rem !important;
        min-height: 100px !important;
    }

    /* Individual bar (compás) */
    .bar {
        min-width: 140px !important;
        padding: 0.75rem !important;
        font-size: 0.875rem;
    }

    /* Bar number */
    .bar-number {
        padding: 0.375rem 0.625rem !important;
        font-size: 0.75rem !important;
    }

    /* Time signature select */
    .time-signature {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Chord elements */
    .chord {
        padding: 0.375rem 0.625rem !important;
        font-size: 0.75rem !important;
    }

    .chord-name {
        width: 3rem !important;
        font-size: 0.75rem !important;
    }

    /* Bar lyrics textarea */
    .bar-lyrics {
        font-size: 0.75rem !important;
        padding: 0.375rem !important;
    }

    /* Line break */
    .line-break {
        height: 20px !important;
        font-size: 0.625rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Disable drag cursor on mobile */
    .draggable-item {
        cursor: default !important;
    }

    .draggable-item:active {
        cursor: default !important;
    }

    .line-break {
        cursor: default !important;
    }

    /* Make remove buttons always visible on mobile */
    .remove-bar,
    .remove-chord,
    .remove-break,
    .remove-section {
        opacity: 1 !important;
    }

    /* Bottom toolbar - make it responsive */
    .sticky.bottom-6 {
        bottom: 0 !important;
        left: 0;
        right: 0;
        margin: 0 !important;
        padding: 0.75rem !important;
        background: white;
        border-top: 1px solid #e5e7eb;
    }

    .sticky .bg-white\/90 {
        background: white !important;
        backdrop-filter: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        flex-direction: column;
        gap: 0.5rem !important;
        width: 100%;
    }

    /* Toolbar buttons - make them smaller and wrap */
    .sticky button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
        gap: 0.25rem !important;
        flex: 1;
        min-width: fit-content;
        justify-content: center;
    }

    .sticky button svg {
        height: 1rem !important;
        width: 1rem !important;
    }

    /* Hide button text on very small screens, show only icons */
    @media (max-width: 480px) {
        .sticky button span:not(#selected-count) {
            display: none;
        }

        .sticky button {
            padding: 0.625rem !important;
        }
    }

    /* Grid layout for toolbar buttons */
    .sticky .flex.gap-2 {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem !important;
    }

    /* Modal adjustments */
    #songs-modal .bg-white {
        margin: 1rem !important;
        padding: 1rem !important;
        max-width: calc(100vw - 2rem) !important;
        border-radius: 1.5rem !important;
    }

    #songs-modal h3 {
        font-size: 1.25rem !important;
    }

    #songs-list .bg-gray-50 {
        padding: 0.75rem !important;
        border-radius: 0.75rem !important;
    }

    #songs-list h4 {
        font-size: 1rem !important;
    }

    #songs-list p {
        font-size: 0.75rem !important;
    }
}

/* Tablet adjustments (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    body {
        padding: 2rem !important;
    }

    .sticky .flex.gap-2 {
        flex-wrap: wrap;
        justify-content: center;
    }

    .sticky button {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {

    /* Hide toolbar, add/remove buttons, drag handles */
    .sticky,
    button,
    .add-bar,
    .remove-bar,
    .add-chord,
    .remove-chord,
    .add-break,
    .remove-break,
    .remove-section,
    .paste-bars {
        display: none !important;
    }

    /* Reset body */
    body {
        background: white !important;
        padding: 0 !important;
        color: black !important;
    }

    .bg-white,
    .bg-blue-50,
    .bg-yellow-100 {
        background: transparent !important;
    }

    /* Flatten cards */
    .shadow-xl,
    .shadow-lg,
    .shadow-md,
    .shadow-sm {
        box-shadow: none !important;
    }

    .border,
    .border-gray-200,
    .border-blue-200,
    .border-yellow-300,
    .border-dashed {
        border: none !important;
    }

    /* Bars needs border */
    .bar {
        border: 1px solid #777 !important;
        background-color: transparent !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .chord {
        border: none !important;
        background: transparent !important;
        font-weight: bold;
    }

    /* Inputs as text */
    input,
    textarea,
    select {
        border: none !important;
        background: transparent !important;
        resize: none !important;
        padding: 0 !important;
        box-shadow: none !important;
        color: black !important;
    }

    /* Title sizing */
    #song-title {
        font-size: 20pt;
        font-weight: bold;
    }

    /* Section sizing */
    .section-title {
        font-size: 16pt !important;
        font-weight: bold !important;
        margin-bottom: 5px !important;
    }

    /* Handle line breaks to be invisible but functional */
    .line-break {
        border: none !important;
        background: transparent !important;
        color: transparent !important;
        height: 1px !important;
        margin: 0 !important;
    }

    .line-break span,
    .line-break svg {
        display: none !important;
    }

    /* Main container width */
    .max-w-6xl {
        max-width: 100% !important;
    }

    /* Reduce gaps */
    .gap-6 {
        gap: 1rem !important;
    }

    .space-y-6> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

}