/* ==========================================================================
   CapNest brand theme for InternalPortal
   --------------------------------------------------------------------------
   Aligns the admin portal with the CapNest identity used in the
   "Capnest (Final)" Figma file (Web App / Cover pages).

   --cn-green and --cn-cream are sampled directly from the shipped brand
   asset wwwroot/images/logos/capNestLogo.png (82% / 9% of its opaque pixels).
   --cn-gold and --cn-mint are read off the Figma landing frame.

   Load order matters: this file must come AFTER styles.min.css and site.css.
   ========================================================================== */

:root,
[data-color-theme="Blue_Theme"] {
    /* ---- brand ---- */
    --cn-green-900: #04211A;
    --cn-green-800: #083227;
    --cn-green: #0B4030; /* brand primary */
    --cn-green-600: #125A43;
    --cn-green-400: #2E7C61;
    --cn-green-200: #C3D5CE;
    --cn-green-100: #E4EDE9;
    --cn-green-50: #F2F6F4;
    --cn-cream: #EEEEEE;
    --cn-mint: #34A76A; /* filled CTA on the Figma landing frame */
    --cn-mint-700: #1F7A4A; /* depth needed to carry white text at AA */
    --cn-mint-100: #E6F5ED;
    --cn-gold: #C9A227; /* highlight / outlined CTA */
    --cn-gold-700: #8A6E14; /* depth needed to carry white text at AA */
    --cn-gold-100: #FBF3DC;

    /* ---- neutrals ---- */
    --cn-ink: #17231E;
    --cn-muted: #5F7168;
    --cn-line: #E3E8E5;
    --cn-surface: #FFFFFF;
    --cn-canvas: #F5F7F6;

    /* ---- shape ---- */
    --cn-radius: 10px;
    --cn-radius-sm: 8px;
    --cn-radius-lg: 14px;
    --cn-shadow: 0 1px 2px rgba(11, 64, 48, .06), 0 8px 24px rgba(11, 64, 48, .06);
    --cn-shadow-hover: 0 8px 28px rgba(11, 64, 48, .14);

    /* ---- type ----
       Arabic face for RTL. The Figma file is view-only so the exact family
       could not be read from it; swap this one variable to change it. */
    --cn-font-ar: "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", sans-serif;

    /* ---- remap Bootstrap / template tokens onto the brand ---- */
    --bs-primary: #0B4030;
    --bs-primary-rgb: 11, 64, 48;
    --bs-primary-text: #0B4030;
    --bs-primary-text-emphasis: #083227;
    --bs-light-primary: #E4EDE9;
    --bs-blue: #0B4030;

    --bs-secondary: #125A43;
    --bs-secondary-rgb: 18, 90, 67;
    --bs-light-secondary: #E4EDE9;

    --bs-success: #34A76A;
    --bs-success-rgb: 52, 167, 106;
    --bs-success-text: #1F7A4A;
    --bs-light-success: #E6F5ED;

    --bs-warning: #C9A227;
    --bs-warning-rgb: 201, 162, 39;
    --bs-warning-text: #8A6E14;
    --bs-light-warning: #FBF3DC;

    --bs-info: #2E7C61;
    --bs-info-rgb: 46, 124, 97;
    --bs-info-text: #1D5744;
    --bs-light-info: #E9F2EE;

    --bs-danger: #C4483A;
    --bs-danger-rgb: 196, 72, 58;
    --bs-danger-text: #923227;
    --bs-light-danger: #FAECEA;

    --bs-dark: #17231E;
    --bs-dark-rgb: 23, 35, 30;
    --bs-muted: #5F7168;
    --bs-light: #F5F7F6;
    --bs-light-gray: #F5F7F6;
    --bs-body-color: #17231E;

    --bs-link-color: #0B4030;
    --bs-link-color-rgb: 11, 64, 48;
    --bs-link-hover-color: #125A43;

    --bs-border-radius: var(--cn-radius);
    --dt-row-stripe: 11, 64, 48;
}

/* ==========================================================================
   Typography
   ========================================================================== */

html[dir="rtl"] body,
html[dir="rtl"] .sidebar-nav,
html[dir="rtl"] .btn,
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] table {
    font-family: var(--cn-font-ar);
}

body {
    background-color: var(--cn-canvas);
    color: var(--cn-ink);
}

h1, h2, h3, h4, h5, h6,
.section.row h3,
.general_info h5,
.genera_inf strong,
.genera_inf label {
    color: var(--cn-ink);
}

/* ==========================================================================
   Shell — sidebar
   ========================================================================== */

.left-sidebar {
    background-color: var(--cn-green) !important;
    border-inline-end: 0 !important;
}

html[dir="rtl"] body .left-sidebar {
    border-left: 0;
}

/* The brand asset is dark-green artwork on transparency, so it disappears on
   a green sidebar. Render it cream — the same treatment as the Figma cover. */
.left-sidebar .brand-logo {
    padding-inline: 20px;
    padding-bottom: 8px;
}

.left-sidebar .brand-logo .logo-img img {
    filter: brightness(0) invert(1);
}

.left-sidebar .close-btn i {
    color: var(--cn-cream);
}

.sidebar-nav ul#sidebarnav .nav-small-cap {
    color: rgba(238, 238, 238, .72) !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 11px;
    font-weight: 600;
    margin-top: 14px;
}

.sidebar-nav ul#sidebarnav .nav-small-cap .nav-small-cap-icon {
    display: none;
}

.sidebar-nav ul#sidebarnav .sidebar-item .sidebar-link {
    color: rgba(238, 238, 238, .82) !important;
    border-radius: var(--cn-radius-sm);
    margin: 2px 12px;
    padding: 9px 12px;
    gap: 12px;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar-nav ul#sidebarnav .sidebar-item .sidebar-link i,
.sidebar-nav ul#sidebarnav .sidebar-item .sidebar-link svg {
    color: rgba(238, 238, 238, .82) !important;
    stroke: currentColor;
}

.sidebar-nav ul#sidebarnav .sidebar-item .sidebar-link:hover {
    background-color: rgba(238, 238, 238, .10) !important;
    color: #FFFFFF !important;
}

.sidebar-nav ul#sidebarnav .sidebar-item .sidebar-link.active,
.sidebar-nav ul#sidebarnav .sidebar-item.selected > .sidebar-link {
    background-color: var(--cn-cream) !important;
    color: var(--cn-green) !important;
    font-weight: 600;
    box-shadow: none;
}

.sidebar-nav ul#sidebarnav .sidebar-item .sidebar-link.active i,
.sidebar-nav ul#sidebarnav .sidebar-item .sidebar-link.active svg,
.sidebar-nav ul#sidebarnav .sidebar-item.selected > .sidebar-link i,
.sidebar-nav ul#sidebarnav .sidebar-item.selected > .sidebar-link svg {
    color: var(--cn-green) !important;
}

.sidebar-nav .scroll-sidebar .simplebar-scrollbar:before {
    background: rgba(238, 238, 238, .35);
}

/* ==========================================================================
   Shell — header
   ========================================================================== */

header.app-header {
    background-color: var(--cn-surface);
    border-bottom: 1px solid var(--cn-line);
    box-shadow: 0 1px 2px rgba(11, 64, 48, .04);
}

header.app-header .navbar h4 {
    font-weight: 700;
    color: var(--cn-ink);
    margin: 0;
}

header.app-header .nav-icon-hover i {
    color: var(--cn-green);
}

header.app-header .notification.bg-primary {
    background-color: var(--cn-gold) !important;
}

.lang_box {
    background: var(--cn-green-50);
    border: 1px solid var(--cn-line);
}

.lang_icon em {
    color: var(--cn-green);
}

.lang_icon svg path {
    stroke: var(--cn-green);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    border-radius: var(--cn-radius-sm);
    font-weight: 600;
}

.btn-primary,
.btn-primary:focus {
    background-color: var(--cn-green);
    border-color: var(--cn-green);
    color: #FFFFFF;
}

.btn-primary:hover,
.btn-primary:active,
.btn-check:checked + .btn-primary {
    background-color: var(--cn-green-600) !important;
    border-color: var(--cn-green-600) !important;
    color: #FFFFFF !important;
}

.btn-outline-primary {
    color: var(--cn-green);
    border-color: var(--cn-green);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--cn-green) !important;
    border-color: var(--cn-green) !important;
    color: #FFFFFF !important;
}

.btn-dark {
    background-color: var(--cn-green);
    border-color: var(--cn-green);
}

.btn-dark:hover,
.btn-dark:active {
    background-color: var(--cn-green-800) !important;
    border-color: var(--cn-green-800) !important;
}

.btn-secondary {
    background-color: var(--cn-green-50);
    border-color: var(--cn-line);
    color: var(--cn-green);
}

.btn-secondary:hover,
.btn-secondary:active {
    background-color: var(--cn-green-100) !important;
    border-color: var(--cn-green-200) !important;
    color: var(--cn-green) !important;
}

/* The Figma CTA green under white text is only 3.05:1, so filled success
   surfaces use the deeper tone; --cn-mint stays for accents on light ground. */
.btn-success {
    background-color: var(--cn-mint-700);
    border-color: var(--cn-mint-700);
    color: #FFFFFF;
}

.btn-success:hover,
.btn-success:active {
    background-color: #18613A !important;
    border-color: #18613A !important;
}

/* Gold is a light hue — it carries ink, not white, at AA contrast. */
.btn-warning {
    background-color: var(--cn-gold);
    border-color: var(--cn-gold);
    color: var(--cn-ink);
}

.btn-warning:hover,
.btn-warning:active {
    background-color: var(--cn-gold-700) !important;
    border-color: var(--cn-gold-700) !important;
    color: #FFFFFF !important;
}

.btn-danger {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #FFFFFF;
}

.btn-danger:hover,
.btn-danger:active {
    background-color: #9E3A2E !important;
    border-color: #9E3A2E !important;
    color: #FFFFFF !important;
}

.badge.bg-danger {
    background-color: var(--bs-danger) !important;
    color: #FFFFFF !important;
}

/* The template hardcodes #49BEFF here rather than reading --bs-secondary, so
   it survives the token remap. It is the Upload button on every fund form. */
.btn-outline-secondary {
    color: var(--cn-green);
    border-color: var(--cn-green-200);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active {
    background-color: var(--cn-green) !important;
    border-color: var(--cn-green) !important;
    color: #FFFFFF !important;
}

.btn-link {
    color: var(--cn-green);
}

/* Focus ring — replaces the template's blue halo */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .1rem #FFFFFF, 0 0 0 .25rem rgba(11, 64, 48, .35) !important;
    border-color: var(--cn-green-400);
}

.form-check-input:checked {
    background-color: var(--cn-green);
    border-color: var(--cn-green);
}

/* ==========================================================================
   Cards & surfaces
   ========================================================================== */

.card {
    border: 1px solid var(--cn-line);
    border-radius: var(--cn-radius);
    box-shadow: var(--cn-shadow);
}

.card .card-title {
    color: var(--cn-ink);
}

.genera_inf a,
.genera_inf span {
    background: var(--cn-green-50);
    border: 1px solid var(--cn-line);
}

.list_check_update {
    background: var(--cn-green-50);
    border: 1px solid var(--cn-line);
}

.list_check_update input {
    border: 1px solid var(--cn-green-400);
}

.text_content {
    background: var(--cn-green-50);
    border: 1px solid var(--cn-line);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control,
.form-select {
    border-radius: var(--cn-radius-sm);
    border-color: var(--cn-line);
}

.form_input label,
.form-label {
    color: var(--cn-ink);
    font-weight: 600;
}

.input-group input {
    border-radius: var(--cn-radius-sm);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--cn-radius-sm) !important;
    border-color: var(--cn-line) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--cn-green) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--cn-green-100) !important;
    border-color: var(--cn-green-200) !important;
    color: var(--cn-green) !important;
}

/* ==========================================================================
   Tables & DataTables
   ========================================================================== */

.table > thead,
.table-light,
.head_t {
    --bs-table-bg: var(--cn-green-50);
    background-color: var(--cn-green-50);
}

.table > thead th,
.head_t tr th,
span.dt-column-title {
    color: var(--cn-green) !important;
    font-weight: 700;
}

.general_table .dt-layout-table {
    border: 1px solid var(--cn-line);
    border-radius: var(--cn-radius);
    overflow: hidden;
}

.head_t tr:last-child {
    border-bottom: 1px solid var(--cn-line);
}

.head_t tr th {
    border-inline-end: 1px solid var(--cn-green-200);
}

.general_table tr td {
    border-inline-end: 1px solid var(--cn-line);
}

/* site.css stripes the ODD rows, which puts a tint on row 1 that lands within
   a hair of the header's --cn-green-50 and makes the two read as one block.
   Flip the stripe to the EVEN rows so the first row stays clean. Same
   specificity as the site.css rule, and this file loads after it. */
table > tbody > tr:nth-of-type(2n + 1) > *,
.table > tbody > tr:nth-of-type(2n + 1) > * {
    box-shadow: none;
}

table > tbody > tr:nth-of-type(2n) > *,
.table > tbody > tr:nth-of-type(2n) > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), .05);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--cn-green-50);
    background-color: var(--cn-green-50);
}

div.dt-container div.dt-search label {
    background: var(--cn-green);
    border: 1px solid var(--cn-green);
    color: #FFFFFF;
    border-radius: var(--cn-radius-sm);
}

.pagination li button,
.pagination li .page-link {
    border-radius: var(--cn-radius-sm) !important;
    color: var(--cn-green);
}

.pagination li .page-link:hover {
    background-color: var(--cn-green-50);
}

.pagination li.active .page-link,
div.dt-container div.dt-paging ul.pagination li.active button.dt-paging-button {
    background: var(--cn-green) !important;
    border-color: var(--cn-green) !important;
    color: #FFFFFF !important;
}

.table_btns a,
.table_btns button {
    border-radius: var(--cn-radius-sm) !important;
}

.list_table_menu .dropdown > button {
    border: 1px solid var(--cn-line);
}

.list_table_menu .dropdown ul.dropdown-menu li {
    border-bottom: 1px solid var(--cn-line);
}

/* Upload progress bar in the _FileUpload partial */
.progress-bar {
    background-color: var(--cn-green);
}

/* ==========================================================================
   File previews — the _FileUpload component
   ========================================================================== */

.file-preview-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-preview-list:empty {
    display: none;
}

.file-preview-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--cn-line);
    border-radius: var(--cn-radius-sm);
    background: var(--cn-green-50);
}

.file-preview-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cn-radius-sm);
    background: var(--cn-surface);
    border: 1px solid var(--cn-line);
    overflow: hidden;
}

.file-preview-thumb i {
    font-size: 20px;
    color: var(--cn-green);
}

.file-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.file-preview-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.file-preview-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--cn-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-preview-sub {
    font-size: 12px;
    color: var(--cn-muted);
}

.file-preview-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    margin-inline-start: auto;
}

.file-preview-actions .btn {
    padding: 3px 10px;
    font-size: 12px;
}

/* ==========================================================================
   Tabs — the multi-step fund Create/Update wizards
   Default template leaves the active tab plain black and unweighted, so it
   reads as less prominent than the inactive ones.
   ========================================================================== */

.nav-tabs {
    border-bottom: 1px solid var(--cn-line);
}

.nav-tabs .nav-link {
    color: var(--cn-muted);
    border: 1px solid transparent;
    border-radius: var(--cn-radius-sm) var(--cn-radius-sm) 0 0;
    font-weight: 500;
}

.nav-tabs .nav-link:hover {
    color: var(--cn-green);
    background-color: var(--cn-green-50);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--cn-green) !important;
    background-color: var(--cn-surface);
    font-weight: 700;
    border-color: var(--cn-line) var(--cn-line) var(--cn-surface);
    box-shadow: inset 0 3px 0 0 var(--cn-green);
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge.bg-primary {
    background-color: var(--cn-green) !important;
}

.badge.bg-success {
    background-color: var(--cn-mint-700) !important;
    color: #FFFFFF !important;
}

.badge.bg-warning {
    background-color: var(--cn-gold) !important;
    color: var(--cn-ink) !important;
}

.badge.bg-info {
    background-color: var(--cn-green-400) !important;
}

/* ==========================================================================
   Notifications dropdown
   ========================================================================== */

.dropdown-menu.dropdown-notification .notification_content {
    background: var(--cn-green-50);
    border-radius: var(--cn-radius-sm);
}

.dropdown-menu.dropdown-notification .notification_content small.text-muted {
    color: var(--cn-green-400) !important;
}

.notification-item.unread-notification {
    background: var(--cn-mint-100);
    border-radius: var(--cn-radius-sm);
}

.custom-notification {
    border-radius: var(--cn-radius);
    border: 1px solid var(--cn-line);
    box-shadow: var(--cn-shadow-hover);
}

.custom-notification h4 {
    color: var(--cn-green) !important;
}

/* ==========================================================================
   Dashboard — Overview stat cards
   Brand-derived set, replacing the template's blue / tan / teal.
   ========================================================================== */

.card_db {
    border: 0;
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow);
}

.card_db:hover {
    box-shadow: var(--cn-shadow-hover);
}

.card_db .card-title,
.card_db h4,
.card_db h5,
.card_db i {
    color: #FFFFFF !important;
}

.card_db .card-title {
    opacity: .82;
    font-size: 14px;
}

.card_db h4 {
    font-size: 28px;
}

.card_db.total_user {
    background: var(--cn-green);
}

/* All four carry white text, so each background is taken to a depth that
   clears AA (4.5:1) rather than the lighter brand tints. */
.card_db.pending_kYC {
    background: var(--cn-gold-700);
}

.card_db.active_funds {
    background: var(--cn-mint-700);
}

.card_db.wallet_balance {
    background: var(--cn-green-400);
}

.icon_side i {
    opacity: .5;
}

/* Subscription / KPI accent text */
.Submitted_t h5 {
    color: var(--cn-green-400) !important;
}

.Approved_t h5 {
    color: var(--cn-mint) !important;
}

.Pending_t h5 {
    color: var(--cn-gold) !important;
}

.Rejected_t h5 {
    color: #C4483A !important;
}

.TotalSubscriptions_t h5 {
    color: var(--cn-green) !important;
}

/* ==========================================================================
   Auth screens
   ========================================================================== */

.radial-gradient {
    background: radial-gradient(circle at 50% 0%, var(--cn-green-600) 0%, var(--cn-green) 45%, var(--cn-green-900) 100%) !important;
}

.radial-gradient .card {
    border-radius: var(--cn-radius-lg);
    box-shadow: 0 18px 48px rgba(4, 33, 26, .35);
}