/* bulletjournal.css — scoped styles for the drag-and-drop Journal Canvas */

/* --- 1. TOOLBAR STYLES --- */
.journal__toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
  flex-wrap: wrap; /* CRITICAL: Allows buttons to drop to next line if space runs out */
}

.journal__btn {
  border-radius: 8px !important;
  padding: 0.5rem 1rem !important;
  white-space: normal !important;
  border: 1px solid var(--brand-gold, #b08a48) !important; /* Overrides the thick black JS borders */
  background-color: #fff !important;
  color: #333 !important;
  font-weight: 600 !important;
  margin: 0.25rem !important; /* Forces physical space between every button */
  word-spacing: 0.15rem !important; /* Adds clear spaces between the words */
  box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
  transition: all 0.2s ease !important;
}

.journal__btn:hover {
  background-color: #f8f9fa !important;
  transform: translateY(-1px);
}

.journal__status {
  margin-top: .5rem;
  font-size: .95rem;
  color: #6c757d;
}

/* --- 2. CANVAS BOARD --- */
.journal__canvas-board {
  width: 100%;
  min-height: 75vh;
  flex-grow: 1;
  border: 1px solid var(--brand-gold, #b08a48); 
  border-radius: 12px;
  background-color: #fff;
  position: relative;
  box-shadow: 0 4px 15px rgba(176, 138, 72, 0.1); 
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center;
  overflow: hidden;
}

/* Items inside the board */
.journal__canvas-item {
  position: absolute;
  user-select: none;
  cursor: grab;
  touch-action: none; /* Crucial for tablet dragging */
}

/* Text inputs inside the canvas */
.journal-text-content {
  background: rgba(255, 255, 255, 0.6);
  border: 1px dotted transparent;
  transition: border 0.2s;
}
.journal-text-content:focus {
    border: 1px solid #b08a48;
    background: #fff;
}

/* --- 3. TABLET / MOBILE "FULLSCREEN" MODE --- */
/* This forces the planner to pop out of the "Hub" and fill the screen on small devices */
@media (max-width: 991px) { 
    .journal-canvas {
        position: fixed !important;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100vw;
        height: 100vh;
        z-index: 99999; /* Sit on top of everything */
        background: #f8f9fa; /* Light grey background behind the paper */
        padding: 10px;
        overflow-y: auto; /* Allow scrolling */
        display: flex;
        flex-direction: column;
    }

    /* Stack the toolbar elements so they don't get cut off */
    #editorToolbar {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
        background: #fff;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    #editorToolbar > div {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    #journalEntryTitle {
        width: 100%;
        max-width: 100% !important;
    }

    /* Make the button group scrollable horizontally if it's still too wide */
    .btn-group {
        width: 100%;
        overflow-x: auto;
        display: flex;
    }
    
    .journal__btn {
        flex: 1; /* Make buttons even size */
    }
    
    /* Hide the sidebar library if needed, or put it at bottom */
    #journalQuickElements {
        order: 3; /* Push to bottom */
        margin-bottom: 50px; /* Space for scrolling */
    }
}


/* --- 4. EDITOR HOVER LOGIC (Fixes the Disappearing Handle) --- */

/* 1. By default, hide all controls (Delete, Rotate, Resize) */
.editor-control {
  display: none !important;
}

/* 2. When hovering the ITEM, show the controls */
/* Since the handle is a child, hovering it keeps this active! */
.journal__canvas-item:hover .editor-control {
  display: flex !important;
}

/* 3. Add the dashed border on hover via CSS instead of JS */
.journal__canvas-item:hover {
  border: 1px dashed #ccc !important;
}

/* 4. Ensure the dashed border goes away when not hovering */
.journal__canvas-item {
  border: 1px solid transparent; 
}