@import "tailwindcss";
@source "../../helpers";


@theme {
    --font-display: "Roboto", "sans-serif";
    --font-inter: "Inter", "sans-serif";

    /* Sidebar / navigation */
    --color-sidebar: #656d7f;
    --color-sidebar-dark: #4a5165;
    --color-sidebar-border: #5a6275;

    /* Brand red */
    --color-brand-red: #bf1724;
    --color-brand-red-hover: #a01018;
    --color-brand-red-light: #ffebee;
    --color-brand-red-border: #ffcdd2;

    /* Accent blue */
    --color-accent-blue: #457b9d;
    --color-accent-blue-light: #eaf1f7;
    --color-accent-blue-hover: #f0f7ff;

    /* Surfaces */
    --color-page: #f5f6f8;
    --color-surface-muted: #f9fafb;
    --color-border-default: #e5e7eb;
    --color-border-input: #bfbfc1;
    --color-divider: #f3f4f6;

    /* Text */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #6b7280;
    --color-text-muted: #9ca3af;

    /* Semantic states */
    --color-success: #2e7d32;
    --color-success-bg: #e8f5e9;
    --color-success-border: #a5d6a7;
    --color-warning: #856404;
    --color-warning-bg: #fff3cd;
    --color-warning-border: #ffd878;
    --color-danger-text: #c62828;
    --color-danger-bg: #ffebee;
    --color-danger-border: #ffcdd2;
    --color-info: #1565c0;
    --color-info-bg: #e3f2fd;
    --color-info-border: #90caf9;
    --color-positive: #2e7d32;

    /* Radii */
    --radius-badge: 3px;
    --radius-control: 4px;
    --radius-card: 6px;
    --radius-icon: 8px;

    /* Shadows */
    --shadow-card: 0 2px 2px rgba(0, 0, 0, 0.04);
}

.btn-primary {
    @apply inline-flex items-center justify-center gap-1.5 rounded-control bg-brand-red px-4 py-2 text-[12px] font-semibold text-white shadow-sm hover:bg-brand-red-hover disabled:opacity-40;
}

.btn-secondary {
    @apply inline-flex items-center justify-center gap-1.5 rounded-control border border-border-input bg-white px-4 py-2 text-[12px] font-semibold text-text-primary hover:bg-page disabled:opacity-40;
}

.btn-outline-blue {
    @apply inline-flex items-center justify-center gap-1.5 rounded-control border border-accent-blue px-4 py-2 text-[12px] font-semibold text-accent-blue hover:bg-accent-blue-hover disabled:opacity-40;
}

.btn-ghost {
    @apply inline-flex items-center justify-center gap-1.5 rounded-control px-4 py-2 text-[12px] font-semibold text-text-secondary hover:bg-page disabled:opacity-40;
}

.btn-danger {
    @apply inline-flex items-center justify-center gap-1.5 rounded-control bg-danger-text px-4 py-2 text-[12px] font-semibold text-white hover:opacity-90 disabled:opacity-40;
}

.btn-icon {
    @apply inline-flex items-center justify-center rounded-control border border-border-input bg-white p-2 text-text-secondary hover:bg-page disabled:opacity-40;
}

.input-control {
    @apply w-full rounded-control border border-border-input bg-white px-3.5 py-2 text-[12px] text-text-primary placeholder:text-text-muted focus:border-accent-blue focus:outline-none focus:ring-1 focus:ring-accent-blue;
}

.field-label {
    @apply block text-[11px] font-semibold text-text-primary mb-1.5;
}

.secondary-button {
    @apply flex items-center border-[1.5px] border-[#BF1724] text-[#BF1724] px-4 py-2 rounded font-display w-27 h-12 mr-25 justify-center;
}

/* Drawer form components (Figma "FormDrawer" — registration drawers for HR novelties) */
.drawer-overlay {
    @apply fixed inset-0 z-40 flex justify-end bg-black/40;
}

.drawer-panel {
    @apply relative flex h-full w-full max-w-[580px] flex-col bg-white shadow-2xl;
}

.drawer-section {
    @apply w-full border-b border-divider pb-5;
}

.drawer-section:last-child {
    @apply border-b-0 pb-0;
}

.drawer-section-title {
    @apply mb-3.5 block text-[9px] font-bold uppercase tracking-[0.06em] text-text-muted;
}

.f-label {
    @apply block text-[10px] font-semibold text-text-primary mb-[5px];
}

.f-required {
    @apply text-brand-red;
}

.f-row {
    @apply grid grid-cols-2 gap-3;
}

.f-input {
    @apply w-full h-9 rounded-control border border-border-input bg-white px-[11px] text-[12px] text-text-primary placeholder:text-text-primary/50 focus:border-accent-blue focus:outline-none focus:ring-1 focus:ring-accent-blue;
}

.f-input-readonly {
    @apply bg-surface-muted text-text-muted cursor-not-allowed;
}

.f-hint {
    @apply mt-1 text-[10px] text-text-muted;
}

.f-toggle {
    @apply flex h-[31px] w-full gap-0 overflow-hidden rounded-control border border-border-input p-px;
}

.f-toggle-btn {
    @apply flex-1 flex items-center justify-center rounded-[3px] text-[10px] font-normal text-text-secondary transition-colors;
}

.f-toggle-btn.is-active {
    @apply bg-sidebar font-bold text-white;
}

.f-upload {
    @apply flex w-full items-center gap-2.5 rounded-card border border-dashed border-border-input bg-surface-muted px-[17px] py-[15px] cursor-pointer hover:border-accent-blue;
}

/* Tom Select copies the original <select>'s class (input-control/f-input) onto .ts-wrapper,
   stacking its own border/padding on top of ours inside .ts-control — strip the wrapper's
   box so only .ts-control renders, sized to match the rest of the app's inputs. */
.ts-wrapper.input-control,
.ts-wrapper.f-input {
    @apply border-0 bg-transparent p-0;
}

.ts-wrapper.input-control .ts-control,
.ts-wrapper.f-input .ts-control {
    @apply flex h-9 w-full items-center rounded-control border border-border-input bg-white px-3 py-0 text-[12px] text-text-primary;
}

.ts-wrapper.input-control .ts-control input,
.ts-wrapper.f-input .ts-control input {
    @apply text-[12px];
}

.ts-wrapper.input-control.focus .ts-control,
.ts-wrapper.f-input.focus .ts-control {
    @apply border-accent-blue ring-1 ring-accent-blue;
}