/* ============================================================
   कटिहार मंडल हिन्दी पुस्तकालय — Warm Indian Theme
   ============================================================ */
:root {
  /* Light / warm cream */
  --bg:        #FDF6E3;
  --bg-soft:   #F5E6D3;
  --surface:   #FFFDF7;
  --surface-2: #FBF3E3;
  --border:    #EAD9BE;
  --text:      #4A3526;
  --text-soft: #8A6F52;
  --text-mute: #A88B6A;
  --saffron:   #FF9933;
  --saffron-d: #E8851F;
  --red:       #C41E3A;
  --red-d:     #A01730;
  --brown:     #8B5E34;
  --teal:      #2E8B7A;
  --teal-soft: #DDEFE9;
  --gold:      #C9A227;
  --shadow:    rgba(74, 53, 38, 0.10);
  --shadow-lg: rgba(74, 53, 38, 0.18);
}

[data-theme='dark'] {
  --bg:        #1C1610;
  --bg-soft:   #241C13;
  --surface:   #2A2117;
  --surface-2: #332817;
  --border:    #463826;
  --text:      #F3E7D3;
  --text-soft: #C9B79C;
  --text-mute: #998468;
  --saffron:   #FFA94D;
  --saffron-d: #FF9933;
  --red:       #E84D63;
  --red-d:     #C41E3A;
  --brown:     #C08552;
  --teal:      #4FC2AC;
  --teal-soft: #1E3A34;
  --gold:      #E0BC4A;
  --shadow:    rgba(0, 0, 0, 0.35);
  --shadow-lg: rgba(0, 0, 0, 0.55);
}

* { -webkit-tap-highlight-color: transparent; }
html, body { background: var(--bg); color: var(--text); min-height: 100vh; transition: background 0.4s ease, color 0.4s ease; }

/* utility colour helpers bound to vars */
.bg-app     { background: var(--bg); }
.bg-surface { background: var(--surface); }
.bg-surface2{ background: var(--surface-2); }
.bg-soft    { background: var(--bg-soft); }
.text-main  { color: var(--text); }
.text-soft  { color: var(--text-soft); }
.text-mute  { color: var(--text-mute); }
.text-saffron { color: var(--saffron); }
.text-red   { color: var(--red); }
.text-teal  { color: var(--teal); }
.text-brown { color: var(--brown); }
.border-app { border-color: var(--border); }

@keyframes lucide-spin { to { transform: rotate(360deg); } }
.lucide { display: inline-block; vertical-align: -0.15em; }

/* ============ Book covers — genre gradients ============ */
.book-cover {
  position: relative; overflow: hidden; border-radius: 0.85rem;
  aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: 0 6px 18px var(--shadow);
}
.book-cover .cover-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.book-cover .cover-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.book-cover .cover-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: rgba(0,0,0,0.18); box-shadow: inset -2px 0 4px rgba(0,0,0,0.15); }
.book-cover .cover-text { position: relative; z-index: 2; padding: 0.85rem 0.85rem 0.9rem 1rem; color: #fff; }
.book-cover .cover-title { font-family: 'Tiro Devanagari Hindi', serif; font-weight: 600; line-height: 1.25; font-size: 1.02rem; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.book-cover .cover-author { font-size: 0.74rem; opacity: 0.95; margin-top: 0.3rem; text-shadow: 0 1px 5px rgba(0,0,0,0.4); }
.book-cover .cover-genre { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.2rem 0.5rem; border-radius: 9999px; background: rgba(255,255,255,0.22); backdrop-filter: blur(4px); color: #fff; }

/* Genre gradient themes — warm, premium */
.grad-sahitya     { background: linear-gradient(150deg, #FF9933 0%, #C41E3A 100%); }   /* साहित्य */
.grad-kavita      { background: linear-gradient(150deg, #f6a5c0 0%, #8B5E34 100%); }   /* कविता */
.grad-itihaas     { background: linear-gradient(150deg, #C9A227 0%, #8B5E34 100%); }   /* इतिहास */
.grad-vigyan      { background: linear-gradient(150deg, #2E8B7A 0%, #1e3a8a 100%); }   /* विज्ञान */
.grad-darshan     { background: linear-gradient(150deg, #8B5E34 0%, #4A3526 100%); }   /* दर्शन */
.grad-bachche     { background: linear-gradient(150deg, #FFB84D 0%, #FF6B6B 100%); }   /* बाल साहित्य */
.grad-dharm       { background: linear-gradient(150deg, #FF9933 0%, #C9A227 100%); }   /* धर्म */
.grad-jeevani     { background: linear-gradient(150deg, #C41E3A 0%, #6d28d9 100%); }   /* जीवनी */
.grad-upanyas     { background: linear-gradient(150deg, #2E8B7A 0%, #C9A227 100%); }   /* उपन्यास */
.grad-kahani      { background: linear-gradient(150deg, #E8851F 0%, #A01730 100%); }   /* कहानी */
.grad-natak       { background: linear-gradient(150deg, #6d28d9 0%, #C41E3A 100%); }   /* नाटक */
.grad-samajik     { background: linear-gradient(150deg, #0e7490 0%, #2E8B7A 100%); }   /* सामाजिक */

/* ============ Components ============ */
.fade-in { animation: fadeIn 0.4s cubic-bezier(.2,.7,.3,1) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.slide-in { animation: slideIn 0.3s ease both; }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 1rem;
  box-shadow: 0 2px 10px var(--shadow); transition: background 0.3s ease, border-color 0.3s ease;
}

.nav-link {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.95rem; border-radius: 0.75rem;
  font-weight: 500; font-size: 0.94rem; color: var(--text-soft); transition: all 0.2s ease; cursor: pointer;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.active { background: linear-gradient(135deg, var(--saffron), var(--red)); color: #fff; box-shadow: 0 4px 12px rgba(196,30,58,0.28); }
.nav-link.active .lucide { color: #fff; }
.nav-link .lucide { color: var(--text-mute); flex-shrink: 0; }
.nav-link:hover .lucide { color: var(--saffron); }
.nav-link.active:hover .lucide { color: #fff; }

.badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.7rem; border-radius: 9999px; font-size: 0.74rem; font-weight: 600; line-height: 1.4; }
.badge-pending  { background: #FDECC8; color: #9A6700; }
.badge-approved { background: var(--teal-soft); color: var(--teal); }
.badge-rejected { background: #FBDCE0; color: var(--red); }
.badge-returned { background: #E5DBF5; color: #6d28d9; }
.badge-cancelled{ background: var(--surface-2); color: var(--text-mute); }
.badge-active   { background: var(--teal-soft); color: var(--teal); }
.badge-suspended{ background: #FBDCE0; color: var(--red); }
[data-theme='dark'] .badge-pending { background: #463413; color: #E0BC4A; }
[data-theme='dark'] .badge-rejected { background: #4a1d24; color: #E84D63; }
[data-theme='dark'] .badge-returned { background: #2e2440; color: #b794f6; }

.role-superadmin { background: #FFE8C7; color: var(--saffron-d); }
.role-admin      { background: var(--teal-soft); color: var(--teal); }
.role-employee   { background: #F0E2CC; color: var(--brown); }
[data-theme='dark'] .role-superadmin { background: #4a3413; color: var(--saffron); }
[data-theme='dark'] .role-employee { background: #3a2d1c; color: var(--brown); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; border-radius: 0.75rem; transition: all 0.2s ease; cursor: pointer; border: none; font-family: inherit; font-size: 0.92rem; }
.btn-primary { background: linear-gradient(135deg, var(--saffron), var(--red)); color: #fff; padding: 0.65rem 1.25rem; box-shadow: 0 4px 14px rgba(196,30,58,0.25); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(196,30,58,0.35); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-ghost { background: var(--surface-2); color: var(--text); padding: 0.65rem 1.25rem; border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-danger { background: #FBDCE0; color: var(--red); padding: 0.65rem 1.25rem; }
.btn-danger:hover { background: #F5C6CD; }
[data-theme='dark'] .btn-danger { background: #4a1d24; }
.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.82rem; }

.input {
  width: 100%; padding: 0.65rem 0.95rem; border: 1px solid var(--border); border-radius: 0.75rem;
  font-size: 0.92rem; background: var(--surface); color: var(--text); transition: all 0.2s ease; font-family: inherit;
}
.input::placeholder { color: var(--text-mute); }
.input:focus { outline: none; border-color: var(--saffron); box-shadow: 0 0 0 3px rgba(255,153,51,0.18); }

select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238A6F52' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.2rem; }

.modal-overlay { position: fixed; inset: 0; background: rgba(28,22,16,0.5); backdrop-filter: blur(3px); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fadeIn 0.2s ease; }
.modal-box { animation: modalIn 0.3s cubic-bezier(.2,.8,.3,1) both; }
@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(12px); } to { opacity: 1; transform: none; } }

.toast { animation: slideIn 0.3s ease both; }

/* decorative top border strip (tricolour-ish, subtle) */
.kalash-strip { height: 4px; background: linear-gradient(90deg, var(--saffron) 0%, var(--gold) 50%, var(--teal) 100%); }

/* checkbox accent */
input[type='checkbox'] { accent-color: var(--saffron); }

/* scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); }
::-webkit-scrollbar-track { background: transparent; }

/* theme toggle switch */
.theme-toggle { position: relative; width: 52px; height: 28px; border-radius: 9999px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; padding: 0 3px; }
.theme-toggle .knob { width: 22px; height: 22px; border-radius: 9999px; background: linear-gradient(135deg, var(--saffron), var(--red)); display: flex; align-items: center; justify-content: center; color: #fff; transition: transform 0.3s cubic-bezier(.3,1.5,.5,1); }
[data-theme='dark'] .theme-toggle .knob { transform: translateX(24px); }

table { border-collapse: collapse; }