:root {
    --theme-base-color: #dbeafe;
    --sidebar-width: 260px;
    --sidebar-bg: var(--theme-base-color);
    --sidebar-hover: #bfdbfe;
    --sidebar-text: #1e3a8a;
    --sidebar-active: #1d4ed8;
    --sidebar-active-bg: #eff6ff;
    --header-height: 60px;
    --bg-body: var(--theme-base-color); 
    --primary: #0d6efd;
    --transition-speed: 0.3s;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

body {
    background-color: var(--bg-body);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    padding-top: var(--header-height);
}

/* --- Scroll Lock Utility --- */
body.no-scroll { overflow: hidden; }

/* --- Utility Classes Removed to avoid Bootstrap conflicts --- */

/* --- Header / Top Bar --- */
.header {
    position: fixed; top: 0; left: 0; right: 0; width: 100%; height: var(--header-height);
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    display: flex; align-items: center; padding: 0 20px; z-index: 1000;
}

.toggle-btn { font-size: 1.5rem; color: #012970; background: none; border: none; cursor: pointer; margin-right: 20px; }

.header-brand {
    font-size: 1.25rem; font-weight: 700; color: #012970; letter-spacing: 0.5px; display: flex; align-items: center; margin-right: auto; text-decoration: none;
}
.header-brand i { margin-right: 10px; color: var(--primary); font-size: 1.5rem; }

.header-actions { display: flex; align-items: center; gap: 20px; }

/* Desktop Search Bar */
.search-bar {
    display: flex; align-items: center; background: #f6f9ff; border: 1px solid #e0e6ed; border-radius: 4px; padding: 0; overflow: hidden;
    transition: border 0.2s;
}
.search-bar:focus-within { border-color: var(--primary); }
.search-bar input { border: none; background: transparent; outline: none; padding: 8px 15px; font-size: 0.9rem; color: #012970; width: 220px;}
.search-bar .search-btn { background: #f6f9ff; border: none; padding: 8px 15px; cursor: pointer; color: #899bbd; border-left: 1px solid #e0e6ed; transition: 0.2s; }
.search-bar .search-btn:hover { background: var(--primary); color: #fff; }

/* Buttons */
.header-nav-item { position: relative; }
.nav-icon { font-size: 1.3rem; color: #012970; cursor: pointer; transition: color 0.2s; display: flex; align-items: center; background: none; border: none; padding: 0;}
.nav-icon:hover { color: var(--primary); }

.notification-badge {
    position: absolute; top: -5px; right: -8px; background: #dc3545; color: white; font-size: 0.65rem; 
    padding: 2px 6px; border-radius: 50%; font-weight: bold; line-height: 1;
}
.notification-badge-success { background: #198754; }

.user-profile { display: flex; align-items: center; gap: 10px; cursor: pointer; border-left: 1px solid #e0e6ed; padding-left: 20px; background: none; border-top: none; border-right: none; border-bottom: none;}
.user-profile img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; border: 1px solid #e0e6ed; }
.user-info { display: flex; flex-direction: column; text-align: left; font-size: 0.85rem; color: #415471; }
.user-info .name { font-weight: 600; color: #012970; }
.user-info .role { font-size: 0.75rem; color: #899bbd; }

/* --- Right Side Drawer --- */
.right-drawer {
    position: fixed; top: var(--header-height); right: -400px; width: 400px; 
    height: calc(100vh - var(--header-height));
    background: #fff; box-shadow: -5px 0 25px rgba(0,0,0,0.1); z-index: 900;
    transition: right 0.3s ease; display: flex; flex-direction: column; border-left: 1px solid #e0e6ed;
}
.right-drawer.open { right: 0; }
@media (max-width: 500px) { .right-drawer { width: 100%; right: -100%; border-left: none; } }

.drawer-overlay {
    position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; 
    background: rgba(0,0,0,0.4); z-index: 899; display: none;
}
.drawer-overlay.show { display: block; }

.drawer-header {
    padding: 20px; border-bottom: 1px solid #e0e6ed; display: flex; justify-content: space-between; align-items: center; background: #f6f9ff;
}
.drawer-title { font-weight: 700; font-size: 1.15rem; color: #012970; margin: 0; }

.drawer-body { padding: 0; overflow-y: auto; flex-grow: 1; }
.drawer-section { display: none; }

.drawer-item { display: flex; padding: 18px 20px; border-bottom: 1px solid #f6f9ff; text-decoration: none; color: #415471; transition: background 0.2s; gap: 15px;}
.drawer-item:hover { background: #eff6ff; }
.drawer-item i.item-icon { font-size: 1.6rem; margin-top: 2px;}
.drawer-item .text-info h4 { font-size: 0.95rem; margin-bottom: 5px; color: #012970;}
.drawer-item .text-info p { font-size: 0.85rem; margin: 0; color: #899bbd; line-height: 1.4;}
.drawer-item .time { font-size: 0.75rem; color: #aab7cf; margin-top: 6px; display: block; font-weight: 600;}

.drawer-footer-link {
    display: block; text-align: center; padding: 15px; color: var(--primary); 
    font-weight: 600; text-decoration: none; border-bottom: 1px solid #f6f9ff; transition: background 0.2s; font-size: 0.95rem;
}
.drawer-footer-link:hover { background: #eff6ff; }

/* --- Top Search Drawer (Mobile) --- */
.top-search-drawer {
    position: fixed; top: calc(-1 * var(--header-height) - 40px); left: 0; right: 0; height: 80px; 
    background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); z-index: 890; 
    transition: top 0.3s ease; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid #e0e6ed;
}
.top-search-drawer.open { top: var(--header-height); }
.top-search-drawer input { flex-grow: 1; border: 1px solid #e0e6ed; padding: 12px 15px; border-radius: 4px; font-size: 1.05rem; outline: none; }
.top-search-drawer input:focus { border-color: var(--primary); }
.top-search-drawer .search-submit { background: var(--primary); color: #fff; border: none; padding: 13px 25px; margin-left: 10px; border-radius: 4px; cursor: pointer; font-size: 1.1rem;}

/* --- Sidebar --- */
.sidebar {
    position: fixed; top: var(--header-height); left: 0; width: var(--sidebar-width);
    height: calc(100vh - var(--header-height)); background-color: var(--sidebar-bg); color: var(--sidebar-text);
    transition: left var(--transition-speed); z-index: 900; overflow-y: auto; border-right: 1px solid #bfdbfe;
}

.sidebar-nav {
    padding: 10px 12px;
    margin: 0;
    list-style: none;
}

.sidebar-nav li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar-nav .nav-item {
    margin-bottom: 4px;
}

.sidebar-nav .nav-heading {
    font-size: 11px;
    text-transform: uppercase;
    color: #899bbd;
    font-weight: 600;
    margin: 10px 0 5px 15px;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--sidebar-active, #4154f1);
    transition: 0.3s;
    background: var(--sidebar-hover, #f6f9ff);
    padding: 10px 15px;
    border-radius: 4px;
    text-decoration: none;
}

.sidebar-nav .nav-link i {
    font-size: 12px;
    margin-right: 10px;
    color: var(--sidebar-active, #4154f1);
}

.sidebar-nav .nav-link.collapsed {
    color: var(--sidebar-text, #012970);
    background: transparent;
}

.sidebar-nav .nav-link.collapsed i {
    color: #899bbd;
}

.sidebar-nav .nav-link:hover {
    color: var(--sidebar-active, #4154f1);
    background: var(--sidebar-hover, #f6f9ff);
}

.sidebar-nav .nav-link:hover i {
    color: var(--sidebar-active, #4154f1);
}

.sidebar-nav .nav-link .bi-chevron-down {
    margin-right: 0;
    transition: transform 0.2s ease-in-out;
}

.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}

.sidebar-nav .nav-content {
    padding: 4px 0 0 16px;
    margin: 0;
    list-style: none;
}

.sidebar-nav .nav-content a {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--sidebar-text, #012970);
    transition: 0.3s;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 4px;
}

.sidebar-nav .nav-content a i {
    font-size: 12px;
    margin-right: 8px;
    line-height: 0;
    border-radius: 50%;
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
    color: var(--sidebar-active, #4154f1);
    background: var(--sidebar-hover, #f6f9ff);
}

.sidebar-nav .nav-content a.active i {
    background-color: var(--sidebar-active, #4154f1);
}

/* --- Main Content --- */
.main-content {
    margin-left: var(--sidebar-width); padding: 30px; width: calc(100% - var(--sidebar-width)); transition: margin-left var(--transition-speed), width var(--transition-speed);
    flex-grow: 1;
}

body.sidebar-closed .sidebar { left: calc(-1 * var(--sidebar-width)); }
body.sidebar-closed .main-content { margin-left: 0; width: 100%; }
.left-sidebar-overlay { display: none; position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 899; }

/* Responsive Utilities */
.d-show-mobile { display: none; }

@media (max-width: 992px) {
    .sidebar { left: calc(-1 * var(--sidebar-width)); }
    .main-content { margin-left: 0; width: 100%; padding: 20px 15px; }
    body.mobile-sidebar-open .sidebar { left: 0; }
    body.mobile-sidebar-open .left-sidebar-overlay { display: block; }
    
    .d-none-mobile { display: none !important; }
    .d-show-mobile { display: block; }
    .user-info { display: none; }
    .header-brand span { display: none; }
}

/* --- Article Cards --- */
.article-card {
    background: #fff; border-radius: 8px; padding: 30px; margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #e0e6ed;
}
.article-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.article-meta { display: flex; align-items: center; gap: 15px; }
.article-author-img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; }
.article-author-info h5 { margin: 0; font-size: 1rem; color: #012970; font-weight: 600; }
.article-author-info span { font-size: 0.85rem; color: #899bbd; }

.article-category {
    padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #fff;
}
.cat-engineering { background: #0d6efd; }
.cat-product { background: #6f42c1; }
.cat-company { background: #198754; }

.article-title { font-size: 1.6rem; color: #012970; margin-bottom: 10px; font-weight: 700; line-height: 1.3;}
.article-subtitle { font-size: 1.15rem; color: #415471; margin-bottom: 20px; font-weight: 400; line-height: 1.4;}
.article-body { font-size: 1rem; color: #444; line-height: 1.8; margin-bottom: 25px; }
.article-footer { display: flex; align-items: center; gap: 20px; border-top: 1px solid #f6f9ff; padding-top: 20px; flex-wrap: wrap;}
.action-btn { background: none; border: none; color: #899bbd; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: color 0.2s; font-size: 0.95rem; font-weight: 500;}
.action-btn:hover { color: var(--primary); }
.action-btn.like:hover { color: #198754; }
.action-btn.dislike:hover { color: #dc3545; }

/* --- Footer --- */
.footer {
    padding: 20px 30px; background: #fff; border-top: 1px solid #e0e6ed; color: #415471; 
    font-size: 0.9rem; margin-left: var(--sidebar-width); transition: margin-left var(--transition-speed);
    display: flex; justify-content: space-between; align-items: center;
}
body.sidebar-closed .footer { margin-left: 0; }
@media (max-width: 992px) { .footer { margin-left: 0; flex-direction: column; text-align: center; gap: 10px; } }

/* --- Back to Top Button --- */
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 800;
    background: var(--primary);
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.back-to-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
}
.back-to-top:hover {
    background: #0b5ed7;
    color: #fff;
}
.back-to-top.active {
    visibility: visible;
    opacity: 1;
}

/* --- Breadcrumb Styling (Fixing the bulleted list) --- */
.pagetitle {
    margin-bottom: 20px;
}
.pagetitle h1 {
    font-size: 24px;
    margin-bottom: 0;
    font-weight: 600;
    color: #012970;
}
/* Removed breadcrumb overrides to avoid Bootstrap conflicts */

/* --- Universal Modals --- */
.universal-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(1, 41, 112, 0.4); z-index: 2000;
    display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
}
.universal-modal-overlay.show { display: flex; }
.universal-modal {
    background: #fff; border-radius: 8px; width: 420px; max-width: 90%;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    transform: translateY(-20px); transition: transform 0.3s ease;
}
.universal-modal-overlay.show .universal-modal { transform: translateY(0); }
.universal-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid #e0e6ed;
}
.universal-modal-header h5 { margin: 0; color: #012970; font-weight: 700; font-size: 1.1rem; }
.universal-modal-close {
    background: none; border: none; font-size: 1.5rem; color: #899bbd; cursor: pointer; line-height: 1; padding: 0;
}
.universal-modal-close:hover { color: #dc3545; }
.universal-modal-body { padding: 20px; color: #444; font-size: 0.95rem; line-height: 1.5; }
.universal-modal-footer {
    padding: 15px 20px; border-top: 1px solid #e0e6ed; display: flex; justify-content: flex-end; gap: 10px; background: #f6f9ff; border-radius: 0 0 8px 8px;
}

/* --- Bootstrap Table Wrapper Styles --- */
.table-scroll-container table td, .table-scroll-container table th {
    white-space: nowrap;
}

.table-scroll-container {
    max-height: 70vh;
    overflow: auto;
}

.table-scroll-container .bootstrap-table td:first-child,
.table-scroll-container .bootstrap-table th:first-child,
.table-scroll-container .bootstrap-table td:last-child,
.table-scroll-container .bootstrap-table th:last-child {
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;
}

.table-scroll-container .bootstrap-table td:first-child,
.table-scroll-container .bootstrap-table th:first-child {
    left: 0;
}

.table-scroll-container .bootstrap-table td:last-child,
.table-scroll-container .bootstrap-table th:last-child {
    right: 0;
    box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1);
}

.table-scroll-container .bootstrap-table th:first-child,
.table-scroll-container .bootstrap-table th:last-child {
    z-index: 3;
}

.bst-row-action {
    cursor: pointer;
    margin: 0 5px;
    font-size: 1.1rem;
    text-decoration: none;
}

.bst-row-action:hover {
    opacity: 0.7;
}