: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: 768px) {
    .tm-sidebar { min-height: auto; }
}