/* ==========================================================================
   Truva Property Flyer Generator - Styling
   ========================================================================== */

/* Design Tokens & Theme Variables */
:root {
  /* Editor Theme (Dark/Glassmorphic) */
  --bg-editor: #0f172a;
  --bg-editor-card: rgba(30, 41, 59, 0.7);
  --border-editor: rgba(255, 255, 255, 0.1);
  --text-editor-primary: #f8fafc;
  --text-editor-secondary: #94a3b8;
  --accent-editor: #6366f1;
  --accent-editor-hover: #4f46e5;
  
  /* Document Brand Theme (Truva Aesthetics) */
  --truva-orange: #ff4e00;
  --truva-orange-hover: #e04400;
  --truva-gray-dark: #626262;
  --truva-gray-light: #f7f7f7;
  --truva-border: #dcdcdc;
  --truva-text-main: #2b2b2b;
  --truva-text-light: #666666;
  
  /* Layout sizes */
  --preview-width: 800px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #090d16;
  color: var(--text-editor-primary);
  overflow-x: hidden;
  height: 100vh;
}

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

.app-container {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* Sidebar / Editor Panel */
.editor-panel {
  width: 450px;
  min-width: 400px;
  background-color: var(--bg-editor);
  border-right: 1px solid var(--border-editor);
  display: flex;
  flex-direction: column;
  height: 100%;
  z-index: 10;
  box-shadow: 10px 0 30px rgba(0,0,0,0.5);
  overflow: hidden;
}

.editor-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-editor);
  background: linear-gradient(135deg, #1e1b4b, #0f172a);
}

.editor-header h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.editor-header p {
  font-size: 12px;
  color: var(--text-editor-secondary);
  margin-top: 4px;
}

/* Scrollable controls area */
.editor-controls {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Styling Tabs */
.tab-container {
  display: flex;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-editor);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 10px;
}

.tab-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-editor-secondary);
  padding: 8px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-btn.active {
  background: var(--accent-editor);
  color: #fff;
}

/* Editor Section Cards */
.control-section {
  background: var(--bg-editor-card);
  border: 1px solid var(--border-editor);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(10px);
}

.control-section h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.control-group:last-child {
  margin-bottom: 0;
}

.control-group label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-editor-secondary);
}

input[type="text"],
input[type="number"],
input[type="url"],
select,
textarea {
  width: 100%;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border-editor);
  border-radius: 6px;
  padding: 10px 12px;
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-editor);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* Button styles */
.btn {
  background: var(--accent-editor);
  border: none;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn:hover {
  background: var(--accent-editor-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-editor);
  color: #fff;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-danger {
  background: #ef4444;
}

.btn-danger:hover {
  background: #dc2626;
}

.btn-success {
  background: #10b981;
}

.btn-success:hover {
  background: #059669;
}

.btn-small {
  padding: 6px 12px;
  font-size: 11px;
}

/* Screenshot Upload Area */
.screenshot-dropzone {
  position: relative;
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.4);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.screenshot-dropzone:hover {
  border-color: var(--accent-editor);
  background: rgba(99, 102, 241, 0.05);
}

.screenshot-dropzone svg {
  color: var(--text-editor-secondary);
}

.screenshot-dropzone span {
  font-size: 12px;
  color: var(--text-editor-secondary);
}

.screenshot-preview-thumb {
  width: 100%;
  max-height: 120px;
  object-fit: contain;
  border-radius: 4px;
  margin-top: 8px;
  border: 1px solid var(--border-editor);
}

/* ==========================================================================
   Document Preview Area (Right Side)
   ========================================================================== */

.preview-panel {
  flex: 1;
  background-color: #1e293b;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.preview-header {
  height: 60px;
  border-bottom: 1px solid var(--border-editor);
  background-color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
}

.preview-header-title {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-actions {
  display: flex;
  gap: 12px;
}

.preview-content {
  flex: 1;
  overflow-y: auto;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  scroll-behavior: smooth;
}

/* Virtual A4 Page Container */
.page-container {
  width: var(--preview-width);
  min-height: 1130px; /* A4 aspect ratio helper */
  background-color: #ffffff;
  color: var(--truva-text-main);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  position: relative;
  overflow: visible; /* changed from hidden to allow hover widgets to float outside */
  padding: 45px 45px 0 45px; /* bottom padding is handled by the sticky/relative footer */
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

/* ==========================================================================
   Truva Flyer Document Styles
   ========================================================================== */

/* Header - Template 1 */
.truva-doc-header {
  text-align: center;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.truva-logo-svg,
.truva-logo-image {
  height: 38px;
  width: auto;
  object-fit: contain;
  fill: var(--truva-orange);
  margin-bottom: 12px;
}

.truva-doc-header h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 26px;
  color: #3b3b3b;
  letter-spacing: -0.2px;
  margin-bottom: 12px;
}

.truva-header-line {
  width: 100%;
  border-top: 1px solid #eaeaea;
  margin-top: 10px;
}

/* Header - Template 2 (Full Image Banner) */
.truva-doc-header-banner {
  margin: -45px -45px 30px -45px; /* Pull to edges of page */
  height: 300px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 45px 35px 45px;
  color: #fff;
}

.banner-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
  pointer-events: none;
}

.banner-logo {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.banner-logo .truva-logo-svg,
.banner-logo .truva-logo-image {
  fill: #ffffff;
  height: 34px;
  width: auto;
  object-fit: contain;
}

.banner-logo-img {
  filter: brightness(0) invert(1);
}

.banner-titles {
  position: relative;
  z-index: 2;
  text-align: center;
}

.banner-titles p.subtitle-top {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.9);
}

.banner-titles h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* General Page Section Wrapper */
.doc-section {
  position: relative;
  margin-bottom: 26px;
}

/* Table styling */
.truva-table-container {
  position: relative;
  border-radius: 0px;
  margin-bottom: 26px;
}

.truva-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
}

/* Major Group Header (Orange) */
.truva-table th.table-main-header {
  background-color: var(--truva-orange);
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 700;
  padding: 12px;
  border: 1px solid var(--truva-orange);
  text-align: center;
}

/* Column Header Row */
.truva-table tr.column-headers th {
  background-color: var(--truva-gray-light);
  color: var(--truva-gray-dark);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 8px;
  border: 1px solid var(--truva-border);
  text-align: center;
}

/* Section Divider Row (Dark Gray) */
.truva-table tr.section-divider td {
  background-color: var(--truva-gray-dark);
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 10px;
  border: 1px solid var(--truva-gray-dark);
  text-align: center;
}

/* Standard Content Row */
.truva-table td {
  padding: 11px 8px;
  border: 1px solid var(--truva-border);
  text-align: center;
  color: var(--truva-text-main);
  font-weight: 500;
}

/* Sub-text under table */
.table-footer-note {
  font-size: 11px;
  color: var(--truva-text-light);
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}

/* Dotted Line Separator */
.dotted-separator {
  border-top: 2px dotted #e0e0e0;
  margin: 25px 0;
  width: 100%;
}

/* 2% Brokerage Ribbon Overlay using postage stamp image asset */
.brokerage-badge {
  position: absolute;
  top: -24px;
  right: -24px;
  width: 76px;
  height: 90px;
  z-index: 5;
  transform: rotate(8deg);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
.brokerage-badge img {
  /* width-only sizing: html2canvas ignores object-fit, so never rely on it */
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Amenities Grid Layout (Template 1)
   ========================================================================== */

.amenities-grid-t1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: var(--truva-border);
  border: 1px solid var(--truva-border);
  margin-top: 1px;
}

.amenity-cell-t1 {
  background-color: #ffffff;
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--truva-text-main);
  text-align: center;
}

.amenity-cell-t1 svg {
  color: var(--truva-gray-dark);
  flex-shrink: 0;
}

/* ==========================================================================
   Amenities Layout (Template 2 - Grid & Pictures)
   ========================================================================== */

.amenities-container-t2 {
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  gap: 15px;
  margin-top: 15px;
  min-height: 280px;
}

/* Stack of photos on left/right side */
.amenities-photos-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.amenities-photo-wrapper {
  flex: 1;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--truva-border);
  background-color: #f3f4f6;
  min-height: 120px;
}

.amenities-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.amenities-photo-wrapper:hover .photo-upload-overlay {
  opacity: 1;
}

/* Middle text card */
.amenities-text-card {
  border: 1px solid var(--truva-border);
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  justify-content: center;
}

.amenities-text-card h3 {
  font-family: 'Poppins', sans-serif;
  color: var(--truva-orange);
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 12px;
  text-align: center;
}

.amenities-list-t2 {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 10px;
}

.amenities-list-t2 li {
  font-size: 12px;
  font-weight: 500;
  color: var(--truva-text-light);
  position: relative;
  padding-left: 14px;
}

.amenities-list-t2 li::before {
  content: "•";
  color: var(--truva-orange);
  font-size: 14px;
  position: absolute;
  left: 0;
  top: -2px;
}

/* ==========================================================================
   Footer - Banner & Scan Code
   ========================================================================== */

.truva-footer {
  margin-top: auto; /* Push to bottom of flex page */
  padding-bottom: 40px; /* buffer at the absolute bottom */
}

.footer-banner-container {
  background-color: var(--truva-orange);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 35px;
  position: relative;
  overflow: hidden;
  color: #ffffff;
}

.footer-text-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-text-block h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.footer-btn {
  background-color: #ffffff;
  color: var(--truva-text-main);
  border: 1px solid #ffffff;
  padding: 8px 18px;
  font-size: 11px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  align-self: flex-start;
  transition: all 0.2s ease;
}

.footer-btn svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

/* QR Code Block */
.qr-code-box {
  background-color: #ffffff;
  border: 2px solid #ffffff;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  width: 96px;
  height: 96px;
}

.qr-code-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Center icon overlay in QR code */
.qr-center-logo {
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-center-logo svg {
  fill: var(--truva-orange);
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Inline Interactive Editor elements (overlays in preview mode)
   ========================================================================== */

.editable-cell {
  position: relative;
  outline: none;
  cursor: text;
  min-width: 20px;
  min-height: 15px;
}

.editable-cell:hover {
  background-color: rgba(255, 78, 0, 0.05);
  box-shadow: 0 0 0 1px rgba(255, 78, 0, 0.3);
}

.editable-cell:focus {
  background-color: rgba(255, 78, 0, 0.1);
  box-shadow: 0 0 0 1.5px var(--truva-orange);
}

/* ==========================================================================
   Modals & Settings Panel
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 23, 42, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(8px);
}

.modal-content {
  background-color: #1e293b;
  border: 1px solid var(--border-editor);
  border-radius: 16px;
  width: 500px;
  max-width: 90%;
  padding: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.modal-header h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-editor-secondary);
  cursor: pointer;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ==========================================================================
   Responsive adjustments
   ========================================================================== */

@media (max-width: 1280px) {
  .editor-panel {
    width: 380px;
    min-width: 380px;
  }
}

/* ==========================================================================
   Print Stylesheet
   ========================================================================== */

@media print {
  body {
    background-color: #ffffff !important;
    color: #000000 !important;
  }
  
  .editor-panel,
  .preview-header,
  .photo-upload-overlay {
    display: none !important;
  }
  
  .preview-panel {
    background-color: #ffffff !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  .preview-content {
    padding: 0 !important;
    overflow: visible !important;
    display: block !important;
  }
  
  .page-container {
    width: 210mm !important;
    height: 297mm !important;
    min-height: 297mm !important;
    max-height: 297mm !important;
    box-shadow: none !important;
    padding: 45px 45px 0 45px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    page-break-inside: avoid !important;
  }
  
  /* Pull banner margins if printing Template 2 */
  .truva-doc-header-banner {
    margin: 0 0 30px 0 !important;
    border-radius: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .truva-table th.table-main-header {
    background-color: var(--truva-orange) !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .truva-table tr.column-headers th {
    background-color: var(--truva-gray-light) !important;
    color: var(--truva-gray-dark) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .truva-table tr.section-divider td {
    background-color: var(--truva-gray-dark) !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  .amenity-cell-t1 {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  .brokerage-badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .footer-banner-container {
    background-color: var(--truva-orange) !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    position: relative !important;
    margin-top: auto !important;
  }

  .footer-btn {
    border-color: #ffffff !important;
    background-color: #ffffff !important;
    color: var(--truva-text-main) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Page break splitter */
.page-break {
  page-break-after: always;
  break-after: page;
}

/* Editor visual separator between pages */
.page-separator-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background-color: #0f172a;
  border: 1px dashed var(--accent-editor);
  color: var(--text-editor-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 10px 0;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  width: 100%;
}

.export-mode .page-separator-label,
.export-mode .page-break {
  display: none !important;
}

.page-container {
  margin-bottom: 12px;
}

.export-mode .page-container {
  width: 794px !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   WYSIWYG Direct Editor Overlays (Editor Mode only)
   ========================================================================== */

/* Hide editing UI in print and export modes */
@media print {
  .editor-only-ui,
  .row-action-panel,
  .col-action-btn,
  .table-header-controls,
  .section-insert-bar {
    display: none !important;
  }
}

.export-mode .editor-only-ui,
.export-mode .row-action-panel,
.export-mode .col-action-btn,
.export-mode .table-header-controls,
.export-mode .section-insert-bar {
  display: none !important;
}

/* Section Insert Bar (Dashed line with hover buttons between components) */
.section-insert-bar {
  height: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -10px 0;
  transition: all 0.2s ease;
  z-index: 10;
}

.section-insert-bar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed rgba(99, 102, 241, 0.4);
  opacity: 0;
  pointer-events: none;
}

.section-insert-bar:hover::before {
  opacity: 1;
}

.section-insert-buttons {
  display: none;
  gap: 8px;
  background-color: #0f172a;
  border: 1px solid var(--accent-editor);
  padding: 4px 8px;
  border-radius: 20px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.section-insert-bar:hover .section-insert-buttons {
  display: flex;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Table main controls wrapper */
.truva-table-container {
  position: relative;
}

/* Table Header Controls bar (appears floating above table header on hover) */
.table-header-controls {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background-color: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--accent-editor);
  border-radius: 6px;
  padding: 4px 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  z-index: 20;
}

.truva-table-container:hover .table-header-controls {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Column Header hover interactions */
.truva-table th {
  position: relative;
}

.col-action-container {
  position: absolute;
  top: -10px;
  right: -5px;
  display: none;
  gap: 2px;
  z-index: 15;
}

.truva-table th:hover .col-action-container {
  display: flex;
}

.col-action-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #0f172a;
  border: 1px solid var(--accent-editor);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  padding: 0;
}

.col-action-btn:hover {
  background-color: var(--accent-editor);
  transform: scale(1.1);
}

.col-action-btn.delete {
  border-color: #ef4444;
}

.col-action-btn.delete:hover {
  background-color: #ef4444;
}

/* Row Hover Action Panels (appears to the right of each row) */
.truva-table tr {
  position: relative;
}

.row-action-panel {
  position: absolute;
  right: -95px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  display: flex;
  gap: 3px;
  background-color: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--border-editor);
  padding: 3px 5px;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 10;
}

.truva-table tr:hover .row-action-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* Quick inline add row below table */
.table-bottom-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.truva-table-container:hover .table-bottom-actions {
  opacity: 1;
}

/* Simple visual helpers for buttons inside document */
.doc-action-btn {
  background: var(--accent-editor);
  border: none;
  color: #fff;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.15s ease;
}

.doc-action-btn:hover {
  background: var(--accent-editor-hover);
  transform: scale(1.05);
}

.doc-action-btn.danger {
  background: #ef4444;
}

.doc-action-btn.danger:hover {
  background: #dc2626;
}

.doc-action-btn.secondary {
  background: #475569;
}

.doc-action-btn.secondary:hover {
  background: #334155;
}

.doc-action-btn.success {
  background: #10b981;
}

.doc-action-btn.success:hover {
  background: #059669;
}

/* Gray header override style */
.truva-table th.table-main-header.header-gray {
  background-color: var(--truva-gray-dark) !important;
  border-color: var(--truva-gray-dark) !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Page 1 amenities cell hover overlays */
.amenity-cell-t1 {
  position: relative;
}

.amenity-cell-t1:hover {
  background-color: #f8fafc;
}

.amenity-icon-click {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
  cursor: pointer;
}

.amenity-icon-click:hover {
  transform: scale(1.2);
  color: var(--truva-orange);
}

.export-mode .amenity-icon-click {
  pointer-events: none !important;
  cursor: default !important;
  transform: none !important;
}

/* Contenteditable empty placeholder support in editor mode */
[contentEditable]:empty::before {
  content: attr(placeholder);
  color: var(--truva-text-light);
  opacity: 0.5;
  font-style: italic;
}

.export-mode [contentEditable]:empty::before {
  display: none !important;
}

/* Page content wrapper for dynamic scaling to fit A4 height */
.page-content-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
}