@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

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

/* ================= BASE TYPOGRAPHY ================= */
@layer base {
    body {
        font-family: "Plus Jakarta Sans", sans-serif;
        @apply bg-panze-canvas text-panze-slate-dark antialiased;
    }

    h1 {
        @apply text-3xl font-extrabold text-panze-slate-dark;
    }

    h2 {
        @apply text-2xl font-bold text-panze-slate-dark;
    }

    h3 {
        @apply text-xl font-semibold text-panze-slate-dark;
    }

    h4,
    h5,
    h6 {
        @apply font-semibold text-panze-slate-dark;
    }

    p {
        @apply text-sm text-panze-slate-muted;
    }
}

/* ================= UTILITIES ================= */
@layer utilities {
    .panze-glass {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        @apply border border-slate-100;
    }

    .panze-sidebar-shadow {
        box-shadow: 10px 0 30px -15px rgba(124, 58, 237, 0.05);
    }

    .text-slate-muted {
        @apply text-panze-slate-muted;
    }

    .text-slate-dark {
        @apply text-panze-slate-dark;
    }

    .bg-canvas {
        @apply bg-panze-canvas;
    }
}

/* ================= CARD & CONTAINERS ================= */
@layer components {
    .panze-card {
        @apply bg-white border border-slate-50 rounded-panze p-6 shadow-sm shadow-slate-200/20 hover:-translate-y-1 transition-transform duration-300;
    }

    .panze-card-sm {
        @apply bg-white border border-slate-50 rounded-panze p-4 shadow-sm shadow-slate-200/20;
    }

    .card {
        @apply panze-card;
    }

    /* Navigation Items */
    .nav-item {
        @apply flex items-center gap-3 px-4 py-3 text-panze-slate-muted rounded-lg hover:text-panze-purple transition-all duration-200 group;
    }

    .nav-item-active {
        background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
        @apply text-white shadow-md shadow-purple-200/50 rounded-panze;
    }

    .nav-item i {
        @apply text-lg group-hover:scale-110 transition-transform;
    }

    /* Sidebar Navigation */
    .sidebar-link {
        @apply flex items-center gap-3 px-6 py-2.5 rounded-lg text-sm font-medium text-panze-slate-muted hover:bg-panze-canvas hover:text-panze-purple transition-all duration-200;
    }

    .sidebar-link.active {
        background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
        @apply text-white font-semibold;
    }

    .sidebar-link-active {
        background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
        @apply text-white font-semibold;
    }

    .sidebar-link-active:hover,
    .sidebar-link-active:focus-visible,
    .sidebar-link.active:hover,
    .sidebar-link.active:focus-visible {
        @apply text-white;
    }

    .sidebar-link-active:hover i,
    .sidebar-link-active:focus-visible i,
    .sidebar-link.active:hover i,
    .sidebar-link.active:focus-visible i,
    .sidebar-link-active:hover svg,
    .sidebar-link-active:focus-visible svg,
    .sidebar-link.active:hover svg,
    .sidebar-link.active:focus-visible svg {
        color: white;
    }

    .sidebar-link-active:hover,
    .sidebar-link-active:focus-visible,
    .sidebar-link.active:hover,
    .sidebar-link.active:focus-visible {
        background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
    }

    .sidebar-section {
        @apply text-xs uppercase font-bold tracking-wider text-panze-slate-muted px-6 mt-6 mb-3;
    }
}

/* ================= TABLE STYLING ================= */
@layer components {
    .panze-table-container {
        @apply overflow-hidden rounded-panze border border-slate-50;
    }

    .panze-table {
        @apply w-full text-left border-collapse;
    }

    .panze-table thead tr {
        @apply bg-slate-50/50;
    }

    .panze-table thead th {
        @apply py-4 px-4 text-xs font-semibold text-panze-slate-muted uppercase tracking-wider border-b border-slate-50;
    }

    .panze-table tbody td {
        @apply py-4 px-4 text-sm text-panze-slate-dark border-b border-slate-50 font-medium;
    }

    .panze-table tbody tr:hover {
        @apply bg-slate-50/80 transition-colors cursor-default;
    }

    .table {
        @apply panze-table;
    }

    .table th {
        @apply py-4 px-4 text-xs font-semibold text-panze-slate-muted uppercase tracking-wider border-b border-slate-50;
    }

    .table td {
        @apply py-4 px-4 text-sm text-panze-slate-dark border-b border-slate-50 font-medium;
    }
}

/* ================= BADGE STYLING ================= */
@layer components {
    .badge-active {
        @apply bg-green-50 text-green-600 px-3 py-1 rounded-full text-xs font-bold border border-green-200;
    }

    .badge-pending {
        @apply bg-blue-50 text-blue-500 px-3 py-1 rounded-full text-xs font-bold border border-blue-200;
    }

    .badge-expired {
        @apply bg-red-50 text-red-500 px-3 py-1 rounded-full text-xs font-bold border border-red-200;
    }

    .badge-info {
        @apply bg-blue-50 text-blue-600 px-3 py-1 rounded-full text-xs font-bold border border-blue-200;
    }

    .badge-success {
        @apply bg-green-50 text-green-600 px-3 py-1 rounded-full text-xs font-bold border border-green-200;
    }

    .badge-warning {
        @apply bg-yellow-50 text-yellow-600 px-3 py-1 rounded-full text-xs font-bold border border-yellow-200;
    }

    .badge-danger {
        @apply bg-red-50 text-red-600 px-3 py-1 rounded-full text-xs font-bold border border-red-200;
    }
}

/* ================= BUTTON SYSTEM ================= */
@layer components {
    .btn-primary {
        @apply px-4 py-2 bg-panze-purple text-white rounded-btn hover:bg-panze-purple-light transition font-medium shadow-sm hover:shadow-hover;
    }

    .btn-secondary {
        @apply px-4 py-2 bg-panze-canvas text-panze-slate-dark rounded-btn hover:bg-slate-100 border border-slate-100 transition font-medium;
    }

    .btn-danger {
        @apply px-4 py-2 bg-danger text-white rounded-btn hover:bg-red-700 transition shadow-sm hover:shadow-hover;
    }

    .btn-error {
        @apply btn-danger;
    }

    .btn-success {
        @apply px-4 py-2 bg-success text-white rounded-btn hover:bg-green-600 shadow-sm hover:shadow-hover transition font-medium;
    }

    .btn-ghost {
        @apply px-4 py-2 bg-transparent text-panze-purple rounded-btn transition font-medium hover:bg-panze-canvas;
    }

    .btn-delete {
        @apply btn-danger;
    }

    .btn-close,
    [data-modal-close] {
        @apply btn-ghost;
    }
}

/* ================= FORM ELEMENTS ================= */
@layer components {
    .input,
    .select,
    .textarea {
        @apply w-full border border-slate-100 rounded-input px-4 py-3 text-sm focus:ring-2 focus:ring-panze-purple focus:border-panze-purple outline-none bg-white text-panze-slate-dark transition-all duration-200;
    }

    .label {
        @apply text-sm font-semibold text-panze-slate-dark mb-2 block;
    }

    .form-control {
        @apply flex flex-col gap-1.5;
    }
}

/* ================= CHART TOOLTIP ================= */
@layer components {
    .chart-tooltip {
        background: #0f172a;
        @apply text-white p-3 rounded-xl shadow-xl text-xs;
    }

    .chart-tooltip-custom {
        background: #0f172a !important;
        @apply rounded-xl shadow-xl !important border-none !important text-white;
    }
}

/* ================= STAT CARD ================= */
@layer components {
    .stat-card {
        @apply panze-card flex flex-col;
    }

    .stat-icon-container {
        @apply w-12 h-12 flex items-center justify-center rounded-lg font-semibold mb-3;
    }

    .stat-icon-container.purple {
        @apply bg-purple-50 text-panze-purple;
    }

    .stat-icon-container.green {
        @apply bg-green-50 text-green-600;
    }

    .stat-icon-container.blue {
        @apply bg-blue-50 text-blue-600;
    }

    .stat-icon-container.yellow {
        @apply bg-yellow-50 text-yellow-600;
    }

    .stat-value {
        @apply text-3xl font-extrabold text-panze-slate-dark;
    }

    .stat-label {
        @apply text-sm font-semibold text-panze-slate-muted;
    }

    .stat-trend {
        @apply mt-3 flex items-center justify-between text-xs;
    }
}

/* ================= MODAL & OVERLAY ================= */
@layer components {
    .modal-header {
        @apply flex items-center justify-between px-6 py-4 border-b border-slate-100;
    }

    .modal-title {
        @apply text-lg font-bold text-panze-slate-dark;
    }

    .modal-body {
        @apply px-6 py-4 text-sm text-panze-slate-muted;
    }

    .modal-footer {
        @apply flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-100;
    }
}

@layer components {
    .modal,
    .modal.modal-open {
        background-color: #ffffff;
    }

    .modal-open .modal {
        background-color: #ffffff;
    }

    .modal::backdrop {
        background-color: #ffffff;
    }
}

@layer components {
    .select2-container .select2-selection {
        @apply bg-slate-100 text-panze-slate-dark border border-slate-200 rounded-lg;
    }

    .select2-container .select2-selection__rendered {
        @apply text-panze-slate-dark;
    }

    .select2-container--open .select2-dropdown {
        @apply bg-slate-100 text-panze-slate-dark border border-slate-200 shadow-lg;
    }

    .select2-results__option--highlighted,
    .select2-results__option[aria-selected="true"] {
        @apply bg-slate-100 text-panze-slate-dark;
    }

    .select2-container--bootstrap4 .select2-selection__rendered,
    .select2-container--bootstrap4 .select2-results__option {
        color: #0f172a !important;
    }

    .menu,
    .dropdown-content {
        @apply bg-white text-panze-slate-dark;
    }
}

/* ================= SUCCESS & ERROR STATES ================= */
@layer components {
    .alert-success {
        @apply bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm;
    }

    .alert-error {
        @apply bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm;
    }

    .alert-warning {
        @apply bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded-lg text-sm;
    }

    .alert-info {
        @apply bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3 rounded-lg text-sm;
    }
}