@import "tailwindcss";

/* ============================================================================
   DESIGN SYSTEM - IAE Platform
   ============================================================================ */

@layer base {
  /* -------------------------------------------------------------------------
     ROOT VARIABLES - Color Palette
     ------------------------------------------------------------------------- */
  :root {
    --color-primary: 30 34 170; /* #1E22AA */
    --color-primary-dark: 22 24 128; /* #161880 */
    --color-primary-light: 99 102 241; /* indigo-500 */
    --color-accent: 165 180 252; /* indigo-300 */
    --color-success: 34 197 94; /* green-500 */
    --color-warning: 245 158 11; /* amber-500 */
    --color-error: 239 68 68; /* red-500 */
    --color-info: 59 130 246; /* blue-500 */
  }

  /* -------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------- */
  body {
    @apply text-gray-900 antialiased;
    font-feature-settings: "kern" 1, "liga" 1;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold tracking-tight text-gray-900;
  }

  /* Hide default summary marker across browsers */
  summary.list-none::-webkit-details-marker { display: none; }

  /* -------------------------------------------------------------------------
     FORM INPUTS - Enhanced styling (excluded from auth-layout)
     ------------------------------------------------------------------------- */
  body:not(.auth-layout) input[type="text"],
  body:not(.auth-layout) input[type="email"],
  body:not(.auth-layout) input[type="password"],
  body:not(.auth-layout) input[type="number"],
  body:not(.auth-layout) input[type="tel"],
  body:not(.auth-layout) input[type="url"],
  body:not(.auth-layout) input[type="search"],
  body:not(.auth-layout) input[type="date"],
  body:not(.auth-layout) input[type="datetime-local"],
  body:not(.auth-layout) input[type="time"],
  body:not(.auth-layout) input[type="month"],
  body:not(.auth-layout) input[type="week"],
  body:not(.auth-layout) select {
    border: 2px solid rgb(209 213 219) !important;
    border-radius: 0.5rem !important;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    min-height: 3rem;
    background-color: rgb(255 255 255) !important;
    font-size: 0.9375rem;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  body:not(.auth-layout) input.pl-10,
  body:not(.auth-layout) input[class*="pl-10"] {
    padding-left: 2.5rem !important;
  }

  body:not(.auth-layout) input[type="text"]:hover,
  body:not(.auth-layout) input[type="email"]:hover,
  body:not(.auth-layout) input[type="password"]:hover,
  body:not(.auth-layout) input[type="number"]:hover,
  body:not(.auth-layout) input[type="tel"]:hover,
  body:not(.auth-layout) input[type="url"]:hover,
  body:not(.auth-layout) input[type="search"]:hover,
  body:not(.auth-layout) input[type="date"]:hover,
  body:not(.auth-layout) input[type="datetime-local"]:hover,
  body:not(.auth-layout) input[type="time"]:hover,
  body:not(.auth-layout) input[type="month"]:hover,
  body:not(.auth-layout) input[type="week"]:hover,
  body:not(.auth-layout) select:hover {
    border-color: rgb(156 163 175) !important;
  }

  body:not(.auth-layout) input[type="text"]:focus,
  body:not(.auth-layout) input[type="email"]:focus,
  body:not(.auth-layout) input[type="password"]:focus,
  body:not(.auth-layout) input[type="number"]:focus,
  body:not(.auth-layout) input[type="tel"]:focus,
  body:not(.auth-layout) input[type="url"]:focus,
  body:not(.auth-layout) input[type="search"]:focus,
  body:not(.auth-layout) input[type="date"]:focus,
  body:not(.auth-layout) input[type="datetime-local"]:focus,
  body:not(.auth-layout) input[type="time"]:focus,
  body:not(.auth-layout) input[type="month"]:focus,
  body:not(.auth-layout) input[type="week"]:focus,
  body:not(.auth-layout) textarea:focus,
  body:not(.auth-layout) select:focus {
    border-color: rgb(99 102 241) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgb(99 102 241 / 0.15), 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  }

  /* Auth layout - simple focus styles */
  .auth-layout input:focus,
  .auth-layout select:focus,
  .auth-layout textarea:focus {
    outline: none;
  }

  /* Textarea specific styles (excluded from auth-layout) */
  body:not(.auth-layout) textarea {
    border: 2px solid rgb(209 213 219) !important;
    border-radius: 0.5rem !important;
    padding: 1rem 1.25rem !important;
    min-height: 8rem !important;
    resize: vertical;
    font-size: 0.9375rem;
    line-height: 1.6;
    background-color: rgb(255 255 255) !important;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  body:not(.auth-layout) textarea:hover {
    border-color: rgb(156 163 175) !important;
  }

  /* Disabled inputs - exclude submit buttons */
  input:disabled:not([type="submit"]):not([type="button"]),
  select:disabled,
  textarea:disabled {
    background-color: rgb(249 250 251) !important;
    color: rgb(107 114 128) !important;
    cursor: not-allowed;
    opacity: 0.7;
  }

  /* Read-only inputs - exclude submit buttons */
  input:read-only:not(:disabled):not([type="submit"]):not([type="button"]),
  textarea:read-only:not(:disabled) {
    background-color: rgb(249 250 251) !important;
    border-color: rgb(229 231 235) !important;
  }
}

@layer components {
  /* -------------------------------------------------------------------------
     CARDS & SECTIONS
     ------------------------------------------------------------------------- */
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200;
    transition: box-shadow 0.2s ease-in-out;
  }

  .card:hover {
    @apply shadow-md;
  }

  .card-header {
    @apply px-6 py-4 border-b border-gray-100 bg-gray-50/50;
  }

  .card-body {
    @apply px-6 py-5;
  }

  .card-footer {
    @apply px-6 py-4 border-t border-gray-100 bg-gray-50/30;
  }

  /* -------------------------------------------------------------------------
     STAT CARDS
     ------------------------------------------------------------------------- */
  .stat-card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 p-5;
  }

  .stat-card-success {
    @apply bg-gradient-to-br from-green-500 to-emerald-600 text-white border-0;
  }

  .stat-value {
    @apply text-2xl font-bold;
  }

  .stat-label {
    @apply text-sm font-medium opacity-80;
  }

  /* -------------------------------------------------------------------------
     BUTTONS
     ------------------------------------------------------------------------- */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2.5 rounded-lg;
    @apply text-sm font-semibold transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply bg-indigo-600 text-white hover:bg-indigo-700;
    @apply focus:ring-indigo-500 shadow-sm hover:shadow-md;
  }

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

  .btn-success {
    @apply bg-green-600 text-white hover:bg-green-700;
    @apply focus:ring-green-500 shadow-sm;
  }

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

  /* -------------------------------------------------------------------------
     BADGES
     ------------------------------------------------------------------------- */
  .badge {
    @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold;
  }

  .badge-primary {
    @apply bg-indigo-100 text-indigo-700;
  }

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

  .badge-warning {
    @apply bg-amber-100 text-amber-700;
  }

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

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

  /* -------------------------------------------------------------------------
     TABLES
     ------------------------------------------------------------------------- */
  .table-container {
    @apply overflow-hidden rounded-xl border border-gray-200 bg-white;
  }

  .table-header {
    @apply bg-gray-50 border-b border-gray-200;
  }

  .table-header th {
    @apply px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider;
  }

  .table-row {
    @apply border-b border-gray-100 hover:bg-gray-50/50 transition-colors;
  }

  .table-row td {
    @apply px-6 py-4 text-sm text-gray-700;
  }

  /* -------------------------------------------------------------------------
     DASHBOARD SECTIONS
     ------------------------------------------------------------------------- */
  .dashboard-welcome {
    @apply bg-gradient-to-r from-indigo-50 to-white border-indigo-100;
  }

  .dashboard-section {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden;
  }

  .dashboard-section-header {
    @apply px-6 py-4 border-b border-gray-100 flex items-center justify-between;
  }

  .dashboard-section-title {
    @apply text-base font-semibold text-gray-900;
  }

  .dashboard-section-body {
    @apply p-6;
  }

  /* -------------------------------------------------------------------------
     PROGRESS BAR
     ------------------------------------------------------------------------- */
  .progress-bar {
    @apply h-2 bg-gray-200 rounded-full overflow-hidden;
  }

  .progress-bar-fill {
    @apply h-full bg-gradient-to-r from-indigo-500 to-indigo-600 rounded-full;
    transition: width 0.3s ease-in-out;
  }

  /* -------------------------------------------------------------------------
     AVATARS
     ------------------------------------------------------------------------- */
  .avatar {
    @apply rounded-full bg-gradient-to-br from-indigo-400 to-indigo-600;
    @apply flex items-center justify-center text-white font-semibold;
  }

  .avatar-sm {
    @apply w-8 h-8 text-xs;
  }

  .avatar-md {
    @apply w-10 h-10 text-sm;
  }

  .avatar-lg {
    @apply w-12 h-12 text-base;
  }

  .avatar-xl {
    @apply w-16 h-16 text-lg;
  }

}