body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #222;
    color: #fff;
    height: 100vh;
    overflow: hidden;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#menu-bar {
    background-color: #333;
    padding: 5px 0;
    display: flex;
    align-items: center;
    font-size: 12px;
    border-bottom: 1px solid #444; /* Tambahkan border untuk kontras */
}

.menu-item {
    position: relative;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    color: #fff; /* Ubah warna teks menjadi putih untuk visibilitas */
}

.menu-item:hover {
    background-color: #444;
    color: #fff;
}

.menu-item.active {
    background-color: #555;
    color: #fff;
}

.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
    border: 1px solid #555;
    min-width: 200px;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.menu-item.active .dropdown {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-item {
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #bbb;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover {
    background-color: #444;
    color: #fff;
}

.dropdown-item.disabled {
    color: #666;
    cursor: not-allowed;
}

.dropdown-item.disabled:hover {
    background-color: transparent;
}

.sub-dropdown {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #333;
    border: 1px solid #555;
    min-width: 200px;
    z-index: 1001;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.dropdown-item:hover .sub-dropdown {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

.content-container {
    display: flex;
    flex: 1;
    overflow: hidden;
}

#toolbar {
    width: 60px;
    background-color: #333;
    padding: 10px 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#canvas-container {
    flex: 1;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #444;
}

#dock-right-1, #dock-right-2 {
    width: 250px;
    background-color: #333;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
}

#dock-right-1.collapsed, #dock-right-2.collapsed {
    width: 30px;
}

.dock-level {
    flex: 1;
    min-height: 0;
}

.dock-tabs {
    display: flex;
    background-color: #2a2a2a;
    border-bottom: 1px solid #444;
}

.dock-tab {
    flex: 1;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.2s ease;
}

.dock-tab:hover {
    background-color: #444;
}

.dock-tab.active {
    background-color: #555;
    border-bottom: 2px solid #fff;
}

.dock-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background-color: #2a2a2a;
    display: none;
}

.dock-content.active {
    display: block;
}

.adjustment-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 5px;
}

.adjustment-icon {
    width: 32px;
    height: 32px;
    background-color: #444;
    border: 1px solid #555;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.adjustment-icon:hover {
    background-color: #555;
}

.adjustment-icon::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#brightness-icon::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M12 3v1m0 16v1m8-9h-1m-16 0H3m15.6 6.4l-.7.7m-11.2-11.2l-.7.7m11.2-11.2l-.7-.7m-11.2 11.2l-.7-.7"/></svg>');
}

#levels-icon::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M3 9h18M3 15h18M6 6v12M18 6v12"/></svg>');
}

#curves-icon::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M3 3c6 6 12 12 18 18"/></svg>');
}

#exposure-icon::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M12 3v18m-9-9h18"/></svg>');
}

.layer-item {
    padding: 5px;
    background-color: #444;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 3px;
}

.layer-item:hover {
    background-color: #555;
}

.layer-item.active {
    background-color: #666;
    border-left: 2px solid #fff;
}

.layer-visibility {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.layer-visibility.visible {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>');
}

.layer-visibility.hidden {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>');
}

.layer-options {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.layer-mode, .layer-opacity, .layer-fill {
    margin-left: 5px;
    padding: 2px 5px;
    background-color: #2a2a2a;
    border: 1px solid #555;
    border-radius: 3px;
    font-size: 12px;
}

.layer-lock {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    margin-left: 5px;
}

.layer-lock.locked {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M12 11v-4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-4m-6 0h4m-4 0v4"/></svg>');
}

.collapsed-icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    margin: 10px auto;
    display: block;
    transition: transform 0.3s ease;
}

#dock-right-1 .collapsed-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M4 12h16M12 4l8 8-8 8"/></svg>');
}

#dock-right-2 .collapsed-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M4 12h16M12 4l8 8-8 8"/></svg>');
}

#dock-right-1.collapsed .collapsed-icon,
#dock-right-2.collapsed .collapsed-icon {
    transform: rotate(180deg);
}

#dock-right-1.collapsed .dock-content,
#dock-right-2.collapsed .dock-content {
    display: none;
}

#dock-right-1.collapsed .dock-tabs,
#dock-right-2.collapsed .dock-tabs {
    display: none;
}

canvas {
    border: 1px solid #555;
    background-color: #fff;
}

.toolbar-btn {
    width: 40px;
    height: 40px;
    background-color: #444;
    border: none;
    cursor: pointer;
    margin-bottom: 5px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
}

.toolbar-btn:hover {
    background-color: #555;
}

.toolbar-btn.active {
    background-color: #666;
    border-left: 2px solid #fff;
}

.toolbar-btn::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.toolbar-btn:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 60px;
    background-color: #555;
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
}

#move-tool::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M12 2v20m10-10H2m15-7l-5 5m-5-5l5 5m5 5l-5-5m-5 5l5-5"/></svg>');
}

#marquee-tool::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><rect x="3" y="3" width="18" height="18" fill="none" stroke-dasharray="3,3"/></svg>');
}

#lasso-tool::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M7 7c0-2.2 1.8-4 4-4s4 1.8 4 4c0 1.1-.4 2.1-1.2 2.8L15 15c0 1.1-.9 2-2 2h-2c-1.1 0-2-.9-2-2l1.2-5.2C8.4 9.1 7 8.1 7 7z"/></svg>');
}

#crop-tool::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M6 2v14a2 2 0 0 0 2 2h14m-18 0h14m-14 0V6a2 2 0 0 1 2-2h14"/></svg>');
}

#brush-tool::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M18.37 2.63a2 2 0 0 1 2.83 2.83L7.76 18.9a3 3 0 0 1-4.24 0l-1.42-1.42a3 3 0 0 1 0-4.24L15.54 2.63a2 2 0 0 1 2.83 0z"/></svg>');
}

#eraser-tool::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M15 3l6 6-9 9H3l-3-3 9-9 6-6z"/></svg>');
}

#text-tool::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M20 4H4v4h16V4zM12 8v12m-4-4h8"/></svg>');
}

#zoom-tool::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>');
}