/*
 * MOCA brand theme — overrides on top of the Metronic style.bundle.css.
 * Colours are sampled from the MOCA login artwork (moca-login-bg.jpg):
 *   green  #10563e  (MOCA letters)      dark green #073e2d (arc)
 *   red    #fc1e1f  (O / underline)     mint       #d7f0e5 (icon circles)
 * Load this AFTER style.bundle.css.
 */

/* ---------- Brand palette ---------- */
:root,
[data-bs-theme=light] {
    --moca-green: #10563e;
    --moca-green-rgb: 16, 86, 62;
    --moca-green-dark: #073e2d;
    --moca-green-mid: #0a6f43;
    --moca-red: #e5191f;
    --moca-red-rgb: 229, 25, 31;
    --moca-mint: #d7f0e5;
    --moca-mint-soft: #eef8f3;

    --bs-primary: var(--moca-green);
    --bs-primary-rgb: var(--moca-green-rgb);
    --bs-primary-active: var(--moca-green-dark);
    --bs-primary-light: var(--moca-mint);
    --bs-primary-inverse: #ffffff;
    --bs-primary-clarity: rgba(var(--moca-green-rgb), 0.2);
    --bs-primary-bg-subtle: var(--moca-mint);
    --bs-primary-border-subtle: #a9dcc5;
    --bs-primary-text-emphasis: var(--moca-green-dark);
    --bs-text-primary: var(--moca-green);
    --bs-component-active-bg: var(--moca-green);
    --bs-focus-ring-color: rgba(var(--moca-green-rgb), 0.25);

    --bs-danger: var(--moca-red);
    --bs-danger-rgb: var(--moca-red-rgb);
    --bs-danger-active: #c3121a;
    --bs-danger-light: #fdecec;
    --bs-text-danger: var(--moca-red);

    --bs-link-color: var(--moca-green-mid);
    --bs-link-color-rgb: 10, 111, 67;
    --bs-link-hover-color: var(--moca-green-dark);
    --bs-link-hover-color-rgb: 7, 62, 45;

    --bs-app-bg-color: #f3faf7;
    --bs-app-header-base-bg-color: #ffffff;
    --bs-app-sidebar-base-bg-color: var(--moca-green-dark);
}

[data-bs-theme=dark] {
    --moca-green: #1f9d6a;
    --moca-green-rgb: 31, 157, 106;
    --moca-green-dark: #0b4a35;
    --moca-green-mid: #34c98a;
    --moca-red: #f0353b;
    --moca-red-rgb: 240, 53, 59;
    --moca-mint: #12352a;
    --moca-mint-soft: #0f241d;

    --bs-primary: var(--moca-green);
    --bs-primary-rgb: var(--moca-green-rgb);
    --bs-primary-active: #188457;
    --bs-primary-light: var(--moca-mint);
    --bs-primary-clarity: rgba(var(--moca-green-rgb), 0.2);
    --bs-primary-bg-subtle: var(--moca-mint);
    --bs-primary-text-emphasis: var(--moca-green-mid);
    --bs-text-primary: var(--moca-green-mid);
    --bs-component-active-bg: var(--moca-green);
    --bs-focus-ring-color: rgba(var(--moca-green-rgb), 0.25);

    --bs-danger: var(--moca-red);
    --bs-danger-rgb: var(--moca-red-rgb);

    --bs-link-color: var(--moca-green-mid);
    --bs-link-color-rgb: 52, 201, 138;
    --bs-link-hover-color: #5fdcaa;

    --bs-app-sidebar-base-bg-color: #072a1f;
}

/* ---------- Buttons & form controls ---------- */
.btn.btn-primary {
    background: linear-gradient(135deg, var(--moca-green-mid) 0%, var(--moca-green) 55%, var(--moca-green-dark) 100%);
    border: 0;
}
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:active:not(.btn-active) {
    background: var(--moca-green-dark) !important;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--moca-green-mid);
    box-shadow: 0 0 0 .2rem rgba(var(--moca-green-rgb), .15);
}
.form-check-input:checked {
    background-color: var(--moca-green);
    border-color: var(--moca-green);
}
.page-item.active .page-link {
    background-color: var(--moca-green);
}

/* ---------- Header: white with the green/red brand rule underneath ---------- */
.app-header {
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--moca-green-mid) 0 70%, var(--moca-red) 70% 100%) 1;
}
.app-header .app-sidebar-logo img {
    height: 38px !important;
}

/* ---------- Sidebar: deep green like the artwork's arc ---------- */
.app-sidebar {
    background: linear-gradient(180deg, var(--moca-green) 0%, var(--moca-green-dark) 100%) !important;
    /* Re-map the greys the menu uses so text/icons read on dark green */
    --bs-gray-400: rgba(255, 255, 255, .45);
    --bs-gray-500: rgba(255, 255, 255, .65);
    --bs-gray-600: rgba(255, 255, 255, .72);
    --bs-gray-700: rgba(255, 255, 255, .80);
    --bs-gray-800: rgba(255, 255, 255, .90);
    --bs-gray-900: #ffffff;
    --bs-primary: #ffffff;
}
.app-sidebar .menu-item .menu-link .menu-title {
    color: rgba(255, 255, 255, .88);
}
.app-sidebar .menu-item .menu-link:hover .menu-title,
.app-sidebar .menu-item .menu-link:hover .menu-icon i {
    color: #ffffff !important;
}
/* Active item: translucent white pill with a red accent, like the O in MOCA */
.app-sidebar .menu-item .menu-link.active {
    background-color: rgba(255, 255, 255, .14) !important;
    box-shadow: inset 3px 0 0 var(--moca-red);
}
.app-sidebar .menu-item .menu-link.active .menu-title,
.app-sidebar .menu-item .menu-link.active .menu-icon i {
    color: #ffffff !important;
}
.app-sidebar .menu-item .menu-link.active .menu-bullet .bullet {
    background-color: var(--moca-red) !important;
}
.app-sidebar .menu-arrow:after {
    background-color: rgba(255, 255, 255, .65) !important;
}

/* ---------- Cards ---------- */
.card {
    border-color: #e3f1ea;
}
.card .card-header .card-title,
.card .card-header h3 {
    color: var(--moca-green);
}
[data-bs-theme=dark] .card .card-header .card-title,
[data-bs-theme=dark] .card .card-header h3 {
    color: var(--moca-green-mid);
}

/* ---------- Login card ---------- */
.moca-login-card {
    border-top: 4px solid var(--moca-green);
    box-shadow: 0 20px 50px -20px rgba(7, 62, 45, .35) !important;
}
.moca-login-card .moca-login-title {
    color: var(--moca-green-dark);
}
[data-bs-theme=dark] .moca-login-card .moca-login-title {
    color: var(--moca-green-mid);
}
/* Green/red rule under the heading, echoing the artwork */
.moca-rule {
    width: 96px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--moca-green-mid) 0 60%, var(--moca-red) 60% 100%);
}
.moca-login-card .form-control {
    background-color: var(--moca-mint-soft) !important;
    border-color: #d5ebe0;
}

/* ---------- Sidebar section headings & count badges ---------- */
.app-sidebar .moca-menu-heading {
    color: rgba(255, 255, 255, .5);
    letter-spacing: .08em;
}
.moca-badge {
    background-color: var(--moca-red);
    color: #ffffff;
    min-width: 22px;
    height: 22px;
}

/* ---------- Status badges (applications, allocations) ---------- */
.badge.moca-status { font-weight: 600; padding: .45em .75em; }

/* ---------- Public pages (application link) ---------- */
body.moca-public {
    background: #f3faf7 url('../media/auth/moca-login-bg.jpg') no-repeat right -300px top -120px / 1100px auto;
    background-attachment: fixed;
}
.moca-public-header {
    background: linear-gradient(90deg, var(--moca-green-dark) 0%, var(--moca-green) 100%);
}
.moca-public-seal {
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 50%;
    padding: 2px;
}
.moca-public-rule {
    height: 4px;
    background: linear-gradient(90deg, var(--moca-green-mid) 0 70%, var(--moca-red) 70% 100%);
}
.moca-public-card {
    border-top: 4px solid var(--moca-green);
    box-shadow: 0 20px 50px -25px rgba(7, 62, 45, .35);
}
.moca-fact {
    background: var(--moca-mint-soft);
    border-radius: .75rem;
    padding: .9rem 1.1rem;
    height: 100%;
}

/* ---------- Budget / progress ---------- */
.moca-progress {
    height: 10px;
    border-radius: 6px;
    background: var(--moca-mint);
    overflow: hidden;
    display: flex;
}
.moca-progress .seg-paid { background: var(--moca-green); }
.moca-progress .seg-approved { background: #6cc49a; }

/* ---------- Approval chain ---------- */
.moca-chain { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.moca-chain .step {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--moca-mint-soft); border: 1px solid #d5ebe0; border-radius: 2rem;
    padding: .35rem .9rem .35rem .35rem; font-weight: 600;
}
.moca-chain .step .num {
    width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--moca-green); color: #fff; font-size: .8rem;
}
.moca-chain .arrow { color: var(--bs-gray-500); }
.moca-qr svg { width: 100%; height: auto; max-width: 220px; }

/* ---------- Icon picker ---------- */
.moca-icon-option span {
    width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--bs-gray-300); border-radius: .75rem; cursor: pointer; color: var(--bs-gray-600);
    transition: all .15s ease;
}
.moca-icon-option span:hover { border-color: var(--moca-green-mid); color: var(--moca-green); }
.moca-icon-option input:checked + span {
    border-color: var(--moca-green); background: var(--moca-mint); color: var(--moca-green);
    box-shadow: 0 0 0 2px rgba(var(--moca-green-rgb), .2);
}
.moca-icon-option span i { color: inherit !important; }
.moca-step-num {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--moca-green); color: #fff; font-weight: 700;
}

/* ---------- Choice pills (payment method etc.) ---------- */
.moca-choice span {
    display: inline-block; padding: .6rem 1.2rem; border: 1px solid var(--bs-gray-300); border-radius: .65rem;
    cursor: pointer; font-weight: 600; color: var(--bs-gray-700); transition: all .15s ease;
}
.moca-choice span:hover { border-color: var(--moca-green-mid); }
.moca-choice input:checked + span {
    border-color: var(--moca-green); background: var(--moca-mint); color: var(--moca-green-dark);
    box-shadow: 0 0 0 2px rgba(var(--moca-green-rgb), .15);
}

/* ---------- Initials avatar ---------- */
.moca-initials { background: var(--moca-mint) !important; color: var(--moca-green) !important; }

/* ---------- Application stepper ---------- */
.moca-stepper { display: flex; gap: 0; overflow-x: auto; padding: .25rem 0 .5rem; }
.moca-stepper-node { flex: 1 1 0; min-width: 110px; text-align: center; position: relative; padding: 0 .25rem; }
.moca-stepper-node::before {
    content: ''; position: absolute; top: 19px; left: -50%; width: 100%; height: 3px; background: var(--bs-gray-200); z-index: 0;
}
.moca-stepper-node:first-child::before { display: none; }
.moca-stepper-node.is-done::before, .moca-stepper-node.is-current::before,
.moca-stepper-node.is-rejected::before, .moca-stepper-node.is-returned::before { background: var(--moca-green-mid); }
.moca-stepper-dot {
    position: relative; z-index: 1; width: 40px; height: 40px; margin: 0 auto .5rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
    background: var(--bs-gray-100); color: var(--bs-gray-500); border: 2px solid var(--bs-gray-200);
}
.moca-stepper-dot i { font-size: 1.3rem; color: inherit; }
.is-done .moca-stepper-dot { background: var(--moca-green); border-color: var(--moca-green); color: #fff; }
.is-current .moca-stepper-dot { background: #fff; border-color: var(--moca-green); color: var(--moca-green); box-shadow: 0 0 0 4px rgba(var(--moca-green-rgb), .15); }
.is-returned .moca-stepper-dot { background: #fff8dd; border-color: #f6c000; color: #b98900; }
.is-rejected .moca-stepper-dot { background: var(--moca-red); border-color: var(--moca-red); color: #fff; }
.moca-stepper-label { font-weight: 600; color: var(--bs-gray-800); font-size: .9rem; line-height: 1.2; }
.moca-stepper-sub { color: var(--bs-gray-500); font-size: .75rem; }
.is-waiting .moca-stepper-label { color: var(--bs-gray-500); }
.moca-success-icon {
    width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--moca-green-mid), var(--moca-green-dark));
    box-shadow: 0 10px 30px -10px rgba(7, 62, 45, .6);
}
.moca-tracking { background: var(--moca-mint-soft); border: 2px dashed #a9dcc5; border-radius: 1rem; padding: 1.25rem; }
@media print {
    .moca-public-header, footer { display: none !important; }
    body.moca-public { background: #fff !important; }
}
.moca-legend { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: middle; }
.moca-legend.seg-paid { background: var(--moca-green); }
.moca-legend.seg-approved { background: #6cc49a; }
.moca-decide-card { border: 2px solid var(--moca-green-mid); box-shadow: 0 10px 30px -15px rgba(7, 62, 45, .4); }

/* ---------- Payment receipt ---------- */
.moca-receipt { max-width: 860px; border-top: 6px solid var(--moca-green); }
.moca-receipt-head { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--moca-green-mid) 0 70%, var(--moca-red) 70% 100%) 1; }
.moca-signature { border-bottom: 1px solid var(--bs-gray-500); min-height: 2.2rem; padding-bottom: .3rem; margin-bottom: .4rem; font-weight: 600; }
@media print {
    #kt_app_header, #kt_app_sidebar, #kt_app_footer, .d-print-none, #kt_scrolltop { display: none !important; }
    .app-wrapper, .app-main { margin: 0 !important; padding: 0 !important; }
    body, .app-root, .app-page { background: #fff !important; }
    .moca-receipt { box-shadow: none !important; border-left: 0; border-right: 0; max-width: 100%; }
}

/* ---------- Charts (palette validated with the dataviz validator) ---------- */
:root, [data-bs-theme=light] {
    --moca-chart-1: #0a7d4b;        /* single series */
    --moca-chart-paid: #0a7d4b;     /* ordinal pair: paid (strong) */
    --moca-chart-approved: #6cc49a; /* ordinal pair: approved, not paid (light) */
    --moca-chart-grid: #eef0f3;
    --moca-chart-text: #78829d;
    --moca-chart-surface: #ffffff;
}
[data-bs-theme=dark] {
    --moca-chart-1: #22a873;
    --moca-chart-paid: #5fdcaa;
    --moca-chart-approved: #1f8a5e;
    --moca-chart-grid: #26282f;
    --moca-chart-text: #808290;
    --moca-chart-surface: #15171c;
}
.moca-chart-table { display: none; }
.moca-show-table .moca-chart-table { display: block; }
.moca-show-table .moca-chart { display: none; }
.moca-stat .moca-stat-value { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--bs-gray-900); }
.moca-hero { background: linear-gradient(135deg, var(--moca-green-dark) 0%, var(--moca-green) 60%, var(--moca-green-mid) 100%); color: #fff; }
.moca-hero .moca-hero-value { font-size: 2.8rem; font-weight: 800; line-height: 1; }
.moca-hero-rule { height: 4px; width: 80px; border-radius: 2px; background: linear-gradient(90deg, #fff 0 60%, var(--moca-red) 60% 100%); opacity: .9; }
.moca-print-head { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--moca-green-mid) 0 70%, var(--moca-red) 70% 100%) 1; }
@media print {
    .card { box-shadow: none !important; border: 0 !important; }
    .moca-report-table { font-size: 10px; }
    .moca-report-table th, .moca-report-table td { padding: 3px 5px !important; }
    a { color: inherit !important; text-decoration: none !important; }
}
.moca-unread { background: var(--moca-mint-soft); border-left: 3px solid var(--moca-green-mid); }
@media (max-width: 991.98px) {
    body.moca-public { background-image: none; }
}