@import "tailwindcss";
@config "../../tailwind.config.js";

/* NetGescon design tokens and components */
@layer base {
    :root {
        --netgescon-gray-50: #f9fafb;
        --netgescon-gray-100: #f3f4f6;
        --netgescon-gray-200: #e5e7eb;
        --netgescon-gray-600: #4b5563;
        --netgescon-gray-800: #1f2937;
        --netgescon-gray-900: #111827;
        --netgescon-primary: #2563eb;
        /* blue-600 */
        --netgescon-secondary: #64748b;
        /* slate-500 */
        --netgescon-success: #16a34a;
        /* green-600 */
        --netgescon-warning: #f59e0b;
        /* amber-500 */
        --netgescon-danger: #dc2626;
        /* red-600 */
        --netgescon-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.10);
    }
}

@layer components {

    /* Card standard */
    .netgescon-card {
        @apply bg-white rounded-xl border border-gray-200 shadow-sm;
        box-shadow: var(--netgescon-shadow);
    }

    /* Typography helpers */
    .netgescon-title {
        @apply text-slate-900 font-semibold;
    }

    .netgescon-text {
        @apply text-slate-600;
    }

    /* Base button */
    .netgescon-btn {
        @apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2;
    }

    /* Solid variants */
    .netgescon-btn-primary {
        @apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
    }

    .netgescon-btn-secondary {
        @apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-white bg-slate-600 hover:bg-slate-700 focus:ring-slate-500;
    }

    .netgescon-btn-success {
        @apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-white bg-green-600 hover:bg-green-700 focus:ring-green-500;
    }

    .netgescon-btn-warning {
        @apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-white bg-amber-500 hover:bg-amber-600 focus:ring-amber-400;
    }

    .netgescon-btn-danger {
        @apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-white bg-red-600 hover:bg-red-700 focus:ring-red-500;
    }

    /* Outline variants */
    .netgescon-btn-outline-primary {
        @apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-blue-600 border border-blue-600 hover:bg-blue-50 focus:ring-blue-500;
    }

    .netgescon-btn-outline-secondary {
        @apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-slate-700 border border-slate-400 hover:bg-slate-50 focus:ring-slate-500;
    }

    .netgescon-btn-outline-success {
        @apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-green-600 border border-green-600 hover:bg-green-50 focus:ring-green-500;
    }

    .netgescon-btn-outline-warning {
        @apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-amber-600 border border-amber-500 hover:bg-amber-50 focus:ring-amber-400;
    }

    .netgescon-btn-outline-danger {
        @apply inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 text-red-600 border border-red-600 hover:bg-red-50 focus:ring-red-500;
    }

    /* Size modifier */
    .netgescon-btn-sm {
        @apply px-2.5 py-1 text-xs;
    }

    .netgescon-btn-lg {
        @apply px-4 py-2 text-base;
    }

    /* Generic Tab behavior (no Bootstrap dependency) */
    .tab-pane {
        display: none;
    }

    .tab-pane.show.active {
        display: block;
    }
}