/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS 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.
 *


 */
/* Component Styles - Simplified to match reference project */

/* Button Component - DISABLED: Using DaisyUI button classes instead */
/* 
.btn {
  @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200;
}

.btn-primary {
  @apply text-white bg-primary hover:bg-primary/90 focus:ring-primary;
}

.btn-secondary {
  @apply text-white bg-secondary hover:bg-secondary/90 focus:ring-secondary;
}

.btn-danger {
  @apply text-white bg-error hover:bg-error/90 focus:ring-error;
}

.btn-success {
  @apply text-white bg-success hover:bg-success/90 focus:ring-success;
}

.btn-warning {
  @apply text-white bg-warning hover:bg-warning/90 focus:ring-warning;
}

.btn-outline {
  @apply border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary;
}

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

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

.btn:disabled {
  @apply opacity-50 cursor-not-allowed;
}
*/

/* Form Components - DISABLED: Using DaisyUI form classes instead */
/*
.form-group {
  @apply mb-6;
}

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

.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary;
}

.form-input::placeholder {
  @apply text-gray-400;
}

.help-text {
  @apply text-sm text-gray-600 mt-1;
}
*/

/* Form Section Component */
.form-section {
  @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6;
}

.form-section-header {
  @apply mb-6 pb-4 border-b border-gray-200;
}

.form-section-title {
  @apply text-xl font-semibold text-gray-900 mb-2;
}

.form-section-description {
  @apply text-sm text-gray-600;
}

/* Card Component */
.card {
  @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden;
}

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

.card-title {
  @apply text-lg font-semibold text-gray-900 mb-1;
}

.card-subtitle {
  @apply text-sm text-gray-600;
}

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

.card-padding-none .card-body {
  @apply p-0;
}

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

.card-padding-large .card-body {
  @apply p-8;
}

/* Status Badge Component - Using Tailwind classes */
.status-badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

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

.status-badge-warning {
  @apply bg-yellow-100 text-yellow-800;
}

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

.status-badge-info {
  @apply bg-blue-100 text-blue-800;
}

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

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

.status-badge-small {
  @apply px-2 py-0.5 text-xs;
}

.status-badge-large {
  @apply px-3 py-1 text-sm;
}

/* Alert Component - Using Tailwind classes */
.alert {
  @apply flex items-center gap-3 p-4 rounded-lg mb-4 border-l-4;
}

.alert-icon {
  @apply text-lg font-bold;
}

.alert-message {
  @apply flex-1 text-sm;
}

.alert-close {
  @apply bg-transparent border-0 text-xl cursor-pointer p-0 w-6 h-6 flex items-center justify-center opacity-70 hover:opacity-100 transition-opacity duration-200;
}

.alert-success {
  @apply bg-green-50 text-green-800 border-green-400;
}

.alert-error,
.alert-danger {
  @apply bg-red-50 text-red-800 border-red-400;
}

.alert-warning {
  @apply bg-yellow-50 text-yellow-800 border-yellow-400;
}

.alert-info {
  @apply bg-blue-50 text-blue-800 border-blue-400;
}

/* Modal Component - Using Tailwind classes */
.modal-overlay {
  @apply fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50;
}

.modal {
  @apply relative bg-white rounded-lg shadow-xl max-h-90vh overflow-y-auto w-full max-w-lg mx-4;
}

.modal-small {
  @apply max-w-sm;
}

.modal-medium {
  @apply max-w-2xl;
}

.modal-large {
  @apply max-w-4xl;
}

.modal-header {
  @apply flex items-center justify-between p-6 border-b border-gray-200;
}

.modal-title {
  @apply text-xl font-semibold text-gray-900;
}

.modal-close {
  @apply bg-transparent border-0 text-2xl cursor-pointer text-gray-400 hover:text-gray-600 p-0 w-8 h-8 flex items-center justify-center;
}

.modal-body {
  @apply p-6;
}

/* Dropdown Component - Using Tailwind classes */
.dropdown {
  @apply relative inline-block;
}

.dropdown-toggle {
  @apply flex items-center gap-2;
}

.dropdown-arrow {
  @apply text-xs transition-transform duration-200;
}

.dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
  @apply rotate-180;
}

.dropdown-menu {
  @apply absolute z-50 min-w-48 bg-white border border-gray-200 rounded-lg shadow-lg py-2 mt-2;
}

.dropdown-bottom-right {
  @apply right-0;
}

.dropdown-bottom-left {
  @apply left-0;
}

.dropdown-top-right {
  @apply right-0 bottom-full mb-2 mt-0;
}

.dropdown-top-left {
  @apply left-0 bottom-full mb-2 mt-0;
}

.dropdown-item {
  @apply block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 cursor-pointer;
}

.dropdown-divider {
  @apply h-px bg-gray-200 my-2;
}

.dropdown-header {
  @apply px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wide;
}

/* Accordion Component - Using Tailwind classes */
.accordion {
  @apply border border-gray-200 rounded-lg overflow-hidden;
}

.accordion-item {
  @apply border-b border-gray-200 last:border-b-0;
}

.accordion-header {
  @apply flex items-center justify-between p-4 cursor-pointer select-none bg-white hover:bg-gray-50 transition-colors duration-200 font-medium text-gray-700;
}

.accordion-header::-webkit-details-marker {
  @apply hidden;
}

.accordion-title {
  @apply flex-1 text-base;
}

.accordion-icon {
  @apply w-6 h-6 flex items-center justify-center text-lg text-primary font-bold;
}

.accordion-icon-open {
  @apply hidden;
}

details[open] .accordion-icon-closed {
  @apply hidden;
}

details[open] .accordion-icon-open {
  @apply inline;
}

.accordion-content {
  @apply px-4 pb-4 text-gray-600 leading-relaxed;
}

/* Pagination Component - Using Tailwind classes */
.pagination {
  @apply flex justify-center my-8;
}

.pagination-list {
  @apply flex items-center gap-2 list-none m-0 p-0;
}

.pagination-item {
  @apply inline-block;
}

.pagination-link {
  @apply inline-block px-3 py-2 min-w-10 text-center border border-gray-300 rounded-md text-gray-700 no-underline transition-all duration-200 text-sm font-medium hover:bg-gray-50 hover:border-gray-400;
}

.pagination-current {
  @apply bg-primary border-primary text-white cursor-default;
}

.pagination-disabled {
  @apply text-gray-400 cursor-not-allowed opacity-50;
}

.pagination-ellipsis {
  @apply px-3 py-2 text-gray-400;
}

.pagination-prev,
.pagination-next {
  @apply font-semibold;
}

/* Tabs Component - DISABLED: Using DaisyUI tabs classes instead */
/*
.tabs {
  @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden;
}

.tabs-header {
  @apply flex border-b-2 border-gray-200 bg-gray-50 overflow-x-auto;
}

.tab-button {
  @apply flex-1 px-6 py-4 border-0 bg-transparent cursor-pointer text-base font-medium text-gray-600 transition-all duration-200 border-b-3 border-transparent whitespace-nowrap hover:bg-gray-100 hover:text-gray-700;
}

.tab-active {
  @apply text-primary border-primary bg-white;
}

.tabs-content {
  @apply p-6;
}

.tab-panel {
  @apply animate-fade-in;
}

.tabs-pills .tabs-header {
  @apply bg-transparent border-b-0 gap-2 p-2;
}

.tabs-pills .tab-button {
  @apply flex-none rounded-lg border-b-0;
}

.tabs-pills .tab-active {
  @apply bg-primary text-white;
}
*/

/* Table Component - Using Tailwind classes */
.table-container {
  @apply overflow-x-auto rounded-lg shadow-sm border border-gray-200;
}

.table {
  @apply w-full border-collapse bg-white;
}

.table thead {
  @apply bg-gray-50;
}

.table th {
  @apply px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide border-b-2 border-gray-200;
}

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

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

.table-hover tbody tr {
  @apply transition-colors duration-200 hover:bg-gray-50;
}

.table-striped tbody tr:nth-child(even) {
  @apply bg-gray-50;
}

.table-bordered {
  @apply border border-gray-200;
}

.table-bordered th,
.table-bordered td {
  @apply border-r border-gray-200 last:border-r-0;
}

.table-compact th,
.table-compact td {
  @apply px-3 py-2;
}

.table .text-left {
  @apply text-left;
}

.table .text-center {
  @apply text-center;
}

.table .text-right {
  @apply text-right;
}

/* Responsive Design - Using Tailwind responsive classes */
@media (max-width: 768px) {
  .form-section {
    @apply p-5;
  }
  
  .card-body {
    @apply p-4;
  }
  
  .btn {
    @apply px-5 py-2.5 text-sm;
  }
  
  .modal {
    @apply w-11/12 mx-2.5;
  }
  
  .modal-body {
    @apply p-4;
  }
  
  .tabs-header {
    @apply overflow-x-scroll;
  }
  
  .tab-button {
    @apply flex-none min-w-30;
  }
  
  .table-container {
    @apply rounded-lg;
  }
  
  .table th,
  .table td {
    @apply px-2.5 py-3 text-sm;
  }
  
  .pagination-list {
    @apply gap-1;
  }
  
  .pagination-link {
    @apply px-2.5 py-1.5 min-w-9 text-xs;
  }
}

/* Sidebar Navigation - Now handled by shared layout */
/* The sidebar is now implemented in app/views/layouts/shared/_sidebar.html.erb */

/* Stats Card Component - Using Tailwind classes */
.stats-card {
  @apply bg-white rounded-lg p-6 shadow-sm border border-gray-200 transition-all duration-200 hover:shadow-md hover:-translate-y-0.5;
}

.stats-card-icon {
  @apply rounded-lg p-3 flex items-center justify-center;
}

.stats-card-icon-blue {
  @apply bg-blue-500;
}

.stats-card-icon-green {
  @apply bg-green-500;
}

.stats-card-icon-yellow {
  @apply bg-yellow-500;
}

.stats-card-icon-purple {
  @apply bg-purple-500;
}

.stats-card-icon-red {
  @apply bg-red-500;
}

.stats-card-icon-indigo {
  @apply bg-indigo-500;
}

/* Empty State Component - Using Tailwind classes */
.empty-state {
  @apply text-center py-12 px-6;
}

/* Breadcrumb Component - Using Tailwind classes */
.breadcrumb {
  @apply flex items-center text-sm text-gray-600 mb-4;
}

.breadcrumb-link {
  @apply text-gray-600 no-underline transition-colors duration-200 hover:text-gray-900;
}

.breadcrumb-current {
  @apply text-gray-900 font-medium;
}

/* SVG Icon Sizing - Let Tailwind classes control size */
svg {
  @apply inline-block;
}

/* Ensure no element can be larger than viewport */
* {
  @apply box-border;
}

body, html {
  @apply overflow-x-hidden;
}

/* Constrain all images */
img {
  @apply max-w-full h-auto;
}