@import "tailwindcss";

@layer components {
    /* --- Badges --- */
    .badge {
        @apply inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset;
    }
    .badge-green { @apply bg-green-50 text-green-700 ring-green-600/20; }
    .badge-gray { @apply bg-gray-50 text-gray-600 ring-gray-500/10; }
    .badge-blue { @apply bg-blue-50 text-blue-700 ring-blue-700/10; }
    .badge-yellow { @apply bg-yellow-50 text-yellow-800 ring-yellow-600/20; }
    .badge-purple { @apply bg-purple-50 text-purple-700 ring-purple-700/10; }
    .badge-red { @apply bg-red-50 text-red-700 ring-red-600/10; }
    .badge-indigo { @apply bg-indigo-50 text-indigo-700 ring-indigo-700/10; }
    .badge-orange { @apply bg-orange-50 text-orange-700 ring-orange-600/20; }

    /* --- Cards --- */
    .card {
        @apply bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl overflow-hidden;
    }
    .card-header {
        @apply border-b border-gray-200 px-4 py-5 sm:px-6 flex items-center justify-between;
    }
    .card-title {
        @apply text-base font-semibold leading-6 text-gray-900;
    }
    .card-body {
        @apply px-4 py-5 sm:p-6;
    }

    /* --- Buttons --- */
    .btn {
        @apply inline-flex justify-center items-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-colors;
    }
    .btn-primary {
        @apply bg-indigo-600 text-white hover:bg-indigo-500 focus-visible:outline-indigo-600;
    }
    .btn-secondary {
        @apply bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
    }
    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600;
    }
    .btn-success {
        @apply bg-green-600 text-white hover:bg-green-500 focus-visible:outline-green-600;
    }
    .btn-sm {
        @apply px-2 py-1 text-xs;
    }
    .btn-lg {
        @apply px-4 py-2.5 text-base;
    }

    /* --- Form Elements --- */
    .form-label {
        @apply block text-sm font-medium leading-6 text-gray-900;
    }
    .form-input {
        @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
    }
    .form-select {
        @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
    }
    .form-textarea {
        @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
    }
    .form-checkbox {
        @apply h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600;
    }
    .form-helper {
        @apply mt-2 text-sm text-gray-500;
    }
    .form-error {
        @apply mt-2 text-sm text-red-600;
    }

    /* --- Tables --- */
    .table-container {
        @apply overflow-hidden shadow ring-1 ring-black/5 sm:rounded-lg;
    }
    .table {
        @apply min-w-full divide-y divide-gray-300;
    }
    .table-header {
        @apply bg-gray-50;
    }
    .table-header th {
        @apply px-3 py-3.5 text-left text-sm font-semibold text-gray-900;
    }
    .table-body {
        @apply divide-y divide-gray-200 bg-white;
    }
    .table-body td {
        @apply whitespace-nowrap px-3 py-4 text-sm text-gray-500;
    }
    .table-body tr:hover {
        @apply bg-gray-50;
    }

    /* --- Layout Utilities --- */
    .layout-container {
        @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
    }
    .page-header {
        @apply md:flex md:items-center md:justify-between mb-8;
    }
    .page-title {
        @apply text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight;
    }
    .page-subtitle {
        @apply mt-1 text-sm text-gray-500;
    }

    /* --- Stat Cards --- */
    .stat-card {
        @apply relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6;
    }
    .stat-card-icon {
        @apply absolute rounded-md p-3;
    }
    .stat-card-label {
        @apply ml-16 truncate text-sm font-medium text-gray-500;
    }
    .stat-card-value {
        @apply ml-16 text-2xl font-semibold text-gray-900;
    }

    /* --- Empty States --- */
    .empty-state {
        @apply text-center py-12;
    }
    .empty-state-icon {
        @apply mx-auto h-12 w-12 text-gray-400;
    }
    .empty-state-title {
        @apply mt-2 text-sm font-semibold text-gray-900;
    }
    .empty-state-description {
        @apply mt-1 text-sm text-gray-500;
    }

    /* --- Tabs --- */
    .tab-link {
        @apply border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium;
    }
    .tab-link-active {
        @apply border-indigo-500 text-indigo-600 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium;
    }

    /* --- Status Badge Mappings --- */
    .status-active { @apply bg-green-50 text-green-700 ring-green-600/20; }
    .status-draft { @apply bg-gray-50 text-gray-600 ring-gray-500/10; }
    .status-forming { @apply bg-blue-50 text-blue-700 ring-blue-700/10; }
    .status-paused { @apply bg-yellow-50 text-yellow-800 ring-yellow-600/20; }
    .status-sold { @apply bg-purple-50 text-purple-700 ring-purple-700/10; }
    .status-dissolved { @apply bg-red-50 text-red-700 ring-red-600/10; }

    /* --- Type Badge Mappings --- */
    .type-holdco { @apply bg-indigo-50 text-indigo-700 ring-indigo-700/10; }
    .type-subsidiary { @apply bg-blue-50 text-blue-700 ring-blue-700/10; }
    .type-partner { @apply bg-purple-50 text-purple-700 ring-purple-700/10; }

    /* --- Priority Badge Mappings --- */
    .priority-urgent { @apply bg-red-50 text-red-700 ring-red-600/10; }
    .priority-high { @apply bg-orange-50 text-orange-700 ring-orange-600/10; }
    .priority-medium { @apply bg-yellow-50 text-yellow-800 ring-yellow-600/20; }
    .priority-low { @apply bg-green-50 text-green-700 ring-green-600/20; }

    /* --- Task Status Badge Mappings --- */
    .task-completed { @apply bg-green-50 text-green-700 ring-green-600/20; }
    .task-in_progress { @apply bg-blue-50 text-blue-700 ring-blue-700/10; }
    .task-pending { @apply bg-yellow-50 text-yellow-800 ring-yellow-600/20; }
    .task-cancelled { @apply bg-gray-50 text-gray-600 ring-gray-500/10; }

    /* --- Task Stat Cards --- */
    .task-stat-card {
        @apply bg-white overflow-hidden rounded-lg shadow sm:p-6 p-4 border-t-4;
    }

    /* --- Description List --- */
    .dl-row {
        @apply px-0 py-3 sm:grid sm:grid-cols-3 sm:gap-4;
    }
    .dl-term {
        @apply text-sm font-medium leading-6 text-gray-900;
    }
    .dl-detail {
        @apply mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0;
    }

    /* --- Document Type Badge Mappings --- */
    .doc-formation { @apply bg-indigo-50 text-indigo-700 ring-indigo-700/10; }
    .doc-tax { @apply bg-green-50 text-green-700 ring-green-600/20; }
    .doc-contract { @apply bg-blue-50 text-blue-700 ring-blue-700/10; }
    .doc-report { @apply bg-purple-50 text-purple-700 ring-purple-700/10; }
    .doc-license { @apply bg-orange-50 text-orange-700 ring-orange-600/20; }
    .doc-other { @apply bg-gray-50 text-gray-600 ring-gray-500/10; }

    /* --- Document Status Badge Mappings --- */
    .doc-status-final { @apply bg-green-50 text-green-700 ring-green-600/20; }
    .doc-status-draft { @apply bg-yellow-50 text-yellow-800 ring-yellow-600/20; }
    .doc-status-archived { @apply bg-gray-50 text-gray-600 ring-gray-500/10; }

    /* --- File Upload Drop Zone --- */
    .file-drop-zone {
        @apply flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10 hover:bg-gray-50 transition-colors cursor-pointer;
    }

    /* --- Secret Type Badge Mappings --- */
    .secret-api_key { @apply bg-blue-50 text-blue-700 ring-blue-700/10; }
    .secret-password { @apply bg-red-50 text-red-700 ring-red-600/10; }
    .secret-certificate { @apply bg-green-50 text-green-700 ring-green-600/20; }
    .secret-webhook_secret { @apply bg-purple-50 text-purple-700 ring-purple-700/10; }
    .secret-other { @apply bg-gray-50 text-gray-600 ring-gray-500/10; }

    /* --- Audit Log Action Badge Mappings --- */
    .audit-create { @apply bg-green-50 text-green-700 ring-green-600/20; }
    .audit-update { @apply bg-blue-50 text-blue-700 ring-blue-700/10; }
    .audit-delete { @apply bg-red-50 text-red-700 ring-red-600/10; }
    .audit-reveal { @apply bg-yellow-50 text-yellow-800 ring-yellow-600/20; }
    .audit-login { @apply bg-purple-50 text-purple-700 ring-purple-700/10; }
    .audit-logout { @apply bg-gray-50 text-gray-600 ring-gray-500/10; }

    /* --- Info Alert Box --- */
    .alert-info {
        @apply rounded-md bg-blue-50 p-4 border-l-4 border-blue-400;
    }
    .alert-info-icon {
        @apply h-5 w-5 text-blue-400;
    }
    .alert-info-text {
        @apply text-sm text-blue-700;
    }

    /* --- Secret Value Display --- */
    .secret-value-box {
        @apply bg-gray-900 rounded-lg p-4;
    }
    .secret-value-masked {
        @apply font-mono text-lg text-gray-400 tracking-widest;
    }

    /* --- Wizard Stepper --- */
    .step-circle-active {
        @apply h-8 w-8 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold text-sm ring-4 ring-indigo-100;
    }
    .step-circle-done {
        @apply h-8 w-8 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold text-sm;
    }
    .step-circle-inactive {
        @apply h-8 w-8 rounded-full bg-white border-2 border-gray-300 text-gray-500 flex items-center justify-center font-bold text-sm;
    }
    .step-line-done {
        @apply w-full h-0.5 bg-indigo-600;
    }
    .step-line-inactive {
        @apply w-full h-0.5 bg-gray-300;
    }

    /* --- Settings Navigation --- */
    .settings-nav-link {
        @apply flex gap-x-3 rounded-md py-2 pl-2 pr-3 text-sm leading-6 font-semibold text-gray-700 hover:text-indigo-600 hover:bg-gray-50;
    }
    .settings-nav-link-active {
        @apply bg-gray-50 text-indigo-600;
    }

    /* --- Auth Form Inputs (Dark Mode) --- */
    .form-input-dark {
        @apply block w-full rounded-md border-0 bg-white/5 py-1.5 text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm sm:leading-6;
    }

    /* --- Auth Buttons --- */
    .btn-white {
        @apply flex w-full justify-center rounded-md bg-white px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white;
    }
    .btn-primary-full {
        @apply flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
    }

    /* --- Wizard Card Footer --- */
    .wizard-footer {
        @apply bg-gray-50 px-4 py-4 sm:px-8 flex justify-between items-center border-t border-gray-200;
    }

    /* --- OTP Input --- */
    .otp-input {
        @apply w-12 h-14 text-center text-xl font-semibold border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500;
    }

    /* --- Lock Screen --- */
    .lock-screen-avatar {
        @apply h-20 w-20 rounded-full ring-4 ring-white/20;
    }
}