/* Global CSS Variables */
:root {
  --heading-font: 'Bricolage Grotesque';
  --text-font: 'Open Sans', sans-serif; /* For editor content */
  --site-bg-color: #ffffff;
  --site-text-color: #333333; /* Default site text color */
  --toolbar-bg: #f8f9fa;
  --toolbar-border: #e9ecef;
  --toolbar-text: #343a40; /* Specific for toolbar text if needed, or inherit from site-text-color */
  --button-bg-color: #0d6efd;
  --button-text-color: #ffffff;
  --btn-hover: #0b5ed7; /* Keep for hover, or derive from button-bg-color */
  --editor-max-width: 600px;
  --heading-max-width: 600px;
  --text-max-width: 600px;
  --button-max-width: 600px;

  --fyne-body-font: 'Noto Sans', sans-serif;
  --fyne-heading-font: 'Bricolage Grotesque', sans-serif;
  
  --fyne-text: rgba(0, 0, 0, 0.9);
  --fyne-text-light: rgba(0, 0, 0, 0.6);
  
  --fyne-primary: #EE512F;
  --fyne-level-1: #EE512F14;
  --fyne-shadow: #FF7878;
  --fyne-stroke: #EE512F33;
  --fyne-overlay: #FFFFFFD9;
  --fyne-empty: #ffffff00;

  --fyne-body: #ffffff;
  --fyne-elevate: #fcf0ed;

  --fyne-overlay-br: 12px;
  --fyne-transition-cubic: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --swal2-background: var(--fyne-panel);
  --swal2-border-radius: var(--fyne-overlay-br);
  --swal2-input-border: var(--fyne-stroke);
  --swal2-input-background: var(--fyne-level-1);
  --swal2-input-focus-border: var(--fyne-primary);
  --swal2-input-border-radius: var(--fyne-overlay-br);
  --swal2-color: var(--fyne-text-light);

  --fyne-primary-hover: rgba(255, 255, 255, 0.5);
  --fyne-primary-elevate: rgba(233, 70, 52, 0.04);
  --fyne-primary-selection: #EE512F33;
}

* {
  box-sizing: border-box;
}

/* Base Styles */
html, body {
  height: 100%;
}

body {
  font-family: var(--fyne-body-font); /* Default UI font */
  margin: 0;
  padding: 0;
  background-color: var(--fyne-body);
  transition: var(--fyne-transition-cubic);
}

.site-preview {
  color: var(--site-text-color);
  background-color: var(--site-bg-color);
  height: calc(100vh - 16px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--fyne-overlay-br);
  filter: drop-shadow(0px 0px 8px #D1D1D1);
}


h1, h2, h3, h4, h5, h6 {
  font-family: var(--fyne-heading-font);
  color: var(--fyne-text) !important;
}

/* Logo and Primary Actions Bar */
.logo-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 16px 12px;
}

.app-logo {
  position: relative; /* This is the container for the dropdown */
  cursor: pointer;
  display: flex;
  align-items: center;
}

.logo-dropdown {
  visibility: hidden; /* Hidden by default */
  opacity: 0;
  position: absolute;
  top: 100%; /* Position it right below the logo */
  left: 0;
  min-width: 180px;
  padding: 8px;
  z-index: 1001; /* Ensure it's above other panel content */

  border: 1px solid var(--fyne-border);
  border-radius: var(--fyne-overlay-br);
  box-shadow: 0px 4px 12px #FF78781A !important;
  
  transform: translateY(10px);
  transition: var(--fyne-transition-cubic);
}

.app-logo:hover .logo-dropdown {
  visibility: visible; /* Show on hover */
  opacity: 1;
  transform: translateY(0);
}

.logo-dropdown a {
  display: block;
  padding: 10px 12px;
  color: var(--fyne-text);
  text-decoration: none;
  border-radius: 6px;
  font-family: var(--fyne-heading-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  transition: var(--fyne-transition-cubic);
}

.logo-dropdown a:hover {
  background-color: var(--fyne-level-1);
}

.primary-actions {
  display: flex;
  align-items: center;
  margin-right: -8px;
}

/* Site Status and Settings Bar */
.site-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 12px; /* Vertical padding */
  background-color: var(--fyne-level-1);
  padding: 8px;
  border-radius: var(--fyne-overlay-br);
}

.status-indicator-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #ccc; /* Default/neutral color */
  margin-right: 8px;
  flex-shrink: 0; /* Prevent shrinking */
  cursor:pointer;
}

.status-indicator-dot.unsaved {
  background-color: #ffc107; /* Yellow for unsaved */
}

.status-indicator-dot.saved {
  background-color: #28a745; /* Green for saved */
}

.p-grp-heading {
  color: var(--fyne-text);
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px; /* Space before settings button */

  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

.site-settings-btn {
  /* Styles from .toolbar-btn and .icon-btn should apply */
  /* Add specific tweaks if needed */
  margin-left: auto; /* Pushes it to the right if .p-grp-heading doesn't fill all space */
}

/* Left Panel Styles (was Toolbar) */
.left-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px; /* Fixed width for the left panel */
  height: 100vh; /* Full viewport height */
  background-color: var(--fyne-body);
  display: flex;
  flex-direction: column; /* Stack groups vertically */
  align-items: stretch; /* Stretch groups to full width */
  overflow-y: auto; /* Allow scrolling if content overflows */
  transform: translateX(0); /* Initial state for large screens */
  transition: var(--fyne-transition-cubic);
}

.p-grp {
  padding: 12px 16px !important; 
}

.page-group {
  padding: 8px 16px 20px; 
  box-shadow: 0px 8px 8px rgba(255, 120, 120, 0.1);
}

.bottom-grp {
  box-shadow: 0px -8px 8px rgba(255, 120, 120, 0.1);
}


.toolbar-group {
  display: flex;
  flex-direction: column; /* Stack items in a group vertically */
  align-items: stretch; /* Stretch items to full width */
  width: 100%;
}

.toolbar-group .toolbar-btn,
.toolbar-group .select-container,
.toolbar-group .color-container {
  width: 100%; /* Make buttons and containers take full width */
}

.toolbar-btn {
  display: flex;
  padding: 8px; /* Adjusted padding for icon buttons */
  background-color: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: var(--fyne-transition-cubic);
  margin: -8px 0px;
}


.toolbar-btn:hover {
  transform: scale(1.02);
  box-shadow: inset 0px 0px 1px -4px #FCD1D1;
  background-color: var(--fyne-level-1);
}

.primary-btn,
.swal2-confirm,
.swal2-cancel {
  /* Lead */

  /* Auto layout */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 16px !important;
  gap: 12px;

  border: none !important;
  background: var(--fyne-primary) !important;

  border-radius: 8px !important;
  color: #ffffff !important;

  font-family: var(--fyne-heading-font) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 16px !important;

  cursor: pointer;
  transition: var(--fyne-transition-cubic);
  box-shadow: inset 0px 0px 1px -4px #FCD1D1;
}

.swal2-cancel {
  background: transparent !important;
  border: 1px solid var(--fyne-stroke) !important;
  color: var(--fyne-primary) !important;
}

.primary-btn:hover,
.swal2-confirm:hover {
  transform: scale(1.04);
}

.swal2-cancel:hover {
  transform: scale(1.04);
}

.primary-btn {
/* Lead */

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px 16px;
gap: 12px;
width: 100%;

border:none;
background: var(--fyne-primary);

border-radius: 8px;
color: #ffffff;

font-family: 'Bricolage Grotesque';
font-weight: 500;
font-size: 15px;
line-height: 16px;

cursor: pointer;
transition: var(--fyne-transition-cubic);
box-shadow: inset 0px 0px 1px -4px #FCD1D1;


}

.primary-btn:hover {
  /* transform: scale(1) translateY(-1px); */

/* box-shadow: inset 0 -12px 16px 0 hsla(0, 0%, 100%, .06), 0 40px 24px 0 rgba(0, 0, 0, .02), 0 23px 14px 0 rgba(0, 0, 0, .02), 0 10px 10px 0 rgba(0, 0, 0, .03), 0 2px 4px 0 rgba(0, 0, 0, .03), 0 0 0 1px rgba(0, 0, 0, .05); */
  
transform: scale(1.02) translateY(-1px);

}


.select-container, .color-container, .page-container {
  display: flex;
  flex-direction: row; /* Stack label and select/input vertically */
  align-items: center; /* Align items to the start */
  margin-bottom: 8px; /* Adjusted margin */
  justify-content: space-between;
  max-height: 32px;
}

.select-container label, .color-container label, .page-container label {
  margin-right: 0; /* Remove right margin */
  font-size: 11.5px;
  line-height: 16px;
  color: var(--fyne-text-light);
  min-width: 72px;
  padding-left: 1px;
}

input[type="color"] {
  min-width: 44px;
  border: 1px solid var(--toolbar-border);
  border-radius: 4px;
  cursor: pointer;
}

.saving-indicator {
  font-size: 14px;
  margin-left: 10px;
  color: #6c757d;
  min-height: 20px;
}

/* Main Content Styles */
.main-content {
  margin-left: 260px; /* Space for the left panel */
  padding: 8px;
  padding-left: 2px;
  transition: var(--fyne-transition-cubic);
  width: calc(100% - 260px); /* Adjust width calculation if needed */
  box-sizing: border-box;
}
/* Editor Styles */

.ce-header {
  font-family: var(--heading-font);
}

.ce-paragraph .cdx-input, /* Common for paragraph text */
.ce-paragraph div[contenteditable="true"] /* Fallback if cdx-input isn't the direct text holder */
{
  font-family: var(--text-font);
}

/* Inline tool styles */
.fyne-highlight {
  color: var(--text-highlight-color);
}

.fyne-subtext {
  color: var(--subtext-color);
}

.editor-container {
  padding: 0; /* Padding is now on main-content */
  width: 100%;
  max-width: var(--editor-max-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.ce-block__content, 
.ce-toolbar__content {
  max-width: var(--editor-max-width);
}

.ce-header {
  font-family: var(--heading-font);
  /* line-height: 1.2; */
  max-width: var(--heading-max-width);
  margin-left: auto;
  margin-right: auto;
}

.ce-paragraph {
  font-family: var(--text-font);
  /* line-height: 1.5; */
  max-width: var(--text-max-width);
  margin-left: auto;
  margin-right: auto;
}

.ce-button {
  max-width: var(--button-max-width);
  margin-left: auto;
  margin-right: auto;
}

.cdx-block {
  margin-bottom: 15px;
}

/* Image Block Styles */
.image-tool img {
  max-width: 100%;
  height: auto;
}

/* Alignment Styles */
.ce-block--left-aligned {
  text-align: left;
}

.ce-block--center-aligned {
  text-align: center;
}

.ce-block--right-aligned {
  text-align: right;
}

/* Loading Spinner */
.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.spinner {
  border: 5px solid #f3f3f3;
  border-top: 5px solid var(--btn-primary);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hidden {
  display: none;
}

/* Drawer Toggle Button */
.drawer-toggle {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 1050; /* Above left panel when closed */
  background-color: var(--toolbar-bg);
  color: var(--toolbar-text);
  border: 1px solid var(--toolbar-border);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 20px;
  cursor: pointer;
  display: none; /* Hidden by default, shown on small screens */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Responsive Styles */
@media (max-width: 1080px) {
  .left-panel {
    transform: translateX(-100%); /* Hide panel off-screen */
    box-shadow: none; /* Hide shadow when off-screen, or adjust */
  }

  .left-panel.open {
    transform: translateX(0); /* Show panel */
    box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* Show shadow when open */
    z-index: 1000;
  }
  
  .main-content {
    margin-left: 0;
    width: 100%;
    padding-left: 8px;
  }

  .drawer-toggle {
    display: block;
  }
}

/* Styles for the Page Management toolbar group */
.page-management-group {
  flex-direction: row; /* Override the default column direction */
  align-items: center; /* Vertically align items in the center */
}

.page-management-group .select-container {
  flex-grow: 1; /* Allows the dropdown container to take available space */
  margin-right: 8px; /* Spacing between dropdown and first button */
  margin-top: 0; /* Reset vertical margin if inherited */
  margin-bottom: 0; /* Reset vertical margin if inherited */
}

.toolbar-btn.icon-btn {
  width: auto !important; /* Override width: 100% from general .toolbar-group .toolbar-btn */
  padding: 8px; /* Consistent padding */
}

/* ID selector for high specificity to override class margins */
#addPageBtn{
  margin-right: -8px;
}

.page-management-group .select-container #pagesDropdown {
  width: 100%;
}

#recentFileNameDisplay {
  font-style: italic;
  font-size: 0.85em;
  color: #777;
  word-break: break-all;
}

/* Styling for Editor.js custom button block */
.custom-button-block.ce-button {
  background-color: var(--button-bg-color) !important; /* Attempt to override inline styles */
  color: var(--button-text-color) !important;
  /* Other button-specific styles like padding, border, border-radius, cursor should ideally be defined here too, 
     if not already handled by existing .ce-button or .custom-button-block styles from Editor.js or its plugins.
     For example, if the button tool doesn't set them: 
     padding: 10px 15px;
     border: 1px solid transparent; 
     border-radius: 4px;
     cursor: pointer;
     display: inline-block; 
     text-align: center; 
  */
}

.page-select, .font-select, .anim-select {
  /* Appearance and Sizing */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 100px;
  padding: 8px 32px 8px 10px; /* Top, Right, Bottom, Left */
  width: 100%;

  /* Custom Arrow and Background Color */
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.76754 6.76754C9.9628 6.57228 10.2803 6.57228 10.4755 6.76754C10.6705 6.96274 10.6705 7.27937 10.4755 7.47457L7.99996 9.94918L5.52535 7.47457C5.33009 7.27931 5.33009 6.9628 5.52535 6.76754C5.72061 6.57228 6.03712 6.57228 6.23238 6.76754L7.99996 8.53512L9.76754 6.76754Z' fill='black' fill-opacity='0.72'/%3E%3C/svg%3E");
  background-color: rgba(233, 71, 52, 0.08);
  background-repeat: no-repeat;
  background-position: right 6px center;

  /* Border and Font */
  border: none;
  box-shadow: inset 0px 0px 1px -4px #FCD1D1;
  border-radius: 8px;
  font-family: 'Bricolage Grotesque';
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
}

.page-select:focus, .font-select:focus, .anim-select:focus {
    outline: none;
    box-shadow: inset 0px 0px 1px -4px #FCD1D1; /* Maintain original shadow on focus, or remove if preferred */
}

.two-col-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
}

.clr-field button {
  width: 32px !important;
  height: 100%;
    border-radius: 8px !important;
    border: 1px solid var(--fyne-stroke) !important;
    background-image: none !important;
}

.clr-field button:after {
  
  box-shadow: none !important;
  border-radius: 0px !important;
}

input:focus {
  outline: none !important;
}


.fyne-color-input {
  width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.overlay {
  backdrop-filter: blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  background-color: rgba(255, 255, 255, 0.85)!important;
  z-index: 99999 !important;
  position: absolute !important;
  overflow: visible !important;
}

.fyne-swal-popup {
  background: var(--swal2-background);
  color: var(--swal2-color);
  border-radius: var(--fyne-overlay-br) !important;
  box-shadow: 0px 4px 12px #FF78781A !important; 
}

.fyne-swal-title {
  font-family: var(--fyne-heading-font) !important;
  color: var(--fyne-text) !important;
  font-size: 2em !important;
  margin-bottom: 0.2em !important;
}

.fyne-swal-popup .swal2-input {
  border-radius: var(--swal2-input-border-radius) !important;
  background-color: var(--swal2-input-background) !important;
  border: 1px solid var(--swal2-input-border) !important;
}

.fyne-swal-popup .swal2-input:focus {
  border-color: var(--swal2-input-focus-border) !important;
  box-shadow: none !important;
}