@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&family=Albert+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  --w-paper: #FAFAF7;
  --w-paper-soft: #F4F2EC;
  --w-ink: #0B1F3F;
  --w-ink-soft: #2A3F66;
  --w-mute: #6B6B68;
  --w-rule: #E7E4DB;
  --w-rule-strong: #D6D2C5;
  --w-radius: 14px;
  --w-shadow: 0 12px 32px -16px rgba(11,31,63,.16), 0 4px 8px -4px rgba(11,31,63,.04);
  --base-h: 216; --base-s: 70%; --base-l: 15%;
  --base-two-h: 216; --base-two-s: 40%; --base-two-l: 26%;
  --section-bg: 48 20% 97%;
  --bg-two: 48 20% 95%;
  --border-color: 45 20% 88%;
  --border-color-two: 45 20% 90%;
}
body { font-family: 'Albert Sans', system-ui, sans-serif; background: var(--w-paper); color: var(--w-ink); }
h1,h2,h3,h4,h5,h6,.title,[class*="__title"] { font-family: 'Onest', system-ui, sans-serif; letter-spacing: -0.02em; color: var(--w-ink); }
a { color: var(--w-ink); }
.section-bg, .section-bg-two, .dashboard { background: var(--w-paper-soft) !important; }

/* header */
.header { background: var(--w-paper); border-bottom: 1px solid var(--w-rule); box-shadow: none; }
.header .navbar { min-height: 76px; }
.navbar-brand.logo { display: inline-flex; align-items: center; gap: 10px; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--w-ink); }
.brand-mark { width: 32px; height: 32px; background: var(--w-ink); color: var(--w-paper); border-radius: 8px; display: inline-grid; place-items: center; font-size: 16px; font-weight: 700; }
.nav-menu .nav-link { color: var(--w-ink-soft); font-weight: 500; }
.nav-menu .nav-link:hover, .nav-menu .nav-link.active { color: var(--w-ink); }

/* buttons */
.btn { font-family: 'Onest', sans-serif; font-weight: 500; border-radius: 999px; box-shadow: none; }
.btn--base { background: var(--w-ink); border-color: var(--w-ink); color: var(--w-paper); }
.btn--base:hover, .btn--base:focus, .btn--base:active { background: var(--w-ink-soft); border-color: var(--w-ink-soft); color: var(--w-paper); }
.btn--base.outline { background: transparent; color: var(--w-ink); border: 1px solid var(--w-rule-strong); }
.btn--base.outline:hover, .btn--base.outline.active { background: var(--w-ink); border-color: var(--w-ink); color: var(--w-paper); }
.text--base { color: var(--w-ink) !important; }
.bg--base { background: var(--w-ink) !important; }

/* surfaces */
.card, .account-form, .dashboard-card, .widget-card, .dashboard-widget {
  border-radius: var(--w-radius); border: 1px solid var(--w-rule); box-shadow: var(--w-shadow); background: #fff;
}
.form-control, .form--control, .form-select, .select2-container--default .select2-selection--single {
  border-radius: 10px; border-color: var(--w-rule-strong); background: #fff; font-family: 'Albert Sans', sans-serif;
}
.form-control:focus, .form--control:focus, .form-select:focus { border-color: var(--w-ink); box-shadow: 0 0 0 3px rgba(11,31,63,.08); }
.form-label, label { font-weight: 500; color: var(--w-ink); }
.table > :not(caption) > * > * { border-color: var(--w-rule); }
.badge { font-family: 'DM Mono', monospace; font-weight: 500; }

/* auth */
.account-section { background: var(--w-paper-soft); }
.account-section .bg-section { display: none; }
.account-info__title { font-size: 28px; font-weight: 600; }
.account-info__description, .account-form__desc { color: var(--w-mute); }
.account-form { padding: 32px; }

/* footer */
.footer-area { background: var(--w-paper); border-top: 1px solid var(--w-rule); padding: 24px 0; color: var(--w-mute); }
.footer-bar { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; font-size: 14px; }
.footer-menu__link { color: var(--w-mute); }
.footer-menu__link:hover { color: var(--w-ink); }

.preloader { background: var(--w-paper); }
.scroll-top { background: var(--w-ink); color: var(--w-paper); }
.account-info__thumb { text-align: center; }
.account-info__thumb img { max-height: 56px; width: auto; }

/* page header: plain band instead of the stock photo */
.breadcrumb { margin: 0; padding: 0; background: var(--w-paper); border-bottom: 1px solid var(--w-rule); }
.breadcrumb__top { background: none !important; padding: 28px 0; }
.breadcrumb-content__title { font-family: 'Onest', sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--w-ink); text-align: left; }
.dashboard { padding-top: 40px !important; padding-bottom: 64px !important; min-height: calc(100vh - 76px - 90px - 70px); }
.language-box { display: none !important; }

/* sidebar profile */
.sidebar-menu { background: #fff; border: 1px solid var(--w-rule); border-radius: var(--w-radius); box-shadow: var(--w-shadow); padding: 20px; }
.sidebar-menu__profile { background: var(--w-paper-soft) !important; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sidebar-menu__profile .thumb { width: 72px; height: 72px; border: 0; background: var(--w-ink); display: grid; place-items: center; }
.avatar-initials { color: var(--w-paper); font: 600 28px 'Onest', sans-serif; line-height: 1; }
.sidebar-menu__profile-content { width: 100%; }
.sidebar-menu__profile .title { font-size: 18px; margin: 0 0 2px; }
.sidebar-menu__profile-content .date { color: var(--w-mute); }
.sidebar-menu-title p { font: 500 12px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--w-mute); }
.sidebar-menu-list__link { border-radius: 10px; color: var(--w-ink-soft); font-weight: 500; }
.sidebar-menu-list__link .icon svg, .sidebar-menu-list__link .icon i { fill: currentColor; color: inherit; }
.sidebar-menu-list__item.active .sidebar-menu-list__link, .sidebar-menu-list__link:hover { background: var(--w-paper-soft); color: var(--w-ink); box-shadow: inset 3px 0 0 var(--w-ink); }

/* stat cards: white, quiet, one accent */
.dashboard-card__two { background: #fff; border: 1px solid var(--w-rule); border-radius: var(--w-radius); box-shadow: var(--w-shadow); overflow: hidden; }
.dashboard-card__two-header, .dashboard-card__two-header.primary, .dashboard-card__two-header.warning, .dashboard-card__two-header.danger, .dashboard-card__two-header.success {
  background: transparent !important; padding: 20px 22px 0; display: flex; align-items: center; justify-content: space-between; }
.dashboard-card__two-header .title h6 { color: var(--w-mute) !important; font: 500 13px 'DM Mono', monospace !important; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.dashboard-card__two-header .icon { width: 38px; height: 38px; border-radius: 10px; background: var(--w-paper-soft); display: grid; place-items: center; }
.dashboard-card__two-header .icon i, .dashboard-card__two-header .icon svg { color: var(--w-ink) !important; fill: var(--w-ink) !important; width: 18px; height: 18px; font-size: 16px; }
.dashboard-card__two-content { padding: 8px 22px 22px; }
.dashboard-card__two-content h4 { font: 600 32px 'Onest', sans-serif; letter-spacing: -0.02em; color: var(--w-ink); }

/* generic cards, activity list */
.custom--card { background: #fff; border: 1px solid var(--w-rule); border-radius: var(--w-radius); box-shadow: var(--w-shadow); }
.campaign-status__title { font-size: 18px; margin-bottom: 14px; }
.recent-activices { list-style: none; padding: 0; margin: 0; color: var(--w-mute); }

/* footer */
.footer-area .footer-menu { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 24px; margin: 0; padding: 0; list-style: none; }
.footer-area .footer-menu__item { margin: 0 !important; padding: 0 !important; }
.footer-area .footer-menu__link { font-size: 14px; }
.breadcrumb__top::after { display: none !important; }
.breadcrumb__top, .breadcrumb__top .container { padding-top: 0; }
.breadcrumb__top { padding: 28px 0 !important; }
.breadcrumb__top h5 { font-size: 26px !important; color: var(--w-ink) !important; }
@media (max-width: 575px) { .breadcrumb__top h5 { font-size: 22px !important; } }
.breadcrumb { display: block !important; }
.breadcrumb__top .container { width: 100%; }

.dashboard-body { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.dashboard-body > .row + .row { margin-top: 8px; }

/* tables and list pages: one clean card */
.dashbaord-table-header { background: #fff; border: 1px solid var(--w-rule); border-bottom: 0; border-radius: var(--w-radius) var(--w-radius) 0 0; padding: 14px 16px; margin: 0 !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dashbaord-table-header + .row { margin: 0 !important; }
.dashbaord-table-header + .row > .dashboard-table { padding: 0; }
.dashboard-table { background: #fff; border: 1px solid var(--w-rule); border-radius: var(--w-radius); box-shadow: var(--w-shadow); overflow: hidden; }
.dashbaord-table-header + .row .dashboard-table { border-radius: 0 0 var(--w-radius) var(--w-radius); border-top: 1px solid var(--w-rule); }
.dashboard-table .table { margin: 0; }
.dashboard-table .table thead tr th { background: var(--w-paper-soft) !important; color: var(--w-mute) !important; font: 500 12px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .06em; border: 0; padding: 14px 16px; }
.dashboard-table .table tbody tr td { padding: 14px 16px; border-color: var(--w-rule); background: #fff; color: var(--w-ink); }
.dashboard-table .table tbody tr:hover td { background: var(--w-paper); }
.campaign-participant-status { min-width: 160px; }
.campaign-participant-status .select2-container { width: 100% !important; }
.custom--tab .nav-link.active, .custom--tab .nav-link:hover { background: var(--w-ink); color: var(--w-paper); }
.dashbaord-table-header + .row { --bs-gutter-y: 0; margin-top: 0 !important; } .dashbaord-table-header + .row > * { margin-top: 0 !important; padding: 0; }

/* header account chip */
.header-account { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--w-rule); border-radius: 999px; background: #fff; color: var(--w-ink); font-weight: 500; text-decoration: none; }
.header-account:hover { border-color: var(--w-rule-strong); background: var(--w-paper-soft); color: var(--w-ink); }
.header-account__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--w-ink); color: var(--w-paper); display: grid; place-items: center; font: 600 14px 'Onest', sans-serif; }
.header-account__name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575px) { .header-account__name { display: none; } .header-account { padding: 4px; } }
@media (max-width: 991px) {
  .sidebar-menu { padding: 60px 20px 24px !important; border-radius: 0 !important; box-shadow: 18px 0 40px -20px rgba(11,31,63,.35); width: min(320px, 86vw); min-width: 0 !important; }
  .dashboard-body__bar-icon { background: var(--w-ink) !important; }
}

/* sidebar toggle lives in the header (where the old menu icon was) */
.header-menu-btn { margin: 0 !important; width: 42px; height: 42px; line-height: 1; border: 1px solid var(--w-rule); border-radius: 10px; background: #fff !important; color: var(--w-ink) !important; font-size: 22px; display: inline-grid; place-items: center; padding: 0; cursor: pointer; }
.header-menu-btn:hover { background: var(--w-paper-soft) !important; }