/**
 * bs-layer.css - Styles for bs-layer.js
 * Version: 2.2.0-advanced
 */

/* Base */
.bs-layer {
    box-sizing: border-box;
}

.bs-layer .layer-breadcrumbs span:hover {
    text-decoration: underline;
}

/* Resizer Base */
.bs-layer-resizer {
    position: absolute;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.05);
    transition: background 0.2s;
}

.bs-layer-resizer:hover {
    background: rgba(0, 123, 255, 0.5);
}

/* Grip dots for non-center */
.bs-layer:not([data-position="center"]) .bs-layer-resizer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.bs-layer:not([data-position="center"]) .bs-layer-resizer:hover::after {
    background: #fff;
}

/* Right (Resize from Left side) */
.bs-layer[data-position="right"] .bs-layer-resizer {
    top: 0;
    bottom: 0;
    left: 0;
    width: 16px;
    cursor: col-resize;
    transform: translateX(-50%);
}

.bs-layer[data-position="right"] .bs-layer-resizer::after {
    width: 4px;
    height: 30px;
}

/* Left (Resize from Right side) */
.bs-layer[data-position="left"] .bs-layer-resizer {
    top: 0;
    bottom: 0;
    right: 0;
    width: 16px;
    cursor: col-resize;
    transform: translateX(50%);
}

.bs-layer[data-position="left"] .bs-layer-resizer::after {
    width: 4px;
    height: 30px;
}

/* Bottom (Resize from Top side) */
.bs-layer[data-position="bottom"] .bs-layer-resizer {
    top: 0;
    left: 0;
    right: 0;
    height: 16px;
    cursor: row-resize;
    transform: translateY(-50%);
}

.bs-layer[data-position="bottom"] .bs-layer-resizer::after {
    width: 30px;
    height: 4px;
}

/* Top (Resize from Bottom side) */
.bs-layer[data-position="top"] .bs-layer-resizer {
    bottom: 0;
    left: 0;
    right: 0;
    height: 16px;
    cursor: row-resize;
    transform: translateY(50%);
}

.bs-layer[data-position="top"] .bs-layer-resizer::after {
    width: 30px;
    height: 4px;
}

/* Center (Corner resize) */
.bs-layer[data-position="center"] .bs-layer-resizer {
    bottom: 0;
    right: 0;
    width: 25px;
    height: 25px;
    cursor: nwse-resize;
    z-index: 1060;
}

/* Visual Corner Grip */
.bs-layer[data-position="center"]::after {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 12px 12px;
    border-color: transparent transparent rgba(0, 0, 0, 0.3) transparent;
    pointer-events: none;
    z-index: 1061;
}

.bs-layer[data-position="center"] .bs-layer-resizer:hover~ ::after {
    border-color: transparent transparent #0d6efd transparent;
}

/* Draggable Header */
.layer-draggable {
    cursor: move;
    user-select: none;
}

.layer-draggable:active {
    cursor: grabbing;
}

/* Footer */
.layer-footer {
    background: inherit;
}

/* Animations */
.bs-layer {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bs-layer[data-position="center"] {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================================================
   MOBILE RESPONSIVE (< 576px)
   ================================================ */
@media (max-width: 575.98px) {

    /* All positions become full screen on mobile */
    .bs-layer {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
    }

    /* Hide maximize button on mobile */
    .bs-layer .btn-toggle-full-width {
        display: none !important;
    }

    /* Hide resizer on mobile */
    .bs-layer-resizer {
        display: none !important;
    }

    /* Disable dragging on mobile */
    .layer-draggable {
        cursor: default !important;
    }

    /* Adjust header padding */
    .bs-layer .layer-header {
        padding: 0.75rem !important;
    }

    /* Adjust body padding */
    .bs-layer .layer-body {
        padding: 0.75rem !important;
    }

    /* Footer full width */
    .bs-layer .layer-footer {
        padding: 0.75rem !important;
    }
}