/* Basic styles for the modal overlay and content (kept for now, if any other modals are added) */
.modal-overlay {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50; /* Ensure it's on top of other content */
}
.modal-content {
  /* These are placeholder values now, overridden below for profile modal */
  background-color: white;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 500px;
  position: relative;
}

/* General Body and Layout */
body {
    font-family: "Public Sans", "Noto Sans", sans-serif; /* Set primary font */
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    color: #333; 
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Theme specific styles */
body.dark-theme {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

body.dark-theme h2,
body.dark-theme .book-title {
    color: #f9f9f9;
}

/* Ensure the theme toggle icon is visible in dark mode */
body.dark-theme .text-\[\#141414\] {
    color: #e0e0e0;
}

/* Profile icon color inversion for dark theme */
body.dark-theme #profile-icon img {
    filter: invert(100%); /* Makes black images white */
}


body.dark-theme [class*="text-[#757575]"],
body.dark-theme [class*="placeholder:text-[#757575]"],
body.dark-theme .text-gray-600,
body.dark-theme .text-gray-500,
body.dark-theme .text-gray-700 {
    color: #b0b0b0; /* Lighter grey for readability in dark mode */
}

body.dark-theme .bg-white {
    background-color: #2a2a2a; /* Darker background for main container */
}

body.dark-theme .bg-\[\#f2f2f2\],
body.dark-theme .form-input {
    background-color: #3a3a3a; /* Darker input and search background */
    color: #e0e0e0;
    border-color: #555;
}

body.dark-theme .auth-button, /* These specific classes might not be used now, but kept for general theme */
body.dark-theme .bg-\[#141414\] {
    background-color: #4a4a4a; /* Darker buttons */
    border-color: #666;
}

body.dark-theme .hover\:bg-\[#141414\]:hover {
    background-color: #666; /* Hover effect for buttons */
}

/* No specific .book-card styles as per request for a minimal look (no background/border) */

/* Removed .download-button custom CSS rules, using Tailwind directly */

/* Modal overlay styles */
#profile-modal { /* Targeting the specific modal overlay */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* The background color and z-index are already applied via Tailwind in HTML */
    /* Remove redundant background-color: transparent and explicit z-index here */
    /* Also remove width: auto; height: auto; which contradict inset-0 */
}

/* Profile Modal Content (the actual card) Styles */
#profile-modal > div { /* This targets the direct child div of #profile-modal which is the modal card itself */
    position: absolute; /* Position absolutely within its fixed parent overlay */
    top: 52px; /* Set top relative to the viewport/parent overlay */
    right: 10px; /* Set right relative to the viewport/parent overlay */
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white for light theme */
    padding: 2rem;
    border-radius: 1.5rem; /* More rounded edges */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 300px; /* Make it narrower for a card */
    /* Removed margin-left: auto; as absolute positioning dictates placement */
    color: #141414; /* Default text color in modal */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

body.dark-theme #profile-modal > div {
    background-color: rgba(42, 42, 42, 0.95); /* Slightly transparent dark grey for dark theme, increased opacity */
    color: #e0e0e0; /* Light text color in dark theme modal */
}

/* General modal content styles, if they apply to other potential modals */
body.dark-theme .modal-content label {
    color: #e0e0e0;
}

body.dark-theme .modal-content input,
body.dark-theme .modal-content textarea {
    background-color: #3a3a3a;
    border-color: #555;
    color: #e0e0e0;
}

body.dark-theme .modal-content button[type="button"] { /* Cancel button */
    background-color: #4a4a4a;
    border-color: #666;
    color: #e0e0e0;
}

body.dark-theme .modal-content button[type="button"]:hover {
    background-color: #5a5a5a;
}

body.dark-theme .modal-content button[type="submit"] { /* Upload button */
    background-color: #555;
    border-color: #666;
}

body.dark-theme .modal-content button[type="submit"]:hover {
    background-color: #666;
}

/* Custom style for the image container background to blend with theme */
.book-image-container {
  background-color: #e8e8e8; /* Default light background for blending */
}

body.dark-theme .book-image-container {
  background-color: #333333; /* Dark background for blending */
}