@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    /* Yarıçap ölçeği: kontroller 10px, yüzeyler 14px, mesaj balonları 16px, hap/rozet tam yuvarlak */
    --radius-ctl: 0.625rem;
    --radius-card: 0.875rem;
    --radius-bubble: 1rem;

    /* Yumuşak, ofsetli gölgeler */
    --shadow-card: 0 1px 2px rgb(15 23 42 / 0.05), 0 4px 16px -6px rgb(15 23 42 / 0.08);
    --shadow-pop: 0 4px 8px rgb(15 23 42 / 0.06), 0 12px 32px -8px rgb(15 23 42 / 0.18);
}

@layer base {
    html {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    [x-cloak] {
        display: none !important;
    }
}

@layer components {
    /* ---------- Butonlar ---------- */
    .btn {
        @apply inline-flex h-9 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-ctl px-3.5 text-sm font-semibold whitespace-nowrap transition-colors duration-150 select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 disabled:pointer-events-none disabled:opacity-50;
    }

    .btn-sm {
        @apply h-8 px-3 text-[13px];
    }

    .btn-primary {
        @apply bg-teal-600 text-white hover:bg-teal-700 active:bg-teal-800;
    }

    .btn-secondary {
        @apply border border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 active:bg-slate-100;
    }

    .btn-ghost {
        @apply text-slate-600 hover:bg-slate-100 hover:text-slate-800 active:bg-slate-200;
    }

    /* ---------- Üst gezinme ---------- */
    .nav-link {
        @apply flex h-9 items-center gap-1.5 rounded-ctl px-2.5 text-sm font-medium text-slate-600 transition-colors duration-150 hover:bg-slate-100 hover:text-slate-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 sm:px-3;
    }

    .nav-link-active {
        @apply bg-teal-50 font-semibold text-teal-700 hover:bg-teal-50 hover:text-teal-700;
    }

    /* ---------- Rozetler ---------- */
    .badge {
        @apply inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] leading-4 font-medium whitespace-nowrap ring-1 ring-inset;
    }

    .badge-teal   { @apply bg-teal-50 text-teal-700 ring-teal-600/15; }
    .badge-amber  { @apply bg-amber-50 text-amber-700 ring-amber-600/20; }
    .badge-green  { @apply bg-green-50 text-green-700 ring-green-600/15; }
    .badge-blue   { @apply bg-blue-50 text-blue-700 ring-blue-600/15; }
    .badge-pink   { @apply bg-pink-50 text-pink-700 ring-pink-600/15; }
    .badge-violet { @apply bg-violet-50 text-violet-700 ring-violet-600/15; }
    .badge-slate  { @apply bg-slate-100 text-slate-600 ring-slate-600/10; }
    .badge-red    { @apply bg-red-50 text-red-700 ring-red-600/15; }

    .badge-dot {
        @apply size-1.5 rounded-full;
    }

    /* Okunmamış mesaj sayacı */
    .badge-count {
        @apply flex size-5 shrink-0 items-center justify-center rounded-full bg-teal-600 text-[10px] font-bold text-white;
    }

    /* ---------- Form kontrolleri ---------- */
    .input {
        @apply h-9 w-full rounded-ctl border border-slate-200 bg-white px-3 text-sm text-slate-800 transition-colors duration-150 placeholder:text-slate-500 hover:border-slate-300 focus:border-teal-600 focus:outline-2 focus:-outline-offset-1 focus:outline-teal-600/20;
    }

    .input-sm {
        @apply h-8 text-[13px];
    }

    .textarea {
        @apply w-full rounded-ctl border border-slate-200 bg-white px-3 py-2 text-sm leading-6 text-slate-800 transition-colors duration-150 placeholder:text-slate-500 hover:border-slate-300 focus:border-teal-600 focus:outline-2 focus:-outline-offset-1 focus:outline-teal-600/20;
    }

    .select {
        @apply h-8 cursor-pointer rounded-ctl border border-slate-200 bg-white pr-7 pl-2.5 text-[13px] text-slate-700 transition-colors duration-150 hover:border-slate-300 focus:border-teal-600 focus:outline-2 focus:-outline-offset-1 focus:outline-teal-600/20;
    }

    /* ---------- Aç/kapat anahtarı ---------- */
    .switch {
        @apply relative h-6 w-11 shrink-0 cursor-pointer rounded-full transition-colors duration-150 before:absolute before:-inset-2 before:content-[''] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600;
    }

    .switch-on  { @apply bg-teal-600 hover:bg-teal-700; }
    .switch-off { @apply bg-slate-300 hover:bg-slate-400; }

    .switch-thumb {
        @apply absolute top-0.5 left-0.5 size-5 rounded-full bg-white shadow-sm transition-transform duration-150;
    }

    /* ---------- Yüzeyler ---------- */
    .card {
        @apply rounded-card border border-slate-200/70 bg-white shadow-card;
    }

    /* ---------- Uyarılar ---------- */
    .alert-error {
        @apply rounded-ctl bg-red-50 px-3 py-2 text-sm text-red-700;
    }

    .alert-success {
        @apply flex items-center gap-2 rounded-ctl border border-green-200 bg-green-50 px-4 py-2.5 text-sm text-green-800;
    }

    /* ---------- Segment (filtre) düğmeleri ---------- */
    .seg {
        @apply inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-full px-3 text-xs font-medium transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 sm:h-7 sm:px-2.5;
    }

    .seg-on {
        @apply bg-slate-800 text-white;
    }

    .seg-off {
        @apply bg-slate-100 text-slate-600 hover:bg-slate-200 hover:text-slate-800;
    }

    /* ---------- Avatar ---------- */
    .avatar {
        @apply flex shrink-0 items-center justify-center rounded-full font-bold text-white;
    }
}