/* 
╔═══════════════════════════════════════════════════════════════════════════╗
║                    LMS GLOBAL STYLESHEET                                 ║
║                                                                           ║
║  Theme: Warm Editorial Library - Cream, Deep Brown, Amber colors         ║
║  Typography: Playfair Display (headings) + DM Sans (body)                ║
║  Purpose: Complete styling for Library Management System (LMS) app       ║
║                                                                           ║
╚═══════════════════════════════════════════════════════════════════════════╝
*/

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  1. CSS CUSTOM PROPERTIES (Variables)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
:root {
  /* Color Palette - Warm Editorial Theme */
  --cream:       #faf7f2;        /* Main background - warm off-white */
  --white:       #ffffff;        /* Pure white for cards */
  --brown-dark:  #2c1a0e;        /* Dark brown for text and buttons */
  --brown-mid:   #5c3d2e;        /* Medium brown for hover states */
  --amber:       #d4880a;        /* Primary accent color */
  --amber-light: #f5c842;        /* Light amber for highlights */
  --sage:        #4a7c6f;        /* Sage green (muted) */
  --red:         #c0392b;        /* Error/deletion red */
  --border:      #e8e0d4;        /* Light border lines */
  --muted:       #8a7a6e;        /* Muted text color */
  --card-shadow: 0 4px 24px rgba(44, 26, 14, 0.10); /* Soft shadow */

  /* Admin Theme Overrides - Dark mode for admin section */
  --admin-dark:  #0f172a;        /* Admin dark background */
  --admin-mid:   #1e293b;        /* Admin medium background */
  --admin-accent:#6366f1;        /* Admin accent - indigo */
  --admin-border:#334155;        /* Admin border color */
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  2. GLOBAL RESET & BASE STYLES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Reset all elements to prevent browser defaults from interfering */
*, *::before, *::after { 
  box-sizing: border-box;  /* Include padding/border in width calculations */
  margin: 0; 
  padding: 0; 
}

/* Body - Main container */
body {
  font-family: 'DM Sans', sans-serif;  /* Clean modern font for body text */
  font-size: 15px;                     /* Base font size */
  line-height: 1.6;                    /* Readable line spacing */
  color: var(--brown-dark);            /* Default text color */
  background-color: var(--cream);      /* Warm background */
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  3. AUTHENTICATION PAGES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Auth page - Background with library image and overlay */
.auth-page {
  /* Overlay image + semi-transparent dark gradient */
  background:
    linear-gradient(rgba(44, 26, 14, 0.72), rgba(44, 26, 14, 0.72)),
    url('https://img.freepik.com/free-photo/abundant-collection-antique-books-wooden-shelves-generated-by-ai_188544-29660.jpg?size=626&ext=jpg')
    no-repeat center center / cover;
  min-height: 100vh;  /* Full viewport height */
}

/* Admin auth page - Darker theme with different overlay */
.auth-page.admin-theme {
  background:
    linear-gradient(rgba(10, 15, 30, 0.88), rgba(10, 15, 30, 0.88)),
    url('https://img.freepik.com/free-photo/abundant-collection-antique-books-wooden-shelves-generated-by-ai_188544-29660.jpg?size=626&ext=jpg')
    no-repeat center center / cover;
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  4. NAVIGATION BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Main navbar container */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 64px;
  background: rgba(20, 10, 5, 0.85);    /* Semi-transparent dark brown */
  backdrop-filter: blur(10px);          /* Frosted glass effect */
  position: sticky;                     /* Sticky on scroll */
  top: 0;
  z-index: 100;                         /* Stay above other content */
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Brand/logo text in navbar */
.brand {
  font-family: 'Playfair Display', serif;  /* Elegant serif font */
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--amber-light);               /* Golden color */
  text-decoration: none;
  letter-spacing: -0.3px;
}

/* Navigation links container */
.nav-links { 
  display: flex; 
  gap: 24px;                              /* Space between links */
  align-items: center; 
}

/* Individual nav links styling */
.nav-links a {
  color: rgba(255,255,255,0.75);          /* Semi-transparent white */
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 400;
  transition: color 0.2s;                 /* Smooth color transition */
}

/* Hover and active state for nav links */
.nav-links a:hover, 
.nav-links a.active { 
  color: var(--amber-light);              /* Highlight in golden */
}

/* Logout link styling - red to indicate action */
.logout-link { 
  color: #e07070 !important;              /* Muted red for logout */
}

/* App navbar - lighter background variant */
.app-navbar {
  background: var(--brown-dark);
}

/* Admin navbar - dark theme with accent */
.admin-navbar {
  background: var(--admin-dark) !important;
  border-bottom: 2px solid var(--admin-accent);
}

/* Admin theme brand styling */
.admin-navbar .brand { 
  color: #a5b4fc;                        /* Light indigo for admin */
}

/* Admin theme active link */
.admin-navbar .nav-links a.active { 
  color: #a5b4fc; 
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  5. AUTH LAYOUT (Sidebar + Form)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Main auth container - sidebar + form side-by-side */
.auth-main {
  display: flex;
  min-height: calc(100vh - 64px);  /* Full height minus navbar */
}

/* Left sidebar for quotes and info */
.auth-sidebar {
  width: 360px;
  flex-shrink: 0;                  /* Don't shrink on small screens */
  padding: 60px 40px;
  border-right: 1px solid rgba(255,255,255,0.08);
}

/* Sidebar content wrapper */
.sidebar-content { 
  max-width: 280px; 
}

/* Quote block styling */
.quote-block {
  position: relative;
  margin-bottom: 40px;
  padding-left: 20px;
  border-left: 3px solid var(--amber);  /* Left accent border */
}

/* Opening quote mark (large decorative) */
.quote-mark {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  color: var(--amber);
  line-height: 0.5;
  display: block;
  margin-bottom: 8px;
}

/* Quote text */
.quote-block p    { 
  color: rgba(255,255,255,0.85); 
  font-size: 1rem; 
  line-height: 1.7; 
  margin-bottom: 10px; 
}

/* Quote attribution */
.quote-block cite { 
  color: var(--amber); 
  font-size: 0.85rem; 
  font-style: normal; 
}

/* Library info section in sidebar */
.library-info { 
  margin-top: 28px; 
}

/* Library info heading */
.library-info h4 { 
  color: var(--amber-light); 
  font-size: 0.8rem; 
  letter-spacing: 1px; 
  text-transform: uppercase; 
  margin-bottom: 10px; 
}

/* Library info text */
.library-info p, 
.library-info li { 
  color: rgba(255,255,255,0.7); 
  font-size: 0.9rem; 
  line-height: 1.8; 
}

/* Library info list */
.library-info ul { 
  padding-left: 18px; 
}

/* Hint box - for login hints */
.hint-box { 
  background: rgba(255,255,255,0.06);  /* Subtle background */
  padding: 16px; 
  border-radius: 8px; 
  margin-top: 28px; 
}

/* Code styling in hint box */
.hint-box code { 
  background: rgba(255,255,255,0.12); 
  padding: 2px 7px; 
  border-radius: 4px; 
  font-size: 0.85rem; 
  color: var(--amber-light); 
}

/* Right side - form container */
.auth-form-side {
  flex: 1;                              /* Grow to fill space */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
}

/* Auth card - white form container */
.auth-card {
  background: var(--white);
  border-radius: 16px;
  padding: 48px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);  /* Deep shadow */
}

/* Auth card heading */
.auth-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.9rem;
  color: var(--brown-dark);
  margin-bottom: 6px;
}

/* Subtitle in auth card */
.auth-subtitle { 
  color: var(--muted); 
  font-size: 0.9rem; 
  margin-bottom: 28px; 
}

/* Footer in auth card (login/signup link) */
.auth-footer   { 
  margin-top: 22px; 
  text-align: center; 
  color: var(--muted); 
  font-size: 0.875rem; 
}

/* Links in auth footer */
.auth-footer a { 
  color: var(--amber); 
  text-decoration: none; 
  font-weight: 500; 
}

/* Auth footer link hover */
.auth-footer a:hover { 
  text-decoration: underline; 
}


/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  6. FORM ELEMENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Form group - wrapper around input + label */
.form-group { 
  margin-bottom: 18px; 
}

/* Form labels */
label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;      /* All caps style */
  color: var(--muted);
  margin-bottom: 6px;
}

/* Hint text within label */
label .hint { 
  font-weight: 400; 
  text-transform: none; 
  font-size: 0.78rem; 
}

/* Text inputs, email, password, tel, date, textarea - unified styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);     /* Light border */
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--brown-dark);
  background: var(--cream);              /* Warm background */
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

/* Input focus state - highlights field on interaction */
input:focus, 
textarea:focus {
  border-color: var(--amber);            /* Golden highlight */
  box-shadow: 0 0 0 3px rgba(212, 136, 10, 0.15);  /* Subtle glow */
  background: #fff;                      /* Pure white on focus */
}

/* Disabled input - grayed out */
input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Textarea - allow vertical resize */
textarea { 
  resize: vertical; 
}

/* Primary button styling */
.btn-primary {
  display: block;
  width: 100%;
  padding: 12px 20px;
  background: var(--brown-dark);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  text-align: center;
  margin-top: 8px;
}

/* Primary button hover - darker and lifted */
.btn-primary:hover   { 
  background: var(--brown-mid); 
  transform: translateY(-1px);           /* Slight lift effect */
}

/* Primary button active - pressed effect */
.btn-primary:active  { 
  transform: translateY(0); 
}

/* Admin theme button - indigo instead of brown */
.btn-admin { 
  background: var(--admin-accent) !important; 
}

/* Admin button hover */
.btn-admin:hover { 
  background: #4f46e5 !important; 
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  7. MESSAGES & ALERTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Message box base styling */
.msg-box { 
  display: none; 
  padding: 10px 16px; 
  border-radius: 8px; 
  font-size: 0.88rem; 
  margin-bottom: 18px; 
}

/* Error message - red styling */
.msg-error   { 
  background: #fef2f2;  /* Light red background */
  border: 1px solid #fca5a5;
  color: var(--red);    /* Red text */
  display: block; 
}

/* Success message - green styling */
.msg-success { 
  background: #f0fdf4;  /* Light green background */
  border: 1px solid #86efac;
  color: #166534;       /* Dark green text */
  display: block; 
}

/* Hidden utility class */
.hidden { 
  display: none !important; 
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  8. APP LAYOUT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Main app page container */
.app-page    { 
  background: var(--cream);              /* Warm background */
  min-height: 100vh;                     /* Full viewport height */
}

/* Admin theme variant - dark mode */
.admin-theme { 
  background: var(--admin-dark);         /* Dark background */
  color: #e2e8f0;                        /* Light text */
}

/* Main app content wrapper */
.app-main { 
  max-width: 1100px;                     /* Max content width */
  margin: 0 auto;                        /* Center content */
  padding: 40px 32px 80px; 
}

/* Page header section */
.app-header { 
  margin-bottom: 36px; 
}

/* Main heading in app header */
.app-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--brown-dark);
  margin-bottom: 4px;
}

/* Admin theme header heading */
.admin-theme .app-header h1 { 
  color: #e2e8f0; 
}

/* Subtitle under heading */
.app-subtitle { 
  color: var(--muted); 
  font-size: 0.92rem; 
}

/* Admin theme subtitle */
.admin-theme .app-subtitle { 
  color: #94a3b8; 
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  9. STAT CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Grid for stat cards - responsive layout */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));  /* Auto-responsive */
  gap: 20px;
  margin-bottom: 32px;
}

/* Individual stat card */
.stat-card {
  background: var(--white);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.2s, box-shadow 0.2s;
}

/* Stat card hover - lifts and shadows */
.stat-card:hover { 
  transform: translateY(-3px); 
  box-shadow: 0 8px 32px rgba(44,26,14,0.14); 
}

/* Admin theme stat card */
.admin-theme .stat-card { 
  background: var(--admin-mid); 
  border-color: var(--admin-border); 
}

/* Emoji/icon in stat card */
.stat-icon  { 
  font-size: 1.6rem; 
}

/* Large number value in stat */
.stat-value { 
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem; 
  font-weight: 700; 
  color: var(--brown-dark); 
  line-height: 1; 
}

/* Admin theme stat value */
.admin-theme .stat-value { 
  color: #e2e8f0; 
}

/* Label below number */
.stat-label { 
  font-size: 0.8rem; 
  text-transform: uppercase; 
  letter-spacing: 0.5px; 
  color: var(--muted); 
}

/* Link in stat card */
.stat-link  { 
  font-size: 0.82rem; 
  color: var(--amber); 
  text-decoration: none; 
  margin-top: 8px; 
  font-weight: 500; 
}

/* Stat link hover */
.stat-link:hover { 
  text-decoration: underline; 
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  10. SECTION CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Main content card */
.section-card {
  background: var(--white);
  border-radius: 12px;
  padding: 28px 32px;
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  margin-bottom: 24px;
}

/* Admin theme section card */
.admin-theme .section-card { 
  background: var(--admin-mid); 
  border-color: var(--admin-border); 
}

/* Heading inside section card */
.section-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--brown-dark);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);  /* Separator line */
}

/* Admin theme section heading */
.admin-theme .section-card h3 { 
  color: #e2e8f0; 
  border-color: var(--admin-border); 
}

/* Narrow card variant - narrower max-width */
.narrow-card { 
  max-width: 520px; 
}


/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  11. ACTION BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Action buttons container */
.action-buttons { 
  display: flex; 
  flex-wrap: wrap;                       /* Stack on small screens */
  gap: 12px; 
}

/* Secondary action button */
.action-btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--brown-dark);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s;
}

/* Action button hover - highlights in golden */
.action-btn:hover { 
  background: var(--amber-light); 
  border-color: var(--amber); 
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  12. BOOK ROWS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Book row - horizontal layout for book info and actions */
.book-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

/* Admin theme book row */
.admin-theme .book-row { 
  border-color: var(--admin-border); 
}

/* Last book row - remove bottom border */
.book-row:last-child { 
  border-bottom: none; 
}

/* Book info section in row */
.book-row-info strong { 
  display: block; 
  font-size: 0.95rem; 
  color: var(--brown-dark); 
}

/* Admin theme book info text */
.admin-theme .book-row-info strong { 
  color: #e2e8f0; 
}

/* Metadata in book row (author, ISBN, etc) */
.book-meta { 
  font-size: 0.82rem; 
  color: var(--muted); 
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  13. DATA TABLES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Main table wrapper */
.data-table { 
  width: 100%; 
  border-collapse: collapse; 
  font-size: 0.875rem; 
}

/* Table header cells */
.data-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 0.72rem;
  text-transform: uppercase;            /* All caps headers */
  letter-spacing: 0.5px;
  color: var(--muted);
  background: var(--cream);              /* Subtle background */
  border-bottom: 2px solid var(--border);
}

/* Admin theme table header */
.admin-theme .data-table th { 
  background: rgba(255,255,255,0.04); 
  color: #94a3b8; 
  border-color: var(--admin-border); 
}

/* Table data cells */
.data-table td { 
  padding: 12px 12px; 
  border-bottom: 1px solid var(--border); 
  vertical-align: middle; 
  color: var(--brown-dark); 
}

/* Admin theme table data */
.admin-theme .data-table td { 
  color: #cbd5e1; 
  border-color: var(--admin-border); 
}

/* Last row - no bottom border */
.data-table tr:last-child td { 
  border-bottom: none; 
}

/* Table row hover - highlights row */
.data-table tr:hover td { 
  background: rgba(212,136,10,0.04);    /* Subtle amber tint */
}

/* Admin theme table hover */
.admin-theme .data-table tr:hover td { 
  background: rgba(255,255,255,0.03); 
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  14. BADGES - Status indicators
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Badge base style */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Green badge - success/active status */
.badge-green { 
  background: #d1fae5;   /* Light green */
  color: #065f46;        /* Dark green text */
}

/* Red badge - error/returned status */
.badge-red   { 
  background: #fee2e2;   /* Light red */
  color: #991b1b;        /* Dark red text */
}

/* Grey badge - neutral/pending status */
.badge-grey  { 
  background: #f3f4f6;   /* Light grey */
  color: #6b7280;        /* Dark grey text */
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  15. TAB BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Tab bar container */
.tab-bar { 
  display: flex; 
  gap: 4px;                              /* Minimal spacing between tabs */
  margin-bottom: 20px; 
}

/* Individual tab button */
.tab {
  padding: 8px 20px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* Active tab or hover state */
.tab.active, 
.tab:hover { 
  background: var(--brown-dark);         /* Dark background */
  color: #fff;                           /* White text */
  border-color: var(--brown-dark); 
}

/* Admin theme active tab */
.admin-theme .tab.active, 
.admin-theme .tab:hover { 
  background: var(--admin-accent);       /* Indigo for admin */
  border-color: var(--admin-accent); 
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  16. PROFILE DETAILS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Profile avatar circle */
.profile-avatar {
  width: 72px; 
  height: 72px;
  border-radius: 50%;
  background: var(--brown-dark);
  color: var(--amber-light);
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  display: flex; 
  align-items: center; 
  justify-content: center;
  margin: 0 auto 28px;  /* Centered */
}

/* Profile detail row - label + value side-by-side */
.profile-detail-row {
  display: flex;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  gap: 20px;
}

/* Last detail row - no bottom border */
.profile-detail-row:last-of-type { 
  border-bottom: none; 
}

/* Detail label - fixed width */
.detail-label { 
  flex-shrink: 0; 
  width: 90px; 
  font-size: 0.78rem; 
  text-transform: uppercase; 
  letter-spacing: 0.4px; 
  color: var(--muted); 
  padding-top: 2px; 
}

/* Detail value text */
.detail-value { 
  color: var(--brown-dark); 
  font-size: 0.95rem; 
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  17. INLINE FORMS (Admin Section)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Inline form - two-column grid layout */
.inline-form { 
  display: grid; 
  grid-template-columns: 1fr 1fr;        /* Two equal columns */
  gap: 16px; 
}

/* Form groups in inline form - no margin */
.inline-form .form-group { 
  margin-bottom: 0; 
}

/* Button in inline form - spans both columns */
.inline-form button { 
  grid-column: 1 / -1; 
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  18. SMALL BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Small compact button style */
.btn-small {
  padding: 5px 12px;
  border: none;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

/* Small button hover - fade out effect */
.btn-small:hover { 
  opacity: 0.85; 
}

/* Return action button - green */
.btn-return     { 
  background: #d1fae5;   /* Light green */
  color: #065f46; 
}

/* Danger action button - red */
.btn-danger-sm  { 
  background: #fee2e2;   /* Light red */
  color: #991b1b; 
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  19. EMPTY STATE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* Empty state message - for pages with no data */
.empty-hint { 
  color: var(--muted); 
  font-size: 0.9rem; 
  text-align: center; 
  padding: 28px 0; 
}

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  20. RESPONSIVE DESIGN (Mobile)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
@media (max-width: 768px) {
  /* Hide sidebar on mobile auth pages */
  .auth-sidebar { 
    display: none; 
  }
  
  /* Adjust auth form container padding */
  .auth-form-side { 
    padding: 32px 20px; 
  }
  
  /* Reduce auth card padding on mobile */
  .auth-card { 
    padding: 32px 24px; 
  }
  
  /* Reduce navbar padding */
  .navbar { 
    padding: 0 20px; 
  }
  
  /* Reduce main app padding */
  .app-main { 
    padding: 24px 16px 60px; 
  }
  
  /* Single column for inline forms */
  .inline-form { 
    grid-template-columns: 1fr; 
  }
  
  /* Smaller font in tables */
  .data-table { 
    font-size: 0.78rem; 
  }
  
  /* Tighter table cell padding */
  .data-table th, 
  .data-table td { 
    padding: 8px 8px; 
  }
}