@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Serif:wght@500;600&display=swap');

:root{
  --clr-bg: #FBF7EF;
  --clr-surface: #FFFFFF;
  --clr-ink: #2B2118;
  --clr-muted: #8A7D68;
  --clr-border: #E8DFCC;
  --clr-accent: #DA251E;
  --clr-accent-dark: #A31D17;
  --clr-shelf: #F1E7D3;

  --clr-cat-1: #8B5E3C; /* Spiritual */
  --clr-cat-2: #C97B2E; /* Motivational */
  --clr-cat-3: #4C6B54; /* GST */
  --clr-cat-4: #3C5A73; /* Customs */
  --clr-cat-5: #6B4C6B; /* Others */

  --clr-available: #4C6B54;
  --clr-issued: #A38B2E;
  --clr-purchase: #8A6BAA;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(43,33,24,0.06), 0 4px 14px rgba(43,33,24,0.06);
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--clr-bg);
  color: var(--clr-ink);
  line-height: 1.55;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'IBM Plex Serif', serif;
  font-weight: 600;
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
}

a{ color: var(--clr-accent-dark); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ---------- Header ---------- */
.app-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--clr-surface);
  border-bottom: 3px solid var(--clr-accent);
  padding: 14px 28px;
}
.app-header h4{
  margin: 0;
  color: var(--clr-accent-dark);
}
.app-logo{ text-decoration: none; }
.app-logo:hover{ text-decoration: none; opacity: 0.85; }
.header-right{
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  color: var(--clr-muted);
}
.header-right a{
  color: var(--clr-ink);
  font-weight: 500;
}
.header-right a:hover{ color: var(--clr-accent); text-decoration: none; }

.app-content{
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px;
}

/* ---------- Login page ---------- */
.login-wrap{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(218,37,30,0.05), transparent 45%),
    var(--clr-bg);
  padding: 20px;
}
.login-card{
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  text-align: center;
}
.login-logo img{ max-width: 140px; margin-bottom: 8px; }
.login-logo h6{
  font-family: 'IBM Plex Serif', serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--clr-accent-dark);
  margin: 4px 0 24px;
  letter-spacing: 0.02em;
}
.login-card .form-group{
  position: relative;
  margin-bottom: 16px;
  text-align: left;
}
.login-card .form-group i{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-muted);
  font-size: 16px;
}
.login-card input[type="text"],
.login-card input[type="password"]{
  width: 100%;
  padding: 12px 14px 12px 40px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  background: var(--clr-bg);
}
.login-card input:focus{
  outline: none;
  border-color: var(--clr-accent);
}

/* ---------- Buttons ---------- */
.btn-primary-red{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--clr-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 11px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s ease;
}
.btn-primary-red:hover{ background: var(--clr-accent-dark); }

/* ---------- Category tabs (shelf labels) ---------- */
.category-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--clr-shelf);
}
.category-tabs a{
  background: var(--clr-shelf);
  color: var(--clr-ink);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
.category-tabs a:hover{ text-decoration: none; background: #EBDDBF; }
.category-tabs a.active{
  background: var(--clr-accent);
  color: #fff;
}

/* ---------- Search ---------- */
.search-form{
  display: flex;
  gap: 8px;
  max-width: 420px;
}
.search-form input[type="text"]{
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  background: var(--clr-surface);
}
.search-form input:focus{ outline: none; border-color: var(--clr-accent); }
.search-form button{
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 0 16px;
  cursor: pointer;
  color: var(--clr-muted);
}
.search-form button:hover{ color: var(--clr-accent); border-color: var(--clr-accent); }

/* ---------- Book grid ---------- */
.book-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.book-card{
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-left: 4px solid var(--clr-cat-1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  display: block;
  color: var(--clr-ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.book-card:hover{
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(43,33,24,0.10);
}
.book-card[data-cat="2"]{ border-left-color: var(--clr-cat-2); }
.book-card[data-cat="3"]{ border-left-color: var(--clr-cat-3); }
.book-card[data-cat="4"]{ border-left-color: var(--clr-cat-4); }
.book-card[data-cat="5"]{ border-left-color: var(--clr-cat-5); }

.book-card img{
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 10px;
  background: var(--clr-shelf);
}
.book-cover-placeholder{
  width: 100%;
  height: 160px;
  border-radius: 6px;
  margin-bottom: 10px;
  background: var(--clr-shelf);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--clr-muted);
}
.book-card h6{
  font-family: 'IBM Plex Serif', serif;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 2px;
  line-height: 1.3;
}
.book-card p{
  font-size: 13px;
  color: var(--clr-muted);
  margin: 0 0 8px;
}

/* ---------- Status badges ---------- */
.badge{
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--clr-shelf);
  color: var(--clr-ink);
}
.status-available{ background: rgba(76,107,84,0.12); color: var(--clr-available); }
.status-issued{ background: rgba(163,139,46,0.14); color: var(--clr-issued); }
.status-to_purchase{ background: rgba(138,107,170,0.14); color: var(--clr-purchase); }

/* ---------- Book detail ---------- */
.book-detail{
  max-width: 480px;
  margin: 20px auto 0;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  text-align: center;
}
.book-detail img,
.book-detail .book-cover-placeholder{
  height: 220px;
  margin-bottom: 16px;
}
.book-detail .author{ color: var(--clr-muted); margin-top: -6px; }
.book-detail form{ margin-top: 16px; }

/* ---------- Alerts ---------- */
.alert{
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  margin-bottom: 18px;
}
.alert-success{ background: rgba(76,107,84,0.12); color: var(--clr-available); }
.alert-danger{ background: rgba(218,37,30,0.09); color: var(--clr-accent-dark); }

/* ---------- Quote banner (below header) ---------- */
.quote-banner{
  background: var(--clr-shelf);
  border-bottom: 1px solid var(--clr-border);
  text-align: center;
  padding: 22px 20px;
}
.quote-banner i{
  font-size: 22px;
  color: var(--clr-accent);
  display: block;
  margin-bottom: 4px;
}
.quote-banner p{
  font-family: 'IBM Plex Serif', serif;
  font-style: italic;
  font-size: 19px;
  font-weight: 500;
  color: var(--clr-ink);
  margin: 0;
}

/* ---------- Policy page ---------- */
.policy-content{
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 28px 60px;
}
.policy-content h1{
  text-align: center;
  color: var(--clr-accent-dark);
  font-size: 26px;
  margin-bottom: 32px;
}
.policy-section{
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 26px;
  margin-bottom: 18px;
}
.policy-section h2{
  font-size: 16px;
  color: var(--clr-accent-dark);
  margin-bottom: 10px;
}
.policy-section p{ margin: 0 0 10px; font-size: 14px; }
.policy-section ul{ margin: 0 0 10px; padding-left: 22px; font-size: 14px; }
.policy-section li{ margin-bottom: 4px; }
.policy-section ul ul{ margin-top: 4px; }
.policy-footer{
  text-align: center;
  padding: 28px 20px 0;
}
.policy-footer h3{
  font-size: 20px;
  color: var(--clr-accent-dark);
}
.policy-footer p{
  color: var(--clr-muted);
  font-size: 14px;
  max-width: 520px;
  margin: 8px auto 0;
}

/* ---------- Admin dashboard stats ---------- */
.stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 18px 0 28px;
}
.stat-card{
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-num{
  font-family: 'IBM Plex Serif', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--clr-accent-dark);
}
.stat-card.stat-issued .stat-num{ color: var(--clr-issued); }
.stat-card.stat-overdue .stat-num{ color: var(--clr-accent); }
.stat-label{
  font-size: 12px;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---------- Admin: forms + tables ---------- */
.admin-wrap{ max-width: 900px; margin: 0 auto; padding: 28px; }
.book-form{
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.book-form input,
.book-form select,
.book-form textarea{
  padding: 10px 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  background: var(--clr-bg);
  width: 100%;
}
.book-form textarea{ grid-column: 1 / -1; min-height: 80px; resize: vertical; }
.book-form input[type="file"]{ background: none; border: none; padding: 6px 0; }
.checkbox-inline{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--clr-muted);
}
.checkbox-inline input{ width: auto; }
.book-form button{ grid-column: 1 / -1; width: auto; padding: 11px 24px; justify-self: start; }

.books-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 16px 0 24px;
}
.books-table th{
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--clr-muted);
  background: var(--clr-shelf);
  padding: 10px 14px;
}
.books-table td{
  padding: 12px 14px;
  border-top: 1px solid var(--clr-border);
  font-size: 14px;
}
.books-table td a{
  margin-right: 10px;
  color: var(--clr-muted);
  font-size: 16px;
}
.books-table td a:hover{ color: var(--clr-accent); }

.pagination{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--clr-muted);
  margin-bottom: 24px;
}
.pagination a{
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--clr-ink);
}
.pagination a:hover{ background: var(--clr-shelf); text-decoration: none; }
.pagination a.current{ background: var(--clr-accent); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 640px){
  .app-header{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .header-right{ flex-wrap: wrap; gap: 12px; }
  .book-form{ grid-template-columns: 1fr; }
  .book-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}