/* Design System - Global Inputs & Forms */

:root {
    /* Base Variables (System Style) */
    --primary-color: var(--brand-orange, #F5A623); 
    --primary-focus-ring: rgba(245, 166, 35, 0.25);
    /* Note: Text, border and bg colors use existing system variables where possible 
       or define fallbacks here if they aren't available globally */
    --input-text-main: #1d1d1f;
    --input-text-muted: #86868b;
    --input-border-color: #d2d2d7;
    --input-bg: #ffffff;
    --input-bg-hover: #fcfcfc;
    --input-border-radius: 10px;
    --input-transition-speed: 0.2s;
}

/* Base Form Control (Apple Style) */
.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--input-text-main);
    background-color: var(--input-bg);
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    transition: border-color var(--input-transition-speed) ease, box-shadow var(--input-transition-speed) ease, background-color var(--input-transition-speed) ease;
    box-sizing: border-box;
    font-family: inherit;
}

.form-control::placeholder {
    color: var(--input-text-muted);
    opacity: 1;
}

.form-control:hover {
    border-color: #a1a1a6;
    background-color: var(--input-bg-hover);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--primary-focus-ring);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f2f2f7;
    color: #aeaeb2;
    cursor: not-allowed;
    border-color: #e5e5ea;
}

/* Select (Dropdown) specific style */
select.form-control {
    cursor: pointer;
    padding-right: 40px !important; /* Space for the arrow */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2386868b%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 16px top 50%;
    background-size: 12px auto;
}

/* Select Textarea specific style */
textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

/* Floating Label Effect (Google Material Style adapted) */
.form-floating {
    position: relative;
    /* margin-bottom should be handled by utility classes like mb-3, but adding a safe default here */
}

.form-floating .form-control {
    padding: 20px 16px 8px 16px;
    height: 56px;
}

.form-floating textarea.form-control {
    height: auto;
    padding-top: 24px;
}

.form-floating select.form-control {
    padding-top: 16px;
    padding-bottom: 0;
}

.form-floating label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 16px;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
    color: var(--input-text-muted);
    margin: 0;
    font-size: 15px;
}

.form-floating textarea.form-control ~ label {
    height: auto;
}

.form-floating .form-control:focus ~ label,
.form-floating .form-control:not(:placeholder-shown) ~ label {
    opacity: .9;
    transform: scale(.8) translateY(-10px) translateX(4px);
    color: #6B7280;
}

.form-floating select.form-control ~ label {
    opacity: .8;
    transform: scale(.8) translateY(-10px) translateX(4px);
}


/* --------------------------------------
   MIGRATED COMPONENTS
-------------------------------------- */

/* --- INÍCIO: Salesbooster Global Tooltip --- */
        .sb-tooltip-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .sb-tooltip-msg {
            visibility: hidden;
            opacity: 0;
            width: max-content;
            max-width: 250px;
            background-color: #2A2A2A;
            color: #fff;
            text-align: left;
            border-radius: 6px;
            padding: 8px 12px;
            position: absolute;
            z-index: 1000;
            bottom: 115%;
            left: 50%;
            transform: translateX(-50%);
            transition: opacity 0.2s ease, visibility 0.2s ease;
            font-size: 13px;
            font-weight: 500;
            line-height: 1.4;
            pointer-events: none;
            white-space: normal;
        }

        .sb-tooltip-wrapper:hover .sb-tooltip-msg {
            visibility: visible;
            opacity: 1;
        }

        /* --- FIM: Salesbooster Global Tooltip --- */
/* --- INÍCIO DO CSS DO SISTEMA DE TOASTS UNIFICADO (COM ANIMAÇÃO DE ENTRADA) --- */
        #toast-container {
            position: fixed;
            top: 85px;
            /* Ajustado para ficar abaixo da navbar */
            right: 20px;
            z-index: 2000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 300px;
            /* Largura fixa para melhor visualização */
            max-width: 90%;
            pointer-events: none;
            /* Permite clicar através do container */
        }

        .toast {
            padding: 12px 16px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            color: #fff;
            font-size: 15px;
            font-weight: 500;
            opacity: 0;
            /* Começa invisível */
            transform: translateX(100%);
            /* Começa fora da tela à direita */
            pointer-events: auto;
            /* Permite interação com o toast */
            transition: opacity 0.4s ease-out, transform 0.4s ease-out;
            /* Define a transição para a entrada */
        }

        .toast.show {
            /* Classe adicionada pelo JS para iniciar a transição de entrada */
            opacity: 1;
            transform: translateX(0);
        }

        .toast.success {
            background-color: #059669;
        }

        /* Verde escuro */
        .toast.error {
            background-color: #DC2626;
        }

        /* Vermelho escuro */
        .toast.warning {
            background-color: #D97706;
        }

        /* Laranja escuro */

        /* Animação de Saída (permanece a mesma) */
        @keyframes fadeOutRight {
            from {
                opacity: 1;
                transform: translateX(0);
            }

            to {
                opacity: 0;
                transform: translateX(100%);
            }
        }

        .toast.fade-out {
            /* Aplica a animação de saída quando a classe é adicionada */
            animation: fadeOutRight 0.4s ease-in forwards;
        }

        /* --- FIM DO CSS DO SISTEMA DE TOASTS UNIFICADO --- */
/* --- CONTROLES DE SEGMENTAÇÃO (SEGMENTED CONTROL) --- */
        .segmented-control {
            display: inline-grid;
            background-color: #F3F4F6;
            padding: 4px;
            border-radius: 999px;
            font-family: 'Manrope', -apple-system, system-ui, sans-serif;
            font-size: 13px;
            font-weight: 600;
            position: relative;
            user-select: none;
        }

        /* Variação para 2 itens */
        .segmented-control.seg-2 {
            grid-template-columns: 1fr 1fr;
        }

        /* Variação para 3 itens */
        .segmented-control.seg-3 {
            grid-template-columns: 1fr 1fr 1fr;
        }

        .strategy-radio {
            display: none;
        }

        .strategy-label {
            text-align: center;
            padding: 6px 14px;
            border-radius: 999px;
            cursor: pointer;
            color: #6B7280;
            transition: color 0.3s ease;
            z-index: 1;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sliding-pill {
            position: absolute;
            top: 4px;
            bottom: 4px;
            left: 4px;
            background-color: white;
            border-radius: 999px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 0;
        }

        /* Controla a largura baseada na variação */
        .seg-2 .sliding-pill {
            width: calc(50% - 4px);
        }
        .seg-3 .sliding-pill {
            width: calc((100% - 8px) / 3);
        }

        /* Movimento para grade de 2 */
        .seg-2 .rad-pos-1:checked ~ .sliding-pill { transform: translateX(0); }
        .seg-2 .rad-pos-2:checked ~ .sliding-pill { transform: translateX(100%); }

        /* Movimento para grade de 3 */
        .seg-3 .rad-pos-1:checked ~ .sliding-pill { transform: translateX(0); }
        .seg-3 .rad-pos-2:checked ~ .sliding-pill { transform: translateX(100%); }
        .seg-3 .rad-pos-3:checked ~ .sliding-pill { transform: translateX(200%); }

        .strategy-radio:checked + .strategy-label {
            color: #111827;
        }

        .strategy-label:hover:not(.strategy-radio:checked + .strategy-label) {
            color: #374151;
        }


        
/* --- SWITCHES / TOGGLES --- */
.switch {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 24px;
        }

        .switch.switch-large {
            width: 50px;
            height: 28px;
        }

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

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

        .switch .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        .switch.switch-large .slider:before {
            height: 20px;
            width: 20px;
        }

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

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

        .switch.switch-green input:checked + .slider {
            background-color: #16A34A; /* Green to turn on */
        }

        .switch.switch-yellow input:checked + .slider {
            background-color: var(--brand-orange); /* System Yellow */
        }

        .switch.switch-red input:checked + .slider {
            background-color: #DC2626; /* Red to turn off */
        }

        .switch input:focus + .slider {
            box-shadow: 0 0 1px var(--brand-orange);
        }

/* --- COPY ICON BUTTON --- */
.copy-icon-button {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
    border-radius: 4px;
    transition: all 0.2s;
}

.copy-icon-button:hover {
    background: #E5E7EB;
    color: #4B5563; /* Equivalent to --brand-orange if you want, but this is default */
}

.copy-icon-button.copied {
    color: #16A34A;
    background: #DCFCE7;
}

.copy-icon-button svg {
    width: 14px;
    height: 14px;
}


/* --- BADGES --- */
.badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-active {
    color: #166534;
    background-color: #DCFCE7;
}

.badge-inactive {
    color: #71717A;
    background-color: #F4F4F5;
}

/* --- CUSTOM DROPDOWNS --- */
.custom-dropdown {
    position: relative;
    width: 100%;
    font-family: inherit;
}

.custom-dropdown .dropdown-selected {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 20px 16px 8px 16px;
    height: 56px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--input-text-main, #1d1d1f);
    background-color: var(--input-bg, #ffffff);
    border: 1px solid var(--input-border-color, #d2d2d7);
    border-radius: var(--input-border-radius, 10px);
    transition: border-color var(--input-transition-speed, 0.2s) ease, box-shadow var(--input-transition-speed, 0.2s) ease;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-dropdown .dropdown-selected:hover {
    border-color: #a1a1a6;
    background-color: var(--input-bg-hover, #fcfcfc);
}

.custom-dropdown.open .dropdown-selected {
    border-color: var(--primary-color, #F5A623);
    box-shadow: 0 0 0 4px var(--primary-focus-ring, rgba(245, 166, 35, 0.25));
    border-radius: var(--input-border-radius, 10px) var(--input-border-radius, 10px) 0 0;
}

.custom-dropdown .dropdown-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--input-bg, #ffffff);
    border: 1px solid var(--primary-color, #F5A623);
    border-top: none;
    border-radius: 0 0 var(--input-border-radius, 10px) var(--input-border-radius, 10px);
    z-index: 1002;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.custom-dropdown .dropdown-options div {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 15px;
    color: var(--input-text-main, #1d1d1f);
}

.custom-dropdown .dropdown-options div:hover {
    background-color: var(--input-bg-hover, #fcfcfc);
}

.custom-dropdown.open .dropdown-options {
    display: block;
}

.custom-dropdown .dropdown-selected::after {
    content: '';
    border: solid var(--input-text-muted, #86868b);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-bottom: 2px;
}

.custom-dropdown.open .dropdown-selected::after {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    margin-top: 4px;
}

/* Use :has selector for browsers that support it, making the wrapper act like form-floating */
.form-group:has(.custom-dropdown) {
    position: relative;
}
.form-group:has(.custom-dropdown) > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 16px;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
    margin: 0;
    font-size: 15px;
    z-index: 2;
    opacity: .8;
    transform: scale(.8) translateY(-10px) translateX(4px);
    color: var(--input-text-muted, #86868b);
}
.form-group:has(.custom-dropdown.open) > label {
    color: #6B7280;
}


/* --- GLOBAL MODALS --- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: white;
    padding: 32px;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-content h2 {
    margin-top: 0;
    font-size: 22px;
    text-align: center;
}

.modal-content p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
    text-align: center;
}

.modal-actions {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.modal-actions button {
    padding: 10px 20px;
}

.modal-actions .button-primary:disabled {
    background-color: #E9ECEF;
    color: #ADB5BD;
    cursor: not-allowed;
    border-color: #E9ECEF;
}

.modal-icon-wrapper {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--brand-orange);
}

/* --- BOTÕES DE FILTRO (PADRÃO UNIVERSAL PARA FILTROS DO SISTEMA) --- */
.btn-filter {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
    line-height: normal;
}

.btn-filter-secondary {
    border: 1px solid var(--card-border-color, #E5E7EB);
    background-color: #FFFFFF;
    color: var(--text-primary, #111827);
}

.btn-filter-secondary:hover {
    background-color: #F3F4F6;
    border-color: #D1D5DB;
}

.btn-filter-primary {
    background-color: var(--brand-orange, #F5A623);
    border: 1px solid var(--brand-orange, #F5A623);
    color: white;
}

.btn-filter-primary:hover {
    filter: brightness(1.1);
    border-color: var(--brand-orange, #F5A623);
}

/* --- PREMIUM DATE RANGE CONTAINER (Apple/Google Minimalist) --- */
.date-range-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--input-bg, #ffffff);
    border: 1px solid var(--input-border-color, #d2d2d7);
    border-radius: var(--input-border-radius, 10px);
    padding: 2px 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    transition: border-color var(--input-transition-speed, 0.2s) ease, box-shadow var(--input-transition-speed, 0.2s) ease;
}

.date-range-container:focus-within {
    border-color: var(--primary-color, #F5A623);
    box-shadow: 0 0 0 4px var(--primary-focus-ring, rgba(245, 166, 35, 0.25));
}

.premium-date-input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 8px 6px;
    font-size: 14px;
    color: var(--input-text-main, #1d1d1f);
    width: auto;
    font-weight: 500;
    font-family: inherit;
    outline: none !important;
    cursor: text;
    accent-color: var(--brand-orange, #F5A623);
}

.premium-date-input::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2386868b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease;
    padding: 4px;
    border-radius: 4px;
}

.premium-date-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    transform: scale(1.05);
    background-color: rgba(0,0,0,0.04);
}

.premium-date-input::-webkit-datetime-edit-fields-wrapper {
    display: flex;
    gap: 1px;
}

/* --- Override de seleção interna (Shadow DOM Chrome/Safari/Edge) --- */
.premium-date-input::-webkit-datetime-edit-month-field:focus,
.premium-date-input::-webkit-datetime-edit-day-field:focus,
.premium-date-input::-webkit-datetime-edit-year-field:focus,
.premium-date-input::-webkit-datetime-edit-hour-field:focus,
.premium-date-input::-webkit-datetime-edit-minute-field:focus,
.premium-date-input::-webkit-datetime-edit-ampm-field:focus {
    background-color: var(--brand-orange, #F5A623) !important;
    color: white !important;
    border-radius: 2px;
}

.premium-date-input::selection {
    background-color: var(--brand-orange, #F5A623) !important;
    color: white !important;
}

/* --- CALENDÁRIO CUSTOMIZADO ZERO (MODAL) --- */
.dp-grid .dp-header-cell {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #6B7280);
    padding-bottom: 8px;
}

.dp-grid .dp-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    color: var(--text-primary, #111827);
    transition: all 0.2s ease;
    user-select: none;
}

.dp-grid .dp-cell:not(.empty):hover {
    background-color: #F3F4F6;
    box-shadow: inset 0 0 0 1px #D1D5DB;
}

.dp-grid .dp-cell.selected {
    background-color: var(--brand-orange, #F5A623);
    color: white;
    font-weight: 600;
    box-shadow: none;
    transform: scale(1.05);
}

.dp-grid .dp-cell.selected.active-editing {
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.4);
}

.dp-grid .dp-cell.in-range {
    background-color: rgba(245, 166, 35, 0.15);
    color: var(--text-primary);
    border-radius: 4px;
}

.dp-grid .dp-cell.empty {
    cursor: default;
}