/* ==========================================================================
   Dryft — Dashboard Widgets (Gridstack)
   - No CSS Grid on #widget-grid (Gridstack uses absolute positioning)
   - Visible row spacing that doesn't rely on Gridstack's margin/gutter
   - Resize handles pulled inward so they don't sit on the row boundary
   - Brand-friendly card look
   ========================================================================== */

:root {
    /* Visual spacing around each card (both axes) */
    --widget-gap: 20px;
    /* Card visuals (fallbacks; your brand.css can override) */    
    --widget-card-radius: 8px;
}

    /* ---- Gridstack container ------------------------------------------------- */
    .grid-stack[data-grid-root] {
        position: relative !important; /* Gridstack expects relative parent */
        background: var(--app-surface-bg); /* different from card to reveal gaps */
        min-height: 200px;
        margin-left: 0px;
        contain: layout paint; /* smoother dragging */
    }

    /* Do NOT turn the container into a CSS grid (conflicts with Gridstack) */
    .grid-stack[data-grid-root] {
        /* no display:grid, no gap, no grid-template-columns */
    }

    /* ---- Items & spacing ----------------------------------------------------- */
    /* Items are absolutely positioned by Gridstack. We create a visible gap by
   padding INSIDE each item; the card then sits inset, revealing the grid bg. */

    /* Create the visible gap via inner padding */
        .grid-stack[data-grid-root] > .grid-stack-item {
            position: absolute !important;
            padding: var(--widget-gap) !important; /* your gap */
            box-sizing: border-box !important;
            background: transparent !important;
        }

    /* Ensure card doesn’t fill the gap area */
        .grid-stack[data-grid-root] > .grid-stack-item > .grid-stack-item-content.card {
            height: calc(100% - var(--widget-gap)) !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            background: var(--widget-card-bg, #161a22) !important;
            border: 1px solid rgba(255,255,255,.08) !important;
            box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
        }

  .gridstack-boot {
    opacity: 0;
    }

    .gridstack-boot.gridstack-ready {
        opacity: 1;
        transition: opacity .12s linear;
    }

/* Card internals */
.grid-stack-item .card-header {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--widget-card-border);
    font-weight: 600;
    user-select: none;
    cursor: move; /* drag handle */
    background-color: var(--widget-card-header-bg);
    color: var(--widget-card-header-fg);
}

.grid-stack-item .card-body {
    padding: .75rem;
    flex: 1 1 auto;
    overflow: auto;
}

/* ---- Resize handles (pull inward so they don't sit on the gap) ----------- */
.grid-stack-item .ui-resizable-handle {
    z-index: 20;
}

/* bottom / bottom-right / bottom-left handles moved up */
.grid-stack-item .ui-resizable-s,
.grid-stack-item .ui-resizable-se,
.grid-stack-item .ui-resizable-sw {
    bottom: 6px !important;
}

/* side handles moved in a bit */
.grid-stack-item .ui-resizable-e,
.grid-stack-item .ui-resizable-w {
    top: 6px !important;
    bottom: 6px !important;
}

/* Optional: draw a small visual cue for SE handle */
.grid-stack-item .ui-resizable-se::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--widget-card-border);
    border-bottom: 2px solid var(--widget-card-border);
    opacity: .6;
}

/* ---- Accessibility & polish --------------------------------------------- */
.grid-stack-item:focus-within .card {
    outline: 2px solid color-mix(in oklab, var(--widget-card-border) 45%, #7aa2f7);
    outline-offset: 0;
}

/* Soft scrollbars inside widget bodies */
.grid-stack-item .card-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.25) transparent;
}

    .grid-stack-item .card-body::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .grid-stack-item .card-body::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.25);
        border-radius: 8px;
    }

/* ---- Responsive tweaks (optional) --------------------------------------- */
@media (max-width: 992px) {
    :root {
        --widget-gap: 10px;
    }
}

@media (max-width: 576px) {
    :root {
        --widget-gap: 8px;
    }
}