/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* =========================================
   Global Fonts & Typography
   ========================================= */
body {
    font-family: 'Outfit', sans-serif;
}

.font-numbers {
    font-family: 'Roboto', sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* =========================================
   Layout & Utility Overrides
   ========================================= */
/* Safe area for bottom navbar (prevents content cutoff) */
.main-content-safe-area {
    padding-bottom: 150px !important;
}

/* =========================================
   Tom Select Custom Styling (Input Fields)
   ========================================= */
/* 1. Wrapper: PURE CONTAINER - NO STYLING */
/* This fixes the "Double Padding" issue where Tailwind's p-3 stacks with TomSelect's padding */
.ts-wrapper.single.input-group-text,
.ts-wrapper.single,
.ts-wrapper {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: auto !important;
}

/* 2. Control: THE ACTUAL INPUT LOOK */
/* This element mimics the standard input field (e.g. date inputs) */
.ts-wrapper .ts-control {
    display: flex;
    align-items: center;
    min-height: 53px;
    /* Exact match to neighboring input */
    padding: 0.75rem 1rem !important;
    /* py-3 px-4 */

    background-color: white !important;
    border: 1px solid rgb(209 213 219) !important;
    /* border-gray-300 */
    border-radius: 0.5rem !important;
    /* rounded-lg */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    /* shadow-sm */

    font-size: 1rem;
    line-height: 1.5rem;
    transition: all 0.2s;
}

/* Focus Ring simulation */
.ts-wrapper.focus .ts-control {
    border-color: rgb(79 70 229) !important;
    /* indigo-500 */
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
    /* ring-indigo-500 */
    outline: none;
}

/* 3. Input inside Control: INVISIBLE TEXT CURSOR */
.ts-wrapper .ts-control>input {
    font-size: 1rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* Placeholder text color fix */
.ts-wrapper .ts-control .item {
    color: #111827;
    /* text-gray-900 */
}

.ts-wrapper .ts-control input::placeholder {
    color: #6b7280;
    /* text-gray-500 */
}

/* 4. Dropdown: Style to match */
.ts-dropdown {
    border-radius: 0.5rem;
    border-color: rgb(209 213 219);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    margin-top: 4px;
    left: 0;
    right: 0;
    width: 100%;
}

.ts-dropdown .option {
    padding: 0.75rem 1rem;
}

.ts-dropdown .option.active {
    background-color: rgb(59 130 246);
    color: white;
}

/* =========================================
   Invoices: Auto-Numbering (CSS Counters)
   ========================================= */
.invoice-items-container {
    counter-reset: item-counter;
}

.nested-form-wrapper {
    counter-increment: item-counter;
}

.product-label::after {
    content: " #" counter(item-counter);
    color: #2563EB;
    /* blue-600 */
    font-weight: 700;
    margin-left: 2px;
}

/* =========================================
   Settings: Custom Toggle Switches
   ========================================= */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d1d5db;
    transition: 0.3s;
    border-radius: 28px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked+.toggle-slider {
    background-color: #2563eb;
}

.toggle-switch input:checked+.toggle-slider:before {
    transform: translateX(24px);
}

/* =========================================
   Table Styles (Fix for missing borders)
   ========================================= */
.invoice-table-th {
    border-top: 1px solid #9ca3af !important;
    border-bottom: 1px solid #9ca3af !important;
}

/* =========================================
   Print Styles
   ========================================= */
.print-only {
    display: none !important;
}

@media print {
    .print-only {
        display: flex !important;
    }

    /* Compact print layout for A4 */
    body {
        font-size: 13px !important;
    }

    table {
        font-size: 13px !important;
    }

    th,
    td {
        padding: 3px 0 !important;
    }

    .text-2xl {
        font-size: 20px !important;
    }

    .text-xl {
        font-size: 16px !important;
    }

    .text-lg {
        font-size: 15px !important;
    }

    .text-base {
        font-size: 13px !important;
    }

    .text-sm {
        font-size: 12px !important;
    }

    .text-xs {
        font-size: 11px !important;
    }

    /* Fix margin/padding alignment */
    .w-64 {
        width: auto !important;
    }
}