/* AffanDrive 2025 Theme (External CSS)
   Author: ChatGPT for Affan Sajid
   Notes: Works with Tailwind CDN. No build step required.
*/

:root {
  --bg-start: 255 255 255;
  --bg-end: 243 246 255;
  --card: 255 255 255;
  --text: 17 24 39;
  --muted: 107 114 128;
  --ring: 59 130 246;
  --shadow: 15 23 42;
  --radius: 1.25rem;
  --blur: 10px;

  --primary: 59 130 246;   /* blue-500 */
  --primary-700: 29 78 216;
  --accent: 16 185 129;    /* emerald-500 */
  --danger: 239 68 68;     /* red-500 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-start: 9 11 17;
    --bg-end: 13 17 23;
    --card: 17 23 41;
    --text: 226 232 240;
    --muted: 148 163 184;
    --ring: 56 189 248;     /* sky-400 */
    --shadow: 0 0 0;
    --primary: 56 189 248;  /* sky-400 */
    --primary-700: 2 132 199;
    --accent: 52 211 153;   /* emerald-400 */
    --danger: 248 113 113;  /* red-400 */
    --blur: 12px;
  }
}

/* ====== Page Background & Typography ====== */
.affan {
  background: linear-gradient(180deg, rgb(var(--bg-start)) 0%, rgb(var(--bg-end)) 100%);
  color: rgb(var(--text));
  min-height: 100dvh;
}

.affan ::selection {
  background: rgba(var(--primary), .2);
}

/* ====== Card (auto-apply on existing Tailwind cards) ====== */
.affan :where(.rounded-xl).shadow {
  background: rgba(var(--card), .85) !important;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid rgba(100, 116, 139, .12);
  border-radius: var(--radius) !important;
  box-shadow:
    0 1px 1px rgba(0,0,0,.04),
    0 10px 25px rgba(var(--shadow), .12);
}

/* Table polish */
.affan table {
  border-collapse: separate;
  border-spacing: 0;
}
.affan thead {
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.affan tbody tr {
  transition: background-color .18s ease, transform .12s ease;
}
.affan tbody tr:hover {
  background-color: rgba(var(--primary), .05) !important;
}
.affan td, .affan th {
  border-bottom: 1px solid rgba(100, 116, 139, .12);
}

/* Breadcrumbs subtle underline */
.affan nav a {
  position: relative;
}
.affan nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1.5px;
  background: rgb(var(--primary));
  transition: width .2s ease;
}
.affan nav a:hover::after { width: 100%; }

/* ====== Buttons (enhance existing Tailwind buttons) ====== */
.affan .bg-blue-600,
.affan .bg-emerald-600,
.affan .bg-red-600,
.affan .bg-gray-200,
.affan .border {
  transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease;
  will-change: transform;
}
.affan .bg-blue-600:hover,
.affan .bg-emerald-600:hover,
.affan .bg-red-600:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--primary), .20);
}
.affan .bg-blue-600:active,
.affan .bg-emerald-600:active,
.affan .bg-red-600:active {
  transform: translateY(0);
}

/* Primary gradient (blue) */
.affan .bg-blue-600 {
  background-image: linear-gradient(135deg, rgb(var(--primary)) 0%, rgb(var(--primary-700)) 100%) !important;
}

/* Emerald accent */
.affan .bg-emerald-600 {
  background-image: linear-gradient(135deg, rgb(var(--accent)) 0%, rgb(5 150 105) 100%) !important;
}

/* Danger */
.affan .bg-red-600 {
  background-image: linear-gradient(135deg, rgb(var(--danger)) 0%, rgb(185 28 28) 100%) !important;
}

/* Neutral buttons */
.affan .bg-gray-200 {
  background: rgba(148, 163, 184, .25) !important;
  border: 1px solid rgba(100, 116, 139, .25) !important;
}

/* Subtle focus ring */
.affan :is(input, button, a, summary, select, textarea):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--ring), .35);
  border-color: rgba(var(--ring), .55);
}

/* Inputs & forms */
.affan input[type="text"],
.affan input[type="password"],
.affan input[type="number"],
.affan input[type="file"] + label,
.affan .affan-input {
  border: 1px solid rgba(100, 116, 139, .25) !important;
  background: rgba(var(--card), .9) !important;
  border-radius: .875rem !important;
  transition: border-color .15s ease, box-shadow .18s ease, background-color .15s ease;
}
.affan input::placeholder { color: rgba(var(--muted), .9); }

/* Details / dropdown "More" menu */
.affan details[open] > summary {
  background: rgba(148, 163, 184, .18);
}
.affan details > summary {
  list-style: none;
}
.affan details > summary::-webkit-details-marker { display: none; }

/* Share banner */
.affan .share-banner {
  border: 1px dashed rgba(var(--accent), .6);
  background: rgba(16, 185, 129, .08);
  color: rgb(4 120 87);
}

/* Footer */
.affan footer {
  opacity: .8;
}

/* Micro-interactions */
.affan .hover-float:hover { transform: translateY(-2px); }
.affan .fast-fade { transition: opacity .18s ease, color .18s ease; }

/* Rounded icons (emojis) keep inline alignment */
.affan a, .affan button { vertical-align: middle; }