/* ============================================================
   SMSify Theme — dashboard-redesign.html design system
   Pure CSS, zero inline styles.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── GLOBAL ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  background: #f0f2f5 !important;
  color: #1a1d23 !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.bg-cyan-700 {
  background: #ffffff !important;
  border-right: 1px solid #e8eaf0 !important;
  box-shadow: none !important;
}

/* Logo area */
.bg-cyan-700 .flex-shrink-0.flex.items-center {
  padding: 22px 24px !important;
  border-bottom: 1px solid #f0f2f5 !important;
  gap: 10px !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
}
.bg-cyan-700 .flex-shrink-0.flex.items-center img { display: none !important; }

/* Gradient "S" icon */
.bg-cyan-700 .flex-shrink-0.flex.items-center::before {
  content: "S";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px; min-width: 34px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 10px;
  color: #fff; font-weight: 800; font-size: 16px;
  font-family: 'Inter', system-ui, sans-serif;
  flex-shrink: 0;
}
/* "SMSify" text */
.bg-cyan-700 .flex-shrink-0.flex.items-center::after {
  content: "SMSify";
  font-size: 17px; font-weight: 700;
  color: #1a1d23; letter-spacing: -0.3px;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Nav */
nav[aria-label="Sidebar"] { padding: 8px 0 !important; margin-top: 0 !important; }
.divide-cyan-800 > * + * { border-color: transparent !important; }

/* MAIN label */
nav[aria-label="Sidebar"] > div.px-2.space-y-1::before {
  content: "MAIN";
  display: block; padding: 10px 12px 4px;
  font-size: 10.5px; font-weight: 600; color: #9ca3af;
  letter-spacing: 0.8px; text-transform: uppercase;
  font-family: 'Inter', system-ui, sans-serif;
}

/* MESSAGING label — before 4th link */
nav[aria-label="Sidebar"] > div.px-2.space-y-1 > a:nth-child(4) {
  position: relative !important; margin-top: 18px !important;
}
nav[aria-label="Sidebar"] > div.px-2.space-y-1 > a:nth-child(4)::before {
  content: "MESSAGING"; position: absolute; top: -16px; left: 0; right: 0;
  font-size: 10.5px; font-weight: 600; color: #9ca3af; letter-spacing: 0.8px;
  text-transform: uppercase; font-family: 'Inter', system-ui, sans-serif;
  padding-left: 12px; pointer-events: none;
}

/* ADVANCED label — before 10th link */
nav[aria-label="Sidebar"] > div.px-2.space-y-1 > a:nth-child(10) {
  position: relative !important; margin-top: 18px !important;
}
nav[aria-label="Sidebar"] > div.px-2.space-y-1 > a:nth-child(10)::before {
  content: "ADVANCED"; position: absolute; top: -16px; left: 0; right: 0;
  font-size: 10.5px; font-weight: 600; color: #9ca3af; letter-spacing: 0.8px;
  text-transform: uppercase; font-family: 'Inter', system-ui, sans-serif;
  padding-left: 12px; pointer-events: none;
}

/* BUSINESS label — before 14th link */
nav[aria-label="Sidebar"] > div.px-2.space-y-1 > a:nth-child(14) {
  position: relative !important; margin-top: 18px !important;
}
nav[aria-label="Sidebar"] > div.px-2.space-y-1 > a:nth-child(14)::before {
  content: "BUSINESS"; position: absolute; top: -16px; left: 0; right: 0;
  font-size: 10.5px; font-weight: 600; color: #9ca3af; letter-spacing: 0.8px;
  text-transform: uppercase; font-family: 'Inter', system-ui, sans-serif;
  padding-left: 12px; pointer-events: none;
}

/* ADMIN section */
nav[aria-label="Sidebar"] > div.mt-6 {
  border-top: 1px solid #f0f2f5 !important;
  padding-top: 4px !important; margin-top: 8px !important;
}
nav[aria-label="Sidebar"] > div.mt-6::before {
  content: "ADMIN"; display: block; padding: 10px 12px 4px;
  font-size: 10.5px; font-weight: 600; color: #9ca3af;
  letter-spacing: 0.8px; text-transform: uppercase;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Nav links — base */
nav[aria-label="Sidebar"] a {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 9px 16px !important; margin: 1px 8px !important;
  border-radius: 8px !important; font-size: 13.5px !important;
  font-weight: 500 !important; color: #6b7280 !important;
  text-decoration: none !important; transition: background 0.15s, color 0.15s !important;
}
nav[aria-label="Sidebar"] a svg {
  color: #9ca3af !important; width: 18px !important; height: 18px !important;
  flex-shrink: 0 !important; margin-right: 0 !important;
}
.text-cyan-100, .text-cyan-200 { color: #9ca3af !important; }

/* Hover */
nav[aria-label="Sidebar"] a:hover { background: #f5f3ff !important; color: #6366f1 !important; }
nav[aria-label="Sidebar"] a:hover svg { color: #6366f1 !important; }
.hover\:bg-cyan-600:hover { background: #f5f3ff !important; }
.hover\:text-white:hover  { color: #6366f1 !important; }

/* Active link */
a.bg-cyan-800 {
  background: #f0f0fe !important; color: #6366f1 !important;
  font-weight: 600 !important; border-radius: 8px !important;
  border: none !important; box-shadow: none !important;
  margin-left: 8px !important; padding-left: 16px !important;
}
a.bg-cyan-800 svg { color: #6366f1 !important; }
a.bg-cyan-800:hover { background: #eef2ff !important; }

/* ============================================================
   TOPBAR + PAGE HEADER — merged into one bar

   Confirmed AppLayout.vue structure:
     div.lg:pl-64.flex.flex-col.flex-1
       div.relative.z-10.flex-shrink-0.flex.h-16.bg-white  ← topbar
       main.flex-1
         div.bg-white.shadow   ← ContentLayout header (page title)
         div.mt-8              ← page content

   The slot renders inside <main>, NOT as a direct sibling of the
   topbar. Fix: collapse topbar to height:0 (overflow:visible) and
   position its inner controls div absolutely at top:0 right:0.
   ContentLayout header (first child of <main>) is naturally at y=0.
   Controls overlay the header's right side — one unified visual bar.
   ============================================================ */

/* 1. Collapse topbar — takes no vertical space */
.relative.z-10.flex-shrink-0.flex.h-16.bg-white {
  height: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 20 !important;
}
.relative.z-10.flex-shrink-0.flex.h-16.bg-white svg { color: #6b7280 !important; }

/* Hide the APK download link — only useful for Android devices, overlaps page action buttons */
.relative.z-10.flex-shrink-0.flex.h-16.bg-white a[download] {
  display: none !important;
}

/* 2. Controls div (language + admin) — fixed at top-right of viewport. */
.relative.z-10.flex-shrink-0.flex.h-16.bg-white .ml-4.flex.items-center {
  position: fixed !important;
  top: 0 !important;
  right: 24px !important;
  height: 64px !important;
  z-index: 200 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  background: transparent !important;
}

/* 4. Profile / Admin button — indigo pill */
.max-w-xs.bg-white.rounded-full {
  background: #f5f3ff !important;
  border: 1px solid #ede9fe !important;
  border-radius: 10px !important;
}
.max-w-xs.bg-white.rounded-full:hover { background: #eef2ff !important; }
.max-w-xs.bg-white.rounded-full .text-gray-700 { color: #6366f1 !important; font-weight: 600 !important; }
.max-w-xs.bg-white.rounded-full svg { color: #6366f1 !important; }

/* 5. ContentLayout header — only .bg-white.shadow that is a direct child of <main> */
main > .bg-white.shadow {
  min-height: 64px !important;
  box-shadow: none !important;
  border-bottom: 1px solid #e8eaf0 !important;
  background: #ffffff !important;
  position: relative !important;
  z-index: 5 !important;
}

/* 6. Inner wrapper — remove auto padding, set 64px height, leave room for controls */
main > .bg-white.shadow > div {
  height: 64px !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 28px !important;
  padding-right: 360px !important;
  display: flex !important;
  align-items: center !important;
}

/* 7. Innermost div — remove py-6 and lg:border-t */
main > .bg-white.shadow > div > div {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: none !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

/* Page title */
h1.text-2xl.font-semibold.text-gray-900 {
  font-size: 19px !important; font-weight: 700 !important;
  color: #1a1d23 !important; letter-spacing: -0.4px !important;
}

/* All other bg-white shadow elements (cards, panels — not the content header) */
.bg-white.shadow {
  box-shadow: none !important;
  background: #ffffff !important;
}

/* ============================================================
   CONTENT AREA
   ============================================================ */
.min-h-full, .bg-gray-100 { background: #f0f2f5 !important; }

/* ============================================================
   CARDS — white, rounded-16, subtle border
   ============================================================ */
.bg-white.rounded-lg,
.bg-white.shadow.rounded-lg,
.bg-white.shadow.sm\:rounded-lg,
.bg-white.sm\:rounded-lg.shadow {
  border-radius: 16px !important;
  box-shadow: none !important;
  border: 1px solid #f0f2f5 !important;
  background: #ffffff !important;
}

/* ============================================================
   STAT CARDS
   ============================================================ */
dl .relative.overflow-hidden.rounded-lg.bg-white.shadow,
dl .relative.overflow-hidden.rounded-lg.bg-white.px-4.pb-12.pt-5.shadow {
  border-radius: 16px !important; box-shadow: none !important;
  border: 1px solid #f0f2f5 !important; background: #ffffff !important;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s !important;
}
dl .relative.overflow-hidden.rounded-lg.bg-white.shadow:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(99,102,241,0.10) !important;
  border-color: #c7d2fe !important;
}
dl .absolute.rounded-md.p-3 { border-radius: 12px !important; }
dl dt p.truncate { font-size: 12.5px !important; font-weight: 500 !important; color: #9ca3af !important; }
dl dd p.text-2xl {
  font-size: 30px !important; font-weight: 800 !important;
  letter-spacing: -1px !important; color: #1a1d23 !important; line-height: 1 !important;
}
.absolute.inset-x-0.bottom-0.bg-gray-50 {
  background: #fafbff !important; border-top: 1px solid #f0f2f5 !important;
}
.absolute.inset-x-0.bottom-0 a { color: #6366f1 !important; font-size: 12.5px !important; font-weight: 600 !important; }
.absolute.inset-x-0.bottom-0 a:hover { color: #4f46e5 !important; }

/* ============================================================
   DASHBOARD SECTION LABELS
   ============================================================ */
h3.text-base.font-semibold.leading-6.text-gray-900 {
  font-size: 10.5px !important; font-weight: 700 !important;
  color: #9ca3af !important; letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  border-left: 3px solid #6366f1 !important; padding-left: 10px !important;
  line-height: 1.4 !important;
}

/* ============================================================
   TABLES
   ============================================================ */
thead.bg-gray-50 { background: #f8fafc !important; }
thead th {
  font-size: 11px !important; font-weight: 700 !important;
  color: #6b7280 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important;
}
tbody tr { border-color: #f0f2f5 !important; }
tbody tr:hover td { background: #fafbff !important; }
td, th { font-size: 13.5px !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
.bg-gray-800, button.bg-gray-800, a.bg-gray-800 {
  background: #6366f1 !important; border-color: transparent !important;
  border-radius: 8px !important; font-weight: 600 !important;
}
.bg-gray-800:hover, .hover\:bg-gray-700:hover { background: #4f46e5 !important; }

/* ============================================================
   INPUTS
   ============================================================ */
input, select, textarea {
  border-radius: 8px !important; font-family: 'Inter', system-ui, sans-serif !important;
}
.focus\:ring-cyan-500:focus, .focus\:border-cyan-500:focus,
input:focus, select:focus, textarea:focus {
  --tw-ring-color: rgba(99,102,241,0.25) !important;
  border-color: #6366f1 !important; outline: none !important;
}

/* ============================================================
   BADGE PILLS
   ============================================================ */
.bg-green-100  { background: #d1fae5 !important; }
.text-green-800 { color: #059669 !important; }
.bg-red-100    { background: #fee2e2 !important; }
.text-red-800  { color: #dc2626 !important; }
.bg-yellow-100 { background: #fef3c7 !important; }
.text-yellow-800 { color: #d97706 !important; }
.bg-indigo-100 { background: #e0e7ff !important; }
.text-indigo-800 { color: #6366f1 !important; }

/* ============================================================
   SETTINGS TABS
   ============================================================ */
a.bg-gray-100.text-gray-900 {
  background: #eef2ff !important; color: #4f46e5 !important;
  font-weight: 600 !important; border-radius: 8px !important;
}
a.text-gray-500.hover\:text-gray-700:hover,
a.text-gray-900.hover\:bg-gray-50:hover {
  background: #f5f3ff !important; color: #6366f1 !important;
}

/* ============================================================
   DROPDOWNS / MODALS
   ============================================================ */
.origin-top-right.rounded-md.shadow-lg.bg-white,
.rounded-md.shadow-lg.bg-white {
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.10) !important;
  border: 1px solid #e8eaf0 !important;
}

/* ============================================================
   LINKS
   ============================================================ */
a.text-indigo-600, .text-indigo-600 { color: #6366f1 !important; }
a.text-indigo-600:hover              { color: #4f46e5 !important; }
.bg-indigo-600  { background: #6366f1 !important; }
.bg-indigo-600:hover { background: #4f46e5 !important; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e0e7ff; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a5b4fc; }