/* Dhivehi Font Faces - Updated for GazetteMV Module */
/* Primary: Faruma (Default Dhivehi font) */
@font-face {
  font-family: 'Faruma';
  src: url('../fonts/Faruma.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Secondary: Mv Faseyha (Body text and content) */
@font-face {
  font-family: 'Mv Faseyha';
  src: url('../fonts/MV_Faseyha.otf') format('opentype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* UI Font: Mv Iyyu Normal (Interface elements) */
@font-face {
  font-family: 'Mv Iyyu Normal';
  src: url('../fonts/Mv_Iyyu_Normal.otf') format('opentype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

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

/* Custom components using Tailwind utilities */
@layer components {
  /* Sleek Notifications */
  .sleek-notification-container {
    @apply fixed top-5 right-5 z-50 flex flex-col gap-3 max-w-sm pointer-events-none;
  }
  
  .sleek-notification {
    @apply bg-white/95 backdrop-blur-sm rounded-xl shadow-lg border border-black/5 overflow-hidden transform translate-x-full opacity-0 transition-all duration-300 ease-out pointer-events-auto relative;
  }
  
  .sleek-notification.show {
    @apply translate-x-0 opacity-100;
  }
  
  .sleek-notification.hide {
    @apply translate-x-full opacity-0;
  }
  
  .notification-content {
    @apply flex items-start p-4 gap-3;
  }
  
  .notification-icon {
    @apply flex-shrink-0 w-6 h-6 flex items-center justify-center rounded-full text-sm;
  }
  
  .notification-body {
    @apply flex-1 min-w-0;
  }
  
  .notification-title {
    @apply font-semibold text-sm mb-1 text-gray-900;
  }
  
  .notification-message {
    @apply text-sm leading-relaxed text-gray-600;
  }
  
  .notification-close {
    @apply flex-shrink-0 w-6 h-6 border-none bg-none cursor-pointer flex items-center justify-center rounded text-gray-400 text-xs transition-all duration-200 hover:bg-black/5 hover:text-gray-600;
  }
  
  .notification-progress {
    @apply absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-transparent to-white/30 rounded-b-xl animate-progress;
  }
  
  /* Notification types */
  .notification-success .notification-icon {
    @apply bg-green-500 text-white;
  }
  
  .notification-success .notification-progress {
    @apply bg-gradient-to-r from-green-500 to-green-400;
  }
  
  .notification-error .notification-icon {
    @apply bg-red-500 text-white;
  }
  
  .notification-error .notification-progress {
    @apply bg-gradient-to-r from-red-500 to-red-400;
  }
  
  .notification-warning .notification-icon {
    @apply bg-yellow-500 text-white;
  }
  
  .notification-warning .notification-progress {
    @apply bg-gradient-to-r from-yellow-500 to-yellow-400;
  }
  
  .notification-info .notification-icon {
    @apply bg-blue-500 text-white;
  }
  
  .notification-info .notification-progress {
    @apply bg-gradient-to-r from-blue-500 to-blue-400;
  }
  
  .notification-loading .notification-icon {
    @apply bg-purple-500 text-white;
  }
  
  .notification-loading .notification-progress {
    @apply bg-gradient-to-r from-purple-500 to-purple-400 animate-progress-infinite;
  }
  
  /* Hover effects */
  .sleek-notification:hover {
    @apply -translate-x-1 shadow-xl;
  }
  
  .sleek-notification:hover .notification-progress {
    @apply animate-pause;
  }
  
  /* Mobile responsiveness */
  @media (max-width: 640px) {
    .sleek-notification-container {
      @apply top-2.5 right-2.5 left-2.5 max-w-none;
    }
    
    .sleek-notification {
      @apply translate-y-full;
    }
    
    .sleek-notification.show {
      @apply translate-y-0;
    }
    
    .sleek-notification.hide {
      @apply -translate-y-full;
    }
  }
  
  /* Dark mode support */
  @media (prefers-color-scheme: dark) {
    .sleek-notification {
      @apply bg-gray-800/95 border-white/10;
    }
    
    .notification-title {
      @apply text-gray-100;
    }
    
    .notification-message {
      @apply text-gray-300;
    }
    
    .notification-close {
      @apply text-gray-400 hover:bg-white/10 hover:text-gray-300;
    }
  }
  
  /* Compact mode */
  .sleek-notification.compact .notification-content {
    @apply p-3;
  }
  
  .sleek-notification.compact .notification-icon {
    @apply w-5 h-5 text-xs;
  }
  
  .sleek-notification.compact .notification-title {
    @apply text-xs;
  }
  
  .sleek-notification.compact .notification-message {
    @apply text-xs;
  }
  
  /* Stack notifications */
  .sleek-notification-container:has(.sleek-notification:nth-child(4)) {
    @apply max-h-screen overflow-y-auto scrollbar-none;
  }
  
  /* Form Components */
  .form-input {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-accent focus:ring focus:ring-accent focus:ring-opacity-50;
  }
  
  .form-select {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-accent focus:ring focus:ring-accent focus:ring-opacity-50;
  }
  
  .form-textarea {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-accent focus:ring focus:ring-accent focus:ring-opacity-50 resize-vertical;
  }
  
  .form-checkbox {
    @apply h-4 w-4 text-accent focus:ring-accent border-gray-300 rounded;
  }
  
  .form-label {
    @apply block text-sm font-medium text-text-secondary mb-1;
  }
  
  .form-label.required::after {
    content: "*";
    @apply text-red-500 ml-1;
  }
  
  .form-group {
    @apply mb-4;
  }
  
  .form-error {
    @apply mt-1 text-sm text-red-600;
  }
  
  .form-help {
    @apply mt-1 text-sm text-gray-500;
  }

  /* Button Components */
  .btn-primary {
    @apply bg-primary hover:bg-secondary text-white font-semibold py-2 px-4 rounded-md transition-colors duration-200;
  }
  
  .btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-text-primary font-semibold py-2 px-4 rounded-md transition-colors duration-200;
  }
  
  .btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-200;
  }
  
  .btn-success {
    @apply bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-200;
  }
  
  .btn-outline {
    @apply border-2 border-gray-300 hover:border-accent text-gray-700 hover:text-accent font-semibold py-2 px-4 rounded-md transition-colors duration-200;
  }
  
  .btn-link {
    @apply text-accent hover:text-accent/80 font-medium transition-colors duration-200;
  }

  /* Alert Components */
  .alert {
    @apply p-4 mb-4 rounded-lg border flex items-center justify-between;
  }
  
  .alert-success {
    @apply bg-green-50 border-green-200 text-green-800;
  }
  
  .alert-error {
    @apply bg-red-50 border-red-200 text-red-800;
  }
  
  .alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
  }
  
  .alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
  }
  
  .alert-close {
    @apply text-gray-400 hover:text-gray-600 transition-colors duration-200;
  }

  /* Badge Components */
  .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-error {
    @apply bg-red-100 text-red-800;
  }
  
  .badge-warning {
    @apply bg-yellow-100 text-yellow-800;
  }
  
  .badge-info {
    @apply bg-blue-100 text-blue-800;
  }
  
  .badge-gray {
    @apply bg-gray-100 text-gray-800;
  }

  /* Card Components */
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6;
  }
  
  .card-header {
    @apply flex items-center justify-between mb-4;
  }
  
  .card-title {
    @apply text-lg font-semibold text-gray-900;
  }

  /* Table Components */
  .table-container {
    @apply overflow-x-auto rounded-lg border border-gray-200;
  }
  
  .table {
    @apply min-w-full divide-y divide-gray-200;
  }
  
  .table-header {
    @apply bg-gray-50;
  }
  
  .table-header th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
  }
  
  .table-body {
    @apply bg-white divide-y divide-gray-200;
  }
  
  .table-row {
    @apply hover:bg-gray-50 transition-colors;
  }
  
  .table-cell {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
  }

  /* Navigation Components */
  .nav-link {
    @apply transition-all duration-200 ease-in-out;
  }
  
  .nav-link:hover {
    @apply transform -translate-y-0.5;
  }
  
  .nav-link.active {
    @apply bg-blue-700 text-white;
  }
  
  .submenu-link {
    @apply transition-all duration-200 ease-in-out relative;
  }
  
  .submenu-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-accent transition-all duration-200 ease-in-out;
  }
  
  .submenu-link:hover::after {
    @apply w-full;
  }
  
  .submenu-link.active::after {
    @apply w-full;
  }

  /* Modal Components */
  .modal {
    @apply fixed inset-0 bg-black bg-opacity-50 z-50;
  }
  
  .modal-content {
    @apply bg-white rounded-lg shadow-xl max-w-md mx-auto mt-20 p-6;
  }
  
  .modal.hidden {
    @apply hidden;
  }

  /* Progress Components */
  .progress-bar {
    @apply h-2 bg-gray-200 rounded-full overflow-hidden;
  }
  
  .progress-bar-fill {
    @apply h-full bg-accent transition-all duration-300;
  }

  /* Loading States */
  .loading {
    @apply opacity-75 cursor-wait;
  }
  
  .hover-lift {
    @apply transition-transform duration-200 ease-in-out;
  }
  
  .hover-lift:hover {
    @apply transform -translate-y-0.5 shadow-lg;
  }

  /* Touch-friendly interactions */
  .touch-friendly {
    @apply transition-all duration-200 ease-in-out;
  }
  
  .touch-active {
    @apply transform scale-95 opacity-75;
  }
}

/* Dhivehi-specific utilities */
@layer utilities {
  .dhivehi-text {
    @apply font-dhivehi text-base leading-relaxed;
    direction: rtl;
    text-align: right;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    unicode-bidi: bidi-override;
  }
  
  .dhivehi-title {
    @apply font-dhivehi text-xl font-semibold leading-tight;
    direction: rtl;
    text-align: right;
    unicode-bidi: bidi-override;
  }
  
  .dhivehi-small {
    @apply font-dhivehi text-sm leading-normal;
    direction: rtl;
    text-align: right;
    unicode-bidi: bidi-override;
  }
  
  .dhivehi-mixed {
    @apply font-dhivehi leading-relaxed;
  }
  
  .dhivehi-input {
    @apply font-dhivehi;
    direction: rtl;
    text-align: right;
  }
  
  .btn-dhivehi {
    @apply font-dhivehi text-center;
    direction: rtl;
  }
  
  .table-dhivehi td {
    @apply font-dhivehi;
    direction: rtl;
    text-align: right;
  }
  
  .card-dhivehi {
    @apply font-dhivehi;
    direction: rtl;
    text-align: right;
  }
  
  .modal-dhivehi {
    @apply font-dhivehi;
    direction: rtl;
    text-align: right;
  }
  
  .gazette-mv-content {
    @apply font-dhivehi leading-relaxed;
    direction: rtl;
    text-align: right;
    unicode-bidi: bidi-override;
  }
  
  .gazette-mv-title {
    @apply font-dhivehi text-xl font-semibold leading-tight;
    direction: rtl;
    text-align: right;
    unicode-bidi: bidi-override;
  }
  
  .gazette-mv-subtitle {
    @apply font-dhivehi text-lg font-medium leading-relaxed;
    direction: rtl;
    text-align: right;
    unicode-bidi: bidi-override;
  }
  
  .gazette-mv-body {
    @apply font-dhivehi text-base leading-relaxed;
    direction: rtl;
    text-align: right;
    unicode-bidi: bidi-override;
  }
  
  .gazette-mv-small {
    @apply font-dhivehi text-sm leading-normal;
    direction: rtl;
    text-align: right;
    unicode-bidi: bidi-override;
  }
  
  .gazette-search-label {
    @apply font-dhivehi;
    direction: rtl;
    text-align: right;
    unicode-bidi: bidi-override;
  }
  
  .gazette-announcement-content {
    @apply font-dhivehi;
    direction: rtl;
    text-align: right;
    unicode-bidi: bidi-override;
  }
  
  .gazette-announcement-title {
    @apply font-dhivehi font-semibold;
    direction: rtl;
    text-align: right;
    unicode-bidi: bidi-override;
  }
  
  .gazette-action-text {
    @apply font-dhivehi;
    direction: rtl;
    text-align: right;
    unicode-bidi: bidi-override;
  }
}

/* Responsive Design */
@layer utilities {
  @media (max-width: 768px) {
    .nav-container {
      @apply flex-col space-y-2;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
      @apply text-base min-h-11;
    }
    
    .btn-primary,
    .btn-secondary {
      @apply min-h-11 px-4 py-3 text-base;
    }
    
    .table-container {
      @apply text-sm;
    }
    
    .table-header th,
    .table-cell {
      @apply px-3 py-2;
    }
    
    .gazette-mv-content {
      @apply px-2;
    }
    
    .gazette-mv-title {
      @apply text-lg;
    }
    
    .gazette-mv-subtitle {
      @apply text-base;
    }
    
    button, .btn-primary, .btn-secondary, a[role="button"] {
      @apply min-h-11 min-w-11;
    }
    
    .form-input, .form-select, .form-textarea {
      @apply text-base py-3 px-4;
    }
    
    .card {
      @apply p-4;
    }
    
    .table-container {
      @apply -mx-2;
    }
  }
  
  @media (max-width: 480px) {
    .container {
      @apply px-2;
    }
    
    .text-2xl {
      @apply text-xl;
    }
    
    .text-3xl {
      @apply text-2xl;
    }
    
    .gazette-mv-content {
      @apply px-1;
    }
    
    .gazette-mv-title {
      @apply text-base;
    }
    
    .btn-primary, .btn-secondary {
      @apply text-sm px-3 py-2;
    }
    
    .form-input, .form-select, .form-textarea {
      @apply text-sm py-2 px-3;
    }
    
    .flex-wrap {
      @apply flex-col;
    }
    
    .flex-wrap > * {
      @apply w-full mb-2;
    }
  }
}

/* GazetteMV Dhivehi Font Classes */
.gazette-dhivehi {
  @apply font-dhivehi;
}

.gazette-dhivehi-heading {
  @apply font-dhivehi-heading font-semibold;
}

.gazette-dhivehi-body {
  @apply font-dhivehi-body;
}

.gazette-dhivehi-ui {
  @apply font-dhivehi-ui;
}

.gazette-announcement-title {
  @apply font-dhivehi-heading text-lg font-bold text-gray-900;
}

.gazette-announcement-content {
  @apply font-dhivehi-body text-base leading-relaxed text-gray-700;
}

.gazette-search-label {
  @apply font-dhivehi-heading text-sm font-medium text-gray-700;
}

.gazette-action-text {
  @apply font-dhivehi-ui text-sm font-medium;
}

.gazette-form-input {
  @apply font-dhivehi-body;
}

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

.gazette-button {
  @apply font-dhivehi-ui font-medium;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .sleek-notification {
    @apply bg-gray-800/95 border-white/10;
  }
  
  .notification-title {
    @apply text-gray-100;
  }
  
  .notification-message {
    @apply text-gray-300;
  }
  
  .notification-close {
    @apply text-gray-400 hover:bg-white/10 hover:text-gray-300;
  }
}