/* dss-modern.css — the polish layer that closes the visual gap with the
 * legacy HDSS admin template. Pure CSS over stock Bootstrap 5: typography,
 * surfaces, tables, controls. Loads after dss-brand.css; a11y rules in
 * dss-a11y.css still win where they overlap. */

:root {
    --m-radius: 12px;
    --m-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
    --m-shadow-lg: 0 4px 8px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06);
    --m-bg: #f5f7fa;
    --m-border: #eaecf0;
}

/* ---- typography & canvas ---- */
body {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto,
        "Helvetica Neue", sans-serif;
    background: var(--m-bg);
    color: #101828;
    -webkit-font-smoothing: antialiased;
}
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
h5, h6 { font-weight: 600; }

/* ---- cards ---- */
.card {
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    transition: box-shadow .15s ease;
}
.card:hover { box-shadow: var(--m-shadow-lg); }
.card-body h5, .card-body h6 { margin-bottom: .75rem; }

/* ---- tables ---- */
.table { font-size: .875rem; }
.table thead th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: #667085; font-weight: 600; border-bottom-width: 1px;
    background: #f9fafb;
}
.table-hover tbody tr:hover { background: #f9fafb; }
.table td, .table th { padding: .55rem .75rem; vertical-align: middle; }
code { color: #b54708; background: #fffaeb; padding: 1px 5px; border-radius: 5px; font-size: .8em; }

/* ---- controls ---- */
.btn { border-radius: 8px; font-weight: 500; }
.btn-sm { border-radius: 7px; }
.form-control, .form-select { border-radius: 8px; border-color: #d0d5dd; }
.form-control:focus, .form-select:focus {
    border-color: #f79009;
    box-shadow: 0 0 0 4px rgba(247, 144, 9, .12);
}
.form-control-sm, .form-select-sm { border-radius: 7px; }
.form-label.small { color: #475467; font-weight: 500; margin-bottom: 2px; }

/* ---- badges & pills ---- */
.badge { border-radius: 999px; font-weight: 600; padding: .35em .75em; }
.nav-pills .nav-link { border-radius: 999px; font-size: .85rem; color: #475467; }
.nav-pills .nav-link.active { background: #101828; }

/* ---- pagination ---- */
.pagination .page-link { border-radius: 8px; margin: 0 2px; border: none; color: #475467; }
.pagination .page-item.active .page-link { background: #101828; }

/* ---- alerts ---- */
.alert { border-radius: var(--m-radius); border: none; box-shadow: var(--m-shadow); }

/* ---- top navbar ---- */
.navbar-dss { box-shadow: 0 1px 3px rgba(16, 24, 40, .25); }

/* ---- stat-card icon tiles (dashboard) ---- */
.stat-tile {
    width: 44px; height: 44px; border-radius: 10px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff;
}

/* ---- subtle entrance for cards (respects reduced motion) ---- */
@media (prefers-reduced-motion: no-preference) {
    .card { animation: dss-rise .25s ease both; }
    @keyframes dss-rise {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: none; }
    }
}