/* ==========================================================================
   Mathura Nagar Nigam - Garbage Management portal
   A thin layer over the admin theme: branding, status colours and the few
   components the theme does not ship (timeline, evidence pairs, SLA clock).
   ========================================================================== */

:root {
    --mnn-brand: #146c43;
    --mnn-brand-dark: #0f5132;
    --mnn-accent: #f59f00;
    --mnn-danger: #c92a2a;
}

/* ---------- brand shell ---------- */

.mnn-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mnn-brand), #2b8a3e);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .5px;
    flex: 0 0 auto;
}

.mnn-brand-text {
    line-height: 1.15;
}

.mnn-brand-text .org {
    font-weight: 700;
    font-size: 15px;
}

.mnn-brand-text .sys {
    font-size: 11px;
    opacity: .75;
}

/* The theme collapses the sidebar to icons; the wordmark has to go with it. */
.sidebar.active:not(:hover) .mnn-brand-text {
    display: none;
}

/* ---------- status and level chips ---------- */

.mnn-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}

.mnn-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.mnn-level-0 { background: #e9ecef; color: #495057; }
.mnn-level-1 { background: #e7f5ff; color: #1971c2; }
.mnn-level-2 { background: #fff9db; color: #e67700; }
.mnn-level-3 { background: #fff0e6; color: #d9480f; }
.mnn-level-4 { background: #ffe3e3; color: #c92a2a; }
.mnn-level-5 { background: #f3d9fa; color: #862e9c; }

/* ---------- SLA clock ---------- */

.mnn-clock {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.mnn-clock.is-overdue { color: var(--mnn-danger); }
.mnn-clock.is-soon    { color: #e67700; }
.mnn-clock.is-ok      { color: #2b8a3e; }

/* ---------- tiles ---------- */

.mnn-tile {
    border: 0;
    border-radius: 16px;
    padding: 18px 20px;
    height: 100%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

.mnn-tile .value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.mnn-tile .label {
    font-size: 13px;
    opacity: .7;
}

.mnn-tile .icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* ---------- timeline ---------- */

.mnn-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 26px;
    position: relative;
}

.mnn-timeline::before {
    content: "";
    position: absolute;
    inset-inline-start: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: #e9ecef;
}

.mnn-timeline > li {
    position: relative;
    padding-bottom: 18px;
}

.mnn-timeline > li::before {
    content: "";
    position: absolute;
    inset-inline-start: -26px;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--mnn-brand);
}

.mnn-timeline > li.is-escalation::before { border-color: var(--mnn-danger); }
.mnn-timeline > li.is-reopen::before     { border-color: var(--mnn-accent); }

/* ---------- evidence photographs ---------- */

.mnn-evidence {
    border: 1px solid #e9ecef;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.mnn-evidence img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
    background: #f1f3f5;
}

.mnn-evidence .meta {
    padding: 10px 12px;
    font-size: 12px;
}

.mnn-evidence.is-outside-fence {
    border-color: #ffc9c9;
}

/* ---------- map ---------- */

.mnn-map {
    height: 420px;
    border-radius: 14px;
    overflow: hidden;
    background: #f1f3f5;
}

.mnn-map-sm { height: 240px; }

/* Shown in place of the map when the tile service cannot be reached. */
.mnn-map-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 24px;
    font-size: 13px;
    color: #868e96;
}

/* ---------- misc ---------- */

.mnn-empty {
    text-align: center;
    padding: 44px 20px;
    color: #868e96;
}

.mnn-empty i {
    font-size: 40px;
    display: block;
    margin-bottom: 10px;
    opacity: .5;
}

.mnn-required::after {
    content: " *";
    color: var(--mnn-danger);
}

.mnn-scroll-x {
    overflow-x: auto;
}

/* Long report tables must scroll inside their card, never the page. */
.mnn-table-wrap {
    overflow-x: auto;
    max-width: 100%;
}

.mnn-table-wrap > table {
    min-width: 760px;
}

.mnn-login-choice {
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 20px;
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

.mnn-login-choice:hover {
    border-color: var(--mnn-brand);
    transform: translateY(-2px);
}

.mnn-login-choice .icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}

@media print {
    .sidebar, .navbar-header, .d-footer, .mnn-no-print { display: none !important; }
    .dashboard-main { margin: 0 !important; }
    .dashboard-main-body { padding: 0 !important; }
}