/**
 * MeroGurukul Tools & Calculators Platform - Stylesheet (tools.css)
 *
 * Built on Bootstrap 5.3 with a 60-30-10 Educational Color System:
 * - 60% Dominant Canvas: Soft slate off-white (#F8FAFC) in Light / Deep Slate (#0F172A) in Dark
 * - 30% Structural Surfaces: Pure white (#FFFFFF) / Slate (#1E293B) with subtle hairline borders
 * - 10% Accent Budget: MeroGurukul Academic Royal Blue (#0284C7 / #0369A1) & Emerald (#059669)
 */

:root,
[data-bs-theme="light"] {
    --mg-bg-canvas: #f8fafc;
    --mg-bg-surface: #ffffff;
    --mg-bg-subtle: #f1f5f9;
    --mg-border-color: #e2e8f0;
    --mg-text-primary: #0f172a;
    --mg-text-secondary: #475569;
    --mg-text-muted: #64748b;
    --mg-accent: #0369a1;
    --mg-accent-hover: #075985;
    --mg-accent-soft: #e0f2fe;
    --mg-success: #059669;
    --mg-success-soft: #ecfdf5;
    --mg-warning: #d97706;
    --mg-warning-soft: #fffbeb;
    --mg-danger: #dc2626;
    --mg-danger-soft: #fef2f2;
    --mg-font-display: 'Fraunces', Georgia, serif;
    --mg-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --mg-font-mono: 'IBM Plex Mono', monospace;
}

[data-bs-theme="dark"] {
    --mg-bg-canvas: #0f172a;
    --mg-bg-surface: #1e293b;
    --mg-bg-subtle: #0b1120;
    --mg-border-color: #334155;
    --mg-text-primary: #f8fafc;
    --mg-text-secondary: #cbd5e1;
    --mg-text-muted: #94a3b8;
    --mg-accent: #38bdf8;
    --mg-accent-hover: #7dd3fc;
    --mg-accent-soft: rgba(56, 189, 248, 0.14);
    --mg-success: #34d399;
    --mg-success-soft: rgba(52, 211, 153, 0.14);
    --mg-warning: #fbbf24;
    --mg-warning-soft: rgba(251, 191, 36, 0.14);
    --mg-danger: #f87171;
    --mg-danger-soft: rgba(248, 113, 113, 0.14);
    letter-spacing: 0.005em;
}

/* Base Typography & Canvas */
body.mg-body {
    font-family: var(--mg-font-body);
    background-color: var(--mg-bg-canvas);
    color: var(--mg-text-primary);
    line-height: 1.6;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
}

h1, .mg-h1 {
    font-family: var(--mg-font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mg-text-primary);
    text-wrap: balance;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    line-height: 1.2;
}

h2, .mg-section-title {
    font-family: var(--mg-font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--mg-text-primary);
    text-wrap: balance;
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
}

h3, h4, h5, h6 {
    font-family: var(--mg-font-body);
    font-weight: 600;
    color: var(--mg-text-primary);
}

/* Tabular Numerals for All Calculator Numbers & Tables */
.mg-tabular,
.mg-result-value,
.table td,
.table th,
input[type="number"],
.mg-sci-display {
    font-variant-numeric: tabular-nums;
}

.mg-mono,
code,
.mg-formula-box {
    font-family: var(--mg-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Accessibility Skip Link */
.mg-skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2000;
    padding: 0.5rem 1rem;
    background: var(--mg-accent);
    color: #fff;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 600;
}

/* Top Navigation Bar (Strict 3-Zone Contract) */
.mg-header {
    background-color: var(--mg-bg-surface);
    border-bottom: 1px solid var(--mg-border-color) !important;
    z-index: 1020;
}

.mg-brand-wordmark {
    font-family: var(--mg-font-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--mg-text-primary) !important;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.mg-header .nav-link {
    color: var(--mg-text-secondary);
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 0.5rem 0.75rem !important;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 150ms ease, border-color 150ms ease;
}

.mg-header .nav-link:hover,
.mg-header .nav-link:focus-visible {
    color: var(--mg-text-primary);
    border-bottom-color: var(--mg-border-color);
}

.mg-header .nav-link.active {
    color: var(--mg-accent) !important;
    font-weight: 600;
    border-bottom-color: var(--mg-accent);
}

.mg-btn-theme {
    border: 1px solid var(--mg-border-color);
    background-color: var(--mg-bg-subtle);
    color: var(--mg-text-primary);
    font-weight: 500;
    font-size: 0.8125rem;
    padding: 0.4rem 0.85rem;
    min-height: 38px;
    white-space: nowrap;
}

.mg-btn-theme:hover {
    border-color: var(--mg-accent);
    color: var(--mg-accent);
}

/* Breadcrumbs */
.mg-breadcrumb-nav {
    background-color: var(--mg-bg-surface);
    border-bottom: 1px solid var(--mg-border-color) !important;
}

.mg-breadcrumb-link {
    color: var(--mg-text-secondary);
    text-decoration: none;
}

.mg-breadcrumb-link:hover {
    color: var(--mg-accent);
    text-decoration: underline;
}

/* Kicker & Unboxed Metadata (Zero-Pill Discipline) */
.mg-kicker,
.mg-tool-meta,
.mg-meta-line {
    font-size: 0.78rem;
    color: var(--mg-text-muted);
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

/* Calculator & Tool Cards (Single-Elevation Depth) */
.mg-calc-card,
.mg-result-card,
.mg-tool-card,
.mg-category-card {
    background-color: var(--mg-bg-surface);
    border: 1px solid var(--mg-border-color);
    border-radius: 0.75rem;
    box-shadow: none;
    transition: border-color 150ms ease, transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mg-tool-card:hover {
    border-color: var(--mg-accent);
    transform: translateY(-2px);
}

.mg-tool-card-link {
    color: var(--mg-text-primary);
    text-decoration: none;
    font-weight: 600;
}

.mg-tool-card-link:hover {
    color: var(--mg-accent);
}

.mg-open-tool-cta {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mg-accent);
    white-space: nowrap;
}

/* Result Highlight Panel */
.mg-result-card {
    border-left: 4px solid var(--mg-accent);
}

.mg-result-hero {
    padding: 1.25rem;
    background-color: var(--mg-bg-subtle);
    border-radius: 0.5rem;
}

.mg-result-label {
    font-size: 0.8125rem;
    color: var(--mg-text-secondary);
    font-weight: 500;
    margin-bottom: 0.2rem;
}

.mg-result-value {
    font-family: var(--mg-font-mono);
    font-size: clamp(1.5rem, 2.8vw, 2.15rem);
    font-weight: 700;
    color: var(--mg-text-primary);
    line-height: 1.2;
}

.mg-result-subvalue {
    font-family: var(--mg-font-mono);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--mg-text-primary);
}

/* Status Indicators (Always Paired With Text & Glyph for Color-Blind Accessibility) */
.mg-status-nominal {
    color: var(--mg-success);
    font-weight: 600;
}

.mg-status-warning {
    color: var(--mg-warning);
    font-weight: 600;
}

.mg-status-error {
    color: var(--mg-danger);
    font-weight: 600;
}

/* Formula & Example Callouts */
.mg-formula-box {
    background-color: var(--mg-bg-subtle);
    border-left: 3px solid var(--mg-accent);
    padding: 1rem 1.25rem;
    border-radius: 0.375rem;
    font-size: 0.95rem;
    color: var(--mg-text-primary);
    overflow-x: auto;
}

.mg-example-box {
    background-color: var(--mg-bg-surface);
    border: 1px solid var(--mg-border-color);
    padding: 1.25rem;
    border-radius: 0.5rem;
}

/* Form Controls & Buttons (Touch Targets >= 42px) */
.mg-calc-card .form-control,
.mg-calc-card .form-select {
    min-height: 42px;
    border-color: var(--mg-border-color);
    background-color: var(--mg-bg-surface);
    color: var(--mg-text-primary);
}

.mg-calc-card .form-control:focus,
.mg-calc-card .form-select:focus {
    border-color: var(--mg-accent);
    box-shadow: 0 0 0 0.2rem var(--mg-accent-soft);
}

.mg-btn-primary {
    background-color: var(--mg-accent);
    border-color: var(--mg-accent);
    color: #ffffff;
    font-weight: 600;
    padding: 0.55rem 1.25rem;
    min-height: 42px;
    white-space: nowrap;
}

.mg-btn-primary:hover,
.mg-btn-primary:focus-visible {
    background-color: var(--mg-accent-hover);
    border-color: var(--mg-accent-hover);
    color: #ffffff;
}

[data-bs-theme="dark"] .mg-btn-primary {
    color: #0f172a;
}

/* Segmented Filter Controls */
.mg-segmented-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    background-color: var(--mg-bg-subtle);
    border: 1px solid var(--mg-border-color);
    border-radius: 0.5rem;
}

.mg-segmented-btn {
    border: none;
    background: transparent;
    color: var(--mg-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.45rem 0.9rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.mg-segmented-btn:hover {
    color: var(--mg-text-primary);
}

.mg-segmented-btn.active {
    background-color: var(--mg-bg-surface);
    color: var(--mg-text-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Scientific Calculator Keypad Grid */
.mg-sci-display-box {
    background-color: var(--mg-bg-subtle);
    border: 1px solid var(--mg-border-color);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    text-align: right;
}

.mg-sci-expr {
    min-height: 1.5rem;
    font-family: var(--mg-font-mono);
    font-size: 0.9rem;
    color: var(--mg-text-secondary);
    word-break: break-all;
}

.mg-sci-output {
    font-family: var(--mg-font-mono);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--mg-text-primary);
    word-break: break-all;
}

.mg-sci-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (max-width: 480px) {
    .mg-sci-grid {
        gap: 0.35rem;
    }
    .mg-sci-key {
        padding: 0.55rem 0.2rem !important;
        font-size: 0.875rem !important;
    }
}

.mg-sci-key {
    min-height: 46px;
    border: 1px solid var(--mg-border-color);
    background-color: var(--mg-bg-surface);
    color: var(--mg-text-primary);
    font-family: var(--mg-font-mono);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 0.45rem;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    white-space: nowrap;
}

.mg-sci-key:hover,
.mg-sci-key:focus-visible {
    background-color: var(--mg-bg-subtle);
    border-color: var(--mg-accent);
}

.mg-sci-key-fn {
    background-color: var(--mg-bg-subtle);
    font-size: 0.85rem;
}

.mg-sci-key-op {
    color: var(--mg-accent);
    font-weight: 600;
}

.mg-sci-key-eq {
    background-color: var(--mg-accent);
    border-color: var(--mg-accent);
    color: #ffffff;
    font-weight: 700;
}

[data-bs-theme="dark"] .mg-sci-key-eq {
    color: #0f172a;
}

/* Ad Slot Placeholders (Unobtrusive & CLS-Safe) */
.mg-ad-slot {
    border: 1px dashed var(--mg-border-color);
    background-color: var(--mg-bg-subtle);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mg-ad-label {
    display: block;
    font-size: 0.7rem;
    color: var(--mg-text-muted);
    letter-spacing: 0.02em;
    margin-bottom: 0.15rem;
}

.mg-ad-placeholder-text {
    font-size: 0.78rem;
    color: var(--mg-text-muted);
}

/* FAQ Accordion */
.mg-faq-item {
    background-color: var(--mg-bg-surface);
    border-color: var(--mg-border-color);
}

.mg-faq-item .accordion-button {
    font-family: var(--mg-font-body);
    font-weight: 600;
    font-size: 1rem;
    color: var(--mg-text-primary);
    background-color: var(--mg-bg-surface);
}

.mg-faq-item .accordion-button:not(.collapsed) {
    color: var(--mg-accent);
    background-color: var(--mg-bg-subtle);
    box-shadow: none;
}

/* Resource & Footer Links */
.mg-resource-link,
.mg-text-link {
    color: var(--mg-accent);
    text-decoration: none;
    font-weight: 500;
}

.mg-resource-link:hover,
.mg-text-link:hover {
    text-decoration: underline;
}

.mg-footer {
    background-color: var(--mg-bg-surface);
    border-top: 1px solid var(--mg-border-color) !important;
}

.mg-footer-link {
    color: var(--mg-text-secondary);
    text-decoration: none;
}

.mg-footer-link:hover {
    color: var(--mg-accent);
    text-decoration: underline;
}

/* Print-Friendly Styles (Only Print Calculator & Result Summary) */
@media print {
    body.mg-body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .mg-header,
    .mg-breadcrumb-nav,
    .mg-ad-slot,
    .mg-footer,
    .d-print-none,
    .mg-content-section {
        display: none !important;
    }

    .mg-calc-card,
    .mg-result-card {
        border: 1px solid #000000 !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }
}

/* Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}