/* 
 * style.css
 * Combined styles from file-manager.css, editor-group.css, and workflow-manager.css
 */

/* ===== Styles from file-manager.css ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Ubuntu', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
}

:root {
    --bg-color: #f5f5f5;
    --container-bg: #ffffff;
    --toolbar-bg: #f0f0f0;
    --border-color: #ddd;
    --hover-bg: #e0e0e0;
    --active-bg: #d0d0d0;
    --sidebar-bg: #f8f8f8;
    --text-color: #333;
    --secondary-text: #555;
    --tertiary-text: #666;
    --item-hover: #f5f5f5;
    --selected-bg: #e3f2fd;
    --selected-bg-light: #eaf5fe;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --subfolder-border: #ccc;
}

body.dark-theme {
    --bg-color: #1e1e1e;
    --container-bg: #252525;
    --toolbar-bg: #333333;
    --border-color: #444;
    --border-color2: black;
    --hover-bg: #3a3a3a;
    --active-bg: #444444;
    --sidebar-bg: #2d2d2d;
    --text-color: #e0e0e0;
    --secondary-text: #b0b0b0;
    --tertiary-text: #999;
    --item-hover: #333333;
    --selected-bg: #2c4f7c;
    --selected-bg-light: #3a5e8c;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --subfolder-border: #555;
}

html, body {
    height: 100%;
    overflow-x: hidden;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    position: relative;
}

.file-manager-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    box-shadow: 0 0 10px var(--shadow-color);
}

/* Toolbar */
.toolbar {
    display: flex;
    justify-content: space-between;
    padding: 12px 12px;
    background-color: var(--toolbar-bg);
    border-bottom: 2px solid var(--border-color2);
}

.location-bar {
    display: flex;
    align-items: center;
    flex: 1;
}

.location-bar button {
    background: none;
    border: none;
    border-radius: 4px;
    padding: 6px;
    margin-right: 4px;
    cursor: pointer;
    color: var(--text-color);
}

.location-bar button i {
    font-size: 15px;
}

.location-bar button:hover {
    background-color: var(--hover-bg);
}

.breadcrumb-navigation {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0 8px;
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0 10px;
    overflow-x: auto;
    white-space: nowrap;
    height: 32px;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--text-color);
    border-radius: 4px;
}

.breadcrumb-item i {
    font-size: 15px;
}

.breadcrumb-item:hover {
    background-color: var(--hover-bg);
}

.breadcrumb-separator {
    margin: 0 4px;
    color: var(--secondary-text);
}

.breadcrumb-item.active {
    font-weight: bold;
    background-color: var(--selected-bg);
}

.view-options {
    display: flex;
    margin-left: 4px;
    align-items: center;
}

.view-options button {
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-color);
}

.view-options button i {
    font-size: 15px;
}

.view-options button:hover {
    background-color: var(--hover-bg);
}

.view-options button.active {
    background-color: var(--active-bg);
}

/* Icon Selector Toggle */
.icon-selector-toggle {
    margin-right: 8px;
}

.icon-selector-toggle button {
    padding: 8px;
    transition: all 0.2s ease;
}

.icon-selector-toggle button:hover {
    background-color: var(--hover-bg);
    transform: scale(1.05);
}

.icon-selector-toggle button.active {
    background-color: var(--selected-bg);
    color: #2196f3;
}

/* Main Container */
.main-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Storage Menu */
.storage-menu {
    display: none;
    position: absolute;
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 8px var(--shadow-color);
    z-index: 100;
    margin-top: 40px;
    margin-left: 20px;
    min-width: 180px;
}

.storage-menu.show {
    display: block;
}

.storage-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text-color);
    display: flex;
    align-items: center;
}

.storage-menu-item i {
    margin-right: 8px;
    width: 20px;
    text-align: center;
}

.storage-menu-item:hover {
    background-color: var(--hover-bg);
    border: none;
    border-right: 2px solid var(--border-color2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.sidebar-toggle i {
    font-size: 16px;
    color: var(--text-color);
}

.sidebar h3 {
    text-align: center;
    padding: 8px 16px;
    font-size: 15px;
    color: var(--secondary-text);
}

.sidebar ul {
    list-style: none;
}

.sidebar li {
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--text-color);
}

.sidebar li:hover {
    background-color: var(--hover-bg);
}

.sidebar li i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
    color: var(--secondary-text);
    font-size: 15px;
}

/* Content Area */
.content-area {
    display: flex;
    overflow: hidden;
    margin-left: 0;
    transition: margin-left 0.3s ease;
    width: 100%;
}

/* Content area when sidebar is closed */
.sidebar.closed~.content-area {
    margin-left: 25px;
    /* Width of the toggle button */
}

/* Content area when sidebar is open */
.content-area.with-sidebar {
    margin-left: 300px;
    /* Width of the sidebar */
}


/* Files Container */
.files-container {
    flex: 1;
    overflow-y: auto;
}



/* Icon View */
.files-container.icon-view {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.file-item.icon-view {
    width: 100px;
    height: 100px;
    margin: 10px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    padding: 10px 5px;
}

.file-item.icon-view:hover {
    background-color: #f0f0f0;
}

.file-item.icon-view .file-icon {
    font-size: 32px;
    margin-bottom: 5px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.file-item.icon-view .file-name {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* List View */
.files-container.list-view {
    display: block;
}

/* File Header */
.file-header {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background-color: var(--toolbar-bg);
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px var(--shadow-color);
    color: var(--text-color);
}

.header-name {
    height: 32px;
    flex: 1;
    align-content: center;
    padding-left: 50px;
    /* Space for toggle icon and file icon, adjusted to align with content */
}

.header-size {
    height: 32px;
    width: 100px;
    text-align: center;
    align-content: center;
    border-left: 1px solid var(--border-color2);
}

.header-type {
    height: 32px;
    width: 120px;
    text-align: left;
    align-content: center;
    padding-left: 10px;
    border-left: 1px solid var(--border-color2);
}

.header-date {
    height: 32px;
    width: 180px;
    text-align: left;
    align-content: center;
    padding-left: 10px;
    border-left: 1px solid var(--border-color2);
}

.file-item.list-view {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    position: relative;
    height: 32px;
    /* Tetapkan tinggi yang konsisten */
    color: var(--text-color);
}

.file-item.list-view:hover {
    background-color: var(--item-hover);
}

.file-item.list-view .toggle-icon,
.file-item.list-view .toggle-spacer {
    margin-right: 5px;
    width: 15px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.file-item.list-view .file-icon {
    margin-right: 10px;
    width: 20px;
    text-align: center;
    display: inline-flex;
    vertical-align: middle;
    line-height: 1;
    font-size: 15px;
}

.file-item.list-view .file-name {
    flex: 1;
}

.file-item.list-view .file-size {
    width: 100px;
    text-align: right;
    color: var(--tertiary-text);
    padding-right: 10px;
}

.file-item.list-view .file-type {
    width: 120px;
    text-align: left;
    color: var(--tertiary-text);
    font-style: italic;
    padding-left: 10px;
}

.file-item.list-view .file-date {
    width: 180px;
    text-align: left;
    color: var(--tertiary-text);
    padding-left: 10px;
}

/* Compact View */
.files-container.compact-view {
    display: block;
}

.file-item.compact-view {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    height: 28px;
    /* Tetapkan tinggi yang konsisten, sedikit lebih kecil untuk tampilan compact */
}

.file-item.compact-view:hover {
    background-color: #f5f5f5;
}

.file-item.compact-view .file-icon {
    margin-right: 8px;
    width: 16px;
    text-align: center;
    font-size: 15px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.file-item.compact-view .file-name {
    flex: 1;
    font-size: 13px;
}

/* Status Bar */
.status-bar {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: var(--toolbar-bg);
    border-top: 2px solid var(--border-color2);
    font-size: 13px;
    color: var(--secondary-text);
}

/* File Colors */
.file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    /* Tetapkan tinggi yang konsisten untuk semua ikon */
}

.file-icon.folder {
    color: #ffc107;
}

.file-icon.image {
    color: #4caf50;
}

.file-icon.document {
    color: #2196f3;
}

.file-icon.audio {
    color: #9c27b0;
}

.file-icon.video {
    color: #f44336;
}

.file-icon.archive {
    color: #795548;
}

.file-icon.code {
    color: #607d8b;
}

/* Selected Item */
.file-item.selected {
    background-color: var(--selected-bg);
}

/* Folder Tree Toggle */
.toggle-icon,
.toggle-spacer {
    margin-right: 5px;
    transition: transform 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 15px;
}

.toggle-icon {
    cursor: pointer;
}

.toggle-icon.expanded {
    transform: rotate(90deg);
}

/* Subfolder Container */
.subfolder-container {
    margin-left: 18px;
    border-left: 1px dashed var(--subfolder-border);
    padding-left: 4px;
    margin-bottom: 5px;
}

.subfolder-container.nested {
    margin-left: 18px;
}

/* Subfolder Item */
.subfolder-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    margin-bottom: 2px;
    height: 32px;
    /* Tetapkan tinggi yang konsisten */
    color: var(--text-color);
}

.subfolder-item:hover {
    background-color: var(--item-hover);
}

.subfolder-item .file-icon {
    margin-right: 10px;
    width: 20px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    height: 16px;
    /* Tetapkan tinggi yang konsisten */
    font-size: 15px;
}

.subfolder-item .file-name {
    flex: 1;
    font-size: 13px;
}

.subfolder-item .file-size {
    width: 90px;
    text-align: right;
    color: var(--tertiary-text);
    font-size: 13px;
    padding-right: 10px;
}

.subfolder-item .file-type {
    width: 90px;
    text-align: left;
    color: var(--tertiary-text);
    font-size: 13px;
    font-style: italic;
    padding-left: 10px;
}

.subfolder-item .file-date {
    width: 150px;
    text-align: left;
    color: var(--tertiary-text);
    font-size: 13px;
    padding-left: 10px;
}

.subfolder-item.selected {
    background-color: var(--selected-bg);
}

/* Subfolder Indent */
.subfolder-indent {
    width: 15px;
    display: inline-block;
    margin-right: 5px;
}

/* Loading Indicator */
.loading-indicator {
    padding: 10px;
    text-align: center;
    color: var(--secondary-text);
    font-style: italic;
}

/* Error Message */
.error-message {
    padding: 10px;
    text-align: center;
    color: #f44336;
    font-style: italic;
}

/* Theme Toggle Button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle button {
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-color);
}

.theme-toggle button i {
    font-size: 22px;
}

.theme-toggle button:hover {
    background-color: var(--hover-bg);
}

.storage-section {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}

/* Upload Section */
.upload-section {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}

/* Storage Buttons */
.storage-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.storage-button {
    flex: 1;
    padding: 8px 10px;
    margin: 0 5px;
    background-color: var(--toolbar-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    transition: background-color 0.2s;
}

.storage-button:first-child {
    margin-left: 0;
}

.storage-button:last-child {
    margin-right: 0;
}

.storage-button i {
    margin-right: 5px;
    font-size: 14px;
}

.storage-button:hover {
    background-color: var(--hover-bg);
}

.storage-button.active {
    background-color: var(--selected-bg);
    border-color: var(--selected-bg);
}

.upload-button {
    margin-top: 10px;
}

.custom-file-upload {
    display: inline-block;
    padding: 8px 12px;
    cursor: pointer;
    background-color: var(--toolbar-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-align: center;
    width: 100%;
    transition: background-color 0.2s;
}

.custom-file-upload:hover {
    background-color: var(--hover-bg);
}

.custom-file-upload i {
    margin-right: 8px;
    font-size: 15px;
}

input[type="file"] {
    display: none;
}

.new-text-button {
    margin-top: 10px;
    position: relative;
}

.custom-button {
    display: inline-block;
    padding: 8px 12px;
    cursor: pointer;
    background-color: var(--toolbar-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-align: center;
    width: 100%;
    transition: background-color 0.2s;
    color: var(--text-color);
}

.custom-button:hover {
    background-color: var(--hover-bg);
}

.custom-button i {
    margin-right: 8px;
    font-size: 15px;
}

/* Format Popup */
.format-popup {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: none;
    margin-top: 5px;
    max-height: unset;
    overflow-y: auto;
}

.format-popup.show {
    display: block;
}

.format-option {
    padding: 8px 12px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin: 5px;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
}

.format-option:hover {
    background-color: var(--hover-bg);
}

.format-option i {
    margin-right: 10px;
    width: 16px;
    text-align: center;
}

.format-option .format-name {
    flex-grow: 1;
}

.format-option .format-ext {
    color: var(--secondary-text);
    font-size: 0.9em;
}

/* Notification */
.notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--container-bg);
    color: var(--text-color);
    padding: 12px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 10px var(--shadow-color);
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.5s;
}

.notification.fade-out {
    opacity: 0;
}

/* Context Menu */
.context-menu {
    position: absolute;
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 2px 10px var(--shadow-color);
    z-index: 1000;
    min-width: 180px;
    padding: 5px 0;
    display: none;
}

.context-menu.show {
    display: block;
}

.context-menu-item {
    padding: 8px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--text-color);
}

.context-menu-item:hover {
    background-color: var(--item-hover);
}

.context-menu-item i {
    margin-right: 10px;
    width: 16px;
    text-align: center;
    color: var(--secondary-text);
}

.context-menu-separator {
    height: 1px;
    background-color: var(--border-color);
    margin: 5px 0;
}

/* Code Editor Styles */
.editor-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(100% - 300px);
    background-color: var(--container-bg);
    border-left: 2px solid var(--border-color2);
    display: flex;
    flex-direction: column;
    z-index: 100;
}

/* Switch Toggle Style - Combined from both files */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color, #ccc);
    transition: .4s;
    border-radius: 34px; /* Default rounded style */
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%; /* Default rounded style */
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    transform: translateX(20px);
}

/* Dark theme support */
body.dark-theme .slider {
    background-color: #555;
}

body.dark-theme .slider:before {
    background-color: #ddd;
}

body.dark-theme input:checked+.slider {
    background-color: #4285F4;
}

.editor-theme-option {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 4px;
}

.editor-theme-option:hover {
    background-color: var(--hover-bg);
}

.editor-theme-option.selected {
    background-color: var(--selected-bg);
}

.theme-preview {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    margin-right: 8px;
    border: 1px solid var(--border-color);
}

.theme-preview.vs {
    background-color: #ffffff;
}

.theme-preview.vs-dark {
    background-color: #1e1e1e;
}

.theme-preview.custom-dark {
    background-color: #1a1a1a;
}

.theme-preview.hc-black {
    background-color: #000000;
}

.theme-preview.hc-light {
    background-color: #ffffff;
    border: 1px solid #000000;
}

.theme-name {
    flex: 1;
    color: var(--text-color);
}

.editor-button:hover {
    background-color: var(--hover-bg);
}

.editor-button:active {
    transform: scale(0.95);
}

.save-button {
    background-color: #4caf50;
    color: white;
}

.save-button:hover {
    background-color: #45a049;
}

.save-button.modified {
    position: relative;
    animation: pulse-shadow 1.5s infinite;
}

.save-button.modified::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background-color: #ff9800;
    border-radius: 50%;
}

/* Pulse animation for save button */
@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(255, 152, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
    }
}

.close-button {
    background-color: #f44336;
    color: white;
}

.close-button:hover {
    background-color: #d32f2f;
}

/* ===== Styles for Workflow Manager ===== */

/* Workflow Button */
#workflow-btn {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background-color: var(--toolbar-bg);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 5px;
    color: var(--text-color);
}

#workflow-btn:hover {
    background-color: var(--hover-color);
}

/* Workflow Menu */
.dropdown-menu {
    position: absolute;
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 150px;
}

.dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.dropdown-item i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

.dropdown-item:hover {
    background-color: var(--hover-color);
}

/* Workflow Status Modal */
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--container-bg);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 20px;
    z-index: 2000;
    min-width: 400px;
    max-width: 80%;
}

.modal h2 {
    margin-bottom: 15px;
    font-size: 18px;
    color: var(--text-color);
}

.workflow-status-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.workflow-status-table th,
.workflow-status-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.workflow-status-table th {
    font-weight: bold;
    background-color: var(--toolbar-bg);
}

.close-btn {
    padding: 6px 12px;
    background-color: var(--button-bg);
    color: var(--button-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
    margin-top: 10px;
}

.close-btn:hover {
    background-color: var(--button-hover);
}

/* ===== Styles from editor-group.css ===== */

/* Container untuk editor groups */
.editor-groups-container {
    flex: 1;
    background-color: var(--container-bg);
    border-left: 2px solid var(--border-color2);
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    width: 0;
    max-width: 0; /* Tambahkan max-width: 0 saat tersembunyi */
    transition: all 0.3s ease;
}

/* Ketika editor groups container ditampilkan */
.editor-groups-container.visible {
    flex: 1;
    width: calc(100% - 300px) !important;
    min-width: 500px !important;
    max-width: none !important; /* Hapus batasan max-width saat ditampilkan */
    flex-grow: 1;
}

/* Style untuk content area ketika editor ditampilkan */
.content-area.with-editor {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Menyembunyikan informasi item ketika editor ditampilkan */
.content-area.with-editor .header-size,
.content-area.with-editor .header-type,
.content-area.with-editor .header-date,
.content-area.with-editor .file-item.list-view .file-size,
.content-area.with-editor .file-item.list-view .file-type,
.content-area.with-editor .file-item.list-view .file-date,
.content-area.with-editor .subfolder-item .file-size,
.content-area.with-editor .subfolder-item .file-type,
.content-area.with-editor .subfolder-item .file-date {
    display: none !important;
}

/* Menyesuaikan header-name ketika editor ditampilkan */
.content-area.with-editor .header-name {
    flex: 1 !important;
    width: 100% !important;
    padding-left: 20px !important;
    min-width: 100px !important;
    height: 32px !important;
    line-height: 32px !important;
    display: block !important;
    visibility: visible !important;
    color: transparent !important; /* Menyembunyikan teks asli */
    position: relative !important;
}

/* Memastikan teks "Name" tetap terlihat di header */
.content-area.with-editor .header-name::before {
    content: "Name" !important;
    position: absolute !important;
    left: 20px !important;
    top: 0 !important;
    font-weight: bold !important;
    color: var(--text-color) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
}

/* Menyesuaikan file-item ketika editor ditampilkan */
.content-area.with-editor .file-item.list-view .file-name,
.content-area.with-editor .subfolder-item .file-name {
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
}

/* Menyesuaikan padding pada file-item ketika editor ditampilkan */
.content-area.with-editor .file-item.list-view {
    padding-right: 10px !important;
    width: 100% !important;
}

/* Menyesuaikan file-header ketika editor ditampilkan */
.content-area.with-editor .file-header {
    padding-right: 10px !important;
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
    background-color: var(--toolbar-bg) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}

/* Layout grid untuk editor groups */
/* Single editor (default) */
.editor-groups-container.single {
    flex-direction: column;
}

.editor-groups-container.single .editor-group {
    width: 100%;
    height: 100%;
}

/* Two columns layout */
.editor-groups-container.two-columns {
    flex-direction: row;
}

.editor-groups-container.two-columns .editor-group {
    width: 50%;
    height: 100%;
}

/* Three columns layout */
.editor-groups-container.three-columns {
    flex-direction: row;
}

.editor-groups-container.three-columns .editor-group {
    width: 33.333%;
    height: 100%;
}

/* Four columns layout */
.editor-groups-container.four-columns {
    flex-direction: row;
}

.editor-groups-container.four-columns .editor-group {
    width: 25%;
    height: 100%;
}

/* Styling untuk editor group */
.editor-group {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    flex: 1;
    width: 100%;
    height: 100%;
    opacity: 0.9; /* Membuat editor group yang tidak aktif sedikit redup (nilai lebih tinggi) */
    transition: opacity 0.3s ease; /* Transisi halus saat berganti status aktif */
}

/* Editor group terakhir tidak memiliki border kanan */
.editor-group:last-child {
    border-right: none;
}

/* Editor group yang aktif */
.editor-group.active {
    z-index: 1;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    opacity: 1; /* Memastikan editor group yang aktif terlihat jelas */
}

/* Efek untuk monaco editor di editor group yang tidak aktif */
.editor-group:not(.active) .monaco-editor {
    opacity: 0.85; /* Membuat editor sedikit redup pada group yang tidak aktif (nilai lebih tinggi) */
}

/* Styling untuk toolbar editor */
.editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--toolbar-bg);
}

/* Styling untuk tombol toolbar editor */
.editor-toolbar-buttons {
    display: none;
    align-items: center;
    margin: 0 8px;
}

.editor-toolbar-buttons.visible {
    display: flex;
}

/* Styling untuk tombol close editor group */
.editor-group-close-button {
    background-color: transparent;
    border: none;
    color: var(--secondary-text);
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-left: 4px;
}

.editor-group-close-button:hover {
    background-color: var(--hover-bg);
    color: var(--text-color);
}

.editor-group-close-button i {
    font-size: 12px;
}

/* Styling untuk aksi editor */
.editor-actions {
    display: flex;
    align-items: center;
}

/* Editor Settings Popup */
.editor-settings-button {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-color: #2196f3;
    border-radius: 4px;
}

.editor-settings-button .editor-button {
    color: white;
    background: transparent;
    margin-left: 0;
}

.editor-settings-button .editor-button i {
    color: white;
}

.editor-settings-button .editor-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.editor-settings-popup {
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    background-color: var(--container-bg);
    border: 2px solid orange;
    border-radius: 10px;
    box-shadow: 0 4px 8px var(--shadow-color);
    padding: 15px;
    z-index: 9999;
    display: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0;
    transform: translateY(10px);
    margin-top: 10px;
}

.editor-settings-popup::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--container-bg);
    z-index: 10000;
}

.editor-settings-popup::after {
    content: '';
    position: absolute;
    top: -13px;
    right: 17px;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 13px solid orange;
    z-index: 9998;
}

.editor-settings-popup.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.editor-settings-group {
    margin-bottom: 12px;
}

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

.editor-settings-title {
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--text-color);
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 4px;
}

.editor-settings-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.editor-settings-label {
    flex: 1;
    color: var(--text-color);
}

.editor-settings-control {
    flex: 1;
}

.editor-settings-control select,
.editor-settings-control input {
    width: 100%;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--container-bg);
    color: var(--text-color);
}

/* Scrollbar untuk editor-font-family */
#editor-font-family {
    scrollbar-width: thin;
    max-height: 300px;
    overflow-y: auto;
}

/* Styling scrollbar untuk Chrome, Safari dan Opera */
#editor-font-family::-webkit-scrollbar {
    width: 6px;
}

#editor-font-family::-webkit-scrollbar-track {
    background: var(--container-bg);
}

#editor-font-family::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

#editor-font-family::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary-text);
}

/* Styling untuk optgroup dan option di dropdown font */
#editor-font-family optgroup {
    font-weight: bold;
    color: var(--secondary-text);
    background-color: var(--toolbar-bg);
    padding: 4px;
}

#editor-font-family option {
    padding: 6px 8px;
    background-color: var(--container-bg);
    font-size: 14px;
}

.editor-settings-control input[type="number"] {
    width: 60px;
}

/* Switch Toggle Style - Already defined above */

/* Styling untuk tab bar */
.editor-tab-bar {
    display: flex;
    overflow-x: auto;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    scrollbar-width: auto;
    white-space: nowrap;
}

/* Styling untuk scrollbar tab bar */
.editor-tab-bar::-webkit-scrollbar {
    height: 4px;
}

.editor-tab-bar::-webkit-scrollbar-track {
    background: var(--toolbar-bg);
}

.editor-tab-bar::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

.editor-tab-bar::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary-text);
}

/* Styling untuk tab */
.editor-tab {
    display: flex;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    min-width: auto;
    flex: 0 0 auto;
}

.editor-group .editor-tab {
    padding: 0 8px;
    height: 32px;
    background-color: var(--toolbar-bg);
    border-right: 1px solid var(--border-color);
    user-select: none;
    min-width: 100px;
    max-width: 200px;
}

/* Style untuk file-manager.css */
.editor-tab:not(.editor-group .editor-tab) {
    height: 28px;
    border: 2px solid var(--border-color2);
    border-radius: 5px;
    margin-right: 2px;
}

/* Tab yang aktif */
.editor-tab.active {
    font-weight: 700;
}

.editor-group .editor-tab.active {
    background-color: var(--bg-color);
    border-top: 2px solid var(--selected-bg);
}

/* Tab pada editor group yang tidak aktif */
.editor-group:not(.active) .editor-tab {
    opacity: 0.95;
}

/* Tab aktif pada editor group yang tidak aktif */
.editor-group:not(.active) .editor-tab.active {
    opacity: 0.98;
    background-color: var(--item-hover);
    border-top: 0;
}

/* Tab aktif untuk file-manager.css */
.editor-tab:not(.editor-group .editor-tab).active {
    height: 31px;
    border: 2px solid orange;
    border-radius: 5px 5px 0 0;
    border-bottom: transparent;
    margin-top: 1px;
    background-color: var(--bg-color);
    z-index: 1;
}

/* Hover effect untuk tab */
.editor-group .editor-tab:hover {
    background-color: var(--hover-bg);
}

/* Styling untuk ikon tab */
.editor-group .tab-icon {
    margin-right: 5px;
    font-size: 14px;
    color: var(--secondary-text);
}

/* Styling untuk nama tab */
.tab-name {
    flex: 1;
    white-space: nowrap;
    color: var(--text-color);
    min-width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Styling untuk file-manager.css */
.editor-tab:not(.editor-group .editor-tab) .tab-name {
    padding-left: 8px;
    font-size: 13px;
}

/* Styling untuk indikator modifikasi */
.tab-modified-indicator {
    color: #ff9800;
}

.editor-group .tab-modified-indicator {
    margin: 0 5px;
    color: var(--secondary-text);
    font-weight: bold;
}

/* Container untuk indikator modified dan tombol close */
.tab-action-container {
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Indikator file yang dimodifikasi untuk file-manager.css */
.editor-tab:not(.editor-group .editor-tab) .tab-modified-indicator {
    font-size: 14px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
}

/* Tampilkan indikator modified saat file dimodifikasi */
.editor-tab.modified .tab-modified-indicator {
    display: flex;
}

/* Spesifik untuk file-manager.css */
.editor-tab:not(.editor-group .editor-tab).modified .tab-modified-indicator {
    font-size: 18px;
    animation: pulse-opacity 1.5s infinite ease-in-out;
}

/* Styling untuk tombol close tab */
.tab-close-button {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.editor-group .tab-close-button {
    margin-left: 5px;
    opacity: 0.5;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

/* Tombol close tab untuk file-manager.css */
.editor-tab:not(.editor-group .editor-tab) .tab-close-button {
    font-size: 20px;
}

/* Hover effect untuk tombol close */
.editor-group .tab-close-button:hover {
    opacity: 1;
    background-color: var(--hover-bg);
}

/* Tampilkan tombol close saat hover pada tab */
.editor-tab:hover .tab-close-button {
    opacity: 1;
}

/* Tombol close tab */
.tab-close {
    display: none;
    width: 16px;
    height: 16px;
    padding-top: 2px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Sembunyikan indikator modified dan tampilkan tombol close saat hover */
.tab-action-container:hover .tab-modified-indicator {
    display: none;
}

.tab-action-container:hover .tab-close {
    display: flex;
    background-color: var(--hover-bg);
    border-radius: 3px;
}

.tab-close:hover {
    background-color: rgba(255, 0, 0, 0.1);
}

/* Definisi animasi pulse */
/* Pulse animation for tab modified indicator */
@keyframes pulse-opacity {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Styling untuk container editor */
.editor-group .editor-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-width: 100%;
    min-height: 100%;
    width: 100% !important;
    height: 100% !important;
}

/* Styling untuk tombol layout di toolbar */
.editor-layout-buttons {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.editor-layout-buttons .layout-button {
    height: 21px;
    display: flex;
    margin-left: 5px;
    padding: 5px 8px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-color);
    align-items: center;
    font-size: 13px;
    transition: background-color 0.2s, transform 0.1s;
}

.editor-layout-buttons .layout-button:hover {
    background-color: var(--hover-bg);
}

/* Styling untuk resize handle */
.editor-group-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background-color: transparent;
    z-index: 10;
}

.editor-group-resize-handle:hover {
    background-color: var(--selected-bg);
}

/* Styling untuk editor ketika dalam mode resize */
.editor-groups-container.resizing {
    user-select: none;
}

/* Responsif untuk layout grid */
@media (max-width: 992px) {
    /* Pada layar kecil, batasi jumlah kolom maksimal menjadi 2 */
    .editor-groups-container.three-columns .editor-group,
    .editor-groups-container.four-columns .editor-group {
        width: 50%;
    }
}

@media (max-width: 768px) {
    /* Pada layar sangat kecil, gunakan layout single */
    .editor-groups-container.two-columns .editor-group,
    .editor-groups-container.three-columns .editor-group,
    .editor-groups-container.four-columns .editor-group {
        width: 100%;
    }
}

/* Responsif untuk layar kecil */
@media (max-width: 1200px) {
    .content-area.with-editor {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }
    
    .editor-groups-container.visible {
        width: calc(100% - 250px) !important;
    }
}

@media (max-width: 992px) {
    .content-area.with-editor {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
    
    .editor-groups-container.visible {
        width: calc(100% - 200px) !important;
    }
}

@media (max-width: 768px) {
    .content-area.with-editor {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }
    
    .editor-groups-container.visible {
        width: calc(100% - 150px) !important;
    }
    
    /* Menyesuaikan header-name pada layar kecil */
    .content-area.with-editor .header-name {
        padding-left: 10px !important;
        min-width: 80px !important;
    }
    
    .content-area.with-editor .header-name::before {
        left: 10px !important;
    }
}

@media (max-width: 576px) {
    .content-area.with-editor {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        display: none !important;
    }
    
    .editor-groups-container.visible {
        width: 100% !important;
        min-width: 100% !important;
    }
}

/* Styles yang diimpor dari additional-styles.css */

/* Storage Container and Button Styles */
.storage-container {
    position: relative; /* This is key for absolute positioning of the menu */
    display: inline-block; /* Keep it inline with other buttons */
    margin-right: 5px;
}

#storage-btn {
    background-color: var(--toolbar-button-bg);
    color: var(--text-color);
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    z-index: 1000;
}

#storage-btn:hover {
    background-color: var(--hover-bg);
}

#storage-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--active-color);
}

/* Storage Menu */
.storage-menu {
    display: none;
    position: absolute;
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 8px var(--shadow-color);
    z-index: 2000; /* Higher z-index to ensure it's visible */
    top: 100%; /* Position right below the storage button */
    left: 50%; /* Center it horizontally */
    transform: translateX(-50%); /* Perfectly center the menu */
    min-width: 180px;
    padding: 5px 0;
    margin-top: 5px; /* Small margin from button */
}

.storage-menu.show {
    display: block !important; /* Force display with !important */
}

.storage-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text-color);
    display: flex;
    align-items: center;
}

.storage-menu-item i {
    margin-right: 8px;
    width: 20px;
    text-align: center;
}

.storage-menu-item:hover {
    background-color: var(--hover-bg);
}

.storage-menu-item.active {
    background-color: var(--selected-bg);
    font-weight: bold;
}

/* Format Popup */
.format-popup {
    display: none;
    position: absolute;
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 8px var(--shadow-color);
    padding: 10px;
    width: 250px;
    z-index: 100;
    max-height: 400px;
    overflow-y: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.format-popup.show {
    display: block;
}

/* Upload Dialog */
.upload-dialog {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--container-bg);
    border-radius: 8px;
    box-shadow: 0 4px 20px var(--shadow-color);
    width: 500px;
    max-width: 90%;
    z-index: 1000;
}

.upload-dialog.show {
    display: block;
}

.upload-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.upload-header h3 {
    margin: 0;
    font-size: 16px;
}

.upload-header button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-color);
}

.upload-body {
    padding: 20px;
}

.upload-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: 6px;
    padding: 30px;
    text-align: center;
    transition: background-color 0.3s;
    margin-bottom: 20px;
}

.upload-dropzone.active {
    border-color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.1);
}

.upload-dropzone i {
    font-size: 48px;
    color: var(--secondary-text);
    margin-bottom: 15px;
}

.upload-dropzone p {
    margin: 10px 0;
    color: var(--secondary-text);
}

.file-upload-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: #4285F4;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

.upload-progress-container {
    margin-top: 15px;
}

.upload-progress-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.upload-progress-item .file-icon {
    margin-right: 10px;
}

.upload-progress-item .file-name {
    flex: 1;
}

.upload-progress-item .progress-bar {
    height: 5px;
    background-color: #E0E0E0;
    width: 100px;
    border-radius: 3px;
    overflow: hidden;
}

.upload-progress-item .progress-bar-fill {
    height: 100%;
    background-color: #4285F4;
    width: 0%;
    transition: width 0.3s;
}

.upload-progress-item .status {
    margin-left: 10px;
    font-size: 12px;
}

/* Adjustments for content area without sidebar */
.content-area {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    position: relative;
}

/* ===== Custom Popup Styles ===== */

/* Overlay untuk popup */
.popup-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 999999 !important; /* Meningkatkan z-index untuk memastikan di atas semua elemen */
    backdrop-filter: blur(2px);
}

.popup-overlay.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Container popup */
.popup-container {
    background-color: var(--container-bg) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    min-width: 300px !important;
    overflow: hidden !important;
    animation: popupFadeIn 0.3s ease-out !important;
    position: relative !important;
    margin: 20px !important;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Header popup */
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--toolbar-bg);
}

.popup-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.popup-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--secondary-text);
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.popup-close:hover {
    background-color: var(--hover-bg);
    color: var(--text-color);
}

/* Body popup */
.popup-body {
    padding: 20px;
    color: var(--text-color);
    line-height: 1.5;
}

/* Footer popup */
.popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background-color: var(--toolbar-bg);
}

/* Button styles untuk popup */
.popup-btn {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    background-color: var(--container-bg);
    color: var(--text-color);
}

.popup-btn:hover {
    background-color: var(--hover-bg);
}

.popup-btn.primary {
    background-color: #4285F4;
    color: white;
    border-color: #4285F4;
}

.popup-btn.primary:hover {
    background-color: #3367D6;
}

.popup-btn.danger {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}

.popup-btn.danger:hover {
    background-color: #c82333;
}

/* Input field dalam popup */
.popup-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
    background-color: var(--container-bg);
    color: var(--text-color);
    margin-top: 10px;
}

.popup-input:focus {
    outline: none;
    border-color: #4285F4;
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
}

/* Properties popup khusus */
.properties-popup .popup-container {
    width: min(450px, 90vw);
    max-height: 80vh;
}

.properties-content {
    font-family: 'Courier New', monospace;
    white-space: pre-line;
    background-color: var(--bg-color);
    padding: 15px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    max-height: 60vh;
    overflow-y: auto;
}

/* Prompt popup khusus */
.prompt-popup .popup-container {
    width: min(400px, 90vw);
}

/* Confirm popup khusus */
.confirm-popup .popup-container {
    width: min(450px, 90vw);
}

/* Alert popup khusus */
.alert-popup .popup-container {
    width: min(450px, 90vw);
}

/* Prevent body scroll when popup is open */
body.popup-open {
    overflow: hidden;
}