/**
 * PHASE 2 - Card Unification
 * Unified card styles across all pages using design tokens
 */

@import url('design-tokens.css');

/* ============================================
   UNIFIED CARD STYLES
   ============================================ */

/* Base card class - applies to ALL card-like elements */
.card,
.calculator-card,
.calculator-card-home,
.category-card,
.subcategory-card,
.related-calculator-card {
    background-color: var(--surface-card) !important;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    border: var(--border-width) solid var(--border-color);
    transition: box-shadow var(--transition-normal), 
                transform var(--transition-normal),
                border-color var(--transition-normal);
    padding: var(--spacing-lg);
    position: relative;
    overflow: hidden;
}

/* Card hover behavior - unified across all cards */
.card:hover,
.calculator-card:hover,
.calculator-card-home:hover,
.category-card:hover,
.subcategory-card:hover,
.related-calculator-card:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-4px);
    border-color: var(--accent-primary);
}

/* Card body padding */
.card-body {
    padding: var(--spacing-lg);
    background-color: var(--surface-card) !important;
}

/* ============================================
   HOMEPAGE CARDS
   ============================================ */

.calculator-card-home {
    text-decoration: none;
    color: inherit;
    display: block;
}

.calculator-card-home:hover {
    text-decoration: none;
    color: inherit;
}

.calculator-card-home h5 {
    font-family: var(--font-heading);
    font-size: var(--text-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
    color: var(--text-color, #1B1B1B);
}

.calculator-card-home .category-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(41, 98, 255, 0.1);
    border-radius: var(--radius-button);
    font-size: var(--text-size-sm);
    color: var(--accent-primary);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-md);
}

.calculator-card-home .btn-link {
    color: var(--accent-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.calculator-card-home:hover .btn-link {
    color: var(--accent-secondary);
}

/* ============================================
   CATEGORY CARDS (PHASE 3 - Visual Upgrade)
   ============================================ */

.category-card {
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.category-card:hover::before {
    opacity: 1;
}

.category-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    display: block;
    transition: transform var(--transition-normal);
    color: var(--accent-primary);
}

.category-card:hover .category-icon {
    transform: scale(1.1);
}

.category-card h5 {
    font-family: var(--font-heading);
    font-size: var(--text-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
    color: var(--text-color, #1B1B1B);
}

.category-card p {
    color: var(--text-muted, #666);
    margin-bottom: var(--spacing-md);
    font-size: var(--text-size-base);
    line-height: var(--line-height-relaxed);
}

.category-card .btn-category {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-hover) 100%);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-button);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-normal);
    text-decoration: none;
    display: inline-block;
}

.category-card:hover .btn-category {
    background: linear-gradient(135deg, var(--accent-primary-hover) 0%, var(--accent-primary) 100%);
    transform: scale(1.05);
}

/* Domain-specific accent colors for category cards */
.category-card[data-domain="finance"] .category-icon {
    color: var(--accent-finance);
}

.category-card[data-domain="math"] .category-icon {
    color: var(--accent-math);
}

.category-card[data-domain="health"] .category-icon {
    color: var(--accent-health);
}

.category-card[data-domain="physics"] .category-icon {
    color: var(--accent-physics);
}

.category-card[data-domain="chemistry"] .category-icon {
    color: var(--accent-chemistry);
}

.category-card[data-domain="utilities"] .category-icon {
    color: var(--accent-utilities);
}

/* ============================================
   SUBCATEGORY CARDS (PHASE 3 - Visual Upgrade)
   ============================================ */

.subcategory-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.subcategory-card:hover {
    text-decoration: none;
    color: inherit;
}

/* ============================================
   CALCULATOR LISTING CARDS
   ============================================ */

/* Cards in calculator listing pages */
.calculators-list .card {
    height: 100%;
}

.calculators-list .card-title {
    font-family: var(--font-heading);
    font-size: var(--text-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
}

.calculators-list .card-text {
    color: var(--text-muted, #666);
    margin-bottom: var(--spacing-md);
}

/* ============================================
   RELATED CALCULATOR CARDS
   ============================================ */

.related-calculator-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.related-calculator-card:hover {
    text-decoration: none;
    color: inherit;
}

/* ============================================
   CALCULATOR PAGE CARDS (PHASE 5)
   ============================================ */

.calculator-card {
    margin-bottom: var(--spacing-xl);
}

.calculator-card .card-header {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-hover) 100%);
    color: white;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    padding: var(--spacing-lg);
    border: none;
}

.calculator-card .card-body {
    background-color: var(--surface-card) !important;
    padding: var(--spacing-lg);
}

/* Input section */
.calculator-card .input-section {
    background-color: var(--surface-section);
    border-radius: var(--radius-card);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-soft);
}

/* Results section */
.calculator-card .results-section {
    background-color: var(--surface-section);
    border-radius: var(--radius-card);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-soft);
}

/* Examples section */
.calculator-card .examples-section {
    background-color: var(--surface-section);
    border-radius: var(--radius-card);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-soft);
}

/* Educational content section */
.calculator-card .content-pillar-section {
    background-color: var(--surface-section);
    border-radius: var(--radius-card);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-soft);
}

/* ============================================
   HEADER CONSISTENCY (PHASE 4)
   ============================================ */

.navbar {
    background: linear-gradient(135deg, #1A237E 0%, #0E1117 100%) !important;
    height: 80px;
    padding: var(--spacing-sm) 0;
    box-shadow: var(--shadow-soft);
}

.navbar-brand {
    display: flex;
    align-items: center;
    height: 48px;
}

.navbar-brand img {
    height: 36px;
    width: auto;
    max-height: 36px;
}

/* ============================================
   DARK MODE ADJUSTMENTS
   ============================================ */

[data-theme="dark"] .card,
[data-theme="dark"] .calculator-card,
[data-theme="dark"] .calculator-card-home,
[data-theme="dark"] .category-card,
[data-theme="dark"] .subcategory-card,
[data-theme="dark"] .related-calculator-card {
    background-color: var(--surface-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .calculator-card-home h5,
[data-theme="dark"] .category-card h5 {
    color: var(--text-color, #E6E8EB);
}

[data-theme="dark"] .category-card p,
[data-theme="dark"] .calculators-list .card-text {
    color: var(--text-muted, #8B949E);
}

[data-theme="dark"] .input-section,
[data-theme="dark"] .results-section,
[data-theme="dark"] .examples-section,
[data-theme="dark"] .content-pillar-section {
    background-color: var(--surface-section);
    border: var(--border-width) solid var(--border-color);
}

/* ============================================
   SECTION BACKGROUNDS (PHASE 5)
   ============================================ */

.section-container {
    background-color: var(--surface-page);
    padding: var(--spacing-2xl) var(--spacing-lg);
}

.popular-calculators-section,
.category-section {
    background-color: var(--surface-page);
    padding: var(--spacing-2xl) 0;
}

[data-theme="dark"] .section-container,
[data-theme="dark"] .popular-calculators-section,
[data-theme="dark"] .category-section {
    background-color: var(--surface-page);
}