/* ============================================================ COLORFUL THEME — global chrome restyle for the Sneat admin Loaded last in so it overrides core/theme/demo. Palette harmonised with the dashboard home page: indigo #6366f1 · teal #14b8a6 · amber #f59e0b rose #f43f5e · violet #a855f7 · blue #3b82f6 ============================================================ */ :root { --ct-indigo: #6366f1; --ct-indigo-d: #4f46e5; --ct-violet: #a855f7; --ct-violet-d: #7c3aed; --ct-teal: #14b8a6; --ct-rose: #f43f5e; --ct-amber: #f59e0b; --ct-blue: #3b82f6; --ct-emerald: #10b981; --ct-orange: #f97316; --ct-cyan: #06b6d4; --ct-pink: #ec4899; --ct-ink: #1e293b; --ct-muted: #64748b; /* sidebar — Midnight Teal */ --ct-nav: #0d1b2e; /* deep navy base (main menu) */ --ct-nav-sub: #0d1b2e; /* submenu panel — same color */ --ct-accent: #14b8a6; /* teal accent */ --ct-accent-l: #5eead4; /* teal light (icons/hover) */ } /* ============================================================ 1. SIDEBAR — Midnight Teal (deep navy · single teal accent) ============================================================ */ #layout-menu.menu, #layout-menu.bg-menu-theme { background: var(--ct-nav) !important; border-right: 1px solid rgba(255, 255, 255, .06) !important; box-shadow: 4px 0 24px rgba(2, 6, 23, .35) !important; } /* Brand header */ #layout-menu .app-brand { padding: 1.1rem 1.35rem .5rem; margin-top: .25rem; } #layout-menu .app-brand-link { display: flex; align-items: center; gap: .65rem; flex: 1; min-width: 0; overflow: hidden; } #layout-menu .app-brand .layout-menu-toggle { flex-shrink: 0; } #layout-menu .ct-brand-logo { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; background: #fff; padding: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); flex-shrink: 0; } #layout-menu .ct-brand-text { color: #f8fafc; font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #layout-menu .ct-brand-sub { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #64748b; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #layout-menu .app-brand .layout-menu-toggle i { color: #94a3b8; } /* dividers / shadows */ #layout-menu .menu-divider { border-color: rgba(255, 255, 255, .07) !important; } #layout-menu .menu-inner-shadow { background: linear-gradient(var(--ct-nav) 41%, rgba(13, 27, 46, .5) 95%, transparent) !important; } /* uppercase section labels */ #layout-menu .menu-header { padding: 1.15rem 1.65rem .35rem; margin-top: .15rem; } #layout-menu .menu-header .menu-header-text { color: #5b6b85; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } #layout-menu .menu-header .menu-header-text::before, #layout-menu .menu-header .menu-header-text::after { display: none; } /* base link */ #layout-menu .menu-inner .menu-link { color: #cbd5e1; font-weight: 500; border-radius: 9px; margin: 2px .75rem; padding: .56rem .8rem; transition: background .16s ease, color .16s ease, box-shadow .16s ease; } #layout-menu .menu-inner > .menu-item > .menu-link { font-weight: 500; } #layout-menu .menu-inner .menu-link:hover { color: #fff; } #layout-menu .menu-inner > .menu-item > .menu-link:hover { background: rgba(20, 184, 166, .15); color: #fff; box-shadow: inset 3px 0 0 0 rgba(20, 184, 166, .6); transform: translateX(2px); } /* icon tiles — monochrome, teal-tinted */ #layout-menu .menu-inner > .menu-item > .menu-link .menu-icon { width: 30px; height: 30px; margin-right: 11px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #94a3b8; background: rgba(255, 255, 255, .05); transition: color .16s ease, background .16s ease; } #layout-menu .menu-inner > .menu-item > .menu-link:hover .menu-icon { color: var(--ct-accent-l); background: rgba(20, 184, 166, .12); } /* SELECTED / OPEN / toggled parent — clean SOLID TEAL. #layout-menu.bg-menu-theme + !important beats Sneat's light active rules: .bg-menu-theme .menu-link.active{color:#5a8dee} and active bg #dbe4f3. */ #layout-menu.bg-menu-theme .menu-inner > .menu-item.active > .menu-link, #layout-menu.bg-menu-theme .menu-inner > .menu-item.open > .menu-link, #layout-menu.bg-menu-theme .menu-inner > .menu-item > .menu-link.active { background-color: rgba(13, 27, 46, .6) !important; background-image: none !important; color: #67e8f9 !important; font-weight: 600 !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; border: 1px solid rgba(34, 211, 238, .4) !important; box-shadow: inset 4px 0 0 0 #22d3ee, 0 0 14px rgba(34, 211, 238, .35) !important; } /* no white strips beside the selected bar — keep the main menu navy */ #layout-menu.bg-menu-theme .menu-inner > .menu-item.active, #layout-menu.bg-menu-theme .menu-inner > .menu-item.open { background: transparent !important; } /* the label text — cyan-light (Neon Edge) */ #layout-menu.bg-menu-theme .menu-inner > .menu-item.active > .menu-link div, #layout-menu.bg-menu-theme .menu-inner > .menu-item.open > .menu-link div, #layout-menu.bg-menu-theme .menu-inner > .menu-item > .menu-link.active div { color: #67e8f9 !important; } /* teal/cyan-tinted icon tile on the selected parent */ #layout-menu.bg-menu-theme .menu-inner > .menu-item.active > .menu-link .menu-icon, #layout-menu.bg-menu-theme .menu-inner > .menu-item.open > .menu-link .menu-icon, #layout-menu.bg-menu-theme .menu-inner > .menu-item > .menu-link.active .menu-icon { background: rgba(34, 211, 238, .22) !important; color: #a5f3fc !important; box-shadow: none !important; } /* cyan chevron on the selected parent */ #layout-menu.bg-menu-theme .menu-inner > .menu-item.active > .menu-link.menu-toggle::after, #layout-menu.bg-menu-theme .menu-inner > .menu-item.open > .menu-link.menu-toggle::after { color: #67e8f9 !important; } /* toggle arrow */ #layout-menu .menu-toggle::after { color: #64748b; } #layout-menu .menu-item.active > .menu-toggle::after, #layout-menu .menu-link:hover::after { color: #cbd5e1; } /* sub-menu — darker navy panel + colourful icon tiles + colour-sweep hover */ #layout-menu .menu-sub, #layout-menu .menu-item.open > .menu-sub { position: relative; background-color: var(--ct-nav-sub) !important; border-radius: 0; margin: 0; padding-block: 4px; box-shadow: none; } /* per-item accent colour cycle (teal · blue · amber · violet · rose) */ #layout-menu .menu-sub > .menu-item:nth-child(5n+1) { --g: #14b8a6; --g-soft: rgba(20, 184, 166, .16); } #layout-menu .menu-sub > .menu-item:nth-child(5n+2) { --g: #3b82f6; --g-soft: rgba(59, 130, 246, .16); } #layout-menu .menu-sub > .menu-item:nth-child(5n+3) { --g: #f59e0b; --g-soft: rgba(245, 158, 11, .16); } #layout-menu .menu-sub > .menu-item:nth-child(5n+4) { --g: #a855f7; --g-soft: rgba(168, 85, 247, .16); } #layout-menu .menu-sub > .menu-item:nth-child(5n+5) { --g: #f43f5e; --g-soft: rgba(244, 63, 94, .16); } #layout-menu .menu-sub .menu-link { position: relative; color: #cbd5e1; font-weight: 500; font-size: .85rem; padding-left: 2.6rem; background-image: linear-gradient(var(--g-soft, rgba(255, 255, 255, .06)), var(--g-soft, rgba(255, 255, 255, .06))); background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; transition: background-size .32s ease, color .2s ease; } #layout-menu .menu-sub .menu-link:hover { background-size: 100% 100%; color: #ffffff; } /* colourful glyph icon tile */ #layout-menu .menu-sub .menu-link .menu-sub-icon { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 23px; height: 23px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--g, #94a3b8); background: var(--g-soft, rgba(255, 255, 255, .08)); box-shadow: inset 0 0 0 1px var(--g, #64748b); transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease; } #layout-menu .menu-sub .menu-link:hover .menu-sub-icon { color: #04211b; background: var(--g, #64748b); box-shadow: 0 0 10px var(--g, transparent); transform: translateY(-50%) scale(1.08); } /* active sub-item — teal accent */ #layout-menu .menu-sub .menu-item.active { --g: #14b8a6; --g-soft: rgba(20, 184, 166, .20); } #layout-menu .menu-sub .menu-item.active > .menu-link { color: #ffffff; font-weight: 600; background-color: rgba(20, 184, 166, .14); background-size: 100% 100%; box-shadow: inset 3px 0 0 0 var(--ct-accent); } #layout-menu .menu-sub .menu-item.active > .menu-link .menu-sub-icon { color: #04211b; background: var(--ct-accent); box-shadow: 0 0 8px rgba(20, 184, 166, .5); } /* perfect-scrollbar */ #layout-menu .ps__thumb-y { background: rgba(255, 255, 255, .28) !important; } #layout-menu .ps__rail-y:hover .ps__thumb-y { background: rgba(255, 255, 255, .45) !important; } /* ============================================================ 2. NAVBAR / TOPBAR ============================================================ */ /* Glass Blur — frosted dark navy header (NOTE: do NOT set position here — it would override Sneat's fixed navbar and drop the header down, leaving an empty gap at the top.) */ #layout-navbar.layout-navbar { background: rgba(13, 27, 46, .72) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 4px 20px rgba(2, 6, 23, .3) !important; border-bottom: 1px solid rgba(255, 255, 255, .1); } #layout-navbar.layout-navbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #14b8a6, #22d3ee); } /* topbar search */ #layout-navbar .search-toggler { color: #cbd5e1; font-weight: 500; } #layout-navbar .search-toggler:hover { color: #67e8f9; } #layout-navbar .bx-menu { color: #67e8f9; } /* period filter select — dark glass */ #layout-navbar #filterForm .form-select { border: 1px solid rgba(255, 255, 255, .15); border-radius: 9px; font-size: .82rem; font-weight: 600; color: #e2e8f0; background-color: rgba(255, 255, 255, .08); box-shadow: none; padding: .4rem 2rem .4rem .85rem; transition: all .18s ease; } #layout-navbar #filterForm .form-select option { color: #1e293b; } #layout-navbar #filterForm .form-select:hover { background-color: rgba(255, 255, 255, .14); } #layout-navbar #filterForm .form-select:focus { border-color: #22d3ee; box-shadow: 0 0 0 .15rem rgba(34, 211, 238, .2); } /* notification bell */ #layout-navbar .ct-bell { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 1.3rem; background: rgba(255, 255, 255, .08); transition: all .18s ease; } #layout-navbar .ct-bell:hover { color: #67e8f9; background: rgba(34, 211, 238, .15); } /* user avatar */ #layout-navbar .dropdown-user .avatar { background: linear-gradient(135deg, #22d3ee, #0891b2); padding: 2px; border-radius: 50%; } #layout-navbar .dropdown-user .avatar > img { border: 2px solid #0d1b2e; background: #0d1b2e; } #layout-navbar .dropdown-user .nav-link { display: flex; align-items: center; gap: .55rem; font-weight: 600; color: #f1f5f9; padding: .25rem .5rem; border-radius: 999px; transition: background .18s ease; } #layout-navbar .dropdown-user .nav-link:hover { background: rgba(255, 255, 255, .08); } #layout-navbar .dropdown-user .avatar-online::after { background: var(--ct-emerald); box-shadow: 0 0 0 2px #0d1b2e; } /* frosted white logout button */ #layout-navbar .ct-logout-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 9px; font-size: .82rem; font-weight: 600; color: #ffffff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); transition: all .18s ease; cursor: pointer; } #layout-navbar .ct-logout-btn:hover { background: rgba(244, 63, 94, .85); border-color: rgba(244, 63, 94, .9); color: #fff; } /* ============================================================ 3. BUTTONS · BADGES · GLOBAL POLISH (safe) ============================================================ */ /* Colored buttons — no !important on background so page-level rules with higher specificity can still override; this sheet loads last so it beats Bootstrap defaults. */ .btn-primary { background: linear-gradient(135deg, #6366f1, #7c3aed); border: 0 !important; box-shadow: 0 4px 12px rgba(99, 102, 241, .32); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: linear-gradient(135deg, #4f46e5, #6d28d9); box-shadow: 0 6px 18px rgba(99, 102, 241, .42); } .btn-success { background: linear-gradient(135deg, #14b8a6, #0d9488); border: 0 !important; box-shadow: 0 4px 12px rgba(20, 184, 166, .30); } .btn-danger { background: linear-gradient(135deg, #f43f5e, #e11d48); border: 0 !important; box-shadow: 0 4px 12px rgba(244, 63, 94, .28); } .btn-warning { background: linear-gradient(135deg, #f59e0b, #d97706); border: 0 !important; color: #fff !important; box-shadow: 0 4px 12px rgba(245, 158, 11, .28); } .btn-info { background: linear-gradient(135deg, #3b82f6, #2563eb); border: 0 !important; box-shadow: 0 4px 12px rgba(59, 130, 246, .28); } .btn-dark { background: linear-gradient(135deg, #334155, #1e293b); border: 0 !important; } .btn { border-radius: 9px; font-weight: 600; transition: transform .12s ease, box-shadow .18s ease, background .18s ease; } .btn:active { transform: translateY(1px); } /* form focus accent */ .form-control:focus, .form-select:focus { border-color: var(--ct-indigo); box-shadow: 0 0 0 .18rem rgba(99, 102, 241, .15); } /* cards: softer, friendlier */ .card { border: 1px solid #eef0f6; border-radius: 14px; box-shadow: 0 4px 22px rgba(49, 46, 129, .06); } /* page heading accent — scoped to the breadcrumb title only so pages with their own flat heading classes (.vas-page-title, .page-top h4) are untouched */ .content-header .breadcrumb-wrapper { position: relative; padding-left: .85rem; font-weight: 700; color: var(--ct-ink); } .content-header .breadcrumb-wrapper::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 1.2em; border-radius: 4px; background: linear-gradient(180deg, #6366f1, #a855f7); } /* badge polish */ .badge.bg-label-danger { background: rgba(244, 63, 94, .14) !important; color: #e11d48 !important; } .badge.bg-label-success { background: rgba(20, 184, 166, .14) !important; color: #0d9488 !important; } .badge.bg-label-primary { background: rgba(99, 102, 241, .14) !important; color: #4f46e5 !important; } .badge.bg-label-warning { background: rgba(245, 158, 11, .16) !important; color: #d97706 !important; } /* ============================================================ 4. FOOTER ============================================================ */ .content-footer .footer-link { color: var(--ct-violet-d); font-weight: 700; } .content-footer .ct-heart { color: var(--ct-rose); } /* ============================================================ 5. RESPONSIVE ============================================================ */ @media (max-width: 1199.98px) { #layout-menu.menu, #layout-menu.bg-menu-theme { box-shadow: 0 18px 40px rgba(49, 46, 129, .45) !important; } }