@import "tailwindcss";

/*
 * Pandora CRM typography tokens.
 * Keep these semantic classes as the single source of truth for recurrent
 * UI text so desktop and mobile remain visually consistent.
 */
@theme {
    --color-slate-400: oklch(0.54 0.02 256.87);
}

:root {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #17251d;
    background: #f6f7f4;
}

body {
    margin: 0;
    min-width: 320px;
    background: #f6f7f4;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* All form controls use the same readable typography as PandoraDatePicker. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    font-size: 0.875rem;
    line-height: 1.25rem;
}



/* Unified Pandora form-control tokens. */
.ui-search-input {
    min-height: 2.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    background-color: #fff;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    color: #334155;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ui-search-input::placeholder {
    color: var(--color-slate-400);
    opacity: 1;
    font-size: inherit;
    line-height: inherit;
    font-weight: 400;
}

.ui-search-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.10);
}

.ui-select {
    min-height: 2.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    background-color: #fff;
    /* Normalize every Pandora select so it uses the same chevron as the
     * delivery date control instead of each browser's native arrow. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
    padding: 0 2.5rem 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    color: #334155;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ui-select:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.10);
}

.ui-select option {
    font-size: inherit;
    line-height: inherit;
    font-weight: 400;
}

.ui-datepicker {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
}

/* Generic placeholder token for non-search form fields. */
.ui-placeholder::placeholder {
    color: var(--color-slate-400);
    opacity: 1;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
}

@layer components {
    .ui-page-kicker {
        @apply text-xs font-black uppercase tracking-[.2em] text-emerald-700;
    }

    .ui-page-title {
        @apply text-2xl font-bold tracking-tight text-slate-900;
    }

    .ui-crm-page-kicker {
        @apply text-[10px] font-black uppercase tracking-[.18em] text-emerald-700;
    }

    .ui-crm-page-title {
        @apply text-[1.2rem] font-bold tracking-tight text-slate-900 sm:text-2xl;
    }

    .ui-page-subtitle {
        @apply text-sm text-slate-500;
    }

    .ui-section-title {
        @apply text-base font-black text-slate-900;
    }

    .ui-section-subtitle {
        @apply text-sm text-slate-500;
    }

    .ui-field-label {
        @apply text-xs font-black uppercase tracking-wide;
        color: oklch(0.37 0.01 256.9);
    }

    .ui-panel-title {
        @apply text-sm font-black uppercase tracking-wide;
        color: oklch(0.37 0.01 256.9);
    }

    .ui-body {
        @apply text-sm text-slate-500;
    }

    .ui-helper {
        @apply text-xs text-slate-400;
    }
}

/* Keep Leaflet inside the page stacking context so dialogs always render above maps. */
.leaflet-container {
    z-index: 0 !important;
    isolation: isolate;
}

/* Prevent the browser/PWA shell from adding a second horizontal history
 * navigation on top of Pandora's custom edge-swipe gesture. */
html,
body,
#app {
    overscroll-behavior-x: none;
}

/* iOS Safari zooms the page when focusing form controls below 16px.
   Keep desktop density unchanged while making every mobile CRM form stable. */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .ui-search-input,
    .ui-select,
    .ui-placeholder {
        font-size: 16px !important;
    }
}