/*
 * Custom CSS for Clarify Dashboard
 * Core component styles and utilities
 *
 * DEPENDENCY: Requires design-tokens.css to be loaded first
 * Variables are now centralized in design-tokens.css
 */

/* ============================================
   Base Body
   ============================================ */

body {
    font-family: var(--font-family);
    background-color: var(--bg-body);
}

/* ============================================
   Navbar
   ============================================ */

.navbar-brand {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xl);
}

/* ============================================
   Cards
   ============================================ */

.card {
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ============================================
   Tables
   ============================================ */

.table-hover tbody tr:hover {
    background-color: var(--bg-table-stripe);
    cursor: pointer;
}

/* ============================================
   Badges
   ============================================ */

.badge {
    font-weight: var(--font-weight-medium);
    padding: 0.35em 0.65em;
}

/* ============================================
   Status Indicators (Legacy - prefer status-colors.css)
   ============================================ */

.status-fresh {
    color: var(--color-success);
}

.status-stale {
    color: var(--color-warning);
}

.status-none {
    color: var(--color-danger);
}

/* ============================================
   Loading Spinner
   ============================================ */

.spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--color-brand);
    border-radius: var(--radius-full);
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   Opacity Utilities
   ============================================ */

.opacity-25 {
    opacity: 0.25;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    .display-5 {
        font-size: 2rem;
    }

    .card-body h2 {
        font-size: 1.5rem;
    }
}

/* ============================================
   Chart Container
   ============================================ */

.chart-container {
    position: relative;
    height: 400px;
}

/* ============================================
   Footer
   ============================================ */

footer {
    margin-top: auto;
}

/* ============================================
   Code Blocks
   ============================================ */

code {
    color: #e83e8c;
    background-color: var(--bg-hover);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 87.5%;
    font-family: var(--font-family-mono);
}

/* ============================================
   Search Form
   ============================================ */

.input-group input[type="text"] {
    border-right: 0;
}

.input-group .btn {
    border-left: 0;
}

/* ============================================
   Pagination
   ============================================ */

.pagination {
    margin-bottom: 0;
}

/* ============================================
   Custom Scrollbar for Tables
   ============================================ */

.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--bg-hover);
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: var(--radius-sm);
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ============================================
   Utility Classes
   ============================================ */

/* Text truncation */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   Transitions
   ============================================ */

.transition-all {
    transition: all var(--transition-normal);
}

.transition-colors {
    transition: color var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal);
}

/* ============================================
   Click/Touch States
   ============================================ */

.clickable {
    cursor: pointer;
}

.clickable:active {
    transform: scale(0.98);
}

/* ============================================
   Selection Highlight
   ============================================ */

::selection {
    background-color: var(--color-brand-light);
    color: var(--text-inverse);
}

::-moz-selection {
    background-color: var(--color-brand-light);
    color: var(--text-inverse);
}