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

:root {
  --background: 38 32% 96%;
  --foreground: 160 17% 18%;
  --card: 42 28% 99%;
  --card-foreground: 160 17% 18%;
  --primary: 167 60% 26%;
  --primary-foreground: 0 0% 100%;
  --secondary: 38 60% 52%;
  --secondary-foreground: 160 17% 18%;
  --muted: 42 22% 92%;
  --muted-foreground: 160 10% 38%;
  --accent: 42 65% 46%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 68% 52%;
  --destructive-foreground: 0 0% 100%;
  --border: 40 20% 84%;
  --input: 40 20% 84%;
  --ring: 167 60% 26%;
  --success: 142 56% 35%;
  --warning: 38 80% 44%;
  --radius: 0.9rem;
  --gradient-primary: linear-gradient(135deg, hsl(167 60% 26%), hsl(167 48% 34%));
  --gradient-warm: linear-gradient(135deg, hsl(38 60% 46%), hsl(42 75% 62%));
  --gradient-hero: linear-gradient(140deg, hsl(167 60% 24%) 0%, hsl(42 70% 44%) 100%);
  --shadow-soft: 0 2px 8px hsl(160 20% 20% / 0.08);
  --shadow-medium: 0 6px 18px hsl(160 20% 20% / 0.12);
  --shadow-strong: 0 12px 34px hsl(160 20% 20% / 0.18);
}

* {
  box-sizing: border-box;
  border-color: hsl(var(--border));
}

html,
body {
  margin: 0;
}

body {
  background:
    radial-gradient(circle at 100% 0, hsl(42 70% 89% / 0.55), transparent 42%),
    radial-gradient(circle at 0 100%, hsl(167 30% 88% / 0.55), transparent 46%),
    hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Cairo', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

[dir="rtl"] {
  direction: rtl;
}

.container::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    linear-gradient(45deg, hsl(167 60% 26%) 1px, transparent 1px),
    linear-gradient(-45deg, hsl(42 65% 46%) 1px, transparent 1px);
  background-size: 28px 28px;
  z-index: 0;
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1rem;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0.9rem;
  align-items: start;
}

.guest-wrap {
  max-width: 1180px;
  margin: 0 auto;
}

.app-shell,
.guest-wrap {
  position: relative;
  z-index: 1;
}

.sidebar {
  position: sticky;
  top: 10px;
  border-radius: 1rem;
  border: 1px solid hsl(42 70% 72% / 0.35);
  background: var(--gradient-hero);
  color: #fff;
  padding: 0.9rem;
  box-shadow: var(--shadow-strong);
}

.sidebar h1 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: 0.2px;
}

.sidebar .sub {
  margin: 0.35rem 0 0.8rem;
  font-size: 0.82rem;
  color: hsl(0 0% 100% / 0.88);
}

.section-title {
  margin: 0.75rem 0 0.35rem;
  font-size: 0.72rem;
  color: hsl(0 0% 100% / 0.78);
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.menu {
  display: grid;
  gap: 0.34rem;
}

.menu a {
  display: block;
  text-decoration: none;
  color: hsl(0 0% 100% / 0.95);
  border: 1px solid hsl(0 0% 100% / 0.3);
  background: hsl(0 0% 100% / 0.08);
  border-radius: 0.68rem;
  padding: 0.52rem 0.62rem;
  font-size: 0.9rem;
  transition: 220ms ease;
}

.menu a:hover {
  background: hsl(0 0% 100% / 0.18);
  transform: translateY(-1px);
}

.menu a.active {
  background: #fff;
  color: hsl(var(--primary));
  border-color: #fff;
  font-weight: 700;
}

.quick-links {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quick-links a {
  display: block;
  text-decoration: none;
  border: 1px solid hsl(var(--border));
  border-radius: 0.72rem;
  padding: 0.62rem 0.68rem;
  background: hsl(0 0% 100% / 0.86);
  color: hsl(var(--foreground));
  transition: 220ms ease;
}

.quick-links a:hover {
  border-color: hsl(var(--primary) / 0.38);
  transform: translateY(-1px);
}

.auth-shell {
  max-width: 1060px;
  margin: 38px auto;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1.15fr 0.85fr;
}

.auth-hero {
  border-radius: 1rem;
  border: 1px solid hsl(42 60% 74% / 0.4);
  background: linear-gradient(150deg, hsl(167 60% 22%), hsl(167 44% 34%), hsl(42 70% 44%));
  color: #fff;
  padding: 1.2rem;
  box-shadow: var(--shadow-strong);
}

.auth-hero h2 {
  margin: 0.45rem 0;
  font-size: 1.6rem;
}

.auth-hero p {
  margin: 0;
  line-height: 1.9;
  color: hsl(0 0% 100% / 0.92);
}

.auth-pill {
  display: inline-block;
  border: 1px solid hsl(0 0% 100% / 0.38);
  background: hsl(0 0% 100% / 0.12);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  font-size: 0.82rem;
}

.auth-points {
  margin-top: 0.85rem;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.auth-points span {
  border: 1px solid hsl(0 0% 100% / 0.34);
  border-radius: 999px;
  background: hsl(0 0% 100% / 0.1);
  padding: 0.22rem 0.68rem;
  font-size: 0.78rem;
}

.auth-card {
  align-self: start;
}

.content {
  min-width: 0;
}

.card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow-medium);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  margin-bottom: 0.8rem;
}

.muted {
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}

.page-title {
  margin: 0;
  font-size: 1.45rem;
}

.page-subtitle {
  margin-top: 0.2rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
}

.hero-panel {
  margin-bottom: 0.85rem;
  border: 1px solid hsl(42 60% 76% / 0.44);
  border-radius: 0.9rem;
  padding: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, hsl(167 60% 23%), hsl(167 44% 34%), hsl(42 72% 45%));
  box-shadow: var(--shadow-strong);
}

.hero-panel h3 {
  margin: 0 0 0.32rem;
  font-size: 1.25rem;
}

.hero-panel p {
  margin: 0;
  color: hsl(0 0% 100% / 0.93);
  max-width: 68ch;
}

.hero-actions {
  margin-top: 0.78rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.kpi-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0.85rem;
}

.kpi {
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  padding: 0.7rem;
  background: linear-gradient(180deg, hsl(0 0% 100%), hsl(42 30% 98%));
}

.kpi .k {
  color: hsl(var(--muted-foreground));
  font-size: 0.77rem;
}

.kpi .v {
  margin-top: 0.15rem;
  font-weight: 800;
  font-size: 1.15rem;
  color: hsl(var(--foreground));
}

.table-wrap {
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  overflow: hidden;
  background: #fff;
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
}

.grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
  display: grid;
  gap: 0.36rem;
  margin-bottom: 0.68rem;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid hsl(var(--input));
  border-radius: 0.65rem;
  padding: 0.58rem 0.7rem;
  background: #fff;
  color: hsl(var(--foreground));
  font: inherit;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid hsl(var(--ring) / 0.2);
  border-color: hsl(var(--ring));
}

.btn {
  display: inline-block;
  text-decoration: none;
  border: 0;
  border-radius: 0.65rem;
  padding: 0.55rem 0.86rem;
  cursor: pointer;
  color: hsl(var(--primary-foreground));
  background: var(--gradient-primary);
  box-shadow: var(--shadow-soft);
  font: inherit;
}

.btn:hover {
  filter: brightness(1.03);
}

.btn-light {
  background: #fff;
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.3);
  box-shadow: none;
}

.btn-muted {
  background: linear-gradient(135deg, hsl(230 18% 32%), hsl(230 16% 40%));
}

.btn-danger {
  background: linear-gradient(135deg, hsl(var(--destructive)), hsl(0 76% 64%));
}

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 0.72rem;
  overflow: hidden;
}

th,
td {
  border: 1px solid hsl(var(--border));
  padding: 0.58rem;
  text-align: right;
}

th {
  background: hsl(42 30% 92%);
  font-weight: 700;
}

tr:nth-child(even) {
  background: hsl(220 35% 99%);
}

.table-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-size: 0.76rem;
  border: 1px solid hsl(var(--border));
}

.badge-success {
  background: hsl(142 70% 94%);
  color: hsl(142 66% 25%);
  border-color: hsl(142 55% 75%);
}

.badge-muted {
  background: hsl(42 26% 93%);
  color: hsl(160 12% 30%);
  border-color: hsl(42 18% 78%);
}

.badge-danger {
  background: hsl(0 84% 95%);
  color: hsl(0 70% 42%);
  border-color: hsl(0 64% 75%);
}

.badge-warning {
  background: hsl(42 90% 92%);
  color: hsl(34 88% 30%);
  border-color: hsl(42 68% 72%);
}

.insight-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chart-card {
  min-height: 270px;
}

.chat-form {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.chat-item {
  border: 1px solid hsl(var(--border));
  border-radius: 0.66rem;
  padding: 0.58rem 0.68rem;
  background: hsl(0 0% 100% / 0.75);
  margin-bottom: 0.52rem;
}

.surah-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
}

.error {
  margin-bottom: 0.6rem;
  border: 1px solid hsl(var(--destructive) / 0.3);
  background: hsl(0 80% 97%);
  color: hsl(var(--destructive));
  border-radius: 0.64rem;
  padding: 0.58rem;
}

.ok {
  margin-bottom: 0.6rem;
  border: 1px solid hsl(var(--success) / 0.35);
  background: hsl(142 65% 95%);
  color: hsl(142 72% 24%);
  border-radius: 0.64rem;
  padding: 0.58rem;
}

.gradient-primary {
  background: var(--gradient-primary);
  color: #fff;
}

.gradient-warm {
  background: var(--gradient-warm);
}

.gradient-hero {
  background: var(--gradient-hero);
  color: #fff;
}

.shadow-soft {
  box-shadow: var(--shadow-soft);
}

.shadow-medium {
  box-shadow: var(--shadow-medium);
}

.shadow-strong {
  box-shadow: var(--shadow-strong);
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.animate-slide-up {
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* DataTables visual integration */
div.dataTables_wrapper {
  padding: 0.5rem;
}

div.dataTables_wrapper div.dataTables_filter label,
div.dataTables_wrapper div.dataTables_length label {
  color: hsl(var(--muted-foreground));
  font-size: 0.86rem;
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
  border: 1px solid hsl(var(--input));
  border-radius: 0.55rem;
  padding: 0.35rem 0.45rem;
  margin-right: 0.35rem;
}

table.dataTable.no-footer {
  border-bottom: 1px solid hsl(var(--border));
}

table.dataTable thead th,
table.dataTable thead td {
  border-bottom: 1px solid hsl(var(--border));
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 990px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .container {
    padding: 0.65rem;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .auth-shell {
    grid-template-columns: 1fr;
    margin: 22px auto;
  }

  .insight-grid {
    grid-template-columns: 1fr;
  }

  .menu {
    grid-template-columns: 1fr;
  }

  .quick-links {
    grid-template-columns: 1fr;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .chat-form {
    grid-template-columns: 1fr;
  }

  .surah-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .page-head {
    flex-direction: column;
    align-items: stretch;
  }
}

@media print {

  .sidebar,
  .btn,
  .dataTables_filter,
  .dataTables_length,
  .dataTables_paginate,
  .dataTables_info {
    display: none !important;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .container {
    max-width: none;
    padding: 0;
  }

  .card {
    box-shadow: none;
  }

  body {
    background: #fff;
  }
}

/* =====================
   DARK MODE OVERRIDES
   ===================== */
html.dark {
  --background: 222 47% 8%;
  --foreground: 215 25% 90%;
  --card: 222 40% 11%;
  --card-foreground: 215 25% 90%;
  --border: 220 30% 20%;
  --input: 220 30% 20%;
  --muted: 222 38% 16%;
  --muted-foreground: 215 18% 56%;
  --primary: 161 55% 42%;
  --ring: 161 55% 42%;
  color-scheme: dark;
}

html.dark body {
  background:
    radial-gradient(circle at 100% 0, hsl(220 40% 14% / 0.7), transparent 42%),
    radial-gradient(circle at 0 100%, hsl(161 40% 10% / 0.6), transparent 46%),
    hsl(var(--background));
  color: hsl(var(--foreground));
}

html.dark .card {
  background: hsl(var(--card));
  border-color: hsl(var(--border));
  box-shadow: 0 4px 20px hsl(0 0% 0% / 0.35);
}

html.dark .kpi {
  background: hsl(222 40% 13%);
  border-color: hsl(var(--border));
}

html.dark .table-wrap {
  background: hsl(222 40% 11%);
  border-color: hsl(var(--border));
}

html.dark table th {
  background: hsl(222 38% 15%);
  color: hsl(215 20% 70%);
  border-color: hsl(var(--border));
}

html.dark table td {
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}

html.dark tr:nth-child(even) {
  background: hsl(222 35% 13%);
}

html.dark input,
html.dark textarea,
html.dark select {
  background: hsl(222 38% 14%);
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: hsl(var(--ring));
  outline-color: hsl(var(--ring) / 0.25);
}

/* DataTables dark overrides */
html.dark div.dataTables_wrapper div.dataTables_filter label,
html.dark div.dataTables_wrapper div.dataTables_length label {
  color: hsl(var(--muted-foreground));
}

html.dark div.dataTables_wrapper div.dataTables_filter input,
html.dark div.dataTables_wrapper div.dataTables_length select {
  background: hsl(222 38% 14%);
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}

html.dark table.dataTable.no-footer,
html.dark table.dataTable thead th,
html.dark table.dataTable thead td {
  border-color: hsl(var(--border));
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: hsl(var(--muted-foreground)) !important;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: hsl(222 35% 18%) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: #fff !important;
}

html.dark .chat-item {
  background: hsl(222 38% 14%);
  border-color: hsl(var(--border));
}

/* =====================
   INTERACTIVE FORMS LAYER
   Enhanced input, select, textarea styling
   ===================== */

/* Smooth transitions on all form controls */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Premium focus ring on Tailwind-styled inputs */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: rgb(16, 185, 129);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08);
}

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: rgb(52, 211, 153);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15);
}

/* Custom select arrow for Tailwind selects (non-appearance-none) */
select:not(.appearance-none) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: left 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  padding-left: 2rem;
}

html.dark select:not(.appearance-none) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

/* Dark mode: auto-style Tailwind-class inputs */
html.dark input[class*="border-slate"],
html.dark textarea[class*="border-slate"],
html.dark select[class*="border-slate"] {
  background-color: hsl(222 38% 14%);
  border-color: hsl(220 30% 22%);
  color: hsl(215 25% 88%);
}

html.dark input[class*="border-slate"]::placeholder,
html.dark textarea[class*="border-slate"]::placeholder {
  color: hsl(215 18% 52%);
}

/* Form card wrappers */
html.dark .rounded-2xl.border.border-slate-200.bg-white,
html.dark .rounded-2xl.border.border-slate-200 {
  background-color: hsl(222 40% 11%);
  border-color: hsl(220 30% 20%);
}

/* Buttons: add consistent active press micro-animation */
button[type="submit"],
a.rounded-xl[class*="bg-emerald"],
a.rounded-xl[class*="bg-slate"] {
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

button[type="submit"]:active,
a.rounded-xl[class*="bg-emerald"]:active,
a.rounded-xl[class*="bg-slate"]:active {
  transform: scale(0.97);
}

/* Spin animation for submit button while loading */
@keyframes spin-cw {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.btn-loading::after {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.4rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-cw 0.65s linear infinite;
}

/* Label enhancements – dark mode */
html.dark label[class*="text-slate-700"] {
  color: hsl(215 20% 75%);
}