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

.bg-c-orange {
  background-color: #fd602e;
}

.hover\:bg-c-orange:hover {
  background-color: #fd602e;
}

#menu-overlay {
  transition: opacity 300ms;
  opacity: 0;
  pointer-events: none;
  background: rgba(0,0,0,0.45);
}

@media (min-width: 1024px) {
    #menu-overlay {
        display: none;
    }
    #sliding-menu {
        box-shadow: none;
    }
    #menu-close {
        visibility: hidden;
    }
    #broker-info-icon {
        display: block;
    }
}

#sliding-menu {
    transform: translateX(-100%);
    transition: transform 300ms;
}
.sidebar-open #sliding-menu { transform: translateX(0); }

@media (max-width: 1023px) {
    .sidebar-open #menu-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (min-width: 1024px) {
    .sidebar-open #main-content {
      margin-left: 320px;
    }
}
/* lock scroll on mobile when sidebar open */
.sidebar-lock-scroll {
    overflow: hidden;
}

.sidebar-preload #sliding-menu {
    transition: none;
}

@media (max-width: 1024px) {
    #layout-toggle {
        display: none;
    }
}

@media (max-width: 375px) {
    #logo-icon {
        display: block;
    }

    #logo-text {
        display: none
    }
}

.broker-active {
    background-color: rgb(34 197 94); /* green-500 */
}

.broker-inactive {
    background-color: rgb(239 68 68); /* red-500 */
}

@layer components {
    .card {
        @apply bg-white rounded-lg border border-gray-200 shadow-sm;
    }
    .card-header {
        @apply px-6 py-4 border-b border-gray-200;
    }
    .card-content {
        @apply px-6 py-4;
    }
    .metric-value {
        @apply text-3xl font-bold text-gray-900;
    }
    .metric-label {
        @apply text-sm font-medium text-gray-500 mb-2;
    }
    .status-dot {
        @apply w-3 h-3 rounded-full;
    }
    .chart-container {
        position: relative;
        height: 200px;
        width: 100%;
    }
    .nav-btn {
        @apply inline-flex items-center justify-center w-8 h-8 text-gray-500 bg-white border border-gray-300 rounded hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
    }
    .nav-btn:hover:not(:disabled) {
        @apply shadow-sm;
    }
    .nav-btn.active {
        @apply bg-blue-50 border-blue-300 text-blue-600;
    }
    .nav-separator {
        @apply w-px h-6 bg-gray-300 mx-2;
    }
    .nav-btn svg {
        pointer-events: none;
    }
}
