:root{
  --navy:#0d1330;
  --navy-2:#233d80;
  --orange:#e87b29;
  --grey-bg:#f4f5f9;
  --border:#e7e8ef;
}
body{ background:var(--grey-bg); font-family:"Inter","Segoe UI",Arial,sans-serif; font-size:14.5px; color:#2c2e3a; }
a{ color:var(--orange); text-decoration:none; }
a:hover{ color:var(--navy-2); }

/* ---------------- login / auth screens ---------------- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); padding:20px; }
.auth-card{ background:#fff; border-radius:16px; padding:44px 40px; width:100%; max-width:420px; box-shadow:0 30px 60px rgba(0,0,0,0.25); }
.auth-card h1{ text-align:center; font-size:23px; font-weight:800; margin-bottom:4px; }
.auth-card .subtitle{ text-align:center; color:#888; margin-bottom:26px; font-size:14px; }
.auth-card .app-icon{ width:56px; height:56px; border-radius:14px; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 18px; }

/* ---------------- app shell ---------------- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{ width:250px; flex-shrink:0; background:var(--navy); color:#fff; display:flex; flex-direction:column; }
.sidebar .brand{ padding:22px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.08); font-weight:800; font-size:16px; }
.sidebar .brand .app-icon{ width:34px; height:34px; border-radius:8px; background:var(--orange); display:flex; align-items:center; justify-content:center; font-size:16px; }
.sidebar nav{ padding:16px 10px; flex:1; overflow-y:auto; }
.sidebar .nav-section{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#8890b5; padding:14px 14px 6px; }
.sidebar nav a{ display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:8px; color:#c9cce0; font-weight:600; font-size:14px; margin-bottom:2px; }
.sidebar nav a i{ width:18px; text-align:center; }
.sidebar nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar nav a.active{ background:var(--orange); color:#fff; }
.sidebar .sidebar-footer{ padding:14px; border-top:1px solid rgba(255,255,255,.08); font-size:12.5px; color:#c9cce0; }
.sidebar .sidebar-footer strong{ color:#fff; display:block; }

.main{ flex:1; min-width:0; }
.topbar{ background:#fff; padding:16px 28px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; }
.topbar h1{ font-size:19px; font-weight:800; margin:0; }
.page{ padding:28px; }

/* ---------------- cards / stats ---------------- */
.card{ border:1px solid var(--border); border-radius:12px; }
.stat-card{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:20px 22px; }
.stat-card .num{ font-size:28px; font-weight:800; }
.stat-card .label{ color:#888; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }
.stat-card.accent .num{ color:var(--orange); }

.badge-active, .badge-published, .badge-sent, .badge-completed{ background:#e6f6ec; color:#1c8a4b; }
.badge-inactive, .badge-failed{ background:#fdeceb; color:#c0392b; }
.badge-draft, .badge-pending{ background:#fdf3e0; color:#b8791a; }
.badge-sending, .badge-processing{ background:#e8f0fe; color:#1a56b8; }
.badge-admin{ background:#eee5fb; color:#6a3fc7; }
.badge-user{ background:#eef1f8; color:#495273; }

table thead th{ font-size:12px; text-transform:uppercase; letter-spacing:.3px; color:#888; border-bottom:1px solid var(--border) !important; }
table td{ vertical-align:middle; font-size:14px; }

.btn-brand{ background:var(--orange); border-color:var(--orange); color:#fff; }
.btn-brand:hover{ background:var(--navy-2); border-color:var(--navy-2); color:#fff; }
.btn-navy{ background:var(--navy); border-color:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-2); border-color:var(--navy-2); color:#fff; }

.flash-msg{ padding:13px 18px; border-radius:8px; font-weight:600; margin-bottom:20px; }
.flash-success{ background:#e6f6ec; color:#1c8a4b; }
.flash-error{ background:#fdeceb; color:#c0392b; }
.flash-info{ background:#e8f0fe; color:#1a56b8; }

.empty-state{ text-align:center; padding:60px 20px; color:#999; }
.empty-state i{ font-size:36px; color:#ddd; display:block; margin-bottom:12px; }

.form-label{ font-weight:600; font-size:13.5px; }
.required-star{ color:#c0392b; }

@media (max-width: 991px){
  .app-shell{ flex-direction:column; }
  .sidebar{ width:100%; }
  .sidebar nav{ display:flex; flex-wrap:nowrap; overflow-x:auto; padding:10px; }
  .sidebar nav a{ white-space:nowrap; }
  .sidebar .nav-section{ display:none; }
}