/*
 * PayThorn admin theme
 * ---------------------------------------------------------------------------
 * Loaded after style.css (the Dompet template). The template is driven by CSS
 * variables, so most of the retheme is done by redefining them; the rest are
 * targeted overrides for components that hard-code their colours.
 *
 * Palette comes straight from the logo:
 *   blue  #0048CB  (shield / wordmark)  -> primary
 *   green #0A9E78  (thorn tip)          -> secondary / success accent
 */

:root,
[data-primary],
[data-nav-headerbg],
[data-headerbg],
[data-sidebarbg] {
    /* template variables */
    --primary: #0048CB;
    --primary-hover: #003AA6;
    --primary-dark: #002C7F;
    --rgba-primary-1: rgba(0, 72, 203, 0.08);
    --rgba-primary-2: rgba(0, 72, 203, 0.16);
    --rgba-primary-3: rgba(0, 72, 203, 0.24);
    --rgba-primary-4: rgba(0, 72, 203, 0.32);
    --rgba-primary-5: rgba(0, 72, 203, 0.45);
    --rgba-primary-6: rgba(0, 72, 203, 0.55);
    --rgba-primary-7: rgba(0, 72, 203, 0.65);
    --rgba-primary-8: rgba(0, 72, 203, 0.75);
    --rgba-primary-9: rgba(0, 72, 203, 0.85);
    --secondary: #0A9E78;
    --headerbg: #F3F5F9;
    --nav-headbg: #FFFFFF;
    --sidebar-bg: #FFFFFF;

    /* bootstrap variables the template forwards */
    --bs-primary: #0048CB;
    --bs-primary-rgb: 0, 72, 203;
    --bs-secondary: #0A9E78;
    --bs-secondary-rgb: 10, 158, 120;
    --bs-success: #0A9E78;
    --bs-success-rgb: 10, 158, 120;
    --bs-info: #2F7BF5;
    --bs-info-rgb: 47, 123, 245;
    --bs-warning: #F59E0B;
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: #DC2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-link-color: #0048CB;
    --bs-link-hover-color: #003AA6;
    --bs-body-bg: #F3F5F9;
    --bs-body-bg-rgb: 243, 245, 249;
    --bs-body-color: #5B6472;
    --bs-body-color-rgb: 91, 100, 114;
    --bs-border-color: #E6EAF0;
    --bs-border-color-translucent: rgba(15, 23, 42, 0.06);
    --bs-body-font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* our own */
    --pt-ink: #0F172A;
    --pt-muted: #64748B;
    --pt-border: #E6EAF0;
    --pt-surface: #FFFFFF;
    --pt-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.10);
}

/* ---- base ------------------------------------------------------------- */
body, .dlabnav, .header, .card, .btn, .form-control, .table, .badge, .dropdown-menu,
.page-titles, .breadcrumb, .nice-select, .default-select, input, select, textarea, button {
    font-family: var(--bs-body-font-family);
}
body {
    font-family: var(--bs-body-font-family);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.page-titles h4,
.text-dark,
strong, b {
    color: var(--pt-ink);
    font-family: var(--bs-body-font-family);
}
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
label, .form-label { color: var(--pt-ink); font-weight: 500; }

/* ---- sidebar ---------------------------------------------------------- */
.nav-header { border-bottom: 1px solid var(--pt-border); }
.dlabnav { box-shadow: none; border-right: 1px solid var(--pt-border); }
.dlabnav .metismenu > li > a {
    color: var(--pt-muted);
    font-weight: 500;
    font-size: 15px;
    border-radius: 10px;
    transition: background-color .15s ease, color .15s ease;
}
.dlabnav .metismenu > li > a i { color: #94A3B8; transition: color .15s ease; }
.dlabnav .metismenu > li:hover > a { color: var(--primary); background: var(--rgba-primary-1); }
.dlabnav .metismenu > li:hover > a i { color: var(--primary); }
.dlabnav .metismenu > li.mm-active > a {
    color: var(--primary);
    background: var(--rgba-primary-1);
    font-weight: 600;
    position: relative;
}
.dlabnav .metismenu > li.mm-active > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 3px;
    background: var(--primary);
}
.dlabnav .metismenu > li.mm-active > a i { color: var(--primary); }
.dlabnav .header-profile2,
.dlabnav .header-info2 {
    border: 1px solid var(--pt-border);
    border-radius: 12px;
    background: #F8FAFC;
}
.dlabnav .copyright p,
.dlabnav .copyright strong { color: var(--pt-muted); }
.dlabnav .copyright strong { color: var(--pt-ink); }

/* ---- header ----------------------------------------------------------- */
.header { background: var(--headerbg); }
.header .header-content { background: transparent; }
.header-right .nav-item .nav-link { color: var(--pt-ink); }
.header-right .btn-primary,
.header-right .dashboard-select { border-radius: 10px; }
.header-right .notification_dropdown .nav-link {
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    color: var(--primary);
}
.dashboard_bar { color: var(--pt-ink); font-weight: 600; }

/* ---- cards ------------------------------------------------------------ */
.card {
    border: 1px solid var(--pt-border);
    border-radius: 14px;
    box-shadow: var(--pt-shadow);
    background: var(--pt-surface);
}
.card-header { border-bottom: 1px solid var(--pt-border); background: transparent; }
.card-header .card-title { font-weight: 600; }
.bg-blue,
.card.bg-blue {
    background: linear-gradient(145deg, var(--primary) 0%, #0A3FA3 100%) !important;
    border: 0;
}
.bg-blue .card-body,
.bg-blue h1, .bg-blue h2, .bg-blue h3, .bg-blue h4, .bg-blue h5, .bg-blue h6,
.bg-blue p { color: #fff; }
/* declined / completed tiles inside the blue card */
.bg-blue .ic-card { background: #fff; }
.bg-blue .ic-card span { color: var(--pt-ink); font-size: 13px; }
.bg-blue .ic-card i.bg-danger { background: #DC2626 !important; color: #fff !important; }
.bg-blue .ic-card i.bg-success { background: var(--secondary) !important; color: #fff !important; }

/* ---- buttons ---------------------------------------------------------- */
.btn { border-radius: 10px; font-weight: 500; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.btn-primary,
.btn.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    --bs-btn-focus-shadow-rgb: 0, 72, 203;
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: none !important;
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn-primary:focus-visible { box-shadow: 0 0 0 4px var(--rgba-primary-3) !important; }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); background: transparent; }
.btn-outline-primary:hover { color: #fff; background: var(--primary); border-color: var(--primary); }
.btn-secondary { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.btn-secondary:hover { background: #087F60; border-color: #087F60; color: #fff; }
.btn-success { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.btn-success:hover { background: #087F60; border-color: #087F60; color: #fff; }
/* the template's "soft" action buttons (edit / view / delete icons) */
.btn-info,
.btn.btn-info { background: var(--rgba-primary-1); border-color: var(--rgba-primary-1); color: var(--primary); }
.btn-info:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-warning,
.btn.btn-warning { background: #FFF4E5; border-color: #FFF4E5; color: #B45309; box-shadow: none !important; }
.btn-warning:hover { background: #F59E0B; border-color: #F59E0B; color: #fff; }
.btn-danger,
.btn.btn-danger { background: #FEE2E2; border-color: #FEE2E2; color: #B91C1C; box-shadow: none !important; }
.btn-danger:hover { background: #DC2626; border-color: #DC2626; color: #fff; }
.btn.sharp { border-radius: 8px; }
.btn-xs { padding: .35rem .7rem; }

/* ---- badges ----------------------------------------------------------- */
.badge { border-radius: 6px; font-weight: 500; letter-spacing: .01em; }
.badge-primary { background: var(--primary); color: #fff; }
.badge-info { background: var(--rgba-primary-1); color: var(--primary); }
.badge-success { background: #E6F7F1; color: #087F60; }
.badge-danger { background: #FEE2E2; color: #B91C1C; }
.bg-success { background-color: var(--secondary) !important; }
.bg-danger { background-color: #DC2626 !important; }
.badge-secondary { background: #F1F5F9; color: #475569; }
.badge.light.badge-info { background: var(--rgba-primary-1); color: var(--primary); }
.badge.light.badge-secondary { background: #F1F5F9; color: #475569; }
.text-bg-success { background: var(--secondary) !important; color: #fff !important; }
.text-bg-danger { background: #DC2626 !important; color: #fff !important; }
.text-bg-warning { background: #F59E0B !important; color: #fff !important; }

/* ---- forms ------------------------------------------------------------ */
.form-control,
.default-select,
.nice-select {
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    color: var(--pt-ink);
    background: var(--pt-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: #94A3B8; }
.form-control:hover { border-color: #94A3B8; }
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--rgba-primary-2);
    background: var(--pt-surface);
}
.input-group-text { border-radius: 10px; border-color: #CBD5E1; background: #F8FAFC; color: var(--pt-muted); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { box-shadow: 0 0 0 4px var(--rgba-primary-2); border-color: var(--primary); }

/* ---- tables ----------------------------------------------------------- */
.table thead th {
    color: var(--pt-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--pt-border);
}
.table td { color: var(--pt-ink); border-color: var(--pt-border); vertical-align: middle; }
.table-responsive-md tbody tr:hover td { background: #F8FAFC; }

/* ---- breadcrumb / titles --------------------------------------------- */
.page-titles { background: transparent; box-shadow: none; }
.breadcrumb-item a { color: var(--pt-muted); }
.breadcrumb-item.active a,
.breadcrumb-item.active { color: var(--primary); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { color: #CBD5E1; }

/* ---- alerts ----------------------------------------------------------- */
.alert { border-radius: 10px; border-width: 1px; }
.alert-success { background: #E6F7F1; border-color: #A7E3D0; color: #087F60; }
.alert-danger { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.alert-info { background: var(--rgba-primary-1); border-color: var(--rgba-primary-2); color: var(--primary-dark); }

/* dashboard legend (Completed / Pending / Declined) */
.circle + span { margin-right: 10px; }

/* ---- misc template bits ---------------------------------------------- */
.progress { background: #E6EAF0; }
.progress .progress-bar,
.progress-bar.bg-primary { background: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }
.pagination .page-link { color: var(--primary); border-radius: 8px; }
.pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
.nice-select .option.selected, .nice-select .option:hover { color: var(--primary); }
.dropdown-menu { border: 1px solid var(--pt-border); border-radius: 12px; box-shadow: var(--pt-shadow); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--rgba-primary-1); color: var(--primary); }
::selection { background: var(--rgba-primary-2); }

/* ---- login ------------------------------------------------------------ */
.authincation {
    background-image: none !important;
    background:
        radial-gradient(900px 500px at 15% 10%, rgba(0, 72, 203, 0.10), transparent 60%),
        radial-gradient(700px 400px at 90% 90%, rgba(10, 158, 120, 0.10), transparent 60%),
        #F3F5F9;
}
.login-form {
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: 16px;
    box-shadow: var(--pt-shadow);
    padding: 40px 44px;
    max-width: 480px;
}
.login-form .title { color: var(--pt-ink); font-weight: 600; }
.login-form .btn-block { width: 100%; min-height: 48px; font-size: 15px; }
.login-content p { color: var(--pt-muted); font-size: 16px; }
.login-media img { width: 70%; }