/* ── GridStack Container ────────────────────────────────────────────────── */

#module-grid {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: transparent;
    overflow: hidden;
}

#module-grid .grid-stack-item {
    background: transparent;
    border: none;
    box-shadow: none;
    pointer-events: auto;
    overflow: visible;
}

#module-grid .grid-stack-item-content {
    background: transparent;
    pointer-events: auto;
    overflow: hidden;
    border-radius: var(--radius, 8px);
}

.grid-stack > .grid-stack-placeholder > .placeholder-content {
    border: 2px dashed var(--accent, #0060cc);
    background: transparent;
}

/* ── Module Root ───────────────────────────────────────────────────────── */

.module {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg);
    color: var(--fg);
    border: 2px solid var(--border);
    border-radius: var(--radius, 8px);
    box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.25));
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
}

/* ── Panel ─────────────────────────────────────────────────────────────── */

.module-panel .module-titlebar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--accent);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
    min-height: 28px;
}

.module-panel .module-titlebar:active {
    cursor: grabbing;
}

.module-panel .module-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.module-panel .module-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.3px;
}

.module-panel .module-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.8;
}

.module-panel .module-btn:hover,
.module-panel .module-btn:active {
    opacity: 1;
    background: rgba(255,255,255,0.2);
}

.module-panel .module-btn-close {
    font-size: 16px;
    font-weight: 400;
}

.module-panel .module-btn-minimize {
    font-size: 18px;
    font-weight: 700;
    line-height: 0.6;
}

.module-panel .module-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
}

/* ── Banner ────────────────────────────────────────────────────────────── */

.module-banner {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    padding: 10px 16px;
    border-radius: 0;
    animation: banner-slide-in 200ms ease-out;
}

@keyframes banner-slide-in {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── Drawer ─────────────────────────────────────────────────────────────── */

.module-drawer {
    border-radius: 0;
    animation: drawer-slide-in 200ms ease-out;
}

.module-drawer[data-snap="right"] {
    animation: drawer-slide-right 200ms ease-out;
}

@keyframes drawer-slide-in {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

@keyframes drawer-slide-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ── Fixed ─────────────────────────────────────────────────────────────── */

.module-fixed {
    overflow: visible;
}

/* ── Resize Handle ─────────────────────────────────────────────────────── */

.zui-resize-handle {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity 100ms;
}

.grid-cell:hover .zui-resize-handle {
    opacity: 0.4;
}

.zui-resize-handle::after {
    content: '';
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--fg, #fff);
    border-bottom: 2px solid var(--fg, #fff);
}

.module-fixed {
    cursor: grab;
}

.module-fixed:active {
    cursor: grabbing;
}

.module-compact {
    align-items: center;
    justify-content: center;
    padding: 4px;
    min-width: calc(var(--btn-size) + 8px);
    min-height: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.compact-btn {
    width: var(--btn-size);
    height: var(--btn-size);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 50ms, transform 50ms;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.compact-btn:active {
    transform: scale(0.94);
    background: var(--accent-active);
    color: #fff;
    border-color: var(--accent-active);
}

.compact-btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.compact-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ── Night Mode ────────────────────────────────────────────────────────── */

[data-theme="night"] .module {
    background: var(--bg);
    color: var(--fg);
    border-color: var(--border);
}

[data-theme="night"] .module-compact,
[data-theme="night"] .scalebar-container,
[data-theme="night"] .online-status-module,
[data-theme="night"] .mode-selector {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

[data-theme="night"] .module-panel .module-titlebar {
    background: var(--accent);
}

/* ── Glove Mode ────────────────────────────────────────────────────────── */

[data-gloves="on"] .module-panel .module-titlebar {
    min-height: 36px;
    padding: 8px 14px;
}

[data-gloves="on"] .module-panel .module-btn {
    width: 28px;
    height: 28px;
}

/* ── Closed module placeholder — collapsed bar that holds grid position ── */

.hive-module--placeholder {
    opacity: 0.3;
}

.hive-module--placeholder .grid-stack-item-content {
    overflow: hidden;
}

.hive-module--placeholder .module-panel .module-titlebar,
.hive-module--placeholder .module-panel .module-body,
.hive-module--placeholder .module-body {
    display: none;
}

.hive-module--placeholder .module {
    display: none;
}