/* NICTBD V26 — unified dynamic theme for public, merchant, admin and checkout surfaces. */
:root {
    --ui-ink: #0f172a;
    --ui-text: #334155;
    --ui-muted: #64748b;
    --ui-line: #e2e8f0;
    --ui-soft: #f8fafc;
    --ui-page: #f4f7fb;
    --ui-card: #ffffff;
    --ui-success: #15803d;
    --ui-warning: #b45309;
    --ui-danger: #b91c1c;
    --ui-radius: 16px;
    --ui-radius-sm: 12px;
    --ui-shadow: 0 16px 42px rgba(15, 23, 42, .075);
}

html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; color: var(--ui-ink); background-color: var(--ui-page); }
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { font: inherit; }

/* Shared brand surfaces */
.btn-primary,
.button-primary,
.primary-button,
.submit,
.submit-btn,
.pay-btn,
.cms-button-primary,
[class*="gradient-button"],
[class*="primary-btn"],
.filter-submit,
.deposit-submit {
    background: var(--brand-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--brand-shadow-soft) !important;
}

.btn-primary:hover,
.button-primary:hover,
.primary-button:hover,
.submit:hover,
.submit-btn:hover,
.pay-btn:hover:not(:disabled) {
    filter: brightness(.98);
    transform: translateY(-1px);
}

a.brand-link,
.text-brand,
.link-primary,
.nav-link-active,
[class*="text-pink-"] {
    color: var(--brand-primary) !important;
}

[class*="bg-pink-50"], [class*="bg-pink-100"] { background-color: var(--brand-soft) !important; }
[class*="bg-pink-400"], [class*="bg-pink-500"], [class*="bg-pink-600"] { background-color: var(--brand-primary) !important; }
[class*="border-pink-"] { border-color: var(--brand-border) !important; }
[class*="from-pink-"] { --tw-gradient-from: var(--brand-primary) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(var(--brand-primary-rgb), 0) var(--tw-gradient-to-position) !important; }
[class*="via-pink-"] { --tw-gradient-via: var(--brand-primary) var(--tw-gradient-via-position) !important; }
[class*="to-pink-"], [class*="to-rose-"] { --tw-gradient-to: var(--brand-secondary) var(--tw-gradient-to-position) !important; }
[class*="shadow-pink-"], [class*="shadow-rose-"], [class*="shadow-purple-"], [class*="shadow-blue-"] { --tw-shadow-color: rgba(var(--brand-primary-rgb), .22) !important; }

/* Common content primitives */
.card,
.dashboard-card,
.content-card,
.panel-card,
.form-card,
.table-card,
.settings-card {
    border-color: var(--ui-line) !important;
    background: var(--ui-card) !important;
    box-shadow: var(--ui-shadow);
}

.control,
.form-control,
.form-select,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select,
textarea {
    max-width: 100%;
    border-color: var(--ui-line);
}

.control:focus,
.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), .11) !important;
    outline: 0 !important;
}

.table-wrap,
.table-responsive,
.data-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table thead th,
table thead th {
    background: linear-gradient(180deg, #fff, rgba(var(--brand-primary-rgb), .035));
}

.pagination .active,
.pagination [aria-current="page"] {
    background: var(--brand-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* Admin application */
.admin-shell .sidebar {
    background: var(--brand-gradient) !important;
    box-shadow: 18px 0 50px rgba(var(--brand-secondary-rgb), .15);
}

.admin-shell .sidebar::before,
.merchant-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 3%, rgba(255,255,255,.22), transparent 24%),
        radial-gradient(circle at 92% 92%, rgba(255,255,255,.12), transparent 28%);
}

.admin-shell .sidebar > *,
.merchant-sidebar > * { position: relative; z-index: 1; }

.admin-shell .brand,
.admin-shell .sidebar-user {
    border-color: rgba(255,255,255,.2) !important;
    background: rgba(255,255,255,.12) !important;
    box-shadow: 0 12px 32px rgba(15,23,42,.08);
}

.admin-shell .nav-label { color: rgba(255,255,255,.62) !important; }
.admin-shell .nav-link,
.admin-shell .nav-toggle { color: rgba(255,255,255,.82) !important; }
.admin-shell .nav-link:hover,
.admin-shell .nav-toggle:hover,
.admin-shell .nav-link.active,
.admin-shell .nav-toggle.active {
    color: #fff !important;
    background: rgba(255,255,255,.16) !important;
    box-shadow: none !important;
}
.admin-shell .nav-link.active,
.admin-shell .nav-toggle.active { border-left: 3px solid rgba(255,255,255,.92); }
.admin-shell .avatar { background: rgba(255,255,255,.18) !important; }

.admin-shell .main { min-width: 0; }
.admin-shell .topbar {
    border-color: rgba(226,232,240,.82) !important;
    background: rgba(255,255,255,.94) !important;
}
.admin-shell .content { width: 100%; max-width: 1680px; }
.admin-shell .page-head { min-width: 0; }
.admin-shell .page-head h3 { color: var(--ui-ink); }
.admin-shell .stat-icon,
.admin-shell .icon-box,
.admin-shell .dashboard-icon {
    background: var(--brand-gradient) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(var(--brand-primary-rgb), .16);
}

.admin-shell .stat { overflow: hidden; }
.admin-shell .stat::after {
    background: radial-gradient(circle, rgba(var(--brand-primary-rgb), .12), transparent 68%) !important;
}

.admin-dashboard .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-dashboard .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-dashboard .dashboard-chart-stage { width: 100%; min-width: 0; }
.admin-dashboard .dashboard-chart-stage canvas { max-width: 100% !important; }

/* Settings page */
.theme-settings-page { display: grid; gap: 18px; }
.theme-settings-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 18px; align-items: start; }
.theme-settings-card { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 18px; background: #fff; box-shadow: var(--ui-shadow); }
.theme-settings-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--ui-line); background: linear-gradient(180deg,#fff,rgba(var(--brand-primary-rgb),.025)); }
.theme-settings-card__head h4 { margin: 0; font-size: 15px; font-weight: 900; }
.theme-settings-card__head p { margin: 5px 0 0; color: var(--ui-muted); font-size: 11px; line-height: 1.55; }
.theme-settings-card__body { padding: 20px; }
.theme-settings-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-top: 1px solid var(--ui-line); background: var(--ui-soft); }
.theme-settings-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.theme-settings-form-grid .full { grid-column: 1 / -1; }
.theme-color-control { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 10px; align-items: center; }
.theme-color-control input[type="color"] { width: 52px; height: 46px; padding: 4px; border: 1px solid var(--ui-line); border-radius: 12px; background: #fff; cursor: pointer; }
.theme-color-control input[type="text"] { height: 46px; }
.theme-preview-card { position: sticky; top: 88px; overflow: hidden; border-radius: 20px; background: var(--brand-gradient); color: #fff; box-shadow: var(--brand-shadow); }
.theme-preview-card__visual { min-height: 220px; display: grid; place-items: center; padding: 30px 20px; background: radial-gradient(circle at 15% 15%,rgba(255,255,255,.23),transparent 28%),radial-gradient(circle at 90% 85%,rgba(255,255,255,.13),transparent 30%); }
.theme-preview-logo { width: min(190px, 70%); height: 110px; display: grid; place-items: center; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 18px 46px rgba(15,23,42,.18); }
.theme-preview-logo img { width: 100%; height: 100%; object-fit: contain; }
.theme-preview-logo__fallback { display: grid; place-items: center; width: 100%; height: 100%; color: var(--brand-primary); font-size: 23px; font-weight: 900; text-align: center; }
.theme-preview-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 15px; background: rgba(255,255,255,.12); }
.theme-preview-swatch { padding: 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 13px; background: rgba(255,255,255,.12); }
.theme-preview-swatch small { display: block; color: rgba(255,255,255,.72); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.theme-preview-swatch strong { display: block; margin-top: 4px; font-size: 12px; }
.asset-preview-row { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.asset-preview-box { width: 88px; height: 58px; display: grid; place-items: center; overflow: hidden; padding: 7px; border: 1px solid var(--ui-line); border-radius: 12px; background: #fff; }
.asset-preview-box.asset-preview-box--small { width: 58px; }
.asset-preview-box img { width: 100%; height: 100%; object-fit: contain; }
.asset-preview-copy { min-width: 0; }
.asset-preview-copy strong { display: block; font-size: 11px; }
.asset-preview-copy span { display: block; margin-top: 3px; color: var(--ui-muted); font-size: 10px; line-height: 1.45; }

/* Merchant application */
.merchant-sidebar {
    background: var(--brand-gradient) !important;
    box-shadow: 18px 0 50px rgba(var(--brand-secondary-rgb), .14) !important;
}
.merchant-sidebar .sidebar-brand,
.merchant-sidebar .sidebar-footer,
.merchant-sidebar .sidebar-logout-btn {
    border-color: rgba(255,255,255,.2) !important;
    background: rgba(255,255,255,.1) !important;
}
.merchant-sidebar .sidebar-section-label { color: rgba(255,255,255,.58) !important; }
.merchant-sidebar .sidebar-menu > a,
.merchant-sidebar .sidebar-submenu a,
.merchant-sidebar .submenu-toggle { color: rgba(255,255,255,.84) !important; }
.merchant-sidebar .sidebar-menu > a:hover,
.merchant-sidebar .sidebar-submenu a:hover,
.merchant-sidebar .submenu-toggle:hover,
.merchant-sidebar .sidebar-menu > a.active,
.merchant-sidebar .sidebar-submenu a.active,
.merchant-sidebar .submenu-toggle.parent-active {
    color: #fff !important;
    background: rgba(255,255,255,.16) !important;
    box-shadow: none !important;
}
.merchant-sidebar .sidebar-menu > a.active,
.merchant-sidebar .sidebar-submenu a.active { border-left-color: rgba(255,255,255,.95) !important; }
.merchant-header { background: rgba(255,255,255,.95) !important; border-color: var(--ui-line) !important; }
.header-context-icon,
.profile-avatar,
.wallet-balance-icon,
[class*="brand-icon"] { background: var(--brand-gradient) !important; color: #fff !important; }
.header-quick-btn:hover { color: var(--brand-primary) !important; border-color: var(--brand-border) !important; background: var(--brand-soft) !important; }
.merchant-content { width: 100%; max-width: 1680px; min-width: 0; }
.merchant-content .card,
.merchant-content .dashboard-card,
.merchant-content .wallet-card { border-color: var(--ui-line) !important; }

/* Replace decorative legacy blue/pink cards with the selected brand while preserving semantic statuses. */
.balance-blue:not(.status-card),
.balance-orange:not(.status-card),
.balance-green:not(.status-card),
.hero-card,
.wallet-hero,
.api-hero,
.masking-hero,
.rate-hero,
.gateway-hero,
.registration-fee-hero,
[class*="brand-gradient-card"] {
    background: var(--brand-gradient) !important;
    color: #fff !important;
}

.merchant-mobile-bottom-nav__item.is-active,
.public-mobile-bottom-nav__item.is-active { color: var(--brand-primary) !important; }
.merchant-mobile-bottom-nav__item.is-active .merchant-mobile-bottom-nav__icon,
.public-mobile-bottom-nav__item.is-active .public-mobile-bottom-nav__icon {
    color: var(--brand-primary) !important;
    background: var(--brand-soft) !important;
}

/* Public website */
.glass-header { border-bottom-color: rgba(var(--brand-primary-rgb), .10) !important; }
.nav-link-active { color: var(--brand-primary) !important; background: var(--brand-soft) !important; }
.public-brand-gradient,
.hero-gradient,
.cta-gradient { background: var(--brand-gradient) !important; }
#nictbd-app-download-banner { background: var(--brand-gradient) !important; box-shadow: var(--brand-shadow) !important; }
.nictbd-app-banner__button { background: rgba(255,255,255,.18) !important; border: 1px solid rgba(255,255,255,.28); }
.blog-prose a { color: var(--brand-primary) !important; }
.blog-prose blockquote { border-left-color: var(--brand-primary) !important; background: var(--brand-soft) !important; }
.cms-button { border-radius: 12px; }
.cms-button[style*="background"] { box-shadow: var(--brand-shadow-soft); }


.brand-shadow-button { box-shadow: var(--brand-shadow) !important; }
.docs-page, .nict-docs, .documentation-page {
    background:
        radial-gradient(circle at 10% 8%, rgba(var(--brand-primary-rgb), .12), transparent 28%),
        radial-gradient(circle at 92% 12%, rgba(var(--brand-secondary-rgb), .10), transparent 26%),
        linear-gradient(180deg, #fff 0%, var(--brand-soft) 100%) !important;
}

/* Documentation */
.nict-docs,
.docs-page,
.documentation-page { --nict-primary: var(--brand-primary); --nict-primary-dark: var(--brand-secondary); --nict-gradient: var(--brand-gradient); }
.docs-sidebar a.active,
.doc-nav a.active,
.documentation-nav a.active { background: var(--brand-soft) !important; color: var(--brand-primary) !important; border-color: var(--brand-border) !important; }
.copy-btn,
.code-copy { background: var(--brand-gradient) !important; color: #fff !important; }

/* Authentication surfaces */
.login-shell,
.register-shell,
.forgot-shell,
.auth-shell { background: var(--brand-gradient) !important; }
.login-logo,
.register-logo,
.auth-logo { background: var(--brand-gradient) !important; box-shadow: var(--brand-shadow-soft) !important; }
.input-wrap > i,
.row-extra a,
.register-link a,
.auth-link { color: var(--brand-primary) !important; }


/* Full-project brand normalization */
.cms-button,
.public-primary-button,
.service-primary-button,
.hero-action-primary,
[class*="btn-brand"],
[class*="button-brand"] {
    background: var(--brand-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--brand-shadow-soft) !important;
}

.cms-icon-box > i,
.cms-icon-box i,
.service-icon,
.feature-icon:not(.status-icon),
.public-icon:not(.status-icon) { color: var(--brand-primary) !important; }

.cms-divider { border-color: var(--brand-border) !important; }
.cms-section[style*="linear-gradient"],
.cms-element[style*="linear-gradient"] { background-image: var(--brand-gradient) !important; }

/* Legacy decorative color variants are mapped to the selected theme. */
.admin-shell .btn-dark,
.merchant-content .btn-dark { background: var(--brand-gradient) !important; color: #fff !important; }
.badge-info { background: var(--brand-soft) !important; color: var(--brand-secondary) !important; }
.notification-preview { border-color: var(--brand-border) !important; background: linear-gradient(135deg,var(--brand-soft),#fff) !important; }

/* Responsive normalization */
@media (max-width: 1180px) {
    .admin-dashboard .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .theme-settings-grid { grid-template-columns: 1fr; }
    .theme-preview-card { position: relative; top: auto; }
}

@media (max-width: 991.98px) {
    html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
    .admin-shell .main,
    .merchant-main { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; }
    .admin-shell .content,
    .merchant-content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding-left: 14px !important; padding-right: 14px !important; }
    .admin-shell .page-head,
    .merchant-content .page-head { align-items: flex-start !important; flex-direction: column !important; }
    .admin-shell .page-head .actions,
    .merchant-content .page-head .actions { width: 100%; }
    .admin-shell .page-head .actions .btn,
    .merchant-content .page-head .actions .btn { flex: 1 1 160px; }
    .admin-dashboard .grid-2,
    .admin-dashboard .dashboard-chart-grid { grid-template-columns: 1fr !important; }
    .admin-dashboard .dashboard-chart-card { min-height: 330px !important; }
    .admin-dashboard .dashboard-chart-stage { height: 245px !important; }
    .theme-settings-form-grid { grid-template-columns: 1fr; }
    .theme-settings-form-grid .full { grid-column: auto; }
}

@media (max-width: 575.98px) {
    .admin-shell .content,
    .merchant-content { padding: 12px 10px !important; }
    .admin-dashboard .grid-4 { grid-template-columns: 1fr !important; }
    .admin-shell .topbar { padding: 0 11px !important; }
    .admin-shell .top-title h2 { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .theme-settings-card__head,
    .theme-settings-card__footer { align-items: flex-start; flex-direction: column; }
    .theme-settings-card__footer .btn { width: 100%; }
    .theme-settings-card__body { padding: 16px; }
    .theme-preview-card__visual { min-height: 180px; }
    .theme-preview-card__meta { grid-template-columns: 1fr; }
    .table { min-width: 620px; }
    .card, .theme-settings-card { border-radius: 15px !important; }
}