/*Write your custom css in this file.*/

/* ========================================
   RESIZABLE SIDEBAR STYLES
   ======================================== */

/* Resize handle - thanh kéo bên phải sidebar */
.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    background: transparent;
    z-index: 1010;
    transition: background-color 0.2s ease;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle.active {
    background: linear-gradient(90deg, transparent 0%, rgba(0, 123, 255, 0.3) 50%, transparent 100%);
}

/* Visual indicator line */
.sidebar-resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 40px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.2s ease, height 0.2s ease;
}

.sidebar-resize-handle:hover::after,
.sidebar-resize-handle.active::after {
    opacity: 1;
    height: 60px;
    background: rgba(0, 123, 255, 0.5);
}

/* Sidebar khi đang resize */
.sidebar.resizing {
    transition: none !important;
    user-select: none;
}

.sidebar.resizing * {
    user-select: none !important;
    pointer-events: none;
}

/* Body khi đang resize */
body.sidebar-resizing {
    cursor: ew-resize !important;
    user-select: none !important;
}

body.sidebar-resizing * {
    cursor: ew-resize !important;
}

/* Overlay khi đang resize để ngăn hover effects */
body.sidebar-resizing::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    cursor: ew-resize;
}

/* Sidebar với custom width */
.sidebar.resizable {
    transition: width 0.15s ease-out;
    min-width: 200px;
    max-width: 450px;
}

/* Page container cũng cần transition */
.page-container.resizable-transition {
    transition: margin-left 0.15s ease-out;
}

/* Sidebar brand cũng thay đổi theo width */
.sidebar.resizable .sidebar-brand {
    transition: width 0.15s ease-out;
}

/* Navbar cũng cần điều chỉnh theo sidebar width */
.navbar-custom {
    transition: left 0.15s ease-out;
}

/* Không áp dụng resize khi sidebar đã thu nhỏ (toggled) */
.sidebar-toggled .sidebar-resize-handle {
    display: none !important;
}

.sidebar-toggled .sidebar.resizable {
    width: 70px !important;
    min-width: 70px !important;
}

/* Double-click indicator tooltip */
.sidebar-resize-handle[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.sidebar-resize-handle:hover[data-tooltip]::before {
    opacity: 1;
}

/* Responsive - ẩn resize handle trên mobile */
@media (max-width: 990px) {
    .sidebar-resize-handle {
        display: none !important;
    }
    
    .sidebar.resizable {
        width: 250px !important;
        min-width: unset !important;
        max-width: unset !important;
    }
}