/*
 * 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.
 */

/* Cesta ERP theme - orange primary */
:root {
  --color-primary: #FF8000;
  --color-primary-hover: #E67300;
  --color-primary-light: #FF9933;
  --color-gray-50: #F9FAFB;
  --color-gray-300: #D1D5DB;
  --color-gray-700: #374151;
  --color-white: #FFFFFF;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Import Inter font */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* Import autoComplete.js styles */
@import url("/assets/autocomplete-1d023016.css");

/* Import Trix editor styles */
@import url("https://cdn.jsdelivr.net/npm/trix@2.0.0/dist/trix.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-primary, #FF8000);
    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-primary-hover, #E67300);
      }
    }
    
    &:focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
      box-shadow: 0 0 0 2px var(--color-primary-light, #FF9933);
    }
  }

  /* 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-primary, #FF8000);
      }
    }
  }
  
  .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-primary, #FF8000);
    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-primary-hover, #E67300);
      }
    }
  }
  
  .btn-primary-lg {
    border-radius: var(--radius-lg);
    background-color: var(--color-primary, #FF8000);
    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-primary-hover, #E67300);
      }
    }
  }
  
  .btn-secondary {
    border-radius: var(--radius-lg);
    border-width: 2px;
    border-style: solid;
    border-color: var(--color-primary, #FF8000);
    background-color: transparent;
    padding-inline: 2rem;
    padding-block: 1rem;
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary, #FF8000);
    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-primary, #FF8000);
        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);
      }
    }
  }
}