@import 'tailwindcss';
@plugin "daisyui";

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

@theme {
    --font-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif;

    --color-sakura:        #FFB7C5;
    --color-sakura-light:  #FFD6E0;
    --color-sakura-dark:   #FF8FAD;
    --color-cream:         #FFF8F0;
    --color-pastel-yellow: #FDFD96;
    --color-lavender:      #E8D5F5;
    --color-mint:          #B5EAD7;
    --color-peach:         #FFD5B8;
}

/* ── Base ─────────────────────────────────────────────────── */
body {
    background-color: #FFF8F0;
    min-height: 100vh;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #FFB7C5 #FFF8F0;
}

/* ── Sidebar transition ───────────────────────────────────── */
aside {
    will-change: transform;
}

/* ── Cat Card ─────────────────────────────────────────────── */
.cat-card {
    @apply rounded-3xl shadow-sm bg-white border border-pink-100;
}

/* ── Bubbly Button ────────────────────────────────────────── */
.btn-sakura {
    @apply rounded-full text-white font-semibold shadow-sm px-5 py-2
           transition-all duration-150 inline-block cursor-pointer
           text-center;
    background-color: #FFB7C5;
    border: none;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.btn-sakura:hover {
    background-color: #FF8FAD;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 143, 173, 0.4);
}
.btn-sakura:active {
    transform: scale(0.96);
}

/* ── Soft Input ───────────────────────────────────────────── */
.input-soft {
    @apply rounded-2xl border border-pink-200 px-4 py-2
           focus:border-pink-400 focus:outline-none focus:ring-2 focus:ring-pink-200
           w-full bg-white text-sm;
}

/* ── Kanban Column ────────────────────────────────────────── */
.kanban-col {
    @apply rounded-3xl p-4 min-h-48 flex-1;
    min-width: 240px;
}

/* ── Nav Items ────────────────────────────────────────────── */
.nav-item {
    @apply flex items-center gap-3 px-4 py-3 rounded-2xl text-gray-600
           hover:bg-pink-50 hover:text-pink-600 transition-all duration-150 font-medium;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.nav-item.active {
    @apply bg-pink-100 text-pink-600;
}

/* ── Stat Pill ────────────────────────────────────────────── */
.stat-pill {
    @apply rounded-3xl shadow-sm bg-white border border-pink-100 p-4 flex flex-col gap-1;
}

/* ── Badge Sakura ─────────────────────────────────────────── */
.badge-sakura {
    @apply rounded-full text-xs font-bold px-2 py-0.5 text-white;
    background-color: #FFB7C5;
}

/* ── Badge variants ───────────────────────────────────────── */
.badge          { @apply rounded-full text-xs font-semibold px-2.5 py-0.5 inline-block; }
.badge-ghost    { @apply bg-gray-100 text-gray-500; }
.badge-info     { @apply bg-blue-100 text-blue-600; }
.badge-success  { @apply bg-green-100 text-green-600; }
.badge-error    { @apply bg-red-100 text-red-600; }
.badge-warning  { @apply bg-amber-100 text-amber-600; }
.badge-neutral  { @apply bg-gray-100 text-gray-500; }

/* ── Table ────────────────────────────────────────────────── */
.table { @apply w-full border-collapse text-sm; }
.table th { @apply text-left py-3 px-4 text-xs font-bold text-gray-500 uppercase tracking-wide; }
.table td { @apply py-3 px-4 text-gray-700; }

/* ── Animations ───────────────────────────────────────────── */
@keyframes paw-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}
.paw-bounce { animation: paw-bounce 0.4s ease-in-out; }

/* ── Label Soft ───────────────────────────────────────────── */
.label-soft {
    @apply block text-xs font-semibold text-gray-600 mb-1;
}

/* ── Select Soft ──────────────────────────────────────────── */
.select-soft {
    @apply rounded-2xl border border-pink-200 px-4 py-2
           focus:border-pink-400 focus:outline-none focus:ring-2 focus:ring-pink-200
           w-full bg-white text-sm;
}

/* ── Btn Pink (alias for btn-sakura) ─────────────────────── */
.btn-pink {
    @apply rounded-full text-white font-semibold shadow-sm
           transition-all duration-150 inline-block cursor-pointer text-center;
    background-color: #FFB7C5;
    border: none;
    text-decoration: none;
}
.btn-pink:hover { background-color: #FF8FAD; }
.btn-pink:active { transform: scale(0.96); }

/* ── Badge Soft ───────────────────────────────────────────── */
.badge-soft { @apply badge badge-ghost; }

/* ── Cat Card Header ──────────────────────────────────────── */
.cat-card-header {
    @apply flex items-center gap-3 px-4 py-3 border-b border-pink-50;
}
.cat-card-icon {
    @apply text-xl shrink-0;
}

/* ── Mobile touch targets ─────────────────────────────────── */
@media (max-width: 1023px) {
    .nav-item { @apply py-3.5; }
    button, a { min-height: 36px; }
}