:root {
--sipandu-primary: #0d285c;
--sipandu-dark:    #0b224d;
--sipandu-darker:  #0a1f44;
--sipandu-accent:  #ffd700; --sipandu-text:    #fff;
--sipandu-text-muted: #aaa;
} html, body {
margin: 0;
padding: 0;
} body.logged-in #wpadminbar {
display: none !important;
}
body.logged-in {
padding-top: 0 !important;
} .site-content,
.site-container, 
#page, 
#content, 
.grid-container, 
.site-main {
max-width: none !important;
width: 100% !important; 
padding-left: 0 !important;
padding-right: 0 !important; 
margin: 0 !important;
}
#primary, .content-area {
width: auto;
max-width: none;
padding: 0; 
margin: 0;
} #sipandu-page-wrapper {
display: flex;
min-height: 100vh;
} #main {
flex-grow: 1;
transition: margin-left 0.3s ease;
padding: 20px;
padding-top: 70px; box-sizing: border-box;
} #sipandu-sidebar-nav {
width: 80px; 
position: fixed;
top: 0;
left: 0;
height: 100vh;
background-color: var(--sipandu-primary);
color: var(--sipandu-text);
z-index: 100;
overflow-x: hidden;
overflow-y: auto;
transition: width 0.3s ease;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
} body.sidebar-expanded #sipandu-sidebar-nav {
width: 250px;
}
body.sidebar-expanded #main {
margin-left: 250px;
} body.sidebar-collapsed #main {
margin-left: 80px; 
} .sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
min-height: 60px;
background-color: var(--sipandu-dark);
box-shadow: 0 1px 0 rgba(255,255,255,0.05);
} body.sidebar-collapsed #sipandu-logo-container {
opacity: 0; 
width: 0; 
pointer-events: none;
padding: 0;
margin: 0;
overflow: hidden;
transition: all 0.3s;
}
#sipandu-logo-container {
transition: all 0.3s;
white-space: nowrap;
}
#sipandu-sidebar-toggle {
cursor: pointer;
font-size: 1.2rem;
color: var(--sipandu-text);
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
} body.sidebar-collapsed #sipandu-sidebar-toggle {
margin-left: auto; 
margin-right: auto;
width: 100%;
} .user-profile {
display: flex;
align-items: center;
padding: 15px;
border-bottom: 1px solid rgba(255,255,255,0.1);
white-space: nowrap;
transition: all 0.3s;
overflow: hidden; 
}
.profile-avatar i {
font-size: 2.5rem;
margin-right: 10px; 
color: var(--sipandu-accent);
transition: all 0.3s;
flex-shrink: 0;
} body.sidebar-collapsed .user-profile-details,
body.sidebar-collapsed .logout-icon-sidebar {
opacity: 0;
width: 0;
margin: 0;
padding: 0;
overflow: hidden;
display: none;
}
body.sidebar-collapsed .user-profile {
justify-content: center;
padding: 0; 
height: 60px;
}
body.sidebar-collapsed .profile-avatar i {
margin-right: 0;
}
.user-profile-details {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.role-text {
font-size: 0.8rem;
color: var(--sipandu-text-muted);
margin: 0;
}
.logout-icon-sidebar {
margin-left: 10px;
font-size: 1.2rem;
color: var(--sipandu-text);
cursor: pointer;
transition: color 0.2s;
}
.logout-icon-sidebar:hover { color: var(--sipandu-accent); } .sidebar-menu {
list-style: none;
padding: 10px 0;
margin: 0;
}
.menu-category-title {
font-size: 0.8rem;
color: #88aadd;
padding: 10px 15px 5px 15px;
text-transform: uppercase;
font-weight: bold;
white-space: nowrap;
transition: all 0.3s;
} body.sidebar-collapsed .menu-category-title {
opacity: 0;
height: 0;
padding-top: 0;
padding-bottom: 0;
margin: 0;
overflow: hidden;
}
.sidebar-menu li a {
display: flex;
align-items: center;
color: var(--sipandu-text);
text-decoration: none;
padding: 10px 15px;
white-space: nowrap;
position: relative;
border-left: 3px solid transparent;
transition: all 0.3s ease-out; 
} .sidebar-menu li a:hover,
.sidebar-menu li.current-menu-item > a {
background-color: var(--sipandu-dark);
color: var(--sipandu-accent);
transform: translateX(3px); 
box-shadow: 0 0 8px rgba(255, 215, 0, 0.15); 
border-left-color: var(--sipandu-accent);
}
.sidebar-menu li.current-menu-item > a {
font-weight: bold;
box-shadow: 0 0 12px rgba(255, 215, 0, 0.3); 
} .menu-item-icon {
font-size: 1.2rem;
width: 30px;
text-align: center;
color: var(--sipandu-text); 
flex-shrink: 0;
transition: color 0.3s; 
} .sidebar-menu li a:hover .menu-item-icon,
.sidebar-menu li.current-menu-item > a .menu-item-icon {
color: var(--sipandu-accent); 
} .sidebar-link-text {
opacity: 1;
transition: all 0.3s;
margin-left: 10px;
} body.sidebar-collapsed .sidebar-menu li a {
height: 60px; 
padding: 0 !important; 
justify-content: center !important; 
align-items: center !important; 
}
body.sidebar-collapsed .sidebar-link-text,
body.sidebar-collapsed .arrow-icon {
display: none;
width: 0;
margin: 0;
opacity: 0;
} .menu-item-dropdown {
cursor: pointer;
}
.menu-item-dropdown > a { width: 100%;
box-sizing: border-box;
} body.sidebar-collapsed .arrow-icon {
display: none;
}
.arrow-icon {
margin-left: auto;
transition: transform 0.3s;
}
.arrow-icon.rotated {
transform: rotate(90deg);
}
.submenu {
list-style: none;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: var(--sipandu-darker);
}
.submenu.active {
max-height: 500px; 
}
.submenu li a {
padding-left: 55px;
font-size: 0.9rem;
color: #ccc;
border-left: 3px solid transparent; 
}
.submenu li a:hover,
.submenu li.current-menu-item a {
background-color: #081a38;
color: var(--sipandu-accent); 
border-left: 3px solid var(--sipandu-accent); 
transform: translateX(3px); 
} #sipandu-header-wrapper {
position: fixed;
top: 0;
right: 0;
z-index: 50;
height: 60px;
background-color: var(--sipandu-primary); 
color: var(--sipandu-text);
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 20px;
transition: width 0.3s ease, left 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
body.sidebar-collapsed #sipandu-header-wrapper {
left: 80px;
width: calc(100% - 80px);
}
body.sidebar-expanded #sipandu-header-wrapper {
left: 250px;
width: calc(100% - 250px);
}
#sipandu-public-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
#sipandu-public-nav ul li a {
color: var(--sipandu-text);
text-decoration: none;
padding: 10px 15px;
font-size: 0.9rem;
display: flex;
align-items: center;
transition: background-color 0.2s;
}
#sipandu-public-nav ul li a:hover {
background-color: #1e3a6c;
color: #FF6700;
}
#sipandu-public-nav i {
margin-right: 5px;
}
#mobile-toggle {
display: none;
cursor: pointer;
color: var(--sipandu-text);
font-size: 1.2rem;
} #sipandu-custom-footer {
transition: margin-left 0.3s ease;
background-color: #1e3a6c;
color: var(--sipandu-text);
padding-top: 40px;
border-top: 5px solid var(--sipandu-accent);
}
body.sidebar-collapsed #sipandu-custom-footer {
margin-left: 80px;
}
body.sidebar-expanded #sipandu-custom-footer {
margin-left: 250px;
}
.footer-content {
display: flex;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px 20px 20px;
}
.footer-column {
flex: 1 1 250px;
padding: 10px 15px;
}
.footer-column h4 {
color: var(--sipandu-accent);
font-size: 1.1rem;
margin-bottom: 15px;
border-bottom: 2px solid rgba(255,255,255, 0.1);
padding-bottom: 5px;
}
.footer-column p {
font-size: 0.9rem;
line-height: 1.6;
color: #ccc;
}
.footer-informasi ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-informasi ul li a {
display: block;
color: #ccc;
text-decoration: none;
font-size: 0.9rem;
padding: 5px 0;
transition: color 0.2s;
}
.footer-informasi ul li a:hover {
color: var(--sipandu-accent);
}
.footer-informasi i {
font-size: 0.7rem;
margin-right: 8px;
color: var(--sipandu-accent);
}
.social-icons a {
color: var(--sipandu-text);
font-size: 1.8rem;
margin-right: 15px;
transition: color 0.2s;
}
.social-icons a:hover {
color: var(--sipandu-accent);
}
.footer-copyright {
text-align: center;
background-color: #1a315f;
padding: 10px 20px;
font-size: 0.8rem;
color: #88aadd;
} @media (max-width: 768px) {
.site-container, #page, #content, .grid-container, .site-main, .main-navigation, .site-header, body {
padding-left: 0 !important;
padding-right: 0 !important; 
margin-left: 0 !important;
margin-right: 0 !important; 
width: 100% !important; 
overflow-x: hidden;
}
#main, 
#sipandu-custom-footer {
margin-left: 0 !important;
}
#main {
padding-top: 60px !important; 
padding-left: 15px !important;
padding-right: 15px !important;
padding-bottom: 20px !important; 
width: 100% !important;
box-sizing: border-box;
}
#sipandu-header-wrapper {
left: 0 !important; 
width: 100vw !important;
margin-right: 0 !important;
padding-left: 15px !important; 
padding-right: 15px !important; 
justify-content: space-between; 
}
#mobile-toggle {
display: block;
}
#sipandu-sidebar-nav {
transform: translateX(-100%); width: 250px;
z-index: 2000; 
}
body.sidebar-expanded #sipandu-sidebar-nav {
transform: translateX(0); } #sipandu-public-nav .link-text {
display: none !important; 
} .mobile-hide {
display: none !important;
}
}