/* Custom styles for NSE Options Pricer */

/* Navigation Links */
.nav-link {
    @apply inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium bg-white/10 text-white hover:bg-white/20 transition-all;
}

.nav-link-active {
    @apply bg-white/25 text-white;
}

.mobile-nav-link {
    @apply block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-white/70 hover:bg-white/10 hover:border-white/30 hover:text-white;
}

.mobile-nav-link-active {
    @apply border-white bg-white/5 text-white;
}

/* Buttons */
.btn-primary {
    @apply px-4 py-2 bg-nse-primary hover:bg-nse-secondary text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all focus:outline-none focus:ring-2 focus:ring-nse-light focus:ring-offset-2;
}

.btn-secondary {
    @apply px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-900 dark:text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all focus:outline-none focus:ring-2 focus:ring-gray-400;
}

.btn-danger {
    @apply px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
}

/* Form Inputs */
.input-field {
    @apply w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg px-3 py-2 focus:ring-2 focus:ring-nse-light focus:border-transparent outline-none transition-all;
}

.input-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
}

/* Cards */
.card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700;
}

.card-header {
    @apply text-xl font-bold text-gray-900 dark:text-white mb-4;
}

/* Metric Cards */
.metric-card {
    @apply bg-white dark:bg-gray-800/20 border border-nse-secondary rounded-lg p-4 transition-all hover:shadow-lg;
}

.metric-label {
    @apply text-sm text-gray-600 dark:text-gray-400 mb-1;
}

.metric-value {
    @apply text-2xl font-bold text-gray-900 dark:text-white;
}

/* Value Boxes */
.value-box-call {
    @apply bg-gradient-to-r from-blue-600 to-blue-500 p-6 rounded-lg text-white text-center shadow-lg hover:shadow-xl transition-all;
}

.value-box-put {
    @apply bg-gradient-to-r from-red-600 to-red-500 p-6 rounded-lg text-white text-center shadow-lg hover:shadow-xl transition-all;
}

.value-box-label {
    @apply text-sm opacity-90 mb-2;
}

.value-box-value {
    @apply text-3xl font-bold;
}

/* Tables */
.table-container {
    @apply overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700;
}

.data-table {
    @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
}

.data-table thead {
    @apply bg-gray-50 dark:bg-gray-800;
}

.data-table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider;
}

.data-table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300;
}

.data-table tbody tr:hover {
    @apply bg-gray-50 dark:bg-gray-800/50;
}

/* Chat Messages */
.chat-container {
    @apply h-[600px] overflow-y-auto space-y-4 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700;
}

.chat-message {
    @apply flex gap-3;
}

.chat-message-user {
    @apply justify-end;
}

.chat-bubble {
    @apply max-w-[80%] rounded-lg p-4 shadow-md;
}

.chat-bubble-user {
    @apply bg-nse-primary text-white;
}

.chat-bubble-assistant {
    @apply bg-white dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700;
}

.chat-bubble-timestamp {
    @apply text-xs opacity-70 mt-1;
}

/* Loading Spinner */
.spinner {
    @apply inline-block w-8 h-8 border-4 border-gray-300 border-t-nse-primary rounded-full animate-spin;
}

/* Tabs */
.tab-list {
    @apply flex border-b border-gray-200 dark:border-gray-700;
}

.tab-button {
    @apply px-6 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white border-b-2 border-transparent hover:border-gray-300 dark:hover:border-gray-600 transition-all;
}

.tab-button-active {
    @apply text-nse-primary dark:text-nse-light border-nse-primary dark:border-nse-light;
}

.tab-content {
    @apply hidden;
}

.tab-content-active {
    @apply block;
}

/* Market Status Badge */
.market-status-open {
    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
}

.market-status-closed {
    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-500;
}

/* Responsive Sidebar */
.sidebar {
    @apply w-full lg:w-80 bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 border border-gray-100 dark:border-gray-700 h-fit;
}

/* Main Content Area */
.main-content {
    @apply flex-1 space-y-6;
}

/* Tooltips */
.tooltip {
    @apply absolute z-10 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg shadow-lg opacity-0 invisible transition-opacity duration-200;
}

.tooltip-visible {
    @apply opacity-100 visible;
}

/* Filter Chips */
.chip {
    @apply inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-nse-primary text-white;
}
.chip-active {
    @apply bg-nse-primary text-white;
}
.chip button {
    @apply ml-2 text-white/70 hover:text-white text-xs;
}

/* Collapsible Controls */
.collapsible-hidden {
    display: none;
}

/* Help Tooltips */
.help-tooltip {
    @apply inline-flex items-center justify-center w-4 h-4 text-xs rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 cursor-help;
}
.help-tooltip:hover::after {
    content: attr(data-tip);
    @apply absolute z-50 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded shadow-lg whitespace-nowrap;
    transform: translateY(-100%) translateX(-50%);
    left: 50%;
    top: -4px;
}
.help-tooltip {
    position: relative;
}

/* Dropdown Menu */
.dropdown-menu {
    @apply absolute top-full left-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-50 min-w-[120px] max-h-48 overflow-y-auto;
}
.dropdown-menu button {
    @apply block w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700;
}
.dropdown-menu.hidden {
    display: none;
}