@import url(style.common.css);
@import url(style.sidebar.css);
@import url(style.navbar.css);

:root {
    --sidebar-width: 280px;
    --header-height: 60px;
}

body {
    font-size: 0.95rem;
    background-color: #f8f9fa;
}

/* Layout Structure */
.po-wrapper {
    display: flex;
    min-height: 100vh;
}


/* ---------------  -------------------------------------- */
/* Make Bootstrap 5 go together with ExtJS                
   Bootstrap 5 uses [hidden] { display: none !important; }
   which breaks ExtJS components that use the hidden attribute.
   This rule reverts that behavior inside ExtJS root elements. 
*/
.extjs_root [hidden] {
    display: revert !important;
}


/* Drag & Drop initialization for component bays */
.component-bay {
    min-height: 60px;
}

.component-bay.drag-over {
    outline: 3px dashed #0d6efd;
    background-color: #f8fbff;
}

.grid-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.grid-cell-bottom {
    min-height: 140px;
}

.grid-cell-mid {
    min-height: 160px;
}

.grid-cell-top {
    min-height: 220px;
}

.grid-cell.drag-over {
    outline: 3px dashed #0d6efd;
    background-color: #f8fbff;
}

.portlet-handle {
    cursor: grab;
    user-select: none;
}

.portlet-handle:active {
    cursor: grabbing;
}

.portlet.dragging {
    opacity: .6;
}

/* Portlets fill the width of their drop zone */
.grid-cell .portlet {
    width: 100% !important;
    min-width: 0;
    margin-bottom: 0.5rem;
}


/* Override Bootstrap card-header behavior */
.portlet-header {
    position: relative;
    display: flex;
    /* force single row */
    align-items: center;
    height: 2.25rem;
    /* fixed height */
    padding: 0 0.1rem;
    /* handle close to left side */
    overflow: hidden;
    white-space: nowrap;
    /* absolute no wrapping */
}

/* Title (no drag handle) */
.portlet-title {
    flex: 1 1 auto;
    /* consume available space */
    min-width: 0;
    /* REQUIRED for ellipsis in flexbox */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 6.5rem;
    /* soft reservation for icons */
}

/* Icons overlay the title */
.portlet_icons {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 0.2rem;
    /* distance between icons */
    z-index: 2;
    /* Hidden by default until user hovers the right action zone */
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
}

.portlet_icons a {
    width: 1.0rem;
    height: 1.0rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Invisible hot-zone on the right edge of the header; hovering or
   focusing this zone reveals the action icons. Also keep icons visible
   while hovered so the user can interact with them. */
.portlet_icons_zone {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    /* Cover the entire right half of the  header, with a sensible minimum */
    width: 50%;
    min-width: 150px;
    /* ensure hot-zone is wide enough for comfortable hover */
    z-index: 1;
    background: transparent;
}

.portlet_icons_zone:hover~.portlet_icons,
.portlet_icons_zone:focus~.portlet_icons,
.portlet_icons:hover {
    opacity: 1;
    pointer-events: auto;
}



/* ---------------  ----------------------------------     */