/* ==========================================================================
   ClickEarn — Base Styles
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--color-bg);
  color:var(--color-text);
  font-size:14.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:800; margin:0; color:var(--color-text); }
a{ color:var(--color-primary); text-decoration:none; }
a:hover{ color:var(--color-primary-dark); }
img{ max-width:100%; display:block; }
button{ font-family:var(--font-body); }
:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; border-radius:4px; }

.text-muted{ color:var(--color-text-muted) !important; }
.text-soft{ color:var(--color-text-soft) !important; }
.mono{ font-family:var(--font-mono); }
.fw-800{ font-weight:800; }

/* ---- Scrollbars ---- */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#D8D5E8; border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:var(--color-primary-light); }

/* ---- App shell ---- */
.app-shell{ display:flex; min-height:100vh; }
.app-main{
  flex:1;
  margin-left:var(--sidebar-width);
  display:flex;
  flex-direction:column;
  min-width:0;
  transition:var(--transition-slow);
}
.app-content{
  flex:1;
  padding:28px 32px 8px;
  max-width:1600px;
  width:100%;
  margin:0 auto;
}
body.sidebar-collapsed .app-main{ margin-left:var(--sidebar-width-collapsed); }

@media (max-width: 1199.98px){
  .app-main{ margin-left:0; }
  body.sidebar-collapsed .app-main{ margin-left:0; }
}
@media (max-width: 767.98px){
  .app-content{ padding:18px 16px 8px; }
}

/* ---- Buttons ---- */
.btn{
  border-radius:12px;
  font-weight:700;
  font-size:13.5px;
  padding:10px 18px;
  border:1px solid transparent;
  transition:var(--transition);
}
.btn-primary{
  background:var(--gradient-primary);
  border:none;
  box-shadow:0 6px 16px rgba(124,58,237,0.28);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(124,58,237,0.35); background:var(--gradient-primary); }
.btn-light-purple{ background:var(--color-primary-50); color:var(--color-primary-dark); border:1px solid var(--color-primary-100); }
.btn-light-purple:hover{ background:var(--color-primary-100); color:var(--color-primary-dark); }
.btn-success{ background:var(--color-success); border:none; }
.btn-outline-light-custom{ background:#fff; border:1px solid var(--color-border); color:var(--color-text); }
.btn-outline-light-custom:hover{ background:#faf9ff; border-color:var(--color-primary-light); }
.btn-sm-pill{ border-radius:99px; padding:6px 16px; font-size:12.5px; font-weight:700; }

/* ---- Cards ---- */
.card-panel{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:24px;
}
.card-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.card-panel-header h5{ font-size:16px; font-weight:800; }

/* ---- Badges ---- */
.badge-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 12px;
  border-radius:99px;
  font-size:12px;
  font-weight:700;
}
.badge-success{ background:var(--color-success-bg); color:var(--color-success); }
.badge-warning{ background:var(--color-warning-bg); color:#B45309; }
.badge-danger{ background:var(--color-danger-bg); color:var(--color-danger); }
.badge-info{ background:var(--color-info-bg); color:var(--color-info); }
.badge-status .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ---- Tables ---- */
.table-clean{ width:100%; border-collapse:separate; border-spacing:0; }
.table-clean thead th{
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--color-text-soft);
  font-weight:800;
  border-bottom:1px solid var(--color-border);
  padding:0 14px 12px;
  text-align:left;
  white-space:nowrap;
}
.table-clean tbody td{
  padding:14px;
  border-bottom:1px solid #F1F1F7;
  font-size:13.5px;
  vertical-align:middle;
  white-space:nowrap;
}
.table-clean tbody tr:last-child td{ border-bottom:none; }
.table-clean tbody tr{ transition:var(--transition); }
.table-clean tbody tr:hover{ background:#FBFAFF; }
.table-responsive-clean{ overflow-x:auto; }

.user-cell{ display:flex; align-items:center; gap:10px; }
.avatar-sm{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.avatar-fallback{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--gradient-primary); color:#fff; font-weight:800; font-size:13px;
}

/* ---- Forms ---- */
.form-control-clean, .form-select-clean{
  border:1.5px solid var(--color-border);
  border-radius:12px;
  padding:11px 14px;
  font-size:13.5px;
  background:#fff;
  width:100%;
  transition:var(--transition);
}
.form-control-clean:focus, .form-select-clean:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 4px var(--color-primary-50);
  outline:none;
}
.form-label-clean{ font-size:12.5px; font-weight:700; color:var(--color-text); margin-bottom:6px; display:block; }
.input-icon-group{ position:relative; }
.input-icon-group i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--color-text-soft); }
.input-icon-group .form-control-clean{ padding-left:40px; }
.input-icon-group .toggle-pass{ position:absolute; right:14px; left:auto; cursor:pointer; }

/* ---- Progress ---- */
.progress-clean{ height:8px; border-radius:99px; background:#EEECF9; overflow:hidden; }
.progress-clean .bar{ height:100%; border-radius:99px; background:var(--gradient-primary); transition:width .6s ease; }

/* ---- Empty state ---- */
.empty-state{ text-align:center; padding:60px 20px; color:var(--color-text-muted); }
.empty-state i{ font-size:40px; color:var(--color-primary-light); margin-bottom:14px; }

/* ---- Utility spacing ---- */
.section-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.chip{ padding:4px 12px; border-radius:99px; background:var(--color-primary-50); color:var(--color-primary-dark); font-size:12px; font-weight:700; }

/* ---- Toast / notification dropdown items ---- */
.notif-item{ display:flex; gap:12px; padding:12px; border-radius:12px; transition:var(--transition); overflow:hidden; }
.notif-item:hover{ background:var(--color-primary-50); }
.notif-item > div:last-child{ min-width:0; flex:1; overflow-wrap:break-word; word-break:break-word; }
.notif-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }