/* ─── POS Apotek — Design System ─────────────────────────────────────────────
   Philosophy: Minimal, purposeful, fast. No decoration for decoration's sake.
   ─────────────────────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ─── CSS Custom Properties ─────────────────────────────────────────────────── */
@layer base {
    :root {
        --sidebar-w: 248px;

        /* Brand */
        --brand: 79 70 229;
        /* indigo-600 */
        --brand-hover: 67 56 202;
        /* indigo-700 */
        --brand-light: 238 242 255;
        /* indigo-50  */

        /* Semantic surface */
        --surface: 255 255 255;
        --surface-2: 248 250 252;
        /* slate-50 */
        --surface-3: 241 245 249;
        /* slate-100 */

        /* Text */
        --text-1: 15 23 42;
        /* slate-900 */
        --text-2: 51 65 85;
        /* slate-700 */
        --text-3: 100 116 139;
        /* slate-500 */
        --text-4: 148 163 184;
        /* slate-400 */

        /* Border */
        --border: 226 232 240;
        /* slate-200 */
        --border-s: 241 245 249;
        /* slate-100 */

        /* Feedback */
        --success: 5 150 105;
        --warning: 217 119 6;
        --danger: 225 29 72;
        --info: 8 145 178;

        /* Motion */
        --ease: cubic-bezier(0.4, 0, 0.2, 1);
        --dur-1: 120ms;
        --dur-2: 200ms;
        --dur-3: 300ms;
    }

    * {
        box-sizing: border-box;
    }

    html {
        font-family:
            "Inter",
            system-ui,
            -apple-system,
            sans-serif;
        font-feature-settings: "cv02", "cv03", "cv04", "cv11";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        scroll-behavior: smooth;
    }

    body {
        @apply bg-slate-50 text-slate-900;
    }

    /* Minimal scrollbar */
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        @apply bg-slate-300 rounded-full;
    }

    ::-webkit-scrollbar-thumb:hover {
        @apply bg-slate-400;
    }

    /* Better focus */
    :focus-visible {
        outline: 2px solid rgb(var(--brand));
        outline-offset: 2px;
        border-radius: 4px;
    }
}

/* ─── Component Layer ────────────────────────────────────────────────────────── */
@layer components {
    /* ── Cards ── */
    .card {
        @apply bg-white border border-slate-200/70 rounded-xl;
    }

    .card-body {
        @apply p-6;
    }

    /* Stat card */
    .stat-card {
        @apply card p-5 flex items-start gap-4;
    }

    .stat-icon {
        @apply w-11 h-11 rounded-lg flex items-center justify-center flex-shrink-0;
    }

    /* ── Buttons ── */
    .btn {
        @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-sm leading-none transition-all duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed select-none whitespace-nowrap;
    }

    .btn-primary {
        @apply btn bg-indigo-600 text-white hover:bg-indigo-700 active:bg-indigo-800 focus-visible:ring-indigo-500 shadow-sm shadow-indigo-200;
    }

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

    .btn-danger {
        @apply btn bg-red-600 text-white hover:bg-red-700 active:bg-red-800 focus-visible:ring-red-500 shadow-sm shadow-red-200;
    }

    .btn-success {
        @apply btn bg-emerald-600 text-white hover:bg-emerald-700 active:bg-emerald-800 focus-visible:ring-emerald-500 shadow-sm shadow-emerald-200;
    }

    .btn-ghost {
        @apply btn bg-transparent text-slate-600 hover:bg-slate-100 hover:text-slate-800 focus-visible:ring-slate-300;
    }

    .btn-sm {
        @apply px-3 py-1.5 text-xs rounded-md;
    }

    .btn-lg {
        @apply px-5 py-2.5 text-base rounded-xl;
    }

    .btn-icon {
        @apply btn p-2 rounded-lg aspect-square;
    }

    /* ── Form Elements ── */
    .form-input {
        @apply w-full px-3.5 py-2.5 rounded-lg border border-slate-200 bg-white text-sm text-slate-900 placeholder-slate-400 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 focus:border-indigo-500 disabled:bg-slate-50 disabled:text-slate-400 disabled:cursor-not-allowed;
    }

    .form-label {
        @apply block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5;
    }

    .form-select {
        @apply form-input appearance-none cursor-pointer pr-9;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-size: 1.25rem;
        background-repeat: no-repeat;
    }

    .form-error {
        @apply text-red-500 text-xs mt-1 font-medium;
    }

    .form-hint {
        @apply text-slate-400 text-xs mt-1.5;
    }

    /* ── Table ── */
    .table-wrapper {
        @apply overflow-x-auto;
    }

    .table {
        @apply w-full text-sm border-separate border-spacing-0;
    }

    .table thead tr {
        @apply border-b border-slate-100;
    }

    .table th {
        @apply px-5 py-3 text-left text-[11px] font-semibold text-slate-400 uppercase tracking-widest bg-slate-50/80 whitespace-nowrap;
    }

    .table th:first-child {
        @apply rounded-tl-none;
    }

    .table td {
        @apply px-5 py-3.5 text-slate-700 border-b border-slate-100/80;
    }

    .table tbody tr {
        @apply transition-colors duration-100;
    }

    .table tbody tr:hover td {
        @apply bg-slate-50/60;
    }

    .table tbody tr:last-child td {
        @apply border-b-0;
    }

    /* ── Badges ── */
    .badge {
        @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-semibold tracking-wide;
    }

    .badge-primary {
        @apply badge bg-indigo-50 text-indigo-700 ring-1 ring-indigo-100;
    }

    .badge-success {
        @apply badge bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100;
    }

    .badge-danger {
        @apply badge bg-red-50 text-red-700 ring-1 ring-red-100;
    }

    .badge-warning {
        @apply badge bg-amber-50 text-amber-700 ring-1 ring-amber-100;
    }

    .badge-neutral {
        @apply badge bg-slate-100 text-slate-600;
    }

    /* ── Sidebar nav links ── */
    .sidebar-link {
        @apply flex items-center gap-2.5 px-3 py-2.5 rounded-lg text-[13px] font-medium leading-none text-slate-400 transition-all duration-150 hover:text-white hover:bg-white/10;
    }

    .sidebar-link.active {
        @apply bg-white/[0.12] text-white;
    }

    .sidebar-link .sidebar-icon {
        @apply w-[18px] h-[18px] flex-shrink-0 opacity-70 transition-opacity duration-150;
    }

    .sidebar-link:hover .sidebar-icon,
    .sidebar-link.active .sidebar-icon {
        @apply opacity-100;
    }

    /* ── Page header ── */
    .page-header {
        @apply flex items-start sm:items-center justify-between gap-4 mb-6;
    }

    .page-title {
        @apply text-xl font-semibold text-slate-800 leading-tight;
    }

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

    /* ── Empty state ── */
    .empty-state {
        @apply flex flex-col items-center justify-center py-16 text-center gap-3;
    }

    .empty-state-icon {
        @apply w-14 h-14 rounded-xl bg-slate-100 flex items-center justify-center text-slate-300;
    }

    /* ── Alerts ── */
    .alert {
        @apply flex items-start gap-3 px-4 py-3 rounded-lg text-sm border;
    }

    .alert-warning {
        @apply alert bg-amber-50 border-amber-200 text-amber-800;
    }

    .alert-error {
        @apply alert bg-red-50 border-red-200 text-red-700;
    }

    .alert-success {
        @apply alert bg-emerald-50 border-emerald-200 text-emerald-800;
    }

    .alert-info {
        @apply alert bg-blue-50 border-blue-200 text-blue-800;
    }

    /* ── Section separator ── */
    .section-label {
        @apply text-[10px] font-semibold text-slate-400 uppercase tracking-widest px-3 mb-1 mt-4;
    }
}

/* ─── Utility Animations ─────────────────────────────────────────────────────── */
@layer utilities {
    /* Subtle entrance */
    @keyframes fade-up {
        from {
            opacity: 0;
            transform: translateY(8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-up {
        animation: fade-up 220ms var(--ease) both;
    }

    /* Modal overlay */
    @keyframes backdrop-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .animate-backdrop {
        animation: backdrop-in 180ms var(--ease) both;
    }

    /* Count up */
    @keyframes count-up {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-count {
        animation: count-up 150ms var(--ease) both;
    }

    /* Pulse dot */
    @keyframes pulse-dot {
        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: 0.6;
            transform: scale(0.85);
        }
    }

    .animate-pulse-dot {
        animation: pulse-dot 1.6s var(--ease) infinite;
    }

    /* Subtle pulse for buttons */
    @keyframes pulse-subtle {
        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.8;
            transform: scale(1.03);
        }
    }

    .pulse-subtle {
        animation: pulse-subtle 2.5s var(--ease) infinite;
    }
}