/* Reset dasar */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}

/* App container untuk flexbox layout */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Toolbar */
header {
    flex: 0 0 auto; /* Don't grow or shrink */
    background: #2c3e50;
    color: white;
    padding: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 34px; /* Explicit height */
}

header button {
    background: #3498db;
    border: none;
    padding: 6px 12px;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}

header button:hover {
    background: #2980b9;
}

header span {
    font-weight: bold;
    margin: 0 10px;
}

header input[type="text"] {
    margin-left: auto;
    padding: 5px;
    font-size: 14px;
    border-radius: 4px;
    border: none;
    outline: none;
}

/* Layout utama */
main {
    flex: 1 1 auto; /* Grow to fill available space */
    display: flex;
    overflow: hidden;
    min-height: 0; /* Important for Firefox */
}

/* Area mind map */
#mindmap {
    flex: 2;
    background: rgb(249 249 237);
    overflow: hidden;
    position: relative;
    min-width: 0; /* Allow shrinking */
}

/* Panel editor */
#editorPanel {
    flex: 1;
    border-left: 1px solid #ccc;
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-width: 400px;
    max-width: 50%;
    overflow: hidden;
}

#nodeTitle {
    font-size: 16px;
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#editor {
    flex: 1;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    min-height: 300px;
}

/* CKEditor specific styles */
.cke_chrome {
    border: 1px solid #ccc !important;
}

.cke_inner {
    background: white;
}

.cke_contents {
    height: 400px !important;
}

.cke_notifications_area {
    display: none !important;
}

/* Table styles untuk CKEditor */
.cke_editable table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
}

.cke_editable table, 
.cke_editable th, 
.cke_editable td {
    border: 1px solid #ddd;
}

.cke_editable th,
.cke_editable td {
    padding: 8px;
    text-align: left;
}

.cke_editable th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* Node mind map */


.node text {
    font-size: 12px;
    fill: #2c3e50;
    pointer-events: none;
}

.link {
    fill: none;
    stroke: #95a5a6;
    stroke-width: 2px;
}


/* Node mind map - Basic styles */
.node circle {
    /* HAPUS fill: #3498db; - biarkan JavaScript yang set warna */
    stroke-width: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.node circle:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}

/* Selected node override */
.node.selected circle {
    /* Hapus fill dan stroke dari sini juga */
    stroke-width: 4px !important;
    filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.6));
}




/* Node states */
.node.selected circle {
    fill: #024ade;
    stroke: #d35400;
    stroke-width: 3px;
}

.node.collapsed circle {
    fill: #bdc3c7;
    stroke: #7f8c8d;
}

.node.drag-target circle {
    stroke: #e74c3c !important;
    stroke-width: 3px !important;
}

/* Search highlight dengan animation */
@keyframes pulse-glow {
    0%, 100% {
        filter:
            drop-shadow(0 0 3px rgba(255, 255, 0, 1))
            drop-shadow(0 0 6px rgba(255, 0, 0, 0.8))
            drop-shadow(0 0 12px rgba(255, 0, 0, 0.5));
    }
    50% {
        filter:
            drop-shadow(0 0 4px rgba(255, 255, 0, 1))
            drop-shadow(0 0 8px rgba(255, 0, 0, 0.9))
            drop-shadow(0 0 16px rgba(255, 0, 0, 0.6));
    }
}

.node.search-match {
    animation: pulse-glow 2s infinite;
}

/* Editor buttons */
.editor-buttons {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.editor-buttons button {
    flex: 1;
    background: #27ae60;
    border: none;
    color: white;
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 13px;
}

.editor-buttons button:hover {
    background: #1e8449;
}

.editor-buttons button:nth-child(2) {
    background: #2980b9;
}

.editor-buttons button:nth-child(2):hover {
    background: #21618c;
}

.editor-buttons button:nth-child(3) {
    background: #c0392b;
}

.editor-buttons button:nth-child(3):hover {
    background: #922b21;
}

/* Unsaved changes indicator */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 10px 10px rgba(230, 126, 34, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(230, 126, 34, 0);
    }
}

button.unsaved {
    background-color: #ff4444;
    color: white;
    font-weight: bold;
    animation: pulse 1.5s infinite;
}

/* Export buttons */
button[onclick*="exportOutline"] {
    background-color: #28a745;
}

button[onclick*="exportOutline"]:hover {
    background-color: #218838;
}

button[onclick*="exportOutline"]:active {
    background-color: #1e7e34;
    transform: translateY(1px);
}

.export-loading {
    opacity: 0.6;
    cursor: not-allowed !important;
    position: relative;
}

.export-loading::after {
    content: " ⏳";
}

/* Responsive design */
@media (max-width: 768px) {
    main {
        flex-direction: column;
    }
    
    #editorPanel {
        min-width: auto;
        max-width: 100%;
        border-left: none;
        border-top: 1px solid #ccc;
    }
    
    .cke_contents {
        height: 300px !important;
    }
    
    header {
        flex-wrap: wrap;
    }
    
    header button {
        font-size: 12px;
        padding: 4px 8px;
    }
}

/* Debug styles - hapus setelah selesai */
#mindmap {
    border: 1px solid #ddd; /* Untuk melihat boundary */
}



/////////////////node coloring//////////////////



/* Node mind map - Basic styles */
.node circle {
    cursor: pointer;
    transition: all 0.3s ease;
	stroke-dasharray: 5,5;
}

.node circle:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
	stroke-dasharray: 5, 5;

}

.node text {
    font-size: 12px;
    fill: #2c3e50;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Selected node override */
.node.selected circle {
    stroke-width: 4px !important;
    filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.6));
}

/* Collapsed node - make it darker */
.node.collapsed circle {
    filter: brightness(0.7);
    stroke-dasharray: 5,5;
}

/* Links dengan gradient */
.link {
    fill: none;
    stroke: #bdc3c7;
    stroke-width: 2px;
    opacity: 0.6;
}

/* Color legend styles */
.color-legend {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-size: 12px;
}

.color-legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.color-legend-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 8px;
    border: 2px solid;
}



//////////////////end of node coloring///////////////////
/* ====== 1. Desktop – CKEditor di kiri, Mind-map di kanan ====== */
main {
    flex-direction: row-reverse;        /* balik secara horizontal  */
}

/* Pindahkan garis pemisah ke sisi kanan panel editor */
#editorPanel {
    border-left: none;                  /* hapus garis lama         */
    border-right: 1px solid #ccc;       /* garis di sisi kanan      */
}

/* ====== 2. Mobile – CKEditor di atas, Mind-map di bawah ====== */
@media (max-width: 768px) {
    main {
        flex-direction: column-reverse; /* balik secara vertikal    */
    }

    #editorPanel {
        flex: 0 1 auto;                 /* Tidak fixed height */
        max-height: 65vh;               /* Sedikit lebih tinggi untuk tombol */
        min-height: 465px;              /* Minimum tinggi yang cukup */
        border-right: none;
        border-bottom: 1px solid #ccc;
        overflow-y: auto;               /* Scroll jika diperlukan */
        padding: 10px;
        display: flex;
        flex-direction: column;         /* Pastikan layout vertikal */
    }
    
    #mindmap {
        /* flex: 1 1 auto; */                 /* Ambil sisa ruang */
        /* min-height: 30vh; */               /* Minimal 30% tinggi layar */
        overflow: hidden;
    }
    
    /* Input title - jangan shrink */
    #nodeTitle {
        flex: 0 0 auto;                 /* Fixed size, jangan grow/shrink */
        margin-bottom: 10px;
        font-size: 16px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    
    /* Container CKEditor - ambil ruang yang tersedia */
    #editor {
        flex: 1 1 auto;                 /* Grow untuk mengisi ruang */
        border: 1px solid #ccc;
        margin-bottom: 10px;
        min-height: 200px;              /* Minimal tinggi untuk editing */
    }
    
    /* Atur tinggi area editing CKEditor */
    .cke_contents {
        height: 200px !important;       /* Tinggi area editing */
    }
    
    /* Buttons di bawah - PENTING: jangan shrink */
    /* Perkecil ukuran tombol editor saja */
    .editor-buttons {
        flex: 0 1 auto;                 /* Fixed size, selalu terlihat */
        display: flex;
        gap: 2px;                       /* Kurangi gap antar tombol */
        margin-top: 1px;                /* Kurangi margin atas */
        padding-top: 0;                 /* Hilangkan padding atas */
    }
    
    .editor-buttons button {
        flex: 1;
        background: #27ae60;
        border: none;
        color: white;
        padding: 2px 2px;               /* Kurangi padding vertikal & horizontal */
        cursor: pointer;
        border-radius: 3px;             /* Radius lebih kecil */
        font-size: 11px;                /* Font lebih kecil */
        min-height: 24px;               /* Tinggi lebih kecil */
        line-height: 1.1;               /* Line height lebih compact */
    }
    
    /* Tetap pertahankan warna tombol yang berbeda */
    .editor-buttons button:nth-child(2) {
        background: #2980b9;
    }
    
    .editor-buttons button:nth-child(2):hover {
        background: #21618c;
    }
    
    .editor-buttons button:nth-child(3) {
        background: #c0392b;
    }
    
    .editor-buttons button:nth-child(3):hover {
        background: #922b21;
    }
    
    .editor-buttons button:hover {
        background: #1e8449;
    }

	/*  new */
	
	    header {
                      /* Scroll horizontal jika perlu */
        padding: 6px;                   /* Kurangi padding */
    }
    
    /* Sembunyikan tulisan "Writers Mindmapper" di mobile */
    header span {
        display: none;
    }
    
    /* Perkecil tombol header */
    header button {
        font-size: 10px;                /* Font lebih kecil */
        padding: 4px 6px;               /* Padding lebih kecil */
        white-space: nowrap;            /* Jangan wrap text dalam tombol */
        min-width: auto;                /* Biarkan tombol menyesuaikan */
    }
    
    /* Search input lebih kecil dan fleksibel */
    header input[type="text"] {
        margin-left: 8px;               /* Margin lebih kecil */
        padding: 4px;                   /* Padding lebih kecil */
        font-size: 12px;                /* Font lebih kecil */
        min-width: 80px;                /* Minimal width */
        max-width: 120px;               /* Maksimal width */
        flex-shrink: 1;                 /* Boleh menyusut jika perlu */
    }
    
 



	
	
	
	
	
	
	
	
	
	
	
	
	
	/* SEBELUM DIBUATKAN MEDIA QUERY LAYAR KECIL OLEH CLAUDE */
	
	
	
	
	
	/* ====== 3. KHUSUS untuk layar pendek (tinggi < 785px) ====== */
@media (max-width: 768px) and (max-height: 785px) {
    #editorPanel {
        max-height: 55vh;               /* Kurangi max height untuk layar pendek */
        min-height: 350px;              /* Kurangi min height agar tidak menutupi */
        padding: 8px;                   /* Kurangi padding */
    }
    
    #mindmap {
        min-height: 35vh;               /* Lebih besar untuk mindmap */
    }
    
    /* Input title lebih compact */
    #nodeTitle {
        font-size: 14px;                /* Font lebih kecil */
        padding: 4px;                   /* Padding lebih kecil */
        margin-bottom: 8px;             /* Margin lebih kecil */
    }
    
    /* CKEditor lebih compact */
    #editor {
        min-height: 160px;              /* Kurangi min height */
        margin-bottom: 8px;             /* Kurangi margin */
    }
    
    .cke_contents {
        height: 160px !important;       /* Kurangi tinggi area editing */
    }
    
    /* Buttons lebih kecil lagi */
    .editor-buttons button {
        font-size: 10px;                /* Font lebih kecil */
        min-height: 22px;               /* Tinggi lebih kecil */
        padding: 1px 2px;               /* Padding minimal */
    }
	
	/* patch dari gemini */
	/* ====== START: REPLACE WITH THIS CODE ====== */

    #editorPanel {
        flex: 1 1 auto; /* Allow panel to shrink/grow */
        max-height: 60vh; /* Give it a max height */
        min-height: 0; /* IMPORTANT: Allow it to be smaller than its content */
        border-right: none;
        border-bottom: 1px solid #ccc;
        padding: 10px;
        display: flex;
        flex-direction: column; /* Stack children vertically */
        overflow: hidden; /* Hide overflow, children will handle scrolling */
    }

    #nodeTitle {
        flex: 0 0 auto; /* Don't grow, don't shrink */
        margin-bottom: 10px;
    }

    /* Target the container CKEditor creates */
    /* THIS IS THE KEY FIX */
    #cke_editor {
        flex: 1 1 auto; /* Take all available space */
        min-height: 0; /* Allow it to shrink */
        display: flex; /* Use flex to manage its own children (toolbar/content) */
        flex-direction: column;
    }

    /* Make the content area of CKEditor scrollable */
    .cke_contents {
        flex: 1 1 auto; /* Take available space within CKEditor */
        overflow-y: auto !important; /* Force a scrollbar if needed */
        height: auto !important; /* Let flexbox control the height */
    }

    .editor-buttons {
        flex: 0 0 auto; /* Don't grow, don't shrink. Always visible at the bottom. */
        margin-top: 1px;
    }
	
	
    
/* ====== END: REPLACE WITH THIS CODE ====== */
	
	
	
	
	/* end gemini */
	
	
	
	/* tweak */
	.cke_bottom {
    padding: 6px 8px 2px;
    position: unset !important;
    border-top: 1px solid #d1d1d1;
    background: #f8f8f8;
}
	
	
}

	
	
	
	
	
}