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

/* ===========================================
   CUSTOM BASE STYLES
   =========================================== */
@layer base {
  /* Custom scrollbar untuk semua element */
  * {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
  }
  
  /* Webkit scrollbar */
  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  *::-webkit-scrollbar-track {
    background: transparent;
  }
  
  *::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
  }
  
  *::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
  }
  
  /* Body defaults */
  body {
    @apply text-gray-900 antialiased;
  }
  
  /* Link defaults */
  a {
    @apply transition-colors duration-200;
  }
}

/* ===========================================
   CUSTOM COMPONENTS
   =========================================== */
@layer components {
  
  /* ============ SIDEBAR COMPONENTS ============ */
  
  /* Sidebar Container */
  #sidebar {
    @apply transition-all duration-300 ease-in-out;
  }
  
  /* Desktop Collapsed State */
  #sidebar.collapsed {
    @apply w-20;
  }
  
  #sidebar.collapsed .sidebar-text {
    @apply hidden;
  }
  
  #sidebar.collapsed .sidebar-chevron {
    @apply hidden;
  }
  
  #sidebar.collapsed .sidebar-section-title {
    @apply opacity-0 h-0 py-0 overflow-hidden;
  }
  
  #sidebar.collapsed .sidebar-submenu {
    @apply hidden;
  }
  
  #sidebar.collapsed .sidebar-link {
    @apply justify-center items-center px-0 w-12 h-12 mx-auto;
  }
  
  #sidebar.collapsed .sidebar-icon {
    @apply m-0 flex-shrink-0;
  }
  
  #sidebar.collapsed .sidebar-parent {
    @apply justify-center;
  }
  
  /* Remove gaps between menu groups when collapsed */
  #sidebar.collapsed .sidebar-menu-group {
    @apply mb-0 flex flex-col items-center;
  }
  
  #sidebar.collapsed .sidebar-menu-group + .sidebar-menu-group {
    @apply mt-1;
  }
  
  /* Mobile State */
  #sidebar.open {
    @apply translate-x-0;
  }
  
  @media (max-width: 1023px) {
    #sidebar {
      @apply -translate-x-full;
    }
  }
  
  /* Main Content Adjustment */
  #main-content.sidebar-collapsed {
    @apply lg:pl-20;
  }
  
  /* Section Title */
  .sidebar-section-title {
    @apply px-3 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider mt-4 first:mt-0 transition-all duration-300;
  }
  
  /* Menu Group */
  .sidebar-menu-group {
    @apply mb-1;
  }
  
  /* Sidebar Link */
  .sidebar-link {
    @apply flex items-center gap-3 px-3 py-2.5 rounded text-[#333] hover:bg-gray-100 hover:text-gray-900 transition-all duration-200 text-sm font-medium w-full relative cursor-pointer;
  }
  
  .sidebar-link.active {
    @apply bg-purple-50 text-purple-700 font-semibold border-l-4 border-purple-600 pl-2.5;
  }
  
  .sidebar-link.active .sidebar-icon {
    @apply text-purple-600;
  }
  
  /* Parent Menu */
  .sidebar-parent {
    @apply justify-between;
  }
  
  .sidebar-parent.active {
    @apply bg-purple-50 text-purple-600;
  }
  
  .sidebar-parent.active:not(.sidebar-link.active) .sidebar-icon {
    @apply text-white;
  }
  
  /* Icon */
  .sidebar-icon {
    @apply w-5 h-5 flex-shrink-0 transition-colors duration-200;
  }
  
  /* Text */
  .sidebar-text {
    @apply truncate transition-all duration-300 flex-1 text-left;
  }
  
  /* Chevron */
  .sidebar-chevron {
    @apply w-4 h-4 flex-shrink-0 transition-transform duration-300;
  }
  
  .sidebar-parent.active .sidebar-chevron {
    @apply rotate-180;
  }
  
  /* Submenu */
  .sidebar-submenu {
    @apply max-h-0 overflow-hidden transition-all duration-300 ease-in-out space-y-1;
  }
  
  .sidebar-parent.active + .sidebar-submenu {
    @apply max-h-[600px] mt-1 mb-2;
  }
  
  /* Sublink */
  .sidebar-sublink {
    @apply block px-3 py-2 ml-8 rounded text-gray-600 hover:bg-purple-50 hover:text-purple-700 transition-all duration-200 text-sm relative;
  }

  
  .sidebar-sublink.active {
    @apply bg-purple-100 text-purple-700 font-medium;
  }

  
  /* Tooltip */
  .sidebar-tooltip {
    @apply absolute left-full ml-6 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg opacity-0 invisible pointer-events-none transition-all duration-200 whitespace-nowrap z-[60] shadow-lg;
  }
  
  .sidebar-tooltip::before {
    content: '';
    @apply absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-gray-900;
  }
  
  #sidebar.collapsed .sidebar-link:hover .sidebar-tooltip.show {
    @apply opacity-100 visible;
  }
  
  /* Scrollbar Styling */
  #sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgb(209 213 219) transparent;
  }
  
  #sidebar::-webkit-scrollbar {
    @apply w-1.5;
  }
  
  #sidebar::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
  
  #sidebar::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
  }
  
  #sidebar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
  }
  
  /* Search Overlay */
  #search-overlay {
    @apply transition-opacity duration-300 opacity-0 pointer-events-none;
  }
  
  #search-overlay.opacity-100 {
    @apply pointer-events-auto;
  }
  
  /* Smooth transitions for all interactive elements */
  .sidebar-link,
  .sidebar-sublink,
  .sidebar-icon,
  .sidebar-text,
  .sidebar-chevron {
    @apply transition-all duration-200 ease-in-out;
  }

  #sidebar.collapsed .sidebar-parent > div {
  @apply flex-none w-auto;
}

  
  /* ============ BUTTON COMPONENTS ============ */
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  
  .btn-primary {
    @apply bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:shadow-lg focus:ring-purple-500;
  }
  
  .btn-secondary {
    @apply bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500;
  }
  
  .btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
  }
  
  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
  }
  
  .btn-warning {
    @apply bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-500;
  }
  
  .btn-info {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
  }
  
  .btn-sm {
    @apply px-3 py-1.5 text-sm;
  }
  
  .btn-lg {
    @apply px-6 py-3 text-base;
  }
  
  /* ============ CARD COMPONENTS ============ */
  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden;
  }
  
  .card-header {
    @apply px-6 py-4 border-b border-gray-200 bg-gray-50;
  }
  
  .card-title {
    @apply text-lg font-semibold text-gray-900;
  }
  
  .card-body {
    @apply p-6;
  }
  
  .card-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
  }
  
  /* ============ FORM COMPONENTS ============ */
  .form-group {
    @apply mb-4;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }
  
  .form-label.required::after {
    @apply content-['*'] text-red-500 ml-1;
  }
  
  .form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm transition-colors;
  }
  
  .form-input:disabled {
    @apply bg-gray-100 cursor-not-allowed;
  }
  
  .form-textarea {
    @apply form-input min-h-[100px] resize-y;
  }
  
  .form-select {
    @apply form-input bg-white appearance-none bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 9 12 15 18 9"%3e%3c/polyline%3e%3c/svg%3e')] bg-[length:1.25rem] bg-[center_right_0.75rem] bg-no-repeat pr-10;
  }
  
  .form-checkbox,
  .form-radio {
    @apply w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500 focus:ring-2;
  }
  
  .form-error {
    @apply text-sm text-red-600 mt-1;
  }
  
  .form-help {
    @apply text-sm text-gray-500 mt-1;
  }
  
  /* ============ TABLE COMPONENTS ============ */
  .table-wrapper {
    @apply overflow-x-auto rounded-lg border border-gray-200;
  }
  
  .table {
    @apply w-full text-sm text-left;
  }
  
  .table thead {
    @apply bg-gray-50 text-gray-700 font-semibold;
  }
  
  .table th {
    @apply px-6 py-3 border-b border-gray-200 whitespace-nowrap;
  }
  
  .table td {
    @apply px-6 py-4 border-b border-gray-200;
  }
  
  .table tbody tr {
    @apply transition-colors;
  }
  
  .table tbody tr:hover {
    @apply bg-gray-50;
  }
  
  .table tbody tr:last-child td {
    @apply border-b-0;
  }
  
  /* ============ BADGE COMPONENTS ============ */
  .badge {
    @apply inline-flex items-center gap-1 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-primary {
    @apply bg-purple-100 text-purple-800;
  }
  
  .badge-secondary {
    @apply bg-gray-100 text-gray-800;
  }
  
  /* ============ ALERT COMPONENTS ============ */
  .alert {
    @apply p-4 rounded-lg border flex items-start gap-3;
  }
  
  .alert-success {
    @apply bg-green-50 border-green-200 text-green-800;
  }
  
  .alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
  }
  
  .alert-danger {
    @apply bg-red-50 border-red-200 text-red-800;
  }
  
  .alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
  }
  
  /* ============ MODAL COMPONENTS ============ */
  .modal-overlay {
    @apply fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4;
  }
  
  .modal-content {
    @apply bg-white rounded-lg shadow-xl max-w-lg w-full max-h-[90vh] overflow-hidden flex flex-col;
  }
  
  .modal-header {
    @apply px-6 py-4 border-b border-gray-200 flex items-center justify-between;
  }
  
  .modal-title {
    @apply text-lg font-semibold text-gray-900;
  }
  
  .modal-body {
    @apply p-6 overflow-y-auto flex-1;
  }
  
  .modal-footer {
    @apply px-6 py-4 border-t border-gray-200 flex items-center justify-end gap-3;
  }
  
  /* ============ PAGINATION COMPONENTS ============ */
  .pagination {
    @apply flex items-center gap-1;
  }
  
  .pagination-item {
    @apply px-3 py-2 rounded-lg text-sm font-medium transition-colors;
  }
  
  .pagination-item:not(.active):not(:disabled) {
    @apply text-gray-700 hover:bg-gray-100;
  }
  
  .pagination-item.active {
    @apply bg-purple-600 text-white;
  }
  
  .pagination-item:disabled {
    @apply text-gray-400 cursor-not-allowed;
  }
}

/* ===========================================
   CUSTOM UTILITIES
   =========================================== */
@layer utilities {
  
  /* Scrollbar utilities */
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  
  /* Text utilities */
  .text-balance {
    text-wrap: balance;
  }
  
  /* Animation utilities */
  .animate-progress {
    animation: progress 1.5s ease-in-out infinite;
  }
  
  @keyframes progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  /* Gradient text */
  .gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600;
  }
  
  /* Glass effect */
  .glass {
    @apply bg-white/80 backdrop-blur-sm;
  }
}