/* ============================================================
   SUNNI FATWA DIGITAL LIBRARY — theme.css
   Shared across ALL pages: public + admin + reader
   ============================================================ */

/* ── Font Import ─────────────────────────────────────────── */
@import url('https://lab.sunnifatwa.in/fonts/fonts.css');

/* ── Base Reset ──────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; }

/* ============================================================
   THEME: LIGHT (Parchment) — DEFAULT
   ============================================================ */
:root,
[data-theme="light"] {
  /* Backgrounds */
  --bg-base:        #F5EAD4;
  --bg-base2:       #EDE0C4;
  --bg-card:        #FDF6E5;
  --bg-card2:       #F4E8CC;
  --bg-card3:       #ECDDB8;
  --bg-input:       rgba(255,255,255,0.65);
  --bg-input-focus: rgba(255,255,255,0.92);
  --bg-header:      #1A3D28;
  --bg-sidebar:     #162E1E;
  --bg-hover:       rgba(184,137,42,0.07);
  --bg-active:      rgba(184,137,42,0.14);
  --bg-overlay:     rgba(10,15,13,0.45);

  /* Text */
  --text-primary:   #1A1A1A;
  --text-secondary: #4A4A4A;
  --text-muted:     #7A7A7A;
  --text-on-dark:   #F0D99A;
  --text-on-dark2:  rgba(240,217,154,0.65);
  --text-urdu:      #0D1F17;

  /* Brand */
  --forest:         #1A3D28;
  --forest2:        #234F36;
  --forest3:        #2D6645;
  --gold:           #B8892A;
  --gold2:          #D4A843;
  --gold3:          #E8C87A;
  --gold-light:     #F0D99A;
  --crimson:        #7A1C1C;
  --crimson-bg:     rgba(122,28,28,0.10);

  /* Borders */
  --border-gold:    rgba(184,137,42,0.35);
  --border-gold2:   rgba(184,137,42,0.55);
  --border-card:    rgba(184,137,42,0.25);
  --border-input:   rgba(184,137,42,0.40);

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(10,15,13,0.10);
  --shadow-md:   0 6px 24px rgba(10,15,13,0.15);
  --shadow-lg:   0 16px 48px rgba(10,15,13,0.20);
  --shadow-card: 0 4px 16px rgba(10,15,13,0.10), 0 2px 0 var(--gold2);

  /* Pattern */
  --pattern-opacity: 0.055;
  --noise-opacity:   0.40;

  /* Theme indicator */
  --theme-name: "light";
}

/* ============================================================
   THEME: DARK (Night)
   ============================================================ */
[data-theme="dark"] {
  --bg-base:        #080E0B;
  --bg-base2:       #0D1810;
  --bg-card:        #111C14;
  --bg-card2:       #172219;
  --bg-card3:       #1C2A1F;
  --bg-input:       rgba(255,255,255,0.06);
  --bg-input-focus: rgba(255,255,255,0.10);
  --bg-header:      #0A1A0F;
  --bg-sidebar:     #060F08;
  --bg-hover:       rgba(212,168,67,0.08);
  --bg-active:      rgba(212,168,67,0.16);
  --bg-overlay:     rgba(0,0,0,0.65);

  --text-primary:   #E8E0D0;
  --text-secondary: #B8A898;
  --text-muted:     #706860;
  --text-on-dark:   #E8C87A;
  --text-on-dark2:  rgba(232,200,122,0.55);
  --text-urdu:      #D8CEB8;

  --forest:         #2D6645;
  --forest2:        #3A7D56;
  --forest3:        #4A9468;
  --gold:           #C8A030;
  --gold2:          #D4A843;
  --gold3:          #E8C87A;
  --gold-light:     #F0D99A;
  --crimson:        #E08080;
  --crimson-bg:     rgba(220,80,80,0.12);

  --border-gold:    rgba(212,168,67,0.25);
  --border-gold2:   rgba(212,168,67,0.45);
  --border-card:    rgba(212,168,67,0.18);
  --border-input:   rgba(212,168,67,0.30);

  --shadow-sm:   0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:   0 6px 24px rgba(0,0,0,0.45);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.55);
  --shadow-card: 0 4px 16px rgba(0,0,0,0.40), 0 2px 0 var(--gold);

  --pattern-opacity: 0.04;
  --noise-opacity:   0.20;
  --theme-name: "dark";
}

/* ============================================================
   THEME: SEPIA
   ============================================================ */
[data-theme="sepia"] {
  --bg-base:        #D4BF8E;
  --bg-base2:       #C8B07A;
  --bg-card:        #E4D4A4;
  --bg-card2:       #D8C890;
  --bg-card3:       #CCBC7C;
  --bg-input:       rgba(255,248,220,0.70);
  --bg-input-focus: rgba(255,248,220,0.95);
  --bg-header:      #2D1A00;
  --bg-sidebar:     #1E1100;
  --bg-hover:       rgba(139,105,20,0.10);
  --bg-active:      rgba(139,105,20,0.20);
  --bg-overlay:     rgba(30,17,0,0.50);

  --text-primary:   #1A0F00;
  --text-secondary: #3D2800;
  --text-muted:     #7A5C2A;
  --text-on-dark:   #D4A843;
  --text-on-dark2:  rgba(212,168,67,0.60);
  --text-urdu:      #1A0F00;

  --forest:         #2D1A00;
  --forest2:        #3D2800;
  --forest3:        #5A4010;
  --gold:           #8B6914;
  --gold2:          #A07C20;
  --gold3:          #C8A030;
  --gold-light:     #D4B050;
  --crimson:        #7A1C1C;
  --crimson-bg:     rgba(122,28,28,0.10);

  --border-gold:    rgba(139,105,20,0.40);
  --border-gold2:   rgba(139,105,20,0.60);
  --border-card:    rgba(139,105,20,0.30);
  --border-input:   rgba(139,105,20,0.45);

  --shadow-sm:   0 2px 8px rgba(30,17,0,0.15);
  --shadow-md:   0 6px 24px rgba(30,17,0,0.20);
  --shadow-lg:   0 16px 48px rgba(30,17,0,0.25);
  --shadow-card: 0 4px 16px rgba(30,17,0,0.15), 0 2px 0 var(--gold2);

  --pattern-opacity: 0.06;
  --noise-opacity:   0.35;
  --theme-name: "sepia";
}

/* ============================================================
   BODY BASE
   ============================================================ */
body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  direction: rtl;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── Background Layers ───────────────────────────────────── */
.sf-bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}
.sf-bg-texture {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, var(--bg-card2) 0%, transparent 55%),
    radial-gradient(ellipse 50% 100% at 0% 50%, var(--bg-card3) 0%, transparent 50%),
    radial-gradient(ellipse 50% 100% at 100% 50%, var(--bg-card3) 0%, transparent 50%),
    var(--bg-base);
}
.sf-bg-noise {
  position: absolute; inset: 0;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
}
.sf-bg-pattern {
  position: absolute; inset: 0;
  opacity: var(--pattern-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23b8892a' stroke-width='0.6'%3E%3Cpath d='M40 5L75 22.5L75 57.5L40 75L5 57.5L5 22.5Z'/%3E%3Cpath d='M40 18L63 30.5L63 49.5L40 62L17 49.5L17 30.5Z'/%3E%3Ccircle cx='40' cy='40' r='7'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Corner Ornaments (RTL-aware) ────────────────────────── */
.sf-corners { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

.sf-corner {
  position: absolute;
  width: 80px; height: 80px;
  opacity: 0.20;
}
/* In RTL: top-right is the "start" corner */
.sf-corner--tr { top: 14px; right: 14px; }
.sf-corner--tl { top: 14px; left: 14px;  transform: scaleX(-1); }
.sf-corner--br { bottom: 14px; right: 14px; transform: scaleY(-1); }
.sf-corner--bl { bottom: 14px; left: 14px;  transform: scale(-1,-1); }

.sf-corner svg { width: 100%; height: 100%; }

/* ── Theme Transition ────────────────────────────────────── */
*, *::before, *::after {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}
/* Don't animate transforms/layout */
.sf-corner, .sf-bg-texture, .sf-bg-noise { transition: none; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.sf-font-title   { font-family: var(--font-title);   }
.sf-font-body    { font-family: var(--font-body);    }
.sf-font-quran   { font-family: var(--font-quran);   line-height: 2.2; }
.sf-font-hadith  { font-family: var(--font-hadith);  }
.sf-font-latin   { font-family: var(--font-juziyaat); direction: ltr; display: inline-block; }

/* Urdu text sizes */
.sf-text-xs  { font-size: 14px; }
.sf-text-sm  { font-size: 16px; }
.sf-text-md  { font-size: 18px; }
.sf-text-lg  { font-size: 22px; }
.sf-text-xl  { font-size: 28px; }
.sf-text-2xl { font-size: 34px; }
.sf-text-3xl { font-size: 42px; }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.sf-wrap {
  position: relative; z-index: 10;
  width: 100%; max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}
.sf-wrap--narrow { max-width: 480px; }
.sf-wrap--wide   { max-width: 1300px; }

.sf-center { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

/* ============================================================
   CARDS
   ============================================================ */
.sf-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-bottom: 3px solid var(--gold2);
  border-radius: 4px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.sf-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  pointer-events: none;
}
.sf-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold2), var(--gold3), var(--gold2), transparent);
  pointer-events: none;
}
.sf-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.sf-card-inner { padding: 24px; }

/* ============================================================
   SECTION HEADING
   ============================================================ */
.sf-section-heading {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.sf-section-heading-text {
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--text-primary);
  white-space: nowrap;
}
.sf-section-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--gold2), transparent);
}
.sf-section-line--rev {
  background: linear-gradient(90deg, transparent, var(--gold2));
}

/* ============================================================
   BUTTONS
   ============================================================ */
.sf-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  font-family: var(--font-body);
  font-size: 15px;
  border-radius: 3px;
  cursor: pointer;
  border: none;
  transition: all 0.22s ease;
}
.sf-btn--primary {
  background: linear-gradient(145deg, var(--forest2), var(--forest3));
  color: var(--gold-light);
  border: 1px solid var(--border-gold);
  border-bottom: 2px solid var(--gold2);
  box-shadow: var(--shadow-sm);
}
.sf-btn--primary:hover {
  background: linear-gradient(145deg, var(--forest3), var(--forest2));
  border-color: var(--gold2);
  color: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.sf-btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-card);
}
.sf-btn--ghost:hover { background: var(--bg-hover); border-color: var(--gold2); }

.sf-btn--danger {
  background: var(--crimson-bg);
  color: var(--crimson);
  border: 1px solid rgba(122,28,28,0.30);
}
.sf-btn--danger:hover { background: rgba(122,28,28,0.20); }

.sf-btn--gold {
  background: linear-gradient(145deg, var(--gold), var(--gold2));
  color: var(--forest);
  border: 1px solid var(--gold3);
  font-weight: bold;
}
.sf-btn--gold:hover { filter: brightness(1.08); transform: translateY(-1px); }

.sf-btn--sm { padding: 7px 14px; font-size: 13px; }
.sf-btn--lg { padding: 15px 30px; font-size: 18px; }
.sf-btn--full { width: 100%; justify-content: center; }

/* ============================================================
   FORM INPUTS
   ============================================================ */
.sf-input, .sf-select, .sf-textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1.5px solid var(--border-input);
  border-radius: 3px;
  padding: 12px 16px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
  transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
}
.sf-input:focus, .sf-select:focus, .sf-textarea:focus {
  border-color: var(--gold2);
  background: var(--bg-input-focus);
  box-shadow: 0 0 0 4px rgba(184,137,42,0.12);
}
.sf-input::placeholder { color: var(--text-muted); font-size: 14px; }
.sf-textarea { min-height: 120px; resize: vertical; }
.sf-select option { background: var(--bg-card); color: var(--text-primary); }

.sf-field { margin-bottom: 18px; }
.sf-label {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* ============================================================
   BADGES
   ============================================================ */
.sf-badge {
  display: inline-block;
  font-family: var(--font-juziyaat);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  border: 1px solid var(--border-gold);
  background: rgba(184,137,42,0.10);
  color: var(--gold2);
}
.sf-badge--forest {
  background: var(--forest);
  color: var(--gold-light);
  border-color: var(--forest2);
}

/* ============================================================
   TABLE
   ============================================================ */
.sf-table { width: 100%; border-collapse: collapse; }
.sf-table th {
  background: var(--forest);
  color: var(--gold-light);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 14px;
  text-align: right;
  border: 1px solid var(--forest2);
}
.sf-table td {
  padding: 11px 14px;
  border: 1px solid var(--border-card);
  font-size: 15px;
  color: var(--text-primary);
  vertical-align: middle;
}
.sf-table tr:nth-child(even) td { background: var(--bg-card2); }
.sf-table tr:hover td { background: var(--bg-hover); }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base2); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold2); }

/* ============================================================
   ALERTS
   ============================================================ */
.sf-alert {
  padding: 12px 18px;
  border-radius: 3px;
  font-size: 14px;
  margin-bottom: 14px;
  border-right: 3px solid;
}
.sf-alert--error   { background: var(--crimson-bg); color: var(--crimson); border-color: var(--crimson); }
.sf-alert--success { background: rgba(26,61,40,0.10); color: var(--forest3); border-color: var(--forest3); }
.sf-alert--warn    { background: rgba(184,137,42,0.10); color: var(--gold); border-color: var(--gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .sf-wrap { padding: 16px 14px 40px; }
  .sf-text-3xl { font-size: 30px; }
  .sf-text-2xl { font-size: 26px; }
  .sf-text-xl  { font-size: 22px; }
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}