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


@layer components {

    /* Pagination styles */
    .pagination {
        @apply flex items-center justify-center space-x-1 my-8;
    }

    .pagination .page {
        @apply relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50;
    }

    .pagination .page.current {
        @apply z-10 bg-slate-100 border-slate-500 text-slate-600;
    }

    .pagination .page a {
        @apply block w-full h-full;
    }

    .pagination .prev, .pagination .next {
        @apply relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
    }

    .pagination .first, .pagination .last {
        @apply relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
    }

    .pagination .gap {
        @apply relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700;
    }

    .pagination .disabled {
        @apply opacity-50 cursor-not-allowed bg-gray-100;
    }

    /* Form controls */
    .form-control {
        @apply block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full;
    }

    .form-control-select {
        @apply block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full;
    }

    .form-focus {
        @apply focus:ring-gray-500 focus:border-gray-500;
    }

    .label {
        @apply block text-gray-700 text-sm font-bold mb-2;
    }

    .field {
        @apply mb-4;
    }

    /* Links */
    a {
        @apply underline hover:no-underline;
    }

    .link {
        @apply underline hover:no-underline;
    }

    .link-text {
        @apply text-gray-600 hover:text-gray-800;
    }

    .link-text.link-blue {
        @apply text-blue-600 hover:text-blue-800;
    }

    .nav-link {
        @apply flex items-center gap-x-3 px-3 py-1 rounded-md hover:bg-gray-100 text-gray-700 no-underline;
    }

    .nav-link.cursor-pointer {
        @apply select-none;
    }

    .nav-link svg {
        @apply flex-shrink-0;
    }

    /* Tables */
    table.table {
        @apply border-collapse w-full bg-white shadow-sm rounded-lg overflow-hidden;
    }

    table.table th {
        @apply bg-gray-50 text-left text-sm font-medium text-gray-500 py-3 px-4 border-b border-gray-200;
    }

    table.table td {
        @apply text-sm text-gray-900 py-3 px-4 border-b border-gray-200;
    }

    table.table tbody tr:hover {
        @apply bg-gray-50;
    }

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

    table.table th a {
        @apply text-gray-500 hover:text-gray-900 no-underline;
    }

    table.table th a:hover svg {
        @apply text-gray-900;
    }

    /* Buttons */
    .button {
        @apply inline-block px-4 py-2 rounded no-underline;
    }

    .button.button-outline {
        @apply bg-white border border-gray-300 text-gray-700 shadow;
    }

    .button.button-danger {
        @apply bg-red-500 text-white;
    }

    .button.button-primary {
        @apply bg-gray-50 border border-gray-300 text-gray-500 shadow;
    }

    .button.button-outline-red {
        @apply bg-white border border-red-500 text-red-500 shadow;
    }

    .button.button-green {
        @apply bg-green-500 text-white;
    }

    .button.button-outline-green {
        @apply bg-white border border-green-500 text-green-500 shadow;
    }

    .button.button-blue {
        @apply bg-gray-500 text-white border border-gray-300 shadow;
    }

    .button.button-outline-blue {
        @apply bg-white border border-gray-500 text-gray-500 shadow;
    }

    .button.button-red {
        @apply bg-red-500 text-white;
    }

    .button.button-secondary {
        @apply bg-gray-200 text-gray-700;
    }

    .button.button-outline-secondary {
        @apply bg-white border border-gray-300 text-gray-700 shadow;
    }

    .button.button-light {
        @apply bg-gray-100 text-gray-700;
    }

    .button.button-small {
        @apply text-sm px-2 py-1;
    }

    /* Tabs */
    .tab {
        @apply whitespace-nowrap pb-2 text-xs font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 no-underline
    }

    /* Cards */
    .card {
        @apply bg-white rounded-lg shadow overflow-hidden;
    }

    .card-header {
        @apply border-b border-gray-200 px-4 py-3;
    }

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

    .card-footer {
        @apply border-t border-gray-200 px-4 py-3 bg-gray-50;
    }

    /* Badges */
    .badge {
        @apply px-2 py-1 text-xs rounded-full font-medium;
    }

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

    .badge-danger {
        @apply bg-orange-100 text-gray-800
    }

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

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

    /* Search */
    .search-container {
        @apply flex-1 relative;
    }
    
    .search-field {
        @apply rounded-lg w-full pl-10 pr-4 py-2 border border-gray-300 focus:ring-2 focus:ring-gray-500;
    }
    
    .search-icon-container {
        @apply absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none;
    }

    /* Section Headers */
    .section-title {
        @apply text-xl font-semibold mb-4;
    }

    /* Compact Details Tables */
    .details-section {
        @apply mb-4;
    }

    .details-header {
        @apply flex items-center justify-between mb-3;
    }

    .details-title {
        @apply text-sm font-medium text-gray-900;
    }

    .details-link {
        @apply text-gray-900 underline hover:text-gray-700 text-sm;
    }

    .details-table {
        @apply w-full text-sm;
    }

    .details-table tbody tr {
        @apply hover:bg-gray-50;
    }

    .details-table td {
        @apply py-1;
    }

    .details-table .label-cell {
        @apply pr-4 text-gray-500 font-medium;
    }

    .details-table .value-cell {
        @apply text-gray-900;
    }

    .details-empty {
        @apply text-gray-500 text-sm py-2;
    }

    /* No hover variant for main details */
    .details-table.no-hover tbody tr {
        @apply hover:bg-transparent;
    }
}
/* User Manual specific styles */

.user-manual-content img {
  max-width: 100%;
  border-radius: 0.375rem;
  margin: 1.5rem 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.user-manual-content h1, 
.user-manual-content h2, 
.user-manual-content h3, 
.user-manual-content h4 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 1.25;
}

.user-manual-content h1 {
  font-size: 2rem;
}

.user-manual-content h2 {
  font-size: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

.user-manual-content h3 {
  font-size: 1.25rem;
}

.user-manual-content p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.user-manual-content ul, 
.user-manual-content ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
}

.user-manual-content ul li {
  list-style-type: disc;
  margin-bottom: 0.5rem;
}

.user-manual-content ol li {
  list-style-type: decimal;
  margin-bottom: 0.5rem;
}

.user-manual-content code {
  background-color: #f3f4f6;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: monospace;
}

.user-manual-content pre {
  background-color: #f3f4f6;
  padding: 1rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.user-manual-content blockquote {
  border-left: 4px solid #e5e7eb;
  padding-left: 1rem;
  font-style: italic;
  margin: 1.5rem 0;
  color: #6b7280;
}

.user-manual-content a {
  color: #2563eb;
  text-decoration: underline;
}

.user-manual-content a:hover {
  color: #1e40af;
}

.user-manual-content table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
}

.user-manual-content table th,
.user-manual-content table td {
  padding: 0.5rem 1rem;
  border: 1px solid #e5e7eb;
}

.user-manual-content table th {
  background-color: #f9fafb;
  font-weight: 600;
}

.user-manual-content table tr:nth-child(even) {
  background-color: #f9fafb;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
[x-cloak] { display: none !important; }

/* Custom styles for button_to elements styled as links */
.button-link {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.button-link:hover {
  text-decoration: underline !important;
}