/* ==========================================================================
Indigo Nova - theme layer for School ERP
--------------------------------------------------------------------------
Restyles AdminLTE 2 + Bootstrap 3 in place. Nothing here depends on new
markup, so all ~459 existing views pick up the design without being touched.
Load LAST, after AdminLTE.css and custom_style.css.
Dark mode is driven by set by nova.js.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens
-------------------------------------------------------------------------- */
:root {
--nova-sidebar-from: #1E1B4B;
--nova-sidebar-to: #312E81;
--nova-sidebar-text: #B9B7DE;
--nova-sidebar-dim: #7E7CAE;
--nova-accent: #7C3AED;
--nova-accent-600: #6D28D9;
--nova-accent-700: #5B21B6;
--nova-accent-soft: rgba(124, 58, 237, .12);
--nova-accent-glow: rgba(124, 58, 237, .28);
--nova-canvas: #F4F4FD;
--nova-surface: #FFFFFF;
--nova-surface-2: #FAFAFF;
--nova-text: #1E2139;
--nova-text-soft: #4A4F6F;
--nova-muted: #6E7391;
--nova-border: #E6E6F4;
--nova-border-soft: #F0F0FA;
--nova-success: #0F9D6E;
--nova-success-soft: rgba(15, 157, 110, .12);
--nova-warning: #D97706;
--nova-warning-soft: rgba(217, 119, 6, .13);
--nova-danger: #DC2F55;
--nova-danger-soft: rgba(220, 47, 85, .12);
--nova-info: #2D74E0;
--nova-info-soft: rgba(45, 116, 224, .12);
--nova-radius: 14px;
--nova-radius-sm: 10px;
--nova-radius-xs: 8px;
--nova-shadow: 0 1px 2px rgba(18, 18, 54, .04), 0 10px 26px -14px rgba(18, 18, 54, .20);
--nova-shadow-lg: 0 2px 6px rgba(18, 18, 54, .06), 0 24px 48px -20px rgba(18, 18, 54, .28);
--nova-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
html[data-nova-theme="dark"] {
--nova-sidebar-from: #14132E;
--nova-sidebar-to: #1E1B4B;
--nova-sidebar-text: #A5A3D0;
--nova-sidebar-dim: #6F6D9C;
--nova-accent: #8B5CF6;
--nova-accent-600: #7C3AED;
--nova-accent-700: #6D28D9;
--nova-accent-soft: rgba(139, 92, 246, .18);
--nova-canvas: #0E0E1F;
--nova-surface: #17172F;
--nova-surface-2: #1D1D3A;
--nova-text: #E8E8F6;
--nova-text-soft: #C3C3DC;
--nova-muted: #9291B4;
--nova-border: #2A2A4D;
--nova-border-soft: #232342;
--nova-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px -14px rgba(0, 0, 0, .6);
--nova-shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 24px 48px -20px rgba(0, 0, 0, .7);
}
/* --------------------------------------------------------------------------
2. Base
-------------------------------------------------------------------------- */
body,
body.hold-transition,
.content-wrapper,
.right-side,
.main-footer {
font-family: var(--nova-font);
color: var(--nova-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { font-size: 14px; letter-spacing: -0.005em; background-color: var(--nova-canvas); }
.content-wrapper,
.right-side { background-color: var(--nova-canvas); }
a { color: var(--nova-accent-600); }
a:hover, a:focus { color: var(--nova-accent-700); }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--nova-font);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--nova-text);
}
::selection { background: var(--nova-accent-glow); }
/* Content header ---------------------------------------------------------- */
.content-header { padding: 22px 22px 6px; background: transparent; }
.content-header > h1 { font-size: 23px; font-weight: 650; margin: 0; }
.content-header > h1 > small { color: var(--nova-muted); font-size: 14px; font-weight: 400; }
.content-header > .breadcrumb {
background: transparent; top: 24px; right: 22px; padding: 0;
font-size: 12.5px; color: var(--nova-muted);
}
.content-header > .breadcrumb a { color: var(--nova-muted); }
.content-header > .breadcrumb a:hover { color: var(--nova-accent-600); }
.content-header > .breadcrumb > .active { color: var(--nova-text); font-weight: 500; }
.content { padding: 12px 22px 26px; }
/* --------------------------------------------------------------------------
3. Sidebar
-------------------------------------------------------------------------- */
.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side,
.main-sidebar,
.left-side {
background: linear-gradient(180deg, var(--nova-sidebar-from) 0%, var(--nova-sidebar-to) 100%);
}
.main-sidebar { box-shadow: 1px 0 0 rgba(255, 255, 255, .05); }
.sidebar { padding-bottom: 24px; }
/* Brand ------------------------------------------------------------------- */
.skin-blue .main-header .logo,
.main-header .logo {
background: transparent;
border-bottom: 1px solid rgba(255, 255, 255, .08);
border-right: none;
color: #fff;
font-family: var(--nova-font);
font-weight: 650;
letter-spacing: -0.02em;
transition: background .18s ease;
}
.skin-blue .main-header .logo:hover,
.main-header .logo:hover { background: rgba(255, 255, 255, .06); }
.main-header .logo { overflow: hidden; }
.main-header .logo img { max-height: 34px; width: auto; }
/* Brand fallback: a school that has not uploaded a logo yet gets its name
rendered instead of a broken image. The ![]()
removes itself on error. */
.nova-brand-text {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.nova-brand-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 9px;
background: linear-gradient(135deg, var(--nova-accent) 0%, var(--nova-accent-700) 100%);
color: #fff; font-size: 15px; font-weight: 700; vertical-align: middle;
}
/* Menu -------------------------------------------------------------------- */
.sidebar-menu { padding: 10px 12px 0; }
.sidebar-menu > li.header,
.skin-blue .sidebar-menu > li.header {
background: transparent;
color: var(--nova-sidebar-dim);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: 20px 12px 8px;
}
.sidebar-menu > li { margin-bottom: 2px; }
.sidebar-menu > li > a,
.skin-blue .sidebar-menu > li > a {
color: var(--nova-sidebar-text);
border-radius: var(--nova-radius-sm);
border-left: none !important;
padding: 10px 12px;
font-size: 14px;
font-weight: 500;
line-height: 1.35;
position: relative;
display: flex;
align-items: center;
transition: background .16s ease, color .16s ease;
}
.sidebar-menu > li > a > .pull-right-container {
position: absolute;
right: 11px;
top: 50%;
margin-top: -7px;
}
.sidebar-menu > li > a > .pull-right-container > .fa-angle-left { font-size: 13px; opacity: .7; }
.sidebar-menu > li > a > i,
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > svg {
width: 22px;
font-size: 15px;
margin-right: 10px;
color: var(--nova-sidebar-dim);
text-align: center;
transition: color .16s ease;
}
/* min-width:0 is what actually lets a flex child shrink far enough to
ellipsize; without it long menu labels run under the expand chevron. */
.sidebar-menu > li > a > span:not(.pull-right):not(.label) {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* The markup floats the chevron; float does nothing inside a flex row. */
.sidebar-menu > li > a > i.pull-right,
.sidebar-menu > li > a > .fa-angle-left {
float: none;
margin-left: auto;
margin-right: 0;
width: auto;
font-size: 13px;
opacity: .65;
transition: transform .2s ease;
}
.sidebar-menu > li.active > a > i.pull-right,
.sidebar-menu > li.menu-open > a > i.pull-right { transform: rotate(-90deg); opacity: 1; }
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
background: rgba(255, 255, 255, .08);
color: #fff;
border-left: none !important;
}
.sidebar-menu > li:hover > a > i,
.sidebar-menu > li.active > a > i,
.sidebar-menu > li.menu-open > a > i { color: #fff; }
/* Active item gets the accent, not just a lighter shade */
.skin-blue .sidebar-menu > li.active > a,
.sidebar-menu > li.active > a {
background: linear-gradient(90deg, var(--nova-accent) 0%, var(--nova-accent-600) 100%);
box-shadow: 0 6px 18px -8px var(--nova-accent-glow);
}
.sidebar-menu > li.active > a > i { color: #fff; }
/* Submenus ---------------------------------------------------------------- */
.skin-blue .sidebar-menu > li > .treeview-menu,
.sidebar-menu .treeview-menu {
background: rgba(0, 0, 0, .18);
border-radius: var(--nova-radius-sm);
margin: 4px 0 6px;
padding: 6px;
}
.treeview-menu > li > a,
.skin-blue .treeview-menu > li > a {
color: var(--nova-sidebar-text);
font-size: 13.5px;
padding: 8px 10px 8px 34px;
border-radius: var(--nova-radius-xs);
position: relative;
transition: background .16s ease, color .16s ease;
}
.treeview-menu > li > a > .fa,
.treeview-menu > li > a > i { width: 16px; margin-right: 6px; font-size: 11px; color: var(--nova-sidebar-dim); }
.skin-blue .treeview-menu > li > a:hover,
.skin-blue .treeview-menu > li.active > a,
.treeview-menu > li > a:hover,
.treeview-menu > li.active > a {
background: rgba(255, 255, 255, .08);
color: #fff;
}
.treeview-menu > li.active > a { font-weight: 600; }
.treeview-menu > li.active > a::before {
content: ""; position: absolute; left: 16px; top: 50%;
width: 5px; height: 5px; margin-top: -2.5px;
border-radius: 50%; background: var(--nova-accent);
box-shadow: 0 0 0 3px var(--nova-accent-soft);
}
.sidebar-menu .treeview-menu > li > a > .fa-angle-left,
.sidebar-menu > li > a > .pull-right-container > .fa-angle-left { transition: transform .2s ease; }
.sidebar-menu > li.menu-open > a > .pull-right-container > .fa-angle-left { transform: rotate(-90deg); }
/* Collapsed rail ---------------------------------------------------------- */
.sidebar-mini.sidebar-collapse .sidebar-menu { padding: 10px 8px 0; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a { justify-content: center; padding: 11px 0; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > i { margin-right: 0; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:first-of-type {
background: var(--nova-sidebar-to);
border-radius: 0 var(--nova-radius-sm) var(--nova-radius-sm) 0;
padding: 11px 16px;
box-shadow: var(--nova-shadow-lg);
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
background: var(--nova-sidebar-to);
border-radius: 0 var(--nova-radius-sm) var(--nova-radius-sm) 0;
box-shadow: var(--nova-shadow-lg);
}
/* Session + quick links strip -------------------------------------------- */
/* This strip is position:sticky, so the menu scrolls underneath it. It has to
stay opaque or the pinned pills and the moving menu items overlap. The
bundled stylesheet paints it white; this repaints it in the sidebar's own
colour instead, and widens it from its hard-coded 200px to fill the rail. */
.sessionul, .sessionul.fixedmenu, .main-sidebar .fixedmenu {
background: var(--nova-sidebar-from) !important;
width: 100% !important;
box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .7);
list-style: none;
margin: 0;
padding: 10px 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, .07);
padding-bottom: 10px;
}
.sessionul > li > a {
display: flex !important;
align-items: center;
gap: 8px;
color: var(--nova-sidebar-text);
background: rgba(255, 255, 255, .06);
border-radius: var(--nova-radius-sm);
padding: 9px 12px;
font-size: 12.5px;
font-weight: 550;
margin-bottom: 6px;
cursor: pointer;
transition: background .16s ease, color .16s ease;
}
.sessionul > li > a:hover, .sessionul > li > a:focus { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
/* The bundled stylesheet colours these links dark, which is invisible against
the indigo sidebar. */
.sessionul > li > a,
.sessionul > li > a > span,
.sessionul > li > a > i,
.main-sidebar .sessionul li a { color: var(--nova-sidebar-text) !important; }
.sessionul > li > a > i { color: var(--nova-sidebar-dim) !important; }
.sessionul > li > a:hover > i { color: #fff !important; }
.sessionul > li > a > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sessionul > li > a > i.pull-right { float: none; margin-left: auto; opacity: .7; font-size: 12px; }
.sessionul .dropdown-menu.verticalmenu { color: var(--nova-text); }
/* Sidebar search ---------------------------------------------------------- */
.search-form2 .form-control,
.sidebar-form .form-control {
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: var(--nova-radius-sm);
color: #fff;
box-shadow: none;
}
.search-form2 .form-control::placeholder,
.sidebar-form .form-control::placeholder { color: var(--nova-sidebar-dim); }
/* --------------------------------------------------------------------------
4. Top bar
--------------------------------------------------------------------------
AdminLTE hard-codes a 50px header in four places (logo box, sidebar offset,
fixed content offset, navbar). The taller bar below has to be mirrored into
all of them or the first row of content hides underneath it.
-------------------------------------------------------------------------- */
:root {
--nova-header: 58px;
--nova-sidebar-w: 264px; /* AdminLTE ships 230px */
}
.main-header .navbar,
.skin-blue .main-header .navbar { min-height: var(--nova-header); }
.main-header .logo { height: var(--nova-header); line-height: var(--nova-header); }
.main-header .navbar .sidebar-toggle { padding: 20px 15px; left: 0; top: 0; }
/* Superseded by the flex top bar in section 22. */
.main-sidebar, .left-side { padding-top: var(--nova-header); }
.fixed .content-wrapper, .fixed .right-side { padding-top: var(--nova-header); }
@media (max-width: 767px) {
.fixed .content-wrapper, .fixed .right-side { padding-top: 108px; }
}
.skin-blue .main-header .navbar,
.main-header .navbar {
background: var(--nova-surface);
border-bottom: 1px solid var(--nova-border);
box-shadow: 0 1px 2px rgba(18, 18, 54, .03);
min-height: 58px;
}
.main-header .navbar .nav > li > a,
.skin-blue .main-header .navbar .nav > li > a { color: var(--nova-text-soft); }
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:active,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav .open > a,
.main-header .navbar .nav > li > a:hover {
background: var(--nova-accent-soft);
color: var(--nova-accent-700);
border-radius: var(--nova-radius-xs);
}
.skin-blue .main-header .navbar .sidebar-toggle,
.main-header .navbar .sidebar-toggle { color: var(--nova-text-soft); }
.skin-blue .main-header .navbar .sidebar-toggle:hover { background: var(--nova-accent-soft); color: var(--nova-accent-700); }
.main-header .navbar .sidebar-toggle .icon-bar { background: currentColor; }
/* the bundled skin paints this lime green at 20px */
.main-header .sidebar-session,
.sidebar-session {
color: var(--nova-text);
font-weight: 620;
font-size: 15.5px;
letter-spacing: -0.015em;
line-height: 38px;
padding: 10px 0;
display: inline-block;
}
.navbar-form.search-form .form-control {
background: var(--nova-canvas);
border: 1px solid var(--nova-border);
border-radius: 999px;
height: 38px;
padding: 0 16px;
box-shadow: none;
min-width: 220px;
}
.navbar-form.search-form .form-control:focus {
background: var(--nova-surface);
border-color: var(--nova-accent);
box-shadow: 0 0 0 3px var(--nova-accent-soft);
}
.headertopmenu > li > a { border-radius: var(--nova-radius-xs); }
/* Theme switch ------------------------------------------------------------ */
.nova-theme-toggle {
background: transparent;
border: 1px solid var(--nova-border);
color: var(--nova-text-soft);
width: 38px; height: 38px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
margin: 10px 6px 0 0;
cursor: pointer;
transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.nova-theme-toggle:hover {
background: var(--nova-accent-soft);
border-color: var(--nova-accent);
color: var(--nova-accent-700);
}
.nova-theme-toggle .fa { font-size: 15px; }
html[data-nova-theme="dark"] .nova-theme-toggle:hover { color: #fff; }
/* --------------------------------------------------------------------------
5. Cards (AdminLTE .box)
-------------------------------------------------------------------------- */
.box {
background: var(--nova-surface);
border: 1px solid var(--nova-border);
border-top: 1px solid var(--nova-border);
border-radius: var(--nova-radius);
box-shadow: var(--nova-shadow);
margin-bottom: 22px;
}
.box.box-primary, .box.box-info, .box.box-success,
.box.box-warning, .box.box-danger, .box.box-default {
border-top: 1px solid var(--nova-border);
}
/* Keep the status hint, but as a soft top edge rather than a slab */
.box.box-primary { box-shadow: var(--nova-shadow), inset 0 3px 0 -1px var(--nova-accent); }
.box.box-info { box-shadow: var(--nova-shadow), inset 0 3px 0 -1px var(--nova-info); }
.box.box-success { box-shadow: var(--nova-shadow), inset 0 3px 0 -1px var(--nova-success); }
.box.box-warning { box-shadow: var(--nova-shadow), inset 0 3px 0 -1px var(--nova-warning); }
.box.box-danger { box-shadow: var(--nova-shadow), inset 0 3px 0 -1px var(--nova-danger); }
.box-header { padding: 18px 20px; border-bottom: 1px solid var(--nova-border-soft); }
.box-header.with-border { border-bottom: 1px solid var(--nova-border-soft); }
.box-header > .box-title {
font-size: 16px; font-weight: 620; letter-spacing: -0.015em; color: var(--nova-text);
}
.box-header > .box-tools { top: 14px; right: 16px; }
.box-body { padding: 20px; }
.box-footer { background: var(--nova-surface-2); border-top: 1px solid var(--nova-border-soft);
border-radius: 0 0 var(--nova-radius) var(--nova-radius); padding: 16px 20px; }
.box.box-solid > .box-header { color: var(--nova-text); background: transparent; }
.nav-tabs-custom {
background: var(--nova-surface);
border: 1px solid var(--nova-border);
border-radius: var(--nova-radius);
box-shadow: var(--nova-shadow);
}
.nav-tabs-custom > .nav-tabs { border-bottom: 1px solid var(--nova-border-soft); padding: 0 8px; }
.nav-tabs-custom > .nav-tabs > li { margin-right: 2px; border-top: none; }
.nav-tabs-custom > .nav-tabs > li > a { color: var(--nova-muted); font-weight: 500; border-radius: 0; }
.nav-tabs-custom > .nav-tabs > li.active { border-top-color: transparent; }
.nav-tabs-custom > .nav-tabs > li.active > a {
color: var(--nova-accent-700); border-color: transparent;
box-shadow: inset 0 -2px 0 var(--nova-accent);
}
/* --------------------------------------------------------------------------
6. Buttons
-------------------------------------------------------------------------- */
.btn {
border-radius: var(--nova-radius-xs);
font-weight: 550;
font-size: 13.5px;
padding: 8px 16px;
border: 1px solid transparent;
box-shadow: none;
transition: background .16s ease, box-shadow .16s ease, border-color .16s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nova-accent-soft); }
.btn-primary {
background: var(--nova-accent); border-color: var(--nova-accent);
box-shadow: 0 6px 16px -8px var(--nova-accent-glow);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary.active, .open > .dropdown-toggle.btn-primary {
background: var(--nova-accent-600); border-color: var(--nova-accent-600); color: #fff;
}
.btn-default {
background: var(--nova-surface); border-color: var(--nova-border); color: var(--nova-text-soft);
}
.btn-default:hover, .btn-default:focus {
background: var(--nova-canvas); border-color: var(--nova-accent); color: var(--nova-accent-700);
}
.btn-success { background: var(--nova-success); border-color: var(--nova-success); }
.btn-success:hover, .btn-success:focus { background: #0B7F59; border-color: #0B7F59; }
.btn-info { background: var(--nova-info); border-color: var(--nova-info); }
.btn-info:hover, .btn-info:focus { background: #245FBC; border-color: #245FBC; }
.btn-warning { background: var(--nova-warning); border-color: var(--nova-warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background: #B45309; border-color: #B45309; color: #fff; }
.btn-danger { background: var(--nova-danger); border-color: var(--nova-danger); }
.btn-danger:hover, .btn-danger:focus { background: #BE2247; border-color: #BE2247; }
.btn-xs { padding: 4px 9px; font-size: 12px; border-radius: 6px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 12px 24px; font-size: 15px; border-radius: var(--nova-radius-sm); }
.btn-flat { border-radius: var(--nova-radius-xs); }
/* --------------------------------------------------------------------------
7. Forms
-------------------------------------------------------------------------- */
label, .control-label { font-weight: 550; font-size: 13px; color: var(--nova-text-soft); margin-bottom: 6px; }
.form-control {
background: var(--nova-surface);
border: 1px solid var(--nova-border);
border-radius: var(--nova-radius-xs);
color: var(--nova-text);
height: 40px;
padding: 8px 13px;
font-size: 14px;
box-shadow: none;
transition: border-color .16s ease, box-shadow .16s ease;
}
.form-control:focus {
border-color: var(--nova-accent);
box-shadow: 0 0 0 3px var(--nova-accent-soft);
}
.form-control::placeholder { color: var(--nova-muted); opacity: .75; }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background: var(--nova-canvas); color: var(--nova-muted);
}
textarea.form-control { height: auto; }
select.form-control { height: 40px; }
.input-group-addon {
background: var(--nova-canvas);
border: 1px solid var(--nova-border);
border-radius: var(--nova-radius-xs);
color: var(--nova-muted);
}
.has-error .form-control { border-color: var(--nova-danger); }
.has-error .form-control:focus { box-shadow: 0 0 0 3px var(--nova-danger-soft); }
.has-error .control-label, .has-error .help-block { color: var(--nova-danger); }
.help-block { font-size: 12.5px; color: var(--nova-muted); }
.bootstrap-select > .btn, .bootstrap-select .dropdown-toggle {
background: var(--nova-surface) !important;
border: 1px solid var(--nova-border) !important;
border-radius: var(--nova-radius-xs) !important;
color: var(--nova-text) !important;
height: 40px;
}
.dropdown-menu {
background: var(--nova-surface);
border: 1px solid var(--nova-border);
border-radius: var(--nova-radius-sm);
box-shadow: var(--nova-shadow-lg);
padding: 6px;
}
.dropdown-menu > li > a { color: var(--nova-text-soft); border-radius: 6px; padding: 8px 12px; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
background: var(--nova-accent-soft); color: var(--nova-accent-700);
}
.dropdown-menu .divider { background: var(--nova-border-soft); }
/* --------------------------------------------------------------------------
8. Tables
-------------------------------------------------------------------------- */
.table { color: var(--nova-text); }
.table > thead > tr > th {
border-bottom: 1px solid var(--nova-border);
color: var(--nova-muted);
font-size: 11.5px;
font-weight: 650;
letter-spacing: .05em;
text-transform: uppercase;
padding: 12px 14px;
}
.table > tbody > tr > td {
border-top: 1px solid var(--nova-border-soft);
padding: 12px 14px;
vertical-align: middle;
}
.table-hover > tbody > tr:hover { background: var(--nova-accent-soft); }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--nova-surface-2); }
.table-bordered, .table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--nova-border-soft); }
/* DataTables -------------------------------------------------------------- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
background: var(--nova-surface);
border: 1px solid var(--nova-border);
border-radius: var(--nova-radius-xs);
color: var(--nova-text);
padding: 6px 10px;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--nova-muted); font-size: 13px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
border: 1px solid var(--nova-border) !important;
border-radius: var(--nova-radius-xs) !important;
background: var(--nova-surface) !important;
color: var(--nova-text-soft) !important;
margin: 0 2px; padding: 6px 12px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--nova-accent-soft) !important;
border-color: var(--nova-accent) !important;
color: var(--nova-accent-700) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--nova-accent) !important;
border-color: var(--nova-accent) !important;
color: #fff !important;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { color: var(--nova-muted); }
/* Pagination -------------------------------------------------------------- */
.pagination > li > a, .pagination > li > span {
background: var(--nova-surface); border-color: var(--nova-border);
color: var(--nova-text-soft); margin: 0 2px; border-radius: var(--nova-radius-xs) !important;
}
.pagination > li > a:hover {
background: var(--nova-accent-soft); border-color: var(--nova-accent); color: var(--nova-accent-700);
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
background: var(--nova-accent); border-color: var(--nova-accent); color: #fff;
}
/* --------------------------------------------------------------------------
9. Labels, badges, alerts
-------------------------------------------------------------------------- */
.label, .badge {
font-weight: 600; font-size: 11.5px; padding: 4px 9px;
border-radius: 999px; letter-spacing: .01em;
}
.label-primary, .bg-primary { background: var(--nova-accent-soft); color: var(--nova-accent-700); }
.label-success, .bg-green { background: var(--nova-success-soft); color: var(--nova-success); }
.label-info, .bg-aqua { background: var(--nova-info-soft); color: var(--nova-info); }
.label-warning, .bg-yellow { background: var(--nova-warning-soft); color: var(--nova-warning); }
.label-danger, .bg-red { background: var(--nova-danger-soft); color: var(--nova-danger); }
.label-default { background: var(--nova-border-soft); color: var(--nova-muted); }
.badge { background: var(--nova-accent); color: #fff; }
.alert {
border: 1px solid transparent;
border-radius: var(--nova-radius-sm);
padding: 14px 18px;
font-size: 13.5px;
box-shadow: none;
}
.alert-success { background: var(--nova-success-soft); border-color: rgba(15,157,110,.24); color: var(--nova-success); }
.alert-info { background: var(--nova-info-soft); border-color: rgba(45,116,224,.24); color: var(--nova-info); }
.alert-warning { background: var(--nova-warning-soft); border-color: rgba(217,119,6,.26); color: var(--nova-warning); }
.alert-danger, .alert-error { background: var(--nova-danger-soft); border-color: rgba(220,47,85,.24); color: var(--nova-danger); }
.alert a { color: inherit; text-decoration: underline; }
.callout { border-radius: var(--nova-radius-sm); box-shadow: none; border: 1px solid var(--nova-border); }
/* --------------------------------------------------------------------------
10. Dashboard widgets
-------------------------------------------------------------------------- */
.info-box {
background: var(--nova-surface);
border: 1px solid var(--nova-border);
border-radius: var(--nova-radius);
box-shadow: var(--nova-shadow);
min-height: 92px;
transition: transform .18s ease, box-shadow .18s ease;
}
.info-box:hover { transform: translateY(-2px); box-shadow: var(--nova-shadow-lg); }
.info-box-icon {
border-radius: var(--nova-radius) 0 0 var(--nova-radius);
width: 82px; height: 92px; line-height: 92px; font-size: 26px;
}
.info-box-content { padding: 18px 16px; margin-left: 82px; }
.info-box-text {
color: var(--nova-muted); font-size: 11.5px; font-weight: 650;
letter-spacing: .05em; text-transform: uppercase;
}
.info-box-number { color: var(--nova-text); font-size: 25px; font-weight: 660; letter-spacing: -0.02em; }
.small-box {
border-radius: var(--nova-radius);
box-shadow: var(--nova-shadow);
overflow: hidden;
}
.small-box h3 { font-weight: 660; letter-spacing: -0.03em; }
.small-box > .small-box-footer { background: rgba(0, 0, 0, .12); font-size: 12.5px; padding: 8px; }
/* AdminLTE colour utilities, re-tuned to the palette */
.bg-aqua, .bg-aqua-active, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body { background-color: var(--nova-info) !important; }
.bg-green, .bg-green-active, .callout.callout-success, .label-success, .modal-success .modal-body { background-color: var(--nova-success) !important; }
.bg-yellow, .bg-yellow-active, .callout.callout-warning, .label-warning, .modal-warning .modal-body { background-color: var(--nova-warning) !important; }
.bg-red, .bg-red-active, .callout.callout-danger, .label-danger, .modal-danger .modal-body { background-color: var(--nova-danger) !important; }
.bg-blue, .bg-light-blue, .bg-primary { background-color: var(--nova-accent) !important; }
.bg-purple { background-color: var(--nova-accent-700) !important; }
/* the utilities above would otherwise repaint the soft pill labels */
.label-primary, .label-success, .label-info, .label-warning, .label-danger {
background-color: transparent !important;
}
.label-primary { background: var(--nova-accent-soft) !important; color: var(--nova-accent-700) !important; }
.label-success { background: var(--nova-success-soft) !important; color: var(--nova-success) !important; }
.label-info { background: var(--nova-info-soft) !important; color: var(--nova-info) !important; }
.label-warning { background: var(--nova-warning-soft) !important; color: var(--nova-warning) !important; }
.label-danger { background: var(--nova-danger-soft) !important; color: var(--nova-danger) !important; }
.progress {
background: var(--nova-border-soft);
border-radius: 999px;
box-shadow: none;
height: 8px;
}
.progress-bar { border-radius: 999px; box-shadow: none; background-color: var(--nova-accent); }
.progress-bar-aqua { background-color: var(--nova-info); }
.progress-bar-green { background-color: var(--nova-success); }
.progress-bar-yellow { background-color: var(--nova-warning); }
.progress-bar-red { background-color: var(--nova-danger); }
.progress-group .progress-text { color: var(--nova-text-soft); font-weight: 550; font-size: 13px; }
.progress-group .progress-number { color: var(--nova-muted); font-size: 13px; }
/* --------------------------------------------------------------------------
11. Modals, tooltips, footer
-------------------------------------------------------------------------- */
.modal-content {
background: var(--nova-surface);
border: 1px solid var(--nova-border);
border-radius: var(--nova-radius);
box-shadow: var(--nova-shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--nova-border-soft); padding: 18px 22px; }
.modal-header .modal-title { font-size: 17px; font-weight: 620; }
.modal-body { padding: 22px; }
.modal-footer { border-top: 1px solid var(--nova-border-soft); padding: 16px 22px; }
.modal-backdrop.in { opacity: .5; background: #14132E; }
.tooltip-inner {
background: var(--nova-text); color: #fff; border-radius: 6px;
font-size: 12.5px; padding: 6px 10px;
}
.tooltip.top .tooltip-arrow { border-top-color: var(--nova-text); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--nova-text); }
.main-footer {
background: var(--nova-surface);
border-top: 1px solid var(--nova-border);
color: var(--nova-muted);
font-size: 13px;
padding: 16px 22px;
}
.main-footer a { color: var(--nova-accent-600); }
/* Scrollbars -------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--nova-border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--nova-border); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--nova-muted); background-clip: content-box; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); background-clip: content-box; }
/* --------------------------------------------------------------------------
12. Dark mode: surfaces the utilities above cannot reach through tokens
-------------------------------------------------------------------------- */
html[data-nova-theme="dark"] body { background: var(--nova-canvas); }
html[data-nova-theme="dark"] .box,
html[data-nova-theme="dark"] .nav-tabs-custom,
html[data-nova-theme="dark"] .modal-content,
html[data-nova-theme="dark"] .info-box,
html[data-nova-theme="dark"] .dropdown-menu { background: var(--nova-surface); border-color: var(--nova-border); }
html[data-nova-theme="dark"] .box-footer,
html[data-nova-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background: var(--nova-surface-2); }
html[data-nova-theme="dark"] .form-control,
html[data-nova-theme="dark"] .bootstrap-select > .btn,
html[data-nova-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-nova-theme="dark"] .dataTables_wrapper .dataTables_length select {
background: var(--nova-surface-2) !important;
border-color: var(--nova-border) !important;
color: var(--nova-text) !important;
}
html[data-nova-theme="dark"] .input-group-addon { background: var(--nova-surface-2); border-color: var(--nova-border); }
html[data-nova-theme="dark"] .btn-default {
background: var(--nova-surface-2); border-color: var(--nova-border); color: var(--nova-text-soft);
}
html[data-nova-theme="dark"] .main-footer,
html[data-nova-theme="dark"] .main-header .navbar { background: var(--nova-surface); border-color: var(--nova-border); }
html[data-nova-theme="dark"] .table > tbody > tr > td { border-color: var(--nova-border-soft); }
html[data-nova-theme="dark"] .table-hover > tbody > tr:hover { background: var(--nova-surface-2); }
html[data-nova-theme="dark"] .content-header > h1,
html[data-nova-theme="dark"] .box-title { color: var(--nova-text); }
html[data-nova-theme="dark"] .well { background: var(--nova-surface-2); border-color: var(--nova-border); }
html[data-nova-theme="dark"] hr { border-color: var(--nova-border); }
html[data-nova-theme="dark"] .close { color: var(--nova-text); text-shadow: none; opacity: .7; }
html[data-nova-theme="dark"] img.profile-user-img,
html[data-nova-theme="dark"] .main-header .logo img { filter: brightness(1.06); }
/* Third-party widgets that hard-code white ------------------------------- */
html[data-nova-theme="dark"] .datepicker,
html[data-nova-theme="dark"] .daterangepicker,
html[data-nova-theme="dark"] .bootstrap-datetimepicker-widget,
html[data-nova-theme="dark"] .select2-dropdown,
html[data-nova-theme="dark"] .bootstrap-select .dropdown-menu {
background: var(--nova-surface) !important;
border-color: var(--nova-border) !important;
color: var(--nova-text) !important;
}
html[data-nova-theme="dark"] .datepicker td,
html[data-nova-theme="dark"] .datepicker th,
html[data-nova-theme="dark"] .daterangepicker td,
html[data-nova-theme="dark"] .bootstrap-datetimepicker-widget td { color: var(--nova-text); }
html[data-nova-theme="dark"] .datepicker td.day:hover,
html[data-nova-theme="dark"] .bootstrap-datetimepicker-widget td.day:hover { background: var(--nova-accent-soft); }
html[data-nova-theme="dark"] .datepicker td.active,
html[data-nova-theme="dark"] .daterangepicker td.active { background: var(--nova-accent) !important; color: #fff; }
html[data-nova-theme="dark"] .note-editor .note-toolbar,
html[data-nova-theme="dark"] .note-editable,
html[data-nova-theme="dark"] .wysihtml5-sandbox {
background: var(--nova-surface-2) !important; color: var(--nova-text) !important;
}
/* --------------------------------------------------------------------------
13. Icons - Font Awesome 6 sits a little heavier than 4 did
-------------------------------------------------------------------------- */
.fa, .fas, .far, .fab { line-height: inherit; }
.btn .fa { margin-right: 5px; }
.btn .fa:only-child { margin-right: 0; }
.btn-xs .fa, .btn-sm .fa { margin-right: 4px; }
/* --------------------------------------------------------------------------
14. Responsive
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.content-header, .content { padding-left: 14px; padding-right: 14px; }
.content-header > .breadcrumb { position: static; margin-top: 8px; }
.navbar-form.search-form .form-control { min-width: 0; }
.box-body, .box-header { padding: 15px; }
}
/* Motion preferences ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* --------------------------------------------------------------------------
15. Sidebar custom scrollbar (mCustomScrollbar)
-------------------------------------------------------------------------- */
.sidebar .mCSB_scrollTools .mCSB_draggerRail,
.main-sidebar .mCSB_scrollTools .mCSB_draggerRail { background: rgba(255, 255, 255, .05); width: 4px; }
.sidebar .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.main-sidebar .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background: rgba(255, 255, 255, .22); width: 4px; border-radius: 999px;
}
.sidebar .mCSB_scrollTools { opacity: .6; }
/* --------------------------------------------------------------------------
16. Avatar fallback
Photos that 404 (a school that has not uploaded any yet) are swapped for a
neutral placeholder by nova.js rather than showing a broken-image glyph.
-------------------------------------------------------------------------- */
img.nova-img-missing {
background: linear-gradient(135deg, var(--nova-accent-soft) 0%, rgba(124, 58, 237, .04) 100%);
object-fit: cover;
border-radius: inherit;
}
/* --------------------------------------------------------------------------
17. Dark mode: containers that hard-code #fff
AdminLTE and the bundled stylesheet paint several panes white outright,
which leaves light text on a white ground once the theme flips.
-------------------------------------------------------------------------- */
html[data-nova-theme="dark"] .nav-tabs-custom > .tab-content,
html[data-nova-theme="dark"] .tab-content,
html[data-nova-theme="dark"] .panel,
html[data-nova-theme="dark"] .panel-body,
html[data-nova-theme="dark"] .panel-default,
html[data-nova-theme="dark"] .list-group-item,
html[data-nova-theme="dark"] .timeline > li > .timeline-item,
html[data-nova-theme="dark"] .direct-chat-text,
html[data-nova-theme="dark"] .product-list-in-box > .item,
html[data-nova-theme="dark"] .table > tbody > tr > td,
html[data-nova-theme="dark"] .table > thead > tr > th {
background-color: var(--nova-surface);
border-color: var(--nova-border);
color: var(--nova-text);
}
html[data-nova-theme="dark"] .panel-heading,
html[data-nova-theme="dark"] .list-group-item.active {
background-color: var(--nova-surface-2);
border-color: var(--nova-border);
color: var(--nova-text);
}
/* Search submit in the header carries an inline white background. */
html[data-nova-theme="dark"] #search-btn,
html[data-nova-theme="dark"] .search-form .btn {
background: var(--nova-surface-2) !important;
color: var(--nova-text-soft) !important;
border: 1px solid var(--nova-border) !important;
}
/* Anything still painting itself white inside the content area. */
html[data-nova-theme="dark"] .content-wrapper [style*="background: #fff"],
html[data-nova-theme="dark"] .content-wrapper [style*="background:#fff"],
html[data-nova-theme="dark"] .content-wrapper [style*="background-color: #fff"],
html[data-nova-theme="dark"] .content-wrapper [style*="background-color:#fff"] {
background: var(--nova-surface) !important;
}
/* --------------------------------------------------------------------------
18. Shared inline code chip (used by the platform console and signup)
-------------------------------------------------------------------------- */
.pf-code {
font-family: Menlo, Consolas, monospace;
font-size: 12px;
background: var(--nova-canvas);
border: 1px solid var(--nova-border);
padding: 2px 7px;
border-radius: 6px;
color: var(--nova-text-soft);
}
/* --------------------------------------------------------------------------
19. Dashboard KPI strip
The markup is icon + label + a floated value inside one . Flexing that
paragraph and giving the value full width promotes it to the headline
figure, which turns the plain strip into a proper stat card - no change to
the dashboard view itself.
-------------------------------------------------------------------------- */
.topprograssstart {
background: var(--nova-surface);
border: 1px solid var(--nova-border);
border-radius: var(--nova-radius);
box-shadow: var(--nova-shadow);
padding: 16px 18px 14px;
margin-bottom: 20px;
transition: transform .18s ease, box-shadow .18s ease;
}
.topprograssstart:hover { transform: translateY(-2px); box-shadow: var(--nova-shadow-lg); }
.topprograssstart > p {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 11px;
margin: 0 0 12px;
font-size: 11.5px;
font-weight: 650;
letter-spacing: .05em;
color: var(--nova-muted);
line-height: 1.35;
}
.topprograssstart > p > .ftlayer {
order: -1;
flex: none;
width: 34px; height: 34px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--nova-accent-soft);
color: var(--nova-accent-600);
font-size: 14px;
}
.topprograssstart > p > .pull-right {
order: 1;
float: none;
width: 100%;
margin-top: 6px;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--nova-text);
}
.topprograssstart .progress-group { margin: 0; }
.topprograssstart .progress-minibar { height: 6px; margin: 0; }
/* --------------------------------------------------------------------------
20. Sidebar width
AdminLTE hard-codes 230px across the shell - the rail itself, the logo box,
the navbar offset, the content offset, and the off-canvas/collapse
transforms. All of them have to move together or the layout tears.
-------------------------------------------------------------------------- */
.main-sidebar, .left-side { width: var(--nova-sidebar-w); }
@media (min-width: 768px) {
.content-wrapper,
.right-side,
.main-footer { margin-left: var(--nova-sidebar-w); }
.main-header > .navbar { margin-left: var(--nova-sidebar-w); }
.main-header .logo { width: var(--nova-sidebar-w); }
.sidebar-collapse .main-sidebar,
.sidebar-collapse .left-side {
-webkit-transform: translate(calc(-1 * var(--nova-sidebar-w)), 0);
-ms-transform: translate(calc(-1 * var(--nova-sidebar-w)), 0);
-o-transform: translate(calc(-1 * var(--nova-sidebar-w)), 0);
transform: translate(calc(-1 * var(--nova-sidebar-w)), 0);
}
}
@media (max-width: 767px) {
.main-sidebar, .left-side {
-webkit-transform: translate(calc(-1 * var(--nova-sidebar-w)), 0);
-ms-transform: translate(calc(-1 * var(--nova-sidebar-w)), 0);
-o-transform: translate(calc(-1 * var(--nova-sidebar-w)), 0);
transform: translate(calc(-1 * var(--nova-sidebar-w)), 0);
}
.sidebar-open .content-wrapper,
.sidebar-open .right-side,
.sidebar-open .main-footer {
-webkit-transform: translate(var(--nova-sidebar-w), 0);
-ms-transform: translate(var(--nova-sidebar-w), 0);
-o-transform: translate(var(--nova-sidebar-w), 0);
transform: translate(var(--nova-sidebar-w), 0);
}
}
/* The mini rail keeps AdminLTE's 50px; only the expanded width changes. */
@media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .main-sidebar,
.sidebar-mini.sidebar-collapse .left-side {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
width: 50px;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
left: 50px;
}
}
/* --------------------------------------------------------------------------
21. Billing (school-side subscription screen)
-------------------------------------------------------------------------- */
.billing-plan {
position: relative;
border: 2px solid var(--nova-border);
border-radius: 15px;
padding: 20px 18px;
margin-bottom: 16px;
height: calc(100% - 16px);
transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.billing-plan:hover { border-color: var(--nova-accent); transform: translateY(-2px); }
.billing-plan.is-current { border-color: var(--nova-accent); box-shadow: 0 0 0 4px var(--nova-accent-soft); }
.billing-current {
position: absolute; top: -11px; left: 18px;
background: var(--nova-accent); color: #fff;
font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: 3px 10px; border-radius: 999px;
}
.billing-plan h4 { font-size: 15px; font-weight: 640; margin: 0 0 4px; }
.billing-price {
font-size: 25px; font-weight: 700; letter-spacing: -0.03em;
color: var(--nova-accent-600); margin-bottom: 14px;
}
.billing-price small { font-size: 12.5px; color: var(--nova-muted); font-weight: 500; letter-spacing: 0; }
.billing-features { list-style: none; padding: 0; margin: 0 0 16px; font-size: 13px; color: var(--nova-text-soft); }
.billing-features li { padding: 4px 0; }
.billing-features i { color: var(--nova-accent); width: 16px; margin-right: 6px; }
/* Subscription chip in the top bar */
.nova-sub-chip {
display: inline-flex; align-items: center; gap: 7px;
height: 34px; padding: 0 13px; margin: 12px 6px 0 0;
border-radius: 999px; font-size: 12.5px; font-weight: 600;
text-decoration: none; white-space: nowrap;
border: 1px solid transparent;
transition: filter .16s ease;
}
.nova-sub-chip:hover, .nova-sub-chip:focus { filter: brightness(.96); text-decoration: none; }
.nova-sub-chip.ok { background: var(--nova-accent-soft); color: var(--nova-accent-700); }
.nova-sub-chip.warn { background: var(--nova-warning-soft); color: var(--nova-warning); }
.nova-sub-chip.bad { background: var(--nova-danger-soft); color: var(--nova-danger); }
@media (max-width: 991px) { .nova-sub-chip span { display: none; } }
/* --------------------------------------------------------------------------
22. Top bar layout
--------------------------------------------------------------------------
The markup is Bootstrap 3 grid columns holding floated children, which wraps
onto a second row as soon as the school name, the search box and the action
icons stop fitting. Laying the bar out as a single flex row removes the
float arithmetic entirely: the search absorbs the slack, the actions keep
their size, and nothing can drop to a second line.
-------------------------------------------------------------------------- */
.main-header .navbar,
.skin-blue .main-header .navbar {
display: flex;
align-items: center;
gap: 16px;
padding: 0 18px 0 0;
min-height: var(--nova-header);
}
/* Bootstrap's clearfix pseudo-elements become stray flex items. */
.main-header .navbar::before,
.main-header .navbar::after { display: none; }
.main-header .navbar .sidebar-toggle {
position: static;
float: none;
height: var(--nova-header);
padding: 0 16px;
display: flex;
align-items: center;
border-radius: 0;
}
/* The grid columns stop being columns. */
.main-header .navbar > [class*="col-"] {
float: none;
width: auto;
padding: 0;
min-width: 0;
}
.main-header .navbar > [class*="col-"]:first-of-type { flex: 0 1 auto; }
.main-header .navbar > [class*="col-"]:last-of-type {
flex: 1 1 auto;
min-width: 0;
display: flex;
justify-content: flex-end;
}
.main-header .sidebar-session,
.sidebar-session {
padding: 0 !important;
line-height: 1.25;
display: block;
max-width: 340px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main-header .navbar .pull-right {
float: none;
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
/* Search -------------------------------------------------------------------
One pill: the border lives on the input-group and the field and button are
transparent inside it, so they cannot come apart at the join. */
.main-header .navbar-form.search-form {
float: none;
margin: 0;
padding: 0;
border: 0;
box-shadow: none;
/* A floor, so the field shrinks to a usable size and then hides at the
breakpoint below rather than collapsing to a stub. */
flex: 0 1 300px;
min-width: 200px;
}
.main-header .navbar-form.search-form .input-group {
display: flex;
align-items: center;
width: 100%;
height: 38px;
background: var(--nova-canvas);
border: 1px solid var(--nova-border);
border-radius: 999px;
overflow: hidden;
transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.main-header .navbar-form .form-control.search-form3 {
flex: 1 1 auto;
width: 100%;
min-width: 0;
height: 36px;
padding: 0 4px 0 16px;
font-size: 13.5px;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.main-header .navbar-form .input-group-btn { flex: 0 0 auto; width: auto; display: flex; }
.main-header .navbar-form .topsidesearchbtn {
height: 36px !important;
width: 42px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--nova-muted) !important;
}
.main-header .navbar-form .topsidesearchbtn:hover { color: var(--nova-accent-600) !important; }
.main-header .navbar-form.search-form:focus-within .input-group {
background: var(--nova-surface);
border-color: var(--nova-accent);
box-shadow: 0 0 0 3px var(--nova-accent-soft);
}
/* Action cluster ---------------------------------------------------------- */
.navbar-custom-menu {
float: none;
display: flex;
align-items: center;
gap: 4px;
}
.navbar-custom-menu > .currency-icon-list,
.navbar-custom-menu > .langdiv { margin: 0; display: flex; align-items: center; }
.navbar-custom-menu .headertopmenu,
.main-header .navbar .nav.navbar-nav.headertopmenu {
float: none;
display: flex;
align-items: center;
gap: 2px;
margin: 0;
padding: 0;
}
.navbar-custom-menu .headertopmenu > li { float: none; }
.navbar-custom-menu .headertopmenu > li > a,
.main-header .navbar .nav > li > a {
display: flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 8px;
border-radius: 10px;
line-height: 1;
}
.navbar-custom-menu .headertopmenu > li > a > i { font-size: 15px; }
/* Currency and language pickers. bootstrap-select gives its button a computed
width that truncates the label ("INR (" instead of "INR (Rs)"), so the width
is handed back to the content. */
.main-header .bootstrap-select { margin: 0; width: auto !important; }
.main-header .bootstrap-select > .btn,
.main-header .bootstrap-select > .dropdown-toggle {
height: 38px !important;
padding: 0 12px !important;
border-radius: 10px !important;
display: flex !important;
align-items: center;
gap: 6px;
width: auto !important;
font-size: 13px;
white-space: nowrap;
}
.main-header .bootstrap-select .filter-option {
position: static !important;
width: auto !important;
overflow: visible !important;
}
.main-header .bootstrap-select .filter-option-inner,
.main-header .bootstrap-select .filter-option-inner-inner {
overflow: visible !important;
white-space: nowrap;
width: auto !important;
}
.main-header .currency-icon-list img,
.main-header .langdiv img { max-height: 18px; width: auto; }
/* Subscription chip: a peer of the icons, not floating over them. */
.nova-sub-chip { margin: 0; flex: none; }
/* Avatar ------------------------------------------------------------------ */
.navbar-custom-menu .headertopmenu img,
.main-header .navbar .nav > li > a > img {
width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
}
/* --------------------------------------------------------------------------
Narrow screens: shed the optional pieces before anything can wrap.
-------------------------------------------------------------------------- */
@media (max-width: 1400px) {
.main-header .navbar-form.search-form { flex-basis: 240px; }
.main-header .sidebar-session { max-width: 240px; }
}
@media (max-width: 1150px) {
/* Below this the search cannot hold its minimum without squeezing the
actions, so it goes rather than shrinking into a stub. */
.main-header .navbar-form.search-form { display: none; }
}
@media (max-width: 991px) {
.nova-sub-chip span { display: none; }
.nova-sub-chip { padding: 0 11px; }
.main-header .langdiv { display: none; }
}
@media (max-width: 767px) {
.main-header .navbar { gap: 8px; padding-right: 8px; }
.main-header .sidebar-session { max-width: 150px; font-size: 14px; }
.main-header .navbar .pull-right { gap: 6px; }
}
/* Section 17 restyles the header search button for dark mode, and its
attribute selector outranks the pill rules above. Hand the button back to
the pill so the two do not render as separate controls. */
html[data-nova-theme="dark"] .main-header .navbar-form.search-form .input-group {
background: var(--nova-surface-2);
border-color: var(--nova-border);
}
html[data-nova-theme="dark"] .main-header .navbar-form .topsidesearchbtn,
html[data-nova-theme="dark"] .main-header .navbar-form #search-btn {
background: transparent !important;
border: 0 !important;
color: var(--nova-muted) !important;
}
html[data-nova-theme="dark"] .main-header .navbar-form .form-control.search-form3 {
background: transparent !important;
border: 0 !important;
color: var(--nova-text) !important;
}