@import "tailwindcss";
@import "./documents-direct-upload";

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  0%, 95% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

@keyframes viewModeTransition {
  0% {
    opacity: 0;
    transform: scale(0.95);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes documentElementEntrance {
  0% {
    opacity: 0;
    transform: translateY(15px);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* View mode transition animations */
.view-transition {
  transition: all 0.3s ease-in-out;
}

.view-transition.list-view,
.view-transition.grid-view,
.view-transition.table-view {
  animation: viewModeTransition 0.3s ease-in-out;
}

/* Animate content inside the different view modes */
.view-transition .document-card-semantic,
.view-transition.table-view .document-table-semantic tbody tr {
  opacity: 0;
  transform: translateY(15px);
  animation-name: cardEntrance;
  animation-duration: 0.45s;  /* Increased from 0.35s to 0.45s for smoother animation */
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  /* Animation delay is applied via JavaScript */
}

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(20px); /* Increased from 15px to 20px */
    filter: blur(2px); /* Increased from 1px to 2px for more noticeable effect */
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Document Show Page Animations */
.animate-entrance {
  animation-name: documentElementEntrance;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  opacity: 0;
}

/* Layout and Structure */
.html-semantic {
  @apply h-full;
}

.head-semantic {
  @apply w-full;
}

.title-semantic {
  @apply w-full;
}

.meta-viewport-semantic, 
.meta-apple-semantic, 
.meta-mobile-semantic {
  @apply w-full;
}

.icon-png-semantic {
  @apply w-full;
}

.body-semantic {
  @apply h-full;
}

.app-container-semantic {
  @apply min-h-screen bg-gray-100 border-l border-l-gray-200 border-l-2;
}

/* Header */
.header-semantic {
  @apply fixed top-0 left-0 right-0 z-10;
}

.header-container-semantic {
  @apply flex h-12;
}

.header-left-semantic {
  @apply w-64 flex items-center px-4 transition-all duration-300 ease-in-out border-r border-r-gray-200 border-r-4;
}

.logo-toggle-button-semantic {
  @apply py-1 px-2 hover:bg-[#1e40af] mr-3 z-20 relative flex items-center justify-center rounded;
}

.logo-text-semantic {
  @apply text-white font-bold text-sm tracking-wide;
}

.app-title-semantic {
  @apply text-white font-medium;
}

/* Header - Search Section */
.header-search-semantic {
}

.search-wrapper-semantic {
  @apply w-full;
}

.search-container-semantic {
  @apply relative;
}

.search-icon-container-semantic {
  @apply absolute inset-y-0 left-0 pl-0 flex items-center pointer-events-none;
}

.search-icon-semantic {
  @apply h-4 w-4 text-gray-400;
}

.search-input-semantic {
  @apply block w-full bg-[#1e40af] border border-[#1e40af] rounded py-1.5 pl-10 pr-3 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-[#3b82f6] focus:border-[#3b82f6];
}

/* Header - Right Section */
.header-right-semantic {
  @apply flex items-center justify-end px-4 transition-all duration-300 ease-in-out;
}

.user-profile-button-semantic {
  @apply p-1.5 hover:bg-[#1e40af] z-20 relative mr-2;
}

.user-icon-semantic {
  @apply w-5 h-5 text-white;
}

.right-sidebar-toggle-semantic {
  @apply p-1.5 hover:bg-[#1e40af] z-20 relative;
}

.hamburger-icon-semantic {
  @apply w-5 h-5 text-black;
}

.button-primary-semantic {
  @apply text-white rounded-md px-4 py-2;
  background-color: rgb(47, 183, 125, 0.8) !important;
  color: white !important;
}

.button-primary-semantic:hover {
  background-color: rgb(34, 132, 90, 0.8) !important;
}

/* Focus Mode Button in Header */
.focus-mode-button-semantic {
  @apply flex items-center p-1.5 mr-2 text-white hover:bg-[#1e40af] rounded transition-colors;
}

.focus-mode-button-semantic.active {
  @apply bg-[#1e40af] text-white;
}

.focus-icon-semantic {
  @apply w-5 h-5 mr-1;
}

.focus-text-semantic {
  @apply text-sm;
}

/* Main Layout */
.main-layout-semantic {
  @apply flex min-h-screen relative;
}

/* Sidebar toggle button */
.sidebar-toggle-button {
  @apply fixed top-1/2 -translate-y-1/2 w-8 h-24 rounded-l-lg text-white flex items-center justify-center shadow-lg z-50;
  background-color: rgb(47, 183, 125, 1) !important;
  transition: all 0.3s ease;
  right: 0px; /* Default position when sidebar is closed */
}

.sidebar-toggle-button:hover {
  @apply transform scale-110;
  background-color: rgb(34, 132, 90, 1) !important;
}

.sidebar-toggle-icon {
  @apply text-2xl font-bold;
}

/* No backdrop needed */

/* Left Sidebar */
.left-sidebar-semantic {
  @apply w-64 bg-white border-r border-gray-200 flex flex-col sticky transition-all duration-300 ease-in-out overflow-hidden;
}

.left-sidebar-semantic.collapsed {
  width: 0;
}

.sidebar-inner-semantic {
  @apply flex flex-col h-[calc(100vh-3rem)] mt-3;
}

.sidebar-nav-semantic {
  @apply py-2;
}

/* Sidebar Navigation Groups */
.nav-main-group-semantic, 
.nav-folders-group-semantic, 
.nav-views-group-semantic, 
.nav-manage-group-semantic {
  @apply space-y-0.5 pb-2;
}

.nav-section-header-semantic {
  @apply pt-2 pb-1 px-4 mt-1;
}

.nav-heading-semantic {
  @apply text-xs font-medium text-gray-500 uppercase tracking-wider;
}

/* Navigation Links */
.nav-inbox-link-semantic, 
.nav-entity-link-semantic, 
.nav-view-link-semantic, 
.nav-manage-link-semantic, 
.nav-admin-link-semantic,
.nav-ttt-link-semantic,
.nav-document-types-link-semantic,
.nav-correspondents-link-semantic,
.nav-tags-link-semantic,
.nav-storage-paths-link-semantic,
.nav-entities-manage-link-semantic {
  @apply flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100;
  width: 100%;
}

/* Active navigation item */
.nav-inbox-link-semantic.active, 
.nav-entity-link-semantic.active, 
.nav-view-link-semantic.active, 
.nav-manage-link-semantic.active, 
.nav-admin-link-semantic.active,
.nav-ttt-link-semantic.active,
.nav-document-types-link-semantic.active,
.nav-correspondents-link-semantic.active,
.nav-tags-link-semantic.active,
.nav-storage-paths-link-semantic.active,
.nav-entities-manage-link-semantic.active {
  @apply bg-gray-100;
}

.nav-icon-semantic, 
.nav-entity-icon-semantic, 
.nav-view-icon-semantic, 
.nav-manage-icon-semantic, 
.nav-admin-icon-semantic,
.nav-ttt-icon-semantic,
.nav-document-types-icon-semantic,
.nav-correspondents-icon-semantic,
.nav-tags-icon-semantic,
.nav-storage-paths-icon-semantic,
.nav-entities-manage-icon-semantic {
  @apply w-5 h-5 mr-3 text-gray-500;
}

.nav-inbox-text-semantic, 
.nav-personal-text-semantic, 
.nav-olapa-text-semantic,
.nav-ttt-text-semantic,
.nav-recently-added-text-semantic, 
.nav-documents-text-semantic,
.nav-document-types-text-semantic,
.nav-correspondents-text-semantic,
.nav-tags-text-semantic,
.nav-storage-paths-text-semantic,
.nav-settings-text-semantic,
.nav-entity-text-semantic,
.nav-entities-manage-text-semantic {
  @apply text-base;
  color: rgb(99, 115, 129);
  font-weight: 300;
}

/* Inbox count badge */
.inbox-count-badge-semantic {
  @apply ml-auto bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5 font-medium;
  min-width: 1.5rem;
  text-align: center;
}

/* Partner Updates count badge */
.partner-updates-count-badge-semantic {
  @apply ml-auto bg-green-500 text-white text-xs rounded-full px-1.5 py-0.5 font-medium;
  min-width: 1.5rem;
  text-align: center;
}

.nav-personal-text-semantic, 
.nav-olapa-text-semantic,
.nav-ttt-text-semantic,
.nav-recently-added-text-semantic, 
.nav-documents-text-semantic,
.nav-document-types-text-semantic,
.nav-correspondents-text-semantic,
.nav-tags-text-semantic,
.nav-storage-paths-text-semantic,
.nav-settings-text-semantic,
.nav-entities-manage-text-semantic,
.nav-view-icon-semantic, 
.nav-ttt-icon-semantic,
.nav-manage-icon-semantic,
.nav-document-types-icon-semantic,
.nav-correspondents-icon-semantic,
.nav-tags-icon-semantic,
.nav-storage-paths-icon-semantic,
.nav-entities-manage-icon-semantic {
  @apply opacity-50;
}

/* Admin Section */
.nav-admin-container-semantic {
  @apply mt-auto mb-4;
}

.nav-admin-links-semantic {
  @apply space-y-0.5;
}

/* Main Content */
.main-content-semantic {
  @apply overflow-y-auto transition-all duration-300 ease-in-out;
  flex: 1;
  min-width: 0; /* This is important for flex items */
  min-height: 100vh; /* Ensure it fills the full viewport height */
  height: 100vh; /* Set explicit height to viewport */
}

/* We allow the sidebar to overlay the main content, no padding needed */

.content-wrapper-semantic {
  @apply p-6;
}

.document-header-wrapper-semantic {
  @apply pl-6 pr-6 pt-6;
}


/* Right Sidebar */
.right-sidebar-semantic {
  @apply bg-white border-l border-gray-200 flex flex-col fixed right-0 top-0 h-screen shadow-xl z-40 transition-all duration-300 ease-in-out;
  width: 24rem; /* 96px */
}

/* Sidebar header */
.sidebar-header {
}

.sidebar-title {
  @apply text-lg font-semibold;
}

.sidebar-close-button {
  @apply bg-white border border-gray-200 absolute -left-6 top-4 h-8 w-8;
}

.sidebar-close-icon {
  @apply text-xl font-bold;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .right-sidebar-semantic {
    width: 100%; /* Full width on mobile */
    max-width: 24rem; /* But not larger than our desktop size */
  }
}

.right-sidebar-semantic.collapsed {
  transform: translateX(100%);
  opacity: 0;
}

.right-sidebar-semantic.hidden {
  display: none;
}

/* Logs Section in Right Sidebar */
.logs-header-semantic {
  @apply p-4 border-b border-gray-200;
}

.logs-title-semantic {
  @apply text-lg font-semibold;
}

.logs-frame-semantic {
  @apply w-full;
}

.logs-container-semantic {
  @apply divide-y divide-gray-200 overflow-y-auto h-[calc(100vh-12rem)];
}

.logs-empty-state-semantic {
  @apply p-4 text-sm text-gray-500;
}

.logs-empty-text-semantic {
  @apply text-sm;
}

/* Upload Form */
.upload-form-semantic {
  @apply p-6 border-b border-gray-200;
}

.upload-title-semantic {
  @apply text-lg font-semibold mb-4;
}

.upload-description-semantic {
  @apply text-sm text-gray-500 mb-4;
}

.upload-form-element-semantic {
  @apply space-y-4;
}

.upload-container-semantic {
  @apply relative;
}

.upload-dropzone-semantic {
  @apply border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-[#1e3a8a] transition-colors cursor-pointer bg-gray-50 hover:bg-[#eef2ff];
}

.upload-file-input-semantic {
  @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
}

.upload-content-semantic {
  @apply space-y-2;
}

.upload-icon-container-semantic {
  @apply flex justify-center;
}

.upload-icon-semantic {
  @apply h-12 w-12 text-white;
}

.upload-text-semantic {
  @apply text-sm text-gray-600;
}

.upload-cta-semantic {
  @apply font-medium text-[#1e3a8a] hover:text-[#1e40af];
}

.upload-formats-semantic {
  @apply text-xs text-gray-500 space-y-1;
}

.upload-format-heading-semantic,
.upload-format-docs-semantic,
.upload-format-images-semantic {
  @apply text-xs;
}

.upload-file-list-container-semantic {
  @apply mt-2;
}

.upload-file-list-container-semantic.hidden {
  @apply hidden;
}

.upload-file-list-label-semantic {
  @apply text-sm font-medium text-gray-700 mb-2;
}

.upload-file-list-wrapper-semantic {
  @apply max-h-[300px] overflow-y-auto overflow-x-hidden pr-1 pl-1;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.upload-file-list-semantic {
  @apply mt-1;
}

.upload-actions-semantic {
  @apply grid grid-cols-2 gap-4;
}

.upload-cancel-button-semantic {
  @apply px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50;
}

.upload-submit-button-semantic {
  @apply w-full text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-[#1e40af] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#1e3a8a] transition-colors;
  background-color: rgb(47, 183, 125, 0.8) !important;
}

.upload-submit-button-semantic:hover {
  background-color: rgb(34, 132, 90, 0.8) !important;
}

/* Job Log */
.job-log-item-semantic {
  @apply py-3 px-4 text-sm;
}

.job-log-content-semantic {
  @apply flex justify-between items-center gap-2;
}

.job-log-message-semantic {
  @apply flex items-center gap-2 min-w-0;
}

.job-log-status-icon-semantic {
  @apply flex-shrink-0 w-4 h-4;
}

.job-log-icon-queued-semantic {
  @apply h-4 w-4 text-blue-500;
}

.job-log-icon-running-semantic {
  @apply h-4 w-4 text-yellow-500;
}

.job-log-icon-completed-semantic {
  @apply h-4 w-4 text-green-500;
}

.job-log-icon-failed-semantic {
  @apply h-4 w-4 text-red-500;
}

.job-log-icon-unknown-semantic {
  @apply h-4 w-4 text-gray-500;
}

.job-log-message-text-semantic {
  @apply truncate text-gray-700 font-medium;
}

.job-log-time-semantic {
  @apply text-xs text-gray-500 shrink-0;
}

.job-log-document-semantic {
  @apply text-xs text-gray-500 mt-1 truncate pl-6;
}

.job-log-document-link-semantic {
  @apply hover:text-[#1e3a8a];
}

/* Documents Index Page */
.documents-index-semantic {
  @apply w-full;
}

.page-title-semantic {
  @apply text-xl font-medium text-gray-900 truncate overflow-hidden;
}

.view-controls-semantic {
  @apply flex items-center space-x-4 w-1/3;
}

.view-mode-selector-semantic {
  @apply flex border border-gray-300 rounded-md divide-x divide-gray-300;
}

.list-view-button-semantic,
.cards-view-button-semantic,
.table-view-button-semantic {
  @apply flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 border-0;
}

.list-view-button-semantic {
  @apply rounded-l-md;
}

.table-view-button-semantic {
  @apply rounded-r-md;
}

.list-view-icon-semantic,
.cards-view-icon-semantic,
.table-view-icon-semantic {
  @apply h-4 w-4 mr-1;
}

.list-view-text-semantic,
.cards-view-text-semantic,
.table-view-text-semantic {
  @apply text-sm;
}

.sort-dropdown-semantic {
  @apply relative opacity-50;
}

.sort-button-semantic {
  @apply inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50;
}

.sort-text-semantic {
  @apply text-sm;
}

.sort-icon-semantic {
  @apply ml-1 h-4 w-4;
}

/* Filters Bar */
.filters-bar-semantic {
  @apply bg-white border border-gray-300 rounded-md mb-4 max-w-3/4;
}

.filters-container-semantic {
  @apply flex flex-wrap gap-1.5 p-1.5;
}

.filter-type-container-semantic,
.filter-tags-container-semantic,
.filter-fiscal-year-container-semantic,
.filter-customer-entity-container-semantic,
.filter-page-container-semantic {
  @apply relative;
}

.filter-type-button-semantic,
.filter-tags-button-semantic,
.filter-fiscal-year-button-semantic,
.filter-customer-entity-button-semantic,
.filter-page-button-semantic {
  @apply inline-flex items-center px-2 py-1 border border-gray-300 text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50;
}

.filter-type-button-semantic-active,
.filter-tags-button-semantic-active,
.filter-fiscal-year-button-semantic-active,
.filter-customer-entity-button-semantic-active,
.filter-page-button-semantic-active {
  @apply bg-blue-100 text-blue-800 border-blue-300;
}

.filter-type-button-semantic-active:hover,
.filter-tags-button-semantic-active:hover,
.filter-fiscal-year-button-semantic-active:hover,
.filter-customer-entity-button-semantic-active:hover,
.filter-page-button-semantic-active:hover {
  @apply bg-blue-50 text-blue-800 border-blue-300;
}

.filter-type-text-semantic,
.filter-tags-text-semantic,
.filter-fiscal-year-text-semantic,
.filter-customer-entity-text-semantic,
.filter-page-text-semantic {
  @apply text-xs;
}

.filter-type-icon-left-semantic,
.filter-tags-icon-left-semantic,
.filter-fiscal-year-icon-left-semantic,
.filter-type-icon-right-semantic,
.filter-tags-icon-right-semantic,
.filter-fiscal-year-icon-right-semantic,
.filter-customer-entity-icon-right-semantic,
.filter-customer-entity-icon-left-semantic,
.filter-page-icon-left-semantic {
  @apply h-3 w-3;
}

.filter-type-icon-left-semantic,
.filter-tags-icon-left-semantic,
.filter-fiscal-year-icon-left-semantic,
.filter-customer-entity-icon-left-semantic,
.filter-customer-entity-icon-right-semantic,
.filter-page-icon-left-semantic {
  @apply mr-1 text-gray-500;
}

.filter-type-icon-right-semantic,
.filter-tags-icon-right-semantic,
.filter-fiscal-year-icon-right-semantic,
.filter-customer-entity-icon-right-semantic,
.filter-page-icon-right-semantic {
  @apply ml-1;
}

/* Document List & Cards */
.document-count-semantic {
  @apply mb-4 text-sm text-gray-500;
}

.documents-list-semantic {
  @apply bg-white;
}

/* View mode classes */
.documents-list-semantic.list-view .list-grid-content-semantic {
  @apply flex flex-col;
}

/* List view specific styles */
.list-view .document-title-semantic {
  @apply text-base font-medium text-gray-900 max-w-[80%];
}

.list-view .document-metadata-semantic {
  @apply flex justify-between items-start;
}

.list-view .document-details-semantic {
  @apply p-4;
}

/* Grid view */
.documents-list-semantic.grid-view .list-grid-content-semantic {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4;
}

/* Table view */
.documents-list-semantic.table-view {
  @apply flex flex-col;
}

/* Content containers */
.list-grid-content-semantic {
  @apply block w-full;
}

.table-content-semantic {
  @apply hidden w-full;
}

/* Show the appropriate content based on view mode */
.documents-list-semantic.list-view .table-content-semantic {
  @apply hidden;
}

.documents-list-semantic.grid-view .table-content-semantic {
  @apply hidden;
}

.documents-list-semantic.table-view .list-grid-content-semantic {
  @apply hidden;
}

.documents-list-semantic.table-view .table-content-semantic {
  @apply block;
}

/* Table view styles */
.document-table-container-semantic {
  @apply overflow-x-auto;
}

.document-table-semantic {
  @apply w-full bg-white border border-gray-200 divide-y divide-gray-200 rounded-md table-fixed;  
}

.document-table-header-semantic {
  @apply bg-gray-50;
}

.document-table-header-semantic th {
  @apply px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.document-table-th-thumbnail-semantic {
  @apply w-20;
}

.document-table-th-title-semantic {
  @apply w-5/12;
}

.document-table-th-type-semantic {
  @apply w-2/12;
}

.document-table-th-date-semantic {
  @apply w-2/12;
}

.document-table-th-actions-semantic {
  @apply w-2/12;
}

.document-table-row-semantic {
  @apply bg-white hover:bg-gray-50 border-b border-gray-200;
}

.document-table-row-semantic.document-focused {
  @apply bg-blue-50 border-blue-300;
}

.document-table-row-semantic:last-child {
  @apply border-0;
}

.document-table-td-thumbnail-semantic {
  @apply px-4 py-3 whitespace-nowrap;
}

.document-table-thumbnail-semantic {
  @apply h-12 w-12 object-cover rounded;
}

.document-table-placeholder-semantic {
  @apply h-12 w-12 flex items-center justify-center bg-gray-100 rounded;
}

.document-table-placeholder-icon-semantic {
  @apply h-6 w-6 text-gray-400;
}

.document-table-td-title-semantic {
  @apply px-4 py-3;
}

.document-table-title-container-semantic {
  @apply flex flex-col;
}

.document-table-title-semantic {
  @apply text-sm font-medium text-gray-900 truncate;
}

.document-table-preview-semantic {
  @apply text-xs text-gray-500 truncate;
}

.document-table-td-type-semantic {
  @apply px-4 py-3;
}

.document-table-inbox-semantic {
  @apply mt-1;
}

.document-table-td-date-semantic {
  @apply px-4 py-3 whitespace-nowrap text-sm text-gray-500;
}

.document-table-td-actions-semantic {
  @apply px-4 py-3 whitespace-nowrap text-sm text-gray-500;
}

.document-table-actions-semantic {
  @apply flex items-center space-x-2;
}

.table-view-button-semantic,
.table-download-button-semantic {
  @apply p-1.5 border border-gray-300 rounded-md hover:bg-gray-50 inline-flex;
}

.document-card-semantic {
  @apply border border-gray-200 rounded-md mb-4 overflow-hidden hover:shadow-sm transition-shadow;
}

/* Focused document styles */
.document-focused {
  @apply border-blue-400 ring-2 ring-blue-300 shadow-md;
}

/* Focus mode styles */
button.active {
  @apply bg-blue-100 text-blue-800 border-blue-300;
}

.focus-mode-overlay {
  @apply fixed inset-0 bg-black opacity-0 pointer-events-none z-40 transition-all duration-300;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
}

.focus-mode-overlay.active {
  @apply opacity-70;
}

.focus-mode-overlay.active.no-focus {
  @apply opacity-30;
}

.focus-spotlight {
  @apply relative z-50 bg-white ring-4 ring-blue-400 shadow-xl;
  position: relative;
  z-index: 50 !important;
}

/* Grid view card styles */
.grid-view .document-card-semantic {
  @apply mb-0 h-full flex flex-col;
}

.grid-view .document-card-semantic .flex {
  @apply flex-col h-full;
}

.grid-view .document-thumbnail-semantic {
  @apply w-full h-40;
}

.grid-view .document-thumbnail-image-semantic {
  @apply w-full h-40 object-cover;
}

.grid-view .document-details-semantic {
  @apply p-3 flex flex-col h-full;
}

.grid-view .document-metadata-semantic {
  @apply block;
}

.grid-view .document-title-semantic {
  @apply text-base font-medium text-gray-900 truncate max-w-full;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: calc(100% - 10px);
}

.grid-view .document-tags-semantic {
  @apply mt-1 flex-wrap p-0 flex items-center ml-0;
}

.grid-view .document-preview-semantic {
  @apply mt-2 flex-grow;
  min-height: 2.5rem;
}

.grid-view .document-ocr-preview-semantic {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  @apply text-sm text-gray-600 overflow-hidden;
  max-height: 2.5rem;
}

.grid-view .document-actions-semantic {
  @apply mt-2 pt-2 justify-between border-t border-gray-100 gap-2;
}

.document-thumbnail-semantic {
  @apply flex-shrink-0 w-[148px] h-[148px] flex items-center justify-center;
}

.document-thumbnail-image-semantic {
  @apply w-[148px] h-[148px] object-cover;
}

/* Collection view - square thumbnails */
.collection-view-semantic .documents-list-semantic.grid-view .document-thumbnail-semantic {
  @apply w-full;
  aspect-ratio: 1 !important;
  height: auto !important;
}

.collection-view-semantic .documents-list-semantic.grid-view .document-thumbnail-image-semantic {
  @apply w-full h-full object-cover;
}

.document-placeholder-semantic {
  @apply w-full h-full flex items-center justify-center;
}

.document-text-placeholder-icon-semantic,
.document-image-placeholder-icon-semantic {
  @apply h-12 w-12 text-gray-400;
}

.document-details-semantic {
  @apply flex-1 p-4 overflow-hidden flex flex-col;
}

.document-metadata-semantic {
  @apply w-full;
}

.document-tags-semantic {
  @apply flex items-center;
}

.list-view .document-tags-semantic {
  @apply ml-2 flex-shrink-0;
}

.document-type-badge-semantic {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium overflow-hidden;
}

.document-type-text-semantic {
  @apply text-xs;
}

.document-entity-badge-semantic {
  @apply ml-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium truncate;
}

.document-entity-text-semantic {
  @apply text-xs;
}

.document-inbox-badge-semantic,
.document-unclassified-badge-semantic {
  @apply ml-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-red-100 text-red-800;
}

.document-inbox-text-semantic {
  @apply text-xs;
}

.document-title-semantic {
  @apply text-base font-medium text-gray-900;
}

.document-preview-semantic {
  @apply mt-2 flex-grow;
}

.document-ocr-preview-semantic {
  /* fixed width font */
  font-family: monospace;
  @apply text-sm text-gray-600 overflow-hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.document-no-ocr-semantic {
  @apply text-sm text-gray-500 italic overflow-hidden;
}

.document-ocr-text-semantic {
  @apply text-sm;
}

.document-actions-semantic {
  @apply mt-auto pt-2 flex items-center gap-2;
}

.document-action-form-semantic {
  display: contents;
}

.view-button-semantic,
.download-button-semantic,
.restore-button-semantic,
.delete-button-semantic,
.similar-button-semantic {
  @apply inline-flex items-center px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-100 rounded border border-gray-300;
}

.button-icon-semantic {
  @apply h-4 w-4;
}

.button-text-semantic {
  @apply text-xs ml-1;
}

.similar-button-semantic {
  @apply ml-auto opacity-50;
}

/* Grid view buttons */
.grid-view .document-actions-semantic {
  @apply justify-between;
}

.grid-view .view-button-semantic,
.grid-view .download-button-semantic,
.grid-view .restore-button-semantic {
  @apply flex-1 justify-center;
}

.grid-view .delete-button-semantic {
  @apply w-8 h-8 p-1 justify-center flex-shrink-0;
}

/* Hide button text in grid view - icons only */
@media (max-width: 2095px) {
  .grid-view .button-text-semantic {
    display: none;
  }
}

/* Entity navigation */
.entity-navigation-semantic {
  @apply flex flex-wrap gap-2 mb-4;
}

.entity-nav-link-semantic {
  @apply inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md text-gray-600 bg-gray-100 hover:bg-gray-200 transition-colors;
}

.entity-nav-link-semantic.active {
  @apply bg-blue-500 text-white;
}

.entity-nav-text-semantic {
  @apply whitespace-nowrap;
}

/* Empty State */
.empty-state-semantic {
  @apply text-center py-12 bg-white border border-gray-200 rounded-lg;
}

.empty-state-icon-semantic {
  @apply mx-auto h-12 w-12 text-gray-400;
}

.empty-title-semantic {
  @apply mt-2 text-sm font-medium text-gray-900;
}

.empty-description-semantic {
  @apply mt-1 text-sm text-gray-500;
}

.empty-state-upload-link-semantic {
  @apply text-green-600 hover:text-green-800 underline cursor-pointer font-medium;
}

/* Document Show Page */
.document-show-semantic {
  @apply w-full;
}

.document-header-semantic {
  @apply flex justify-between items-start mb-0;
}

.document-title-semantic {
  @apply text-xl font-medium text-gray-900 truncate max-w-full;
}

.close-button-semantic,
.previous-document-button-semantic,
.next-document-button-semantic {
  @apply p-2 border border-gray-300 rounded-md text-gray-500 hover:bg-gray-50 inline-flex relative;
  /* Group class is manually added */
  position: relative;
}

.close-icon-semantic,
.previous-document-icon-semantic,
.next-document-icon-semantic {
  @apply h-4 w-4;
}

.keyboard-shortcut-tooltip-semantic {
  @apply absolute top-full mt-2 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 transition-opacity whitespace-nowrap z-20 shadow-lg;
}

/* Manual group hover behavior */
.close-button-semantic:hover .keyboard-shortcut-tooltip-semantic,
.previous-document-button-semantic:hover .keyboard-shortcut-tooltip-semantic,
.next-document-button-semantic:hover .keyboard-shortcut-tooltip-semantic {
  opacity: 1;
}

.keyboard-shortcut-text-semantic {
  @apply text-xs;
}

.previous-document-button-disabled-semantic,
.next-document-button-disabled-semantic {
  @apply p-2 border border-gray-300 rounded-md text-gray-300 cursor-not-allowed;
}

.previous-document-icon-disabled-semantic,
.next-document-icon-disabled-semantic {
  @apply h-4 w-4;
}

/* Document Actions Grid Layout */
.document-actions-grid {
  @apply grid grid-cols-1 gap-3 max-w-md;
}

.classify-button-semantic,
.reprocess-button-semantic,
.generate-thumbnail-button-semantic,
.classify-document-button-semantic,
.reextract-text-button-semantic {
  @apply inline-flex items-center px-4 py-3 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-200 justify-center;
}

.classify-icon-semantic,
.reprocess-icon-semantic,
.generate-thumbnail-icon-semantic,
.classify-document-icon-semantic,
.reextract-text-icon-semantic {
  @apply mr-1 h-4 w-4;
}

.classify-text-semantic,
.reprocess-text-semantic,
.generate-thumbnail-text-semantic,
.classify-document-text-semantic,
.reextract-text-text-semantic {
  @apply text-sm;
}

/* Document Content Area */
.document-content-semantic {
  @apply flex gap-2;
}

.document-form-column-semantic {
  @apply w-1/3;
}

.document-form-container-semantic {
  @apply bg-white border border-gray-200 rounded-md overflow-hidden mb-4;
}

.document-form-actions-semantic {
  @apply flex justify-between items-center border-b border-gray-200 p-2;
}

.form-nav-buttons-semantic {
  @apply flex space-x-1;
}

.form-close-button-semantic,
.form-previous-button-semantic,
.form-next-button-semantic {
  @apply p-2 text-gray-500 hover:bg-gray-100 rounded border border-gray-300 inline-flex relative;
  /* Group class is manually added */
  position: relative;
}

.tags-form-container-semantic {
  @apply mb-8;
}

.form-close-icon-semantic,
.form-previous-icon-semantic,
.form-next-icon-semantic {
  @apply h-4 w-4;
}

.form-shortcut-tooltip-semantic {
  @apply absolute top-full mt-2 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 transition-opacity whitespace-nowrap z-20 shadow-lg;
}

/* Manual group hover behavior for form shortcuts */
.form-close-button-semantic:hover .form-shortcut-tooltip-semantic,
.form-previous-button-semantic:hover .form-shortcut-tooltip-semantic,
.form-next-button-semantic:hover .form-shortcut-tooltip-semantic {
  opacity: 1;
}

.form-shortcut-text-semantic {
  @apply text-xs;
}

.form-previous-button-disabled-semantic,
.form-next-button-disabled-semantic {
  @apply p-2 text-gray-300 cursor-not-allowed rounded border border-gray-300;
}

.form-previous-icon-disabled-semantic,
.form-next-icon-disabled-semantic {
  @apply h-4 w-4;
}

.form-action-buttons-semantic {
  @apply flex space-x-2;
}

/* Top form buttons (square icon style) */
.form-discard-button-top-semantic {
  @apply p-2 text-gray-600 hover:bg-gray-100 rounded border border-gray-300 flex items-center justify-center w-8 h-8 relative;
}

.form-save-next-button-top-semantic {
  @apply p-2 text-gray-600 hover:bg-gray-100 rounded border border-gray-300 flex items-center justify-center w-8 h-8 relative;
}

.form-save-next-button-top-disabled-semantic {
  @apply p-2 text-gray-400 rounded border border-gray-300 flex items-center justify-center opacity-50 cursor-not-allowed w-8 h-8 relative;
}

.form-save-button-top-semantic {
  @apply p-2 text-white bg-[#1e3a8a] hover:bg-[#1e40af] rounded border border-[#1e3a8a] flex items-center justify-center w-8 h-8 relative;
}

/* Icon styles */
.discard-icon-semantic,
.save-next-icon-semantic,
.save-next-icon-disabled-semantic,
.save-icon-semantic {
  @apply h-5 w-5;
}

/* Tooltips for square buttons */
.discard-tooltip-semantic,
.save-next-tooltip-semantic,
.save-tooltip-semantic {
  @apply absolute whitespace-nowrap bg-gray-800 text-white text-xs rounded py-1 px-2 bottom-full mb-2 left-1/2 transform -translate-x-1/2 opacity-0 transition-opacity duration-200 pointer-events-none;
}

.form-discard-button-top-semantic:hover .discard-tooltip-semantic,
.form-save-next-button-top-semantic:hover .save-next-tooltip-semantic,
.form-save-button-top-semantic:hover .save-tooltip-semantic,
.form-save-next-button-top-disabled-semantic:hover .save-next-tooltip-semantic {
  @apply opacity-100;
}

/* Regular text buttons (bottom of form) */
.form-discard-button-semantic {
  @apply px-4 py-1.5 text-gray-600 hover:bg-gray-100 rounded border border-gray-300 flex items-center;
}

.form-save-next-button-semantic {
  @apply px-4 py-1.5 text-gray-600 hover:bg-gray-100 rounded border border-gray-300 flex items-center;
}

.form-save-next-button-disabled-semantic {
  @apply px-4 py-1.5 text-gray-600 rounded border border-gray-300 flex items-center opacity-50 cursor-not-allowed;
}

.form-save-button-semantic {
  @apply px-4 py-1.5 text-white bg-[#1e3a8a] hover:bg-[#1e40af] rounded border border-[#1e3a8a] flex items-center;
}

.discard-text-semantic,
.save-next-text-semantic,
.save-next-text-disabled-semantic,
.save-text-semantic {
  @apply text-sm;
}

/* Document Tabs */
.document-tabs-semantic {
  @apply border-b border-gray-200;
}

.document-tabs-nav-semantic {
  @apply -mb-px flex;
}

.document-tab-details-semantic {
  @apply border-[#1e3a8a] text-[#1e3a8a] whitespace-nowrap py-3 px-4 border-b-2 font-medium text-sm;
}

.document-tab-content-semantic,
.document-tab-metadata-semantic,
.document-tab-permissions-semantic {
  @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-3 px-4 border-b-2 font-medium text-sm opacity-50 cursor-not-allowed;
}

.document-tab-actions-semantic {
  @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-3 px-4 border-b-2 font-medium text-sm;
}

.tab-text-semantic {
  @apply text-sm;
}

.tab-badge-semantic {
  @apply ml-1 bg-gray-200 text-gray-700 px-1.5 py-0.5 rounded-full text-xs;
}

/* Document Form */
.document-form-content-semantic {
  @apply p-4 overflow-visible;
}

.document-form-field-semantic,
.document-form-field-disabled-semantic {
  @apply w-full;
}

.document-form-field-disabled-semantic {
  @apply opacity-50;
}

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

/* Fiscal Year Warning */
.fiscal-year-warning-semantic {
  @apply bg-yellow-50 border border-gray-200 rounded-b-lg p-1 pt-4 -mt-2 ml-1 mr-1 text-center;
}

.warning-content-semantic {
  @apply flex items-start space-x-2;
}

.warning-icon-semantic {
  @apply h-5 w-5 text-yellow-600 flex-shrink-0 mt-0.5;
}

.warning-text-semantic {
  @apply flex-1;
}

.warning-message-semantic {
  @apply text-sm text-gray-800 mb-0;
}

.warning-link-semantic {
  @apply text-gray-800 underline hover:text-yellow-900 font-medium;
}

.document-title-input-semantic {
  @apply w-full py-2 px-3 bg-white border-white text-base text-gray-900;
}

.document-title-input-semantic:disabled {
  @apply bg-gray-100 text-gray-500 cursor-not-allowed;
}

/* Document Type Field */
.document-type-field-container-semantic {
  @apply flex items-center;
}

.document-type-select-wrapper-semantic,
.document-entity-select-wrapper-semantic {
  @apply relative flex-grow;
}

.document-type-select-semantic,
.document-entity-select-semantic,
.document-fiscal-year-select-semantic {
  @apply w-full appearance-none py-2 px-3 border border-gray-300 bg-white rounded text-base text-gray-900 focus:outline-none focus:ring-0;
}

.document-type-select-semantic:disabled,
.document-entity-select-semantic:disabled,
.document-fiscal-year-select-semantic:disabled {
  @apply bg-gray-100 text-gray-500 border-gray-200 cursor-not-allowed;
}

.document-type-select-semantic:focus-visible {
  /* No focus ring: */
  outline: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
}

/* Disabled state for complex document type selector */
.document-entity-select-wrapper-semantic.disabled {
  @apply opacity-60 pointer-events-none;
}

.document-entity-select-wrapper-semantic.disabled .document-entity-select-semantic {
  @apply bg-gray-100 text-gray-500 border-gray-200 cursor-not-allowed;
}

.document-entity-select-wrapper-semantic.disabled .select-arrow-container-semantic {
  @apply cursor-not-allowed;
}

.document-entity-select-wrapper-semantic.disabled .select-arrow-icon-semantic {
  @apply text-gray-400;
}

/* Disabled state for tags component */
.document-tags-container-semantic.disabled {
  @apply opacity-60 pointer-events-none;
}

.document-tags-container-semantic.disabled .document-title-input-semantic {
  @apply bg-gray-100 text-gray-500 border-gray-200 cursor-not-allowed;
}

.document-type-select-empty-semantic,
.document-entity-select-empty-semantic,
.document-fiscal-year-select-empty-semantic {
  @apply border-gray-700 border-3;
}

.select-arrow-container-semantic {
  @apply absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none;
}

.select-arrow-icon-semantic {
  @apply h-5 w-5 text-gray-400;
}

.add-document-type-button-semantic {
  @apply ml-2 p-1.5 border border-gray-300 rounded bg-white text-gray-500;
}

.add-document-type-icon-semantic {
  @apply h-5 w-5;
}

/* Document Date */
.document-date-container-semantic {
  @apply relative;
}

.document-date-input-semantic {
  @apply w-full py-2 px-3 border border-gray-300 bg-white rounded text-base text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#1e3a8a] focus:border-[#1e3a8a];
}

.date-buttons-container-semantic {
  @apply absolute inset-y-0 right-0 flex items-center pr-2;
}

.date-calendar-button-semantic,
.date-dropdown-button-semantic {
  @apply p-1 text-gray-400;
}

.date-calendar-icon-semantic,
.date-dropdown-icon-semantic {
  @apply h-5 w-5;
}

/* Archive Number */
.document-archive-field-container-semantic {
  @apply flex items-center;
}

.document-archive-input-semantic {
  @apply w-full py-2 px-3 border border-gray-300 bg-white rounded text-base text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#1e3a8a] focus:border-[#1e3a8a];
}

.archive-increment-button-semantic {
  @apply ml-2 px-3 py-1.5 bg-white border border-gray-300 rounded text-lg;
}

/* Correspondent Field */
.document-correspondent-container-semantic {
  @apply flex items-center;
}

.correspondent-input-wrapper-semantic {
  @apply relative flex-grow;
}

.correspondent-input-semantic {
  @apply w-full py-2 px-3 border border-gray-300 bg-white rounded text-base text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#1e3a8a] focus:border-[#1e3a8a] pr-8;
}

.correspondent-clear-container-semantic {
  @apply absolute inset-y-0 right-0 flex items-center pr-2;
}

.correspondent-clear-button-semantic {
  @apply text-gray-400;
}

.correspondent-clear-icon-semantic {
  @apply h-4 w-4;
}

.correspondent-add-button-semantic {
  @apply ml-2 p-1.5 border border-gray-300 rounded bg-white text-gray-500;
}

.correspondent-add-icon-semantic {
  @apply h-5 w-5;
}

/* Storage Path */
.document-storage-container-semantic {
  @apply flex items-center;
}

.storage-input-wrapper-semantic {
  @apply relative flex-grow;
}

.storage-input-semantic {
  @apply w-full py-2 px-3 border border-gray-300 bg-white rounded text-base text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#1e3a8a] focus:border-[#1e3a8a] pr-8;
}

.storage-clear-container-semantic {
  @apply absolute inset-y-0 right-0 flex items-center pr-2;
}

.storage-clear-button-semantic {
  @apply text-gray-400;
}

.storage-clear-icon-semantic {
  @apply h-4 w-4;
}

.storage-add-button-semantic {
  @apply ml-2 p-1.5 border border-gray-300 rounded bg-white text-gray-500;
}

.storage-add-icon-semantic {
  @apply h-5 w-5;
}

/* Tags */
.document-tags-container-semantic {
  @apply relative;
}

.tags-list-semantic {
  @apply flex flex-wrap gap-2 p-2 border border-gray-300 bg-white rounded min-h-[42px];
}

.tag-item-semantic {
  @apply flex items-center rounded px-2 py-1 text-sm;
}

.tag-text-semantic {
  @apply text-sm;
}

.tag-remove-button-semantic {
  @apply ml-1 font-bold text-lg leading-none opacity-60 hover:opacity-100;
}

.tag-remove-icon-semantic {
  @apply h-4 w-4;
}

.tags-actions-semantic {
  @apply absolute top-2 right-2 flex space-x-1;
}

.tags-clear-button-semantic {
  @apply text-gray-400;
}

.tags-clear-icon-semantic {
  @apply h-4 w-4;
}

.tags-suggestions-semantic {
  @apply mt-1 text-xs text-gray-500;
}

.tags-suggestions-label-semantic {
  @apply text-xs;
}

/* Tag Selector Styles */
.tags-container {
  @apply flex flex-col overflow-hidden;
}

.tags-list-area {
  @apply flex-1 overflow-y-auto;
}

.tag-search-area {
  @apply flex-shrink-0 border-t border-gray-200;
}

.suggestion-header {
  @apply px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b border-gray-200;
}

.suggestion-item {
  @apply px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 border-b border-gray-100 last:border-b-0;
}

.suggestion-item.highlighted,
.suggestion-item:hover {
  @apply bg-gray-100 border-gray-300;
}

.tag-selector-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md;
}

.tags-selection-container {
  @apply p-3 border border-gray-300 rounded-md bg-white;
}

/* Document tag badge for index view */
.document-tag-badge-semantic {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium;
  /* Background and text colors will be applied dynamically */
}

.document-tag-text-semantic {
  @apply text-xs;
}

.tag-suggestion-semantic {
  @apply text-[#1D412F] hover:underline;
}

/* Form Footer */
.form-footer-semantic {
  @apply mt-19 flex justify-end space-x-2;
}

.form-discard-link-semantic {
  @apply px-5 py-2.5 border border-gray-300 rounded text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 inline-flex items-center;
}

/* Document Preview Column */
.document-preview-column-semantic {
  @apply w-2/3;
}

.document-preview-container-semantic {
  @apply bg-white border border-gray-200 rounded-md;
}

.document-preview-loading-semantic {
  @apply h-64 flex items-center justify-center p-4;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.preview-loading-message-semantic {
  @apply text-sm text-gray-500;
}

.document-ocr-text-semantic {
  @apply mt-4 p-4 border-t border-gray-200;
}

.ocr-text-heading-semantic {
  @apply text-base font-semibold text-gray-900 mb-2;
}

.ocr-text-content-semantic {
  @apply text-gray-600 max-h-96 overflow-y-auto bg-gray-100 p-4 rounded-md;
  /* Prose styles */
  max-width: none;
  color: #374151;
  font-size: 0.875rem;
  line-height: 1.7142857;
}

.ocr-text-formatted-semantic {
  /* font monospace */
  font-family: monospace;
  @apply text-sm;
}

/* Processing History */
.processing-history-semantic {
  @apply mt-8 bg-white border border-gray-200 rounded-md overflow-hidden;
}

.processing-history-header-semantic {
  @apply px-4 py-3 border-b border-gray-200;
}

.processing-history-title-semantic {
  @apply text-base font-semibold text-gray-900;
}

.processing-history-list-semantic {
  @apply divide-y divide-gray-200;
}

.empty-processing-history-semantic {
  @apply py-4 px-4 text-sm text-gray-500;
}

.empty-history-message-semantic {
  @apply text-sm;
}

/* Filter dropdowns */
.filter-dropdown-semantic {
  @apply absolute mt-1 w-68 rounded-md shadow-lg bg-white ring-1 ring-black z-10;
}

.dropdown-header-semantic {
  @apply px-4 py-2 border-b border-gray-200;
}

.dropdown-header-semantic h3 {
  @apply text-sm font-medium text-gray-700;
}

.dropdown-divider-semantic {
  @apply border-t border-gray-100;
}

.dropdown-items-semantic {
  @apply py-1 max-h-60 overflow-auto;
}

.dropdown-item-semantic {
  @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900;
}

.dropdown-item-semantic.active {
  @apply bg-blue-50 text-blue-700;
}

/* Active filters */
.active-filters-semantic {
  @apply flex items-center flex-wrap gap-2 ml-2;
}

.active-filters-label-semantic {
  @apply text-xs text-gray-500 mr-1;
}

.active-filter-chip-semantic {
  @apply flex items-center px-2 py-1 rounded-md bg-blue-50 text-blue-700 text-xs;
}

.chip-remove-semantic {
  @apply ml-1.5 text-blue-400 hover:text-blue-600 font-medium text-lg leading-none;
}

.clear-all-filters-semantic {
  @apply text-xs text-gray-500 hover:text-gray-700 mr-2;
}

.alert {
  @apply mb-4;
}

.alert-danger {
  @apply bg-red-100 text-red-800 border-red-400 p-4 rounded-md;
}

.alert-success {
  @apply bg-green-100 text-green-800 border-green-400 p-4 rounded-md;
}

.alert-warning {
  @apply bg-yellow-100 text-yellow-800 border-yellow-400 p-4 rounded-md;
}

.alert-notice {
  @apply bg-blue-100 text-blue-800 border-blue-400 p-4 rounded-md;
}

/* Trial Banner Styles */
.trial-banner-semantic {
  @apply hidden bg-blue-50 border-l-4 border-blue-400 p-4 mr-10 transition-all duration-300 ease-in-out;
  opacity: 1;
  transform: translateY(0);
}

.trial-banner-semantic.visible {
  @apply block;
}

.trial-banner-semantic.dismissing {
  opacity: 0;
  transform: translateY(-10px);
}

.trial-banner-container-semantic {
  @apply flex items-center;
}

.trial-banner-icon-container-semantic {
  @apply flex-shrink-0;
}

.trial-banner-icon-semantic {
  @apply h-5 w-5 text-blue-400;
}

.trial-banner-content-semantic {
  @apply ml-3 flex-1;
}

.trial-banner-message-semantic {
  @apply text-sm text-blue-700;
}

.trial-banner-actions-semantic {
  @apply ml-auto pl-3;
}

.trial-banner-dismiss-button-semantic {
  @apply bg-blue-50 rounded-md p-1.5 text-blue-400 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-50 focus:ring-blue-600 flex items-center;
}

.trial-banner-dismiss-text-semantic {
  @apply sr-only;
}

.trial-banner-dismiss-icon-semantic {
  @apply w-4 h-4;
}

/* Delete button styles */
.delete-button-semantic {
  @apply bg-red-500 hover:bg-red-600 text-white border border-red-500 hover:border-red-600 px-4 py-3 rounded-lg text-sm flex items-center transition-colors duration-200 justify-center;
}

.delete-icon-semantic {
  @apply w-4 h-4 mr-1;
}

.delete-text-semantic {
  @apply hidden sm:inline;
}

/* Restore button styles */
.restore-button-semantic {
  @apply bg-green-500 hover:bg-green-600 text-white border border-green-500 hover:border-green-600 px-3 py-1.5 rounded-md text-sm flex items-center transition-colors;
}

.restore-icon-semantic {
  @apply w-4 h-4 mr-1;
}

.restore-text-semantic {
  @apply hidden sm:inline;
}