/* =====================
   TOKENS
===================== */
   :root {
       --bg: #f6f7fb;
       --surface: #ffffff;

       --topbar-bg: #ffffff;
       --sidebar-bg: #f3f4f6;
       --dropdown-bg: #ffffff;

       --primary: #4f46e5;
       --secondary: #353535;
       --text: #1f2937;
       --muted: #6b7280;
       --border: #e5e7eb;
       --card-gap: 24px;
       --radius: 14px;
       --shadow: 0 10px 30px rgba(0, 0, 0, .06);
   }

   * {
       box-sizing: border-box
   }

   body {
       margin: 0;
       font-family: 'Inter', system-ui, sans-serif;
       background: var(--bg);
       color: var(--text);
   }

   a {
       text-decoration: none;
   }

   /* =====================
   TOP BAR
===================== */
   .topbar {
       height: 64px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0 24px;
       background: var(--topbar-bg);
       border-bottom: 1px solid var(--border);
   }

   .brand {
       display: flex;
       align-items: center;
       gap: 12px;
       font-weight: 600;
       letter-spacing: -0.02em;
   }

   .menu-btn {
       display: none;
       cursor: pointer;
       font-size: 22px;
       color: var(--muted);
   }

   /* USER MENU */
   .user-menu {
       position: relative;
   }

   .avatar-btn {
       display: flex;
       align-items: center;
       gap: 10px;
       cursor: pointer;
   }

   .avatar-btn img {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       object-fit: cover;
       border: 1px solid var(--border);
   }

   .avatar-btn .material-icons-sharp {
       font-size: 18px;
       color: var(--muted);
   }

   /* DROPDOWN */
   .dropdown {
       position: absolute;
       right: 0;
       top: 52px;
       width: 220px;
       background: var(--dropdown-bg);
       border-radius: 12px;
       box-shadow: var(--shadow);
       border: 1px solid var(--border);
       padding: 8px;
       display: none;
       z-index: 20;
   }

   .dropdown.open {
       display: block
   }

   .dropdown-header {
       padding: 12px;
       border-bottom: 1px solid var(--border);
   }

   .dropdown-header strong {
       display: block;
       font-size: 14px;
   }

   .dropdown-header small {
       font-size: 12px;
       color: var(--muted);
   }

   .dropdown-item {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 12px;
       font-size: 14px;
       border-radius: 8px;
       cursor: pointer;
   }

   .dropdown-item:hover {
       background: #eef2ff;
       color: var(--primary);
   }

   .dropdown-item.logout {
       color: #dc2626;
   }

   /* =====================
   LAYOUT
===================== */
   .layout {
       display: flex;
       min-height: calc(100vh - 64px);
   }

   /* =====================
   SIDEBAR
===================== */
   .sidebar {
       width: 240px;
       background: var(--sidebar-bg);
       border-right: 1px solid var(--border);
       padding: 20px 12px;
   }

   .nav-item {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 12px 16px;
       border-radius: 10px;
       font-size: 14px;
       cursor: pointer;
       color: var(--muted);
   }

   .nav-item .material-icons-sharp {
       font-size: 20px;
   }

   .nav-item.active,
   .nav-item:hover {
       background: #e0e7ff;
       color: var(--primary);
   }

   .sidebar-divider {
       height: 1px;
       background: var(--border);
       margin: 16px 12px;
   }

   .primary-btn {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 12px 22px;
       margin-top: 10px;
       border-radius: 999px;
       border: none;
       background: var(--primary);
       color: #fff;
       font-size: 14px;
       font-weight: 500;
       cursor: pointer;
   }

   .primary-btn .material-icons-sharp {
       font-size: 18px;
   }

   .secondary-btn {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 12px 22px;
       margin-top: 10px;
       border-radius: 999px;
       border: none;
       background: var(--secondary);
       color: #fff;
       font-size: 14px;
       font-weight: 500;
       cursor: pointer;
   }

   .secondary-btn .material-icons-sharp {
       font-size: 18px;
   }

   /* =====================
   MAIN
===================== */
   .main {
       flex: 1;
       padding: 32px;
   }

   /* HEADER */
   .page-header {
       margin-bottom: 32px;
   }

   .page-header h1 {
       margin: 0;
       font-size: 26px;
       font-weight: 600;
       letter-spacing: -0.02em;
   }

   .page-header p {
       margin-top: 6px;
       font-size: 14px;
       color: var(--muted);
   }

   /* STATS */
   .stats {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       gap: 20px;
   }

   .card {
       background: var(--surface);
       padding: 24px;
       border-radius: var(--radius);
       box-shadow: var(--shadow);
   }

   .card-header {
       display: flex;
       align-items: center;
       gap: 10px;
       font-size: 13px;
       color: var(--muted);
   }

   .card-header .material-icons-sharp {
       font-size: 20px;
   }

   .card .value {
       margin-top: 10px;
       font-size: 34px;
       font-weight: 600;
   }

   /* =====================
   MOBILE
===================== */
   @media(max-width:900px) {
       .menu-btn {
           display: block
       }

       .sidebar {
           position: fixed;
           left: -240px;
           top: 64px;
           height: calc(100vh - 64px);
           transition: left .25s ease;
           z-index: 10;
       }

       .sidebar.open {
           left: 0
       }

       .main {
           padding: 24px
       }
   }

   /* =====================
   FOOTER
===================== */
   .footer {
       margin-top: 40px;
       padding: 20px 16px;
       background: #f1f2f7;
       border-top: 1px solid var(--border);
       text-align: center;
       font-size: 13px;
       color: var(--muted);
   }

   .footer strong {
       color: var(--text);
       font-weight: 500;
   }


   /* =====================
   MODAL
===================== */

   .modal-backdrop {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, .4);
       display: none;
       align-items: center;
       justify-content: center;
       z-index: 50;
   }

   .modal-backdrop.show {
       display: flex
   }

   .modal {
       background: #fff;
       width: 100%;
       max-width: 480px;
       border-radius: 16px;
       box-shadow: var(--shadow);
   }

   .modal-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 16px 20px;
       border-bottom: 1px solid var(--border);
   }

   .modal-header .close {
       cursor: pointer;
       color: var(--muted);
   }

   .modal-body {
       padding: 20px;
   }

   .modal-footer {
       padding: 16px 20px;
       border-top: 1px solid var(--border);
       display: flex;
       justify-content: flex-end;
       gap: 10px;
   }


   /* Space between cards inside main content */
   .main .card {
       margin-bottom: var(--card-gap);
   }

   /* Remove extra space before footer */
   .main .card:last-of-type {
       margin-bottom: 0;
   }

   /* =====================
   STATUS BADGES
===================== */

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.badge.pending {
  background: #fef3c7;
  color: #92400e;
}

.badge.sent {
  background: #d1fae5;
  color: #065f46;
}

.badge.failed {
  background: #fee2e2;
  color: #991b1b;
}

/* Toast */

.toast {
  padding:14px 18px;
  border-radius:10px;
  margin-bottom:20px;
  font-size:14px;
  animation:fadeIn .3s ease;
}

.toast.success {
  background:#d1fae5;
  color:#065f46;
  border:1px solid #a7f3d0;
}

.toast.error {
  background:#fee2e2;
  color:#991b1b;
  border:1px solid #fecaca;
}

@keyframes fadeIn {
  from { opacity:0; transform:translateY(-5px); }
  to { opacity:1; transform:translateY(0); }
}

/* =====================
   TOAST SYSTEM
===================== */

#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}

.toast {
  min-width: 280px;
  max-width: 380px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);

  transform: translateX(120%);
  opacity: 0;
  animation: slideIn .35s ease forwards;

  transition: opacity .3s ease, transform .3s ease;
}

.toast.success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.toast.error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.toast-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
}

.toast-close:hover {
  opacity: 1;
}

.toast.hide {
  opacity: 0;
  transform: translateX(120%);
}

@keyframes slideIn {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}