/*
 * Admin Layout Styles
 * 
 * These styles complement Tailwind CSS for admin-specific UI elements
 * that are difficult to achieve with utility classes alone.
 */

/* ============================================
   Typography
   ============================================ */
.font-heading {
  font-family: 'Lexend', sans-serif;
}

.font-body {
  font-family: 'Rubik', sans-serif;
}

/* ============================================
   Sidebar Navigation
   ============================================ */
.sidebar-link.active {
  background-color: rgba(255, 127, 0, 0.1);
  border-right: 3px solid #FF7F00;
  color: #FF7F00;
}

.sidebar-link.active svg {
  color: #FF7F00;
}

/* ============================================
   Primary Color Utilities
   ============================================ */
.text-primary {
  color: #FF7F00;
}

.bg-primary {
  background-color: #FF7F00;
}

.bg-primary:hover {
  background-color: #E67300;
}

.border-primary {
  border-color: #FF7F00;
}

.ring-primary {
  --tw-ring-color: #FF7F00;
}

/* ============================================
   Form Styles
   ============================================ */
.form-input {
  @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent;
}

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

.form-error {
  @apply text-sm text-red-600 mt-1;
}

/* ============================================
   Button Styles
   ============================================ */
.btn {
  @apply inline-flex items-center justify-center px-4 py-2 border rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply bg-orange-500 text-white border-transparent hover:bg-orange-600 focus:ring-orange-500;
}

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

.btn-danger {
  @apply bg-red-600 text-white border-transparent hover:bg-red-700 focus:ring-red-500;
}

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

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

/* ============================================
   Table Styles
   ============================================ */
.table-container {
  @apply overflow-x-auto bg-white rounded-xl shadow-sm border border-gray-100;
}

.table-container table {
  @apply min-w-full divide-y divide-gray-200;
}

.table-container th {
  @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table-container td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

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

/* ============================================
   Card Styles
   ============================================ */
.card {
  @apply bg-white rounded-xl shadow-sm border border-gray-100 p-6;
}

.card-header {
  @apply flex items-center justify-between pb-4 border-b border-gray-100 mb-4;
}

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

/* ============================================
   Badge Styles
   ============================================ */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

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

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

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

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

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

.badge-primary {
  @apply bg-orange-100 text-orange-800;
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
  /* Hide sidebar, header and actions */
  aside,
  header,
  .no-print,
  button,
  a[href] {
    display: none !important;
  }

  /* Show print-friendly links */
  a[href].print-visible {
    display: inline !important;
  }

  /* Remove layout constraints */
  body {
    background: white !important;
  }

  .flex.h-screen.overflow-hidden {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  main {
    overflow: visible !important;
    height: auto !important;
    padding: 0 !important;
  }

  /* Grid: stack everything in a single column */
  .grid {
    display: block !important;
  }

  .grid > * {
    margin-bottom: 1.5rem;
  }

  /* Cards: avoid page breaks inside */
  .bg-white {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #e5e7eb !important;
  }

  /* Ensure text is readable */
  * {
    color: black !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Keep badge colors */
  .bg-green-100, .bg-yellow-100, .bg-orange-100, .bg-gray-100 {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ============================================
   Trix Editor Styles
   ============================================ */
trix-editor {
  min-height: 400px;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 1rem;
}

trix-editor:focus {
  outline: none;
  border-color: #FF7F00;
  box-shadow: 0 0 0 2px rgba(255, 127, 0, 0.2);
}

trix-toolbar {
  background-color: #f9fafb;
  border: 1px solid #d1d5db;
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.5rem;
}

trix-toolbar + trix-editor {
  border-radius: 0 0 0.5rem 0.5rem;
}

/* Trix content styles (editor + display) */
trix-editor h1,
.trix-content h1,
.rich-text-content h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: #111827;
}

trix-editor h2,
.trix-content h2,
.rich-text-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

trix-editor h3,
.trix-content h3,
.rich-text-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: #374151;
}

trix-editor p,
.trix-content p,
.rich-text-content p {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

trix-editor ul,
.trix-content ul,
.rich-text-content ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}

trix-editor ol,
.trix-content ol,
.rich-text-content ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}

trix-editor li,
.trix-content li,
.rich-text-content li {
  margin-bottom: 0.25rem;
}

trix-editor blockquote,
.trix-content blockquote,
.rich-text-content blockquote {
  border-left: 4px solid #FF7F00;
  padding-left: 1rem;
  margin: 1rem 0;
  font-style: italic;
  color: #4b5563;
}

trix-editor a,
.trix-content a,
.rich-text-content a {
  color: #FF7F00;
  text-decoration: underline;
}

trix-editor strong,
.trix-content strong,
.rich-text-content strong {
  font-weight: 600;
}