/*
 * pdfeditor.css - Reconstructed and enhanced styles
 *
 * This stylesheet is designed to create an aesthetic, modern, and
 * user-friendly interface for the PDF Editing Dashboard.
 *
 * Key changes and additions:
 * - A more organized and visually appealing layout for the dashboard card.
 * - Improved spacing and alignment for all button groups and controls.
 * - An exclusive, styled container for the PDF viewer.
 * - Modern color palette and typography for a professional look.
 * - Enhancements to interactive elements like buttons and modals.
 *
 */

/* ==========================================================================
   Base & Typography - Keeping your specified styles.
   ========================================================================== */
body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #fdfdfd;
  margin: 0;
  color: #333;
}

header {
  background-color: #2f2f2f;
  color: white;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 4px solid #ce7e00;
}

h1 {
  font-family: 'Cambria', serif;
}

nav {
  display: flex;
  gap: 1rem;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.nav-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-buttons a {
  background-color: #f3f6f4;
  color: #000;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-buttons a:hover {
  background-color: #5cc057;
  color: #fff;
}

.nav-buttons a.active {
  background-color: #5cc057;
  color: #fff;
}

/* ==========================================================================
   Main Layout
   ========================================================================== */

.main-container {
  flex-grow: 1;
  /* Updated max-width for a wider, more modern layout */
  max-width: 1280px; 
  margin: 0 auto;
  padding: 2rem 1rem;
  display: grid;
  /* Use CSS Grid for a more structured layout */
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* On larger screens, the controls and PDF viewer will be side-by-side */
@media (min-width: 1024px) {
  .main-container {
    grid-template-columns: 1fr 2fr;
    padding: 2rem;
  }
}

/* ==========================================================================
   Dashboard Card & Controls
   ========================================================================== */

.dashboard-card {
  background-color: #fff;
  border-radius: 16px; /* A softer, more modern border-radius */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* A more subtle shadow */
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Consistent spacing between sections */
  height: fit-content;
}

.dashboard-title {
  font-size: 1.75rem; /* Larger, more prominent title */
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
  color: #1a202c;
  font-family: 'Cambria', serif;
}

.dashboard-description {
  text-align: center;
  color: #6b7280; /* A slightly darker gray for better readability */
  margin-bottom: 0.5rem;
}

/* This is the new, more organized layout for button groups */
.button-group {
  display: flex;
  flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0;
}

/* ==========================================================================
   Input & Button Styles
   ========================================================================== */

.button-label {
  cursor: pointer;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); /* Lighter shadow for a cleaner look */
}

.button-label:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.upload-pdf-btn {
  background-color: #4CAF50; /* A more vibrant green */
  color: #fff;
}

.upload-pdf-btn:hover {
  background-color: #45a049;
}

.upload-image-btn {
  background-color: #2196F3; /* A vibrant blue */
  color: #fff;
}

.upload-image-btn:hover {
  background-color: #0b7dda;
}

.input-text {
  flex-grow: 1;
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 8px; /* Slightly more rounded corners */
  outline: none;
  transition: all 0.2s ease;
  font-size: 1rem;
  min-width: 150px;
}

.input-text:focus {
  border-color: #2196F3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
}

.select-font-size {
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
}

.add-text-btn {
  background-color: #673AB7; /* A deep purple */
  color: #fff;
}

.add-text-btn:hover {
  background-color: #5e35b1;
}

.add-image-btn {
  background-color: #009688; /* A teal blue */
  color: #fff;
}

.add-image-btn:hover {
  background-color: #00796B;
}

.delete-btn {
  background-color: #F44336; /* A strong red */
  color: #fff;
}

.delete-btn:hover {
  background-color: #d32f2f;
}

.export-btn {
  background-color: #FF9800; /* A bright orange */
  color: #fff;
}

.export-btn:hover {
  background-color: #fb8c00;
}

.convert-btn {
  background-color: #FFEB3B; /* A vibrant yellow */
  color: #333; /* Dark text for contrast */
}

.convert-btn:hover {
  background-color: #fdd835;
}

.print-btn {
  background-color: #78909C; /* A cool gray */
  color: #fff;
}

.print-btn:hover {
  background-color: #607d8b;
}

/* Reset Editor Button */
#reset-editor-btn {
  background-color: #FFC107;
  color: #333;
}

#reset-editor-btn:hover {
  background-color: #ffb300;
}

/* ==========================================================================
   PDF Viewer Area - The exclusive space for the PDF
   ========================================================================== */

#pdf-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* This container will have a distinct background to separate it */
  background-color: #f0f4f8; 
  padding: 2rem 1rem;
  border-radius: 16px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05); /* Subtle inner shadow */
  min-height: 80vh; /* Ensure it takes up significant vertical space */
  overflow-y: auto; /* Allow scrolling if the PDF is long */
}

.pdf-page-container {
  position: relative;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: crosshair;
  background-color: #fff; /* White background for the page itself */
  border-radius: 8px; /* Rounded corners for each page container */
  overflow: hidden;
}

.pdf-page-container:hover {
  transform: scale(1.01);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Modal & Message Box
   ========================================================================== */

#message-box {
  z-index: 1000;
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#convert-modal h3 {
  font-family: 'Cambria', serif;
  color: #1a202c;
  font-size: 1.5rem;
}

#page-select-container {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0.5rem;
}

#page-select-container label {
  background-color: #f5f5f5;
  border: none;
  border-radius: 6px;
  margin-bottom: 0.4rem;
  padding: 0.6rem;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#page-select-container label:hover {
  background-color: #e0e0e0;
}

#convert-modal button {
  font-family: 'Segoe UI', sans-serif;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#convert-modal button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  text-align: center;
  padding: 1rem;
  background-color: #333;
  color: white;
}