/* Tailwind CSS Base, Components, and Utilities */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base Styles - Using Design Tokens */
@layer base {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: var(--font-family-primary);
        font-size: var(--font-size-base);
        line-height: var(--line-height-normal);
        color: var(--color-text-primary);
        background-color: var(--color-bg-primary);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: var(--font-weight-semibold);
        line-height: var(--line-height-tight);
        color: var(--color-text-primary);
    }

    h1 {
        font-size: var(--font-size-3xl);
    }

    h2 {
        font-size: var(--font-size-2xl);
    }

    h3 {
        font-size: var(--font-size-xl);
    }

    h4 {
        font-size: var(--font-size-lg);
    }

    h5 {
        font-size: var(--font-size-base);
    }

    h6 {
        font-size: var(--font-size-sm);
    }

    p {
        margin-bottom: var(--spacing-4);
    }

    a {
        color: var(--color-text-link);
        text-decoration: none;
    }

    a:hover {
        color: var(--color-text-link-hover);
    }
}

/* Blazor Error UI */
#blazor-error-ui {
    background: var(--color-status-warning);
    bottom: 0;
    box-shadow: var(--shadow-md);
    display: none;
    left: 0;
    padding: var(--spacing-3) var(--spacing-5);
    position: fixed;
    width: 100%;
    z-index: var(--z-index-modal);
    color: var(--color-text-inverse);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: var(--spacing-3);
    top: var(--spacing-2);
}

.blazor-error-boundary {
    background: var(--color-status-error);
    padding: var(--spacing-4);
    border-radius: var(--border-radius-md);
    color: var(--color-text-inverse);
    margin: var(--spacing-4) 0;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* -------------------------------------------------------------------------- */
/* Core UI Abstractions using `@apply` and Design Tokens                      */
/* -------------------------------------------------------------------------- */

@layer components {

    /* --- Buttons --- */
    .btn {
        @apply inline-flex items-center justify-center font-medium rounded-xl transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
    }

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

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

    .btn-lg {
        @apply px-6 py-3 text-lg;
    }

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

    .btn-secondary {
        @apply bg-neutral-100 text-neutral-700 hover:bg-neutral-200 focus:ring-neutral-500 border border-neutral-300;
    }

    .btn-danger {
        @apply bg-error-600 text-white hover:bg-error-800 focus:ring-error-500 shadow-sm;
    }

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

    /* --- Cards & Containers --- */
    .card {
        @apply bg-white rounded-lg shadow-sm border border-neutral-200 overflow-hidden;
    }

    .card-header {
        @apply px-4 py-3 sm:px-6 border-b border-neutral-200 bg-neutral-50;
    }

    .card-body {
        @apply px-4 py-5 sm:p-6;
    }

    .card-footer {
        @apply px-4 py-3 sm:px-6 border-t border-neutral-200 bg-neutral-50;
    }

    /* Standard Page Container (Responsive) */
    .page-container {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 w-full;
    }

    /* --- Forms & Inputs --- */
    .form-group {
        @apply mb-4;
    }

    .form-label {
        @apply block text-sm font-medium text-neutral-700 sm:mt-px sm:pt-2 mb-1;
    }

    .form-input {
        @apply block w-full rounded-md border-neutral-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm px-3 py-2 border;
    }

    .form-select {
        @apply block w-full rounded-md border-neutral-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm px-3 py-2 border bg-white;
    }

    .form-checkbox {
        @apply h-4 w-4 rounded border-neutral-300 text-primary-600 focus:ring-primary-500;
    }

    /* --- Badges --- */
    .badge {
        @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
    }

    .badge-primary {
        @apply bg-primary-100 text-primary-800;
    }

    .badge-success {
        @apply bg-success-50 text-success-700;
    }

    .badge-warning {
        @apply bg-warning-50 text-warning-800;
    }

    .badge-error {
        @apply bg-error-50 text-error-800;
    }

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

/* ============================================================
   Button Variants — Standalone (no .btn base class required)
   Single source of truth for all btn-* used across the app.
   Individual .razor.css files should NOT redefine these.
   ============================================================ */

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-validate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--btn-primary-radius, 10px);
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.25;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.btn-primary   { background: var(--color-teal-500, #4A9B8E); color: #fff; }
.btn-success   { background: #16a34a; color: #fff; }
.btn-danger    { background: #dc2626; color: #fff; }
.btn-warning   { background: #d97706; color: #fff; }
.btn-info      { background: #0891b2; color: #fff; }
.btn-validate  { background: #7c3aed; color: #fff; }
.btn-secondary { background: #fff;    color: #374151; border: 2px solid #d1d5db; }

.btn-primary:hover  { background: var(--color-teal-600, #3D8275); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(74,155,142,.35); }
.btn-success:hover  { background: #15803d; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22,163,74,.30); }
.btn-danger:hover   { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220,38,38,.30); }
.btn-warning:hover  { background: #b45309; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(217,119,6,.25); }
.btn-info:hover     { background: #0e7490; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(8,145,178,.25); }
.btn-validate:hover { background: #6d28d9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,58,237,.30); }
.btn-secondary:hover { background: #f3f4f6; border-color: var(--color-teal-500, #4A9B8E); color: var(--color-teal-600, #3D8275); transform: translateY(-1px); }

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-success:disabled,
.btn-danger:disabled,
.btn-warning:disabled,
.btn-info:disabled,
.btn-validate:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* =========================================================
   Loading / Error / Empty State — Global Shared Components
   ========================================================= */

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    gap: 16px;
    color: #6b7280;
    text-align: center;
}

.loading-container p {
    margin: 0;
    font-size: 0.9375rem;
    color: #6b7280;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spinner-spin 1s linear infinite;
    flex-shrink: 0;
}

@keyframes spinner-spin {
    to { transform: rotate(360deg); }
}

/* ── SimpleCreate page animations (global so CSS isolation can't shadow them) ── */
@keyframes sc-spin {
    to { transform: rotate(360deg); }
}
@keyframes sc-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 12px;
    text-align: center;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    margin: 16px 0;
}

.error-container i {
    font-size: 2rem;
    color: #dc2626;
}

.error-container h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #991b1b;
}

.error-container p {
    margin: 0;
    font-size: 0.875rem;
    color: #7f1d1d;
}