/* Icon sizing also applies to standalone controls without changing their hit areas. */
.bi.ui-icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; line-height: 1; flex: 0 0 auto; }
.nav-icon .bi, .header-bell .bi, .header-home-link .bi, .user-trigger .bi { font-size: 18px; }
.input-icon .bi, .captcha-refresh .bi, .global-home-link .bi { font-size: 20px; }
.treasurer-tile-mark .bi { font-size: inherit; }
/* Visual adaptation of SIMAK template_new; existing layout and interactions stay in charge. */
@media screen {
    :root {
        --bg: #f8faff;
        --bg-soft: #f4f7fc;
        --card: #fff;
        --card-strong: #fff;
        --ink: #172b4d;
        --muted: #65758c;
        --accent: #0757b8;
        --accent-deep: #114eae;
        --accent-soft: #e8f0ff;
        --line: #e0e7f2;
        --shadow: 0 5px 24px #19386b0d;
    }

    body { background: var(--bg); color: var(--ink); }
    .shell > .sidebar { background: #1d304f; border-color: #172942; }
    .sidebar .brand { padding-top: 8px; padding-bottom: 12px; }
    .sidebar .panel-title { color: #a6b6ce; }
    .sidebar .brand-campus { color: #fff; }
    .sidebar .nav a {
        color: #b8c4d7;
        border-left: 4px solid transparent;
        font-weight: 600;
    }
    .sidebar .nav a:hover,
    .sidebar .nav a.active { background: #223a63; color: #fff; }
    .sidebar .nav a.active { border-left-color: #086bde; }
    .sidebar .nav-icon { color: #a6b6ce; }
    .sidebar .nav a.active .nav-icon { color: #fff; }

    .main .top-utility {
        background: #fff;
        border-color: var(--line);
        box-shadow: 0 1px 8px #1c315012;
    }
    .main .page-head { background: #fff; color: #18345e; border-color: var(--line); }
    .main .page-head h1 { color: #18345e; font-weight: 600; }
    .main .hero-chip { background: #eef4ff; color: #1757ae; border-color: #e0e7f2; border-radius: 5px; }
    .main .header-home-link,
    .main .header-bell,
    .main .user-trigger { background: #f4f7fc; color: #1a3358; border-color: #e0e7f2; border-radius: 8px; }
    .main .header-home-link:hover,
    .main .header-bell:hover,
    .main .user-trigger:hover { background: #e8f0ff; color: #0757b8; }
    .main .user-popover,
    .main .notification-popover { background: #fff; border-radius: 10px; border-color: var(--line); box-shadow: 0 8px 28px #0002; }
    .main .notification-item { border-radius: 7px; border-color: var(--line); }

    .main .card,
    .main .treasurer-recent-card,
    .main .treasurer-ratio-card,
    .main .treasurer-chart-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 11px;
        box-shadow: var(--shadow);
    }
    .main .card h2 { color: #18345e; }
    .main .metric { color: #0757b8; }
    .main .compare-item,
    .main .treasurer-ratio-legend-item { background: #f8faff; border-color: var(--line); border-radius: 9px; }
    .main .insight-box { background: #e8f0ff; border-color: var(--line); color: #253d62; border-radius: 9px; }
    .main .treasurer-tile { background: #e8f0ff; border-color: #dce7f9; color: #0757b8; border-radius: 11px; box-shadow: var(--shadow); }
    .main .kpi-card::after { background: none; }
    .main .kpi-grid > .kpi-card { background: #03998e; border-color: transparent; }
    .main .kpi-grid > .kpi-card:nth-child(2) { background: #d94327; }
    .main .kpi-grid > .kpi-card:nth-child(3) { background: #a9570a; }
    .main .kpi-grid > .kpi-card:nth-child(4) { background: #0757b8; }
    .main .kpi-card .metric,
    .main .kpi-card .muted,
    .main .kpi-card .metric-note { color: #fff; }

    .main .tabbar { background: #fff; border-color: var(--line); border-radius: 9px; box-shadow: var(--shadow); }
    .main .tab-link { border-radius: 6px; }
    .main .tab-link:hover { background: #eef4ff; color: #1757ae; border-color: #e0e7f2; }
    .main .tab-link.active { background: #0757b8; border-color: #0757b8; color: #fff; }
    .main button,
    .main .button { border-radius: 7px; box-shadow: none; }
    .main button.secondary,
    .main .button.secondary { background: #eef4ff; border-color: #dce7f9; color: #1757ae; }
    .main input:not([type="checkbox"]):not([type="radio"]),
    .main select,
    .main textarea { border-color: #d8e1ef; border-radius: 7px; background-color: #fff; color: #172b4d; }
    .main input:focus,
    .main select:focus,
    .main textarea:focus { border-color: #528bd9; outline-color: #528bd9; }
    button:focus-visible,
    a:focus-visible { outline: 3px solid #ff9c28; outline-offset: 2px; }
    .main table th { background: #f4f7fc; color: #18345e; border-color: var(--line); }
    .main table td { border-color: var(--line); }
    .main tbody tr:hover { background-color: #f8faff; }
    .main .badge { border-radius: 5px; letter-spacing: .04em; }
    .main .flash { border-radius: 8px; box-shadow: var(--shadow); }
    .main .modal-card { border-radius: 12px; border-color: var(--line); box-shadow: 0 8px 28px #0002; }

    .login-shell .login-form { background: #fff; border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow); }
    .login-shell .brand-kicker { color: #114eae; }
    .login-shell .input-icon { background: #f4f7fc; color: #65758c; }
    .login-shell button[type="submit"] { background: #0757b8; border-color: #0757b8; border-radius: 7px; }
    .login-shell button[type="submit"]:hover { background: #114eae; }
}