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

/* Custom styles for ConfMap */
@layer base {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer components {
  .btn-primary {
    background-color: rgb(31 41 55);
    color: white;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }
  
  .btn-primary:hover {
    background-color: rgb(17 24 39);
  }
  
  .btn-secondary {
    background-color: rgb(243 244 246);
    color: rgb(55 65 81);
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }
  
  .btn-secondary:hover {
    background-color: rgb(229 231 235);
    color: rgb(17 24 39);
  }
  
  .btn-secondary.active {
    background-color: rgb(229 231 235);
    color: rgb(17 24 39);
    border-width: 2px;
    border-color: rgb(209 213 219);
  }
  
  .btn-secondary:not(.active) {
    background-color: rgb(243 244 246);
    color: rgb(107 114 128);
  }
  
  .search-input {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid rgb(18, 19, 20);
    border-radius: 0.5rem;
    outline: none;
  }
  
  .search-input:focus {
    outline: none;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) rgb(107 114 128);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    border-color: transparent;
  }
  
  .file-upload {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    color: rgb(107 114 128);
  }
  
  .file-upload::file-selector-button {
    margin-right: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 0;
    font-size: 0.875rem;
    font-weight: 500;
    background-color: rgb(243 244 246);
    color: rgb(55 65 81);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }
  
  .file-upload::file-selector-button:hover {
    background-color: rgb(229 231 235);
  }

  /* Professional Menu Bar Styling */
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  .btn-secondary-compact {
    @apply bg-white border border-gray-300 text-gray-800 px-4 rounded-lg text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200;
    height: 36px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  }

  .search-input-compact {
    @apply w-64 px-4 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 placeholder-gray-400;
    height: 36px; /* Fixed height */
  }

  .btn-primary-compact {
    @apply bg-blue-600 text-white px-4 py-0 rounded-lg text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 shadow-sm leading-none;
    height: 36px; /* Fixed height */
    min-width: 120px; /* Ensure consistent width feel */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
  }

  .dropdown-select {
    @apply bg-white border border-gray-300 rounded-lg px-3 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 cursor-pointer;
    height: 36px; /* Fixed height */
  }

  /* Enhanced Controls Section */
  .controls-section {
    border-bottom: 1px solid rgb(229 231 235);
    padding: 1rem 1.5rem;
    background: linear-gradient(to right, rgb(249 250 251), rgb(255 255 255));
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  .controls-section .flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    min-height: 44px; /* Ensure consistent height */
    flex-wrap: nowrap; /* Prevent wrapping */
  }

  .controls-section .flex > div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 44px; /* Fixed height for all control groups */
  }

  .controls-section label {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(55 65 81);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Icon styling for better visual hierarchy */
  .controls-section .emoji-icon {
    font-size: 1.125rem;
    opacity: 0.8;
  }

  /* Fullscreen styling - hide header mode */
  .fullscreen-mode header {
    display: none !important;
  }

  .fullscreen-mode #mindmap-container {
    height: calc(100vh - 80px) !important;
    min-height: calc(100vh - 80px) !important;
  }

  /* Adjust main container when in fullscreen */
  .fullscreen-mode main {
    height: 100vh;
  }

  .btn-fullscreen {
    @apply bg-gray-100 text-gray-700 px-4 py-0 rounded-lg text-sm font-medium hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition-all duration-200 leading-none;
    height: 36px;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    vertical-align: middle;
    appearance: none;
    -webkit-appearance: none;
  }

  /* Idle State Message Styling */
  #idle-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgb(107 114 128);
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease-in-out;
  }

  #idle-message .mb-4 {
    margin-bottom: 1rem;
  }

  #idle-message svg {
    width: 4rem;
    height: 4rem;
    margin: 0 auto;
    color: rgb(209 213 219);
  }

  #idle-message h3 {
    font-size: 1.25rem;
    font-weight: 500;
    color: rgb(75 85 99);
    margin-bottom: 0.5rem;
  }

  #idle-message p {
    color: rgb(107 114 128);
    max-width: 28rem;
    margin: 0 auto;
  }

  #idle-message.hidden {
    opacity: 0;
    pointer-events: none;
  }

  /* Idle-state grid background for the mind map container - matches ECharts createGridPattern */
  .grid-bg {
    /* ECharts grid background fill */
    background-color: #f8fafc; /* same as canvas fill */
    /* 20px cells with visually lighter lines to approximate 0.5px canvas strokes */
    background-image:
      repeating-linear-gradient(0deg, rgba(226, 232, 240, 0.5) 0, rgba(226, 232, 240, 0.4) 1px, transparent 1px, transparent 20px),
      repeating-linear-gradient(90deg, rgba(226, 232, 240, 0.5) 0, rgba(226, 232, 240, 0.4) 1px, transparent 1px, transparent 20px);
  }
}

@layer utilities {
  .animate-fadeIn {
    animation: fadeIn 0.5s ease-in-out forwards;
  }
  
  /* Column color indicators */
  .column-level-0 { background-color: #d6dffc; }  /* Lavender Blue */
  .column-level-1 { background-color: #b8e0d2; }  /* Mint Green */
  .column-level-2 { background-color: #ffe6b8; }  /* Soft Amber */
  .column-level-3 { background-color: #a9e2da; }  /* Aqua Teal */
  .column-level-4 { background-color: #ffd1b3; }  /* Peach */
  .column-level-5 { background-color: #c0f1ff; }  /* Light Cyan */
  .column-level-6 { background-color: #ffb6b9; }  /* Coral Pink */
  .column-level-7 { background-color: #a7d0f2; }  /* Sky Blue */
  .column-level-8 { background-color: #ffe8a3; }  /* Golden Yellow */
  .column-level-9 { background-color: #c7e9c0; }  /* Sage Green */
  .column-level-10 { background-color: #ffcfa8; } /* Apricot */
  .column-level-11 { background-color: #b5b3ff; } /* Soft Indigo */
  .column-level-12 { background-color: #f7c6e0; } /* Light Rose */
  
  /* Enhanced column color utilities */
  .column-color-0 { color: #d6dffc; }
  .column-color-1 { color: #b8e0d2; }
  .column-color-2 { color: #ffe6b8; }
  .column-color-3 { color: #a9e2da; }
  .column-color-4 { color: #ffd1b3; }
  .column-color-5 { color: #c0f1ff; }
  .column-color-6 { color: #ffb6b9; }
  .column-color-7 { color: #a7d0f2; }
  .column-color-8 { color: #ffe8a3; }
  .column-color-9 { color: #c7e9c0; }
  .column-color-10 { color: #ffcfa8; }
  .column-color-11 { color: #b5b3ff; }
  .column-color-12 { color: #f7c6e0; }
  

}
