/* =========================================================
   TG Admin — Telegram Minimalist UI Theme
   Shared by login + entire application
   ========================================================= */

:root {
    --tg-blue: #2AABEE;
    --tg-blue-deep: #229ED9;
    --tg-blue-soft: #E8F6FD;
    --tg-navy: #17212B;
    --tg-navy-2: #0E1621;
    --tg-sidebar: #0F1C26;
    --tg-panel: #232E3C;
    --tg-text: #0E1621;
    --tg-muted: #708499;
    --tg-line: #E6EBF0;
    --tg-bg: #F4F7FA;
    --tg-card: #FFFFFF;
    --tg-success: #31B545;
    --tg-danger: #E53935;
    --tg-warning: #F5A623;
    --tg-radius: 14px;
    --tg-radius-sm: 10px;
    --tg-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
    --tg-font: 'Nunito', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* ---------- Base ---------- */
html, body {
    font-family: var(--tg-font) !important;
    color: var(--tg-text);
    background: var(--tg-bg) !important;
    font-size: 14.5px !important;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--tg-blue-deep); }
a:hover { color: var(--tg-blue); }

.content-wrapper {
    background: var(--tg-bg) !important;
}

.content-header { padding: .75rem 0 0 !important; }

.container-fluid {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

h1, h2, h3, h4, h5, .card-title {
    font-weight: 800 !important;
    letter-spacing: .1px;
    color: var(--tg-text) !important;
}

.text-muted { color: var(--tg-muted) !important; }

/* ---------- Navbar ---------- */
.main-header.navbar {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--tg-line) !important;
    box-shadow: none !important;
}

.main-header .nav-link {
    color: var(--tg-navy) !important;
    font-weight: 700;
}

.main-header .navbar-badge { display: none !important; }

/* Hide noisy demo header widgets look */
.main-header .fa-comments,
.main-header .fa-bell { opacity: .85; }

/* ---------- Sidebar (Telegram dark) ---------- */
.main-sidebar {
    background: linear-gradient(180deg, var(--tg-navy-2) 0%, var(--tg-sidebar) 55%, #122333 100%) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
    border-right: 0 !important;
}

.brand-link {
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    background: transparent !important;
    display: flex !important;
    align-items: center;
    gap: .65rem;
    padding: 1rem .9rem !important;
}

.brand-link .brand-image,
.brand-link img {
    width: 36px !important;
    height: 36px !important;
    object-fit: cover;
    border-radius: 50% !important;
    box-shadow: 0 0 0 2px rgba(42,171,238,.35);
    opacity: 1 !important;
    margin-top: 0 !important;
}

.brand-text {
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
}

.user-panel {
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    padding: .9rem !important;
}

.user-panel .info a {
    color: #fff !important;
    font-weight: 700;
}

.sidebar .nav-sidebar > .nav-item { margin-bottom: 2px; }

.sidebar .nav-link {
    color: rgba(255,255,255,.72) !important;
    border-radius: 10px !important;
    margin: 0 .45rem;
    padding: .55rem .75rem !important;
    font-weight: 600;
}

.sidebar .nav-link p { font-weight: 700; }

.sidebar .nav-link:hover {
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
}

.sidebar .nav-link.active,
.sidebar .nav-item > .nav-link.active {
    background: rgba(42,171,238,.18) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--tg-blue);
}

.sidebar .nav-treeview .nav-link {
    font-size: .9rem;
    padding-left: 1.5rem !important;
}

.sidebar .nav-icon {
    color: rgba(255,255,255,.55) !important;
    font-size: .95rem !important;
    margin-right: .45rem;
}

.sidebar .nav-link.active .nav-icon,
.sidebar .nav-link:hover .nav-icon {
    color: var(--tg-blue) !important;
}

/* ---------- Cards (minimal) ---------- */
.card,
.page-card,
.tool-card,
.dash-card,
.fin-filter-card,
.fin-table-card,
.gw-card {
    border: 1px solid var(--tg-line) !important;
    border-radius: var(--tg-radius) !important;
    box-shadow: var(--tg-shadow) !important;
    background: var(--tg-card) !important;
    overflow: hidden;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--tg-line) !important;
    padding: .9rem 1.1rem !important;
}

.card-title { font-size: 1rem !important; margin: 0 !important; }

.card-body { padding: 1.1rem !important; }

.card-primary:not(.card-outline) > .card-header,
.card-success:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header,
.card-warning:not(.card-outline) > .card-header,
.card-danger:not(.card-outline) > .card-header,
.card-secondary:not(.card-outline) > .card-header {
    color: #fff !important;
}

/* Gateway / colored headers: flatter telegram gradient */
.gw-card .card-header,
.card-primary > .card-header,
.card-success > .card-header,
.card-info > .card-header,
.card-warning > .card-header,
.card-danger > .card-header,
.card-secondary > .card-header {
    border: 0 !important;
    font-weight: 800 !important;
}

.gw-tinypesa .card-header,
.card-success > .card-header { background: linear-gradient(135deg, #2AABEE, #229ED9) !important; }
.gw-umspay .card-header,
.card-primary > .card-header { background: linear-gradient(135deg, #1E96C8, #176B9A) !important; }
.gw-hashpay .card-header,
.card-info > .card-header { background: linear-gradient(135deg, #2AABEE, #0F7FB5) !important; }
.gw-instasend .card-header,
.card-warning > .card-header { background: linear-gradient(135deg, #3DB3EF, #229ED9) !important; color:#fff !important; }
.gw-pesapal .card-header { background: linear-gradient(135deg, #229ED9, #15779F) !important; }
.gw-paypal .card-header,
.card-danger > .card-header { background: linear-gradient(135deg, #4BAFE3, #217FAA) !important; }
.gw-paystack .card-header,
.card-secondary > .card-header { background: linear-gradient(135deg, #3A4A5A, #243140) !important; }

/* ---------- Buttons ---------- */
.btn {
    border-radius: 10px !important;
    font-weight: 700 !important;
    border-width: 1px;
    box-shadow: none !important;
    padding: .45rem .9rem;
}

.btn-primary,
.btn-info,
.bg-primary,
.bg-info {
    background: var(--tg-blue) !important;
    border-color: var(--tg-blue) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-info:hover {
    background: var(--tg-blue-deep) !important;
    border-color: var(--tg-blue-deep) !important;
}

.btn-success { background: var(--tg-success) !important; border-color: var(--tg-success) !important; }
.btn-danger { background: var(--tg-danger) !important; border-color: var(--tg-danger) !important; }
.btn-warning { background: var(--tg-warning) !important; border-color: var(--tg-warning) !important; color: #fff !important; }

.btn-outline-primary,
.btn-outline-info {
    color: var(--tg-blue-deep) !important;
    border-color: rgba(42,171,238,.45) !important;
    background: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-info:hover {
    background: var(--tg-blue-soft) !important;
}

.btn-block { width: 100%; }

/* ---------- Forms ---------- */
.form-control,
.custom-select,
select.form-control,
textarea.form-control,
.form-control-border {
    border: 1px solid var(--tg-line) !important;
    border-radius: var(--tg-radius-sm) !important;
    background: #F8FAFC !important;
    box-shadow: none !important;
    min-height: 42px;
    font-weight: 600;
    color: var(--tg-text) !important;
}

.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--tg-blue) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(42,171,238,.16) !important;
}

label, .form-label { font-weight: 700 !important; color: var(--tg-muted) !important; font-size: .82rem; }

/* ---------- Tables ---------- */
.table {
    background: #fff;
    margin-bottom: 0 !important;
}

.table thead th,
.thead-light th,
.table-dark th {
    background: #F8FBFE !important;
    color: var(--tg-muted) !important;
    border-bottom: 1px solid var(--tg-line) !important;
    border-top: 0 !important;
    font-size: .78rem !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 800 !important;
}

.table td {
    border-top: 1px solid var(--tg-line) !important;
    vertical-align: middle !important;
    color: var(--tg-text);
}

.table-hover tbody tr:hover { background: #F7FBFE !important; }
.table-striped tbody tr:nth-of-type(odd) { background: #FCFDFE; }
.table-bordered,
.table-bordered td,
.table-bordered th { border-color: var(--tg-line) !important; }

/* ---------- Badges / status ---------- */
.badge {
    border-radius: 8px !important;
    font-weight: 750 !important;
    padding: .35em .55em !important;
}

.badge-primary, .bg-primary, .badge-info, .bg-info { background: var(--tg-blue) !important; }
.badge-success, .bg-success { background: var(--tg-success) !important; }
.badge-danger, .bg-danger { background: var(--tg-danger) !important; }
.badge-warning, .bg-warning { background: var(--tg-warning) !important; color: #fff !important; }
.badge-secondary, .bg-secondary, .badge-dark { background: #5B6B7C !important; }
.bg-teal, .badge-teal { background: var(--tg-blue-deep) !important; color: #fff !important; }

/* ---------- Info boxes / stats ---------- */
.info-box,
.dash-stat,
.fin-stat,
.stat {
    border: 1px solid var(--tg-line) !important;
    border-radius: var(--tg-radius) !important;
    box-shadow: var(--tg-shadow) !important;
    background: #fff !important;
    min-height: 86px;
}

.info-box .info-box-icon,
.dash-stat .info-box-icon {
    border-radius: 12px !important;
    width: 58px !important;
    margin: 10px 0 10px 10px !important;
    height: 58px !important;
    line-height: 58px !important;
    font-size: 1.2rem !important;
}

.info-box-icon.bg-info,
.info-box-icon.bg-primary,
.info-box-icon.bg-teal { background: var(--tg-blue) !important; }
.info-box-icon.bg-success { background: var(--tg-success) !important; }
.info-box-icon.bg-warning { background: var(--tg-warning) !important; }
.info-box-icon.bg-danger { background: var(--tg-danger) !important; }
.info-box-icon.bg-secondary,
.info-box-icon.bg-dark { background: #3D4F60 !important; }

.info-box-text { color: var(--tg-muted) !important; font-weight: 700 !important; text-transform: none; }
.info-box-number { font-weight: 800 !important; color: var(--tg-text) !important; }

/* Dashboard hero */
.dash-hero {
    background: linear-gradient(135deg, #2AABEE 0%, #1E96C8 45%, #175E86 100%) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 28px rgba(42,171,238,.28) !important;
}

.quick-link {
    background: #F8FBFE !important;
    border: 1px solid var(--tg-line) !important;
    border-radius: 12px !important;
    font-weight: 700;
    color: var(--tg-text) !important;
}
.quick-link:hover {
    background: var(--tg-blue-soft) !important;
    border-color: rgba(42,171,238,.4) !important;
}

/* Audience / filter boxes */
.audience-box,
.filter-bar {
    border: 1px solid var(--tg-line) !important;
    border-radius: 12px !important;
    background: #F8FBFE;
}
.audience-box.active {
    border-color: var(--tg-blue) !important;
    background: var(--tg-blue-soft) !important;
}

/* Alerts */
.alert {
    border: 0 !important;
    border-radius: 12px !important;
    font-weight: 650;
}
.alert-success { background: #EAF8EE !important; color: #1B6B32 !important; }
.alert-danger { background: #FDECEC !important; color: #9B1C1C !important; }
.alert-info { background: var(--tg-blue-soft) !important; color: #145F8A !important; }

/* Pagination */
.page-item.active .page-link,
.pagination .active .page-link {
    background: var(--tg-blue) !important;
    border-color: var(--tg-blue) !important;
}
.page-link { color: var(--tg-blue-deep) !important; border-radius: 8px !important; }

/* Footer */
.main-footer {
    background: #fff !important;
    border-top: 1px solid var(--tg-line) !important;
    color: var(--tg-muted) !important;
    font-weight: 600;
}
.main-footer a { color: var(--tg-blue-deep) !important; }

/* Elevation soft reset */
.elevation-1, .elevation-2, .elevation-3, .elevation-4 { box-shadow: none !important; }

/* Small utilities used across pages */
.page-card, .tool-card, .dash-card { margin-bottom: 1rem; }

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 10px !important;
    border: 1px solid var(--tg-line) !important;
}

/* Live payment toast already telegram teal — keep consistent */
.live-pay-card {
    background: linear-gradient(135deg, #2AABEE, #1E96C8) !important;
}

/* Reduce visual noise from AdminLTE default dark thead */
.table-dark { background: transparent !important; }

/* Status chips used in messaging */
.status-sent { background: #E7F7EA !important; color: #1C6B34 !important; }
.status-failed { background: #FDECEC !important; color: #9B1C1C !important; }
.status-partial, .status-expired { background: #FFF4E5 !important; color: #9A5B00 !important; }
.status-pending, .status-active, .status-not_sent { background: var(--tg-blue-soft) !important; color: #145F8A !important; }

/* Compact sidebar scroll */
.sidebar { padding-bottom: 1rem; }

/* Content spacing */
section.content { padding-top: .5rem !important; }

/* Make buttons in tables quieter */
.table .btn-sm {
    border-radius: 8px !important;
    padding: .25rem .5rem !important;
}