/* ============================================================
   Paymenow Admin — brand theme
   Loaded after Metronic's style.bundle.css; reskins the whole
   portal around the Paymenow brand green (#6FB74D) without
   touching any view markup or Angular bindings.
   ============================================================ */

:root {
    --pmn-primary:        #6FB74D;   /* Paymenow green (logo) */
    --pmn-primary-dark:   #5AA23C;
    --pmn-primary-darker: #47862E;   /* text-safe green */
    --pmn-primary-soft:   #EFF7EA;   /* tint backgrounds */
    --pmn-primary-border: #D3E8C6;
    --pmn-grey:           #A1AEAF;   /* logo secondary grey */
    --pmn-ink:            #24312B;   /* headings */
    --pmn-body:           #46554E;   /* body text */
    --pmn-bg:             #F4F7F3;   /* content background */
    --pmn-surface:        #FFFFFF;
    --pmn-border:         #E3EAE2;
    --pmn-sidebar:        #17251C;   /* deep green-black */
    --pmn-sidebar-hover:  #1F3226;
    --pmn-radius:         10px;
    --pmn-shadow:         0 1px 3px rgba(23,37,28,.06), 0 4px 16px rgba(23,37,28,.05);
}

/* ── Base ──────────────────────────────────────────────────── */
body {
    background-color: var(--pmn-bg) !important;
    color: var(--pmn-body);
    -webkit-font-smoothing: antialiased;
}

.m-content--skin-light2 .m-content,
.m-body .m-content {
    background-color: var(--pmn-bg) !important;
}

h1, h2, h3, h4, h5, h6 { color: var(--pmn-ink); }

a { color: var(--pmn-primary-darker); }
a:hover { color: var(--pmn-primary-dark); }

::selection { background: var(--pmn-primary-soft); color: var(--pmn-ink); }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--pmn-primary); }

/* ── Brand text class (labels/headings across all views) ───── */
.m--font-brand { color: var(--pmn-primary-darker) !important; }

/* ── Header ────────────────────────────────────────────────── */
.m-header {
    background: var(--pmn-surface) !important;
    border-bottom: 1px solid var(--pmn-border);
    box-shadow: none !important;
}

.m-brand.m-brand--skin-dark,
.m-header .m-brand {
    background: var(--pmn-sidebar) !important;
}

.m-brand--skin-dark .m-brand__icon i { color: var(--pmn-grey) !important; }
.m-brand--skin-dark .m-brand__icon:hover i { color: var(--pmn-primary) !important; }

/* ── Sidebar ───────────────────────────────────────────────── */
.m-aside-left--skin-dark .m-aside-left,
.m-aside-menu.m-aside-menu--skin-dark,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav {
    background-color: var(--pmn-sidebar) !important;
}

.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text,
.m-aside-menu--skin-dark .m-menu__nav .m-menu__item .m-menu__link .m-menu__link-text {
    color: #C7D2CB !important;
}

.m-aside-menu--skin-dark .m-menu__nav .m-menu__item .m-menu__link .m-menu__link-icon,
.m-aside-menu--skin-dark .m-menu__nav .m-menu__item .m-menu__link .m-menu__link-bullet > span {
    color: #7E9188 !important;
}

.m-aside-menu--skin-dark .m-menu__nav .m-menu__item:hover > .m-menu__link,
.m-aside-menu--skin-dark .m-menu__nav .m-menu__item.m-menu__item--hover > .m-menu__link {
    background-color: var(--pmn-sidebar-hover) !important;
}

.m-aside-menu--skin-dark .m-menu__nav .m-menu__item.m-menu__item--active > .m-menu__link,
.m-aside-menu--skin-dark .m-menu__nav .m-menu__item.m-menu__item--open > .m-menu__link {
    background-color: var(--pmn-sidebar-hover) !important;
    box-shadow: inset 3px 0 0 var(--pmn-primary);
}

.m-aside-menu--skin-dark .m-menu__nav .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
.m-aside-menu--skin-dark .m-menu__nav .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon {
    color: var(--pmn-primary) !important;
}

/* ── Portlets / cards ──────────────────────────────────────── */
.m-portlet {
    border-radius: var(--pmn-radius);
    box-shadow: var(--pmn-shadow);
    border: 1px solid var(--pmn-border);
    overflow: hidden;
}

.m-portlet .m-portlet__head {
    border-bottom: 1px solid var(--pmn-border);
    border-radius: var(--pmn-radius) var(--pmn-radius) 0 0;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary, .btn-accent, .btn-brand,
.btn-primary:focus, .btn-accent:focus, .btn-brand:focus {
    background-color: var(--pmn-primary) !important;
    border-color: var(--pmn-primary) !important;
    color: #fff !important;
}

.btn-primary:hover, .btn-accent:hover, .btn-brand:hover,
.btn-primary:active, .btn-accent:active, .btn-brand:active {
    background-color: var(--pmn-primary-dark) !important;
    border-color: var(--pmn-primary-dark) !important;
    color: #fff !important;
}

.btn-secondary {
    background-color: #fff;
    border-color: var(--pmn-border);
    color: var(--pmn-body);
}

.btn-secondary:hover {
    background-color: var(--pmn-primary-soft);
    border-color: var(--pmn-primary-border);
    color: var(--pmn-primary-darker);
}

.m-btn--air { box-shadow: 0 4px 12px rgba(111,183,77,.28) !important; }
.m-btn--air:hover { box-shadow: 0 6px 16px rgba(111,183,77,.38) !important; }
.btn-secondary.m-btn--air { box-shadow: var(--pmn-shadow) !important; }

.btn { border-radius: 8px; }
.btn.m-btn--pill { border-radius: 60px; }

/* ── Forms ─────────────────────────────────────────────────── */
.form-control {
    border-color: var(--pmn-border);
    border-radius: 8px;
    color: var(--pmn-ink);
}

.form-control:focus {
    border-color: var(--pmn-primary);
    box-shadow: 0 0 0 3px rgba(111,183,77,.18);
}

select.form-control { border-radius: 8px; }

/* ── Tables ────────────────────────────────────────────────── */
.table thead th {
    color: var(--pmn-primary-darker);
    border-bottom: 2px solid var(--pmn-primary-border);
    background: var(--pmn-primary-soft);
    font-weight: 600;
}

.table td { border-top: 1px solid var(--pmn-border); vertical-align: middle; }
.table-hover tbody tr:hover { background-color: var(--pmn-primary-soft); }
.table-striped tbody tr:nth-of-type(odd) { background-color: #FAFCF9; }

/* Dark sticky header rows used on cycle-changes tables */
.hd_row { background: var(--pmn-sidebar) !important; color: #fff !important; }

/* ── Badges / pills ────────────────────────────────────────── */
.badge { border-radius: 20px; font-weight: 500; }
.badge-primary { background: var(--pmn-primary-soft); color: var(--pmn-primary-darker); }
.badge-success { background: var(--pmn-primary-soft); color: var(--pmn-primary-darker); }

/* ── Dropdown multiselect (VAS / edu modules etc.) ─────────── */
.multiselect-parent .dropdown-toggle,
.multiselect-parent .btn {
    border-radius: 8px;
    border-color: var(--pmn-border);
}

.dropdown-menu > .active > a,
.dropdown-menu > li > a:hover {
    background-color: var(--pmn-primary-soft);
    color: var(--pmn-primary-darker);
}

/* ── Pagination / nav pills / tabs ─────────────────────────── */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.page-item.active .page-link {
    background-color: var(--pmn-primary) !important;
    border-color: var(--pmn-primary) !important;
    color: #fff !important;
}

.page-link { color: var(--pmn-primary-darker); }

/* ── Footer ────────────────────────────────────────────────── */
.m-footer { background: var(--pmn-surface) !important; border-top: 1px solid var(--pmn-border); }

/* ── Scrollbars (webkit) ───────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C9D4CC; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--pmn-grey); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Loaders / spinners ────────────────────────────────────── */
.spinner-border { color: var(--pmn-primary); }

/* ── Legacy hardcoded borders in views (soften) ────────────── */
.m-portlet__body[style*="border: solid"],
.m-portlet__body[style*="border:solid"] {
    border: 1px solid var(--pmn-border) !important;
    border-radius: var(--pmn-radius) !important;
    box-shadow: none;
}