/* ================= ICON ACCENT PALETTES ================= */ .icon-accent-admin{ background: linear-gradient(45deg,#7F00FF 0%, #E100FF 100%); } .icon-accent-academic{ background: linear-gradient(45deg,#FF6B6B 0%, #FFD93D 100%); } .icon-accent-finance{ background: linear-gradient(45deg,#00C9A7 0%, #92FE9D 100%); } .icon-accent-ops{ background: linear-gradient(45deg,#4D96FF 0%, #7F7FD5 100%); } .icon-accent-library{ background: linear-gradient(45deg,#FF8C42 0%, #FF3CAC 100%); } .icon-accent-comm{ background: linear-gradient(45deg,#00C6FF 0%, #0072FF 100%); } .icon-accent-reports{ background: linear-gradient(45deg,#F6D365 0%, #FDA085 100%); } .icon-accent-leave{ background: linear-gradient(45deg,#84FAB0 0%, #8FD3F4 100%); } .icon-accent-settings{ background: linear-gradient(45deg,#C6FFDD 0%, #FBD786 100%); } .icon-accent-home{ background: linear-gradient(45deg,#FF6B6B 0%, #6BCB77 100%); } .icon-accent-enotes{ background: linear-gradient(45deg,#FFD700 0%, #FF7F50 100%); } .accent-wrap{ display:inline-flex; align-items:center; justify-content:center; width:28px; margin-right:8px; } .accent-icon{ -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; font-size:1.05rem; transition: transform .12s, filter .12s; } .accent-icon:hover{ transform: translateY(-2px); filter:brightness(1.05) saturate(1.06); } :root{ --CDA-primary: ; --CDA-secondary: ; --ink: ; } body, .navbar, .nav-link, .dropdown-menu { font-family: 'Poppins', sans-serif; color:var(--ink); } .navbar.bg-dark{ background: linear-gradient(90deg, var(--CDA-secondary), var(--CDA-primary)) !important; } /* Sidebar */ #sidebar{ background: ; color:#ecf0f1; position:fixed; top:56px; left:0; width:240px; height:calc(100vh - 56px); overflow-y:auto; padding:12px 8px; } #sidebar .nav-link{ color:#ecf0f1; display:flex; align-items:center; padding:.5rem .8rem; } #sidebar .nav-link:hover, #sidebar .nav-link.active{ background: ; color:#fff; text-decoration:none; } .nav-header{ text-transform:uppercase; font-weight:700; font-size:.78rem; color:#bfc9d9; padding:.45rem .8rem; } .online-wrap{ display:flex; gap:8px; flex-wrap:wrap; } .online-avatar{ position:relative; width:40px; height:40px; border-radius:50%; overflow:hidden; } .online-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .online-dot{ position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border-radius:50%; background:#28a745; border:2px solid #fff; } .badge-count{ position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 6px; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; background:#ff3b30; border-radius:999px; box-shadow:0 0 0 2px #fff; } .navbar-brand img{ height: 40px; width: 250px; object-fit: contain; margin-left: -30px; /* desktop tweak; overridden on mobile */ } /* =================== LAYOUT (DESKTOP) =================== */ .content-wrapper{ margin-top: 56px; margin-left: 220px; padding: 20px; transition: margin-left .3s; } .content-wrapper.full{ margin-left: 0 !important; } footer{ margin-left: 220px; transition: margin-left .3s; } footer.full{ margin-left: 0 !important; } /* ========================================================= MOBILE/TABLET (≤ 991.98px) - Sidebar off-canvas; opens on click (uses .mobile-sidebar-open on ) - Content is edge-to-edge with a small gap below navbar - Centered/tighter brand in top navbar ========================================================= */ @media (max-width: 991.98px){ /* Sidebar: off-canvas closed by default */ #sidebar{ position: fixed; top: 56px; bottom: 0; left: -260px; /* hidden */ width: 85vw; max-width: 320px; height: auto; transition: left .25s ease-in-out; z-index: 1031; /* above backdrop */ padding: 10px 0; } body.mobile-sidebar-open #sidebar{ left: 0; } /* Backdrop (element should exist in DOM) */ .sidebar-backdrop{ position: fixed; top: 56px; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.35); display: none; z-index: 1030; } body.mobile-sidebar-open .sidebar-backdrop{ display: block; } /* Content: full-bleed, small gap below navbar */ .content-wrapper{ margin: 0 !important; padding: 0 !important; margin-top: calc(56px + 8px) !important; /* 8px breathing room */ } /* Remove side padding from inner containers if present */ .content-wrapper .container, .content-wrapper .container-fluid{ padding-left: 0 !important; padding-right: 0 !important; } /* Footer never reserves gutter on mobile */ footer{ margin-left: 0 !important; } /* Navbar brand centered & tighter */ .navbar .container-fluid{ padding-left: 8px !important; padding-right: 8px !important; } .navbar-brand{ position: absolute; left: 50%; transform: translateX(-50%); margin: 0 !important; padding: 0 !important; } .navbar-brand img{ height: 42px !important; width: auto !important; max-width: 58vw; margin: 0 !important; /* overrides desktop negative margin */ object-fit: contain; } #mark{ display: none !important; } /* hide long system name */ /* Ensure toggles sit above centered brand */ #sidebarToggle, .navbar-toggler{ z-index: 1042; min-width: 44px; } #sidebarToggle{ margin-right: 6px; } .navbar-toggler{ margin-left: auto; } } /* =================== DESKTOP SAFETY RULES (≥ 992px) =================== */ @media (min-width: 992px){ #sidebar{ left: 0; } /* visible by default */ .content-wrapper, footer{ margin-left: 220px; } } /* ── Mobile: sidebar hidden by default, toggled by button ── */ @media (max-width: 991.98px){ /* Sidebar off-canvas */ #sidebar{ position: fixed; top: 56px; /* height of fixed-top navbar */ bottom: 0; left: 0; width: 85vw; max-width: 320px; height: auto; background: var(--sidebar-bg, #2c3e50); transform: translateX(-100%); /* hidden by default */ transition: transform .25s ease-in-out; z-index: 1031; /* above backdrop */ padding: 10px 0; } /* When open */ body.mobile-sidebar-open #sidebar{ transform: translateX(0); } /* Backdrop */ .sidebar-backdrop{ position: fixed; top: 56px; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.35); display: none; z-index: 1030; /* under the sidebar */ } body.mobile-sidebar-open .sidebar-backdrop{ display: block; } /* Content should not reserve space on mobile */ .content-wrapper, footer{ margin-left: 0 !important; } /* Optional: hide desktop-only negative brand margin if you have it */ .navbar-brand img{ margin-left: 0 !important; } } /* Desktop unchanged: keep your fixed-left sidebar */ @media (min-width: 992px){ #sidebar{ transform: none !important; } /* visible */ .sidebar-backdrop{ display: none !important; } } /* Phones: give main content a tiny 4px gutter on both sides */ @media (max-width: 991.98px){ .content-wrapper{ margin-left: 4px !important; margin-right: 4px !important; /* keep your existing gap below the fixed navbar */ margin-top: calc(56px + 8px) !important; } } /* 🍎 ULTRA CARD */ .ultra-online-card{ backdrop-filter: blur(24px); background: rgba(255,255,255,.65); border-radius: 26px; padding: 18px; border: 1px solid rgba(255,255,255,.45); box-shadow: 0 8px 30px rgba(0,0,0,.08), inset 0 1px rgba(255,255,255,.6); transition: all .35s ease; } .ultra-online-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 45px rgba(0,0,0,.12); } /* 🍎 HEADER */ .ultra-online-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; } .ultra-title{ font-weight:600; letter-spacing:.3px; color:#1d1d1f; font-size:17px; } /* 🍎 ICON */ .ultra-icon{ color:#22c55e; font-size:18px; } /* 🍎 BADGE */ .ultra-badge{ background: linear-gradient(135deg,#22c55e,#16a34a); color:white; padding:4px 12px; border-radius:999px; font-weight:600; font-size:13px; box-shadow:0 4px 14px rgba(34,197,94,.35); } /* 🍎 BODY */ .ultra-online-body{ min-height:60px; } /* 🍎 EMPTY STATE */ .ultra-empty{ color:#6e6e73; font-size:14px; } /* 🍎 AVATAR WRAP */ .ultra-online-wrap{ display:flex; flex-wrap:wrap; gap:14px; } /* 🍎 AVATAR BOX */ .ultra-avatar-box{ position:relative; transition: all .3s ease; cursor:pointer; } .ultra-avatar-box:hover{ transform: scale(1.08); } /* 🍎 AVATAR IMAGE */ .ultra-avatar-img{ width:54px; height:54px; border-radius:50%; object-fit:cover; border:3px solid white; box-shadow:0 4px 14px rgba(0,0,0,.15); } /* 🍎 ONLINE DOT */ .ultra-online-dot{ position:absolute; bottom:3px; right:3px; width:14px; height:14px; border-radius:50%; background:#22c55e; border:2px solid white; box-shadow: 0 0 8px #22c55e, 0 0 16px rgba(34,197,94,.7); animation: ultraPulse 2s infinite; } /* 🍎 PULSE ANIMATION */ @keyframes ultraPulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.7);} 70%{ box-shadow:0 0 0 10px rgba(34,197,94,0);} 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0);} } /* Desktop unchanged: keep your fixed-left sidebar */ @media (min-width: 992px){ #sidebar{ transform: none !important; } /* visible */ .sidebar-backdrop{ display: none !important; } } /* Phones: give main content a tiny 4px gutter on both sides */ @media (max-width: 991.98px){ .content-wrapper{ margin-left: 4px !important; margin-right: 4px !important; /* keep your existing gap below the fixed navbar */ margin-top: calc(56px + 8px) !important; } } /* Added arrow indicator */ .submenu-arrow{margin-left:auto;transition:transform .25s;} .nav-link[aria-expanded="true"] .submenu-arrow{transform:rotate(90deg);} /* Added arrow indicator */ .submenu-arrow{margin-left:auto;transition:transform .25s;} .nav-link[aria-expanded="true"] .submenu-arrow{transform:rotate(90deg);}