:root {
  --cms-bg: #f4f7fb;
  --cms-surface: #ffffff;
  --cms-text: #0f172a;
  --cms-muted: #64748b;
  --cms-border: #dce4ed;
  --cms-brand: #0b1f3f;
  --cms-accent: #1f6feb;
  --cms-success: #159957;
  --cms-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

body {
  background: radial-gradient(circle at 10% 0%, #dcefff 0%, transparent 28%),
    radial-gradient(circle at 85% 0%, #def8f3 0%, transparent 35%), var(--cms-bg);
  color: var(--cms-text);
}

.page-wrapper {
  background: transparent;
}

.left-sidebar {
  background: var(--cms-brand) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 8px 0 24px rgba(2, 6, 23, 0.2);
}

.brand-logo {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-nav #sidebarnav .nav-small-cap .hide-menu {
  color: rgba(226, 232, 240, 0.75);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}

.sidebar-nav #sidebarnav .sidebar-item .sidebar-link {
  color: rgba(226, 232, 240, 0.9);
  border-radius: 12px;
  margin: 4px 12px;
  transition: all 0.2s ease;
}

.sidebar-nav #sidebarnav .sidebar-item .sidebar-link:hover,
.sidebar-nav #sidebarnav .sidebar-item .sidebar-link.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.body-wrapper {
  background: transparent;
}

.app-header {
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid #e2e8f0;
}

.app-header .navbar {
  min-height: 70px;
}

.container-fluid {
  padding: 28px;
}

.card,
.modal-content,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
  border: 1px solid var(--cms-border);
  border-radius: 18px;
  box-shadow: var(--cms-shadow);
  background: var(--cms-surface);
}

.card .card-body {
  padding: 1.2rem 1.25rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--cms-text);
  letter-spacing: -0.01em;
}

h2 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.table {
  border: 1px solid var(--cms-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.table thead th {
  border-bottom: 1px solid var(--cms-border);
  background: #f8fafc;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cms-muted);
}

.table td,
.table th {
  vertical-align: middle;
  border-color: #ecf1f6;
}

.form-control,
.form-select,
textarea {
  border: 1px solid var(--cms-border);
  border-radius: 12px;
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  color: var(--cms-text);
  background: #fbfdff;
}

.form-control:focus,
.form-select:focus,
textarea:focus {
  border-color: var(--cms-accent);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.18);
}

.form-label,
label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--cms-muted);
  margin-bottom: 0.45rem;
}

.btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.btn-primary {
  background: linear-gradient(135deg, #1f6feb 0%, #1f58d6 100%);
  border-color: #1f6feb;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #1b63d6 0%, #1c52c5 100%);
  border-color: #1b63d6;
}

.btn-success {
  background: linear-gradient(135deg, #1aaa6e 0%, #148a59 100%);
  border-color: #1aaa6e;
}

.btn-warning,
.btn-danger,
.btn-outline-primary,
.btn-outline-secondary {
  border-radius: 10px;
}

.dropdown-menu {
  border-radius: 14px;
  border: 1px solid var(--cms-border);
  box-shadow: var(--cms-shadow);
}

.img-thumbnail {
  border-radius: 10px;
  border-color: var(--cms-border);
}

#blog_table_wrapper,
#userTable_wrapper,
#event_table_wrapper,
.dataTables_wrapper {
  background: #fff;
  border: 1px solid var(--cms-border);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: var(--cms-shadow);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--cms-border);
  border-radius: 10px;
  padding: 0.35rem 0.6rem;
  background: #fbfdff;
}

.modal-header,
.modal-footer {
  border-color: #ecf1f6;
}

@media (max-width: 991px) {
  .container-fluid {
    padding: 18px;
  }
}

.radial-gradient {
  background: radial-gradient(circle at 10% 10%, #dfefff 0%, #f4f7fb 45%, #eef4fb 100%) !important;
}

.page-wrapper .card.mb-0 {
  border-radius: 20px;
  border: 1px solid var(--cms-border);
  box-shadow: var(--cms-shadow);
}