/* Existing Truncate and Modal Styles */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: smaller;
    font-style: italic;
}

.truncate-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.modal-dialog.large {
    width: 80% !important;
    max-width: unset;
}

.modal-dialog.mid-large {
    width: 50% !important;
    max-width: unset;
}

@media (max-width:900px) {
    .modal-dialog.large { width: 100% !important; max-width: unset; }
    .modal-dialog.mid-large { width: 100% !important; max-width: unset; }
    .modal-dialog { margin: unset !important; }
}

/* Viewer Modal Styles */
#viewer_modal .btn-close {
    position: absolute;
    z-index: 999999;
    background: unset;
    color: white;
    border: unset;
    font-size: 27px;
    top: 0;
}

#viewer_modal .modal-dialog {
    width: 80%;
    max-width: unset;
    height: calc(90%);
}

#viewer_modal .modal-content {
    background: black;
    border: unset;
    height: calc(100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

#viewer_modal img, #viewer_modal video {
    max-height: calc(100%);
    max-width: calc(100%);
}

/* Table and Product Styles */
table.dataTable th, table.dataTable td {
    padding: 5px !important;
}

.card.d-flex { flex-direction: row !important; }
.card.d-flex>img { width: 20% !important; }
.card.d-flex>.card-body { width: 80% !important; }

.product-holder {
    background-color: #fff;
    height: 20vh !important;
    width: 100% !important;
}

.product-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: scale-down !important;
    object-position: center center;
    transition: all ease-in .3s;
}

/* Star Rating Styles */
label.star:before {
    content: '\2605';
    font-family: FontAwesome;
}

/* ============================================================
   LAPTOP SAVERS BRANDING (Blue: #0895d6)
   ============================================================ */

/* 1. Fix Table Background: Reset bg-primary to White */
.bg-primary, 
.card-primary:not(.card-outline) > .card-header {
    background-color: #ffffff !important;
    color: #333 !important;
}

/* 2. Targeted Blue for Buttons & Sidebar Header */
.btn-primary, 
.btn-info,
button[type="submit"],
.brand-link.bg-primary,
.main-sidebar .brand-link.bg-primary,
.info-box-icon.bg-primary {
    background-color: #0895d6 !important;
    border-color: #0895d6 !important;
    color: #ffffff !important;
}

/* 3. Active Menu Items in Sidebar */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link,
.bg-gradient-primary {
    background-color: #0895d6 !important;
    background: #0895d6 !important;
    color: #ffffff !important;
}

/* 4. Hover Effects */
.btn-primary:hover, 
.btn-primary:active, 
.nav-sidebar .nav-link:hover {
    background-color: #6f7070 !important;
    color: #f5f8f9 !important; /* Text color for sidebar hover */
}

/* Ensure sidebar hover text doesn't turn blue if the background is blue */
.nav-sidebar .nav-link.active:hover {
    color: #ffffff !important;
}

/* 5. Misc UI Elements */
.card-navy.card-outline,
.card-primary.card-outline {
    border-top: 3px solid #0895d6 !important;
}

.main-header.navbar-primary {
    background-color: #0895d6 !important;
}

/* Custom Transaction Styling */
.bg-custom-blue {
    background-color: #0895d6 !important;
    border-color: #0895d6 !important;
    color: #fff !important;
}

.card-outline.card-navy {
    border-top: 3px solid #0895d6 !important;
}