/* CSS for Shared components */

/* *********************************************
    CUSTOM GRIDVIEW
 ********************************************* */
.grid-view { 
    width: 100%; 
    border-radius: 10px;
}
.grid-header { 
    text-transform: capitalize;
    font-size: 16px;
}
/* Icon for ascending sort */
.grid-header a.asc::after {
    content: '\f0de';
    font-family: FontAwesome;
    font-weight: 900;
    margin-left: 5px;
    color: #94a2b8; 
}

/* Icon for descending sort */
.grid-header a.desc::after {
    content: '\f0dd'; /* Font Awesome 4.7 downward arrow (fa-sort-desc) */
    font-family: FontAwesome;
    font-weight: 900;
    margin-left: 5px;
    color: #94a2b8; 

}
.list-view .summary { margin-top: 20px; }
.list-view > .list-item-row {
    border-bottom: 1px solid #eee; /* Border for each row */
}
.list-view > .list-item-row:last-child {
    border-bottom: 0; /* Remove border for the last row */
}

/* *********************************************
    FRAMEWORK/NAV MENU
 ********************************************* */

/* Ensure dropdown-submenu positioning */
.dropdown-submenu {
    position: relative;
}

/* Submenu popping out to the left */
.dropdown-submenu .dropdown-menu.submenu-left {
    top: 0 !important;
    right: 100% !important; /* Position the submenu to the left of the parent */
    left: auto !important;
    margin-top: -5px !important;
    margin-right: -5px !important;
}

/* Submenu popping out to the right */
.dropdown-submenu .dropdown-menu.submenu-right {
    top: 0 !important;
    left: 100% !important; /* Position the submenu to the right of the parent */
    right: auto !important;
    margin-top: -5px !important;
    margin-left: -5px !important;
}

/* Downward caret for dropdown style */
.dropdown-submenu .submenu-caret.caret {
    display: inline-block;
    margin-left: 5px; /* Inline with the text */
}

/* Prevent pseudo-elements from overriding the caret */
.dropdown-submenu .dropdown-toggle::after,
.dropdown-submenu .dropdown-toggle::before {
    display: none !important;
}

/* Position the caret on the right side for dropdown-submenu style */
.dropdown-submenu .dropdown-toggle {
    position: relative; /* Establish positioning context for the caret */
    padding-right: 20px; /* Ensure space for the caret */
}

/* *********************************************
    FRAMEWORK/HEADER
 ********************************************* */

.header,
#shared-header {
    min-height: 45px;
    margin-bottom: 25px;
}
#shared-header .badge { 
    letter-spacing: 0.5px;
    font-size: 1.35rem;
    padding: 4px 15px;
}


/* *********************************************
    FRAMEWORK/ACTION MENU
 ********************************************* */

#shared-action-menu .action-button {
    border-radius: 30%; 
    width: 35px; 
    height: 35px; 
    padding: 0; 
    line-height: 35px; 
    text-align: center;
    transition: background-color 0.2s ease;
    margin: 0;
}
#shared-action-menu .action-button > i { color: #333; }
#shared-action-menu .action-button-wrapper {
    position: relative;
    display: none;
}
#shared-action-menu .action-button-wrapper.always-visible { display: inline-block; }
#shared-action-menu .action-button-wrapper:hover .action-button { background-color: transparent; }
#shared-action-menu .action-button-wrapper .dropdown-menu {
    margin: -7px 15px 0 0;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#shared-action-menu .dropdown-submenu { position: relative; }
#shared-action-menu .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    display: none;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#shared-action-menu .dropdown-submenu:hover > .dropdown-menu { display: block; }



/* *********************************************
    FRAMEWORK/FILTER LIST
 ********************************************* */

#shared-filter-list {
    color: #333;
    line-height: 1.5; /* Improve readability */
    margin-bottom: 8px; /* Space below the filter list */
}

#shared-filter-list .filter-list {
    display: flex; /* Use flexbox for better layout control */
    flex-wrap: wrap; /* Allow wrapping if the filter list is long */
    gap: 5px; /* Space between filter items */
    align-items: center; /* Vertically align items */
}

#shared-filter-list .filter-item {
    display: inline-flex; /* Each filter item is a flex container */
    align-items: center; /* Vertically align label, value, and button */
    border-radius: 12px; /* Rounded corners for a modern look */
    background-color: #f0f0f0;
    border-radius: 10px;
    height: 35px;
    padding: 0 10px;
    margin-left: 5px;
    font: 15px pn;
    text-transform: capitalize;
}

#shared-filter-list label {
    font-size: 12px; /* Smaller font size to reduce visual weight */
    font-family: pn;
    padding-right: 5px;
    opacity: .75;
}

#shared-filter-list .value {
    margin-right: 5px;
    font-size: .9em;
}
#shared-filter-list .btn-clear-filter,
#shared-filter-list button.clear-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    width: 20px; /* Fixed size for the clear button */
    height: 20px;
    font-size:  1.5em;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
    opacity: 0; /* Hidden by default */
    padding: 0;
    margin-top: -10px;
}

#shared-filter-list .filter-item:hover .btn-clear-filter,
#shared-filter-list .filter-item:hover .clear-filter {
    opacity: 1; /* Visible on hover */
}

#shared-filter-list .fa-caret-up,
#shared-filter-list .fa-caret-down {
    font-size: 1.5em;
}


/* *********************************************
    FRAMEWORK/FILTER
 ********************************************* */
.filter-button-container .btn-group {
    margin-right: 10px;
    margin-bottom: 20px;
}
.filter-button-container .btn-filter  {
    border-radius: 25px;
    font: 1em pn;
    letter-spacing: 0;
    background: transparent;
}
.filter-button-container .btn-default:hover,
.filter-button-container .btn-default.set:active,
.filter-button-container .btn-default.set:focus,
.filter-button-container .btn-default.set {
    background: #e0f0fa;
    border-color: #e0f0fa;
}
.filter-button-container .btn-default.set:active,
.filter-button-container .btn-default.set:focus,
.filter-button-container .btn-default.set{
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}
.filter-button-container .btn-default.btn-more-filter {
    border-top-right-radius: 25px !important;
    border-bottom-right-radius: 25px !important;
}
.filter-button-container > .btn-default.set:hover,
.filter .btn-default.set:hover { background: #add7f2 !important; }
.filter-button-container .x {
    background: #e0f0fa;
    font-size: 29px;
    line-height: 45px;
    vertical-align: middle;
    padding: 5px 15px 5px 10px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}
.filter-button-container .x:hover { background: #add7f2; }


/* Typeahead */
.filter-button-container .ui-menu-item { white-space: nowrap; }
.filter-button-container .autocomplete-container {
    padding: 5px 10px;
    min-width: 300px;
    box-sizing: border-box;
}
.filter-button-container .inline-typeahead {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.filter-button-container .inline-typeahead input { 
    border-radius: 25px;
    padding-left: 20px;
}
.filter-button-container .autocomplete {
    width: auto;
    min-width: 200px;
    margin-right: 5px;
    line-height: 45px;
    margin: 0;
}
.filter-button-container .autocomplete-menu {
    max-height: 200px;
    overflow-y: auto;
    min-width: 275px;
}
.filter-button-container .clear-btn {
    display: inline-block;
    margin-left: 5px;
    font-size: 2em;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    background: none; /* Remove blue background */
    border: none;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 50%;
}
.filter-button-container .clear-btn:hover {
    color: #555;
}
.filter-button-container .inline-typeahead .clear-btn {
    position: static; /* Remove absolute positioning */
    transform: none; /* Reset transform */
}

/* *********************************************
    FILES
 ********************************************* */

.file-list .file-row {
    border-bottom: 1px solid #eee;
}

.file-list .file-row:last-child {
    border-bottom: 0;
}

.file-detail .btn-remove-file,
.file-detail .file-item .btn-view-file {
    height: auto;
    width: auto; /* Allows natural width based on content */
    border: none;
    box-sizing: border-box; /* Includes padding and border in dimensions */
    overflow: visible; /* Prevents content cutoff */
    text-align: left;
}

.file-detail .attributes {
    margin-top: 15px;
    font-size: 0.9em;
}

.file-detail .attributes button {
    line-height: 15px;
    height: 15px;
}

.file-detail .file-item i {
    margin-right: 2px;
}

.file-detail .icon {
    margin-left: 10px;
}


#image-detail img {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    background: #f9f9f9;
}

.header-badge { padding: 12px}
.header-badge .badge:hover,
.header-badge .badge:focus { opacity: .75 }
.header-badge .badge {
    font-size: 11pt;
    line-height: 15px;
}
#image-detail .badge-border.link { margin-left: -26px; }
.file-detail .file-item .fa-info-circle {
    cursor: pointer; /* Indicates clickable */
    margin-left: 5px; /* Space between file name and info icon */
}

.file-detail .popover {
    max-width: 200px; /* Limits popover width for readability */
    font-size: 0.9em; /* Matches the details text size */
}

.file-detail .popover-header {
    background-color: #f8f9fa; /* Light background for header */
    font-weight: bold;
}

.file-detail .popover-body {
    padding: 5px 10px; /* Consistent padding */
}

.file-detail .popover-body div {
    margin-bottom: 5px; /* Space between detail lines */
}

.file-detail .popover-body div:last-child {
    margin-bottom: 0; /* Remove margin on last item */
}


/* *********************************************
    TAGS
 ********************************************* */

.tags-container { 
    background: transparent;
    padding: 5px 0 10px 0;
}
.tag-list > .tag-item { 
    margin: 10px 10px 10px 0; 
    line-height: 30px; 
}
.tag-list li { width: 100px; }
.tags-container button {
    height: 30px;
    line-height: 30px;
    opacity: .75;
}
.tags-container button .fa { font-size: 18px; }
.tags-container button .small { font-size: 1em; }
.update-tags-container .tag-list > .tag-item { margin: 5px 15px 5px 0; }
#tag-info-panel {
    white-space: wrap; 
    padding: 0;
    text-align: left;
}
#tag-info-panel p { 
    height: 75px;
    background: #f0f0f0;
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 15px;
}