:root {
  --ui-bg: #eef5f7;
  --ui-panel: #ffffff;
  --ui-text: #1e293b;
  --ui-muted: #64748b;
  --ui-border: #dbe4ef;
  --ui-primary: #0f8f8a;
  --ui-primary-dark: #0b6f6b;
  --ui-accent: #f05a28;
  --ui-secondary: #2563eb;
  --ui-gold: #f5b301;
  --ui-pink: #db2777;
  --ui-danger: #dc2626;
  --ui-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

body.dark-mode-ui {
  --ui-bg: #0d1821;
  --ui-panel: #132232;
  --ui-text: #e6edf5;
  --ui-muted: #a8b5c5;
  --ui-border: #26384b;
  --ui-primary: #22c7b8;
  --ui-primary-dark: #14a99d;
  --ui-accent: #ff8a3d;
  --ui-secondary: #60a5fa;
  --ui-gold: #facc15;
  --ui-pink: #f472b6;
  --ui-danger: #fb7185;
  --ui-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

html,
body {
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: "Inter", "Source Sans Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: var(--ui-primary);
}

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

.content-wrapper {
  background:
    radial-gradient(circle at top left, rgba(15, 143, 138, .18), transparent 32rem),
    radial-gradient(circle at top right, rgba(37, 99, 235, .10), transparent 28rem),
    linear-gradient(180deg, #f8fbfd 0%, var(--ui-bg) 28rem);
}

body.dark-mode-ui .content-wrapper {
  background:
    radial-gradient(circle at top left, rgba(34, 199, 184, .16), transparent 32rem),
    radial-gradient(circle at top right, rgba(96, 165, 250, .13), transparent 28rem),
    linear-gradient(180deg, #0f1e2a 0%, var(--ui-bg) 28rem);
}

.main-header.navbar {
  min-height: 64px;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, .22);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  backdrop-filter: blur(10px);
}

body.dark-mode-ui .main-header.navbar {
  background: rgba(19, 34, 50, .94);
  border-bottom-color: rgba(148, 163, 184, .18);
}

.main-header .nav-link {
  color: var(--ui-text);
  border-radius: 8px;
}

.navbar-quick-actions {
  gap: .5rem;
}

.navbar-user-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 38px;
  padding: .35rem .7rem;
  color: var(--ui-text);
  background: #eef6f5;
  border: 1px solid rgba(15, 118, 110, .16);
  border-radius: 999px;
}

.navbar-user-pill i {
  color: var(--ui-primary);
}

.main-sidebar {
  background: linear-gradient(180deg, #111827 0%, #0b3140 55%, #082f49 100%) !important;
  box-shadow: 14px 0 34px rgba(15, 23, 42, .18);
}

.brand-link {
  min-height: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  background: rgba(255, 255, 255, .04);
}

.brand-link .brand-image {
  width: 38px;
  height: 38px;
  object-fit: cover;
  background: #fff;
}

.brand-link .brand-text {
  color: #fff;
  font-weight: 700 !important;
  letter-spacing: 0;
}

.sidebar .user-panel {
  align-items: center;
  margin-left: .45rem;
  margin-right: .45rem;
  padding: .8rem !important;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
}

.sidebar .user-panel .image img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 8px;
}

.sidebar .user-panel .info a {
  color: rgba(255, 255, 255, .88);
  font-size: .86rem;
  font-weight: 600;
  white-space: normal;
}

.nav-sidebar > .nav-item {
  margin-bottom: .2rem;
}

.nav-sidebar .nav-link {
  margin: 0 .55rem;
  color: rgba(255, 255, 255, .76) !important;
  border-radius: 8px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.nav-sidebar .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .09);
  transform: translateX(2px);
}

.nav-sidebar .nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ui-primary), #0891b2) !important;
  box-shadow: 0 10px 24px rgba(8, 145, 178, .23);
}

.nav-sidebar .nav-treeview .nav-link {
  margin-left: 1.1rem;
  font-size: .92rem;
  background: transparent;
}

.content-header {
  padding: 24px 1rem 10px;
}

.content-header .container-fluid {
  padding-left: 20px;
  padding-right: 20px;
}

.page-heading-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 18px 20px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(219, 228, 239, .85);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

body.dark-mode-ui .page-heading-shell,
body.dark-mode-ui .card,
body.dark-mode-ui .info-box,
body.dark-mode-ui .card-body {
  background: var(--ui-panel);
}

.page-heading-shell h1 {
  margin: 0;
  color: var(--ui-text);
  font-size: 1.65rem;
  font-weight: 800;
}

.page-heading-kicker {
  display: block;
  margin-bottom: .18rem;
  color: var(--ui-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.breadcrumb {
  margin-bottom: 0;
  padding: .45rem .7rem;
  background: #f8fafc;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
}

body.dark-mode-ui .breadcrumb,
body.dark-mode-ui .card-footer,
body.dark-mode-ui .table-striped tbody tr:nth-of-type(odd),
body.dark-mode-ui .renewal-stat-grid div,
body.dark-mode-ui .summary-box {
  background: #17293b;
}

body.dark-mode-ui .breadcrumb,
body.dark-mode-ui .card,
body.dark-mode-ui .info-box,
body.dark-mode-ui .card-header,
body.dark-mode-ui .card-footer,
body.dark-mode-ui .form-control,
body.dark-mode-ui .custom-select,
body.dark-mode-ui .input-group-text,
body.dark-mode-ui .table-bordered,
body.dark-mode-ui .table-bordered td,
body.dark-mode-ui .table-bordered th {
  border-color: var(--ui-border);
}

.content .container-fluid {
  padding-left: 20px;
  padding-right: 20px;
}

.card,
.info-box {
  border: 1px solid rgba(219, 228, 239, .88);
  border-radius: 8px;
  box-shadow: var(--ui-shadow);
}

.card {
  overflow: hidden;
}

.card-header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ui-border);
  background: #fff;
}

body.dark-mode-ui .card-header {
  background: #132232;
}

.card-primary:not(.card-outline) > .card-header {
  background: linear-gradient(135deg, var(--ui-primary), #0891b2);
}

.card-title {
  color: var(--ui-text);
  font-weight: 800;
}

.card-primary:not(.card-outline) > .card-header .card-title {
  color: #fff;
}

.card-body {
  background: var(--ui-panel);
}

.card-footer {
  background: #f8fafc;
  border-top: 1px solid var(--ui-border);
}

.info-box {
  min-height: 96px;
  align-items: center;
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}

.info-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(15, 23, 42, .12);
}

.info-box .info-box-icon {
  width: 58px;
  min-width: 58px;
  height: 58px;
  margin-left: 14px;
  border-radius: 8px;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  line-height: 1;
}

.info-box .info-box-icon > i {
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  line-height: 1;
}

.info-box .info-box-content {
  padding-left: 16px;
  min-width: 0;
}

.info-box .info-box-text {
  color: var(--ui-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: normal;
}

.info-box .info-box-number {
  max-width: 100%;
  margin-top: .15rem;
  color: var(--ui-text);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-revenue-card .info-box-number {
  font-size: .92rem;
  line-height: 1.15;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.info-box .bg-primary,
.info-box-icon.bg-primary {
  background: linear-gradient(135deg, var(--ui-secondary), #14b8a6) !important;
}

.info-box .bg-danger,
.info-box-icon.bg-danger {
  background: linear-gradient(135deg, #e11d48, #fb7185) !important;
}

.info-box .bg-warning,
.info-box-icon.bg-warning {
  background: linear-gradient(135deg, var(--ui-gold), #fb923c) !important;
}

.info-box .bg-success,
.info-box-icon.bg-success {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
}

.info-box .bg-info,
.info-box-icon.bg-info {
  background: linear-gradient(135deg, #0891b2, #22d3ee) !important;
}

.info-box .bg-maroon,
.info-box-icon.bg-maroon,
.info-box .bg-pink,
.info-box-icon.bg-pink {
  background: linear-gradient(135deg, var(--ui-pink), #f97316) !important;
}

.btn {
  border-radius: 8px;
  font-weight: 700;
  box-shadow: none !important;
}

.btn-primary,
.btn-success,
.btn-info {
  border-color: transparent;
  background: var(--ui-primary);
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover {
  border-color: transparent;
  background: var(--ui-primary-dark);
}

.btn-danger {
  border-color: transparent;
  background: var(--ui-danger);
}

.btn-theme-toggle {
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--ui-primary);
  background: #eef6f5;
  border: 1px solid rgba(15, 143, 138, .18);
  border-radius: 999px;
}

.btn-theme-toggle:hover {
  color: #fff;
  background: var(--ui-primary);
}

.btn-tool {
  color: var(--ui-muted);
  border-radius: 8px;
}

.btn-tool.active {
  color: #fff;
  background: var(--ui-primary);
}

.form-control,
.custom-select,
.input-group-text,
.form-control-file {
  border-color: var(--ui-border);
  border-radius: 8px;
}

.password-toggle {
  min-width: 44px;
  justify-content: center;
  color: var(--ui-muted);
  background: #fff;
  cursor: pointer;
}

.password-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(15, 143, 138, .12);
}

body.dark-mode-ui .form-control,
body.dark-mode-ui .custom-select,
body.dark-mode-ui .input-group-text,
body.dark-mode-ui .dataTables_wrapper .dataTables_filter input,
body.dark-mode-ui .dataTables_wrapper .dataTables_length select {
  color: var(--ui-text);
  background: #0f1e2a;
  border-color: var(--ui-border);
}

body.dark-mode-ui .form-control::placeholder {
  color: #8fa0b3;
}

.form-control:focus,
.custom-select:focus {
  border-color: rgba(15, 118, 110, .56);
  box-shadow: 0 0 0 .2rem rgba(15, 118, 110, .12);
}

label {
  color: #334155;
  font-size: .9rem;
  font-weight: 700;
}

.table {
  color: var(--ui-text);
}

.table thead th {
  border-bottom: 0;
  color: #475569;
  background: #f1f5f9;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.dark-mode-ui .table,
body.dark-mode-ui .card-title,
body.dark-mode-ui .page-heading-shell h1,
body.dark-mode-ui label,
body.dark-mode-ui .main-header .nav-link,
body.dark-mode-ui .navbar-user-pill,
body.dark-mode-ui .renewal-summary-card h4,
body.dark-mode-ui .empty-state h4,
body.dark-mode-ui .birthday-person-info h4 {
  color: var(--ui-text);
}

body.dark-mode-ui .table thead th {
  color: #cbd5e1;
  background: #1f3448;
}

body.dark-mode-ui .table-striped tbody tr:nth-of-type(even) {
  background: #132232;
}

body.dark-mode-ui .modal-content {
  color: var(--ui-text);
  background: var(--ui-panel);
}

body.dark-mode-ui .close {
  color: #fff;
  text-shadow: none;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
  border-color: var(--ui-border);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f8fafc;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
}

.badge {
  padding: .42em .62em;
  border-radius: 999px;
  font-weight: 800;
}

.products-list .item {
  padding: 14px 10px;
  border-bottom: 1px solid var(--ui-border);
}

.product-img img,
.img-size-50 {
  border-radius: 8px;
  object-fit: cover;
}

img[src*="uploads/member_photos"],
img[alt*="Member Photo"],
.member-photo-hover {
  cursor: zoom-in;
}

.member-photo-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 220px;
  max-width: calc(100vw - 24px);
  padding: 8px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 0, 0) scale(.96);
  transform-origin: top left;
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, .45);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .30);
}

.member-photo-preview.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
}

.member-photo-preview img {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: 6px;
  background: #f8fafc;
}

body.dark-mode-ui .member-photo-preview,
html.dark-mode-ui .member-photo-preview {
  background: #132232;
  border-color: var(--ui-border);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

body.dark-mode-ui .member-photo-preview img,
html.dark-mode-ui .member-photo-preview img {
  background: #0f1e2a;
}

.main-footer {
  color: var(--ui-muted);
  border-top: 1px solid var(--ui-border);
  background: rgba(255, 255, 255, .88);
}

body.dark-mode-ui .main-footer {
  background: rgba(19, 34, 50, .92);
}

.dashboard-link-card {
  display: block;
  color: inherit;
}

.dashboard-stats-row .dashboard-link-card {
  display: flex;
  width: 100%;
}

.dashboard-link-card:hover {
  color: inherit;
  text-decoration: none;
}

.dashboard-link-card .dashboard-stat-card {
  cursor: pointer;
}

.dashboard-link-card:hover .dashboard-stat-card {
  transform: translateY(-3px);
  border-color: rgba(15, 143, 138, .38);
  box-shadow: 0 22px 44px rgba(15, 23, 42, .13);
}

.birthday-card .card-header,
.birthday-modal .modal-header {
  background: linear-gradient(135deg, #be185d, var(--ui-accent));
  color: #fff;
}

.birthday-card .card-title,
.birthday-modal .modal-title,
.birthday-modal .page-heading-kicker {
  color: #fff;
}

.birthday-list {
  display: grid;
  gap: .85rem;
  padding: 1rem;
}

.birthday-person {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
}

body.dark-mode-ui .birthday-person {
  background: #261c19;
  border-color: #7c2d12;
}

html.dark-mode-ui body,
body.dark-mode-ui {
  background: var(--ui-bg);
  color: var(--ui-text);
}

html.dark-mode-ui .content-wrapper,
body.dark-mode-ui .content-wrapper {
  background:
    radial-gradient(circle at top left, rgba(34, 199, 184, .20), transparent 30rem),
    radial-gradient(circle at top right, rgba(129, 140, 248, .18), transparent 28rem),
    linear-gradient(180deg, #0c1722 0%, var(--ui-bg) 30rem);
}

html.dark-mode-ui .main-header.navbar,
body.dark-mode-ui .main-header.navbar,
html.dark-mode-ui .page-heading-shell,
body.dark-mode-ui .page-heading-shell,
html.dark-mode-ui .card,
body.dark-mode-ui .card,
html.dark-mode-ui .info-box,
body.dark-mode-ui .info-box,
html.dark-mode-ui .card-body {
  color: var(--ui-text);
  background: var(--ui-panel);
  border-color: var(--ui-border);
}

html.dark-mode-ui .main-footer,
body.dark-mode-ui .main-footer {
  color: var(--ui-muted);
  background: rgba(19, 34, 50, .96);
}

.main-sidebar {
  background: linear-gradient(180deg, #111827 0%, #123047 48%, #063b46 100%) !important;
}

.nav-sidebar .nav-link.active {
  background: linear-gradient(135deg, #0f8f8a, #2563eb) !important;
}

.dashboard-stats-row {
  align-items: stretch;
}

.dashboard-stats-row > [class*="col-"] {
  display: flex;
}

.dashboard-stat-card.info-box {
  width: 100%;
  min-height: 92px;
  max-height: 92px;
  margin-bottom: 16px !important;
  padding: 14px 16px;
  overflow: hidden;
  gap: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .92));
  border: 1px solid rgba(203, 213, 225, .86);
  box-shadow: 0 18px 34px rgba(15, 23, 42, .08);
}

html.dark-mode-ui .dashboard-stat-card.info-box,
body.dark-mode-ui .dashboard-stat-card.info-box {
  background: linear-gradient(135deg, rgba(19, 34, 50, .98), rgba(15, 30, 42, .94));
  border-color: var(--ui-border);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .30);
}

.dashboard-stat-card.info-box .info-box-icon {
  width: 56px !important;
  min-width: 56px !important;
  height: 56px !important;
  margin-left: 0 !important;
  border-radius: 8px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem !important;
}

.dashboard-stat-card.info-box .info-box-icon i {
  width: 1.45rem !important;
  height: 1.45rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem !important;
  line-height: 1 !important;
}

.dashboard-stat-card.info-box .info-box-content {
  min-width: 0;
  padding: 0 !important;
  flex: 1;
}

.dashboard-stat-card.info-box .info-box-text {
  margin-bottom: 4px;
  color: var(--ui-muted);
  font-size: 11px !important;
  line-height: 1.15;
  letter-spacing: .08em;
  white-space: normal;
}

.dashboard-stat-card.info-box .info-box-number,
.dashboard-stat-card.info-box .info-box-number span {
  display: block;
  max-width: 100%;
  color: var(--ui-text);
  font-size: 22px !important;
  line-height: 1.08 !important;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-stat-card.info-box .info-box-text + .info-box-number {
  margin-top: 0;
}

.dashboard-stat-card.info-box .bg-primary,
.dashboard-stat-card.info-box .info-box-icon.bg-primary {
  background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
}

.dashboard-stat-card.info-box .bg-danger,
.dashboard-stat-card.info-box .info-box-icon.bg-danger {
  background: linear-gradient(135deg, #e11d48, #f97316) !important;
}

.dashboard-stat-card.info-box .bg-warning,
.dashboard-stat-card.info-box .info-box-icon.bg-warning {
  background: linear-gradient(135deg, #f59e0b, #facc15) !important;
}

.dashboard-stat-card.info-box .bg-success,
.dashboard-stat-card.info-box .info-box-icon.bg-success {
  background: linear-gradient(135deg, #059669, #22c55e) !important;
}

.dashboard-stat-card.info-box .bg-info,
.dashboard-stat-card.info-box .info-box-icon.bg-info {
  background: linear-gradient(135deg, #0891b2, #14b8a6) !important;
}

.dashboard-stat-card.info-box .bg-maroon,
.dashboard-stat-card.info-box .info-box-icon.bg-maroon,
.dashboard-stat-card.info-box .bg-pink,
.dashboard-stat-card.info-box .info-box-icon.bg-pink {
  background: linear-gradient(135deg, #db2777, #8b5cf6) !important;
}

.dashboard-revenue-card.info-box {
  position: relative;
  background:
    radial-gradient(circle at 82% 18%, rgba(34, 197, 94, .14), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(236, 253, 245, .92));
}

html.dark-mode-ui .dashboard-revenue-card.info-box,
body.dark-mode-ui .dashboard-revenue-card.info-box {
  background:
    radial-gradient(circle at 82% 18%, rgba(34, 197, 94, .18), transparent 40%),
    linear-gradient(135deg, rgba(19, 34, 50, .98), rgba(8, 47, 73, .94));
}

.dashboard-revenue-card.info-box::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: conic-gradient(#22c55e 0 62%, #f59e0b 62% 82%, #2563eb 82% 100%);
  opacity: .16;
}

.revenue-chart-icon {
  background: transparent !important;
}

.revenue-pie-ring {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  border-radius: 50%;
  background: conic-gradient(#22c55e 0 58%, #f59e0b 58% 76%, #2563eb 76% 100%);
  animation: revenuePieSpin 4s linear infinite;
}

.revenue-pie-ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  background: #16a34a;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28);
}

.revenue-pie-ring i {
  position: relative;
  z-index: 1;
  font-size: 1.35rem !important;
  animation: revenueIconStill 4s linear infinite;
}

@keyframes revenuePieSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes revenueIconStill {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.layout-footer-fixed .wrapper .content-wrapper {
  padding-bottom: 90px;
}

.main-footer {
  min-height: 58px;
}

@media (max-width: 1199.98px) {
  .dashboard-stat-card.info-box .info-box-number,
  .dashboard-stat-card.info-box .info-box-number span {
    font-size: 19px !important;
  }
}

.birthday-person img,
.table-member img {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: cover;
  border-radius: 8px;
}

.birthday-person-info {
  min-width: 0;
  flex: 1;
}

.birthday-person-info h4 {
  margin: 0;
  color: var(--ui-text);
  font-size: 1rem;
  font-weight: 800;
}

.birthday-person-info p {
  margin: .2rem 0;
  color: var(--ui-muted);
  font-size: .9rem;
}

.birthday-chip {
  padding: .35rem .55rem;
  color: #9a3412;
  background: #ffedd5;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
}

.birthday-modal .modal-content {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .22);
}

.birthday-modal-list {
  padding: 0;
}

.table-member {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.empty-state {
  padding: 2.4rem 1rem;
  color: var(--ui-muted);
  text-align: center;
}

.empty-state i {
  margin-bottom: .75rem;
  color: var(--ui-accent);
  font-size: 2.2rem;
}

.empty-state h4 {
  color: var(--ui-text);
  font-weight: 800;
}

.renewal-summary-card h4 {
  margin-bottom: 1rem;
  color: var(--ui-text);
  font-weight: 800;
}

.renewal-summary-card p {
  margin-bottom: .55rem;
  color: var(--ui-muted);
}

.renewal-summary-card p strong {
  color: var(--ui-text);
}

.renewal-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.renewal-stat-grid div {
  padding: .85rem;
  background: #f8fafc;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
}

.renewal-stat-grid span {
  display: block;
  color: var(--ui-muted);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.renewal-stat-grid strong {
  display: block;
  margin-top: .35rem;
  color: var(--ui-text);
  font-size: 1.15rem;
  font-weight: 800;
}

.alert {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.login-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(15, 143, 138, .94), rgba(15, 23, 42, .94)),
    url("../img/boxed-bg.png");
  background-size: cover;
}

.login-brand-mark {
  width: 118px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 1rem;
  padding: .45rem;
  background: rgba(255, 255, 255, .92);
  border-radius: 8px;
}

.login-box {
  width: min(430px, calc(100vw - 30px));
}

.login-logo a {
  color: #fff;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.2;
}

.login-logo small {
  display: block;
  margin-top: .35rem;
  color: rgba(255, 255, 255, .72);
  font-size: .95rem;
  font-weight: 600;
}

.login-card-body {
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .24);
}

.login-box-msg {
  color: var(--ui-muted);
  font-weight: 700;
}

.login-footer {
  width: min(820px, calc(100vw - 30px));
  margin: 1.2rem auto 0;
  color: rgba(255, 255, 255, .72);
  text-align: center;
}

.login-footer a {
  color: #fff;
  font-weight: 800;
}

@media (max-width: 767.98px) {
  .content-header,
  .content .container-fluid,
  .content-header .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  .page-heading-shell {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }

  .page-heading-shell h1 {
    font-size: 1.35rem;
  }

  .breadcrumb {
    width: 100%;
    border-radius: 8px;
  }

  .main-footer .float-right {
    float: none !important;
    display: block !important;
    margin-top: .35rem;
  }

  .card-header {
    align-items: flex-start;
    flex-direction: column;
    gap: .55rem;
  }
}