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

.btn-primary {
  @apply px-4 py-2 border border-transparent cursor-pointer text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

.btn-primary-info {
  @apply inline-flex items-center px-4 py-2 border border-transparent cursor-pointer rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-150;
}

.btn-primary-danger {
  @apply inline-flex items-center px-4 py-2 border border-transparent cursor-pointer rounded-lg shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-150;
}

.btn-secondary {
  @apply inline-flex items-center justify-center px-5 py-2 cursor-pointer border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-150;
}

.btn-secondary-fw {
  @apply inline-flex items-center justify-center px-5 py-2 cursor-pointer border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-150 min-w-52;
}

.header-btn {
  @apply text-gray-800 hover:text-indigo-700 font-medium transition-colors duration-200 relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-indigo-600;
}

.btn-link {
  @apply inline-flex items-center px-3 py-1 rounded-md border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 shadow-sm;
}

.link {
  @apply inline-flex items-center text-blue-500 hover:text-blue-800 underline;
}

.btn-secondary-auto-w {
  @apply inline-flex items-center justify-center px-3 py-1 cursor-pointer border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-150;
}

.select {
  @apply min-w-52 text-gray-900 border rounded mt-2 px-2 py-1 bg-white;
}

.form-input {
  @apply w-full ml-5 px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-100 focus:border-blue-400 transition-colors duration-200;
}
.login-input {
  @apply appearance-none block w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors duration-200;
}

.form-input-2 {
  @apply w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded focus:ring-1 focus:ring-teal-300 focus:border-teal-400 text-sm transition-colors duration-200;
}

.icon-wrapper {
  @apply bg-gradient-to-r from-green-500 to-teal-500 w-10 h-10 rounded-lg flex items-center justify-center text-white shadow-sm;
}

.icon-wrapper-g {
  @apply bg-gradient-to-r from-blue-500 to-indigo-500 w-10 h-10 rounded-lg flex items-center justify-center text-white shadow-sm;
}

.budget-input {
  @apply pl-7 block w-full rounded-md border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm py-1.5;
}

.status-badge {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 border border-gray-700;
}

.status-badge-draft {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 border border-yellow-700;
}

.status-badge-approved {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 border border-green-700;
}

.status-badge-revise {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-blue-800 border border-blue-700;
}

.status-badge-submitted {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-red-800 border border-red-700;
}

.btn-container {
  @apply font-medium flex items-center justify-center space-x-4;
}

.status-dot {
  @apply w-2.5 h-2.5 mr-2 rounded-full bg-gray-400 border border-gray-600;
}

.status-dot-draft {
  @apply w-2.5 h-2.5 mr-2 rounded-full bg-yellow-400 border border-yellow-600;
}

.status-dot-approved {
  @apply w-2.5 h-2.5 mr-2 rounded-full bg-green-400 border border-green-600;
}

.status-dot-submitted {
  @apply w-2.5 h-2.5 mr-2 rounded-full bg-red-400 border border-red-600;
}

.status-dot-revise {
  @apply w-2.5 h-2.5 mr-2 rounded-full bg-blue-400 border border-blue-600;
}

.status-dot-archived {
  @apply w-2.5 h-2.5 mr-2 rounded-full bg-gray-400 border border-gray-600;
}

.filter-select {
  @apply mt-1.5 min-w-52 leading-none border rounded bg-white w-full;
}
.alert {
  @apply py-2 px-3 mb-5 text-green-600 bg-green-50 border border-green-200 rounded-md font-medium;
}
.checkbox-label {
  @apply inline-block items-center text-left border border-gray-200 rounded py-1 my-1 mx-2 px-2 peer-checked:bg-green-500 transition-colors;
}
.checkbox-label.active {
  @apply bg-blue-50 cursor-pointer;
}
.checkbox-label.enabled {
  @apply cursor-pointer;
}
.submenu {
  @apply absolute opacity-0 invisible bg-white shadow-md mt-1 w-72 rounded-lg transition-opacity duration-300 ease-in-out group-hover:opacity-100 group-hover:visible z-50;
}
.submenu-item {
  @apply block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100 border-b border-gray-100 rounded-lg;
}

@media print {
  .no-print{
    display: none !important;
  }
  body{
    margin: 0;
    padding: 0;
    font-size: 10pt;
    color: #000;
    background-color: #fff;
  }
}