:root {
    --tm-blue: #1565C0;
    --tm-blue-dark: #0D47A1;
    --tm-green: #2E7D32;
    --tm-green-light: #66BB6A;
    --tm-bg: #F4F7FB;
    --tm-card-radius: 14px;
    --tm-shadow: 0 2px 10px rgba(21, 101, 192, 0.08);
}

body {
    background-color: var(--tm-bg);
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    color: #1a2733;
}

/* Navbar */
.tm-navbar {
    background: linear-gradient(90deg, var(--tm-blue) 0%, var(--tm-blue-dark) 100%);
}
.tm-navbar .navbar-brand, .tm-navbar .nav-link { color: #fff !important; }
.tm-navbar .nav-link:hover { color: #d7ecff !important; }

/* Sidebar */
.tm-sidebar {
    background: #ffffff;
    min-height: calc(100vh - 56px);
    box-shadow: var(--tm-shadow);
    border-right: 1px solid #e9eef5;
}
.tm-sidebar .nav-link {
    color: #2c3e50;
    border-radius: 10px;
    margin-bottom: 4px;
    padding: 10px 14px;
    font-weight: 500;
}
.tm-sidebar .nav-link.active, .tm-sidebar .nav-link:hover {
    background: linear-gradient(90deg, var(--tm-blue) 0%, var(--tm-green) 130%);
    color: #fff;
}
.tm-sidebar .nav-link i { width: 22px; }
.tm-sidebar .nav-section-title {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .06em;
    color: #93a2b3;
    margin: 14px 10px 6px;
    font-weight: 700;
}

/* Cards */
.card, .tm-card {
    border: none;
    border-radius: var(--tm-card-radius);
    box-shadow: var(--tm-shadow);
}
.tm-stat-card {
    border-radius: var(--tm-card-radius);
    padding: 20px;
    color: #fff;
    box-shadow: var(--tm-shadow);
}
.tm-stat-card.blue { background: linear-gradient(135deg, var(--tm-blue), #42A5F5); }
.tm-stat-card.green { background: linear-gradient(135deg, var(--tm-green), var(--tm-green-light)); }
.tm-stat-card.amber { background: linear-gradient(135deg, #EF6C00, #FFA726); }
.tm-stat-card.red { background: linear-gradient(135deg, #C62828, #E57373); }
.tm-stat-card.teal { background: linear-gradient(135deg, #00695C, #4DB6AC); }
.tm-stat-card .stat-value { font-size: 28px; font-weight: 700; }
.tm-stat-card .stat-label { font-size: 13px; opacity: .9; }

/* Buttons */
.btn-primary { background-color: var(--tm-blue); border-color: var(--tm-blue); }
.btn-primary:hover { background-color: var(--tm-blue-dark); border-color: var(--tm-blue-dark); }
.btn-success { background-color: var(--tm-green); border-color: var(--tm-green); }
.btn-outline-primary { color: var(--tm-blue); border-color: var(--tm-blue); }

/* Badges */
.badge-status-pending { background: #FFA726; }
.badge-status-approved { background: var(--tm-green); }
.badge-status-rejected { background: #E53935; }
.badge-status-doc_verification { background: #29B6F6; }
.badge-status-draft { background: #90A4AE; }

/* Wizard steps */
.tm-wizard-steps { display: flex; justify-content: space-between; margin-bottom: 30px; }
.tm-wizard-steps .step { flex: 1; text-align: center; position: relative; }
.tm-wizard-steps .step .circle {
    width: 36px; height: 36px; border-radius: 50%;
    background: #e0e6ec; color: #7a8a99; display: inline-flex;
    align-items: center; justify-content: center; font-weight: 700; margin-bottom: 6px;
}
.tm-wizard-steps .step.active .circle, .tm-wizard-steps .step.done .circle {
    background: var(--tm-blue); color: #fff;
}
.tm-wizard-steps .step.done .circle { background: var(--tm-green); }
.tm-wizard-steps .step .label { font-size: 12px; color: #6b7a89; }

/* Public site */
.tm-hero {
    background: linear-gradient(135deg, var(--tm-blue-dark), var(--tm-blue) 60%, var(--tm-green));
    color: #fff;
    padding: 70px 0;
    border-radius: 0 0 30px 30px;
}
.tm-footer { background: #0d1b2a; color: #b7c4d1; padding: 40px 0 20px; }
.tm-footer a { color: #d7ecff; }

/* ID Card / Certificate preview */
.tm-idcard {
    width: 340px; height: 214px; border-radius: 16px;
    background: linear-gradient(135deg, var(--tm-blue-dark), var(--tm-blue));
    color: #fff; padding: 16px; position: relative; overflow: hidden;
}
.tm-idcard .photo { width: 70px; height: 80px; object-fit: cover; border-radius: 6px; border: 2px solid #fff; }

@media (max-width: 991.98px) {
    /* Below the lg breakpoint, .tm-sidebar becomes a Bootstrap offcanvas
       (fixed position, flex column: header + body). The min-height rule
       above is for the static desktop sidebar and must not apply here.

       The real reason a long nav list (Masters, Administration, etc.) was
       getting clipped with no way to scroll: Bootstrap's .offcanvas-body
       is a flex child with flex-grow + overflow-y:auto, but flex items
       default to min-height:auto, which means they grow to fit their
       content instead of ever actually triggering a scrollbar - the
       overflow rule never gets a chance to engage. It needs an explicit
       min-height:0 to be a proper bounded, scrollable region. Also using
       100dvh (dynamic viewport height) instead of relying on the
       offcanvas's own sizing, since 100vh can be taller than what's
       actually visible on mobile once the browser's address bar is
       accounted for, which cuts off content at the bottom with no
       indication anything is scrollable. */
    .tm-sidebar { min-height: 0 !important; }
    .tm-sidebar.offcanvas-lg { height: 100dvh; max-height: 100dvh; }
    .tm-sidebar .offcanvas-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        min-height: 0;
    }
}