/** * CMS admin shell: light/dark themes, accent palettes, modern sidebar. * Driven by . */ :root { --cms-font: "Inter", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --cms-radius: 10px; --cms-radius-sm: 8px; --cms-sidebar-width: 290px; } /* Accent presets (primary + soft bg for light sidebar highlights) */ html[data-accent="blue"] { --cms-accent: #3b82f6; --cms-accent-hover: #2563eb; --cms-accent-soft: rgba(59, 130, 246, 0.12); --cms-accent-contrast: #fff; } html[data-accent="emerald"] { --cms-accent: #10b981; --cms-accent-hover: #059669; --cms-accent-soft: rgba(16, 185, 129, 0.14); --cms-accent-contrast: #fff; } html[data-accent="purple"] { --cms-accent: #8b5cf6; --cms-accent-hover: #7c3aed; --cms-accent-soft: rgba(139, 92, 246, 0.14); --cms-accent-contrast: #fff; } html[data-accent="rose"] { --cms-accent: #f43f5e; --cms-accent-hover: #e11d48; --cms-accent-soft: rgba(244, 63, 94, 0.14); --cms-accent-contrast: #fff; } html[data-accent="amber"] { --cms-accent: #f59e0b; --cms-accent-hover: #d97706; --cms-accent-soft: rgba(245, 158, 11, 0.18); --cms-accent-contrast: #1a1a1a; } html[data-accent="indigo"] { --cms-accent: #6366f1; --cms-accent-hover: #4f46e5; --cms-accent-soft: rgba(99, 102, 241, 0.14); --cms-accent-contrast: #fff; } /* Light theme surface tokens */ html[data-theme="light"], html:not([data-theme]) { --cms-page-bg: #f3f4f6; --cms-content-bg: #f3f4f6; --cms-card-bg: #ffffff; --cms-card-border: rgba(15, 23, 42, 0.06); --cms-text: #0f172a; --cms-text-muted: #64748b; --cms-header-bg: #ffffff; --cms-header-border: rgba(15, 23, 42, 0.08); --cms-input-bg: #ffffff; --cms-input-border: rgba(15, 23, 42, 0.12); --cms-sidebar-bg: #ffffff; --cms-sidebar-border: rgba(15, 23, 42, 0.08); --cms-sidebar-text: #334155; --cms-sidebar-muted: #94a3b8; --cms-sidebar-section-bg: transparent; --cms-footer-bg: #ffffff; --cms-footer-border: rgba(15, 23, 42, 0.08); --cms-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } html[data-theme="dark"] { --cms-page-bg: #0f1419; --cms-content-bg: #0f1419; --cms-card-bg: #1a2332; --cms-card-border: rgba(148, 163, 184, 0.12); --cms-text: #f1f5f9; --cms-text-muted: #94a3b8; --cms-header-bg: #151c27; --cms-header-border: rgba(148, 163, 184, 0.12); --cms-input-bg: #1a2332; --cms-input-border: rgba(148, 163, 184, 0.2); --cms-sidebar-bg: #151c27; --cms-sidebar-border: rgba(148, 163, 184, 0.1); --cms-sidebar-text: #e2e8f0; --cms-sidebar-muted: #64748b; --cms-sidebar-section-bg: transparent; --cms-footer-bg: #151c27; --cms-footer-border: rgba(148, 163, 184, 0.12); --cms-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); } html[data-theme="light"] body.cms-admin, html:not([data-theme]) body.cms-admin, html[data-theme="dark"] body.cms-admin { font-family: var(--cms-font); color: var(--cms-text); background-color: var(--cms-page-bg); } /* Layout */ body.cms-admin .wrapper { background-color: var(--cms-page-bg); } body.cms-admin .content-wrapper { background-color: var(--cms-content-bg) !important; color: var(--cms-text); } body.cms-admin .content-header h1 { color: var(--cms-text); } body.cms-admin .breadcrumb-item, body.cms-admin .breadcrumb-item a { color: var(--cms-text-muted); } body.cms-admin .main-footer { background-color: var(--cms-footer-bg); border-top: 1px solid var(--cms-footer-border); color: var(--cms-text-muted); } body.cms-admin .main-footer a { color: var(--cms-accent); } /* Top navbar */ body.cms-admin .main-header.navbar { background-color: var(--cms-header-bg) !important; border-bottom: 1px solid var(--cms-header-border) !important; } body.cms-admin .main-header .nav-link { color: var(--cms-text-muted) !important; } body.cms-admin .main-header .nav-link:hover { color: var(--cms-text) !important; } body.cms-admin .navbar-search-block { background-color: var(--cms-header-bg); border-color: var(--cms-header-border); } body.cms-admin .form-control-navbar { background-color: var(--cms-input-bg); color: var(--cms-text); border-color: var(--cms-input-border); } /* Cards & boxes */ body.cms-admin .card { background-color: var(--cms-card-bg); border: 1px solid var(--cms-card-border); box-shadow: var(--cms-shadow); border-radius: var(--cms-radius); } body.cms-admin .card-header { background-color: transparent; border-bottom-color: var(--cms-card-border); color: var(--cms-text); } body.cms-admin .small-box, body.cms-admin .info-box { border-radius: var(--cms-radius); } /* Primary / accent buttons alignment */ body.cms-admin .btn-primary { background-color: var(--cms-accent); border-color: var(--cms-accent); } body.cms-admin .btn-primary:hover { background-color: var(--cms-accent-hover); border-color: var(--cms-accent-hover); } /* ——— Sidebar shell ——— */ /* No !important: AdminLTE .sidebar-mini.sidebar-collapse must win (4.6rem rail). */ body.cms-admin .main-sidebar, body.cms-admin .main-sidebar::before { width: var(--cms-sidebar-width); } body.cms-admin .main-sidebar { background-color: var(--cms-sidebar-bg) !important; border-right: 1px solid var(--cms-sidebar-border); box-shadow: none; } /* Match AdminLTE layout-fixed brand strip to sidebar width (not mini-collapsed rail; see below) */ body.cms-admin.layout-fixed .main-sidebar .brand-link { width: var(--cms-sidebar-width) !important; } @media (min-width: 992px) { /* Collapsed icon rail — must match AdminLTE (overrides wider --cms-sidebar-width). */ body.cms-admin.sidebar-mini.sidebar-collapse .main-sidebar, body.cms-admin.sidebar-mini.sidebar-collapse .main-sidebar::before { width: 4.6rem !important; } body.cms-admin.sidebar-mini.sidebar-collapse .main-sidebar .brand-link { width: 4.6rem !important; } } /* Full hide when sidebar is toggled off (non–mini modes) */ body.cms-admin.sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md):not(.sidebar-mini-xs) .main-sidebar, body.cms-admin.sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md):not(.sidebar-mini-xs) .main-sidebar::before { margin-left: calc(-1 * var(--cms-sidebar-width)) !important; } /* Push main column to match wider sidebar (AdminLTE default 250px). Exclude mini collapsed: our :not() chain beats AdminLTE 4.6rem otherwise. */ @media (min-width: 768px) { body.cms-admin:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav):not(.sidebar-mini.sidebar-collapse):not(.sidebar-mini-md.sidebar-collapse):not(.sidebar-mini-xs.sidebar-collapse) .content-wrapper, body.cms-admin:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav):not(.sidebar-mini.sidebar-collapse):not(.sidebar-mini-md.sidebar-collapse):not(.sidebar-mini-xs.sidebar-collapse) .main-footer, body.cms-admin:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav):not(.sidebar-mini.sidebar-collapse):not(.sidebar-mini-md.sidebar-collapse):not(.sidebar-mini-xs.sidebar-collapse) .main-header { margin-left: var(--cms-sidebar-width) !important; } } /* sidebar-mini: expanded hover / focus width (AdminLTE uses 250px) */ @media (min-width: 992px) { body.cms-admin.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover, body.cms-admin.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused { width: var(--cms-sidebar-width) !important; } body.cms-admin.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-link, body.cms-admin.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused .brand-link { width: var(--cms-sidebar-width) !important; } body.cms-admin.sidebar-mini.sidebar-collapse.layout-fixed .main-sidebar:hover .brand-link, body.cms-admin.sidebar-mini.sidebar-collapse.layout-fixed .main-sidebar.sidebar-focused .brand-link { width: var(--cms-sidebar-width) !important; } } body.cms-admin .main-sidebar.sidebar-dark-success, body.cms-admin .main-sidebar .sidebar-dark-success { background-color: var(--cms-sidebar-bg) !important; } body.cms-admin .main-sidebar .cms-brand-wrap { display: flex; align-items: stretch; border-bottom: 1px solid var(--cms-sidebar-border); background-color: var(--cms-sidebar-bg); } body.cms-admin .main-sidebar .cms-brand-wrap .brand-link { border-bottom: none; flex: 1; display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 0.75rem 0.85rem 1rem; } body.layout-navbar-fixed .wrapper .main-sidebar .cms-brand-wrap .brand-link { padding-top: 0.85rem; padding-bottom: 0.85rem; } body.cms-admin .main-sidebar .brand-link { background-color: var(--cms-sidebar-bg); transition: padding 0.2s ease; } body.cms-admin .main-sidebar .brand-link .brand-image { max-height: 36px; width: 36px; object-fit: cover; } body.cms-admin .main-sidebar .brand-link .brand-text { color: var(--cms-text) !important; font-weight: 600; font-size: 1.05rem; flex: 1; letter-spacing: -0.02em; } body.cms-admin .cms-brand-collapse { display: inline-flex; align-items: center; justify-content: center; width: 40px; margin: 0.6rem 0.75rem 0.6rem 0; border-radius: var(--cms-radius-sm); color: var(--cms-sidebar-muted); border: 1px solid var(--cms-sidebar-border); background: transparent; flex-shrink: 0; cursor: pointer; transition: background 0.15s, color 0.15s; align-self: center; } body.cms-admin .cms-brand-collapse:hover { background: var(--cms-accent-soft); color: var(--cms-accent); } /* Sidebar search */ body.cms-admin .cms-sidebar-search-wrap { padding: 0.75rem 1rem 0.5rem; } body.cms-admin .cms-sidebar-search { width: 100%; border-radius: var(--cms-radius-sm); border: 1px solid var(--cms-input-border); background-color: var(--cms-input-bg); color: var(--cms-text); padding: 0.45rem 0.75rem 0.45rem 2.25rem; font-size: 0.875rem; transition: border-color 0.15s, box-shadow 0.15s; } body.cms-admin .cms-sidebar-search:focus { outline: none; border-color: var(--cms-accent); box-shadow: 0 0 0 3px var(--cms-accent-soft); } body.cms-admin .cms-sidebar-search-wrap { position: relative; } body.cms-admin .cms-sidebar-search-wrap .cms-sidebar-search-icon { position: absolute; left: 1.6rem; top: 50%; transform: translateY(-50%); margin-top: 2px; color: var(--cms-sidebar-muted); font-size: 0.85rem; pointer-events: none; } /* Section headers */ body.cms-admin .cms-sidebar .nav-header.cms-sidebar-section { color: var(--cms-sidebar-muted) !important; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 1rem 1rem 0.35rem; margin-top: 0.25rem; background: transparent; } body.cms-admin .cms-sidebar .nav-link { border: none !important; border-radius: var(--cms-radius-sm) !important; color: var(--cms-sidebar-text) !important; margin: 2px 0.75rem; padding: 0.55rem 0.85rem !important; display: flex; align-items: center; gap: 0.7rem; } body.cms-admin .cms-sidebar .nav-link p { margin: 0; flex: 1; font-size: 0.93rem; font-weight: 500; line-height: 1.35; } body.cms-admin .cms-sidebar .nav-icon { font-size: 1.08rem; opacity: 0.9; width: 1.45rem; text-align: center; } body.cms-admin .cms-sidebar .nav-link:hover { background-color: var(--cms-accent-soft) !important; color: var(--cms-text) !important; } /* Active — light: left bar; dark: filled pill */ html[data-theme="light"] body.cms-admin .cms-sidebar .nav-link.active, html:not([data-theme]) body.cms-admin .cms-sidebar .nav-link.active { background-color: var(--cms-accent-soft) !important; color: var(--cms-accent) !important; box-shadow: inset 3px 0 0 0 var(--cms-accent); } html[data-theme="dark"] body.cms-admin .cms-sidebar .nav-link.active { background-color: var(--cms-accent) !important; color: var(--cms-accent-contrast) !important; box-shadow: none; } html[data-theme="dark"] body.cms-admin .cms-sidebar .nav-link.active .nav-icon { color: var(--cms-accent-contrast) !important; } /* Tree submenu */ body.cms-admin .cms-sidebar .nav-treeview { padding-left: 0.25rem; } body.cms-admin .cms-sidebar .nav-treeview .nav-link { font-size: 0.85rem; padding-left: 2rem !important; } body.cms-admin .cms-sidebar .nav-treeview .nav-icon { font-size: 0.75rem; } /* Sidebar user */ body.cms-admin .cms-sidebar-user { margin-top: auto; padding: 1rem; border-top: 1px solid var(--cms-sidebar-border); display: flex; align-items: center; gap: 0.75rem; background: var(--cms-sidebar-bg); } body.cms-admin .cms-sidebar-user-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cms-sidebar-border); } body.cms-admin .cms-sidebar-user-name { font-size: 0.9rem; font-weight: 600; color: var(--cms-text); line-height: 1.25; } body.cms-admin .cms-sidebar-user-meta { font-size: 0.75rem; color: var(--cms-sidebar-muted); line-height: 1.2; } body.cms-admin .sidebar { display: flex; flex-direction: column; height: calc(100vh - 57px); overflow: hidden; } body.cms-admin .cms-sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 0.5rem; } /* Remove legacy sidebar footer */ body.cms-admin .sidebar-custom { display: none; } /* Theme dropdown */ body.cms-admin .cms-theme-panel.dropdown-menu { min-width: 280px; padding: 1rem; border-radius: var(--cms-radius); box-shadow: var(--cms-shadow); background: var(--cms-card-bg); border: 1px solid var(--cms-card-border); } body.cms-admin .cms-theme-panel .cms-theme-title { font-size: 0.95rem; font-weight: 600; color: var(--cms-text); } body.cms-admin .cms-theme-panel .cms-theme-sub { font-size: 0.75rem; color: var(--cms-text-muted); margin-bottom: 0.75rem; } body.cms-admin .cms-mode-toggle { display: flex; border-radius: var(--cms-radius-sm); overflow: hidden; border: 1px solid var(--cms-input-border); margin-bottom: 1rem; } body.cms-admin .cms-mode-btn { flex: 1; border: none; background: var(--cms-input-bg); color: var(--cms-text-muted); padding: 0.45rem 0.5rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.35rem; transition: background 0.15s, color 0.15s; } body.cms-admin .cms-mode-btn.active { background: var(--cms-accent); color: var(--cms-accent-contrast); } body.cms-admin .cms-palette-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } body.cms-admin .cms-palette-item { position: relative; border: 2px solid var(--cms-card-border); border-radius: var(--cms-radius-sm); padding: 0.5rem; padding-right: 1.75rem; cursor: pointer; text-align: left; background: var(--cms-input-bg); transition: border-color 0.15s, box-shadow 0.15s; } body.cms-admin .cms-palette-check { position: absolute; top: 6px; right: 8px; } body.cms-admin .cms-palette-item:hover { border-color: var(--cms-accent); } body.cms-admin .cms-palette-item.selected { border-color: var(--cms-accent); box-shadow: 0 0 0 2px var(--cms-accent-soft); } body.cms-admin .cms-palette-swatches { display: flex; gap: 4px; margin-bottom: 6px; } body.cms-admin .cms-palette-swatch { width: 22px; height: 22px; border-radius: 4px; } body.cms-admin .cms-palette-name { font-size: 0.72rem; font-weight: 600; color: var(--cms-text); } body.cms-admin .cms-palette-hex { font-size: 0.65rem; color: var(--cms-text-muted); font-family: ui-monospace, monospace; } body.cms-admin .cms-palette-check { float: right; color: var(--cms-accent); font-size: 0.85rem; } /* Tables & forms in dark */ html[data-theme="dark"] body.cms-admin .table { color: var(--cms-text); } html[data-theme="dark"] body.cms-admin .table-bordered td, html[data-theme="dark"] body.cms-admin .table-bordered th { border-color: var(--cms-card-border); } html[data-theme="dark"] body.cms-admin .form-control { background-color: var(--cms-input-bg); border-color: var(--cms-input-border); color: var(--cms-text); } html[data-theme="dark"] body.cms-admin .form-control:focus { background-color: var(--cms-input-bg); color: var(--cms-text); } html[data-theme="dark"] body.cms-admin .modal-content { background-color: var(--cms-card-bg); color: var(--cms-text); border-color: var(--cms-card-border); } html[data-theme="dark"] body.cms-admin .dropdown-menu { background-color: var(--cms-card-bg); border-color: var(--cms-card-border); } html[data-theme="dark"] body.cms-admin .dropdown-item { color: var(--cms-text); } html[data-theme="dark"] body.cms-admin .dropdown-item:hover { background-color: var(--cms-accent-soft); } html[data-theme="dark"] body.cms-admin .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--cms-text) !important; } html[data-theme="dark"] body.cms-admin .select2-dropdown { background-color: var(--cms-card-bg); border-color: var(--cms-card-border); } /* Collapsed sidebar: point collapse chevron outward */ body.sidebar-collapse .main-sidebar .cms-brand-collapse i { transform: rotate(180deg); } /** * AdminLTE mini-collapse + our flex nav-links: width:0 on

does not shrink * correctly with flex, which stacks characters vertically (“C” column bug). * When the rail is collapsed (and not hover-expanded), fully hide labels, * submenus, search field, and tighten brand / user. */ @media (min-width: 768px) { body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-brand-wrap, body.sidebar-mini-md.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-brand-wrap { justify-content: center; } body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-brand-wrap .brand-link, body.sidebar-mini-md.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-brand-wrap .brand-link { justify-content: center; flex: 0 0 auto; padding-left: 0 !important; padding-right: 0 !important; } body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-brand-wrap .brand-text, body.sidebar-mini-md.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-brand-wrap .brand-text { display: none !important; visibility: hidden !important; width: 0 !important; overflow: hidden !important; } /* Top header hamburger still toggles; hide chevron in narrow rail to match AdminLTE */ body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-brand-collapse, body.sidebar-mini-md.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-brand-collapse { display: none !important; } body.sidebar-mini.sidebar-collapse .main-sidebar:hover .cms-brand-collapse, body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .cms-brand-collapse, body.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .cms-brand-collapse, body.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .cms-brand-collapse { display: inline-flex !important; } /* Search: icon-only hint when rail is narrow */ body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar-search-wrap .cms-sidebar-search, body.sidebar-mini-md.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar-search-wrap .cms-sidebar-search { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: 0 !important; opacity: 0 !important; } body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar-search-wrap, body.sidebar-mini-md.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar-search-wrap { display: flex; justify-content: center; align-items: center; padding: 0.55rem 0.25rem; } body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar-search-wrap .cms-sidebar-search-icon, body.sidebar-mini-md.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar-search-wrap .cms-sidebar-search-icon { position: static; transform: none; margin-top: 0; opacity: 0.55; font-size: 1rem; } body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar .nav-header.cms-sidebar-section, body.sidebar-mini-md.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar .nav-header.cms-sidebar-section { display: none !important; } body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar .nav-sidebar > .nav-item > .nav-link, body.sidebar-mini-md.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar .nav-sidebar > .nav-item > .nav-link { justify-content: center; margin-left: 0.35rem; margin-right: 0.35rem; padding-left: 0 !important; padding-right: 0 !important; } body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar .nav-sidebar > .nav-item > .nav-link > p, body.sidebar-mini-md.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar .nav-sidebar > .nav-item > .nav-link > p { display: none !important; flex: none !important; width: 0 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; visibility: hidden !important; opacity: 0 !important; } body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar .nav-sidebar > .nav-item > .nav-treeview, body.sidebar-mini-md.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar .nav-sidebar > .nav-item > .nav-treeview { display: none !important; } body.sidebar-mini.sidebar-collapse .main-sidebar:hover .cms-sidebar .nav-sidebar > .nav-item > .nav-treeview, body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .cms-sidebar .nav-sidebar > .nav-item > .nav-treeview, body.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .cms-sidebar .nav-sidebar > .nav-item > .nav-treeview, body.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .cms-sidebar .nav-sidebar > .nav-item > .nav-treeview { display: block !important; } body.sidebar-mini.sidebar-collapse .main-sidebar:hover .cms-sidebar .nav-sidebar > .nav-item > .nav-link > p, body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .cms-sidebar .nav-sidebar > .nav-item > .nav-link > p, body.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .cms-sidebar .nav-sidebar > .nav-item > .nav-link > p, body.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .cms-sidebar .nav-sidebar > .nav-item > .nav-link > p { display: block !important; flex: 1 !important; width: auto !important; min-width: 0 !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } body.sidebar-mini.sidebar-collapse .main-sidebar:hover .cms-sidebar-search-wrap .cms-sidebar-search, body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .cms-sidebar-search-wrap .cms-sidebar-search, body.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .cms-sidebar-search-wrap .cms-sidebar-search, body.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .cms-sidebar-search-wrap .cms-sidebar-search { position: relative !important; width: 100% !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; opacity: 1 !important; padding: 0.45rem 0.75rem 0.45rem 2.25rem !important; } body.sidebar-mini.sidebar-collapse .main-sidebar:hover .cms-sidebar-search-wrap, body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .cms-sidebar-search-wrap, body.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .cms-sidebar-search-wrap, body.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .cms-sidebar-search-wrap { display: block; padding: 0.75rem 1rem 0.5rem; } body.sidebar-mini.sidebar-collapse .main-sidebar:hover .cms-sidebar-search-wrap .cms-sidebar-search-icon, body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .cms-sidebar-search-wrap .cms-sidebar-search-icon, body.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .cms-sidebar-search-wrap .cms-sidebar-search-icon, body.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .cms-sidebar-search-wrap .cms-sidebar-search-icon { position: absolute; left: 1.6rem; top: 50%; transform: translateY(-50%); margin-top: 2px; opacity: 1; } /* Icon rail: soft active affordance instead of full-height solid block */ body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar .nav-sidebar > .nav-item > .nav-link.active, body.sidebar-mini-md.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar .nav-sidebar > .nav-item > .nav-link.active { background-color: var(--cms-accent-soft) !important; color: var(--cms-accent) !important; box-shadow: inset 3px 0 0 0 var(--cms-accent) !important; } body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar .nav-sidebar > .nav-item > .nav-link.active .nav-icon, body.sidebar-mini-md.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar .nav-sidebar > .nav-item > .nav-link.active .nav-icon { color: var(--cms-accent) !important; } body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar-user .cms-sidebar-user-text, body.sidebar-mini-md.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar-user .cms-sidebar-user-text { display: none !important; } body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar-user, body.sidebar-mini-md.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .cms-sidebar-user { justify-content: center; padding: 0.65rem 0.35rem; } } /* Login page */ body.login-page { font-family: var(--cms-font); } html[data-theme="dark"] body.login-page { background: var(--cms-page-bg) !important; color: var(--cms-text); } html[data-theme="dark"] body.login-page .card { background-color: var(--cms-card-bg); border-color: var(--cms-card-border); color: var(--cms-text); } html[data-theme="dark"] body.login-page .card .form-control { background: var(--cms-input-bg); border-color: var(--cms-input-border); color: var(--cms-text); } html[data-theme="dark"] body.login-page .login-box-msg { color: var(--cms-text-muted); } /* Soft loading state when swapping main content (fullscreen SPA navigation) */ .wrapper > .content-wrapper.cms-spa-loading { opacity: 0.55; pointer-events: none; transition: opacity 0.15s ease; } /* Select2 in browser fullscreen: top-layer stacking can hide the dropdown behind the shell */ html:fullscreen .select2-dropdown, html:-webkit-full-screen .select2-dropdown, html:-moz-full-screen .select2-dropdown, html:-ms-fullscreen .select2-dropdown { z-index: 2147483646 !important; } html:fullscreen .select2-container--open, html:-webkit-full-screen .select2-container--open, html:-moz-full-screen .select2-container--open, html:-ms-fullscreen .select2-container--open { z-index: 2147483646 !important; }