@font-face{font-family:'YekanBakh';src:url('../../fonts/YekanBakh.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
/* Base layout overrides */
html, body { height: 100%; }
body { margin: 0; background: #0f172a; color: #0b1220; font-family: 'YekanBakh', Tahoma, 'Segoe UI', Arial, sans-serif; }
/* Ensure form controls and buttons use YekanBakh */
button, input, select, textarea { font-family: 'YekanBakh', Tahoma, 'Segoe UI', Arial, sans-serif !important; }

/************************
* Editor Layout
************************/
.editor-root { display: grid; grid-template-columns: 260px 1fr 320px; grid-template-rows: 56px 1fr; grid-template-areas: 'topbar topbar topbar' 'sidebar stage inspector'; height: 100vh; }
.topbar { grid-area: topbar; position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border-bottom: 1px solid #e5e7eb; }
.sidebar { grid-area: sidebar; background: #0b1220; color: #cbd5e1; border-right: 1px solid #1f2937; overflow: hidden; display: flex; flex-direction: column; }
.sidebar .menu { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sidebar .menu .tool-button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; cursor: pointer; }
.sidebar .menu .tool-button:hover { background: #111827; }
.sidebar .thumbs { flex: 1; overflow: auto; border-top: 1px solid #1f2937; padding: 8px; }
.sidebar .thumb { background: #111827; border: 1px solid #334155; border-radius: 8px; padding: 8px; margin-bottom: 8px; color:#94a3b8; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.sidebar .thumb.active { border-color: #6366f1; }

.stage-wrap { grid-area: stage; display: flex; flex-direction: column; height: calc(100vh - 56px); }
.stage-host { flex: 1; display: flex; align-items: center; justify-content: center; background: #0b1220; }
#stage { position: relative; box-shadow: 0 10px 25px rgba(0,0,0,.45); border: 1px solid #1f2937; border-radius: 10px; overflow: hidden; }
#pdf-canvas { position: absolute; left: 0; top: 0; background: #ffffff; z-index: 0; }
#svg-layer { position: absolute; left: 0; top: 0; z-index: 0; }
#overlay-canvas { position: absolute; left: 0; top: 0; z-index: 2; }

/* pdf.js text layer for better Persian shaping */
.textLayer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1; }
.textLayer span { position: absolute; white-space: pre; transform-origin: 0% 0%; line-height: 1; color: rgba(0,0,0,.95); font-family: 'YekanBakh', Tahoma, 'Segoe UI', Arial, sans-serif; }
.textLayer .endOfContent { display: none; }
.textLayer .highlight { background: rgba(180,0,170,.15); }

.tool-button { padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #e5e7eb; background: #ffffff; color: #1f2937; cursor: pointer; transition: background 0.15s ease-in-out; font-family: 'YekanBakh', Tahoma, 'Segoe UI', Arial, sans-serif !important; }
.tool-button:hover { background: #f9fafb; }

/* Fabric.js stacking and positioning to keep interactions above PDF */
.canvas-container { position: absolute !important; left: 0; top: 0; }
.canvas-container canvas.lower-canvas { z-index: 2 !important; }
.canvas-container canvas.upper-canvas { z-index: 3 !important; }

/************************
 * Inspector
 ************************/
.inspector { grid-area: inspector; background: #f8fafc; border-left: 1px solid #e5e7eb; overflow: auto; }
.inspector .panel { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.inspector .row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.inspector .prop-input { flex: 1 1 auto; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; background: #ffffff; color: #0f172a; }
.inspector .prop-readonly { padding: 6px 0; font-size: 13px; color: #0f172a; }
.inspector .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }

/************************
 * Dashboard / Admin Area
 ************************/
/* Gradient jelly background for admin page */
body.admin-page { 
  min-height: 100vh;
  background: radial-gradient(1200px 800px at 15% 15%, rgba(124, 58, 237, 0.22), transparent 60%),
              radial-gradient(1000px 700px at 85% 25%, rgba(16, 185, 129, 0.22), transparent 60%),
              linear-gradient(135deg, #0b1220 0%, #0f172a 100%);
  color: #e2e8f0; /* Universal readable text color for dark backgrounds */
}

body.admin-page b, body.admin-page strong { color: #ffffff; } /* Make bold text stand out */

/* Glass admin card container */
.admin-card { 
  max-width: 1100px; 
  margin: 32px auto; 
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px; 
  overflow: hidden; 
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  backdrop-filter: blur(14px) saturate(140%);
}
.admin-card-header { 
  display: flex; align-items: center; gap: 12px; 
  padding: 16px 20px; 
  border-bottom: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  color: #e2e8f0;
}
.admin-card-body { padding: 16px 20px; color: #cbd5e1; } /* Lighter base color for readability */
.admin-card-body div { color: #cbd5e1; } /* Ensure all divs inherit the color */
.admin-card-body b { color: #ffffff; } /* Make bold text stand out more */


/* Glass white table inside admin */
.admin-page .table { 
  width: 100%; 
  border-collapse: separate; 
  border-spacing: 0; 
  background: rgba(255,255,255,0.58); 
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 12px; 
  overflow: hidden;
}
.admin-page .table thead th { 
  background: rgba(255,255,255,0.70); 
  color: #0b1220; 
  font-weight: 600; 
}
.admin-page .table th, 
.admin-page .table td { 
  padding: 12px 14px; 
  text-align: left; 
  border-bottom: 1px solid rgba(255,255,255,0.50);
  color: #0b1220; 
}
.admin-page .table tbody tr:nth-child(odd) { background: rgba(255,255,255,0.45); }
.admin-page .table tbody tr:hover { background: rgba(255,255,255,0.65); }
.admin-page .table tr:last-child td { border-bottom: none; }

/* Orange glass buttons in admin */
.admin-page .tool-button { 
  background: rgba(245, 158, 11, 0.55) !important; /* stronger orange */
  color: #ffffff !important; 
  border: 1px solid rgba(245, 158, 11, 0.85) !important; 
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 12px 24px -10px rgba(245, 158, 11, 0.6);
  text-decoration: none !important;
  }
  .admin-page .tool-button:hover { 
  background: rgba(245, 158, 11, 0.70) !important; 
  border-color: rgba(245, 158, 11, 1) !important; 
  text-decoration: none !important;
  }

/************************
 * Viewer / Preview
 ************************/
.viewer-root { height: 100vh; background: #0b1220; display:flex; align-items:center; justify-content:center; }
#preview-container, #viewer-container { width: 100%; height: 100%; }
.page-flip { width: 90vw; height: 90vh; margin:auto; }

/* Map container (viewer/preview) - Leaflet fills the div */
.map-container { width: 100%; height: 100%; min-height: 80px; }
.map-container .leaflet-pane { z-index: 1; }
.map-marker-icon-wrap { background: none !important; border: none !important; }

/* Voice player (viewer/preview) */
.voice-item{ background: rgba(15,23,42,0.78) !important; border: 1px solid rgba(148,163,184,0.35) !important; color:#e2e8f0 !important; backdrop-filter: blur(10px) saturate(140%); }
.voice-item .voice-icon{ width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(99,102,241,0.22);border:1px solid rgba(99,102,241,0.35);color:#c7d2fe;font-size:18px;flex:0 0 auto; }
.voice-item .voice-title{ font-size:12px; color:#cbd5e1; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.voice-item audio.voice-audio{ width:100%; height:34px; filter: invert(1) hue-rotate(180deg) saturate(1.2); opacity:0.95; }

/* Utility */
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-4 { margin-bottom: 1rem; }
.btn-primary { background: #4f46e5; color: #fff; border: 1px solid #4338ca; padding: 8px 12px; border-radius: 8px; }
.btn-secondary { background: #e5e7eb; color: #111827; border: 1px solid #d1d5db; padding: 8px 12px; border-radius: 8px; }

/************************
 * Modal Preview
 ************************/
.modal-root { position: fixed; inset: 0; z-index: 9999; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.modal-dialog { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; transform: none; background: #0b1220; border: 0; border-radius: 0; overflow: hidden; box-shadow: none; }
.modal-dialog iframe { width: 100%; height: 100%; border: 0; display: block; background: #0b1220; }
.modal-close { position: absolute; right: 10px; top: 10px; z-index: 1; background: rgba(15,23,42,.8); color: #fff; border: 1px solid #334155; width: 36px; height: 36px; border-radius: 9999px; cursor: pointer; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: rgba(15,23,42,.95); }

/************************
* Plan page specific styles
************************/
.content-box { padding: 15px; border: 1px solid rgba(148,163,184,0.35); background: rgba(148,163,184,0.06); border-radius: 10px; }
.content-box h2 { margin-top:0; color: #ffffff; }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.plan-card { background: rgba(15, 23, 42, 0.5); border: 1px solid #334155; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; }
.plan-card h3 { margin: 0 0 8px 0; color: #e2e8f0; }
.plan-price { font-size: 24px; font-weight: bold; color: #ffffff; margin-bottom: 4px; }
.plan-days { color: #94a3b8; margin-bottom: 16px; }
.plan-features { list-style: none; padding: 0; margin: 0 0 16px 0; flex-grow: 1; color: #cbd5e1; }
.plan-features li { margin-bottom: 8px; position: relative; padding-right: 20px; }
.plan-features li::before { content: '\2713'; color: #34d399; position: absolute; right: 0; }