@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply font-kanit;
  }
  body {
    @apply bg-secondary-50 dark:bg-secondary-900 text-secondary-900 dark:text-secondary-100;
  }
}

@layer components {
  /* === LAYOUT COMPONENTS === */
  .tm-layout {
    @apply min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900;
  }
  
  .tm-sidebar {
    @apply fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full lg:translate-x-0;
  }
  
  .tm-sidebar-inner {
    @apply h-full px-3 py-4 overflow-y-auto bg-white dark:bg-gray-800 shadow-lg;
  }
  
  .tm-content {
    @apply lg:ml-64 p-4 md:p-6;
  }
  
  .tm-container {
    @apply max-w-7xl mx-auto;
  }
  
  /* === CARD COMPONENTS === */
  .tm-card {
    @apply bg-white dark:bg-secondary-800 rounded-xl shadow-card transition-all duration-300 overflow-hidden border border-gray-100 dark:border-gray-700;
  }
  
  .tm-card:hover {
    @apply shadow-card-hover;
  }
  
  .tm-card-header {
    @apply px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between;
  }
  
  .tm-card-title {
    @apply text-lg font-semibold text-secondary-900 dark:text-white;
  }
  
  .tm-card-body {
    @apply p-6;
  }
  
  .tm-card-footer {
    @apply px-6 py-4 border-t border-gray-100 dark:border-gray-700;
  }
  
  /* === BUTTON COMPONENTS === */
  .tm-btn {
    @apply inline-flex items-center justify-center rounded-lg px-5 py-2.5 text-sm font-medium shadow-button transition-all duration-300 focus:outline-none focus:ring-4;
  }
  
  .tm-btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 focus:ring-primary-300 dark:focus:ring-primary-800 text-white;
  }
  
  .tm-btn-secondary {
    @apply bg-secondary-500 hover:bg-secondary-600 focus:ring-secondary-300 dark:focus:ring-secondary-700 text-white;
  }
  
  .tm-btn-success {
    @apply bg-success-600 hover:bg-success-700 focus:ring-success-300 dark:focus:ring-success-800 text-white;
  }
  
  .tm-btn-danger {
    @apply bg-danger-600 hover:bg-danger-700 focus:ring-danger-300 dark:focus:ring-danger-800 text-white;
  }
  
  .tm-btn-warning {
    @apply bg-warning-500 hover:bg-warning-600 focus:ring-warning-300 dark:focus:ring-warning-800 text-white;
  }
  
  .tm-btn-info {
    @apply bg-info-600 hover:bg-info-700 focus:ring-info-300 dark:focus:ring-info-800 text-white;
  }
  
  .tm-btn-light {
    @apply bg-white hover:bg-gray-100 focus:ring-gray-200 dark:bg-secondary-800 dark:hover:bg-secondary-700 dark:focus:ring-secondary-700 text-secondary-900 dark:text-white border border-gray-200 dark:border-secondary-700;
  }
  
  .tm-btn-outline {
    @apply bg-transparent hover:bg-primary-700 text-primary-700 hover:text-white border border-primary-700 focus:ring-primary-300 dark:focus:ring-primary-800;
  }
  
  .tm-btn-sm {
    @apply px-3 py-1.5 text-xs;
  }
  
  .tm-btn-lg {
    @apply px-6 py-3 text-base;
  }
  
  .tm-btn-icon {
    @apply p-2;
  }
  
  .tm-btn-block {
    @apply w-full;
  }
  
  /* === FORM COMPONENTS === */
  .tm-form-group {
    @apply mb-4;
  }
  
  .tm-form-label {
    @apply block mb-2 text-sm font-medium text-secondary-900 dark:text-white;
  }
  
  .tm-form-control {
    @apply bg-gray-50 border border-gray-300 text-secondary-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-secondary-700 dark:border-secondary-600 dark:placeholder-secondary-400 dark:text-white;
  }
  
  .tm-form-select {
    @apply bg-gray-50 border border-gray-300 text-secondary-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-secondary-700 dark:border-secondary-600 dark:placeholder-secondary-400 dark:text-white;
  }
  
  .tm-form-check {
    @apply flex items-center;
  }
  
  .tm-form-check-input {
    @apply w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-secondary-700 dark:border-secondary-600;
  }
  
  .tm-form-check-label {
    @apply ml-2 text-sm font-medium text-secondary-900 dark:text-secondary-300;
  }
  
  /* === ALERT COMPONENTS === */
  .tm-alert {
    @apply p-4 mb-4 rounded-lg;
  }
  
  .tm-alert-primary {
    @apply text-primary-800 bg-primary-50 dark:bg-secondary-800 dark:text-primary-400;
  }
  
  .tm-alert-success {
    @apply text-success-800 bg-success-50 dark:bg-secondary-800 dark:text-success-400;
  }
  
  .tm-alert-danger {
    @apply text-danger-800 bg-danger-50 dark:bg-secondary-800 dark:text-danger-400;
  }
  
  .tm-alert-warning {
    @apply text-warning-800 bg-warning-50 dark:bg-secondary-800 dark:text-warning-300;
  }
  
  .tm-alert-info {
    @apply text-info-800 bg-info-50 dark:bg-secondary-800 dark:text-info-400;
  }
  
  /* === TABLE COMPONENTS === */
  .tm-table {
    @apply w-full text-sm text-left text-secondary-500 dark:text-secondary-400;
  }
  
  .tm-table-thead {
    @apply text-xs text-secondary-700 uppercase bg-secondary-50 dark:bg-secondary-700 dark:text-secondary-400;
  }
  
  .tm-table-th {
    @apply px-6 py-3;
  }
  
  .tm-table-td {
    @apply px-6 py-4;
  }
  
  .tm-table-row {
    @apply bg-white border-b dark:bg-secondary-800 dark:border-secondary-700 hover:bg-secondary-50 dark:hover:bg-secondary-700;
  }
  
  /* === BADGE COMPONENTS === */
  .tm-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .tm-badge-primary {
    @apply bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300;
  }
  
  .tm-badge-secondary {
    @apply bg-secondary-100 text-secondary-800 dark:bg-secondary-700 dark:text-secondary-300;
  }
  
  .tm-badge-success {
    @apply bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-300;
  }
  
  .tm-badge-danger {
    @apply bg-danger-100 text-danger-800 dark:bg-danger-900 dark:text-danger-300;
  }
  
  .tm-badge-warning {
    @apply bg-warning-100 text-warning-800 dark:bg-warning-900 dark:text-warning-300;
  }
  
  .tm-badge-info {
    @apply bg-info-100 text-info-800 dark:bg-info-900 dark:text-info-300;
  }
  
  /* === NAVIGATION COMPONENTS === */
  .tm-nav-link {
    @apply flex items-center p-2 text-secondary-900 rounded-lg dark:text-white hover:bg-secondary-100 dark:hover:bg-secondary-700 group transition-all duration-300;
  }
  
  .tm-nav-link-active {
    @apply bg-primary-500 text-white hover:bg-primary-600 dark:hover:bg-primary-600;
  }
  
  .tm-nav-icon {
    @apply w-5 h-5 transition duration-75 text-secondary-400 group-hover:text-secondary-900 dark:text-secondary-400 dark:group-hover:text-white;
  }
  
  .tm-nav-text {
    @apply ml-3;
  }
  
  /* === UTILITY CLASSES === */
  .tm-divider {
    @apply h-0.5 my-6 bg-secondary-200 dark:bg-secondary-700 rounded-full;
  }
  
  /* === LOGIN PAGE === */
  .tm-login-container {
    @apply flex items-center justify-center min-h-screen p-4;
  }
  
  .tm-login-card {
    @apply w-full max-w-md;
  }
  
  .tm-login-logo {
    @apply flex flex-col items-center justify-center mb-6;
  }
  
  .tm-login-form {
    @apply space-y-6;
  }
  
  /* === DASHBOARD PAGE === */
  .tm-stats-card {
    @apply bg-gradient-to-br;
  }
  
  .tm-stats-card-primary {
    @apply from-primary-500 to-primary-700 text-white;
  }
  
  .tm-stats-card-info {
    @apply from-info-500 to-info-700 text-white;
  }
  
  .tm-stats-card-success {
    @apply from-success-500 to-success-700 text-white;
  }
  
  .tm-stats-card-warning {
    @apply from-warning-500 to-warning-700 text-white;
  }
  
  .tm-stats-card-danger {
    @apply from-danger-500 to-danger-700 text-white;
  }
  
  .tm-stats-card-secondary {
    @apply from-secondary-500 to-secondary-700 text-white;
  }
  
  .tm-stats-card-icon {
    @apply text-white/80 text-5xl mb-3;
  }
  
  .tm-stats-card-value {
    @apply text-3xl font-bold;
  }
  
  .tm-stats-card-label {
    @apply text-white/80 text-sm font-light;
  }
  
  /* === ANIMATIONS === */
  .tm-fade-in {
    @apply animate-[fadeIn_0.6s_ease-out];
  }
  
  .tm-slide-in {
    @apply animate-[slideIn_0.5s_ease-out];
  }
  
  .tm-pulse {
    @apply animate-[pulse_2s_infinite];
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes slideIn {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }
}