/* NLWMS theme: modern, clean, mobile-friendly. Loaded after Bootstrap. */
:root {
    --nl-primary: #0a58ca;
    --nl-primary-2: #0d9488;
    --nl-accent: #22c1c3;
    --nl-ink: #0f172a;
    --nl-muted: #64748b;
    --nl-bg: #f1f5f9;
    --nl-surface: #ffffff;
    --nl-border: #e2e8f0;
    --nl-radius: 16px;
    --nl-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}

html, body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; }
body { background: var(--nl-bg); color: var(--nl-ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: var(--nl-ink); letter-spacing: -.01em; }
.text-muted { color: var(--nl-muted) !important; }

/* Navbar */
.nlwms-nav {
    background: linear-gradient(120deg, #0a58ca 0%, #0b6fb0 55%, #0d9488 100%) !important;
    box-shadow: 0 4px 18px rgba(10, 88, 202, .25);
    padding-top: .6rem; padding-bottom: .6rem;
}
.nlwms-nav .navbar-brand { font-weight: 700; font-size: 1.15rem; color: #fff; }
.brand-mark {
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(255, 255, 255, .18); display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #fff;
}
.nlwms-nav .btn {
    border-radius: 999px; color: #fff; border-color: rgba(255, 255, 255, .45);
    font-size: .875rem; padding: .35rem .8rem; min-height: 36px;
    background: rgba(255, 255, 255, .08);
}
.nlwms-nav .btn:hover, .nlwms-nav .btn.active { background: rgba(255, 255, 255, .25); color: #fff; border-color: #fff; }
.nlwms-nav .btn .bi { margin-right: .25rem; }
.nlwms-nav .badge { font-size: .7rem; }

/* Page */
.nlwms-main { min-height: 70vh; }

/* Cards */
.card { border: 1px solid var(--nl-border); border-radius: var(--nl-radius); box-shadow: var(--nl-shadow); background: var(--nl-surface); }
.card-body { padding: 1.25rem; }
.card h2.h5, .card h2.h6 { font-weight: 700; }

/* Hero (page headers) */
.hero {
    border-radius: var(--nl-radius);
    background: linear-gradient(120deg, #0a58ca, #0d9488);
    color: #fff; padding: 1.5rem 1.75rem; box-shadow: var(--nl-shadow); position: relative; overflow: hidden;
}
.hero::after {
    content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px;
    border-radius: 50%; background: rgba(255, 255, 255, .10);
}
.hero h1 { color: #fff; font-size: 1.4rem; margin: 0; }
.hero .small, .hero p { color: rgba(255, 255, 255, .85); }

/* Dashboard module tiles */
.section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--nl-muted); font-weight: 700; margin: 1.5rem 0 .75rem; }
.module-tile {
    display: flex; align-items: center; gap: .9rem; height: 100%;
    background: var(--nl-surface); border: 1px solid var(--nl-border); border-radius: var(--nl-radius);
    padding: 1rem 1.1rem; text-decoration: none; color: var(--nl-ink);
    box-shadow: var(--nl-shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    position: relative; overflow: hidden;
}
.module-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 23, 42, .12); border-color: #cbd5e1; color: var(--nl-ink); }
.module-tile .icon {
    flex: 0 0 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #fff;
}
.module-tile .title { font-weight: 700; font-size: .98rem; line-height: 1.2; }
.module-tile .sub { font-size: .8rem; color: var(--nl-muted); margin-top: .15rem; }
.module-tile .count-badge { position: absolute; top: .6rem; right: .7rem; }
.bg-tone-blue { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.bg-tone-teal { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.bg-tone-cyan { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.bg-tone-indigo { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.bg-tone-amber { background: linear-gradient(135deg, #d97706, #f59e0b); }
.bg-tone-rose { background: linear-gradient(135deg, #e11d48, #f43f5e); }
.bg-tone-slate { background: linear-gradient(135deg, #475569, #64748b); }
.bg-tone-green { background: linear-gradient(135deg, #059669, #10b981); }
.bg-tone-violet { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }

/* Buttons */
.btn { border-radius: 10px; font-weight: 500; }
.btn-primary { background: linear-gradient(120deg, #0a58ca, #0d9488); border: 0; box-shadow: 0 4px 12px rgba(10, 88, 202, .25); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(120deg, #0949a8, #0b7a70); }
.btn-outline-primary { color: var(--nl-primary); border-color: #bfd3f5; }
.btn-outline-primary:hover { background: #eaf2ff; color: var(--nl-primary); border-color: #9ec1f5; }
.btn-outline-secondary { color: #334155; border-color: #cbd5e1; }

/* Forms */
.form-control, .form-select { border-radius: 10px; border-color: #cbd5e1; padding: .55rem .8rem; }
.form-control:focus, .form-select:focus { border-color: #7aa7f0; box-shadow: 0 0 0 .2rem rgba(10, 88, 202, .15); }
.form-label { font-weight: 600; font-size: .875rem; color: #334155; }

/* Tables */
.table { --bs-table-bg: transparent; }
.table thead th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nl-muted);
    font-weight: 700; border-bottom: 1px solid var(--nl-border); background: #f8fafc; white-space: nowrap;
}
.table td, .table th { vertical-align: middle; border-color: #eef2f7; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #f8fafc; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #f1f7ff; }
.table-responsive { border-radius: var(--nl-radius); }

/* Badges and alerts */
.badge { border-radius: 999px; font-weight: 600; padding: .4em .7em; }
.alert { border: 0; border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }

/* Login */
.auth-wrap {
    min-height: 78vh; display: flex; align-items: center; justify-content: center;
}
.auth-card { width: 100%; max-width: 420px; border: 0; }
.auth-head {
    border-radius: var(--nl-radius) var(--nl-radius) 0 0; padding: 1.75rem 1.5rem; text-align: center; color: #fff;
    background: linear-gradient(120deg, #0a58ca, #0b6fb0 55%, #0d9488);
}
.auth-head .brand-mark { width: 56px; height: 56px; border-radius: 18px; font-size: 1.8rem; margin: 0 auto .6rem; }
.auth-head h1 { color: #fff; font-size: 1.35rem; margin: 0; }
.auth-head p { color: rgba(255, 255, 255, .85); margin: .3rem 0 0; font-size: .9rem; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.input-icon > .form-control { padding-left: 2.5rem; }
.otp-input { letter-spacing: .6em; text-align: center; font-size: 1.6rem; font-weight: 700; }

/* Small screens */
@media (max-width: 576px) {
    .module-tile { padding: .85rem; }
    .module-tile .icon { flex-basis: 40px; height: 40px; font-size: 1.1rem; }
    .hero { padding: 1.1rem; }
    .hero h1 { font-size: 1.2rem; }
}

@media print {
    body { background: #fff; }
    .card, .module-tile { box-shadow: none; }
}