/* ----------------------------------------------------
   RPG EDITOR PANELS SYSTEM-WIDE STYLING (TYPE 2 UNIFORM)
   ---------------------------------------------------- */

/* All core side/floating panels default structure */
#rpg-editor-operations-panel,
#rpg-editor-tools-panel,
#rpg-npc-creator-panel,
#rpg-light-mask-list-panel,
#rpg-light-editor-panel,
#rpg-quest-editor-panel,
#rpg-abilities-editor-panel,
#rpg-projectile-editor-panel,
#rpg-item-editor-panel,
#rpg-event-editor-panel,
#rpg-bank-editor-panel,
#rpg-chaos-map-device-panel,
#rpg-sprite-configurator-panel {
    position: absolute;
    background-color: rgba(50, 40, 30, 0.90);
    border: 1px solid #8C6D56;
    border-radius: 8px;
    color: #EFEBE0;
    font-size: 0.9em;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    resize: none;
    min-width: 200px;
    min-height: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

/* Specific stacking order */
#rpg-editor-operations-panel,
#rpg-editor-tools-panel {
    z-index: 40002;
}

#rpg-npc-creator-panel,
#rpg-light-mask-list-panel,
#rpg-light-editor-panel,
#rpg-quest-editor-panel {
    z-index: 40003;
}

#rpg-abilities-editor-panel,
#rpg-projectile-editor-panel {
    z-index: 40004;
}

#rpg-item-editor-panel,
#rpg-event-editor-panel {
    z-index: 40005;
}

#rpg-bank-editor-panel {
    z-index: 40005;
}

#rpg-chaos-map-device-panel {
    z-index: 40005;
}

/* Individual Panel Positioning & Default Sizing */
#rpg-editor-operations-panel {
    left: 10px;
    top: 50px;
    width: 200px;
    max-height: calc(100% - 70px);
}

#rpg-editor-tools-panel {
    right: 10px;
    top: 50px;
    width: 450px;
    max-height: calc(100% - 100px);
}

#rpg-npc-creator-panel {
    right: 10px;
    top: 50px;
    width: 350px;
    max-height: calc(100% - 70px);
}

#rpg-light-mask-list-panel {
    left: 10px;
    top: 50px;
    width: 200px;
    max-height: calc(100% - 70px);
}

#rpg-light-editor-panel {
    right: 10px;
    top: 50px;
    width: 350px;
    max-height: calc(100% - 70px);
}

#rpg-quest-editor-panel {
    right: 10px;
    top: 50px;
    width: 350px;
    max-height: calc(100% - 70px);
}

#rpg-abilities-editor-panel {
    right: 10px;
    top: 50px;
    width: 350px;
    max-height: calc(100% - 70px);
}

#rpg-item-editor-panel {
    right: 10px;
    top: 50px;
    width: 350px;
    max-height: calc(100% - 70px);
}

#rpg-event-editor-panel {
    right: 10px;
    top: 50px;
    width: 350px;
    max-height: calc(100% - 70px);
}

#rpg-chaos-map-device-panel {
    right: 10px;
    top: 50px;
    width: 350px;
    height: 480px;
    max-height: calc(100% - 70px);
}

#rpg-sprite-configurator-panel {
    left: 10px;
    top: 50px;
    width: 350px;
    max-height: calc(100% - 70px);
    z-index: 40005;
}

#rpg-sprite-configurator-panel select {
    width: 100%;
}

#rpg-projectile-editor-panel {
    right: 10px;
    top: 50px;
    width: 350px;
    max-height: calc(100% - 70px);
}

#rpg-bank-editor-panel {
    right: 15px;
    top: 55px;
    width: calc(100% - 30px);
    max-width: 1250px;
    height: calc(100% - 85px);
    min-width: 400px;
}

/* ----------------------------------------------------
   UNIFORM HEADER TOGGLE BUTTONS (TYPE 2 DESIGN)
   ---------------------------------------------------- */
#rpg-editor-operations-toggle,
#rpg-editor-tools-toggle,
#rpg-npc-creator-toggle,
#rpg-light-mask-list-toggle,
#rpg-light-editor-toggle,
#rpg-quest-editor-toggle,
#rpg-abilities-editor-toggle,
#rpg-projectile-editor-toggle,
#rpg-item-editor-toggle,
#rpg-event-editor-toggle,
#rpg-bank-editor-toggle,
#rpg-chaos-map-device-toggle {
    background-color: #4a3c30;
    color: #EFEBE0;
    border: none;
    border-bottom: 1px solid #8C6D56;
    padding: 4px 8px;
    font-size: 0.85em;
    font-weight: bold;
    width: 100%;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    height: 26px;
    line-height: 16px;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
}

#rpg-editor-operations-toggle:hover,
#rpg-editor-tools-toggle:hover,
#rpg-npc-creator-toggle:hover,
#rpg-light-mask-list-toggle:hover,
#rpg-light-editor-toggle:hover,
#rpg-quest-editor-toggle:hover,
#rpg-abilities-editor-toggle:hover,
#rpg-projectile-editor-toggle:hover,
#rpg-item-editor-toggle:hover,
#rpg-event-editor-toggle:hover,
#rpg-bank-editor-toggle:hover {
    background-color: #5A4B3E;
}

/* ----------------------------------------------------
   UNIFORM INNER CONTENT PANEL CONTAINERS
   ---------------------------------------------------- */
#rpg-editor-operations-content,
#rpg-editor-tools-content,
#rpg-npc-creator-content,
#rpg-light-mask-list-content,
#rpg-light-editor-content,
#rpg-quest-editor-content,
#rpg-abilities-editor-content,
#rpg-projectile-editor-content,
#rpg-item-editor-content,
#rpg-event-editor-content,
#rpg-bank-editor-content {
    padding: 10px;
    overflow-y: auto;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    gap: 12px;
}

/* Retain special bank inner layout scroll/no-scroll pattern */
#rpg-bank-editor-content {
    overflow-y: hidden !important;
}

/* ----------------------------------------------------
   COLLAPSED STATES (GUARANTEES PERFECT COMPACT VISUAL)
   ---------------------------------------------------- */
#rpg-editor-operations-panel.collapsed,
#rpg-editor-tools-panel.collapsed,
#rpg-npc-creator-panel.collapsed,
#rpg-light-mask-list-panel.collapsed,
#rpg-light-editor-panel.collapsed,
#rpg-quest-editor-panel.collapsed,
#rpg-abilities-editor-panel.collapsed,
#rpg-projectile-editor-panel.collapsed,
#rpg-item-editor-panel.collapsed,
#rpg-event-editor-panel.collapsed,
#rpg-bank-editor-panel.collapsed,
#rpg-chaos-map-device-panel.collapsed {
    resize: none !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
}

#rpg-editor-operations-panel.collapsed #rpg-editor-operations-content,
#rpg-editor-tools-panel.collapsed #rpg-editor-tools-content,
#rpg-npc-creator-panel.collapsed #rpg-npc-creator-content,
#rpg-light-mask-list-panel.collapsed #rpg-light-mask-list-content,
#rpg-light-editor-panel.collapsed #rpg-light-editor-content,
#rpg-quest-editor-panel.collapsed #rpg-quest-editor-content,
#rpg-abilities-editor-panel.collapsed #rpg-abilities-editor-content,
#rpg-projectile-editor-panel.collapsed #rpg-projectile-editor-content,
#rpg-item-editor-panel.collapsed #rpg-item-editor-content,
#rpg-event-editor-panel.collapsed #rpg-event-editor-content,
#rpg-bank-editor-panel.collapsed #rpg-bank-editor-content,
#rpg-chaos-map-device-panel.collapsed #rpg-chaos-map-device-content {
    display: none !important;
}

/* ----------------------------------------------------
   RESIZABLE CORNER GRIP SYSTEM (CUSTOM INTERACTION)
   ---------------------------------------------------- */
.rpg-panel-resizer {
    position: absolute;
    width: 14px;
    height: 14px;
    bottom: 2px;
    z-index: 100000;
    user-select: none;
    -webkit-user-select: none;
}

/* For right-aligned panels, drag handles are on the bottom-left */
.rpg-panel-resizer.bottom-left {
    left: 2px;
    cursor: nesw-resize;
    background: linear-gradient(225deg, 
        transparent 0%, transparent 40%, 
        #8C6D56 40%, #8C6D56 50%, 
        transparent 50%, transparent 60%, 
        #8C6D56 60%, #8C6D56 70%, 
        transparent 70%, transparent 80%, 
        #8C6D56 80%, #8C6D56 90%, 
        transparent 90%);
}

/* For left-aligned panels, drag handles are on the bottom-right */
.rpg-panel-resizer.bottom-right {
    right: 2px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, 
        transparent 0%, transparent 40%, 
        #8C6D56 40%, #8C6D56 50%, 
        transparent 50%, transparent 60%, 
        #8C6D56 60%, #8C6D56 70%, 
        transparent 70%, transparent 80%, 
        #8C6D56 80%, #8C6D56 90%, 
        transparent 90%);
}

/* Hide when panel is collapsed */
.collapsed .rpg-panel-resizer {
    display: none !important;
}

/* ----------------------------------------------------
   UNIFORM RPG SELECT DROPDOWN STYLING
   ---------------------------------------------------- */
#rpg-editor-operations-panel select,
#rpg-editor-tools-panel select,
#rpg-npc-creator-panel select,
#rpg-light-mask-list-panel select,
#rpg-light-editor-panel select,
#rpg-quest-editor-panel select,
#rpg-abilities-editor-panel select,
#rpg-projectile-editor-panel select,
#rpg-item-editor-panel select,
#rpg-event-editor-panel select,
#rpg-bank-editor-panel select,
#rpg-sprite-configurator-panel select {
    background-color: #3B322C;
    color: #EFEBE0;
    border: 1px solid #8C6D56;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.9em;
    font-family: inherit;
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
    height: 28px;
}

#rpg-editor-operations-panel select:hover,
#rpg-editor-tools-panel select:hover,
#rpg-npc-creator-panel select:hover,
#rpg-quest-editor-panel select:hover,
#rpg-abilities-editor-panel select:hover,
#rpg-projectile-editor-panel select:hover,
#rpg-item-editor-panel select:hover,
#rpg-event-editor-panel select:hover,
#rpg-bank-editor-panel select:hover,
#rpg-sprite-configurator-panel select:hover {
    border-color: #A07D65;
    background-color: #4A3C30;
}

/* Styling for inputs and textareas across panels to prevent bright white boxes */
#rpg-quest-editor-panel input[type="text"],
#rpg-quest-editor-panel input[type="number"],
#rpg-quest-editor-panel textarea,
#rpg-npc-creator-panel input[type="text"],
#rpg-npc-creator-panel input[type="number"],
#rpg-npc-creator-panel textarea,
#rpg-item-editor-panel input[type="text"],
#rpg-item-editor-panel input[type="number"],
#rpg-item-editor-panel textarea,
#rpg-event-editor-panel input[type="text"],
#rpg-event-editor-panel input[type="number"],
#rpg-event-editor-panel textarea,
#rpg-abilities-editor-panel input[type="text"],
#rpg-abilities-editor-panel input[type="number"],
#rpg-abilities-editor-panel textarea,
#rpg-projectile-editor-panel input[type="text"],
#rpg-projectile-editor-panel input[type="number"],
#rpg-projectile-editor-panel textarea,
#rpg-sprite-configurator-panel input[type="text"],
#rpg-sprite-configurator-panel input[type="number"],
#rpg-editor-tools-panel input[type="text"],
#rpg-editor-tools-panel input[type="number"] {
    background-color: #3B322C !important;
    color: #EFEBE0 !important;
    border: 1px solid #8C6D56 !important;
    border-radius: 4px !important;
    padding: 5px !important;
    font-family: inherit !important;
    font-size: 0.9em !important;
    box-sizing: border-box !important;
    outline: none !important;
    width: 100%;
}

#rpg-quest-editor-panel input[type="text"]:focus,
#rpg-quest-editor-panel input[type="number"]:focus,
#rpg-quest-editor-panel textarea:focus,
#rpg-npc-creator-panel input[type="text"]:focus,
#rpg-npc-creator-panel input[type="number"]:focus,
#rpg-npc-creator-panel textarea:focus,
#rpg-item-editor-panel input[type="text"]:focus,
#rpg-item-editor-panel input[type="number"]:focus,
#rpg-item-editor-panel textarea:focus,
#rpg-event-editor-panel input[type="text"]:focus,
#rpg-event-editor-panel textarea:focus,
#rpg-editor-tools-panel input[type="text"]:focus,
#rpg-editor-tools-panel input[type="number"]:focus {
    border-color: #A07D65 !important;
    background-color: #4A3C30 !important;
}

#rpg-editor-object-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 4px;
    padding: 5px;
}

#rpg-editor-object-palette button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 2px;
    cursor: pointer;
    background-color: #3b322c;
    border: 1px solid #8c6d56;
    border-radius: 2px;
}

#rpg-editor-object-palette button:hover {
    border-color: #A07D65;
    background-color: #4A3C30;
}

#rpg-editor-object-palette button canvas {
    max-width: 100%;
    max-height: 100%;
}