/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Import Tom Select styles */
@import url("/assets/tom_select-82369229.css");

/* Collapsible utility classes */
.collapsable-container { }
.collapsable-toggle { cursor: pointer; }
.collapsable-content { will-change: height; }

/* Custom Tailwind utilities for ActiveAdmin integration */
@layer components {
  .admin-container {
    max-width: var(--width-7xl);
    margin-left: auto;
    margin-right: auto;
    padding-inline: 1rem;
    
    @media (min-width: 640px) {
      padding-inline: 1.5rem;
    }
    
    @media (min-width: 1024px) {
      padding-inline: 2rem;
    }
  }
  
  .admin-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
  }
  
  .admin-button {
    display: inline-flex;
    align-items: center;
    padding-inline: 1rem;
    padding-block: 0.5rem;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    color: var(--color-white);
    background-color: var(--color-blue-600);
    text-decoration: none;
    transition-property: background-color;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--duration-150);
    
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
    
    &:focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
      box-shadow: 0 0 0 2px var(--color-blue-500);
    }
  }

  /* Link Components (underlined text links) */
  .link-text {
    border-radius: var(--radius-md);
    background-color: transparent;
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    text-decoration: none;
    transition-property: color;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--duration-150);
    
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }
  
  .link-text-light {
    color: var(--color-gray-400);
    text-decoration: none;
    transition-property: color;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--duration-150);
    
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }

  /* Button Components (no underline) */
  .btn-primary {
    border-radius: var(--radius-md);
    background-color: var(--color-blue-600);
    padding-inline: 1rem;
    padding-block: 0.5rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    text-decoration: none;
    transition-property: background-color;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--duration-150);
    
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  
  .btn-primary-lg {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    padding-inline: 2rem;
    padding-block: 1rem;
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition-property: background-color;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--duration-150);
    
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  
  .btn-secondary {
    border-radius: var(--radius-lg);
    border-width: 2px;
    border-style: solid;
    border-color: var(--color-blue-600);
    background-color: transparent;
    padding-inline: 2rem;
    padding-block: 1rem;
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-600);
    text-decoration: none;
    transition-property: background-color, color;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--duration-150);
    
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-600);
        color: var(--color-white);
      }
    }
  }
  
  .btn-secondary-gray {
    border-radius: var(--radius-lg);
    border-width: 2px;
    border-style: solid;
    border-color: var(--color-gray-300);
    background-color: transparent;
    padding-inline: 2rem;
    padding-block: 1rem;
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    text-decoration: none;
    transition-property: background-color;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--duration-150);
    
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }
  
  .btn-danger {
    border-radius: var(--radius-md);
    background-color: var(--color-red-600);
    padding-inline: 1rem;
    padding-block: 0.5rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    text-decoration: none;
    transition-property: background-color;
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--duration-150);
    
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
  }
}