/* Core styles for Arthik mutual funds site */
:root{ --brand: #004EA2; --muted: #6c757d; --bg: #f5f7fa; }
*{ box-sizing: border-box; }
body{ font-family: Inter, Roboto, system-ui, -apple-system, 'Segoe UI', Arial; margin:0; background:var(--bg); color:#222; }
.site-header{ background:#fff; color:#fff; padding:12px 0; }
.header-inner{ display:flex; align-items:center; gap:12px; }
.logo{ height:44px; }
.brand img{ height:44px; }
.search-wrap{ position:relative; max-width:720px; flex:1; }
.search-wrap input{ width:100%; padding:10px 12px; border-radius:6px;  outline:none; }
.search-results{ position:absolute; left:0; right:0; top:110%; background:#fff; border-radius:8px; box-shadow:0 8px 30px rgba(2,6,23,0.08); max-height:360px; overflow:auto; z-index:1000; }
.search-results .item{ padding:10px 12px; border-bottom:1px solid #f1f3f5; cursor:pointer; }
.search-results .item:hover{ background:#f8f9fb; }
.site-header .actions .btn{ color:#fff!important; background-color: #004ea2; border-color:rgba(255,255,255,0.2); }
.hero{ background:linear-gradient(180deg, rgba(0,78,162,0.06), rgba(0,78,162,0.02)); padding:20px; border-radius:8px; }
.card{ border:0; border-radius:10px; }
.metric-card{ background:#fff; padding:12px; border-radius:8px; box-shadow:0 6px 18px rgba(12,24,48,0.06); text-align:left; }
.metric-label{ font-size:13px; color:var(--muted); }
.metric-value{ font-weight:700; font-size:18px; color:var(--brand); margin-top:6px; }
.chart-wrap{ background:#fff; padding:12px; border-radius:8px; box-shadow:0 6px 18px rgba(12,24,48,0.04); }
.table-responsive{ background:#fff; border-radius:8px; padding:8px; box-shadow:0 6px 18px rgba(12,24,48,0.04); }
.btn-primary {
    background: #004ea2 !important;
    border: #004ea2;
    color: #ffffff !important;
}
a {
    color: #004ea2 !important;
}


@media (max-width:767px){ .header-inner{ flex-direction:column; align-items:flex-start; } .search-wrap{ width:100%; } .metric-card{ text-align:center; } .row.g-4.mb-4 {
    display: flex!important;
    flex-direction: column-reverse!important;
}
.d-flex.align-items-start.justify-content-between.gap-3 {
    display: flex !important;
    flex-direction: column !important;
}
.d-flex.justify-content-between.align-items-center {
    display: flex !important;
    flex-direction: column!important;
    gap: 20px!important;
}
td {
    font-size: 12px;
}
}